fix: fix the transpose color gradient render (#5809)

* fix: fix the gradient color render when set transpose

* fix: fix the render deg

* fix: add test case and snapshot

---------

Co-authored-by: root <[email protected]>

__tests__/plots/static/index.ts

@@ -79,6 +79,7 @@ export { temperatureCompareAreaDifference } from './temperature-compare-area-dif
 export { populationByStateAreaNormalizeStacked } from './population-by-state-area-normalize-stacked';
 export { temperature1LineVarColor } from './temperature1-line-var-color';
 export { temperature2LineGradientColor } from './temperature2-line-gradient-color';
+export { temperature2LineGradientColorTranspose } from './temperature2-line-gradient-color-transpose';
 export { temperature2LineThreshold } from './temperature2-line-threshold';
 export { aapl2CandlestickChart } from './aapl2-candlestick-chart';
 export { tranLineMultiAxes } from './train-line-multi-axes';
@@ -89,6 +90,7 @@ export { seasonalWeatherAreaRadial } from './seasonal-weather-area-radial';
 export { worldHistoryIntervalMultiTickCount } from './world-history-interval-multi-tick-count';
 export { stocksAreaGradient } from './stocks-area-gradient';
 export { temperatures3AreaBandGradient } from './temperatures3-area-band-gradient';
+export { temperatures3AreaBandGradientTranspose } from './temperatures3-area-band-gradient-transpose';
 export { vaccinesCellScaleRelation } from './vaccines-cell-scale-relation';
 export { settleWeatherCellGrouped } from './seattle-weather-cell-grouped';
 export { commitsPointGrouped } from './commits-point-grouped';

__tests__/plots/static/temperature2-line-gradient-color-transpose.ts

@@ -0,0 +1,31 @@
+import { G2Spec } from '../../../src';
+
+export function temperature2LineGradientColorTranspose(): G2Spec {
+  return {
+    type: 'line',
+    height: 1000,
+    data: {
+      type: 'fetch',
+      value: 'data/temperatures2.csv',
+    },
+    scale: {
+      y: { nice: true },
+      x: { utc: true },
+      color: { palette: 'turbo' },
+    },
+    legend: false,
+    coordinate: { transform: [{ type: 'transpose' }] },
+    encode: {
+      x: 'date',
+      y: 'value',
+      shape: 'hvh',
+      color: 'value',
+      series: () => undefined,
+    },
+    style: {
+      gradient: 'y',
+      lineWidth: 2,
+      lineJoin: 'round',
+    },
+  };
+}

__tests__/plots/static/temperatures3-area-band-gradient-transpose.ts

@@ -0,0 +1,27 @@
+import { G2Spec } from '../../../src';
+
+export function temperatures3AreaBandGradientTranspose(): G2Spec {
+  return {
+    type: 'area',
+    height: 900,
+    data: {
+      type: 'fetch',
+      value: 'data/temperatures3.csv',
+    },
+    scale: {
+      color: { palette: 'reds' },
+    },
+    coordinate: { transform: [{ type: 'transpose' }] },
+    legend: false,
+    encode: {
+      x: 'date',
+      y: ['low', 'high'],
+      shape: 'hvh',
+      color: (d) => d.high - d.low,
+      series: () => undefined,
+    },
+    style: {
+      gradient: 'x',
+    },
+  };
+}

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({