fix(axis): axis pos when update (#5275)

antvis · Jul 6, 2023 · 63f337b · 63f337b
1 parent 7ff0978
commit 63f337b
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 13 deletions.
diff --git a/__tests__/integration/snapshots/interaction/weather-line-legend-mark/step0.png b/__tests__/integration/snapshots/interaction/weather-line-legend-mark/step0.png
diff --git a/__tests__/integration/snapshots/interaction/weather-line-legend-mark/step1.png b/__tests__/integration/snapshots/interaction/weather-line-legend-mark/step1.png
diff --git a/__tests__/integration/snapshots/static/githubStarIntervalThemeAcademy.png b/__tests__/integration/snapshots/static/githubStarIntervalThemeAcademy.png
diff --git a/__tests__/plots/interaction/appl-line-slider-filter.ts b/__tests__/plots/interaction/appl-line-slider-filter.ts
@@ -37,7 +37,7 @@ export function dispatchValueChange(slider, values = [0.25, 0.75]) {
   );
 }
 
-aaplLineSliderFilter.maxError = 500;
+aaplLineSliderFilter.maxError = 600;
 
 aaplLineSliderFilter.steps = ({ canvas }) => {
   const { document } = canvas;

diff --git a/__tests__/plots/static/github-star-interval-theme-academy.ts b/__tests__/plots/static/github-star-interval-theme-academy.ts
@@ -4,9 +4,6 @@ import { githubStar } from '../../data/github-star';
 export function githubStarIntervalThemeAcademy(): G2Spec {
   return {
     type: 'interval',
-    width: 1000,
-    paddingBottom: 100,
-    paddingLeft: 160,
     data: {
       value: githubStar,
       transform: [{ type: 'sortBy', fields: [['star', true]] }],

diff --git a/src/runtime/component.ts b/src/runtime/component.ts
@@ -921,8 +921,12 @@ export function computeTitleBBox(
   const { title: styleTitle } = style;
   if (isFalsy(title) || isFalsy(styleTitle) || title === undefined) return null;
   const titleStyle = subObject(style, 'title');
+  const { direction, transform } = titleStyle;
   const titleText = Array.isArray(title) ? title.join(',') : title;
-  const titleBBox = computeLabelSize(titleText, titleStyle);
+  const titleBBox = computeLabelSize(titleText, {
+    ...titleStyle,
+    transform: transform || direction === 'vertical' ? 'rotate(-90)' : '',
+  });
   return titleBBox;
 }
 

diff --git a/src/runtime/plot.ts b/src/runtime/plot.ts
@@ -1,7 +1,7 @@
 import { Vector2 } from '@antv/coord';
 import { DisplayObject, IAnimation as GAnimation, Rect } from '@antv/g';
 import { deepMix, upperFirst } from '@antv/util';
-import { group } from 'd3-array';
+import { group, groups } from 'd3-array';
 import { format } from 'd3-format';
 import { mapObject } from '../utils/array';
 import { ChartEvent } from '../utils/event';
@@ -799,9 +799,15 @@ async function plotView(
 
   // Render components.
   // @todo renderComponent return ctor and options.
+  // Key for each type of component.
+  // Index them grouped by position.
+  for (const [, C] of groups(components, (d) => `${d.type}-${d.position}`)) {
+    C.forEach((d, i) => (d.index = i));
+  }
+
   const componentsTransitions = selection
     .selectAll(className(COMPONENT_CLASS_NAME))
-    .data(components, (d, i) => `${d.type}-${i}`)
+    .data(components, (d) => `${d.type}-${d.position}-${d.index}`)
     .join(
       (enter) =>
         enter

diff --git a/src/theme/academy.ts b/src/theme/academy.ts
@@ -272,7 +272,7 @@ export const Academy: TC<AcademyOptions> = (options) => {
       titlePosition: 'left',
       titleSpacing: 4,
       titleTextBaseline: 'middle',
-      titleTransform: `translate(50%, 0) rotate(-90) translate(0, -50%)`,
+      titleDirection: 'vertical',
       titleTransformOrigin: 'center',
     },
     axisRight: {
@@ -283,7 +283,7 @@ export const Academy: TC<AcademyOptions> = (options) => {
       titlePosition: 'right',
       titleSpacing: 0,
       titleTextBaseline: 'top',
-      titleTransform: `translate(-50%, 0) rotate(-90)`,
+      titleDirection: 'vertical',
       titleTransformOrigin: 'center',
     },
     axisLinear: {

diff --git a/src/theme/classic.ts b/src/theme/classic.ts
@@ -274,7 +274,7 @@ export const Classic: TC<ClassicOptions> = (options) => {
       titlePosition: 'left',
       titleSpacing: 10,
       titleTextBaseline: 'middle',
-      titleTransform: `translate(50%, 0) rotate(-90)`,
+      titleDirection: 'vertical',
       titleTransformOrigin: 'center',
     },
     axisRight: {
@@ -286,7 +286,7 @@ export const Classic: TC<ClassicOptions> = (options) => {
       titlePosition: 'right',
       titleSpacing: 0,
       titleTextBaseline: 'top',
-      titleTransform: `translate(-50%, 0) rotate(-90)`,
+      titleDirection: 'vertical',
       titleTransformOrigin: 'center',
     },
     axisLinear: {

diff --git a/src/theme/classicDark.ts b/src/theme/classicDark.ts
@@ -272,7 +272,7 @@ export const ClassicDark: TC<ClassicDarkOptions> = (options) => {
       titlePosition: 'left',
       titleSpacing: 10,
       titleTextBaseline: 'middle',
-      titleTransform: `translate(50%, 0) rotate(-90)`,
+      titleDirection: 'vertical',
       titleTransformOrigin: 'center',
     },
     axisRight: {
@@ -283,7 +283,7 @@ export const ClassicDark: TC<ClassicDarkOptions> = (options) => {
       titlePosition: 'right',
       titleSpacing: 0,
       titleTextBaseline: 'top',
-      titleTransform: `translate(-50%, 0) rotate(-90)`,
+      titleDirection: 'vertical',
       titleTransformOrigin: 'center',
     },
     axisLinear: {