55 lines
1.5 KiB
JavaScript
55 lines
1.5 KiB
JavaScript
import * as React from 'react';
|
|
import {inject, observer} from "mobx-react";
|
|
|
|
const {
|
|
LineChart,
|
|
AreaChart,
|
|
BarChart,
|
|
Bar,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
ReferenceLine,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
Legend,
|
|
Area,
|
|
ResponsiveContainer
|
|
} = require('recharts/umd/Recharts.min');
|
|
|
|
@inject('appstate')
|
|
@observer
|
|
export default class SimpleAreaChart extends React.Component {
|
|
constructor (props) {
|
|
super(props);
|
|
this.dashboardStore = props.appstate.dashboard;
|
|
this.userData = props.appstate.userData;
|
|
}
|
|
render() {
|
|
const data = [
|
|
{name: 'Jan', uv: 4000, pv: 2400, amt: 2400},
|
|
{name: 'Feb', uv: 3000, pv: 1398, amt: 2210},
|
|
{name: 'Mar', uv: 2000, pv: 9800, amt: 2290},
|
|
{name: 'Apr', uv: 2780, pv: 3908, amt: 2000},
|
|
{name: 'May', uv: 1890, pv: 4800, amt: 2181},
|
|
{name: 'Jun', uv: 2390, pv: 3800, amt: 2500},
|
|
{name: 'Jul', uv: 3490, pv: 4300, amt: 2100},
|
|
];
|
|
return (
|
|
<ResponsiveContainer>
|
|
<LineChart width={600} height={(this.userData.role === 'admin') ? 305 : 220} data={data}
|
|
margin={{top: 5, right: 30, left: 5, bottom: 5}}>
|
|
<XAxis dataKey="name" fontSize={10}/>
|
|
<YAxis fontSize={10} />
|
|
<CartesianGrid strokeDasharray="0.1 0.1"/>
|
|
<Tooltip/>
|
|
<Legend />
|
|
<Line type="natural" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
|
|
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|
|
|
|
}
|