@antv/f2/es/components/point/pointView.js

Charts for mobile visualization.

import { __assign } from "tslib";
import { deepMix, isNil } from '@antv/util';
import { jsx } from '@antv/f-engine';
export default (function (props) {
  var records = props.records,
    animation = props.animation,
    clip = props.clip;
  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 x = item.x,
        y = item.y,
        size = item.size,
        color = item.color,
        shapeName = item.shapeName,
        shape = item.shape;
      if (isNaN(x) || isNaN(y)) {
        return null;
      }
      if (shapeName === 'rect') {
        var rectSize = isNil(size) ? shape.size : size;
        return jsx("rect", {
          key: key,
          attrs: __assign(__assign({
            x: x - rectSize,
            y: y - rectSize,
            fill: color,
            stroke: color
          }, shape), {
            width: rectSize * 2,
            height: rectSize * 2
          }),
          animation: deepMix({
            appear: {
              easing: 'linear',
              duration: 450
            },
            update: {
              easing: 'linear',
              duration: 450,
              property: ['x', 'y', 'width', 'height', 'fill']
            }
          }, animation)
        });
      }
      return jsx("circle", {
        key: key,
        style: __assign(__assign({
          cx: x,
          cy: y,
          fill: shapeName === 'circle' ? color : null,
          stroke: shapeName === 'hollowCircle' ? color : null
        }, shape), {
          r: isNil(size) ? shape.size : size
        }),
        animation: deepMix({
          appear: {
            easing: 'linear',
            duration: 450
          },
          update: {
            easing: 'linear',
            duration: 450,
            property: ['cx', 'cy', 'r', 'fill']
          }
        }, animation)
      });
    }));
  }));
});