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

Charts for mobile visualization.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _jsx = require("../../../jsx");
var _f2Graphic = require("@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 = _f2Graphic.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 (0, _jsx.jsx)("arc", {
      attrs: (0, _objectSpread2.default)({
        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 (0, _jsx.jsx)("polyline", {
    attrs: (0, _objectSpread2.default)({
      points: points
    }, line)
  });
};
var _default = function _default(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 = _f2Graphic.Vector2.length([end.x - center.x, end.y - center.y]);
  return (0, _jsx.jsx)("group", null, grid ? ticks.map(function (tick) {
    var points = tick.points,
      gridStyle = tick.gridStyle;
    var end = points[points.length - 1];
    return (0, _jsx.jsx)("line", {
      attrs: (0, _objectSpread2.default)((0, _objectSpread2.default)({
        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 (0, _jsx.jsx)("line", {
      attrs: (0, _objectSpread2.default)({
        x1: end.x,
        y1: end.y,
        x2: offsetPoint.x,
        y2: offsetPoint.y
      }, tickLine)
    });
  }) : null, (0, _jsx.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 (0, _jsx.jsx)("text", {
      attrs: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
        x: offsetPoint.x,
        y: offsetPoint.y,
        text: text
      }, getTextAlignInfo(center, end)), label), labelStyle)
    });
  }) : null);
};
exports.default = _default;