@antv/f2/es/components/interval/view/rect.js

Charts for mobile visualization.

import { __assign } from "tslib";
import { deepMix } from '@antv/util';
import { jsx } from '@antv/f-engine';
export default (function (props) {
  var records = props.records,
    animation = props.animation,
    y0 = props.y0,
    clip = props.clip,
    onClick = props.onClick;
  return jsx("group", {
    attrs: {
      clip: clip
    }
  }, 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,
        color = item.color,
        shape = item.shape;
      if (isNaN(xMin) || isNaN(xMax) || isNaN(yMin) || isNaN(yMax)) {
        return null;
      }
      return jsx("rect", {
        key: key,
        attrs: __assign({
          x: xMin,
          y: yMin,
          width: xMax - xMin,
          height: yMax - yMin,
          fill: color
        }, shape),
        onClick: onClick,
        animation: deepMix({
          appear: {
            easing: 'linear',
            duration: 450,
            property: ['y', 'height'],
            start: {
              y: y0,
              height: 0
            }
          },
          update: {
            easing: 'linear',
            duration: 450,
            property: ['x', 'y', 'width', 'height']
          }
        }, animation)
      });
    }));
  }));
});