feat(static-mark): add legends (#5209)

__tests__/plots/interaction/index.ts

@@ -61,3 +61,4 @@ export { alphabetIntervalFunnelLegendFilter } from './alphabet-interval-funnel-l
 export { penguinsPointBrushHandleStyle } from './penguins-point-brush-handle-style';
 export { penguinsPointBrushHandleCustom } from './penguins-point-brush-handle-custom';
 export { unemploymentChoropleth } from './unemployment-choropleth';
+export { weatherLineLegendMark } from './weather-line-legend-mark';

__tests__/plots/interaction/weather-line-legend-mark.ts

@@ -0,0 +1,112 @@
+import { G2Spec } from '../../../src';
+import { LEGEND_ITEMS_CLASS_NAME } from '../../../src/interaction/legendFilter';
+import { weather } from '../../data/weather';
+import { step } from './utils';
+
+export function weatherLineLegendMark(): G2Spec {
+  const labelByValue = {
+    '#EE6666': 'Temperature',
+    '#5470C6': 'Evaporation',
+    '#91CC75': 'Precipitation',
+  };
+  const markerByValue = {
+    '#EE6666': 'line',
+    '#5470C6': 'rect',
+    '#91CC75': 'line',
+  };
+  return {
+    type: 'view',
+    data: weather,
+    children: [
+      {
+        type: 'line',
+        encode: {
+          x: 'Month',
+          y: 'Temperature',
+          color: '#EE6666',
+          shape: 'smooth',
+        },
+        scale: {
+          y: { independent: true, domainMax: 30 },
+        },
+        axis: {
+          y: {
+            title: 'Temperature (°C)',
+            grid: false,
+            style: {
+              titleFill: '#EE6666',
+            },
+          },
+        },
+      },
+      {
+        type: 'interval',
+        encode: {
+          x: 'Month',
+          y: 'Evaporation',
+          color: '#5470C6',
+        },
+        scale: {
+          y: { independent: true, domainMax: 200 },
+        },
+        style: {
+          fillOpacity: 0.8,
+        },
+        axis: {
+          y: {
+            title: 'Evaporation (°C)',
+            grid: null,
+            style: {
+              titleFill: '#5470C6',
+            },
+          },
+        },
+      },
+      {
+        type: 'line',
+        encode: {
+          x: 'Month',
+          y: 'Precipitation',
+          color: '#91CC75',
+        },
+        scale: {
+          y: { independent: true },
+        },
+        style: {
+          lineWidth: 2,
+          lineDash: [2, 2],
+        },
+        axis: {
+          y: {
+            position: 'right',
+            title: 'Precipitation (ml)',
+            grid: false,
+            style: {
+              titleFill: '#91CC75',
+            },
+          },
+        },
+      },
+      {
+        type: 'legends',
+        scale: {
+          color: {
+            type: 'ordinal',
+            independent: true,
+            domain: ['#EE6666', '#91CC75', '#5470C6'],
+            range: ['#EE6666', '#91CC75', '#5470C6'],
+          },
+        },
+        itemMarker: (d) => markerByValue[d],
+        labelFormatter: (d) => labelByValue[d],
+      },
+    ],
+  };
+}
+
+weatherLineLegendMark.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const elements = document.getElementsByClassName(LEGEND_ITEMS_CLASS_NAME);
+  const [, , e2] = elements;
+  return [step(e2, 'click'), step(e2, 'click')];
+};

__tests__/plots/static/cars3-line-radar.ts

@@ -39,6 +39,7 @@ export function cars3LineRadar(): G2Spec {
         labelFormatter: '~s',
       },
     },
