跳到主要内容

版本更新日志

时间轴范式组件的更新日志，格式参考自 keep a changelog。

[Unreleased]​

Added​

Changed​

Removed​

Fixed​

[0.5.0] - 2024-03-14​

Added​

Changed​

[0.4.0] - 2023-12-14​

Added​

[0.3.0] - 2023-09-20​

Added​

  • 配置项
    • 新增 config.axis.tickLine.sub.minSpace 配置项用来配置次要刻度的最小间距
    • 新增 config.axis.tickValue.minSpace 配置项用来配置刻度值标签重叠检测的最小间距
    • 新增 config.axis.tickValue.hideOverlap 配置项用来配置刻度值标签是否隐藏重叠的标签
    • 新增 config.operation.replayButton 配置项用来配置重新播放按钮
    • 新增 config.operation.playButton.text 配置项用来配置按钮的 title 属性，鼠标悬浮显示
    • 新增 config.operation.pauseButton.text 配置项用来配置按钮的 title 属性，鼠标悬浮显示

Changed​

  • Breaking：刻度标签的重叠检测隐藏策略新增一条规则

    • 以前
      • 首尾两个刻度值必须显示
      • 根据最小间距判断是否重叠，重叠则隐藏
    • 现在新增一条规则
      • 以第一个和第二个显示的标签之间隐藏标签个数为基准，隐藏后续标签，即实现 0 2 4 6 8 这样显示的刻度分布比较均匀的效果

[0.2.15] - 2022-11-30​

Fixed​

  • UI
    • 调整字体的字重为 font-weight: 500

[0.2.14] - 2022-11-14​

Added​

[0.2.13] - 2022-11-10​

Fixed​

  • 修复一些 IE 浏览器中的兼容性问题，并提供一个额外的 classList API 的 Polyfill 供可选使用

[0.2.12] - 2022-11-03​

Fixed​

  • 阻止移动端 touchmove 默认事件行为

[0.2.11] - 2022-10-28​

Fixed​

  • UI
    • 修复 config.axis.tickValue.formatter 返回空字符串时刻度标签显示异常

[0.2.10] - 2022-10-25​

Fixed​

  • 交互
    • 优化 PC 端的时间轴拖动交互热区范围至全页面

[0.2.9] - 2022-10-10​

Fixed​

  • UI
    • 由于字体加载时机导致 DOM 测量不准确，在部分 iOS 机型上会高频率出现 UI 错位问题

[0.2.8] - 2022-09-14​

Fixed​

  • API
    • resize() 方法连续调用时由于节流处理的逻辑，导致最后一次不生效

[0.2.7] - 2022-08-24​

Added​

添加时间轴按范围禁止播放功能。

  • API
    • 添加时间轴实例 setIndexRange(indexRange: [number, number]) API
  • 配置项
    • 添加 config.axis.action.dataIndexRange 配置项

Fixed​

  • API
    • play() 方法在没有传递 dataIndex 参数时，当前处于最大索引处会从头开始播放，否则会从当前位置开始播放，逻辑统一为无论当前是否处于最大索引处，均会在当前索引位置下一个索引处开始播放

[0.2.6] - 2022-08-22​

Fixed​

  • UI
    • 当某个刻度值处的数据值为 0 时且为主次要刻度模式时会导致刻度值标签显示为 '[object Object]'
  • 事件
    • config.axis.action.enableDragChange: true 时触发的 change 事件的 event.timeData 值错误

[0.2.5] - 2022-08-16​

Fixed​

  • UI
    • pc 主题下按钮的禁止状态文本颜色错误

[0.2.4] - 2022-08-12​

Added​

  • 发布时添加类型定义文件（.d.ts）

[0.2.3] - 2022-08-12​

Fixed​

  • API
    • destroy() 方法在调用后，没有清理掉添加在 DOM 容器上的 CSS 类名

[0.2.2] - 2022-07-29​

Fixed​

  • 兼容性问题
    • 第三方依赖包为 es6 语法产物，在打包时也将依赖编译为 es5

[0.2.1] - 2022-07-26​

Added​

  • 配置项
    • 添加 config.animation.causeBy 配置项，满足在某些场景下部分交互行为不需要触发动画的要求

Fixed​

  • 事件
    • change 事件在开启 enableDragChange 时触发事件没有 causeBy 值的问题

[0.2.0] - 2022-07-15​

Added​

  • 主题
    • 添加移动端窄版布局相关的主题
      • mobile-compact
      • mobile-compact-dark
      • mobile-compact-withValueOuter
      • mobile-compact-withValueOuter-dark
    • 添加移动端简单版布局相关的主题
      • mobile-simple
      • mobile-simple-dark
  • 交互
    • 添加播放速度（倍速）调整功能
      • 添加 changeSpeed 事件
      • 添加 getSpeed() 实例 API
      • 添加 setSpeed(speed) 实例 API
      • 添加 config.operation.speed 配置项
      • 添加 config.animation.speed 配置项

