feat(line): meta config -> scale (#1286)

* feat(line): meta config -> scale * build: remove gitee sync because repo is to large * feat(line): legend, tooltip, meta, axis options * feat(line): add axis option, minLimit, maxLimit, nice, tickMethod
antvis · Jul 14, 2020 · d89ecf6 · d89ecf6
1 parent 160bebb
commit d89ecf6
Show file tree

Hide file tree

Showing 9 changed files with 178 additions and 102 deletions.
diff --git a/.github/workflows/mirror.yml b/.github/workflows/mirror.yml
@@ -1,28 +1,28 @@
-name: 🤖 Sync to Gitee Mirror
+# name: 🤖 Sync to Gitee Mirror
 
-on: [push]
+# on: [push]
 
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: 🔁 Sync to Gitee
-        uses: wearerequired/git-mirror-action@master
-        env:
-          # 注意在 Settings->Secrets 配置 GITEE_RSA_PRIVATE_KEY
-          SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
-        with:
-          # 注意替换为你的 GitHub 源仓库地址
-          source-repo: '[email protected]:antvis/G2Plot.git'
-          # 注意替换为你的 Gitee 目标仓库地址
-          destination-repo: '[email protected]:antv-g2plot/antv-g2plot.git'
+# jobs:
+#   build:
+#     runs-on: ubuntu-latest
+#     steps:
+#       - name: 🔁 Sync to Gitee
+#         uses: wearerequired/git-mirror-action@master
+#         env:
+#           # 注意在 Settings->Secrets 配置 GITEE_RSA_PRIVATE_KEY
+#           SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
+#         with:
+#           # 注意替换为你的 GitHub 源仓库地址
+#           source-repo: '[email protected]:antvis/G2Plot.git'
+#           # 注意替换为你的 Gitee 目标仓库地址
+#           destination-repo: '[email protected]:antv-g2plot/antv-g2plot.git'
 
-      - name: ✅ Build Gitee Pages
-        uses: yanglbme/gitee-pages-action@master
-        with:
-          # 注意替换为你的 Gitee 用户名
-          gitee-username: afc163
-          # 注意在 Settings->Secrets 配置 GITEE_PASSWORD
-          gitee-password: ${{ secrets.GITEE_PASSWORD }}
-          # 注意替换为你的 Gitee 仓库
-          gitee-repo: antv-g2plot/antv-g2plot
+#       - name: ✅ Build Gitee Pages
+#         uses: yanglbme/gitee-pages-action@master
+#         with:
+#           # 注意替换为你的 Gitee 用户名
+#           gitee-username: afc163
+#           # 注意在 Settings->Secrets 配置 GITEE_PASSWORD
+#           gitee-password: ${{ secrets.GITEE_PASSWORD }}
+#           # 注意替换为你的 Gitee 仓库
+#           gitee-repo: antv-g2plot/antv-g2plot
diff --git a/.prettierignore b/.prettierignore
@@ -1,5 +1,4 @@
 stats.json
 .cache
 dist
-public
-demos/assets
+.umi
diff --git a/__tests__/unit/plots/line/axis-spec.ts b/__tests__/unit/plots/line/axis-spec.ts
@@ -0,0 +1,52 @@
+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,
+      meta: {
+        value: {
+          min: 0,
+          max: 5000,
+        },
+      },
+      xAxis: {
+        label: {
+          style: {
+            fill: 'red',
+          },
+        },
+      },
+      yAxis: {
+        tickCount: 3,
+        min: 500,
+      },
+    });
+
+    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().color).toBe('blue');
+    expect(elements[1].getModel().color).toBe('red');
+
+    expect(geometry.scales.value.min).toBe(500);
+    expect(geometry.scales.value.max).toBe(5000);
+
+    // @ts-ignore
+    expect(line.chart.options.axes.date.label.style.fill).toBe('red');
+  });
+});
diff --git a/__tests__/unit/plots/line/index-spec.ts b/__tests__/unit/plots/line/index-spec.ts
@@ -29,6 +29,12 @@ describe('line', () => {
       color: ['blue', 'red'],
       appendPadding: 10,
       connectNulls: true,
+      meta: {
+        value: {
+          min: 0,
+          max: 5000,
+        },
+      },
     });
 
     line.render();
