@fanciers/echarts-react 0.0.1 → 0.0.3

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.
Files changed (4) hide show
  1. package/README.md +29 -0
  2. package/dist/index.d.ts +24 -18
  3. package/dist/index.js +21 -10
  4. package/package.json +11 -11
package/README.md CHANGED
@@ -1,3 +1,32 @@
1
1
  # @fanciers/echarts-react
2
2
 
3
3
  > Using ECharts in React the Idiomatic Way, with Treeshaking Support! 🍃
4
+
5
+ ```shell
6
+ npm install @fanciers/echarts-react
7
+ ```
8
+
9
+ ```typescript
10
+ import { CanvasRenderer, LineChart, echarts } from '@fanciers/echarts-react';
11
+
12
+ echarts.use([CanvasRenderer]);
13
+
14
+ function Demo() {
15
+ return (
16
+ <LineChart
17
+ style={{ width: 480, height: 300 }}
18
+ xAxis={{
19
+ type: 'category',
20
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
21
+ }}
22
+ yAxis={{ type: 'value' }}
23
+ series={[
24
+ {
25
+ type: 'line',
26
+ data: [150, 230, 224, 218, 135, 147, 260],
27
+ },
28
+ ]}
29
+ />
30
+ );
31
+ }
32
+ ```
package/dist/index.d.ts CHANGED
@@ -1,10 +1,9 @@
1
+ import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
1
2
  import React from "react";
2
3
  import { LineSeriesOption, PieSeriesOption } from "echarts/charts";
3
- import { GridComponentOption } from "echarts/components";
4
4
  import * as echarts from "echarts/core";
5
- import { ComposeOption } 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";
6
6
  import { ComponentOption } from "echarts/types/src/util/types.js";
7
- import { ComposeOption as ComposeOption$1, DataZoomComponentOption, DatasetComponentOption, GraphicComponentOption, LegendComponentOption, MarkAreaComponentOption, MarkLineComponentOption, MarkPointComponentOption, MatrixComponentOption, PolarComponentOption, TitleComponentOption, ToolboxComponentOption, TooltipComponentOption, VisualMapComponentOption } from "echarts";
8
7
 
9
8
  //#region src/shared.d.ts
10
9
 
@@ -17,6 +16,7 @@ interface ChartBaseProps<T extends readonly ChartComponentType<any>[]> {
17
16
  style?: React.CSSProperties;
18
17
  containerProps?: React.HTMLAttributes<HTMLDivElement>;
19
18
  compose?: [...T];
19
+ use?: EChartExt;
20
20
  children?: React.ReactNode;
21
21
  }
22
22
  type InferChartComponentOption<T extends readonly ChartComponentType<any>[], U = T[number]> = U extends ChartComponentType<infer P> ? P : never;
@@ -26,25 +26,31 @@ interface ChartComponentType<T extends ComponentOption> {
26
26
  }): React.JSX.Element;
27
27
  ext: EChartExt;
28
28
  }
29
- declare const LineChart: ChartComponentType<LineSeriesOption | GridComponentOption>;
29
+ declare const BarChart: ChartComponentType<BarSeriesOption | GridComponentOption>;
30
+ declare const LineChart: ChartComponentType<GridComponentOption | LineSeriesOption>;
30
31
  declare const PieChart: ChartComponentType<PieSeriesOption>;
32
+ declare const ScatterChart: ChartComponentType<ScatterSeriesOption>;
31
33
  //#endregion
32
34
  //#region src/components.d.ts
