feat: add dataset-link example

Author: tmkx

src/line.tsx src/charts.tsxsrc/line.tsx renamed to src/charts.tsx

@@ -1,5 +1,10 @@
 import React, { forwardRef, useLayoutEffect, useRef } from 'react';
-import { LineChart as EChartLineChart, type LineSeriesOption } from 'echarts/charts';
+import {
+  LineChart as EChartLineChart,
+  PieChart as EChartPieChart,
+  type LineSeriesOption,
+  type PieSeriesOption,
+} 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';
@@ -10,7 +15,8 @@ function assignForwardedRef<T>(ref: React.ForwardedRef<T>, value: T | null) {
   else ref.current = value;
 }
 
-type LineChartOption = echarts.EChartsCoreOption & ComposeOption<LineSeriesOption | GridComponentOption>;
+type LineChartOption = echarts.EChartsCoreOption &
+  ComposeOption<LineSeriesOption | GridComponentOption | PieSeriesOption>;
 
 interface LineChartProps extends LineChartOption {
   className?: string;
@@ -28,7 +34,8 @@ export const LineChart = forwardRef(
     const ctx = useInitialChartContext();
 
     useRegister((echarts) => {
-      echarts.use([EChartLineChart, GridComponent]);
+      // TODO: Make different charts composable.
+      echarts.use([EChartLineChart, GridComponent, EChartPieChart]);
     });
 
     useLayoutEffect(() => {

src/index.ts

@@ -1,3 +1,4 @@
+export { LineChart } from './charts.js';
 export {
   Dataset,
   DataZoom,
@@ -13,5 +14,4 @@ export {
   VisualMap,
 } from './components.js';
 export { AxisBreak } from './features.js';
-export { LineChart } from './line.js';
 export { echarts } from './shared.js';

stories/line.stories.tsx

@@ -2181,3 +2181,63 @@ export function IntradayBreaks1() {
     </LineChart>
   );
 }
+
+export function DatasetLink() {
+  const chartRef = React.useRef<echarts.ECharts>(null);
+  const [dimension, setDimension] = React.useState('2012');
+
+  React.useEffect(() => {
+    const myChart = chartRef.current;
+    if (!myChart) return;
+    const listener = (event: any) => {
+      const xAxisInfo = event.axesInfo[0];
+      if (xAxisInfo) {
+        const dimension = xAxisInfo.value + 1;
+        setDimension(dimension);
+      }
+    };
+    myChart.on('updateAxisPointer', listener);
+    return () => {
+      myChart.off('updateAxisPointer', listener);
+    };
+  }, []);
+
+  return (
+    <LineChart
+      ref={chartRef}
+      style={{ width: 480, height: 360 }}
+      useUTC
+      xAxis={{ type: 'category' }}
+      yAxis={{ gridIndex: 0 }}
+      grid={{ top: '55%' }}
+      series={[
+        { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: 'series' } },
+        { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: 'series' } },
+        { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: 'series' } },
+        { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: 'series' } },
+        {
+          type: 'pie',
+          radius: '30%',
+          center: ['50%', '25%'],
+          emphasis: { focus: 'self' },
+          label: { formatter: `{b}: {@${dimension}} ({d}%)` },
+          encode: { itemName: 'product', value: dimension, tooltip: dimension },
+        },
+      ]}
+    >
+      <Legend legend={{}} />
+      <Tooltip tooltip={{ trigger: 'axis', showContent: false }} />
+      <Dataset
+        dataset={{
+          source: [
+            ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
+            ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
+            ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
+            ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
+            ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1],
+          ],
+        }}
+      />
+    </LineChart>
+  );
+}