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

Author: visiky

docs/api/plot-api.en.md

@@ -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',