refactor(statistic): 统一中心文本结构 (#1587)

Author: hustcc

examples/liquid/basic/demo/style.ts

@@ -6,13 +6,15 @@ const liquidPlot = new Liquid(document.getElementById('container'), {
   autoFit: false,
   percent: 0.75,
   statistic: {
-    formatter: (v) => {
-      return `占比${v * 100}%`;
+    content: {
+      formatter: ({ percent }) => {
+        return `占比${percent * 100}%`;
+      },
     },
   },
-  liquidStyle: (v) => {
+  liquidStyle: ({ percent }) => {
     return {
-      fill: v > 0.75 ? 'red' : '#acc9ff',
+      fill: percent > 0.75 ? 'red' : '#acc9ff',
     };
   },
   color: () => '#acc9ff',

src/plots/liquid/adaptor.ts

@@ -65,17 +65,25 @@ function statistic(params: Params<LiquidOptions>): Params<LiquidOptions> {
   const { chart, options } = params;
   const { statistic, percent } = options;
 
-  const { style, formatter } = statistic;
+  const { title, content } = statistic;
 
-  // annotation
-  chart.annotation().text({
-    top: true,
-    position: {
-      type: CAT_VALUE,
-      percent: 0.5,
-    },
-    content: isFunction(formatter) ? formatter({ percent }) : `${percent}`,
-    style: isFunction(style) ? style({ percent }) : style,
+  // annotation title 和 content 分别使用一个 text
+  [title, content].forEach((annotation) => {
+    if (annotation) {
+      const { formatter, style, offsetX, offsetY, rotate } = annotation;
+      chart.annotation().text({
+        top: true,
+        position: {
+          type: CAT_VALUE,
+          percent: 0.5,
+        },
+        content: isFunction(formatter) ? formatter({ percent }) : `${percent}`,
+        style: isFunction(style) ? style({ percent }) : style,
+        offsetX,
+        offsetY,
+        rotate,
+      });
+    }
   });
 
   return params;

src/plots/liquid/index.ts

@@ -19,11 +19,14 @@ export class Liquid extends Plot<LiquidOptions> {
       color: '#6a99f9',
       radius: 0.9,
       statistic: {
-        formatter: ({ percent }) => `${(percent * 100).toFixed(2)}%`,
-        style: {
-          opacity: 0.75,
-          fontSize: 30,
-          textAlign: 'center',
+        title: false,
+        content: {
+          formatter: ({ percent }) => `${(percent * 100).toFixed(2)}%`,
+          style: {
+            opacity: 0.75,
+            fontSize: 30,
+            textAlign: 'center',
+          },
         },
       },
     };

src/plots/liquid/types.ts

@@ -1,12 +1,4 @@
-import { Datum } from '@antv/g2/lib/interface';
-import { Options, StyleAttr, ColorAttr } from '../../types';
-
-type Statistic = {
-  /** 统计文本的样式 */
-  readonly style?: StyleAttr;
-  /** 文本的格式化 */
-  readonly formatter?: (datum: Datum) => string;
-};
+import { Options, StyleAttr, ColorAttr, Statistic } from '../../types';
 
 /** 配置类型定义 */
 export interface LiquidOptions extends Omit<Options, 'data'> {

src/plots/ring-progress/adaptor.ts

@@ -29,14 +29,18 @@ function statistic(params: Params<RingProgressOptions>): Params<RingProgressOpti
   const { chart, options } = params;
   const { statistic, percent } = options;
 
+  // 先不处理 title 了，mini 应该没有 title 的需求了。
   const { content } = statistic;
 
   if (content) {
-    const { style, formatter } = content;
+    const { style, formatter, offsetX, offsetY, rotate } = content;
     chart.annotation().text({
       position: ['50%', '50%'],
       content: formatter ? formatter({ percent }) : percent,
       style,
+      offsetX,
+      offsetY,
+      rotate,
     });
   }
 

src/plots/ring-progress/types.ts

@@ -1,16 +1,4 @@
-import { Datum } from '@antv/g2/lib/interface';
-import { Options, StyleAttr, ColorAttr } from '../../types';
-
-type StatisticText = {
-  /** 统计文本的样式 */
-  readonly style?: StyleAttr;
-  /** 文本的格式化 */
-  readonly formatter?: (datum: Datum) => string;
-};
-
-type Statistic = {
-  readonly content?: false | StatisticText;
-};
+import { Options, StyleAttr, ColorAttr, Statistic } from '../../types';
 
 /** mini 图类型定义需要 omit 很多的 G2 Options 配置 */
 export interface RingProgressOptions extends Omit<Options, 'data' | 'tooltip' | 'legend' | 'label' | 'color'> {

src/types/index.ts

@@ -3,3 +3,4 @@ export * from './tooltip';
 export * from './tuple';
 export * from './state';
 export * from './attr';
+export * from './statistic';

src/types/statistic.ts

@@ -0,0 +1,20 @@
+import { StyleAttr } from './attr';
+import { Datum } from './common';
+
+type StatisticText = {
+  /** 统计文本的样式 */
+  readonly style?: StyleAttr;
+  /** 文本的格式化 */
+  readonly formatter?: (datum: Datum) => string;
+  readonly rotate?: number;
+  readonly offsetX?: number;
+  readonly offsetY?: number;
+};
+
+/**
+ * 中心文本的统计信息，统一一个数据结构
+ */
+export type Statistic = {
+  readonly title?: false | StatisticText;
+  readonly content?: false | StatisticText;
+};