Changed​

  • 主题
    • (Break Change)：PC 端主题默认样式更改为 iFinD 客户端的样式规范
      • pc
      • pc-dark

Fixed​

  • 优化修复一些细节性问题

[0.1.1] - 2022-07-07​

Added​

  • 配置项
    • 新增 config.axis.tooltip.arrowStyle 和 config.axis.tooltip.textStyle 配置，方便自定义 tooltip 的样式

Fixed​

  • 配置项
    • 修复 style 配置有时不会生效（是因为 CSS 优先级问题导致的）
  • 交互
    • 修复在有滚动条的页面中 tooltip 位置显示错误的问题

[0.1.0] - 2022-07-01​

Added​

  • 交互

    • 拖动时间轴滑块实时触发 change 事件

      该交互默认关闭，需配置新增的 option.config.axis.action.enableDragChange = true 配置项开启，同时 change 事件新增一个 causeBy 字段可用来判断是否是拖动滑块时触发的

Changed​

  • 事件

    • (Break Change)：pause 事件新增 causeBy 字段表示引起暂停的原因，触发时机发生变化

      Before

      在时间轴暂停状态下，由于交互行为导致触发 change 事件时，pause 事件也会同步触发.

      Now

      仅在时间轴处于播放状态时 pause 事件才会触发，由于交互行为导致触发 change 事件时，pause 先于 change 事件触发

    • change 事件新增 causeBy 字段表示引起变动的原因，新增 actionId 字段用来区分多次连续交互

    /** 事件定义 */
    export type EventDefinition = {
      [EVENT_TYPE_MAP.PAUSE]: (event: {
        type: typeof EVENT_TYPE_MAP.PAUSE;
        index: number;
        timeData: TimeDataItem;
        /** 主动的交互行为导致暂停的原因 */
        causeBy?:
          | 'apiUpdate'
          | 'pause'
          | 'previous'
          | 'next'
          | 'axisClick'
          | 'axisMarkerDrag';
      }) => void;
      [EVENT_TYPE_MAP.CHANGE]: (event: {
        type: typeof EVENT_TYPE_MAP.CHANGE;
        index: number;
        timeData: TimeDataItem;
        /** 引起时间轴变化的原因 */
        causeBy?:
          | 'apiUpdate'
          | 'play'
          | 'previous'
          | 'next'
          | 'axisClick'
          | 'axisMarkerDrag';
        /** 交互 id，用来区分多次连续的交互行为 */
        actionId?: string;
      }) => void;
    };

Fixed​

  • 配置项
    • 修改 config.axis.tooltip.style 对样式影响的范围
  • 交互
    • 在播放状态下，点击跳转和拖动滑块，时间轴应该先暂停掉

[0.0.7] - 2022-06-27​

Fixed​

  • API
    • 修复 destroy() 调用之后没有卸载挂载在 window 上的 resize 事件导致报错的问题

[0.0.6] - 2022-06-23​

Added​

  • 配置项
    • 新增移动端夜间主题（mobile-dark, mobile-withValueOuter-dark）

Fixed​

  • 配置项
    • 修复子刻度自定义样式（config.axis.tickLine.sub.style）不生效的问题

[0.0.5] - 2022-06-21​

Added​

  • 配置项
    • 添加 mobile-withValueOuter 主题，目前可用主题为 'mobile' | 'mobile-withValueOuter' | 'pc' | 'pc-dark'

Changed​

  • 配置项
    • config.axis.tickValue.formatter(timeData: TimeDataItem) 更改为 config.axis.tickValue.formatter(timeData: TimeDataItem, index: number)
    • config.axis.tooltip.formatter(timeData: TimeDataItem) 更改为 config.axis.tooltip.formatter(timeData: TimeDataItem, index: number)

[0.0.4] - 2022-06-20​

Fixed​

  • 修复 pause 事件在时间轴自动播放结束后不触发的问题

[0.0.3] - 2022-06-16​

Changed​

  • PC 端 的 tickValue.formatter 配置项去掉 5 个字符的限制

[0.0.2] - 2022-06-16​

Added​

新增播放区间限制功能。

  • 配置项
    • 添加 config.dataIndexRange, config.axis.progressRange 配置项
  • API
    • getCurrentIndex() 获取当前数据索引位置
    • getIndexRange() 获取数据索引区间，开闭 [,)
  • 事件
    • on('changeRange', (event) => {}) 数据索引区间变动 开闭 [,)

Fixed​

  • update(dataIndex) API 方法在调用时同时将时间轴的状态更改为暂停
  • 修复 tickValue.style 样式配置无效的问题

[0.0.1] - 2022-06-10​

首次发布。