feat(pie-label): 饼图标签允许关闭自动调整位置

1. layout处理adjustPosition
2. adjustOverlap出来遮挡隐藏问题

统一抽取到base中处理,子类复写

__tests__/unit/components/marker-point-spec.ts

@@ -0,0 +1,197 @@
+import { createDiv } from '../../utils/dom';
+import { Line } from '../../../src';
+import MarkerPoint from '../../../src/components/marker-point';
+
+const data = [
+  {
+    date: '2018/8/12',
+    value: 5,
+  },
+  {
+    date: '2018/8/12',
+    description: 'register',
+    value: 5,
+  },
+  {
+    date: '2018/8/12',
+    value: 5,
+  },
+  {
+    date: '2018/8/13',
+    value: 5,
+  },
+];
+
+describe('Marker Point', () => {
+  const div = createDiv('canvas');
+
+  const line = new Line(div, {
+    width: 400,
+    height: 400,
+    xField: 'date',
+    yField: 'value',
+    padding: [0, 0, 0, 0],
+    data,
+    point: {
+      visible: true,
+    },
+  });
+
+  line.render();
+
+  it('normal', () => {
+    const markerPoint = new MarkerPoint({
+      view: line.getLayer().view,
+      data: [data[0], data[1]],
+    });
+
+    // @ts-ignore
+    const points = markerPoint.points;
+    expect(markerPoint.container.getChildren().length).toBe(2);
+    // @ts-ignore
+    expect(points.length).toBe(2);
+    // @ts-ignore
+    expect(markerPoint.labels.length).toBe(0);
+
+    const shapes = line.getLayer().view.geometries[1].getShapes();
+    expect(shapes[0].getBBox().minX + shapes[0].getBBox().width / 2).toBe(
+      points[0].getBBox().minX + points[0].getBBox().width / 2
+    );
+  });
+
+  it('marker: custom image symbol', () => {
+    const markerPoint = new MarkerPoint({
+      view: line.getLayer().view,
+      data: [data[0], data[1]],
+    });
+
+    // @ts-ignore
+    const points = markerPoint.points;
+    expect(points[0].get('type')).not.toBe('image');
+
+    const markerPoint1 = new MarkerPoint({
+      view: line.getLayer().view,
+      data: [data[0], data[1]],
+      symbol: 'image://imgaeUrl',
+    });
+    // @ts-ignore
+    expect(markerPoint1.points[0].get('type')).toBe('image');
+  });
+
+  it('marker, offsetX & offsetY', () => {
+    const markerPoint = new MarkerPoint({
+      view: line.getLayer().view,
+      data: [data[0], data[1]],
+      offsetX: 10,
+      offsetY: -5,
+    });
+
+    // @ts-ignore
+    const points = markerPoint.points;
+
+    const shapes = line.getLayer().view.geometries[1].getShapes();
+    const shapeCenterPos = {
+      x: shapes[0].getBBox().minX + shapes[0].getBBox().width / 2,
+      y: shapes[0].getBBox().minY + shapes[0].getBBox().height / 2,
+    };
+    const pointCenterPos = {
+      x: points[0].getBBox().minX + points[0].getBBox().width / 2,
+      y: points[0].getBBox().minY + points[0].getBBox().height / 2,
+    };
+    expect(shapeCenterPos.x).not.toBe(pointCenterPos.x);
+    expect(shapeCenterPos.x + 10 /** offsetX */).toBe(pointCenterPos.x);
+    expect(shapeCenterPos.y - 5 /** offsetX */).toBe(pointCenterPos.y);
+  });
+
+  it('marker label & label style', () => {
+    const markerPoint = new MarkerPoint({
+      view: line.getLayer().view,
+      data: [data[0], data[1]],
+      label: {
+        visible: true,
+        field: 'description',
+        style: {
+          fill: 'red',
+        },
+      },
+    });
+
+    // @ts-ignore
+    const points = markerPoint.points;
+    // @ts-ignore
+    const labels = markerPoint.labels;
+    expect(labels.length).toBe(2);
+    expect(labels[1].attr('text')).toBe(data[1]['description']);
+    expect(labels[1].attr('fill')).toBe('red');
+    expect(points[0].getBBox().y).toBeGreaterThan(labels[0].getBBox().y);
+  });
+
+  it('label position & offsetX & offsetY', () => {
+    const markerPoint = new MarkerPoint({
+      view: line.getLayer().view,
+      data: [data[0], data[1]],
+      label: {
+        visible: true,
+        field: 'description',
+        position: 'bottom',
+        offsetX: 10,
+        offsetY: 5,
+      },
+    });
+    // @ts-ignore
+    const points = markerPoint.points;
+    // @ts-ignore
+    const labels = markerPoint.labels;
+    const labelBBox = labels[0].getBBox();
+    expect(points[0].getBBox().y).toBeLessThan(labelBBox.y);
+    expect(points[0].attr('x') + 10).toBe(labelBBox.minX + labelBBox.width / 2);
+    expect(points[0].attr('y') + 5).toBe(labelBBox.minY);
+  });
+
+  it('interaction & events', (done) => {
+    let clicked = false;
+    const markerPoint = new MarkerPoint({
+      view: line.getLayer().view,
+      data: [data[0], data[1]],
+      label: {
+        visible: true,
+        field: 'description',
+      },
+      events: {
+        click: () => (clicked = true),
+      },
+      style: {
+        normal: {
+          stroke: 'transparent',
+        },
+        selected: {
+          stroke: 'blue',
+          fill: 'red',
+        },
+        active: {
+          stroke: 'yellow',
+          fill: 'red',
+        },
+      },
+    });
+    // @ts-ignore
+    const points = markerPoint.points;
+    setTimeout(() => {
+      // @ts-ignore
+      markerPoint.container.emit(`${markerPoint.name}:mouseenter`, {
+        target: points[1],
+      });
+      expect(points[1].attr('stroke')).toBe('yellow');
+      expect(points[1].attr('fill')).toBe('red');
+      // @ts-ignore
+      markerPoint.container.emit(`${markerPoint.name}:click`, {
+        target: points[0],
+      });
+      expect(clicked).toBe(true);
+      expect(points[0].attr('stroke')).toBe('blue');
+      expect(points[0].attr('fill')).toBe('red');
+      expect(points[1].attr('stroke')).toBe('transparent');
+      done();
+    });
+  });
+});

