@antv/f2/es/components/axis/polar/polar-x.js

Charts for mobile visualization.

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { jsx } from '../../../jsx';
import { Vector2 } from '@antv/f2-graphic';
// const { Vector2 } = G;
// 相对圆心偏移量的点
function getOffsetPoint(center, point, offset) {
  var vectorX = point.x - center.x;
  var vectorY = point.y - center.y;
  var vector = [vectorX, vectorY];
  var vectorLength = Vector2.length(vector);
  var offsetLength = vectorLength + offset;
  var x = vectorX / vectorLength * offsetLength;
  var y = vectorY / vectorLength * offsetLength;
  return {
    x: center.x + x,
    y: center.y + y
  };
}
// 获取文本的对齐方式
function getTextAlignInfo(center, point) {
  // 文本点向量
  var vector = [point.x - center.x, point.y - center.y];
  var align;
  var baseLine;
  // 水平对齐
  if (vector[0] > 0) {
    align = 'left';
  } else if (vector[0] < 0) {
    align = 'right';
  } else {
    align = 'center';
  }
  // 垂直对齐
  if (vector[1] > 0) {
    baseLine = 'top';
  } else if (vector[1] < 0) {
    baseLine = 'bottom';
  } else {
    baseLine = 'middle';
  }
  return {
    textAlign: align,
    textBaseline: baseLine
  };
}
var Line = function Line(props) {
  var line = props.line,
    gridType = props.gridType,
    center = props.center,
    radius = props.radius,
    ticks = props.ticks;
  if (!line) return null;
  if (gridType !== 'line') {
    return jsx("arc", {
      attrs: _objectSpread({
        x: center.x,
        y: center.y,
        r: radius
      }, line)
    });
  }
  var points = ticks.map(function (tick) {
    var points = tick.points;
    return points[points.length - 1];
  });
  // 头尾相连
  points.push(points[0]);
  return jsx("polyline", {
    attrs: _objectSpread({
      points: points
    }, line)
  });
};
export default (function (props) {
  var ticks = props.ticks,
    coord = props.coord,
    style = props.style,
    gridType = props.grid;
  var center = coord.center;
  var grid = style.grid,
    tickLine = style.tickLine,
    line = style.line,
    labelOffset = style.labelOffset,
    label = style.label;
  var firstTicks = ticks[0];
  var points = firstTicks.points;
  var end = points[points.length - 1];
  var radius = Vector2.length([end.x - center.x, end.y - center.y]);
  return jsx("group", null, grid ? ticks.map(function (tick) {
    var points = tick.points,
      gridStyle = tick.gridStyle;
    var end = points[points.length - 1];
    return jsx("line", {
      attrs: _objectSpread(_objectSpread({
        x1: center.x,
        y1: center.y,
        x2: end.x,
        y2: end.y
      }, grid), gridStyle)
    });
  }) : null, tickLine && tickLine.length ? ticks.map(function (tick) {
    var points = tick.points;
    var end = points[points.length - 1];
    var offsetPoint = getOffsetPoint(center, end, tickLine.length);
    return jsx("line", {
      attrs: _objectSpread({
        x1: end.x,
        y1: end.y,
        x2: offsetPoint.x,
        y2: offsetPoint.y
      }, tickLine)
    });
  }) : null, jsx(Line, {
    line: line,
    gridType: gridType,
    center: center,
    radius: radius,
    ticks: ticks
  }), label ? ticks.map(function (tick) {
    var points = tick.points,
      text = tick.text,
      labelStyle = tick.labelStyle;
    var end = points[points.length - 1];
    var offsetPoint = getOffsetPoint(center, end, labelOffset);
    return jsx("text", {
      attrs: _objectSpread(_objectSpread(_objectSpread({
        x: offsetPoint.x,
        y: offsetPoint.y,
        text: text
      }, getTextAlignInfo(center, end)), label), labelStyle)
    });
  }) : null);
});