feat: 使用 base geometry 绘制漏斗图

antvis · Nov 17, 2020 · 5e41207 · 5e41207
1 parent 9d565e6
commit 5e41207
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 31 deletions.
diff --git a/examples/funnel/basic/demo/basic.ts b/examples/funnel/basic/demo/basic.ts
@@ -13,6 +13,13 @@ const funnelPlot = new Funnel('container', {
   xField: 'stage',
   yField: 'number',
   legend: false,
+  tooltip: {
+    formatter: (datum) => {
+      return { name: 'abc', value: '123' };
+    },
+  },
 });
 
 funnelPlot.render();
+
+console.log(funnelPlot.chart);
diff --git a/src/plots/funnel/adaptor.ts b/src/plots/funnel/adaptor.ts
@@ -25,11 +25,15 @@ function defaultOptions(params: Params<FunnelOptions>): Params<FunnelOptions> {
   if (dynamicHeight) {
     additionalOption = {
       tooltip: {
-        itemTpl:
-          '<li class="g2-tooltip-list-item" data-index={index}>' +
-          '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' +
-          `<span class="g2-tooltip-name">{${xField}}</span>` +
-          `<span class="g2-tooltip-value" style="display: inline-block; float: right; margin-left: 30px;">{${yField}}</span></li>`,
+        // itemTpl:
+        //   '<li class="g2-tooltip-list-item" data-index={index}>' +
+        //   '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' +
+        //   `<span class="g2-tooltip-name">{${xField}}</span>` +
+        //   `<span class="g2-tooltip-value" style="display: inline-block; float: right; margin-left: 30px;">{${yField}}</span></li>`,
+        formatter: (datum) => {
+          console.log(datum);
+          return { name: 'abc', value: '123' };
+        },
       },
     };
   } else if (compareField) {

diff --git a/src/plots/funnel/geometries/common.ts b/src/plots/funnel/geometries/common.ts
@@ -48,21 +48,25 @@ export function conversionTagComponent(
         if (index <= 0) return;
         const lineCoordinateOption = getLineCoordinate(obj, index, data);
 
-        const lineOption = deepAssign({}, lineCoordinateOption, {
-          top: true,
-          text: {
-            content: isFunction(formatter) ? formatter(obj, data) : formatter,
-            offsetX: conversionTag.offsetX,
-            offsetY: conversionTag.offsetY,
-            position: 'end',
-            autoRotate: false,
-            style: {
-              ...conversionTag.style,
-              textAlign: 'start',
-              textBaseline: 'middle',
+        const lineOption = deepAssign(
+          {},
+          {
+            top: true,
+            text: {
+              content: isFunction(formatter) ? formatter(obj, data) : formatter,
+              offsetX: conversionTag.offsetX,
+              offsetY: conversionTag.offsetY,
+              position: 'end',
+              autoRotate: false,
+              style: {
+                ...conversionTag.style,
+                textAlign: 'start',
+                textBaseline: 'middle',
+              },
             },
           },
-        });
+          lineCoordinateOption
+        );
         chart.annotation().line(lineOption);
       });
     }

diff --git a/src/plots/funnel/geometries/compare.ts b/src/plots/funnel/geometries/compare.ts
@@ -101,9 +101,11 @@ function label(params: Params<FunnelOptions>): Params<FunnelOptions> {
   chart.once('beforepaint', () => {
     chart.views.forEach((view, index) => {
       const geometry = findGeometry(view, 'interval');
+      console.log(geometry);
       geometryLabel(geometry)(
         label
           ? deepAssign({}, params, {
+              chart: view,
               options: {
                 label: {
                   offset: 10,
@@ -136,8 +138,9 @@ function conversionTag(params: Params<FunnelOptions>): Params<FunnelOptions> {
         return {
           start: [datumIndex - 0.5, data[0][yField] * datum[FUNNEL_PERCENT]],
           end: [datumIndex - 0.5, data[0][yField] * (datum[FUNNEL_PERCENT] + 0.05)],
+          // @ts-ignore
           text: {
-            content: undefined,
+            // content: undefined,
             offsetX: conversionTag !== false ? ratio * conversionTag.offsetX : 0,
             style: {
               textAlign: viewIndex === 0 ? 'end' : 'start',

diff --git a/src/plots/funnel/geometries/dynamic-height.ts b/src/plots/funnel/geometries/dynamic-height.ts
@@ -3,6 +3,8 @@ import { LineOption } from '@antv/g2/lib/interface';
 import { flow, findGeometry } from '../../../utils';
 import { Params } from '../../../core/adaptor';
 import { FUNNEL_PERCENT, FUNNEL_TOTAL_PERCENT, PLOYGON_X, PLOYGON_Y } from '../constant';
+import { geometry as baseGeometry } from '../../../adaptor/geometries/base';
+import { getTooltipMapping } from '../../../utils/tooltip';
 import { Datum } from '../../../types/common';
 import { FunnelOptions } from '../types';
 import { geometryLabel, conversionTagComponent } from './common';
@@ -80,17 +82,24 @@ function field(params: Params<FunnelOptions>): Params<FunnelOptions> {
  */
 function geometry(params: Params<FunnelOptions>): Params<FunnelOptions> {
   const { chart, options } = params;
-  const { xField, yField, color } = options;
+  const { xField, yField, color, tooltip } = options;
 
+  const { fields, formatter } = getTooltipMapping(tooltip, [xField, yField, FUNNEL_PERCENT]);
   // 绘制漏斗图
-  chart
-    .polygon()
-    .position(`${PLOYGON_X}*${PLOYGON_Y}`)
-    .color(xField, color)
-    .tooltip(`${xField}*${yField}`, (xFieldValue, yFieldValue) => ({
-      [xField]: xFieldValue,
-      [yField]: yFieldValue,
-    }));
+  baseGeometry({
+    chart,
+    options: {
+      type: 'polygon',
+      xField: PLOYGON_X,
+      yField: PLOYGON_Y,
+      colorField: xField,
+      tooltipFields: fields,
+      mapping: {
+        tooltip: formatter,
+        color,
+      },
+    },
+  });
   return params;
 }
 

diff --git a/src/plots/funnel/index.ts b/src/plots/funnel/index.ts
@@ -27,14 +27,19 @@ export class Funnel extends Plot<FunnelOptions> {
           fill: '#fff',
           fontSize: 12,
         },
-        callback: (xField, yField) => ({
-          content: `${xField} ${yField}`,
-        }),
+        callback: (xField, yField, percent) => {
+          return {
+            content: `${xField} ${yField}`,
+          };
+        },
       },
       tooltip: {
         showTitle: false,
         showMarkers: false,
         shared: false,
+        formatter: (datum) => {
+          return { name: 'abc', value: '123' };
+        },
       },
       conversionTag: {
         offsetX: 10,