feat(statistic): 修复水波图 & 进度环图设置统计文本 content 不生效 & 添加单测

antvis · May 20, 2021 · 57dea33 · 57dea33
1 parent a880a36
commit 57dea33
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 35 deletions.
diff --git 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
@@ -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
@@ -72,13 +72,13 @@ export function statistic(params: Params<LiquidOptions>, 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
@@ -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
@@ -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<RingProgressOptions>, 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
@@ -16,7 +16,6 @@ export const DEFAULT_OPTIONS = {
         textAlign: 'center' as const,
         textBaseline: 'middle' as const,
       },
-      formatter: ({ percent }) => `${(percent * 100).toFixed(2)}%`,
     },
   },
   animation: {},