From 38e8d1b9b5bd3eb1ce35c8bf2e80cdef8881d6c8 Mon Sep 17 00:00:00 2001 From: kasmine <736929286@qq.com> Date: Sat, 21 Nov 2020 13:28:28 +0800 Subject: [PATCH 1/2] =?UTF-8?q?refactor(demo):=20=E5=B0=86=20case=20?= =?UTF-8?q?=E6=A1=88=E4=BE=8B=E8=BF=9B=E8=A1=8C=E4=B8=80=E4=B8=AA=E5=BD=92?= =?UTF-8?q?=E7=B1=BB=EF=BC=8C=E9=87=8D=E5=91=BD=E5=90=8D=E4=B8=BA=E7=BB=9F?= =?UTF-8?q?=E8=AE=A1=E5=9C=BA=E6=99=AF=20&=20=E6=9B=B4=E6=96=B0gastby?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/case/funnel/demo/meta.json | 16 ---------- examples/case/funnel/index.en.md | 4 --- examples/case/funnel/index.zh.md | 4 --- examples/case/statistical-charts/index.en.md | 4 --- examples/case/statistical-charts/index.zh.md | 4 --- .../demo/funnel.jsx | 0 .../demo/funnel.ts | 0 .../demo/line-association.ts | 0 .../demo/meta.json | 14 +++++++-- .../demo/pie.ts | 0 .../case/statistical-scenario/design.en.md | 29 +++++++++++++++++++ .../case/statistical-scenario/design.zh.md | 29 +++++++++++++++++++ .../case/statistical-scenario/index.en.md | 4 +++ .../case/statistical-scenario/index.zh.md | 4 +++ package.json | 2 +- 15 files changed, 78 insertions(+), 36 deletions(-) delete mode 100644 examples/case/funnel/demo/meta.json delete mode 100644 examples/case/funnel/index.en.md delete mode 100644 examples/case/funnel/index.zh.md delete mode 100644 examples/case/statistical-charts/index.en.md delete mode 100644 examples/case/statistical-charts/index.zh.md rename examples/case/{funnel => statistical-scenario}/demo/funnel.jsx (100%) rename examples/case/{statistical-charts => statistical-scenario}/demo/funnel.ts (100%) rename examples/case/{statistical-charts => statistical-scenario}/demo/line-association.ts (100%) rename examples/case/{statistical-charts => statistical-scenario}/demo/meta.json (69%) rename examples/case/{statistical-charts => statistical-scenario}/demo/pie.ts (100%) create mode 100644 examples/case/statistical-scenario/design.en.md create mode 100644 examples/case/statistical-scenario/design.zh.md create mode 100644 examples/case/statistical-scenario/index.en.md create mode 100644 examples/case/statistical-scenario/index.zh.md diff --git a/examples/case/funnel/demo/meta.json b/examples/case/funnel/demo/meta.json deleted file mode 100644 index 97dcf1a404..0000000000 --- a/examples/case/funnel/demo/meta.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "title": { - "zh": "中文分类", - "en": "Category" - }, - "demos": [ - { - "filename": "funnel.jsx", - "title": { - "zh": "场景漏斗图", - "en": "Funnel Scenario" - }, - "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*ucU-QIutfqwAAAAAAAAAAAAAARQnAQ" - } - ] -} diff --git a/examples/case/funnel/index.en.md b/examples/case/funnel/index.en.md deleted file mode 100644 index d375f06fca..0000000000 --- a/examples/case/funnel/index.en.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: Funnel Scenario -order: 3 ---- diff --git a/examples/case/funnel/index.zh.md b/examples/case/funnel/index.zh.md deleted file mode 100644 index 00a9707f34..0000000000 --- a/examples/case/funnel/index.zh.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: 场景漏斗图 -order: 3 ---- diff --git a/examples/case/statistical-charts/index.en.md b/examples/case/statistical-charts/index.en.md deleted file mode 100644 index 3992a65b02..0000000000 --- a/examples/case/statistical-charts/index.en.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: Statistical Charts -order: 0 ---- diff --git a/examples/case/statistical-charts/index.zh.md b/examples/case/statistical-charts/index.zh.md deleted file mode 100644 index 0761e255fd..0000000000 --- a/examples/case/statistical-charts/index.zh.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: 统计图表 -order: 0 ---- diff --git a/examples/case/funnel/demo/funnel.jsx b/examples/case/statistical-scenario/demo/funnel.jsx similarity index 100% rename from examples/case/funnel/demo/funnel.jsx rename to examples/case/statistical-scenario/demo/funnel.jsx diff --git a/examples/case/statistical-charts/demo/funnel.ts b/examples/case/statistical-scenario/demo/funnel.ts similarity index 100% rename from examples/case/statistical-charts/demo/funnel.ts rename to examples/case/statistical-scenario/demo/funnel.ts diff --git a/examples/case/statistical-charts/demo/line-association.ts b/examples/case/statistical-scenario/demo/line-association.ts similarity index 100% rename from examples/case/statistical-charts/demo/line-association.ts rename to examples/case/statistical-scenario/demo/line-association.ts diff --git a/examples/case/statistical-charts/demo/meta.json b/examples/case/statistical-scenario/demo/meta.json similarity index 69% rename from examples/case/statistical-charts/demo/meta.json rename to examples/case/statistical-scenario/demo/meta.json index 107478c7ce..3b2d00a042 100644 --- a/examples/case/statistical-charts/demo/meta.json +++ b/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": { diff --git a/examples/case/statistical-charts/demo/pie.ts b/examples/case/statistical-scenario/demo/pie.ts similarity index 100% rename from examples/case/statistical-charts/demo/pie.ts rename to examples/case/statistical-scenario/demo/pie.ts diff --git a/examples/case/statistical-scenario/design.en.md b/examples/case/statistical-scenario/design.en.md new file mode 100644 index 0000000000..85c039f79f --- /dev/null +++ b/examples/case/statistical-scenario/design.en.md @@ -0,0 +1,29 @@ +--- +title: 设计规范 +--- + +## Indicator Trend Diagram + +> 定义：带图例指标卡和统计图表结合使用的复合图表 + +### 技术栈 + +G2plot，antd + +### 何时使用 + +一般用于核心指标的监控，同时查看每个指标对应趋势图，常用于营销活动中关键指标的分析、kpi 大盘完成情况的监控，服务于运营、BI、高管等。设计上通过指标+图表联动平铺展示的方式，取代点击指标再查看图表的交互方式，减少点击跳转，可极大提高屏效，不易打断分析思路，给到沉浸式的分析体验 + +## Funnel Scenario + +> 定义：为条形图添加一个转化率组件，就可以轻松生成一个漏斗图。用于表达数据从一个阶段到另一阶段逐步减少的过程。漏斗的每个阶段代表总数的一部分。因此，它假定为漏斗形-第一阶段是最宽且最大的阶段。显示的值按比例递减，总计为 100％。 + +### 技术栈 + +G2plot，antd + +### 何时使用 + +产品或运营同学在进行用户行为的分析时，常常遇到转化率过低等问题，但用户很难定位到问题是在哪，也难以去优化。条形漏斗图不仅可以提供用户每一步的数值变化、步骤间的转化率，还可以延伸提供转化问题的提示信息，并下钻跳转其他页面进行详情查看。 + +此外，相比于常规漏斗图，条形漏斗图更适用于漏斗步数不确定的情况，可扩展性更强。 \ No newline at end of file diff --git a/examples/case/statistical-scenario/design.zh.md b/examples/case/statistical-scenario/design.zh.md new file mode 100644 index 0000000000..60a1f66da7 --- /dev/null +++ b/examples/case/statistical-scenario/design.zh.md @@ -0,0 +1,29 @@ +--- +title: 设计规范 +--- + +## 指标卡趋势图 + +> 定义：带图例指标卡和统计图表结合使用的复合图表 + +### 技术栈 + +G2plot，antd + +### 何时使用 + +一般用于核心指标的监控，同时查看每个指标对应趋势图，常用于营销活动中关键指标的分析、kpi 大盘完成情况的监控，服务于运营、BI、高管等。设计上通过指标+图表联动平铺展示的方式，取代点击指标再查看图表的交互方式，减少点击跳转，可极大提高屏效，不易打断分析思路，给到沉浸式的分析体验 + +## 场景漏斗图 + +> 定义：为条形图添加一个转化率组件，就可以轻松生成一个漏斗图。用于表达数据从一个阶段到另一阶段逐步减少的过程。漏斗的每个阶段代表总数的一部分。因此，它假定为漏斗形-第一阶段是最宽且最大的阶段。显示的值按比例递减，总计为 100％。 + +### 技术栈 + +G2plot，antd + +### 何时使用 + +产品或运营同学在进行用户行为的分析时，常常遇到转化率过低等问题，但用户很难定位到问题是在哪，也难以去优化。条形漏斗图不仅可以提供用户每一步的数值变化、步骤间的转化率，还可以延伸提供转化问题的提示信息，并下钻跳转其他页面进行详情查看。 + +此外，相比于常规漏斗图，条形漏斗图更适用于漏斗步数不确定的情况，可扩展性更强。 \ No newline at end of file diff --git a/examples/case/statistical-scenario/index.en.md b/examples/case/statistical-scenario/index.en.md new file mode 100644 index 0000000000..ab46d07031 --- /dev/null +++ b/examples/case/statistical-scenario/index.en.md @@ -0,0 +1,4 @@ +--- +title: Statistical Scenario +order: 0 +--- diff --git a/examples/case/statistical-scenario/index.zh.md b/examples/case/statistical-scenario/index.zh.md new file mode 100644 index 0000000000..3a186b7a44 --- /dev/null +++ b/examples/case/statistical-scenario/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 统计场景 +order: 0 +--- diff --git a/package.json b/package.json index 67294a8a7d..f32421dbf7 100644 --- a/package.json +++ b/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", From b3a343ac16a69aee0a378d13f76829351ac93242 Mon Sep 17 00:00:00 2001 From: kasmine <736929286@qq.com> Date: Sat, 21 Nov 2020 13:47:34 +0800 Subject: [PATCH 2/2] =?UTF-8?q?refactor(demo):=20=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E5=9C=BA=E6=99=AF=20demo=20=E7=9A=84?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/case/statistical-scenario/API.en.md | 6 ++++++ examples/case/statistical-scenario/API.zh.md | 6 ++++++ examples/case/statistical-scenario/design.en.md | 13 +++++++++---- examples/case/statistical-scenario/design.zh.md | 13 +++++++++---- 4 files changed, 30 insertions(+), 8 deletions(-) create mode 100644 examples/case/statistical-scenario/API.en.md create mode 100644 examples/case/statistical-scenario/API.zh.md diff --git a/examples/case/statistical-scenario/API.en.md b/examples/case/statistical-scenario/API.en.md new file mode 100644 index 0000000000..791522f53a --- /dev/null +++ b/examples/case/statistical-scenario/API.en.md @@ -0,0 +1,6 @@ +--- +title: API +order: 0 +--- + +统计图表场景案例暂无 API，可以查看 **Design Guide** 了解 diff --git a/examples/case/statistical-scenario/API.zh.md b/examples/case/statistical-scenario/API.zh.md new file mode 100644 index 0000000000..24568d443b --- /dev/null +++ b/examples/case/statistical-scenario/API.zh.md @@ -0,0 +1,6 @@ +--- +title: API +order: 0 +--- + +统计图表场景案例暂无 API，可以查看 **设计指引** 了解 diff --git a/examples/case/statistical-scenario/design.en.md b/examples/case/statistical-scenario/design.en.md index 85c039f79f..563857fb5e 100644 --- a/examples/case/statistical-scenario/design.en.md +++ b/examples/case/statistical-scenario/design.en.md @@ -2,9 +2,11 @@ title: 设计规范 --- -## Indicator Trend Diagram +## 📈 Indicator Trend Diagram -> 定义：带图例指标卡和统计图表结合使用的复合图表 +### 定义 + +带图例指标卡和统计图表结合使用的复合图表 ### 技术栈 @@ -14,9 +16,12 @@ G2plot，antd 一般用于核心指标的监控，同时查看每个指标对应趋势图，常用于营销活动中关键指标的分析、kpi 大盘完成情况的监控，服务于运营、BI、高管等。设计上通过指标+图表联动平铺展示的方式，取代点击指标再查看图表的交互方式，减少点击跳转，可极大提高屏效，不易打断分析思路，给到沉浸式的分析体验 -## Funnel Scenario -> 定义：为条形图添加一个转化率组件，就可以轻松生成一个漏斗图。用于表达数据从一个阶段到另一阶段逐步减少的过程。漏斗的每个阶段代表总数的一部分。因此，它假定为漏斗形-第一阶段是最宽且最大的阶段。显示的值按比例递减，总计为 100％。 +## 📈 Funnel Scenario + +### 定义 + +为条形图添加一个转化率组件，就可以轻松生成一个漏斗图。用于表达数据从一个阶段到另一阶段逐步减少的过程。漏斗的每个阶段代表总数的一部分。因此，它假定为漏斗形-第一阶段是最宽且最大的阶段。显示的值按比例递减，总计为 100％。 ### 技术栈 diff --git a/examples/case/statistical-scenario/design.zh.md b/examples/case/statistical-scenario/design.zh.md index 60a1f66da7..015b6c4ec0 100644 --- a/examples/case/statistical-scenario/design.zh.md +++ b/examples/case/statistical-scenario/design.zh.md @@ -2,9 +2,11 @@ title: 设计规范 --- -## 指标卡趋势图 +## 📈 指标卡趋势图 -> 定义：带图例指标卡和统计图表结合使用的复合图表 +### 定义 + +带图例指标卡和统计图表结合使用的复合图表 ### 技术栈 @@ -14,9 +16,12 @@ G2plot，antd 一般用于核心指标的监控，同时查看每个指标对应趋势图，常用于营销活动中关键指标的分析、kpi 大盘完成情况的监控，服务于运营、BI、高管等。设计上通过指标+图表联动平铺展示的方式，取代点击指标再查看图表的交互方式，减少点击跳转，可极大提高屏效，不易打断分析思路，给到沉浸式的分析体验 -## 场景漏斗图 -> 定义：为条形图添加一个转化率组件，就可以轻松生成一个漏斗图。用于表达数据从一个阶段到另一阶段逐步减少的过程。漏斗的每个阶段代表总数的一部分。因此，它假定为漏斗形-第一阶段是最宽且最大的阶段。显示的值按比例递减，总计为 100％。 +## 📈 场景漏斗图 + +### 定义 + +为条形图添加一个转化率组件，就可以轻松生成一个漏斗图。用于表达数据从一个阶段到另一阶段逐步减少的过程。漏斗的每个阶段代表总数的一部分。因此，它假定为漏斗形-第一阶段是最宽且最大的阶段。显示的值按比例递减，总计为 100％。 ### 技术栈