Bump highcharts from 9.3.3 to 10.2.0 in /Plan/react/dashboard (#2463)

* Bump highcharts from 9.3.3 to 10.2.0 in /Plan/react/dashboard

Bumps [highcharts](https://github.com/highcharts/highcharts-dist) from 9.3.3 to 10.2.0.
- [Release notes](https://github.com/highcharts/highcharts-dist/releases)
- [Commits](https://github.com/highcharts/highcharts-dist/compare/v9.3.3...v10.2.0)

---
updated-dependencies:
- dependency-name: highcharts
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* Add highcharts accessibility module to all charts

* Add missing dependency to useCallback

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Aurora Lahtela <24460436+AuroraLS3@users.noreply.github.com>

Plan/react/dashboard/package.json

@@ -22,7 +22,7 @@
     "datatables.net": "^1.12.1",
     "datatables.net-bs5": "^1.12.1",
     "datatables.net-responsive-bs5": "^2.3.0",
-    "highcharts": "^9.3.2",
+    "highcharts": "^10.2.0",
     "i18next": "^21.9.1",
     "i18next-chained-backend": "^3.0.2",
     "i18next-http-backend": "^1.4.1",

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

@@ -3,6 +3,7 @@ import {useTranslation} from "react-i18next";
 import {useTheme} from "../../hooks/themeHook";
 import {withReducedSaturation} from "../../util/colors";
 import Highcharts from "highcharts";
+import Accessibility from "highcharts/modules/accessibility";
 
 const GeolocationBarGraph = ({series, color}) => {
     const {t} = useTranslation();
@@ -17,6 +18,7 @@ const GeolocationBarGraph = ({series, color}) => {
             data: bars
         };
 
+        Accessibility(Highcharts);
         Highcharts.setOptions(graphTheming);
         Highcharts.chart("countryBarChart", {
             chart: {type: 'bar'},

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

@@ -4,6 +4,7 @@ import {useTheme} from "../../hooks/themeHook";
 import {withReducedSaturation} from "../../util/colors";
 import Highcharts from 'highcharts/highmaps.js';
 import map from '@highcharts/map-collection/custom/world.geo.json';
+import Accessibility from "highcharts/modules/accessibility";
 
 const GeolocationWorldMap = ({series, colors}) => {
     const {t} = useTranslation();
@@ -18,6 +19,7 @@ const GeolocationWorldMap = ({series, colors}) => {
             joinBy: ['iso-a3', 'code']
         };
 
+        Accessibility(Highcharts);
         Highcharts.setOptions(graphTheming);
         Highcharts.mapChart('countryWorldMap', {
             chart: {

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

@@ -3,6 +3,7 @@ import React, {useEffect} from "react";
 import {linegraphButtons} from "../../util/graphs";
 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";
 
 const LineGraph = ({id, series}) => {
@@ -11,6 +12,7 @@ const LineGraph = ({id, series}) => {
 
     useEffect(() => {
         NoDataDisplay(Highcharts);
+        Accessibility(Highcharts);
         Highcharts.setOptions({lang: {noData: t('html.label.noDataToDisplay')}})
         Highcharts.setOptions(graphTheming);
         Highcharts.stockChart(id, {

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

@@ -4,6 +4,7 @@ import {useTheme} from "../../hooks/themeHook";
 import NoDataDisplay from "highcharts/modules/no-data-to-display";
 import Highcharts from "highcharts/highstock";
 import {withReducedSaturation} from "../../util/colors";
+import Accessibility from "highcharts/modules/accessibility";
 
 const PlayerbaseGraph = ({data}) => {
     const {t} = useTranslation()
@@ -17,6 +18,7 @@ const PlayerbaseGraph = ({data}) => {
         });
 
         NoDataDisplay(Highcharts);
+        Accessibility(Highcharts);
         Highcharts.setOptions({lang: {noData: t('html.label.noDataToDisplay')}})
         Highcharts.setOptions(graphTheming);
 

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

@@ -3,6 +3,7 @@ import Highcharts from 'highcharts';
 import {useTheme} from "../../hooks/themeHook";
 import {withReducedSaturation} from "../../util/colors";
 import {useTranslation} from "react-i18next";
+import Accessibility from "highcharts/modules/accessibility";
 
 const PlayerbasePie = ({series}) => {
     const {t} = useTranslation();
@@ -19,6 +20,7 @@ const PlayerbasePie = ({series}) => {
             data: nightModeEnabled ? reduceColors(series) : series
         };
 
+        Accessibility(Highcharts);
         Highcharts.setOptions(graphTheming);
         Highcharts.chart('playerbase-pie', {
             chart: {

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

@@ -2,6 +2,7 @@ import React, {useEffect} from "react";
 import Highcharts from 'highcharts';
 import {useTheme} from "../../hooks/themeHook";
 import {useTranslation} from "react-i18next";
+import Accessibility from "highcharts/modules/accessibility";
 
 const PunchCard = ({series}) => {
     const {t} = useTranslation();
@@ -12,6 +13,7 @@ const PunchCard = ({series}) => {
             color: '#222',
             data: series
         };
+        Accessibility(Highcharts);
         Highcharts.setOptions(graphTheming);
         setTimeout(() => Highcharts.chart('punchcard', {
             chart: {

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

@@ -5,6 +5,7 @@ import {formatTimeAmount} from '../../util/formatters'
 import {useTheme} from "../../hooks/themeHook";
 import {withReducedSaturation} from "../../util/colors";
 import {useTranslation} from "react-i18next";
+import Accessibility from "highcharts/modules/accessibility";
 
 const ServerPie = ({colors, series}) => {
     const {t} = useTranslation();
@@ -20,6 +21,7 @@ const ServerPie = ({colors, series}) => {
             data: series
         };
 
+        Accessibility(Highcharts);
         Highcharts.setOptions(graphTheming);
         Highcharts.chart('server-pie', {
             chart: {

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

@@ -7,6 +7,7 @@ import {useTheme} from "../../hooks/themeHook";
 import {withReducedSaturation} from "../../util/colors";
 import {useMetadata} from "../../hooks/metadataHook";
 import {useTranslation} from "react-i18next";
+import Accessibility from "highcharts/modules/accessibility";
 
 const WorldPie = ({id, worldSeries, gmSeries}) => {
     const {t} = useTranslation();
@@ -33,6 +34,7 @@ const WorldPie = ({id, worldSeries, gmSeries}) => {
 
         const defaultTitle = '';
         const defaultSubtitle = t('html.text.clickToExpand');
+        Accessibility(Highcharts);
         Highcharts.setOptions(graphTheming);
         setTimeout(() => {
             const chart = Highcharts.chart(id, {

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

@@ -6,6 +6,7 @@ import NoDataDisplay from "highcharts/modules/no-data-to-display"
 import {useTranslation} from "react-i18next";
 import {useTheme} from "../../../hooks/themeHook";
 import {withReducedSaturation} from "../../../util/colors";
+import Accessibility from "highcharts/modules/accessibility";
 
 const yAxis = [
     {
@@ -151,6 +152,7 @@ const AllPerformanceGraph = ({id, data, dataSeries}) => {
         };
 
         NoDataDisplay(Highcharts);
+        Accessibility(Highcharts);
         Highcharts.setOptions({lang: {noData: t('html.label.noDataToDisplay')}})
         Highcharts.setOptions(graphTheming);
         Highcharts.stockChart(id, {

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

@@ -6,6 +6,7 @@ import NoDataDisplay from "highcharts/modules/no-data-to-display"
 import {useTranslation} from "react-i18next";
 import {useTheme} from "../../../hooks/themeHook";
 import {withReducedSaturation} from "../../../util/colors";
+import Accessibility from "highcharts/modules/accessibility";
 
 const CpuRamPerformanceGraph = ({id, data, dataSeries}) => {
     const {t} = useTranslation();
@@ -40,6 +41,7 @@ const CpuRamPerformanceGraph = ({id, data, dataSeries}) => {
         };
 
         NoDataDisplay(Highcharts);
+        Accessibility(Highcharts);
         Highcharts.setOptions({lang: {noData: t('html.label.noDataToDisplay')}})
         Highcharts.setOptions(graphTheming);
         Highcharts.stockChart(id, {

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

@@ -6,6 +6,7 @@ import NoDataDisplay from "highcharts/modules/no-data-to-display"
 import {useTranslation} from "react-i18next";
 import {useTheme} from "../../../hooks/themeHook";
 import {withReducedSaturation} from "../../../util/colors";
+import Accessibility from "highcharts/modules/accessibility";
 
 const DiskPerformanceGraph = ({id, data, dataSeries}) => {
     const {t} = useTranslation();
@@ -37,6 +38,7 @@ const DiskPerformanceGraph = ({id, data, dataSeries}) => {
         };
 
         NoDataDisplay(Highcharts);
+        Accessibility(Highcharts);
         Highcharts.setOptions({lang: {noData: t('html.label.noDataToDisplay')}})
         Highcharts.setOptions(graphTheming);
         Highcharts.stockChart(id, {

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

@@ -6,6 +6,7 @@ import NoDataDisplay from "highcharts/modules/no-data-to-display"
 import {useTranslation} from "react-i18next";
 import {useTheme} from "../../../hooks/themeHook";
 import {withReducedSaturation} from "../../../util/colors";
+import Accessibility from "highcharts/modules/accessibility";
 
 const PingGraph = ({id, data}) => {
     const {t} = useTranslation();
@@ -39,6 +40,7 @@ const PingGraph = ({id, data}) => {
         };
 
         NoDataDisplay(Highcharts);
+        Accessibility(Highcharts);
         Highcharts.setOptions({lang: {noData: t('html.label.noDataToDisplay')}})
         Highcharts.setOptions(graphTheming);
         Highcharts.stockChart(id, {

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

@@ -6,6 +6,7 @@ import NoDataDisplay from "highcharts/modules/no-data-to-display"
 import {useTranslation} from "react-i18next";
 import {useTheme} from "../../../hooks/themeHook";
 import {withReducedSaturation} from "../../../util/colors";
+import Accessibility from "highcharts/modules/accessibility";
 
 const TpsPerformanceGraph = ({id, data, dataSeries}) => {
     const {t} = useTranslation();
@@ -46,6 +47,7 @@ const TpsPerformanceGraph = ({id, data, dataSeries}) => {
         };
 
         NoDataDisplay(Highcharts);
+        Accessibility(Highcharts);
         Highcharts.setOptions({lang: {noData: t('html.label.noDataToDisplay')}})
         Highcharts.setOptions(graphTheming);
         Highcharts.stockChart(id, {

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

@@ -6,6 +6,7 @@ import NoDataDisplay from "highcharts/modules/no-data-to-display"
 import {useTranslation} from "react-i18next";
 import {useTheme} from "../../../hooks/themeHook";
 import {withReducedSaturation} from "../../../util/colors";
+import Accessibility from "highcharts/modules/accessibility";
 
 const WorldPerformanceGraph = ({id, data, dataSeries}) => {
     const {t} = useTranslation();
@@ -40,6 +41,7 @@ const WorldPerformanceGraph = ({id, data, dataSeries}) => {
         };
 
         NoDataDisplay(Highcharts);
+        Accessibility(Highcharts);
         Highcharts.setOptions({lang: {noData: t('html.label.noDataToDisplay')}})
         Highcharts.setOptions(graphTheming);
         Highcharts.stockChart(id, {

Plan/react/dashboard/src/views/layout/LoginPage.js

@@ -47,11 +47,10 @@ const LoginForm = ({login}) => {
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
 
-    const onLogin = async event => {
+    const onLogin = useCallback(event => {
         event.preventDefault();
-        await login(username, password);
+        login(username, password).then(() => setPassword(''));
-        setPassword('');
+    }, [username, password, setPassword, login]);
-    }
 
     return (
         <form className="user">

Plan/react/dashboard/yarn.lock

@@ -4864,10 +4864,10 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-highcharts@^9.3.2:
+highcharts@^10.2.0:
-  version "9.3.3"
+  version "10.2.0"
-  resolved "https://registry.yarnpkg.com/highcharts/-/highcharts-9.3.3.tgz#ae62178de788fd7934431aa26b8e250b8073c541"
+  resolved "https://registry.yarnpkg.com/highcharts/-/highcharts-10.2.0.tgz#646b1c80fb4add9e35e5813bd87419ccdf1fc6b7"
-  integrity sha512-QeOvm6cifeZYYdTLm4IxZsXcOE9c4xqfs0z0OJJ0z7hhA9WG0rmcVAyuIp5HBl/znjA/ayYHmpYjBYD/9PG4Fg==
+  integrity sha512-MvLo4dzR2Vo7Y85dsqJ07uabBXSSIRKRRdW4l9IGP55h2jYWNm/m9JBszVVxySH5Lda6g+Ins9NdGppZJpjNCA==
 
 highlight.js@^10.4.1, highlight.js@~10.7.0:
   version "10.7.3"