__tests__/unit/plots/line/line-with-markerPoint-spec.ts

@@ -0,0 +1,111 @@
+import { Line } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+import { income as data } from '../../../data/income';
+import MarkerPoint from '../../../../src/components/marker-point';
+import { IShape } from '@antv/g2/lib/dependents';
+
+describe('Line plot with marker-point', () => {
+  const div = createDiv();
+  const linePlot = new Line(div, {
+    width: 600,
+    height: 600,
+    data,
+    xField: 'time',
+    yField: 'rate',
+    markerPoints: [
+      {
+        visible: true,
+        data: [{ time: '2013-06-13' }],
+      },
+    ],
+  });
+  linePlot.render();
+
+  it('normal', () => {
+    const layer = linePlot.getLayer();
+    // @ts-ignore
+    const markerPoints: MarkerPoint[] = layer.markerPoints;
+    expect(markerPoints.length).toBe(1);
+    // @ts-ignore
+    expect(markerPoints[0].points.length).toBe(1);
+    // @ts-ignore
+    expect(markerPoints[0].labels.length).toBe(0);
+  });
+
+  it('with 2 markerPoints component', () => {
+    linePlot.updateConfig({
+      markerPoints: [
+        {
+          visible: true,
+          data: [{ time: '2013-06-13' }],
+        },
+        {
+          visible: true,
+          data: [{ time: '2013-06-16' }],
+        },
+      ],
+    });
+    linePlot.render();
+    const layer = linePlot.getLayer();
+    // @ts-ignore
+    const markerPoints: MarkerPoint[] = layer.markerPoints;
+    expect(markerPoints.length).toBe(2);
+  });
+
+  it('custom markerPoints style', () => {
+    linePlot.updateConfig({
+      markerPoints: [
+        {
+          visible: true,
+          data: [{ time: '2013-06-13' }],
+          style: {
+            normal: {
+              fill: 'red',
+              stroke: '#000',
+              lineWidth: 1,
+            },
+          },
+        },
+      ],
+    });
+    linePlot.render();
+    const layer = linePlot.getLayer();
+    // @ts-ignore
+    const pointShapes: IShape[] = layer.markerPoints[0].points;
+    expect(pointShapes[0].attr('fill')).toBe('red');
+    expect(pointShapes[0].attr('stroke')).toBe('#000');
+    expect(pointShapes[0].attr('lineWidth')).toBe(1);
+  });
+
+  it('markerPoints with label', () => {
+    linePlot.updateConfig({
+      markerPoints: [
+        {
+          visible: true,
+          data: [{ time: '2013-06-13' }, { time: '2013-06-18' }],
+          style: {
+            normal: {
+              fill: 'red',
+              stroke: '#000',
+              lineWidth: 1,
+            },
+          },
+          label: {
+            visible: true,
+            formatter: () => 'hello',
+            style: {
+              fill: 'red',
+            },
+          },
+        },
+      ],
+    });
+    linePlot.render();
+    const layer = linePlot.getLayer();
+    // @ts-ignore
+    const labelShapes: IShape[] = layer.markerPoints[0].labels;
+    expect(labelShapes.length).toBe(2);
+    expect(labelShapes[0].attr('fill')).toBe('red');
+    expect(labelShapes[0].attr('text')).toBe('hello');
+  });
+});

