fix: fix the transpose color gradient render

src/shape/area/curve.ts

@@ -89,8 +89,12 @@ export const Curve: SC<CurveOptions> = (options, context) => {
       seriesX: sx,
       seriesY: sy,
     } = value;
+    const tpShape = isTranspose(coordinate);
     const transform = getTransform(coordinate, value);
-    const fill = gradient && sc ? computeGradient(sc, sx, sy, gradient) : color;
+    const fill =
+      gradient && sc
+        ? computeGradient(sc, sx, sy, gradient, undefined, tpShape)
+        : color;
 
     const finalStyle = {
       ...defaults,
@@ -119,7 +123,7 @@ export const Curve: SC<CurveOptions> = (options, context) => {
       const areaPath = (points) => {
         const Y1 = points.slice(0, points.length / 2);
         const Y0 = points.slice(points.length / 2);
-        return isTranspose(coordinate)
+        return tpShape
           ? area()
               .y((_, idx) => Y1[idx][1])
               .x1((_, idx) => Y1[idx][0])

src/shape/line/curve.ts

@@ -1,6 +1,6 @@
 import { line, lineRadial, CurveFactory, CurveFactoryLineOnly } from 'd3-shape';
 import { Vector2 } from '@antv/coord';
-import { isPolar } from '../../utils/coordinate';
+import { isPolar, isTranspose } from '../../utils/coordinate';
 import { select } from '../../utils/selection';
 import { ShapeComponent as SC } from '../../runtime';
 import { applyStyle, computeGradient, getTransform } from '../utils';
@@ -89,11 +89,14 @@ export const Curve: SC<CurveOptions> = (options, context) => {
       seriesX: sx,
       seriesY: sy,
     } = value;
+
+    const transform = getTransform(coordinate, value);
+    const tpShape = isTranspose(coordinate);
     const stroke =
       gradient && sc
-        ? computeGradient(sc, sx, sy, gradient, gradientColor)
+        ? computeGradient(sc, sx, sy, gradient, gradientColor, tpShape)
         : color;
-    const transform = getTransform(coordinate, value);
+
     const finalStyle = {
       ...rest,
       ...(stroke && { stroke }),

src/shape/utils.ts

@@ -118,10 +118,29 @@ export function computeGradient(
   Y: number[],
   from: string | boolean = 'y',
   mode: 'between' | 'start' | 'end' = 'between',
+  tpShape = false,
 ): string {
+  // The angles of gradients rendering are varies when 'from' and 'tpShape' are different.
+  const getTheta = (from: string | boolean, tpShape: boolean) => {
+    if (from === 'y' || from === true) {
+      if (tpShape) {
+        return 180;
+      } else {
+        return 90;
+      }
+    } else {
+      if (tpShape) {
+        return 90;
+      } else {
+        return 0;
+      }
+    }
+  };
+
   const P = from === 'y' || from === true ? Y : X;
-  const theta = from === 'y' || from === true ? 90 : 0;
+  const theta = getTheta(from, tpShape);
   const I = indexOf(P);
+
   const [min, max] = extent(I, (i) => P[i]);
   // This need to improve for non-uniform distributed colors.
   const p = new Linear({