fix: 水平圆角柱状图展示有错误-#4761 (#4764)

Co-authored-by: wuding.why <wuding.why@alibaba-inc.com>

.gitignore

@@ -32,3 +32,5 @@ __tests__/integration/snapshots/**/*-diff.*
 # Website cache byb dumi
 site/.dumi/tmp
 site/.dumi/tmp-production
+
+.vscode

__tests__/plots/static/index.ts

@@ -76,6 +76,7 @@ export { settleWeatherCellGrouped } from './seattle-weather-cell-grouped';
 export { commitsPointGrouped } from './commits-point-grouped';
 export { penguinsPointLink } from './penguins-point-link';
 export { penguinsIntervalGroupColor } from './penguins-interval-group-color';
+export { penguinsIntervalTransposeGroupColor } from './penguins-interval-transpose-group-color';
 export { penguinsPointRepeatMatrix } from './penguins-point-repeat-matrix';
 export { anscombePointFacetRectRow } from './anscombe-point-facet-rect-row';
 export { barleyPointFacetRectCol } from './barley-point-facet-rect-col';

__tests__/plots/static/penguins-interval-transpose-group-color.ts

@@ -0,0 +1,26 @@
+import { G2Spec } from '../../../src';
+
+export function penguinsIntervalTransposeGroupColor(): G2Spec {
+  return {
+    type: 'interval',
+    data: {
+      type: 'fetch',
+      value: 'data/penguins.csv',
+    },
+    height: 120,
+    coordinate: { transform: [{ type: 'transpose' }] },
+    transform: [
+      { type: 'groupColor', y: 'count' },
+      { type: 'stackY' },
+      { type: 'normalizeY' },
+    ],
+    axis: { y: { labelFormatter: '.0%' } },
+    encode: {
+      color: 'sex',
+    },
+    labels: [{ text: 'sex', position: 'inside' }],
+    style: {
+      radius: 10,
+    },
+  };
+}

src/shape/interval/color.ts

@@ -134,12 +134,27 @@ export const Color: SC<ColorOptions> = (options) => {
 
     // Extended style, which is not supported by native g shape,
     // should apply at first.
+    const standardDirRadius = [
+      first ? radiusTopLeft : innerRadiusTopLeft,
+      first ? radiusTopRight : innerRadiusTopRight,
+      last ? radiusBottomRight : innerRadiusBottomRight,
+      last ? radiusBottomLeft : innerRadiusBottomLeft,
+    ];
+    const standardDir = [
+      'radiusTopLeft',
+      'radiusTopRight',
+      'radiusBottomRight',
+      'radiusBottomLeft',
+    ];
+    // Transpose: rotate it clockwise by 90.
+    if (isTranspose(coordinate)) {
+      standardDir.push(standardDir.shift());
+    }
     const extendedStyle = {
       radius,
-      radiusTopLeft: first ? radiusTopLeft : innerRadiusTopLeft,
-      radiusTopRight: first ? radiusTopRight : innerRadiusTopRight,
-      radiusBottomRight: last ? radiusBottomRight : innerRadiusBottomRight,
-      radiusBottomLeft: last ? radiusBottomLeft : innerRadiusBottomLeft,
+      ...Object.fromEntries(
+        standardDir.map((d, i) => [d, standardDirRadius[i]]),
+      ),
       inset,
       insetLeft,
       insetRight,