From 5677da8182e3c1c7f4d08eef0b08ae4c8bc04663 Mon Sep 17 00:00:00 2001 From: liihuu Date: Tue, 22 Oct 2024 00:57:22 +0800 Subject: [PATCH] impr: merge some method parameters --- src/Chart.ts | 15 ++-- src/Options.ts | 49 ++++++---- src/Store.ts | 38 +++++--- src/common/utils/format.ts | 33 ++++++- src/component/Overlay.ts | 6 +- src/component/XAxis.ts | 11 ++- src/component/YAxis.ts | 14 ++- src/extension/overlay/fibonacciLine.ts | 6 +- src/extension/overlay/priceLine.ts | 7 +- src/index.ts | 4 +- src/view/CandleHighLowPriceView.ts | 12 ++- src/view/CandleLastPriceLabelView.ts | 7 +- src/view/CandleTooltipView.ts | 108 ++++++++--------------- src/view/CrosshairHorizontalLabelView.ts | 5 +- src/view/CrosshairVerticalLabelView.ts | 2 +- src/view/IndicatorLastValueView.ts | 7 +- src/view/IndicatorTooltipView.ts | 27 +++--- src/view/OverlayView.ts | 49 +++------- src/view/OverlayXAxisView.ts | 17 ++-- src/view/OverlayYAxisView.ts | 30 +++---- 20 files changed, 204 insertions(+), 243 deletions(-) diff --git a/src/Chart.ts b/src/Chart.ts index 0e2ccb39..6f0056bb 100644 --- a/src/Chart.ts +++ b/src/Chart.ts @@ -19,13 +19,12 @@ import type { KLineData } from './common/Data' import type Coordinate from './common/Coordinate' import type Point from './common/Point' import { UpdateLevel } from './common/Updater' -import type { Styles } from './common/Styles' import type Crosshair from './common/Crosshair' import { ActionType, type ActionCallback } from './common/Action' import type { LoadDataCallback, LoadDataMore } from './common/LoadDataCallback' import type Precision from './common/Precision' import type VisibleRange from './common/VisibleRange' -import { type CustomApi, type LayoutChild, LayoutChildType, type Options } from './Options' +import { type LayoutChild, LayoutChildType, type Options, type OverrideOptions } from './Options' import Animation from './common/Animation' import { createId } from './common/utils/id' @@ -72,8 +71,8 @@ export interface Chart { id: string getDom: (paneId?: string, position?: DomPosition) => Nullable getSize: (paneId?: string, position?: DomPosition) => Nullable - setOptions: (options: Options) => void - getOptions: () => Required> & { customApi: CustomApi, styles: Styles } + setOptions: (options: OverrideOptions) => void + getOptions: () => Options setPriceVolumePrecision: (pricePrecision: number, volumePrecision: number) => void getPriceVolumePrecision: () => Precision setOffsetRightDistance: (distance: number) => void @@ -142,7 +141,7 @@ export default class ChartImp implements Chart { private _layoutPending = false - constructor (container: HTMLElement, options?: Options) { + constructor (container: HTMLElement, options?: OverrideOptions) { this._initContainer(container) this._chartEvent = new Event(this._chartContainer, this) this._chartStore = new ChartStore(this, options) @@ -179,7 +178,7 @@ export default class ChartImp implements Chart { this._chartBounding.height = Math.floor(this._chartContainer.clientHeight) } - private _initPanes (options?: Options): void { + private _initPanes (options?: OverrideOptions): void { const layout = options?.layout ?? [{ type: LayoutChildType.Candle }] let candlePaneInitialized = false let xAxisPaneInitialized = false @@ -624,7 +623,7 @@ export default class ChartImp implements Chart { return this._chartStore.getPrecision() } - setOptions (options: Options): void { + setOptions (options: OverrideOptions): void { this._chartStore.setOptions(options) const axis = (this._xAxisPane.getAxisComponent() as unknown as AxisImp) axis.buildTicks(true) @@ -637,7 +636,7 @@ export default class ChartImp implements Chart { }) } - getOptions (): Required> & { customApi: CustomApi, styles: Styles } { + getOptions (): Options { return this._chartStore.getOptions() } diff --git a/src/Options.ts b/src/Options.ts index 9c7f3e8a..8fb16fb7 100644 --- a/src/Options.ts +++ b/src/Options.ts @@ -14,7 +14,6 @@ import type DeepPartial from './common/DeepPartial' import type { Styles } from './common/Styles' -import { formatDateToString, formatBigNumber } from './common/utils/format' import type { IndicatorCreate } from './component/Indicator' import type { PaneOptions } from './pane/types' @@ -25,7 +24,7 @@ export enum FormatDateType { XAxis } -export type FormatDate = (dateTimeFormat: Intl.DateTimeFormat, timestamp: number, format: string, type: FormatDateType) => string +export type FormatDate = (timestamp: number, format: string, type: FormatDateType) => string export type FormatBigNumber = (value: string | number) => string @@ -34,15 +33,6 @@ export interface CustomApi { formatBigNumber: FormatBigNumber } -export function getDefaultCustomApi (): CustomApi { - return { - formatDate: formatDateToString, - formatBigNumber - } -} - -export const defaultLocale = 'en-US' - export interface Locales { time: string open: string @@ -67,12 +57,33 @@ export interface LayoutChild { options?: PaneOptions } -export interface Options { - layout?: LayoutChild[] - locale?: string - timezone?: string - styles?: string | DeepPartial - customApi?: Partial - thousandsSeparator?: string - decimalFoldThreshold?: number + +export const enum DecimalFoldType { + CurlyBracket = 'curlyBracket', + Subscript = 'subscript' +} + +export interface DecimalFold { + type: DecimalFoldType + threshold: number + format: (value: string | number) => string +} + +export interface ThousandsSeparator { + sign: string + format: (value: string | number) => string +} + +export interface Options { + locale: string + timezone: string + styles: Styles + customApi: CustomApi + thousandsSeparator: ThousandsSeparator + decimalFold: DecimalFold +} + +export type OverrideOptions = DeepPartial> & { + layout?: LayoutChild[] + styles?: string | DeepPartial } diff --git a/src/Store.ts b/src/Store.ts index b5396d35..b8182cdb 100644 --- a/src/Store.ts +++ b/src/Store.ts @@ -24,7 +24,7 @@ import type BarSpace from './common/BarSpace'; import type Precision from './common/Precision' import Action from './common/Action'; import { ActionType, type ActionCallback } from './common/Action'; -import { formatValue, type DateTime, formatDateToDateTime } from './common/utils/format' +import { formatValue, type DateTime, formatDateToDateTime, formatFoldDecimalForCurlyBracket, formatFoldDecimalForSubscript, formatDateToString, formatBigNumber, formatThousands } from './common/utils/format' import { getDefaultStyles, type Styles, type TooltipLegend } from './common/Styles' import { isArray, isString, isValid, isNumber, isBoolean, isFunction, merge } from './common/utils/typeChecks' import { createId } from './common/utils/id' @@ -35,7 +35,7 @@ import { UpdateLevel } from './common/Updater' import type { MouseTouchEvent } from './common/SyntheticEvent' import { type LoadDataCallback, type LoadDataParams, LoadDataType } from './common/LoadDataCallback' -import { getDefaultCustomApi, type CustomApi, defaultLocale, type Options } from './Options' +import { type Options, DecimalFoldType, type OverrideOptions } from './Options' import { IndicatorDataState, type IndicatorCreate, type IndicatorFilter } from './component/Indicator' import type IndicatorImp from './component/Indicator' @@ -122,10 +122,26 @@ export default class Store { */ private readonly _options = { styles: getDefaultStyles(), - customApi: getDefaultCustomApi(), - locale: defaultLocale, - thousandsSeparator: ',', - decimalFoldThreshold: 3, + customApi: { + formatDate: (timestamp: number, format: string) => formatDateToString(this._dateTimeFormat, timestamp, format), + formatBigNumber + }, + locale: 'en-US', + thousandsSeparator: { + sign: ',', + format: (value: string | number) => formatThousands(value, this._options.thousandsSeparator.sign) + }, + decimalFold: { + type: DecimalFoldType.CurlyBracket, + threshold: 3, + format: (value: string | number) => { + const { type, threshold } = this._options.decimalFold + if (type === DecimalFoldType.CurlyBracket) { + return formatFoldDecimalForCurlyBracket(value, threshold) + } + return formatFoldDecimalForSubscript(value, threshold) + } + }, timezone: 'auto' } @@ -309,14 +325,14 @@ export default class Store { attrsIndex: -1 } - constructor (chart: Chart, options?: Options) { + constructor (chart: Chart, options?: OverrideOptions) { this._chart = chart this._calcOptimalBarSpace() this._lastBarRightSideDiffBarCount = this._offsetRightDistance / this._barSpace this.setOptions(options) } - setOptions (options?: Options): void { + setOptions (options?: OverrideOptions): void { if ( !isValid(this._dateTimeFormat) || (isString(options?.timezone) && options.timezone !== this._options.timezone) @@ -361,7 +377,7 @@ export default class Store { } } - getOptions (): Required> & { customApi: CustomApi, styles: Styles } { + getOptions (): Options { return this._options } @@ -695,10 +711,6 @@ export default class Store { } } - getDateTimeFormat (): Intl.DateTimeFormat { - return this._dateTimeFormat - } - getBarSpace (): BarSpace { return { bar: this._barSpace, diff --git a/src/common/utils/format.ts b/src/common/utils/format.ts index b1422269..4c27a1bc 100644 --- a/src/common/utils/format.ts +++ b/src/common/utils/format.ts @@ -132,18 +132,45 @@ export function formatThousands (value: string | number, sign: string): string { return vl.replace(/(\d)(?=(\d{3})+$)/g, $1 => `${$1}${sign}`) } -export function formatFoldDecimal (value: string | number, threshold: number): string { +export function formatFoldDecimal (value: string | number, threshold: number, format: (count: number) => string): string { const vl = `${value}` const reg = new RegExp('\\.0{' + threshold + ',}[1-9][0-9]*$') if (reg.test(vl)) { const result = vl.split('.') - const v = result[result.length - 1] + const lastIndex = result.length - 1 + const v = result[lastIndex] const match = v.match(/0*/) if (isValid(match)) { const count = match[0].length - result[result.length - 1] = v.replace(/0*/, `0{${count}}`) + result[lastIndex] = v.replace(/0*/, `0${format(count)}`) return result.join('.') } } return vl } + +export function formatFoldDecimalForCurlyBracket (value: string | number, threshold: number): string { + return formatFoldDecimal(value, threshold, count => `{${count}}`) +} + +const subscriptNumbers = { + '0': '₀', + '1': '₁', + '2': '₂', + '3': '₃', + '4': '₄', + '5': '₅', + '6': '₆', + '7': '₇', + '8': '₈', + '9': '₉' +} + +export function formatFoldDecimalForSubscript (value: string | number, threshold: number): string { + return formatFoldDecimal(value, threshold, count => { + return `${count}`.replace(/\d/, $1 => { + // eslint-disable-next-line @typescript-eslint/no-unsafe-return + return subscriptNumbers[$1] ?? '' + }) + }) +} diff --git a/src/component/Overlay.ts b/src/component/Overlay.ts index 294a4a9c..a244e9f1 100644 --- a/src/component/Overlay.ts +++ b/src/component/Overlay.ts @@ -27,6 +27,7 @@ import { clone, isArray, isFunction, isNumber, isString, isValid, merge } from ' import type { XAxis } from './XAxis' import type { YAxis } from './YAxis' import type ChartStore from '../Store' +import type { Options } from '../Options' export enum OverlayMode { Normal = 'normal', @@ -75,15 +76,12 @@ export interface OverlayPrecision extends Precision { } export interface OverlayCreateFiguresCallbackParams { + options: Options overlay: Overlay coordinates: Coordinate[] bounding: Bounding barSpace: BarSpace precision: OverlayPrecision - thousandsSeparator: string - decimalFoldThreshold: number - dateTimeFormat: Intl.DateTimeFormat - defaultStyles: OverlayStyle xAxis: Nullable yAxis: Nullable } diff --git a/src/component/XAxis.ts b/src/component/XAxis.ts index d530a110..7181a7c2 100644 --- a/src/component/XAxis.ts +++ b/src/component/XAxis.ts @@ -75,29 +75,28 @@ export default abstract class XAxisImp extends AxisImp implements XAxis { const chartStore = this.getParent().getChart().getChartStore() const formatDate = chartStore.getOptions().customApi.formatDate const timeTickList = chartStore.getVisibleRangeTimeTickList() - const dateTimeFormat = chartStore.getDateTimeFormat() const ticks = timeTickList.map(({ dataIndex, weight, timestamp }) => { let text = '' switch (weight) { case TimeWeightConstants.Year: { - text = formatDate(dateTimeFormat, timestamp, 'YYYY', FormatDateType.XAxis) + text = formatDate(timestamp, 'YYYY', FormatDateType.XAxis) break } case TimeWeightConstants.Month: { - text = formatDate(dateTimeFormat, timestamp, 'YYYY-MM', FormatDateType.XAxis) + text = formatDate(timestamp, 'YYYY-MM', FormatDateType.XAxis) break } case TimeWeightConstants.Day: { - text = formatDate(dateTimeFormat, timestamp, 'MM-DD', FormatDateType.XAxis) + text = formatDate(timestamp, 'MM-DD', FormatDateType.XAxis) break } case TimeWeightConstants.Hour: case TimeWeightConstants.Minute: { - text = formatDate(dateTimeFormat, timestamp, 'HH:mm', FormatDateType.XAxis) + text = formatDate(timestamp, 'HH:mm', FormatDateType.XAxis) break } default: { - text = formatDate(dateTimeFormat, timestamp, 'HH:mm:ss', FormatDateType.XAxis) + text = formatDate(timestamp, 'HH:mm:ss', FormatDateType.XAxis) break } } diff --git a/src/component/YAxis.ts b/src/component/YAxis.ts index f6f6ebd4..21335d80 100644 --- a/src/component/YAxis.ts +++ b/src/component/YAxis.ts @@ -17,7 +17,7 @@ import type Bounding from '../common/Bounding' import { isNumber, isString, isValid, merge } from '../common/utils/typeChecks' import { index10, getPrecision, nice, round } from '../common/utils/number' import { calcTextWidth } from '../common/utils/canvas' -import { formatPrecision, formatThousands, formatFoldDecimal } from '../common/utils/format' +import { formatPrecision } from '../common/utils/format' import AxisImp, { type AxisTemplate, type Axis, type AxisRange, @@ -268,7 +268,7 @@ export default abstract class YAxisImp extends AxisImp implements YAxis { const chartStore = pane.getChart().getChartStore() const optimalTicks: AxisTick[] = [] const indicators = chartStore.getIndicatorsByPaneId(pane.getId()) - const { styles, customApi, thousandsSeparator, decimalFoldThreshold } = chartStore.getOptions() + const { styles, customApi, thousandsSeparator, decimalFold } = chartStore.getOptions() let precision = 0 let shouldFormatBigNumber = false if (this.isInCandle()) { @@ -294,7 +294,7 @@ export default abstract class YAxisImp extends AxisImp implements YAxis { if (shouldFormatBigNumber) { v = customApi.formatBigNumber(value) } - v = formatFoldDecimal(formatThousands(v, thousandsSeparator), decimalFoldThreshold) + v = decimalFold.format(thousandsSeparator.format(v)) const validYNumber = isNumber(validY) if ( y > textHeight && @@ -310,15 +310,13 @@ export default abstract class YAxisImp extends AxisImp implements YAxis { override getAutoSize (): number { const pane = this.getParent() const chart = pane.getChart() - const chartOptions = chart.getOptions() - const styles = chartOptions.styles + const chartStore = chart.getChartStore() + const { customApi, decimalFold, styles } = chartStore.getOptions() const yAxisStyles = styles.yAxis const width = yAxisStyles.size if (width !== 'auto') { return width } - const chartStore = chart.getChartStore() - const customApi = chartOptions.customApi let yAxisWidth = 0 if (yAxisStyles.show) { if (yAxisStyles.axisLine.show) { @@ -368,7 +366,7 @@ export default abstract class YAxisImp extends AxisImp implements YAxis { if (shouldFormatBigNumber) { valueText = customApi.formatBigNumber(valueText) } - valueText = formatFoldDecimal(valueText, chartStore.getOptions().decimalFoldThreshold) + valueText = decimalFold.format(valueText) crosshairVerticalTextWidth += ( crosshairStyles.horizontal.text.paddingLeft + crosshairStyles.horizontal.text.paddingRight + diff --git a/src/extension/overlay/fibonacciLine.ts b/src/extension/overlay/fibonacciLine.ts index 639f75d1..974c9208 100644 --- a/src/extension/overlay/fibonacciLine.ts +++ b/src/extension/overlay/fibonacciLine.ts @@ -12,7 +12,6 @@ * limitations under the License. */ -import { formatThousands, formatFoldDecimal } from '../../common/utils/format' import { isNumber } from '../../common/utils/typeChecks' import type { OverlayTemplate } from '../../component/Overlay' @@ -26,7 +25,7 @@ const fibonacciLine: OverlayTemplate = { needDefaultPointFigure: true, needDefaultXAxisFigure: true, needDefaultYAxisFigure: true, - createPointFigures: ({ coordinates, bounding, overlay, precision, thousandsSeparator, decimalFoldThreshold, yAxis }) => { + createPointFigures: ({ coordinates, bounding, overlay, precision, options, yAxis }) => { const points = overlay.points if (coordinates.length > 0) { const currentPrecision = (yAxis?.isInCandle() ?? true) ? precision.price : precision.excludePriceVolumeMax @@ -35,12 +34,13 @@ const fibonacciLine: OverlayTemplate = { const startX = 0 const endX = bounding.width if (coordinates.length > 1 && isNumber(points[0].value) && isNumber(points[1].value)) { + const { decimalFold, thousandsSeparator } = options const percents = [1, 0.786, 0.618, 0.5, 0.382, 0.236, 0] const yDif = coordinates[0].y - coordinates[1].y const valueDif = points[0].value - points[1].value percents.forEach(percent => { const y = coordinates[1].y + yDif * percent - const value = formatFoldDecimal(formatThousands(((points[1].value ?? 0) + valueDif * percent).toFixed(currentPrecision), thousandsSeparator), decimalFoldThreshold) + const value = decimalFold.format(thousandsSeparator.format(((points[1].value ?? 0) + valueDif * percent).toFixed(currentPrecision))) lines.push({ coordinates: [{ x: startX, y }, { x: endX, y }] }) texts.push({ x: startX, diff --git a/src/extension/overlay/priceLine.ts b/src/extension/overlay/priceLine.ts index bb81351d..6cdd7156 100644 --- a/src/extension/overlay/priceLine.ts +++ b/src/extension/overlay/priceLine.ts @@ -14,15 +14,14 @@ import type { OverlayTemplate } from '../../component/Overlay' -import { formatThousands, formatFoldDecimal } from '../../common/utils/format' - const priceLine: OverlayTemplate = { name: 'priceLine', totalStep: 2, needDefaultPointFigure: true, needDefaultXAxisFigure: true, needDefaultYAxisFigure: true, - createPointFigures: ({ coordinates, bounding, precision, overlay, thousandsSeparator, decimalFoldThreshold, yAxis }) => { + createPointFigures: ({ coordinates, bounding, precision, overlay, options, yAxis }) => { + const { decimalFold, thousandsSeparator } = options const { value = 0 } = (overlay.points)[0] const currentPrecision = (yAxis?.isInCandle() ?? true) ? precision.price : precision.excludePriceVolumeMax return [ @@ -36,7 +35,7 @@ const priceLine: OverlayTemplate = { attrs: { x: coordinates[0].x, y: coordinates[0].y, - text: formatFoldDecimal(formatThousands(value.toFixed(currentPrecision), thousandsSeparator), decimalFoldThreshold), + text: decimalFold.format(thousandsSeparator.format(value.toFixed(currentPrecision))), baseline: 'bottom' } } diff --git a/src/index.ts b/src/index.ts index a65f985a..73f5ee2a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -41,7 +41,7 @@ import { ActionType } from './common/Action' import { IndicatorSeries } from './component/Indicator' import { OverlayMode } from './component/Overlay' -import { type Options, FormatDateType } from './Options' +import { FormatDateType, type OverrideOptions } from './Options' import ChartImp, { type Chart, DomPosition } from './Chart' import { checkCoordinateOnArc, drawArc } from './extension/figure/arc' @@ -79,7 +79,7 @@ function version (): string { * @param options * @returns {Chart} */ -function init (ds: HTMLElement | string, options?: Options): Nullable { +function init (ds: HTMLElement | string, options?: OverrideOptions): Nullable { logTag() let dom: Nullable = null if (isString(ds)) { diff --git a/src/view/CandleHighLowPriceView.ts b/src/view/CandleHighLowPriceView.ts index 64565bba..60b3b78c 100644 --- a/src/view/CandleHighLowPriceView.ts +++ b/src/view/CandleHighLowPriceView.ts @@ -19,21 +19,19 @@ import View from './View' import type { YAxis } from '../component/YAxis' -import { formatPrecision, formatThousands, formatFoldDecimal } from '../common/utils/format' +import { formatPrecision } from '../common/utils/format' export default class CandleHighLowPriceView extends View { override drawImp (ctx: CanvasRenderingContext2D): void { const widget = this.getWidget() const pane = widget.getPane() const chartStore = pane.getChart().getChartStore() - const chartOptions = chartStore.getOptions() - const priceMarkStyles = chartOptions.styles.candle.priceMark + const { styles, decimalFold, thousandsSeparator } = chartStore.getOptions() + const priceMarkStyles = styles.candle.priceMark const highPriceMarkStyles = priceMarkStyles.high const lowPriceMarkStyles = priceMarkStyles.low if (priceMarkStyles.show && (highPriceMarkStyles.show || lowPriceMarkStyles.show)) { const highestLowestPrice = chartStore.getVisibleRangeHighLowPrice() - const thousandsSeparator = chartOptions.thousandsSeparator - const decimalFoldThreshold = chartOptions.decimalFoldThreshold const precision = chartStore.getPrecision() const yAxis = pane.getAxisComponent() @@ -44,7 +42,7 @@ export default class CandleHighLowPriceView extends View { if (highPriceMarkStyles.show && high !== Number.MIN_SAFE_INTEGER) { this._drawMark( ctx, - formatFoldDecimal(formatThousands(formatPrecision(high, precision.price), thousandsSeparator), decimalFoldThreshold), + decimalFold.format(thousandsSeparator.format(formatPrecision(high, precision.price))), { x: highX, y: highY }, highY < lowY ? [-2, -5] : [2, 5], highPriceMarkStyles @@ -53,7 +51,7 @@ export default class CandleHighLowPriceView extends View { if (lowPriceMarkStyles.show && low !== Number.MAX_SAFE_INTEGER) { this._drawMark( ctx, - formatFoldDecimal(formatThousands(formatPrecision(low, precision.price), thousandsSeparator), decimalFoldThreshold), + decimalFold.format(thousandsSeparator.format(formatPrecision(low, precision.price))), { x: lowX, y: lowY }, highY < lowY ? [2, 5] : [-2, -5], lowPriceMarkStyles diff --git a/src/view/CandleLastPriceLabelView.ts b/src/view/CandleLastPriceLabelView.ts index 03a0c2d7..f3d73dc8 100644 --- a/src/view/CandleLastPriceLabelView.ts +++ b/src/view/CandleLastPriceLabelView.ts @@ -12,7 +12,6 @@ * limitations under the License. */ -import { formatThousands, formatFoldDecimal } from '../common/utils/format' import { isValid } from '../common/utils/typeChecks' import View from './View' @@ -25,8 +24,8 @@ export default class CandleLastPriceLabelView extends View { const pane = widget.getPane() const bounding = widget.getBounding() const chartStore = pane.getChart().getChartStore() - const chartOptions = chartStore.getOptions() - const priceMarkStyles = chartOptions.styles.candle.priceMark + const { styles, decimalFold, thousandsSeparator } = chartStore.getOptions() + const priceMarkStyles = styles.candle.priceMark const lastPriceMarkStyles = priceMarkStyles.last const lastPriceMarkTextStyles = lastPriceMarkStyles.text if (priceMarkStyles.show && lastPriceMarkStyles.show && lastPriceMarkTextStyles.show) { @@ -53,7 +52,7 @@ export default class CandleLastPriceLabelView extends View { ), precision.price ) - text = formatFoldDecimal(formatThousands(text, chartOptions.thousandsSeparator), chartOptions.decimalFoldThreshold) + text = decimalFold.format(thousandsSeparator.format(text)) let x = 0 let textAlgin: CanvasTextAlign = 'left' if (yAxis.isFromZero()) { diff --git a/src/view/CandleTooltipView.ts b/src/view/CandleTooltipView.ts index bd8a9f0a..5c06fc73 100644 --- a/src/view/CandleTooltipView.ts +++ b/src/view/CandleTooltipView.ts @@ -18,14 +18,14 @@ import type { KLineData } from '../common/Data' import type Precision from '../common/Precision' import type Crosshair from '../common/Crosshair' import { - type Styles, type CandleStyle, type TooltipLegend, type TooltipLegendChild, TooltipShowType, CandleTooltipRectPosition, + type CandleStyle, type TooltipLegend, type TooltipLegendChild, TooltipShowType, CandleTooltipRectPosition, type CandleTooltipCustomCallbackData, PolygonType } from '../common/Styles' -import { formatPrecision, formatThousands, formatFoldDecimal } from '../common/utils/format' +import { formatPrecision } from '../common/utils/format' import { createFont } from '../common/utils/canvas' import { isFunction, isObject, isValid } from '../common/utils/typeChecks' -import { type CustomApi, FormatDateType } from '../Options' +import { FormatDateType, type Options } from '../Options' import { PaneIdConstants } from '../pane/types' @@ -50,18 +50,11 @@ export default class CandleTooltipView extends IndicatorTooltipView { const yAxisBounding = pane.getYAxisWidget()!.getBounding() const dataList = chartStore.getDataList() const precision = chartStore.getPrecision() - const { - styles, - locale, - thousandsSeparator, - decimalFoldThreshold, - customApi - } = chartStore.getOptions() + const options = chartStore.getOptions() const activeIcon = chartStore.getActiveTooltipIcon() const indicators = chartStore.getIndicatorsByPaneId(pane.getId()) - const dateTimeFormat = chartStore.getDateTimeFormat() - const candleStyles = styles.candle - const indicatorStyles = styles.indicator + const candleStyles = options.styles.candle + const indicatorStyles = options.styles.indicator if ( candleStyles.tooltip.showType === TooltipShowType.Rect && indicatorStyles.tooltip.showType === TooltipShowType.Rect @@ -71,10 +64,9 @@ export default class CandleTooltipView extends IndicatorTooltipView { this._drawRectTooltip( ctx, dataList, indicators, bounding, yAxisBounding, - crosshair, precision, - dateTimeFormat, locale, customApi, thousandsSeparator, decimalFoldThreshold, + crosshair, precision, options, isDrawCandleTooltip, isDrawIndicatorTooltip, - candleStyles.tooltip.offsetTop, styles + candleStyles.tooltip.offsetTop ) } else if ( candleStyles.tooltip.showType === TooltipShowType.Standard && @@ -84,13 +76,11 @@ export default class CandleTooltipView extends IndicatorTooltipView { const maxWidth = bounding.width - offsetRight const top = this._drawCandleStandardTooltip( ctx, dataList, paneId, crosshair, activeIcon, precision, - dateTimeFormat, locale, customApi, thousandsSeparator, decimalFoldThreshold, - offsetLeft, offsetTop, maxWidth, candleStyles + options, offsetLeft, offsetTop, maxWidth, candleStyles ) this.drawIndicatorTooltip( ctx, paneId, dataList, crosshair, - activeIcon, indicators, customApi, - thousandsSeparator, decimalFoldThreshold, + activeIcon, indicators, options, offsetLeft, top, maxWidth, indicatorStyles ) } else if ( @@ -101,33 +91,27 @@ export default class CandleTooltipView extends IndicatorTooltipView { const maxWidth = bounding.width - offsetRight const top = this.drawIndicatorTooltip( ctx, paneId, dataList, crosshair, - activeIcon, indicators, customApi, - thousandsSeparator, decimalFoldThreshold, + activeIcon, indicators, options, offsetLeft, offsetTop, maxWidth, indicatorStyles ) const isDrawCandleTooltip = this.isDrawTooltip(crosshair, candleStyles.tooltip) this._drawRectTooltip( ctx, dataList, indicators, - bounding, yAxisBounding, - crosshair, precision, dateTimeFormat, - locale, customApi, thousandsSeparator, decimalFoldThreshold, - isDrawCandleTooltip, false, top, styles + bounding, yAxisBounding, crosshair, precision, + options, isDrawCandleTooltip, false, top ) } else { const { offsetLeft, offsetTop, offsetRight } = candleStyles.tooltip const maxWidth = bounding.width - offsetRight const top = this._drawCandleStandardTooltip( ctx, dataList, paneId, crosshair, activeIcon, precision, - dateTimeFormat, locale, customApi, thousandsSeparator, decimalFoldThreshold, - offsetLeft, offsetTop, maxWidth, candleStyles + options, offsetLeft, offsetTop, maxWidth, candleStyles ) const isDrawIndicatorTooltip = this.isDrawTooltip(crosshair, indicatorStyles.tooltip) this._drawRectTooltip( - ctx, dataList, indicators, - bounding, yAxisBounding, - crosshair, precision, dateTimeFormat, - locale, customApi, thousandsSeparator, decimalFoldThreshold, - false, isDrawIndicatorTooltip, top, styles + ctx, dataList, indicators, bounding, + yAxisBounding, crosshair, precision, + options, false, isDrawIndicatorTooltip, top ) } } @@ -140,11 +124,7 @@ export default class CandleTooltipView extends IndicatorTooltipView { crosshair: Crosshair, activeTooltipIcon: Nullable, precision: Precision, - dateTimeFormat: Intl.DateTimeFormat, - locale: string, - customApi: CustomApi, - thousandsSeparator: string, - decimalFoldThreshold: number, + options: Options, left: number, top: number, maxWidth: number, @@ -158,7 +138,7 @@ export default class CandleTooltipView extends IndicatorTooltipView { const dataIndex = crosshair.dataIndex ?? 0 const legends = this._getCandleTooltipLegends( { prev: dataList[dataIndex - 1] ?? null, current: crosshair.kLineData!, next: dataList[dataIndex + 1] ?? null }, - precision, dateTimeFormat, locale, customApi, thousandsSeparator, decimalFoldThreshold, styles + precision, options, styles ) const [leftIcons, middleIcons, rightIcons] = this.classifyTooltipIcons(tooltipStyles.icons) @@ -196,25 +176,20 @@ export default class CandleTooltipView extends IndicatorTooltipView { yAxisBounding: Bounding, crosshair: Crosshair, precision: Precision, - dateTimeFormat: Intl.DateTimeFormat, - locale: string, - customApi: CustomApi, - thousandsSeparator: string, - decimalFoldThreshold: number, + options: Options, isDrawCandleTooltip: boolean, isDrawIndicatorTooltip: boolean, - top: number, - styles: Styles + top: number ): void { - const candleStyles = styles.candle - const indicatorStyles = styles.indicator + const candleStyles = options.styles.candle + const indicatorStyles = options.styles.indicator const candleTooltipStyles = candleStyles.tooltip const indicatorTooltipStyles = indicatorStyles.tooltip if (isDrawCandleTooltip || isDrawIndicatorTooltip) { const dataIndex = crosshair.dataIndex ?? 0 const candleLegends = this._getCandleTooltipLegends( { prev: dataList[dataIndex - 1] ?? null, current: crosshair.kLineData!, next: dataList[dataIndex + 1] ?? null }, - precision, dateTimeFormat, locale, customApi, thousandsSeparator, decimalFoldThreshold, candleStyles + precision, options, candleStyles ) const { offsetLeft, offsetTop, offsetRight, offsetBottom } = candleTooltipStyles @@ -273,7 +248,7 @@ export default class CandleTooltipView extends IndicatorTooltipView { if (isDrawIndicatorTooltip) { ctx.font = createFont(indicatorTextSize, indicatorTextWeight, indicatorTextFamily) indicators.forEach(indicator => { - const tooltipDataLegends = this.getIndicatorTooltipData(dataList, crosshair, indicator, customApi, thousandsSeparator, decimalFoldThreshold, indicatorStyles).legends + const tooltipDataLegends = this.getIndicatorTooltipData(dataList, crosshair, indicator, options, indicatorStyles).legends indicatorLegendsArray.push(tooltipDataLegends) tooltipDataLegends.forEach(data => { const title = data.title as TooltipLegendChild @@ -431,13 +406,10 @@ export default class CandleTooltipView extends IndicatorTooltipView { private _getCandleTooltipLegends ( data: CandleTooltipCustomCallbackData, precision: Precision, - dateTimeFormat: Intl.DateTimeFormat, - locale: string, - customApi: CustomApi, - thousandsSeparator: string, - decimalFoldThreshold: number, + options: Options, styles: CandleStyle ): TooltipLegend[] { + const { customApi, decimalFold, thousandsSeparator, locale } = options const tooltipStyles = styles.tooltip const textColor = tooltipStyles.text.color const current = data.current @@ -445,20 +417,18 @@ export default class CandleTooltipView extends IndicatorTooltipView { const changeValue = current.close - prevClose const { price: pricePrecision, volume: volumePrecision } = precision const mapping = { - '{time}': customApi.formatDate(dateTimeFormat, current.timestamp, 'YYYY-MM-DD HH:mm', FormatDateType.Tooltip), - '{open}': formatFoldDecimal(formatThousands(formatPrecision(current.open, pricePrecision), thousandsSeparator), decimalFoldThreshold), - '{high}': formatFoldDecimal(formatThousands(formatPrecision(current.high, pricePrecision), thousandsSeparator), decimalFoldThreshold), - '{low}': formatFoldDecimal(formatThousands(formatPrecision(current.low, pricePrecision), thousandsSeparator), decimalFoldThreshold), - '{close}': formatFoldDecimal(formatThousands(formatPrecision(current.close, pricePrecision), thousandsSeparator), decimalFoldThreshold), - '{volume}': formatFoldDecimal(formatThousands( - customApi.formatBigNumber(formatPrecision(current.volume ?? tooltipStyles.defaultValue, volumePrecision)), - thousandsSeparator - ), decimalFoldThreshold), - '{turnover}': formatFoldDecimal(formatThousands( - formatPrecision(current.turnover ?? tooltipStyles.defaultValue, pricePrecision), - thousandsSeparator - ), decimalFoldThreshold), - '{change}': prevClose === 0 ? tooltipStyles.defaultValue : `${formatThousands(formatPrecision(changeValue / prevClose * 100), thousandsSeparator)}%` + '{time}': customApi.formatDate(current.timestamp, 'YYYY-MM-DD HH:mm', FormatDateType.Tooltip), + '{open}': decimalFold.format(thousandsSeparator.format(formatPrecision(current.open, pricePrecision))), + '{high}': decimalFold.format(thousandsSeparator.format(formatPrecision(current.high, pricePrecision))), + '{low}': decimalFold.format(thousandsSeparator.format(formatPrecision(current.low, pricePrecision))), + '{close}': decimalFold.format(thousandsSeparator.format(formatPrecision(current.close, pricePrecision))), + '{volume}': decimalFold.format(thousandsSeparator.format( + customApi.formatBigNumber(formatPrecision(current.volume ?? tooltipStyles.defaultValue, volumePrecision)) + )), + '{turnover}': decimalFold.format(thousandsSeparator.format( + formatPrecision(current.turnover ?? tooltipStyles.defaultValue, pricePrecision) + )), + '{change}': prevClose === 0 ? tooltipStyles.defaultValue : `${thousandsSeparator.format(formatPrecision(changeValue / prevClose * 100))}%` } const legends = ( isFunction(tooltipStyles.custom) diff --git a/src/view/CrosshairHorizontalLabelView.ts b/src/view/CrosshairHorizontalLabelView.ts index 22f02234..a517b994 100644 --- a/src/view/CrosshairHorizontalLabelView.ts +++ b/src/view/CrosshairHorizontalLabelView.ts @@ -16,7 +16,6 @@ import type Bounding from '../common/Bounding' import type Crosshair from '../common/Crosshair' import type { CrosshairStyle, CrosshairDirectionStyle, StateTextStyle } from '../common/Styles' import { isString } from '../common/utils/typeChecks' -import { formatThousands, formatFoldDecimal } from '../common/utils/format' import { createFont } from '../common/utils/canvas' import type { Axis } from '../component/Axis' @@ -87,12 +86,12 @@ export default class CrosshairHorizontalLabelView extend precision ) - const { customApi, thousandsSeparator, decimalFoldThreshold } = chartStore.getOptions() + const { customApi, thousandsSeparator, decimalFold } = chartStore.getOptions() // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition if (shouldFormatBigNumber) { text = customApi.formatBigNumber(text) } - return formatFoldDecimal(formatThousands(text, thousandsSeparator), decimalFoldThreshold) + return decimalFold.format(thousandsSeparator.format(text)) } protected getTextAttrs (text: string, _textWidth: number, crosshair: Crosshair, bounding: Bounding, axis: Axis, _styles: StateTextStyle): TextAttrs { diff --git a/src/view/CrosshairVerticalLabelView.ts b/src/view/CrosshairVerticalLabelView.ts index 64a7230e..b990c9fb 100644 --- a/src/view/CrosshairVerticalLabelView.ts +++ b/src/view/CrosshairVerticalLabelView.ts @@ -38,7 +38,7 @@ export default class CrosshairVerticalLabelView extends CrosshairHorizontalLabel override getText (crosshair: Crosshair, chartStore: ChartStore): string { const timestamp = crosshair.kLineData?.timestamp - return chartStore.getOptions().customApi.formatDate(chartStore.getDateTimeFormat(), timestamp!, 'YYYY-MM-DD HH:mm', FormatDateType.Crosshair) + return chartStore.getOptions().customApi.formatDate(timestamp!, 'YYYY-MM-DD HH:mm', FormatDateType.Crosshair) } override getTextAttrs (text: string, textWidth: number, crosshair: Crosshair, bounding: Bounding, _axis: Axis, styles: StateTextStyle): TextAttrs { diff --git a/src/view/IndicatorLastValueView.ts b/src/view/IndicatorLastValueView.ts index 9af7c1de..020c2b51 100644 --- a/src/view/IndicatorLastValueView.ts +++ b/src/view/IndicatorLastValueView.ts @@ -12,7 +12,6 @@ * limitations under the License. */ -import { formatThousands, formatFoldDecimal } from '../common/utils/format' import { isNumber, isValid } from '../common/utils/typeChecks' import { eachFigures, type IndicatorFigure, type IndicatorFigureStyle } from '../component/Indicator' @@ -37,9 +36,7 @@ export default class IndicatorLastValueView extends View { const dataList = chartStore.getDataList() const dataIndex = dataList.length - 1 const indicators = chartStore.getIndicatorsByPaneId(pane.getId()) - const customApi = chartOptions.customApi - const thousandsSeparator = chartOptions.thousandsSeparator - const decimalFoldThreshold = chartOptions.decimalFoldThreshold + const { customApi, decimalFold, thousandsSeparator } = chartOptions indicators.forEach(indicator => { const result = indicator.result const data = result[dataIndex] ?? result[dataIndex - 1] ?? {} @@ -60,7 +57,7 @@ export default class IndicatorLastValueView extends View { if (indicator.shouldFormatBigNumber) { text = customApi.formatBigNumber(text) } - text = formatFoldDecimal(formatThousands(text, thousandsSeparator), decimalFoldThreshold) + text = decimalFold.format(thousandsSeparator.format(text)) let x = 0 let textAlign: CanvasTextAlign = 'left' if (yAxis.isFromZero()) { diff --git a/src/view/IndicatorTooltipView.ts b/src/view/IndicatorTooltipView.ts index a38b4188..1b88ca73 100644 --- a/src/view/IndicatorTooltipView.ts +++ b/src/view/IndicatorTooltipView.ts @@ -17,12 +17,12 @@ import type { KLineData } from '../common/Data' import type Crosshair from '../common/Crosshair' import { type IndicatorStyle, type TooltipStyle, type TooltipIconStyle, type TooltipTextStyle, type TooltipLegend, TooltipShowRule, type TooltipLegendChild, TooltipIconPosition } from '../common/Styles' import { ActionType } from '../common/Action' -import { formatPrecision, formatThousands, formatFoldDecimal } from '../common/utils/format' +import { formatPrecision } from '../common/utils/format' import { isValid, isObject, isString, isNumber, isFunction } from '../common/utils/typeChecks' import { createFont } from '../common/utils/canvas' import type Coordinate from '../common/Coordinate' -import type { CustomApi } from '../Options' +import type { Options } from '../Options' import type { YAxis } from '../component/YAxis' @@ -53,16 +53,14 @@ export default class IndicatorTooltipView extends View { const crosshair = chartStore.getCrosshair() if (isValid(crosshair.kLineData)) { const bounding = widget.getBounding() - const { styles, customApi, thousandsSeparator, decimalFoldThreshold } = chartStore.getOptions() + const options = chartStore.getOptions() const indicators = chartStore.getIndicatorsByPaneId(pane.getId()) const activeIcon = chartStore.getActiveTooltipIcon() - const defaultStyles = styles.indicator + const defaultStyles = options.styles.indicator const { offsetLeft, offsetTop, offsetRight } = defaultStyles.tooltip this.drawIndicatorTooltip( ctx, pane.getId(), chartStore.getDataList(), - crosshair, activeIcon, indicators, customApi, - thousandsSeparator, decimalFoldThreshold, - offsetLeft, offsetTop, + crosshair, activeIcon, indicators, options, offsetLeft, offsetTop, bounding.width - offsetRight, defaultStyles ) } @@ -75,9 +73,7 @@ export default class IndicatorTooltipView extends View { crosshair: Crosshair, activeTooltipIcon: Nullable, indicators: IndicatorImp[], - customApi: CustomApi, - thousandsSeparator: string, - decimalFoldThreshold: number, + options: Options, left: number, top: number, maxWidth: number, @@ -89,7 +85,7 @@ export default class IndicatorTooltipView extends View { indicators.forEach(indicator => { let prevRowHeight = 0 const coordinate = { x: left, y: top } - const { name, calcParamsText, legends, icons } = this.getIndicatorTooltipData(dataList, crosshair, indicator, customApi, thousandsSeparator, decimalFoldThreshold, styles) + const { name, calcParamsText, legends, icons } = this.getIndicatorTooltipData(dataList, crosshair, indicator, options, styles) const nameValid = name.length > 0 const legendValid = legends.length > 0 if (nameValid || legendValid) { @@ -259,9 +255,7 @@ export default class IndicatorTooltipView extends View { dataList: KLineData[], crosshair: Crosshair, indicator: Indicator, - customApi: CustomApi, - thousandsSeparator: string, - decimalFoldThreshold: number, + options: Options, styles: IndicatorStyle ): IndicatorTooltipData { const tooltipStyles = styles.tooltip @@ -277,6 +271,7 @@ export default class IndicatorTooltipView extends View { const dataIndex = crosshair.dataIndex! const result = indicator.result + const { customApi, decimalFold, thousandsSeparator } = options const legends: TooltipLegend[] = [] if (indicator.visible) { const data = result[dataIndex] ?? result[dataIndex - 1] ?? {} @@ -291,7 +286,7 @@ export default class IndicatorTooltipView extends View { value = customApi.formatBigNumber(value as string) } } - legends.push({ title: { text: figure.title, color }, value: { text: formatFoldDecimal(formatThousands((value ?? tooltipStyles.defaultValue) as string, thousandsSeparator), decimalFoldThreshold), color } }) + legends.push({ title: { text: figure.title, color }, value: { text: decimalFold.format(thousandsSeparator.format((value ?? tooltipStyles.defaultValue) as string)), color } }) } }) tooltipData.legends = legends @@ -336,7 +331,7 @@ export default class IndicatorTooltipView extends View { } else { value.text = data.value } - value.text = formatFoldDecimal(formatThousands(value.text, thousandsSeparator), decimalFoldThreshold) + value.text = decimalFold.format(thousandsSeparator.format(value.text)) optimizedLegends.push({ title, value }) }) tooltipData.legends = optimizedLegends diff --git a/src/view/OverlayView.ts b/src/view/OverlayView.ts index 54679a3e..69c21b95 100644 --- a/src/view/OverlayView.ts +++ b/src/view/OverlayView.ts @@ -21,7 +21,7 @@ import type { OverlayStyle } from '../common/Styles' import type { EventHandler, EventName, MouseTouchEvent, MouseTouchEventCallback } from '../common/SyntheticEvent' import { isBoolean, isNumber, isValid } from '../common/utils/typeChecks' -import type { CustomApi } from '../Options' +import type { Options } from '../Options' import type { Axis } from '../component/Axis' import type { XAxis } from '../component/XAxis' @@ -389,16 +389,9 @@ export default class OverlayView extends View { const xAxis = chart.getXAxisPane().getAxisComponent() const bounding = widget.getBounding() const chartStore = chart.getChartStore() - const { - styles, - customApi, - thousandsSeparator, - decimalFoldThreshold, - } = chartStore.getOptions() - const dateTimeFormat = chartStore.getDateTimeFormat() + const options = chartStore.getOptions() const barSpace = chartStore.getBarSpace() const precision = chartStore.getPrecision() - const defaultStyles = styles.overlay const hoverOverlayInfo = chartStore.getHoverOverlayInfo() const clickOverlayInfo = chartStore.getClickOverlayInfo() const overlays = this.getCompleteOverlays(chartStore, paneId) @@ -421,9 +414,8 @@ export default class OverlayView extends View { overlays.forEach(overlay => { if (overlay.visible) { this._drawOverlay( - ctx, overlay, bounding, barSpace, overlayPrecision, - dateTimeFormat, customApi, thousandsSeparator, decimalFoldThreshold, - defaultStyles, xAxis, yAxis, + ctx, overlay, bounding, barSpace, + overlayPrecision, options, xAxis, yAxis, hoverOverlayInfo, clickOverlayInfo, chartStore ) } @@ -435,8 +427,7 @@ export default class OverlayView extends View { if (isValid(overlay) && overlay.visible) { this._drawOverlay( ctx, overlay, bounding, barSpace, - overlayPrecision, dateTimeFormat, customApi, thousandsSeparator, decimalFoldThreshold, - defaultStyles, xAxis, yAxis, + overlayPrecision, options, xAxis, yAxis, hoverOverlayInfo, clickOverlayInfo, chartStore ) } @@ -449,11 +440,7 @@ export default class OverlayView extends View { bounding: Bounding, barSpace: BarSpace, precision: OverlayPrecision, - dateTimeFormat: Intl.DateTimeFormat, - customApi: CustomApi, - thousandsSeparator: string, - decimalFoldThreshold: number, - defaultStyles: OverlayStyle, + options: Options, xAxis: Nullable, yAxis: Nullable, hoverOverlayInfo: EventOverlayInfo, @@ -478,14 +465,14 @@ export default class OverlayView extends View { if (coordinates.length > 0) { const figures = new Array().concat( this.getFigures( - overlay, coordinates, bounding, barSpace, precision, thousandsSeparator, decimalFoldThreshold, dateTimeFormat, defaultStyles, xAxis, yAxis + overlay, coordinates, bounding, barSpace, precision, options, xAxis, yAxis ) ) this.drawFigures( ctx, overlay, figures, - defaultStyles + options.styles.overlay ) } this.drawDefaultFigures( @@ -494,11 +481,7 @@ export default class OverlayView extends View { coordinates, bounding, precision, - dateTimeFormat, - customApi, - thousandsSeparator, - decimalFoldThreshold, - defaultStyles, + options, xAxis, yAxis, hoverOverlayInfo, @@ -542,14 +525,11 @@ export default class OverlayView extends View { bounding: Bounding, barSpace: BarSpace, precision: OverlayPrecision, - thousandsSeparator: string, - decimalFoldThreshold: number, - dateTimeFormat: Intl.DateTimeFormat, - defaultStyles: OverlayStyle, + options: Options, xAxis: Nullable, yAxis: Nullable ): OverlayFigure | OverlayFigure[] { - return o.createPointFigures?.({ overlay: o, coordinates, bounding, barSpace, precision, thousandsSeparator, decimalFoldThreshold, dateTimeFormat, defaultStyles, xAxis, yAxis }) ?? [] + return o.createPointFigures?.({ overlay: o, coordinates, bounding, barSpace, precision, options, xAxis, yAxis }) ?? [] } protected drawDefaultFigures ( @@ -558,11 +538,7 @@ export default class OverlayView extends View { coordinates: Coordinate[], _bounding: Bounding, _precision: OverlayPrecision, - _dateTimeFormat: Intl.DateTimeFormat, - _customApi: CustomApi, - _thousandsSeparator: string, - _drawDefaultFigures: number, - defaultStyles: OverlayStyle, + options: Options, _xAxis: Nullable, _yAxis: Nullable, hoverOverlayInfo: EventOverlayInfo, @@ -573,6 +549,7 @@ export default class OverlayView extends View { (hoverOverlayInfo.overlay?.id === overlay.id && hoverOverlayInfo.figureType !== EventOverlayInfoFigureType.None) || (clickOverlayInfo.overlay?.id === overlay.id && clickOverlayInfo.figureType !== EventOverlayInfoFigureType.None) ) { + const defaultStyles = options.styles.overlay const styles = overlay.styles const pointStyles = { ...defaultStyles.point, ...styles?.point } coordinates.forEach(({ x, y }, index) => { diff --git a/src/view/OverlayXAxisView.ts b/src/view/OverlayXAxisView.ts index 24b0b010..ba04ed9c 100644 --- a/src/view/OverlayXAxisView.ts +++ b/src/view/OverlayXAxisView.ts @@ -17,10 +17,9 @@ import type Coordinate from '../common/Coordinate' import type Bounding from '../common/Bounding' import type BarSpace from '../common/BarSpace' import type Precision from '../common/Precision' -import type { OverlayStyle } from '../common/Styles' import { isNumber } from '../common/utils/typeChecks' -import { type CustomApi, FormatDateType } from '../Options' +import { FormatDateType, type Options } from '../Options' import type { XAxis } from '../component/XAxis' import type { YAxis } from '../component/YAxis' @@ -54,10 +53,7 @@ export default class OverlayXAxisView extends OverlayYAxisView { coordinates: Coordinate[], bounding: Bounding, _precision: Precision, - dateTimeFormat: Intl.DateTimeFormat, - customApi: CustomApi, - _thousandsSeparator: string, - _decimalFoldThreshold: number, + options: Options, _xAxis: Nullable, _yAxis: Nullable, clickOverlayInfo: EventOverlayInfo @@ -71,7 +67,7 @@ export default class OverlayXAxisView extends OverlayYAxisView { rightX = Math.max(rightX, coordinate.x) const point = overlay.points[index] if (isNumber(point.timestamp)) { - const text = customApi.formatDate(dateTimeFormat, point.timestamp, 'YYYY-MM-DD HH:mm', FormatDateType.Crosshair) + const text = options.customApi.formatDate(point.timestamp, 'YYYY-MM-DD HH:mm', FormatDateType.Crosshair) figures.push({ type: 'text', attrs: { x: coordinate.x, y: 0, text, align: 'center' }, ignoreEvent: true }) } }) @@ -88,13 +84,10 @@ export default class OverlayXAxisView extends OverlayYAxisView { bounding: Bounding, barSpace: BarSpace, precision: OverlayPrecision, - thousandsSeparator: string, - decimalFoldThreshold: number, - dateTimeFormat: Intl.DateTimeFormat, - defaultStyles: OverlayStyle, + options: Options, xAxis: Nullable, yAxis: Nullable ): OverlayFigure | OverlayFigure[] { - return o.createXAxisFigures?.({ overlay: o, coordinates, bounding, barSpace, precision, thousandsSeparator, decimalFoldThreshold, dateTimeFormat, defaultStyles, xAxis, yAxis }) ?? [] + return o.createXAxisFigures?.({ overlay: o, coordinates, bounding, barSpace, precision, options, xAxis, yAxis }) ?? [] } } diff --git a/src/view/OverlayYAxisView.ts b/src/view/OverlayYAxisView.ts index 2f86fead..fb5726ee 100644 --- a/src/view/OverlayYAxisView.ts +++ b/src/view/OverlayYAxisView.ts @@ -16,9 +16,8 @@ import type Nullable from '../common/Nullable' import type Coordinate from '../common/Coordinate' import type Bounding from '../common/Bounding' import type BarSpace from '../common/BarSpace' -import type { OverlayStyle } from '../common/Styles' -import type { CustomApi } from '../Options' -import { formatPrecision, formatThousands, formatFoldDecimal } from '../common/utils/format' +import type { Options } from '../Options' +import { formatPrecision } from '../common/utils/format' import { isNumber } from '../common/utils/typeChecks' import type { Axis } from '../component/Axis' @@ -42,11 +41,7 @@ export default class OverlayYAxisView extends OverlayVie coordinates: Coordinate[], bounding: Bounding, precision: OverlayPrecision, - dateTimeFormat: Intl.DateTimeFormat, - customApi: CustomApi, - thousandsSeparator: string, - decimalFoldThreshold: number, - defaultStyles: OverlayStyle, + options: Options, xAxis: Nullable, yAxis: Nullable, _hoverOverlayInfo: EventOverlayInfo, @@ -55,8 +50,8 @@ export default class OverlayYAxisView extends OverlayVie this.drawFigures( ctx, overlay, - this.getDefaultFigures(overlay, coordinates, bounding, precision, dateTimeFormat, customApi, thousandsSeparator, decimalFoldThreshold, xAxis, yAxis, clickOverlayInfo), - defaultStyles + this.getDefaultFigures(overlay, coordinates, bounding, precision, options, xAxis, yAxis, clickOverlayInfo), + options.styles.overlay ) } @@ -65,10 +60,7 @@ export default class OverlayYAxisView extends OverlayVie coordinates: Coordinate[], bounding: Bounding, precision: OverlayPrecision, - _dateTimeFormat: Intl.DateTimeFormat, - _customApi: CustomApi, - thousandsSeparator: string, - decimalFoldThreshold: number, + options: Options, _xAxis: Nullable, yAxis: Nullable, clickOverlayInfo: EventOverlayInfo @@ -91,12 +83,13 @@ export default class OverlayYAxisView extends OverlayVie textAlign = 'right' x = bounding.width } + const { decimalFold, thousandsSeparator } = options coordinates.forEach((coordinate, index) => { const point = overlay.points[index] if (isNumber(point.value)) { topY = Math.min(topY, coordinate.y) bottomY = Math.max(bottomY, coordinate.y) - const text = formatFoldDecimal(formatThousands(formatPrecision(point.value, precision.price), thousandsSeparator), decimalFoldThreshold) + const text = decimalFold.format(thousandsSeparator.format(formatPrecision(point.value, precision.price))) figures.push({ type: 'text', attrs: { x, y: coordinate.y, text, align: textAlign, baseline: 'middle' }, ignoreEvent: true }) } }) @@ -113,13 +106,10 @@ export default class OverlayYAxisView extends OverlayVie bounding: Bounding, barSpace: BarSpace, precision: OverlayPrecision, - thousandsSeparator: string, - decimalFoldThreshold: number, - dateTimeFormat: Intl.DateTimeFormat, - defaultStyles: OverlayStyle, + options: Options, xAxis: Nullable, yAxis: Nullable ): OverlayFigure | OverlayFigure[] { - return overlay.createYAxisFigures?.({ overlay, coordinates, bounding, barSpace, precision, thousandsSeparator, decimalFoldThreshold, dateTimeFormat, defaultStyles, xAxis, yAxis }) ?? [] + return overlay.createYAxisFigures?.({ overlay, coordinates, bounding, barSpace, precision, options, xAxis, yAxis }) ?? [] } }