Add missing timezone offset to line graphs

Affects issues:
- Fixed #2780

Plan/common/src/main/java/com/djrapitops/plan/delivery/webserver/resolver/json/MetadataJSONResolver.java

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

Plan/react/dashboard/src/components/graphs/LineGraph.js

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

Plan/react/dashboard/src/components/graphs/TimeByTimeGraph.js

@@ -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/>
     )
 }
 

Plan/react/dashboard/src/components/graphs/performance/AllPerformanceGraph.js

@@ -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}>

Plan/react/dashboard/src/components/graphs/performance/CpuRamPerformanceGraph.js

@@ -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}>

Plan/react/dashboard/src/components/graphs/performance/DiskPerformanceGraph.js

@@ -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}>

Plan/react/dashboard/src/components/graphs/performance/PingGraph.js

@@ -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}>

Plan/react/dashboard/src/components/graphs/performance/TpsPerformanceGraph.js

@@ -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}>

Plan/react/dashboard/src/components/graphs/performance/WorldPerformanceGraph.js

@@ -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}>