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

F6 plugin

import { __assign } from "tslib";
import { createUI } from '@antv/f6-ui';
import createControlbar from './control-bar';
import { createSimpleProgressBar, createTickProgressBar, createTrendProgressBar } from './progress-bar';
/**
 * 创建简单模式的时间轴
 */

export 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 = createSimpleProgressBar({
    data: data,
    width: width,
    slider: __assign({
      width: slider.width || width - padding * 2,
      paddingTop: 0
    }, slider),
    sliderTick: __assign({
      width: width - padding * 2
    }, sliderTick)
  });
  return createTimeBarUI({
    width: width,
    group: group,
    control: __assign({
      wrapperWidth: width
    }, controllerCfg)
  }, timeBar);
}
/**
 * 创建刻度模式时间轴
 */

export 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 = createTickProgressBar({
    data: data,
    tick: __assign({
      width: width - padding
    }, tick)
  });
  return createTimeBarUI({
    width: width,
    group: group,
    control: __assign({
      wrapperWidth: width
    }, controllerCfg)
  }, tickBar);
}
/**
 * 创建趋势时间轴
 */

export 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 = createTrendProgressBar({
    data: data,
    width: width,
    slider: __assign({
      width: slider.width || width - padding * 2,
      paddingTop: 0
    }, slider || {}),
    sliderTick: __assign({
      width: width - padding * 2
    }, sliderTick || {}),
    trend: __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: __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 = createUI(html, css, group);
  var controlBar = createControlbar(control);
  uiTree.appendChild(progressBar, controlBar);
  return uiTree;
}