docs: add demos

site/examples/statistics/interaction/demo/brush-emit.js

@@ -0,0 +1,92 @@
+import { Line } from '@ant-design/plots';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+function tip({ container, onRemove = () => {}, offsetX = 20, offsetY = 0 }) {
+  let div;
+
+  const render = (data, [x, y]) => {
+    if (div) remove();
+    div = document.createElement('div');
+    div.innerHTML = `
+    Select a node:
+    <ul>${data.map((d) => `<li>${d.date}</li>`).join('')}</ul>
+    `;
+    div.style.position = 'absolute';
+    div.style.background = '#eee';
+    div.style.padding = '0.5em';
+    div.style.left = x + offsetX + 'px';
+    div.style.top = y + offsetY + 'px';
+    div.onclick = () => {
+      remove();
+      onRemove();
+    };
+    container.append(div);
+  };
+
+  const remove = () => {
+    if (div) div.remove();
+    div = null;
+  };
+
+  return [render, remove];
+}
+
+const DemoInteraction = () => {
+  const data = [
+    { date: '2007-04-23', close: 93.24 },
+    { date: '2007-04-24', close: 95.35 },
+    { date: '2007-04-25', close: 98.84 },
+    { date: '2007-04-26', close: 99.92 },
+    { date: '2007-04-29', close: 99.8 },
+    { date: '2007-05-01', close: 99.47 },
+    { date: '2007-05-02', close: 100.39 },
+    { date: '2007-05-03', close: 100.4 },
+    { date: '2007-05-04', close: 100.81 },
+    { date: '2007-05-07', close: 103.92 },
+  ];
+
+  const config = {
+    data,
+    xField: (d) => new Date(d.date),
+    yField: 'close',
+    scale: { y: { nice: true } },
+    interaction: { brushXHighlight: true },
+  };
+  return (
+    <Line
+      {...config}
+      onReady={(plot) => {
+        const chart = plot.chart;
+        const [render, remove] = tip({
+          container: document.getElementById('container'),
+          onRemove: () => plot.emit('brush:remove', {}),
+        });
+
+        chart.on('brush:start', () => {
+          chart.emit('tooltip:disable');
+          remove();
+        });
+
+        chart.on('brush:end', async (e) => {
+          const { canvas } = chart.getContext();
+          const [mask] = canvas.document.getElementsByClassName('mask');
+          const bounds = mask.getBounds();
+          const x = bounds.max[0];
+          const y = bounds.center[1];
+          const [X] = e.data.selection;
+          const filtered = data.filter(({ date }) => new Date(date) >= X[0] && new Date(date) <= X[1]);
+          render(filtered, [x, y]);
+        });
+
+        chart.on('brush:remove', (e) => {
+          const { nativeEvent } = e;
+          if (nativeEvent) remove();
+          chart.emit('tooltip:enable');
+        });
+      }}
+    />
+  );
+};
+
+ReactDOM.render(<DemoInteraction />, document.getElementById('container'));

site/examples/statistics/interaction/demo/brush.js

