diff --git a/docs/.vitepress/config/share.js b/docs/.vitepress/config/share.js index c0241a5a9..9b21a4622 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/@views/styles/config.md b/docs/@views/styles/config.md index 42ea74eac..cfa6d84bd 100644 --- a/docs/@views/styles/config.md +++ b/docs/@views/styles/config.md @@ -18,7 +18,7 @@ const styles = { } }, candle: { - // 'candle_solid' | 'candle_stroke' | 'candle_up_stroke' | 'candle_down_stroke' | 'ohlc' | 'area' + // 'candle_solid' | 'candle_stroke' | 'candle_up_stroke' | 'candle_down_stroke' | 'ohlc' | 'area' | 'heikin_ashi' type: 'candle_solid', bar: { // 'current_open' | 'previous_close' 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 05b30a60c..d5b962625 100644 --- a/src/Chart.ts +++ b/src/Chart.ts @@ -25,7 +25,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, ZoomAnchor } from './Options' +import type { Formatter, DecimalFold, LayoutChild, Options, ThousandsSeparator, BarSpaceLimit, ZoomAnchor } from './Options' import Animation from './common/Animation' import { createId } from './common/utils/id' import { createDom } from './common/utils/dom' @@ -686,6 +686,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() } @@ -694,8 +702,8 @@ export default class ChartImp implements Chart { this._chartStore.resetData() } - getDataList (): KLineData[] { - return this._chartStore.getDataList() + getDataList (mutateToCandleType = false): KLineData[] { + return this._chartStore.getDataList(mutateToCandleType) } setDataLoader (dataLoader: DataLoader): void { diff --git a/src/Options.ts b/src/Options.ts index a64712e17..b9e0a2313 100644 --- a/src/Options.ts +++ b/src/Options.ts @@ -90,6 +90,11 @@ export interface ZoomAnchor { xAxis: 'cursor_point' | 'last_bar' } +export interface BarSpaceLimit { + min: number + max: number +} + export interface Options { locale?: string timezone?: string @@ -99,4 +104,5 @@ export interface Options { decimalFold?: Partial layout?: LayoutChild[] zoomAnchor?: Partial + barSpaceLimit?: Partial } diff --git a/src/Store.ts b/src/Store.ts index bbd5d4a50..da18d3b2e 100644 --- a/src/Store.ts +++ b/src/Store.ts @@ -37,7 +37,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, ZoomAnchor } from './Options' +import type { Options, Formatter, ThousandsSeparator, DecimalFold, BarSpaceLimit, FormatDateType, FormatDateParams, FormatBigNumber, FormatExtendText, FormatExtendTextParams, ZoomAnchor } from './Options' import type { IndicatorOverride, IndicatorCreate, IndicatorFilter } from './component/Indicator' import type IndicatorImp from './component/Indicator' @@ -53,7 +53,7 @@ import { PaneIdConstants } from './pane/types' import type Chart from './Chart' -const BarSpaceLimitConstants = { +const DEFAULT_BAR_SPACE_LIMIT = { MIN: 1, MAX: 50 } @@ -105,7 +105,7 @@ export interface Store { getSymbol: () => Nullable setPeriod: (period: Period) => void getPeriod: () => Nullable - getDataList: () => KLineData[] + getDataList: (mutateToCandleType?: boolean) => KLineData[] setOffsetRightDistance: (distance: number) => void getOffsetRightDistance: () => number setMaxOffsetLeftDistance: (distance: number) => void @@ -114,6 +114,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 @@ -247,6 +249,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 */ @@ -369,7 +379,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, zoomAnchor } = options ?? {} + const { styles, locale, timezone, formatter, thousandsSeparator, decimalFold, barSpaceLimit, zoomAnchor } = options ?? {} if (isValid(styles)) { this.setStyles(styles) } @@ -389,6 +399,9 @@ export default class StoreImp implements Store { if (isValid(zoomAnchor)) { this.setZoomAnchor(zoomAnchor) } + if (isValid(barSpaceLimit)) { + this.setBarSpaceLimit(barSpaceLimit) + } } setStyles (value: string | DeepPartial): void { @@ -512,18 +525,94 @@ export default class StoreImp implements Store { return this._period } - getDataList (): KLineData[] { - return this._dataList + getDataList (mutateToCandleType = false): KLineData[] { + if (!mutateToCandleType || this._styles.candle.type !== 'heikin_ashi') { + return this._dataList + } + + let prevHaBar: Nullable = null + return this._dataList.map(value => { + const data = this.ohlcvToHeikinAshi(value, prevHaBar) + prevHaBar = data + return data + }) } - getVisibleRangeDataList (): VisibleRangeData[] { - return this._visibleRangeDataList + getVisibleRangeDataList (mutateToCandleType = false): VisibleRangeData[] { + if (!mutateToCandleType || this._styles.candle.type !== 'heikin_ashi') { + return this._visibleRangeDataList + } + + const result: VisibleRangeData[] = [] + let prevHaBar: Nullable = null + const list = this._visibleRangeDataList + const len = list.length + + for (let i = 0; i < len; i++) { + const curOrig: Nullable = list[i].data.current ?? null + if (curOrig === null) { + continue + } + const curHa = this.ohlcvToHeikinAshi(curOrig, prevHaBar) + const prevHa = prevHaBar + + let nextHa: Nullable = null + if (i + 1 < len) { + const nextOrig: Nullable = list[i + 1].data.current ?? null + nextHa = nextOrig === null ? null : this.ohlcvToHeikinAshi(nextOrig, curHa) + } else { + nextHa = null + } + + result.push({ + dataIndex: list[i].dataIndex, + x: list[i].x, + data: { + prev: prevHa, + current: curHa, + next: nextHa + } + }) + + prevHaBar = curHa + } + + return result } getVisibleRangeHighLowPrice (): Array<{ price: number; x: number }> { return this._visibleRangeHighLowPrice } + private ohlcvToHeikinAshi (currentBar: KLineData, prevHaBar: Nullable): KLineData { + if (prevHaBar === null) { + const firstHaBar: KLineData = { + timestamp: currentBar.timestamp, + open: (currentBar.open + currentBar.close) / 2, // Some methods use currentBar.o, but averaging is more common + high: currentBar.high, + low: currentBar.low, + close: (currentBar.open + currentBar.high + currentBar.low + currentBar.close) / 4 + } + + return firstHaBar + } + + const haClose = (currentBar.open + currentBar.high + currentBar.low + currentBar.close) / 4 + const haOpen = (prevHaBar.open + prevHaBar.close) / 2 + const haHigh = Math.max(currentBar.high, haOpen, haClose) + const haLow = Math.min(currentBar.low, haOpen, haClose) + + const newHaBar: KLineData = { + timestamp: currentBar.timestamp, + open: haOpen, + high: haHigh, + low: haLow, + close: haClose + } + + return newHaBar + } + private _addData ( data: KLineData | KLineData[], type: DataLoadType, @@ -768,8 +857,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/common/Styles.ts b/src/common/Styles.ts index 82a341aa2..8b045c6b6 100644 --- a/src/common/Styles.ts +++ b/src/common/Styles.ts @@ -237,7 +237,7 @@ export interface CandleTooltipStyle extends TooltipStyle { rect: CandleTooltipRectStyle } -export type CandleType = 'candle_solid' | 'candle_stroke' | 'candle_up_stroke' | 'candle_down_stroke' | 'ohlc' | 'area' +export type CandleType = 'candle_solid' | 'candle_stroke' | 'candle_up_stroke' | 'candle_down_stroke' | 'ohlc' | 'area' | 'heikin_ashi' export type CandleColorCompareRule = 'current_open' | 'previous_close' diff --git a/src/index.ts b/src/index.ts index 672f722c2..453a1a8b2 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, ZoomAnchor } from './Options' +import type { FormatDateType, Options, BarSpaceLimit, ZoomAnchor } 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 ZoomAnchor, + type CandleType, type FormatDateType, type BarSpaceLimit, type ZoomAnchor, type DomPosition, type ActionType, type IndicatorSeries, type OverlayMode } diff --git a/src/view/CandleBarView.ts b/src/view/CandleBarView.ts index c1f56a5e2..fe44b2638 100644 --- a/src/view/CandleBarView.ts +++ b/src/view/CandleBarView.ts @@ -55,6 +55,7 @@ export default class CandleBarView extends ChildrenView { halfOhlcSize = Math.floor(ohlcSize / 2) } const yAxis = pane.getAxisComponent() + this.eachChildren((visibleData, barSpace) => { const { x, data: { current, prev } } = visibleData if (isValid(current)) { @@ -86,7 +87,8 @@ export default class CandleBarView extends ChildrenView { const correction = barSpace.gapBar % 2 === 0 ? 1 : 0 let rects: Array>> = [] switch (type) { - case 'candle_solid': { + case 'candle_solid': + case 'heikin_ashi': { rects = this._createSolidBar(x, priceY, barSpace, colors, correction) break } @@ -150,7 +152,7 @@ export default class CandleBarView extends ChildrenView { this.createFigure(rect, handler ?? undefined)?.draw(ctx) }) } - }) + }, true) } } diff --git a/src/view/CandleLastPriceLabelView.ts b/src/view/CandleLastPriceLabelView.ts index bd3cc1608..3e7ec7df0 100644 --- a/src/view/CandleLastPriceLabelView.ts +++ b/src/view/CandleLastPriceLabelView.ts @@ -35,8 +35,9 @@ export default class CandleLastPriceLabelView extends View { if (priceMarkStyles.show && lastPriceMarkStyles.show && lastPriceMarkTextStyles.show) { const precision = chartStore.getSymbol()?.pricePrecision ?? SymbolDefaultPrecisionConstants.PRICE const yAxis = pane.getAxisComponent() as YAxis - const dataList = chartStore.getDataList() + const dataList = chartStore.getDataList(true) const data = dataList[dataList.length - 1] + if (isValid(data)) { const { close, open } = data const comparePrice = lastPriceMarkStyles.compareRule === 'current_open' ? open : (dataList[dataList.length - 2]?.close ?? close) diff --git a/src/view/CandleLastPriceLineView.ts b/src/view/CandleLastPriceLineView.ts index 3d08764e3..14de1bd59 100644 --- a/src/view/CandleLastPriceLineView.ts +++ b/src/view/CandleLastPriceLineView.ts @@ -28,8 +28,9 @@ export default class CandleLastPriceView extends View { const lastPriceMarkLineStyles = lastPriceMarkStyles.line if (priceMarkStyles.show && lastPriceMarkStyles.show && lastPriceMarkLineStyles.show) { const yAxis = pane.getAxisComponent() as YAxis - const dataList = chartStore.getDataList() + const dataList = chartStore.getDataList(true) const data = dataList[dataList.length - 1] + if (isValid(data)) { const { close, open } = data const comparePrice = lastPriceMarkStyles.compareRule === 'current_open' ? open : (dataList[dataList.length - 2]?.close ?? close) diff --git a/src/view/ChildrenView.ts b/src/view/ChildrenView.ts index ec517159d..f55813f87 100644 --- a/src/view/ChildrenView.ts +++ b/src/view/ChildrenView.ts @@ -24,10 +24,10 @@ export type EachChildCallback = ( ) => void export default abstract class ChildrenView extends View { - protected eachChildren (childCallback: EachChildCallback): void { + protected eachChildren (childCallback: EachChildCallback, mutateToCandleType = false): void { const pane = this.getWidget().getPane() const chartStore = pane.getChart().getChartStore() - const visibleRangeDataList = chartStore.getVisibleRangeDataList() + const visibleRangeDataList = chartStore.getVisibleRangeDataList(mutateToCandleType) const barSpace = chartStore.getBarSpace() const dataLength = visibleRangeDataList.length let index = 0