@antv/g2/src/geometry/shape/schema/candle.ts

the Grammar of Graphics in Javascript

import { isArray } from '@antv/util';
import { IGroup, PathCommand } from '../../../dependents';
import { Point, ShapeInfo, ShapeMarkerCfg, ShapePoint } from '../../../interface';

import { padEnd } from '../../../util/helper';
import { registerShape } from '../base';
import { getStyle } from '../util/get-style';

function getCandleYValues(value: number | number[]) {
  const array = !isArray(value) ? [value] : value;
  // 从大到小排序
  const sorted = array.sort((a, b) => b - a);
  return padEnd(sorted, 4, sorted[sorted.length - 1]);
}

// get candle shape's key points
function getCandlePoints(x: number, y: number[], size: number): Point[] {
  const yValues = getCandleYValues(y);
  return [
    { x, y: yValues[0] },
    { x, y: yValues[1] },
    { x: x - size / 2, y: yValues[2] },
    { x: x - size / 2, y: yValues[1] },
    { x: x + size / 2, y: yValues[1] },
    { x: x + size / 2, y: yValues[2] },
    { x, y: yValues[2] },
    { x, y: yValues[3] },
  ];
}

function getCandlePath(points): PathCommand[] {
  return [
    ['M', points[0].x, points[0].y],
    ['L', points[1].x, points[1].y],
    ['M', points[2].x, points[2].y],
    ['L', points[3].x, points[3].y],
    ['L', points[4].x, points[4].y],
    ['L', points[5].x, points[5].y],
    ['Z'],
    ['M', points[6].x, points[6].y],
    ['L', points[7].x, points[7].y],
  ];
}

// k line shape
registerShape('schema', 'candle', {
  getPoints(shapePoint: ShapePoint) {
    const { x, y, size } = shapePoint;
    return getCandlePoints(x as number, y as number[], size);
  },
  draw(cfg: ShapeInfo, container: IGroup) {
    const style = getStyle(cfg, true, true);
    const path = this.parsePath(getCandlePath(cfg.points));
    const shape = container.addShape('path', {
      attrs: {
        ...style,
        path,
        name: 'schema',
      },
    });

    return shape;
  },
  getMarker(markerCfg: ShapeMarkerCfg) {
    const { color } = markerCfg;
    return {
      symbol(x: number, y: number, r: number) {
        const yValues = [y + 7.5, y + 3, y - 3, y - 7.5];
        const points = getCandlePoints(x, yValues, r);
        return [
          ['M', points[0].x, points[0].y],
          ['L', points[1].x, points[1].y],
          ['M', points[2].x, points[2].y],
          ['L', points[3].x, points[3].y],
          ['L', points[4].x, points[4].y],
          ['L', points[5].x, points[5].y],
          ['Z'],
          ['M', points[6].x, points[6].y],
          ['L', points[7].x, points[7].y],
        ];
      },
      style: {
        lineWidth: 1,
        stroke: color,
        fill: color,
        r: 6,
      },
    };
  },
});