@fanciers/echarts-react 0.0.3 → 0.0.5
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/dist/{index.d.ts → index.d.mts} +11 -9
- package/dist/{index.js → index.mjs} +35 -36
- package/package.json +24 -20
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
|
|
2
2
|
import React from "react";
|
|
3
|
-
import { LineSeriesOption, PieSeriesOption } from "echarts/charts";
|
|
4
3
|
import * as echarts from "echarts/core";
|
|
5
|
-
import { BarSeriesOption, BrushComponentOption, CalendarComponentOption, ComposeOption, DataZoomComponentOption, DatasetComponentOption, GeoComponentOption, GraphicComponentOption, GridComponentOption, LegendComponentOption, MarkAreaComponentOption, MarkLineComponentOption, MarkPointComponentOption, MatrixComponentOption, PolarComponentOption, ScatterSeriesOption, TimelineComponentOption, TitleComponentOption, ToolboxComponentOption, TooltipComponentOption, VisualMapComponentOption } from "echarts";
|
|
4
|
+
import { BarSeriesOption, BrushComponentOption, CalendarComponentOption, ComposeOption, DataZoomComponentOption, DatasetComponentOption, EffectScatterSeriesOption, GeoComponentOption, GraphSeriesOption, GraphicComponentOption, GridComponentOption, HeatmapSeriesOption, LegendComponentOption, LineSeriesOption, MarkAreaComponentOption, MarkLineComponentOption, MarkPointComponentOption, MatrixComponentOption, PieSeriesOption, PolarComponentOption, ScatterSeriesOption, SingleAxisComponentOption, TimelineComponentOption, TitleComponentOption, ToolboxComponentOption, TooltipComponentOption, VisualMapComponentOption } from "echarts";
|
|
6
5
|
import { ComponentOption } from "echarts/types/src/util/types.js";
|
|
7
6
|
|
|
8
7
|
//#region src/shared.d.ts
|
|
9
|
-
|
|
10
8
|
type EChartExt = Parameters<(typeof echarts)['use']>[0];
|
|
11
9
|
type Simplify<T> = { [K in keyof T]: T[K] } & {};
|
|
12
10
|
//#endregion
|
|
13
11
|
//#region src/charts.d.ts
|
|
14
|
-
interface ChartBaseProps<T extends readonly ChartComponentType
|
|
12
|
+
interface ChartBaseProps<T extends readonly ChartComponentType[]> {
|
|
15
13
|
className?: string;
|
|
16
14
|
style?: React.CSSProperties;
|
|
17
15
|
containerProps?: React.HTMLAttributes<HTMLDivElement>;
|
|
@@ -19,17 +17,20 @@ interface ChartBaseProps<T extends readonly ChartComponentType<any>[]> {
|
|
|
19
17
|
use?: EChartExt;
|
|
20
18
|
children?: React.ReactNode;
|
|
21
19
|
}
|
|
22
|
-
type
|
|
23
|
-
interface ChartComponentType<T extends ComponentOption> {
|
|
24
|
-
<U extends readonly ChartComponentType
|
|
20
|
+
type ResolveComponentOption<T extends ComponentOption | ChartComponentType> = T extends ComponentOption ? T : T extends ChartComponentType<infer P> ? P : never;
|
|
21
|
+
interface ChartComponentType<in T extends ComponentOption = any> {
|
|
22
|
+
<U extends readonly ChartComponentType[] = []>(props: ChartBaseProps<U> & echarts.EChartsCoreOption & Simplify<ComposeOption<ResolveComponentOption<T | U[number]>>> & {
|
|
25
23
|
ref?: React.Ref<echarts.ECharts>;
|
|
26
24
|
}): React.JSX.Element;
|
|
27
25
|
ext: EChartExt;
|
|
28
26
|
}
|
|
29
27
|
declare const BarChart: ChartComponentType<BarSeriesOption | GridComponentOption>;
|
|
28
|
+
declare const EffectScatterChart: ChartComponentType<GridComponentOption | EffectScatterSeriesOption>;
|
|
29
|
+
declare const GraphChart: ChartComponentType<GraphSeriesOption>;
|
|
30
|
+
declare const HeatmapChart: ChartComponentType<HeatmapSeriesOption>;
|
|
30
31
|
declare const LineChart: ChartComponentType<GridComponentOption | LineSeriesOption>;
|
|
31
32
|
declare const PieChart: ChartComponentType<PieSeriesOption>;
|
|
32
|
-
declare const ScatterChart: ChartComponentType<ScatterSeriesOption>;
|
|
33
|
+
declare const ScatterChart: ChartComponentType<GridComponentOption | ScatterSeriesOption>;
|
|
33
34
|
//#endregion
|
|
34
35
|
//#region src/components.d.ts
|
|
35
36
|
declare const Brush: (props: ComposeOption<BrushComponentOption>) => null;
|
|
@@ -44,6 +45,7 @@ declare const MarkLine: (props: ComposeOption<MarkLineComponentOption>) => null;
|
|
|
44
45
|
declare const MarkPoint: (props: ComposeOption<MarkPointComponentOption>) => null;
|
|
45
46
|
declare const Matrix: (props: ComposeOption<MatrixComponentOption>) => null;
|
|
46
47
|
declare const Polar: (props: ComposeOption<PolarComponentOption>) => null;
|
|
48
|
+
declare const SingleAxis: (props: ComposeOption<SingleAxisComponentOption>) => null;
|
|
47
49
|
declare const Timeline: (props: ComposeOption<TimelineComponentOption>) => null;
|
|
48
50
|
declare const Title: (props: ComposeOption<TitleComponentOption>) => null;
|
|
49
51
|
declare const Toolbox: (props: ComposeOption<ToolboxComponentOption>) => null;
|
|
@@ -53,4 +55,4 @@ declare const VisualMap: (props: ComposeOption<VisualMapComponentOption>) => nul
|
|
|
53
55
|
//#region src/features.d.ts
|
|
54
56
|
declare function AxisBreak(): null;
|
|
55
57
|
//#endregion
|
|
56
|
-
export { AxisBreak, BarChart, Brush, Calendar, CanvasRenderer, DataZoom, Dataset, Geo, Graphic, Legend, LineChart, MarkArea, MarkLine, MarkPoint, Matrix, PieChart, Polar, SVGRenderer, ScatterChart, Timeline, Title, Toolbox, Tooltip, VisualMap, echarts };
|
|
58
|
+
export { AxisBreak, BarChart, Brush, Calendar, CanvasRenderer, DataZoom, Dataset, EffectScatterChart, Geo, GraphChart, Graphic, HeatmapChart, Legend, LineChart, MarkArea, MarkLine, MarkPoint, Matrix, PieChart, Polar, SVGRenderer, ScatterChart, SingleAxis, Timeline, Title, Toolbox, Tooltip, VisualMap, echarts };
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
|
|
2
2
|
import React from "react";
|
|
3
|
-
import { BarChart as BarChart$1, LineChart as LineChart$1, PieChart as PieChart$1, ScatterChart as ScatterChart$1 } from "echarts/charts";
|
|
4
|
-
import { BrushComponent, CalendarComponent, DataZoomComponent, DatasetComponent, GeoComponent, GraphicComponent, GridComponent, LegendComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, MatrixComponent, PolarComponent, TimelineComponent, TitleComponent, ToolboxComponent, TooltipComponent, TransformComponent, VisualMapComponent } from "echarts/components";
|
|
3
|
+
import { BarChart as BarChart$1, EffectScatterChart as EffectScatterChart$1, GraphChart as GraphChart$1, HeatmapChart as HeatmapChart$1, LineChart as LineChart$1, PieChart as PieChart$1, ScatterChart as ScatterChart$1 } from "echarts/charts";
|
|
4
|
+
import { BrushComponent, CalendarComponent, DataZoomComponent, DatasetComponent, GeoComponent, GraphicComponent, GridComponent, LegendComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, MatrixComponent, PolarComponent, SingleAxisComponent, TimelineComponent, TitleComponent, ToolboxComponent, TooltipComponent, TransformComponent, VisualMapComponent } from "echarts/components";
|
|
5
5
|
import * as echarts from "echarts/core";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
import { AxisBreak as AxisBreak$1 } from "echarts/features";
|
|
8
|
-
|
|
9
8
|
//#region src/shared.tsx
|
|
10
9
|
const defaultSetOptionOpt = {
|
|
11
10
|
notMerge: false,
|
|
@@ -27,7 +26,6 @@ function useRegister(fn) {
|
|
|
27
26
|
isExecuted.current = true;
|
|
28
27
|
fn(echarts);
|
|
29
28
|
}
|
|
30
|
-
|
|
31
29
|
//#endregion
|
|
32
30
|
//#region src/charts.tsx
|
|
33
31
|
function assignForwardedRef(ref, value) {
|
|
@@ -36,12 +34,12 @@ function assignForwardedRef(ref, value) {
|
|
|
36
34
|
else ref.current = value;
|
|
37
35
|
}
|
|
38
36
|
function defineChart(ext) {
|
|
39
|
-
const ChartComponent = React.forwardRef(({ className, style, containerProps, compose, use, children
|
|
37
|
+
const ChartComponent = React.forwardRef(({ className, style, containerProps, compose, use, children, ...props }, ref) => {
|
|
40
38
|
const containerRef = React.useRef(null);
|
|
41
39
|
const chartRef = React.useRef(null);
|
|
42
40
|
const ctx = useInitialChartContext();
|
|
43
|
-
useRegister((echarts
|
|
44
|
-
echarts
|
|
41
|
+
useRegister((echarts) => {
|
|
42
|
+
echarts.use([
|
|
45
43
|
ext,
|
|
46
44
|
use,
|
|
47
45
|
compose?.map((comp) => comp.ext).flat() || []
|
|
@@ -76,18 +74,20 @@ function defineChart(ext) {
|
|
|
76
74
|
ChartComponent.ext = ext;
|
|
77
75
|
return ChartComponent;
|
|
78
76
|
}
|
|
79
|
-
const BarChart =
|
|
80
|
-
const
|
|
81
|
-
const
|
|
82
|
-
const
|
|
83
|
-
|
|
77
|
+
const BarChart = /*#__PURE__*/ defineChart([BarChart$1, GridComponent]);
|
|
78
|
+
const EffectScatterChart = /*#__PURE__*/ defineChart([EffectScatterChart$1, GridComponent]);
|
|
79
|
+
const GraphChart = /*#__PURE__*/ defineChart([GraphChart$1]);
|
|
80
|
+
const HeatmapChart = /*#__PURE__*/ defineChart([HeatmapChart$1]);
|
|
81
|
+
const LineChart = /*#__PURE__*/ defineChart([LineChart$1, GridComponent]);
|
|
82
|
+
const PieChart = /*#__PURE__*/ defineChart([PieChart$1]);
|
|
83
|
+
const ScatterChart = /*#__PURE__*/ defineChart([ScatterChart$1, GridComponent]);
|
|
84
84
|
//#endregion
|
|
85
85
|
//#region src/components.tsx
|
|
86
86
|
function defineComponent(ext) {
|
|
87
87
|
return function ChartComponent(props) {
|
|
88
88
|
const ctx = useChartContext();
|
|
89
|
-
useRegister((echarts
|
|
90
|
-
echarts
|
|
89
|
+
useRegister((echarts) => {
|
|
90
|
+
echarts.use(ext);
|
|
91
91
|
});
|
|
92
92
|
React.useLayoutEffect(() => {
|
|
93
93
|
ctx.options.push(props);
|
|
@@ -95,32 +95,31 @@ function defineComponent(ext) {
|
|
|
95
95
|
return null;
|
|
96
96
|
};
|
|
97
97
|
}
|
|
98
|
-
const Brush =
|
|
99
|
-
const Calendar =
|
|
100
|
-
const Dataset =
|
|
101
|
-
const DataZoom =
|
|
102
|
-
const Geo =
|
|
103
|
-
const Graphic =
|
|
104
|
-
const Legend =
|
|
105
|
-
const MarkArea =
|
|
106
|
-
const MarkLine =
|
|
107
|
-
const MarkPoint =
|
|
108
|
-
const Matrix =
|
|
109
|
-
const Polar =
|
|
110
|
-
const
|
|
111
|
-
const
|
|
112
|
-
const
|
|
113
|
-
const
|
|
114
|
-
const
|
|
115
|
-
|
|
98
|
+
const Brush = /*#__PURE__*/ defineComponent([BrushComponent]);
|
|
99
|
+
const Calendar = /*#__PURE__*/ defineComponent([CalendarComponent]);
|
|
100
|
+
const Dataset = /*#__PURE__*/ defineComponent([DatasetComponent, TransformComponent]);
|
|
101
|
+
const DataZoom = /*#__PURE__*/ defineComponent([DataZoomComponent]);
|
|
102
|
+
const Geo = /*#__PURE__*/ defineComponent([GeoComponent]);
|
|
103
|
+
const Graphic = /*#__PURE__*/ defineComponent([GraphicComponent]);
|
|
104
|
+
const Legend = /*#__PURE__*/ defineComponent(LegendComponent);
|
|
105
|
+
const MarkArea = /*#__PURE__*/ defineComponent(MarkAreaComponent);
|
|
106
|
+
const MarkLine = /*#__PURE__*/ defineComponent(MarkLineComponent);
|
|
107
|
+
const MarkPoint = /*#__PURE__*/ defineComponent(MarkPointComponent);
|
|
108
|
+
const Matrix = /*#__PURE__*/ defineComponent(MatrixComponent);
|
|
109
|
+
const Polar = /*#__PURE__*/ defineComponent(PolarComponent);
|
|
110
|
+
const SingleAxis = /*#__PURE__*/ defineComponent(SingleAxisComponent);
|
|
111
|
+
const Timeline = /*#__PURE__*/ defineComponent(TimelineComponent);
|
|
112
|
+
const Title = /*#__PURE__*/ defineComponent(TitleComponent);
|
|
113
|
+
const Toolbox = /*#__PURE__*/ defineComponent(ToolboxComponent);
|
|
114
|
+
const Tooltip = /*#__PURE__*/ defineComponent(TooltipComponent);
|
|
115
|
+
const VisualMap = /*#__PURE__*/ defineComponent(VisualMapComponent);
|
|
116
116
|
//#endregion
|
|
117
117
|
//#region src/features.tsx
|
|
118
118
|
function AxisBreak() {
|
|
119
|
-
useRegister((echarts
|
|
120
|
-
echarts
|
|
119
|
+
useRegister((echarts) => {
|
|
120
|
+
echarts.use(AxisBreak$1);
|
|
121
121
|
});
|
|
122
122
|
return null;
|
|
123
123
|
}
|
|
124
|
-
|
|
125
124
|
//#endregion
|
|
126
|
-
export { AxisBreak, BarChart, Brush, Calendar, CanvasRenderer, DataZoom, Dataset, Geo, Graphic, Legend, LineChart, MarkArea, MarkLine, MarkPoint, Matrix, PieChart, Polar, SVGRenderer, ScatterChart, Timeline, Title, Toolbox, Tooltip, VisualMap, echarts };
|
|
125
|
+
export { AxisBreak, BarChart, Brush, Calendar, CanvasRenderer, DataZoom, Dataset, EffectScatterChart, Geo, GraphChart, Graphic, HeatmapChart, Legend, LineChart, MarkArea, MarkLine, MarkPoint, Matrix, PieChart, Polar, SVGRenderer, ScatterChart, SingleAxis, Timeline, Title, Toolbox, Tooltip, VisualMap, echarts };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fanciers/echarts-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
4
|
"description": "ECharts <3 React",
|
|
5
5
|
"author": "Tmk <i@tmk.im>",
|
|
6
6
|
"keywords": [
|
|
@@ -18,38 +18,42 @@
|
|
|
18
18
|
],
|
|
19
19
|
"exports": {
|
|
20
20
|
".": {
|
|
21
|
-
"types": "./dist/index.d.
|
|
22
|
-
"default": "./dist/index.
|
|
21
|
+
"types": "./dist/index.d.mts",
|
|
22
|
+
"default": "./dist/index.mjs"
|
|
23
23
|
}
|
|
24
24
|
},
|
|
25
|
-
"
|
|
25
|
+
"main": "./dist/index.mjs",
|
|
26
|
+
"typings": "./dist/index.d.mts",
|
|
27
|
+
"homepage": "https://tmkx.github.io/echarts-react",
|
|
26
28
|
"repository": {
|
|
27
29
|
"url": "https://github.com/tmkx/echarts-react.git"
|
|
28
30
|
},
|
|
31
|
+
"dependencies": {
|
|
32
|
+
"echarts": "^6.1.0"
|
|
33
|
+
},
|
|
29
34
|
"devDependencies": {
|
|
30
|
-
"@
|
|
31
|
-
"@
|
|
32
|
-
"@storybook/
|
|
33
|
-
"@
|
|
34
|
-
"@types/
|
|
35
|
-
"@types/react": "^19.
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"typescript": "^5.9.2"
|
|
35
|
+
"@storybook/addon-docs": "10.4.3",
|
|
36
|
+
"@storybook/react": "10.4.3",
|
|
37
|
+
"@storybook/react-vite": "10.4.3",
|
|
38
|
+
"@types/node": "^25.9.2",
|
|
39
|
+
"@types/react": "^19.2.17",
|
|
40
|
+
"@types/react-dom": "^19.2.3",
|
|
41
|
+
"react": "^19.2.7",
|
|
42
|
+
"react-dom": "^19.2.7",
|
|
43
|
+
"storybook": "10.4.3",
|
|
44
|
+
"swr": "^2.4.1",
|
|
45
|
+
"tsdown": "^0.22.2",
|
|
46
|
+
"typescript": "^6.0.3",
|
|
47
|
+
"vite": "8.0.16",
|
|
48
|
+
"vitest": "^4.1.8"
|
|
45
49
|
},
|
|
46
50
|
"peerDependencies": {
|
|
47
|
-
"echarts": "^6.0.0",
|
|
48
51
|
"react": ">=18.0.0",
|
|
49
52
|
"react-dom": ">=18.0.0"
|
|
50
53
|
},
|
|
51
54
|
"scripts": {
|
|
52
55
|
"dev": "storybook dev",
|
|
56
|
+
"test": "vitest",
|
|
53
57
|
"lint": "tsc --noEmit"
|
|
54
58
|
}
|
|
55
59
|
}
|