From 57dea331d2292470ba41fbd1ac5d1169579af6dd Mon Sep 17 00:00:00 2001 From: visiky <736929286@qq.com> Date: Thu, 20 May 2021 12:41:16 +0800 Subject: [PATCH] =?UTF-8?q?feat(statistic):=20=E4=BF=AE=E5=A4=8D=E6=B0=B4?= =?UTF-8?q?=E6=B3=A2=E5=9B=BE=20&=20=E8=BF=9B=E5=BA=A6=E7=8E=AF=E5=9B=BE?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E7=BB=9F=E8=AE=A1=E6=96=87=E6=9C=AC=20conten?= =?UTF-8?q?t=20=E4=B8=8D=E7=94=9F=E6=95=88=20&=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=8D=95=E6=B5=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- __tests__/unit/plots/liquid/statistic-spec.ts | 38 +++++++++++-------- .../plots/ring-progress/statistic-spec.ts | 8 +++- src/plots/liquid/adaptor.ts | 14 +++---- src/plots/liquid/constants.ts | 1 - src/plots/ring-progress/adaptor.ts | 18 ++++----- src/plots/ring-progress/constants.ts | 1 - 6 files changed, 45 insertions(+), 35 deletions(-) diff --git a/__tests__/unit/plots/liquid/statistic-spec.ts b/__tests__/unit/plots/liquid/statistic-spec.ts index 9547575253..141da025c5 100644 --- a/__tests__/unit/plots/liquid/statistic-spec.ts +++ b/__tests__/unit/plots/liquid/statistic-spec.ts @@ -3,7 +3,8 @@ import { createDiv } from '../../../utils/dom'; import { delay } from '../../../utils/delay'; describe('liquid statistic', () => { - const liquid = new Liquid(createDiv(), { + const div = createDiv(); + const liquid = new Liquid(div, { width: 600, height: 300, autoFit: false, @@ -14,39 +15,46 @@ describe('liquid statistic', () => { it('默认展示', async () => { await delay(50); - const annotations = document.body.querySelectorAll('.g2-html-annotation'); + const annotations = div.querySelectorAll('.g2-html-annotation'); expect(annotations.length).toBe(1); }); it('默认展示当前数值', () => { liquid.update({ statistic: { content: {} } }); - const annotation = document.body.querySelector('.g2-html-annotation'); + const annotation = div.querySelector('.g2-html-annotation'); expect((annotation as HTMLElement).innerText).toBe('65.00%'); }); + it('使用 content', () => { + liquid.chart.clear(); + liquid.update({ statistic: { content: { content: 'ss' } } }); + const annotation = div.querySelector('.g2-html-annotation'); + expect((annotation as HTMLElement).innerText).toBe('ss'); + }); + it('使用 meta 格式化', () => { liquid.update({ meta: { percent: { formatter: (v) => `${v * 100}.000%` } }, - statistic: { content: { formatter: null } }, + statistic: { content: { content: undefined } }, }); - const annotation = document.body.querySelector('.g2-html-annotation'); + const annotation = div.querySelector('.g2-html-annotation'); expect((annotation as HTMLElement).innerText).toBe('65.000%'); }); it('statistic 配置的格式化方式, 优先级高于 meta', () => { liquid.update({ statistic: { content: { formatter: ({ percent }) => `${percent * 100}.0%` } } }); - const annotation = document.body.querySelector('.g2-html-annotation'); + const annotation = div.querySelector('.g2-html-annotation'); expect((annotation as HTMLElement).innerText).toBe('65.0%'); }); it('statistic 配置title', () => { liquid.update({ statistic: { content: {}, title: {} } }); - let annotations = document.body.querySelectorAll('.g2-html-annotation'); + let annotations = div.querySelectorAll('.g2-html-annotation'); expect(annotations.length).toBe(2); expect((annotations[0] as HTMLElement).innerText).toBe(''); liquid.update({ statistic: { content: {}, title: { formatter: () => '测试' } } }); - annotations = document.body.querySelectorAll('.g2-html-annotation'); + annotations = div.querySelectorAll('.g2-html-annotation'); expect((annotations[0] as HTMLElement).innerText).toBe('测试'); }); @@ -72,29 +80,29 @@ describe('liquid statistic', () => { it('关闭 statistic', () => { liquid.update({ statistic: { content: null } }); - let annotations = document.body.querySelectorAll('.g2-html-annotation'); + let annotations = div.querySelectorAll('.g2-html-annotation'); expect(annotations.length).toBe(1); liquid.update({ statistic: { content: null, title: null } }); - annotations = document.body.querySelectorAll('.g2-html-annotation'); + annotations = div.querySelectorAll('.g2-html-annotation'); expect(annotations.length).toBe(0); }); it('change data', () => { liquid.update({ statistic: { title: {}, content: { formatter: ({ percent: v }) => `${v * 100}.0%` } } }); liquid.changeData(0.35); - const annotations = document.body.querySelectorAll('.g2-html-annotation'); + const annotations = div.querySelectorAll('.g2-html-annotation'); expect(annotations.length).toBe(2); expect((annotations[1] as HTMLElement).innerText).toBe('35.0%'); liquid.changeData(0.15); - expect((document.body.querySelectorAll('.g2-html-annotation')[1] as HTMLElement).innerText).toBe('15.0%'); + expect((div.querySelectorAll('.g2-html-annotation')[1] as HTMLElement).innerText).toBe('15.0%'); liquid.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%'); + expect(div.querySelectorAll('.g2-html-annotation').length).toBe(1); + expect((div.querySelectorAll('.g2-html-annotation')[0] as HTMLElement).innerText).toBe('15.0%'); liquid.changeData(0.05); - expect((document.body.querySelectorAll('.g2-html-annotation')[0] as HTMLElement).innerText).toBe('5.0%'); + expect((div.querySelectorAll('.g2-html-annotation')[0] as HTMLElement).innerText).toBe('5.0%'); }); afterAll(() => { diff --git a/__tests__/unit/plots/ring-progress/statistic-spec.ts b/__tests__/unit/plots/ring-progress/statistic-spec.ts index 671222a9c1..c91e350870 100644 --- a/__tests__/unit/plots/ring-progress/statistic-spec.ts +++ b/__tests__/unit/plots/ring-progress/statistic-spec.ts @@ -26,10 +26,16 @@ describe('ringProgress statistic', () => { expect((annotation as HTMLElement).innerText).toBe('65.00%'); }); + it('使用 content', () => { + ringProgress.update({ statistic: { content: { content: 'ss' } } }); + const annotation = document.body.querySelector('.g2-html-annotation'); + expect((annotation as HTMLElement).innerText).toBe('ss'); + }); + it('使用 meta 格式化', () => { ringProgress.update({ meta: { percent: { formatter: (v) => `${v * 100}.000%` } }, - statistic: { content: { formatter: null } }, + statistic: { content: { content: null } }, }); const annotation = document.body.querySelector('.g2-html-annotation'); expect((annotation as HTMLElement).innerText).toBe('65.000%'); diff --git a/src/plots/liquid/adaptor.ts b/src/plots/liquid/adaptor.ts index 85990d10dc..a93db5883e 100644 --- a/src/plots/liquid/adaptor.ts +++ b/src/plots/liquid/adaptor.ts @@ -72,13 +72,13 @@ export function statistic(params: Params, updated?: boolean): Par // 先清空标注，再重新渲染 chart.getController('annotation').clear(true); - const contentOpt = statistic.content; - if (contentOpt && !contentOpt.formatter) { - const metaFormatter = get(meta, ['percent', 'formatter']) || ((v) => `${(v * 100).toFixed(2)}%`); - // @ts-ignore - contentOpt.formatter = ({ percent }) => { - return !isNil(contentOpt.content) ? contentOpt.content : metaFormatter(percent); - }; + + const metaFormatter = get(meta, ['percent', 'formatter']) || ((v) => `${(v * 100).toFixed(2)}%`); + let contentOpt = statistic.content; + if (contentOpt) { + contentOpt = deepAssign({}, contentOpt, { + content: !isNil(contentOpt.content) ? contentOpt.content : metaFormatter(percent), + }); } renderStatistic(chart, { statistic: { ...statistic, content: contentOpt }, plotType: 'liquid' }, { percent }); diff --git a/src/plots/liquid/constants.ts b/src/plots/liquid/constants.ts index bd07cf0ca0..3fb48bf9b4 100644 --- a/src/plots/liquid/constants.ts +++ b/src/plots/liquid/constants.ts @@ -6,7 +6,6 @@ export const DEFAULT_OPTIONS = { statistic: { title: false as const, content: { - formatter: ({ percent }) => `${(percent * 100).toFixed(2)}%`, style: { opacity: 0.75, fontSize: '30px', diff --git a/src/plots/ring-progress/adaptor.ts b/src/plots/ring-progress/adaptor.ts index d39676c56b..aa4d093d84 100644 --- a/src/plots/ring-progress/adaptor.ts +++ b/src/plots/ring-progress/adaptor.ts @@ -1,9 +1,8 @@ import { get, isNil } from '@antv/util'; import { Params } from '../../core/adaptor'; -import { flow, renderStatistic } from '../../utils'; +import { deepAssign, flow, renderStatistic } from '../../utils'; import { scale, animation, theme, annotation } from '../../adaptor/common'; import { geometry } from '../progress/adaptor'; -import { PERCENT } from '../gauge/constants'; import { RingProgressOptions } from './types'; /** @@ -36,17 +35,16 @@ export function statistic(params: Params, updated?: boolean /** 中心文本 指标卡 */ if (innerRadius && statistic) { - const transformContent = statistic.content; - if (transformContent && !transformContent.formatter) { - const metaFormatter = get(meta, [PERCENT, 'formatter']) || ((v) => v); - // @ts-ignore - transformContent.formatter = ({ percent }) => { - return !isNil(transformContent.content) ? transformContent.content : metaFormatter(percent); - }; + const metaFormatter = get(meta, ['percent', 'formatter']) || ((v) => `${(v * 100).toFixed(2)}%`); + let contentOpt = statistic.content; + if (contentOpt) { + contentOpt = deepAssign({}, contentOpt, { + content: !isNil(contentOpt.content) ? contentOpt.content : metaFormatter(percent), + }); } renderStatistic( chart, - { statistic: { ...statistic, content: transformContent }, plotType: 'ring-progress' }, + { statistic: { ...statistic, content: contentOpt }, plotType: 'ring-progress' }, { percent } ); } diff --git a/src/plots/ring-progress/constants.ts b/src/plots/ring-progress/constants.ts index fefc7eb4b4..3be2389b2d 100644 --- a/src/plots/ring-progress/constants.ts +++ b/src/plots/ring-progress/constants.ts @@ -16,7 +16,6 @@ export const DEFAULT_OPTIONS = { textAlign: 'center' as const, textBaseline: 'middle' as const, }, - formatter: ({ percent }) => `${(percent * 100).toFixed(2)}%`, }, }, animation: {},