feat: support composing charts (#1)

Author: tmkx

src/charts.tsx

@@ -7,60 +7,93 @@ import {
 } from 'echarts/charts';
 import type { ComposeOption } from 'echarts/core';
 import { GridComponent, type GridComponentOption } from 'echarts/components';
-import { ChartContext, defaultSetOptionOpt, echarts, useInitialChartContext, useRegister } from './shared.js';
+import type { ComponentOption } from 'echarts/types/src/util/types.js';
+import {
+  ChartContext,
+  defaultSetOptionOpt,
+  echarts,
+  useInitialChartContext,
+  useRegister,
+  type EChartExt,
+  type Simplify,
+} from './shared.js';
 
 function assignForwardedRef<T>(ref: React.ForwardedRef<T>, value: T | null) {
   if (!ref) return;
   if (typeof ref === 'function') ref(value);
   else ref.current = value;
 }
 
-type LineChartOption = echarts.EChartsCoreOption &
-  ComposeOption<LineSeriesOption | GridComponentOption | PieSeriesOption>;
-
-interface LineChartProps extends LineChartOption {
+interface ChartBaseProps<T extends readonly ChartComponentType<any>[]> {
   className?: string;
   style?: React.CSSProperties;
   containerProps?: React.HTMLAttributes<HTMLDivElement>;
+  compose?: [...T];
+  children?: React.ReactNode;
 }
 
-export const LineChart = forwardRef(
-  (
-    { className, style, containerProps, children, ...props }: React.PropsWithChildren<LineChartProps>,
-    ref: React.ForwardedRef<echarts.ECharts>
-  ) => {
-    const containerRef = useRef<HTMLDivElement>(null);
-    const chartRef = useRef<echarts.ECharts | null>(null);
-    const ctx = useInitialChartContext();
+type InferChartComponentOption<
+  T extends readonly ChartComponentType<any>[],
+  U = T[number]
+> = U extends ChartComponentType<infer P> ? P : never;
+
+interface ChartComponentType<T extends ComponentOption> {
+  <U extends readonly ChartComponentType<any>[] = []>(
+    props: ChartBaseProps<U> &
+      echarts.EChartsCoreOption &
+      Simplify<ComposeOption<T | InferChartComponentOption<U>>> & { ref?: React.Ref<echarts.ECharts> }
+  ): React.JSX.Element;
+
+  ext: EChartExt;
+}
 
-    useRegister((echarts) => {
-      // TODO: Make different charts composable.
-      echarts.use([EChartLineChart, GridComponent, EChartPieChart]);
-    });
+function defineChart<T extends ComponentOption>(ext: EChartExt) {
+  const ChartComponent = forwardRef(
+    (
+      { className, style, containerProps, compose, children, ...props }: ChartBaseProps<any>,
+      ref: React.ForwardedRef<echarts.ECharts>
+    ) => {
+      const containerRef = useRef<HTMLDivElement>(null);
+      const chartRef = useRef<echarts.ECharts | null>(null);
+      const ctx = useInitialChartContext();
 
-    useLayoutEffect(() => {
-      const chart = (chartRef.current = echarts.init(containerRef.current, null));
-      assignForwardedRef(ref, chart);
-      return () => {
-        chart.dispose();
-        assignForwardedRef(ref, null);
-      };
-    }, []);
+      useRegister((echarts) => {
+        echarts.use([ext, compose?.map((comp) => comp.ext).flat() || []].flat());
+      });
+
+      useLayoutEffect(() => {
+        const chart = (chartRef.current = echarts.init(containerRef.current, null));
+        assignForwardedRef(ref, chart);
+        return () => {
+          chart.dispose();
+          assignForwardedRef(ref, null);
+        };
+      }, []);
+
+      useLayoutEffect(() => {
+        const chart = chartRef.current;
+        if (!chart) return;
+        for (const opt of ctx.options) chart.setOption(opt, defaultSetOptionOpt);
+        chart.setOption(props, defaultSetOptionOpt);
+        chart.setOption(chart.getOption(), { notMerge: true }); // used for toolbox.restore snapshot
+        ctx.options.length = 0;
+      });
+
+      return (
+        <ChartContext.Provider value={ctx}>
+          <div className={className} style={style} {...containerProps} ref={containerRef} />
+          {children}
+        </ChartContext.Provider>
+      );
+    }
+  ) as unknown as ChartComponentType<T>;
+  ChartComponent.ext = ext;
+  return ChartComponent;
+}
 
-    useLayoutEffect(() => {
-      const chart = chartRef.current;
-      if (!chart) return;
-      for (const opt of ctx.options) chart.setOption(opt, defaultSetOptionOpt);
-      chart.setOption(props, defaultSetOptionOpt);
-      chart.setOption(chart.getOption(), { notMerge: true }); // used for toolbox.restore snapshot
-      ctx.options.length = 0;
-    });
+export const LineChart = /*#__PURE__*/ defineChart<LineSeriesOption | GridComponentOption>([
+  EChartLineChart,
+  GridComponent,
+]);
 
-    return (
-      <ChartContext.Provider value={ctx}>
-        <div className={className} style={style} {...containerProps} ref={containerRef} />
-        {children}
-      </ChartContext.Provider>
-    );
-  }
-) as (props: React.PropsWithChildren<LineChartProps> & { ref?: React.Ref<echarts.ECharts> }) => React.JSX.Element;
+export const PieChart = /*#__PURE__*/ defineChart<PieSeriesOption>([EChartPieChart]);

src/index.ts

@@ -1,4 +1,4 @@
-export { LineChart } from './charts.js';
+export { LineChart, PieChart } from './charts.js';
 export {
   Dataset,
   DataZoom,

src/shared.tsx

@@ -39,3 +39,5 @@ export function useRegister(fn: (echarts: EChartsCore) => void) {
 }
 
 export type EChartExt = Parameters<(typeof echarts)['use']>[0];
+
+export type Simplify<T> = { [K in keyof T]: T[K] } & {};

stories/line.stories.tsx

@@ -10,6 +10,7 @@ import {
   MarkArea,
   MarkLine,
   MarkPoint,
+  PieChart,
   Polar,
   Title,
   Toolbox,
@@ -2205,6 +2206,7 @@ export function DatasetLink() {
   return (
     <LineChart
       ref={chartRef}
+      compose={[PieChart]}
       style={{ width: 480, height: 360 }}
       useUTC
       xAxis={{ type: 'category' }}