From d713eeafbb82ba849efc14b2df6530df825072c6 Mon Sep 17 00:00:00 2001 From: anajavi Date: Wed, 4 Dec 2024 12:32:32 +0200 Subject: [PATCH] Support highcharts v12 (#391) * Support highcharts v12 * Add note about highcharts version 12 to warnings --- package-lock.json | 14 ++-- package.json | 2 +- packages/react-jsx-highcharts/package.json | 2 +- .../src/utils/warnings.js | 1 + .../components/Axis/Axis.integration.spec.js | 4 +- .../ColorAxis/ColorAxis.integration.spec.js | 7 +- .../PlotBandLine/PlotBand.integration.spec.js | 4 +- .../PlotBandLineLabel.integration.spec.js | 4 +- .../Series/Series.integration.spec.js | 4 +- .../Series/SeriesTypes.integration.spec.js | 71 +++++++------------ .../components/WithSeriesType/index.spec.js | 4 +- .../test/components/YAxis/YAxis.spec.js | 4 +- .../test/components/ZAxis/ZAxis.spec.js | 7 +- .../test/utils/warnings.spec.js | 2 + packages/react-jsx-highmaps/package.json | 2 +- .../test/components/XAxis/XAxis.spec.js | 4 +- .../test/components/YAxis/YAxis.spec.js | 4 +- packages/react-jsx-highstock/package.json | 2 +- .../Navigator/Navigator.integration.spec.js | 4 +- .../NavigatorXAxis.integration.spec.js | 4 +- 20 files changed, 52 insertions(+), 98 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1ff30fbf..92857173 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,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", @@ -6059,9 +6059,9 @@ } }, "node_modules/highcharts": { - "version": "11.4.8", - "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-11.4.8.tgz", - "integrity": "sha512-5Tke9LuzZszC4osaFisxLIcw7xgNGz4Sy3Jc9pRMV+ydm6sYqsPYdU8ELOgpzGNrbrRNDRBtveoR5xS3SzneEA==", + "version": "12.0.2", + "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-12.0.2.tgz", + "integrity": "sha512-DKZFNn2Mk3EUmOfJIvIgPqBjUoKDkDW9WY1nT9zrhfB9SSyg5yVbVEFrw267C4+Hzg4U1H/0i0Z6S3VYJwg6qQ==", "license": "https://www.highcharts.com/license" }, "node_modules/html-encoding-sniffer": { @@ -11052,7 +11052,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" } @@ -11064,7 +11064,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" } @@ -11076,7 +11076,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/package.json b/package.json index a38a762b..8882b136 100644 --- 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 index 0b401c2f..352017d6 100644 --- 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 index 5a0ded0a..efb2647b 100644 --- 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 index e3e05e0d..17d1a29e 100644 --- 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,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'; @@ -8,8 +8,6 @@ import { HighchartsChart, HighchartsProvider } from '../../../src'; import Axis from '../../../src/components/Axis'; import ContextSpy from '../../ContextSpy'; -addAccessibility(Highcharts); - describe(' 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 index e51b0812..1e3a64c3 100644 --- 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(' 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 index d2bf602d..434c2cd0 100644 --- 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(' 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 index 748cf99f..805fc1fe 100644 --- 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(' 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 index 2e779a94..99b1f450 100644 --- 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(' 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 index 5d70e01e..9293babe 100644 --- 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 index 19ac2623..fde50e79 100644 --- 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 index a7202f10..7a327b9f 100644 --- a/packages/react-jsx-highcharts/test/components/YAxis/YAxis.spec.js +++ b/packages/react-jsx-highcharts/test/components/YAxis/YAxis.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'; @@ -8,8 +8,6 @@ import { HighchartsChart, HighchartsProvider } from '../../../src'; import YAxis from '../../../src/components/YAxis'; import ContextSpy from '../../ContextSpy'; -addAccessibility(Highcharts); - describe(' 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 index fc5bb45f..d7ac5399 100644 --- a/packages/react-jsx-highcharts/test/components/ZAxis/ZAxis.spec.js +++ b/packages/react-jsx-highcharts/test/components/ZAxis/ZAxis.spec.js @@ -1,8 +1,8 @@ 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'; @@ -10,9 +10,6 @@ import { Highcharts3dChart, HighchartsProvider } from '../../../src'; import ZAxis from '../../../src/components/ZAxis/ZAxis'; import ContextSpy from '../../ContextSpy'; -addAccessibility(Highcharts); -addHighcharts3DModule(Highcharts); - describe(' 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 index abeb62a8..f3e76df5 100644 --- 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 index d5742692..4266f68e 100644 --- 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 index d0ecfad5..02faa96f 100644 --- a/packages/react-jsx-highmaps/test/components/XAxis/XAxis.spec.js +++ b/packages/react-jsx-highmaps/test/components/XAxis/XAxis.spec.js @@ -1,6 +1,6 @@ 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'; @@ -8,8 +8,6 @@ import { HighchartsMapChart, HighmapsProvider } from '../../../src'; import MapXAxis from '../../../src/components/XAxis'; import ContextSpy from '../../ContextSpy'; -addAccessibility(Highmaps); - describe(' 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 index 0f797dc9..2149b0b3 100644 --- a/packages/react-jsx-highmaps/test/components/YAxis/YAxis.spec.js +++ b/packages/react-jsx-highmaps/test/components/YAxis/YAxis.spec.js @@ -1,6 +1,6 @@ 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'; @@ -8,8 +8,6 @@ import { HighchartsMapChart, HighmapsProvider } from '../../../src'; import MapYAxis from '../../../src/components/YAxis'; import ContextSpy from '../../ContextSpy'; -addAccessibility(Highmaps); - describe(' integration', () => { it('creates map yaxis', () => { let chartRef = {}; diff --git a/packages/react-jsx-highstock/package.json b/packages/react-jsx-highstock/package.json index 2d9b0845..a2b7f231 100644 --- 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 index 234128a5..72c2520e 100644 --- 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(' 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 index 29cef446..ddd4da56 100644 --- a/packages/react-jsx-highstock/test/components/Navigator/NavigatorXAxis.integration.spec.js +++ b/packages/react-jsx-highstock/test/components/Navigator/NavigatorXAxis.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(' integration', () => { describe('when mounted', () => { it('passes additional props to navigators xAxis', () => {