fix: 修复 sunburst tooltip (#1796)

* fix: 修复 sunburst tooltip * fix: test * fix: test Co-authored-by: liufu.lf <liufu.lf@antfin.com>
antvis · Oct 27, 2020 · 76a4a25 · 76a4a25
1 parent 1f9e607
commit 76a4a25
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 25 deletions.
diff --git a/__tests__/unit/plots/sunburst/index-spec.ts b/__tests__/unit/plots/sunburst/index-spec.ts
@@ -18,13 +18,6 @@ describe('sunburst', () => {
       label: {
         position: 'middle',
       },
-      tooltip: {
-        customContent: (_, item) => {
-          const mappingData = item?.[0]?.mappingData;
-          const originData = mappingData?._origin?.data;
-          return `<div>${originData?.label} - ${originData?.sum}</div>`;
-        },
-      },
       interactions: [{ type: 'element-active' }],
     });
     sunburstPlot.render();
@@ -151,5 +144,76 @@ describe('sunburst', () => {
     expect(transformData.ext).toEqual({
       size: [1, 0.1],
     });
+    const elements = geometry.elements;
+    const bbox = elements[elements.length - 1].getBBox();
+    sunburstPlot.chart.showTooltip({ x: bbox.maxX, y: bbox.maxY });
+    expect(document.getElementsByClassName('g2-tooltip-list-item-value')[0].innerHTML).toBe('0.0153');
+    sunburstPlot.chart.hideTooltip();
+  });
+});
+
+describe('sunburst', () => {
+  it('formatter: tooltip formatter', async () => {
+    const fetchData = await fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/mobile.json').then((res) =>
+      res.json()
+    );
+    fetchData.forEach((mobile) => {
+      mobile.value = null;
+    });
+    const data = {
+      name: 'root',
+      children: fetchData,
+    };
+    const sunburstPlot = new Sunburst(createDiv(), {
+      width: 400,
+      height: 400,
+      data,
+      type: 'treemap',
+      seriesField: 'value',
+      reflect: 'y',
+      colorField: 'brand',
+      hierarchyConfig: {
+        size: [1, 0.1],
+      },
+      sunburstStyle: {
+        lineWidth: 1,
+        stroke: '#fff',
+      },
+      tooltip: {
+        formatter: () => ({ name: 'name', value: '123' }),
+      },
+      interactions: [{ type: 'element-active' }],
+    });
+    sunburstPlot.render();
+    const geometry = sunburstPlot.chart.geometries[0];
+    expect(geometry.type).toBe('polygon');
+    // @ts-ignore
+    const {
+      attributeOption: { color },
+      coordinate,
+      styleOption,
+    } = geometry;
+
+    expect(color.fields).toEqual(['brand']);
+    const positionFields = geometry.getAttribute('position').getFields();
+    expect(geometry.elements.length).toBe(geometry.data.length);
+    expect(positionFields).toHaveLength(2);
+    expect(positionFields).toEqual(['x', 'y']);
+    expect(coordinate.type).toBe('polar');
+    // @ts-ignore
+    expect(coordinate.isReflectY).toBeTruthy();
+    expect(styleOption.cfg).toEqual({
+      lineWidth: 1,
+      stroke: '#fff',
+    });
+    const transformData = geometry.data[0];
+    expect(transformData.ext).toEqual({
+      size: [1, 0.1],
+    });
+    const elements = geometry.elements;
+    const bbox = elements[elements.length - 1].getBBox();
+    sunburstPlot.chart.showTooltip({ x: bbox.maxX, y: bbox.maxY });
+    expect(document.getElementsByClassName('g2-tooltip-list-item-value')[2].innerHTML).toBe('123');
+    sunburstPlot.chart.hideTooltip();
   });
 });
diff --git a/examples/sunburst/basic/demo/basic.ts b/examples/sunburst/basic/demo/basic.ts
@@ -6,16 +6,8 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json')
     const sunburstPlot = new Sunburst('container', {
       data,
       seriesField: 'sum',
-      colorField: 'value',
-      color: ['#BAE7FF', '#1890FF', '#0050B3'],
+      colorField: 'label',
       innerRadius: 0.3,
-      tooltip: {
-        customContent: (_, item) => {
-          const mappingData = item?.[0]?.mappingData;
-          const originData = mappingData?._origin?.data;
-          return `<div>${originData?.label} - ${originData?.sum}</div>`;
-        },
-      },
       interactions: [{ type: 'element-active' }],
     });
     sunburstPlot.render();

