fix: fix duplicated label renderde for line/area/radar plot

lessmost · lessmost · commit 906411d497e1 · 2020-12-04T17:07:50.000+08:00
diff --git a/__tests__/bugs/issue-2064-spec.ts b/__tests__/bugs/issue-2064-spec.ts
@@ -0,0 +1,86 @@
+import { Line, Area, Radar } from '../../src';
+import { createDiv } from '../utils/dom';
+
+const data = [
+  {
+    type: '家具家电',
+    sales: 38,
+  },
+  {
+    type: '粮油副食',
+    sales: 52,
+  },
+];
+
+describe('#2064', () => {
+  it('#2064 line', () => {
+    const plot = new Line(createDiv(), {
+      width: 400,
+      height: 400,
+      data,
+      xField: 'type',
+      yField: 'sales',
+      point: {},
+      label: {},
+    });
+
+    plot.render();
+
+    const line = plot.chart.geometries.find((geom) => geom.type === 'line');
+    const point = plot.chart.geometries.find((geom) => geom.type === 'point');
+
+    expect(line.labelsContainer.getChildren()).toHaveLength(data.length);
+    expect(point.labelsContainer.getChildren()).toHaveLength(0);
+
+    plot.destroy();
+  });
+
+  it('#2064 area', () => {
+    const plot = new Area(createDiv(), {
+      width: 400,
+      height: 400,
+      data,
+      xField: 'type',
+      yField: 'sales',
+      line: {},
+      point: {},
+      label: {},
+    });
+
+    plot.render();
+
+    const area = plot.chart.geometries.find((geom) => geom.type === 'area');
+    const line = plot.chart.geometries.find((geom) => geom.type === 'line');
+    const point = plot.chart.geometries.find((geom) => geom.type === 'point');
+
+    expect(area.labelsContainer.getChildren()).toHaveLength(data.length);
+    expect(line.labelsContainer.getChildren()).toHaveLength(0);
+    expect(point.labelsContainer.getChildren()).toHaveLength(0);
+
+    plot.destroy();
+  });
+
+  it('#2064 radar', () => {
+    const plot = new Radar(createDiv(), {
+      width: 400,
+      height: 400,
+      data,
+      xField: 'type',
+      yField: 'sales',
+      area: {},
+      point: {},
+      label: {},
+      radius: 0.8,
+    });
+
+    plot.render();
+
+    const area = plot.chart.geometries.find((geom) => geom.type === 'area');
+    const line = plot.chart.geometries.find((geom) => geom.type === 'line');
+    const point = plot.chart.geometries.find((geom) => geom.type === 'point');
+
+    expect(area.labelsContainer.getChildren()).toHaveLength(0);
+    expect(line.labelsContainer.getChildren()).toHaveLength(data.length);
+    expect(point.labelsContainer.getChildren()).toHaveLength(0);
+  });
+});
diff --git a/src/adaptor/geometries/area.ts b/src/adaptor/geometries/area.ts
@@ -1,7 +1,7 @@
 import { Params } from '../../core/adaptor';
 import { getTooltipMapping } from '../../utils/tooltip';
 import { deepAssign } from '../../utils';
