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

Charts for mobile visualization.

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { jsx } from '../../jsx';
import { deepMix } from '@antv/util';
import { Smooth, BBox } from '@antv/f2-graphic';
export default (function (props) {
  var coord = props.coord,
    records = props.records,
    shape = props.shape,
    animation = props.animation;
  var isSmooth = shape === 'smooth';
  var left = coord.left,
    top = coord.top,
    width = coord.width,
    height = coord.height,
    center = coord.center,
    startAngle = coord.startAngle,
    endAngle = coord.endAngle,
    radius = coord.radius;
  var appear = coord.isPolar ? {
    easing: 'quadraticOut',
    duration: 450,
    clip: {
      type: 'sector',
      property: ['endAngle'],
      attrs: {
        x: center.x,
        y: center.y,
        startAngle: startAngle,
        r: radius
      },
      start: {
        endAngle: startAngle
      },
      end: {
        endAngle: endAngle
      }
    }
  } : {
    easing: 'quadraticOut',
    duration: 450,
    clip: {
      type: 'rect',
      property: ['width'],
      attrs: {
        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,
        bottomPoints = child.bottomPoints,
        color = child.color,
        shape = child.shape;
      if (isSmooth) {
        return jsx("custom", {
          attrs: _objectSpread({
            points: points,
            lineWidth: '2px',
            fill: color
          }, shape),
          createPath: function createPath(context) {
            var constaint = [[0, 0], [1, 1]];
            var bottomPointsLen = (bottomPoints === null || bottomPoints === void 0 ? void 0 : bottomPoints.length) || 0;
            var topPoints = points.slice(0, points.length - bottomPointsLen);
            var topSps = Smooth.smooth(topPoints, false, constaint);
            context.beginPath();
            context.moveTo(topPoints[0].x, topPoints[0].y);
            for (var i = 0, n = topSps.length; i < n; i++) {
              var sp = topSps[i];
              context.bezierCurveTo(sp[1], sp[2], sp[3], sp[4], sp[5], sp[6]);
            }
            if (bottomPointsLen) {
              var bottomSps = Smooth.smooth(bottomPoints, false, constaint);
              context.lineTo(bottomPoints[0].x, bottomPoints[0].y);
              for (var _i = 0, _n = bottomSps.length; _i < _n; _i++) {
                var _sp = bottomSps[_i];
                context.bezierCurveTo(_sp[1], _sp[2], _sp[3], _sp[4], _sp[5], _sp[6]);
              }
            }
            context.closePath();
          },
          calculateBox: function calculateBox() {
            return BBox.getBBoxFromPoints(points);
          }
        });
      }
      return jsx("polygon", {
        attrs: _objectSpread({
          points: points,
          lineWidth: '2px',
          fill: color
        }, shape),
        animation: deepMix({
          appear: appear,
          update: {
            easing: 'linear',
            duration: 450,
            property: ['points']
          }
        }, animation)
      });
    }));
  }));
});