feat: 添加 K 线图 (#1810)

* feat: 添加 K 线图
antvis · Jul 14, 2023 · 97618f4 · 97618f4
1 parent 7e71139
commit 97618f4
Show file tree

Hide file tree

Showing 15 changed files with 416 additions and 0 deletions.
diff --git a/packages/f2/src/components/candlestick/candlestickView.tsx b/packages/f2/src/components/candlestick/candlestickView.tsx
@@ -0,0 +1,87 @@
+import { jsx } from '@antv/f-engine';
+import { deepMix } from '@antv/util';
+
+export default (props) => {
+  const { records, animation, y0, onClick } = props;
+  return (
+    <group>
+      {records.map((record) => {
+        const { key, children } = record;
+        return (
+          <group key={key}>
+            {children.map((item) => {
+              const { key, xMin, xMax, yMin, yMax, x, y, color, shape } = item;
+              if (isNaN(xMin) || isNaN(xMax) || isNaN(yMin) || isNaN(yMax)) {
+                return null;
+              }
+              return (
+                <group>
+                  <line
+                    style={{
+                      x1: x,
+                      y1: y[2],
+                      x2: x,
+                      y2: y[3],
+                      stroke: color,
+                      lineWidth: '2px',
+                      lineCap: 'round',
+                    }}
+                    animation={{
+                      appear: {
+                        easing: 'linear',
+                        duration: 300,
+                        property: ['y1', 'y2'],
+                        // @ts-ignore
+                        start: {
+                          y1: 0,
+                          y2: 0,
+                        },
+                      },
+                      update: {
+                        easing: 'linear',
+                        duration: 300,
+                        property: ['x1', 'y1', 'x2', 'y2'],
+                      },
+                    }}
+                  />
+                  <rect
+                    key={key}
+                    style={{
+                      x: xMin,
+                      y: yMin,
+                      width: xMax - xMin,
+                      height: yMax - yMin,
+                      fill: color,
+                      radius: '2px',
+                      ...shape,
+                    }}
+                    onClick={onClick}
+                    animation={deepMix(
+                      {
+                        appear: {
+                          easing: 'linear',
+                          duration: 300,
+                          property: ['y', 'height'],
+                          start: {
+                            y: y0,
+                            height: 0,
+                          },
+                        },
+                        update: {
+                          easing: 'linear',
+                          duration: 300,
+                          property: ['x', 'y', 'width', 'height'],
+                        },
+                      },
+                      animation
+                    )}
+                  />
+                </group>
+              );
+            })}
+          </group>
+        );
+      })}
+    </group>
+  );
+};
diff --git a/packages/f2/src/components/candlestick/index.tsx b/packages/f2/src/components/candlestick/index.tsx
@@ -0,0 +1,5 @@
+import withCandlestick, { CandlestickProps } from './withCandlestick';
+import CandlestickView from './candlestickView';
+
+export { CandlestickProps, CandlestickView };
+export default withCandlestick(CandlestickView);
diff --git a/packages/f2/src/components/candlestick/withCandlestick.tsx b/packages/f2/src/components/candlestick/withCandlestick.tsx
@@ -0,0 +1,86 @@
+import { jsx, ComponentType } from '@antv/f-engine';
+import { isNil, mix } from '@antv/util';
+import Geometry, { GeometryProps } from '../geometry';
+import { DataRecord } from '../../chart/Data';
+
+// 默认配色
+const COLORS = [
+  '#E62C3B', // 上涨
+  '#0E9976', // 下跌
+  '#999999', // 平盘
+];
+
+export interface CandlestickProps<TRecord extends DataRecord = DataRecord>
+  extends GeometryProps<TRecord> {
+  /**
+   * 柱子的显示比例，默认 0.5
+   */
+  sizeRatio?: number;
+}
+
+export default (View: ComponentType) => {
+  return class Candlestick<
+    TRecord extends DataRecord = DataRecord,
+    IProps extends CandlestickProps<TRecord> = CandlestickProps<TRecord>
+  > extends Geometry<TRecord, IProps> {
+    getDefaultCfg() {
+      return {
+        geomType: 'candlestick',
+      };
+    }
+
+    getSize() {
+      const { attrs, props } = this;
+      const { sizeRatio = 0.5 } = props;
+      const { x } = attrs;
+      const { scale } = x;
+      const { values } = scale;
+
+      return (1 / values.length) * sizeRatio;
+    }
+
+    mapping() {
+      const records = super.mapping();
+      const { props } = this;
+      const { coord } = props;
+      const y0 = this.getY0Value();
+      const defaultSize = this.getSize();
+      const colorAttr = this.getAttr('color');
+
+      const colors = colorAttr ? colorAttr.range : COLORS;
+
+      for (let i = 0, len = records.length; i < len; i++) {
+        const record = records[i];
+        const { children } = record;
+        for (let j = 0, len = children.length; j < len; j++) {
+          const child = children[j];
+          const { normalized, size: mappedSize } = child;
+
+          // 没有指定size，则根据数据来计算默认size
+          if (isNil(mappedSize)) {
+            const { x, y, size = defaultSize } = normalized;
+            mix(child, coord.convertRect({ x, y, y0, size: size }));
+          } else {
+            const { x, y } = child;
+            const rect = { x, y, y0, size: mappedSize };
+            mix(child, coord.transformToRect(rect));
+          }
+
+          // 处理颜色
+          const { y } = normalized;
+          const [open, close] = y;
+          child.color = close > open ? colors[0] : close < open ? colors[1] : colors[2];
+
+          mix(child.shape, this.getSelectionStyle(child));
+        }
+      }
+      return records;
+    }
+
+    render() {
+      const { props } = this;
+      const records = this.mapping();
+      return <View {...props} records={records} />;
+    }
+  };
+};
diff --git a/packages/f2/src/components/index.ts b/packages/f2/src/components/index.ts
@@ -25,3 +25,4 @@ export { default as PieLabel, PieLabelProps, withPieLabel, PieLabelView } from '
 export { default as Gauge, GaugeProps, withGauge, GaugeView } from './gauge';
 export { default as Zoom, ZoomProps } from './zoom';
 export { default as ScrollBar, ScrollBarProps, withScrollBar, ScrollBarView } from './scrollBar';
+export { default as Candlestick } from './candlestick';
diff --git a/...nts/candlestick/__image_snapshots__/basic-test-tsx-candlestick-basic-1-snap.png b/...nts/candlestick/__image_snapshots__/basic-test-tsx-candlestick-basic-1-snap.png
diff --git a/...nts/candlestick/__image_snapshots__/basic-test-tsx-candlestick-color-1-snap.png b/...nts/candlestick/__image_snapshots__/basic-test-tsx-candlestick-color-1-snap.png
diff --git a/...ents/candlestick/__image_snapshots__/basic-test-tsx-candlestick-size-1-snap.png b/...ents/candlestick/__image_snapshots__/basic-test-tsx-candlestick-size-1-snap.png
diff --git a/...andlestick/__image_snapshots__/basic-test-tsx-candlestick-size-ratio-1-snap.png b/...andlestick/__image_snapshots__/basic-test-tsx-candlestick-size-ratio-1-snap.png
diff --git a/packages/f2/test/components/candlestick/basic.test.tsx b/packages/f2/test/components/candlestick/basic.test.tsx
@@ -0,0 +1,101 @@
+import { jsx } from '../../../src';
+import { Canvas, Chart, Candlestick, Axis } from '../../../src';
+import { createContext, delay } from '../../util';
+const context = createContext();
+
+const data = [
+  {
+    time: '2017-10-24',
+    value: [20, 34, 10, 38], // [open, close, lowest, highest]
+  },
+  {
+    time: '2017-10-25',
+    value: [40, 35, 30, 50],
+  },
+  {
+    time: '2017-10-26',
+    value: [31, 38, 33, 44],
+  },
+  {
+    time: '2017-10-27',
+    value: [38, 38, 5, 42],
+  },
+  {
+    time: '2017-10-28',
+    value: [38, 15, 5, 42],
+  },
+];
+
+describe('candlestick', () => {
+  it('basic', async () => {
+    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" />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
+
+  it('color', async () => {
+    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" color={{ range: ['red', 'green', 'gray'] }} />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
+
+  it('size', async () => {
+    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" size={10} />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
+
+  it('sizeRatio', async () => {
+    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();
+  });
+});
diff --git a/site/.dumirc.ts b/site/.dumirc.ts
@@ -302,6 +302,14 @@ export default defineConfig({
           en: 'Relation Charts',
         },
       },
+      {
+        slug: 'candlestick',
+        icon: 'candlestick',
+        title: {
+          zh: 'K 线图',
+          en: 'Candlestick Charts',
+        },
+      },
       {
         slug: 'component',
         icon: 'component',

diff --git a/site/docs/api/chart/candlestick.zh.md b/site/docs/api/chart/candlestick.zh.md
@@ -0,0 +1,68 @@
+---
+title: K 线图 - Candlestick
+order: 5
+---
+
+用于 K 线图, 继承自 [几何标记 Geometry](geometry)
+
+## Usage
+
+```jsx
+import { Axis, Candlestick, Canvas, Chart, jsx } from '@antv/f2';
+
+const data = [
+  {
+    time: '2017-10-24',
+    // 格式为：[open, close, lowest, highest]
+    value: [20, 34, 10, 38],
+  },
+  {
+    time: '2017-10-25',
+    value: [40, 35, 30, 50],
+  },
+  {
+    time: '2017-10-26',
+    value: [31, 38, 33, 44],
+  },
+  {
+    time: '2017-10-27',
+    value: [38, 15, 5, 42],
+  },
+];
+
+const { props } = (
+  <Canvas context={context}>
+    <Chart data={data}>
+      <Axis field="time" />
+      <Axis field="value" />
+      <Candlestick x="time" y="value" />
+    </Chart>
+  </Canvas>
+);
+```
+
+## 数据结构说明
+
+y 轴字段格式为：`[open, close, lowest, highest]` 分别代表：`[开盘价, 收盘价, 最低价, 最高价]`
+
+## Props
+
+几何标记统一 Props 详见：[几何标记](geometry#props)
+
+### color
+
+设置「涨」、「跌」、「平盘」颜色，格式为：`[上涨颜色, 下跌颜色, 平盘颜色]`, 默认值为： `['#E62C3B', '#0E9976', '#999999']`
+
+```jsx
+<Candlestick x="time" y="value" color={{ range: ['#E62C3B', '#0E9976', '#999999'] }} />
+```
+
+### sizeRatio
+
+矩形的大小比例，范围 `[0, 1]`, 默认为 `0.5`, 表示矩形的宽度和空白处各占 `50%`
+
+```jsx
+<Candlestick x="time" y="value" sizeRatio={0.8} />
+```
+
+## 方法