-import { GeometryOptions, geometry, MappingOptions } from './base';
+import { GeometryOptions, geometry, MappingOptions, GeometryAdaptorConfig } from './base';
 
 export interface AreaGeometryOptions extends GeometryOptions {
   /** x 轴字段 */
@@ -19,8 +19,9 @@ export interface AreaGeometryOptions extends GeometryOptions {
 /**
  * area geometry 的配置处理
  * @param params
+ * @param config
  */
-export function area<O extends AreaGeometryOptions>(params: Params<O>): Params<O> {
+export function area<O extends AreaGeometryOptions>(params: Params<O>, config?: GeometryAdaptorConfig): Params<O> {
   const { options } = params;
   const { area, xField, yField, seriesField, smooth, tooltip } = options;
 
diff --git a/src/adaptor/geometries/base.ts b/src/adaptor/geometries/base.ts
@@ -59,6 +59,12 @@ export type Geometry = {
  */
 export type GeometryOptions = Geometry & Partial<Options>;
 
+/** geometry adaptor 配置 */
+export type GeometryAdaptorConfig = {
+  /** 是否允许 label 配置 */
+  label: boolean;
+};
+
 /**
  * 获得映射的字段列表
  * @param options
@@ -119,8 +125,12 @@ export function getMappingFunction(mappingFields: string[], func: (datum: Datum)
 /**
  * 通用 geometry 的配置处理的 adaptor
  * @param params
+ * @param config
  */
-export function geometry<O extends GeometryOptions>(params: Params<O>): Params<O> {
+export function geometry<O extends GeometryOptions>(
+  params: Params<O>,
+  config: GeometryAdaptorConfig = { label: false }
+): Params<O> {
   const { chart, options } = params;
   const {
     type,
@@ -220,15 +230,17 @@ export function geometry<O extends GeometryOptions>(params: Params<O>): Params<O
   /**
    * label 的映射
    */
-  if (label === false) {
-    geometry.label(false);
-  } else if (label) {
-    const { callback, fields, ...cfg } = label;
-    geometry.label({
-      fields: fields || [yField],
-      callback,
-      cfg: transformLabel(cfg),
-    });
+  if (config?.label) {
+    if (label === false) {
+      geometry.label(false);
+    } else if (label) {
+      const { callback, fields, ...cfg } = label;
+      geometry.label({
+        fields: fields || [yField],
+        callback,
+        cfg: transformLabel(cfg),
+      });
+    }
   }
 
   /**
diff --git a/src/adaptor/geometries/edge.ts b/src/adaptor/geometries/edge.ts
@@ -1,7 +1,7 @@
 import { Params } from '../../core/adaptor';
 import { getTooltipMapping } from '../../utils/tooltip';
 import { deepAssign } from '../../utils';
-import { geometry, MappingOptions, GeometryOptions } from './base';
+import { geometry, MappingOptions, GeometryOptions, GeometryAdaptorConfig } from './base';
 
 export interface EdgeGeometryOptions extends GeometryOptions {
   /** x 轴字段 */
@@ -17,8 +17,9 @@ export interface EdgeGeometryOptions extends GeometryOptions {
 /**
  * edge 的配置处理
  * @param params
+ * @param config
  */
-export function edge<O extends EdgeGeometryOptions>(params: Params<O>): Params<O> {
+export function edge<O extends EdgeGeometryOptions>(params: Params<O>, config?: GeometryAdaptorConfig): Params<O> {
   const { options } = params;
   const { edge, xField, yField, seriesField, tooltip } = options;
 
diff --git a/src/adaptor/geometries/interval.ts b/src/adaptor/geometries/interval.ts
@@ -3,7 +3,7 @@ import { isNil, isObject } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { deepAssign } from '../../utils';
 import { getTooltipMapping } from '../../utils/tooltip';
-import { GeometryOptions, MappingOptions, geometry } from './base';
+import { GeometryOptions, MappingOptions, geometry, GeometryAdaptorConfig } from './base';
 
 export interface IntervalGeometryOptions extends GeometryOptions {
   /** x 轴字段 */
@@ -74,7 +74,10 @@ function otherAdaptor<O extends IntervalGeometryOptions>(params: Params<O>): Par
   return params;
 }
 
-export function interval<O extends IntervalGeometryOptions>(params: Params<O>): Params<O> {
+export function interval<O extends IntervalGeometryOptions>(
+  params: Params<O>,
+  config?: GeometryAdaptorConfig
+): Params<O> {
   const { options } = params;
   const { xField, yField, interval, seriesField, tooltip } = options;
 
@@ -93,7 +96,8 @@ export function interval<O extends IntervalGeometryOptions>(params: Params<O>):
               ...interval,
             },
           },
-        })
+        }),
+        config
       )
     : params;
 
diff --git a/src/adaptor/geometries/line.ts b/src/adaptor/geometries/line.ts
@@ -3,7 +3,7 @@ import { Params } from '../../core/adaptor';
 import { ColorAttr, StyleAttr, SizeAttr, ShapeAttr } from '../../types';
 import { getTooltipMapping } from '../../utils/tooltip';
 import { deepAssign } from '../../utils';
-import { GeometryOptions, geometry, MappingOptions } from './base';
+import { GeometryOptions, geometry, MappingOptions, GeometryAdaptorConfig } from './base';
 
 export interface LineGeometryOptions extends GeometryOptions {
   /** x 轴字段 */
@@ -25,8 +25,9 @@ export interface LineGeometryOptions extends GeometryOptions {
 /**
  * line 辅助点的配置处理
  * @param params
+ * @param config
  */
-export function line<O extends LineGeometryOptions>(params: Params<O>): Params<O> {
+export function line<O extends LineGeometryOptions>(params: Params<O>, config?: GeometryAdaptorConfig): Params<O> {
   const { options } = params;
   const { line, stepType, xField, yField, seriesField, smooth, connectNulls, tooltip } = options;
 
@@ -49,7 +50,8 @@ export function line<O extends LineGeometryOptions>(params: Params<O>): Params<O
             ),
             args: { connectNulls },
           },
-        })
+        }),
+        config
       )
     : params;
 }
diff --git a/src/adaptor/geometries/point.ts b/src/adaptor/geometries/point.ts
@@ -1,7 +1,7 @@
 import { Params } from '../../core/adaptor';
 import { getTooltipMapping } from '../../utils/tooltip';
 import { deepAssign } from '../../utils';
-import { geometry, MappingOptions, GeometryOptions } from './base';
+import { geometry, MappingOptions, GeometryOptions, GeometryAdaptorConfig } from './base';
 
 export interface PointGeometryOptions extends GeometryOptions {
   /** x 轴字段 */
@@ -21,8 +21,9 @@ export interface PointGeometryOptions extends GeometryOptions {
 /**
  * point 辅助点的配置处理
  * @param params
+ * @param config
  */
-export function point<O extends PointGeometryOptions>(params: Params<O>): Params<O> {
+export function point<O extends PointGeometryOptions>(params: Params<O>, config?: GeometryAdaptorConfig): Params<O> {
   const { options } = params;
   const { point, xField, yField, seriesField, sizeField, shapeField, tooltip } = options;
 
diff --git a/src/adaptor/geometries/polygon.ts b/src/adaptor/geometries/polygon.ts
@@ -1,7 +1,7 @@
 import { Params } from '../../core/adaptor';
 import { getTooltipMapping } from '../../utils/tooltip';
 import { deepAssign } from '../../utils';
-import { geometry, MappingOptions, GeometryOptions } from './base';
+import { geometry, MappingOptions, GeometryOptions, GeometryAdaptorConfig } from './base';
 
 export interface PolygonGeometryOptions extends GeometryOptions {
   /** x 轴字段 */
@@ -17,8 +17,12 @@ export interface PolygonGeometryOptions extends GeometryOptions {
 /**
  * polygon 的配置处理
  * @param params
+ * @param config
  */
-export function polygon<O extends PolygonGeometryOptions>(params: Params<O>): Params<O> {
+export function polygon<O extends PolygonGeometryOptions>(
+  params: Params<O>,
+  config?: GeometryAdaptorConfig
+): Params<O> {
   const { options } = params;
   const { polygon, xField, yField, seriesField, tooltip } = options;
 
@@ -36,7 +40,8 @@ export function polygon<O extends PolygonGeometryOptions>(params: Params<O>): Pa
               ...polygon,
             },
           },
-        })
+        }),
+        config
       )
     : params;
 }
diff --git a/src/plots/dual-axes/util/geometry.ts b/src/plots/dual-axes/util/geometry.ts
@@ -30,7 +30,8 @@ export function drawSingleGeometry<O extends { xField: string; yField: string; g
             style: geometryOption.lineStyle,
           },
         },
-      })
+      }),
+      { label: true }
     );
     // 绘制点
     point(
@@ -79,7 +80,8 @@ export function drawSingleGeometry<O extends { xField: string; yField: string; g
             style: geometryOption.columnStyle,
           },
         },
