62 lines
1.8 KiB
JavaScript
62 lines
1.8 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import { ResponsiveLine } from '@nivo/line';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
|
||
|
|
import Card from '../ui/Card';
|
||
|
|
|
||
|
|
const Statistics = props => (
|
||
|
|
<Card title="Statistics" subtitle="Today" bodyType="card-graph" refresh={props.refreshButton}>
|
||
|
|
{props.history ?
|
||
|
|
<ResponsiveLine
|
||
|
|
data={props.history}
|
||
|
|
margin={{
|
||
|
|
top: 50,
|
||
|
|
right: 40,
|
||
|
|
bottom: 80,
|
||
|
|
left: 80,
|
||
|
|
}}
|
||
|
|
minY="auto"
|
||
|
|
stacked={false}
|
||
|
|
curve='monotoneX'
|
||
|
|
axisBottom={{
|
||
|
|
orient: 'bottom',
|
||
|
|
tickSize: 5,
|
||
|
|
tickPadding: 5,
|
||
|
|
tickRotation: -45,
|
||
|
|
legend: 'time',
|
||
|
|
legendOffset: 50,
|
||
|
|
legendPosition: 'center',
|
||
|
|
}}
|
||
|
|
axisLeft={{
|
||
|
|
orient: 'left',
|
||
|
|
tickSize: 5,
|
||
|
|
tickPadding: 5,
|
||
|
|
tickRotation: 0,
|
||
|
|
legend: 'count',
|
||
|
|
legendOffset: -40,
|
||
|
|
legendPosition: 'center',
|
||
|
|
}}
|
||
|
|
enableArea={true}
|
||
|
|
dotSize={10}
|
||
|
|
dotColor="inherit:darker(0.3)"
|
||
|
|
dotBorderWidth={2}
|
||
|
|
dotBorderColor="#ffffff"
|
||
|
|
dotLabel="y"
|
||
|
|
dotLabelYOffset={-12}
|
||
|
|
animate={true}
|
||
|
|
motionStiffness={90}
|
||
|
|
motionDamping={15}
|
||
|
|
/>
|
||
|
|
:
|
||
|
|
<h2 className="text-muted">Empty data</h2>
|
||
|
|
}
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
|
||
|
|
Statistics.propTypes = {
|
||
|
|
history: PropTypes.array.isRequired,
|
||
|
|
refreshButton: PropTypes.node,
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Statistics;
|