docs: 增加动态交互图表 & 文档 typo 修整 (#2154)

* docs(🔖): 文案 typo 和 文档顺序

* docs(demo): 增加动态交互图的一级导航 demo

* fix: 修复 lint error

Author: visiky

docs/api/events.en.md

@@ -1,6 +1,6 @@
 ---
 title: Events
-order: 3
+order: 4
 ---
 
 `markdown:docs/common/events.en.md`

docs/api/events.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 图表事件
-order: 3
+order: 4
 ---
 
 `markdown:docs/common/events.zh.md`

docs/api/plot-api.en.md

@@ -6,7 +6,7 @@ redirect_from:
 ---
 
 
-The core technology architecture of G2plot is very simple. All plots are inherited from a base class. The base class provides a common API method for all plots, and each specific visualization plot only processes its own configuration items. So all plots basically share the common API, except for some plots (such as Gauge and Liquid) that have subtle differences in the changedata API.
+The core technology architecture of G2Plot is very simple. All plots are inherited from a base class. The base class provides a common API method for all plots, and each specific visualization plot only processes its own configuration items. So all plots basically share the common API, except for some plots (such as Gauge and Liquid) that have subtle differences in the changedata API.
 
 
 ### 1. create a plot instance
@@ -55,6 +55,8 @@ Through this method, you can modify the data of the plot and re-render the plot
  - Gauge、Liquid, which accept the updated percent value
  - Dual Axes, which has its own data structure
 
+<playground path="dynamic-plots/basic/demo/dynamic-spline.ts" rid="rect"></playground>
+
 ### 5. changeSize
 
 ```sign

docs/api/plot-api.zh.md

@@ -55,6 +55,8 @@ plot.changeData(data: object[] | number);
  - 仪表盘、水波图 等指标类的，直接传入更新的 percent 数值
  - 双轴图等复合类图表，直接传入自己的 data 数据结构
 
+ <playground path="dynamic-plots/basic/demo/dynamic-spline.ts" rid="rect"></playground>
+
 ### 5. changeSize
 
 ```sign

examples/area/basic/demo/basic.ts

@@ -2,24 +2,14 @@ import { Area } from '@antv/g2plot';
 
 fetch('https://gw.alipayobjects.com/os/bmw-prod/360c3eae-0c73-46f0-a982-4746a6095010.json')
   .then((res) => res.json())
-  .then((originalData) => {
-    let cnt = 2;
+  .then((data) => {
     const area = new Area('container', {
-      data: originalData.slice(0, cnt),
+      data,
       xField: 'timePeriod',
       yField: 'value',
       xAxis: {
         range: [0, 1],
       },
     });
     area.render();
-
-    const interval = setInterval(() => {
-      if (cnt === originalData.length) {
-        clearInterval(interval);
-      } else {
-        cnt += 1;
-        area.changeData(originalData.slice(0, cnt));
-      }
-    }, 400);
   });

examples/dynamic-plots/basic/demo/dynamic-area.ts

@@ -0,0 +1,25 @@
+import { Area } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/bmw-prod/360c3eae-0c73-46f0-a982-4746a6095010.json')
+  .then((res) => res.json())
+  .then((originalData) => {
+    let cnt = 2;
+    const area = new Area('container', {
+      data: originalData.slice(0, cnt),
+      xField: 'timePeriod',
+      yField: 'value',
+      xAxis: {
+        range: [0, 1],
+      },
+    });
+    area.render();
+
+    const interval = setInterval(() => {
+      if (cnt === originalData.length) {
+        clearInterval(interval);
+      } else {
+        cnt += 1;
+        area.changeData(originalData.slice(0, cnt));
+      }
+    }, 400);
+  });

examples/dynamic-plots/basic/demo/dynamic-spline.ts

@@ -0,0 +1,37 @@
+import { Line } from '@antv/g2plot';
+
+function getData() {
+  // generate an array of random data
+  const data = [];
+  const time = new Date().getTime();
+
+  for (let i = -19; i <= 0; i += 1) {
+    data.push({
+      x: time + i * 1000,
+      y: Math.random() + 0.2,
+    });
+  }
+  return data;
+}
+
+const line = new Line('container', {
+  data: getData(),
+  padding: 'auto',
+  xField: 'x',
+  yField: 'y',
+  xAxis: {
+    type: 'time',
+    mask: 'HH:MM:ss',
+  },
+  smooth: true,
+  point: {},
+});
+
+line.render();
+
+setInterval(() => {
+  const x = new Date().getTime(), // current time
+    y = Math.random() + 0.2;
+  const newData = line.options.data.slice(1).concat({ x, y });
+  line.changeData(newData);
+}, 1000);

examples/dynamic-plots/basic/demo/meta.json

@@ -0,0 +1,24 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "dynamic-spline.ts",
+      "title": {
+        "zh": "实时刷新的曲线图",
+        "en": "Spline updating real-time"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/uShhKpuVTc/dongtaigengxinzhexiantushuju.gif"
+    },
+    {
+      "filename": "dynamic-area.ts",
+      "title": {
+        "zh": "动态更新的面积图",
+        "en": "Area updating with dynamic"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ld0NQtdLO0/mianjitugengxinshuju-after.gif"
+    }
+  ]
+}

examples/dynamic-plots/basic/index.en.md

@@ -0,0 +1,4 @@
+---
+title: ChangeData
+order: 0
+---

examples/dynamic-plots/basic/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 动态更新数据
+order: 0
+---

examples/line/basic/demo/dynamic-line.ts

@@ -36,14 +36,6 @@
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*r8MPQ4n9CIQAAAAAAAAAAAAAARQnAQ"
     },
-    {
-      "filename": "dynamic-line.ts",
-      "title": {
-        "zh": "动态更新折线图",
-        "en": "Line plot updated dynamic"
-      },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/vOmMGBA1k6/dongtaigengxinzhexiantushuju2.gif"
-    },
     {
       "filename": "line-with-data-marker.ts",
       "title": {

examples/line/basic/demo/meta.json

@@ -205,6 +205,14 @@ module.exports = {
           en: 'General Configuration',
         },
       },
+      {
+        slug: 'dynamic-plots',
+        icon: 'other',
+        title: {
+          zh: '动态交互图',
+          en: 'Dynamic Plots',
+        },
+      },
       {
         slug: 'plugin',
         icon: 'other',

gatsby-config.js

@@ -1,5 +1,4 @@
 import { percent } from '../../utils/transform/percent';
-import { AreaOptions } from './types';
 
 /**
  * 获取面积图数据，如果是百分比，进行数据转换
@@ -12,6 +11,5 @@ export function getAreaData(
   asField: string,
   isPercent?: boolean
 ) {
-  // const { data, isPercent, xField, yField } = options;
   return !isPercent ? data : percent(data, yField, groupField, asField);
 }