fix(axis): auto hide when necessary (#5660)

* fix(axis): auto hide when necessary

* fix: ci

__tests__/plots/interaction/indices-line-chart-facet-brush-shared.ts

@@ -20,7 +20,7 @@ export async function indicesLineChartFacetBrushShared(): Promise<G2Spec> {
         type: 'line',
         frame: false,
         scale: { y: { nice: true, facet: false } },
-        axis: { y: { labelAutoRotate: false } },
+        axis: { y: { labelAutoHide: false } },
         encode: {
           x: 'Date',
           y: 'Close',

__tests__/plots/interaction/indices-line-chart-facet.ts

@@ -20,7 +20,7 @@ export async function indicesLineChartFacet(): Promise<G2Spec> {
         type: 'line',
         frame: false,
         scale: { y: { nice: true, facet: false } },
-        axis: { y: { labelAutoRotate: false } },
+        axis: { y: { labelAutoHide: false } },
         encode: {
           x: 'Date',
           y: 'Close',

__tests__/plots/static/alphabet-interval-rotate-padding.ts

@@ -0,0 +1,26 @@
+import { G2Spec } from '../../../src';
+
+export function alphabetIntervalRotatePadding(): G2Spec {
+  return {
+    type: 'interval',
+    transform: [{ type: 'sortX', by: 'y', reverse: true }],
+    data: {
+      type: 'fetch',
+      value: 'data/alphabet.csv',
+    },
+    encode: {
+      x: 'letter',
+      y: 'frequency',
+      color: 'steelblue',
+    },
+    axis: {
+      x: { labelFormatter: (d) => d + '0000', labelAutoRotate: false },
+    },
+    viewStyle: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
+  };
+}

__tests__/plots/static/alphabet-interval-sized-padding.ts

@@ -0,0 +1,27 @@
+import { G2Spec } from '../../../src';
+
+export function alphabetIntervalSizedPadding(): G2Spec {
+  return {
+    type: 'interval',
+    paddingBottom: 20,
+    transform: [{ type: 'sortX', by: 'y', reverse: true }],
+    data: {
+      type: 'fetch',
+      value: 'data/alphabet.csv',
+    },
+    encode: {
+      x: 'letter',
+      y: 'frequency',
+      color: 'steelblue',
+    },
+    axis: {
+      x: { labelFormatter: (d) => d + '0000' },
+    },
+    viewStyle: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
+  };
+}

__tests__/plots/static/barley-point-facet-rect-col-z-index.ts

@@ -46,7 +46,7 @@ export async function barleyPointFacetRectColZIndex(): Promise<G2Spec> {
               color: 'year',
               shape: 'hollow',
             },
-            axis: { y: { labelAutoRotate: false } },
+            axis: { y: { labelAutoHide: false } },
           },
           {
             type: 'lineY',

__tests__/plots/static/barley-point-facet-rect-col.ts

@@ -45,7 +45,7 @@ export async function barleyPointFacetRectCol(): Promise<G2Spec> {
           color: 'year',
           shape: 'hollow',
         },
-        axis: { y: { labelAutoRotate: false } },
+        axis: { y: { labelAutoHide: false } },
       },
     ],
   };

__tests__/plots/static/income-statement-by-region-interval-custom.ts

@@ -32,7 +32,6 @@ export function incomeStatementByRegionIntervalCustom() {
     data: incomeStatementByRegion,
     axis: {
       x: {
-        labelAutoRotate: false,
         labelAutoEllipsis: true,
         title: false,
         labelFontSize: 10,

__tests__/plots/static/index.ts

@@ -181,7 +181,7 @@ export { housePricePointShapes } from './house-price-point-shapes';
 export { aaplLineSlider } from './aapl-line-slider';
 export { aaplLineZIndex } from './aapl-line-z-index';
 export { aaplLineSliderTransposed } from './aapl-line-slider-transposed';
-export { indicesLineChartFacetAxis } from './indices-line-chart-fact-axis';
+export { indicesLineChartFacetAxis } from './indices-line-chart-facet-axis';
 export { indicesLineChartScaleRelations } from './indices-line-chart-scale-relations';
 export { aaplLineClip } from './aapl-line-clip';
 export { githubStarIntervalPalette } from './github-star-interval-palette';
@@ -295,3 +295,5 @@ export { intervalPointBullet } from './interval-point-bullet';
 export { intervalPointBullets } from './interval-point-bullets';
 export { intervalPointBulletDatas } from './interval-point-bullet-datas';
 export { mockIntervalLine } from './mock-interval-line';
+export { alphabetIntervalSizedPadding } from './alphabet-interval-sized-padding';
+export { alphabetIntervalRotatePadding } from './alphabet-interval-rotate-padding';

__tests__/plots/static/indices-line-chart-fact-axis.ts → __tests__/plots/static/indices-line-chart-facet-axis.ts

@@ -20,7 +20,7 @@ export async function indicesLineChartFacetAxis(): Promise<G2Spec> {
         frame: false,
         scale: { y: { nice: true, facet: false } },
         axis: {
-          y: { labelAutoRotate: false },
+          y: { labelAutoHide: false },
           x: ({ rowIndex }) =>
             rowIndex === 0
               ? { position: 'top' }

__tests__/plots/static/liquid-default.ts

@@ -12,3 +12,5 @@ export function liquidDefault(): G2Spec {
     },
   };
 }
+
+liquidDefault.maxError = 10;

__tests__/plots/static/month-interval-facet-rect.ts

@@ -28,19 +28,15 @@ export function monthIntervalFacetRect(): G2Spec {
     width: 800,
     data: mockData(),
     encode: { x: 'day', y: 'week' },
-    scale: {
-      x: { domain: days },
-    },
-    legend: {
-      color: { position: 'right', size: 50 },
-    },
+    scale: { x: { domain: days } },
+    legend: { color: { position: 'right', size: 50 } },
     paddingLeft: 40,
     paddingBottom: 40,
     children: [
       {
         type: 'interval',
         transform: [{ type: 'stackY' }],
-        axis: { x: { labelAutoRotate: false } },
+        axis: { x: { labelAutoHide: false }, y: { labelAutoHide: false } },
         encode: {
           x: 'activity',
           y: 'value',

src/runtime/component.ts

@@ -710,7 +710,13 @@ function computeAxisSize(
 
   // Get styles to be applied.
   const style = styleOf(component, position, theme);
-  const { tickLength = 0, labelSpacing = 0, titleSpacing = 0, ...rest } = style;
+  const {
+    tickLength = 0,
+    labelSpacing = 0,
+    titleSpacing = 0,
+    labelAutoRotate,
+    ...rest
+  } = style;
 
   // Compute Labels.
   const scale = createScale(component, library);
@@ -727,7 +733,9 @@ function computeAxisSize(
       // rotate 90 deg to display them.
       if (
         overflowX(scale, labelBBoxes, crossSize, crossPadding, tickFilter) &&
-        !labelTransform
+        !labelTransform &&
+        labelAutoRotate !== false &&
+        labelAutoRotate !== null
       ) {
         component.labelTransform = 'rotate(90)';
         component.size = maxLabelWidth + paddingTick;

src/runtime/layout.ts

@@ -311,7 +311,6 @@ function computePadding(
 
   for (const position of positions) {
     const key = `padding${capitalizeFirst(camelCase(position))}`;
-    const insetKey = `inset${capitalizeFirst(camelCase(position))}`;
     const components = positionComponents.get(position) || [];
     const value = layout[key];
     const defaultSizeOf = (d) => {
@@ -342,6 +341,11 @@ function computePadding(
       }
     };
 
+    const maybeHide = (d) => {
+      if (!d.type.startsWith('axis')) return;
+      if (d.labelAutoHide === undefined) d.labelAutoHide = true;
+    };
+
     const isHorizontal = position === 'bottom' || position === 'top';
 
     // !!!Note
@@ -356,6 +360,7 @@ function computePadding(
     // Specified padding.
     if (typeof value === 'number') {
       components.forEach(defaultSizeOf);
+      components.forEach(maybeHide);
     } else {
       // Compute padding dynamically.
       if (components.length === 0) {

src/theme/create.ts

@@ -236,15 +236,13 @@ export function create({
       labelDirection: 'negative',
       tickDirection: 'negative',
       titlePosition: 'top',
-      labelAutoRotate: false,
       titleSpacing: 12,
       labelSpacing: 4,
       titleTextBaseline: 'middle',
     },
     axisBottom: {
       gridDirection: 'negative',
       labelDirection: 'positive',
-      labelAutoRotate: false,
       tickDirection: 'positive',
       titlePosition: 'bottom',
       titleSpacing: 12,
@@ -253,7 +251,6 @@ export function create({
     },
     axisLeft: {
       gridDirection: 'positive',
-      labelAutoRotate: false,
       labelDirection: 'negative',
       labelSpacing: 4,
       tickDirection: 'negative',
@@ -269,7 +266,6 @@ export function create({
       labelSpacing: 4,
       tickDirection: 'positive',
       titlePosition: 'right',
-      labelAutoRotate: false,
       titleSpacing: 12,
       titleTextBaseline: 'top',
       titleDirection: 'vertical',