fix: 修复散点图 tooltip 默认 fields 丢失 (#2019)

* fix: 修复散点图 tooltip 默认 fields 丢失

* test: 添加scatter legend 单测

Co-authored-by: liufu.lf <[email protected]>

Author: lxfu1

__tests__/bugs/issue-2015-spec.ts

@@ -0,0 +1,39 @@
+import { Scatter } from '../../src';
+import { data } from '../data/gender';
+import { createDiv } from '../utils/dom';
+
+describe('issue 2015', () => {
+  it('scatter fields', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      size: 10,
+      colorField: 'gender',
+      shape: 'circle',
+      xAxis: {
+        nice: true,
+      },
+      tooltip: {
+        title: 'scatter',
+        showCrosshairs: true,
+        crosshairs: {
+          type: 'xy',
+        },
+      },
+    });
+
+    scatter.render();
+    const { geometries } = scatter.chart;
+    // @ts-ignore
+    expect(geometries[0].tooltipOption.fields).toEqual(['weight', 'height', 'gender', '', '']);
+    scatter.update({
+      tooltip: false,
+    });
+    // @ts-ignore
+    expect(scatter.chart.geometries[0].tooltipOption).toBeUndefined();
+    scatter.destroy();
+  });
+});

__tests__/unit/plots/scatter/default-config-spec.ts

@@ -19,7 +19,13 @@ describe('scatter', () => {
     scatter.render();
     const { options } = scatter;
     // @ts-ignore
-    expect(options.tooltip.offset).toBe(20);
+    expect(options.tooltip.showTitle).toBe(false);
+    // @ts-ignore
+    expect(options.tooltip.showMarkers).toBe(false);
+    // @ts-ignore
+    expect(options.tooltip.showCrosshairs).toBeTruthy();
+    // @ts-ignore
+    expect(options.tooltip.crosshairs.type).toEqual('xy');
 
     scatter.destroy();
   });

__tests__/unit/plots/scatter/legend-spec.ts

@@ -3,6 +3,55 @@ import { data } from '../../../data/gender';
 import { createDiv } from '../../../utils/dom';
 
 describe('scatter', () => {
+  it('legend: default', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      xAxis: {
+        nice: true,
+      },
+    });
+
+    scatter.render();
+    const legendController = scatter.chart.getController('legend');
+    // @ts-ignore
+    const { option } = legendController;
+    expect(option).toBe(false);
+    scatter.update({
+      shapeField: 'gender',
+    });
+    // @ts-ignore
+    expect(scatter.chart.getController('legend').option).toEqual({
+      gender: undefined,
+      height: false,
+      weight: false,
+    });
+    scatter.update({
+      shapeField: '',
+      colorField: 'g',
+    });
+    // @ts-ignore
+    expect(scatter.chart.getController('legend').option).toEqual({
+      g: undefined,
+      height: false,
+      weight: false,
+    });
+    scatter.update({
+      sizeField: 'gender',
+    });
+    // @ts-ignore
+    expect(scatter.chart.getController('legend').option).toEqual({
+      g: undefined,
+      gender: false,
+      height: false,
+      weight: false,
+    });
+    scatter.destroy();
+  });
   it('legend: false', () => {
     const scatter = new Scatter(createDiv(), {
       width: 400,

__tests__/unit/plots/scatter/tooltip-spec.ts

@@ -23,12 +23,28 @@ describe('scatter', () => {
 
     // @ts-ignore
     expect(scatter.chart.options.tooltip.title).toBe('scatter');
+    // @ts-ignore
+    expect(scatter.chart.geometries[0].tooltipOption.fields).toEqual(['weight', 'height', '', '', '']);
     scatter.update({
-      ...scatter.options,
-      tooltip: false,
+      colorField: 'gender',
+      sizeField: 'g',
+      shapeField: 'd',
     });
+    // @ts-ignore
+    expect(scatter.chart.geometries[0].tooltipOption.fields).toEqual(['weight', 'height', 'gender', 'g', 'd']);
 
-    expect(scatter.chart.getOptions().tooltip).toBe(undefined);
+    scatter.update({
+      tooltip: {
+        fields: ['weight', 'height'],
+      },
+    });
+    // @ts-ignore
+    expect(scatter.chart.geometries[0].tooltipOption.fields).toEqual(['weight', 'height']);
+    scatter.update({
+      tooltip: false,
+    });
+    expect(scatter.chart.getOptions().tooltip).toBe(false);
+    expect(scatter.chart.geometries[0].tooltipOption).toBeUndefined();
     expect(scatter.chart.getComponents().find((co) => co.type === 'tooltip')).toBe(undefined);
 
     scatter.destroy();

src/plots/scatter/adaptor.ts

@@ -13,8 +13,16 @@ import { ScatterOptions } from './types';
  */
 function geometry(params: Params<ScatterOptions>): Params<ScatterOptions> {
   const { chart, options } = params;
-  const { data, type, color, shape, size, pointStyle, colorField } = options;
+  const { data, type, color, shape, size, pointStyle, shapeField, colorField, xField, yField, sizeField } = options;
 
+  let { tooltip } = options;
+
+  if (tooltip && !tooltip.fields) {
+    tooltip = {
+      ...tooltip,
+      fields: [xField, yField, colorField, sizeField, shapeField],
+    };
+  }
   // 数据
   chart.data(data);
 
@@ -29,6 +37,7 @@ function geometry(params: Params<ScatterOptions>): Params<ScatterOptions> {
           size,
           style: pointStyle,
         },
+        tooltip,
       },
     })
   );
@@ -216,13 +225,12 @@ function regressionLine(params: Params<ScatterOptions>): Params<ScatterOptions>
  */
 export function tooltip(params: Params<ScatterOptions>): Params<ScatterOptions> {
   const { chart, options } = params;
-  const { tooltip, shapeField, colorField, xField, yField, sizeField } = options;
+  const { tooltip } = options;
 
   if (tooltip) {
-    chart.tooltip({
-      fields: [xField, yField, colorField, sizeField, shapeField],
-      ...tooltip,
-    });
+    chart.tooltip(tooltip);
+  } else if (tooltip === false) {
+    chart.tooltip(false);
   }
 
   return params;

src/plots/scatter/index.ts

@@ -22,9 +22,12 @@ export class Scatter extends Plot<ScatterOptions> {
     return deepAssign({}, super.getDefaultOptions(), {
       size: 4,
       tooltip: {
-        shared: null,
         showTitle: false,
-        offset: 20,
+        showMarkers: false,
+        showCrosshairs: true,
+        crosshairs: {
+          type: 'xy',
+        },
       },
     });
   }