feat: 单 view 支持默认图例选中 (#3327)

* feat: 单 view 支持默认图例过滤 * fix: 规范字段 * fix: 补充单测 Co-authored-by: liufu.lf <[email protected]>
antvis · Mar 17, 2021 · 6aa4000 · 6aa4000
1 parent 74afc60
commit 6aa4000
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 0 deletions.
diff --git a/src/chart/view.ts b/src/chart/view.ts
@@ -18,6 +18,7 @@ import {
   size,
   uniqueId,
   isEqual,
+  isPlainObject,
 } from '@antv/util';
 import { Attribute, Coordinate, Event as GEvent, GroupComponent, ICanvas, IGroup, IShape, Scale } from '../dependents';
 import {
@@ -472,6 +473,11 @@ export class View extends Base {
       set(this.options, ['legends'], field);
     } else if (isString(field)) {
       set(this.options, ['legends', field], legendOption);
+      if (isPlainObject(legendOption) && legendOption?.selected) {
+        set(this.options, ['filters', field], (name: string) => {
+          return legendOption?.selected[name] ?? true;
+        });
+      }
     } else {
       // 设置全局的 legend 配置
       set(this.options, ['legends'], field);

diff --git a/src/interface.ts b/src/interface.ts
@@ -1131,6 +1131,12 @@ export interface LegendCfg {
   offsetY?: number;
   /** 图例在四个方向的偏移量 */
   padding?: number[];
+  /**
+   * 图例高亮状态，false 表示默认置灰，无或 true 表示高亮
+   */
+  selected?: {
+    [key: string]: boolean;
+  };
 }
 
 /**

diff --git a/tests/unit/util/legend-spec.ts b/tests/unit/util/legend-spec.ts
@@ -115,4 +115,42 @@ describe('util legend', () => {
     expect(items[0].marker.style.stroke).toBe('red');
     expect(items[0].marker.style.lineWidth).toBe(4);
   });
+  it('legend selected', () => {
+    const data = [
+      { city: '杭州', value: 1654, type: 'year' },
+      { city: '杭州', value: 654, type: 'month' },
+      { city: '杭州', value: 154, type: 'week' },
+      { city: '上海', value: 4400, type: 'year' },
+      { city: '上海', value: 400, type: 'month' },
+      { city: '上海', value: 100, type: 'week' },
+      { city: '深圳', value: 5300, type: 'year' },
+      { city: '深圳', value: 2300, type: 'month' },
+      { city: '深圳', value: 300, type: 'week' },
+    ];
+    const chart = new Chart({
+      container: createDiv(),
+    });
+    chart.data(data);
+    chart.interval().position('city*value').color('type', ['green', 'yellow', 'red']).adjust('stack');
+    chart.legend('type', {
+      selected: {
+        year: true,
+        month: false,
+      },
+    });
+    chart.render();
+    const geometry = chart.geometries[0];
+    const { filters } = chart.getOptions();
+    const attr = geometry.getGroupAttributes()[0];
+    let items = getLegendItems(chart, geometry, attr, {}, {});
+    expect(filters.type).toBeDefined();
+    expect(items.length).toBe(3);
+    expect(items[0].unchecked).toBeFalsy();
+    expect(items[0].marker.style.fill).toBe('green');
+    expect(items[1].unchecked).toBeTruthy();
+    expect(items[1].marker.style.fill).toBe('yellow');
+    expect(items[2].unchecked).toBeFalsy();
+    expect(items[2].marker.style.fill).toBe('red');
+    expect(chart.getData().length).toBe(6);
+  });
 });