diff --git a/__tests__/unit/plots/gauge/statistic-spec.ts b/__tests__/unit/plots/gauge/statistic-spec.ts index 4258f71a8b9..72db297bf92 100644 --- a/__tests__/unit/plots/gauge/statistic-spec.ts +++ b/__tests__/unit/plots/gauge/statistic-spec.ts @@ -44,6 +44,23 @@ describe('gauge statistic', () => { expect((annotations[0] as HTMLElement).innerText).toBe('测试'); }); + it('change data', () => { + gauge.changeData(0.35); + const annotations = document.body.querySelectorAll('.g2-html-annotation'); + expect(annotations.length).toBe(2); + expect((annotations[1] as HTMLElement).innerText).toBe('35.0%'); + + gauge.changeData(0.15); + expect((document.body.querySelectorAll('.g2-html-annotation')[1] as HTMLElement).innerText).toBe('15.0%'); + + gauge.update({ statistic: { content: {}, title: false } }); + expect(annotations.length).toBe(1); + expect((document.body.querySelectorAll('.g2-html-annotation')[0] as HTMLElement).innerText).toBe('15.0%'); + + gauge.changeData(0.05); + expect((document.body.querySelectorAll('.g2-html-annotation')[0] as HTMLElement).innerText).toBe('5.0%'); + }); + afterAll(() => { gauge.destroy(); }); diff --git a/examples/progress-plots/gauge/demo/basic.ts b/examples/progress-plots/gauge/demo/basic.ts index d9372356f4f..0dcb01e63ac 100644 --- a/examples/progress-plots/gauge/demo/basic.ts +++ b/examples/progress-plots/gauge/demo/basic.ts @@ -49,9 +49,8 @@ const interval = setInterval(() => { if (data >= 0.85) { clearInterval(interval); } else { - data += 0.005; + data += 0.001; gauge.changeData(data); // range color 需要提供回调的方式 - gauge.update({ range: { color: getColor(data) } }); } -}, 500); +}, 100); diff --git a/src/core/plot.ts b/src/core/plot.ts index e84fa1b1b14..c6dc923d5e4 100644 --- a/src/core/plot.ts +++ b/src/core/plot.ts @@ -165,7 +165,7 @@ export abstract class Plot extends EE { * @param options */ public update(options: Partial) { - this.updateOptions(options); + this.updateOption(options); this.render(); } @@ -173,7 +173,7 @@ export abstract class Plot extends EE { * 更新配置 * @param options */ - public updateOptions(options: Partial) { + protected updateOption(options: Partial) { this.options = deepAssign({}, this.options, options); } diff --git a/src/plots/gauge/adaptor.ts b/src/plots/gauge/adaptor.ts index 4d065661541..101c54f365f 100644 --- a/src/plots/gauge/adaptor.ts +++ b/src/plots/gauge/adaptor.ts @@ -6,7 +6,7 @@ import { Data } from '../../types'; import { deepAssign, flow, pick, renderGaugeStatistic } from '../../utils'; import { RANGE_TYPE, RANGE_VALUE, PERCENT, DEFAULT_COLOR, INDICATEOR_VIEW_ID, RANGE_VIEW_ID } from './constant'; import { GaugeOptions } from './types'; -import { getIndicatorViewData, getRangeViewData } from './utils'; +import { getIndicatorData, getRangeData } from './utils'; /** * geometry 处理 @@ -20,7 +20,7 @@ function geometry(params: Params): Params { // 指标 & 指针 // 如果开启在应用 if (indicator) { - const indicatorData = getIndicatorViewData(percent); + const indicatorData = getIndicatorData(percent); const v1 = chart.createView({ id: INDICATEOR_VIEW_ID }); v1.data(indicatorData); @@ -47,7 +47,7 @@ function geometry(params: Params): Params { // 辅助 range // [{ range: 1, type: '0' }] - const rangeData: Data = getRangeViewData(percent, options.range); + const rangeData: Data = getRangeData(percent, options.range); const v2 = chart.createView({ id: RANGE_VIEW_ID }); v2.data(rangeData); @@ -87,10 +87,12 @@ function meta(params: Params): Params { * 统计指标文档 * @param params */ -function statistic(params: Params): Params { +function statistic(params: Params, updated?: boolean): Params { const { chart, options } = params; const { statistic, percent } = options; + // 先清空标注,再重新渲染 + chart.getController('annotation').clear(true); if (statistic) { const { content } = statistic; let transformContent; @@ -114,6 +116,10 @@ function statistic(params: Params): Params { renderGaugeStatistic(chart, { statistic: { ...statistic, content: transformContent } }, { percent }); } + if (updated) { + chart.render(true); + } + return params; } @@ -130,6 +136,11 @@ function other(params: Params): Params { return params; } +/** + * 对外暴露的 adaptor + */ +export { statistic }; + /** * 图适配器 * @param chart diff --git a/src/plots/gauge/index.ts b/src/plots/gauge/index.ts index 7b8da782ab0..61b771b2d0d 100644 --- a/src/plots/gauge/index.ts +++ b/src/plots/gauge/index.ts @@ -1,9 +1,9 @@ import { Plot } from '../../core/plot'; import { Adaptor } from '../../core/adaptor'; import { GaugeOptions } from './types'; -import { adaptor } from './adaptor'; +import { adaptor, statistic } from './adaptor'; import { RANGE_VALUE, PERCENT, INDICATEOR_VIEW_ID, RANGE_VIEW_ID } from './constant'; -import { getIndicatorViewData, getRangeViewData } from './utils'; +import { getIndicatorData, getRangeData } from './utils'; // 注册 shape import './shapes/gauge'; @@ -82,17 +82,19 @@ export class Gauge extends Plot { * @param percent */ public changeData(percent: number) { - this.updateOptions({ percent }); + this.updateOption({ percent }); const indicatorView = this.chart.views.find((v) => v.id === INDICATEOR_VIEW_ID); if (indicatorView) { - indicatorView.changeData(getIndicatorViewData(percent)); + indicatorView.data(getIndicatorData(percent)); } const rangeView = this.chart.views.find((v) => v.id === RANGE_VIEW_ID); if (rangeView) { - rangeView.changeData(getRangeViewData(percent, this.options.range)); + rangeView.data(getRangeData(percent, this.options.range)); } + // todo 后续让 G2 层在 afterrender 之后,来重绘 annotations + statistic({ chart: this.chart, options: this.options }, true); } /** diff --git a/src/plots/gauge/utils.ts b/src/plots/gauge/utils.ts index 435755bc124..fbdcf6a4b5a 100644 --- a/src/plots/gauge/utils.ts +++ b/src/plots/gauge/utils.ts @@ -24,11 +24,16 @@ export function processRangeData(range: number[]): Data { * 获取 仪表盘 指针数据 * @param percent */ -export function getIndicatorViewData(percent: GaugeOptions['percent']): Data { +export function getIndicatorData(percent: GaugeOptions['percent']): Data { return [{ [PERCENT]: clamp(percent, 0, 1) }]; } -export function getRangeViewData(percent: GaugeOptions['percent'], range: GaugeOptions['range']): Data { +/** + * 获取仪表盘 表盘弧形数据 + * @param percent + * @param range + */ +export function getRangeData(percent: GaugeOptions['percent'], range: GaugeOptions['range']): Data { const ticks = get(range, ['ticks'], []); const clampTicks = size(ticks) ? ticks : [0, clamp(percent, 0, 1), 1]; diff --git a/src/plots/line/index.ts b/src/plots/line/index.ts index dc59a8250fd..359a7453132 100644 --- a/src/plots/line/index.ts +++ b/src/plots/line/index.ts @@ -17,8 +17,7 @@ export class Line extends Plot { * @param data */ public changeData(data: LineOptions['data']) { - // @ts-ignore - this.updateOptions({ data }); + this.updateOption({ data }); this.chart.changeData(data); }