@antv/f2/es/components/line/lineView.js

Charts for mobile visualization.

import { __assign } from "tslib";
import { createRef, jsx } from '@antv/f-engine';
import { deepMix } from '@antv/util';
function concatPoints(children) {
  var result = [];
  for (var i = 0; i < children.length; i++) {
    var child = children[i];
    result = result.concat(child.points);
  }
  return result;
}
export default (function (props) {
  var records = props.records,
    coord = props.coord,
    animation = props.animation,
    EndView = props.endView,
    clip = props.clip;
  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", {
    style: {
      clip: clip
    }
  }, records.map(function (record) {
    var _a;
    var key = record.key,
      children = record.children;
    var points = concatPoints(children);
    var ref = createRef();
    return jsx("group", {
      key: key
    }, children.map(function (child) {
      var points = child.points,
        color = child.color,
        size = child.size,
        shape = child.shape;
      var fliterPoints = points.filter(function (point) {
        return !isNaN(point.x) && !isNaN(point.y);
      });
      if (fliterPoints.length === 0) return;
      return jsx("polyline", {
        key: key,
        ref: ref,
        style: __assign(__assign({
          points: fliterPoints.map(function (point) {
            return [point.x, point.y];
          }),
          stroke: color
        }, shape), {
          lineWidth: size || shape.lineWidth
        }),
        animation: deepMix({
          update: {
            easing: 'linear',
            duration: 450,
            property: ['points']
          },
          appear: appear
        }, animation)
      });
    }), EndView ? jsx("group", {
      style: {
        offset: ref
      },
      animation: deepMix({
        appear: {
          easing: 'quadraticOut',
          duration: 450,
          property: ['offsetDistance'],
          start: {
            offsetDistance: 0
          },
          end: {
            offsetDistance: 1
          }
        }
      }, animation)
    }, jsx(EndView, {
      origin: (_a = points[0]) === null || _a === void 0 ? void 0 : _a.origin
    })) : null);
  }));
});