diff --git a/packages/f2/src/components/candlestick/candlestickView.tsx b/packages/f2/src/components/candlestick/candlestickView.tsx index ce0b8795e..402a3b598 100644 --- a/packages/f2/src/components/candlestick/candlestickView.tsx +++ b/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, diff --git a/packages/f2/src/components/candlestick/withCandlestick.tsx b/packages/f2/src/components/candlestick/withCandlestick.tsx index d613d10d7..eb2a4e54b 100644 --- a/packages/f2/src/components/candlestick/withCandlestick.tsx +++ b/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)); } diff --git a/packages/f2/src/coord/base.ts b/packages/f2/src/coord/base.ts index 18eade79c..9c8fad17f 100644 --- a/packages/f2/src/coord/base.ts +++ b/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); diff --git a/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-basic-1-snap.png b/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-basic-1-snap.png index f474bd8fa..76cd490d6 100644 Binary files a/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-basic-1-snap.png and b/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-basic-1-snap.png differ diff --git a/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-color-1-snap.png b/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-color-1-snap.png index ad0f9b8c7..0b7c17530 100644 Binary files a/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-color-1-snap.png and b/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-color-1-snap.png differ diff --git a/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-equal-data-1-snap.png b/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-equal-data-1-snap.png new file mode 100644 index 000000000..c7db456ad Binary files /dev/null and b/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-equal-data-1-snap.png differ diff --git a/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-size-1-snap.png b/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-size-1-snap.png index 7531e2c98..0436d19a4 100644 Binary files a/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-size-1-snap.png and b/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-size-1-snap.png differ diff --git a/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-size-ratio-1-snap.png b/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-size-ratio-1-snap.png index ab21c88a4..d8a34abfd 100644 Binary files a/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-size-ratio-1-snap.png and b/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-size-ratio-1-snap.png differ diff --git a/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-tooltip-1-snap.png b/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-tooltip-1-snap.png index 04911010b..14ea9e58b 100644 Binary files a/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-tooltip-1-snap.png and b/packages/f2/test/components/candlestick/__image_snapshots__/basic-test-tsx-candlestick-tooltip-1-snap.png differ diff --git a/packages/f2/test/components/candlestick/basic.test.tsx b/packages/f2/test/components/candlestick/basic.test.tsx index 689afb0c2..42a2eb291 100644 --- a/packages/f2/test/components/candlestick/basic.test.tsx +++ b/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 } = ( + + + + + + + + ); + + const canvas = new Canvas(props); + await canvas.render(); + + await delay(1000); + expect(context).toMatchImageSnapshot(); + }); });