feat(legend): 图例itemName, itemValue 支持回调方法 (#227)

antvis · Jun 3, 2021 · f67dad8 · f67dad8
1 parent 4f7e78b
commit f67dad8
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 3 deletions.
diff --git a/src/legend/category.ts b/src/legend/category.ts
@@ -1,5 +1,5 @@
 import { IGroup } from '@antv/g-base';
-import { clamp, deepMix, each, filter, get, mix } from '@antv/util';
+import { clamp, deepMix, each, filter, get, mix, isFunction } from '@antv/util';
 import { IList } from '../interfaces';
 import { CategoryLegendCfg, LegendPageNavigatorCfg, LegendItemNameCfg, LegendMarkerCfg, ListItem } from '../types';
 import { ellipsisLabel } from '../util/label';
@@ -371,11 +371,13 @@ class Category extends LegendBase<CategoryLegendCfg> implements IList {
     index: number
   ) {
     const formatter = cfg.formatter;
+    const style = cfg.style;
     const attrs = {
       x: xPosition,
       y: itemHeight / 2,
       text: formatter ? formatter(item[textName], item, index) : item[textName],
       ...cfg.style,
+      ...(isFunction(style) ? style.apply(null, [item[textName], item, index]) : style),
     };
     return this.addShape(container, {
       type: 'text',

diff --git a/src/types.ts b/src/types.ts
@@ -764,7 +764,7 @@ export interface LegendItemNameCfg {
    * 文本配置项
    * @type {ShapeAttrs}
    */
-  style?: ShapeAttrs;
+  style?: ShapeAttrs | ShapeAttrsCallback;
 }
 
 type formatterCallback = (text: string, item: ListItem, index: number) => any;
@@ -784,7 +784,7 @@ export interface LegendItemValueCfg {
    * 图例项附加值的配置
    * @type {ShapeAttrs}
    */
-  style?: ShapeAttrs;
+  style?: ShapeAttrs | ShapeAttrsCallback;
 }
 
 export interface LegendMarkerCfg {

diff --git a/tests/unit/legend/callback-spec.ts b/tests/unit/legend/callback-spec.ts
@@ -0,0 +1,88 @@
+import { Canvas } from '@antv/g-canvas';
+import CategroyLegend from '../../../src/legend/category';
+
+describe('test symbol and style callback', () => {
+  const dom = document.createElement('div');
+  document.body.appendChild(dom);
+  dom.id = 'clc1';
+  const canvas = new Canvas({
+    container: 'clc1',
+    width: 500,
+    height: 500,
+  });
+
+  const container = canvas.addGroup();
+  const items = [
+    { name: 'X', value: 123 },
+    { name: 'Y', value: 456 },
+  ];
+  const legend = new CategroyLegend({
+    id: 'legend',
+    container,
+    x: 100,
+    y: 100,
+    items: items,
+    updateAutoRender: true,
+    itemBackground: null,
+  });
+
+  legend.init();
+
+  legend.render();
+  it('init', () => {
+    legend.init();
+    expect(legend.get('name')).toBe('legend');
+    expect(legend.get('type')).toBe('category');
+    expect(legend.getLocation()).toEqual({ x: 100, y: 100 });
+  });
+
+
+  it('itemName', () => {
+    legend.update({
+      itemName: {
+        style: (itemName, items, index) => {
+          return {
+            stroke: '1',
+            strokeWidth: itemName === 'X' ? 'A' : itemName === 'Y' ? 'yi' : 'notFound',
+            fill: index === 0 ? 'duck' : 'chick',
+          };
+        },
+        formatter(value) {
+          return `itemName: ${value}`;
+        },
+      },
+    });
+    const item1 = legend.getElementById('legend-legend-item-X');
+    expect(item1.getChildren()[1].attr('strokeWidth')).toBe('A');
+    expect(item1.getChildren()[1].attr('text')).toBe('itemName: X');
+    expect(item1.getChildren()[1].attr('fill')).toBe('duck');
+
+    const item2 = legend.getElementById('legend-legend-item-Y');
+    expect(item2.getChildren()[1].attr('strokeWidth')).toBe('yi');
+    expect(item2.getChildren()[1].attr('text')).toBe('itemName: Y');
+    expect(item2.getChildren()[1].attr('fill')).toBe('chick');
+  });
+
+  it('itemValue', () => {
+    legend.update({
+      itemValue: {
+        style: (itemValue, item, index) => {
+          return {
+            fill: itemValue === 123 ? 'FA' : itemValue === 456 ? 'fyi' : 'FnotFound',
+          };
+        },
+        formatter(value) {
+          return `itemValue: ${value}`;
+        },
+      },
+    });
+
+    const item1 = legend.getElementById('legend-legend-item-X');
+    expect(item1.getChildren()[2].attr('fill')).toBe('FA');
+    expect(item1.getChildren()[2].attr('text')).toBe('itemValue: 123');
+
+    const item2 = legend.getElementById('legend-legend-item-Y');
+    expect(item2.getChildren()[2].attr('fill')).toBe('fyi');
+    expect(item2.getChildren()[2].attr('text')).toBe('itemValue: 456');
+  });
+});