@antv/f6-plugin/lib/time-bar/ui/index.js

F6 plugin

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.createSimpleTimeBarUI = createSimpleTimeBarUI;
exports.createTickUI = createTickUI;
exports.createTrendUI = createTrendUI;

var _tslib = require("tslib");

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

var _controlBar = _interopRequireDefault(require("./control-bar"));

var _progressBar = require("./progress-bar");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * 创建简单模式的时间轴
 */
function createSimpleTimeBarUI(_a) {
  var _b = _a.width,
      width = _b === void 0 ? 0 : _b,
      _c = _a.padding,
      padding = _c === void 0 ? 0 : _c,
      group = _a.group,
      _d = _a.data,
      data = _d === void 0 ? [] : _d,
      _e = _a.slider,
      slider = _e === void 0 ? {} : _e,
      _f = _a.controllerCfg,
      controllerCfg = _f === void 0 ? {} : _f,
      _g = _a.sliderTick,
      sliderTick = _g === void 0 ? {} : _g;
  var timeBar = (0, _progressBar.createSimpleProgressBar)({
    data: data,
    width: width,
    slider: (0, _tslib.__assign)({
      width: slider.width || width - padding * 2,
      paddingTop: 0
    }, slider),
    sliderTick: (0, _tslib.__assign)({
      width: width - padding * 2
    }, sliderTick)
  });
  return createTimeBarUI({
    width: width,
    group: group,
    control: (0, _tslib.__assign)({
      wrapperWidth: width
    }, controllerCfg)
  }, timeBar);
}
/**
 * 创建刻度模式时间轴
 */


function createTickUI(_a) {
  var group = _a.group,
      _b = _a.data,
      data = _b === void 0 ? [] : _b,
      width = _a.width,
      padding = _a.padding,
      _c = _a.controllerCfg,
      controllerCfg = _c === void 0 ? {} : _c,
      _d = _a.tick,
      tick = _d === void 0 ? {} : _d; // 创建刻度progressBar

  var tickBar = (0, _progressBar.createTickProgressBar)({
    data: data,
    tick: (0, _tslib.__assign)({
      width: width - padding
    }, tick)
  });
  return createTimeBarUI({
    width: width,
    group: group,
    control: (0, _tslib.__assign)({
      wrapperWidth: width
    }, controllerCfg)
  }, tickBar);
}
/**
 * 创建趋势时间轴
 */


function createTrendUI(_a) {
  var _b = _a.width,
      width = _b === void 0 ? 0 : _b,
      _c = _a.padding,
      padding = _c === void 0 ? 0 : _c,
      group = _a.group,
      _d = _a.data,
      data = _d === void 0 ? [] : _d,
      _e = _a.slider,
      slider = _e === void 0 ? {} : _e,
      _f = _a.controllerCfg,
      controllerCfg = _f === void 0 ? {} : _f,
      _g = _a.trend,
      trend = _g === void 0 ? {} : _g,
      _h = _a.sliderTick,
      sliderTick = _h === void 0 ? {} : _h; // 创建progressBar

  var progressBar = (0, _progressBar.createTrendProgressBar)({
    data: data,
    width: width,
    slider: (0, _tslib.__assign)({
      width: slider.width || width - padding * 2,
      paddingTop: 0
    }, slider || {}),
    sliderTick: (0, _tslib.__assign)({
      width: width - padding * 2
    }, sliderTick || {}),
    trend: (0, _tslib.__assign)({
      data: data === null || data === void 0 ? void 0 : data.map(function (item) {
        return item.value;
      })
    }, trend || {})
  }); // 创建TimeBar

  var timeBar = createTimeBarUI({
    width: width,
    group: group,
    control: (0, _tslib.__assign)({
      wrapperWidth: width
    }, controllerCfg)
  }, progressBar);
  return timeBar;
}
/**
 * 时间轴创建函数
 * @param param
 * @param progressBar // 进度条部分
 * @returns
 */


function createTimeBarUI(_a, progressBar) {
  var width = _a.width,
      group = _a.group,
      control = _a.control;
  var html = "<root></root>";
  var css = "\n  root {\n    /** \u76D2\u6A21\u578B **/\n    width: " + width + ";\n    /** flex **/\n    display: flex;\n    flex-direction: column;\n    flex-wrap: nowrap;\n    justify-content: center;\n    align-items: center;\n  }\n";
  var uiTree = (0, _f6Ui.createUI)(html, css, group);
  var controlBar = (0, _controlBar.default)(control);
  uiTree.appendChild(progressBar, controlBar);
  return uiTree;
}