refactor(demo): 将 case 案例进行一个归类，重命名为统计场景 & 更新gastby

examples/case/statistical-scenario/API.en.md

@@ -0,0 +1,6 @@
+---
+title: API
+order: 0
+---
+
+统计图表场景案例暂无 API，可以查看 **Design Guide** 了解

examples/case/statistical-scenario/API.zh.md

@@ -0,0 +1,6 @@
+---
+title: API
+order: 0
+---
+
+统计图表场景案例暂无 API，可以查看 **设计指引** 了解

examples/case/statistical-charts/demo/meta.json → examples/case/statistical-scenario/demo/meta.json

@@ -7,11 +7,19 @@
     {
       "filename": "line-association.ts",
       "title": {
-        "zh": "7-day COVID case rates",
-        "en": "7-day COVID case rates"
+        "zh": "指标卡趋势图",
+        "en": "Indicator Trend Diagram"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*kHHZQa-fpAQAAAAAAAAAAAAAARQnAQ"
-    }, 
+    },
+    {
+      "filename": "funnel.jsx",
+      "title": {
+        "zh": "场景漏斗图",
+        "en": "Funnel Scenario"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*ucU-QIutfqwAAAAAAAAAAAAAARQnAQ"
+    },
     {
       "filename": "pie.ts",
       "title": {

examples/case/statistical-scenario/design.en.md

@@ -0,0 +1,34 @@
+---
+title: 设计规范
+---
+
+## 📈 Indicator Trend Diagram
+
+### 定义
+
+带图例指标卡和统计图表结合使用的复合图表
+
+### 技术栈
+
+G2plot，antd
+
+### 何时使用
+
+一般用于核心指标的监控，同时查看每个指标对应趋势图，常用于营销活动中关键指标的分析、kpi 大盘完成情况的监控，服务于运营、BI、高管等。设计上通过指标+图表联动平铺展示的方式，取代点击指标再查看图表的交互方式，减少点击跳转，可极大提高屏效，不易打断分析思路，给到沉浸式的分析体验
+
+
+## 📈 Funnel Scenario
+
+### 定义
+
+为条形图添加一个转化率组件，就可以轻松生成一个漏斗图。用于表达数据从一个阶段到另一阶段逐步减少的过程。漏斗的每个阶段代表总数的一部分。因此，它假定为漏斗形-第一阶段是最宽且最大的阶段。显示的值按比例递减，总计为 100％。
+
+### 技术栈
+
+G2plot，antd
+
+### 何时使用
+
+产品或运营同学在进行用户行为的分析时，常常遇到转化率过低等问题，但用户很难定位到问题是在哪，也难以去优化。条形漏斗图不仅可以提供用户每一步的数值变化、步骤间的转化率，还可以延伸提供转化问题的提示信息，并下钻跳转其他页面进行详情查看。
+
+此外，相比于常规漏斗图，条形漏斗图更适用于漏斗步数不确定的情况，可扩展性更强。

examples/case/statistical-scenario/design.zh.md

@@ -0,0 +1,34 @@
+---
+title: 设计规范
+---
+
+## 📈 指标卡趋势图
+
+### 定义
+
+带图例指标卡和统计图表结合使用的复合图表
+
+### 技术栈
+
+G2plot，antd
+
+### 何时使用
+
+一般用于核心指标的监控，同时查看每个指标对应趋势图，常用于营销活动中关键指标的分析、kpi 大盘完成情况的监控，服务于运营、BI、高管等。设计上通过指标+图表联动平铺展示的方式，取代点击指标再查看图表的交互方式，减少点击跳转，可极大提高屏效，不易打断分析思路，给到沉浸式的分析体验
+
+
+## 📈 场景漏斗图
+
+### 定义
+
+为条形图添加一个转化率组件，就可以轻松生成一个漏斗图。用于表达数据从一个阶段到另一阶段逐步减少的过程。漏斗的每个阶段代表总数的一部分。因此，它假定为漏斗形-第一阶段是最宽且最大的阶段。显示的值按比例递减，总计为 100％。
+
+### 技术栈
+
+G2plot，antd
+
+### 何时使用
+
+产品或运营同学在进行用户行为的分析时，常常遇到转化率过低等问题，但用户很难定位到问题是在哪，也难以去优化。条形漏斗图不仅可以提供用户每一步的数值变化、步骤间的转化率，还可以延伸提供转化问题的提示信息，并下钻跳转其他页面进行详情查看。
+
+此外，相比于常规漏斗图，条形漏斗图更适用于漏斗步数不确定的情况，可扩展性更强。

examples/case/statistical-scenario/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Statistical Scenario
+order: 0
+---

examples/case/statistical-scenario/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 统计场景
+order: 0
+---

package.json

@@ -64,7 +64,7 @@
   },
   "devDependencies": {
     "@antv/data-set": "^0.11.5",
-    "@antv/gatsby-theme-antv": "1.0.0-beta.14",
+    "@antv/gatsby-theme-antv": "1.0.0-beta.19",
     "@babel/core": "^7.10.4",
     "@babel/plugin-transform-runtime": "^7.11.5",
     "@babel/preset-env": "^7.10.4",