feat(legend): 连续型图例支持 label 进行 formatter & 单测 & 文档 (#225)

* feat(legend): 连续型图例支持 label 进行 formatter & 单测 & 文档

* chore: 锁定 G 版本在 0.5.6, 待 0.5.7 的 text shape 问题修复后升级

* chore: v0.8.11

README.md

@@ -342,6 +342,11 @@ interface ContinueLegendLabelCfg {
    * @type {string}
    */
   align: string;
+  /**
+   * 文本格式化
+   * @type {string}
+   */
+  formatter?: (text: string | number | null) => string;
   /**
    * 文本同滑轨的距离
    * @type {number}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/component",
-  "version": "0.8.10",
+  "version": "0.8.11",
   "description": "The component module for antv",
   "author": "https://github.com/orgs/antvis/people",
   "license": "MIT",
@@ -42,7 +42,7 @@
   },
   "devDependencies": {
     "@antv/color-util": "^2.0.3",
-    "@antv/g-canvas": "^0.5.0",
+    "@antv/g-canvas": "0.5.6",
     "@types/jest": "^24.0.18",
     "husky": "^3.0.4",
     "jest": "^24.9.0",
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "@antv/dom-util": "~2.0.1",
-    "@antv/g-base": "~0.5.0",
+    "@antv/g-base": "0.5.6",
     "@antv/matrix-util": "^3.1.0-beta.1",
     "@antv/path-util": "~2.0.7",
     "@antv/scale": "~0.3.1",

src/legend/continuous.ts

@@ -1,5 +1,5 @@
 import { IElement, IGroup } from '@antv/g-base';
-import { clone, mix, upperFirst } from '@antv/util';
+import { clone, isFunction, mix, upperFirst } from '@antv/util';
 import { ISlider } from '../interfaces';
 import { BBox, ContinueLegendCfg } from '../types';
 import Theme from '../util/theme';
@@ -205,6 +205,7 @@ class ContinueLegend extends LegendBase<ContinueLegendCfg> implements ISlider {
     const labelCfg = this.get('label');
     const style = labelCfg.style;
     const labelAlign = labelCfg.align;
+    const labelFormatter = labelCfg.formatter;
     const value = this.get(name);
     const alignAttrs = this.getLabelAlignAttrs(name, labelAlign);
     const localId = `label-${name}`;
@@ -215,7 +216,7 @@ class ContinueLegend extends LegendBase<ContinueLegendCfg> implements ISlider {
       attrs: {
         x: 0,
         y: 0,
-        text: value,
+        text: isFunction(labelFormatter) ? labelFormatter(value) : value,
         ...style,
         ...alignAttrs,
       },

src/types.ts

@@ -706,6 +706,11 @@ export interface ContinueLegendLabelCfg {
    * @type {string}
    */
   align?: string;
+  /**
+   * 文本格式化
+   * @type {string}
+   */
+  formatter?: (text: string | number | null) => string;
   /**
    * 文本同滑轨的距离
    * @type {number}

tests/unit/legend/continuous-spec.ts

@@ -303,6 +303,24 @@ describe('test continue legend', () => {
       );
     });
 
+    it('add label formatter', () => {
+      let minLabel = legend.getElementById('b-legend-label-min');
+      let maxLabel = legend.getElementById('b-legend-label-max');
+      expect(minLabel.attr('text')).toBe(100);
+      expect(maxLabel.attr('text')).toBe(500);
+
+      legend.update({
+        label: {
+          formatter: (text) => `${text}%`,
+        },
+      });
+      legend.render();
+      minLabel = legend.getElementById('b-legend-label-min');
+      maxLabel = legend.getElementById('b-legend-label-max');
+      expect(minLabel.attr('text')).toBe('100%');
+      expect(maxLabel.attr('text')).toBe('500%');
+    });
+
     it('change value', () => {
       legend.update({
         min: 100,