aboutsummaryrefslogtreecommitdiff
path: root/modern/src/reports
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-05-08 14:00:11 -0700
committerAnton Tananaev <anton@traccar.org>2022-05-08 14:00:11 -0700
commit45790d7fe3f9a8e10f8d8620f8078356ea1b122c (patch)
treeba96982c4f8f71248f11b8a53d312905d3a50454 /modern/src/reports
parent2fe63fde05b4a3a2a6ac3a50ef28bfbc073b00ae (diff)
downloadtrackermap-web-45790d7fe3f9a8e10f8d8620f8078356ea1b122c.tar.gz
trackermap-web-45790d7fe3f9a8e10f8d8620f8078356ea1b122c.tar.bz2
trackermap-web-45790d7fe3f9a8e10f8d8620f8078356ea1b122c.zip
White background for chart
Diffstat (limited to 'modern/src/reports')
-rw-r--r--modern/src/reports/components/Graph.js36
1 files changed, 23 insertions, 13 deletions
diff --git a/modern/src/reports/components/Graph.js b/modern/src/reports/components/Graph.js
index 63d24eee..6620b3d0 100644
--- a/modern/src/reports/components/Graph.js
+++ b/modern/src/reports/components/Graph.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { withWidth } from '@material-ui/core';
+import { withWidth, makeStyles } from '@material-ui/core';
import {
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
} from 'recharts';
@@ -17,17 +17,27 @@ const CustomizedAxisTick = ({ x, y, payload }) => {
);
};
-const Graph = ({ type, items }) => (
- <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>
-);
+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 withWidth()(Graph);