fix(axis): order of ticks for transposed x axis

antvis · Apr 26, 2023 · 8736eea · 8736eea
1 parent e209b6a
commit 8736eea
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 7 deletions.
diff --git a/...egration/snapshots/interaction/points-point-regression-quad-transpose/step0.png b/...egration/snapshots/interaction/points-point-regression-quad-transpose/step0.png
diff --git a/__tests__/integration/snapshots/static/aaplAreaMissingDataTranspose.png b/__tests__/integration/snapshots/static/aaplAreaMissingDataTranspose.png
diff --git a/__tests__/integration/snapshots/static/aaplLineBasicTranspose.png b/__tests__/integration/snapshots/static/aaplLineBasicTranspose.png
diff --git a/__tests__/integration/snapshots/static/aaplLineSliderTransponsed.png b/__tests__/integration/snapshots/static/aaplLineSliderTransponsed.png
diff --git a/__tests__/plots/static/aapl-line-basic-transpose.ts b/__tests__/plots/static/aapl-line-basic-transpose.ts
@@ -0,0 +1,21 @@
+import { G2Spec } from '../../../src';
+
+export function aaplLineBasicTranspose(): G2Spec {
+  return {
+    type: 'line',
+    height: 640,
+    width: 480,
+    paddingLeft: 50,
+    data: {
+      type: 'fetch',
+      value: 'data/aapl.csv',
+    },
+    coordinate: { transform: [{ type: 'transpose' }] },
+    encode: {
+      x: 'date',
+      y: 'close',
+    },
+  };
+}
+
+aaplLineBasicTranspose.maxError = 100;
diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts
@@ -198,3 +198,4 @@ export { gaugeCustomShape } from './gauge-custom-shape';
 export { scoreByItemAreaRadarSize } from './score-by-item-area-radar-size';
 export { mockPointLogTicks } from './mock-point-log-ticks';
 export { alphabetIntervalLabelRotate } from './alphabet-interval-label-rotate';
+export { aaplLineBasicTranspose } from './aapl-line-basic-transpose';
diff --git a/src/component/axis.ts b/src/component/axis.ts
@@ -153,21 +153,26 @@ function getData(
     defaultTickFormatter || scale.getFormatter?.() || toString;
   const applyInset = createInset(position, coordinate);
   const applyFisheye = createFisheye(position, coordinate);
+  const isHorizontal = (position) =>
+    ['top', 'bottom', 'center', 'outer'].includes(position);
+
+  // @todo GUI should consider the overlap problem for the first
+  // and label of arc axis.
   if (isPolar(coordinate) || isTranspose(coordinate)) {
-    const axisTicks = filteredTicks.map((d, i, array) => {
+    return filteredTicks.map((d, i, array) => {
       const offset = scale.getBandWidth?.(d) / 2 || 0;
       const tick = applyInset(scale.map(d) + offset);
+      const shouldReverse =
+        (isRadial(coordinate) && position === 'center') ||
+        (isTranspose(coordinate) &&
+          scale.getTicks?.() &&
+          isHorizontal(position));
       return {
-        value: isTranspose(coordinate) && scale.getTicks?.() ? 1 - tick : tick,
+        value: shouldReverse ? 1 - tick : tick,
         label: toString(labelFormatter(prettyNumber(d), i, array)),
         id: String(i),
       };
     });
-    // @todo GUI should consider the overlap problem for the first
-    // and label of arc axis.
-    return isRadial(coordinate) && position === 'center'
-      ? reverseTicks(axisTicks)
-      : axisTicks;
   }
 
   return filteredTicks.map((d, i, array) => {