fix: line-column legend color & custom legend (#1776)

Co-authored-by: aiyin.lzy <nadia.lzy@antfin.com>
antvis · Oct 23, 2020 · bc53417 · bc53417
1 parent e71cfef
commit bc53417
Show file tree

Hide file tree

Showing 6 changed files with 185 additions and 23 deletions.
diff --git a/__tests__/unit/plots/dual-axes/legend-spec.ts b/__tests__/unit/plots/dual-axes/legend-spec.ts
@@ -1,43 +1,136 @@
 import { DualAxes } from '../../../../src';
-import { PV_DATA, UV_DATA_MULTI } from '../../../data/pv-uv';
+import { PV_DATA, UV_DATA, PV_DATA_MULTI, UV_DATA_MULTI } from '../../../data/pv-uv';
 import { createDiv } from '../../../utils/dom';
 
 describe('Legend', () => {
-  it('Legend default', () => {
-    const dualAxes = new DualAxes(createDiv('test DualAxes doubal line'), {
+  it('Legend: single line and column', () => {
+    const options = {
       width: 400,
       height: 500,
-      data: [PV_DATA, UV_DATA_MULTI],
+      data: [PV_DATA, UV_DATA],
       xField: 'date',
       yField: ['pv', 'uv'],
       geometryOptions: [
         {
           geometry: 'line',
+          color: '#f00',
         },
         {
           geometry: 'line',
-          seriesField: 'site',
+          color: '#0f0',
         },
       ],
+    };
+
+    const dualAxes = new DualAxes(createDiv('Legend: single line and column'), options);
+
+    dualAxes.render();
+
+    const dualLineLegendComponentCfg = dualAxes.chart.getController('legend').getComponents()[0].component.cfg;
+    expect(dualLineLegendComponentCfg.items.length).toBe(2);
+    expect(dualLineLegendComponentCfg.items[0].name).toBe('pv');
+    expect(typeof dualLineLegendComponentCfg.items[0].marker.symbol).toBe('function');
+    expect(dualLineLegendComponentCfg.items[0].marker.style.stroke).toBe('#f00');
+    expect(dualLineLegendComponentCfg.items[1].name).toBe('uv');
+    expect(typeof dualLineLegendComponentCfg.items[1].marker.symbol).toBe('function');
+    expect(dualLineLegendComponentCfg.items[1].marker.style.stroke).toBe('#0f0');
+
+    dualAxes.update({
+      ...options,
+      geometryOptions: [
+        {
+          geometry: 'column',
+          color: '#f00',
+        },
+        {
+          geometry: 'line',
+          color: '#0f0',
+        },
+      ],
+      legend: {
+        itemName: {
+          formatter: (value) => `_${value}`,
+        },
+      },
     });
 
+    const columnLineLegendComponentCfg = dualAxes.chart.getController('legend').getComponents()[0].component.cfg;
+
+    expect(columnLineLegendComponentCfg.items.length).toBe(2);
+    expect(columnLineLegendComponentCfg.items[0].name).toBe('pv');
+    expect(columnLineLegendComponentCfg.items[0].marker.symbol).toBe('square');
+    expect(columnLineLegendComponentCfg.items[0].marker.style.fill).toBe('#f00');
+    expect(columnLineLegendComponentCfg.items[1].name).toBe('uv');
+    expect(typeof columnLineLegendComponentCfg.items[1].marker.symbol).toBe('function');
+    expect(columnLineLegendComponentCfg.items[1].marker.style.stroke).toBe('#0f0');
+  });
+
+  it('Legend: multi line and column', () => {
+    const options = {
+      width: 400,
+      height: 500,
+      data: [PV_DATA_MULTI, UV_DATA_MULTI],
+      xField: 'date',
+      yField: ['pv', 'uv'],
+      geometryOptions: [
+        {
+          geometry: 'line',
+          seriesField: 'site',
+          color: ['#f00', '#f11', '#f22'],
+        },
+        {
+          geometry: 'line',
+          seriesField: 'site',
+          color: ['#0f0', '#1f1', '#2f2'],
+        },
+      ],
+    };
+    // 双折线
+    const dualAxes = new DualAxes(createDiv('Legend: multi line and column'), options);
+
     dualAxes.render();
 
-    const legendController = dualAxes.chart.getController('legend');
-    const legendComponent = legendController.getComponents()[0];
-    const cfg = legendComponent.component.cfg;
+    const dualLineLegendComponentCfg = dualAxes.chart.getController('legend').getComponents()[0].component.cfg;
 
-    expect(legendComponent.direction).toEqual('bottom');
-    expect(cfg.items.length).toBe(4);
-    expect(cfg.items[0].name).toBe('pv');
-    expect(cfg.items[1].name).toBe('a');
-    expect(cfg.items[2].name).toBe('b');
-    expect(cfg.items[3].name).toBe('c');
+    expect(dualLineLegendComponentCfg.items.length).toBe(5);
+    expect(dualLineLegendComponentCfg.items[0].name).toBe('a');
+    expect(typeof dualLineLegendComponentCfg.items[0].marker.symbol).toBe('function');
+    expect(dualLineLegendComponentCfg.items[0].marker.style.stroke).toBe('#f00');
+    expect(dualLineLegendComponentCfg.items[2].name).toBe('a');
+    expect(typeof dualLineLegendComponentCfg.items[2].marker.symbol).toBe('function');
+    expect(dualLineLegendComponentCfg.items[2].marker.style.stroke).toBe('#0f0');
+
+    dualAxes.update({
+      ...options,
+      geometryOptions: [
+        {
+          geometry: 'line',
+          seriesField: 'site',
+          color: ['#f00', '#f11', '#f22'],
+        },
+        {
+          geometry: 'column',
+          seriesField: 'site',
+          isGroup: true,
+          color: ['#0f0', '#1f1', '#2f2'],
+        },
+      ],
+    });
 
-    dualAxes.destroy();
+    const columnLineLegendComponentCfg = dualAxes.chart.getController('legend').getComponents()[0].component.cfg;
+    console.log(columnLineLegendComponentCfg);
+
+    expect(columnLineLegendComponentCfg.items.length).toBe(5);
+    expect(columnLineLegendComponentCfg.items[0].name).toBe('a');
+    expect(typeof columnLineLegendComponentCfg.items[0].marker.symbol).toBe('function');
+    expect(columnLineLegendComponentCfg.items[0].marker.style.stroke).toBe('#f00');
+
+    expect(columnLineLegendComponentCfg.items[2].name).toBe('a');
+    expect(columnLineLegendComponentCfg.items[2].marker.symbol).toBe('square');
+    expect(columnLineLegendComponentCfg.items[2].marker.style.fill).toBe('#0f0');
   });
 
-  it.only('Legend default with option', () => {
+  it('Legend with option', () => {
     const dualAxes = new DualAxes(createDiv('test DualAxes doubal line'), {
       width: 400,
       height: 500,
@@ -85,9 +178,44 @@ describe('Legend', () => {
     // 隐藏就没有图例了
     expect(dualAxes.chart.views[0].getComponents().find((co) => co.type === 'legend')).toBeUndefined();
     expect(dualAxes.chart.views[1].getComponents().find((co) => co.type === 'legend')).toBeUndefined();
-
     expect(dualAxes.chart.getEvents().beforepaint).toBeUndefined();
+  });
+
+  it('Legend custom', () => {
+    const dualAxes = new DualAxes(createDiv('Legend custom '), {
+      width: 400,
+      height: 500,
+      data: [PV_DATA, UV_DATA],
+      xField: 'date',
+      yField: ['pv', 'uv'],
+      legend: {
+        custom: true,
+        position: 'bottom',
+        items: [
+          {
+            value: 'test',
+            name: '测试1',
+            marker: { symbol: 'square', style: { fill: '#B4EBBF', r: 5 } },
+          },
+          {
+            value: 'test2',
+            name: '测试2',
+            marker: { symbol: 'square', style: { fill: '#FFB1AC', r: 5 } },
+          },
+        ],
+      },
+    });
+
+    dualAxes.render();
+
+    const legendController = dualAxes.chart.getController('legend');
+    const legendComponent = legendController.getComponents()[0];
+    const cfg = legendComponent.component.cfg;
 
-    dualAxes.destroy();
+    expect(cfg.items.length).toBe(2);
+    expect(cfg.items[0].name).toBe('测试1');
+    expect(cfg.items[0].marker.symbol).toBe('square');
+    expect(cfg.items[1].name).toBe('测试2');
+    expect(cfg.items[1].marker.symbol).toBe('square');
   });
 });
diff --git a/__tests__/unit/plots/funnel/compare-spec.ts b/__tests__/unit/plots/funnel/compare-spec.ts
@@ -66,7 +66,7 @@ describe('compare funnel', () => {
       });
     });
 
-    test('geometry label custome', () => {
+    test('geometry label custom', () => {
       funnel.update({
         ...funnelOption,
         label: {

diff --git a/examples/dual-axes/grouped-column-line/demo/custom-grouped-column-line.ts b/examples/dual-axes/grouped-column-line/demo/custom-grouped-column-line.ts
@@ -38,6 +38,27 @@ const dualAxes = new DualAxes('container', {
       color: '#FAA219',
     },
   ],
+  legend: {
+    custom: true,
+    position: 'bottom',
+    items: [
+      {
+        value: 'uv',
+        name: 'uv',
+        marker: { symbol: 'square', style: { fill: '#B4EBBF', r: 5 } },
+      },
+      {
+        value: 'bill',
+        name: '账单',
+        marker: { symbol: 'square', style: { fill: '#FFB1AC', r: 5 } },
+      },
+      {
+        value: 'count',
+        name: '数值',
+        marker: { symbol: 'square', style: { fill: '#FFDBA2', r: 5 } },
+      },
+    ],
+  },
 });
 
 dualAxes.render();
diff --git a/examples/dual-axes/stacked-column-line/demo/custom-stacked-column-line.ts b/examples/dual-axes/stacked-column-line/demo/custom-stacked-column-line.ts
@@ -58,6 +58,12 @@ const dualAxes = new DualAxes('container', {
     },
     layout: 'vertical',
     position: 'right',
+    itemName: {
+      formatter: (val) => `@${val}`,
+      style: {
+        fill: '#FAA219',
+      },
+    },
   },
   interactions: [
     {

diff --git a/src/plots/dual-axes/adaptor.ts b/src/plots/dual-axes/adaptor.ts
@@ -1,4 +1,4 @@
-import { deepMix, each, findIndex, get } from '@antv/util';
+import { deepMix, each, findIndex, get, isObject } from '@antv/util';
 import { Scale } from '@antv/g2/lib/dependents';
 import {
   theme as commonTheme,
@@ -208,8 +208,10 @@ export function legend(params: Params<DualAxesOptions>): Params<DualAxesOptions>
 
   if (legend === false) {
     chart.legend(false);
+  } else if (isObject(legend) && legend.custom === true) {
+    chart.legend(legend);
   } else {
-    // 存在单折线图或多折线图时，使用自定义图例
+    // 均使用自定义图例
     chart.once('beforepaint', () => {
       const leftItems = getViewLegendItems({
         view: leftView,
@@ -235,7 +237,7 @@ export function legend(params: Params<DualAxesOptions>): Params<DualAxesOptions>
       );
     });
 
-    // // 自定义图例交互
+    // 自定义图例交互
     chart.on('legend-item:click', (evt) => {
       const delegateObject = evt.gEvent.delegateObject;
       if (delegateObject && delegateObject.item) {

diff --git a/src/plots/dual-axes/util/legend.ts b/src/plots/dual-axes/util/legend.ts
@@ -38,7 +38,12 @@ export function getViewLegendItems(params: {
               stroke: color,
             },
           }
-        : { symbol: 'square' });
+        : {
+            symbol: 'square',
+            style: {
+              fill: color,
+            },
+          });
     return [
       {
         value: yField,