diff --git a/examples/sunburst/basic/demo/reflect.ts b/examples/sunburst/basic/demo/reflect.ts
@@ -16,10 +16,16 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/mobile.json')
       seriesField: 'value',
       reflect: 'y',
       colorField: 'brand',
+      hierarchyConfig: {
+        size: [1, 0.1],
+      },
       sunburstStyle: {
         lineWidth: 1,
         stroke: '#fff',
       },
+      tooltip: {
+        fields: ['name', 'value'],
+      },
       interactions: [{ type: 'element-active' }],
     });
     sunburstPlot.render();

diff --git a/src/plots/sunburst/index.ts b/src/plots/sunburst/index.ts
@@ -3,6 +3,7 @@ import { Plot } from '../../core/plot';
 import { Adaptor } from '../../core/adaptor';
 import { SunburstOptions } from './types';
 import { adaptor } from './adaptor';
+import { getTooltipTemplate } from './utils';
 
 export { SunburstOptions };
 
@@ -13,14 +14,26 @@ export class Sunburst extends Plot<SunburstOptions> {
   /**
    * 获取旭日图默认配置
    */
-  protected getDefaultOptions() {
+  protected getDefaultOptions(options: SunburstOptions) {
+    const { tooltip, seriesField, colorField } = options;
     return deepMix({}, super.getDefaultOptions(), {
       type: 'partition',
       innerRadius: 0,
       seriesField: 'value',
       tooltip: {
         showTitle: false,
         showMarkers: false,
+        customContent:
+          tooltip && tooltip.customContent
+            ? tooltip.customContent
+            : (value: string, items: any[]) => {
+                return getTooltipTemplate({
+                  value,
+                  items,
+                  formatter: tooltip && tooltip?.formatter,
+                  fields: (tooltip && tooltip.fields) || [seriesField, colorField],
+                });
+              },
       },
     });
   }

diff --git a/src/plots/sunburst/utils.ts b/src/plots/sunburst/utils.ts
@@ -26,19 +26,53 @@ export function transformData(options: SunburstOptions) {
       return null;
     }
     const nodeInfo = {
-      [seriesField]: node.data?.[seriesField],
-      [colorField]: node.data?.[colorField],
+      [seriesField]: node.data[seriesField] || node.parent?.data?.[seriesField],
+      [colorField]: node.data[colorField] || node.parent?.data?.[colorField],
       ...node,
     };
     nodeInfo.ext = hierarchyConfig;
-    if (!node.data.brand && node.parent) {
-      nodeInfo.brand = node.parent.data.brand;
-    } else {
-      nodeInfo.brand = node.data.brand;
-    }
-
     result.push(nodeInfo);
   });
 
   return result;
 }
+
+/**
+ * customContent
+ * @param {string} value
+ * @param {any[]} items
+ * @param {Function} formatter
+ * @param {string} field
+ * @returns HTMLElement
+ */
+export function getTooltipTemplate(params: {
+  value: string;
+  items: any[];
+  formatter?: (item: any) => { name: string; value: string | number };
+  fields?: string[];
+}): HTMLElement {
+  const { items, formatter, fields } = params;
+  const { color, mappingData, data } = items[0] || {}; // 不会有分组情况
+  const container = document.createElement('ul');
+  container.className = 'g2-tooltip';
+  let listItem = '';
+  const formatterItem = (item, field) => {
+    if (formatter) {
+      return formatter({ ...item, field });
+    }
+    return { name: field, value: item?.[field] || item?.data?.[field] };
+  };
+
+  fields.forEach((field) => {
+    const { name, value } = formatterItem(data, field);
+    listItem += `<li class="g2-tooltip-list-item" data-index={index} style="margin-bottom:4px;display:flex;align-items: center;">
+        <span style="background-color:${mappingData?.color || color};" class="g2-tooltip-marker"></span>
+        <span style="display:inline-flex;flex:1;justify-content:space-between">
+        <span style="margin-right: 16px;">${name}:</span>
+        <span class="g2-tooltip-list-item-value">${value}</span>
+        </span>
+    </li>`;
+  });
+  container.innerHTML = listItem;
+  return container;
+}