refactor: 迁移分面图 demo 到高级图表下 & 增加公告

Author: visiky

docs/manual/plots/facet.en.md

@@ -0,0 +1,72 @@
+---
+title: Facet
+order: 21
+contributors:
+  [{ author: '新茗', github: 'visiky', avatar: 'https://gw.alipayobjects.com/zos/antfincdn/KAeYPA3TV0/avatar.jpeg' }]
+---
+
+<!-- ### 用法建议 -->
+## Introduction
+
+分面（Facet）是指利用 G2 提供的 View 递归嵌套能力，将一份数据按照某个维度分隔成若干子集，然后创建一个图表的集合，将每一个数据子集绘制到图表矩阵的窗格中。
+
+分面主要提供了两个功能：
+
+1. 按照指定的维度划分数据集；
+2. 对图表进行排版和布局。
+
+对于探索型数据分析来说，分面是一个强大有力的工具，能帮我们快速地分析出数据各个子集模式的异同。目前 G2 内置的分面包括六种：rect、list、circle、tree、mirror 和 matrix，具体描述如下表所示：
+
+| **分面类型** |                       **说明**                        |
+| :----------: | :---------------------------------------------------: |
+|     rect     | **默认类型**，指定 2 个维度作为行列，形成图表的矩阵。 |
+|     list     |   指定一个维度，可以指定一行有几列，超出自动换行。    |
+|    circle    |              指定一个维度，沿着圆分布。               |
+|     tree     |  指定多个维度，每个维度作为树的一级，展开多层图表。   |
+|    mirror    |             指定一个维度，形成镜像图表。              |
+|    matrix    |             指定一个维度，形成矩阵分面。              |
+
+## Qucik start
+
+<div class='sign'>
+
+```ts
+import { Facet } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antfincdn/VnrXpYSuqW/circle-pie.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const plot = new Facet('container', {
+      type: 'circle',
+      fields: ['clarity'],
+      data,
+      tooltip: { showMarkers: false },
+      meta: {
+        cut: {
+          sync: true,
+        },
+      },
+      eachView: (view, f) => {
+        return {
+          type: 'pie',
+          options: {
+            data: f.data,
+            angleField: 'mean',
+            colorField: 'cut',
+            pieStyle: { stroke: null },
+          },
+        };
+      },
+    });
+    plot.render();
+  });
+
+```
+
+</div>
+
+📊 See more <a href="/en/examples/plugin/facet#column" target='blank'>examples</a>.
+
+🎨 For an overview of the gauge plot options see the [API reference](/en/docs/api/advanced-plots/facet).
+
+</div>

docs/manual/plots/facet.zh.md

@@ -0,0 +1,72 @@
+---
+title: 分面图
+order: 21
+contributors:
+  [{ author: '新茗', github: 'visiky', avatar: 'https://gw.alipayobjects.com/zos/antfincdn/KAeYPA3TV0/avatar.jpeg' }]
+---
+
+<!-- ### 用法建议 -->
+## 介绍
+
+分面（Facet）是指利用 G2 提供的 View 递归嵌套能力，将一份数据按照某个维度分隔成若干子集，然后创建一个图表的集合，将每一个数据子集绘制到图表矩阵的窗格中。
+
+分面主要提供了两个功能：
+
+1. 按照指定的维度划分数据集；
+2. 对图表进行排版和布局。
+
+对于探索型数据分析来说，分面是一个强大有力的工具，能帮我们快速地分析出数据各个子集模式的异同。目前 G2 内置的分面包括六种：rect、list、circle、tree、mirror 和 matrix，具体描述如下表所示：
+
+| **分面类型** |                       **说明**                        |
+| :----------: | :---------------------------------------------------: |
+|     rect     | **默认类型**，指定 2 个维度作为行列，形成图表的矩阵。 |
+|     list     |   指定一个维度，可以指定一行有几列，超出自动换行。    |
+|    circle    |              指定一个维度，沿着圆分布。               |
+|     tree     |  指定多个维度，每个维度作为树的一级，展开多层图表。   |
+|    mirror    |             指定一个维度，形成镜像图表。              |
+|    matrix    |             指定一个维度，形成矩阵分面。              |
+
+## 快速开始
+
+<div class='sign'>
+
+```ts
+import { Facet } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antfincdn/VnrXpYSuqW/circle-pie.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const plot = new Facet('container', {
+      type: 'circle',
+      fields: ['clarity'],
+      data,
+      tooltip: { showMarkers: false },
+      meta: {
+        cut: {
+          sync: true,
+        },
+      },
+      eachView: (view, f) => {
+        return {
+          type: 'pie',
+          options: {
+            data: f.data,
+            angleField: 'mean',
+            colorField: 'cut',
+            pieStyle: { stroke: null },
+          },
+        };
+      },
+    });
+    plot.render();
+  });
+
+```
+
+</div>
+
+📊 查看更多<a href="/zh/examples/plugin/facet#column" target='blank'>示例</a>.
+
+🎨 柱状图详细的配置参考 [API 文档](/zh/docs/api/advanced-plots/facet).
+
+</div>

