Add missing timezone offset to line graphs

Affects issues:
- Fixed #2780
This commit is contained in:
Aurora Lahtela 2022-12-10 10:16:27 +02:00
parent e8c5a023fd
commit 34318be5c3
9 changed files with 61 additions and 9 deletions

View File

@ -77,6 +77,9 @@ public class MetadataJSONResolver implements NoAuthResolver {
return Response.builder()
.setJSONContent(Maps.builder(String.class, Object.class)
.put("timestamp", System.currentTimeMillis())
.put("timeZoneId", config.getTimeZone().getID())
.put("timeZoneOffsetHours", config.getTimeZoneOffsetHours())
.put("timeZoneOffsetMinutes", config.getTimeZoneOffsetHours() * 60)
.put("contributors", Contributors.getContributors())
.put("defaultTheme", config.get(DisplaySettings.THEME))
.put("gmPieColors", theme.getPieColors(ThemeVal.GRAPH_GM_PIE))

View File

@ -5,10 +5,22 @@ import Highcharts from "highcharts/highstock";
import NoDataDisplay from "highcharts/modules/no-data-to-display"
import Accessibility from "highcharts/modules/accessibility"
import {useTranslation} from "react-i18next";
import {useMetadata} from "../../hooks/metadataHook";
const LineGraph = ({id, series, legendEnabled, tall, yAxis, selectedRange, extremes, onSetExtremes}) => {
const LineGraph = ({
id,
series,
legendEnabled,
tall,
yAxis,
selectedRange,
extremes,
onSetExtremes,
alreadyOffsetTimezone
}) => {
const {t} = useTranslation()
const {graphTheming, nightModeEnabled} = useTheme();
const {timeZoneOffsetMinutes} = useMetadata();
const [graph, setGraph] = useState(undefined);
useEffect(() => {
@ -39,9 +51,16 @@ const LineGraph = ({id, series, legendEnabled, tall, yAxis, selectedRange, extre
legend: {
enabled: legendEnabled
},
time: {
timezoneOffset: alreadyOffsetTimezone ? 0 : timeZoneOffsetMinutes
},
series: series
}));
}, [series, graphTheming, id, t, nightModeEnabled, legendEnabled, yAxis, onSetExtremes, setGraph, selectedRange])
}, [series, id, t,
graphTheming, nightModeEnabled, alreadyOffsetTimezone, timeZoneOffsetMinutes,
legendEnabled, yAxis,
onSetExtremes, setGraph, selectedRange]);
useEffect(() => {
if (graph && graph.xAxis && graph.xAxis.length && extremes) {
graph.xAxis[0].setExtremes(extremes.min, extremes.max);

View File

@ -29,7 +29,7 @@ const TimeByTimeGraph = ({data}) => {
}, [data, t, nightModeEnabled])
return (
<LineGraph id="day-by-day-graph" series={series}/>
<LineGraph id="day-by-day-graph" series={series} alreadyOffsetTimezone/>
)
}

View File

@ -7,6 +7,7 @@ import {useTranslation} from "react-i18next";
import {useTheme} from "../../../hooks/themeHook";
import {withReducedSaturation} from "../../../util/colors";
import Accessibility from "highcharts/modules/accessibility";
import {useMetadata} from "../../../hooks/metadataHook";
const yAxis = [
{
@ -64,6 +65,7 @@ const yAxis = [
const AllPerformanceGraph = ({id, data, dataSeries}) => {
const {t} = useTranslation();
const {graphTheming, nightModeEnabled} = useTheme();
const {timeZoneOffsetMinutes} = useMetadata();
const onResize = useCallback(() => {
let chartElement = document.getElementById(id);
@ -170,9 +172,12 @@ const AllPerformanceGraph = ({id, data, dataSeries}) => {
legend: {
enabled: true
},
time: {
timezoneOffset: timeZoneOffsetMinutes
},
series: [series.playersOnline, series.tps, series.cpu, series.ram, series.entities, series.chunks]
});
}, [data, dataSeries, graphTheming, nightModeEnabled, id, t])
}, [data, dataSeries, graphTheming, nightModeEnabled, id, t, timeZoneOffsetMinutes])
return (
<div className="chart-area" style={{height: "450px"}} id={id}>

View File

@ -7,10 +7,12 @@ import {useTranslation} from "react-i18next";
import {useTheme} from "../../../hooks/themeHook";
import {withReducedSaturation} from "../../../util/colors";
import Accessibility from "highcharts/modules/accessibility";
import {useMetadata} from "../../../hooks/metadataHook";
const CpuRamPerformanceGraph = ({id, data, dataSeries}) => {
const {t} = useTranslation();
const {graphTheming, nightModeEnabled} = useTheme();
const {timeZoneOffsetMinutes} = useMetadata();
useEffect(() => {
const spline = 'spline'
@ -82,9 +84,12 @@ const CpuRamPerformanceGraph = ({id, data, dataSeries}) => {
legend: {
enabled: true
},
time: {
timezoneOffset: timeZoneOffsetMinutes
},
series: [series.playersOnline, series.cpu, series.ram]
});
}, [data, dataSeries, graphTheming, nightModeEnabled, id, t])
}, [data, dataSeries, graphTheming, nightModeEnabled, id, t, timeZoneOffsetMinutes])
return (
<div className="chart-area" style={{height: "450px"}} id={id}>

View File

@ -7,10 +7,12 @@ import {useTranslation} from "react-i18next";
import {useTheme} from "../../../hooks/themeHook";
import {withReducedSaturation} from "../../../util/colors";
import Accessibility from "highcharts/modules/accessibility";
import {useMetadata} from "../../../hooks/metadataHook";
const DiskPerformanceGraph = ({id, data, dataSeries}) => {
const {t} = useTranslation();
const {graphTheming, nightModeEnabled} = useTheme();
const {timeZoneOffsetMinutes} = useMetadata();
useEffect(() => {
const zones = {
@ -63,9 +65,12 @@ const DiskPerformanceGraph = ({id, data, dataSeries}) => {
legend: {
enabled: true
},
time: {
timezoneOffset: timeZoneOffsetMinutes
},
series: [series.disk]
});
}, [data, dataSeries, graphTheming, nightModeEnabled, id, t])
}, [data, dataSeries, graphTheming, nightModeEnabled, id, t, timeZoneOffsetMinutes])
return (
<div className="chart-area" style={{height: "450px"}} id={id}>

View File

@ -7,10 +7,12 @@ import {useTranslation} from "react-i18next";
import {useTheme} from "../../../hooks/themeHook";
import {withReducedSaturation} from "../../../util/colors";
import Accessibility from "highcharts/modules/accessibility";
import {useMetadata} from "../../../hooks/metadataHook";
const PingGraph = ({id, data}) => {
const {t} = useTranslation();
const {graphTheming, nightModeEnabled} = useTheme();
const {timeZoneOffsetMinutes} = useMetadata();
useEffect(() => {
const spline = 'spline'
@ -60,9 +62,12 @@ const PingGraph = ({id, data}) => {
legend: {
enabled: true
},
time: {
timezoneOffset: timeZoneOffsetMinutes
},
series: [series.avgPing, series.maxPing, series.minPing]
});
}, [data, graphTheming, nightModeEnabled, id, t])
}, [data, graphTheming, nightModeEnabled, id, t, timeZoneOffsetMinutes])
return (
<div className="chart-area" style={{height: "450px"}} id={id}>

View File

@ -7,10 +7,12 @@ import {useTranslation} from "react-i18next";
import {useTheme} from "../../../hooks/themeHook";
import {withReducedSaturation} from "../../../util/colors";
import Accessibility from "highcharts/modules/accessibility";
import {useMetadata} from "../../../hooks/metadataHook";
const TpsPerformanceGraph = ({id, data, dataSeries}) => {
const {t} = useTranslation();
const {graphTheming, nightModeEnabled} = useTheme();
const {timeZoneOffsetMinutes} = useMetadata();
useEffect(() => {
const zones = {
@ -79,9 +81,12 @@ const TpsPerformanceGraph = ({id, data, dataSeries}) => {
legend: {
enabled: true
},
time: {
timezoneOffset: timeZoneOffsetMinutes
},
series: [series.playersOnline, series.tps]
});
}, [data, dataSeries, graphTheming, nightModeEnabled, id, t])
}, [data, dataSeries, graphTheming, nightModeEnabled, id, t, timeZoneOffsetMinutes])
return (
<div className="chart-area" style={{height: "450px"}} id={id}>

View File

@ -7,10 +7,12 @@ import {useTranslation} from "react-i18next";
import {useTheme} from "../../../hooks/themeHook";
import {withReducedSaturation} from "../../../util/colors";
import Accessibility from "highcharts/modules/accessibility";
import {useMetadata} from "../../../hooks/metadataHook";
const WorldPerformanceGraph = ({id, data, dataSeries}) => {
const {t} = useTranslation();
const {graphTheming, nightModeEnabled} = useTheme();
const {timeZoneOffsetMinutes} = useMetadata();
useEffect(() => {
const spline = 'spline'
@ -81,9 +83,12 @@ const WorldPerformanceGraph = ({id, data, dataSeries}) => {
legend: {
enabled: true
},
time: {
timezoneOffset: timeZoneOffsetMinutes
},
series: [series.playersOnline, series.entities, series.chunks]
});
}, [data, dataSeries, graphTheming, nightModeEnabled, id, t])
}, [data, dataSeries, graphTheming, nightModeEnabled, id, t, timeZoneOffsetMinutes])
return (
<div className="chart-area" style={{height: "450px"}} id={id}>