mirror of
https://github.com/klinecharts/KLineChart.git
synced 2024-11-25 16:22:43 +08:00
impr: merge some method parameters
This commit is contained in:
liihuu
parent
5af6ce0661
commit
5677da8182
15
src/Chart.ts
15
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<HTMLElement>
|
||||
getSize: (paneId?: string, position?: DomPosition) => Nullable<Bounding>
|
||||
setOptions: (options: Options) => void
|
||||
getOptions: () => Required<Omit<Options, 'layout'>> & { 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<Omit<Options, 'layout'>> & { customApi: CustomApi, styles: Styles } {
|
||||
getOptions (): Options {
|
||||
return this._chartStore.getOptions()
|
||||
}
|
||||
|
||||
|
||||
@ -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<Styles>
|
||||
customApi?: Partial<CustomApi>
|
||||
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<Omit<Options, 'styles'>> & {
|
||||
layout?: LayoutChild[]
|
||||
styles?: string | DeepPartial<Styles>
|
||||
}
|
||||
|
||||
38
src/Store.ts
38
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<Omit<Options, 'layout'>> & { 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,
|
||||
|
||||
@ -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] ?? ''
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
@ -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<XAxis>
|
||||
yAxis: Nullable<YAxis>
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 +
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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'
|
||||
}
|
||||
}
|
||||
|
||||
@ -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<Chart> {
|
||||
function init (ds: HTMLElement | string, options?: OverrideOptions): Nullable<Chart> {
|
||||
logTag()
|
||||
let dom: Nullable<HTMLElement> = null
|
||||
if (isString(ds)) {
|
||||
|
||||
@ -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<YAxis> {
|
||||
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<YAxis> {
|
||||
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<YAxis> {
|
||||
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
|
||||
|
||||
@ -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()) {
|
||||
|
||||
@ -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<TooltipIcon>,
|
||||
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)
|
||||
|
||||
@ -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<C extends Axis = YAxis> 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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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<YAxis> {
|
||||
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<YAxis> {
|
||||
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()) {
|
||||
|
||||
@ -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<YAxis> {
|
||||
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<YAxis> {
|
||||
crosshair: Crosshair,
|
||||
activeTooltipIcon: Nullable<TooltipIcon>,
|
||||
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<YAxis> {
|
||||
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<YAxis> {
|
||||
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<YAxis> {
|
||||
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<YAxis> {
|
||||
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<YAxis> {
|
||||
} 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
|
||||
|
||||
@ -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<C extends Axis = YAxis> extends View<C> {
|
||||
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<C extends Axis = YAxis> extends View<C> {
|
||||
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<C extends Axis = YAxis> extends View<C> {
|
||||
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<C extends Axis = YAxis> extends View<C> {
|
||||
bounding: Bounding,
|
||||
barSpace: BarSpace,
|
||||
precision: OverlayPrecision,
|
||||
dateTimeFormat: Intl.DateTimeFormat,
|
||||
customApi: CustomApi,
|
||||
thousandsSeparator: string,
|
||||
decimalFoldThreshold: number,
|
||||
defaultStyles: OverlayStyle,
|
||||
options: Options,
|
||||
xAxis: Nullable<XAxis>,
|
||||
yAxis: Nullable<YAxis>,
|
||||
hoverOverlayInfo: EventOverlayInfo,
|
||||
@ -478,14 +465,14 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
|
||||
if (coordinates.length > 0) {
|
||||
const figures = new Array<OverlayFigure>().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<C extends Axis = YAxis> extends View<C> {
|
||||
coordinates,
|
||||
bounding,
|
||||
precision,
|
||||
dateTimeFormat,
|
||||
customApi,
|
||||
thousandsSeparator,
|
||||
decimalFoldThreshold,
|
||||
defaultStyles,
|
||||
options,
|
||||
xAxis,
|
||||
yAxis,
|
||||
hoverOverlayInfo,
|
||||
@ -542,14 +525,11 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
|
||||
bounding: Bounding,
|
||||
barSpace: BarSpace,
|
||||
precision: OverlayPrecision,
|
||||
thousandsSeparator: string,
|
||||
decimalFoldThreshold: number,
|
||||
dateTimeFormat: Intl.DateTimeFormat,
|
||||
defaultStyles: OverlayStyle,
|
||||
options: Options,
|
||||
xAxis: Nullable<XAxis>,
|
||||
yAxis: Nullable<YAxis>
|
||||
): 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<C extends Axis = YAxis> extends View<C> {
|
||||
coordinates: Coordinate[],
|
||||
_bounding: Bounding,
|
||||
_precision: OverlayPrecision,
|
||||
_dateTimeFormat: Intl.DateTimeFormat,
|
||||
_customApi: CustomApi,
|
||||
_thousandsSeparator: string,
|
||||
_drawDefaultFigures: number,
|
||||
defaultStyles: OverlayStyle,
|
||||
options: Options,
|
||||
_xAxis: Nullable<XAxis>,
|
||||
_yAxis: Nullable<YAxis>,
|
||||
hoverOverlayInfo: EventOverlayInfo,
|
||||
@ -573,6 +549,7 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
|
||||
(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) => {
|
||||
|
||||
@ -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<XAxis> {
|
||||
coordinates: Coordinate[],
|
||||
bounding: Bounding,
|
||||
_precision: Precision,
|
||||
dateTimeFormat: Intl.DateTimeFormat,
|
||||
customApi: CustomApi,
|
||||
_thousandsSeparator: string,
|
||||
_decimalFoldThreshold: number,
|
||||
options: Options,
|
||||
_xAxis: Nullable<XAxis>,
|
||||
_yAxis: Nullable<YAxis>,
|
||||
clickOverlayInfo: EventOverlayInfo
|
||||
@ -71,7 +67,7 @@ export default class OverlayXAxisView extends OverlayYAxisView<XAxis> {
|
||||
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<XAxis> {
|
||||
bounding: Bounding,
|
||||
barSpace: BarSpace,
|
||||
precision: OverlayPrecision,
|
||||
thousandsSeparator: string,
|
||||
decimalFoldThreshold: number,
|
||||
dateTimeFormat: Intl.DateTimeFormat,
|
||||
defaultStyles: OverlayStyle,
|
||||
options: Options,
|
||||
xAxis: Nullable<XAxis>,
|
||||
yAxis: Nullable<YAxis>
|
||||
): 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 }) ?? []
|
||||
}
|
||||
}
|
||||
|
||||
@ -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<C extends Axis = YAxis> extends OverlayVie
|
||||
coordinates: Coordinate[],
|
||||
bounding: Bounding,
|
||||
precision: OverlayPrecision,
|
||||
dateTimeFormat: Intl.DateTimeFormat,
|
||||
customApi: CustomApi,
|
||||
thousandsSeparator: string,
|
||||
decimalFoldThreshold: number,
|
||||
defaultStyles: OverlayStyle,
|
||||
options: Options,
|
||||
xAxis: Nullable<XAxis>,
|
||||
yAxis: Nullable<YAxis>,
|
||||
_hoverOverlayInfo: EventOverlayInfo,
|
||||
@ -55,8 +50,8 @@ export default class OverlayYAxisView<C extends Axis = YAxis> 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<C extends Axis = YAxis> extends OverlayVie
|
||||
coordinates: Coordinate[],
|
||||
bounding: Bounding,
|
||||
precision: OverlayPrecision,
|
||||
_dateTimeFormat: Intl.DateTimeFormat,
|
||||
_customApi: CustomApi,
|
||||
thousandsSeparator: string,
|
||||
decimalFoldThreshold: number,
|
||||
options: Options,
|
||||
_xAxis: Nullable<XAxis>,
|
||||
yAxis: Nullable<YAxis>,
|
||||
clickOverlayInfo: EventOverlayInfo
|
||||
@ -91,12 +83,13 @@ export default class OverlayYAxisView<C extends Axis = YAxis> 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<C extends Axis = YAxis> extends OverlayVie
|
||||
bounding: Bounding,
|
||||
barSpace: BarSpace,
|
||||
precision: OverlayPrecision,
|
||||
thousandsSeparator: string,
|
||||
decimalFoldThreshold: number,
|
||||
dateTimeFormat: Intl.DateTimeFormat,
|
||||
defaultStyles: OverlayStyle,
|
||||
options: Options,
|
||||
xAxis: Nullable<XAxis>,
|
||||
yAxis: Nullable<YAxis>
|
||||
): 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 }) ?? []
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user