@antv/f2/es/components/area/areaView.js

Charts for mobile visualization.

import { __assign } from "tslib";
import { jsx, Smooth } from '@antv/f-engine';
import { deepMix } from '@antv/util';
export default (function (props) {
  var coord = props.coord,
    records = props.records,
    baseY = props.baseY,
    shape = props.shape,
    animation = props.animation;
  var isSmooth = shape === 'smooth';
  var _a = coord,
    left = _a.left,
    top = _a.top,
    width = _a.width,
    height = _a.height,
    center = _a.center,
    startAngle = _a.startAngle,
    endAngle = _a.endAngle,
    radius = _a.radius;
  var appear = coord.isPolar ? {
    easing: 'quadraticOut',
    duration: 450,
    clip: {
      type: 'sector',
      property: ['endAngle'],
      style: {
        cx: center.x,
        cy: center.y,
        startAngle: "".concat(startAngle, "rad"),
        r: radius
      },
      start: {
        endAngle: "".concat(startAngle, "rad")
      },
      end: {
        endAngle: "".concat(endAngle, "rad")
      }
    }
  } : {
    easing: 'quadraticOut',
    duration: 450,
    clip: {
      type: 'rect',
      property: ['width'],
      style: {
        x: left,
        y: top,
        height: height
      },
      start: {
        width: 0
      },
      end: {
        width: width
      }
    }
  };
  return jsx("group", null, records.map(function (record) {
    var key = record.key,
      children = record.children;
    return jsx("group", {
      key: key
    }, children.map(function (child) {
      var points = child.points,
        topPoints = child.topPoints,
        bottomPoints = child.bottomPoints,
        color = child.color,
        shape = child.shape;
      if (isSmooth) {
        var generatePath = function generatePath() {
          var d = [];
          var constaint = [[0, 0], [1, 1]];
          var topSps = Smooth.smooth(topPoints, false, constaint);
          d.push(['M', topPoints[0].x, topPoints[0].y]);
          for (var i = 0, n = topSps.length; i < n; i++) {
            var sp = topSps[i];
            d.push(['C', sp[1], sp[2], sp[3], sp[4], sp[5], sp[6]]);
          }
          if (bottomPoints && bottomPoints.length) {
            var bottomSps = Smooth.smooth(bottomPoints, false, constaint);
            d.push(['L', bottomPoints[0].x, bottomPoints[0].y]);
            for (var i = 0, n = bottomSps.length; i < n; i++) {
              var sp = bottomSps[i];
              d.push(['C', sp[1], sp[2], sp[3], sp[4], sp[5], sp[6]]);
            }
          } else {
            d.push(['L', topPoints[topPoints.length - 1].x, baseY]);
            d.push(['L', topPoints[0].x, baseY]);
          }
          return d;
        };
        return jsx("path", {
          style: __assign({
            path: generatePath(),
            lineWidth: '2px',
            fill: color
          }, shape)
        });
      }
      return jsx("polygon", {
        style: __assign({
          points: points.map(function (point) {
            return [point.x, point.y];
          }),
          lineWidth: '2px',
          fill: color
        }, shape),
        animation: deepMix({
          appear: appear,
          update: {
            easing: 'linear',
            duration: 450,
            property: ['points']
          }
        }, animation)
      });
    }));
  }));
});