Merge pull request #409 from antvis/feat-custom-auto-rotate

feat: 支持lark的自定义多角度axis label auto rotate
antvis · Dec 23, 2019 · 6f991b6 · 6f991b6
2 parents 2d8d068 + 8ecc926
commit 6f991b6
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g2plot",
-  "version": "0.11.11",
+  "version": "0.11.12",
   "description": "G2 Plot, a market of plots built with the Grammar of Graphics'",
   "author": "https://github.com/orgs/antvis/people",
   "main": "lib/index.js",
@@ -50,7 +50,7 @@
     }
   },
   "dependencies": {
-    "@antv/g2": "~3.6.0-beta.9",
+    "@antv/g2": "~3.6.0-beta.10",
     "@antv/gui": "~0.1.0",
     "@antv/g-gesture": "~0.1.0",
     "fecha": "~3.0.3",
@@ -60,7 +60,7 @@
   },
   "peerDependencies": {
     "@antv/g": "~3.5.0-beta.1",
-    "@antv/component": "~0.4.0-beta.7",
+    "@antv/component": "~0.4.0-beta.8",
     "@antv/dom-util": "~2.0.1",
     "@antv/event-emitter": "^0.1.1",
     "@antv/matrix-util": "~2.0.2",

diff --git a/src/base/controller/padding.ts b/src/base/controller/padding.ts
@@ -1,7 +1,9 @@
 import { BBox, Element } from '@antv/g';
 import { DataPointType } from '@antv/g2/lib/interface';
+import { View } from '@antv/g2';
 import * as _ from '@antv/util';
 import ViewLayer from '../view-layer';
+import { MarginPadding } from '../../interface/types';
 
 interface ControllerConfig {
   plot: ViewLayer;
@@ -114,12 +116,13 @@ export default class PaddingController {
     if (minY === viewRange.minY) {
       minY = 0;
     }
-    const padding = [
+    const padding: MarginPadding = [
       0 - minY + this.bleeding[0], // 上面超出的部分
       box.maxX - maxX + this.bleeding[1], // 右边超出的部分
       box.maxY - maxY + this.bleeding[2], // 下边超出的部分
       0 - box.minX + this.bleeding[3],
     ];
+    this.adjustAxisPadding(view, padding);
     return padding;
   }
 
@@ -233,4 +236,24 @@ export default class PaddingController {
       target[i] += source[i];
     }
   }
+
+  private adjustAxisPadding(view: View, padding: MarginPadding) {
+    // 3.6.x Axis组件的 autoRotate padding 修正
+    const xAxis = view.get('axisController').axes[0];
+    if (!xAxis || !xAxis.get('autoRotateLabel') || !xAxis.getOffsetByRotateAngle) {
+      return;
+    }
+    const labelRenderer = xAxis.get('labelRenderer');
+    const labels = labelRenderer.getLabels();
+    const curOffset = xAxis.getOffsetByRotateAngle(xAxis.get('autoRotateAngle'));
+    const curTotalWidth = Math.abs(xAxis.get('end').x - xAxis.get('start').x);
+    const curAvgWidth = Math.abs(labels[1].attr('x') - labels[0].attr('x'));
+    const newTotalWidth = curTotalWidth - padding[1] - padding[3];
+    const newAvgWidth = (curAvgWidth * newTotalWidth) / curTotalWidth;
+    const newOffset = xAxis.getOffsetByRotateAngle(xAxis.getAutoRotateAngleByAvgWidth(newAvgWidth));
+
+    if (newOffset > curOffset) {
+      padding[2] += newOffset - curOffset;
+    }
+  }
 }
diff --git a/src/interface/config.ts b/src/interface/config.ts
@@ -46,7 +46,7 @@ export interface IBaseAxis {
     visible?: boolean;
     style?: IStyleConfig | ((text: string, idx: number, count: number) => IStyleConfig);
   };
-  autoRotateLabel?: boolean; // 当 label 过长发生遮挡时是否自动旋转坐标轴文本，默认为 true
+  autoRotateLabel?: boolean | number[]; // 当 label 过长发生遮挡时是否自动旋转坐标轴文本，默认为 true
   autoHideLabel?: boolean; // 当 label 存在遮挡时，是否自动隐藏被遮挡的坐标轴文本，默认为 false
   autoRotateTitle?: boolean;
   label?: {