diff options
author | Anton Tananaev <anton@traccar.org> | 2022-05-15 11:30:10 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2022-05-15 11:30:10 -0700 |
commit | 636181965da6d32ed966d20d259a27e297e7694f (patch) | |
tree | 8c7f59c0ed9a9c4909185f29f0d7edd3e9d97335 /modern/src/reports/components | |
parent | 63cf082bd077087e551d2946c3e2a48a605a3532 (diff) | |
download | trackermap-web-636181965da6d32ed966d20d259a27e297e7694f.tar.gz trackermap-web-636181965da6d32ed966d20d259a27e297e7694f.tar.bz2 trackermap-web-636181965da6d32ed966d20d259a27e297e7694f.zip |
Improve chart layout
Diffstat (limited to 'modern/src/reports/components')
-rw-r--r-- | modern/src/reports/components/Graph.js | 43 |
1 files changed, 0 insertions, 43 deletions
diff --git a/modern/src/reports/components/Graph.js b/modern/src/reports/components/Graph.js deleted file mode 100644 index 88b51493..00000000 --- a/modern/src/reports/components/Graph.js +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import { makeStyles } from '@material-ui/core'; -import { - LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, -} from 'recharts'; - -const CustomizedAxisTick = ({ x, y, payload }) => { - if (!payload.value) { - return payload.value; - } - const parts = payload.value.split(' '); - return ( - <g transform={`translate(${x},${y})`}> - <text x={0} y={0} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">{parts[0]}</text> - <text x={0} y={16} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">{parts[1]}</text> - </g> - ); -}; - -const useStyles = makeStyles((theme) => ({ - chart: { - backgroundColor: theme.palette.colors.white, - }, -})); - -const Graph = ({ type, items }) => { - const classes = useStyles(); - - return ( - <ResponsiveContainer height={400} width="100%" debounce={1} className={classes.chart}> - <LineChart data={items}> - <XAxis dataKey="fixTime" tick={<CustomizedAxisTick />} height={60} /> - <YAxis /> - <CartesianGrid strokeDasharray="3 3" /> - <Tooltip /> - <Legend /> - <Line type="natural" dataKey={type} /> - </LineChart> - </ResponsiveContainer> - ); -}; - -export default Graph; |