feat: support adding data forward and backward. #442 #472 #509

klinecharts · Mar 3, 2024 · 58c9c6f · 58c9c6f
1 parent bf17825
commit 58c9c6f
Show file tree

Hide file tree

Showing 16 changed files with 305 additions and 118 deletions.
diff --git a/docs/.vitepress/components/Tag.vue b/docs/.vitepress/components/Tag.vue
@@ -0,0 +1,15 @@
+<template>
+  <span class="Tag"><slot></slot></span>
+</template>
+
+<style scoped>
+.Tag {
+  vertical-align: middle;
+  padding: 3px 6px;
+  font-size: 12px;
+  border-radius: 3px;
+  background-color: var(--vp-c-indigo-1);
+  margin: auto;
+  color: #fff;
+}
+</style>
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
@@ -4,6 +4,7 @@ import Theme from 'vitepress/theme'
 
 import HomeSponsor from '../components/HomeSponsor.vue'
 import NotFound from '../components/NotFound.vue'
+import Tag from '../components/Tag.vue'
 
 import './style.css'
 
@@ -17,6 +18,7 @@ export default {
     })
   },
   enhanceApp({ app, router, siteData }) {
+    app.component('Tag', Tag)
     // ...
   }
 }
diff --git a/docs/en-US/guide/chart-api.md b/docs/en-US/guide/chart-api.md
@@ -342,7 +342,7 @@ Add a overlay.
 ```
 Get overlays for chart support.
 
-## registerXAxis(axis)
+## registerXAxis(axis) <Tag>v9.8.0+</Tag>
 ```typescript
 (
   axis: {
@@ -360,7 +360,7 @@ Add custom x-axis.
   - `name` axis name
   - `createTicks` create ticks
 
-## registerYAxis(axis)
+## registerYAxis(axis) <Tag>v9.8.0+</Tag>
 ```typescript
 (
   axis: {
@@ -464,7 +464,7 @@ Format date. `format`, such as 'YYYY-MM-DD HH:mm:ss'.
 ```
 Format thousands separator.
 
-### utils.formatFoldDecimal(value, threshold)
+### utils.formatFoldDecimal(value, threshold) <Tag>v9.8.0+</Tag>
 ```typescript
 (value: string | number, threshold: number) => string
 ```

diff --git a/docs/en-US/guide/instance-api.md b/docs/en-US/guide/instance-api.md
@@ -178,6 +178,9 @@ Add new data, this method will clear the chart data, no need to call the clearDa
 - `dataList` is an array of K-line data. For details of the data type, please refer to [data](./datasource.md)
 - `more` tells the chart whether there is more historical data, can be defaulted, the default is true
 - `callback` success callback
+::: warning Note
+`callback` has been deprecated since version 9.8.0, use `subscribeAction('onDataReady', () => {})` instead.
+:::
 
 
 ## applyMoreData(dataList, more, callback)
@@ -200,6 +203,9 @@ Add more historical data.
 - `dataList` is an array of K-line data. For details of the data type, please refer to [data](./datasource.md)
 - `more` tells the chart whether there is more historical data, can be defaulted, the default is true
 - `callback` success callback
+::: warning Note
+This api has been deprecated since version 9.8.0.
+:::
 
 
 ## updateData(data, callback)
@@ -220,6 +226,9 @@ Add more historical data.
 Update data. Currently, only the timestamp of the last piece of data will be matched. If it is the same, it will be overwritten, and if it is different, it will be appended.
 - `data` single k-line data, please refer to [data](./datasource.md) for details of data type
 - `callback` success callback
+::: warning Note
+`callback` has been deprecated since version 9.8.0, use `subscribeAction('onDataReady', () => {})` instead.
+:::
 
 
 ## getDataList()
@@ -249,7 +258,28 @@ Clear the data of the chart. Generally, it is not necessary to call it manually.
 (cb: (timestamp: number | null) => void) => void
 ```
 Set load more callback function.
-- `cb` is a callback method, `timestamp` is the timestamp of the first piece of data.
+- `cb` is a callback method, `timestamp` is the timestamp of the first piece of data
+::: warning Note
+This api has been deprecated since version 9.8.0, use `setLoadDataCallback` instead.
+:::
+
+
+## setLoadDataCallback(cb) <Tag>v9.8.0+</Tag>
+```typescript
+(
+  cb: (params: { 
+    type: 'forward' | 'backward'
+    data: Nullable<KLineData>
+    callback: (dataList: KLineData[], more?: boolean) => void
+  }) => void
+) => void
+```
+Set auto load data callback
+- `cb` callback
+  - `params` params
+    - `type` forward or backward
+    - `data` boundary data
+    - `callback` used for returning data to chart
 
 ## createIndicator(value, isStack, paneOptions, callback)
 ```typescript
@@ -345,7 +375,7 @@ Create a technical indicator, the return value is a string that identifies the w
     - `top` top margin, value less than 1 is a percentage
     - `bottom` bottom margin, value less than 1 is a percentage
   - `axisOptions`
-    - `name` is same `axis.name` in [registerYAxis(axis)](./chart-api#registeryaxis-axis) of chart api, default is 'default'
+    - `name` is same `axis.name` in [registerYAxis(axis)](./chart-api#registeryaxis-axis) of chart api, default is 'default' <Tag>v9.8.0+</Tag>
     - `scrollZoomEnabled` Scroll zoom flag
 - `callback` success callback
 ::: tip Special id
@@ -614,7 +644,7 @@ chart.createOverlay({
    styles: {
      line: {
        style: 'solid',
-       dashedValue: [2, 2]
+       dashedValue: [2, 2],
        color: '#f00',
        size: 2
      }
@@ -739,7 +769,7 @@ chart.overrideOverlay({
    styles: {
      line: {
        style: 'solid',
-       dashedValue: [2, 2]
+       dashedValue: [2, 2],
        color: '#f00',
        size: 2
      }
@@ -922,24 +952,24 @@ Execute chart action.
 ## subscribeAction(type, callback)
 ```typescript
 (
-   type: 'onZoom' | 'onScroll' | 'onVisibleRangeChange' | 'onCrosshairChange' | 'onCandleBarClick' | 'onTooltipIconClick' | 'onPaneDrag',
+   type: 'onDataReady' | 'onZoom' | 'onScroll' | 'onVisibleRangeChange' | 'onCrosshairChange' | 'onCandleBarClick' | 'onTooltipIconClick' | 'onPaneDrag',
    callback: (data?: any) => void
 ) => void
 ```
 Subscribe to chart actions.
-- `type` options are 'onZoom', 'onScroll', 'onVisibleRangeChange', 'onCandleBarClick', 'onTooltipIconClick', 'onCrosshairChange' and 'onPaneDrag'
+- `type` options are 'onDataReady', 'onZoom', 'onScroll', 'onVisibleRangeChange', 'onCandleBarClick', 'onTooltipIconClick', 'onCrosshairChange' and 'onPaneDrag'
 - `callback` is a callback method
 
 
 ## unsubscribeAction(type, callback)
 ```typescript
 (
-   type: 'onZoom' | 'onScroll' | 'onVisibleRangeChange' | 'onCrosshairChange' | 'onCandleBarClick' | 'onTooltipIconClick' | 'onPaneDrag',
+   type: 'onDataReady' | 'onZoom' | 'onScroll' | 'onVisibleRangeChange' | 'onCrosshairChange' | 'onCandleBarClick' | 'onTooltipIconClick' | 'onPaneDrag',
    callback?: (data?: any) => void
 ) => void
 ```
 Unsubscribe from chart actions.
-- `type` options are 'onZoom', 'onScroll', 'onVisibleRangeChange', 'onCandleBarClick', 'onTooltipIconClick', 'onCrosshairChange' and 'onPaneDrag'
+- `type` options are 'onDataReady', 'onZoom', 'onScroll', 'onVisibleRangeChange', 'onCandleBarClick', 'onTooltipIconClick', 'onCrosshairChange' and 'onPaneDrag'
 - `callback` is the callback method when subscribing, the default is to cancel all the current types
 
 

diff --git a/docs/guide/chart-api.md b/docs/guide/chart-api.md
@@ -345,7 +345,7 @@
 ```
 获取图表支持的覆盖物
 
-## registerXAxis(axis)
+## registerXAxis(axis) <Tag>v9.8.0+</Tag>
 ```typescript
 (
   axis: {
@@ -363,7 +363,7 @@
   - `name` 坐标轴名字
   - `createTicks` 创建分割文字
 
-## registerYAxis(axis)
+## registerYAxis(axis) <Tag>v9.8.0+</Tag>
 ```typescript
 (
   axis: {
@@ -467,7 +467,7 @@
 ```
 格式化日期千分符。
 
-### utils.formatFoldDecimal(value, threshold)
+### utils.formatFoldDecimal(value, threshold) <Tag>v9.8.0+</Tag>
 ```typescript
 (value: string | number, threshold: number) => string
 ```

diff --git a/docs/guide/instance-api.md b/docs/guide/instance-api.md
@@ -179,6 +179,9 @@
 - `dataList` 是一个K线数据数组，数据类型详情可参阅[数据源](./datasource.md)
 - `more` 告诉图表还有没有更多历史数据，可缺省，默认为true
 - `callback` 成功回调
+::: warning 注意
+参数 `callback` 自版本9.8.0开始，已废弃，请使用 `subscribeAction('onDataReady', () => {})` 代替。
+:::
 
 
 ## applyMoreData(dataList, more, callback)
@@ -201,6 +204,9 @@
 - `dataList` 是一个K线数据数组，数据类型详情可参阅[数据源](./datasource.md)
 - `more` 告诉图表还有没有更多历史数据，可缺省，默认为true
 - `callback` 成功回调
+::: warning 注意
+该方法自版本9.8.0开始，已废弃。
+:::
 
 
 ## updateData(data, callback)
@@ -221,6 +227,9 @@
 更新数据，目前只会匹配当前最后一条数据的时间戳，相同则覆盖，不同则追加。
 - `data` 单条k线数据，数据类型详情可参阅[数据源](./datasource.md)
 - `callback` 成功回调
+::: warning 注意
+参数 `callback` 自版本9.8.0开始，已废弃，请使用 `subscribeAction('onDataReady', () => {})` 代替。
+:::
 
 
 ## getDataList()
@@ -251,8 +260,28 @@
 ```
 设置加载更多回调函数。
 - `cb` 是一个回调方法，`timestamp`为第一条数据的时间戳
+::: warning 注意
+该方法自版本9.8.0开始，已废弃，请使用 `setLoadDataCallback` 代替。
+:::
 
 
+## setLoadDataCallback(cb) <Tag>v9.8.0+</Tag>
+```typescript
+(
+  cb: (params: { 
+    type: 'forward' | 'backward'
+    data: Nullable<KLineData>
+    callback: (dataList: KLineData[], more?: boolean) => void
+  }) => void
+) => void
+```
+设置自动加载数据回调方法
+- `cb` 回调方法
+  - `params` 回调参数
+    - `type` 类型，是往前加载还是往后加载
+    - `data` 加载边界的数据
+    - `callback` 回调方法，用于回传数据给图表
+
 ## createIndicator(value, isStack, paneOptions, callback)
 ```typescript
 (
@@ -347,7 +376,7 @@
     - `top` 上边距，值小余1则是百分比
     - `bottom` 下边距，值小余1则是百分比
   - `axisOptions`
-    - `name` 指定的轴的名字，此参数对应图表实例方法 [registerYAxis(axis)](./chart-api#registeryaxis-axis) 中的 `axis.name`，默认为 'default'
+    - `name` 指定的轴的名字，此参数对应图表实例方法 [registerYAxis(axis)](./chart-api#registeryaxis-axis) 中的 `axis.name`，默认为 'default' <Tag>v9.8.0+</Tag> 
     - `scrollZoomEnabled` 轴上是否可以滚动缩放
 
 - `callback` 指标创建完成回调方法
@@ -617,7 +646,7 @@ chart.overrideIndicator({
 ```javascript
 chart.createOverlay({
   name: 'segment',
-  id: 'segment_1'
+  id: 'segment_1',
   groupId: 'segment',
   points: [
     { timestamp: 1614171282000, value: 18987 },
@@ -626,7 +655,7 @@ chart.createOverlay({
   styles: {
     line: {
       style: 'solid',
-      dashedValue: [2, 2]
+      dashedValue: [2, 2],
       color: '#f00',
       size: 2
     }
@@ -752,7 +781,7 @@ chart.overrideOverlay({
   styles: {
     line: {
       style: 'solid',
-      dashedValue: [2, 2]
+      dashedValue: [2, 2],
       color: '#f00',
       size: 2
     }
@@ -940,24 +969,24 @@ chart.setPaneOptions({
 ## subscribeAction(type, callback)
 ```typescript
 (
-  type: 'onZoom' | 'onScroll' | 'onVisibleRangeChange' | 'onCrosshairChange' | 'onCandleBarClick' | 'onTooltipIconClick' | 'onPaneDrag',
+  type: 'onDataReady' | 'onZoom' | 'onScroll' | 'onVisibleRangeChange' | 'onCrosshairChange' | 'onCandleBarClick' | 'onTooltipIconClick' | 'onPaneDrag',
   callback: (data?: any) => void
 ) => void
 ```
 订阅图表动作。
-- `type` 可选项为'onZoom'，'onScroll'，'onVisibleRangeChange'，'onCandleBarClick', 'onTooltipIconClick'，'onCrosshairChange'和'onPaneDrag'
+- `type` 可选项为 'onDataReady'，'onZoom'，'onScroll'，'onVisibleRangeChange'，'onCandleBarClick', 'onTooltipIconClick'，'onCrosshairChange'和'onPaneDrag'
 - `callback` 是一个回调方法
 
 
 ## unsubscribeAction(type, callback)
 ```typescript
 (
-  type: 'onZoom' | 'onScroll' | 'onVisibleRangeChange' | 'onCrosshairChange' | 'onCandleBarClick' | 'onTooltipIconClick' | 'onPaneDrag',
+  type: 'onDataReady' | 'onZoom' | 'onScroll' | 'onVisibleRangeChange' | 'onCrosshairChange' | 'onCandleBarClick' | 'onTooltipIconClick' | 'onPaneDrag',
   callback?: (data?: any) => void
 ) => void
 ```
 取消订阅图表动作。
-- `type` 可选项为'onZoom'，'onScroll'，'onVisibleRangeChange'，'onCandleBarClick', 'onTooltipIconClick'，'onCrosshairChange'和'onPaneDrag'
+- `type` 可选项为 'onDataReady'，'onZoom'，'onScroll'，'onVisibleRangeChange'，'onCandleBarClick', 'onTooltipIconClick'，'onCrosshairChange'和'onPaneDrag'
 - `callback` 订阅时的回调方法，缺省则取消当前类型所有
 
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "klinecharts",
-  "version": "9.7.2",
+  "version": "9.8.0",
   "description": "Lightweight k-line chart built with html5 canvas",
   "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",
@@ -88,6 +88,6 @@
     "rollup-plugin-progress": "^1.1.2",
     "tslib": "^2.5.0",
     "typescript": "^4.8.3",
-    "vitepress": "1.0.0-rc.36"
+    "vitepress": "1.0.0-rc.44"
   }
 }