From fb7fa7eba28f1a247160a64ace65c6fb3af52a0d Mon Sep 17 00:00:00 2001 From: Abdulbasit Mamman Date: Fri, 17 Oct 2025 15:05:12 +0100 Subject: [PATCH 1/7] expose instance api --- package.json | 2 +- src/ChartProComponent.tsx | 90 ++++++++++++++++++++------------------- src/KLineChartPro.tsx | 20 ++++++++- src/types.ts | 5 ++- 4 files changed, 70 insertions(+), 47 deletions(-) diff --git a/package.json b/package.json index 71098f39..dd1a0ed8 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,6 @@ "solid-js": "^1.6.11" }, "peerDependencies": { - "klinecharts": ">=9.0.0" + "klinecharts": ">=10.0.0" } } diff --git a/src/ChartProComponent.tsx b/src/ChartProComponent.tsx index 47696350..8fe1dfbf 100644 --- a/src/ChartProComponent.tsx +++ b/src/ChartProComponent.tsx @@ -65,9 +65,10 @@ function createIndicator (widget: Nullable, indicatorName: string, isStac }, isStack, paneOptions) ?? null } +export const [ widget, setWidget ] = createSignal>(null) + const ChartProComponent: Component = props => { let widgetRef: HTMLDivElement | undefined = undefined - let widget: Nullable = null let priceUnitDom: HTMLElement @@ -105,7 +106,7 @@ const ChartProComponent: Component = props => { setTheme, getTheme: () => theme(), setStyles, - getStyles: () => widget!.getStyles(), + getStyles: () => widget()!.getStyles(), setLocale, getLocale: () => locale(), setTimezone: (timezone: string) => { setTimezone({ key: timezone, text: translateTimezone(props.timezone, locale()) }) }, @@ -113,11 +114,14 @@ const ChartProComponent: Component = props => { setSymbol, getSymbol: () => symbol(), setPeriod, - getPeriod: () => period() + getPeriod: () => period(), + getInstanceApi: () => widget(), + resize: () => widget()?.resize(), + dispose: () => {} }) const documentResize = () => { - widget?.resize() + widget()?.resize() } const adjustFromTo = (period: Period, toTimestamp: number, count: number) => { @@ -174,7 +178,7 @@ const ChartProComponent: Component = props => { onMount(() => { window.addEventListener('resize', documentResize) - widget = init(widgetRef!, { + setWidget(init(widgetRef!, { customApi: { formatDate: (dateTimeFormat: Intl.DateTimeFormat, timestamp, format: string, type: FormatDateType) => { const p = period() @@ -209,10 +213,10 @@ const ChartProComponent: Component = props => { return utils.formatDate(dateTimeFormat, timestamp, 'YYYY-MM-DD HH:mm') } } - }) + })) - if (widget) { - const watermarkContainer = widget.getDom('candle_pane', DomPosition.Main) + if (widget()) { + const watermarkContainer = widget()!.getDom('candle_pane', DomPosition.Main) if (watermarkContainer) { let watermark = document.createElement('div') watermark.className = 'klinecharts-pro-watermark' @@ -225,49 +229,49 @@ const ChartProComponent: Component = props => { watermarkContainer.appendChild(watermark) } - const priceUnitContainer = widget.getDom('candle_pane', DomPosition.YAxis) + const priceUnitContainer = widget()!.getDom('candle_pane', DomPosition.YAxis) priceUnitDom = document.createElement('span') priceUnitDom.className = 'klinecharts-pro-price-unit' priceUnitContainer?.appendChild(priceUnitDom) } mainIndicators().forEach(indicator => { - createIndicator(widget, indicator, true, { id: 'candle_pane' }) + createIndicator(widget(), indicator, true, { id: 'candle_pane' }) }) const subIndicatorMap = {} props.subIndicators!.forEach(indicator => { - const paneId = createIndicator(widget, indicator, true) + const paneId = createIndicator(widget(), indicator, true) if (paneId) { // @ts-expect-error subIndicatorMap[indicator] = paneId } }) setSubIndicators(subIndicatorMap) - widget?.loadMore(timestamp => { + widget()?.loadMore(timestamp => { loading = true const get = async () => { const p = period() const [to] = adjustFromTo(p, timestamp!, 1) const [from] = adjustFromTo(p, to, 500) const kLineDataList = await props.datafeed.getHistoryKLineData(symbol(), p, from, to) - widget?.applyMoreData(kLineDataList, kLineDataList.length > 0) + widget()?.applyMoreData(kLineDataList, kLineDataList.length > 0) loading = false } get() }) - widget?.subscribeAction(ActionType.OnTooltipIconClick, (data) => { + widget()?.subscribeAction(ActionType.OnTooltipIconClick, (data) => { if (data.indicatorName) { switch (data.iconId) { case 'visible': { - widget?.overrideIndicator({ name: data.indicatorName, visible: true }, data.paneId) + widget()?.overrideIndicator({ name: data.indicatorName, visible: true }, data.paneId) break } case 'invisible': { - widget?.overrideIndicator({ name: data.indicatorName, visible: false }, data.paneId) + widget()?.overrideIndicator({ name: data.indicatorName, visible: false }, data.paneId) break } case 'setting': { - const indicator = widget?.getIndicatorByPaneId(data.paneId, data.indicatorName) as Indicator + const indicator = widget()?.getIndicatorByPaneId(data.paneId, data.indicatorName) as Indicator setIndicatorSettingModalParams({ visible: true, indicatorName: data.indicatorName, paneId: data.paneId, calcParams: indicator.calcParams }) @@ -276,12 +280,12 @@ const ChartProComponent: Component = props => { case 'close': { if (data.paneId === 'candle_pane') { const newMainIndicators = [...mainIndicators()] - widget?.removeIndicator('candle_pane', data.indicatorName) + widget()?.removeIndicator('candle_pane', data.indicatorName) newMainIndicators.splice(newMainIndicators.indexOf(data.indicatorName), 1) setMainIndicators(newMainIndicators) } else { const newIndicators = { ...subIndicators() } - widget?.removeIndicator(data.paneId, data.indicatorName) + widget()?.removeIndicator(data.paneId, data.indicatorName) // @ts-expect-error delete newIndicators[data.indicatorName] setSubIndicators(newIndicators) @@ -305,7 +309,7 @@ const ChartProComponent: Component = props => { } else { priceUnitDom.style.display = 'none' } - widget?.setPriceVolumePrecision(s?.pricePrecision ?? 2, s?.volumePrecision ?? 0) + widget()?.setPriceVolumePrecision(s?.pricePrecision ?? 2, s?.volumePrecision ?? 0) }) createEffect((prev?: PrevSymbolPeriod) => { @@ -320,9 +324,9 @@ const ChartProComponent: Component = props => { const get = async () => { const [from, to] = adjustFromTo(p, new Date().getTime(), 500) const kLineDataList = await props.datafeed.getHistoryKLineData(s, p, from, to) - widget?.applyNewData(kLineDataList, kLineDataList.length > 0) + widget()?.applyNewData(kLineDataList, kLineDataList.length > 0) props.datafeed.subscribe(s, p, data => { - widget?.updateData(data) + widget()?.updateData(data) }) loading = false setLoadingVisible(false) @@ -335,9 +339,9 @@ const ChartProComponent: Component = props => { createEffect(() => { const t = theme() - widget?.setStyles(t) + widget()?.setStyles(t) const color = t === 'dark' ? '#929AA5' : '#76808F' - widget?.setStyles({ + widget()?.setStyles({ indicator: { tooltip: { icons: [ @@ -424,17 +428,17 @@ const ChartProComponent: Component = props => { }) createEffect(() => { - widget?.setLocale(locale()) + widget()?.setLocale(locale()) }) createEffect(() => { - widget?.setTimezone(timezone().key) + widget()?.setTimezone(timezone().key) }) createEffect(() => { if (styles()) { - widget?.setStyles(styles()) - setWidgetDefaultStyles(lodashClone(widget!.getStyles())) + widget()?.setStyles(styles()) + setWidgetDefaultStyles(lodashClone(widget()!.getStyles())) } }) @@ -457,10 +461,10 @@ const ChartProComponent: Component = props => { onMainIndicatorChange={data => { const newMainIndicators = [...mainIndicators()] if (data.added) { - createIndicator(widget, data.name, true, { id: 'candle_pane' }) + createIndicator(widget(), data.name, true, { id: 'candle_pane' }) newMainIndicators.push(data.name) } else { - widget?.removeIndicator('candle_pane', data.name) + widget()?.removeIndicator('candle_pane', data.name) newMainIndicators.splice(newMainIndicators.indexOf(data.name), 1) } setMainIndicators(newMainIndicators) @@ -468,14 +472,14 @@ const ChartProComponent: Component = props => { onSubIndicatorChange={data => { const newSubIndicators = { ...subIndicators() } if (data.added) { - const paneId = createIndicator(widget, data.name) + const paneId = createIndicator(widget(), data.name) if (paneId) { // @ts-expect-error newSubIndicators[data.name] = paneId } } else { if (data.paneId) { - widget?.removeIndicator(data.paneId, data.name) + widget()?.removeIndicator(data.paneId, data.name) // @ts-expect-error delete newSubIndicators[data.name] } @@ -494,10 +498,10 @@ const ChartProComponent: Component = props => { { setSettingModalVisible(false) }} onChange={style => { - widget?.setStyles(style) + widget()?.setStyles(style) }} onRestoreDefault={(options: SelectDataSourceItem[]) => { const style = {} @@ -505,7 +509,7 @@ const ChartProComponent: Component = props => { const key = option.key lodashSet(style, key, utils.formatValue(widgetDefaultStyles(), key)) }) - widget?.setStyles(style) + widget()?.setStyles(style) }} /> @@ -523,7 +527,7 @@ const ChartProComponent: Component = props => { onClose={() => { setIndicatorSettingModalParams({ visible: false, indicatorName: '', paneId: '', calcParams: [] }) }} onConfirm={(params)=> { const modalParams = indicatorSettingModalParams() - widget?.overrideIndicator({ name: modalParams.indicatorName, calcParams: params }, modalParams.paneId) + widget()?.overrideIndicator({ name: modalParams.indicatorName, calcParams: params }, modalParams.paneId) }} /> @@ -536,7 +540,7 @@ const ChartProComponent: Component = props => { onMenuClick={async () => { try { await startTransition(() => setDrawingBarVisible(!drawingBarVisible())) - widget?.resize() + widget()?.resize() } catch (e) {} }} onSymbolClick={() => { setSymbolSearchModalVisible(!symbolSearchModalVisible()) }} @@ -546,7 +550,7 @@ const ChartProComponent: Component = props => { onSettingClick={() => { setSettingModalVisible((visible => !visible)) }} onScreenshotClick={() => { if (widget) { - const url = widget.getConvertPictureUrl(true, 'jpeg', props.theme === 'dark' ? '#151517' : '#ffffff') + const url = widget()!.getConvertPictureUrl(true, 'jpeg', props.theme === 'dark' ? '#151517' : '#ffffff') setScreenshotUrl(url) } }} @@ -559,11 +563,11 @@ const ChartProComponent: Component = props => { { widget?.createOverlay(overlay) }} - onModeChange={mode => { widget?.overrideOverlay({ mode: mode as OverlayMode }) }} - onLockChange={lock => { widget?.overrideOverlay({ lock }) }} - onVisibleChange={visible => { widget?.overrideOverlay({ visible }) }} - onRemoveClick={(groupId) => { widget?.removeOverlay({ groupId }) }}/> + onDrawingItemClick={overlay => { widget()?.createOverlay(overlay) }} + onModeChange={mode => { widget()?.overrideOverlay({ mode: mode as OverlayMode }) }} + onLockChange={lock => { widget()?.overrideOverlay({ lock }) }} + onVisibleChange={visible => { widget()?.overrideOverlay({ visible }) }} + onRemoveClick={(groupId) => { widget()?.removeOverlay({ groupId }) }}/>
= null + destroy() { + if (this._container) + dispose(this._container!) + + this._container = null + this._chartApi = null + } setTheme (theme: string): void { this._container?.setAttribute('data-theme', theme) @@ -128,4 +135,13 @@ export default class KLineChartPro implements ChartPro { getPeriod (): Period { return this._chartApi!.getPeriod() } + getInstanceApi(): Nullable { + return widget() + } + resize(): void { + widget()!.resize() + } + dispose(): void { + this.destroy() + } } diff --git a/src/types.ts b/src/types.ts index 8f1b97c9..c25e26b1 100644 --- a/src/types.ts +++ b/src/types.ts @@ -12,7 +12,7 @@ * limitations under the License. */ -import { KLineData, Styles, DeepPartial } from 'klinecharts' +import { KLineData, Styles, DeepPartial, Nullable, Chart } from 'klinecharts' export interface SymbolInfo { ticker: string @@ -71,4 +71,7 @@ export interface ChartPro { getSymbol(): SymbolInfo setPeriod(period: Period): void getPeriod(): Period + getInstanceApi(): Nullable + resize(): void + dispose(): void } From d0a10b7c4ae5fdad2384c6ff277c35c884eefddd Mon Sep 17 00:00:00 2001 From: Abdulbasit Mamman Date: Fri, 17 Oct 2025 18:13:26 +0100 Subject: [PATCH 2/7] fix widget initialization formatter --- package-lock.json | 14 ++++++------- package.json | 2 +- src/ChartProComponent.tsx | 41 ++++++++++++++++++++------------------- 3 files changed, 29 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index d178a974..7a8d0e66 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,7 +35,7 @@ "vitest": "^0.28.4" }, "peerDependencies": { - "klinecharts": ">=9.0.0" + "klinecharts": "^10.0.0-alpha9" } }, "node_modules/@adobe/css-tools": { @@ -5224,9 +5224,9 @@ } }, "node_modules/klinecharts": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/klinecharts/-/klinecharts-9.1.1.tgz", - "integrity": "sha512-OnHeStm2zFf6iTPMPB720+gpD8psXmajZfd7eqZN+Z5FxnYF7sSsPE02J84JTJ0AVrXYOdLJShIdYkr7aNN5LA==", + "version": "10.0.0-alpha9", + "resolved": "https://registry.npmjs.org/klinecharts/-/klinecharts-10.0.0-alpha9.tgz", + "integrity": "sha512-cpI8x2TE7qLr36WKLFbD8chg5Un3i+o1JKy/H0IMxSh5YqhTvfth7PMB5okY4a37HfyIa53n26l/NT44usk6Fg==", "peer": true }, "node_modules/klona": { @@ -11421,9 +11421,9 @@ } }, "klinecharts": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/klinecharts/-/klinecharts-9.1.1.tgz", - "integrity": "sha512-OnHeStm2zFf6iTPMPB720+gpD8psXmajZfd7eqZN+Z5FxnYF7sSsPE02J84JTJ0AVrXYOdLJShIdYkr7aNN5LA==", + "version": "10.0.0-alpha9", + "resolved": "https://registry.npmjs.org/klinecharts/-/klinecharts-10.0.0-alpha9.tgz", + "integrity": "sha512-cpI8x2TE7qLr36WKLFbD8chg5Un3i+o1JKy/H0IMxSh5YqhTvfth7PMB5okY4a37HfyIa53n26l/NT44usk6Fg==", "peer": true }, "klona": { diff --git a/package.json b/package.json index dd1a0ed8..35311006 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,6 @@ "solid-js": "^1.6.11" }, "peerDependencies": { - "klinecharts": ">=10.0.0" + "klinecharts": "^10.0.0-alpha9" } } diff --git a/src/ChartProComponent.tsx b/src/ChartProComponent.tsx index 8fe1dfbf..a199881e 100644 --- a/src/ChartProComponent.tsx +++ b/src/ChartProComponent.tsx @@ -16,7 +16,8 @@ import { createSignal, createEffect, onMount, Show, onCleanup, startTransition, import { init, dispose, utils, Nullable, Chart, OverlayMode, Styles, - TooltipIconPosition, ActionType, PaneOptions, Indicator, DomPosition, FormatDateType + TooltipIconPosition, ActionType, PaneOptions, Indicator, DomPosition, FormatDateType, + FormatDateParams } from 'klinecharts' import lodashSet from 'lodash/set' @@ -43,9 +44,9 @@ interface PrevSymbolPeriod { } function createIndicator (widget: Nullable, indicatorName: string, isStack?: boolean, paneOptions?: PaneOptions): Nullable { - if (indicatorName === 'VOL') { - paneOptions = { gap: { bottom: 2 }, ...paneOptions } - } + // if (indicatorName === 'VOL') { + // paneOptions = { state: { bottom: 2 }, ...paneOptions } + // } return widget?.createIndicator({ name: indicatorName, // @ts-expect-error @@ -179,38 +180,38 @@ const ChartProComponent: Component = props => { onMount(() => { window.addEventListener('resize', documentResize) setWidget(init(widgetRef!, { - customApi: { - formatDate: (dateTimeFormat: Intl.DateTimeFormat, timestamp, format: string, type: FormatDateType) => { + formatter: { + formatDate: (params: FormatDateParams) => { const p = period() switch (p.timespan) { case 'minute': { - if (type === FormatDateType.XAxis) { - return utils.formatDate(dateTimeFormat, timestamp, 'HH:mm') + if (params.type === 'xAxis') { + return utils.formatDate(params.dateTimeFormat, params.timestamp, 'HH:mm') } - return utils.formatDate(dateTimeFormat, timestamp, 'YYYY-MM-DD HH:mm') + return utils.formatDate(params.dateTimeFormat, params.timestamp, 'YYYY-MM-DD HH:mm') } case 'hour': { - if (type === FormatDateType.XAxis) { - return utils.formatDate(dateTimeFormat, timestamp, 'MM-DD HH:mm') + if (params.type === 'xAxis') { + return utils.formatDate(params.dateTimeFormat, params.timestamp, 'MM-DD HH:mm') } - return utils.formatDate(dateTimeFormat, timestamp, 'YYYY-MM-DD HH:mm') + return utils.formatDate(params.dateTimeFormat, params.timestamp, 'YYYY-MM-DD HH:mm') } case 'day': - case 'week': return utils.formatDate(dateTimeFormat, timestamp, 'YYYY-MM-DD') + case 'week': return utils.formatDate(params.dateTimeFormat, params.timestamp, 'YYYY-MM-DD') case 'month': { - if (type === FormatDateType.XAxis) { - return utils.formatDate(dateTimeFormat, timestamp, 'YYYY-MM') + if (params.type === 'xAxis') { + return utils.formatDate(params.dateTimeFormat, params.timestamp, 'YYYY-MM') } - return utils.formatDate(dateTimeFormat, timestamp, 'YYYY-MM-DD') + return utils.formatDate(params.dateTimeFormat, params.timestamp, 'YYYY-MM-DD') } case 'year': { - if (type === FormatDateType.XAxis) { - return utils.formatDate(dateTimeFormat, timestamp, 'YYYY') + if (params.type === 'xAxis') { + return utils.formatDate(params.dateTimeFormat, params.timestamp, 'YYYY') } - return utils.formatDate(dateTimeFormat, timestamp, 'YYYY-MM-DD') + return utils.formatDate(params.dateTimeFormat, params.timestamp, 'YYYY-MM-DD') } } - return utils.formatDate(dateTimeFormat, timestamp, 'YYYY-MM-DD HH:mm') + return utils.formatDate(params.dateTimeFormat, params.timestamp, 'YYYY-MM-DD HH:mm') } } })) From a7dfc679a302fd94ab133ce3aad7b6a3b23ba184 Mon Sep 17 00:00:00 2001 From: Abdulbasit Mamman Date: Fri, 17 Oct 2025 19:26:03 +0100 Subject: [PATCH 3/7] implement dataloader --- src/ChartProComponent.tsx | 32 ++++++++++++-------------------- src/DataLoader.ts | 35 +++++++++++++++++++++++++++++++++++ src/KLineChartPro.tsx | 4 +++- 3 files changed, 50 insertions(+), 21 deletions(-) create mode 100644 src/DataLoader.ts diff --git a/src/ChartProComponent.tsx b/src/ChartProComponent.tsx index a199881e..7f916c0f 100644 --- a/src/ChartProComponent.tsx +++ b/src/ChartProComponent.tsx @@ -16,7 +16,7 @@ import { createSignal, createEffect, onMount, Show, onCleanup, startTransition, import { init, dispose, utils, Nullable, Chart, OverlayMode, Styles, - TooltipIconPosition, ActionType, PaneOptions, Indicator, DomPosition, FormatDateType, + ActionType, PaneOptions, Indicator, DomPosition, FormatDateType, FormatDateParams } from 'klinecharts' @@ -33,9 +33,11 @@ import { import { translateTimezone } from './widget/timezone-modal/data' import { SymbolInfo, Period, ChartProOptions, ChartPro } from './types' +import ChartDataLoader from './DataLoader' -export interface ChartProComponentProps extends Required> { +export interface ChartProComponentProps extends Required> { ref: (chart: ChartPro) => void + dataloader: ChartDataLoader } interface PrevSymbolPeriod { @@ -44,9 +46,9 @@ interface PrevSymbolPeriod { } function createIndicator (widget: Nullable, indicatorName: string, isStack?: boolean, paneOptions?: PaneOptions): Nullable { - // if (indicatorName === 'VOL') { - // paneOptions = { state: { bottom: 2 }, ...paneOptions } - // } + if (indicatorName === 'VOL') { + paneOptions = { axis: { gap: { bottom: 2 } }, ...paneOptions } + } return widget?.createIndicator({ name: indicatorName, // @ts-expect-error @@ -217,7 +219,7 @@ const ChartProComponent: Component = props => { })) if (widget()) { - const watermarkContainer = widget()!.getDom('candle_pane', DomPosition.Main) + const watermarkContainer = widget()!.getDom('candle_pane', 'main') if (watermarkContainer) { let watermark = document.createElement('div') watermark.className = 'klinecharts-pro-watermark' @@ -230,7 +232,7 @@ const ChartProComponent: Component = props => { watermarkContainer.appendChild(watermark) } - const priceUnitContainer = widget()!.getDom('candle_pane', DomPosition.YAxis) + const priceUnitContainer = widget()!.getDom('candle_pane', 'yAxis') priceUnitDom = document.createElement('span') priceUnitDom.className = 'klinecharts-pro-price-unit' priceUnitContainer?.appendChild(priceUnitDom) @@ -248,19 +250,9 @@ const ChartProComponent: Component = props => { } }) setSubIndicators(subIndicatorMap) - widget()?.loadMore(timestamp => { - loading = true - const get = async () => { - const p = period() - const [to] = adjustFromTo(p, timestamp!, 1) - const [from] = adjustFromTo(p, to, 500) - const kLineDataList = await props.datafeed.getHistoryKLineData(symbol(), p, from, to) - widget()?.applyMoreData(kLineDataList, kLineDataList.length > 0) - loading = false - } - get() - }) - widget()?.subscribeAction(ActionType.OnTooltipIconClick, (data) => { + widget()?.setDataLoader(props.dataloader) + + widget()?.subscribeAction('onCandleTooltipFeatureClick', (data) => { if (data.indicatorName) { switch (data.iconId) { case 'visible': { diff --git a/src/DataLoader.ts b/src/DataLoader.ts new file mode 100644 index 00000000..fc84d4ff --- /dev/null +++ b/src/DataLoader.ts @@ -0,0 +1,35 @@ +import { DataLoader, DataLoaderGetBarsParams, DataLoaderSubscribeBarParams, DataLoaderUnsubscribeBarParams } from "klinecharts"; +import { Datafeed } from "./types"; + +export default class ChartDataLoader implements DataLoader { + private _datafeed: Datafeed; + + constructor(datafeed: Datafeed) { + this._datafeed = datafeed; + } + + async getBars (params: DataLoaderGetBarsParams): Promise { + const { type, timestamp, symbol, period, callback } = params; + widget()?.loadMore(timestamp => { + loading = true + const get = async () => { + const p = period() + const [to] = adjustFromTo(p, timestamp!, 1) + const [from] = adjustFromTo(p, to, 500) + const kLineDataList = await props.datafeed.getHistoryKLineData(symbol(), p, from, to) + widget()?.applyMoreData(kLineDataList, kLineDataList.length > 0) + loading = false + } + get() + }) + const klineData = await this._datafeed.getHistoryKLineData(symbol, period, from, to); + } + + subscribeBar (params: DataLoaderSubscribeBarParams): void { + const { symbol, period, callback } = params; + } + + unsubscribeBar (params: DataLoaderUnsubscribeBarParams): void { + const { symbol, period } = params; + } +} \ No newline at end of file diff --git a/src/KLineChartPro.tsx b/src/KLineChartPro.tsx index 01130f5e..63e308c1 100644 --- a/src/KLineChartPro.tsx +++ b/src/KLineChartPro.tsx @@ -19,6 +19,7 @@ import { utils, Nullable, DeepPartial, Styles, Chart, dispose } from 'klinechart import ChartProComponent, { widget } from './ChartProComponent' import { SymbolInfo, Period, ChartPro, ChartProOptions } from './types' +import ChartDataLoader from './DataLoader' const Logo = (
  • { - props.onMainIndicatorChange({ name, paneId: 'candle_pane', added: !checked }) + props.onMainIndicatorChange({ name, id: 'candle_pane', added: !checked }) }}>
    • @@ -76,7 +77,7 @@ const IndicatorModal: Component = props => { class="row" onClick={_ => { // @ts-expect-error - props.onSubIndicatorChange({ name, paneId: props.subIndicators[name] ?? '', added: !checked }); + props.onSubIndicatorChange({ name, id: props.subIndicators[name] ?? '', added: !checked }); }}> From 0bce5309f24fdfc4844acfb80bbb7c48fce18f01 Mon Sep 17 00:00:00 2001 From: Abdulbasit Mamman Date: Mon, 20 Oct 2025 17:12:56 +0100 Subject: [PATCH 7/7] remove comment --- src/ChartProComponent.tsx | 29 ----------------------------- 1 file changed, 29 deletions(-) diff --git a/src/ChartProComponent.tsx b/src/ChartProComponent.tsx index 7ae24a16..8644d943 100644 --- a/src/ChartProComponent.tsx +++ b/src/ChartProComponent.tsx @@ -76,35 +76,6 @@ function createIndicator (widget: Chart, indicatorName: string, isStack?: boolea } }}, isStack, paneOptions) ?? null - // if (!indi) - // return null - - // const _indi = widget.getIndicators({ id: indi, name: indicatorName, paneId: paneOptions?.id}).at(0) - // widget.overrideIndicator({ - // id: indi, - // name: indicatorName, - // createTooltipDataSource: (param) => { - // const indiStyles = param.chart.getStyles().indicator - // const features = indiStyles.tooltip.features - // const icons: TooltipFeatureStyle[] = [] - // if (param.indicator.visible) { - // icons.push(features[1]) - // icons.push(features[2]) - // icons.push(features[3]) - // } else { - // icons.push(features[0]) - // icons.push(features[2]) - // icons.push(features[3]) - // } - // return { - // name: `${indicatorName}_${indi}`, - // calcParamsText: indicatorName, - // features: icons, - // legends: [] - // } - // } - // }) - return indi }