@antv/f2/es/components/candlestick/candlestickView.js

import { __assign } from "tslib";
import { jsx } from '@antv/f-engine';
import { deepMix } from '@antv/util';
export default (function (props) {
  var records = props.records,
    animation = props.animation,
    y0 = props.y0,
    onClick = props.onClick;
  return jsx("group", null, records.map(function (record) {
    var key = record.key,
      children = record.children;
    return jsx("group", {
      key: key
    }, children.map(function (item) {
      var key = item.key,
        xMin = item.xMin,
        xMax = item.xMax,
        yMin = item.yMin,
        yMax = item.yMax,
        x = item.x,
        y = item.y,
        color = item.color,
        shape = item.shape;
      if (isNaN(xMin) || isNaN(xMax) || isNaN(yMin) || isNaN(yMax)) {
        return null;
      }
      return jsx("group", null, jsx("line", {
        key: "".concat(key, "-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']
          }
        }
      }), jsx("rect", {
        key: "".concat(key, "-rect"),
        style: __assign({
          x: xMin,
          y: yMin,
          // 当 min === max 时，设置 1，否则会出现 0 的情况
          width: Math.max(xMax - xMin, 1),
          height: Math.max(yMax - yMin, 1),
          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)
      }));
    }));
  }));
});