>(() => {})\n\nexport function withElementStyleDialogState(Component: React.ComponentType
) {\n return function WrappedComponent(props: P) {\n const context = React.useContext(ElementStyleDialogContext)\n\n return \n }\n}\n\nexport function ElementStyleDialogWrapper(props: { children: React.ReactNode }) {\n const [element, setElement] = React.useState(null)\n const [onSubmit, setOnSubmit] = React.useState(null)\n const [onDismiss, setOnDismiss] = React.useState(null)\n const dialog = useDialogState({ modal: false })\n\n const openDialog = (element: CanvasElement, onSubmit?: OnSubmitType, onDismiss?: OnDismissType) => {\n if (onSubmit) {\n setOnSubmit(() => onSubmit)\n }\n if (onDismiss) {\n setOnDismiss(() => onDismiss)\n }\n\n setElement(element)\n dialog.show()\n }\n\n const onHide = () => {\n setElement(null)\n setOnSubmit(null)\n setOnDismiss(null)\n }\n\n return (\n \n {props.children}\n {element && (\n \n )}\n \n )\n}\n","import React from 'react'\n\nexport function useForceUpdate() {\n const [forceUpdateKey, increment] = React.useState(0)\n const forceUpdate = React.useCallback(() => {\n increment((prev) => prev + 1)\n }, [])\n return { forceUpdate, forceUpdateKey }\n}\n","import isEqual from 'lodash.isequal'\nimport React from 'react'\n\nimport { ObjectHash } from '../../../types/shared'\nimport { CanvasElementType } from '../../constants/common'\nimport ChartLayoutModel from '../../models/chart_layout'\nimport Quote from '../../models/quote'\nimport { GlobalState, useGlobalState } from '../../utils/global-state'\n\ninterface ChartLayoutModelGlobalState {\n chartLayoutModel: ChartLayoutModel | null\n chartLayoutModelConfigSnapshot: ObjectHash | null\n chartLayoutModelConfigSnapshotToCompare: ObjectHash | null\n lastGlobalRerender: number\n}\n\nexport const chartLayoutGlobalState = new GlobalState({\n chartLayoutModel: null,\n chartLayoutModelConfigSnapshot: null,\n chartLayoutModelConfigSnapshotToCompare: null,\n lastGlobalRerender: Date.now(),\n})\n\nconst CONFIG_PROPS_TO_OMIT = ['width', 'height', 'leftOffset', 'zoomFactor']\nconst CANVAS_ELEMENT_TYPES: string[] = Object.values(CanvasElementType)\n\nfunction getConfigSnapshotToCompare(chartLayoutModel: ChartLayoutModel | null) {\n if (!chartLayoutModel) {\n return null\n }\n const config = chartLayoutModel.toConfig(CONFIG_PROPS_TO_OMIT)\n return {\n ...config,\n charts: config.charts.map((chart) => ({\n ...chart,\n panes: chart.panes.map((pane) => ({\n ...pane,\n elements: pane.elements.filter(({ type }) => !CANVAS_ELEMENT_TYPES.includes(type)),\n })),\n })),\n }\n}\n\nexport function useChartLayoutGlobalModel() {\n const [state, setState] = useGlobalState(chartLayoutGlobalState)\n const getIsConfigChanged = () =>\n !isEqual(state.chartLayoutModelConfigSnapshotToCompare, getConfigSnapshotToCompare(state.chartLayoutModel))\n const getIsConfigChangedRef = React.useRef(getIsConfigChanged)\n\n getIsConfigChangedRef.current = getIsConfigChanged\n\n return React.useMemo(\n () => ({\n ...state,\n getIsConfigChanged: () => getIsConfigChangedRef.current(),\n setChartLayoutModel: (chartLayoutModel: ChartLayoutModel) => {\n setState({\n chartLayoutModel,\n chartLayoutModelConfigSnapshot: chartLayoutModel.toConfig(),\n chartLayoutModelConfigSnapshotToCompare: getConfigSnapshotToCompare(chartLayoutModel),\n })\n },\n generateNewLayoutModelConfigSnapshot: () => {\n if (state.chartLayoutModel) {\n setState({\n chartLayoutModelConfigSnapshot: state.chartLayoutModel.toConfig(),\n chartLayoutModelConfigSnapshotToCompare: getConfigSnapshotToCompare(state.chartLayoutModel),\n })\n }\n },\n getChartLayoutModelConfig: ({ fallback }: { fallback: ObjectHash }) =>\n state.chartLayoutModelConfigSnapshot ?? fallback,\n forceGlobalRerender: () => {\n Quote.deleteAll()\n /*\n * We don't want to override chartLayoutModelConfigSnapshot to null\n * because it is most likely used to build new chart layout model\n * */\n setState({\n lastGlobalRerender: Date.now(),\n chartLayoutModel: null,\n chartLayoutModelConfigSnapshotToCompare: null,\n })\n },\n }),\n [state, setState]\n )\n}\n","import React from 'react'\n\nimport { ObjectHash } from '../../types/shared'\nimport { useForceUpdate } from './force-update'\n\ntype SubscriberFunc = (value: T) => void\n\nexport class GlobalState {\n value: StateType\n subscribers: Array> = []\n\n constructor(initialValue: StateType = JSON.parse('{}')) {\n this.value = initialValue\n }\n\n getValue = () => this.value\n\n setValue = (newState: Partial, shouldReplace = false) => {\n this.value = shouldReplace ? (newState as StateType) : { ...this.value, ...newState }\n\n this.subscribers.forEach((subscriber) => {\n subscriber(this.value)\n })\n }\n\n subscribe = (itemToSubscribe: SubscriberFunc) => {\n if (this.subscribers.indexOf(itemToSubscribe) > -1) {\n // Already subsribed\n return\n }\n this.subscribers.push(itemToSubscribe)\n }\n\n unsubscribe = (itemToUnsubscribe: SubscriberFunc) => {\n this.subscribers = this.subscribers.filter((subscriber) => subscriber !== itemToUnsubscribe)\n }\n}\n\nexport function useGlobalState>(\n globalState: GlobalState\n): [state: T, setState: SubscriberFunc>] {\n const { forceUpdate } = useForceUpdate()\n const state = globalState.getValue()\n\n React.useEffect(() => {\n globalState.subscribe(forceUpdate)\n return function () {\n globalState.unsubscribe(forceUpdate)\n }\n }, [forceUpdate, globalState])\n\n const setState = React.useCallback(\n (value: Partial, shouldReplace = false) => {\n globalState.setValue(value, shouldReplace)\n },\n [globalState]\n )\n\n return [state, setState]\n}\n","import { ObjectHash } from '../../types/shared'\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nexport const decodeQueryString = = ObjectHash>(...args): T =>\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n window.FLibs.decodeQueryString(...args)\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nexport const encodeQueryString = (...args) => window.FLibs.encodeQueryString(...args)\n","import { IModalConfigInput, Instrument, Position } from '../../../types/shared'\nimport BaseChart from '../../charts/base_chart'\nimport { ChartElementType, IndicatorType, OverlayType, SpecificChartFunctionality } from '../../constants/common'\nimport Indicator from '../../indicators/indicator'\nimport ChartLayout from '../../models/chart_layout'\nimport ChartLayoutModel from '../../models/chart_layout'\nimport Element from '../../models/element'\nimport Overlay from '../../overlays/overlay'\nimport { isRedesignEnabled } from '../../utils'\nimport { getRGBAValueFromValidColorString } from '../../utils/colors'\nimport { decodeQueryString, encodeQueryString } from '../../utils/query_string'\nimport { getResponseChartType, removeEmptyIndicatorsAndOverlays } from './chart/model-manipulation'\n\nexport interface IIndicatorsValue {\n elementInstance: Indicator\n position: Position\n paneIndex: number\n}\n\nexport const getOverlayAttributesConfig = (overlay: Overlay) => {\n const parameters: string[] = []\n const color: string[] = []\n overlay.getModalConfig().inputs.forEach((input: IModalConfigInput) => {\n if (input.type === 'color') {\n color.push(getRGBAValueFromValidColorString(input.value.toString()))\n } else {\n parameters.push(input.value.toString())\n }\n })\n return {\n type: overlay.type,\n period: parameters.join(','),\n color: color.join('|'),\n }\n}\n\nexport const getObjForSubmit = (chartLayoutModel: ChartLayout) => {\n const chartModel = chartLayoutModel.charts().first()\n const quote = chartModel.quote()\n const chartObj = chartModel.toObject()\n const chartElement = chartLayoutModel\n .charts()\n .first()\n .getAllElements()\n .find((element: Element) => element.isChart())!.instance as BaseChart\n const overlays = chartElement.overlays\n .filter((overlay) => overlay.type !== OverlayType.None)\n .map((overlay) => {\n const overlayAttrsConfig = getOverlayAttributesConfig(overlay)\n return {\n name: overlayAttrsConfig.type.replace('overlays/', ''),\n parameters: overlayAttrsConfig.period,\n color: overlayAttrsConfig.color,\n }\n })\n const indicators: IIndicatorsValue[] = []\n\n let chartIndex: number\n chartModel.getAllPanes().forEach((pane, paneIndex) => {\n pane.getAllElements().forEach((element) => {\n if (element.isChart()) {\n chartIndex = paneIndex\n }\n if (element.isIndicator() && element.instance.type !== IndicatorType.None) {\n const isCot = element.instance.type === IndicatorType.Cot\n if (!isCot || !indicators.some(({ elementInstance }) => elementInstance.type === IndicatorType.Cot)) {\n indicators.push({\n // @ts-expect-error - Element model expect instance as CanvasElement but can receive CanvaseElement || IndicatorElement\n elementInstance: element.instance,\n position: chartIndex === undefined ? Position.Above : Position.Below,\n })\n }\n }\n })\n })\n\n const response = {\n settings: {\n premarket: quote.premarket,\n aftermarket: quote.aftermarket,\n scale: chartModel.scale,\n\n style: getResponseChartType(chartElement.type as ChartElementType),\n overlays,\n indicators: indicators.map((indicator) => {\n const parameters: string[] = []\n indicator.elementInstance.getModalConfig().inputs.forEach((input: IModalConfigInput) => {\n parameters.push(input.value.toString())\n })\n return {\n parameters: parameters.join(','),\n position: indicator.position,\n name: indicator.elementInstance.type.replace('indicators/', ''),\n }\n }),\n },\n instrument: [SpecificChartFunctionality.quotePage, SpecificChartFunctionality.chartPage].includes(\n chartLayoutModel.specificChartFunctionality\n )\n ? Instrument.Stock\n : (chartObj.instrument as Instrument),\n }\n return response\n}\n\nexport const isChartModelValid = (chartLayoutModel: ChartLayout) => {\n removeEmptyIndicatorsAndOverlays(chartLayoutModel)\n let isValid = true\n const chartModel = chartLayoutModel.charts().first()\n const chartElement = chartModel.getAllElements().find((element: Element) => element.isChart())!.instance as BaseChart\n chartElement.overlays.forEach((overlay) => {\n overlay.getModalConfig().inputs.forEach((input: IModalConfigInput) => {\n if (!overlay.getIsValid(input.name)) isValid = false\n })\n })\n\n chartModel.getAllElements().forEach((element) => {\n if (element.isIndicator()) {\n // @ts-expect-error - Element model expect instance as CanvasElement but can receive CanvaseElement || IndicatorElement\n const elementInstance = element.instance as Indicator\n elementInstance.getModalConfig().inputs.forEach((input: IModalConfigInput) => {\n if (!elementInstance.getIsValid(input.name)) isValid = false\n })\n }\n })\n return isValid\n}\n\nconst getQuoteUrlChartType = (chartElementType: ChartElementType) => {\n switch (chartElementType) {\n case ChartElementType.LineChart:\n return 'l'\n case ChartElementType.OhlcChart:\n return 'o'\n case ChartElementType.HeikinAshi:\n return 'ha'\n case ChartElementType.HollowCandleStick:\n return 'hc'\n case ChartElementType.CandleStick:\n default:\n return 'c'\n }\n}\n\nexport const handleUrlUpdateOnSettingsSave = (chartLayoutModel: ChartLayoutModel) => {\n if (chartLayoutModel.specificChartFunctionality === SpecificChartFunctionality.chartPage) return\n\n const chartType =\n chartLayoutModel &&\n (chartLayoutModel\n ?.charts()\n .first()\n ?.getAllElements()\n .find((element: Element) => element.isChart())?.instance.type as ChartElementType)\n const decodedQuery = decodeQueryString()\n const isDeprecatedInteractiveParam = !isRedesignEnabled() && decodedQuery.ty === '1'\n const encodeSearchString = encodeQueryString({\n ...decodeQueryString(),\n ty: isDeprecatedInteractiveParam ? 1 : getQuoteUrlChartType(chartType),\n })\n document.location = `${window.location.pathname}?${encodeSearchString}`\n}\n","import {\n ChartConfigChartPaneElement,\n CustomSpineEvents,\n ObjectHash,\n OverlayConfigObject,\n Position,\n} from '../../../../types/shared'\nimport BaseChart from '../../../charts/base_chart'\nimport { chartsByType } from '../../../charts/charts'\nimport {\n ChartElementType,\n IndicatorType,\n OverlayType,\n PANE_HEIGHT_DEFAULT,\n ScaleType,\n SpecificChartFunctionality,\n} from '../../../constants/common'\nimport { indicatorsByType } from '../../../indicators/indicators'\nimport Chart from '../../../models/chart'\nimport ChartLayoutModel from '../../../models/chart_layout'\nimport Element from '../../../models/element'\nimport Quote from '../../../models/quote'\nimport { QuoteFetchType } from '../../../models/quote/constants'\nimport Overlay from '../../../overlays/overlay'\nimport { overlaysByType } from '../../../overlays/overlays'\nimport { isForexFuturesCryptoPage } from '../../../utils/chart'\nimport { IIndicatorsValue, getOverlayAttributesConfig } from '../helpers'\n\nexport const handleTypeChange = ({\n type,\n chartLayoutModel,\n}: {\n type: ChartElementType\n chartLayoutModel: ChartLayoutModel\n}) => {\n const elements = chartLayoutModel.getAllElements()\n elements.forEach((element) => {\n if (element.isChart() && element.instance.attrs.type !== type) {\n const pane = element.pane()\n const instance = chartsByType[type].fromObject(\n {\n ...element.instance.attrs,\n type,\n },\n pane\n )\n element.replace(instance)\n }\n })\n}\n\nexport const handleScaleChange = ({\n scale,\n chartLayoutModel,\n}: {\n scale: ScaleType\n chartLayoutModel: ChartLayoutModel\n}) => {\n chartLayoutModel.getAllCharts().forEach((chartModel) => {\n chartModel.updateAttribute('scale', scale)\n })\n}\n\nexport const handleQuoteAttributeChange = ({\n attributes,\n chartLayoutModel,\n}: {\n attributes: Partial>\n chartLayoutModel: ChartLayoutModel\n}) => {\n const attributesToChange = Object.keys(attributes) as T[]\n chartLayoutModel.getAllCharts().forEach((chart) => {\n const quote = chart.quote()\n const isChanged = attributesToChange.some((attribute) => attributes[attribute] !== quote[attribute])\n if (isChanged) {\n quote.updateAttributes(attributes)\n quote.fetchData({ fetchType: QuoteFetchType.Refetch })\n }\n })\n}\n\nexport const handleChartAttributeChange = ({\n attributes,\n chartLayoutModel,\n}: {\n attributes: Partial>\n chartLayoutModel: ChartLayoutModel\n}) => {\n chartLayoutModel.getAllCharts().forEach((chart) => {\n chart.updateAttributes(attributes)\n })\n}\n\nexport const handleOverlayReplace = ({\n overlayType,\n overlayIndex,\n chartLayoutModel,\n}: {\n overlayType: OverlayType\n overlayIndex: number\n chartLayoutModel: ChartLayoutModel\n}) => {\n const elements = chartLayoutModel.getAllElements()\n elements.forEach((element) => {\n if (element.isChart()) {\n const instance = overlaysByType[overlayType].fromObject(\n {\n type: overlayType,\n },\n element.pane()\n )\n\n const { inputs } = instance.getModalConfig()\n const obj: ObjectHash = {}\n inputs.forEach((element) => {\n obj[element.name] = element.value\n })\n instance.set(obj)\n const elementInstance = element.instance as BaseChart\n elementInstance.overlays[overlayIndex] = instance\n elementInstance.setOverlays(elementInstance.overlays)\n elementInstance.attrs.overlays[overlayIndex] = getOverlayAttributesConfig(instance)\n\n if (overlayType === OverlayType.Patterns) {\n handleQuoteAttributeChange({ attributes: { hasPatterns: true }, chartLayoutModel })\n }\n elementInstance.setupCache()\n }\n })\n}\n\nexport const handleRemoveOverlayElement = ({\n overlayIndex,\n chartLayoutModel,\n}: {\n overlayIndex: number\n chartLayoutModel: ChartLayoutModel\n}) => {\n const elements = chartLayoutModel.getAllElements()\n elements.forEach((element) => {\n if (element.isChart()) {\n const elementInstance = element.instance as BaseChart\n if (elementInstance.overlays[overlayIndex].type === OverlayType.Patterns) {\n const quote = element.pane().chart().quote()\n quote.updateAttribute('hasPatterns', false)\n }\n elementInstance.removeOverlay(elementInstance.overlays[overlayIndex])\n elementInstance.setupCache()\n }\n })\n}\n\nexport const handleAddOverlayElement = ({\n chartLayoutModel,\n overlayType,\n attrs,\n}: {\n chartLayoutModel: ChartLayoutModel\n overlayType?: OverlayType\n attrs?: ObjectHash\n}) => {\n const elements = chartLayoutModel.getAllElements()\n const overlayAttrs = attrs ?? { type: overlaysByType[OverlayType.None].type }\n elements.forEach((element) => {\n if (element.isChart()) {\n const overlay = overlaysByType[overlayType || OverlayType.None].fromObject(overlayAttrs, element.pane())\n const elementInstance = element.instance as BaseChart\n elementInstance.addOverlay(overlay)\n elementInstance.attrs.overlays = [...elementInstance.attrs.overlays, overlayAttrs] as OverlayConfigObject[]\n if (overlayType === OverlayType.Patterns) {\n handleQuoteAttributeChange({ attributes: { hasPatterns: true }, chartLayoutModel })\n }\n }\n })\n}\n\nexport const handleUpdateOverlayAttributes = ({\n chartLayoutModel,\n overlayIndex,\n attrs = {},\n}: {\n chartLayoutModel: ChartLayoutModel\n overlayIndex: number\n attrs?: ObjectHash\n}) => {\n const elements = chartLayoutModel.getAllElements()\n elements.forEach((element) => {\n if (element.isChart()) {\n const elementInstance = element.instance as BaseChart\n elementInstance.overlays[overlayIndex].set(attrs)\n elementInstance.setOverlays(elementInstance.overlays)\n elementInstance.setupCache()\n }\n })\n}\n\nexport const handleIndicatorReplace = ({\n value,\n paneIndex,\n chartLayoutModel,\n}: {\n value: IndicatorType\n paneIndex: number\n chartLayoutModel: ChartLayoutModel\n}) => {\n const charts = chartLayoutModel.getAllCharts()\n charts.forEach((chart) => {\n const indicatorElement = chart\n .getAllPanes()\n [paneIndex].getAllElements()\n .find((el) => el.isIndicator())\n\n const isPrevSame = indicatorElement?.instance.type === value\n if (!indicatorElement || isPrevSame) return\n\n const instance = indicatorsByType[value].fromObject(\n {\n type: value,\n },\n indicatorElement.instance.model\n )\n const { inputs } = instance.getModalConfig()\n const obj: ObjectHash = {}\n inputs.forEach((input) => {\n obj[input.name] = input.value\n })\n instance.set(obj)\n // @ts-expect-error - Element model expect instance as CanvasElement but can receive CanvaseElement || IndicatorElement\n indicatorElement.replace(instance)\n chart.trigger(CustomSpineEvents.IndicatorsChange)\n })\n}\n\nexport const handleRemoveIndicatorPane = ({\n paneIndex,\n chartLayoutModel,\n}: {\n paneIndex: number\n chartLayoutModel: ChartLayoutModel\n}) => {\n const charts = chartLayoutModel.getAllCharts()\n charts.forEach((chart) => {\n const indicatorElement = chart\n .getAllPanes()\n [paneIndex].getAllElements()\n .find((el) => el.isIndicator())\n\n if (indicatorElement) {\n indicatorElement.pane().destroyCascade()\n\n if (chartLayoutModel.specificChartFunctionality !== SpecificChartFunctionality.chartPage) {\n chart.getAllElements().forEach((element) => {\n element.pane().resetHeight()\n })\n const chartHeight = chart.getAllPanes().reduce((previous, current) => previous + current.height, 0)\n chart.updateAttribute('height', chartHeight)\n }\n chart.trigger(CustomSpineEvents.IndicatorsChange)\n }\n })\n}\n\ntype IndicatorElements = Array & { type: IndicatorType }>\nexport const handleAddIndicatorPane = ({\n chartLayoutModel,\n indicatorElements,\n}: {\n chartLayoutModel: ChartLayoutModel\n indicatorElements?: IndicatorElements\n}) => {\n const charts = chartLayoutModel.getAllCharts()\n charts.forEach((chart) => {\n chart.getAllElements().forEach((element) => {\n element.pane().resetHeight()\n })\n const paneProperties = {\n height: PANE_HEIGHT_DEFAULT.indicator,\n chart,\n elements: indicatorElements ? indicatorElements : [{ type: IndicatorType.None }],\n }\n const pane = chart.createPaneCascade(paneProperties)\n\n if (chartLayoutModel.specificChartFunctionality !== SpecificChartFunctionality.chartPage) {\n const chartHeight = chart.getAllPanes().reduce((previous, current) => previous + current.height, 0)\n chart.updateAttribute('height', chartHeight)\n }\n\n chart.trigger('createPane', pane, paneProperties)\n })\n}\n\nexport const getAllOverlays = (chartLayoutModel: ChartLayoutModel) => {\n const chartElement = chartLayoutModel\n .charts()\n .first()\n .getAllElements()\n .find((element: Element) => element.isChart())!.instance as BaseChart\n return chartElement.overlays.filter((overlay) => overlay.type !== OverlayType.None)\n}\n\nexport const getAllIndicators = (chartLayoutModel: ChartLayoutModel) => {\n const indicators: IIndicatorsValue[] = []\n const chartModel = chartLayoutModel.charts().first()\n let chartIndex: number\n chartModel.getAllPanes().forEach((pane, paneIndex) => {\n pane.getAllElements().forEach((element) => {\n if (element.isChart()) {\n chartIndex = paneIndex\n }\n if (element.isIndicator()) {\n if (element.instance.type !== IndicatorType.None) {\n indicators.push({\n // @ts-expect-error - Element model expect instance as CanvasElement but can receive CanvaseElement || IndicatorElement\n elementInstance: element.instance,\n position: chartIndex === undefined ? Position.Above : Position.Below,\n paneIndex: paneIndex,\n })\n }\n }\n })\n })\n return indicators\n}\n\nexport const removeEmptyIndicatorsAndOverlays = (chartLayoutModel: ChartLayoutModel) => {\n chartLayoutModel.getAllElements().forEach((element) => {\n if (element.isChart()) {\n const elementInstance = element.instance as BaseChart\n for (let i = elementInstance.overlays.length - 1; i >= 0; i--) {\n if (elementInstance.overlays[i].type === OverlayType.None) {\n elementInstance.removeOverlay(elementInstance.overlays[i])\n }\n }\n }\n if (element.isIndicator()) {\n // @ts-expect-error - Element model expect instance as CanvasElement but can receive CanvaseElement || IndicatorElement\n const elementInstance = element.instance as Indicator\n if (elementInstance.type === IndicatorType.None) {\n const pane = element.pane()\n const chart = pane.chart()\n if (chartLayoutModel.specificChartFunctionality !== SpecificChartFunctionality.chartPage) {\n chart.updateAttribute('height', chart.height - pane.height)\n }\n pane.destroyCascade()\n }\n }\n })\n}\n\nexport const handleRestoreDefault = ({\n chartLayoutModel,\n forceUpdate,\n}: {\n chartLayoutModel: ChartLayoutModel\n forceUpdate: () => void\n}) => {\n const DEFAULT_EXTENDED_HOURS = { premarket: true, aftermarket: true }\n const DEFAULT_OVERLAYS = [\n { type: OverlayType.Sma, period: '20', color: '#dc32b363' },\n { type: OverlayType.Sma, period: '50', color: '#ff8f33c6' },\n { type: OverlayType.Sma, period: '200', color: '#dcb3326d' },\n ]\n if (!isForexFuturesCryptoPage(chartLayoutModel.specificChartFunctionality)) {\n DEFAULT_OVERLAYS.push({ type: OverlayType.Patterns, period: '', color: '#87ceef|#dc9fe5' })\n }\n\n const DEFAULT_INDICATORS: Array<{ height: number; elements: IndicatorElements }> = [\n { height: PANE_HEIGHT_DEFAULT.indicator, elements: [{ type: IndicatorType.Rsi, period: '14' }] },\n ]\n\n if (chartLayoutModel.specificChartFunctionality === SpecificChartFunctionality.futuresPage) {\n const cotKeys = Object.keys(chartLayoutModel.charts().first().quote().COTs ?? {})\n if (cotKeys.length === 0) {\n cotKeys.push('')\n }\n DEFAULT_INDICATORS.unshift(\n ...cotKeys.map((code) => ({\n height: PANE_HEIGHT_DEFAULT.indicator,\n elements: [{ type: IndicatorType.Cot, code }],\n }))\n )\n }\n\n removeEmptyIndicatorsAndOverlays(chartLayoutModel)\n const overlays = getAllOverlays(chartLayoutModel)\n for (let i = overlays.length - 1; i >= 0; i--) {\n handleRemoveOverlayElement({ overlayIndex: i, chartLayoutModel })\n }\n\n handleScaleChange({ scale: ScaleType.Linear, chartLayoutModel })\n handleTypeChange({ type: ChartElementType.CandleStick, chartLayoutModel })\n handleChartAttributeChange({ attributes: DEFAULT_EXTENDED_HOURS, chartLayoutModel })\n handleQuoteAttributeChange({ attributes: DEFAULT_EXTENDED_HOURS, chartLayoutModel })\n\n DEFAULT_OVERLAYS.forEach((overlay) => {\n handleAddOverlayElement({\n chartLayoutModel,\n overlayType: overlay.type,\n attrs: { ...overlay },\n })\n })\n\n const indicators = getAllIndicators(chartLayoutModel)\n for (let i = indicators.length - 1; i >= 0; i--) {\n handleRemoveIndicatorPane({ paneIndex: indicators[i].paneIndex, chartLayoutModel })\n }\n DEFAULT_INDICATORS.forEach((indicator) => {\n handleAddIndicatorPane({\n chartLayoutModel,\n indicatorElements: indicator.elements,\n })\n })\n\n setTimeout(() => {\n forceUpdate()\n })\n}\n\nexport const getResponseChartType = (chartType: ChartElementType) => {\n switch (chartType) {\n case ChartElementType.HeikinAshi:\n return 'heikinashi'\n case ChartElementType.HollowCandleStick:\n return 'hollowcandlestick'\n case ChartElementType.LineChart:\n return 'line'\n case ChartElementType.OhlcChart:\n return 'ohlc'\n case ChartElementType.CandleStick:\n default:\n return 'candlestick'\n }\n}\n\nexport const getChartElementTypeFromResponseType = (chartResponseType: string | null) =>\n chartResponseType === null\n ? null\n : Object.values(ChartElementType).find(\n (chartType: ChartElementType) => chartResponseType === getResponseChartType(chartType)\n )\n","import * as React from 'react'\n\nimport { Checkbox, Label } from '../../../components'\nimport { useForceUpdate } from '../../../utils/force-update'\nimport { useChartLayoutGlobalModel } from '../chart-layout-model'\nimport { handleChartAttributeChange, handleQuoteAttributeChange } from './model-manipulation'\n\nexport function ChartExtendedHoursToggle() {\n const { forceUpdate } = useForceUpdate()\n const { chartLayoutModel } = useChartLayoutGlobalModel()\n const quote = chartLayoutModel?.charts().first()?.quote()\n\n const onExtendedHoursChange = React.useCallback(\n ({ extendedHoursType, checked }: { extendedHoursType: 'premarket' | 'aftermarket'; checked: boolean }) => {\n if (chartLayoutModel) {\n handleChartAttributeChange({ attributes: { [extendedHoursType]: checked }, chartLayoutModel })\n handleQuoteAttributeChange({ attributes: { [extendedHoursType]: checked }, chartLayoutModel })\n forceUpdate()\n }\n },\n [forceUpdate, chartLayoutModel]\n )\n\n if (!chartLayoutModel) return null\n\n return (\n <>\n \n \n ) =>\n onExtendedHoursChange({ extendedHoursType: 'premarket', checked: e.target.checked })\n }\n >\n Pre-market\n \n ) =>\n onExtendedHoursChange({ extendedHoursType: 'aftermarket', checked: e.target.checked })\n }\n >\n After-market\n \n
\n \n )\n}\n","import * as React from 'react'\n\nimport { Select, SelectOption } from '../../../components'\nimport { ScaleLabel, ScaleType } from '../../../constants/common'\nimport { useForceUpdate } from '../../../utils/force-update'\nimport { useChartLayoutGlobalModel } from '../chart-layout-model'\nimport { handleScaleChange } from './model-manipulation'\n\ninterface IChartScale {\n value: ScaleType\n label: string\n}\n\nconst DEFAULT_SCALES: IChartScale[] = [\n { value: ScaleType.Linear, label: ScaleLabel[ScaleType.Linear] },\n { value: ScaleType.Percentage, label: ScaleLabel[ScaleType.Percentage] },\n { value: ScaleType.Logarithmic, label: ScaleLabel[ScaleType.Logarithmic] },\n]\n\nexport function ChartScaleSelect() {\n const { forceUpdate } = useForceUpdate()\n const { chartLayoutModel } = useChartLayoutGlobalModel()\n\n const onScaleChange = React.useCallback(\n (scale: ScaleType) => {\n if (chartLayoutModel) {\n handleScaleChange({ scale, chartLayoutModel })\n forceUpdate()\n }\n },\n [chartLayoutModel, forceUpdate]\n )\n\n if (!chartLayoutModel) return null\n\n return (\n {\n onScaleChange(item.value)\n }}\n value={chartLayoutModel?.charts().first()?.scale}\n items={DEFAULT_SCALES}\n className=\"w-full\"\n size=\"medium\"\n >\n {DEFAULT_SCALES.map((item) => (\n \n {item.label}\n \n ))}\n \n )\n}\n","import * as React from 'react'\n\nimport { chartsByType } from '../../../charts/charts'\nimport { Select, SelectOption } from '../../../components'\nimport { ChartElementType } from '../../../constants/common'\nimport Element from '../../../models/element'\nimport { useForceUpdate } from '../../../utils/force-update'\nimport { useChartLayoutGlobalModel } from '../chart-layout-model'\nimport { handleTypeChange } from './model-manipulation'\n\ninterface IChartType {\n value: ChartElementType\n label?: string\n iconName?: string\n}\n\nconst DEFAULT_TYPES = Object.keys(chartsByType)\n .filter(\n (item) =>\n ![ChartElementType.PerfChart, ChartElementType.MultiLineChart, ChartElementType.MarketSentiment].includes(\n item as ChartElementType\n )\n )\n .map((item) => ({\n value: item,\n label: chartsByType[item as ChartElementType].label,\n iconName: chartsByType[item as ChartElementType].iconName,\n })) as IChartType[]\n\nexport function ChartStyleSelect() {\n const { forceUpdate } = useForceUpdate()\n const { chartLayoutModel } = useChartLayoutGlobalModel()\n const chartType =\n chartLayoutModel &&\n chartLayoutModel\n ?.charts()\n .first()\n ?.getAllElements()\n .find((element: Element) => element.isChart())?.instance.type\n\n const onTypeChange = React.useCallback(\n (type: ChartElementType) => {\n if (chartLayoutModel) {\n handleTypeChange({ type, chartLayoutModel })\n forceUpdate()\n }\n },\n [chartLayoutModel, forceUpdate]\n )\n\n if (!chartLayoutModel) return null\n\n return (\n {\n onTypeChange(item.value)\n }}\n value={chartType}\n items={DEFAULT_TYPES}\n className=\"w-full\"\n size=\"medium\"\n leftContent={DEFAULT_TYPES.find((item) => item.value === chartType)?.iconName}\n >\n {DEFAULT_TYPES.map((item) => (\n \n {item.label}\n \n ))}\n \n )\n}\n","import classnames from 'classnames'\nimport * as React from 'react'\n\nimport { ChartConfigChartPane, CustomSpineEvents } from '../../../../types/shared'\nimport { Button, ButtonGroup, Select, SelectOption } from '../../../components'\nimport { IndicatorType } from '../../../constants/common'\nimport ChartLayout from '../../../models/chart_layout'\nimport utils from '../../../utils'\nimport { handleAddIndicatorPane, handleRemoveIndicatorPane } from './model-manipulation'\n\ninterface Props {\n chartLayoutModel: ChartLayout\n onUpdate: () => void\n}\nexport function CotSelect({ chartLayoutModel, onUpdate }: Props) {\n const handleCotsOff = React.useCallback(() => {\n // handleRemoveIndicatorPane uses paneIndex and since we may remove multiple panes at once we need to get correct index after each removal\n const removeCotPanesRecursively = () => {\n const paneIndex = chartLayoutModel\n .charts()\n .first()\n .getAllPanes()\n .findIndex((pane) => pane.mainElement()?.instance.type === IndicatorType.Cot)\n\n if (paneIndex > -1) {\n handleRemoveIndicatorPane({\n chartLayoutModel,\n paneIndex,\n })\n removeCotPanesRecursively()\n }\n }\n removeCotPanesRecursively()\n onUpdate()\n }, [chartLayoutModel, onUpdate])\n\n const handleCotsOn = React.useCallback(() => {\n const cotKeys = Object.keys(chartLayoutModel.charts().first().quote().COTs ?? {})\n if (cotKeys.length === 0) {\n cotKeys.push('')\n }\n\n cotKeys.forEach((code) => {\n handleAddIndicatorPane({\n chartLayoutModel,\n indicatorElements: [{ type: IndicatorType.Cot, code }],\n })\n })\n\n chartLayoutModel.getAllCharts().forEach((chart) => {\n const chartPanes = [...chart.getAllPanes()].sort((a, b) => a.getNumericId() - b.getNumericId())\n const minCotPaneId = utils.min(\n chartPanes\n .filter((pane) => pane.mainElement()?.instance.type === IndicatorType.Cot)\n .map((pane) => pane.getNumericId())\n )\n const chartPaneNumericId = chartPanes.find((pane) => pane.getIsChartPane())!.getNumericId()\n chartPanes.forEach((pane) => {\n if (pane.getNumericId() < minCotPaneId && chartPaneNumericId < pane.getNumericId()) {\n const paneConfig = pane.toConfig()\n pane.destroyCascade()\n chart.createPaneCascade({\n ...(paneConfig as ChartConfigChartPane),\n chart,\n })\n }\n })\n\n const chartHeight = chart.getAllPanes().reduce((previous, pane) => {\n pane.resetHeight()\n return previous + pane.height\n }, 0)\n chart.updateAttribute('height', chartHeight)\n chart.trigger(CustomSpineEvents.IndicatorsChange)\n })\n\n onUpdate()\n }, [chartLayoutModel, onUpdate])\n\n const hasCot = chartLayoutModel.getAllElements().some(({ instance }) => instance.type === IndicatorType.Cot)\n\n return (\n \n
\n
\n COTs\n \n\n \n
\n
\n
\n \n Off\n \n \n On\n \n \n
\n
\n
\n {isFuturesPage &&
}\n {indicators.map((indicatorObj, indicatorIndex) => {\n const { elementInstance, position, paneIndex } = indicatorObj\n const indicatorConfig = elementInstance.getModalConfig()\n const { inputsErrorMessages } = indicatorConfig\n return (\n
\n {\n onIndicatorSelect({ value: item.value, paneIndex })\n }}\n hasPopoverButtonWidthLimit={false}\n >\n {DEFAULT_INDICATORS.map((item) => (\n \n {item.label}\n \n ))}\n \n\n \n {indicatorConfig.inputs && (\n
\n {elementInstance.type !== IndicatorType.Perf && indicatorConfig.inputs.length < 3 && (\n
\n \n \n )}\n {indicatorConfig.inputs.map((indicatorInput, confIndex) => (\n
\n ) => e.target.value}\n onChange={(e: React.ChangeEvent) => {\n onIndicatorValueChange({ value: e.target.value, paneIndex, indicatorInput })\n }}\n onInvalid={(e: React.BaseSyntheticEvent) => {\n e.target.focus()\n }}\n tooltipContent={\n \n
{indicatorInput.label}
\n {!elementInstance.getIsValid(indicatorInput.name) && (\n
\n {inputsErrorMessages[indicatorInput.name]}\n
\n )}\n
\n {chartElementOverlays?.map((overlay, overlayIndex) => {\n const overlayConfig = overlay.getModalConfig()\n const { inputsErrorMessages } = overlayConfig\n const { otherInputs, colorInputs } = getParsedInputs(overlayConfig.inputs)\n\n return (\n
\n {\n onOverlaySelect({ overlayType: item.value, overlayIndex })\n }}\n hasPopoverButtonWidthLimit={false}\n >\n {DEFAULT_OVERLAYS.map((item) => (\n \n {item.label}\n \n ))}\n \n \n {otherInputs.map((overlayInput, confIndex) => (\n
) => e.target.value}\n onBlur={forceUpdate}\n onChange={(e: React.ChangeEvent) => {\n onOverlayPeriodChange({ value: e.target.value, overlayIndex, overlayInput })\n }}\n onInvalid={(e: React.BaseSyntheticEvent) => {\n e.target.focus()\n }}\n tooltipContent={\n \n
{overlayInput.label}
\n {!overlay.getIsValid(overlayInput.name) && (\n
{inputsErrorMessages[overlayInput.name]}
\n )}\n
\n
\n \n {isActionPending ? 'Saving...' : 'Save'}\n \n {\n confirmationDialogState.show()\n }}\n disabled={isActionPending}\n data-testid=\"chart-settings-reset-defaults-btn\"\n >\n {resetSettingsButtonLabel}\n \n
\n\n
\n {({ checkForUnsavedChangesAndClose }) => (\n }\n data-testid={tabButtonTestId}\n >\n {settingsTabButtonLabel}\n \n )}\n \n\n
\n \n {\n onSettingsReset()\n confirmationDialogState.hide()\n }}\n theme=\"red\"\n >\n Confirm\n \n \n }\n >\n {resetConfirmationText}\n \n \n
\n {title}\n Light Mode\n Dark Mode\n
\n {colors.map(({ label, colorKeys, canSelectAlpha }) => (\n
\n
{label}\n {Object.values(Theme).map((themeValue) => (\n
\n {colorKeys.map((colorKey, index) => {\n let iconKey\n if (colorKeys.length === 2) {\n iconKey = index === 0 ? 'trendingUp' : 'trendingDown'\n }\n return (\n ) => {\n handleColorChange({ color, theme: themeValue, colorKey })\n }}\n />\n )\n })}\n
\n ))}\n
\n ))}\n
\n {tickerChange?.tickerChange && (\n <>\n {tickerChange.tickerAfterChange && (\n \n {tickerChange.tickerAfterChange.string}\n \n )}\n \n {tickerChange.tickerChange.string}\n \n \n )}\n
\n )\n}\n\nexport const DailyChangeDisplay = React.memo(\n DailyChangeDisplayComponent,\n (prevProps, nextProps) => prevProps.chartIndex === nextProps.chartIndex\n)\n","import * as React from 'react'\nimport { useLocation } from 'react-router-dom'\n\nimport { Button } from '../../components'\nimport { SpecificChartFunctionality } from '../../constants/common'\nimport ChartLayout from '../../models/chart_layout'\nimport { decodeQueryString, encodeQueryString } from '../../utils/query_string'\n\nfunction getTickersString(tickers: string[], tickersCount: number) {\n return Array.from({ length: Math.min(tickersCount, 6) })\n .map((_, index) => tickers[index] ?? tickers[tickers.length - 1])\n .join(',')\n}\n\nfunction getLayoutType(tickersCount: number) {\n switch (tickersCount) {\n case 0: // shouldn't happen\n case 1:\n return '1h1v'\n case 2:\n return '2h1v'\n case 3:\n return '3h1v'\n case 4:\n return '2h2v'\n case 5:\n default:\n // 6 and more\n return '3h2v'\n }\n}\n\nconst utmCampaign: Partial> = {\n [SpecificChartFunctionality.quotePage]: 'quote-fullscreen-button',\n [SpecificChartFunctionality.futuresPage]: 'futures-fullscreen-button',\n [SpecificChartFunctionality.forexPage]: 'forex-fullscreen-button',\n [SpecificChartFunctionality.cryptoPage]: 'crypto-fullscreen-button',\n}\n\ninterface Props {\n model: ChartLayout\n isPremium: boolean\n}\n\nexport function FullscreenButton({ model, isPremium, children }: React.PropsWithChildren) {\n const location = useLocation()\n const { i, p = 'd', r } = decodeQueryString(location.search)\n const urlTickers = model\n .charts()\n .all()\n .map((chart) => chart.quote().getRawTicker())\n\n return (\n p).join(','),\n l: getLayoutType(urlTickers.length),\n r,\n })}`\n : `/elite.ashx?${encodeQueryString({\n utm_source: 'finviz',\n utm_medium: 'banner',\n utm_campaign: utmCampaign[model.specificChartFunctionality],\n })}`\n }\n >\n {children}\n \n )\n}\n","import classnames from 'classnames'\nimport debounce from 'lodash.debounce'\nimport React from 'react'\n\nimport { Instrument } from '../../../types/shared'\nimport { Button, Dropdown, DropdownItem, Icon, Input, useDropdownState } from '../../components'\nimport { getSanitizedTicker } from '../../utils'\nimport fetchApi from '../../utils/fetch_api'\n\ntype FetchCallback = (data: any) => any\ninterface DataType {\n ticker: string\n company: string\n exchange: string\n}\n\ninterface SearchProps {\n focus?: boolean\n ticker: string\n instrument: Instrument\n chartIndex: number\n onTickerSelected: (ticker: string) => void\n}\n\ninterface SearchState {\n input: string\n highlight: string\n data: DataType[]\n focused: boolean\n selected: number\n}\n\nconst handleFetch = async (input: string, callback: FetchCallback) => {\n try {\n const data = await fetchApi({\n location: '/api/suggestions.ashx',\n queryParameters: { input },\n throwOnStatusCodes: [404],\n })\n if (Array.isArray(data)) {\n callback(data)\n }\n } catch {\n // ignore error\n }\n}\n\nclass Search extends React.Component {\n search = debounce((input: string, callback: FetchCallback) => {\n handleFetch(input, callback)\n }, 500)\n\n state = this.getBaseState()\n\n getBaseState() {\n return { input: '', highlight: '', data: [] as DataType[], focused: false, selected: -1 }\n }\n\n handleDebounceCancel = () => {\n this.search.cancel()\n }\n\n render() {\n const focus = !!this.props.focus\n return (\n \n \n \n
\n )\n }\n\n _onChange = (value: string) => {\n const callback = (data: DataType[]) => {\n this.setState({ data: data, highlight: value })\n }\n this.setState({ input: value, selected: -1 })\n if (value === '') {\n callback([])\n return\n }\n this.search(value, callback)\n }\n\n _onFocus = () => {\n this.setState({ focused: true })\n }\n\n _onBlur = () => {\n this.setState({ focused: false })\n }\n\n _onArrowUp = () => {\n if (this.state.selected > 0) {\n const selected = this.state.selected - 1\n this.setState({ selected: selected, input: this.state.data[selected].ticker })\n }\n }\n\n _onArrowDown = () => {\n if (this.state.selected < this.state.data.length - 1) {\n const selected = this.state.selected + 1\n this.setState({ selected: selected, input: this.state.data[selected].ticker })\n }\n }\n\n _onTickerSelected = (ticker: string) => {\n this.setState({\n ...this.getBaseState(),\n focused: this.state.focused,\n })\n this.props.onTickerSelected(ticker)\n }\n}\n\ninterface SearchInputProps {\n data: DataType[]\n focus: boolean\n currentTicker: string\n value: string\n instrument: Instrument\n chartIndex: number\n cancelDebounce: () => void\n onArrowUp: () => void\n onArrowDown: () => void\n onChange: (value: string) => void\n onFocus: (event: React.FocusEvent) => void\n onBlur: (event: React.FocusEvent) => void\n onTickerSelected: (ticker: string) => void\n}\n\nfunction SearchInput(props: SearchInputProps) {\n const { cancelDebounce, value, onTickerSelected, onChange, onArrowUp, onArrowDown } = props\n const dropdownState = useDropdownState({ placement: 'bottom-end' })\n\n const onSubmit = React.useCallback(\n (ev: React.FormEvent) => {\n ev.preventDefault()\n cancelDebounce()\n if (value !== '') {\n const sanitizedValue = getSanitizedTicker(value)\n onTickerSelected(sanitizedValue)\n }\n },\n [cancelDebounce, onTickerSelected, value]\n )\n\n const onInputChange = React.useCallback(\n (ev: React.ChangeEvent) => {\n ev.preventDefault()\n onChange(ev.currentTarget.value.trim())\n },\n [onChange]\n )\n\n const onInputKeyDown = React.useCallback((ev: React.KeyboardEvent) => {\n if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {\n ev.preventDefault()\n }\n }, [])\n\n const onInputKeyUp = React.useCallback(\n (ev: React.KeyboardEvent) => {\n switch (ev.key) {\n case 'ArrowUp':\n ev.preventDefault()\n onArrowUp()\n break\n case 'ArrowDown':\n ev.preventDefault()\n onArrowDown()\n break\n }\n },\n [onArrowUp, onArrowDown]\n )\n\n const detailLink = React.useMemo(() => {\n const ticker = props.currentTicker.replace('@', '')\n\n switch (props.instrument) {\n case Instrument.Stock:\n return `/quote.ashx?t=${ticker}`\n case Instrument.Futures:\n return `/futures_charts.ashx?t=${ticker}`\n case Instrument.Forex:\n return `/forex_charts.ashx?t=${ticker}`\n case Instrument.Crypto:\n return `/crypto_charts.ashx?t=${ticker}`\n }\n }, [props.currentTicker, props.instrument])\n\n return (\n \n )\n}\n\ninterface SuggestionsBoxProps {\n data: DataType[]\n onTickerSelected: (ticker: string) => void\n focused: boolean\n chartIndex: number\n selected: number\n highlight: string\n input: string\n}\n\nclass SuggestionsBox extends React.Component {\n render() {\n const data = this.props.data\n return (\n 0 || this.props.highlight.length > 2) ? 'table' : 'none',\n }}\n cellPadding=\"0\"\n cellSpacing=\"0\"\n >\n \n {data.map((row, index) => (\n \n | \n | \n {row.exchange} | \n \n ))}\n \n \n )\n }\n\n _onClick(ticker: string, e: React.MouseEvent) {\n if (e.button === 0) {\n this.props.onTickerSelected(ticker)\n }\n }\n\n _formatTicker(ticker: string) {\n const hightlight = this.props.highlight.toUpperCase()\n return ticker.replace(hightlight, '' + hightlight + '')\n }\n\n _formatCompany(text: string) {\n const input = this.props.highlight\n const re = new RegExp(this._escapeRegExp(input), 'gi')\n return text.replace(re, function (match) {\n return '' + match + ''\n })\n }\n\n _escapeRegExp(str: string) {\n return str.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n }\n}\n\nexport default Search\n","import React from 'react'\n\nimport { Button, Popover, PopoverTrigger, getExtendedDialogState, usePopoverState } from '../../components'\nimport { SpecificChartFunctionality } from '../../constants/common'\nimport ChartLayout from '../../models/chart_layout'\nimport { isRedesignEnabled } from '../../utils'\nimport { encodeQueryString } from '../../utils/query_string'\nimport { ChartSettings, PreventClosingUnsavedChanges } from '../chart-settings'\n\ninterface Props {\n isPremium: boolean\n model: ChartLayout\n}\n\nconst BUTTON_POPOVER_GUTTER = 16\nconst SETTINGS_POPOVER_ID = 'settings-popover'\n\nconst utmCampaign: Partial> = {\n [SpecificChartFunctionality.quotePage]: 'quote-settings-button',\n [SpecificChartFunctionality.futuresPage]: 'futures-settings-button',\n [SpecificChartFunctionality.forexPage]: 'forex-settings-button',\n [SpecificChartFunctionality.cryptoPage]: 'crypto-settings-button',\n}\n\ntype PopoverStylesType = { body?: React.CSSProperties; wrapper?: React.CSSProperties }\n\nexport function ChartSettingsButton({ isPremium, model, children }: React.PropsWithChildren) {\n const settingsPopoverState = usePopoverState({\n placement: 'bottom-start',\n })\n const { isFullyClosed } = getExtendedDialogState(settingsPopoverState)\n const chartElement = document.getElementById('chart')\n const popoverContentElement = document.getElementById(SETTINGS_POPOVER_ID)\n const settingsButton = settingsPopoverState.unstable_referenceRef.current\n\n const popoverStyles = React.useMemo(() => {\n const newPopoverStyles: PopoverStylesType = {}\n if (!settingsButton || !chartElement) {\n return newPopoverStyles\n }\n const settingsButtonBoundingClientRect = settingsButton.getBoundingClientRect()\n const topOffset = settingsButtonBoundingClientRect.top + settingsButtonBoundingClientRect.height\n newPopoverStyles.body = {\n maxHeight: window.innerHeight - topOffset - BUTTON_POPOVER_GUTTER * 2,\n position: 'sticky',\n top: -topOffset + BUTTON_POPOVER_GUTTER,\n }\n if (!popoverContentElement) {\n return newPopoverStyles\n }\n const chartHeight = chartElement.clientHeight\n const popoverContentHeight = popoverContentElement.offsetHeight\n const isRedesign = isRedesignEnabled()\n newPopoverStyles.wrapper = {\n height: popoverContentHeight < chartHeight ? chartHeight : undefined,\n ...(!isRedesign && {\n transform: `translate(${BUTTON_POPOVER_GUTTER}px, ${topOffset + BUTTON_POPOVER_GUTTER}px)`,\n }),\n }\n\n return newPopoverStyles\n }, [settingsButton, chartElement, popoverContentElement])\n\n const buttonProps = React.useMemo(() => {\n if (!isPremium) {\n return {\n as: 'a',\n href: `/elite.ashx?${encodeQueryString({\n utm_source: 'finviz',\n utm_medium: 'banner',\n utm_campaign: utmCampaign[model.specificChartFunctionality],\n })}`,\n }\n }\n\n return {\n disabled: !model,\n as: PopoverTrigger,\n state: settingsPopoverState,\n active: settingsPopoverState.visible,\n }\n }, [model, isPremium, settingsPopoverState])\n\n return (\n <>\n \n {children}\n \n \n {({ checkForUnsavedChangesAndClose }) => (\n \n {!isFullyClosed && {}} onClose={checkForUnsavedChangesAndClose} />}\n \n )}\n \n \n )\n}\n","import * as React from 'react'\nimport { useLocation, useNavigate } from 'react-router-dom'\n\nimport { ChartsOrQuotePageQueryParams, SpecificChartFunctionality } from '../../constants/common'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport { useModelRef } from '../../model-hooks/useModelRef'\nimport Chart from '../../models/chart'\nimport Quote from '../../models/quote'\nimport { QuoteFetchType } from '../../models/quote/constants'\nimport { createRequestAbortController, removeFromAbortCache } from '../../utils/abort_controller'\nimport { decodeQueryString, encodeQueryString } from '../../utils/query_string'\nimport { getLeftOffset } from '../renderUtils'\n\nconst getQuoteRequestKey = (chartModel: Chart) =>\n `quoteReq-${chartModel.ticker}-${chartModel.instrument}-${chartModel.id}`\n\nexport function useChartControls({\n chartModel: unwatchedChartModel,\n isInteractive,\n}: {\n chartModel: Chart | null\n isInteractive: boolean\n}) {\n const location = useLocation()\n const navigate = useNavigate()\n const chartModel = useModelState(unwatchedChartModel, {\n watchProperties: ['ticker', 'timeframe', 'dateRange'],\n })\n const chartLayoutModel = useModelState(chartModel?.chart_layout() ?? null, {\n watchProperties: ['idea'],\n })\n const chartModelRef = useModelRef(chartModel)\n const [isLoading, setIsLoading] = React.useState(false)\n const abortControllerKeyRef = React.useRef('')\n const isIdeaChart = !!chartLayoutModel?.idea?.id\n\n const updateChartModelWithNewQuote = React.useCallback((quote: Quote) => {\n const chart = chartModelRef.current\n if (!chart) {\n return\n }\n\n const chartLayoutModel = chart.chart_layout()\n const isSameTicker = chart.getQuoteRawTicker() === quote.getRawTicker()\n\n chart.getAllPanes().forEach((pane) => {\n if (!!pane.getChartOrIndicatorElement()) {\n pane.updateAttribute('scaleRange', null)\n }\n })\n\n chart.updateAttributes({ leftOffset: getLeftOffset({ quote, chartModel: chart }), quote, isScrolled: true })\n\n // Refetch all other chart quotes as the main one is already refetched so we can filter it out but other quotes (from perf for example) should be refetched as well\n chart\n .getAllQuotes()\n .filter((chartQuote) => !chartQuote.eql(quote))\n .forEach((quote) => {\n quote.fetchData({ fetchType: QuoteFetchType.NewerData })\n })\n\n for (const element of chart.getAllElements()) {\n if (element.isDrawing()) {\n // We want to remove all drawings on ticker change but if autosave is enabled we let the autosave hook take care of that\n if (isSameTicker && chartLayoutModel.isPreserveDrawingsActive) {\n element.instance.updateScales()\n } else {\n element.destroyCascade()\n }\n }\n }\n\n // The only dependency here is a ref , so no need to add it to dependencies\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n const fetchQuote = React.useCallback(async () => {\n if (!isInteractive || !chartModel || isIdeaChart) {\n return\n }\n setIsLoading(true)\n\n const { ticker, instrument, timeframe } = chartModel\n const { premarket, aftermarket } = Quote.first()\n const patterns = chartModel.getHasPatterns()\n const currentQuote = chartModel.quote()\n if (currentQuote.getRawTicker() !== ticker || currentQuote.timeframe !== timeframe) {\n abortControllerKeyRef.current = getQuoteRequestKey(chartModel)\n const abortController = createRequestAbortController({\n key: abortControllerKeyRef.current,\n shouldAbortRunningRequest: !Quote.select(\n (quote) =>\n quote.ticker === ticker &&\n quote.timeframe === timeframe &&\n quote.isFetching &&\n chartModel.chart_layout().isIdeaId(quote.ideaID)\n ),\n })\n\n const quote = await Quote.get({\n ticker,\n instrument,\n timeframe,\n options: {\n premarket,\n aftermarket,\n patterns,\n cachePredicate: (quote) => quote.ideaID === undefined,\n fetchNewDataOnCachedQuote: true,\n },\n abortController,\n })\n\n if (quote.wasFetchAborted) {\n // Check if the quote is also used in other chars, as the quote may be reused if we already have a quote with the same options\n const isQuoteUsedInOtherCharts = chartModel\n .chart_layout()\n .getAllCharts()\n .filter((chart) => !chartModel.eql(chart))\n .some((chart) => quote.eql(chart.quote()))\n\n // If the quote hasn't been fetched yet and is not anywhere else we can destroy the model\n if (quote.fetchedAt === -1 && !isQuoteUsedInOtherCharts) {\n quote.destroy()\n }\n\n return\n }\n\n removeFromAbortCache(abortControllerKeyRef.current)\n\n updateChartModelWithNewQuote(quote)\n }\n\n setIsLoading(false)\n\n // We don't want to create new function on any chartModel change as it may be the same chart with different object instance\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n chartModel?.id,\n chartModel?.ticker,\n chartModel?.timeframe,\n chartModel?.instrument,\n isIdeaChart,\n updateChartModelWithNewQuote,\n isInteractive,\n ])\n\n React.useEffect(() => {\n fetchQuote()\n }, [fetchQuote])\n\n // There are several ways how to turn off dateRange, e.g. moving the charts\n // This effect listens to dateRange changes on chartmodel and updates the url if there's a change\n // Consider refactoring this part so we only update chart models on route changes not the other way around\n React.useEffect(() => {\n if (chartModel) {\n const decodedQueryString = decodeQueryString(location.search)\n const rangesArray = chartModel\n .chart_layout()\n .getAllCharts()\n .map((chart) => chart.dateRange)\n const ranges = rangesArray.every((i) => !i) ? undefined : rangesArray.join(',')\n\n if (decodedQueryString.r !== ranges) {\n navigate({\n search: `?${encodeQueryString({\n ...decodedQueryString,\n r: ranges,\n })}`,\n })\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [chartModel?.dateRange])\n\n // https://github.com/finvizhq/charts/pull/1253/files#r1052266805\n // React.useEffect(\n // () => () => {\n // if (isInteractive && abortControllerKeyRef.current !== '') {\n // abortRequest(abortControllerKeyRef.current)\n // }\n // },\n // [isInteractive]\n // )\n\n React.useEffect(() => {\n const chart = chartModelRef.current\n const chartLayout = chart?.chart_layout()\n const quote = chart?.quote()\n\n let shouldRecalculateOnCharts = false\n if (chartLayout?.specificChartFunctionality === SpecificChartFunctionality.chartPage && !isIdeaChart) {\n const settings = chartLayoutModel?.settings\n const barWidth = 3\n const barMargin = 1\n if (settings) {\n const hasSameBarWidth = [\n settings.ChartSettings.center.barWidth,\n settings.IndicatorSettings.center.barWidth,\n ].every((value) => value === barWidth)\n const hasSameBarMargin = [\n settings.ChartSettings.center.barMargin,\n settings.IndicatorSettings.center.barMargin,\n ].every((value) => value === barMargin)\n\n shouldRecalculateOnCharts = !hasSameBarWidth || !hasSameBarMargin\n if (shouldRecalculateOnCharts) {\n settings.ChartSettings.center.barWidth = barWidth\n settings.IndicatorSettings.center.barWidth = barWidth\n settings.ChartSettings.center.barMargin = barMargin\n settings.IndicatorSettings.center.barMargin = barMargin\n\n chartLayoutModel.updateAttributes({ settings })\n }\n }\n }\n\n if (\n chart &&\n quote &&\n (chartLayout?.specificChartFunctionality === SpecificChartFunctionality.quotePage || shouldRecalculateOnCharts) &&\n !isIdeaChart\n ) {\n const leftOffset = getLeftOffset({ quote, chartModel: chart })\n chart.updateAttributes({ leftOffset })\n }\n // This effect should run only on timeframe change & idea change\n // The reason we need to recalculate the left offset is that quote timeframe change changes chart and chart bars sizes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [chartModel?.quote()?.timeframe, isIdeaChart])\n\n return { isLoading }\n}\n","import Spine from '@finviz/spine'\nimport * as React from 'react'\n\nexport function useModelRef(model: Model | null) {\n const modelRef = React.useRef(model)\n\n React.useEffect(() => {\n modelRef.current = model\n }, [model])\n\n return modelRef\n}\n","import * as React from 'react'\n\nimport { TIMEFRAME, TIMEFRAME_FAVORITE_DEFAULTS, TIMEFRAME_FAVORITE_DEFAULTS_FREE } from '../../constants/common'\nimport { useSyncLocalStorage } from '../../website-shared'\n\ntype FavoriteTimeframesMap = { [K in TIMEFRAME | 'intraday']?: boolean }\n\nconst LOCAL_STORAGE_KEY = 'favoriteTimeframesMap'\n\nexport function useFavoriteTimeframes(isPremium = true) {\n const { state, setState } = useSyncLocalStorage(\n LOCAL_STORAGE_KEY,\n isPremium ? TIMEFRAME_FAVORITE_DEFAULTS : TIMEFRAME_FAVORITE_DEFAULTS_FREE\n )\n\n const toggleFavoriteTimeframe = React.useCallback(\n (timeframe: TIMEFRAME) => {\n setState((prevState) => ({\n ...prevState,\n [timeframe]: !prevState[timeframe],\n }))\n },\n [setState]\n )\n\n const favoriteTimeframes = React.useMemo(\n () => Object.keys(state).filter((key) => state[key as keyof FavoriteTimeframesMap]),\n [state]\n )\n\n return { favoriteTimeframes, toggleFavoriteTimeframe }\n}\n","import * as React from 'react'\nimport { useLocation } from 'react-router-dom'\n\nimport { ChartsOrQuotePageQueryParams, LAYOUTS, LayoutType, TIMEFRAME } from '../../constants/common'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport { ChartSyncablePart } from '../../models/chart/contstants'\nimport ChartLayout from '../../models/chart_layout'\nimport { decodeQueryString, encodeQueryString } from '../../utils/query_string'\n\nexport function useChartsPathLocation({\n chartLayoutModel: unwatchedChartLayoutModel,\n chartIndex = -1,\n}: {\n chartLayoutModel: ChartLayout | null\n chartIndex?: number\n}) {\n const location = useLocation()\n const chartLayoutModel = useModelState(unwatchedChartLayoutModel, {\n watchProperties: ['syncChartParts'],\n })\n const hasSyncedTimeframe = React.useMemo(\n () => !!chartLayoutModel?.getIsChartPartInSync(ChartSyncablePart.Timeframe),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [chartLayoutModel?.syncChartParts]\n )\n const hasSyncedTicker = React.useMemo(\n () => !!chartLayoutModel?.getIsChartPartInSync(ChartSyncablePart.Ticker),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [chartLayoutModel?.syncChartParts]\n )\n\n const getChartsToPath = React.useCallback(\n ({\n ticker,\n timeframe,\n dateRange,\n layout,\n }: {\n timeframe?: TIMEFRAME\n dateRange?: string | null\n ticker?: string\n layout?: LayoutType\n }) => {\n if (!chartLayoutModel) {\n return {\n pathname: location.pathname,\n search: '',\n }\n }\n\n const decodedSearch = decodeQueryString(location.search)\n const { count } = LAYOUTS[(layout ?? chartLayoutModel.layout) as LayoutType]\n const urlTickers = decodedSearch.t?.split(',') ?? []\n const urlTimeframes = decodedSearch.p?.split(',') ?? []\n const urlDateRanges = decodedSearch.r?.split(',')\n\n const chartsArrayPlaceholder = Array.from({ length: count })\n const tickers = chartsArrayPlaceholder\n .map((_, index) => {\n const currentTicker = urlTickers[index] ?? urlTickers[urlTickers.length - 1]\n return (chartIndex === index || hasSyncedTicker) && ticker ? ticker : currentTicker\n })\n .join(',')\n const timeframes = chartsArrayPlaceholder\n .map((_, index) => {\n const currentTimeframe = urlTimeframes[index] ?? urlTimeframes[urlTimeframes.length - 1]\n return (chartIndex === index || hasSyncedTimeframe) && timeframe ? timeframe : currentTimeframe\n })\n .join(',')\n const ranges = chartsArrayPlaceholder\n .map((_, index) => {\n const currentDaterange = urlDateRanges\n ? urlDateRanges[index] ?? urlDateRanges[urlDateRanges.length - 1]\n : undefined\n return (chartIndex === index || hasSyncedTimeframe) && dateRange !== undefined ? dateRange : currentDaterange\n })\n .join(',')\n\n return {\n pathname: location.pathname,\n search: `?${encodeQueryString({\n t: tickers,\n p: timeframes,\n r: ranges.split(',').some(Boolean) ? ranges : undefined,\n l: layout ?? chartLayoutModel.layout,\n })}`,\n }\n },\n [chartLayoutModel, chartIndex, location, hasSyncedTicker, hasSyncedTimeframe]\n )\n\n return { getChartsToPath }\n}\n","import * as React from 'react'\nimport { To, useLocation, useNavigate } from 'react-router-dom'\n\nimport { useDialogState } from '../../components'\nimport { SpecificChartFunctionality, TIMEFRAME, TimeframeAndIntradayType } from '../../constants/common'\nimport Chart from '../../models/chart'\nimport { useChartsPathLocation } from './use-charts-path-location'\nimport { generateDateRangeGroups, generatePathForTimeframeDateRange, generateTimeframeGroups } from './utils'\n\nexport function useTimeframeDateRangeGroups({\n chartModel,\n isPremium,\n}: {\n chartModel: Chart | null\n isPremium: boolean\n}) {\n const location = useLocation()\n const navigate = useNavigate()\n const customDateRangeDialogState = useDialogState()\n const chartLayoutModel = React.useMemo(() => chartModel?.chart_layout() ?? null, [chartModel])\n const chartIndex = chartLayoutModel?.getAllCharts().findIndex((chart) => chartModel!.eql(chart)) ?? -1\n const { getChartsToPath } = useChartsPathLocation({ chartLayoutModel, chartIndex })\n const specificChartFunctionality = chartLayoutModel?.specificChartFunctionality ?? SpecificChartFunctionality.default\n\n const generateChartLayoutRouterPath = React.useCallback(\n (props: { timeframe: TimeframeAndIntradayType; dateRange?: string | null; ticker?: string }) => {\n if (specificChartFunctionality === SpecificChartFunctionality.chartPage) {\n return getChartsToPath({\n ticker: props.ticker,\n timeframe: props.timeframe as TIMEFRAME,\n dateRange: props.dateRange,\n })\n }\n\n return generatePathForTimeframeDateRange({\n isPremium,\n pathname: location.pathname,\n timeframe: props.timeframe,\n dateRange: props.dateRange,\n specificChartFunctionality,\n })\n },\n [getChartsToPath, isPremium, specificChartFunctionality, location.pathname]\n )\n\n const timeFrameGroups = React.useMemo(\n () =>\n generateTimeframeGroups(isPremium, (timeFrame) =>\n generateChartLayoutRouterPath({ timeframe: timeFrame.value, dateRange: null })\n ),\n [isPremium, generateChartLayoutRouterPath]\n )\n\n const dateRangeGroups = React.useMemo(\n () =>\n generateDateRangeGroups(isPremium, chartModel?.dateRange, (dateRange) =>\n generateChartLayoutRouterPath({ timeframe: dateRange.timeframe!, dateRange: dateRange.value })\n ),\n [generateChartLayoutRouterPath, chartModel?.dateRange, isPremium]\n )\n\n const handleDateRangeSelect = React.useCallback(\n ({ value, timeframe, href }: { value: string; timeframe: TIMEFRAME; href?: To }) => {\n if (!timeframe) {\n if (isPremium) {\n customDateRangeDialogState.show()\n }\n return\n }\n\n if (!href) {\n navigate(generateChartLayoutRouterPath({ timeframe, dateRange: value }))\n }\n },\n [navigate, customDateRangeDialogState, generateChartLayoutRouterPath, isPremium]\n )\n\n return {\n timeFrameGroups,\n dateRangeGroups,\n customDateRangeDialogState,\n handleDateRangeSelect,\n generateChartLayoutRouterPath,\n }\n}\n","import React from 'react'\nimport { useNavigate } from 'react-router-dom'\n\nimport { Heading, TimeframeBar } from '../../components'\nimport { ChartEditorEnum, SpecificChartFunctionality, TIMEFRAME } from '../../constants/common'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport Chart from '../../models/chart'\nimport { ChartTypesSelect } from './chart-type-select'\nimport { CustomDateRange } from './custom-date-range'\nimport { DailyChangeDisplay } from './daily-change-display'\nimport { DrawButton } from './draw-button'\nimport { FullscreenButton } from './fullscreen-button'\nimport Search from './search'\nimport { ChartSettingsButton } from './settings-button'\nimport { useChartControls } from './use-chart-controls'\nimport { useFavoriteTimeframes } from './use-favorite-timeframes'\nimport { useTimeframeDateRangeGroups } from './use-timeframe-date-range-groups'\n\ninterface SettingsComponentProps {\n chartModel: Chart\n chartIndex: number\n}\n\nexport function ChartControls({ chartIndex, chartModel: unwatchedChartModel }: SettingsComponentProps) {\n const navigate = useNavigate()\n const { favoriteTimeframes, toggleFavoriteTimeframe } = useFavoriteTimeframes()\n const chartLayout = unwatchedChartModel.chart_layout()\n const isPremium = window.FinvizSettings.hasUserPremium\n const isEditableChartOrFreeUser = !isPremium || chartLayout.editable\n const chartModel = useModelState(unwatchedChartModel, {\n watchProperties: ['ticker', 'quote'],\n })\n const {\n customDateRangeDialogState,\n handleDateRangeSelect,\n generateChartLayoutRouterPath,\n dateRangeGroups,\n timeFrameGroups,\n } = useTimeframeDateRangeGroups({ isPremium: isPremium, chartModel })\n const { isLoading } = useChartControls({\n chartModel,\n isInteractive: true,\n })\n\n const handleTickerSelect = React.useCallback(\n (ticker: string) => {\n const upperCaseTicker = ticker.toUpperCase()\n\n navigate(\n generateChartLayoutRouterPath({\n ticker: upperCaseTicker,\n timeframe: chartModel.timeframe,\n dateRange: chartModel.dateRange,\n })\n )\n },\n [chartModel, generateChartLayoutRouterPath, navigate]\n )\n\n switch (chartLayout.specificChartFunctionality) {\n case SpecificChartFunctionality.futuresPage:\n case SpecificChartFunctionality.forexPage:\n case SpecificChartFunctionality.cryptoPage:\n return (\n \n
\n \n {chartModel.quote().name ?? chartModel.ticker}\n \n {chartLayout.editors.includes(ChartEditorEnum.tools) && (\n \n )}\n
\n
\n
\n \n
\n
\n Fullscreen\n \n {chartLayout.editors.includes(ChartEditorEnum.settings) && isEditableChartOrFreeUser && (\n
\n Settings\n \n )}\n
\n
\n
\n
\n {chartModel.chart_layout().canChangeTicker && (\n \n )}\n\n {}}\n selectedDateRange={chartModel.dateRange}\n favoriteTimeframes={favoriteTimeframes}\n loadingTimeframe={isLoading ? chartModel.timeframe : undefined}\n onDateRangeSelect={handleDateRangeSelect}\n onFavoriteTimeframeToggle={({ value }: { value: TIMEFRAME }) => {\n toggleFavoriteTimeframe(value)\n }}\n />\n\n \n\n \n
\n )\n default:\n return null\n }\n}\n","const __WEBPACK_NAMESPACE_OBJECT__ = FLibs.Hammerjs;","export const CHART_LAYOUT_CHILD_CHANGE_EVENT = 'chartLayoutChildChange'\n","const __WEBPACK_NAMESPACE_OBJECT__ = FLibs.ReactDOM;","import Spine from '@finviz/spine'\n\nimport { TodoObjectHashAnyType } from '../../types/shared'\n\ntype TodoContextConfig = TodoObjectHashAnyType\n\nclass ContextMenu extends Spine.Model {\n static initClass() {\n this.configure('ContextMenu', 'shown', 'config', 'top', 'left')\n }\n\n declare shown: boolean\n declare config: TodoContextConfig\n declare top: number\n declare left: number\n}\n\nContextMenu.initClass()\n\nconst contextMenu = ContextMenu.create() as ContextMenu\ncontextMenu.save()\n\nexport default contextMenu\n","import React from 'react'\nimport * as ReactDOM from 'react-dom'\n\nimport { ObjectHash } from '../../types/shared'\nimport { ContextMenu as ContextMenuComponent } from '../components'\nimport model from '../models/context_menu'\nimport { ready } from '../utils'\n\nconst selector = '.context-menu'\n\nclass ContextMenu extends React.Component {\n componentDidMount() {\n model.bind('update', this.update)\n }\n\n componentWillUnmount() {\n model.unbind('update', this.update)\n }\n\n update = () => {\n this.forceUpdate()\n }\n\n render() {\n if (model.shown) {\n document.querySelector(selector)?.classList.remove('hidden')\n } else {\n document.querySelector(selector)?.classList.add('hidden')\n return null\n }\n\n return (\n <>\n this.hide()}\n onContextMenu={(e) => e.preventDefault()}\n data-testid=\"charts-context-menu-overlay\"\n >\n \n \n )\n }\n\n hide() {\n model.updateAttribute('shown', false)\n }\n}\nready(() => {\n const el = document.querySelector(selector)\n if (el) {\n ReactDOM.render(, el)\n }\n})\n\nconst contextMenuControl = {\n show: (event: MouseEvent | React.MouseEvent, config: ObjectHash) => {\n model.updateAttributes({\n shown: true,\n config: config,\n top: event.clientY + window.pageYOffset,\n left: event.clientX,\n })\n },\n}\n\nexport default contextMenuControl\n","import ChartLayout from '../../models/chart_layout'\n\nexport enum DrawingTool {\n Arrow = 'arrow',\n Brush = 'brush',\n Callout = 'callout',\n Curve = 'curve',\n ElliottWaves = 'elliott-wave',\n Ellipse = 'ellipse',\n FibonacciRetracements = 'fibonacci-retracements',\n HorizontalLine = 'horizontal-line',\n Measure = 'measure',\n Mouse = 'mouse',\n Pitchfork = 'pitchfork',\n Polygon = 'polygon',\n Position = 'position',\n Rectangle = 'rectangle',\n RotatedRectangle = 'rotated-rectangle',\n ScaledLine = 'scaled-line',\n ScaledText = 'scaled-text',\n Triangle = 'triangle',\n VerticalLine = 'vertical-line',\n Xabcd = 'xabcd',\n}\n\nexport enum DrawingActions {\n AddNote = 'add-note',\n DeleteDrawings = 'delete-drawings',\n DeleteAutoSavedDrawings = 'delete-autosaved-drawings',\n}\n\nexport enum DrawingSetting {\n PreserveDrawings = 'preserve-drawings',\n DrawingModeContinuous = 'drawing-mode-continuous',\n HideDrawings = 'hide-drawings',\n LockDrawings = 'lock-drawings',\n}\n\nexport interface IToolBarProps {\n chartLayoutModel: ChartLayout\n isSidebar?: boolean\n isHorizontal?: boolean\n /**\n * Current selected tool id\n */\n activeTool: DrawingTool\n /**\n * On tool item select callback\n */\n onActiveToolChange: (activeTool: DrawingTool) => void\n /**\n * On drawing actions item select callback\n */\n onDrawingActionClick?: (actionId: DrawingActions) => void\n /**\n * On drawing settings item select callback\n */\n onDrawingSettingClick?: (settingId: DrawingSetting) => void\n /**\n * Current state of drawing settings\n */\n drawingSettings: Record\n isAlternativeTheme?: boolean\n /**\n * Are tools disabled\n */\n areToolsDisabled?: boolean\n}\n\nexport interface IToolbarItemProperties {\n icon: string\n iconActive?: string\n iconAction?: string\n title: string\n titleActive?: string\n titleAction?: string\n}\n\nexport interface IToolbarDrawingTool extends IToolbarItemProperties {\n id: DrawingTool\n}\n\nexport interface IToolbarDrawingAction extends IToolbarItemProperties {\n id: DrawingActions\n}\n\nexport interface IToolbarDrawingSetting extends IToolbarItemProperties {\n id: DrawingSetting\n}\n\nexport interface IToolbarDrawingToolItem {\n defaultItem: IToolbarDrawingTool\n toolGroup?: Array\n toolGroupTitle?: string\n}\n\nexport interface IToolbarDrawingActionItem {\n defaultItem: IToolbarDrawingAction\n isDisabled?: boolean\n disabledTooltip?: string\n}\n\nexport interface IToolbarDrawingsSettingItem {\n defaultItem: IToolbarDrawingSetting\n isDisabled?: boolean\n isInAction?: boolean\n disabledTooltip?: string\n}\n","import { Instrument } from '../../types/shared'\nimport QuoteModel from '../models/quote'\n\nexport function getInstrumentLabel(instrument: Instrument) {\n switch (instrument) {\n case Instrument.Stock:\n return 'Stock'\n case Instrument.Futures:\n return 'Futures'\n case Instrument.Forex:\n return 'Forex'\n case Instrument.Crypto:\n return 'Crypto'\n case Instrument.MarketSentiment:\n return 'Market Sentiment'\n }\n}\n\nexport function getChartAlt(quoteModel: QuoteModel) {\n return `${quoteModel.name || quoteModel.ticker} - ${getInstrumentLabel(quoteModel.instrument)} Price Chart`\n}\n","import React from 'react'\n\nimport { Button, ButtonGroup, Delayed, Icon, Spinner } from '../../components'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport Chart from '../../models/chart'\nimport { QuoteFetchType } from '../../models/quote/constants'\nimport { useIsMounted } from '../../utils/use-is-mounted'\n\ninterface LoadLatestDataButtonProps {\n chartModel: Chart\n}\n\nexport function LoadLatestDataButton({ chartModel: chartModelUnwatched }: LoadLatestDataButtonProps) {\n const getIsMounted = useIsMounted()\n const chartModel = useModelState(chartModelUnwatched, { watchProperties: ['quote'] })\n const quoteModel = useModelState(chartModel.quote(), { watchProperties: ['isFetching'] })\n const [hasNewDataAvailable, setHasNewDataAvailable] = React.useState(false)\n\n React.useEffect(() => {\n if (!chartModel.getRefreshInterval()) {\n // We will do a check here if we have correct new data\n chartModel\n .quote()\n .isPossibleToFetchSequentialData()\n .then((hasNewData) => {\n if (getIsMounted()) {\n setHasNewDataAvailable(hasNewData)\n }\n })\n }\n // We need to run it only on mount\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n const handleLoadLatestData = async () => {\n const promises = chartModel\n .getAllQuotes()\n .map(async (quote) => quote.fetchData({ fetchType: QuoteFetchType.NewerData }))\n chartModel.updateAttributes({ refreshData: true })\n await Promise.all(promises)\n if (getIsMounted()) {\n setHasNewDataAvailable(false)\n window.gtag?.('event', 'load-latest-data', { event_category: 'ideas' })\n }\n }\n\n if (!hasNewDataAvailable) {\n return null\n }\n\n return (\n \n }>\n \n \n ) : (\n 'refresh'\n )\n }\n disabled={quoteModel?.isFetching}\n title=\"Load latest data\"\n onClick={handleLoadLatestData}\n data-testid=\"load-latest-data-button\"\n >\n Load latest data\n \n \n )\n}\n","// Copy if this file is in Website repo in Website/js/main/hooks/ folder\nimport * as React from 'react'\n\nexport function useIsMounted() {\n const isMountedRef = React.useRef(false)\n const getIsMounted = React.useCallback(() => isMountedRef.current, [])\n\n React.useEffect(() => {\n isMountedRef.current = true\n return () => {\n isMountedRef.current = false\n }\n }, [])\n\n return getIsMounted\n}\n","import classnames from 'classnames'\nimport debounce from 'lodash.debounce'\nimport React from 'react'\n\nimport { Button, ButtonGroup, Icon } from '../../components'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport Chart from '../../models/chart'\nimport Utils from '../../utils'\nimport { getLeftOffset } from '../renderUtils'\nimport { LoadLatestDataButton } from './load-latest-data-button'\n\nexport const ZOOM_CONTROLS_ACTIVE_CLASS = 'is-active'\nexport const ZOOM_CONTROLS_IS_IN_AREA_CLASS = 'is-in-area'\n\nconst buttonCommonProps = {\n size: 'none',\n className: 'w-7 h-6',\n contentClass: 'flex justify-center',\n}\n\nconst isMobile = Utils.isMobile()\n\ninterface ZoomControlsProps {\n zoomControlsRef: React.RefObject\n isVisible: boolean\n chartModel: Chart\n onZoomIn: () => void\n onZoomOut: () => void\n onZoomReset: () => void\n}\n\nconst getDefaultLeftOffset = (chartModel: Chart) =>\n getLeftOffset({\n quote: chartModel.quote(),\n chartModel,\n config: {},\n })\n\nexport function ZoomControls({\n zoomControlsRef,\n chartModel,\n isVisible,\n onZoomIn,\n onZoomOut,\n onZoomReset,\n}: ZoomControlsProps) {\n const chartLayoutModel = useModelState(chartModel.chart_layout(), { watchProperties: ['idea'] })\n const [isGoToRecentVisible, setIsGoToRecentVisible] = React.useState(false)\n const { defaultZoomFactor } = chartLayoutModel\n const [isZoomResetVisible, setIsZoomResetVisible] = React.useState(chartModel.zoomFactor !== defaultZoomFactor)\n const handleGoToMostRecent = React.useCallback(() => {\n chartModel.updateAttributes({ leftOffset: getDefaultLeftOffset(chartModel), dateRange: null })\n }, [chartModel])\n\n React.useEffect(() => {\n const handleChartModelChangeDebounced = debounce(\n () => {\n setIsZoomResetVisible(chartModel.zoomFactor !== defaultZoomFactor)\n setIsGoToRecentVisible(chartModel.leftOffset !== getDefaultLeftOffset(chartModel))\n },\n 100,\n { maxWait: 333 }\n )\n chartModel.bind('change', handleChartModelChangeDebounced)\n return () => {\n handleChartModelChangeDebounced.cancel()\n chartModel.unbind('change', handleChartModelChangeDebounced)\n }\n }, [defaultZoomFactor, chartModel])\n\n return (\n \n {!isMobile && (\n \n {isZoomResetVisible && (\n
\n \n \n \n \n \n
\n )}\n
\n \n \n \n\n \n \n
\n {!!chartLayoutModel.idea?.id && }\n\n {isGoToRecentVisible && (\n \n \n \n \n \n )}\n
\n \n )\n}\n","import Spine from '@finviz/spine'\nimport classnames from 'classnames'\nimport Hammer from 'hammerjs'\nimport debounce from 'lodash.debounce'\nimport React from 'react'\n\nimport {\n CustomSpineEvents,\n DrawingSpineOptionsEvent,\n EmptyObject,\n Instrument,\n ObjectHash,\n PaneArea,\n} from '../../../types/shared'\nimport CanvasElement from '../../canvas/element'\nimport { Button, Notification, Paragraph, withNotificationContext } from '../../components'\nimport { IndicatorType, ScaleType, SetVisibilityTo, SpecificChartFunctionality } from '../../constants/common'\nimport IndicatorElement from '../../indicators/indicator'\nimport { getContextWithCache } from '../../lib/shims'\nimport { withElementStyleDialogState } from '../../modals/element_style'\nimport ChartModel from '../../models/chart'\nimport { ISettings } from '../../models/chart_settings/interfaces'\nimport ElementModel from '../../models/element'\nimport MouseModel from '../../models/mouse'\nimport PaneModel from '../../models/pane'\nimport Quote from '../../models/quote'\nimport { handleRemoveIndicatorPane } from '../../models/utils'\nimport Utils, { isRedesignEnabled } from '../../utils'\nimport { getBarWidthWithMargin, unmountCanvas } from '../../utils/chart'\nimport { setElementCursor } from '../../utils/cursor'\nimport { getValueInRange, isPrimaryClick } from '../../utils/helpers'\nimport { getInitialStoreDrawings } from '../autosave/utils'\nimport { CHART_LAYOUT_CHILD_CHANGE_EVENT } from '../chart_layout/constants'\nimport ContextMenu from '../context_menu'\nimport { clip, getMinMaxLeftOffset, getSettings, recountScale } from '../renderUtils'\nimport { DrawingTool } from '../toolbar/interfaces'\nimport { getChartAlt } from '../utils'\nimport { withPaneModel } from './with-pane-model'\nimport { ZOOM_CONTROLS_ACTIVE_CLASS, ZOOM_CONTROLS_IS_IN_AREA_CLASS, ZoomControls } from './zoom_controls'\n\n// Indicates how many time lower/higher can new scale be compared to original one\nconst ALLOWED_MIN_MAX_ZOOM = 10000\n\ninterface PaneProps {\n model: PaneModel\n chartModel: ChartModel\n activeTool: DrawingTool\n activeChartInteraction: string | null\n chartIndex: number\n paneIndex: number\n touchEventsDisabled: boolean\n onPaneClick: (model: PaneModel) => void\n onZoomerReset: () => void\n onZoomerMouseDown: React.MouseEventHandler\n onZoomerTouchStart: React.TouchEventHandler\n onAddToZoomFactor: (data: { diff: number; shouldCalculateRightAlign: boolean }) => void\n onResizerMouseDown: (e: React.MouseEvent, model: PaneModel) => void\n onPaneDestroy: (paneId: string) => void\n setActiveChartInteraction: (value: string | null) => void\n openElementStyleDialog?: (element: CanvasElement | IndicatorElement) => void\n notificationContext: { show: (element: JSX.Element, options: { inline?: boolean }) => void; hide: () => void }\n}\n\ninterface PaneState {\n hasSeenCrossNotification: boolean\n}\n\nclass Pane extends React.Component {\n rafId?: number | null = null\n crossRafId?: number | null = null\n quoteModel: Quote\n paneRef = React.createRef()\n scalerRef = React.createRef()\n zoomerRef = React.createRef()\n zoomControlsRef = React.createRef()\n canvasWrapperRef = React.createRef()\n canvasRef = React.createRef()\n crossCanvasRef = React.createRef()\n chartLayoutModel = this.props.chartModel.chart_layout()\n paneHammer!: HammerManager\n scalerHammer!: HammerManager\n zoomerHammer!: HammerManager\n canvasWrapperHammer!: HammerManager\n mouseDown = false\n lastClientX?: number\n lastClientY?: number\n currentViewRange: { min: number; max: number } | null = null\n lastX!: number\n lastY!: number\n lastActiveTool: DrawingTool\n scalerLastY: number | null = null\n isElementHovered = false\n hoveredElement: CanvasElement | null = null\n isMobile: boolean\n isDisableTouchCrossAvailable = true\n\n canvas: HTMLCanvasElement | null = null\n canvasCtx: CanvasRenderingContext2D | null = null\n crossCanvas: HTMLCanvasElement | null = null\n crossCanvasCtx: CanvasRenderingContext2D | null = null\n isIndicatorPane = false\n\n state: PaneState = {\n hasSeenCrossNotification: !!window.localStorage.getItem('hasSeenCrossNotification'),\n }\n\n // expects chartModel, model, onResizerMouseDown, onPaneDestroy\n constructor(props: PaneProps) {\n super(props)\n\n this.quoteModel = this.props.chartModel.quote()\n props.model.updateAttribute('instance', this)\n props.model.bind('update', this.onModelUpdate)\n props.model\n .elements()\n .bind('create', this.onElementCreate)\n .bind('destroy', this.onElementDestroy)\n .bind('replace', this.onElementReplace)\n .bind('select', this.onElementSelect)\n .bind('makeClone', this.onElementClone)\n .bind('change', this.immediateRecountScaleOnChartIndicatorChange)\n .bind('change', debounce(this.recountScale, 50))\n\n this.props.chartModel.bind('update', this.onChartUpdate)\n this.props.chartModel.bind(`change ${CustomSpineEvents.IndicatorsChange}`, this.recountScale)\n this.quoteModel.bind('change', this.recountScale)\n this.isMobile = !!Utils.isMobile()\n this.lastActiveTool = props.activeTool\n if (!MouseModel.pane()) {\n MouseModel.updateAttribute('pane', props.model)\n }\n this.isIndicatorPane = props.model.getIsIndicatorPane()\n this.recountScale()\n }\n\n componentDidMount() {\n const { model } = this.props\n this.chartLayoutModel.bind('theme', this.renderAll)\n this.chartLayoutModel.bind('theme', this.renderCross)\n\n const initialStoreDrawings = getInitialStoreDrawings() ?? []\n model\n .elements()\n .all()\n .forEach((element) => {\n this.onElementCreate(element)\n if (element.isDrawing()) {\n const hasDrawingInInitialCache = initialStoreDrawings.some(({ elementId }) => element.elementId === elementId)\n if (hasDrawingInInitialCache) {\n element.instance?.updateScales()\n }\n element.instance.cachePointPositionTimestamp()\n }\n })\n\n this.canvas = this.canvasRef.current\n this.canvasCtx = getContextWithCache(this.canvasRef.current)\n this.crossCanvas = this.crossCanvasRef.current\n this.crossCanvasCtx = getContextWithCache(this.crossCanvasRef.current)\n\n this.paneHammer = new Hammer.Manager(this.paneRef.current!, { touchAction: 'none' })\n this.paneHammer.add(new Hammer.Press({ threshold: 5, time: 500 })) // chrome simulator \"long touch\" -> \"oncontextmenu\" is 680ms +- 2ms\n this.paneHammer.on('press', this.onPress)\n this.canvasWrapperHammer = new Hammer(this.canvasWrapperRef.current!, { touchAction: 'none' })\n this.canvasWrapperHammer.on('tap', this.onClick)\n this.canvasWrapperRef.current?.addEventListener('touchmove', this.onTouchMove, { passive: false })\n\n if (this.chartLayoutModel.scrollable || !this.isMobile) {\n if (this.scalerRef.current) {\n this.scalerHammer = new Hammer(this.scalerRef.current, { touchAction: 'none' })\n this.scalerHammer.on('doubletap', this.onScalerReset)\n }\n if (this.zoomerRef.current) {\n this.zoomerHammer = new Hammer(this.zoomerRef.current, { touchAction: 'none' })\n this.zoomerHammer.on('doubletap', this.props.onZoomerReset)\n }\n this.canvasWrapperHammer.on('doubletap', this.onDoubleClick)\n }\n\n this.onChartUpdate({ width: this.props.chartModel.width })\n this.onModelUpdate({ height: model.height })\n this.forceUpdate()\n this.chartLayoutModel.trigger(CHART_LAYOUT_CHILD_CHANGE_EVENT)\n }\n\n componentWillUnmount() {\n this.canvasWrapperRef.current?.removeEventListener('touchmove', this.onTouchMove)\n unmountCanvas(this.canvas)\n unmountCanvas(this.crossCanvas)\n this.props.chartModel.unbind('update', this.onChartUpdate)\n this.props.chartModel.unbind('change', this.recountScale)\n this.quoteModel.unbind('change', this.recountScale)\n }\n\n render() {\n const { activeTool, touchEventsDisabled, onPaneClick, paneIndex, chartIndex, model } = this.props\n if (touchEventsDisabled) {\n this.paneHammer?.set({ touchAction: 'auto' })\n this.scalerHammer?.set({ touchAction: 'auto' })\n this.zoomerHammer?.set({ touchAction: 'auto' })\n this.canvasWrapperHammer?.set({ touchAction: 'auto' })\n } else {\n const touchAction = this.getIsHammerAllowScrollActive() ? 'auto' : 'none'\n this.scalerHammer?.set({ touchAction: 'none' })\n this.zoomerHammer?.set({ touchAction: 'none' })\n this.paneHammer?.set({ touchAction })\n this.canvasWrapperHammer?.set({ touchAction })\n }\n\n return (\n onPaneClick(model)}\n onTouchStart={() => onPaneClick(model)}\n onContextMenu={this.onContextMenu}\n data-testid={`chart-${chartIndex}-pane-${paneIndex}`}\n >\n {paneIndex !== 0 && (\n this.props.onResizerMouseDown(e, model)}\n data-testid={`chart-${chartIndex}-pane-${paneIndex}-resizer`}\n />\n )}\n {this.chartLayoutModel.initialScrollable && (\n \n )}\n\n {this.chartLayoutModel.initialScrollable && model.getIsChartPane() && (\n <>\n \n {\n this.props.onAddToZoomFactor({ diff: 0.1, shouldCalculateRightAlign: true })\n }}\n onZoomOut={() => {\n this.props.onAddToZoomFactor({ diff: -0.1, shouldCalculateRightAlign: true })\n }}\n onZoomReset={this.props.onZoomerReset}\n />\n \n )}\n \n \n {this.chartLayoutModel.cross && }\n \n \n )\n }\n\n getIsHammerAllowScrollActive = () =>\n this.chartLayoutModel.specificChartFunctionality !== SpecificChartFunctionality.chartPage &&\n !this.chartLayoutModel.isTouchCrossActive &&\n !this.chartLayoutModel.scrollable\n\n onElementCreate = (el: ElementModel) => {\n el.instance.bind('change', this.renderAll)\n this.renderAll()\n }\n\n onElementReplace = (el: ElementModel, oldElementInstance: CanvasElement) => {\n oldElementInstance.unbind('change', this.renderAll)\n el.instance.bind('change', this.renderAll)\n if (oldElementInstance === this.props.model.selection && !this.chartLayoutModel.isDrawingModeContinuousActive) {\n this.setSelection(el.instance)\n } else {\n this.setSelection(null)\n }\n this.renderAll()\n }\n\n onElementDestroy = (el: ElementModel) => {\n const { type } = el.instance\n el.instance.unbind('change', this.renderAll)\n if (el.instance === this.props.model.selection) {\n this.setSelection(null)\n }\n if (type.startsWith('charts/') || type.startsWith('indicators/')) {\n this.props.onPaneDestroy(el['pane_id'])\n }\n this.renderAll()\n }\n\n onElementSelect = (el: ElementModel) => {\n this.setSelectedElement(el.instance)\n }\n\n onElementClone = (_: unknown, clonedElementInstance: CanvasElement) => {\n this.setSelectedElement(clonedElementInstance)\n }\n\n onModelUpdate = ({ height }: { height: number }) => {\n this.setCanvasSize({\n width: this.props.chartModel.width,\n height,\n })\n }\n\n onChartUpdate = ({ width }: { width: number }) => {\n const { model, chartModel } = this.props\n this.setCanvasSize({\n width,\n height: model.height,\n })\n const quote = chartModel.quote()\n if (!this.quoteModel.eql(quote)) {\n this.quoteModel.unbind('change', this.recountScale)\n if (quote) {\n this.quoteModel = quote\n this.quoteModel.bind('change', this.recountScale)\n }\n }\n }\n\n onZoomerMouseMove: React.MouseEventHandler = (e) => {\n if (!this.chartLayoutModel.scrollable || (this.isMobile && !this.chartLayoutModel.isTouchCrossActive)) return\n const area = this.getArea(e)\n MouseModel.updateAttributes({\n position: { x: area.x, y: null },\n pane: this.props.model,\n })\n }\n\n onMouseMoveOnScrolling = (event: TouchEvent | MouseEvent) => {\n if (this.props.activeChartInteraction) {\n return\n }\n\n let { clientX, clientY } = event as MouseEvent\n const { model } = this.props\n\n const isTouch = typeof TouchEvent !== 'undefined' && event instanceof TouchEvent\n if (isTouch && event.targetTouches?.length > 0) {\n clientX = event.targetTouches[0].clientX\n clientY = event.targetTouches[0].clientY\n }\n if (!model.selection) {\n if (this.lastClientX != null) {\n const dif = this.lastClientX - clientX\n this.addToLeftOffset(-dif)\n }\n if (model.scaleRange && this.lastClientY != null) {\n let { min, max } = model.scaleRange\n let difY\n switch (this.props.chartModel.scale) {\n case ScaleType.Logarithmic: {\n difY = this.lastClientY - clientY\n min = model.scale.y.invert(model.scale.y(min) + difY)\n max = model.scale.y.invert(model.scale.y(max) + difY)\n break\n }\n default: {\n difY = (this.lastClientY - clientY) * (model.scale.y.invert(0) - model.scale.y.invert(1))\n min -= difY\n max -= difY\n break\n }\n }\n\n model.updateAttribute('scaleRange', { min, max })\n this.recountScale()\n this.currentViewRange = this.props.model.getChartOrIndicatorElement()?.instance?.getMinMax?.() ?? null\n }\n }\n this.lastClientX = clientX\n this.lastClientY = clientY\n }\n\n onScalerTouchStart: React.TouchEventHandler = (e) => {\n if (!this.chartLayoutModel.scrollable || this.props.touchEventsDisabled) return\n if (this.chartLayoutModel.scrollable && e.targetTouches.length === 1) {\n this.onScalerMouseDown(e.targetTouches[0])\n }\n }\n\n onScalerTouchMove = (e: TouchEvent) => {\n if (this.chartLayoutModel.scrollable && e.targetTouches.length === 1) {\n this.onScalerMouseMove(e.targetTouches[0])\n }\n }\n\n onScalerTouchEnd = () => {\n if (this.chartLayoutModel.scrollable) {\n this.onScalerMouseUp()\n }\n }\n\n onScalerMouseEnter = () => {\n MouseModel.updateAttributes({\n position: null,\n pane: null,\n })\n }\n\n onScalerMouseDown = (event: React.MouseEvent | React.Touch) => {\n const { activeChartInteraction, setActiveChartInteraction, model } = this.props\n if ((event instanceof MouseEvent && event.button) || activeChartInteraction || !this.chartLayoutModel.scrollable) {\n return\n }\n setActiveChartInteraction('scaler')\n\n this.scalerLastY = event.clientY\n // here we need current domain scale or former \"nice\" value\n const [currentDomainMax, currentDomainMin] = model.scale.y.domain()\n this.currentViewRange = { min: currentDomainMin, max: currentDomainMax }\n document.addEventListener<'mousemove'>('mousemove', this.onScalerMouseMove)\n document.addEventListener('mouseup', this.onScalerMouseUp)\n document.addEventListener('touchmove', this.onScalerTouchMove)\n document.addEventListener('touchend', this.onScalerTouchEnd)\n }\n\n onScalerMouseMove = (event: MouseEvent | Touch) => {\n const { model, chartModel } = this.props\n if (model.scaleRange === null && this.currentViewRange === null) {\n return\n }\n let { min, max } = model.scaleRange || this.currentViewRange!\n let difY\n switch (this.props.chartModel.scale) {\n case ScaleType.Logarithmic: {\n difY = this.scalerLastY! - event.clientY\n min = model.scale.y.invert(model.scale.y(min) - difY)\n max = model.scale.y.invert(model.scale.y(max) + difY)\n break\n }\n default: {\n difY = -(this.scalerLastY! - event.clientY) * (model.scale.y.invert(0) - model.scale.y.invert(1))\n min -= difY\n max += difY\n break\n }\n }\n this.scalerLastY = event.clientY\n\n const originalMinMax = model.getChartOrIndicatorElement()?.instance?.getMinMax?.()\n if (originalMinMax) {\n const currentDiff = Math.abs(max - min)\n const originalDiff = Math.abs(originalMinMax.max - originalMinMax.min)\n\n if (currentDiff > originalDiff * ALLOWED_MIN_MAX_ZOOM || currentDiff < originalDiff / ALLOWED_MIN_MAX_ZOOM) {\n return\n }\n }\n\n model.updateAttribute('scaleRange', { min, max })\n chartModel.updateAttribute('dateRange', null)\n this.recountScale()\n }\n\n onScalerMouseUp = () => {\n this.scalerLastY = null\n\n document.removeEventListener('mousemove', this.onScalerMouseMove)\n document.removeEventListener('mouseup', this.onScalerMouseUp)\n document.removeEventListener('touchmove', this.onScalerTouchMove)\n document.removeEventListener('touchend', this.onScalerTouchEnd)\n this.props.setActiveChartInteraction(null)\n }\n\n onScalerReset = () => {\n const { model, chartModel } = this.props\n if (!this.chartLayoutModel.scrollable) return\n chartModel.updateAttribute('dateRange', null)\n model.updateAttribute('scaleRange', null)\n this.recountScale()\n }\n\n addToLeftOffset = (n: number) => {\n const quote = this.props.chartModel.quote()\n const barWidth = getBarWidthWithMargin({\n chartLayout: this.chartLayoutModel,\n zoomFactor: this.props.chartModel.zoomFactor,\n })\n const leftOffset = getMinMaxLeftOffset({\n newLeftOffset: this.props.chartModel.leftOffset + n,\n chartModel: this.props.chartModel,\n barWidth,\n barIndex: quote.barIndex[quote.open.length - 1],\n })\n\n if (leftOffset > barWidth) {\n quote.fetchOlderData()\n }\n this.props.chartModel.updateAttributes({\n leftOffset,\n dateRange: null,\n })\n }\n\n onDoubleClick = (event: HammerInput) => {\n event.preventDefault()\n const area = this.getArea(event)\n const element = this.props.model.selection || this.getElement(area)\n if (element && element.type !== IndicatorType.Cot) {\n setTimeout(() => {\n this.props.openElementStyleDialog!(element)\n }, 0)\n element.trigger('dblclick', event)\n }\n }\n\n onPress = (e: ObjectHash) => {\n if (e.pointerType !== 'touch') return\n\n e.clientX = e.center.x\n e.clientY = e.center.y\n\n const el = this.props.model.selection || this.getElement(this.getArea(e))\n if (!this.chartLayoutModel.isTouchCrossActive) {\n if (!el) {\n this.onCanvasPress(e as React.MouseEvent)\n } else {\n this.onContextMenu(e as React.MouseEvent, el)\n }\n }\n }\n\n onContextMenu = (e: React.MouseEvent, element?: IndicatorElement | CanvasElement) => {\n e.preventDefault()\n const area = this.getArea(e)\n const elementInArea = this.getElement(area)\n const el = element ?? elementInArea\n if (!el || el.thumbsAreInArea(area)) {\n return\n }\n const elementModel = ElementModel.findByAttribute('instance', el)\n if (!elementModel) return\n this.setSelectedElement(el)\n const hasProperties =\n ['indicator', 'canvas'].some((type) => el.type.startsWith(type)) && el.type !== IndicatorType.Cot\n const isElementDrawing = elementModel.isDrawing()\n\n return ContextMenu.show(\n e,\n [\n hasProperties && {\n id: 'edit',\n label: 'Edit style',\n onClick: () => this.props.openElementStyleDialog!(el),\n },\n\n !(elementModel.isChart() || elementModel?.isIndicator()) && {\n id: 'clone',\n label: 'Clone',\n onClick: () => elementModel.makeClone(),\n },\n\n ...(isElementDrawing\n ? [\n { type: 'divider', label: 'Visibility' },\n\n {\n id: 'visibility-current-and-above',\n label: 'Current interval and above',\n onClick: () => elementModel.instance.setVisibilityTo(SetVisibilityTo.currentAndAbove),\n },\n\n {\n id: 'visibility-current-and-below',\n label: 'Current interval and below',\n onClick: () => elementModel.instance.setVisibilityTo(SetVisibilityTo.currentAndBelow),\n },\n\n {\n id: 'visibility-current-only',\n label: 'Current interval only',\n onClick: () => elementModel.instance.setVisibilityTo(SetVisibilityTo.currentOnly),\n },\n\n {\n id: 'visibility-all-intervals',\n label: 'All intervals',\n onClick: () => elementModel.instance.setVisibilityTo(SetVisibilityTo.all),\n },\n ]\n : []),\n\n (isElementDrawing || hasProperties) && { type: 'divider' },\n\n {\n id: 'bring-to-front',\n label: 'Bring to Front',\n onClick: () => elementModel.bringToFront(),\n },\n {\n id: 'send-to-back',\n label: 'Send to Back',\n onClick: () => elementModel.sendToBack(),\n },\n {\n id: 'bring-forward',\n label: 'Bring Forward',\n onClick: () => elementModel.bringForward(),\n },\n {\n id: 'send-backward',\n label: 'Send Backward',\n onClick: () => elementModel.sendBackward(),\n },\n\n { type: 'divider' },\n\n {\n id: 'remove',\n label: 'Remove',\n onClick: () => {\n if (elementModel.isIndicator()) {\n handleRemoveIndicatorPane({ paneIndex: this.props.paneIndex, chartLayoutModel: this.chartLayoutModel })\n } else {\n elementModel.destroyCascade({ eventType: DrawingSpineOptionsEvent.Remove })\n this.props.model.normalizeZIndexes()\n }\n },\n },\n ]\n .filter(Boolean)\n .map((item) => ({ ...item, gtag: { element_type: el.type } }))\n )\n }\n\n immediateRecountScaleOnChartIndicatorChange = (element?: ElementModel) => {\n if (element?.isChart() || element?.isIndicator()) {\n this.recountScale()\n }\n }\n\n recountScale = (_?: unknown, updateType?: Spine.Event) => {\n const { model } = this.props\n const chartModel = model.chart()\n if (updateType === 'destroy' || !chartModel || !chartModel.quote()) {\n return\n }\n\n recountScale({ chartModel, paneModel: model })\n\n if (this.canvasCtx) {\n this.renderAll()\n }\n }\n\n onBlur = () => {\n if (this.props.model.selection?.getIsCreator?.()) {\n this.setSelection(null)\n } else {\n this.setSelectedElement(null)\n }\n if (this.hoveredElement) {\n this.hoveredElement.setIsHovered(false)\n this.hoveredElement = null\n }\n this.props.model.getAllElements().forEach((element) => {\n if (element.instance.getIsCreator?.() && !element.instance.getIsCreatorDialogOpen?.()) {\n element.destroyCascade()\n }\n })\n }\n\n renderAll = (type?: string) => {\n if (process.env.IS_E2E_TESTING) window.isRenderInProgress = true\n if (type === 'cross' && this.chartLayoutModel.cross) {\n if (this.crossRafId === null) {\n this.crossRafId = window.requestAnimationFrame(() => {\n this.renderCross()\n if (process.env.IS_E2E_TESTING) window.isRenderInProgress = Date.now()\n })\n }\n } else if (this.rafId == null && this.canvasCtx) {\n this.rafId = window.requestAnimationFrame(() => {\n this._renderAll()\n if (process.env.IS_E2E_TESTING) window.isRenderInProgress = Date.now()\n })\n }\n }\n\n _renderAll = () => {\n const { model } = this.props\n // _renderAll may be called after Chart was deleted because of requestAnimationFrame\n if (model.chart() === null || this.canvasRef.current === null || !this.canvasCtx) {\n return\n }\n if (this.getIsUpdatedDesign()) {\n if (this.crossRafId === null) {\n this.crossRafId = window.requestAnimationFrame(this.renderCross)\n }\n }\n this.rafId = undefined\n if (model.chart().instrument === Instrument.MarketSentiment) {\n this.canvasCtx.clearRect(0, 0, this.props.chartModel.width, model.height)\n } else {\n this.canvasCtx.set(\n 'fillStyle',\n this.props.chartModel.getChartLayoutSettings().ChartSettings.general.Colors.canvasFill\n )\n this.canvasCtx.fillRect(0, 0, this.props.chartModel.width, model.height)\n }\n const elements = model.getAllElements()\n for (const { instance: elementInstance } of elements) {\n if (elementInstance.renderGrid != null) {\n this.canvasCtx.save()\n elementInstance.renderGrid(this.canvasCtx)\n this.canvasCtx.restore()\n }\n }\n\n for (const { instance: elementInstance } of elements) {\n if (\n elementInstance.getIsDrawing() &&\n (this.chartLayoutModel.isHideDrawingsActive || !elementInstance.getIsVisible())\n ) {\n continue\n }\n this.canvasCtx.save()\n if (elementInstance.renderContent != null) {\n this.canvasCtx.save()\n const Settings = getSettings(model) as ISettings['ChartSettings']\n clip({\n canvasCtx: this.canvasCtx,\n width: this.props.chartModel.width,\n height: model.height,\n Settings,\n })\n this.canvasCtx.translate(model.chart().leftOffset + Settings.left.width, Settings.top.height)\n elementInstance.renderContent(this.canvasCtx)\n this.canvasCtx.restore()\n if (typeof elementInstance.renderLabels === 'function') {\n elementInstance.renderLabels(this.canvasCtx)\n }\n } else {\n elementInstance.render(this.canvasCtx)\n }\n this.canvasCtx.restore()\n }\n }\n\n getIsUpdatedDesign() {\n const { specificChartFunctionality } = this.chartLayoutModel\n const isCharts = specificChartFunctionality === SpecificChartFunctionality.chartPage\n const isRedesignedFuturesForexCrypto =\n isRedesignEnabled() &&\n [\n SpecificChartFunctionality.futuresPage,\n SpecificChartFunctionality.forexPage,\n SpecificChartFunctionality.cryptoPage,\n ].includes(specificChartFunctionality)\n\n return isCharts || isRedesignedFuturesForexCrypto\n }\n\n renderCross = () => {\n const { model } = this.props\n const isMouseInPane = MouseModel.getShouldRenderCrossInPane(model)\n this.crossRafId = null\n if (!this.crossCanvasCtx) {\n return\n }\n this.crossCanvasCtx.clearRect(0, 0, this.props.chartModel.width, model.height)\n const isCrossDisabled =\n PaneModel.select((p) => !!p.selection && !p.selection.type.startsWith('indicators/')).length !== 0 ||\n this.props.chartModel.getIsDisabled() ||\n !isMouseInPane\n\n for (const { instance: elementInstance } of model.getAllElements()) {\n if (\n (!isCrossDisabled && elementInstance.renderCross != null) ||\n (isCrossDisabled && elementInstance.renderCrossText != null)\n ) {\n this.crossCanvasCtx.save()\n if (isCrossDisabled) {\n elementInstance.renderCrossText!(this.crossCanvasCtx, Number.NaN)\n } else {\n elementInstance.renderCross!(this.crossCanvasCtx)\n }\n this.crossCanvasCtx.restore()\n }\n }\n }\n\n getArea = (e: ObjectHash, additionalData?: T): PaneArea => {\n const { model } = this.props\n const clientX = e.clientX || additionalData?.clientX\n const clientY = e.clientY || additionalData?.clientY\n const Settings = getSettings(model)\n const areaRectangle = this.canvas!.getBoundingClientRect()\n const areaRectangleCursorX = clientX - areaRectangle.left\n const areaRectangleCursorY = clientY - areaRectangle.top\n const x = areaRectangleCursorX - model.chart().leftOffset - Settings.left.width\n const y = areaRectangleCursorY - Settings.top.height\n const scale = model.scale\n const chartLeftX = areaRectangle.left + Settings.left.width\n const chartRightX = areaRectangle.right - Settings.right.width\n return {\n ...(additionalData as T),\n // TODO: rewrite if canvas uses padding/border\n x: scale.x.invert(x),\n y: scale.y.invert(y),\n scaled: {\n x,\n y,\n },\n width: 1,\n height: 1,\n cursorX: areaRectangleCursorX,\n cursorY: areaRectangleCursorY,\n isCursorInChartWidthBoundaries: clientX > chartLeftX && clientX < chartRightX,\n }\n }\n\n setCanvasSize = ({ width, height }: { width: number; height: number }) => {\n const ratio = Utils.getScaleRatio()\n const canvasElement = this.canvasRef.current\n\n /**\n * It seems that value passed into element attr (e.g. height) is ceiled down,\n * so if you provide canvas element with height 100.5 we'll get integer 100 from canvasElement.height\n * If the difference in values between \"new height\" and canvasElement.height is less than 1, I treat it as the same value\n */\n if (\n this.canvasCtx &&\n canvasElement &&\n (Math.abs(height * ratio - canvasElement.height) >= 1 || Math.abs(width * ratio - canvasElement.width) >= 1)\n ) {\n Utils.setSizeOnCanvasElement({ canvasElement, width, height })\n this.canvasCtx.scale(ratio, ratio)\n if (this.chartLayoutModel.cross && this.crossCanvasCtx) {\n Utils.setSizeOnCanvasElement({\n canvasElement: this.crossCanvasRef.current,\n width,\n height,\n })\n this.crossCanvasCtx.scale(ratio, ratio)\n }\n setTimeout(() => {\n this.recountScale()\n })\n }\n }\n\n onClick = (event: HammerInput) => {\n const area = this.getArea(event, {\n clientX: event.center.x,\n clientY: event.center.y,\n })\n const element = this.props.model.selection || this.getElement(area)\n element?.trigger('click', area)\n\n if (!this.isDisableTouchCrossAvailable) {\n this.isDisableTouchCrossAvailable = true\n return\n }\n\n if (this.chartLayoutModel.isTouchCrossActive) {\n MouseModel.updateAttributes({\n position: null,\n pane: null,\n })\n this.chartLayoutModel.updateAttributes({\n scrollable: this.chartLayoutModel.initialScrollable,\n isTouchCrossActive: false,\n })\n } else if (\n this.isMobile &&\n !this.state.hasSeenCrossNotification &&\n this.lastActiveTool === DrawingTool.Mouse &&\n this.chartLayoutModel.specificChartFunctionality !== SpecificChartFunctionality.smallIndex\n ) {\n const isChartsPage = this.chartLayoutModel.specificChartFunctionality === SpecificChartFunctionality.chartPage\n\n this.setState({ hasSeenCrossNotification: true })\n this.props.notificationContext.show(\n {\n this.props.notificationContext.hide()\n window.localStorage.setItem('hasSeenCrossNotification', 'true')\n }}\n >\n Got it\n \n }\n >\n Long press the chart to show the crosshair.\n ,\n { inline: !isChartsPage }\n )\n }\n\n this.lastActiveTool = this.props.activeTool\n }\n\n onPaneMouseLeave = () => {\n // timout in onPaneMouseMove may cause racecondition where active class is added right after it's been removed\n setTimeout(() => {\n this.zoomControlsRef.current?.classList.remove(ZOOM_CONTROLS_ACTIVE_CLASS, ZOOM_CONTROLS_IS_IN_AREA_CLASS)\n })\n if (this.chartLayoutModel.specificChartFunctionality === SpecificChartFunctionality.chartPage) {\n this.renderCross()\n }\n }\n\n onPaneMouseMove = (e: React.MouseEvent | React.Touch, isMouseDownIgnored = false) => {\n const { model, chartModel } = this.props\n const zoomControls = this.zoomControlsRef.current\n const paneHeight = model.height\n if (zoomControls) {\n const area = this.getArea<{ mouseDown: boolean; clientX: number; clientY: number }>(e, {\n mouseDown: !isMouseDownIgnored && this.mouseDown,\n clientX: e.clientX,\n clientY: e.clientY,\n })\n\n // timeout is needed here as adding a classname on parent element of a button where we are listening on a click is not working properly if done synchrnousely\n setTimeout(() => {\n // 103 is the destance between pane bottom and zoom-controls top\n // zoomer bottom (8 px) + zoomer height (20px) - 13px + zoom controls height (75px) = 90px\n const isInArea = model.height - 90 <= area.cursorY && paneHeight > 210\n\n if (\n isInArea &&\n !zoomControls.classList.contains(ZOOM_CONTROLS_IS_IN_AREA_CLASS) &&\n !chartModel.getIsDisabled()\n ) {\n zoomControls.classList.add(ZOOM_CONTROLS_IS_IN_AREA_CLASS)\n } else if (!isInArea && zoomControls.classList.contains(ZOOM_CONTROLS_IS_IN_AREA_CLASS)) {\n zoomControls.classList.remove(ZOOM_CONTROLS_IS_IN_AREA_CLASS)\n }\n\n if (!area.mouseDown && !model.selection && isInArea && !chartModel.getIsDisabled()) {\n if (!zoomControls.classList.contains(ZOOM_CONTROLS_ACTIVE_CLASS)) {\n zoomControls.classList.add(ZOOM_CONTROLS_ACTIVE_CLASS)\n }\n } else if (zoomControls.classList.contains(ZOOM_CONTROLS_ACTIVE_CLASS)) {\n zoomControls.classList.remove(ZOOM_CONTROLS_ACTIVE_CLASS)\n }\n })\n }\n }\n\n onMouseLeave = () => {\n this.mouseDown = false\n }\n\n onTouchStart = (e: React.TouchEvent) => {\n if (!this.props.touchEventsDisabled && e.targetTouches.length === 1) {\n const touchEvent = e.targetTouches[0]\n if (this.chartLayoutModel.scrollable) {\n this.onCanvasInteractionStart(touchEvent)\n }\n if (this.chartLayoutModel.isTouchCrossActive) {\n this.lastClientX = touchEvent.clientX\n this.lastClientY = touchEvent.clientY\n if (!MouseModel.pane()?.eql(this.props.model)) {\n const area = this.getArea(touchEvent, {\n mouseDown: this.mouseDown,\n clientX: touchEvent.clientX,\n clientY: touchEvent.clientY,\n })\n this.setMousePosition(this.getMousePositionInBoundaries(area))\n this.isDisableTouchCrossAvailable = false\n }\n }\n this.onPaneMouseMove(touchEvent, true)\n }\n }\n\n onTouchMove = (e: TouchEvent) => {\n if (!this.props.touchEventsDisabled) {\n if (!this.getIsHammerAllowScrollActive()) {\n e.preventDefault()\n }\n if (!this.props.touchEventsDisabled && e.targetTouches.length === 1) {\n this.onCanvasInteractionMove(e.targetTouches[0])\n }\n }\n }\n\n onTouchEnd = (e: React.TouchEvent) => {\n if (!this.props.touchEventsDisabled && this.chartLayoutModel.scrollable) {\n this.onCanvasInteractionEnd(e)\n }\n }\n\n onCanvasPress = (e: React.MouseEvent) => {\n if (this.chartLayoutModel.scrollable) {\n this.chartLayoutModel.updateAttribute('scrollable', false)\n document.removeEventListener('touchmove', this.onMouseMoveOnScrolling)\n }\n if (!this.chartLayoutModel.isTouchCrossActive) {\n this.chartLayoutModel.updateAttribute('isTouchCrossActive', true)\n this.onCanvasInteractionMove(e)\n }\n }\n\n onCanvasInteractionStart = (e: React.Touch | React.MouseEvent) => {\n const { activeTool, activeChartInteraction, chartModel, model } = this.props\n const isTouch = typeof Touch !== 'undefined' && e instanceof Touch\n this.lastActiveTool = activeTool\n\n if (isPrimaryClick(e) && !activeChartInteraction && !chartModel.getIsDisabled()) {\n const area = this.getArea(e, { isTouch }) // passing isTouch is pretty confusing, it's used in Tools.jsx -> onMouseDown method\n const element = this.getElement(area)\n if (this.chartLayoutModel.scrollable) {\n setElementCursor({ elementId: this.chartLayoutModel.getHTMLElementId(), cursor: 'grabbing' })\n if (model.scaleRange) {\n this.currentViewRange = model.getChartOrIndicatorElement()?.instance?.getMinMax?.() ?? null\n }\n document.addEventListener(isTouch ? 'touchmove' : 'mousemove', this.onMouseMoveOnScrolling)\n document.addEventListener(isTouch ? 'touchend' : 'mouseup', this.onCanvasInteractionEnd)\n }\n if (activeTool === DrawingTool.Mouse || model.getAllElements().some(({ instance }) => instance.isCreator)) {\n element?.trigger('mousedown', area)\n this.setSelectedElement(element)\n }\n model.trigger('mousedown', model, area, element)\n this.mouseDown = true\n this.lastX = area.x\n this.lastY = area.y\n }\n\n this.lastClientX = e.clientX\n this.lastClientY = e.clientY\n }\n\n onCanvasInteractionMove = (e: React.MouseEvent | React.Touch) => {\n const area = this.getArea(e, {\n mouseDown: this.mouseDown,\n clientX: e.clientX,\n clientY: e.clientY,\n })\n if (!area.isCursorInChartWidthBoundaries) {\n MouseModel.updateAttributes({\n position: null,\n pane: null,\n })\n return\n }\n\n const { model } = this.props\n const hoveredElement = this.getElement(area)\n const element = model.selection || hoveredElement\n\n if (!(this.isMobile && !this.chartLayoutModel.isTouchCrossActive)) {\n this.isDisableTouchCrossAvailable = true\n this.setMousePosition(\n this.lastClientX && this.lastClientY && this.chartLayoutModel.isTouchCrossActive && MouseModel.position\n ? this.getMousePositionInBoundaries({\n x: MouseModel.position.x + (model.scale.x.invert(area.clientX) - model.scale.x.invert(this.lastClientX)),\n y: MouseModel.position.y + (model.scale.y.invert(area.clientY) - model.scale.y.invert(this.lastClientY)),\n })\n : { x: area.x, y: area.y }\n )\n }\n\n if (!this.chartLayoutModel.scrollable) {\n this.lastClientX = area.clientX\n this.lastClientY = area.clientY\n }\n\n element?.trigger('mousemove', area)\n if (model.selection instanceof CanvasElement && this.mouseDown && !model.selection?.activeThumb) {\n if (!model.selection.getIsCreator?.()) {\n model.selection.moveBy(area.x - this.lastX, area.y - this.lastY)\n }\n this.lastX = area.x\n this.lastY = area.y\n this.renderAll()\n }\n const isElementHovered =\n this.props.activeTool === DrawingTool.Mouse &&\n ((element && element === hoveredElement) || hoveredElement instanceof CanvasElement)\n\n if (hoveredElement !== this.hoveredElement && this.hoveredElement instanceof CanvasElement) {\n this.hoveredElement.setIsHovered(false)\n this.hoveredElement = null\n }\n\n if (isElementHovered && hoveredElement instanceof CanvasElement) {\n if (!hoveredElement.isHovered && !hoveredElement.isSelected) {\n hoveredElement.setIsHovered(true)\n this.hoveredElement = hoveredElement\n }\n }\n\n if (isElementHovered !== this.isElementHovered && this.canvas && hoveredElement?.type !== IndicatorType.Cot) {\n this.canvas.className = isElementHovered ? 'hover' : ''\n if (this.chartLayoutModel.cross && this.crossCanvas) {\n this.crossCanvas.className = `second${isElementHovered ? ' hover' : ''}`\n }\n this.isElementHovered = isElementHovered\n }\n }\n\n onCanvasInteractionEnd = (event: TouchEvent | MouseEvent | React.TouchEvent) => {\n if (MouseModel.position) {\n setElementCursor({ elementId: this.chartLayoutModel.getHTMLElementId(), cursor: 'crosshair' })\n } else {\n setElementCursor({ elementId: this.chartLayoutModel.getHTMLElementId(), cursor: 'default' })\n }\n const isTouch = typeof TouchEvent !== 'undefined' && event instanceof TouchEvent\n this.mouseDown = false\n const area = this.getArea(event)\n const element = this.props.model.selection || this.getElement(area)\n element?.trigger('mouseup', area)\n document.removeEventListener(isTouch ? 'touchmove' : 'mousemove', this.onMouseMoveOnScrolling)\n document.removeEventListener(isTouch ? 'touchend' : 'mouseup', this.onCanvasInteractionEnd)\n }\n\n getMousePositionInBoundaries = ({ x, y }: { x: number; y: number }) => {\n const { model } = this.props\n const Settings = getSettings(model)\n const canvasAreaRectangle = this.canvas!.getBoundingClientRect()\n const chartLeft = model.scale.x.invert(-model.chart().leftOffset + 1)\n const chartRight = model.scale.x.invert(\n canvasAreaRectangle.width - Settings.right.width - Settings.left.width - model.chart().leftOffset - 1\n )\n const chartTop = model.scale.y.invert(0)\n const chartBottom = model.scale.y.invert(canvasAreaRectangle.height - Settings.bottom.height - Settings.top.height)\n\n return {\n x: getValueInRange({\n value: x,\n min: chartLeft,\n max: chartRight,\n }),\n y: getValueInRange({\n value: y,\n min: chartBottom,\n max: chartTop,\n }),\n }\n }\n\n setMousePosition = ({ x, y }: { x: number; y: number }) => {\n const isSameMouseModel = !!MouseModel.pane()?.eql(this.props.model)\n MouseModel.updateAttributes({\n position: { x, y },\n ...(isSameMouseModel ? {} : { pane: this.props.model }),\n })\n }\n\n setSelection = (selection: IndicatorElement | CanvasElement | null) => {\n if (selection instanceof CanvasElement) {\n selection?.setIsSelected(true)\n }\n\n this.props.model.updateAttribute('selection', selection)\n }\n\n setSelectedElement = (element: IndicatorElement | CanvasElement | null) => {\n const { selection } = this.props.model\n const isSelectionCanvas = selection instanceof CanvasElement\n if (element !== selection || (isSelectionCanvas && element && !selection?.isSelected)) {\n if (isSelectionCanvas) {\n selection?.setIsSelected(false)\n }\n if (isSelectionCanvas && selection?.isCreator) {\n this.setSelection(null)\n } else {\n this.setSelection(element)\n }\n }\n }\n\n getElement = (area: PaneArea) => {\n const elements = this.props.model.getAllElements()\n for (let i = elements.length - 1; i >= 0; i--) {\n const el = elements[i].instance\n if (el.isInArea(area)) {\n return el\n }\n }\n return null\n }\n\n getCanvasDOMNode = () =>\n // This is used in app/modals/publish/publish.jsx\n this.canvasRef.current\n}\n\nexport default withNotificationContext(withElementStyleDialogState(withPaneModel(Pane)))\n","import React from 'react'\n\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport PaneModel from '../../models/pane'\n\nexport function withPaneModel(Component: React.ComponentType
) {\n return function WrappedComponent(props: P) {\n const model = useModelState(props.model, { watchProperties: ['selection'] })\n\n return \n }\n}\n","import classnames from 'classnames'\nimport React from 'react'\n\nimport { Spinner } from '../../components'\n\nexport function ChartSpinnerOverlay({ shouldDisplay, className }: { shouldDisplay: boolean; className: string }) {\n const [isVisible, setIsVisible] = React.useState(shouldDisplay)\n React.useEffect(() => {\n let timeout: number\n if (!shouldDisplay) {\n timeout = window.setTimeout(() => {\n setIsVisible(false)\n }, 400)\n }\n return () => {\n clearTimeout(timeout)\n }\n }, [shouldDisplay])\n\n return (\n <>\n {isVisible && (\n \n \n \n )}\n \n )\n}\n","import React from 'react'\n\nimport { ChartConfigObject } from '../../../types/shared'\nimport ChartModel from '../../models/chart'\nimport ChartLayout from '../../models/chart_layout'\nimport { DrawingTool } from '../toolbar/interfaces'\n\nexport const CHART_CLASS_NAMES = 'chart flex-1 dark:bg-gray-800 relative'\nexport const DEFAULT_WRAPPER_COMPONENT = 'div'\n\nexport interface ChartProps {\n chartIndex: number\n gridArea?: string\n WrapperComp?: React.RefForwardingComponent\n config: ChartConfigObject\n chartModel: ChartModel\n layoutModel: ChartLayout\n setActiveChartInteraction: (interaction: string | null) => void\n activeChartInteraction: string | null\n activeTool: DrawingTool\n touchEventsDisabled: boolean\n hasOutline?: boolean\n shouldResize?: boolean\n renderChartToolbar?: () => React.ReactNode\n}\n","import React from 'react'\n\nimport { Instrument } from '../../../types/shared'\nimport { ChartEditorEnum, SpecificChartFunctionality } from '../../constants/common'\nimport math from '../../helpers/math'\nimport ChartModel from '../../models/chart'\nimport ChartLayout from '../../models/chart_layout'\nimport MouseModel from '../../models/mouse'\nimport PaneModel from '../../models/pane'\nimport Quote from '../../models/quote'\nimport { QuoteFetchType } from '../../models/quote/constants'\nimport utils from '../../utils'\nimport { getBarWidthWithMargin, getZoomFactorForBarsToDisplay } from '../../utils/chart'\nimport { getParsedDateRangeMetaData } from '../../utils/chart-date-range-utils'\nimport { ChartControls } from '../chart-controls'\nimport Pane from '../pane'\nimport {\n getBarIndex,\n getChartZoomAndLeftOffset,\n getIsSmallIndexChart,\n getLeftOffset,\n getMinMaxLeftOffset,\n} from '../renderUtils'\nimport { ChartProps } from './constants'\nimport { withChartInit } from './with-chart-init'\nimport { withWatchedPanesOnChartModel } from './with-watched-panes-on-chart-model'\n\nfunction preventDefaultFunc(event: Event) {\n event.preventDefault()\n}\n\nfunction getZoomFactor({\n chartLayout,\n currentZoomFactor,\n diff,\n minBarWidthInPx = 1,\n maxBarWidthInPx = 66,\n}: {\n chartLayout: ChartLayout\n currentZoomFactor: number\n diff: number\n minBarWidthInPx?: number\n maxBarWidthInPx?: number\n}) {\n const minZoomFactor = getZoomFactorForBarsToDisplay({\n chartLayout,\n chartVisibleWidth: minBarWidthInPx,\n numOfVisibleBars: 1,\n })\n const maxZoomFactor = getZoomFactorForBarsToDisplay({\n chartLayout,\n chartVisibleWidth: maxBarWidthInPx,\n numOfVisibleBars: 1,\n })\n const isNegativeDirection = diff < 0\n const newZoomFactor = currentZoomFactor + diff\n const newZoomFactorInRange = Math.min(Math.max(minZoomFactor, newZoomFactor), maxZoomFactor)\n\n if (newZoomFactor > newZoomFactorInRange && currentZoomFactor > newZoomFactorInRange) {\n return isNegativeDirection ? newZoomFactor : currentZoomFactor\n }\n\n if (newZoomFactor < newZoomFactorInRange && currentZoomFactor < newZoomFactorInRange) {\n return !isNegativeDirection ? newZoomFactor : currentZoomFactor\n }\n\n return newZoomFactorInRange\n}\n\ninterface ChartState {\n panesWrapperElement: HTMLDivElement | null\n}\n\nclass Chart extends React.Component {\n lastWidth: number\n mouseWheelTimeout?: number\n setStateWithPanesTimeout?: number\n lastHeight = 0\n lastY: number | null = null\n lastX: number | null = null\n resizerPaneIndex = -1\n minimalPaneHeight = 0\n zoomerRightAlign: {\n barIndex?: number\n index: number\n offsetDiff: number\n } | null = null\n\n // expects model, config, layoutModel\n constructor(props: ChartProps) {\n super(props)\n\n this.lastWidth = props.chartModel.width\n this.props.layoutModel.bind('change', this.onLayoutModelChange)\n this.state = { panesWrapperElement: null }\n }\n\n componentDidMount() {\n const { chartModel } = this.props\n this.lastWidth = this.props.layoutModel.width\n\n chartModel.trigger('change', chartModel)\n chartModel.bind('createPane', this.onPaneCreate)\n\n this.calculateMinimalPaneHeight()\n this.handleQuoteChange(chartModel.quote()!)\n this.onModelChange()\n\n chartModel.bind('update', this.onModelChange)\n chartModel.bind('destroy', () => {\n Quote.unbind('olderData', this.onOlderDataLoaded)\n Quote.unbind(`${QuoteFetchType.Refetch} ${QuoteFetchType.NewerData}`, this.onDataLoaded)\n })\n\n Quote.bind('olderData', this.onOlderDataLoaded)\n Quote.bind(`${QuoteFetchType.Refetch} ${QuoteFetchType.NewerData}`, this.onDataLoaded)\n }\n\n componentDidUpdate(prevProps: Readonly, prevState: Readonly) {\n if (\n prevState.panesWrapperElement !== this.state.panesWrapperElement ||\n prevProps.layoutModel.isWheelZoomEnabled !== this.props.layoutModel.isWheelZoomEnabled\n ) {\n prevState.panesWrapperElement?.removeEventListener('wheel', preventDefaultFunc)\n\n if (this.props.layoutModel.isWheelZoomEnabled) {\n // can't use onWheel as it has passive: true\n this.state.panesWrapperElement?.addEventListener('wheel', preventDefaultFunc, { passive: false })\n }\n }\n }\n\n componentWillUnmount() {\n const { chartModel, layoutModel } = this.props\n if (this.setStateWithPanesTimeout) {\n clearTimeout(this.setStateWithPanesTimeout)\n }\n layoutModel.unbind('change', this.onLayoutModelChange)\n chartModel.unbind('update', this.onModelChange)\n\n this.state.panesWrapperElement?.removeEventListener('wheel', preventDefaultFunc)\n }\n\n handleSetPanesWrapperRef = (panesWrapperElement: HTMLDivElement | null) => {\n this.setState({ panesWrapperElement })\n }\n\n render() {\n const { activeTool, chartIndex, layoutModel, chartModel, renderChartToolbar } = this.props\n const panes =\n layoutModel.specificChartFunctionality === SpecificChartFunctionality.futuresPage\n ? chartModel.getAllValidPanes()\n : chartModel.getAllPanes()\n const showSettings = layoutModel.editors.includes(ChartEditorEnum.settings)\n\n return (\n <>\n this.onClick(undefined)}\n data-testid={`chart-${chartIndex}-settings`}\n onMouseEnter={this.resetMouseModel}\n >\n {showSettings && }\n \n {layoutModel.editable && showSettings && renderChartToolbar && (\n {renderChartToolbar()}
\n )}\n \n {panes.map((pane, index) => (\n \n ))}\n \n \n )\n }\n\n onMouseWheel = (e: React.WheelEvent) => {\n const { chartModel, layoutModel } = this.props\n const isLoading = chartModel.panes().count() < 1\n if (!layoutModel.isWheelZoomEnabled || isLoading) {\n return\n }\n if (!this.zoomerRightAlign) {\n this.calcZoomerRightAlign()\n }\n clearTimeout(this.mouseWheelTimeout)\n this.mouseWheelTimeout = window.setTimeout(() => {\n this.zoomerRightAlign = null\n }, 250)\n this.onZoomerMouseMove(e, undefined, true)\n }\n\n onClick = (activePane: PaneModel | undefined) => {\n if (\n !this.props.layoutModel.activeChart.eql(this.props.chartModel) ||\n !(this.props.layoutModel.activePane?.eql(activePane) || this.props.layoutModel.activePane === activePane)\n ) {\n this.props.layoutModel.updateAttributes({ activeChart: this.props.chartModel, activePane })\n }\n }\n\n onPaneCreate = () => {\n const { chartModel } = this.props\n this.onModelChange()\n this.calculateMinimalPaneHeight()\n chartModel.trigger('change', chartModel)\n }\n\n onPaneDestroy = (paneId: string) => {\n const { chartModel } = this.props\n const pane = chartModel.panes().find(paneId)\n\n if (pane) {\n pane.destroyCascade()\n this.onModelChange()\n chartModel.trigger('change', chartModel)\n }\n }\n\n onModelChange = (chartModelParam?: ChartModel) => {\n const { chartModel, config } = this.props\n const panes = chartModel.getAllPanes()\n const quote = chartModel.quote()\n\n if (panes.length === 0 || !quote) {\n return\n }\n\n const { width, height } = chartModel\n let panesHeight = panes.reduce((sum, pane) => sum + (pane.height ?? 0), 0)\n if (panesHeight !== height) {\n panesHeight = panes.reduce((sum, pane) => {\n const newPaneHeight = Math.round((pane.height / panesHeight) * height)\n if (!Number.isNaN(newPaneHeight)) {\n pane.updateAttribute('height', newPaneHeight)\n }\n return sum + newPaneHeight\n }, 0)\n const chartPane = chartModel.getChartPane()\n if (chartPane && panesHeight !== height) {\n const newChartPaneHeight = chartPane.height + height - panesHeight\n if (!Number.isNaN(newChartPaneHeight)) {\n chartPane.updateAttribute('height', newChartPaneHeight)\n }\n }\n }\n\n const newLeftOffset = getLeftOffset({\n quote,\n chartModel,\n config: config,\n })\n const newIsScrolled = chartModel.leftOffset !== newLeftOffset\n const isScrolled = chartModel.isScrolled\n if (!isScrolled && this.lastWidth !== width) {\n this.lastWidth = width\n chartModel.updateAttribute('leftOffset', newLeftOffset)\n } else if (isScrolled !== newIsScrolled) {\n chartModel.updateAttributes({ isScrolled: newIsScrolled })\n }\n\n if (this.lastHeight !== height) {\n this.lastHeight = height\n this.calculateMinimalPaneHeight()\n }\n\n if (chartModelParam) {\n this.handleQuoteChange(chartModelParam.quote())\n }\n }\n\n onLayoutModelChange = ({ activeChart, activePane }: { activeChart: ChartModel; activePane: PaneModel }) => {\n const { chartModel } = this.props\n if (!activeChart) {\n return\n }\n for (const pane of chartModel.getAllPanes()) {\n if (activePane?.id !== pane.id && pane.selection?.isSelected === true) {\n pane.selection.setIsSelected(false)\n pane.updateAttribute('selection', undefined)\n }\n }\n }\n\n onResizerMouseDown = (e: React.MouseEvent | MouseEvent, model: PaneModel) => {\n if (e.button !== 0) {\n return\n }\n this.lastY = e.clientY\n this.resizerPaneIndex = this.props.chartModel\n .panes()\n .all()\n .findIndex((pane) => pane.eql(model))\n document.addEventListener('mousemove', this.onResizerMouseMove)\n document.addEventListener('mouseup', this.onResizerMouseUp)\n }\n\n onResizerMouseMove = (e: MouseEvent) => {\n if (this.resizerPaneIndex > 0 && this.lastY !== null && this.resizePanesAccordingly(this.lastY! - e.clientY)) {\n this.lastY = e.clientY\n }\n }\n\n onResizerMouseUp = (e: MouseEvent) => {\n const { chartModel } = this.props\n if (this.resizerPaneIndex > 0 && this.lastY !== null) {\n this.resizePanesAccordingly(this.lastY - e.clientY)\n this.lastY = null\n\n chartModel.trigger('change', chartModel)\n }\n\n document.removeEventListener('mousemove', this.onResizerMouseMove)\n document.removeEventListener('mouseup', this.onResizerMouseUp)\n }\n\n calculateMinimalPaneHeight() {\n const { chartModel } = this.props\n const { minHeight, total } = chartModel\n .panes()\n .all()\n .reduce(\n ({ minHeight, total }, pane) => {\n if (minHeight > pane.height) {\n minHeight = pane.height\n }\n total += pane.getIsChartPane() ? 3 : 1\n return { minHeight, total }\n },\n { minHeight: chartModel.height, total: 0 }\n )\n const optiMinHeight = Math.floor(chartModel.height / total)\n this.minimalPaneHeight = Math.min(minHeight, optiMinHeight)\n }\n\n resizePanesAccordingly(difY: number) {\n const { chartModel } = this.props\n const panes = chartModel.panes().all()\n let basePane = this.resizerPaneIndex\n if (!difY) {\n return true\n } else if (difY > 0) {\n let i = basePane\n let pane = panes[i]\n if (pane.height + difY >= this.minimalPaneHeight) {\n pane.updateAttribute('height', pane.height + difY)\n } else {\n pane.updateAttribute('height', this.minimalPaneHeight)\n }\n for (--i; i >= 0; i--) {\n pane = panes[i]\n if (pane.height - difY >= this.minimalPaneHeight) {\n pane.updateAttribute('height', pane.height - difY)\n break\n } else {\n pane.updateAttribute('height', this.minimalPaneHeight)\n }\n }\n } else if (difY < 0) {\n basePane = Math.max(0, basePane - 1)\n let i = basePane\n let pane = panes[i]\n if (pane.height - difY >= this.minimalPaneHeight) {\n pane.updateAttribute('height', pane.height - difY)\n } else {\n pane.updateAttribute('height', this.minimalPaneHeight)\n }\n for (++i; i < panes.length; i++) {\n pane = panes[i]\n if (pane.height + difY >= this.minimalPaneHeight) {\n pane.updateAttribute('height', pane.height + difY)\n break\n } else {\n pane.updateAttribute('height', this.minimalPaneHeight)\n }\n }\n }\n\n const panesHeight = panes.reduce((sum, pane) => sum + pane.height, 0)\n if (panesHeight !== chartModel.height) {\n difY = chartModel.height - panesHeight\n\n const pane = panes[basePane]\n pane.updateAttribute('height', pane.height + difY)\n\n // if we exceeded total height we need to stop updating lastY - return false\n return false\n }\n\n return true\n }\n\n onZoomerTouchStart = (e: React.TouchEvent | TouchEvent) => {\n if (!this.props.layoutModel.scrollable || e.touches.length !== 1 || this.props.touchEventsDisabled) {\n return\n }\n this.onZoomerMouseDown(e.targetTouches[0])\n }\n\n onZoomerTouchMove = (e: TouchEvent) => {\n if (!this.props.layoutModel.scrollable || e.touches.length !== 1) {\n return\n }\n this.onZoomerMouseMove(e.targetTouches[0])\n }\n\n onZoomerTouchEnd = () => {\n if (!this.props.layoutModel.scrollable) {\n return\n }\n this.onZoomerMouseUp()\n }\n\n getRawDistance = (e: Pick) => {\n const p1 = { x: e.touches[0].clientX, y: e.touches[0].clientY }\n const p2 = { x: e.touches[1].clientX, y: e.touches[1].clientY }\n return math.distance(p1, p2)\n }\n\n onPinchStart = (e: React.TouchEvent) => {\n const { chartModel } = this.props\n const { activeChartInteraction, setActiveChartInteraction, touchEventsDisabled } = this.props\n const isLoading = chartModel.panes().count() < 1\n\n if (\n this.props.layoutModel.scrollable &&\n e.touches.length === 2 &&\n !activeChartInteraction &&\n !isLoading &&\n !touchEventsDisabled\n ) {\n setActiveChartInteraction('pinch')\n this.onZoomerMouseDown({ clientX: this.getRawDistance(e as unknown as TouchEvent) })\n\n document.addEventListener('touchmove', this.onPinchMove)\n document.addEventListener('touchend', this.onPinchEnd)\n }\n }\n\n onPinchMove = (e: TouchEvent) => {\n if (e.touches.length === 2) {\n this.onZoomerMouseMove({ clientX: this.getRawDistance(e) })\n }\n }\n\n onPinchEnd = (e: TouchEvent) => {\n if (e.touches.length === 1) {\n this.onZoomerMouseUp()\n document.removeEventListener('touchmove', this.onPinchMove)\n document.removeEventListener('touchend', this.onPinchEnd)\n }\n }\n\n calcZoomerRightAlign = () => {\n const { chartModel } = this.props\n const { ChartSettings } = chartModel.getChartLayoutSettings()\n const quote = chartModel.quote()\n const fx = chartModel.panes().first().scale.x\n const barWidth = getBarWidthWithMargin({ zoomFactor: chartModel.zoomFactor, chartLayout: this.props.layoutModel })\n const currentLeftOffset = getLeftOffset({ quote, chartModel, config: this.props.config, barWidth })\n this.zoomerRightAlign = null\n\n if (quote.isIntraday && quote.instrument === Instrument.Stock) {\n const barIndex = quote.getBarIndex(quote.close.length - 1)\n let offsetDiff =\n chartModel.leftOffset -\n getLeftOffset({\n quote,\n chartModel: chartModel,\n config: this.props.config,\n barWidth,\n barIndex,\n shouldAlignDaysToLeftApplied: false,\n })\n const offsetBars = ~~(offsetDiff / barWidth)\n offsetDiff -= offsetBars * barWidth\n this.zoomerRightAlign = {\n barIndex,\n index: barIndex - offsetBars,\n offsetDiff,\n }\n } else if (chartModel.leftOffset <= currentLeftOffset) {\n this.zoomerRightAlign = {\n index: quote.getBarIndex(quote.open.length - 1),\n offsetDiff: chartModel.leftOffset - currentLeftOffset,\n }\n } else {\n const offset = chartModel.leftOffset\n for (let i = 0; i < quote.open.length; i += 1) {\n const x = fx(i)\n if (x + offset < 0) {\n continue\n }\n if (x + offset > chartModel.width - ChartSettings.left.width - ChartSettings.right.width) {\n const barIndex = quote.getBarIndex(i - 1)\n let offsetDiff =\n offset -\n getLeftOffset({\n quote,\n chartModel,\n config: this.props.config,\n barWidth,\n barIndex,\n })\n const offsetBars = ~~(offsetDiff / barWidth)\n offsetDiff -= offsetBars * barWidth\n this.zoomerRightAlign = {\n barIndex,\n index: barIndex - offsetBars,\n offsetDiff,\n }\n break\n }\n }\n }\n }\n\n onZoomerMouseDown = (e: Partial) => {\n if ((e.button !== 0 && 'button' in e) || !this.props.layoutModel.scrollable) {\n return\n }\n switch (this.props.activeChartInteraction) {\n case 'pinch':\n break\n case null:\n this.props.setActiveChartInteraction('zoomer')\n break\n default:\n return\n }\n\n this.lastX = e.clientX ?? null\n this.calcZoomerRightAlign()\n\n document.addEventListener('mousemove', this.onZoomerMouseMove)\n document.addEventListener('mouseup', this.onZoomerMouseUp)\n document.addEventListener('touchmove', this.onZoomerTouchMove)\n document.addEventListener('touchend', this.onZoomerTouchEnd)\n }\n\n normalizeWheelDeltaY = (e: WheelEvent) => {\n // because wheel deltaY on mouse and touchpad is quite different we need to normalize it\n const abs = Math.abs(e.deltaY)\n if (abs === 0) return 0\n return Math.log(abs) * Math.sign(e.deltaY) * 10\n }\n\n onZoomerMouseMove = (\n e: React.WheelEvent | MouseEvent | Touch | { clientX: number },\n _?: unknown,\n isMouseWheel = false\n ) => {\n const { chartModel, layoutModel } = this.props\n let difX\n if (!layoutModel.scrollable) return\n if (!isMouseWheel && this.lastX !== null) {\n difX = (this.lastX - e.clientX) / chartModel.width\n this.lastX = e.clientX\n } else {\n // standard difX calculation result is around 0.00x, wheel deltaY is whole px\n // because of that we divide px with 1000\n difX = this.normalizeWheelDeltaY(e as WheelEvent) / 1000\n }\n\n this.addToZoomFactor({ diff: -difX })\n }\n\n addToZoomFactor = ({\n diff,\n shouldCalculateRightAlign = false,\n }: {\n diff: number\n shouldCalculateRightAlign?: boolean\n }) => {\n const { chartModel, layoutModel } = this.props\n if (shouldCalculateRightAlign) {\n this.calcZoomerRightAlign()\n }\n // 6 is default bar width with margin on charts page, so to get the similar feeling when zooming we're multiplying the zoom factor by the coefficient\n const diffCoefficient = chartModel.zoomFactor * (6 / getBarWidthWithMargin({ chartLayout: this.props.layoutModel }))\n const zoomFactor = getZoomFactor({\n chartLayout: layoutModel,\n currentZoomFactor: chartModel.zoomFactor,\n diff: diff * diffCoefficient,\n })\n const barWidth = getBarWidthWithMargin({\n zoomFactor,\n chartLayout: this.props.layoutModel,\n })\n\n let leftOffset\n if (this.props.config.stretch) {\n leftOffset = 0\n } else if (getIsSmallIndexChart(this.props.layoutModel.specificChartFunctionality)) {\n leftOffset = barWidth\n } else if (this.zoomerRightAlign) {\n leftOffset = getMinMaxLeftOffset({\n newLeftOffset:\n getLeftOffset({\n quote: chartModel.quote(),\n chartModel: chartModel,\n config: this.props.config,\n barWidth,\n barIndex: this.zoomerRightAlign.index,\n shouldAlignDaysToLeftApplied: false,\n }) + this.zoomerRightAlign.offsetDiff,\n chartModel: chartModel,\n barWidth,\n barIndex: getBarIndex(chartModel.quote()),\n })\n } else {\n return\n }\n chartModel.updateAttributes({\n zoomFactor,\n leftOffset,\n dateRange: null,\n })\n if (shouldCalculateRightAlign) {\n this.zoomerRightAlign = null\n }\n }\n\n onZoomerMouseUp = () => {\n this.zoomerRightAlign = null\n document.removeEventListener('mousemove', this.onZoomerMouseMove)\n document.removeEventListener('mouseup', this.onZoomerMouseUp)\n document.removeEventListener('touchmove', this.onZoomerTouchMove)\n document.removeEventListener('touchend', this.onZoomerTouchEnd)\n this.props.setActiveChartInteraction(null)\n }\n\n onZoomerReset = () => {\n const { chartModel, layoutModel } = this.props\n const zoomFactor = chartModel.chart_layout().defaultZoomFactor\n const barWidth = getBarWidthWithMargin({ zoomFactor, chartLayout: layoutModel })\n const leftOffset = getLeftOffset({\n quote: chartModel.quote(),\n chartModel,\n config: this.props.config,\n barWidth,\n })\n\n chartModel.updateAttributes({\n zoomFactor,\n leftOffset,\n dateRange: null,\n })\n }\n\n onOlderDataLoaded = () => {\n throw new Error('onOlderDataLoaded not implemented')\n // TODO implement similarly to onDataLoaded\n }\n\n resetMouseModel = () => {\n const isLoading = this.props.chartModel.panes().count() < 1\n if (!isLoading) {\n MouseModel.updateAttributes({\n position: null,\n pane: null,\n })\n }\n }\n\n handleQuoteChange = (quote: Quote) => {\n const { chartModel } = this.props\n if (\n !chartModel.dateRange ||\n !quote.eql(chartModel.quote()) ||\n chartModel.timeframe !== quote.timeframe ||\n quote.date.length === 0\n ) {\n return\n }\n\n const { ChartSettings } = chartModel.getChartLayoutSettings()\n const chartVisibleWidth = chartModel.width - (ChartSettings.left.width + ChartSettings.right.width)\n\n const { start, end, numOfBarsToRender } = getParsedDateRangeMetaData({\n dateRange: chartModel.dateRange,\n quote,\n })\n\n const { zoomFactor, leftOffset } = getChartZoomAndLeftOffset({\n chartVisibleWidth,\n start,\n end,\n quote,\n numOfBarsToRender,\n chartModel: chartModel,\n })\n if (chartModel.zoomFactor !== zoomFactor || chartModel.leftOffset !== leftOffset) {\n chartModel.updateAttributes({ zoomFactor, leftOffset })\n }\n }\n\n onDataLoaded = (newQuote: Quote, fetchType: QuoteFetchType) => {\n const { chartModel } = this.props\n const quote = chartModel.quote()\n if (!quote?.eql(newQuote)) {\n return\n }\n\n const shouldForceLeftOffsetUpdate = fetchType === QuoteFetchType.Refetch\n let newLeftOffset = chartModel.leftOffset // TODO find proper fix. If this line is removed (if we don't trigger leftOffset update), the chart stops being updated for the user until they move chart around.\n if (\n (this.props.layoutModel.scrollable === false && !this.props.layoutModel.isTouchCrossActive) ||\n !chartModel.isScrolled ||\n shouldForceLeftOffsetUpdate\n ) {\n newLeftOffset = getLeftOffset({\n quote,\n chartModel: chartModel,\n config: this.props.config,\n })\n }\n\n if (newLeftOffset !== chartModel.leftOffset) {\n chartModel.getAllElements().forEach((element) => {\n if (element.isDrawing() && !element.isMouseDown()) {\n element.instance.updateScales()\n }\n })\n }\n\n chartModel.updateAttribute('leftOffset', newLeftOffset)\n\n this.handleQuoteChange(quote)\n }\n}\n\nexport default withChartInit(withWatchedPanesOnChartModel(Chart))\n","import classNames from 'classnames'\nimport merge from 'lodash.merge'\nimport React from 'react'\n\nimport { ObjectHash } from '../../../types/shared'\nimport { SpecificChartFunctionality } from '../../constants/common'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport Quote from '../../models/quote'\nimport { getChartsDimensions, isRedesignEnabled } from '../../utils'\nimport { prefetchPerfIndicatorAllQuotes } from '../../utils/chart'\nimport { getLeftOffset } from '../renderUtils'\nimport { ChartSpinnerOverlay } from './chart-spinner-overlay'\nimport { CHART_CLASS_NAMES, ChartProps, DEFAULT_WRAPPER_COMPONENT } from './constants'\n\nexport function withChartInit(Component: React.ComponentType) {\n return function WrappedComponent(props: ChartProps) {\n const { WrapperComp = DEFAULT_WRAPPER_COMPONENT, gridArea } = props\n const isModelDestroyedRef = React.useRef(false)\n const model = useModelState(props.chartModel, { watchProperties: ['panes', 'quote'] })\n const layoutModel = useModelState(props.layoutModel, { watchProperties: ['activeChart'] })\n const quote = model.quote()\n\n const initChartRef = React.useRef(async () => {\n const { chartModel, config } = props\n const { premarket, aftermarket, ticker, instrument, timeframe, panes: panesConfig } = config\n\n const options = {\n premarket,\n aftermarket,\n patterns: panesConfig.some((pane) =>\n pane.elements?.some((element) =>\n element.overlays?.some((overlay: ObjectHash) => overlay.type === 'overlays/patterns')\n )\n ),\n }\n\n const quote = await Quote.get({\n ticker,\n instrument,\n timeframe,\n options,\n })\n const panesWithPerfIndicator = panesConfig.filter(({ elements }) =>\n elements.some(({ type }) => type === 'indicators/perf')\n )\n\n if (panesWithPerfIndicator) {\n await Promise.allSettled(\n panesWithPerfIndicator.map((paneWithPerfIndicator) =>\n prefetchPerfIndicatorAllQuotes({ paneWithPerfIndicator, timeframe })\n )\n )\n }\n\n if (isModelDestroyedRef.current) {\n return\n }\n\n config.panes.forEach((pane) => {\n const paneProperties = merge({}, pane)\n paneProperties.chart = chartModel\n chartModel.createPaneCascade(paneProperties)\n })\n\n chartModel.updateAttributes({\n quote,\n premarket: options.premarket,\n aftermarket: options.aftermarket,\n })\n\n if (props.shouldResize) {\n const chartsDimensions = getChartsDimensions(props.layoutModel.getHTMLElementId())\n props.layoutModel.updateAttributes(chartsDimensions)\n }\n\n if (chartModel.leftOffset == null) {\n const leftOffset = getLeftOffset({ quote, chartModel: chartModel, config: props.config })\n chartModel.updateAttribute('leftOffset', leftOffset)\n }\n })\n\n React.useEffect(() => {\n const handleModelBeforeDestroy = () => {\n isModelDestroyedRef.current = true\n }\n\n model.bind('beforeDestroy', handleModelBeforeDestroy)\n initChartRef.current()\n return () => {\n model.unbind('beforeDestroy', handleModelBeforeDestroy)\n }\n // We want to run it only on mount\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n const isQuotePage = props.layoutModel.specificChartFunctionality === SpecificChartFunctionality.quotePage\n const isChartPage = props.layoutModel.specificChartFunctionality === SpecificChartFunctionality.chartPage\n const isFuturesForexCryptoPage = [\n SpecificChartFunctionality.futuresPage,\n SpecificChartFunctionality.forexPage,\n SpecificChartFunctionality.cryptoPage,\n ].includes(props.layoutModel.specificChartFunctionality)\n const isModelReady =\n quote && ((quote.fetchedAt === undefined && quote.close.length > 0) || quote.fetchedAt > 0 || quote)\n const loadingStyle =\n !isModelReady && isQuotePage\n ? // 2px is border\n { width: model.width ? model.width + 2 : '100%', height: model.height + 2 }\n : undefined\n\n return (\n \n {isChartPage && (\n \n )}\n {isModelReady && }\n \n )\n }\n}\n","import React from 'react'\n\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport ChartModel from '../../models/chart'\n\nexport function withWatchedPanesOnChartModel(Component: React.ComponentType
) {\n return function WrappedComponent(props: P) {\n const model = useModelState(props.chartModel, { watchProperties: ['panes'] })\n\n return \n }\n}\n","import omit from 'lodash.omit'\nimport queryString from 'query-string'\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport { Instrument, ObjectHash } from '../../types/shared'\nimport { Button, Dialog, DialogBody, DialogFooter, DialogHeader } from '../components'\nimport { ChartsOrQuotePageQueryParams, LayoutType } from '../constants/common'\nimport { getTickerNoteText } from '../controllers/autosave/utils'\nimport ChartLayout from '../models/chart_layout'\nimport Quote from '../models/quote'\nimport { getInstrument } from '../utils/chart'\nimport fetchApi, { getFormDataFromObject } from '../utils/fetch_api'\nimport { captureException } from '../utils/helpers'\nimport { decodeQueryString } from '../utils/query_string'\n\ninterface IIdea {\n ticker: string\n instrument: string\n period: string\n company?: string\n date: string\n note: string\n id: string\n}\n\nfunction getIdeaUrl({ ticker, instrument, period, id }: Pick) {\n const searchObject = { t: ticker, p: period, i: id }\n const isStock = instrument === Instrument.Stock\n const isQuotePage = /\\/quote\\b/.test(window.location.pathname)\n const isStockOnQute = isQuotePage && isStock\n const path = !isQuotePage || isStock ? window.location.pathname : '/charts.ashx'\n\n return `${path}?${queryString.stringify({ ...searchObject, ...(isStockOnQute ? { ta: '2' } : { l: '1h1v' }) })}`\n}\n\nfunction IdeasList() {\n const [hasError, setHasError] = useState(false)\n const [hasFetched, setHasFetched] = useState(false)\n const [isDeleting, setIsDeleting] = useState(false)\n const [ideas, setIdeas] = useState([])\n const { i: currentIdea } = decodeQueryString()\n\n useEffect(() => {\n async function fetchIdeas() {\n window.gtag?.('event', 'load', { event_category: 'ideas' })\n try {\n const data = await fetchApi({ location: '/api/ideas_load.ashx', throwOnStatusCodes: [404] })\n const ideas = data.ideas.map((idea: IIdea) => ({\n ...idea,\n instrument: getInstrument(idea.ticker),\n }))\n\n setIdeas(ideas)\n setHasFetched(true)\n } catch {\n setHasError(true)\n }\n }\n\n fetchIdeas()\n }, [])\n\n const onDeleteIdeaClick = useRef(async (idea: IIdea) => {\n if (!window.confirm('Do you really want to delete this idea?')) return\n\n const body = [\n ['id', idea.id],\n ['ticker', idea.ticker],\n ['queryString', document.location.search],\n ['locationPathname', document.location.pathname],\n ['currentIdea', currentIdea],\n ]\n .map((row) => row.join('='))\n .join('&')\n\n setIsDeleting(true)\n\n const response = await fetch('/api/idea_delete.ashx', {\n body,\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n method: 'post',\n })\n\n if (currentIdea === String(idea.id)) {\n window.location.href = response.url\n return\n }\n\n // Check if the page was loaded with the idea which is going to be deleted here\n // If that's the case, refresh the page to remove idea data from the page so when user navigates back to idea page it shows idea 404\n const configIdeaId = window.FinvizChartsSettings?.ideaChart?.idea?.id ?? window.globalChartConfig?.idea?.id\n if (configIdeaId === idea.id) {\n window.location.reload()\n return\n }\n\n setIdeas((ideas) => ideas.filter((stateIdea) => stateIdea.id !== idea.id))\n setIsDeleting(false)\n })\n\n if (!hasFetched || hasError) {\n return (\n \n {hasError ? 'Unexpected error occured, please refresh the page.' : 'Loading…'}\n
\n )\n }\n\n if (ideas.length === 0) {\n return (\n \n No saved ideas.\n \n )\n }\n\n return (\n <>\n {ideas.map((idea) => (\n (document.location = getIdeaUrl(idea))}\n >\n \n
\n {idea.ticker}\n {idea.company && ' - ' + idea.company}\n
\n
\n {idea.date}\n \n {idea.note !== '' ? (\n
{idea.note}
\n ) : null}\n
\n \n ) => {\n ev.stopPropagation()\n onDeleteIdeaClick.current(idea)\n }}\n >\n Delete\n \n
\n \n ))}\n \n )\n}\n\nexport function IdeasDialog(props: any) {\n return (\n \n )\n}\n\nexport async function saveIdea(layoutModel: ChartLayout) {\n const activeChart = layoutModel.activeChart\n const activeChartQuote = activeChart.quote().toJSON()\n const { ticker, instrument, cid } = activeChart\n const period = activeChartQuote.timeframe\n const { ChartSettings } = layoutModel.settings\n const layout: ObjectHash = layoutModel.toObject()\n layout.layout = LayoutType['1h1v']\n layout.barWidth = ChartSettings.center.barWidth\n layout.barMargin = ChartSettings.center.barMargin\n layout.charts = layout.charts\n .filter((c: ObjectHash) => c.chartId === cid)\n .map((c: ObjectHash) => ({ ...c, dateRange: null, refreshData: false }))\n\n delete layout.charts[0].chartId\n\n // TODO: replace with better solution after indicators overhaul\n const getChartTickers = (layoutModelObjectPanes: { elements: { type: string; tickers: string }[] }[]) => {\n let tickers = []\n let tickersString = ''\n for (const pane of layoutModelObjectPanes) {\n for (const element of pane.elements) {\n if (element.type === 'indicators/perf') {\n tickersString = element.tickers\n }\n }\n }\n tickers = tickersString.split(',').filter((item) => item)\n if (!tickers.includes(ticker)) {\n tickers.push(ticker.replace('@', ''))\n }\n return tickers\n }\n const tickers = getChartTickers(layout.charts[0].panes)\n const quotes = Quote.select(\n (quote: Quote) =>\n tickers.includes(quote.ticker) && quote.timeframe === activeChart.timeframe && layoutModel.isIdeaId(quote.ideaID)\n ).filter((element, index, array) => array.findIndex((t) => t.ticker === element.ticker) === index)\n const quotesJsonString = JSON.stringify(quotes.map((q) => omit(q.toJSON(), ['ideaID', 'chartUuid'])))\n\n const chart = JSON.stringify(layout)\n const note =\n layoutModel.idea?.note ||\n getTickerNoteText({ ticker, elements: layoutModel.drawingsInternalStore().elements }) ||\n ''\n window.gtag?.('event', 'save', { event_category: 'ideas' })\n\n if (tickers.length !== quotes.length) {\n captureException(new Error('Idea saved with inconsistent quotes data'), {\n extra: {\n tickers,\n quoteTickersTimeframes: quotes.map((quote) => ({ ticker: quote.ticker, timeframe: quote.timeframe })),\n chartLayout: layoutModel.toConfig(['colors', 'panes']),\n },\n })\n }\n\n const data = await fetchApi<{ id: string }>({\n location: '/api/idea_save.ashx',\n method: 'POST',\n body: getFormDataFromObject({ ticker, period, chart, quotes: quotesJsonString, note }),\n })\n\n const ideaUrl = getIdeaUrl({\n ticker,\n period,\n instrument,\n id: data.id,\n })\n\n if (process.env.IS_E2E_TESTING) {\n window.location.href = ideaUrl\n } else {\n // need to be in setTimeout because Safari block any call to window.open made in async,\n // this is hack to force run window.open in main thread\n setTimeout(() => {\n window.open(ideaUrl, 'FinvizSavedIdea')\n })\n }\n}\n","import classnames from 'classnames'\nimport * as React from 'react'\n\nimport {\n Button,\n DialogTrigger,\n Dropdown,\n DropdownItem,\n Spinner,\n Tooltip,\n TooltipTrigger,\n useDialogState,\n useDropdownState,\n useTooltipState,\n} from '../../components'\nimport { IdeasDialog, saveIdea } from '../../modals/ideas'\nimport ChartLayout from '../../models/chart_layout'\nimport Quote from '../../models/quote'\nimport { getIsMobileScreenSize } from '../../utils'\n\nexport function IdeasDropdown({\n model,\n rounding,\n theme = 'headerItem',\n dropdownButtonClassName,\n}: {\n model: ChartLayout\n rounding?: 'none' | 'regular'\n theme?: string\n dropdownButtonClassName?: string\n}) {\n const tooltipState = useTooltipState({ placement: 'right-start' })\n const [isAnyQuoteLoading, setIsAnyQuoteLoading] = React.useState(false)\n const ref = React.useRef(null)\n const dialog = useDialogState()\n const dropdown = useDropdownState()\n const hideTooltip = tooltipState.hide\n\n React.useEffect(() => {\n const checkIfAnyQuoteIsLoading = () => {\n const fetchingQuotes = Quote.select((quote) => quote.isFetching && quote.fetchedAt === -1)\n setIsAnyQuoteLoading(fetchingQuotes.length > 0)\n }\n\n Quote.bind('change', checkIfAnyQuoteIsLoading)\n return () => {\n Quote.unbind('change', checkIfAnyQuoteIsLoading)\n }\n }, [])\n\n React.useEffect(() => {\n if (!isAnyQuoteLoading || !dropdown.visible) {\n hideTooltip()\n }\n }, [isAnyQuoteLoading, dropdown.visible, hideTooltip])\n\n return (\n <>\n \n Ideas\n \n }\n >\n {\n if (isAnyQuoteLoading) {\n tooltipState.show()\n return\n }\n saveIdea(model)\n }}\n >\n Save idea\n \n \n Load idea\n \n \n \n \n \n \n
\n \n Some data is still loading. Please wait.\n \n \n \n )\n}\n","import classNames from 'classnames'\nimport * as React from 'react'\n\nimport { Button, Delayed, Icon, Spinner, useTour } from '../../components'\nimport { SpecificChartFunctionality } from '../../constants/common'\nimport { getRequestFullscreen, isRedesignEnabled } from '../../utils'\n\ninterface TourDefinition {\n id: string\n steps: Array<{\n title?: React.ReactNode\n body: React.ReactNode\n target?: string\n placement?: string\n overlayRadius?: number\n overlayPadding?: number\n }>\n skip?: boolean\n}\n\n// If we need to update / discontinue some tour we can use skip flag on legacy version to ensure that it won't reset users tour but won't include it in new tours\nconst getTour = (page: SpecificChartFunctionality): TourDefinition[] => [\n {\n id: 'chart-tour',\n steps: [\n {\n title: 'Chart Tour',\n body: 'Discover powerful Chart features in the 2-min tour to master your analysis of trading opportunities.',\n },\n {\n title: 'Scale the Timeline',\n body: 'Grab the timeline to zoom it in and out. Double-click the timeline to reset the scaling.',\n target: '[data-testid=\"chart-0-pane-0-zoomer\"]',\n },\n {\n title: 'Scale the Price Axis',\n body: 'Grab the Price Axis to zoom it in and out. Move the chart around freely in any direction when Price Axis has custom scale. Double-click the Price Axis to reset the scaling.',\n target: '[data-testid=\"chart-0-pane-0-scaler\"]',\n },\n {\n title: 'Drawing tools & settings',\n body: 'Pick any Drawing Tool to analyze the market. Tailor your drawing experience with additional settings.',\n target: '#toolbar',\n },\n {\n title: 'Fine-tune Drawings',\n body: 'Double-click on a chart drawing to tweak its color and style. Right-click on a drawing to access other options, such as changing its visibility, order, and more.',\n target: '[data-testid=\"chart-0-pane-0\"]',\n },\n {\n title: 'Save your best Ideas',\n body: 'Besides your drawings being autosaved, you can manually save ideas that you wish to revisit later.',\n target: '[data-testid=\"chart-toolbar-ideas\"]',\n },\n ...(page === SpecificChartFunctionality.quotePage\n ? []\n : [\n {\n title: 'Chart Layouts & Charts Sync',\n body: 'Switch between Chart Layouts to view multiple charts on your screen. Synchronize Ticker, Timeframe or Crosshair position across your charts.',\n target: '[data-testid=\"chart-layout-layout\"]',\n },\n ]),\n ...(!getRequestFullscreen(document.documentElement) && page === SpecificChartFunctionality.chartPage\n ? []\n : [\n {\n title: 'Fullscreen mode',\n body:\n page === SpecificChartFunctionality.quotePage\n ? 'Open the chart in an expanded view for full-page display and split-screen charts.'\n : 'Toggle the window to fill your entire screen.',\n target: '[data-testid=\"chart-layout-fullscreen\"]',\n },\n ]),\n {\n title: 'Publish chart',\n body: 'Publish a chart together with your analysis and ideas.',\n target: '[data-testid=\"chart-toolbar-publish\"]',\n overlayPadding: page === SpecificChartFunctionality.quotePage ? 3 : undefined,\n },\n ...(isRedesignEnabled() || page === SpecificChartFunctionality.chartPage\n ? [\n {\n title: 'Theme',\n body: 'Switch between the Light and Dark theme.',\n target: '[data-testid=\"chart-layout-theme\"]',\n },\n ]\n : []),\n {\n title: 'Study Settings',\n body: 'Customize the Chart Type and appearance. Add Overlays, Indicators and toggle Extended Hours.',\n target: '[data-testid=\"chart-settings-open-btn\"]',\n },\n ],\n },\n]\n\nexport function TourButton({\n page,\n rounding,\n theme,\n dropdownButtonClassName,\n}: {\n page: SpecificChartFunctionality\n rounding?: 'none' | 'regular'\n theme?: string\n dropdownButtonClassName?: string\n}) {\n const tour = useTour()\n const pageTours = getTour(page)\n const [userTour, setCurrentTour] = React.useState(tour.getStepsForUser(pageTours))\n\n return (\n }>\n \n \n ) : (\n \n )\n }\n className={classNames(dropdownButtonClassName, {\n 'mobile:hidden': !!dropdownButtonClassName,\n 'is-primary !mr-[5px]': userTour.hasNewTours && page === SpecificChartFunctionality.quotePage,\n })}\n contentClass={page !== SpecificChartFunctionality.quotePage ? 'hidden lg:flex' : ''}\n title=\"Explore new features\"\n onClick={async () => {\n if (userTour) {\n const activeTour = await tour.startTour(userTour.tour)\n activeTour?.once('inactive', () => {\n setCurrentTour(tour.getStepsForUser(pageTours))\n })\n }\n }}\n >\n Chart tour\n \n )\n}\n","import React from 'react'\n\nimport ChartLayout from '../models/chart_layout'\nimport { IdeasDropdown } from './header/ideas_dropdown'\nimport { TourButton } from './header/tour_button'\n\ninterface NoticeProps {\n layoutModel: ChartLayout\n handleAddNote: () => void\n}\n\nexport default function Notice(props: NoticeProps) {\n return (\n \n
\n
\n {window.FinvizSettings.hasUserPremium && (\n // eslint-disable-next-line jsx-a11y/anchor-is-valid\n
{\n e.preventDefault()\n props.handleAddNote()\n }}\n data-testid=\"charts-notice-ideas-add-note-btn\"\n >\n + Add a note\n \n )}\n \n
\n \n
\n