Feat support set bar space limit

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` },

docs/@views/api/references/instance/getBarSpaceLimit.md

@@ -0,0 +1,3 @@
+```typescript
+() => BarSpaceLimit
+```

docs/@views/api/references/instance/setBarSpaceLimit.md

@@ -0,0 +1,7 @@
+```typescript
+interface BarSpaceLimit {
+  min: number;
+  max: number;
+}
+(limit: BarSpaceLimit) => void
+```

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
+    }, {})
+  }
+}

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()

docs/@views/api/samples/getBarSpaceLimit/index.vue

@@ -0,0 +1,11 @@
+<script setup>
+import ChartPreview from '../../../../@components/ChartPreview.vue';
+import { data } from './index.data'
+</script>
+
+<template>
+  <ChartPreview
+    title="getBarSpaceLimit"
+    chartId="getBarSpaceLimit-chart"
+    :code="data.js"/>
+</template>

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
+    }, {})
+  }
+}

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)
+      })
+  }
+})

docs/@views/api/samples/setBarSpaceLimit/index.vue

@@ -0,0 +1,11 @@
+<script setup>
+import ChartPreview from '../../../../@components/ChartPreview.vue';
+import { data } from './index.data'
+</script>
+
+<template>
+  <ChartPreview
+    title="setBarSpaceLimit"
+    chartId="setBarSpaceLimit-chart"
+    :code="data.js"/>
+</template>

docs/api/instance/getBarSpaceLimit.md

@@ -0,0 +1,23 @@
+---
+outline: deep
+---
+
+# getBarSpaceLimit()
+`getBarSpaceLimit` 获取图表单根蜡烛柱所占空间最大值/最小值。
+
+## 参考 {#reference}
+<!-- @include: @/@views/api/references/instance/getBarSpaceLimit.md -->
+
+### 参数 {#parameters}
+`getBarSpaceLimit` 不接收任何参数。
+
+### 返回值 {#returns}
+`getBarSpaceLimit` 返回一个包含单根蜡烛柱所占空间信息的对象 `BarSpaceLimit` 。
+
+## 用法 {#usage}
+<script setup>
+import GetBarSpaceLimit from '../../@views/api/samples/getBarSpaceLimit/index.vue'
+</script>
+
+### 基本使用 {#basic}
+<GetBarSpaceLimit/>

docs/api/instance/setBarSpace.md

@@ -9,7 +9,7 @@ outline: deep
 <!--@include: @/@views/api/references/instance/setBarSpace.md-->
 
 ### 参数 {#parameters}
-- `space` 空间大小，范围在 1 到 50 之间。
+- `space` 空间大小，默认范围在 1 到 50 之间，可以通过`setBarSpaceLimit`设置。
 
 ### 返回值 {#returns}
 `setBarSpace` 返回 `undefined` 。

docs/api/instance/setBarSpaceLimit.md

@@ -0,0 +1,25 @@
+---
+outline: deep
+---
+
+# setBarSpaceLimit(limit)
+`setBarSpaceLimit` 设置图表单根蜡烛柱所占的空间最大值和最小值
+
+## 参考 {#reference}
+<!--@include: @/@views/api/references/instance/setBarSpaceLimit.md-->
+
+### 参数 {#parameters}
+- `limit` 空间大小限制。
+  - `min` 最小值。
+  - `max` 最大值。
+
+### 返回值 {#returns}
+`setBarSpaceLimit` 返回 `undefined` 。
+
+## 用法 {#usage}
+<script setup>
+import setBarSpaceLimit from '../../@views/api/samples/setBarSpaceLimit/index.vue'
+</script>
+
+### 基本用法 {#basic}
+<setBarSpaceLimit/>

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}
+<!-- @include: @/@views/api/references/instance/getBarSpaceLimit.md -->
+
+### 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}
+<script setup>
+import GetBarSpaceLimit from '../../../@views/api/samples/getBarSpaceLimit/index.vue'
+</script>
+
+### Basic usage {#basic}
+<GetBarSpaceLimit/>

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}
+<!--@include: @/@views/api/references/instance/setBarSpaceLimit.md-->
+
+### 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}
+<script setup>
+import setBarSpaceLimit from '../../../@views/api/samples/setBarSpaceLimit/index.vue'
+</script>
+
+### Basic usage {#basic}
+<setBarSpaceLimit/>

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<BarSpaceLimit>): void {
+    this._chartStore.setBarSpaceLimit(limit)
+  }
+
+  getBarSpaceLimit (): BarSpaceLimit {
+    return this._chartStore.getBarSpaceLimit()
+  }
+
   getVisibleRange (): VisibleRange {
     return this._chartStore.getVisibleRange()
   }

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<ThousandsSeparator>
   decimalFold?: Partial<DecimalFold>
   layout?: LayoutChild[]
+  barSpaceLimit?: Partial<BarSpaceLimit>
 }

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<BarSpaceLimit>) => 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<Styles>): void {
@@ -744,8 +757,21 @@ export default class StoreImp implements Store {
     }
   }
 
+  setBarSpaceLimit (limit: Partial<BarSpaceLimit>): 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

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
 }