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

Charts for mobile visualization.

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { deepMix, isArray } from '@antv/util';
import { jsx } from '../../jsx';
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
      };
    }
  }
}
function AnimationEndView(props) {
  var record = props.record,
    appear = props.appear,
    EndView = props.EndView;
  var children = record.children;
  var points = concatPoints(children);
  var origin = points[0].origin;
  return jsx("group", {
    animation: {
      appear: {
        easing: appear.easing,
        duration: appear.duration,
        onFrame: function onFrame(t) {
          // 这段逻辑有点恶心。。
          var element = this.element;
          var children = element.get('children');
          var point = getPoint(points, t);
          children.forEach(function (child) {
            child.moveTo(point.x, point.y);
          });
        }
      }
    }
  }, jsx(EndView, {
    origin: origin
  }));
}
export default (function (props) {
  var records = props.records,
    coord = props.coord,
    animation = props.animation,
    EndView = props.endView,
    clip = props.clip;
  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", {
    attrs: {
      clip: clip
    }
  }, records.map(function (record) {
    var key = record.key,
      children = record.children;
    return jsx("group", {
      key: key
    }, children.map(function (child) {
      var points = child.points,
        color = child.color,
        size = child.size,
        shape = child.shape;
      return jsx("polyline", {
        attrs: _objectSpread(_objectSpread({
          points: points.map(function (point) {
            return {
              x: point.x,
              y: point.y
            };
          }),
          stroke: color
        }, shape), {}, {
          lineWidth: size || shape.lineWidth
        }),
        animation: deepMix({
          update: {
            easing: 'linear',
            duration: 450,
            property: ['points']
          },
          appear: appear
        }, animation)
      });
    }), EndView ? jsx(AnimationEndView, {
      record: record,
      EndView: EndView,
      appear: appear
    }) : null);
  }));
});