chore: add case examples (#2526)

* chore: add case examples

* fix: node version

* fix: test

* fix: gh pages

.github/workflows/lint.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [latest]
     steps:
       - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}

.github/workflows/release.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [latest]
     steps:
       - name: checkout code repository
         uses: actions/checkout@v3
@@ -48,4 +48,4 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       - name: publish to npm
-        run: pnpm run release
+        run: pnpm run release

.github/workflows/test.yml

@@ -12,7 +12,7 @@ jobs:
     timeout-minutes: 15
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [latest]
     steps:
       - name: checkout code repository
         uses: actions/checkout@v3

.github/workflows/v2-site.yml

@@ -14,7 +14,7 @@ jobs:
     timeout-minutes: 15
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [latest]
     steps:
       - name: checkout code repository
         uses: actions/checkout@v3

package.json

@@ -68,7 +68,9 @@
     "overrides": {
       "@typescript-eslint/eslint-plugin": "^4.1.1",
       "@typescript-eslint/parser": "^4.1.1",
-      "tslib": "2.6.1"
+      "tslib": "2.6.1",
+      "react-dom": "^18.0.1",
+      "react": "^18.0.1"
     }
   },
   "gitHooks": {

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
+---

site/package.json

@@ -42,10 +42,11 @@
     "typescript": "^3.6.5"
   },
   "dependencies": {
-    "@ant-design/plots": "^2.0.0-alpha.0",
+    "@ant-design/plots": "^2.0.0",
     "antd": "^4.16.13",
     "insert-css": "^2.0.0",
     "lodash-es": "^4.17.21",
+    "rc-util": "^5.39.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0"
   }