@@ -0,0 +1,100 @@
+import { Scatter } from '@ant-design/plots';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+function tip({ container, onRemove = () => {}, offsetX = 20, offsetY = 0 }) {
+  let div;
+
+  const render = (data, [x, y]) => {
+    if (div) remove();
+    div = document.createElement('div');
+    div.innerHTML = `
+    Select a node:
+    <ul>${data.map((d) => `<li>x:${d.weight},y:${d.height}</li>`).join('')}</ul>
+    `;
+    div.style.position = 'absolute';
+    div.style.background = '#eee';
+    div.style.padding = '0.5em';
+    div.style.left = x + offsetX + 'px';
+    div.style.top = y + offsetY + 'px';
+    div.onclick = () => {
+      remove();
+      onRemove();
+    };
+    container.append(div);
+  };
+
+  const remove = () => {
+    if (div) div.remove();
+    div = null;
+  };
+
+  return [render, remove];
+}
+
+const DemoInteraction = () => {
+  const config = {
+    data: {
+      type: 'fetch',
+      value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
+    },
+    xField: 'weight',
+    yField: 'height',
+    colorField: 'gender',
+    shapeField: 'point',
+    style: {
+      fillOpacity: 0.2,
+      lineWidth: 1,
+      transform: 'scale(1, 1)',
+      transformOrigin: 'center center',
+    },
+    state: {
+      inactive: { fill: 'black', fillOpacity: 0.5, transform: 'scale(0.5, 0.5)' },
+    },
+    interaction: { brushHighlight: true },
+  };
+  return (
+    <Scatter
+      {...config}
+      onReady={(plot) => {
+        const chart = plot.chart;
+        const [render, remove] = tip({
+          container: document.getElementById('container'),
+          onRemove: () => plot.emit('brush:remove', {}),
+        });
+
+        chart.on('brush:start', () => {
+          chart.emit('tooltip:disable');
+          remove();
+        });
+
+        chart.on('brush:end', async (e) => {
+          const data = await fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json').then((res) =>
+            res.json(),
+          );
+
+          const { canvas } = chart.getContext();
+          const [mask] = canvas.document.getElementsByClassName('mask');
+          const bounds = mask.getBounds();
+          const x = bounds.max[0];
+          const y = bounds.center[1];
+          const [X, Y] = e.data.selection;
+
+          const filtered = data.filter(({ weight, height }) => {
+            return weight >= X[0] && weight <= X[1] && height >= Y[0] && height <= Y[1];
+          });
+
+          render(filtered, [x, y]);
+        });
+
+        chart.on('brush:remove', (e) => {
+          const { nativeEvent } = e;
+          if (nativeEvent) remove();
+          chart.emit('tooltip:enable');
+        });
+      }}
+    />
+  );
+};
+
+ReactDOM.render(<DemoInteraction />, document.getElementById('container'));

site/examples/statistics/interaction/demo/chart-index.js

@@ -0,0 +1,32 @@
+import { Line } from '@ant-design/plots';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const DemoInteraction = () => {
+  const config = {
+    data: {
+      type: 'fetch',
+      value: 'https://assets.antv.antgroup.com/g2/indices.json',
+    },
+    xField: (d) => new Date(d.Date),
+    yField: 'Close',
+    colorField: 'Symbol',
+    scale: { y: { type: 'log' } },
+    axis: { y: { title: '↑ Change in price (%)', labelAutoRotate: false } },
+    labels: [{ text: 'Symbol', selector: 'last', fontSize: 10 }],
+    interaction: {
+      chartIndex: {
+        ruleStroke: '#aaa',
+        labelDx: 5,
+        labelTextAlign: 'center',
+        labelStroke: '#fff',
+        labelLineWidth: 5,
+        labelFormatter: (d) => `${d.toLocaleDateString()}`,
+      },
+      tooltip: false,
+    },
+  };
+  return <Line {...config} />;
+};
+
+ReactDOM.render(<DemoInteraction />, document.getElementById('container'));

site/examples/statistics/interaction/demo/fisheye.js

@@ -0,0 +1,24 @@
+import { Scatter } from '@ant-design/plots';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const DemoInteraction = () => {
+  const config = {
+    data: {
+      type: 'fetch',
+      value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/bubble.json',
+    },
+    xField: 'GDP',
+    yField: 'LifeExpectancy',
+    sizeField: 'Population',
+    colorField: 'continent',
+    shapeField: 'point',
+    scale: { size: { type: 'log', range: [4, 20] } },
+    style: { fillOpacity: 0.3, lineWidth: 1 },
+    legend: { size: false },
+    interaction: { fisheye: true },
+  };
+  return <Scatter {...config} />;
+};
+
+ReactDOM.render(<DemoInteraction />, document.getElementById('container'));

