feat: line support type (#1623)

* feat: line support type * fix: 修改实现 * feat: 新增 line step demos 和修改 API 文档 * fix: 修改类型定义 type => stepType Co-authored-by: liufu.lf <liufu.lf@antfin.com>
antvis · Sep 24, 2020 · 2fb8628 · 2fb8628
1 parent 0d5e4dc
commit 2fb8628
Show file tree

Hide file tree

Showing 16 changed files with 149 additions and 60 deletions.
diff --git a/__tests__/unit/plots/line/step-type-spec.ts b/__tests__/unit/plots/line/step-type-spec.ts
@@ -0,0 +1,29 @@
+import { Line } from '../../../../src';
+import { partySupport } from '../../../data/party-support';
+import { createDiv } from '../../../utils/dom';
+
+describe('line', () => {
+  it('x*y*color and axis options', () => {
+    const line = new Line(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'type',
+      color: ['blue', 'red'],
+      appendPadding: 10,
+      connectNulls: true,
+      stepType: 'hv',
+    });
+
+    line.render();
+
+    const geometry = line.chart.geometries[0];
+    const elements = geometry.elements;
+    // @ts-ignore
+    expect(geometry.connectNulls).toBe(true);
+    expect(elements.length).toBe(2);
+    expect(elements[0].getModel().shape).toBe('hv');
+  });
+});
diff --git a/examples/line/basic/API.en.md b/examples/line/basic/API.en.md
@@ -38,6 +38,14 @@
 
 默认配置： `false`
 
+#### stepType
+
+**可选**, _hv | vh | hvh | vhv_
+
+功能描述： 阶梯折线图类型，配置后 smooth 无效，一般用在阶梯图中。
+
+默认配置： 无
+
 #### connectNulls
 
 **可选**, _boolean_

diff --git a/examples/line/basic/API.zh.md b/examples/line/basic/API.zh.md
@@ -38,6 +38,14 @@
 
 默认配置： `false`
 
+#### stepType
+
+**可选**, _hv | vh | hvh | vhv_
+
+功能描述： 阶梯折线图类型，配置后 smooth 无效，一般用在阶梯图中。
+
+默认配置： 无
+
 #### connectNulls
 
 **可选**, _boolean_

