chore: demos (#2661)

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Column } from '@ant-design/plots';
+
+const DemoDefaultTooltip = () => {
+  const config = {
+    data: {
+      type: 'fetch',
+      value: 'https://gw.alipayobjects.com/os/antfincdn/iPY8JFnxdb/dodge-padding.json',
+    },
+    xField: '月份',
+    yField: '月均降雨量',
+    colorField: 'name',
+    group: true,
+    style: {
+      inset: 5,
+    },
+    onReady: ({ chart }) => {
+      try {
+        chart.on('afterrender', () => {
+          chart.emit('legend:filter', {
+            data: { channel: 'color', values: ['London'] },
+          });
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    },
+  };
+  return <Column {...config} />;
+};
+
+ReactDOM.render(<DemoDefaultTooltip />, document.getElementById('container'));

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

@@ -0,0 +1,79 @@
+import React, { memo, useState } from 'react';
+import { Pie } from '@ant-design/plots';
+import { Button } from 'antd';
+import ReactDOM from 'react-dom';
+import { isEqual } from 'lodash-es';
+
+const DemoPie = memo(
+  ({ data, onReady }) => {
+    var config = {
+      data,
+      angleField: 'value',
+      colorField: 'type',
+      label: {
+        text: 'value',
+        position: 'outside',
+      },
+      onReady,
+    };
+    return <Pie {...config} />;
+  },
+  (pre, next) => {
+    return isEqual(pre?.data, next?.data);
+  },
+);
+
+const DemoMemo = () => {
+  const [count, setCount] = useState(0);
+  const [data, setData] = useState([
+    {
+      type: '分类一',
+      value: 27,
+    },
+    {
+      type: '分类二',
+      value: 25,
+    },
+    {
+      type: '分类三',
+      value: 18,
+    },
+    {
+      type: '分类四',
+      value: 15,
+    },
+    {
+      type: '分类五',
+      value: 10,
+    },
+    {
+      type: '其他',
+      value: 5,
+    },
+  ]);
+
+  return (
+    <div>
+      <Button
+        onClick={() => {
+          setCount(count + 1);
+        }}
+      >
+        不会重新渲染
+      </Button>
+      <Button
+        style={{ margin: '0 10px' }}
+        type="primary"
+        onClick={() => {
+          setData(data.map((d) => ({ ...d, value: Math.floor(Math.random() * 100) })));
+        }}
+      >
+        重新渲染
+      </Button>
+      <span>{count}</span>
+      <DemoPie data={data} onReady={({ chart }) => {}} />
+    </div>
+  );
+};
+
+ReactDOM.render(<DemoMemo />, document.getElementById('container'));

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

@@ -11,6 +11,38 @@
         "en": "Chart link"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*dBDRR43tju8AAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "tooltip.js",
+      "title": {
+        "zh": "默认提示",
+        "en": "Default tooltip"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*vqr9QrFDTEgAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "segmented-line.js",
+      "title": {
+        "zh": "分段线",
+        "en": "Segmented line"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*wL0FRJvibpAAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "memo.js",
+      "title": {
+        "zh": "防止重复渲染",
+        "en": "Memo"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*y2aySIowQlUAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "filter.js",
+      "title": {
+        "zh": "图例过滤",
+        "en": "Legend filter"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2e6jSoEnW60AAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }

site/examples/case/interactions/demo/segmented-line.js

@@ -0,0 +1,155 @@
+import { Line } from '@ant-design/plots';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const DemoSegmentedLine = () => {
+  const data = [
+    {
+      year: '1991',
+      value: 3,
+      type: 'Lon',
+    },
+    {
+      year: '1992',
+      value: 4,
+      type: 'Lon',
+    },
+    {
+      year: '1993',
+      value: 3.5,
+      type: 'Lon',
+    },
+    {
+      year: '1994',
+      value: 5,
+      type: 'Lon',
+    },
+    {
+      year: '1995',
+      value: 4.9,
+      type: 'Lon',
+    },
+    {
+      year: '1996',
+      value: 6,
+      type: 'Lon',
+    },
+    {
+      year: '1997',
+      value: null,
+      type: 'Lon',
+    },
+    {
+      year: '1998',
+      value: null,
+      type: 'Lon',
+    },
+    {
+      year: '1999',
+      value: null,
+      type: 'Lon',
+    },
+    {
+      year: '1991',
+      value: null,
+      type: 'Bor',
+    },
+    {
+      year: '1992',
+      value: null,
+      type: 'Bor',
+    },
+    {
+      year: '1993',
+      value: null,
+      type: 'Bor',
+    },
+    {
+      year: '1994',
+      value: null,
+      type: 'Bor',
+    },
+    {
+      year: '1995',
+      value: null,
+      type: 'Bor',
+    },
+    {
+      year: '1996',
+      value: 6,
+      type: 'Bor',
+    },
+    {
+      year: '1997',
+      value: 7,
+      type: 'Bor',
+    },
+    {
+      year: '1998',
+      value: 9,
+      type: 'Bor',
+    },
+    {
+      year: '1999',
+      value: 13,
+      type: 'Bor',
+    },
+  ];
+  const config = {
+    data,
+    xField: 'year',
+    yField: 'value',
+    colorField: 'type',
+    scale: {
+      color: {
+        range: ['#2688FF', 'red'],
+      },
+    },
+    style: {
+      lineWidth: 2,
+      lineDash: (items) => {
+        const { type } = items[0];
+        return type === 'Bor' ? [2, 4] : [0, 0];
+      },
+    },
+    interaction: {
+      tooltip: {
+        render: (e, { title, items }) => {
+          const list = items.filter((item) => item.value);
+          return (
+            <div key={title}>
+              <h4>{title}</h4>
+              {list.map((item) => {
+                const { name, value, color } = item;
+                return (
+                  <div>
+                    <div style={{ margin: 0, display: 'flex', justifyContent: 'space-between' }}>
+                      <div>
+                        <span
+                          style={{
+                            display: 'inline-block',
+                            width: 6,
+                            height: 6,
+                            borderRadius: '50%',
+                            backgroundColor: color,
+                            marginRight: 6,
+                          }}
+                        ></span>
+                        <span>{name}</span>
+                      </div>
+                      <b>{value}</b>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          );
+        },
+      },
+    },
+    legend: false,
+  };
+  return <Line {...config} />;
+};
+
+ReactDOM.render(<DemoSegmentedLine />, document.getElementById('container'));

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Column } from '@ant-design/plots';
+
+const DemoDefaultTooltip = () => {
+  const data = [
+    { letter: 'A', frequency: 8167 },
+    { letter: 'B', frequency: 1492 },
+    { letter: 'C', frequency: 2782 },
+    { letter: 'D', frequency: 4253 },
+    { letter: 'E', frequency: 12702 },
+    { letter: 'F', frequency: 2288 },
+    { letter: 'G', frequency: 2015 },
+    { letter: 'H', frequency: 6094 },
+    { letter: 'I', frequency: 6966 },
+    { letter: 'J', frequency: 153 },
+    { letter: 'K', frequency: 772 },
+    { letter: 'L', frequency: 4025 },
+    { letter: 'M', frequency: 2406 },
+    { letter: 'N', frequency: 6749 },
+    { letter: 'O', frequency: 7507 },
+    { letter: 'P', frequency: 1929 },
+    { letter: 'Q', frequency: 95 },
+    { letter: 'R', frequency: 5987 },
+    { letter: 'S', frequency: 6327 },
+    { letter: 'T', frequency: 9056 },
+    { letter: 'U', frequency: 2758 },
+    { letter: 'V', frequency: 978 },
+    { letter: 'W', frequency: 236 },
+    { letter: 'X', frequency: 15 },
+    { letter: 'Y', frequency: 1974 },
+    { letter: 'Z', frequency: 74 },
+  ];
+  const config = {
+    data,
+    xField: 'letter',
+    yField: 'frequency',
+    onReady: ({ chart }) => {
+      try {
+        const { height } = chart._container.getBoundingClientRect();
+        const tooltipItem = data[Math.floor(Math.random() * data.length)];
+        chart.on(
+          'afterrender',
+          () => {
+            chart.emit('tooltip:show', {
+              data: {
+                data: tooltipItem,
+              },
+              offsetY: height / 2 - 60,
+            });
+          },
+          true,
+        );
+      } catch (e) {
+        console.error(e);
+      }
+    },
+  };
+  return <Column {...config} />;
+};
+
+ReactDOM.render(<DemoDefaultTooltip />, document.getElementById('container'));