docs/manual/plots/pie.en.md

@@ -289,7 +289,6 @@ color:(d)=>{
 | position | string | 位置，支持三种配置：<br />'left', 'middle', 'right' | left |
 | style | object | 样式：<br />- fontSize: number 文字大小<br />- fill: string 文字颜色<br />- stroke: string  描边颜色<br />- lineWidth: number 描边粗细<br />- lineDash: number 虚线描边<br />- opacity: number 透明度<br />- fillOpacity: number 填充透明度<br />- strokeOpacity: number 描边透明度<br /> | `{ fontSize: 12, fill: 'grey' }` |
 
-
 ### legend
 **可选**, *object*
 
@@ -332,6 +331,8 @@ color:(d)=>{
 | visible | boolean | 是否显示 | false |
 | type | string | label的类型<br />- inner label显示于扇形切片内<br />- outer label显示于饼外<br />- outer-center label呈圆形排布于饼外<br />- spider 蜘蛛布局label| inner |
 | autoRotate | boolean | 是否自动旋转 | false |
+| adjustPosition | boolean | 是否自动调整label位置(当label发生遮挡的时候，会自动进行调整) | true |
+| allowOverlap | boolean | 是否自动遮挡（当label发生遮挡的时候，会自动隐藏） | false |
 | formatter | function | 对文本标签内容进行格式化 | - |
 | offsetX | number | 在 label 位置的基础上再往 x 方向的偏移量 | - |
 | offsetY | number | 在 label 位置的基础上再往 y 方向的偏移量 | - |

docs/manual/plots/pie.zh.md

@@ -331,6 +331,8 @@ color:(d)=>{
 | visible | boolean | 是否显示 | false |
 | type | string | label的类型<br />- inner label显示于扇形切片内<br />- outer label显示于饼外<br />- outer-center label呈圆形排布于饼外<br />- spider 蜘蛛布局label| inner |
 | autoRotate | boolean | 是否自动旋转 | false |
+| adjustPosition | boolean | 是否自动调整label位置(当label发生遮挡的时候，会自动进行调整) | true |
+| allowOverlap | boolean | 是否自动遮挡（当label发生遮挡的时候，会自动隐藏） | false |
 | formatter | function | 对文本标签内容进行格式化 | - |
 | offsetX | number | 在 label 位置的基础上再往 x 方向的偏移量 | - |
 | offsetY | number | 在 label 位置的基础上再往 y 方向的偏移量 | - |