fix(line): series gradient (#5225)

* fix(line): series gradient * docs(line): add demo for series gradient * fix: ci
antvis · Jun 25, 2023 · 07cc02a · 07cc02a
1 parent 567717b
commit 07cc02a
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 3 deletions.
diff --git a/__tests__/integration/snapshots/static/stocksLineSeriesGradient.png b/__tests__/integration/snapshots/static/stocksLineSeriesGradient.png
diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts
@@ -262,3 +262,4 @@ export { mockLegendColor } from './mock-legend-color';
 export { mockLegendColorSize } from './mock-legend-color-size';
 export { weatherLineMultiAxesLegend } from './weather-line-multi-axes-legend';
 export { population2015IntervalDonutTextAnnotationInset } from './population2015-interval-donut-text-annotation-inset';
+export { stocksLineSeriesGradient } from './stocks-line-series-gradient';
diff --git a/__tests__/plots/static/stocks-line-series-gradient.ts b/__tests__/plots/static/stocks-line-series-gradient.ts
@@ -0,0 +1,23 @@
+import { G2Spec } from '../../../src';
+
+export function stocksLineSeriesGradient(): G2Spec {
+  return {
+    type: 'line',
+    data: {
+      type: 'fetch',
+      value: 'data/stocks.csv',
+    },
+    encode: {
+      x: (d) => new Date(d.date),
+      y: 'price',
+      series: 'symbol',
+      color: 'price',
+    },
+    legend: { size: false },
+    style: {
+      gradient: 'y',
+      strokeWidth: 10,
+      shape: 'smooth',
+    },
+  };
+}
diff --git a/site/examples/general/line/demo/line-series-var-color.ts b/site/examples/general/line/demo/line-series-var-color.ts
@@ -0,0 +1,24 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  autoFit: true,
+});
+
+chart
+  .line()
+  .data({
+    type: 'fetch',
+    value:
+      'https://gw.alipayobjects.com/os/bmw-prod/cb99c4ab-e0a3-4c76-9586-fe7fa2ff1a8c.csv',
+  })
+  .encode('x', (d) => new Date(d.date))
+  .encode('y', 'price')
+  .encode('series', 'symbol')
+  .encode('color', 'price')
+  .style('gradient', 'y')
+  .style('shape', 'smooth')
+  .style('strokeWidth', 10);
+
+chart.render();
diff --git a/site/examples/general/line/demo/meta.json b/site/examples/general/line/demo/meta.json
@@ -76,6 +76,14 @@
       },
       "screenshot": "https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*OwgcQoNg8m8AAAAAAAAAAAAADmJ7AQ"
     },
+    {
+      "filename": "line-series-var-color.ts",
+      "title": {
+        "zh": "系列颜色编码折线图",
+        "en": "Series Variable Color Line Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*EGMKRJE1kyYAAAAAAAAAAAAADmJ7AQ/original"
+    },
     {
       "filename": "line-threshold.ts",
       "title": {

diff --git a/src/mark/line.ts b/src/mark/line.ts
@@ -95,8 +95,8 @@ Line.props = {
   ],
   preInference: [
     ...basePreInference(),
-    { type: 'maybeSeries' },
     { type: 'maybeGradient' },
+    { type: 'maybeSeries' },
   ],
   postInference: [...basePostInference(), ...tooltip1d(), ...tooltipXd()],
   interaction: {

diff --git a/src/transform/maybeGradient.ts b/src/transform/maybeGradient.ts
@@ -10,9 +10,10 @@ export type MaybeGradientOptions = Record<string, never>;
  */
 export const MaybeGradient: TC<MaybeGradientOptions> = () => {
   return (I, mark) => {
-    const { style = {} } = mark;
+    const { style = {}, encode } = mark;
+    const { series } = encode;
     const { gradient } = style;
-    if (!gradient) return [I, mark];
+    if (!gradient || series) return [I, mark];
     return [
       I,
       deepMix({}, mark, {