diff --git a/examples/line/multiple/design.en.md b/examples/line/multiple/design.en.md
@@ -1,29 +1 @@
----
-title: 设计规范
----
-
-## 何时使用
-
-折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。
-
-## 数据类型
-
-| 适合的数据       | 「两个连续字段数据」，或者「一个有序的分类」+「一个连续数据字段」 |
-| ---------------- | ----------------------------------------------------------------- |
-| 功能             | 观察数据的变化趋势                                                |
-| 数据与图形的映射 | 两个连续字段分别映射到横轴和纵轴                                  |
-| 适合的数据条数   | 大于两条                                                          |
-
-## 用法建议
-
-<img alt="design" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*yGeASraSozQAAAAAAAAAAABkARQnAQ" width="1000">
-
-## 元素
-
-<img alt="design" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*uxv8RJgYx4oAAAAAAAAAAABkARQnAQ" width="800">
-
-- X 轴：通常对应连续数据，值为时间，调用连续数据 X 轴。
-- Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
-- 图例：通常出现在多条折线图中，用来区分不同折线代表的数据含义。
-- 标签：用来解释数据点的值。
-- 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。
+`markdown:examples/line/basic/design.en.md`
diff --git a/examples/line/multiple/design.zh.md b/examples/line/multiple/design.zh.md
@@ -1,29 +1 @@
----
-title: 设计规范
----
-
-## 何时使用
-
-折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。
-
-## 数据类型
-
-| 适合的数据       | 「两个连续字段数据」，或者「一个有序的分类」+「一个连续数据字段」 |
-| ---------------- | ----------------------------------------------------------------- |
-| 功能             | 观察数据的变化趋势                                                |
-| 数据与图形的映射 | 两个连续字段分别映射到横轴和纵轴                                  |
-| 适合的数据条数   | 大于两条                                                          |
-
-## 用法建议
-
-<img alt="design" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*yGeASraSozQAAAAAAAAAAABkARQnAQ" width="1000">
-
-## 元素
-
-<img alt="design" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*uxv8RJgYx4oAAAAAAAAAAABkARQnAQ" width="800">
-
-- X 轴：通常对应连续数据，值为时间，调用连续数据 X 轴。
-- Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
-- 图例：通常出现在多条折线图中，用来区分不同折线代表的数据含义。
-- 标签：用来解释数据点的值。
-- 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。
+`markdown:examples/line/basic/design.zh.md`
diff --git a/examples/line/step/API.en.md b/examples/line/step/API.en.md
@@ -0,0 +1 @@
+`markdown:examples/line/basic/API.en.md`
diff --git a/examples/line/step/API.zh.md b/examples/line/step/API.zh.md
@@ -0,0 +1 @@
+`markdown:examples/line/basic/API.zh.md`
diff --git a/examples/line/step/demo/line-multiple.ts b/examples/line/step/demo/line-multiple.ts
@@ -0,0 +1,38 @@
+import { Line } from '@antv/g2plot';
+
+const data = [
+  { month: 'Jan', key: 'series1', value: 125 },
+  { month: 'Jan', key: 'series2', value: 51 },
+  { month: 'Feb', key: 'series1', value: 132 },
+  { month: 'Feb', key: 'series2', value: 91 },
+  { month: 'Mar', key: 'series1', value: 141 },
+  { month: 'Mar', key: 'series2', value: 34 },
+  { month: 'Apr', key: 'series1', value: 158 },
+  { month: 'Apr', key: 'series2', value: 47 },
+  { month: 'May', key: 'series1', value: 133 },
+  { month: 'May', key: 'series2', value: 63 },
+  { month: 'June', key: 'series1', value: 143 },
+  { month: 'June', key: 'series2', value: 58 },
+  { month: 'July', key: 'series1', value: 176 },
+  { month: 'July', key: 'series2', value: 56 },
+  { month: 'Aug', key: 'series1', value: 194 },
+  { month: 'Aug', key: 'series2', value: 77 },
+  { month: 'Sep', key: 'series1', value: 115 },
+  { month: 'Sep', key: 'series2', value: 99 },
+  { month: 'Oct', key: 'series1', value: 134 },
+  { month: 'Oct', key: 'series2', value: 106 },
+  { month: 'Nov', key: 'series1', value: 110 },
+  { month: 'Nov', key: 'series2', value: 88 },
+  { month: 'Dec', key: 'series1', value: 91 },
+  { month: 'Dec', key: 'series2', value: 56 },
+];
+const line = new Line('container', {
+  data,
+  xField: 'month',
+  yField: 'value',
+  legend: false,
+  seriesField: 'key',
+  stepType: 'hvh',
+});
+
+line.render();
diff --git a/examples/line/step/demo/line.ts b/examples/line/step/demo/line.ts
@@ -0,0 +1,22 @@
+import { Line } from '@antv/g2plot';
+
+const data = [
+  { year: '1991', value: 3 },
+  { year: '1992', value: 4 },
+  { year: '1993', value: 3.5 },
+  { year: '1994', value: 5 },
+  { year: '1995', value: 4.9 },
+  { year: '1996', value: 6 },
+  { year: '1997', value: 7 },
+  { year: '1998', value: 9 },
+  { year: '1999', value: 13 },
+  { year: '1999', value: 8 },
+];
+const linePlot = new Line('container', {
+  data,
+  xField: 'year',
+  yField: 'value',
+  stepType: 'vh',
+});
+
+linePlot.render();
diff --git a/examples/line/step/demo/meta.json b/examples/line/step/demo/meta.json
@@ -0,0 +1,24 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "line.ts",
+      "title": {
+        "zh": "阶梯折线图",
+        "en": "step Line chart"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*lOdVRrYL7UIAAAAAAAAAAAAAARQnAQ"
+    },
+    {
+      "filename": "line-multiple.ts",
+      "title": {
+        "zh": "多阶梯折线图",
+        "en": "step Line multiple chart"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*qpizTrPVB-IAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
diff --git a/examples/line/step/design.en.md b/examples/line/step/design.en.md
@@ -0,0 +1 @@
+`markdown:examples/line/basic/design.en.md`
diff --git a/examples/line/step/design.zh.md b/examples/line/step/design.zh.md
@@ -0,0 +1 @@
+`markdown:examples/line/basic/design.zh.md`
diff --git a/examples/line/step/index.en.md b/examples/line/step/index.en.md
@@ -0,0 +1,4 @@
+---
+title: 阶梯折线图
+order: 1
+---
diff --git a/examples/line/step/index.zh.md b/examples/line/step/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: 阶梯折线图
+order: 1
+---
diff --git a/src/adaptor/geometries/line.ts b/src/adaptor/geometries/line.ts
@@ -25,6 +25,8 @@ export interface LineGeometryOptions extends GeometryOptions {
   readonly connectNulls?: boolean;
   /** line 映射配置 */
   readonly line?: LineOption;
+  /** 阶梯折线图类型 */
+  readonly stepType?: string;
 }
 
 /**
@@ -33,7 +35,7 @@ export interface LineGeometryOptions extends GeometryOptions {
  */
 export function line<O extends LineGeometryOptions>(params: Params<O>): Params<O> {
   const { options } = params;
-  const { line, seriesField, smooth, connectNulls } = options;
+  const { line, stepType, seriesField, smooth, connectNulls } = options;
 
   // 如果存在才处理
   return line
@@ -43,7 +45,7 @@ export function line<O extends LineGeometryOptions>(params: Params<O>): Params<O
             type: 'line',
             colorField: seriesField,
             mapping: {
-              shape: smooth ? 'smooth' : 'line',
+              shape: stepType || (smooth ? 'smooth' : 'line'),
               ...line,
             },
             args: { connectNulls },

diff --git a/src/plots/line/types.ts b/src/plots/line/types.ts
@@ -2,6 +2,8 @@ import { PointGeometryOptions } from '../../adaptor/geometries';
 import { Options, StyleAttr } from '../../types';
 
 export interface LineOptions extends Options {
+  /** 阶梯折线图类型 */
+  readonly stepType?: string;
   /** x 轴字段 */
   readonly xField?: string;
   /** y 轴字段 */