@antv/f6-plugin/lib/time-bar/ui/slider/slide-ticker.js

F6 plugin

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = createTiker;

var _f6Ui = require("@antv/f6-ui");

var _const = require("../../utils/const");

function createTiker(data, tickWidth, sliderTick) {
  var _a = sliderTick.width,
      width = _a === void 0 ? 0 : _a;
  var tickLabelStyle = Object.assign({}, _const.TICK_LABEL_STYLE, sliderTick.textStyle);
  var tickLineStyle = Object.assign({}, _const.TICK_LINE_STYLE, sliderTick.lineStyle);
  var count = Math.floor(tickLabelStyle.width / tickWidth);
  var html = "\n  <div class='tiker'>\n    " + data.reduce(function (prev, cur, index) {
    return prev += "\n        <div class='single-tick'> \n          " + (index % count === 0 ? "\n          <shape class='line' type='rect' />\n          <div class='text'>" + cur.date + "</div>" : '') + "\n        </div> \n      ";
  }, '') + "\n  </div>";
  var css = "\n    .tiker {\n      width: " + width + ";\n      background-opacity: 0;\n      display: flex;\n      flex-direction: row;\n      z-index: 1;\n      color: black;\n    }\n    .single-tick {\n      width: " + tickWidth + ";\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      align-items: flex-start;\n    }\n    .single-tick shape{\n      width: " + tickLineStyle.width + ";\n      height: " + tickLineStyle.height + ";\n      background: " + tickLineStyle.fill + ";\n    }\n    .single-tick .text {\n      height: " + tickLabelStyle.fontSize + ";\n      text-align: center;\n      font-size: " + tickLabelStyle.fontSize + ";\n      width: 0; \n      color: " + tickLabelStyle.fill + ";\n    }\n    text {\n      opacity: " + tickLabelStyle.opacity + ";;\n      white-space: nowrap;\n    }\n  ";
  return (0, _f6Ui.createSegmentNode)(html, css);
}