Skip to content

Commit 69507ad

Browse files
AuroraLS3AuroraLS3
committed
Upgrade HighCharts to v12
Introduced a bug: No data display text doesn't show
1 parent 0e2c99c commit 69507ad

26 files changed

Lines changed: 196 additions & 134 deletions

‎Plan/react/dashboard/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"axios": "^1.11.0",
2828
"bootstrap": "^5.3.7",
2929
"export-to-csv": "^1.3.0",
30-
"highcharts": "^11.4.8",
30+
"highcharts": "^12.3.0",
3131
"i18next": "^25.3.6",
3232
"i18next-chained-backend": "^4.6.2",
3333
"i18next-http-backend": "^3.0.2",

‎Plan/react/dashboard/src/components/cards/common/GeolocationsCard.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import GeolocationWorldMap, {ProjectionOptions} from "../../graphs/GeolocationWo
88
import {CardLoader} from "../../navigation/Loader";
99
import ExtendableRow from "../../layout/extension/ExtendableRow";
1010
import Highcharts from "highcharts/highstock";
11+
import "highcharts/modules/accessibility";
12+
import "highcharts/modules/no-data-to-display"
1113
import {postQuery} from "../../../service/queryService";
1214
import {useMetadata} from "../../../hooks/metadataHook";
1315
import QueryPlayerListModal from "../../modal/QueryPlayerListModal";

‎Plan/react/dashboard/src/components/cards/query/QueryOptionsCard.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
1111
import {faGear, faSearch} from "@fortawesome/free-solid-svg-icons";
1212
import PlayersOnlineGraph from "../../graphs/PlayersOnlineGraph";
1313
import Highcharts from "highcharts/highstock";
14+
import "highcharts/modules/no-data-to-display"
15+
import "highcharts/modules/accessibility";
1416
import MultiSelect from "../../input/MultiSelect";
1517
import CollapseWithButton from "../../layout/CollapseWithButton";
1618
import FilterDropdown from "./FilterDropdown";

‎Plan/react/dashboard/src/components/cards/server/graphs/NetworkOnlineActivityGraphsCard.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ import {faCalendar} from "@fortawesome/free-regular-svg-icons";
2121
import ServerCalendar from "../../../calendar/ServerCalendar";
2222
import {postQuery} from "../../../../service/queryService";
2323
import Highcharts from "highcharts/highstock";
24+
import "highcharts/modules/no-data-to-display"
25+
import "highcharts/modules/accessibility";
2426
import QueryPlayerListModal from "../../../modal/QueryPlayerListModal";
2527

