@antv/f2/es/components/axis/rect/bottom.js

Charts for mobile visualization.

import { __assign, __rest } from "tslib";
import { jsx } from '@antv/f-engine';
import { isArray } from '@antv/util';
export default (function (props, context) {
  var ticks = props.ticks,
    coord = props.coord,
    style = props.style,
    animation = props.animation;
  var px2hd = context.px2hd,
    measureText = context.measureText;
  var left = coord.left,
    right = coord.right,
    bottom = coord.bottom;
  var grid = style.grid,
    tickLine = style.tickLine,
    line = style.line,
    labelOffset = style.labelOffset,
    label = style.label,
    symbol = style.symbol;
  var filterTicks = ticks.filter(function (d) {
    return !isNaN(d.value);
  });
  var symbols = isArray(symbol) ? symbol : [symbol];
  var _a = tickLine || {},
    tickLineLength = _a.length,
    tickLineStyle = __rest(_a, ["length"]);
  return jsx("group", null, grid ? filterTicks.map(function (tick) {
    var points = tick.points,
      tickValue = tick.tickValue,
      gridStyle = tick.gridStyle;
    var start = points[0];
    var end = points[points.length - 1];
    return jsx("line", {
      key: "grid-".concat(tickValue),
      style: __assign(__assign({
        x1: start.x,
        y1: start.y,
        x2: end.x,
        y2: end.y
      }, grid), gridStyle)
    });
  }) : null, tickLineLength ? filterTicks.map(function (tick) {
    var points = tick.points,
      tickValue = tick.tickValue;
    var start = points[0];
    return jsx("line", {
      key: "tickLine-".concat(tickValue),
      style: __assign({
        x1: start.x,
        y1: start.y,
        x2: start.x,
        y2: start.y + px2hd(tickLineLength)
      }, tickLineStyle)
    });
  }) : null, symbols[0] ? jsx("marker", {
    style: __assign(__assign({
      x: right,
      y: bottom,
      transform: 'rotate(90deg)',
      transformOrigin: '50% 50%'
    }, symbols[0]), {
      symbol: symbols[0].type
    })
  }) : null, line ? jsx("line", {
    style: __assign({
      x1: left,
      y1: bottom,
      x2: right,
      y2: bottom
    }, line)
  }) : null, symbols[1] ? jsx("marker", {
    style: __assign(__assign({
      x: left,
      y: bottom,
      transform: 'rotate(-90deg)',
      transformOrigin: '50% 50%'
    }, symbols[0]), {
      symbol: symbols[1].type
    })
  }) : null, label ? filterTicks.map(function (tick, index) {
    var points = tick.points,
      text = tick.text,
      tickValue = tick.tickValue,
      labelStyle = tick.labelStyle;
    var _a = points[0],
      x = _a.x,
      y = _a.y;
    var _b = (labelStyle || label || {}).align,
      align = _b === void 0 ? 'center' : _b;
    var textAttrs = __assign(__assign({
      x: x,
      y: y + labelOffset,
      textBaseline: 'top',
      text: text
    }, label), labelStyle);
    if (align === 'between') {
      if (index === 0) {
        textAttrs.textAlign = 'start';
      } else if (index === ticks.length - 1) {
        textAttrs.textAlign = 'end';
      } else {
        textAttrs.textAlign = 'center';
      }
    } else if (align === 'auto') {
      textAttrs.textAlign = 'center';
      var width = measureText(text, textAttrs).width;
      var halfWidth = width / 2;
      if (x - halfWidth < left) {
        textAttrs.x = left + width / 2;
      } else if (x + halfWidth > right) {
        textAttrs.x = right - width / 2;
      }
    } else {
      textAttrs.textAlign = align;
    }
    return jsx("text", {
      key: "text-".concat(tickValue),
      style: textAttrs,
      animation: animation || {
        appear: {
          easing: 'linear',
          duration: 300,
          delay: 0,
          property: ['fillOpacity'],
          start: {
            fillOpacity: 0
          },
          end: {
            fillOpacity: 1
          }
        },
        update: {
          easing: 'linear',
          duration: 450,
          delay: 0,
          property: ['x', 'y']
        },
        leave: {
          easing: 'linear',
          duration: 450,
          delay: 0,
          property: ['fillOpacity'],
          start: {
            fillOpacity: 1
          },
          end: {
            fillOpacity: 0
          }
        }
      }
    });
  }) : null);
});