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

F6 plugin

import { __extends } from "tslib";
import { createSimpleTimeBarUI, createTickUI, createTrendUI } from './ui';
import PluginBase from '../base';
import { throttle } from '@antv/util';
import { subscribe, unsubscribeAll } from './dispatcher';
import { SLIDER_END, SLIDER_START } from './utils/const';

var TimeBar =
/** @class */
function (_super) {
  __extends(TimeBar, _super);

  function TimeBar(cfg) {
    return _super.call(this, cfg) || this;
  }

  TimeBar.prototype.getDefaultCfgs = function () {
    return {
      className: 'f6-component-timebar',
      padding: 10,
      type: 'trend',
      data: [],
      trend: {
        smooth: true
      },
      controllerCfg: {
        speed: 1
      },
      slider: {
        start: SLIDER_START,
        end: SLIDER_END
      },
      tick: {
        start: SLIDER_START,
        end: SLIDER_END
      },
      filterEdge: false
    };
  };

  TimeBar.prototype.init = function () {
    var _this = this;

    setTimeout(function () {
      _this.render();

      _this.initEvent();
    });
  };

  TimeBar.prototype.filterData = function (evt) {
    var _a;

    var value = evt.value;
    var trendData = this.get('data');

    if (!trendData || trendData.length === 0) {
      console.warn('请配置 TimeBar 组件的数据');
      return;
    }

    var rangeChange = this.get('rangeChange');
    var graph = this.get('graph');
    var min = Math.round(trendData.length * value[0]);
    var max = Math.round(trendData.length * value[1]);
    max = max >= trendData.length ? trendData.length - 1 : max;
    min = min >= trendData.length ? trendData.length - 1 : min;
    var tickLabelFormatter = (_a = this._cfgs.tick) === null || _a === void 0 ? void 0 : _a.tickLabelFormatter;
    var minText = tickLabelFormatter ? tickLabelFormatter(trendData[min]) : trendData[min].date;
    var maxText = tickLabelFormatter ? tickLabelFormatter(trendData[max]) : trendData[max].date;

    if (rangeChange) {
      rangeChange(graph, minText, maxText);
    } else {
      // 自动过滤数据，并渲染 graph
      if (!this.cacheGraphData || this.cacheGraphData.nodes && this.cacheGraphData.nodes.length === 0) {
        this.cacheGraphData = graph.get('data'); // graph.save() as GraphData;
      } // 过滤不在 min 和 max 范围内的节点


      var filterData = this.cacheGraphData.nodes.filter(function (d) {
        return d.date >= trendData[min].date && d.date <= trendData[max].date;
      });
      var nodeIds_1 = filterData.map(function (node) {
        return node.id;
      });
      var fileterEdges = [];

      if (this.cacheGraphData.edges) {
        // 过滤 source 或 target 不在 min 和 max 范围内的边
        fileterEdges = this.cacheGraphData.edges.filter(function (edge) {
          return nodeIds_1.includes(edge.source) && nodeIds_1.includes(edge.target);
        });

        if (this.get('filterEdge')) {
          fileterEdges = fileterEdges.filter(function (edge) {
            return edge.date >= trendData[min].date && edge.date <= trendData[max].date;
          });
        }
      }

      graph.changeData({
        nodes: filterData,
        edges: fileterEdges
      });
    }
  };

  TimeBar.prototype.render = function () {
    var _a = this._cfgs,
        data = _a.data,
        width = _a.width,
        padding = _a.padding,
        type = _a.type,
        trend = _a.trend,
        slider = _a.slider,
        controllerCfg = _a.controllerCfg,
        tick = _a.tick,
        sliderTick = _a.sliderTick;
    var graph = this.get('graph');
    var group = graph.get('uiGroup');
    var timebar = null;

    switch (type) {
      case 'trend':
        timebar = createTrendUI({
          group: group,
          width: width,
          padding: padding,
          data: data,
          trend: trend,
          slider: slider,
          controllerCfg: controllerCfg,
          sliderTick: sliderTick
        });
        break;

      case 'tick':
        timebar = createTickUI({
          group: group,
          width: width,
          padding: padding,
          tick: tick,
          data: data,
          controllerCfg: controllerCfg
        });
        break;

      case 'simple':
        timebar = createSimpleTimeBarUI({
          group: group,
          width: width,
          padding: padding,
          slider: slider,
          data: data,
          controllerCfg: controllerCfg,
          sliderTick: sliderTick
        });
        break;
    } // 移动到左下角


    var graphHeight = graph.get('height');
    group.translate(0, graphHeight - timebar.height);
  };

  TimeBar.prototype.initEvent = function () {
    subscribe('RANGE_CHANGE', throttle(this.filterData.bind(this), 200, {
      trailing: true,
      leading: true
    }));
  };

  TimeBar.prototype.destroy = function () {
    unsubscribeAll();
  };

  return TimeBar;
}(PluginBase);

export default TimeBar;