@revivejs/react-highcharts 18.0.0 → 19.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -3
- package/dist/index.cjs +49 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +49 -1
- package/dist/index.js.map +1 -1
- package/package.json +12 -10
package/README.md
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
# @revivejs/react-highcharts
|
|
2
2
|
|
|
3
|
-
> A maintained **React
|
|
3
|
+
> A maintained **React 19 wrapper for Highcharts** with a thin component API, imperative ref access, `stockChart` support, and versioned live demos.
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@revivejs/react-highcharts)
|
|
6
6
|
[](https://www.npmjs.com/package/@revivejs/react-highcharts)
|
|
7
7
|
[](https://github.com/alexandroit/react-highcharts/blob/master/LICENSE)
|
|
8
|
-
[](https://react.dev)
|
|
9
9
|
[](https://www.highcharts.com)
|
|
10
10
|
|
|
11
11
|
**[Documentation & Live Demos](https://alexandroit.github.io/react-highcharts/)** | **[npm](https://www.npmjs.com/package/@revivejs/react-highcharts)** | **[Issues](https://github.com/alexandroit/react-highcharts/issues)** | **[Repository](https://github.com/alexandroit/react-highcharts)**
|
|
12
12
|
|
|
13
|
-
**Latest version:** `
|
|
13
|
+
**Latest version:** `19.0.1`
|
|
14
14
|
|
|
15
15
|
## Why this library?
|
|
16
16
|
|
|
@@ -27,6 +27,7 @@ That makes it easy to keep React in charge of composition while still using the
|
|
|
27
27
|
|
|
28
28
|
| Package version | React version | Highcharts version | Demo link |
|
|
29
29
|
| :---: | :---: | :---: | :--- |
|
|
30
|
+
| **19.0.1** | **19.2.x** | **12.5.x** | [React 19 demo](https://alexandroit.github.io/react-highcharts/react-19/) |
|
|
30
31
|
| **18.0.0** | **18.3.x** | **12.5.x** | [React 18 demo](https://alexandroit.github.io/react-highcharts/react-18/) |
|
|
31
32
|
| **17.0.0** | **17.0.x** | **12.5.x** | [React 17 demo](https://alexandroit.github.io/react-highcharts/react-17/) |
|
|
32
33
|
|
|
@@ -137,6 +138,15 @@ export function ControlledChart() {
|
|
|
137
138
|
|
|
138
139
|
## Changelog
|
|
139
140
|
|
|
141
|
+
### 19.0.1
|
|
142
|
+
- Improved responsive chart behavior in the published wrapper by reflowing on container resize
|
|
143
|
+
- Updated the React 17, 18, and 19 docs so charts and the event log stack cleanly across mobile and desktop layouts
|
|
144
|
+
|
|
145
|
+
### 19.0.0
|
|
146
|
+
- Updated the library line for React 19.2
|
|
147
|
+
- Added the `react-19` demo app and made it the latest docs line
|
|
148
|
+
- Kept the wrapper API aligned with the React 17 and 18 lines
|
|
149
|
+
|
|
140
150
|
### 18.0.0
|
|
141
151
|
- Updated the library line for React 18.3
|
|
142
152
|
- Added the `react-18` demo app and made it the latest docs line
|
package/dist/index.cjs
CHANGED
|
@@ -49,6 +49,7 @@ var Chart = (0, import_react2.forwardRef)(function Chart2({
|
|
|
49
49
|
const chartRef = (0, import_react2.useRef)(null);
|
|
50
50
|
const skipNextUpdateRef = (0, import_react2.useRef)(true);
|
|
51
51
|
const onReadyRef = (0, import_react2.useRef)(onChartReady);
|
|
52
|
+
const frameRef = (0, import_react2.useRef)(null);
|
|
52
53
|
onReadyRef.current = onChartReady;
|
|
53
54
|
(0, import_react2.useImperativeHandle)(
|
|
54
55
|
ref,
|
|
@@ -59,6 +60,10 @@ var Chart = (0, import_react2.forwardRef)(function Chart2({
|
|
|
59
60
|
[]
|
|
60
61
|
);
|
|
61
62
|
function destroyChart() {
|
|
63
|
+
if (frameRef.current !== null) {
|
|
64
|
+
cancelAnimationFrame(frameRef.current);
|
|
65
|
+
frameRef.current = null;
|
|
66
|
+
}
|
|
62
67
|
chartRef.current?.destroy();
|
|
63
68
|
chartRef.current = null;
|
|
64
69
|
}
|
|
@@ -78,12 +83,44 @@ var Chart = (0, import_react2.forwardRef)(function Chart2({
|
|
|
78
83
|
});
|
|
79
84
|
skipNextUpdateRef.current = true;
|
|
80
85
|
}
|
|
86
|
+
function scheduleReflow() {
|
|
87
|
+
if (frameRef.current !== null) {
|
|
88
|
+
cancelAnimationFrame(frameRef.current);
|
|
89
|
+
}
|
|
90
|
+
frameRef.current = requestAnimationFrame(() => {
|
|
91
|
+
frameRef.current = null;
|
|
92
|
+
chartRef.current?.reflow();
|
|
93
|
+
});
|
|
94
|
+
}
|
|
81
95
|
useIsomorphicLayoutEffect(() => {
|
|
82
96
|
createChart();
|
|
83
97
|
return () => {
|
|
84
98
|
destroyChart();
|
|
85
99
|
};
|
|
86
100
|
}, [highcharts, constructorType]);
|
|
101
|
+
useIsomorphicLayoutEffect(() => {
|
|
102
|
+
const container = containerRef.current;
|
|
103
|
+
if (!container) {
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
106
|
+
const handleResize = () => {
|
|
107
|
+
scheduleReflow();
|
|
108
|
+
};
|
|
109
|
+
let resizeObserver = null;
|
|
110
|
+
if (typeof ResizeObserver !== "undefined") {
|
|
111
|
+
resizeObserver = new ResizeObserver(handleResize);
|
|
112
|
+
resizeObserver.observe(container);
|
|
113
|
+
}
|
|
114
|
+
window.addEventListener("resize", handleResize);
|
|
115
|
+
return () => {
|
|
116
|
+
if (frameRef.current !== null) {
|
|
117
|
+
cancelAnimationFrame(frameRef.current);
|
|
118
|
+
frameRef.current = null;
|
|
119
|
+
}
|
|
120
|
+
resizeObserver?.disconnect();
|
|
121
|
+
window.removeEventListener("resize", handleResize);
|
|
122
|
+
};
|
|
123
|
+
}, []);
|
|
87
124
|
useIsomorphicLayoutEffect(() => {
|
|
88
125
|
const chart = chartRef.current;
|
|
89
126
|
if (!chart) {
|
|
@@ -109,7 +146,18 @@ var Chart = (0, import_react2.forwardRef)(function Chart2({
|
|
|
109
146
|
updateArgs[1],
|
|
110
147
|
updateArgs[2]
|
|
111
148
|
]);
|
|
112
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
149
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
150
|
+
"div",
|
|
151
|
+
{
|
|
152
|
+
...containerProps,
|
|
153
|
+
ref: containerRef,
|
|
154
|
+
style: {
|
|
155
|
+
width: "100%",
|
|
156
|
+
minWidth: 0,
|
|
157
|
+
...containerProps?.style
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
);
|
|
113
161
|
});
|
|
114
162
|
|
|
115
163
|
// src/modules.ts
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Chart.tsx","../src/useIsomorphicLayoutEffect.ts","../src/modules.ts"],"sourcesContent":["export { Chart } from './Chart';\nexport type { ChartHandle, ChartProps, ConstructorType } from './Chart';\nexport { exposeHighchartsGlobals, initHighchartsModules } from './modules';\nexport type { HighchartsModuleFactory } from './modules';\n","import type Highcharts from 'highcharts';\nimport {\n forwardRef,\n useImperativeHandle,\n useRef,\n type HTMLAttributes\n} from 'react';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\nexport type ConstructorType = 'chart' | 'stockChart' | 'mapChart' | 'ganttChart';\n\nexport interface ChartHandle {\n chart: Highcharts.Chart | null;\n container: HTMLDivElement | null;\n}\n\nexport interface ChartProps {\n highcharts: typeof Highcharts;\n options: Highcharts.Options;\n constructorType?: ConstructorType;\n onChartReady?: (chart: Highcharts.Chart) => void;\n allowChartUpdate?: boolean;\n immutable?: boolean;\n updateArgs?: [\n redraw?: boolean,\n oneToOne?: boolean,\n animation?: boolean | Partial<Highcharts.AnimationOptionsObject>\n ];\n containerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\nexport const Chart = forwardRef<ChartHandle, ChartProps>(function Chart(\n {\n highcharts,\n options,\n constructorType = 'chart',\n onChartReady,\n allowChartUpdate = true,\n immutable = false,\n updateArgs = [true, true, true],\n containerProps\n },\n ref\n) {\n const containerRef = useRef<HTMLDivElement | null>(null);\n const chartRef = useRef<Highcharts.Chart | null>(null);\n const skipNextUpdateRef = useRef(true);\n const onReadyRef = useRef(onChartReady);\n\n onReadyRef.current = onChartReady;\n\n useImperativeHandle(\n ref,\n () => ({\n chart: chartRef.current,\n container: containerRef.current\n }),\n []\n );\n\n function destroyChart() {\n chartRef.current?.destroy();\n chartRef.current = null;\n }\n\n function createChart() {\n if (!containerRef.current) {\n return;\n }\n\n const factory = (highcharts as unknown as Record<string, unknown>)[constructorType];\n\n if (typeof factory !== 'function') {\n throw new Error(\n `Unknown Highcharts constructor \"${constructorType}\". ` +\n 'Make sure you passed the right Highcharts bundle.'\n );\n }\n\n destroyChart();\n\n chartRef.current = (\n factory as (\n container: HTMLElement,\n options: Highcharts.Options,\n callback?: (chart: Highcharts.Chart) => void\n ) => Highcharts.Chart\n )(containerRef.current, options, (chart) => {\n onReadyRef.current?.(chart);\n });\n\n skipNextUpdateRef.current = true;\n }\n\n useIsomorphicLayoutEffect(() => {\n createChart();\n\n return () => {\n destroyChart();\n };\n }, [highcharts, constructorType]);\n\n useIsomorphicLayoutEffect(() => {\n const chart = chartRef.current;\n\n if (!chart) {\n return;\n }\n\n if (skipNextUpdateRef.current) {\n skipNextUpdateRef.current = false;\n return;\n }\n\n if (immutable) {\n createChart();\n return;\n }\n\n if (!allowChartUpdate) {\n return;\n }\n\n chart.update(options, updateArgs[0], updateArgs[1], updateArgs[2]);\n }, [\n options,\n allowChartUpdate,\n immutable,\n updateArgs[0],\n updateArgs[1],\n updateArgs[2]\n ]);\n\n return <div
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Chart.tsx","../src/useIsomorphicLayoutEffect.ts","../src/modules.ts"],"sourcesContent":["export { Chart } from './Chart';\nexport type { ChartHandle, ChartProps, ConstructorType } from './Chart';\nexport { exposeHighchartsGlobals, initHighchartsModules } from './modules';\nexport type { HighchartsModuleFactory } from './modules';\n","import type Highcharts from 'highcharts';\nimport {\n forwardRef,\n useImperativeHandle,\n useRef,\n type HTMLAttributes\n} from 'react';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\nexport type ConstructorType = 'chart' | 'stockChart' | 'mapChart' | 'ganttChart';\n\nexport interface ChartHandle {\n chart: Highcharts.Chart | null;\n container: HTMLDivElement | null;\n}\n\nexport interface ChartProps {\n highcharts: typeof Highcharts;\n options: Highcharts.Options;\n constructorType?: ConstructorType;\n onChartReady?: (chart: Highcharts.Chart) => void;\n allowChartUpdate?: boolean;\n immutable?: boolean;\n updateArgs?: [\n redraw?: boolean,\n oneToOne?: boolean,\n animation?: boolean | Partial<Highcharts.AnimationOptionsObject>\n ];\n containerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\nexport const Chart = forwardRef<ChartHandle, ChartProps>(function Chart(\n {\n highcharts,\n options,\n constructorType = 'chart',\n onChartReady,\n allowChartUpdate = true,\n immutable = false,\n updateArgs = [true, true, true],\n containerProps\n },\n ref\n) {\n const containerRef = useRef<HTMLDivElement | null>(null);\n const chartRef = useRef<Highcharts.Chart | null>(null);\n const skipNextUpdateRef = useRef(true);\n const onReadyRef = useRef(onChartReady);\n const frameRef = useRef<number | null>(null);\n\n onReadyRef.current = onChartReady;\n\n useImperativeHandle(\n ref,\n () => ({\n chart: chartRef.current,\n container: containerRef.current\n }),\n []\n );\n\n function destroyChart() {\n if (frameRef.current !== null) {\n cancelAnimationFrame(frameRef.current);\n frameRef.current = null;\n }\n chartRef.current?.destroy();\n chartRef.current = null;\n }\n\n function createChart() {\n if (!containerRef.current) {\n return;\n }\n\n const factory = (highcharts as unknown as Record<string, unknown>)[constructorType];\n\n if (typeof factory !== 'function') {\n throw new Error(\n `Unknown Highcharts constructor \"${constructorType}\". ` +\n 'Make sure you passed the right Highcharts bundle.'\n );\n }\n\n destroyChart();\n\n chartRef.current = (\n factory as (\n container: HTMLElement,\n options: Highcharts.Options,\n callback?: (chart: Highcharts.Chart) => void\n ) => Highcharts.Chart\n )(containerRef.current, options, (chart) => {\n onReadyRef.current?.(chart);\n });\n\n skipNextUpdateRef.current = true;\n }\n\n function scheduleReflow() {\n if (frameRef.current !== null) {\n cancelAnimationFrame(frameRef.current);\n }\n\n frameRef.current = requestAnimationFrame(() => {\n frameRef.current = null;\n chartRef.current?.reflow();\n });\n }\n\n useIsomorphicLayoutEffect(() => {\n createChart();\n\n return () => {\n destroyChart();\n };\n }, [highcharts, constructorType]);\n\n useIsomorphicLayoutEffect(() => {\n const container = containerRef.current;\n\n if (!container) {\n return;\n }\n\n const handleResize = () => {\n scheduleReflow();\n };\n\n let resizeObserver: ResizeObserver | null = null;\n\n if (typeof ResizeObserver !== 'undefined') {\n resizeObserver = new ResizeObserver(handleResize);\n resizeObserver.observe(container);\n }\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n if (frameRef.current !== null) {\n cancelAnimationFrame(frameRef.current);\n frameRef.current = null;\n }\n\n resizeObserver?.disconnect();\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n useIsomorphicLayoutEffect(() => {\n const chart = chartRef.current;\n\n if (!chart) {\n return;\n }\n\n if (skipNextUpdateRef.current) {\n skipNextUpdateRef.current = false;\n return;\n }\n\n if (immutable) {\n createChart();\n return;\n }\n\n if (!allowChartUpdate) {\n return;\n }\n\n chart.update(options, updateArgs[0], updateArgs[1], updateArgs[2]);\n }, [\n options,\n allowChartUpdate,\n immutable,\n updateArgs[0],\n updateArgs[1],\n updateArgs[2]\n ]);\n\n return (\n <div\n {...containerProps}\n ref={containerRef}\n style={{\n width: '100%',\n minWidth: 0,\n ...containerProps?.style\n }}\n />\n );\n});\n","import { useEffect, useLayoutEffect } from 'react';\n\nexport const useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n","import type Highcharts from 'highcharts';\n\nexport type HighchartsModuleFactory =\n | ((highcharts: typeof Highcharts) => void)\n | { default?: (highcharts: typeof Highcharts) => void };\n\ntype HighchartsGlobalScope = typeof globalThis & {\n Highcharts?: typeof Highcharts;\n _Highcharts?: typeof Highcharts;\n};\n\nconst appliedModules = new WeakMap<object, Set<unknown>>();\n\nexport function exposeHighchartsGlobals(highcharts: typeof Highcharts) {\n const scope = globalThis as HighchartsGlobalScope;\n\n scope.Highcharts = highcharts;\n scope._Highcharts = highcharts;\n}\n\nexport function initHighchartsModules(\n highcharts: typeof Highcharts,\n ...modules: HighchartsModuleFactory[]\n) {\n exposeHighchartsGlobals(highcharts);\n\n const registry = appliedModules.get(highcharts) ?? new Set<unknown>();\n\n for (const entry of modules) {\n const factory = (entry as { default?: (highcharts: typeof Highcharts) => void }).default ?? entry;\n\n if (registry.has(factory)) {\n continue;\n }\n\n if (typeof factory === 'function') {\n factory(highcharts);\n registry.add(factory);\n }\n }\n\n appliedModules.set(highcharts, registry);\n}\n"],"mappings":"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","names":["import_react","Chart"]}
|
package/dist/index.js
CHANGED
|
@@ -25,6 +25,7 @@ var Chart = forwardRef(function Chart2({
|
|
|
25
25
|
const chartRef = useRef(null);
|
|
26
26
|
const skipNextUpdateRef = useRef(true);
|
|
27
27
|
const onReadyRef = useRef(onChartReady);
|
|
28
|
+
const frameRef = useRef(null);
|
|
28
29
|
onReadyRef.current = onChartReady;
|
|
29
30
|
useImperativeHandle(
|
|
30
31
|
ref,
|
|
@@ -35,6 +36,10 @@ var Chart = forwardRef(function Chart2({
|
|
|
35
36
|
[]
|
|
36
37
|
);
|
|
37
38
|
function destroyChart() {
|
|
39
|
+
if (frameRef.current !== null) {
|
|
40
|
+
cancelAnimationFrame(frameRef.current);
|
|
41
|
+
frameRef.current = null;
|
|
42
|
+
}
|
|
38
43
|
chartRef.current?.destroy();
|
|
39
44
|
chartRef.current = null;
|
|
40
45
|
}
|
|
@@ -54,12 +59,44 @@ var Chart = forwardRef(function Chart2({
|
|
|
54
59
|
});
|
|
55
60
|
skipNextUpdateRef.current = true;
|
|
56
61
|
}
|
|
62
|
+
function scheduleReflow() {
|
|
63
|
+
if (frameRef.current !== null) {
|
|
64
|
+
cancelAnimationFrame(frameRef.current);
|
|
65
|
+
}
|
|
66
|
+
frameRef.current = requestAnimationFrame(() => {
|
|
67
|
+
frameRef.current = null;
|
|
68
|
+
chartRef.current?.reflow();
|
|
69
|
+
});
|
|
70
|
+
}
|
|
57
71
|
useIsomorphicLayoutEffect(() => {
|
|
58
72
|
createChart();
|
|
59
73
|
return () => {
|
|
60
74
|
destroyChart();
|
|
61
75
|
};
|
|
62
76
|
}, [highcharts, constructorType]);
|
|
77
|
+
useIsomorphicLayoutEffect(() => {
|
|
78
|
+
const container = containerRef.current;
|
|
79
|
+
if (!container) {
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
const handleResize = () => {
|
|
83
|
+
scheduleReflow();
|
|
84
|
+
};
|
|
85
|
+
let resizeObserver = null;
|
|
86
|
+
if (typeof ResizeObserver !== "undefined") {
|
|
87
|
+
resizeObserver = new ResizeObserver(handleResize);
|
|
88
|
+
resizeObserver.observe(container);
|
|
89
|
+
}
|
|
90
|
+
window.addEventListener("resize", handleResize);
|
|
91
|
+
return () => {
|
|
92
|
+
if (frameRef.current !== null) {
|
|
93
|
+
cancelAnimationFrame(frameRef.current);
|
|
94
|
+
frameRef.current = null;
|
|
95
|
+
}
|
|
96
|
+
resizeObserver?.disconnect();
|
|
97
|
+
window.removeEventListener("resize", handleResize);
|
|
98
|
+
};
|
|
99
|
+
}, []);
|
|
63
100
|
useIsomorphicLayoutEffect(() => {
|
|
64
101
|
const chart = chartRef.current;
|
|
65
102
|
if (!chart) {
|
|
@@ -85,7 +122,18 @@ var Chart = forwardRef(function Chart2({
|
|
|
85
122
|
updateArgs[1],
|
|
86
123
|
updateArgs[2]
|
|
87
124
|
]);
|
|
88
|
-
return /* @__PURE__ */ jsx(
|
|
125
|
+
return /* @__PURE__ */ jsx(
|
|
126
|
+
"div",
|
|
127
|
+
{
|
|
128
|
+
...containerProps,
|
|
129
|
+
ref: containerRef,
|
|
130
|
+
style: {
|
|
131
|
+
width: "100%",
|
|
132
|
+
minWidth: 0,
|
|
133
|
+
...containerProps?.style
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
);
|
|
89
137
|
});
|
|
90
138
|
|
|
91
139
|
// src/modules.ts
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Chart.tsx","../src/useIsomorphicLayoutEffect.ts","../src/modules.ts"],"sourcesContent":["import type Highcharts from 'highcharts';\nimport {\n forwardRef,\n useImperativeHandle,\n useRef,\n type HTMLAttributes\n} from 'react';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\nexport type ConstructorType = 'chart' | 'stockChart' | 'mapChart' | 'ganttChart';\n\nexport interface ChartHandle {\n chart: Highcharts.Chart | null;\n container: HTMLDivElement | null;\n}\n\nexport interface ChartProps {\n highcharts: typeof Highcharts;\n options: Highcharts.Options;\n constructorType?: ConstructorType;\n onChartReady?: (chart: Highcharts.Chart) => void;\n allowChartUpdate?: boolean;\n immutable?: boolean;\n updateArgs?: [\n redraw?: boolean,\n oneToOne?: boolean,\n animation?: boolean | Partial<Highcharts.AnimationOptionsObject>\n ];\n containerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\nexport const Chart = forwardRef<ChartHandle, ChartProps>(function Chart(\n {\n highcharts,\n options,\n constructorType = 'chart',\n onChartReady,\n allowChartUpdate = true,\n immutable = false,\n updateArgs = [true, true, true],\n containerProps\n },\n ref\n) {\n const containerRef = useRef<HTMLDivElement | null>(null);\n const chartRef = useRef<Highcharts.Chart | null>(null);\n const skipNextUpdateRef = useRef(true);\n const onReadyRef = useRef(onChartReady);\n\n onReadyRef.current = onChartReady;\n\n useImperativeHandle(\n ref,\n () => ({\n chart: chartRef.current,\n container: containerRef.current\n }),\n []\n );\n\n function destroyChart() {\n chartRef.current?.destroy();\n chartRef.current = null;\n }\n\n function createChart() {\n if (!containerRef.current) {\n return;\n }\n\n const factory = (highcharts as unknown as Record<string, unknown>)[constructorType];\n\n if (typeof factory !== 'function') {\n throw new Error(\n `Unknown Highcharts constructor \"${constructorType}\". ` +\n 'Make sure you passed the right Highcharts bundle.'\n );\n }\n\n destroyChart();\n\n chartRef.current = (\n factory as (\n container: HTMLElement,\n options: Highcharts.Options,\n callback?: (chart: Highcharts.Chart) => void\n ) => Highcharts.Chart\n )(containerRef.current, options, (chart) => {\n onReadyRef.current?.(chart);\n });\n\n skipNextUpdateRef.current = true;\n }\n\n useIsomorphicLayoutEffect(() => {\n createChart();\n\n return () => {\n destroyChart();\n };\n }, [highcharts, constructorType]);\n\n useIsomorphicLayoutEffect(() => {\n const chart = chartRef.current;\n\n if (!chart) {\n return;\n }\n\n if (skipNextUpdateRef.current) {\n skipNextUpdateRef.current = false;\n return;\n }\n\n if (immutable) {\n createChart();\n return;\n }\n\n if (!allowChartUpdate) {\n return;\n }\n\n chart.update(options, updateArgs[0], updateArgs[1], updateArgs[2]);\n }, [\n options,\n allowChartUpdate,\n immutable,\n updateArgs[0],\n updateArgs[1],\n updateArgs[2]\n ]);\n\n return <div
|
|
1
|
+
{"version":3,"sources":["../src/Chart.tsx","../src/useIsomorphicLayoutEffect.ts","../src/modules.ts"],"sourcesContent":["import type Highcharts from 'highcharts';\nimport {\n forwardRef,\n useImperativeHandle,\n useRef,\n type HTMLAttributes\n} from 'react';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\nexport type ConstructorType = 'chart' | 'stockChart' | 'mapChart' | 'ganttChart';\n\nexport interface ChartHandle {\n chart: Highcharts.Chart | null;\n container: HTMLDivElement | null;\n}\n\nexport interface ChartProps {\n highcharts: typeof Highcharts;\n options: Highcharts.Options;\n constructorType?: ConstructorType;\n onChartReady?: (chart: Highcharts.Chart) => void;\n allowChartUpdate?: boolean;\n immutable?: boolean;\n updateArgs?: [\n redraw?: boolean,\n oneToOne?: boolean,\n animation?: boolean | Partial<Highcharts.AnimationOptionsObject>\n ];\n containerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\nexport const Chart = forwardRef<ChartHandle, ChartProps>(function Chart(\n {\n highcharts,\n options,\n constructorType = 'chart',\n onChartReady,\n allowChartUpdate = true,\n immutable = false,\n updateArgs = [true, true, true],\n containerProps\n },\n ref\n) {\n const containerRef = useRef<HTMLDivElement | null>(null);\n const chartRef = useRef<Highcharts.Chart | null>(null);\n const skipNextUpdateRef = useRef(true);\n const onReadyRef = useRef(onChartReady);\n const frameRef = useRef<number | null>(null);\n\n onReadyRef.current = onChartReady;\n\n useImperativeHandle(\n ref,\n () => ({\n chart: chartRef.current,\n container: containerRef.current\n }),\n []\n );\n\n function destroyChart() {\n if (frameRef.current !== null) {\n cancelAnimationFrame(frameRef.current);\n frameRef.current = null;\n }\n chartRef.current?.destroy();\n chartRef.current = null;\n }\n\n function createChart() {\n if (!containerRef.current) {\n return;\n }\n\n const factory = (highcharts as unknown as Record<string, unknown>)[constructorType];\n\n if (typeof factory !== 'function') {\n throw new Error(\n `Unknown Highcharts constructor \"${constructorType}\". ` +\n 'Make sure you passed the right Highcharts bundle.'\n );\n }\n\n destroyChart();\n\n chartRef.current = (\n factory as (\n container: HTMLElement,\n options: Highcharts.Options,\n callback?: (chart: Highcharts.Chart) => void\n ) => Highcharts.Chart\n )(containerRef.current, options, (chart) => {\n onReadyRef.current?.(chart);\n });\n\n skipNextUpdateRef.current = true;\n }\n\n function scheduleReflow() {\n if (frameRef.current !== null) {\n cancelAnimationFrame(frameRef.current);\n }\n\n frameRef.current = requestAnimationFrame(() => {\n frameRef.current = null;\n chartRef.current?.reflow();\n });\n }\n\n useIsomorphicLayoutEffect(() => {\n createChart();\n\n return () => {\n destroyChart();\n };\n }, [highcharts, constructorType]);\n\n useIsomorphicLayoutEffect(() => {\n const container = containerRef.current;\n\n if (!container) {\n return;\n }\n\n const handleResize = () => {\n scheduleReflow();\n };\n\n let resizeObserver: ResizeObserver | null = null;\n\n if (typeof ResizeObserver !== 'undefined') {\n resizeObserver = new ResizeObserver(handleResize);\n resizeObserver.observe(container);\n }\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n if (frameRef.current !== null) {\n cancelAnimationFrame(frameRef.current);\n frameRef.current = null;\n }\n\n resizeObserver?.disconnect();\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n useIsomorphicLayoutEffect(() => {\n const chart = chartRef.current;\n\n if (!chart) {\n return;\n }\n\n if (skipNextUpdateRef.current) {\n skipNextUpdateRef.current = false;\n return;\n }\n\n if (immutable) {\n createChart();\n return;\n }\n\n if (!allowChartUpdate) {\n return;\n }\n\n chart.update(options, updateArgs[0], updateArgs[1], updateArgs[2]);\n }, [\n options,\n allowChartUpdate,\n immutable,\n updateArgs[0],\n updateArgs[1],\n updateArgs[2]\n ]);\n\n return (\n <div\n {...containerProps}\n ref={containerRef}\n style={{\n width: '100%',\n minWidth: 0,\n ...containerProps?.style\n }}\n />\n );\n});\n","import { useEffect, useLayoutEffect } from 'react';\n\nexport const useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n","import type Highcharts from 'highcharts';\n\nexport type HighchartsModuleFactory =\n | ((highcharts: typeof Highcharts) => void)\n | { default?: (highcharts: typeof Highcharts) => void };\n\ntype HighchartsGlobalScope = typeof globalThis & {\n Highcharts?: typeof Highcharts;\n _Highcharts?: typeof Highcharts;\n};\n\nconst appliedModules = new WeakMap<object, Set<unknown>>();\n\nexport function exposeHighchartsGlobals(highcharts: typeof Highcharts) {\n const scope = globalThis as HighchartsGlobalScope;\n\n scope.Highcharts = highcharts;\n scope._Highcharts = highcharts;\n}\n\nexport function initHighchartsModules(\n highcharts: typeof Highcharts,\n ...modules: HighchartsModuleFactory[]\n) {\n exposeHighchartsGlobals(highcharts);\n\n const registry = appliedModules.get(highcharts) ?? new Set<unknown>();\n\n for (const entry of modules) {\n const factory = (entry as { default?: (highcharts: typeof Highcharts) => void }).default ?? entry;\n\n if (registry.has(factory)) {\n continue;\n }\n\n if (typeof factory === 'function') {\n factory(highcharts);\n registry.add(factory);\n }\n }\n\n appliedModules.set(highcharts, registry);\n}\n"],"mappings":"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","names":["Chart"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@revivejs/react-highcharts",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "A thin React
|
|
3
|
+
"version": "19.0.1",
|
|
4
|
+
"description": "A thin React 19 wrapper for Highcharts with versioned demos.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
7
7
|
"react-library",
|
|
@@ -46,25 +46,27 @@
|
|
|
46
46
|
"sideEffects": false,
|
|
47
47
|
"scripts": {
|
|
48
48
|
"build": "tsup",
|
|
49
|
-
"clean": "rm -rf dist docs/react-17 docs/react-18",
|
|
49
|
+
"clean": "rm -rf dist docs/react-17 docs/react-18 docs/react-19",
|
|
50
50
|
"docs:install:react-17": "cd docs-src/react-17 && npm install",
|
|
51
51
|
"docs:install:react-18": "cd docs-src/react-18 && npm install",
|
|
52
|
+
"docs:install:react-19": "cd docs-src/react-19 && npm install",
|
|
52
53
|
"build:docs:react-17": "cd docs-src/react-17 && npm run build",
|
|
53
54
|
"build:docs:react-18": "cd docs-src/react-18 && npm run build",
|
|
54
|
-
"build:docs": "npm run build
|
|
55
|
+
"build:docs:react-19": "cd docs-src/react-19 && npm run build",
|
|
56
|
+
"build:docs": "npm run build:docs:react-19",
|
|
55
57
|
"typecheck": "tsc --noEmit"
|
|
56
58
|
},
|
|
57
59
|
"peerDependencies": {
|
|
58
60
|
"highcharts": ">=12.5.0",
|
|
59
|
-
"react": ">=17.0.0 <
|
|
60
|
-
"react-dom": ">=17.0.0 <
|
|
61
|
+
"react": ">=17.0.0 <20.0.0",
|
|
62
|
+
"react-dom": ">=17.0.0 <20.0.0"
|
|
61
63
|
},
|
|
62
64
|
"devDependencies": {
|
|
63
|
-
"@types/react": "
|
|
64
|
-
"@types/react-dom": "
|
|
65
|
+
"@types/react": "19.2.14",
|
|
66
|
+
"@types/react-dom": "19.2.3",
|
|
65
67
|
"highcharts": "12.5.0",
|
|
66
|
-
"react": "
|
|
67
|
-
"react-dom": "
|
|
68
|
+
"react": "19.2.4",
|
|
69
|
+
"react-dom": "19.2.4",
|
|
68
70
|
"tsup": "8.5.1",
|
|
69
71
|
"typescript": "5.9.3"
|
|
70
72
|
}
|