diff --git a/docs/.vitepress/config/share.js b/docs/.vitepress/config/share.js index ad81c1061..bc40f463a 100644 --- a/docs/.vitepress/config/share.js +++ b/docs/.vitepress/config/share.js @@ -49,6 +49,8 @@ export function getInstanceApiMenus (lang = '') { { text: 'setRightMinVisibleBarCount', link: `${prefix}/setRightMinVisibleBarCount` }, { text: 'setBarSpace', link: `${prefix}/setBarSpace` }, { text: 'getBarSpace', link: `${prefix}/getBarSpace` }, + { text: 'setBarSpaceLimit', link: `${prefix}/setBarSpaceLimit` }, + { text: 'getBarSpaceLimit', link: `${prefix}/getBarSpaceLimit` }, { text: 'setSymbol', link: `${prefix}/setSymbol` }, { text: 'getSymbol', link: `${prefix}/getSymbol` }, { text: 'setPeriod', link: `${prefix}/setPeriod` }, diff --git a/docs/@views/api/references/instance/getBarSpaceLimit.md b/docs/@views/api/references/instance/getBarSpaceLimit.md new file mode 100644 index 000000000..a15524b08 --- /dev/null +++ b/docs/@views/api/references/instance/getBarSpaceLimit.md @@ -0,0 +1,3 @@ +```typescript +() => BarSpaceLimit +``` \ No newline at end of file diff --git a/docs/@views/api/references/instance/setBarSpaceLimit.md b/docs/@views/api/references/instance/setBarSpaceLimit.md new file mode 100644 index 000000000..01fcb314c --- /dev/null +++ b/docs/@views/api/references/instance/setBarSpaceLimit.md @@ -0,0 +1,7 @@ +```typescript +interface BarSpaceLimit { + min: number; + max: number; +} +(limit: BarSpaceLimit) => void +``` \ No newline at end of file diff --git a/docs/@views/api/samples/getBarSpaceLimit/index.data.js b/docs/@views/api/samples/getBarSpaceLimit/index.data.js new file mode 100644 index 000000000..031b0d66f --- /dev/null +++ b/docs/@views/api/samples/getBarSpaceLimit/index.data.js @@ -0,0 +1,20 @@ +import fs from 'fs' + +export default { + watch: ['./index.js'], + load (watchedFiles) { + return watchedFiles.reduce((data, file) => { + const result = fs.readFileSync(file, 'utf-8') + let key + if (file.match('index.js')) { + key = 'js' + } else if (file.match('index.css')) { + key = 'css' + } else { + key = 'html' + } + data[key] = result + return data + }, {}) + } +} diff --git a/docs/@views/api/samples/getBarSpaceLimit/index.js b/docs/@views/api/samples/getBarSpaceLimit/index.js new file mode 100644 index 000000000..538fa6155 --- /dev/null +++ b/docs/@views/api/samples/getBarSpaceLimit/index.js @@ -0,0 +1,19 @@ +import { init } from 'klinecharts' + +const chart = init('getBarSpaceLimit-chart') + +chart.setSymbol({ ticker: 'TestSymbol' }) +chart.setPeriod({ span: 1, type: 'day' }) +chart.setDataLoader({ + getBars: ({ + callback + }) => { + fetch('https://klinecharts.com/datas/kline.json') + .then(res => res.json()) + .then(dataList => { + callback(dataList) + }) + } +}) + +const barSpaceLimit = chart.getBarSpaceLimit() diff --git a/docs/@views/api/samples/getBarSpaceLimit/index.vue b/docs/@views/api/samples/getBarSpaceLimit/index.vue new file mode 100644 index 000000000..f6f2ab849 --- /dev/null +++ b/docs/@views/api/samples/getBarSpaceLimit/index.vue @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/docs/@views/api/samples/setBarSpaceLimit/index.data.js b/docs/@views/api/samples/setBarSpaceLimit/index.data.js new file mode 100644 index 000000000..031b0d66f --- /dev/null +++ b/docs/@views/api/samples/setBarSpaceLimit/index.data.js @@ -0,0 +1,20 @@ +import fs from 'fs' + +export default { + watch: ['./index.js'], + load (watchedFiles) { + return watchedFiles.reduce((data, file) => { + const result = fs.readFileSync(file, 'utf-8') + let key + if (file.match('index.js')) { + key = 'js' + } else if (file.match('index.css')) { + key = 'css' + } else { + key = 'html' + } + data[key] = result + return data + }, {}) + } +} diff --git a/docs/@views/api/samples/setBarSpaceLimit/index.js b/docs/@views/api/samples/setBarSpaceLimit/index.js new file mode 100644 index 000000000..d35ec63bc --- /dev/null +++ b/docs/@views/api/samples/setBarSpaceLimit/index.js @@ -0,0 +1,21 @@ +import { init } from 'klinecharts' + +const chart = init('setBarSpaceLimit-chart') +chart.setBarSpaceLimit({ + min: 2, + max: 10 +}) + +chart.setSymbol({ ticker: 'TestSymbol' }) +chart.setPeriod({ span: 1, type: 'day' }) +chart.setDataLoader({ + getBars: ({ + callback + }) => { + fetch('https://klinecharts.com/datas/kline.json') + .then(res => res.json()) + .then(dataList => { + callback(dataList) + }) + } +}) diff --git a/docs/@views/api/samples/setBarSpaceLimit/index.vue b/docs/@views/api/samples/setBarSpaceLimit/index.vue new file mode 100644 index 000000000..d7360a6fb --- /dev/null +++ b/docs/@views/api/samples/setBarSpaceLimit/index.vue @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/docs/api/instance/getBarSpaceLimit.md b/docs/api/instance/getBarSpaceLimit.md new file mode 100644 index 000000000..f4cccaacd --- /dev/null +++ b/docs/api/instance/getBarSpaceLimit.md @@ -0,0 +1,23 @@ +--- +outline: deep +--- + +# getBarSpaceLimit() +`getBarSpaceLimit` 获取图表单根蜡烛柱所占空间最大值/最小值。 + +## 参考 {#reference} + + +### 参数 {#parameters} +`getBarSpaceLimit` 不接收任何参数。 + +### 返回值 {#returns} +`getBarSpaceLimit` 返回一个包含单根蜡烛柱所占空间信息的对象 `BarSpaceLimit` 。 + +## 用法 {#usage} + + +### 基本使用 {#basic} + \ No newline at end of file diff --git a/docs/api/instance/setBarSpace.md b/docs/api/instance/setBarSpace.md index f11a66ce0..fbb55116c 100644 --- a/docs/api/instance/setBarSpace.md +++ b/docs/api/instance/setBarSpace.md @@ -9,7 +9,7 @@ outline: deep ### 参数 {#parameters} -- `space` 空间大小，范围在 1 到 50 之间。 +- `space` 空间大小，默认范围在 1 到 50 之间，可以通过`setBarSpaceLimit`设置。 ### 返回值 {#returns} `setBarSpace` 返回 `undefined` 。 diff --git a/docs/api/instance/setBarSpaceLimit.md b/docs/api/instance/setBarSpaceLimit.md new file mode 100644 index 000000000..e37a7ff69 --- /dev/null +++ b/docs/api/instance/setBarSpaceLimit.md @@ -0,0 +1,25 @@ +--- +outline: deep +--- + +# setBarSpaceLimit(limit) +`setBarSpaceLimit` 设置图表单根蜡烛柱所占的空间最大值和最小值 + +## 参考 {#reference} + + +### 参数 {#parameters} +- `limit` 空间大小限制。 + - `min` 最小值。 + - `max` 最大值。 + +### 返回值 {#returns} +`setBarSpaceLimit` 返回 `undefined` 。 + +## 用法 {#usage} + + +### 基本用法 {#basic} + \ No newline at end of file diff --git a/docs/en-US/api/instance/getBarSpaceLimit.md b/docs/en-US/api/instance/getBarSpaceLimit.md new file mode 100644 index 000000000..6b9414b51 --- /dev/null +++ b/docs/en-US/api/instance/getBarSpaceLimit.md @@ -0,0 +1,23 @@ +--- +outline: deep +--- + +# getBarSpaceLimit() +`getBarSpaceLimit` get limit size about the space occupied by a single candlestick on the chart. + +## Reference {#reference} + + +### Parameters {#parameters} +`getBarSpaceLimit` does not accept any parameters. + +### Returns {#returns} +`getBarSpaceLimit` returns an object containing information about the space occupied by a single candlestick `BarSpaceLimit`. + +## Usage {#usage} + + +### Basic usage {#basic} + \ No newline at end of file diff --git a/docs/en-US/api/instance/setBarSpaceLimit.md b/docs/en-US/api/instance/setBarSpaceLimit.md new file mode 100644 index 000000000..a9d18da6f --- /dev/null +++ b/docs/en-US/api/instance/setBarSpaceLimit.md @@ -0,0 +1,25 @@ +--- +outline: deep +--- + +# setBarSpaceLimit(limit) +`setBarSpaceLimit` set the limit size of the space that a single candlestick on the chart should occupy. + +## Reference {#reference} + + +### Parameters {#parameters} +- `limit` The limit size of the space + - `min` min value of the space + - `max` max value of the space + +### Returns {#returns} +`setBarSpaceLimit` returns `undefined` 。 + +## Usage {#usage} + + +### Basic usage {#basic} + \ No newline at end of file diff --git a/src/Chart.ts b/src/Chart.ts index d46fea87e..35750d50f 100644 --- a/src/Chart.ts +++ b/src/Chart.ts @@ -23,7 +23,7 @@ import type Crosshair from './common/Crosshair' import type { ActionType, ActionCallback } from './common/Action' import type { DataLoader } from './common/DataLoader' import type VisibleRange from './common/VisibleRange' -import type { Formatter, DecimalFold, LayoutChild, Options, ThousandsSeparator } from './Options' +import type { Formatter, DecimalFold, LayoutChild, Options, ThousandsSeparator, BarSpaceLimit } from './Options' import Animation from './common/Animation' import { createId } from './common/utils/id' @@ -674,6 +674,14 @@ export default class ChartImp implements Chart { return this._chartStore.getBarSpace() } + setBarSpaceLimit (limit: Partial): void { + this._chartStore.setBarSpaceLimit(limit) + } + + getBarSpaceLimit (): BarSpaceLimit { + return this._chartStore.getBarSpaceLimit() + } + getVisibleRange (): VisibleRange { return this._chartStore.getVisibleRange() } diff --git a/src/Options.ts b/src/Options.ts index 413e1c4f9..572574e01 100644 --- a/src/Options.ts +++ b/src/Options.ts @@ -85,6 +85,11 @@ export interface ThousandsSeparator { format: (value: string | number) => string } +export interface BarSpaceLimit { + min: number + max: number +} + export interface Options { locale?: string timezone?: string @@ -93,4 +98,5 @@ export interface Options { thousandsSeparator?: Partial decimalFold?: Partial layout?: LayoutChild[] + barSpaceLimit?: Partial } diff --git a/src/Store.ts b/src/Store.ts index 47a41cb8d..f409db293 100644 --- a/src/Store.ts +++ b/src/Store.ts @@ -36,7 +36,7 @@ import { logWarn } from './common/utils/logger' import { UpdateLevel } from './common/Updater' import type { DataLoader, DataLoaderGetBarsParams, DataLoadMore, DataLoadType } from './common/DataLoader' -import type { Options, Formatter, ThousandsSeparator, DecimalFold, FormatDateType, FormatDateParams, FormatBigNumber, FormatExtendText, FormatExtendTextParams } from './Options' +import type { Options, Formatter, ThousandsSeparator, DecimalFold, BarSpaceLimit, FormatDateType, FormatDateParams, FormatBigNumber, FormatExtendText, FormatExtendTextParams } from './Options' import type { IndicatorOverride, IndicatorCreate, IndicatorFilter } from './component/Indicator' import type IndicatorImp from './component/Indicator' @@ -52,7 +52,7 @@ import { PaneIdConstants } from './pane/types' import type Chart from './Chart' -const BarSpaceLimitConstants = { +const DEFAULT_BAR_SPACE_LIMIT = { MIN: 1, MAX: 50 } @@ -113,6 +113,8 @@ export interface Store { setRightMinVisibleBarCount: (barCount: number) => void setBarSpace: (space: number) => void getBarSpace: () => BarSpace + setBarSpaceLimit: (limit: Partial) => void + getBarSpaceLimit: () => BarSpaceLimit getVisibleRange: () => VisibleRange setDataLoader: (dataLoader: DataLoader) => void overrideIndicator: (override: IndicatorCreate) => boolean @@ -236,6 +238,14 @@ export default class StoreImp implements Store { */ private _barSpace = DEFAULT_BAR_SPACE + /** + * Bar space limit + */ + private readonly _barSpaceLimit: BarSpaceLimit = { + min: DEFAULT_BAR_SPACE_LIMIT.MIN, + max: DEFAULT_BAR_SPACE_LIMIT.MAX + } + /** * The space of the draw bar */ @@ -358,7 +368,7 @@ export default class StoreImp implements Store { this._chart = chart this._calcOptimalBarSpace() this._lastBarRightSideDiffBarCount = this._offsetRightDistance / this._barSpace - const { styles, locale, timezone, formatter, thousandsSeparator, decimalFold } = options ?? {} + const { styles, locale, timezone, formatter, thousandsSeparator, decimalFold, barSpaceLimit } = options ?? {} if (isValid(styles)) { this.setStyles(styles) } @@ -375,6 +385,9 @@ export default class StoreImp implements Store { if (isValid(decimalFold)) { this.setDecimalFold(decimalFold) } + if (isValid(barSpaceLimit)) { + this.setBarSpaceLimit(barSpaceLimit) + } } setStyles (value: string | DeepPartial): void { @@ -744,8 +757,21 @@ export default class StoreImp implements Store { } } + setBarSpaceLimit (limit: Partial): void { + if (isValid(limit.min) && isNumber(limit.min)) { + this._barSpaceLimit.min = Math.max(0, limit.min) + } + if (isValid(limit.max) && isNumber(limit.max)) { + this._barSpaceLimit.max = Math.max(this._barSpaceLimit.min, limit.max) + } + } + + getBarSpaceLimit (): BarSpaceLimit { + return { ...this._barSpaceLimit } + } + setBarSpace (barSpace: number, adjustBeforeFunc?: () => void): void { - if (barSpace < BarSpaceLimitConstants.MIN || barSpace > BarSpaceLimitConstants.MAX || this._barSpace === barSpace) { + if (barSpace < this._barSpaceLimit.min || barSpace > this._barSpaceLimit.max || this._barSpace === barSpace) { return } this._barSpace = barSpace diff --git a/src/index.ts b/src/index.ts index d89833c04..ab519f4cd 100644 --- a/src/index.ts +++ b/src/index.ts @@ -48,7 +48,7 @@ import type { ActionType } from './common/Action' import type { IndicatorSeries } from './component/Indicator' import type { OverlayMode } from './component/Overlay' -import type { FormatDateType, Options } from './Options' +import type { FormatDateType, Options, BarSpaceLimit } from './Options' import ChartImp, { type Chart, type DomPosition } from './Chart' import { checkCoordinateOnArc } from './extension/figure/arc' @@ -174,6 +174,6 @@ export { registerXAxis, registerYAxis, utils, type LineType, type PolygonType, type TooltipShowRule, type TooltipShowType, type FeatureType, type TooltipFeaturePosition, type CandleTooltipRectPosition, - type CandleType, type FormatDateType, + type CandleType, type FormatDateType, type BarSpaceLimit, type DomPosition, type ActionType, type IndicatorSeries, type OverlayMode }