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

Charts for mobile visualization.

import { __assign } from "tslib";
import { createRef, jsx } from '@antv/f-engine';
import { deepMix, isArray } 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;
}
function formatPoint(point) {
  var y = point.y;
  return {
    x: point.x,
    y: isArray(y) ? y[1] : y
  };
}
function getPoint(points, t) {
  var formatedPoints = points.map(function (p) {
    return formatPoint(p);
  });
  var firstPoint = formatedPoints[0];
  var lastPoint = formatedPoints[formatedPoints.length - 1];
  var xOffset = lastPoint.x - firstPoint.x;
  var x = firstPoint.x + xOffset * t;
  for (var i = 1; i < formatedPoints.length; i++) {
    var point = formatedPoints[i];
    var prevPoint = formatedPoints[i - 1];
    if (x >= prevPoint.x && x <= point.x) {
      // x 在 2 点之间的比例，根据比例再算出 y 的值
      var ratio = (x - prevPoint.x) / (point.x - prevPoint.x);
      return {
        x: x,
        y: prevPoint.y + (point.y - prevPoint.y) * ratio
      };
    }
  }
}
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", {
      ref: ref,
      // style={{
      //   offset: ref,
      // }}
      animation: deepMix({
        appear: {
          easing: 'quadraticOut',
          duration: 450,
          onFrame: function onFrame(t) {
            // 这段逻辑TODO:修改为offsetDistance
            var children = ref.current.getChildren();
            var point = getPoint(points, t);
            children.forEach(function (child) {
              child.moveTo(point.x, point.y);
            });
          }
          // property: ['offsetDistance'],
          // start: {
          //   offsetDistance: 0,
          // },
          // end: {
          //   offsetDistance: 1,
          // },
        }
      }, animation)
    }, jsx(EndView, {
      origin: (_a = points[0]) === null || _a === void 0 ? void 0 : _a.origin
    })) : null);
  }));
});