@blueking/bk-down-sample

可针对时序大数据场景下，一种内置静态，多线程快捷降采样的方案，内置chart.js 采样插件， web worker等。

插件提供了什么功能 ？

1. 采样算法:

• 平均采样

• LTTB 最大三角形三个桶

2. 采样方式

• 给发采样阀值返回采样阀值的数据条数

• 在图表频繁绘制，例如分辨率变化等场景下，提供mipmap结构，可根据图表分辨率动态下采样折线图数据。从折线图数据创建类似 mipmap 的数据结构，并根据图表分辨率和 x 轴比例动态选择数据的下采样版本。

3. 可扩展内置的 web worker 采样方案 可直接引入插件中的 openWorker 函数直接开启单独线程处理采样数据，而不影响主进程渲染

4. 提供chart.js 采样插件，统一全部配置，完全继承所有采样api，只需要注册插件，开启配置，所有采样方法都在内部实现。

5. 纯静态采样api

所有的采样api函数 都封装在统一的静态类中，可只引用采样类传递配置项和数据，即可在任何场景下进行采样。

配置

  // 开启采样
  enabled: true, 
  // openMipMap 为false 情况下当数据出现变化是否自动采样表识
  auto: true, 
  // 是否外部提前使用web worker 进行数据采样，开启时再 init生命周期内不会对数据进行采样
  initWork: false, 
  // 开启 mipMap 结构采样
  openMipMap: false, 
  // 重置为原数据
  restoreOriginalData: false, 
  // 数据点之间所需的最小距离（以像素为单位）。默认值：1 像素
  desiredDataPointDistance: 1, 
  // 最少数量的数据点。限制
  minNumPoints: 100,
  // 剔除数据到 x 比例的显示范围， 当出现缩放时，数据变化过程中对数据进行二次过滤，剔除小于或者大于 展示区的值
  cullData: true,
  // openMipMap 为false的情况 该值为true 会在每次采样渲染结束后将采样数据重置为原始数据
  preferOriginalData: false

使用

chart.js 使用

 // 全局注册
 import Chart from 'charts.js';
 import register from '@blueking/bk-down-sample'
 register(Chart)


 // 局部注册
 import chart-plugin-down-sample from '@blueking/bk-down-sample/lib/chart-plugin-down-sample'

 options: {
   plugins: {
     downSample: chart-plugin-down-sample
   }
 }

静态使用

 import sampleUtils from '@blueking/bk-down-sample/lib/sampleUtils'

 sampleUtils.createSample(data, options)

 // 直接调用采样方法 
 sampleUtils.createData(data, options)
 sampleUtils.createDataMipMap(data, options)
 sampleUtils.downSample(data, minNumPoints)
 ...

web worker

 使用 webpack 将 @blueking/bk-down-sample/lib/sampleWorker.js 打包到项目中
 然后将打包后的文件地址传入到 openWorker 函数中开启默认的worker
 import openWorker from '@blueking/bk-down-sample/lib/openWorker'

 const createSample = openWorker(url)

 createSample(data, options, (data) => {
   console.log(data)
   new Charts(context, {
     ...
   })
 })

自定义web worker

 使用 webpack 将 @blueking/bk-down-sample/lib/sampleWorker.js 打包到项目中
 然后将打包后的文件地址传入到 openWorker 函数中开启默认的worker
 const work = new Worker(url);
 // 通信格式固定
 work.postMessage({ eventName: 'downSample', datasets: data, options  });

  work.addEventListener('message', (e) => {
    // 自定义处理
  });