33
- declare const Dataset: (props: ComposeOption$1<DatasetComponentOption>) => null;
34
- declare const DataZoom: (props: ComposeOption$1<DataZoomComponentOption>) => null;
35
- declare const Graphic: (props: ComposeOption$1<GraphicComponentOption>) => null;
36
- declare const Legend: (props: ComposeOption$1<LegendComponentOption>) => null;
37
- declare const MarkArea: (props: ComposeOption$1<MarkAreaComponentOption>) => null;
38
- declare const MarkLine: (props: ComposeOption$1<MarkLineComponentOption>) => null;
39
- declare const MarkPoint: (props: ComposeOption$1<MarkPointComponentOption>) => null;
40
- declare const Matrix: (props: ComposeOption$1<MatrixComponentOption>) => null;
41
- declare const Polar: (props: ComposeOption$1<PolarComponentOption>) => null;
42
- declare const Title: (props: ComposeOption$1<TitleComponentOption>) => null;
43
- declare const Toolbox: (props: ComposeOption$1<ToolboxComponentOption>) => null;
44
- declare const Tooltip: (props: ComposeOption$1<TooltipComponentOption>) => null;
45
- declare const VisualMap: (props: ComposeOption$1<VisualMapComponentOption>) => null;
35
+ declare const Brush: (props: ComposeOption<BrushComponentOption>) => null;
36
+ declare const Calendar: (props: ComposeOption<CalendarComponentOption>) => null;
37
+ declare const Dataset: (props: ComposeOption<DatasetComponentOption>) => null;
38
+ declare const DataZoom: (props: ComposeOption<DataZoomComponentOption>) => null;
39
+ declare const Geo: (props: ComposeOption<GeoComponentOption>) => null;
40
+ declare const Graphic: (props: ComposeOption<GraphicComponentOption>) => null;
41
+ declare const Legend: (props: ComposeOption<LegendComponentOption>) => null;
42
+ declare const MarkArea: (props: ComposeOption<MarkAreaComponentOption>) => null;
43
+ declare const MarkLine: (props: ComposeOption<MarkLineComponentOption>) => null;
44
+ declare const MarkPoint: (props: ComposeOption<MarkPointComponentOption>) => null;
45
+ declare const Matrix: (props: ComposeOption<MatrixComponentOption>) => null;
46
+ declare const Polar: (props: ComposeOption<PolarComponentOption>) => null;
47
+ declare const Timeline: (props: ComposeOption<TimelineComponentOption>) => null;
48
+ declare const Title: (props: ComposeOption<TitleComponentOption>) => null;
49
+ declare const Toolbox: (props: ComposeOption<ToolboxComponentOption>) => null;
50
+ declare const Tooltip: (props: ComposeOption<TooltipComponentOption>) => null;
51
+ declare const VisualMap: (props: ComposeOption<VisualMapComponentOption>) => null;
46
52
  //#endregion
47
53
  //#region src/features.d.ts
48
54
  declare function AxisBreak(): null;
49
55
  //#endregion
50
- export { AxisBreak, DataZoom, Dataset, Graphic, Legend, LineChart, MarkArea, MarkLine, MarkPoint, Matrix, PieChart, Polar, Title, Toolbox, Tooltip, VisualMap, echarts };
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 };
package/dist/index.js CHANGED
@@ -1,6 +1,7 @@
1
- import React, { forwardRef, useLayoutEffect, useRef } from "react";
2
- import { LineChart as LineChart$1, PieChart as PieChart$1 } from "echarts/charts";
3
- import { DataZoomComponent, DatasetComponent, GraphicComponent, GridComponent, LegendComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, MatrixComponent, PolarComponent, TitleComponent, ToolboxComponent, TooltipComponent, TransformComponent, VisualMapComponent } from "echarts/components";
1
+ import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
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";
4
5
  import * as echarts from "echarts/core";
5
6
  import { jsx, jsxs } from "react/jsx-runtime";
6
7
  import { AxisBreak as AxisBreak$1 } from "echarts/features";
@@ -35,14 +36,18 @@ function assignForwardedRef(ref, value) {
35
36
  else ref.current = value;
36
37
  }