-      })
+      }),
+      { label: true }
     );
   }
 
diff --git a/src/plots/multi-view/adaptor.ts b/src/plots/multi-view/adaptor.ts
@@ -52,10 +52,13 @@ function multiView(params: Params<MultiViewOptions>): Params<MultiViewOptions> {
 
     // 6. geometry
     each(geometries, (geometry: IGeometry) => {
-      const { ext } = geometryAdaptor({
-        chart: viewOfG2,
-        options: geometry,
-      });
+      const { ext } = geometryAdaptor(
+        {
+          chart: viewOfG2,
+          options: geometry,
+        },
+        { label: true }
+      );
 
       // adjust
       const { adjust } = geometry;
diff --git a/src/plots/sankey/adaptor.ts b/src/plots/sankey/adaptor.ts
@@ -71,20 +71,23 @@ function geometry(params: Params<SankeyOptions>): Params<SankeyOptions> {
   const nodeView = chart.createView();
   nodeView.data(nodesData);
 
-  polygon({
-    chart: nodeView,
-    options: {
-      xField: X_FIELD,
-      yField: Y_FIELD,
-      seriesField: COLOR_FIELD,
-      polygon: {
-        color,
-        style: nodeStyle,
+  polygon(
+    {
+      chart: nodeView,
+      options: {
+        xField: X_FIELD,
+        yField: Y_FIELD,
+        seriesField: COLOR_FIELD,
+        polygon: {
+          color,
+          style: nodeStyle,
+        },
+        label,
+        tooltip: false,
       },
-      label,
-      tooltip: false,
     },
-  });
+    { label: true }
+  );
 
   // edge view
   const edgeView = chart.createView();
