环图 Statistics 区域优化 (#1248)

* fix: pie label do not capture event

* fix: 统一环图中检区域 html 模板以及入参结构同时修复 htmlContent 不生效的问题

* feat: 环图 Statistic 支持自定义 html，同时完善自定义函数参数内容

Author: simaQ

__tests__/bugs/donut-statistic-spec.ts

@@ -58,6 +58,15 @@ describe('Statistics scale format', () => {
       angleField: 'value',
       colorField: 'type',
       animation: false,
+      statistic: {
+        htmlContent: (data) => {
+          const { name, value, color } = data;
+          return `<div>
+            <h3 class="ring-guide-name" style="color: ${color}">${name}</h3>
+            <p class="ring-guide-value">${value}</p>
+            </div>`;
+        },
+      },
     });
     donutPlot.render();
     // @ts-ignore

src/plots/donut/component/ring-statistic.ts

@@ -1,15 +1,22 @@
 import { View } from '../../../dependents';
 import StatisticHtml, { IStatisticHtml } from './statistic';
-import * as statisticTemplate from './statistic-template';
-import { debounce, each, isString, isObject, isFunction, keys } from '@antv/util';
-import { LooseMap } from '../../../interface/types';
+import { getTemplate } from './statistic-template';
+import { debounce, each } from '@antv/util';
 import Ring, { DonutViewConfig } from '../layer';
+import { LooseMap } from '../../../interface/types';
 
 interface IRingStatistic extends IStatisticHtml {
   view: View;
   plot: any;
 }
 
+interface StatisticData {
+  name: string;
+  value: string;
+  itemData?: LooseMap;
+  color?: string;
+}
+
 export default class RingStatistic extends StatisticHtml {
   protected view: View;
   protected plot: Ring;
@@ -29,7 +36,7 @@ export default class RingStatistic extends StatisticHtml {
     this.view.on(
       `interval:${triggerOnEvent}`,
       debounce((e) => {
-        const displayData = this.parseStatisticData(e.data.data);
+        const displayData = this.parseStatisticData('item', e.data.data, e.data.color);
         const htmlString = this.getStatisticHtmlString(displayData);
         this.updateHtml(htmlString);
       }, 150)
@@ -51,7 +58,7 @@ export default class RingStatistic extends StatisticHtml {
     } else {
       /** 用户没有指定文本内容时，默认显示总计 */
       const data = this.getTotalValue();
-      displayData = this.parseStatisticData(data);
+      displayData = this.parseStatisticData('total', data);
     }
     /** 中心文本显示 */
     let htmlString;
@@ -87,33 +94,29 @@ export default class RingStatistic extends StatisticHtml {
     return data;
   }
 
-  private parseStatisticData(data) {
+  private parseStatisticData(type: string, data, color?: string) {
     const plot = this.plot;
     const { angleField, colorField } = plot.options;
     const angleScale = plot.getScaleByField(angleField);
     const colorScale = plot.getScaleByField(colorField);
 
-    if (colorField) {
-      return {
-        name: colorScale.getText(data[colorField]),
-        value: angleScale.getText(data[angleField]),
-      };
+    const statisticData: StatisticData = {
+      name: colorScale ? colorScale.getText(data[colorField]) : null,
+      value: angleScale.getText(data[angleField]),
+    };
+
+    if (type === 'item') {
+      // 每一个扇形区域的数据
+      statisticData.itemData = data;
+      statisticData.color = color;
     }
 
-    return angleScale.getText(data[angleField]);
+    return statisticData;
   }
 
   private getStatisticTemplate(data) {
     const size = this.getStatisticSize();
-    let htmlString;
-    /** 如果文本内容为string或单条数据 */
-    if (isString(data)) {
-      htmlString = statisticTemplate.getSingleDataTemplate(data, this.statisticClass, size);
-    } else if (isObject(data) && keys(data).length === 2) {
-      /** 如果文本内容为两条数据 */
-      const content = data as LooseMap;
-      htmlString = statisticTemplate.getTwoDataTemplate(content.name, content.value, this.statisticClass, size);
-    }
+    const htmlString = getTemplate(data.name, data.value, this.statisticClass, size);
     /** 更为复杂的文本要求用户自行制定html模板 */
     return htmlString;
   }
@@ -127,15 +130,14 @@ export default class RingStatistic extends StatisticHtml {
   }
 
   private getStatisticHtmlString(data): string {
-    const triggerOnConfig = this.options.triggerOn;
+    const htmlContent = this.options.htmlContent;
     let htmlString: string;
-    if (isString(triggerOnConfig)) {
+    if (htmlContent) {
+      htmlString = htmlContent(data);
+    } else {
       htmlString = this.getStatisticTemplate(data);
     }
-    if (isFunction(triggerOnConfig)) {
-      htmlString = triggerOnConfig(data);
-      htmlString = `<div class="ring-guide-html ${this.statisticClass}">${htmlString}</div>`;
-    }
+
     return htmlString;
   }
 }

src/plots/donut/component/statistic-template.ts

@@ -1,19 +1,13 @@
 /*tslint:disable*/
 const containerStyle =
   "color:#4d4d4d;font-size:14px;text-align:center;line-height:2;font-family:'-apple-system',BlinkMacSystemFont,'SegoeUI',Roboto,'HelveticaNeue',Helvetica,'PingFangSC','HiraginoSansGB','MicrosoftYaHei',SimSun,'sans-serif';pointer-events:none;";
-
 const nameStyle = 'font-weight:300;white-space: nowrap;text-overflow: ellipsis;';
-
 const valueStyle = 'font-size:32px;font-weight:bold;color:#4D4D4D';
 
-function getSingleDataTemplate(value, classId, size) {
+export function getTemplate(name, value, classId, size) {
   const domStyle = `${containerStyle}width:${size}px;`;
-  return `<div class="ring-guide-html ${classId}" style=${domStyle}><span class="ring-guide-value" style=${valueStyle}>${value}</span></div>`;
-}
+  const nameDomStr = name ? `<span class="ring-guide-name" style=${nameStyle}>${name}</span><br/>` : '';
+  const valueDomStr = `<span class="ring-guide-value" style=${valueStyle}>${value}</span>`;
 
-function getTwoDataTemplate(name, value, classId, size) {
-  const domStyle = `${containerStyle}width:${size}px;`;
-  return `<div class="ring-guide-html ${classId}" style=${domStyle}><span class="ring-guide-name" style=${nameStyle}>${name}</span><br/><span class="ring-guide-value" style=${valueStyle}>${value}</span></div>`;
+  return `<div class="ring-guide-html ${classId}" style=${domStyle}>${nameDomStr}${valueDomStr}</div>`;
 }
-
-export { getSingleDataTemplate, getTwoDataTemplate };

src/plots/pie/component/label/base-label.ts

@@ -174,7 +174,11 @@ export default abstract class PieBaseLabel {
             idx
           )
         : shapeInfo.name;
-      const itemGroup = this.container.addGroup({ name: 'itemGroup', index: idx });
+      const itemGroup = this.container.addGroup({
+        name: 'itemGroup',
+        index: idx,
+        capture: false, // 不捕获事件，否则鼠标 hover 到图形会失焦
+      });
       const textShape = itemGroup.addShape('text', {
         attrs: deepMix({}, attrs, {
           x: shapeInfo.x + offsetX,

src/plots/pie/component/label/spider-label.ts

@@ -141,7 +141,9 @@ export default class SpiderLabel {
         }
         texts = formatted;
       }
-      const textGroup = this.container.addGroup();
+      const textGroup = this.container.addGroup({
+        capture: false, // 不捕获事件，否则鼠标 hover 到图形会失焦
+      });
       const textAttrs: IAttrs = {
         x: 0,
         y: 0,