37
38
  function defineChart(ext) {
38
- const ChartComponent = forwardRef(({ className, style, containerProps, compose, children,...props }, ref) => {
39
- const containerRef = useRef(null);
40
- const chartRef = useRef(null);
39
+ const ChartComponent = React.forwardRef(({ className, style, containerProps, compose, use, children,...props }, ref) => {
40
+ const containerRef = React.useRef(null);
41
+ const chartRef = React.useRef(null);
41
42
  const ctx = useInitialChartContext();
42
43
  useRegister((echarts$1) => {
43
- echarts$1.use([ext, compose?.map((comp) => comp.ext).flat() || []].flat());
44
+ echarts$1.use([
45
+ ext,
46
+ use,
47
+ compose?.map((comp) => comp.ext).flat() || []
48
+ ].flat().filter(Boolean));
44
49
  });
45
- useLayoutEffect(() => {
50
+ React.useLayoutEffect(() => {
46
51
  const chart = chartRef.current = echarts.init(containerRef.current, null);
47
52
  assignForwardedRef(ref, chart);
48
53
  return () => {
@@ -50,7 +55,7 @@ function defineChart(ext) {
50
55
  assignForwardedRef(ref, null);
51
56
  };
52
57
  }, []);
53
- useLayoutEffect(() => {
58
+ React.useLayoutEffect(() => {
54
59
  const chart = chartRef.current;
55
60
  if (!chart) return;
56
61
  for (const opt of ctx.options) chart.setOption(opt, defaultSetOptionOpt);
@@ -71,8 +76,10 @@ function defineChart(ext) {
71
76
  ChartComponent.ext = ext;
72
77
  return ChartComponent;
73
78
  }
79
+ const BarChart = /* @__PURE__ */ defineChart([BarChart$1, GridComponent]);
74
80
  const LineChart = /* @__PURE__ */ defineChart([LineChart$1, GridComponent]);
75
81
  const PieChart = /* @__PURE__ */ defineChart([PieChart$1]);
82
+ const ScatterChart = /* @__PURE__ */ defineChart([ScatterChart$1]);
76
83
 
77
84
  //#endregion
78
85
  //#region src/components.tsx
@@ -88,8 +95,11 @@ function defineComponent(ext) {
88
95
  return null;
89
96
  };
90
97
  }
98
+ const Brush = /* @__PURE__ */ defineComponent([BrushComponent]);
99
+ const Calendar = /* @__PURE__ */ defineComponent([CalendarComponent]);
91
100
  const Dataset = /* @__PURE__ */ defineComponent([DatasetComponent, TransformComponent]);
92
101
  const DataZoom = /* @__PURE__ */ defineComponent([DataZoomComponent]);
102
+ const Geo = /* @__PURE__ */ defineComponent([GeoComponent]);
93
103
  const Graphic = /* @__PURE__ */ defineComponent([GraphicComponent]);
94
104
  const Legend = /* @__PURE__ */ defineComponent(LegendComponent);
95
105
  const MarkArea = /* @__PURE__ */ defineComponent(MarkAreaComponent);
@@ -97,6 +107,7 @@ const MarkLine = /* @__PURE__ */ defineComponent(MarkLineComponent);
97
107
  const MarkPoint = /* @__PURE__ */ defineComponent(MarkPointComponent);
98
108
  const Matrix = /* @__PURE__ */ defineComponent(MatrixComponent);
99
109
  const Polar = /* @__PURE__ */ defineComponent(PolarComponent);
110
+ const Timeline = /* @__PURE__ */ defineComponent(TimelineComponent);
100
111
  const Title = /* @__PURE__ */ defineComponent(TitleComponent);
101
112
  const Toolbox = /* @__PURE__ */ defineComponent(ToolboxComponent);
102
113
  const Tooltip = /* @__PURE__ */ defineComponent(TooltipComponent);
@@ -112,4 +123,4 @@ function AxisBreak() {
112
123
  }
113
124
 
114
125
  //#endregion
115
- export { AxisBreak, DataZoom, Dataset, Graphic, Legend, LineChart, MarkArea, MarkLine, MarkPoint, Matrix, PieChart, Polar, Title, Toolbox, Tooltip, VisualMap, echarts };
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 };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fanciers/echarts-react",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "description": "ECharts <3 React",
5
5
  "author": "Tmk <i@tmk.im>",
6
6
  "keywords": [
@@ -27,20 +27,20 @@
27
27
  "url": "https://github.com/tmkx/echarts-react.git"
28
28
  },
29
29
  "devDependencies": {
30
- "@rsbuild/core": "^1.4.15",
31
- "@rsbuild/plugin-react": "^1.3.5",
32
- "@storybook/addon-docs": "^9.1.2",
33
- "@storybook/react": "^9.1.2",
34
- "@types/node": "^24.3.0",
35
- "@types/react": "^19.1.10",
36
- "@types/react-dom": "^19.1.7",
30
+ "@rsbuild/core": "^1.5.3",
31
+ "@rsbuild/plugin-react": "^1.4.0",
32
+ "@storybook/addon-docs": "^9.1.4",
33
+ "@storybook/react": "^9.1.4",
34
+ "@types/node": "^24.3.1",
35
+ "@types/react": "^19.1.12",
36
+ "@types/react-dom": "^19.1.9",
37
37
  "echarts": "^6.0.0",
38
38
  "react": "^19.1.1",
39
39
  "react-dom": "^19.1.1",
40
- "storybook": "^9.1.2",
41
- "storybook-react-rsbuild": "^2.0.4",
40
+ "storybook": "^9.1.4",
41
+ "storybook-react-rsbuild": "^2.1.0",
42
42
  "swr": "^2.3.6",
43
- "tsdown": "^0.14.1",
43
+ "tsdown": "^0.14.2",
44
44
  "typescript": "^5.9.2"
45
45
  },
46
46
  "peerDependencies": {