feat: add default label layout for line/area/column/bar (#2061)

* feat: add default label layout for line/area/column/bar * fix: cleanup unit test * fix: cleanup unit test
antvis · Dec 2, 2020 · 494438c · 494438c
1 parent 2e5b71b
commit 494438c
Show file tree

Hide file tree

Showing 8 changed files with 309 additions and 12 deletions.
diff --git a/__tests__/unit/plots/area/label-spec.ts b/__tests__/unit/plots/area/label-spec.ts
@@ -62,4 +62,50 @@ describe('area', () => {
 
     area.destroy();
   });
+
+  it('default layout, off', () => {
+    const area = new Area(createDiv('default layout, off'), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'type',
+      appendPadding: 10,
+    });
+
+    area.render();
+    // @ts-ignore
+    expect(area.chart.geometries[0].labelOption).toBeFalsy();
+
+    area.destroy();
+  });
+
+  it('default layout, on', () => {
+    const area = new Area(createDiv('default layout, on'), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'type',
+      appendPadding: 10,
+      animation: false,
+      label: {},
+    });
+
+    area.render();
+
+    // @ts-ignore
+    expect(area.chart.geometries[0].labelOption.cfg).toEqual({
+      layout: [
+        { type: 'limit-in-plot' },
+        { type: 'path-adjust-position' },
+        { type: 'point-adjust-position' },
+        { type: 'limit-in-plot', cfg: { action: 'hide' } },
+      ],
+    });
+
+    area.destroy();
+  });
 });
diff --git a/__tests__/unit/plots/bar/label-spec.ts b/__tests__/unit/plots/bar/label-spec.ts
@@ -209,4 +209,90 @@ describe('bar label', () => {
 
     bar.destroy();
   });
+
+  it('default layout, off', () => {
+    const plot = new Bar(createDiv('default layout, off'), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      yField: 'area',
+      xField: 'sales',
+      meta: {
+        sales: {
+          nice: true,
+          formatter: (v) => `${Math.floor(v / 10000)}万`,
+        },
+      },
+    });
+
+    plot.render();
+
+    expect(plot.chart.geometries[0].labelOption).toBeFalsy();
+
+    plot.destroy();
+  });
+
+  it('default layout, on', () => {
+    const plot = new Bar(createDiv('default layout, on'), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      yField: 'area',
+      xField: 'sales',
+      meta: {
+        sales: {
+          nice: true,
+          formatter: (v) => `${Math.floor(v / 10000)}万`,
+        },
+      },
+      label: {},
+    });
+
+    plot.render();
+
+    // @ts-ignore
+    expect(plot.chart.geometries[0].labelOption.cfg).toEqual({
+      position: 'left',
+      layout: [
+        { type: 'interval-adjust-position' },
+        { type: 'interval-hide-overlap' },
+        { type: 'adjust-color' },
+        { type: 'limit-in-plot', cfg: { action: 'hide' } },
+      ],
+    });
+
+    plot.destroy();
+  });
+
+  it('default layout, custom', () => {
+    const plot = new Bar(createDiv('default layout, custom'), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      yField: 'area',
+      xField: 'sales',
+      meta: {
+        sales: {
+          nice: true,
+          formatter: (v) => `${Math.floor(v / 10000)}万`,
+        },
+      },
+      label: {
+        layout: [
+          {
+            type: 'adjust-color',
+          },
+        ],
+      },
+    });
+
+    plot.render();
+    // @ts-ignore
+    expect(plot.chart.geometries[0].labelOption.cfg).toEqual({
+      layout: [{ type: 'adjust-color' }],
+      position: 'left',
+    });
+
+    plot.destroy();
+  });
 });
diff --git a/__tests__/unit/plots/column/label-spec.ts b/__tests__/unit/plots/column/label-spec.ts
@@ -207,4 +207,88 @@ describe('column label', () => {
 
     column.destroy();
   });
+
+  it('default layout, off', () => {
+    const plot = new Column(createDiv('default layout, off'), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+      meta: {
+        sales: {
+          nice: true,
+          formatter: (v) => `${Math.floor(v / 10000)}万`,
+        },
+      },
+    });
+
+    plot.render();
+
+    expect(plot.chart.geometries[0].labelOption).toBeFalsy();
+
+    plot.destroy();
+  });
+
+  it('default layout, on', () => {
+    const plot = new Column(createDiv('default layout, on'), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+      meta: {
+        sales: {
+          nice: true,
+          formatter: (v) => `${Math.floor(v / 10000)}万`,
+        },
+      },
+      label: {},
+    });
+
+    plot.render();
+
+    // @ts-ignore
+    expect(plot.chart.geometries[0].labelOption.cfg).toEqual({
+      layout: [
+        { type: 'interval-adjust-position' },
+        { type: 'interval-hide-overlap' },
+        { type: 'adjust-color' },
+        { type: 'limit-in-plot', cfg: { action: 'hide' } },
+      ],
+    });
+
+    plot.destroy();
+  });
+
+  it('default layout, custom', () => {
+    const plot = new Column(createDiv('default layout, custom'), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+      meta: {
+        sales: {
+          nice: true,
+          formatter: (v) => `${Math.floor(v / 10000)}万`,
+        },
+      },
+      label: {
+        layout: [
+          {
+            type: 'adjust-color',
+          },
+        ],
+      },
+    });
+
+    plot.render();
+    // @ts-ignore
+    expect(plot.chart.geometries[0].labelOption.cfg).toEqual({
+      layout: [{ type: 'adjust-color' }],
+    });
+
+    plot.destroy();
+  });
 });
