chore: add case examples

site/.dumirc.ts

@@ -140,6 +140,14 @@ export default defineConfig({
       },
     ],
     examples: [
+      {
+        slug: 'case',
+        icon: 'gallery',
+        title: {
+          zh: '场景案例',
+          en: 'Show Case',
+        },
+      },
       {
         slug: 'statistics',
         icon: 'line',

site/examples/case/interactions/demo/link.js

@@ -0,0 +1,83 @@
+import React, { useState, useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import { Line, Column } from '@ant-design/plots';
+
+const CHART_MAP = {};
+
+const DemoLine = () => {
+  const [data, setData] = useState([]);
+  const dataRef = useRef();
+  dataRef.current = data;
+
+  useEffect(() => {
+    asyncFetch();
+  }, []);
+
+  const asyncFetch = () => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/sp500.json')
+      .then((response) => response.json())
+      .then((json) => setData(json))
+      .catch((error) => {
+        console.log('fetch data failed', error);
+      });
+  };
+
+  const config = {
+    data,
+    xField: 'date',
+    yField: 'price',
+    height: 200,
+  };
+
+  const showTooltip = (data) => {
+    const { line, column } = CHART_MAP;
+    //  连续图表
+    line.emit('tooltip:show', {
+      data: { data: { x: data.date } },
+    });
+    column.emit('tooltip:show', {
+      data: { data },
+    });
+  };
+
+  const hideTooltip = () => {
+    const { line, column } = CHART_MAP;
+    line.emit('tooltip:hide');
+    column.emit('tooltip:hide');
+  };
+
+  const setTooltipPosition = (evt, chart) => {
+    const { x } = evt;
+    const { layout } = chart.getView();
+    // 根据位置粗略计算出 tooltip data
+    const percent = x / layout.width;
+    showTooltip(dataRef.current[Math.floor(percent * dataRef.current.length)]);
+  };
+
+  return (
+    <div>
+      <Line
+        {...config}
+        onReady={({ chart }) => {
+          CHART_MAP['line'] = chart;
+          chart.on('plot:pointermove', (evt) => {
+            setTooltipPosition(evt, chart);
+          });
+          chart.on('plot:pointerout', hideTooltip);
+        }}
+      />
+      <Column
+        {...config}
+        onReady={({ chart }) => {
+          CHART_MAP['column'] = chart;
+          chart.on('plot:pointermove', (evt) => {
+            setTooltipPosition(evt, chart);
+          });
+          chart.on('plot:pointerout', hideTooltip);
+        }}
+      />
+    </div>
+  );
+};
+
+ReactDOM.render(<DemoLine />, document.getElementById('container'));

site/examples/case/interactions/demo/meta.json

@@ -0,0 +1,16 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "link.js",
+      "title": {
+        "zh": "图表联动",
+        "en": "Chart link"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*dBDRR43tju8AAAAAAAAAAAAADmJ7AQ/original"
+    }
+  ]
+}

site/examples/case/interactions/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Advanced interactions
+order: 0
+---

site/examples/case/interactions/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 高级交互
+order: 0
+---