Windy/traccar-web
1
0
Fork 0
mirror of https://github.com/traccar/traccar-web.git synced 2025-01-09 04:37:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix charts dark mode (fix #1288)

Browse Source
This commit is contained in:
Anton Tananaev 2024-10-30 12:30:13 -07:00
parent 363d8c31eb
commit 05981a295e
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/reports/ChartReportPage.jsx
View File

@ -1,7 +1,7 @@
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { import {
FormControl, InputLabel, Select, MenuItem, FormControl, InputLabel, Select, MenuItem, useTheme,
} from '@mui/material'; } from '@mui/material';
import { import {
CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis,
@ -21,6 +21,7 @@ import useReportStyles from './common/useReportStyles';
const ChartReportPage = () => { const ChartReportPage = () => {
const classes = useReportStyles(); const classes = useReportStyles();
const theme = useTheme();
const t = useTranslation(); const t = useTranslation();
const positionAttributes = usePositionAttributes(t); const positionAttributes = usePositionAttributes(t);
@ -141,6 +142,7 @@ const ChartReportPage = () => {
}} }}
> >
<XAxis <XAxis
stroke={theme.palette.text.primary}
dataKey={timeType} dataKey={timeType}
type="number" type="number"
tickFormatter={(value) => formatTime(value, 'time')} tickFormatter={(value) => formatTime(value, 'time')}
@ -148,16 +150,18 @@ const ChartReportPage = () => {
scale="time" scale="time"
/> />
<YAxis <YAxis
stroke={theme.palette.text.primary}
type="number" type="number"
tickFormatter={(value) => value.toFixed(2)} tickFormatter={(value) => value.toFixed(2)}
domain={[minValue - valueRange / 5, maxValue + valueRange / 5]} domain={[minValue - valueRange / 5, maxValue + valueRange / 5]}
/> />
<CartesianGrid strokeDasharray="3 3" /> <CartesianGrid stroke={theme.palette.divider} strokeDasharray="3 3" />
<Tooltip <Tooltip
contentStyle={{ backgroundColor: theme.palette.background.default, color: theme.palette.text.primary }}
formatter={(value, key) => [value, positionAttributes[key]?.name || key]} formatter={(value, key) => [value, positionAttributes[key]?.name || key]}
labelFormatter={(value) => formatTime(value, 'seconds')} labelFormatter={(value) => formatTime(value, 'seconds')}
/> />
<Line type="monotone" dataKey={type} /> <Line type="monotone" dataKey={type} stroke={theme.palette.primary.main} />
</LineChart> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>