@@ -40,5 +46,8 @@ describe('line', () => {
     expect(elements.length).toBe(2);
     expect(elements[0].getModel().color).toBe('blue');
     expect(elements[1].getModel().color).toBe('red');
+
+    expect(geometry.scales.value.min).toBe(0);
+    expect(geometry.scales.value.max).toBe(5000);
   });
 });
diff --git a/__tests__/unit/utils/pick-spec.ts b/__tests__/unit/utils/pick-spec.ts
@@ -0,0 +1,13 @@
+import { pick } from '../../../src/utils';
+
+describe('pick', () => {
+  it('pick', () => {
+    expect(pick(null, [])).toEqual({});
+    expect(pick(undefined, [])).toEqual({});
+    expect(pick(1, [])).toEqual({});
+
+    expect(pick({ a: 1, b: 2, c: undefined }, ['a'])).toEqual({ a: 1 });
+    expect(pick({ a: 1, b: 2, c: undefined }, ['a', 'd'])).toEqual({ a: 1 });
+    expect(pick({ a: 1, b: 2, c: undefined }, ['a', 'c', 'd'])).toEqual({ a: 1 });
+  });
+});
diff --git a/src/plots/line/adaptor.ts b/src/plots/line/adaptor.ts
@@ -1,5 +1,6 @@
+import { deepMix } from '@antv/util';
 import { Params } from '../../core/adaptor';
-import { flow } from '../../utils';
+import { flow, pick } from '../../utils';
 import { LineOptions } from './types';
 
 /**
@@ -10,7 +11,6 @@ function field(params: Params<LineOptions>): Params<LineOptions> {
   const { chart, options } = params;
   const { data, xField, yField, seriesField, color, connectNulls } = options;
 
-  // TODO 具体的折线图操作逻辑
   chart.data(data);
   const geometry = chart.line({ connectNulls }).position(`${xField}*${yField}`);
 
@@ -26,7 +26,19 @@ function field(params: Params<LineOptions>): Params<LineOptions> {
  * @param params
  */
 function meta(params: Params<LineOptions>): Params<LineOptions> {
-  // TODO
+  const { chart, options } = params;
+  const { meta, xAxis, yAxis, xField, yField } = options;
+
+  const KEYS = ['tickCount', 'tickInterval', 'min', 'max', 'nice', 'minLimit', 'maxLimit', 'tickMethod'];
+
+  // meta 直接是 scale 的信息
+  const scales = deepMix({}, meta, {
+    [xField]: pick(xAxis, KEYS),
+    [yField]: pick(yAxis, KEYS),
+  });
+
+  chart.scale(scales);
+
   return params;
 }
 