site/examples/statistics/interaction/demo/focus-context.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Area } from '@ant-design/plots';
+import { useRef } from 'react';
+import { useEffect } from 'react';
+
+document.getElementById('container').innerHTML = `
+<div id="focus" ></div>
+<div id="context"></div>
+`;
+
+const commonConfig = {
+  data: {
+    type: 'fetch',
+    value: 'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
+  },
+  xField: 'date',
+  yField: 'close',
+  animate: false,
+};
+
+function createPathRender(compute) {
+  return (group, options, document) => {
+    if (!group.handle) {
+      const path = document.createElement('path');
+      group.handle = path;
+      group.appendChild(group.handle);
+    }
+    const { handle } = group;
+    const { width, height, ...rest } = options;
+    if (width === undefined || height === undefined) return handle;
+    handle.attr({ ...compute(width, height), ...rest });
+    return handle;
+  };
+}
+
+const DemoInteraction = () => {
+  const focusRef = useRef();
+  const contextRef = useRef();
+
+  useEffect(() => {
+    const focusChart = focusRef.current.chart;
+    const contextChart = contextRef.current.chart;
+
+    focusChart.on('brush:filter', (e) => {
+      const { nativeEvent } = e;
+      if (!nativeEvent) return;
+      const { selection } = e.data;
+      const { x: scaleX } = focusChart.getScale();
+      const [[x1, x2]] = selection;
+      const domainX = scaleX.getOptions().domain;
+      if (x1 === domainX[0] && x2 === domainX[1]) {
+        contextChart.emit('brush:remove', {});
+      } else {
+        contextChart.emit('brush:highlight', { data: { selection } });
+      }
+    });
+
+    contextChart.on('brush:highlight', (e) => {
+      const { nativeEvent, data } = e;
+      if (!nativeEvent) return;
+      const { selection } = data;
+      focusChart.emit('brush:filter', { data: { selection } });
+    });
+
+    contextChart.on('brush:remove', (e) => {
+      const { nativeEvent } = e;
+      if (!nativeEvent) return;
+      const { x: scaleX, y: scaleY } = contextChart.getScale();
+      const selection = [scaleX.getOptions().domain, scaleY.getOptions().domain];
+      focusChart.emit('brush:filter', { data: { selection } });
+    });
+  }, []);
+
+  const focusConfig = {
+    ...commonConfig,
+    autoFit: false,
+    height: 360,
+    paddingLeft: 60,
+    interaction: {
+      tooltip: false,
+      brushXFilter: true,
+    },
+  };
+
+  const contextConfig = {
+    ...commonConfig,
+    autoFit: false,
+    paddingTop: 0,
+    paddingBottom: 0,
+    height: 90,
+    paddingLeft: 60,
+    axis: false,
+    interaction: {
+      tooltip: false,
+      brushXHighlight: {
+        series: true,
+        maskOpacity: 0.3,
+        maskFill: '#777',
+        maskHandleWRender: createPathRender((width, height) => ({
+          d: 'M-0.5,31.5c-2.5,0,-4.5,2,-4.5,4.5v30c0,2.5,2,4.5,4.5,4.5V31.5z',
+          transform: `translate(${width / 2}, ${-height / 2})`,
+        })),
+        maskHandleERender: createPathRender((width, height) => ({
+          d: 'M0.5,31.5c2.5,0,4.5,2,4.5,4.5v30c0,2.5,-2,4.5,-4.5,4.5V31.5z',
+          transform: `translate(${width / 2}, ${-height / 2})`,
+        })),
+        maskHandleEFill: '#D3D8E0',
+        maskHandleWFill: '#D3D8E0',
+      },
+    },
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <Area {...focusConfig} getElementById="focus" onReady={(plot) => (focusRef.current = plot)} />
+      <Area {...contextConfig} getElementById="context" onReady={(plot) => (contextRef.current = plot)} />
+    </div>
+  );
+};
+
+ReactDOM.render(<DemoInteraction />, document.getElementById('container'));

site/examples/statistics/interaction/demo/highlight.js

@@ -0,0 +1,20 @@
+import { Column } from '@ant-design/plots';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const DemoInteraction = () => {
+  const config = {
+    data: {
+      type: 'fetch',
+      value: 'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
+    },
+    xField: 'letter',
+    yField: 'frequency',
+    transform: [{ type: 'sortX', by: 'y', reverse: true, slice: 5 }],
+    axis: { y: { labelFormatter: '.0%' } },
+    interaction: { elementHighlight: { background: true } },
+  };
+  return <Column {...config} />;
+};
+
+ReactDOM.render(<DemoInteraction />, document.getElementById('container'));