feat: 新增百分比面积图 (#1932)

* feat: 新增百分比面积图 * fix: conversation
antvis · Nov 17, 2020 · c4ae3b5 · c4ae3b5
1 parent a086405
commit c4ae3b5
Show file tree

Hide file tree

Showing 15 changed files with 338 additions and 5 deletions.
diff --git a/__tests__/data/area.ts b/__tests__/data/area.ts
@@ -0,0 +1,109 @@
+const percentData = [
+  {
+    country: 'Asia',
+    year: '1750',
+    value: 300,
+  },
+  {
+    country: 'Asia',
+    year: '1800',
+    value: 635,
+  },
+  {
+    country: 'Asia',
+    year: '1850',
+    value: 809,
+  },
+  {
+    country: 'Asia',
+    year: '1900',
+    value: 947,
+  },
+  {
+    country: 'Asia',
+    year: '1950',
+    value: 1402,
+  },
+  {
+    country: 'Asia',
+    year: '1999',
+    value: 3634,
+  },
+  {
+    country: 'Asia',
+    year: '2050',
+    value: 5268,
+  },
+  {
+    country: 'Africa',
+    year: '1750',
+    value: 100,
+  },
+  {
+    country: 'Africa',
+    year: '1800',
+    value: 107,
+  },
+  {
+    country: 'Africa',
+    year: '1850',
+    value: 111,
+  },
+  {
+    country: 'Africa',
+    year: '1900',
+    value: 133,
+  },
+  {
+    country: 'Africa',
+    year: '1950',
+    value: 221,
+  },
+  {
+    country: 'Africa',
+    year: '1999',
+    value: 767,
+  },
+  {
+    country: 'Africa',
+    year: '2050',
+    value: 1766,
+  },
+  {
+    country: 'Europe',
+    year: '1750',
+    value: 100,
+  },
+  {
+    country: 'Europe',
+    year: '1800',
+    value: 203,
+  },
+  {
+    country: 'Europe',
+    year: '1850',
+    value: 276,
+  },
+  {
+    country: 'Europe',
+    year: '1900',
+    value: 408,
+  },
+  {
+    country: 'Europe',
+    year: '1950',
+    value: 547,
+  },
+  {
+    country: 'Europe',
+    year: '1999',
+    value: 729,
+  },
+  {
+    country: 'Europe',
+    year: '2050',
+    value: 628,
+  },
+];
+
+export { percentData };
diff --git a/__tests__/unit/plots/area/percent-spec.ts b/__tests__/unit/plots/area/percent-spec.ts
@@ -0,0 +1,54 @@
+import { Area } from '../../../../src';
+import { percentData } from '../../../data/area';
+import { createDiv } from '../../../utils/dom';
+
+describe('area', () => {
+  it('percent area', () => {
+    const area = new Area(createDiv('percent*area', document.body, 'percent_container'), {
+      width: 400,
+      height: 300,
+      data: percentData,
+      xField: 'year',
+      yField: 'value',
+      seriesField: 'country',
+      color: ['#82d1de', '#cb302d', '#e3ca8c'],
+      areaStyle: {
+        fillOpacity: 0.7,
+      },
+      appendPadding: 10,
+      isPercent: true,
+      yAxis: {
+        label: {
+          formatter: (value) => {
+            // @ts-ignore
+            return value * 100;
+          },
+        },
+      },
+    });
+
+    area.render();
+
+    // render
+    expect(area.options.isPercent).toBe(true);
+    expect(area.chart.geometries[0].getAdjust('stack')).toBeDefined();
+    // tranform data
+    const { data } = area.chart.getOptions();
+    const percentItem = data.find((item) => item.country === 'Asia' && item.year === '1750');
+    expect(percentItem.value).toBe(0.6);
+    // tooltip formatter
+    const geometry = area.chart.geometries[0];
+    const elements = geometry.elements;
+    const bbox = elements[elements.length - 1].getBBox();
+    area.chart.showTooltip({ x: bbox.maxX, y: bbox.maxY });
+    const box = document.getElementById('percent_container');
+    expect(box.getElementsByClassName('g2-tooltip-value')[0].innerHTML.indexOf('%') !== -1).toBeTruthy();
+    area.update({
+      isPercent: false,
+    });
+    expect(area.options.isPercent).toBe(false);
+    const { data: currenData } = area.chart.getOptions();
+    expect(currenData[0].g2plot_percent).toBeUndefined();
+    area.destroy();
+  });
+});
diff --git a/docs/manual/plots/area.en.md b/docs/manual/plots/area.en.md
@@ -39,6 +39,12 @@ order: 1
 
 是否堆积面积图。
 
+#### isPercent
+
+<description>**optional** _boolean_ _default:_ `true`</description>
+
+是否百分比面积图，百分比时默认开启 isStack。
+
 #### areaStyle
 
 <description>**optional** _StyleAttr | Function_</description>

diff --git a/docs/manual/plots/area.zh.md b/docs/manual/plots/area.zh.md
@@ -39,6 +39,12 @@ order: 1
 
 是否堆积面积图。
 
+#### isPercent
+
+<description>**optional** _boolean_ _default:_ `true`</description>
+
+是否百分比面积图，百分比时默认开启 isStack。
+
 #### areaStyle
 
 <description>**optional** _StyleAttr | Function_</description>

diff --git a/examples/area/percent/API.en.md b/examples/area/percent/API.en.md
@@ -0,0 +1 @@
+`markdown:docs/manual/plots/area.en.md`
diff --git a/examples/area/percent/API.zh.md b/examples/area/percent/API.zh.md
@@ -0,0 +1 @@
+`markdown:docs/manual/plots/area.zh.md`
diff --git a/examples/area/percent/demo/basic.ts b/examples/area/percent/demo/basic.ts
@@ -0,0 +1,26 @@
+import { Area } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/bmw-prod/67ef5751-b228-417c-810a-962f978af3e7.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const area = new Area('container', {
+      data,
+      xField: 'year',
+      yField: 'value',
+      seriesField: 'country',
+      color: ['#82d1de', '#cb302d', '#e3ca8c'],
+      areaStyle: {
+        fillOpacity: 0.7,
+      },
+      appendPadding: 10,
+      isPercent: true,
+      yAxis: {
+        label: {
+          formatter: (value) => {
+            return value * 100;
+          },
+        },
+      },
+    });
+    area.render();
+  });
diff --git a/examples/area/percent/demo/meta.json b/examples/area/percent/demo/meta.json
@@ -0,0 +1,16 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "basic.ts",
+      "title": {
+        "zh": "百分百面积图",
+        "en": "Percented area plot"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*vr8gQJiyNmQAAAAAAAAAAAAAARQnAQ"
+    }
+  ]
+}
diff --git a/examples/area/percent/design.en.md b/examples/area/percent/design.en.md
@@ -0,0 +1,31 @@
+---
+title: 设计规范
+---
+
+## 何时使用
+
+面积图可用来展示连续性数据，可很好地表示趋势、累积、减少以及变化。
+堆叠面积图更擅于展示部分和整体之间的关系或趋势，而不是传达特定的值。
+
+## 数据类型
+
+| 图表类型         | 面积图                           |
+| ---------------- | -------------------------------- |
+| 适合的数据       | 两个连续字段数据                 |
+| 功能             | 观察数据变化`趋势`               |
+| 数据与图形的映射 | 两个连续字段分别映射到横轴和纵轴 |
+| 适合的数据条数   | 大于两条                         |
+
+## 用法建议
+
+<img alt="design" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*tm_ySaDelZIAAAAAAAAAAABkARQnAQ" width="1000">
+
+## 元素
+
+<img alt="design" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*ENU-Q78K3w8AAAAAAAAAAABkARQnAQ" width="800">
+
+- X 轴：通常对应连续数据，值为时间，调用连续数据 X 轴。
+- Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
+- 图例：通常出现在多条折线图中，用来区分不同折线代表的数据含义。
+- 标签：用来解释数据点的值。
+- 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。
diff --git a/examples/area/percent/design.zh.md b/examples/area/percent/design.zh.md
@@ -0,0 +1,31 @@
+---
+title: 设计规范
+---
+
+## 何时使用
+
+面积图可用来展示连续性数据，可很好地表示趋势、累积、减少以及变化。
+堆叠面积图更擅于展示部分和整体之间的关系或趋势，而不是传达特定的值。
+
+## 数据类型
+
+| 图表类型         | 面积图                           |
+| ---------------- | -------------------------------- |
+| 适合的数据       | 两个连续字段数据                 |
+| 功能             | 观察数据变化`趋势`               |
+| 数据与图形的映射 | 两个连续字段分别映射到横轴和纵轴 |
+| 适合的数据条数   | 大于两条                         |
+
+## 用法建议
+
+<img alt="design" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*tm_ySaDelZIAAAAAAAAAAABkARQnAQ" width="1000">
+
+## 元素
+
+<img alt="design" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*ENU-Q78K3w8AAAAAAAAAAABkARQnAQ" width="800">
+
+- X 轴：通常对应连续数据，值为时间，调用连续数据 X 轴。
+- Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
+- 图例：通常出现在多条折线图中，用来区分不同折线代表的数据含义。
+- 标签：用来解释数据点的值。
+- 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。
diff --git a/examples/area/percent/index.en.md b/examples/area/percent/index.en.md
@@ -0,0 +1,4 @@
+---
+title: Percented Area
+order: 2
+---
diff --git a/examples/area/percent/index.zh.md b/examples/area/percent/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: 百分百面积图
+order: 2
+---
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -12,6 +12,7 @@ module.exports = {
   ],
   // Customize your site metadata:
   siteMetadata: {
+    isAntVSite: false,
     title: 'G2Plot',
     description: 'A collection of charts made with the Grammar of Graphics',
     siteUrl: 'https://g2plot.antv.vision',