feat(label): add label transform feature exceedAdjust

__tests__/plots/static/index.ts

@@ -253,6 +253,7 @@ export { alphabetIntervalViewStyle } from './alphabet-interval-view-style';
 export { vennBasic } from './venn-basic';
 export { vennHollow } from './venn-hollow';
 export { stocksLineVarSize } from './stocks-line-var-size';
+export { stocksLineLabelExceedAdjust } from './stocks-line-label-exceed-adjust';
 export { barleyLineTrail } from './barley-line-trail';
 export { mockAxisX } from './mock-axisX';
 export { mockAxisY } from './mock-axisY';

__tests__/plots/static/stocks-line-label-exceed-adjust.ts

@@ -0,0 +1,26 @@
+import { G2Spec } from '../../../src';
+
+export function stocksLineLabelExceedAdjust(): G2Spec {
+  return {
+    type: 'line',
+    data: {
+      type: 'fetch',
+      value: 'data/stocks.csv',
+    },
+    transform: [{ type: 'groupX', y: 'mean' }],
+    encode: {
+      x: (d) => new Date(d.date).getFullYear(),
+      y: 'price',
+      color: 'symbol',
+    },
+    labels: [
+      {
+        text: 'price',
+        transform: [{ type: 'exceedAdjust' }],
+        style: {
+          fontSize: 10,
+        },
+      },
+    ],
+  };
+}

__tests__/unit/lib/core.spec.ts

@@ -162,6 +162,7 @@ import {
   ContrastReverse,
   OverlapHide,
   OverlapDodgeY,
+  ExceedAdjust,
 } from '../../../src/label-transform';
 
 describe('corelib', () => {
@@ -315,6 +316,7 @@ describe('corelib', () => {
       'composition.repeatMatrix': RepeatMatrix,
       'composition.facetCircle': FacetCircle,
       'composition.timingKeyframe': TimingKeyframe,
+      'labelTransform.exceedAdjust': ExceedAdjust,
       'labelTransform.overlapHide': OverlapHide,
       'labelTransform.overlapDodgeY': OverlapDodgeY,
       'labelTransform.overflowHide': OverflowHide,

__tests__/unit/lib/std.spec.ts

@@ -176,6 +176,7 @@ import {
   ContrastReverse,
   OverlapHide,
   OverlapDodgeY,
+  ExceedAdjust,
 } from '../../../src/label-transform';
 
 describe('stdlib', () => {
@@ -343,6 +344,7 @@ describe('stdlib', () => {
       'composition.timingKeyframe': TimingKeyframe,
       'labelTransform.overlapHide': OverlapHide,
       'labelTransform.overlapDodgeY': OverlapDodgeY,
+      'labelTransform.exceedAdjust': ExceedAdjust,
       'labelTransform.overflowHide': OverflowHide,
       'labelTransform.contrastReverse': ContrastReverse,
       'composition.geoView': GeoView,

site/docs/spec/label/exceedAdjust.en.md

@@ -0,0 +1,6 @@
+---
+title: exceedAdjust
+order: 1
+---
+
+<embed src="@/docs/spec/label/exceedAdjust.zh.md"></embed>

site/docs/spec/label/exceedAdjust.zh.md

@@ -0,0 +1,31 @@
+---
+title: exceedAdjust
+order: 1
+---
+
+`exceedAdjust` 会自动对标签做溢出检测和矫正，即当标签超出视图区域时，会对标签自动做反方向的位移。
+
+## 开始使用
+
+<img alt="contrastReverse" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*B2GwQbqkH_kAAAAAAAAAAAAADmJ7AQ/original" width="100%" style="max-width: 800px" />
+
+```ts
+chart
+  .line()
+  .encode('x', 'letter')
+  .encode('y', 'frequency')
+  .encode('color', 'type')
+  /* ... */
+  .label({
+    text: 'frequency',
+    transform: [
+      {
+        type: 'exceedAdjust',
+      },
+    ],
+  });
+```
+
+## 选项
+
+* 暂无

src/label-transform/exceedAdjust.ts

@@ -0,0 +1,61 @@
+import { DisplayObject } from '@antv/g';
+import { LabelTransformComponent as LLC } from '../runtime';
+import { ExceedAdjustLabel } from '../spec';
+import { Bounds } from '../utils/bounds';
+import { show } from '../utils/style';
+
+const adjustPosition = (target: Bounds, edge: Bounds) => {
+  const [[minEdgeX, minEdgeY], [maxEdgeX, maxEdgeY]] = edge;
+  const [[minX, minY], [maxX, maxY]] = target;
+
+  let changeX = 0,
+    changeY = 0;
+
+  // x-axis
+  if (minX < minEdgeX) {
+    changeX = minEdgeX - minX;
+  } else if (maxX > maxEdgeX) {
+    changeX = maxEdgeX - maxX;
+  }
+
+  // y-axis
+  if (minY < minEdgeY) {
+    changeY = minEdgeY - minY;
+  } else if (maxY > maxEdgeY) {
+    changeY = maxEdgeY - maxY;
+  }
+
+  return [changeX, changeY];
+};
+
+export type ExceedAdjustOptions = Omit<ExceedAdjustLabel, 'type'>;
+
+/**
+ * adjust the label when exceed the plot
+ */
+export const ExceedAdjust: LLC<ExceedAdjustOptions> = () => {
+  return (labels: DisplayObject[], { canvas }) => {
+    const { width, height } = canvas.getConfig();
+
+    labels.forEach((l) => {
+      show(l);
+      const { max, min } = l.getRenderBounds();
+      const [xMax, yMax] = max,
+        [xMin, yMin] = min;
+      const changeValue = adjustPosition(
+        [
+          [xMin, yMin],
+          [xMax, yMax],
+        ],
+        [
+          [0, 0],
+          [width, height],
+        ],
+      );
+      l.style.x += changeValue[0];
+      l.style.y += changeValue[1];
+    });
+
+    return labels;
+  };
+};

src/label-transform/index.ts

@@ -2,8 +2,10 @@ export { OverlapHide } from './overlapHide';
 export { OverlapDodgeY } from './overlapDodgeY';
 export { ContrastReverse } from './contrastReverse';
 export { OverflowHide } from './overflowHide';
+export { ExceedAdjust } from './exceedAdjust';
 
 export type { OverlapHideOptions } from './overlapHide';
 export type { OverlapDodgeYOptions } from './overlapDodgeY';
 export type { ContrastReverseOptions } from './contrastReverse';
 export type { OverflowHideOptions } from './overflowHide';
+export type { ExceedAdjustOptions } from './exceedAdjust';

src/lib/core.ts

@@ -161,6 +161,7 @@ import {
   OverflowHide,
   ContrastReverse,
   OverlapHide,
+  ExceedAdjust,
 } from '../label-transform';
 
 export function corelib() {
@@ -317,5 +318,6 @@ export function corelib() {
     'labelTransform.overlapDodgeY': OverlapDodgeY,
     'labelTransform.overflowHide': OverflowHide,
     'labelTransform.contrastReverse': ContrastReverse,
+    'labelTransform.exceedAdjust': ExceedAdjust,
   } as const;
 }

src/spec/labelTransform.ts

@@ -37,3 +37,7 @@ export type ContrastReverseLabelTransform = {
 export type OverflowHideLabelTransform = {
   type: 'overflowHide';
 };
+
+export type ExceedAdjustLabel = {
+  type: 'exceedAdjust';
+};