@fanciers/echarts-react 0.0.0 → 0.0.2

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 +22 -18
  3. package/dist/index.js +19 -10
  4. package/package.json +12 -9
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, ComposeOption, DataZoomComponentOption, DatasetComponentOption, GeoComponentOption, GraphicComponentOption, GridComponentOption, LegendComponentOption, MarkAreaComponentOption, MarkLineComponentOption, MarkPointComponentOption, MatrixComponentOption, PolarComponentOption, 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,29 @@ 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>;
31
32
  //#endregion
32
33
  //#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;
34
+ declare const Brush: (props: ComposeOption<BrushComponentOption>) => null;
35
+ declare const Dataset: (props: ComposeOption<DatasetComponentOption>) => null;
36
+ declare const DataZoom: (props: ComposeOption<DataZoomComponentOption>) => null;
37
+ declare const Geo: (props: ComposeOption<GeoComponentOption>) => null;
38
+ declare const Graphic: (props: ComposeOption<GraphicComponentOption>) => null;
39
+ declare const Legend: (props: ComposeOption<LegendComponentOption>) => null;
40
+ declare const MarkArea: (props: ComposeOption<MarkAreaComponentOption>) => null;
41
+ declare const MarkLine: (props: ComposeOption<MarkLineComponentOption>) => null;
42
+ declare const MarkPoint: (props: ComposeOption<MarkPointComponentOption>) => null;
43
+ declare const Matrix: (props: ComposeOption<MatrixComponentOption>) => null;
44
+ declare const Polar: (props: ComposeOption<PolarComponentOption>) => null;
45
+ declare const Timeline: (props: ComposeOption<TimelineComponentOption>) => null;
46
+ declare const Title: (props: ComposeOption<TitleComponentOption>) => null;
47
+ declare const Toolbox: (props: ComposeOption<ToolboxComponentOption>) => null;
48
+ declare const Tooltip: (props: ComposeOption<TooltipComponentOption>) => null;
49
+ declare const VisualMap: (props: ComposeOption<VisualMapComponentOption>) => null;
46
50
  //#endregion
47
51
  //#region src/features.d.ts
48
52
  declare function AxisBreak(): null;
49
53
  //#endregion
50
- export { AxisBreak, DataZoom, Dataset, Graphic, Legend, LineChart, MarkArea, MarkLine, MarkPoint, Matrix, PieChart, Polar, Title, Toolbox, Tooltip, VisualMap, echarts };
54
+ export { AxisBreak, BarChart, Brush, CanvasRenderer, DataZoom, Dataset, Geo, Graphic, Legend, LineChart, MarkArea, MarkLine, MarkPoint, Matrix, PieChart, Polar, SVGRenderer, 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 } from "echarts/charts";
4
+ import { BrushComponent, 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,6 +76,7 @@ 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]);
76
82
 
@@ -88,8 +94,10 @@ function defineComponent(ext) {
88
94
  return null;
89
95
  };
90
96
  }
97
+ const Brush = /* @__PURE__ */ defineComponent([BrushComponent]);
91
98
  const Dataset = /* @__PURE__ */ defineComponent([DatasetComponent, TransformComponent]);
92
99
  const DataZoom = /* @__PURE__ */ defineComponent([DataZoomComponent]);
100
+ const Geo = /* @__PURE__ */ defineComponent([GeoComponent]);
93
101
  const Graphic = /* @__PURE__ */ defineComponent([GraphicComponent]);
94
102
  const Legend = /* @__PURE__ */ defineComponent(LegendComponent);
95
103
  const MarkArea = /* @__PURE__ */ defineComponent(MarkAreaComponent);
@@ -97,6 +105,7 @@ const MarkLine = /* @__PURE__ */ defineComponent(MarkLineComponent);
97
105
  const MarkPoint = /* @__PURE__ */ defineComponent(MarkPointComponent);
98
106
  const Matrix = /* @__PURE__ */ defineComponent(MatrixComponent);
99
107
  const Polar = /* @__PURE__ */ defineComponent(PolarComponent);
108
+ const Timeline = /* @__PURE__ */ defineComponent(TimelineComponent);
100
109
  const Title = /* @__PURE__ */ defineComponent(TitleComponent);
101
110
  const Toolbox = /* @__PURE__ */ defineComponent(ToolboxComponent);
102
111
  const Tooltip = /* @__PURE__ */ defineComponent(TooltipComponent);
@@ -112,4 +121,4 @@ function AxisBreak() {
112
121
  }
113
122
 
114
123
  //#endregion
115
- export { AxisBreak, DataZoom, Dataset, Graphic, Legend, LineChart, MarkArea, MarkLine, MarkPoint, Matrix, PieChart, Polar, Title, Toolbox, Tooltip, VisualMap, echarts };
124
+ export { AxisBreak, BarChart, Brush, CanvasRenderer, DataZoom, Dataset, Geo, Graphic, Legend, LineChart, MarkArea, MarkLine, MarkPoint, Matrix, PieChart, Polar, SVGRenderer, 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.0",
3
+ "version": "0.0.2",
4
4
  "description": "ECharts <3 React",
5
5
  "author": "Tmk <i@tmk.im>",
6
6
  "keywords": [
@@ -23,21 +23,24 @@
23
23
  }
24
24
  },
25
25
  "typings": "./dist/index.d.ts",
26
+ "repository": {
27
+ "url": "https://github.com/tmkx/echarts-react.git"
28
+ },
26
29
  "devDependencies": {
27
- "@rsbuild/core": "^1.4.15",
30
+ "@rsbuild/core": "^1.5.1",
28
31
  "@rsbuild/plugin-react": "^1.3.5",
29
- "@storybook/addon-docs": "^9.1.2",
30
- "@storybook/react": "^9.1.2",
32
+ "@storybook/addon-docs": "^9.1.3",
33
+ "@storybook/react": "^9.1.3",
31
34
  "@types/node": "^24.3.0",
32
- "@types/react": "^19.1.10",
33
- "@types/react-dom": "^19.1.7",
35
+ "@types/react": "^19.1.12",
36
+ "@types/react-dom": "^19.1.8",
34
37
  "echarts": "^6.0.0",
35
38
  "react": "^19.1.1",
36
39
  "react-dom": "^19.1.1",
37
- "storybook": "^9.1.2",
38
- "storybook-react-rsbuild": "^2.0.4",
40
+ "storybook": "^9.1.3",
41
+ "storybook-react-rsbuild": "^2.1.0",
39
42
  "swr": "^2.3.6",
40
- "tsdown": "^0.14.1",
43
+ "tsdown": "^0.14.2",
41
44
  "typescript": "^5.9.2"
42
45
  },
43
46
  "peerDependencies": {