From e08c2c61e1098390162cba5d35aeb8e1b24c9d04 Mon Sep 17 00:00:00 2001 From: kasmine <736929286@qq.com> Date: Fri, 25 Dec 2020 14:23:57 +0800 Subject: [PATCH] =?UTF-8?q?feat(gauge):=20=E4=BC=98=E5=8C=96=E4=BB=AA?= =?UTF-8?q?=E8=A1=A8=E7=9B=98=E7=9A=84=20changedata,=20=E6=AF=8F=E4=B8=80?= =?UTF-8?q?=E6=AC=A1=20changedata=20=E5=8F=AA=E5=81=9A=E4=B8=80=E6=AC=A1?= =?UTF-8?q?=20paint=20=E7=BB=98=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - [x] 单测 --- __tests__/unit/plots/gauge/statistic-spec.ts | 17 +++++++++++++++++ examples/progress-plots/gauge/demo/basic.ts | 5 ++--- src/core/plot.ts | 4 ++-- src/plots/gauge/adaptor.ts | 19 +++++++++++++++---- src/plots/gauge/index.ts | 12 +++++++----- src/plots/gauge/utils.ts | 9 +++++++-- src/plots/line/index.ts | 3 +-- 7 files changed, 51 insertions(+), 18 deletions(-) diff --git a/__tests__/unit/plots/gauge/statistic-spec.ts b/__tests__/unit/plots/gauge/statistic-spec.ts index 4258f71a8b..91df010fc2 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(document.body.querySelectorAll('.g2-html-annotation').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 d9372356f4..0dcb01e63a 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 e84fa1b1b1..c6dc923d5e 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 4d06566154..101c54f365 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 7b8da782ab..61b771b2d0 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 435755bc12..fbdcf6a4b5 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 dc59a8250f..359a745313 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); }