fix: 修复 line 空数组时报错 (#1359)

packages/f2/src/chart/index.ts

@@ -341,8 +341,9 @@ class Chart extends Component implements IChart, InteractionMixin {
 
   render(): JSX.Element {
     const { props, state, layout, coord } = this;
-    const { children } = props;
+    const { children, data: originData } = props;
     const { zoomRange } = state;
+    if (!originData) return null;
     const data = this._getRenderData();
 
     return Children.map(children, (child) => {

packages/f2/src/components/line/withLine.tsx

@@ -85,7 +85,8 @@ export default (View) => {
 
       return records.map((record) => {
         const { children } = record;
-        const { size, color, shape, y } = children[0];
+        // children 有可能为空
+        const { size, color, shape, y } = children[0] || {};
         const points = children;
         if (coord.isPolar) {
           points.push(points[0]);

packages/f2/src/controller/attr.ts

@@ -134,18 +134,18 @@ class AttrController {
     }
     const scale = this.scaleController.getScale(field);
 
-    // identity
-    if (scale && scale.type === 'identity') {
-      return new Identity(option);
-    }
-
     const attrOption = {
       ...option,
       data: this.scaleController.getData(),
       // scaleConfig 只在属性映射中生效
       scale: scaleConfig ? cloneScale(scale, scaleConfig) : scale,
     };
 
+    // identity
+    if (scale && scale.type === 'identity') {
+      return new Identity(attrOption);
+    }
+
     // Attr的默认类型和scale类型保持一致
     let AttrConstructor = scale.isLinear ? Linear : Category;
 

packages/f2/src/controller/scale.ts

@@ -142,7 +142,7 @@ class ScaleController {
     if (!option) {
       return null;
     }
-    const values = option.values ? option.values : valuesOfKey(data, field);
+    const values = option.values ? option.values : data ? valuesOfKey(data, field) : [];
     const scaleOption = this._getOption({
       ...option,
       field,

packages/f2/test/base/component.test.tsx

@@ -1,5 +1,5 @@
 import { jsx } from '../../src';
-import { Canvas, Chart, Component } from '../../src';
+import { Canvas, Component } from '../../src';
 import { createContext, delay } from '../util';
 
 describe('base/component', () => {
@@ -28,10 +28,8 @@ describe('base/component', () => {
     }
 
     const { props } = (
-      <Canvas context={context} pixelRatio={window.devicePixelRatio}>
-        <Chart>
-          <StatedComponent />
-        </Chart>
+      <Canvas context={context} pixelRatio={1}>
+        <StatedComponent />
       </Canvas>
     );
 

packages/f2/test/components/geometry/empty-data.test.tsx

@@ -0,0 +1,71 @@
+import { jsx } from '../../../src/jsx';
+import Geometry from '../../../src/components/geometry';
+import { createContext, delay } from '../../util';
+import { Canvas, createRef, Chart, Axis } from '../../../src';
+const context = createContext();
+
+class Custom extends Geometry {
+  render() {
+    const records = this.mapping();
+    return (
+      <group>
+        {records.map((record) => {
+          const { children } = record;
+          return children.map((item) => {
+            const { x, y } = item;
+            return (
+              <circle
+                attrs={{
+                  x,
+                  y,
+                  r: '20px',
+                  fill: '#000',
+                }}
+              />
+            );
+          });
+        })}
+      </group>
+    );
+  }
+}
+
+describe('empty data', () => {
+  it('data is null', async () => {
+    const { props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart data={null}>
+          <Axis field="x" />
+          <Custom x="x" y="y" />
+        </Chart>
+      </Canvas>
+    );
+    const canvas = new Canvas(props);
+    canvas.render();
+
+    await delay(100);
+
+    expect(canvas.container.get('children').length).toBe(1);
+    expect(canvas.container.get('children')[0].get('children').length).toBe(0);
+  });
+
+  it('data array is empty', async () => {
+    const ref = createRef();
+    const { props } = (
+      <Canvas context={context} pixelRatio={1} animate={false}>
+        <Chart data={[]}>
+          <Axis field="x" />
+          <Axis field="y" />
+          <Custom ref={ref} x="x" y="y" />
+        </Chart>
+      </Canvas>
+    );
+    const canvas = new Canvas(props);
+    canvas.render();
+
+    await delay(100);
+    expect(context).toMatchImageSnapshot();
+    expect(ref.current.records.length).toBe(1);
+    expect(ref.current.records[0].children).toEqual([]);
+  });
+});

packages/f2/test/components/line/empty-data.test.tsx

@@ -0,0 +1,29 @@
+import { jsx, Canvas, createRef, Chart, Line } from '../../../src';
+import { createContext, delay } from '../../util';
+
+describe('空数据', () => {
+  it('空数组', async () => {
+    const context = createContext('空数组');
+    const ref = createRef();
+    const { props } = (
+      <Canvas context={context} pixelRatio={1} animate={false}>
+        <Chart data={[]}>
+          <Line ref={ref} x="x" y="y" />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    canvas.render();
+
+    await delay(100);
+
+    expect(
+      ref.current.container
+        .get('children')[0]
+        .get('children')[0]
+        .get('children')[0]
+        .get('children').length
+    ).toBe(0);
+  });
+});