Fix issues with Highcharts module imports & Theme application where usedUseCases is used

AuroraLS3 · AuroraLS3 · commit f3fae0e15924 · 2025-08-17T19:42:28.000+03:00
diff --git a/Plan/react/dashboard/src/components/graphs/FunctionPlotGraph.jsx b/Plan/react/dashboard/src/components/graphs/FunctionPlotGraph.jsx
@@ -1,9 +1,9 @@
 import {useTranslation} from "react-i18next";
 import {useTheme} from "../../hooks/themeHook";
 import React, {useEffect} from "react";
-import Highcharts from "highcharts/highcharts";
-import "highcharts/modules/no-data-to-display";
-import "highcharts/modules/accessibility";
+import Highcharts from "highcharts/esm/highcharts";
+import "highcharts/esm/modules/no-data-to-display";
+import "highcharts/esm/modules/accessibility";
 import {localeService} from "../../service/localeService.js";
 
 const FunctionPlotGraph = ({
diff --git a/Plan/react/dashboard/src/components/graphs/GeolocationBarGraph.jsx b/Plan/react/dashboard/src/components/graphs/GeolocationBarGraph.jsx
@@ -1,9 +1,9 @@
 import React, {useEffect} from 'react';
 import {useTranslation} from "react-i18next";
 import {useTheme} from "../../hooks/themeHook";
-import Highcharts from "highcharts";
-import "highcharts/modules/no-data-to-display"
-import "highcharts/modules/accessibility";
+import Highcharts from "highcharts/esm/highcharts";
+import "highcharts/esm/modules/no-data-to-display"
+import "highcharts/esm/modules/accessibility";
 import {localeService, reverseRegionLookupMap} from "../../service/localeService.js";
 
 const GeolocationBarGraph = ({series}) => {
diff --git a/Plan/react/dashboard/src/components/graphs/GeolocationWorldMap.jsx b/Plan/react/dashboard/src/components/graphs/GeolocationWorldMap.jsx
@@ -1,10 +1,10 @@
 import React, {useEffect} from 'react';
 import {useTranslation} from "react-i18next";
 import {useTheme} from "../../hooks/themeHook";
-import Highcharts from 'highcharts/highmaps';
+import Highcharts from 'highcharts/esm/highmaps';
 import topology from '@highcharts/map-collection/custom/world.topo.json';
-import "highcharts/modules/accessibility";
-import "highcharts/modules/no-data-to-display";
+import "highcharts/esm/modules/accessibility";
+import "highcharts/esm/modules/no-data-to-display";
 import {calculateCssHexColor} from "../../util/colors.js";
 import {localeService} from "../../service/localeService.js";
 
diff --git a/Plan/react/dashboard/src/components/graphs/Graph.jsx b/Plan/react/dashboard/src/components/graphs/Graph.jsx
@@ -1,10 +1,10 @@
 import {useTheme} from "../../hooks/themeHook";
 import React, {useEffect} from "react";
-import Highcharts from "highcharts/highstock";
-import "highcharts/modules/accessibility";
-import "highcharts/highcharts-more";
-import "highcharts/modules/dumbbell";
-import "highcharts/modules/no-data-to-display";
+import Highcharts from "highcharts/esm/highstock";
+import "highcharts/esm/modules/accessibility";
+import "highcharts/esm/highcharts-more";
+import "highcharts/esm/modules/dumbbell";
+import "highcharts/esm/modules/no-data-to-display";
 import {useTranslation} from "react-i18next";
 import {localeService} from "../../service/localeService.js";
 
diff --git a/Plan/react/dashboard/src/components/graphs/GroupBarGraph.jsx b/Plan/react/dashboard/src/components/graphs/GroupBarGraph.jsx
@@ -2,9 +2,9 @@ import React, {useEffect} from 'react';
 import {useTranslation} from "react-i18next";
 import {useTheme} from "../../hooks/themeHook";
 import {withReducedSaturation} from "../../util/colors";
-import Highcharts from "highcharts";
-import "highcharts/modules/accessibility";
-import "highcharts/modules/no-data-to-display"
+import Highcharts from "highcharts/esm/highcharts";
+import "highcharts/esm/modules/accessibility";
+import "highcharts/esm/modules/no-data-to-display"
 
 const GroupBarGraph = ({id, groups, colors, horizontal, name}) => {
     const {t} = useTranslation();
diff --git a/Plan/react/dashboard/src/components/graphs/GroupPie.jsx b/Plan/react/dashboard/src/components/graphs/GroupPie.jsx
@@ -2,9 +2,9 @@ import React, {useEffect} from 'react';
 import {useTranslation} from "react-i18next";
 import {useTheme} from "../../hooks/themeHook";
 import {withReducedSaturation} from "../../util/colors";
-import Highcharts from "highcharts";
-import "highcharts/modules/accessibility";
-import "highcharts/modules/no-data-to-display"
+import Highcharts from "highcharts/esm/highcharts";
+import "highcharts/esm/modules/accessibility";
+import "highcharts/esm/modules/no-data-to-display"
 
 const GroupPie = ({id, groups, colors, name}) => {
     const {t} = useTranslation();
diff --git a/Plan/react/dashboard/src/components/graphs/JoinAddressGraph.jsx b/Plan/react/dashboard/src/components/graphs/JoinAddressGraph.jsx
@@ -2,9 +2,9 @@ import React, {useEffect} from 'react';
 import {useTranslation} from "react-i18next";
 import {useTheme} from "../../hooks/themeHook";
 import {withReducedSaturation} from "../../util/colors";
-import Highcharts from "highcharts/highstock";
-import "highcharts/modules/no-data-to-display";
-import "highcharts/modules/accessibility";
+import Highcharts from "highcharts/esm/highstock";
+import "highcharts/esm/modules/no-data-to-display";
+import "highcharts/esm/modules/accessibility";
 import {translateLinegraphButtons} from "../../util/graphs";
 import {localeService} from "../../service/localeService.js";
 
diff --git a/Plan/react/dashboard/src/components/graphs/LineGraph.jsx b/Plan/react/dashboard/src/components/graphs/LineGraph.jsx
@@ -1,9 +1,9 @@
 import {useTheme} from "../../hooks/themeHook";
 import React, {useEffect, useState} from "react";
 import {translateLinegraphButtons} from "../../util/graphs";
-import Highcharts from "highcharts/highstock";
-import "highcharts/modules/no-data-to-display";
-import "highcharts/modules/accessibility"
+import Highcharts from "highcharts/esm/highstock";
+import "highcharts/esm/modules/no-data-to-display";
+import "highcharts/esm/modules/accessibility"
 import {useTranslation} from "react-i18next";
 import {useMetadata} from "../../hooks/metadataHook";
 import {localeService} from "../../service/localeService.js";
diff --git a/Plan/react/dashboard/src/components/graphs/PlayerbaseGraph.jsx b/Plan/react/dashboard/src/components/graphs/PlayerbaseGraph.jsx
@@ -1,9 +1,9 @@
 import {useTranslation} from "react-i18next";
 import React, {useEffect} from "react";
 import {useTheme} from "../../hooks/themeHook";
-import Highcharts from "highcharts/highstock";
-import "highcharts/modules/no-data-to-display";
-import "highcharts/modules/accessibility";
+import Highcharts from "highcharts/esm/highstock";
+import "highcharts/esm/modules/no-data-to-display";
+import "highcharts/esm/modules/accessibility";
 import {nameToCssVariable, withReducedSaturation} from "../../util/colors";
 import {formatDateWithPreferences, useDatePreferences} from "../text/FormattedDate.jsx";
 import {localeService} from "../../service/localeService.js";
diff --git a/Plan/react/dashboard/src/components/graphs/PunchCard.jsx b/Plan/react/dashboard/src/components/graphs/PunchCard.jsx
@@ -1,7 +1,7 @@
 import React, {useEffect} from "react";
-import Highcharts from 'highcharts';
-import "highcharts/modules/accessibility";
-import "highcharts/modules/no-data-to-display"
+import Highcharts from 'highcharts/esm/highcharts';
+import "highcharts/esm/modules/accessibility";
+import "highcharts/esm/modules/no-data-to-display"
 import {useTheme} from "../../hooks/themeHook";
 import {useTranslation} from "react-i18next";
 import {localeService} from "../../service/localeService.js";
diff --git a/Plan/react/dashboard/src/components/graphs/ServerPie.jsx b/Plan/react/dashboard/src/components/graphs/ServerPie.jsx
@@ -1,7 +1,7 @@
 import React, {useEffect} from "react";
-import Highcharts from 'highcharts';
-import "highcharts/modules/no-data-to-display";
-import "highcharts/modules/accessibility";
+import Highcharts from 'highcharts/esm/highcharts';
+import "highcharts/esm/modules/no-data-to-display";
+import "highcharts/esm/modules/accessibility";
 
 import {useTheme} from "../../hooks/themeHook";
 import {withReducedSaturation} from "../../util/colors";
diff --git a/Plan/react/dashboard/src/components/graphs/WorldPie.jsx b/Plan/react/dashboard/src/components/graphs/WorldPie.jsx
@@ -1,8 +1,8 @@
 import React, {useEffect} from "react";
-import Highcharts from 'highcharts';
-import "highcharts/modules/accessibility";
-import 'highcharts/modules/drilldown';
-import "highcharts/modules/no-data-to-display"
+import Highcharts from 'highcharts/esm/highcharts';
+import "highcharts/esm/modules/accessibility";
+import 'highcharts/esm/modules/drilldown';
+import "highcharts/esm/modules/no-data-to-display"
 
 import {useTheme} from "../../hooks/themeHook";
 import {nameToCssVariable, withReducedSaturation} from "../../util/colors";
@@ -22,6 +22,7 @@ const WorldPie = ({id, worldSeries, gmSeries}) => {
     const {usedUseCases} = useThemeStorage();
 
     const gmPieColors = usedUseCases?.graphs?.pie?.drilldown?.map(nameToCssVariable) || [];
+    console.log(usedUseCases, gmPieColors);
 
     useEffect(() => {
         const reduceColors = (series) => {
diff --git a/Plan/react/dashboard/src/components/graphs/performance/AllPerformanceGraph.jsx b/Plan/react/dashboard/src/components/graphs/performance/AllPerformanceGraph.jsx
@@ -1,9 +1,9 @@
 import React, {useCallback, useEffect, useState} from 'react';
 
 import {tooltip, translateLinegraphButtons} from "../../../util/graphs";
-import Highcharts from "highcharts/highstock";
-import "highcharts/modules/no-data-to-display"
-import "highcharts/modules/accessibility";
+import Highcharts from "highcharts/esm/highstock";
+import "highcharts/esm/modules/no-data-to-display"
+import "highcharts/esm/modules/accessibility";
 import {useTranslation} from "react-i18next";
 import {useTheme} from "../../../hooks/themeHook";
 import {withReducedSaturation} from "../../../util/colors";
diff --git a/Plan/react/dashboard/src/components/graphs/performance/CpuRamPerformanceGraph.jsx b/Plan/react/dashboard/src/components/graphs/performance/CpuRamPerformanceGraph.jsx
@@ -1,9 +1,9 @@
 import React, {useEffect, useState} from 'react';
 
 import {tooltip, translateLinegraphButtons} from "../../../util/graphs";
-import Highcharts from "highcharts/highstock";
-import "highcharts/modules/no-data-to-display"
-import "highcharts/modules/accessibility";
+import Highcharts from "highcharts/esm/highstock";
+import "highcharts/esm/modules/no-data-to-display"
+import "highcharts/esm/modules/accessibility";
 import {useTranslation} from "react-i18next";
 import {useTheme} from "../../../hooks/themeHook";
 import {useMetadata} from "../../../hooks/metadataHook";
diff --git a/Plan/react/dashboard/src/components/graphs/performance/DiskPerformanceGraph.jsx b/Plan/react/dashboard/src/components/graphs/performance/DiskPerformanceGraph.jsx
@@ -1,9 +1,9 @@
 import React, {useEffect, useState} from 'react';
 
 import {tooltip, translateLinegraphButtons} from "../../../util/graphs";
-import Highcharts from "highcharts/highstock";
-import "highcharts/modules/no-data-to-display"
-import "highcharts/modules/accessibility";
+import Highcharts from "highcharts/esm/highstock";
+import "highcharts/esm/modules/no-data-to-display"
+import "highcharts/esm/modules/accessibility";
 import {useTranslation} from "react-i18next";
 import {useTheme} from "../../../hooks/themeHook";
 import {useMetadata} from "../../../hooks/metadataHook";
diff --git a/Plan/react/dashboard/src/components/graphs/performance/PingGraph.jsx b/Plan/react/dashboard/src/components/graphs/performance/PingGraph.jsx
@@ -1,9 +1,9 @@
 import React, {useEffect} from 'react';
 
 import {tooltip, translateLinegraphButtons} from "../../../util/graphs";
-import Highcharts from "highcharts/highstock";
-import "highcharts/modules/no-data-to-display"
-import "highcharts/modules/accessibility";
+import Highcharts from "highcharts/esm/highstock";
+import "highcharts/esm/modules/no-data-to-display"
+import "highcharts/esm/modules/accessibility";
 import {useTranslation} from "react-i18next";
 import {useTheme} from "../../../hooks/themeHook";
 import {useMetadata} from "../../../hooks/metadataHook";
diff --git a/Plan/react/dashboard/src/components/graphs/performance/TpsPerformanceGraph.jsx b/Plan/react/dashboard/src/components/graphs/performance/TpsPerformanceGraph.jsx
@@ -1,9 +1,9 @@
 import React, {useEffect, useState} from 'react';
 
 import {tooltip, translateLinegraphButtons} from "../../../util/graphs";
-import Highcharts from "highcharts/highstock";
-import "highcharts/modules/no-data-to-display"
-import "highcharts/modules/accessibility";
+import Highcharts from "highcharts/esm/highstock";
+import "highcharts/esm/modules/no-data-to-display"
+import "highcharts/esm/modules/accessibility";
 import {useTranslation} from "react-i18next";
 import {useTheme} from "../../../hooks/themeHook";
 import {useMetadata} from "../../../hooks/metadataHook";
diff --git a/Plan/react/dashboard/src/components/graphs/performance/WorldPerformanceGraph.jsx b/Plan/react/dashboard/src/components/graphs/performance/WorldPerformanceGraph.jsx
@@ -1,9 +1,9 @@
 import React, {useEffect, useState} from 'react';
 
 import {tooltip, translateLinegraphButtons} from "../../../util/graphs";
-import Highcharts from "highcharts/highstock";
-import "highcharts/modules/no-data-to-display"
-import "highcharts/modules/accessibility";
+import Highcharts from "highcharts/esm/highstock";
+import "highcharts/esm/modules/no-data-to-display"
+import "highcharts/esm/modules/accessibility";
 import {useTranslation} from "react-i18next";
 import {useTheme} from "../../../hooks/themeHook";
 import {useMetadata} from "../../../hooks/metadataHook";
diff --git a/Plan/react/dashboard/src/hooks/context/themeContextHook.jsx b/Plan/react/dashboard/src/hooks/context/themeContextHook.jsx
@@ -5,6 +5,7 @@ import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
 import {faExclamationTriangle} from "@fortawesome/free-solid-svg-icons";
 import {useAlertPopupContext} from "./alertPopupContext.jsx";
 import {Trans} from "react-i18next";
+import {mergeUseCases} from "../../util/mutator.js";
 
 const ThemeStorageContext = createContext({});
 
@@ -127,8 +128,8 @@ export const ThemeStorageContextProvider = ({children}) => {
             currentNightColors,
             currentUseCases,
             currentNightModeUseCases,
-            usedColors: theme.nightModeEnabled ? currentColors : {...currentColors, ...currentNightColors},
-            usedUseCases: theme.nightModeEnabled ? currentUseCases : {...currentUseCases, ...currentNightModeUseCases},
+            usedColors: theme.nightModeEnabled ? {...currentColors, ...currentNightColors} : currentColors,
+            usedUseCases: theme.nightModeEnabled ? mergeUseCases(currentUseCases, currentNightModeUseCases) : currentUseCases,
             cloneThemeLocally, saveUploadedThemeLocally, deleteThemeLocally, reloadTheme
         }
     }, [name, color, currentColors, currentNightColors, currentUseCases, currentNightModeUseCases, loaded, error, theme.nightModeEnabled]);