@@ -35,7 +47,22 @@ function meta(params: Params<LineOptions>): Params<LineOptions> {
  * @param params
  */
 function axis(params: Params<LineOptions>): Params<LineOptions> {
-  // TODO
+  const { chart, options } = params;
+  const { xAxis, yAxis, xField, yField } = options;
+
+  // 为 false 则是不显示轴
+  if (xAxis === false) {
+    chart.axis(xField, false);
+  } else {
+    chart.axis(xField, xAxis);
+  }
+
+  if (yAxis === false) {
+    chart.axis(xField, false);
+  } else {
+    chart.axis(yField, yAxis);
+  }
+
   return params;
 }
 
@@ -44,7 +71,13 @@ function axis(params: Params<LineOptions>): Params<LineOptions> {
  * @param params
  */
 function legend(params: Params<LineOptions>): Params<LineOptions> {
-  // TODO
+  const { chart, options } = params;
+  const { legend, seriesField } = options;
+
+  if (legend && seriesField) {
+    chart.legend(seriesField, legend);
+  }
+
   return params;
 }
 
@@ -53,7 +86,13 @@ function legend(params: Params<LineOptions>): Params<LineOptions> {
  * @param params
  */
 function tooltip(params: Params<LineOptions>): Params<LineOptions> {
-  // TODO
+  const { chart, options } = params;
+  const { tooltip } = options;
+
+  if (tooltip) {
+    chart.tooltip(tooltip);
+  }
+
   return params;
 }
 

diff --git a/src/types/axis.ts b/src/types/axis.ts
@@ -1,20 +1,10 @@
-import { TextStyle } from './common';
+import { AxisOption } from '@antv/g2/lib/interface';
 
-export type Axis = {
+export type Axis = AxisOption & {
   /**
-   * 是否可见
+   * 是否美化
    */
-  readonly visible?: boolean;
-
-  /**
-   * 期望的坐标轴刻度数量，非最终结果
-   */
-  readonly tickCount?: number;
-
-  /**
-   * 坐标轴刻度间隔
-   */
-  readonly tickInterval?: number;
+  readonly nice?: boolean;
 
   /**
    * 坐标轴最小值
@@ -27,72 +17,27 @@ export type Axis = {
   readonly max?: number;
 
   /**
-   * 网格线
+   * min limit
    */
-  readonly grid?: {
-    /** 是否可见 */
-    readonly visible?: boolean;
-    /** 网格线样式 */
-    readonly style?: TextStyle;
-  };
+  readonly minLimit?: number;
 
   /**
-   * 坐标轴轴线
+   * max limit
    */
-  readonly line?: {
-    /** 是否可见 */
-    readonly visible?: boolean;
-    /** 轴线样式 */
-    readonly style?: TextStyle;
-  };
+  readonly maxLimit?: number;
 
   /**
-   * 坐标轴刻度
+   * 期望的坐标轴刻度数量，非最终结果
    */
-  readonly tickLine?: {
-    /** 是否可见 */
-    readonly visible?: boolean;
-    /** 刻度样式 */
-    readonly style?: TextStyle;
-  };
+  readonly tickCount?: number;
 
   /**
-   * 坐标轴标签
+   * 坐标轴刻度间隔
    */
-  readonly label?: {
-    /** 是否可见 */
-    readonly visible?: boolean;
-    /** 标签格式化 */
-    readonly formatter?: (label: string) => string;
-    /** 后缀 */
-    readonly suffix?: string;
-    /** 前缀 */
-    readonly prefix?: string;
-    /** 标签精度 */
-    readonly precision?: number;
-    /** 在 x 方向上的偏移量*/
-    readonly offsetX?: number;
-    /** 在 y 方向上的偏移量 */
-    readonly offsetY?: number;
-    /** 是否自动隐藏 */
-    readonly autoHide?: boolean;
-    /** 是否自动旋转 */
-    readonly autoRotate?: boolean;
-    /** 标签样式 */
-    readonly style?: TextStyle;
-  };
+  readonly tickInterval?: number;
 
   /**
-   * 坐标轴标题
+   * 自定义计算 tick 的方法
    */
-  readonly title?: {
-    /** 是否可见 */
-    readonly visible?: boolean;
-    /** 标题文字 */
-    readonly text?: string;
-    /** 偏移量 */
-    readonly offset?: number;
-    /** 标题样式 */
-    readonly style?: TextStyle;
-  };
+  readonly tickMethod?: (scale: any) => any[];
 };
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1 +1,2 @@
 export { flow } from './flow';
+export { pick } from './pick';
diff --git a/src/utils/pick.ts b/src/utils/pick.ts
@@ -0,0 +1,18 @@
+/**
+ * 类似 lodash.pick 的方法
+ * @param obj
+ * @param keys
+ */
+export function pick(obj: any, keys: string[]): object {
+  const r = {};
+
+  if (obj !== null && typeof obj === 'object') {
+    keys.forEach((key: string) => {
+      const v = obj[key];
+      if (v !== undefined) {
+        r[key] = v;
+      }
+    });
+  }
+  return r;
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { flow } from './flow';
		export { pick } from './pick';