diff --git a/__tests__/bugs/issue-2015-spec.ts b/__tests__/bugs/issue-2015-spec.ts new file mode 100644 index 0000000000..420f61eaac --- /dev/null +++ b/__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(); + }); +}); diff --git a/__tests__/unit/plots/scatter/default-config-spec.ts b/__tests__/unit/plots/scatter/default-config-spec.ts index 640067f2b1..eee2017f51 100644 --- a/__tests__/unit/plots/scatter/default-config-spec.ts +++ b/__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(); }); diff --git a/__tests__/unit/plots/scatter/legend-spec.ts b/__tests__/unit/plots/scatter/legend-spec.ts index 4265ef677a..12d3f67790 100644 --- a/__tests__/unit/plots/scatter/legend-spec.ts +++ b/__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, diff --git a/__tests__/unit/plots/scatter/tooltip-spec.ts b/__tests__/unit/plots/scatter/tooltip-spec.ts index 3c70363448..777ff42141 100644 --- a/__tests__/unit/plots/scatter/tooltip-spec.ts +++ b/__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(); diff --git a/src/plots/scatter/adaptor.ts b/src/plots/scatter/adaptor.ts index 0399413834..d9d44338c9 100644 --- a/src/plots/scatter/adaptor.ts +++ b/src/plots/scatter/adaptor.ts @@ -13,8 +13,16 @@ import { ScatterOptions } from './types'; */ function geometry(params: Params): Params { 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): Params { size, style: pointStyle, }, + tooltip, }, }) ); @@ -216,13 +225,12 @@ function regressionLine(params: Params): Params */ export function tooltip(params: Params): Params { 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; diff --git a/src/plots/scatter/index.ts b/src/plots/scatter/index.ts index c90e0ea96e..540ecc9e72 100644 --- a/src/plots/scatter/index.ts +++ b/src/plots/scatter/index.ts @@ -22,9 +22,12 @@ export class Scatter extends Plot { return deepAssign({}, super.getDefaultOptions(), { size: 4, tooltip: { - shared: null, showTitle: false, - offset: 20, + showMarkers: false, + showCrosshairs: true, + crosshairs: { + type: 'xy', + }, }, }); }