@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函数 都封装在统一的静态类中，可只引用采样类传递配置项和数据，即可在任何场景下进行采样。

$3

`
// 开启采样
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
`

$3

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) => {
// 自定义处理
});
``