2628
const SingleProxyPlayersOnlineGraph = ({serverUUID}) => {

‎Plan/react/dashboard/src/components/cards/server/graphs/OnlineActivityGraphsCard.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ import ServerCalendar from "../../../calendar/ServerCalendar";
1919
import {ChartLoader} from "../../../navigation/Loader";
2020
import {useAuth} from "../../../../hooks/authenticationHook";
2121
import Highcharts from "highcharts/highstock";
22+
import "highcharts/modules/no-data-to-display"
23+
import "highcharts/modules/accessibility";
2224
import {postQuery} from "../../../../service/queryService";
2325
import QueryPlayerListModal from "../../../modal/QueryPlayerListModal";
2426
import {useMetadata} from "../../../../hooks/metadataHook";

‎Plan/react/dashboard/src/components/graphs/FunctionPlotGraph.jsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import {useTranslation} from "react-i18next";
22
import {useTheme} from "../../hooks/themeHook";
33
import React, {useEffect} from "react";
4-
import NoDataDisplay from "highcharts/modules/no-data-to-display";
54
import Highcharts from "highcharts/highcharts";
6-
import Accessibility from "highcharts/modules/accessibility";
5+
import "highcharts/modules/no-data-to-display";
6+
import "highcharts/modules/accessibility";
7+
import {localeService} from "../../service/localeService.js";
78

89
const FunctionPlotGraph = ({
910
id,
@@ -20,9 +21,12 @@ const FunctionPlotGraph = ({
2021
const {graphTheming, nightModeEnabled} = useTheme();
2122

2223
useEffect(() => {
23-
NoDataDisplay(Highcharts);
24-
Accessibility(Highcharts);
25-
Highcharts.setOptions({lang: {noData: t('html.label.noDataToDisplay')}})
24+
Highcharts.setOptions({
25+
lang: {
26+
locale: localeService.getIntlFriendlyLocale(),
27+
noData: t('html.label.noDataToDisplay')
28+
}
29+
})
2630
Highcharts.setOptions(graphTheming);
2731
Highcharts.chart(id, options ? options : {
2832
chart: {

‎Plan/react/dashboard/src/components/graphs/GeolocationBarGraph.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import React, {useEffect} from 'react';
22
import {useTranslation} from "react-i18next";
33
import {useTheme} from "../../hooks/themeHook";
44
import Highcharts from "highcharts";
5-
import Accessibility from "highcharts/modules/accessibility";
5+
import "highcharts/modules/no-data-to-display"
6+
import "highcharts/modules/accessibility";
67
import {localeService, reverseRegionLookupMap} from "../../service/localeService.js";
78

89
const GeolocationBarGraph = ({series}) => {
@@ -22,7 +23,6 @@ const GeolocationBarGraph = ({series}) => {
2223
data: bars
2324
};
2425

25-
Accessibility(Highcharts);
2626
Highcharts.setOptions(graphTheming);
2727
Highcharts.chart("countryBarChart", {
2828
chart: {

‎Plan/react/dashboard/src/components/graphs/GeolocationWorldMap.jsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import {useTranslation} from "react-i18next";
33
import {useTheme} from "../../hooks/themeHook";
44
import Highcharts from 'highcharts/highmaps';
55
import topology from '@highcharts/map-collection/custom/world.topo.json';
6-
import Accessibility from "highcharts/modules/accessibility";
7-
import NoDataDisplay from "highcharts/modules/no-data-to-display";
6+
import "highcharts/modules/accessibility";
7+
import "highcharts/modules/no-data-to-display";
88
import {calculateCssHexColor} from "../../util/colors.js";
9+
import {localeService} from "../../service/localeService.js";
910

1011
export const ProjectionOptions = {
1112
MILLER: "html.label.geoProjection.miller",
@@ -48,10 +49,13 @@ const GeolocationWorldMap = ({series, colors, projection, onClickCountry}) => {
4849
}
4950
};
5051

51-
NoDataDisplay(Highcharts);
52-
Accessibility(Highcharts);
5352
Highcharts.setOptions(graphTheming);
54-
Highcharts.setOptions({lang: {noData: t('html.label.noDataToDisplay')}});
53+
Highcharts.setOptions({
54+
lang: {
55+
locale: localeService.getIntlFriendlyLocale(),
56+
noData: t('html.label.noDataToDisplay')
57+
}
58+
});
5559
Highcharts.mapChart('countryWorldMap', {
5660
chart: {
5761
noData: t('html.label.noDataToDisplay'),

‎Plan/react/dashboard/src/components/graphs/Graph.jsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import {useTheme} from "../../hooks/themeHook";
22
import React, {useEffect} from "react";
33
import Highcharts from "highcharts/highstock";
4-
import HighchartsMore from "highcharts/highcharts-more";
5-
import Dumbbell from "highcharts/modules/dumbbell";
6-
import NoDataDisplay from "highcharts/modules/no-data-to-display"
7-
import Accessibility from "highcharts/modules/accessibility"
4+
import "highcharts/modules/accessibility";
5+
import "highcharts/highcharts-more";
6+
import "highcharts/modules/dumbbell";
7+
import "highcharts/modules/no-data-to-display";
88
import {useTranslation} from "react-i18next";
9+
import {localeService} from "../../service/localeService.js";
910

1011
const Graph = ({
1112
id,
@@ -16,11 +17,12 @@ const Graph = ({
1617
const {graphTheming, nightModeEnabled} = useTheme();
1718

1819
useEffect(() => {
19-
NoDataDisplay(Highcharts);
20-
Accessibility(Highcharts);
21-
HighchartsMore(Highcharts);
22-
Dumbbell(Highcharts);
23-
Highcharts.setOptions({lang: {noData: t('html.label.noDataToDisplay')}})
20+
Highcharts.setOptions({
21+
lang: {
22+
locale: localeService.getIntlFriendlyLocale(),
23+
noData: t('html.label.noDataToDisplay')
24+
}
25+
})
2426
Highcharts.setOptions(graphTheming);
2527
Highcharts.chart(id, options);
2628
}, [options, id, t,

‎Plan/react/dashboard/src/components/graphs/GroupBarGraph.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import {useTranslation} from "react-i18next";
33
import {useTheme} from "../../hooks/themeHook";
44
import {withReducedSaturation} from "../../util/colors";
55
import Highcharts from "highcharts";
6-
import Accessibility from "highcharts/modules/accessibility";
6+
import "highcharts/modules/accessibility";
7+
import "highcharts/modules/no-data-to-display"
78

89
const GroupBarGraph = ({id, groups, colors, horizontal, name}) => {
910
const {t} = useTranslation();
@@ -26,7 +27,6 @@ const GroupBarGraph = ({id, groups, colors, horizontal, name}) => {
2627
colors: getColors()
2728
};
2829

29-
Accessibility(Highcharts);
3030
Highcharts.setOptions(graphTheming);
3131
Highcharts.chart(id, {
3232
chart: {

0 commit comments

Comments
 (0)