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);