diff options
Diffstat (limited to 'modern/src/reports/Graph.js')
-rw-r--r-- | modern/src/reports/Graph.js | 31 |
1 files changed, 15 insertions, 16 deletions
diff --git a/modern/src/reports/Graph.js b/modern/src/reports/Graph.js index af54e10..990eb5d 100644 --- a/modern/src/reports/Graph.js +++ b/modern/src/reports/Graph.js @@ -1,8 +1,11 @@ import React from 'react'; -import { Box, Paper } from '@material-ui/core'; +import { withWidth } 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})`}> @@ -15,21 +18,17 @@ const CustomizedAxisTick = ({ x, y, payload }) =>{ const Graph = ({ type, items }) => { return ( - <Paper> - <Box height={400}> - <ResponsiveContainer> - <LineChart data={items}> - <XAxis dataKey="fixTime" tick={<CustomizedAxisTick/>} height={60} /> - <YAxis /> - <CartesianGrid strokeDasharray="3 3" /> - <Tooltip /> - <Legend /> - <Line type="natural" dataKey={type} /> - </LineChart> - </ResponsiveContainer> - </Box> - </Paper> + <ResponsiveContainer height={400} width="100%" debounce={1}> + <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; +export default withWidth()(Graph); |