shen/KLineChart
1
0
Fork 0
mirror of https://github.com/klinecharts/KLineChart.git synced 2024-11-25 16:22:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
liihuu 2024-03-03 23:28:52 +08:00
parent bf17825cf6
commit 58c9c6f55d
16 changed files with 305 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/.vitepress/components/Tag.vue Normal file
View File

@ -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>

2
docs/.vitepress/theme/index.js
View File

@ -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)
// ...
}
}

6
docs/en-US/guide/chart-api.md
View File

@ -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
```

46
docs/en-US/guide/instance-api.md
View File

@ -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

6
docs/guide/chart-api.md
View File

@ -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
```

45
docs/guide/instance-api.md
View File

@ -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` 订阅时的回调方法，缺省则取消当前类型所有

4
package.json
View File

@ -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"
}
}

72
src/Chart.ts
View File

@ -20,10 +20,10 @@ import type Coordinate from './common/Coordinate'
import type Point from './common/Point'
import { UpdateLevel } from './common/Updater'
import { type Styles, YAxisPosition } from './common/Styles'
import type Crosshair from './common/Crosshair'
import { ActionType, type ActionCallback } from './common/Action'
import type LoadMoreCallback from './common/LoadMoreCallback'
import type LoadDataCallback from './common/LoadDataCallback'
import type Precision from './common/Precision'
import type VisibleRange from './common/VisibleRange'
@ -32,7 +32,6 @@ import { createDom } from './common/utils/dom'
import { getPixelRatio } from './common/utils/canvas'
import { isString, isArray, isValid, merge, isNumber } from './common/utils/typeChecks'
import { logWarn } from './common/utils/logger'
import { formatValue } from './common/utils/format'
import { binarySearchNearest } from './common/utils/number'
import ChartStore from './store/ChartStore'
@ -93,9 +92,18 @@ export interface Chart {
clearData: () => void
getDataList: () => KLineData[]
applyNewData: (dataList: KLineData[], more?: boolean, callback?: () => void) => void
/**
* @deprecated
* Since v9.8.0 deprecated, since v10 removed
*/
applyMoreData: (dataList: KLineData[], more?: boolean, callback?: () => void) => void
updateData: (data: KLineData, callback?: () => void) => void
/**
* @deprecated
* Since v9.8.0 deprecated, since v10 removed
*/
loadMore: (cb: LoadMoreCallback) => void
setLoadDataCallback: (cb: LoadDataCallback) => void
createIndicator: (value: string | IndicatorCreate, isStack?: boolean, paneOptions?: PaneOptions, callback?: () => void) => Nullable<string>
overrideIndicator: (override: IndicatorCreate, paneId?: string, callback?: () => void) => void
getIndicatorByPaneId: (paneId?: string, name?: string) => Nullable<Indicator> | Nullable<Map<string, Indicator>> | Map<string, Map<string, Indicator>>
@ -127,6 +135,7 @@ export interface Chart {
export default class ChartImp implements Chart {
id: string
private _container: HTMLElement
private _chartContainer: HTMLElement
private readonly _chartEvent: Event
@ -663,50 +672,41 @@ export default class ChartImp implements Chart {
return this._chartStore.getDataList()
}
applyNewData (dataList: KLineData[], more?: boolean, callback?: () => void): void {
this._chartStore.clear()
if (dataList.length === 0) {
this.adjustPaneViewport(false, true, true, true)
} else {
this.applyMoreData(dataList, more, callback)
applyNewData (data: KLineData[], more?: boolean, callback?: () => void): void {
if (isValid(callback)) {
logWarn('applyNewData', '', 'param `callback` has been deprecated since version 9.8.0, use `subscribeAction(\'onDataReady\')` instead.')
}
this._chartStore.addData(data, true, more).then(() => {}).catch(() => {}).finally(() => { callback?.() })
}
applyMoreData (dataList: KLineData[], more?: boolean, callback?: () => void): void {
this._chartStore.addData(dataList, 0, more)
if (dataList.length > 0) {
this._chartStore.getIndicatorStore().calcInstance().then(
_ => {
this.adjustPaneViewport(false, true, true, true)
callback?.()
}
).catch(_ => {})
}
/**
* @deprecated
* Since v9.8.0 deprecated, since v10 removed
*/
applyMoreData (data: KLineData[], more?: boolean, callback?: () => void): void {
logWarn('', '', 'Api `applyMoreData` has been deprecated since version 9.8.0.')
const dataList = data.concat(this._chartStore.getDataList())
this._chartStore.addData(dataList, false, more ?? true).then(() => {}).catch(() => {}).finally(() => { callback?.() })
}
updateData (data: KLineData, callback?: () => void): void {
const dataList = this._chartStore.getDataList()
const dataCount = dataList.length
// Determine where individual data should be added
const timestamp = data.timestamp
const lastDataTimestamp = formatValue(dataList[dataCount - 1], 'timestamp', 0) as number
if (timestamp >= lastDataTimestamp) {
let pos = dataCount
if (timestamp === lastDataTimestamp) {
pos = dataCount - 1
}
this._chartStore.addData(data, pos)
this._chartStore.getIndicatorStore().calcInstance().then(
_ => {
this.adjustPaneViewport(false, true, true, true)
callback?.()
}
).catch(_ => {})
if (isValid(callback)) {
logWarn('updateData', '', 'param `callback` has been deprecated since version 9.8.0, use `subscribeAction(\'onDataReady\')` instead.')
}
this._chartStore.addData(data, false).then(() => {}).catch(() => {}).finally(() => { callback?.() })
}
/**
* @deprecated
* Since v9.8.0 deprecated, since v10 removed
*/
loadMore (cb: LoadMoreCallback): void {
this._chartStore.getTimeScaleStore().setLoadMoreCallback(cb)
logWarn('', '', 'Api `loadMore` has been deprecated since version 9.8.0, use `setLoadDataCallback` instead.')
this._chartStore.setLoadMoreCallback(cb)
}
setLoadDataCallback (cb: LoadDataCallback): void {
this._chartStore.setLoadDataCallback(cb)
}
createIndicator (value: string | IndicatorCreate, isStack?: boolean, paneOptions?: Nullable<PaneOptions>, callback?: () => void): Nullable<string> {

1
src/common/Action.ts
View File

@ -17,6 +17,7 @@ import { isFunction } from './utils/typeChecks'
export type ActionCallback = (data?: any) => void
export enum ActionType {
OnDataReady = 'onDataReady',
OnZoom = 'onZoom',
OnScroll = 'onScroll',
OnVisibleRangeChange = 'onVisibleRangeChange',

33
src/common/LoadDataCallback.ts Normal file
View File

@ -0,0 +1,33 @@
/**
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type Nullable from './Nullable'
import type KLineData from './KLineData'
enum LoadDataType {
Forward = 'forward',
Backward = 'backward'
}
interface LoadDataParams {
type: LoadDataType
data: Nullable<KLineData>
callback: (dataList: KLineData[], more?: boolean) => void
}
export { LoadDataType, type LoadDataParams }
type LoadDataCallback = (params: LoadDataParams) => void
export default LoadDataCallback

4
src/common/LoadMoreCallback.ts
View File

@ -14,6 +14,10 @@
import type Nullable from './Nullable'
/**
* Since v9.8.0 deprecated, since v10 removed
* @deprecated
*/
type LoadMoreCallback = (timestamp: Nullable<number>) => void
export default LoadMoreCallback

4
src/common/utils/logger.ts
View File

@ -16,8 +16,8 @@ const DEV = process.env.NODE_ENV === 'development'
function log (templateText: string, tagStyle: string, messageStyle: string, api: string, invalidParam: string, append: string): void {
if (DEV) {
const apiStr = api !== '' ? `Call api ${api}${invalidParam !== '' || append !== '' ? ', ' : '.'}` : ''
const invalidParamStr = invalidParam !== '' ? `invalid parameter ${invalidParam}${append !== '' ? ', ' : '.'}` : ''
const apiStr = api !== '' ? `Call api \`${api}\`${invalidParam !== '' || append !== '' ? ', ' : '.'}` : ''
const invalidParamStr = invalidParam !== '' ? `invalid parameter \`${invalidParam}\`${append !== '' ? ', ' : '.'}` : ''
const appendStr = append !== '' ? append : ''
console.log(templateText, tagStyle, messageStyle, apiStr, invalidParamStr, appendStr)
}

4
src/extension/figure/rectText.ts
View File

@ -30,6 +30,8 @@ const drawRectText = drawText
* @deprecated
* Starting from v10, it will be deleted
*/
export { drawRectText }
export {
drawRectText
}
export default rectText

131
src/store/ChartStore.ts
View File

@ -12,11 +12,17 @@
* limitations under the License.
*/
import type Nullable from '../common/Nullable'
import type KLineData from '../common/KLineData'
import type Precision from '../common/Precision'
import type VisibleData from '../common/VisibleData'
import { getDefaultStyles, type Styles } from '../common/Styles'
import { isArray, isNumber, isString, isValid, merge } from '../common/utils/typeChecks'
import { isArray, isBoolean, isNumber, isString, isValid, merge } from '../common/utils/typeChecks'
import { formatValue } from '../common/utils/format'
import type LoadDataCallback from '../common/LoadDataCallback'
import { type LoadDataParams, LoadDataType } from '../common/LoadDataCallback'
import type LoadMoreCallback from '../common/LoadMoreCallback'
import { ActionType } from '../common/Action'
import { getDefaultCustomApi, type CustomApi, defaultLocale, type Options } from '../Options'
@ -39,27 +45,27 @@ export default class ChartStore {
/**
* Style config
*/
private readonly _styles: Styles = getDefaultStyles()
private readonly _styles = getDefaultStyles()
/**
* Custom api
*/
private readonly _customApi: CustomApi = getDefaultCustomApi()
private readonly _customApi = getDefaultCustomApi()
/**
* language
*/
private _locale: string = defaultLocale
private _locale = defaultLocale
/**
* Price and volume precision
*/
private _precision: Precision = { price: 2, volume: 0 }
private _precision = { price: 2, volume: 0 }
/**
* Thousands separator
*/
private _thousandsSeparator: string = ','
private _thousandsSeparator = ','
// Decimal fold threshold
private _decimalFoldThreshold = 3
@ -69,6 +75,33 @@ export default class ChartStore {
*/
private _dataList: KLineData[] = []
/**
* Load more data callback
* Since v9.8.0 deprecated, since v10 removed
* @deprecated
*/
private _loadMoreCallback: Nullable<LoadMoreCallback> = null
/**
* Load data callback
*/
private _loadDataCallback: Nullable<LoadDataCallback> = null
/**
* Is loading data flag
*/
private _loading = true
/**
* Whether there are forward more flag
*/
private _forwardMore = true
/**
* Whether there are forward more flag
*/
private _backwardMore = true
/**
* Time scale store
*/
@ -189,34 +222,94 @@ export default class ChartStore {
return this._visibleDataList
}
addData (data: KLineData | KLineData[], pos: number, more?: boolean): void {
async addData (data: KLineData | KLineData[], isFirstAdd: boolean, more?: boolean): Promise<void> {
let success = false
if (isArray<KLineData>(data)) {
this._timeScaleStore.setLoading(false)
this._timeScaleStore.setMore(more ?? true)
const isFirstAdd = this._dataList.length === 0
this._dataList = data.concat(this._dataList)
if (isFirstAdd) {
this.clear()
this._dataList = data
this._forwardMore = more ?? true
this._timeScaleStore.resetOffsetRightDistance()
} else {
this._dataList = data
if (isBoolean(more)) {
this._forwardMore = more
}
}
this._timeScaleStore.adjustVisibleRange()
this._loading = false
success = true
} else {
const dataSize = this._dataList.length
if (pos >= dataSize) {
const dataCount = this._dataList.length
// Determine where individual data should be added
const timestamp = data.timestamp
const lastDataTimestamp = formatValue(this._dataList[dataCount - 1], 'timestamp', 0) as number
if (timestamp > lastDataTimestamp) {
this._dataList.push(data)
let lastBarRightSideDiffBarCount = this._timeScaleStore.getLastBarRightSideDiffBarCount()
if (lastBarRightSideDiffBarCount < 0) {
this._timeScaleStore.setLastBarRightSideDiffBarCount(--lastBarRightSideDiffBarCount)
}
this._timeScaleStore.adjustVisibleRange()
} else {
this._dataList[pos] = data
this.adjustVisibleDataList()
success = true
} else if (timestamp === lastDataTimestamp) {
this._dataList[dataCount - 1] = data
success = true
}
}
this._tooltipStore.recalculateCrosshair(true)
if (success) {
this._timeScaleStore.adjustVisibleRange()
this._tooltipStore.recalculateCrosshair(true)
try {
await this._indicatorStore.calcInstance()
this._chart.adjustPaneViewport(false, true, true, true)
this._actionStore.execute(ActionType.OnDataReady)
} catch {}
}
}
setLoadMoreCallback (callback: LoadMoreCallback): void {
this._loadMoreCallback = callback
}
executeLoadMoreCallback (timestamp: Nullable<number>): void {
if (this._forwardMore && !this._loading && isValid(this._loadMoreCallback)) {
this._loading = true
this._loadMoreCallback(timestamp)
}
}
setLoadDataCallback (callback: LoadDataCallback): void {
this._loadDataCallback = callback
}
executeLoadDataCallback (params: Omit<LoadDataParams, 'callback'>): void {
if (
!this._loading &&
isValid(this._loadDataCallback) &&
(
(this._forwardMore && params.type === LoadDataType.Forward) ||
(this._backwardMore && params.type === LoadDataType.Backward)
)
) {
const cb: ((data: KLineData[], more?: boolean) => void) = (data: KLineData[], more?: boolean) => {
let dataList: KLineData[] = []
if (params.type === LoadDataType.Backward) {
dataList = this._dataList.concat(data)
this._backwardMore = more ?? false
} else {
dataList = data.concat(this._dataList)
this._forwardMore = more ?? false
}
this.addData(dataList, false).then(() => {}).catch(() => {})
}
this._loading = true
this._loadDataCallback({ ...params, callback: cb })
}
}
clear (): void {
this._forwardMore = true
this._backwardMore = true
this._loading = true
this._dataList = []
this._visibleDataList = []
this._timeScaleStore.clear()

49
src/store/TimeScaleStore.ts
View File

@ -18,7 +18,6 @@ import type KLineData from '../common/KLineData'
import type BarSpace from '../common/BarSpace'
import type VisibleRange from '../common/VisibleRange'
import { getDefaultVisibleRange } from '../common/VisibleRange'
import type LoadMoreCallback from '../common/LoadMoreCallback'
import { ActionType } from '../common/Action'
import { logWarn } from '../common/utils/logger'
@ -26,6 +25,7 @@ import { binarySearchNearest } from '../common/utils/number'
import { isNumber, isString } from '../common/utils/typeChecks'
import type ChartStore from './ChartStore'
import { LoadDataType } from '../common/LoadDataCallback'
interface LeftRightSide {
left: number
@ -67,21 +67,6 @@ export default class TimeScaleStore {
*/
private _scrollEnabled: boolean = true
/**
* Is loading data flag
*/
private _loading: boolean = true
/**
* Load more data callback
*/
private _loadMoreCallback: Nullable<LoadMoreCallback> = null
/**
* Whether there are more flag
*/
private _more: boolean = true
/**
* Total space of drawing area
*/
@ -191,21 +176,20 @@ export default class TimeScaleStore {
this._chartStore.getActionStore().execute(ActionType.OnVisibleRangeChange, this._visibleRange)
this._chartStore.adjustVisibleDataList()
// More processing and loading, more loading if there are callback methods and no data is being loaded
if (from === 0 && this._more && !this._loading && this._loadMoreCallback !== null) {
this._loading = true
if (from === 0) {
const firstData = dataList[0]
this._loadMoreCallback(firstData?.timestamp ?? null)
this._chartStore.executeLoadMoreCallback(firstData?.timestamp ?? null)
this._chartStore.executeLoadDataCallback({
type: LoadDataType.Forward,
data: firstData ?? null
})
}
if (to === totalBarCount) {
this._chartStore.executeLoadDataCallback({
type: LoadDataType.Backward,
data: dataList[totalBarCount - 1] ?? null
})
}
}
setMore (more: boolean): this {
this._more = more
return this
}
setLoading (loading: boolean): this {
this._loading = loading
return this
}
getDateTimeFormat (): Intl.DateTimeFormat {
@ -422,14 +406,7 @@ export default class TimeScaleStore {
return this._scrollEnabled
}
setLoadMoreCallback (callback: LoadMoreCallback): this {
this._loadMoreCallback = callback
return this
}
clear (): void {
this._more = true
this._loading = true
this._visibleRange = getDefaultVisibleRange()
}
}

1
tsconfig.json
View File

@ -8,6 +8,7 @@
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2018"