yiji-dolphin-timeline v0.0.11

YIJI-DOLPHIN-TIMELINE 易辑 时间轴组件

项目简介

时间轴组件，初版，通过一个时间序列请求函数，生成时间轴，并在当前选中时间切换的时候，触发事件，在事件的回调函数中返回当前选中的时间。

主要功能

1. 点击时间轴刻度或点击向前、向后按钮切换当前选中时间；
2. 点击播放-暂停按钮，在起始与结束范围内，自动顺序切换当前选中时间 或 暂停切换；
3. 拖拽起始或结束拖柄，更改播放时的起始与结束范围；
4. 点击倍速按钮，切换播放倍速；
5. 点击日期按钮，更新时间轴（未完成）；
6. 点击步长按钮，切换时间轴步长（未完成）；
7. 点击设置按钮，配置数据到达、数值告警（未完成）、预警发布（未完成）、数据类型切换开关；

注意：所有未完成功能请在实例化时，初始配置为关闭。

Installation

1. 安装 npm install yiji-dolphin-timeline;
2. 引入功能 import TimeLine from 'yiji-dolphin-timeline';
3. 引入样式 import 'yiji-dolphin-timeline/dist/main.min.css';

API

参数

构造函数参数

interface ConstructorConfig {
  // 当前选中标识变化时触发的事件回调函数，必填，参数为当前选中时间的字符串
  onChange: (value: string) => void;
  // 获取时间序列的请求函数，必填
  fetchTimeDataFunc: () => Promise<{ axis: { time: string }[]; forecastTime: string }>;
  // 获取数据到达情况的请求函数，选填
  fetchDataArrivedFunc?: () => Promise<{ time: string; dataArrived: boolean }[]>;
  // 播放暂停按钮，初始化配置，选填
  // default 默认为播放还是暂停状态，PlayPauseStatusType 类型可选值为'play' | 'pause'
  playPauseButton?: { default?: PlayPauseStatusType };
  // 倍速按钮，初始化配置，选填
  // show 是否显示倍速按钮
  // default 默认选中的倍速，SpeedLabelType 可选值为 0.5x、1.0x、1.5x、2.0x
  speedButton?: { show?: boolean; default?: SpeedLabelType };
  // 日期按钮，初始化配置，选填
  // show 是否显示日期按钮
  dateButton?: { show?: boolean };
  // 步长按钮，初始化配置，选填
  // show 是否显示步长按钮
  // default 默认选中的步长，StepLabelType 可选值为 1h、3h、6h、12h、24h
  stepButton?: { show?: boolean; default?: StepLabelType };
  // 设置按钮，初始化配置，选填
  settingsButton?: {
    // 是否显示设置按钮
    show?: boolean;
    // 是否显示数据到达开关
    showDataArrived?: boolean;
    // 数据到达开关默认状态
    defaultDataArrived?: boolean;
    // 是否显示数值告警开关
    showDataAlarm?: boolean;
    // 数值告警开关默认状态
    defaultDataAlarm?: boolean;
    // 是否显示预警发布开关
    showDataWarning?: boolean;
    // 预警发布开关默认状态
    defaultDataWarning?: boolean;
    // 是否显示数据类型开关
    showDataType?: boolean;
    // 数据类型开关默认状态
    defaultDataType?: boolean;
  };
  // 主轴初始化配置
  axis?: {
    // 默认当前选中标志时间
    defaultCurrentMarkerTime?: string;
    // 默认播放起始范围时间
    defaultStartHandleTime?: string;
    // 默认播放结束范围时间
    defaultEndHandleTime?: string;
    // 默认主轴刻度标签间隔
    defaultLabelGap?: number;
    // 刻度标签格式，与dayjs时间format相同，默认为'HH:mm'
    axisLabelFormat?: string;
    // 刻度气泡格式，与dayjs时间format相同，默认为'MM/DD HH:mm'
    axisTooltipFormat?: string;
  };
  // 主题色 默认为dark
  theme?: "light" | "dark";
}

属性

方法

示例

// 渲染时间轴的根节点
const rootNode = document.getElementById('demo');
// 数据是否到达外部变量
let dataArrived: { time: string }[] = [];

// 实例化时间轴
const timeLine = new TimeLine(rootNode, {
  // 当前时间标识变化时触发事件
  onChange: (value) => {
    console.log(value);
    timeLine.isRenderReady = false;
    setTimeout(() => {
      timeLine.isRenderReady = true;
    }, 2000);
  },
  // 播放按钮配置
  playPauseButton: {
    // 初始为暂停状态
    default: 'pause',
  },
  // 倍速按钮配置，初始设置为2倍速
  speedButton: { default: '2.0x' },
  // 步长按钮配置，初始设置为不显示
  stepButton: { show: false },
  // 日期按钮配置，初始设置为不显示
  dateButton: { show: false },
  // 设置按钮配置
  settingsButton: {
    // 显示设置按钮
    show: true,
    // 数据是否到达开关，初始状态为开
    defaultDataArrived: true,
    // 不显示数值告警开关
    showDataAlarm: false,
    // 不显示预报发布开关
    showDataType: false,
    // 不显示数据类型开关
    showDataWarning: false,
  },
  // 主轴设置
  axis: {
    // 开始范围拖柄初始所在时间刻度
    defaultStartHandleTime: '2020-03-05 06:00:00',
    // 当前选中标识初始所在时间刻度
    defaultCurrentMarkerTime: '2020-03-06 00:00:00',
    // 结束范围拖柄初始所在时间刻度
    defaultEndHandleTime: '2020-03-07 00:00:00',
    // 主轴标签默认显示间隔
    defaultAxisLabelGap: 2,
    // 刻度标签样式
    axisLabelFormat: 'HH',
    // 刻度气泡样式
    axisTooltipFormat: 'MM-DD HH:mm',
  },
  // 配置主题色
  theme: 'light',
  // 获取时间序列请求函数
  fetchTimeDataFunc: () =>
    fetch(`${BASE_URL}/timeline/axis`)
      .then((res) => {
        return res.json();
      }).then((data) => {
        // 将请求到的时间序列赋值给外部变量，作为数据到达请求的参数
        dataArrived = data.data;
        return data.data;
      }),
  // 获取数据是否到达请求函数
  fetchDataArrivedFunc: () => {
    const obj = new URLSearchParams();
    obj.append('time', JSON.stringify(dataArrived));
    return fetch(`${BASE_URL}/timeline/data-arrived`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
      },
      body: new URLSearchParams(`time=${JSON.stringify(dataArrived)}`),
    })
      .then((res) => {
        return res.json();
      })
      .then((res) => res.data);
  },