@antv/f2/lib/components/axis/rect/top.js

Charts for mobile visualization.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _tslib = require("tslib");
var _util = require("@antv/util");
var _fEngine = require("@antv/f-engine");
var _default = exports.default = function _default(props, context) {
  var originTicks = props.ticks,
    coord = props.coord,
    style = props.style;
  var px2hd = context.px2hd;
  var left = coord.left,
    top = coord.top,
    right = coord.right;
  var grid = style.grid,
    tickLine = style.tickLine,
    line = style.line,
    labelOffset = style.labelOffset,
    label = style.label,
    symbol = style.symbol;
  var ticks = originTicks.filter(function (d) {
    return !isNaN(d.value);
  });
  var symbols = (0, _util.isArray)(symbol) ? symbol : [symbol];
  var _a = tickLine || {},
    tickLineLength = _a.length,
    tickLineStyle = (0, _tslib.__rest)(_a, ["length"]);
  return (0, _fEngine.jsx)("group", null, grid ? ticks.map(function (tick) {
    var points = tick.points,
      tickValue = tick.tickValue,
      gridStyle = tick.gridStyle;
    var start = points[0];
    var end = points[points.length - 1];
    return (0, _fEngine.jsx)("line", {
      key: "grid-".concat(tickValue),
      style: (0, _tslib.__assign)((0, _tslib.__assign)({
        x1: start.x,
        y1: start.y,
        x2: end.x,
        y2: end.y
      }, grid), gridStyle)
    });
  }) : null, tickLine && tickLine.length ? ticks.map(function (tick) {
    var points = tick.points,
      tickValue = tick.tickValue;
    var end = points[points.length - 1];
    return (0, _fEngine.jsx)("line", {
      key: "tickLine-".concat(tickValue),
      style: (0, _tslib.__assign)({
        x1: end.x,
        y1: end.y,
        x2: end.x,
        y2: end.y - px2hd(tickLineLength)
      }, tickLineStyle)
    });
  }) : null, symbols[0] ? (0, _fEngine.jsx)("marker", {
    style: (0, _tslib.__assign)((0, _tslib.__assign)({
      x: right,
      y: top,
      transform: 'rotate(90deg)',
      transformOrigin: '50% 50%'
    }, symbols[0]), {
      symbol: symbols[0].type
    })
  }) : null, line ? (0, _fEngine.jsx)("line", {
    style: (0, _tslib.__assign)({
      x1: left,
      y1: top,
      x2: right,
      y2: top
    }, line)
  }) : null, symbols[1] ? (0, _fEngine.jsx)("marker", {
    style: (0, _tslib.__assign)((0, _tslib.__assign)({
      x: left,
      y: top,
      transform: 'rotate(-90deg)',
      transformOrigin: '50% 50%'
    }, symbols[0]), {
      symbol: symbols[1].type
    })
  }) : null, label ? ticks.map(function (tick, _index) {
    var tickValue = tick.tickValue,
      points = tick.points,
      text = tick.text,
      labelStyle = tick.labelStyle;
    var end = points[points.length - 1];
    return (0, _fEngine.jsx)("text", {
      key: "text-".concat(tickValue),
      style: (0, _tslib.__assign)((0, _tslib.__assign)({
        x: end.x,
        y: end.y - labelOffset,
        textAlign: 'center',
        textBaseline: 'bottom',
        text: text
      }, label), labelStyle)
    });
  }) : null);
};