fix(candlestick): 蜡烛图开盘价收盘价一致时，颜色用上个交易日的比较 (#1917)

packages/f2/src/components/candlestick/candlestickView.tsx

@@ -49,8 +49,9 @@ export default (props) => {
                     style={{
                       x: xMin,
                       y: yMin,
-                      width: xMax - xMin,
-                      height: yMax - yMin,
+                      // 当 min === max 时，设置 1，否则会出现 0 的情况
+                      width: Math.max(xMax - xMin, 1),
+                      height: Math.max(yMax - yMin, 1),
                       fill: color,
                       radius: '2px',
                       ...shape,

packages/f2/src/components/candlestick/withCandlestick.tsx

@@ -39,6 +39,38 @@ export default (View: ComponentType) => {
       return (1 / values.length) * sizeRatio;
     }
 
+    _getColor(colors, child, prevChild) {
+      const { normalized } = child;
+      // 处理颜色
+      const { y } = normalized;
+      const [open, close] = y;
+      if (close > open) {
+        return colors[0];
+      }
+
+      if (close < open) {
+        return colors[1];
+      }
+
+      // 相等的情况下，再和昨日的收盘价比较
+      if (!prevChild) {
+        // 第一个固定为涨
+        return colors[0];
+      }
+
+      const { normalized: prevNormalized } = prevChild;
+      // 处理颜色
+      const { y: prevY } = prevNormalized;
+      const [, prevClose] = prevY;
+      if (close > prevClose) {
+        return colors[0];
+      }
+      if (close < prevClose) {
+        return colors[1];
+      }
+      return colors[2];
+    }
+
     mapping() {
       const records = super.mapping();
       const { props } = this;
@@ -67,9 +99,7 @@ export default (View: ComponentType) => {
           }
 
           // 处理颜色
-          const { y } = normalized;
-          const [open, close] = y;
-          child.color = close > open ? colors[0] : close < open ? colors[1] : colors[2];
+          child.color = this._getColor(colors, child, children[j - 1]);
 
           mix(child.shape, this.getSelectionStyle(child));
         }

packages/f2/src/coord/base.ts

@@ -19,8 +19,13 @@ function convertRect({ x, y, size, y0 }: RectPoint) {
   let yMin: number;
   let yMax: number;
   if (isArray(y)) {
-    yMin = y[0];
-    yMax = y[1];
+    if (y[0] === y[1]) {
+      yMin = y[0];
+      yMax = y[1];
+    } else {
+      yMin = Math.min(y[0], y[1]);
+      yMax = Math.max(y[0], y[1]);
+    }
   } else {
     yMin = Math.min(y0, y);
     yMax = Math.max(y0, y);

packages/f2/test/components/candlestick/basic.test.tsx

@@ -126,4 +126,44 @@ describe('candlestick', () => {
     await delay(200);
     expect(context).toMatchImageSnapshot();
   });
+
+  it('equal data', async () => {
+    const data = [
+      {
+        time: '2017-10-24',
+        value: [20, 20, 20, 20], // [open, close, lowest, highest]
+      },
+      {
+        time: '2017-10-25',
+        value: [40, 40, 40, 40],
+      },
+      {
+        time: '2017-10-26',
+        value: [30, 30, 30, 30],
+      },
+      {
+        time: '2017-10-27',
+        value: [38, 38, 38, 38],
+      },
+      {
+        time: '2017-10-28',
+        value: [38, 38, 38, 38],
+      },
+    ];
+    const { props } = (
+      <Canvas context={context} animate={false} pixelRatio={1}>
+        <Chart data={data}>
+          <Axis field="time" type="timeCat" tickCount={3} />
+          <Axis field="value" />
+          <Candlestick x="time" y="value" sizeRatio={0.8} />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
 });