diff --git a/__tests__/integration/snapshots/static/temperature2LineGradientColorTranspose.svg b/__tests__/integration/snapshots/static/temperature2LineGradientColorTranspose.svg new file mode 100644 index 0000000000..e4ee459977 --- /dev/null +++ b/__tests__/integration/snapshots/static/temperature2LineGradientColorTranspose.svg @@ -0,0 +1,1367 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + October + + + + + + + 2012 + + + + + + + April + + + + + + + July + + + + + + + + + date + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 40 + + + + + + + 45 + + + + + + + 50 + + + + + + + 55 + + + + + + + 60 + + + + + + + 65 + + + + + + + 70 + + + + + + + + + value + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/integration/snapshots/static/temperatures3AreaBandGradientTranspose.svg b/__tests__/integration/snapshots/static/temperatures3AreaBandGradientTranspose.svg new file mode 100644 index 0000000000..9666cda633 --- /dev/null +++ b/__tests__/integration/snapshots/static/temperatures3AreaBandGradientTranspose.svg @@ -0,0 +1,1852 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2011 + + + + + + + April + + + + + + + July + + + + + + + October + + + + + + + 2012 + + + + + + + April + + + + + + + July + + + + + + + October + + + + + + + + + date + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 40 + + + + + + + 50 + + + + + + + 60 + + + + + + + 70 + + + + + + + 80 + + + + + + + + + low, high + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts index fb30c833dc..782de7d823 100644 --- a/__tests__/plots/static/index.ts +++ b/__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'; diff --git a/__tests__/plots/static/temperature2-line-gradient-color-transpose.ts b/__tests__/plots/static/temperature2-line-gradient-color-transpose.ts new file mode 100644 index 0000000000..e39a278577 --- /dev/null +++ b/__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', + }, + }; +} diff --git a/__tests__/plots/static/temperatures3-area-band-gradient-transpose.ts b/__tests__/plots/static/temperatures3-area-band-gradient-transpose.ts new file mode 100644 index 0000000000..dcdba11f45 --- /dev/null +++ b/__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', + }, + }; +} diff --git a/src/shape/area/curve.ts b/src/shape/area/curve.ts index 84826ce191..def38736e1 100644 --- a/src/shape/area/curve.ts +++ b/src/shape/area/curve.ts @@ -89,8 +89,12 @@ export const Curve: SC = (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 = (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]) diff --git a/src/shape/line/curve.ts b/src/shape/line/curve.ts index d229fb39b3..d2fabd7ad3 100644 --- a/src/shape/line/curve.ts +++ b/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 = (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 }), diff --git a/src/shape/utils.ts b/src/shape/utils.ts index 242f21cfa9..db39b148be 100644 --- a/src/shape/utils.ts +++ b/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({