fix(axis): labelAutoHide (#5502)

__tests__/plots/static/alphabet-interval-axis-options.ts

@@ -0,0 +1,50 @@
+import { G2Spec } from '../../../src';
+
+export function alphabetIntervalAxisOptions(): G2Spec {
+  return {
+    type: 'interval',
+    data: {
+      type: 'fetch',
+      value: 'data/alphabet.csv',
+    },
+    encode: {
+      x: 'letter',
+      y: 'frequency',
+    },
+    axis: {
+      y: {
+        // Title
+        title: 'Frequency',
+        titleSpacing: 30,
+        titleFill: 'steelblue',
+
+        // Line
+        line: true,
+        arrow: true,
+        lineExtension: [-30, -40],
+        lineArrowOffset: 30,
+        lineArrowSize: 20,
+        lineLineWidth: 10,
+
+        // Tick
+        tickLength: 20,
+        tickFilter: (_, i) => i % 3 !== 0,
+
+        // Label
+        labelFormatter: '.0%',
+
+        // Grid
+        gridLineDash: null,
+        gridStroke: 'red',
+        gridStrokeWidth: 5,
+        gridAreaFill: '#eee',
+      },
+      x: {
+        title: 'Letter',
+        labelFormatter: (d) => d.repeat(3),
+        labelFontSize: 30,
+        labelSpacing: 30,
+      },
+    },
+  };
+}

__tests__/plots/static/index.ts

@@ -281,3 +281,5 @@ export { alphabetIntervalTitleAuto } from './alphabet-interval-title-auto';
 export { alphabetIntervalAutoPaddingLabelHide } from './alphabet-interval-auto-padding-label-hide';
 export { settleWeatherCellLineXY } from './seattle-weather-cell-lineXY';
 export { alphabetIntervalFunnelConnectorLabel } from './alphabet-interval-funnel-connector-label';
+export { alphabetIntervalAxisOptions } from './alphabet-interval-axis-options';
+export { profitIntervalAxisTransform } from './profit-interval-axis-transform';

__tests__/plots/static/profit-interval-axis-transform.ts

@@ -0,0 +1,48 @@
+import { G2Spec } from '../../../src';
+
+export function profitIntervalAxisTransform(): G2Spec {
+  return {
+    type: 'interval',
+    data: [
+      { month: 'JJan.Jan.an.', profit: 387264, start: 0, end: 387264 },
+      { month: 'Feb.', profit: 772096, start: 387264, end: 1159360 },
+      { month: 'MJan.Jan.ar.', profit: 638075, start: 1159360, end: 1797435 },
+      { month: 'AJan.Jan.pr.', profit: -211386, start: 1797435, end: 1586049 },
+      { month: 'May', profit: -138135, start: 1586049, end: 1447914 },
+      { month: 'JJan.Jan.un', profit: -267238, start: 1447914, end: 1180676 },
+      { month: 'Jul.', profit: 431406, start: 1180676, end: 1612082 },
+      { month: 'Aug.', profit: 363018, start: 1612082, end: 1975100 },
+      { month: 'Sep.', profit: -224638, start: 1975100, end: 1750462 },
+      {
+        month: 'OcJan.Jan.Jan.t.',
+        profit: -299867,
+        start: 1750462,
+        end: 1450595,
+      },
+      {
+        month: 'NJan.Jan.Jan.ov.',
+        profit: 607365,
+        start: 1450595,
+        end: 2057960,
+      },
+      { month: 'Dec.', profit: 1106986, start: 2057960, end: 3164946 },
+      { month: 'ToJan.Jan.tal', start: 0, end: 3164946 },
+    ],
+    encode: {
+      x: 'month',
+      y: ['end', 'start'],
+      color: (d) =>
+        d.month === 'Total' ? 'Total' : d.profit > 0 ? 'Increase' : 'Decrease',
+    },
+    axis: {
+      x: {
+        labelAutoRotate: {
+          optionalAngles: [60],
+          recoverWhenFailed: false,
+        },
+        size: 120,
+      },
+      y: { labelFormatter: '~s' },
+    },
+  };
+}

src/component/axis.ts

@@ -241,7 +241,7 @@ function inferLabelOverlap(transform = [], style: Record<string, any>) {
 
   const addToTransforms = (overlap, state) => {
     if (state) {
-      finalTransforms.push(overlap);
+      finalTransforms.push({ ...overlap, ...state });
     }
   };
 

src/theme/light.ts

@@ -278,14 +278,15 @@ export const Light: TC<LightOptions> = (options) => {
       labelDirection: 'negative',
       tickDirection: 'negative',
       titlePosition: 'top',
+      labelAutoRotate: false,
       titleSpacing: 12,
       labelSpacing: 4,
       titleTextBaseline: 'middle',
     },
     axisBottom: {
       gridDirection: 'negative',
       labelDirection: 'positive',
-      labelAutoRotate: true,
+      labelAutoRotate: false,
       tickDirection: 'positive',
       titlePosition: 'bottom',
       titleSpacing: 12,