Support highcharts v12 (#391)

anajavi · web-flow · commit d713eeafbb82 · 2024-12-04T12:32:32.000+02:00
* Support highcharts v12

* Add note about highcharts version 12 to warnings
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-perf": "^3.3.3",
-    "highcharts": "^11.4.8",
+    "highcharts": "^12.0.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.4.1",
diff --git a/packages/react-jsx-highcharts/package.json b/packages/react-jsx-highcharts/package.json
@@ -65,7 +65,7 @@
     "uuid": "^9.0.0 || ^10.0.0 || ^11.0.0"
   },
   "peerDependencies": {
-    "highcharts": "^9.1.2 || ^10.0.0 || ^11.0.0",
+    "highcharts": "^9.1.2 || ^10.0.0 || ^11.0.0 || ^12.0.1",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
diff --git a/packages/react-jsx-highcharts/src/utils/warnings.js b/packages/react-jsx-highcharts/src/utils/warnings.js
@@ -166,6 +166,7 @@ const logDetailedErrorMessage = (warning, modules) => {
     %c %cimport %cHighcharts %cfrom %c'highcharts'%c;
     ${importLines.join('\n')}
     %c
+    %c %c// For highcharts below version 12:
     %c %c// After imports, but before component - apply additional functionality from module${
       isMultiModule ? 's' : ''
     } to Highcharts
diff --git a/packages/react-jsx-highcharts/test/components/Axis/Axis.integration.spec.js b/packages/react-jsx-highcharts/test/components/Axis/Axis.integration.spec.js
@@ -1,15 +1,13 @@
 import * as React from 'react';
 import Highcharts from 'highcharts';
-import addAccessibility from 'highcharts/modules/accessibility';
+import 'highcharts/modules/accessibility';
 
 import { render } from '@testing-library/react';
 
 import { HighchartsChart, HighchartsProvider } from '../../../src';
 import Axis from '../../../src/components/Axis';
 import ContextSpy from '../../ContextSpy';
 
-addAccessibility(Highcharts);
-
 describe('<Axis /> integration', () => {
   describe('when rendered to document', () => {
     it('fires afterInit event', done => {
diff --git a/packages/react-jsx-highcharts/test/components/ColorAxis/ColorAxis.integration.spec.js b/packages/react-jsx-highcharts/test/components/ColorAxis/ColorAxis.integration.spec.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Highcharts from 'highcharts';
-import addColorAxis from 'highcharts/modules/coloraxis';
-import addAccessibility from 'highcharts/modules/accessibility';
+import 'highcharts/modules/coloraxis';
+import 'highcharts/modules/accessibility';
 
 import { render } from '@testing-library/react';
 
@@ -13,9 +13,6 @@ import YAxis from '../../../src/components/YAxis';
 import XAxis from '../../../src/components/XAxis';
 import ContextSpy from '../../ContextSpy';
 
-addColorAxis(Highcharts);
-addAccessibility(Highcharts);
-
 describe('<ColorAxis /> integration', () => {
   let chartRef;
 
diff --git a/packages/react-jsx-highcharts/test/components/PlotBandLine/PlotBand.integration.spec.js b/packages/react-jsx-highcharts/test/components/PlotBandLine/PlotBand.integration.spec.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Highcharts from 'highcharts';
-import addAccessibility from 'highcharts/modules/accessibility';
+import 'highcharts/modules/accessibility';
 
 import { render } from '@testing-library/react';
 
@@ -15,8 +15,6 @@ import {
 import { uuidRegex } from '../../test-utils';
 import ContextSpy from '../../ContextSpy';
 
-addAccessibility(Highcharts);
-
 describe('<PlotBand /> integration', () => {
   let axisRef;
   const DEFAULT_AXIS_LABELS = {};
diff --git a/packages/react-jsx-highcharts/test/components/PlotBandLine/PlotBandLineLabel.integration.spec.js b/packages/react-jsx-highcharts/test/components/PlotBandLine/PlotBandLineLabel.integration.spec.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Highcharts from 'highcharts';
-import addAccessibility from 'highcharts/modules/accessibility';
+import 'highcharts/modules/accessibility';
 
 import { render } from '@testing-library/react';
 
@@ -14,8 +14,6 @@ import {
 } from '../../../src';
 import ContextSpy from '../../ContextSpy';
 
-addAccessibility(Highcharts);
-
 describe('<PlotBandLineLabel /> integration', () => {
   let axisRef;
   const DEFAULT_SERIES_DATA = [1, 2, 3, 4, 5];
diff --git a/packages/react-jsx-highcharts/test/components/Series/Series.integration.spec.js b/packages/react-jsx-highcharts/test/components/Series/Series.integration.spec.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Highcharts from 'highcharts';
-import addAccessibility from 'highcharts/modules/accessibility';
+import 'highcharts/modules/accessibility';
 
 import { render } from '@testing-library/react';
 
@@ -15,8 +15,6 @@ import {
 
 import ContextSpy from '../../ContextSpy';
 
-addAccessibility(Highcharts);
-
 describe('<Series /> integration', () => {
   let Component;
   let seriesRef;
diff --git a/packages/react-jsx-highcharts/test/components/Series/SeriesTypes.integration.spec.js b/packages/react-jsx-highcharts/test/components/Series/SeriesTypes.integration.spec.js
@@ -2,29 +2,30 @@ import * as React from 'react';
 import Highcharts from 'highcharts';
 import ContextSpy from '../../ContextSpy';
 
-import addAccessibility from 'highcharts/modules/accessibility';
-
-import addHighchartsMore from 'highcharts/highcharts-more';
-//import addHighcharts3DModule from 'highcharts/highcharts-3d';
-import addBulletModule from 'highcharts/modules/bullet';
-import addFunnelModule from 'highcharts/modules/funnel';
-//import addCylinderModule from 'highcharts/modules/cylinder';
-import addHeatmapModule from 'highcharts/modules/heatmap';
-//import addHistogramBellCurveModule from 'highcharts/modules/histogram-bellcurve';
-import addNetworkGraphModule from 'highcharts/modules/networkgraph';
-//import addParetoModule from 'highcharts/modules/pareto';
-import addSankeyModule from 'highcharts/modules/sankey';
-import addSolidGaugeModule from 'highcharts/modules/solid-gauge';
-import addStreamGraphModule from 'highcharts/modules/streamgraph';
-import addSunburstModule from 'highcharts/modules/sunburst';
-import addTilemapModule from 'highcharts/modules/tilemap';
-import addTreemapModule from 'highcharts/modules/treemap';
-import addVariablePieModule from 'highcharts/modules/variable-pie';
-import addVariwideModule from 'highcharts/modules/variwide';
-import addVectorModule from 'highcharts/modules/vector';
-import addVennModule from 'highcharts/modules/venn';
-import addWindBarbModule from 'highcharts/modules/windbarb';
-import addXRangeModule from 'highcharts/modules/xrange';
+import 'highcharts/modules/accessibility';
+
+import 'highcharts/highcharts-more';
+//import 'highcharts/highcharts-3d';
+import 'highcharts/modules/bullet';
+import 'highcharts/modules/funnel';
+//impor 'highcharts/modules/cylinder';
+import 'highcharts/modules/heatmap';
+//import 'highcharts/modules/histogram-bellcurve';
+import 'highcharts/modules/networkgraph';
+//import 'highcharts/modules/pareto';
+import 'highcharts/modules/sankey';
+import 'highcharts/modules/solid-gauge';
+import 'highcharts/modules/streamgraph';
+import 'highcharts/modules/sunburst';
+import 'highcharts/modules/tilemap';
+import 'highcharts/modules/treemap';
+import 'highcharts/modules/variable-pie';
+import 'highcharts/modules/variwide';
+import 'highcharts/modules/vector';
+import 'highcharts/modules/venn';
+import 'highcharts/modules/datagrouping';
+import 'highcharts/modules/windbarb';
+import 'highcharts/modules/xrange';
 
 import { render } from '@testing-library/react';
 
@@ -38,30 +39,6 @@ import {
 
 import * as all from '../../../src';
 
-addAccessibility(Highcharts);
-
-addHighchartsMore(Highcharts);
-//addHighcharts3DModule(Highcharts);
-addBulletModule(Highcharts);
-//addCylinderModule(Highcharts);
-addFunnelModule(Highcharts);
-addHeatmapModule(Highcharts);
-//addHistogramBellCurveModule(Highcharts);
-addNetworkGraphModule(Highcharts);
-//addParetoModule(Highcharts);
-addSankeyModule(Highcharts);
-addSolidGaugeModule(Highcharts);
-addStreamGraphModule(Highcharts);
-addSunburstModule(Highcharts);
-addTilemapModule(Highcharts);
-addTreemapModule(Highcharts);
-addVariablePieModule(Highcharts);
-addVariwideModule(Highcharts);
-addVectorModule(Highcharts);
-addVennModule(Highcharts);
-addWindBarbModule(Highcharts);
-addXRangeModule(Highcharts);
-
 const skippedSeries = ['BarSeries'];
 const noAxisSeries = [
   'PieSeries',
diff --git a/packages/react-jsx-highcharts/test/components/WithSeriesType/index.spec.js b/packages/react-jsx-highcharts/test/components/WithSeriesType/index.spec.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Highcharts from 'highcharts';
-import addAccessibility from 'highcharts/modules/accessibility';
+import 'highcharts/modules/accessibility';
 
 import { render } from '@testing-library/react';
 
@@ -16,8 +16,6 @@ import withSeriesType from '../../../src/components/WithSeriesType';
 
 import ContextSpy from '../../ContextSpy';
 
-addAccessibility(Highcharts);
-
 describe('withSeriesType', () => {
   let ChartComponent;
   let seriesRef;
diff --git a/packages/react-jsx-highcharts/test/components/YAxis/YAxis.spec.js b/packages/react-jsx-highcharts/test/components/YAxis/YAxis.spec.js
@@ -1,15 +1,13 @@
 import * as React from 'react';
 import Highcharts from 'highcharts';
-import addAccessibility from 'highcharts/modules/accessibility';
+import 'highcharts/modules/accessibility';
 
 import { render } from '@testing-library/react';
 
 import { HighchartsChart, HighchartsProvider } from '../../../src';
 import YAxis from '../../../src/components/YAxis';
 import ContextSpy from '../../ContextSpy';
 
-addAccessibility(Highcharts);
-
 describe('<YAxis /> integration', () => {
   it('creates chart yaxis', () => {
     let chartRef = {};
diff --git a/packages/react-jsx-highcharts/test/components/ZAxis/ZAxis.spec.js b/packages/react-jsx-highcharts/test/components/ZAxis/ZAxis.spec.js
@@ -1,18 +1,15 @@
 import * as React from 'react';
 import Highcharts from 'highcharts';
-import addHighcharts3DModule from 'highcharts/highcharts-3d';
+import 'highcharts/highcharts-3d';
 
-import addAccessibility from 'highcharts/modules/accessibility';
+import 'highcharts/modules/accessibility';
 
 import { render } from '@testing-library/react';
 
 import { Highcharts3dChart, HighchartsProvider } from '../../../src';
 import ZAxis from '../../../src/components/ZAxis/ZAxis';
 import ContextSpy from '../../ContextSpy';
 
-addAccessibility(Highcharts);
-addHighcharts3DModule(Highcharts);
-
 describe('<ZAxis /> integration', () => {
   it('creates chart zaxis', () => {
     let chartRef = {};
diff --git a/packages/react-jsx-highcharts/test/utils/warnings.spec.js b/packages/react-jsx-highcharts/test/utils/warnings.spec.js
@@ -55,6 +55,7 @@ describe('utils/warnings', () => {
             "%c %cimport %cHighcharts %cfrom %c'highcharts'%c;\n" +
             "%c %cimport %caddSankeyModule %cfrom %c'highcharts/modules/sankey'%c;\n" +
             '%c\n' +
+            '%c %c// For highcharts below version 12:\n' +
             '%c %c// After imports, but before component - apply additional functionality from module to Highcharts\n' +
             '%c %caddSankeyModule%c(Highcharts);'
         ])
@@ -82,6 +83,7 @@ describe('utils/warnings', () => {
             "%c %cimport %caddFunnel3dModule %cfrom %c'highcharts/modules/funnel3d'%c;\n" +
             "%c %cimport %caddPyramid3dModule %cfrom %c'highcharts/modules/pyramid3d'%c;\n" +
             '%c\n' +
+            '%c %c// For highcharts below version 12:\n' +
             '%c %c// After imports, but before component - apply additional functionality from modules to Highcharts\n' +
             '%c %caddHighcharts3DModule%c(Highcharts);\n' +
             '%c %caddCylinderModule%c(Highcharts);\n' +
diff --git a/packages/react-jsx-highmaps/package.json b/packages/react-jsx-highmaps/package.json
@@ -48,7 +48,7 @@
     "react-jsx-highcharts": "5.0.1"
   },
   "peerDependencies": {
-    "highcharts": "^9.1.2 || ^10.0.0 || ^11.0.0",
+    "highcharts": "^9.1.2 || ^10.0.0 || ^11.0.0 || ^12.0.1",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
diff --git a/packages/react-jsx-highmaps/test/components/XAxis/XAxis.spec.js b/packages/react-jsx-highmaps/test/components/XAxis/XAxis.spec.js
@@ -1,15 +1,13 @@
 import * as React from 'react';
 import Highmaps from 'highcharts/highmaps';
-import addAccessibility from 'highcharts/modules/accessibility';
+import 'highcharts/modules/accessibility';
 
 import { render } from '@testing-library/react';
 
 import { HighchartsMapChart, HighmapsProvider } from '../../../src';
 import MapXAxis from '../../../src/components/XAxis';
 import ContextSpy from '../../ContextSpy';
 
-addAccessibility(Highmaps);
-
 describe('<XAxis /> integration', () => {
   it('creates map yaxis', () => {
     let chartRef = {};
diff --git a/packages/react-jsx-highmaps/test/components/YAxis/YAxis.spec.js b/packages/react-jsx-highmaps/test/components/YAxis/YAxis.spec.js
@@ -1,15 +1,13 @@
 import * as React from 'react';
 import Highmaps from 'highcharts/highmaps';
-import addAccessibility from 'highcharts/modules/accessibility';
+import 'highcharts/modules/accessibility';
 
 import { render } from '@testing-library/react';
 
 import { HighchartsMapChart, HighmapsProvider } from '../../../src';
 import MapYAxis from '../../../src/components/YAxis';
 import ContextSpy from '../../ContextSpy';
 
-addAccessibility(Highmaps);
-
 describe('<YAxis /> integration', () => {
   it('creates map yaxis', () => {
     let chartRef = {};
diff --git a/packages/react-jsx-highstock/package.json b/packages/react-jsx-highstock/package.json
@@ -65,7 +65,7 @@
     "react-jsx-highcharts": "5.0.1"
   },
   "peerDependencies": {
-    "highcharts": "^9.1.2 || ^10.0.0 || ^11.0.0",
+    "highcharts": "^9.1.2 || ^10.0.0 || ^11.0.0 || ^12.0.1",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
diff --git a/packages/react-jsx-highstock/test/components/Navigator/Navigator.integration.spec.js b/packages/react-jsx-highstock/test/components/Navigator/Navigator.integration.spec.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 
 import Highstock from 'highcharts/highstock';
-import addAccessibility from 'highcharts/modules/accessibility';
+import 'highcharts/modules/accessibility';
 
 import {
   Chart,
@@ -14,8 +14,6 @@ import {
 } from 'react-jsx-highcharts';
 import { HighchartsStockChart, Navigator } from '../../../src';
 
-addAccessibility(Highstock);
-
 describe('<Navigator /> integration', () => {
   describe('when mounted', () => {
     it('creates navigator on chart', () => {
diff --git a/packages/react-jsx-highstock/test/components/Navigator/NavigatorXAxis.integration.spec.js b/packages/react-jsx-highstock/test/components/Navigator/NavigatorXAxis.integration.spec.js