+    interaction: { tooltip: { series: false } },
     axis: Object.fromEntries(
       Array.from({ length: position.length }, (_, i) => [
         `position${i === 0 ? '' : i}`,

__tests__/plots/static/index.ts

@@ -258,3 +258,6 @@ export { unemploymentAreaStackedCols } from './unemployment-area-stacked-cols';
 export { unemploymentAreaStackedLegendVertical } from './unemployment-area-stacked-legend-vertical';
 export { unemploymentAreaStackedLegendSmallVertical } from './unemployment-area-stacked-legend-small-vertical';
 export { disastersPointBubbleLegendRight } from './disasters-point-bubble-legend-right';
+export { mockLegendColor } from './mock-legend-color';
+export { mockLegendColorSize } from './mock-legend-color-size';
+export { weatherLineMultiAxesLegend } from './weather-line-multi-axes-legend';

__tests__/plots/static/mock-legend-color-size.ts

@@ -0,0 +1,21 @@
+import { G2Spec } from '../../../src';
+
+export function mockLegendColorSize(): G2Spec {
+  return {
+    type: 'legends',
+    padding: 'auto',
+    height: 100,
+    scale: {
+      color: {
+        type: 'ordinal',
+        domain: ['a', 'b'],
+        range: ['steelblue', 'orange'],
+      },
+      size: {
+        type: 'linear',
+        domain: [0, 10],
+        range: [0, 100],
+      },
+    },
+  };
+}

__tests__/plots/static/mock-legend-color.ts

@@ -0,0 +1,16 @@
+import { G2Spec } from '../../../src';
+
+export function mockLegendColor(): G2Spec {
+  return {
+    type: 'legends',
+    padding: 'auto',
+    height: 100,
+    scale: {
+      color: {
+        type: 'ordinal',
+        domain: ['a', 'b'],
+        range: ['steelblue', 'orange'],
+      },
+    },
+  };
+}

__tests__/plots/static/weather-line-multi-axes-legend.ts

@@ -0,0 +1,103 @@
+import { G2Spec } from '../../../src';
+import { weather } from '../../data/weather';
+
+export function weatherLineMultiAxesLegend(): G2Spec {
+  const labelByValue = {
+    '#EE6666': 'Temperature',
+    '#5470C6': 'Evaporation',
+    '#91CC75': 'Precipitation',
+  };
+  const markerByValue = {
+    '#EE6666': 'line',
+    '#5470C6': 'rect',
+    '#91CC75': 'line',
+  };
+  return {
+    type: 'view',
+    data: weather,
+    children: [
+      {
+        type: 'line',
+        encode: {
+          x: 'Month',
+          y: 'Temperature',
+          color: '#EE6666',
+          shape: 'smooth',
+        },
+        scale: {
+          y: { independent: true, domainMax: 30 },
+        },
+        axis: {
+          y: {
+            title: 'Temperature (°C)',
+            grid: false,
+            style: {
+              titleFill: '#EE6666',
+            },
+          },
+        },
+      },
+      {
+        type: 'interval',
+        encode: {
+          x: 'Month',
+          y: 'Evaporation',
+          color: '#5470C6',
+        },
+        scale: {
+          y: { independent: true, domainMax: 200 },
+        },
+        style: {
+          fillOpacity: 0.8,
+        },
+        axis: {
+          y: {
+            title: 'Evaporation (°C)',
+            grid: null,
+            style: {
+              titleFill: '#5470C6',
+            },
+          },
+        },
+      },
+      {
+        type: 'line',
+        encode: {
+          x: 'Month',
+          y: 'Precipitation',
+          color: '#91CC75',
+        },
+        scale: {
+          y: { independent: true },
+        },
+        style: {
+          lineWidth: 2,
+          lineDash: [2, 2],
+        },
+        axis: {
+          y: {
+            position: 'right',
+            title: 'Precipitation (ml)',
+            grid: false,
+            style: {
+              titleFill: '#91CC75',
+            },
+          },
+        },
+      },
+      {
+        type: 'legends',
+        scale: {
+          color: {
+            type: 'ordinal',
+            independent: true,
+            domain: ['#EE6666', '#91CC75', '#5470C6'],
+            range: ['#EE6666', '#91CC75', '#5470C6'],
+          },
+        },
+        itemMarker: (d) => markerByValue[d],
+        labelFormatter: (d) => labelByValue[d],
+      },
+    ],
+  };
+}

__tests__/unit/api/chart.spec.ts

@@ -42,6 +42,7 @@ import {
   Heatmap,
   AxisX,
   AxisY,
+  Legends,
 } from '../../../src/api/mark/mark';
 
 const TEST_OPTIONS = {
@@ -170,6 +171,7 @@ describe('Chart', () => {
     expect(chart.heatmap()).toBeInstanceOf(Heatmap);
     expect(chart.axisX()).toBeInstanceOf(AxisX);
     expect(chart.axisY()).toBeInstanceOf(AxisY);
+    expect(chart.legends()).toBeInstanceOf(Legends);
     expect(chart.options().children).toEqual([
       { type: 'interval' },
       { type: 'rect' },
@@ -202,6 +204,7 @@ describe('Chart', () => {
       { type: 'heatmap' },
       { type: 'axisX' },
       { type: 'axisY' },
+      { type: 'legends' },
     ]);
   });
 
@@ -559,8 +562,7 @@ describe('Chart', () => {
       .interval()
       .attr('key', 'interval')
       .encode('x', 'genre')
-      .encode('y', 'sold')
-      .encode('color', 'genre');
+      .encode('y', 'sold');
 
     await chart.render();
 

__tests__/unit/api/mark.spec.ts

@@ -28,6 +28,7 @@ import {
   Gauge,
   AxisX,
   AxisY,
+  Legends,
 } from '../../../src/api/mark/mark';
 
 type Mark =
@@ -163,7 +164,9 @@ function getLayoutOptions() {
   };
 }
 
-function setAxisOptions(node: AxisX | AxisY): AxisX | AxisY {
+function setAxisOptions(
+  node: AxisX | AxisY | Legends,
+): AxisX | AxisY | Legends {
   return node
     .scale('x', { type: 'linear' })
     .transform({ type: 'hide' })
@@ -409,4 +412,10 @@ describe('mark.[node]()', () => {
     expect(node.type).toBe('axisY');
     expect(setAxisOptions(node).value).toEqual(getAxisOptions());
   });
+
+  it('Legends() should specify options by API', () => {
+    const node = new Legends();
+    expect(node.type).toBe('legends');
+    expect(setAxisOptions(node).value).toEqual(getAxisOptions());
+  });
 });

__tests__/unit/stdlib/index.spec.ts

@@ -133,6 +133,7 @@ import {
   ScrollbarX,
   ScrollbarY,
   TitleComponent,
+  Legends,
 } from '../../../src/component';
 import {
   ScaleInX,
@@ -454,6 +455,7 @@ describe('stdlib', () => {
       'component.legendContinuousBlock': LegendContinuousBlock,
       'component.legendContinuousBlockSize': LegendContinuousBlockSize,
       'component.legendContinuousSize': LegendContinuousSize,
+      'component.legends': Legends,
       'component.title': TitleComponent,
       'component.sliderX': SliderX,
       'component.sliderY': SliderY,

src/api/mark/index.ts

@@ -33,6 +33,7 @@ import {
   Gauge,
   AxisX,
   AxisY,
+  Legends,
 } from './mark';
 
 export interface Mark {
@@ -69,6 +70,7 @@ export interface Mark {
   gauge(): Gauge;
   axisX(): AxisX;
   axisY(): AxisY;
+  legends(): Legends;
 }
 
 export { MarkNode } from './base';
@@ -107,4 +109,5 @@ export const mark = {
   gauge: Gauge,
   axisX: AxisX,
   axisY: AxisY,
+  legends: Legends,
 };