feat(encode): support array field

antvis · May 16, 2022 · 6661f39 · 6661f39
1 parent 9fed8d5
commit 6661f39
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 10 deletions.
diff --git a/__tests__/unit/runtime/interval.spec.ts b/__tests__/unit/runtime/interval.spec.ts
@@ -705,6 +705,43 @@ describe('render', () => {
     mount(createDiv(), chart);
   });
 
+  it('render({...} renders chart with array field', (done) => {
+    const chart = render<G2Spec>(
+      {
+        type: 'interval',
+        data: [
+          { month: 'Jan.', profit: 387264, y: [0, 387264] },
+          { month: 'Feb.', profit: 772096, y: [387264, 1159360] },
+          { month: 'Mar.', profit: 638075, y: [1159360, 1797435] },
+          { month: 'Apr.', profit: -211386, y: [1797435, 1586049] },
+          { month: 'May', profit: -138135, y: [1586049, 1447914] },
+          { month: 'Jun', profit: -267238, y: [1447914, 1180676] },
+          { month: 'Jul.', profit: 431406, y: [1180676, 1612082] },
+          { month: 'Aug.', profit: 363018, y: [1612082, 1975100] },
+          { month: 'Sep.', profit: -224638, y: [1975100, 1750462] },
+          { month: 'Oct.', profit: -299867, y: [1750462, 1450595] },
+          { month: 'Nov.', profit: 607365, y: [1450595, 2057960] },
+          { month: 'Dec.', profit: 1106986, y: [2057960, 3164946] },
+          { month: 'Total', y: [0, 3164946] },
+        ],
+        encode: {
+          x: 'month',
+          y: 'y',
+          color: (d) =>
+            d.month === 'Total'
+              ? 'Total'
+              : d.profit > 0
+              ? 'Increase'
+              : 'Decrease',
+        },
+      },
+      {},
+      done,
+    );
+
+    mount(createDiv(), chart);
+  });
+
   it('render({...} renders chart with both stackY and dodgeX', (done) => {
     const chart = render<G2Spec>(
       {

diff --git a/src/runtime/mark.ts b/src/runtime/mark.ts
@@ -1,7 +1,7 @@
 import { compose, composeAsync } from '../utils/helper';
 import { indexOf, mapObject, transpose, isFlatArray } from '../utils/array';
 import { useLibrary } from './library';
-import { G2MarkState, G2Theme } from './types/common';
+import { G2MarkState, G2Theme, Primitive } from './types/common';
 import {
   MarkProps,
   Transform,
@@ -90,17 +90,14 @@ export async function initializeMark(
   // Extract value from data based on inferred encodings.
   const value = mapObject(encode, (encodeOptions, key) => {
     if (Array.isArray(encodeOptions)) {
-      const values = encodeOptions.map((d) => {
-        const value = useEncode(d)(transformedData);
-        if (isFlatArray(value)) {
-          return value;
-        } else {
-          throw new Error("Array channel can't bind to array field.");
-        }
-      });
+      const values = encodeOptions.map((d) => useEncode(d)(transformedData));
+      // For array field, just return it.
+      const [V] = values;
+      if (!isFlatArray(V)) return V;
+
       // Position channel is a special channel which will be split into multiple
       // channels by statistic, so there is no need to transpose it.
-      return key !== 'position' ? transpose(values) : values;
+      return (key !== 'position' ? transpose(values) : values) as Primitive[][];
     } else {
       return useEncode(encodeOptions)(transformedData);
     }