fix: #1867

antvis · Nov 17, 2020 · 6f3f424 · 6f3f424
1 parent 5e41207
commit 6f3f424
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 126 deletions.
diff --git a/src/plots/funnel/adaptor.ts b/src/plots/funnel/adaptor.ts
@@ -1,5 +1,5 @@
 import { Params } from '../../core/adaptor';
-import { interaction, animation, theme, scale, annotation, tooltip as common } from '../../adaptor/common';
+import { interaction, animation, theme, scale, annotation, tooltip } from '../../adaptor/common';
 import { flow, deepAssign } from '../../utils';
 import { FunnelOptions } from './types';
 import { basicFunnel } from './geometries/basic';
@@ -20,39 +20,46 @@ import { dynamicHeightFunnel } from './geometries/dynamic-height';
  */
 function defaultOptions(params: Params<FunnelOptions>): Params<FunnelOptions> {
   const { options } = params;
-  const { compareField, dynamicHeight, xField, yField } = options;
-  let additionalOption = {};
-  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>`,
-        formatter: (datum) => {
-          console.log(datum);
-          return { name: 'abc', value: '123' };
-        },
+  const { compareField, xField, yField } = options;
+  const defaultOption = {
+    label: {
+      offset: 0,
+      position: 'middle',
+      style: {
+        fill: '#fff',
+        fontSize: 12,
       },
-    };
-  } else if (compareField) {
-    additionalOption = {
-      appendPadding: [50, 50, 0, 50],
-      label: {
-        callback: (xField, yField) => ({
-          content: `${yField}`,
-        }),
+      callback: compareField
+        ? (xField, yField) => ({
+            content: `${yField}`,
+          })
+        : (xField, yField) => ({
+            content: `${xField} ${yField}`,
+          }),
+    },
+    tooltip: {
+      showTitle: false,
+      showMarkers: false,
+      shared: false,
+      title: xField,
+      formatter: (datum) => {
+        return { name: datum[xField], value: datum[yField] };
       },
-    };
-  }
+    },
+    conversionTag: {
+      offsetX: 10,
+      offsetY: 0,
+      style: {},
+      formatter: (datum) => `转化率${(datum.$$percentage$$ * 100).toFixed(2)}%`,
+    },
+  };
 
-  return deepAssign({}, params, {
-    options: {
-      ...additionalOption,
-      ...options,
+  return deepAssign(
+    {
+      options: defaultOption,
     },
-  });
+    params
+  );
 }
 
 /**
@@ -116,24 +123,6 @@ function legend(params: Params<FunnelOptions>): Params<FunnelOptions> {
   return params;
 }
 
-/**
- * tooltip
- * @param params
- */
-function tooltip(params: Params<FunnelOptions>): Params<FunnelOptions> {
-  const { chart, options } = params;
-  const { legend } = options;
-
-  if (legend === false) {
-    chart.legend(false);
-  } else {
-    chart.legend(legend);
-    // TODO FIX: legend-click 时间和转化率组件之间的关联
-  }
-
-  return params;
-}
-
 /**
  * 漏斗图适配器
  * @param chart

diff --git a/src/plots/funnel/geometries/basic.ts b/src/plots/funnel/geometries/basic.ts
@@ -96,9 +96,15 @@ function conversionTag(params: Params<FunnelOptions>): Params<FunnelOptions> {
   const { options } = params;
   const { yField } = options;
 
-  const getLineCoordinate = (datum: Datum, datumIndex: number, data: Data): LineOption => {
+  const getLineCoordinate = (
+    datum: Datum,
+    datumIndex: number,
+    data: Data,
+    initLineOption: Record<string, any>
+  ): LineOption => {
     const percent = 1 - (1 - datum[FUNNEL_PERCENT]) / 2;
     return {
+      ...initLineOption,
       start: [datumIndex - 0.5, data[0][yField] * percent],
       end: [datumIndex - 0.5, data[0][yField] * (percent + 0.05)],
     };

diff --git a/src/plots/funnel/geometries/common.ts b/src/plots/funnel/geometries/common.ts
@@ -34,7 +34,7 @@ export function geometryLabel(geometry: Geometry) {
  * @param getLineCoordinate 用于获取特定的 line 的位置及配置
  */
 export function conversionTagComponent(
-  getLineCoordinate: (datum: Datum, datumIndex: number, data: Data) => LineOption
+  getLineCoordinate: (datum: Datum, datumIndex: number, data: Data, initLineOption: Record<string, any>) => LineOption
 ) {
   return function (params: Params<FunnelOptions>): Params<FunnelOptions> {
     const { chart, options } = params;
@@ -46,27 +46,22 @@ export function conversionTagComponent(
       const { formatter } = conversionTag;
       data.forEach((obj, index) => {
         if (index <= 0) return;
-        const lineCoordinateOption = getLineCoordinate(obj, index, data);
-
-        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',
-              },
+        const lineOption = getLineCoordinate(obj, index, data, {
+          top: true,
+          text: {
+            content: isFunction(formatter) ? formatter(obj, data) : formatter,
+            offsetX: conversionTag.offsetX,
+            offsetY: conversionTag.offsetY,
+            position: 'end',
+            autoRotate: false,
+            style: {
+              textAlign: 'start',
+              textBaseline: 'middle',
+              ...conversionTag.style,
             },
           },
-          lineCoordinateOption
-        );
+        });
+
         chart.annotation().line(lineOption);
       });
     }

diff --git a/src/plots/funnel/geometries/compare.ts b/src/plots/funnel/geometries/compare.ts
@@ -54,7 +54,7 @@ function geometry(params: Params<FunnelOptions>): Params<FunnelOptions> {
     fields: [compareField],
     // 漏斗图的转置规则与分面相反，默认是垂直布局
     transpose: !isTransposed,
-    padding: 0,
+    padding: isTransposed ? 0 : [32, 0, 0, 0],
     eachView(view, facet) {
       if (!isTransposed) {
         view.coordinate({
@@ -96,24 +96,28 @@ function geometry(params: Params<FunnelOptions>): Params<FunnelOptions> {
  */
 function label(params: Params<FunnelOptions>): Params<FunnelOptions> {
   const { chart, options } = params;
-  const { label } = options;
+  const { label, isTransposed } = options;
 
   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,
-                  position: 'left',
-                  style: {
-                    textAlign: index === 0 ? 'end' : 'start',
-                  },
-                },
+                label: isTransposed
+                  ? {
+                      offset: index === 0 ? 10 : -23,
+                      position: index === 0 ? 'bottom' : 'top',
+                    }
+                  : {
+                      offset: 10,
+                      position: 'left',
+                      style: {
+                        textAlign: index === 0 ? 'end' : 'start',
+                      },
+                    },
               },
             })
           : params
@@ -129,24 +133,33 @@ function label(params: Params<FunnelOptions>): Params<FunnelOptions> {
  */
 function conversionTag(params: Params<FunnelOptions>): Params<FunnelOptions> {
   const { chart, options } = params;
-  const { yField, conversionTag } = options;
+  const { yField, conversionTag, isTransposed } = options;
 
   chart.once('beforepaint', () => {
     chart.views.forEach((view, viewIndex) => {
-      const getLineCoordinate = (datum: Datum, datumIndex: number, data: Data): LineOption => {
+      const getLineCoordinate = (
+        datum: Datum,
+        datumIndex: number,
+        data: Data,
+        initLineOption: Record<string, any>
+      ): LineOption => {
         const ratio = viewIndex === 0 ? -1 : 1;
-        return {
+        return deepAssign({}, initLineOption, {
           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,
-            offsetX: conversionTag !== false ? ratio * conversionTag.offsetX : 0,
-            style: {
-              textAlign: viewIndex === 0 ? 'end' : 'start',
-            },
-          },
-        };
+          text: isTransposed
+            ? {
+                style: {
+                  textAlign: 'start',
+                },
+              }
+            : {
+                offsetX: conversionTag !== false ? ratio * conversionTag.offsetX : 0,
+                style: {
+                  textAlign: viewIndex === 0 ? 'end' : 'start',
+                },
+              },
+        });
       };
 
       conversionTagComponent(getLineCoordinate)(

diff --git a/src/plots/funnel/geometries/dynamic-height.ts b/src/plots/funnel/geometries/dynamic-height.ts
@@ -5,7 +5,7 @@ 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 { Datum, Data } from '../../../types/common';
 import { FunnelOptions } from '../types';
 import { geometryLabel, conversionTagComponent } from './common';
 
@@ -134,8 +134,14 @@ function label(params: Params<FunnelOptions>): Params<FunnelOptions> {
  * @param params
  */
 function conversionTag(params: Params<FunnelOptions>): Params<FunnelOptions> {
-  const getLineCoordinate = (datum: Datum): LineOption => {
+  const getLineCoordinate = (
+    datum: Datum,
+    datumIndex: number,
+    data: Data,
+    initLineOption: Record<string, any>
+  ): LineOption => {
     return {
+      ...initLineOption,
       start: [datum[PLOYGON_X][1], datum[PLOYGON_Y][1]],
       end: [datum[PLOYGON_X][1] + 0.05, datum[PLOYGON_Y][1]],
     };

diff --git a/src/plots/funnel/index.ts b/src/plots/funnel/index.ts
@@ -14,40 +14,10 @@ export class Funnel extends Plot<FunnelOptions> {
    * 获取 漏斗图 默认配置项
    */
   protected getDefaultOptions(): Partial<FunnelOptions> {
-    return deepAssign({}, super.getDefaultOptions(), {
-      // annotation 无法自适应 chart，先用 appendPadding hack, 随后看看如何自适应
+    // 由于不同漏斗图 defaultOption 有部分逻辑不同，此处仅处理 core.getDefaultOptions 覆盖范围，funnel 的 defaulOption 为不分散逻辑统一写到 adaptor 的 defaultOption 中
+    return {
       appendPadding: [0, 50],
-      label: {
-        offset: 0,
-        position: 'middle',
-        // layout: {
-        //   type: 'limit-in-shape',
-        // },
-        style: {
-          fill: '#fff',
-          fontSize: 12,
-        },
-        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,
-        offsetY: 0,
-        style: {},
-        formatter: (datum) => `转化率${(datum.$$percentage$$ * 100).toFixed(2)}%`,
-      },
-    });
+    };
   }
 
   /**