diff --git a/__tests__/unit/plots/line/label-spec.ts b/__tests__/unit/plots/line/label-spec.ts
@@ -62,4 +62,49 @@ describe('line', () => {
 
     line.destroy();
   });
+
+  it('default layout, off', () => {
+    const line = new Line(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'type',
+      appendPadding: 10,
+    });
+
+    line.render();
+
+    expect(line.chart.geometries[0].labelOption).toBeFalsy();
+
+    line.destroy();
+  });
+
+  it('default layout, on', () => {
+    const line = new Line(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'type',
+      appendPadding: 10,
+      label: {},
+    });
+
+    line.render();
+
+    // @ts-ignore
+    expect(line.chart.geometries[0].labelOption.cfg).toEqual({
+      layout: [
+        { type: 'limit-in-plot' },
+        { type: 'path-adjust-position' },
+        { type: 'point-adjust-position' },
+        { type: 'limit-in-plot', cfg: { action: 'hide' } },
+      ],
+    });
+
+    line.destroy();
+  });
 });
diff --git a/src/plots/area/adaptor.ts b/src/plots/area/adaptor.ts
@@ -82,7 +82,15 @@ function label(params: Params<AreaOptions>): Params<AreaOptions> {
     areaGeometry.label({
       fields: [yField],
       callback,
-      cfg: transformLabel(cfg),
+      cfg: {
+        layout: [
+          { type: 'limit-in-plot' },
+          { type: 'path-adjust-position' },
+          { type: 'point-adjust-position' },
+          { type: 'limit-in-plot', cfg: { action: 'hide' } },
+        ],
+        ...transformLabel(cfg),
+      },
     });
   }
 

diff --git a/src/plots/bar/adaptor.ts b/src/plots/bar/adaptor.ts
@@ -14,6 +14,15 @@ export function adaptor(params: Params<BarOptions>) {
   // label of bar charts default position is left, if plot has label
   if (label && !label.position) {
     label.position = 'left';
+    // 配置默认的 label layout： 如果用户没有指定 layout 和 position， 则自动配置 layout
+    if (!label.layout) {
+      label.layout = [
+        { type: 'interval-adjust-position' },
+        { type: 'interval-hide-overlap' },
+        { type: 'adjust-color' },
+        { type: 'limit-in-plot', cfg: { action: 'hide' } },
+      ];
+    }
   }
 
   // 默认 legend 位置

diff --git a/src/plots/column/adaptor.ts b/src/plots/column/adaptor.ts
@@ -165,16 +165,27 @@ function label(params: Params<ColumnOptions>): Params<ColumnOptions> {
     geometry.label({
       fields: [yField],
       callback,
-      cfg: transformLabel(
-        isRange
-          ? {
-              content: (item: object) => {
-                return item[yField]?.join('-');
-              },
-              ...cfg,
-            }
-          : cfg
-      ),
+      cfg: {
+        // 配置默认的 label layout： 如果用户没有指定 layout 和 position， 则自动配置 layout
+        layout: cfg?.position
+          ? undefined
+          : [
+              { type: 'interval-adjust-position' },
+              { type: 'interval-hide-overlap' },
+              { type: 'adjust-color' },
+              { type: 'limit-in-plot', cfg: { action: 'hide' } },
+            ],
+        ...transformLabel(
+          isRange
+            ? {
+                content: (item: object) => {
+                  return item[yField]?.join('-');
+                },
+                ...cfg,
+              }
+            : cfg
+        ),
+      },
     });
   }
 

diff --git a/src/plots/line/adaptor.ts b/src/plots/line/adaptor.ts
@@ -125,7 +125,15 @@ function label(params: Params<LineOptions>): Params<LineOptions> {
     lineGeometry.label({
       fields: [yField],
       callback,
-      cfg: transformLabel(cfg),
+      cfg: {
+        layout: [
+          { type: 'limit-in-plot' },
+          { type: 'path-adjust-position' },
+          { type: 'point-adjust-position' },
+          { type: 'limit-in-plot', cfg: { action: 'hide' } },
+        ],
+        ...transformLabel(cfg),
+      },
     });
   }