examples/plugin/association/index.en.md

@@ -1,4 +1,4 @@
 ---
 title: Association Plots
-order: 3
+order: 4
 ---

examples/plugin/association/index.zh.md

@@ -1,4 +1,4 @@
 ---
 title: 图表联动
-order: 3
+order: 4
 ---

examples/facet/plot/API.en.md renamed to examples/plugin/facet/API.en.md

@@ -10,63 +10,71 @@
         "zh": "Column 分面图",
         "en": "Column facet"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/SAiAwUtFTN/d8350db2-a905-4bd0-9c99-a750a1ee8cb0.png"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/SAiAwUtFTN/d8350db2-a905-4bd0-9c99-a750a1ee8cb0.png",
+      "new": true
     },
     {
       "filename": "rect.ts",
       "title": {
         "zh": "二维行列(矩形)分面",
         "en": "Rect facet"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/%24PP5iO2j2X/3658552c-f0d2-4da5-a236-36509187676c.png"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/%24PP5iO2j2X/3658552c-f0d2-4da5-a236-36509187676c.png",
+      "new": true
     },
     {
       "filename": "list.ts",
       "title": {
         "zh": "列表分面",
         "en": "List facet"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/8cbQnUoZKq/1e19cd37-55b7-4c56-8476-a64aa5bdb768.png"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/8cbQnUoZKq/1e19cd37-55b7-4c56-8476-a64aa5bdb768.png",
+      "new": true
     },
     {
       "filename": "circle.ts",
       "title": {
         "zh": "圆形分面",
         "en": "Circle facet"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/PaADJJDV4V/1f52ab89-c989-4014-bd18-c3f3d36f8a90.png"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/PaADJJDV4V/1f52ab89-c989-4014-bd18-c3f3d36f8a90.png",
+      "new": true
     },
     {
       "filename": "mirror.ts",
       "title": {
         "zh": "镜像分面",
         "en": "Mirror facet"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/lt6RMVMz7I/0623b932-a8dc-402f-87d3-a80d889661bf.png"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/lt6RMVMz7I/0623b932-a8dc-402f-87d3-a80d889661bf.png",
+      "new": true
     },
     {
       "filename": "matrix.ts",
       "title": {
         "zh": "矩阵分面",
         "en": "Matrix facet"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/tx5DXB6xhh/99a19fdb-c428-43a2-8210-49e255d14e8c.png"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/tx5DXB6xhh/99a19fdb-c428-43a2-8210-49e255d14e8c.png",
+      "new": true
     },
     {
       "filename": "tree.ts",
       "title": {
         "zh": "树型分面",
         "en": "Tree facet"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/Hq%24sncegPI/3620662f-48f8-45c6-a269-c36168137ea0.png"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/Hq%24sncegPI/3620662f-48f8-45c6-a269-c36168137ea0.png",
+      "new": true
     },
     {
       "filename": "tree-column.ts",
       "title": {
         "zh": "多级树型分面",
         "en": "Tree clolumn facet"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/CBR0Ay1K3M/44c5908a-9a23-4aa0-8e26-563619456997.png"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/CBR0Ay1K3M/44c5908a-9a23-4aa0-8e26-563619456997.png",
+      "new": true
     }
   ]
 }

examples/facet/plot/API.zh.md renamed to examples/plugin/facet/API.zh.md

@@ -307,5 +307,9 @@ module.exports = {
       apiKey: '0d19588d7661a81faa8b75f6ade80321',
       indexName: 'antv_g2plot',
     },
+    announcement: {
+      zh: '1. 上新图表啦！请前往「教程 - 图表指引」查看「分面图」介绍。2. 另外，关于「股票图」、「图表组件：Tooltip」相关文档更新，请前往「API 文档」进行查看。',
+      en: '1. 上新图表啦！请前往「教程 - 图表指引」查看「分面图」介绍。2. 另外，关于「股票图」、「图表组件：Tooltip」相关文档更新，请前往「API 文档」进行查看。',
+    }
   },
 };