diff options
Diffstat (limited to 'modern/src/reports/Graph.js')
-rw-r--r-- | modern/src/reports/Graph.js | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/modern/src/reports/Graph.js b/modern/src/reports/Graph.js new file mode 100644 index 00000000..af54e10e --- /dev/null +++ b/modern/src/reports/Graph.js @@ -0,0 +1,35 @@ +import React from 'react'; +import { Box, Paper } from '@material-ui/core'; +import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'; + +const CustomizedAxisTick = ({ x, y, payload }) =>{ + 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 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> + ); +} + +export default Graph; |