>(() => {})\n\nexport function withElementStyleDialogState(Component: React.ComponentType
) {\n return function WrappedComponent(props: P) {\n const context = React.useContext(ElementStyleDialogContext)\n\n return (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","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 React from 'react'\n\nimport { ObjectHash } from '../../../types/shared'\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']\n\nexport function useChartLayoutGlobalModel() {\n const [state, setState] = useGlobalState(chartLayoutGlobalState)\n const getIsConfigChanged = () =>\n JSON.stringify(state.chartLayoutModelConfigSnapshotToCompare) !==\n JSON.stringify(state.chartLayoutModel?.toConfig(CONFIG_PROPS_TO_OMIT) ?? null)\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: chartLayoutModel.toConfig(CONFIG_PROPS_TO_OMIT),\n })\n },\n generateNewLayoutModelConfigSnapshot: () => {\n if (state.chartLayoutModel) {\n setState({\n chartLayoutModelConfigSnapshot: state.chartLayoutModel.toConfig(),\n chartLayoutModelConfigSnapshotToCompare: state.chartLayoutModel.toConfig(CONFIG_PROPS_TO_OMIT),\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 { 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()) {\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 })\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.quotePage) {\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 encodeSearchString = encodeQueryString({ ...decodeQueryString(), ty: getQuoteUrlChartType(chartType) })\n document.location = `/quote.ashx?${encodeSearchString}`\n }\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 if (!indicatorElement) return\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\nexport const handleAddIndicatorPane = ({\n chartLayoutModel,\n indicatorElements,\n}: {\n chartLayoutModel: ChartLayoutModel\n indicatorElements?: Array & { type: IndicatorType }>\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 isFirstPane: false,\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 = [\n { height: PANE_HEIGHT_DEFAULT.indicator, elements: [{ type: IndicatorType.Rsi, period: '14' }] },\n ]\n if (chartLayoutModel.specificChartFunctionality === SpecificChartFunctionality.featuresPage) {\n DEFAULT_INDICATORS.unshift({\n height: PANE_HEIGHT_DEFAULT.indicator,\n elements: [{ type: IndicatorType.Cot, period: '' }],\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 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 { IModalConfigInput, Position } from '../../../../types/shared'\nimport { Button, ButtonGroup, Icon, InnerState, Label, Select, SelectOption, TooltipInput } from '../../../components'\nimport { IndicatorType, SpecificChartFunctionality } from '../../../constants/common'\nimport Indicator from '../../../indicators/indicator'\nimport { indicatorsByType } from '../../../indicators/indicators'\nimport { useForceUpdate } from '../../../utils/force-update'\nimport { useChartLayoutGlobalModel } from '../chart-layout-model'\nimport { handleAddIndicatorPane, handleIndicatorReplace, handleRemoveIndicatorPane } from './model-manipulation'\n\ninterface IIndicatorType {\n value: IndicatorType\n label: string\n}\n\ninterface IIndicatorsValue {\n elementInstance: Indicator\n position: Position\n paneIndex: number\n paneId: string\n}\n\nconst INDICATOR_LIST_PROPS = { className: 'overflow-y-auto max-h-80 ' } // temp solution to page stretching if max-h not provided\n\nexport function IndicatorsSelect() {\n const { forceUpdate } = useForceUpdate()\n const { chartLayoutModel } = useChartLayoutGlobalModel()\n const indicators: IIndicatorsValue[] = []\n\n // Re-render of this component is controlled by forceUpdate()\n // We can't use memo because we need to run it on every time we call forceUpdate,\n // if it is a memo its only dependency is chartLayoutModel and object reference never change so memo won't update\n let chartIndex: number\n chartLayoutModel\n ?.charts()\n .first()\n ?.getAllPanes()\n .forEach((pane, paneIndex) => {\n pane.getAllElements().forEach((element) => {\n if (element.isChart()) {\n chartIndex = paneIndex\n }\n if (element.isIndicator()) {\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 paneId: pane.id,\n })\n }\n })\n })\n indicators.sort((a, b) => Number(a.paneId.replace('c-', '')) - Number(b.paneId.replace('c-', '')))\n\n const DEFAULT_INDICATORS = React.useMemo(() => {\n if (!chartLayoutModel) return []\n const isFeaturesPage = chartLayoutModel.specificChartFunctionality === SpecificChartFunctionality.featuresPage\n const ignoredIndicators = [IndicatorType.None, IndicatorType.Indicator, !isFeaturesPage && IndicatorType.Cot]\n\n return Object.keys(indicatorsByType)\n .filter((item) => !ignoredIndicators.filter(Boolean).includes(item as IndicatorType))\n .map((item) => ({ value: item as IndicatorType, label: indicatorsByType[item as IndicatorType].label }))\n }, [chartLayoutModel])\n\n const onIndicatorSelect = React.useCallback(\n ({ value, paneIndex }: { value: IndicatorType; paneIndex: number }) => {\n if (chartLayoutModel) {\n handleIndicatorReplace({ value, paneIndex, chartLayoutModel })\n forceUpdate()\n }\n },\n [chartLayoutModel, forceUpdate]\n )\n\n const onIndicatorDelete = React.useCallback(\n (paneIndex: number) => {\n if (chartLayoutModel) {\n handleRemoveIndicatorPane({ paneIndex, chartLayoutModel })\n forceUpdate()\n }\n },\n [chartLayoutModel, forceUpdate]\n )\n\n const onIndicatorAdd = React.useCallback(() => {\n if (chartLayoutModel) {\n handleAddIndicatorPane({ chartLayoutModel })\n // because of race condition if we call forceUpdate without timeout new select won't appear in setting dialog\n setTimeout(() => forceUpdate())\n }\n }, [chartLayoutModel, forceUpdate])\n\n const onIndicatorValueChange = ({\n value,\n paneIndex,\n indicatorInput,\n }: {\n value: string\n paneIndex: number\n indicatorInput: IModalConfigInput\n }) => {\n if (chartLayoutModel) {\n const charts = chartLayoutModel.getAllCharts()\n charts.forEach((chart) => {\n const indicatorElement = chart\n .getAllPanes()\n [paneIndex].getAllElements()\n .find((el) => el.isIndicator())\n if (!indicatorElement) return\n indicatorElement.instance.set({\n [indicatorInput.name]: indicatorInput.type === 'number' ? Number(value) : value,\n })\n })\n }\n }\n\n const onIndicatorPositionChange = React.useCallback(\n ({ direction, paneIndex, currentPosition }: { direction: string; paneIndex: number; currentPosition: string }) => {\n if (chartLayoutModel && currentPosition !== direction) {\n const charts = chartLayoutModel.getAllCharts()\n charts.forEach((chart) => {\n const panes = chart.getAllPanes()\n if (direction === Position.Above) {\n panes[paneIndex].move(Position.Above)\n }\n\n if (direction === Position.Below) {\n panes[paneIndex].move(Position.Below)\n }\n })\n\n forceUpdate()\n }\n },\n [chartLayoutModel, forceUpdate]\n )\n\n if (!chartLayoutModel) return null\n\n return (\n <>\n \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 {\n onIndicatorPositionChange({ direction: Position.Above, paneIndex, currentPosition: position })\n }}\n >\n {\n onIndicatorPositionChange({\n direction: Position.Below,\n paneIndex,\n currentPosition: position,\n })\n }}\n >\n \n onIndicatorDelete(paneIndex)}\n >\n \n Indicators\n \n )}\n \n )\n}\n","import classnames from 'classnames'\nimport * as React from 'react'\n\nimport { IModalConfigInput } from '../../../../types/shared'\nimport BaseChart from '../../../charts/base_chart'\nimport {\n Button,\n ButtonColorPicker,\n Icon,\n InnerState,\n Label,\n Select,\n SelectOption,\n TooltipInput,\n} from '../../../components'\nimport { OverlayType } from '../../../constants/common'\nimport Element from '../../../models/element'\nimport { overlaysByType } from '../../../overlays/overlays'\nimport { isForexFuturesCryptoPage } from '../../../utils/chart'\nimport { useForceUpdate } from '../../../utils/force-update'\nimport { useChartLayoutGlobalModel } from '../chart-layout-model'\nimport {\n handleAddOverlayElement,\n handleOverlayReplace,\n handleRemoveOverlayElement,\n handleUpdateOverlayAttributes,\n} from './model-manipulation'\n\nexport interface IOverlayType {\n value: OverlayType\n label: string\n}\n\nexport function OverlaysSelect() {\n const { forceUpdate } = useForceUpdate()\n const { chartLayoutModel } = useChartLayoutGlobalModel()\n const chartElementInstance = chartLayoutModel\n ?.charts()\n .first()\n ?.getAllElements()\n .find((element: Element) => element.isChart())?.instance as BaseChart\n const chartElementOverlays = chartElementInstance?.overlays\n const HIDDEN_OVERLAY_OPTIONS =\n chartElementOverlays\n ?.filter((item) => [OverlayType.Patterns, OverlayType.Vwap].includes(item.type))\n .map((item) => item.type) ?? []\n\n const DEFAULT_OVERLAYS = React.useMemo(() => {\n if (!chartLayoutModel) return []\n const ignoredOverlays = [OverlayType.Overlay, OverlayType.None, OverlayType.Ema2, OverlayType.Sma2]\n if (isForexFuturesCryptoPage(chartLayoutModel.specificChartFunctionality)) {\n ignoredOverlays.push(OverlayType.Patterns, OverlayType.Vwap)\n }\n\n return Object.keys(overlaysByType)\n .filter((item) => !ignoredOverlays.includes(item as OverlayType))\n .map((item) => ({ value: item as OverlayType, label: overlaysByType[item as OverlayType].label }))\n }, [chartLayoutModel])\n\n const onOverlaySelect = React.useCallback(\n ({ overlayType, overlayIndex }: { overlayType: OverlayType; overlayIndex: number }) => {\n if (chartLayoutModel) {\n const hasPatterns =\n chartElementInstance?.overlays.findIndex((overlay) => overlay.type === OverlayType.Patterns) !== -1\n const hasVWAP = chartElementInstance?.overlays.findIndex((overlay) => overlay.type === OverlayType.Vwap) !== -1\n\n if ((hasPatterns && overlayType === OverlayType.Patterns) || (hasVWAP && overlayType === OverlayType.Vwap)) {\n return\n }\n\n handleOverlayReplace({ overlayType, overlayIndex, chartLayoutModel })\n forceUpdate()\n }\n },\n [chartLayoutModel, forceUpdate, chartElementInstance?.overlays]\n )\n\n const onOverlayDelete = React.useCallback(\n (overlayIndex: number) => {\n if (chartLayoutModel) {\n handleRemoveOverlayElement({ overlayIndex, chartLayoutModel })\n forceUpdate()\n }\n },\n [chartLayoutModel, forceUpdate]\n )\n\n const onOverlayAdd = React.useCallback(() => {\n if (chartLayoutModel) {\n handleAddOverlayElement({ chartLayoutModel })\n forceUpdate()\n }\n }, [chartLayoutModel, forceUpdate])\n\n const onOverlayPeriodChange = ({\n value,\n overlayIndex,\n overlayInput,\n }: {\n value: string\n overlayIndex: number\n overlayInput: IModalConfigInput\n }) => {\n if (chartLayoutModel) {\n handleUpdateOverlayAttributes({\n chartLayoutModel,\n overlayIndex,\n attrs: { [overlayInput.name]: Number(value) },\n })\n }\n }\n\n const onOverlayColorChange = ({\n color,\n overlayIndex,\n overlayInput,\n }: {\n color: IModalConfigInput[]\n overlayIndex: number\n overlayInput: IModalConfigInput[]\n }) => {\n if (chartLayoutModel) {\n handleUpdateOverlayAttributes({\n chartLayoutModel,\n overlayIndex,\n attrs: { [overlayInput[0].name]: color[0].color },\n })\n }\n }\n\n const getParsedInputs = (inputsArray: IModalConfigInput[]) => {\n const otherInputs: IModalConfigInput[] = []\n const colorInputs: IModalConfigInput[] = []\n\n inputsArray?.forEach((input) => {\n if (input.type === 'color') {\n colorInputs.push(input)\n } else {\n otherInputs.push(input)\n }\n })\n\n return {\n otherInputs,\n colorInputs: colorInputs.map((input) => ({ ...input, color: input.value as string })),\n }\n }\n\n if (!chartLayoutModel) return null\n\n return (\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 onOverlayColorChange({ color, overlayIndex, overlayInput: colorInputs })\n }\n />\n )}\n onOverlayDelete(overlayIndex)}\n >\n \n Overlays\n \n )}\n \n )\n}\n","export enum SettingsTab {\n Chart = 'chart',\n Colors = 'colors',\n}\nexport interface ChartTabComponentProps {\n onSubmit: () => void\n onClose: () => void\n onChangeSettingsTab: (tab: SettingsTab) => void\n}\n\nexport const COMMON_FOOTER_BUTTON_PROPS = {\n size: 'medium',\n theme: 'transparent',\n rightContent: 'arrowForward',\n}\n","import React from 'react'\n\nimport { Instrument, ObjectHash } from '../../../types/shared'\nimport { IChartThemeColors } from '../../models/constants'\nimport fetchApi from '../../utils/fetch_api'\n\ntype SettingsReqData = Partial<{\n colors: { light: Partial; dark: Partial }\n settings: ObjectHash\n instrument: Instrument\n}>\n\nasync function saveSettingsApiRequest({ colors, settings, instrument }: SettingsReqData) {\n try {\n await fetchApi({\n location: '/api/settings_submit.ashx',\n method: 'POST',\n throwOnStatusCodes: [404],\n body: new URLSearchParams(\n colors\n ? { colors: JSON.stringify(colors) }\n : { settings: JSON.stringify(settings), instrument: instrument ?? '' }\n ),\n contentType: 'application/x-www-form-urlencoded',\n })\n window.gtag?.('event', 'save', { event_category: 'settings', event_label: colors ? 'colors' : 'studies' })\n } catch {\n // ignore error\n }\n}\n\nexport function useSaveSettings() {\n const [isSaving, setIsSaving] = React.useState(false)\n\n const saveSettings = React.useCallback(async (settings: SettingsReqData) => {\n setIsSaving(true)\n await saveSettingsApiRequest(settings)\n setIsSaving(false)\n }, [])\n\n return React.useMemo(() => ({ isSaving, saveSettings }), [isSaving, saveSettings])\n}\n","import React from 'react'\n\nimport { Button, ConfirmationDialog, useDialogState } from '../../components'\nimport { useChartLayoutGlobalModel } from './chart-layout-model'\n\ninterface Props {\n children: (props: { checkForUnsavedChangesAndClose: () => void }) => React.ReactElement\n onHide: () => void\n}\n\nexport function PreventClosingUnsavedChanges({ children, onHide }: Props) {\n const { forceGlobalRerender, getIsConfigChanged } = useChartLayoutGlobalModel()\n const confirmationDialogState = useDialogState()\n\n const checkForUnsavedChangesAndClose = () => {\n if (getIsConfigChanged()) {\n confirmationDialogState.show()\n } else {\n onHide()\n }\n }\n\n const discardChangesAndHide = () => {\n confirmationDialogState.hide()\n onHide()\n forceGlobalRerender()\n }\n\n return (\n <>\n {children({ checkForUnsavedChangesAndClose })}\n \n confirmationDialogState.hide()}>\n Cancel\n \n \n Discard changes\n \n \n }\n >\n Are you sure you want to discard changes?\n \n \n )\n}\n","import React from 'react'\n\nimport { Button, ConfirmationDialog, Icon, useDialogState } from '../../components'\nimport { COMMON_FOOTER_BUTTON_PROPS } from './constants'\nimport { PreventClosingUnsavedChanges } from './prevent-closing-unsaved-changes'\n\ninterface SettingsActionFooterProps {\n onActionButtonClick?: (e: React.FormEvent) => Promise\n actionButtonFormId?: string\n isActionPending?: boolean\n tabButtonTestId?: string\n\n onSettingsReset: () => void\n resetSettingsButtonLabel: string\n\n settingsTabButtonIconName: string\n settingsTabButtonLabel: React.ReactNode\n onSettingsTabButtonClick: () => void\n\n resetConfirmationTitle: string\n resetConfirmationText: string\n}\n\nexport function SettingsActionFooter({\n actionButtonFormId,\n tabButtonTestId,\n resetSettingsButtonLabel,\n settingsTabButtonIconName,\n settingsTabButtonLabel,\n resetConfirmationTitle,\n resetConfirmationText,\n isActionPending = false,\n onSettingsReset,\n onActionButtonClick,\n onSettingsTabButtonClick,\n}: SettingsActionFooterProps) {\n const confirmationDialogState = useDialogState()\n\n return (\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\n
\n confirmationDialogState.hide()}>\n Cancel\n \n {\n onSettingsReset()\n confirmationDialogState.hide()\n }}\n theme=\"red\"\n >\n Confirm\n \n \n }\n >\n {resetConfirmationText}\n \n ) => {\n e.preventDefault()\n if (e.currentTarget.checkValidity() && chartLayoutModel) {\n if (!isChartModelValid(chartLayoutModel)) {\n forceUpdate()\n return\n }\n\n const { instrument, settings } = getObjForSubmit(chartLayoutModel)\n await saveSettings({ instrument, settings })\n\n // We use the object during the app lifecycle, not only on init, so we have to keep it in sync\n if (window.FinvizSettings?.TA) {\n window.FinvizSettings.TA = settings\n }\n generateNewLayoutModelConfigSnapshot()\n onClose()\n\n handleUrlUpdateOnSettingsSave(chartLayoutModel)\n }\n },\n [chartLayoutModel, generateNewLayoutModelConfigSnapshot, forceUpdate, onClose, saveSettings]\n )\n\n if (!chartLayoutModel) return null\n\n return (\n \n \n Study Settings\n \n \n \n \n \n \n Customize Chart Colors \n Colors \n \n }\n settingsTabButtonIconName=\"palette\"\n tabButtonTestId=\"chart-colors-tab-button\"\n onSettingsTabButtonClick={() => {\n onChangeSettingsTab(SettingsTab.Colors)\n }}\n onSettingsReset={() => {\n handleRestoreDefault({ chartLayoutModel, forceUpdate })\n window.gtag?.('event', 'restore-default', { event_category: 'settings', event_label: 'studies' })\n }}\n />\n \n \n )\n}\n","import React from 'react'\n\nimport { Theme } from '../../../types/shared'\nimport { ButtonColorPicker, DialogBody, DialogFooter, DialogHeader, InnerState } from '../../components'\nimport ChartLayoutModel from '../../models/chart_layout'\nimport { IChartThemeColors, chartDarkTheme, chartLightTheme } from '../../models/constants'\nimport { getChartLayoutSettings } from '../../models/settings'\nimport { useForceUpdate } from '../../utils/force-update'\nimport { useChartLayoutGlobalModel } from './chart-layout-model'\nimport { ChartTabComponentProps, SettingsTab } from './constants'\nimport { useSaveSettings } from './save-settings'\nimport { SettingsActionFooter } from './settings-action-footer'\n\nconst editableColorGroups: Array<{\n title: string\n colors: Array<{\n label: string\n colorKeys: Array\n canSelectAlpha: boolean\n }>\n}> = [\n {\n title: 'Candle, Heikin Ashi',\n colors: [\n { label: 'Body', colorKeys: ['trendUp', 'trendDown'], canSelectAlpha: true },\n { label: 'Borders', colorKeys: ['borderUp', 'borderDown'], canSelectAlpha: true },\n { label: 'Wick', colorKeys: ['wickUp', 'wickDown'], canSelectAlpha: true },\n ],\n },\n {\n title: 'Hollow Candle, OHLC',\n colors: [{ label: 'Body', colorKeys: ['ohlcTrendUp', 'ohlcTrendDown'], canSelectAlpha: false }],\n },\n {\n title: 'Line Chart',\n colors: [\n { label: 'Line', colorKeys: ['line'], canSelectAlpha: true },\n { label: 'Area fill', colorKeys: ['background'], canSelectAlpha: true },\n ],\n },\n {\n title: 'General',\n colors: [\n { label: 'Background', colorKeys: ['canvasFill'], canSelectAlpha: false },\n { label: 'Grid line', colorKeys: ['grid'], canSelectAlpha: true },\n { label: 'Pre-market Overlay', colorKeys: ['premarketFade'], canSelectAlpha: true },\n { label: 'After-market Overlay', colorKeys: ['aftermarketFade'], canSelectAlpha: true },\n ],\n },\n]\nconst customColorKeys = editableColorGroups.flatMap(({ colors }) => colors.flatMap(({ colorKeys }) => colorKeys))\n\nfunction getCustomColors(chartLayoutModel: ChartLayoutModel) {\n const settings = getChartLayoutSettings(chartLayoutModel)\n const layoutModelColors = settings.ChartSettings.general.Colors\n\n return {\n [Theme.light]: Object.entries(layoutModelColors.light!).reduce>(\n (acc, [key, value]) =>\n customColorKeys.includes(key as keyof IChartThemeColors) ? { ...acc, [key]: value } : acc,\n {}\n ),\n [Theme.dark]: Object.entries(layoutModelColors.dark!).reduce>(\n (acc, [key, value]) =>\n customColorKeys.includes(key as keyof IChartThemeColors) ? { ...acc, [key]: value } : acc,\n {}\n ),\n }\n}\n\nconst defaultColors = {\n [Theme.light]: Object.entries(chartLightTheme).reduce>(\n (acc, [key, value]) => (customColorKeys.includes(key as keyof IChartThemeColors) ? { ...acc, [key]: value } : acc),\n {}\n ),\n [Theme.dark]: Object.entries(chartDarkTheme).reduce>(\n (acc, [key, value]) => (customColorKeys.includes(key as keyof IChartThemeColors) ? { ...acc, [key]: value } : acc),\n {}\n ),\n}\n\nexport function ColorsTab({ onClose, onChangeSettingsTab }: ChartTabComponentProps) {\n const { forceUpdate, forceUpdateKey } = useForceUpdate()\n const { isSaving, saveSettings } = useSaveSettings()\n const { chartLayoutModel, generateNewLayoutModelConfigSnapshot } = useChartLayoutGlobalModel()\n\n const handleColorChange = React.useCallback(\n ({ theme, colorKey, color }: { theme: Theme; colorKey: keyof IChartThemeColors; color: string }) => {\n if (chartLayoutModel) {\n chartLayoutModel.settings.ChartSettings.general.Colors![theme]![colorKey] = color\n chartLayoutModel.save()\n chartLayoutModel.trigger('theme')\n }\n },\n [chartLayoutModel]\n )\n\n const setDefaultColors = React.useCallback(async () => {\n if (chartLayoutModel) {\n chartLayoutModel.settings.ChartSettings.general.Colors = {\n ...chartLayoutModel.settings.ChartSettings.general.Colors,\n [Theme.light]: {\n ...chartLayoutModel.settings.ChartSettings.general.Colors[Theme.light],\n ...defaultColors[Theme.light],\n },\n [Theme.dark]: {\n ...chartLayoutModel.settings.ChartSettings.general.Colors[Theme.dark],\n ...defaultColors[Theme.dark],\n },\n }\n chartLayoutModel.save()\n chartLayoutModel.trigger('theme')\n forceUpdate()\n window.gtag?.('event', 'restore-default', { event_category: 'settings', event_label: 'colors' })\n }\n }, [chartLayoutModel, forceUpdate])\n\n const handleSubmit = React.useCallback(async () => {\n if (chartLayoutModel) {\n await saveSettings({ colors: getCustomColors(chartLayoutModel) })\n generateNewLayoutModelConfigSnapshot()\n onClose()\n }\n }, [chartLayoutModel, generateNewLayoutModelConfigSnapshot, onClose, saveSettings])\n\n if (!chartLayoutModel) {\n return null\n }\n return (\n \n \n Chart colors\n \n \n {editableColorGroups.map(({ title, colors }) => (\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 \n \n Adjust Study Settings \n Study Settings \n \n }\n settingsTabButtonIconName=\"settingsWheel\"\n tabButtonTestId=\"chart-settings-tab-button\"\n isActionPending={isSaving}\n onSettingsTabButtonClick={() => {\n onChangeSettingsTab(SettingsTab.Chart)\n }}\n onActionButtonClick={handleSubmit}\n onSettingsReset={setDefaultColors}\n />\n \n \n )\n}\n","import React from 'react'\n\nimport { useChartLayoutGlobalModel } from './chart-layout-model'\nimport { ChartTab } from './chart-tab'\nimport { ColorsTab } from './colors-tab'\nimport { SettingsTab } from './constants'\n\ninterface ChartSettingsProps {\n onSubmit: () => void\n onClose: () => void\n onActiveSettingsTabChange?: (settingsComponent: SettingsTab) => void\n activeSettingsTab?: SettingsTab\n}\n\nexport function ChartSettings({\n activeSettingsTab = SettingsTab.Chart,\n onSubmit,\n onClose,\n onActiveSettingsTabChange,\n}: ChartSettingsProps) {\n const { generateNewLayoutModelConfigSnapshot } = useChartLayoutGlobalModel()\n const [activeTab, setActiveTab] = React.useState(activeSettingsTab)\n const ActiveComponent = React.useMemo(() => {\n if (activeTab === SettingsTab.Colors) {\n return ColorsTab\n }\n\n return ChartTab\n }, [activeTab])\n\n const handleChangeSettingsComponent = React.useCallback(\n (settingsType: SettingsTab) => {\n onActiveSettingsTabChange?.(settingsType)\n setActiveTab(settingsType)\n },\n [onActiveSettingsTabChange]\n )\n\n React.useEffect(() => {\n generateNewLayoutModelConfigSnapshot()\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n return = []\n chartLayout.getAllPanes().forEach((paneModel) => {\n const ticker = getTicker(paneModel)\n const containerType = getContainerType(paneModel)\n if (!tickers.includes(ticker)) {\n tickers.push(ticker)\n }\n if (!containerTypes.includes(containerType)) {\n containerTypes.push(containerType)\n }\n })\n return { tickers, containerTypes }\n}\n\nexport function mergeUpdatedDrawingsToInternalStore({\n updatedDrawings,\n currentInternalStore,\n lastUpdateTimestamp,\n}: {\n updatedDrawings: AutoSaveElement[]\n currentInternalStore: AutoSaveElement[]\n lastUpdateTimestamp: DrawingChangeTimestamp\n}) {\n let newLastUpdateTimestamp = lastUpdateTimestamp\n const newInternalStore = [...currentInternalStore]\n const updatedElementIds: string[] = []\n\n updatedDrawings.forEach((drawing) => {\n newLastUpdateTimestamp = receiveHlc(newLastUpdateTimestamp, drawing.lastChange)\n const drawingIndex = newInternalStore.findIndex(({ elementId }) => drawing.elementId === elementId)\n\n if (drawingIndex === -1) {\n newInternalStore.push(drawing)\n updatedElementIds.push(drawing.elementId)\n } else if (compareHlc(newInternalStore[drawingIndex].lastChange, drawing.lastChange) < 0) {\n newInternalStore[drawingIndex] = drawing\n updatedElementIds.push(drawing.elementId)\n }\n })\n return { newLastUpdateTimestamp, newInternalStore, updatedElementIds }\n}\n\nexport function getInitialStoreDrawings(): null | AutoSaveElement[] {\n const initialDrawings = (\n window.FinvizSettings?.initialDrawingsStore ?? window.FinvizChartsSettings?.initialDrawingsStore\n )?.drawings as null | AutoSaveElementDBRecord[]\n\n return initialDrawings?.map((item) => ({ ...item, lastChange: parseHlc(item.lastChange) })) ?? null\n}\n\nexport function handleCallMethodOnAllDrawings({\n chartLayoutModel,\n elementMehtod,\n}: {\n chartLayoutModel: ChartLayout\n elementMehtod: keyof Pick\n}) {\n chartLayoutModel.getAllElements().forEach((element) => {\n if (element.isDrawing()) {\n element[elementMehtod]()\n }\n })\n}\n","import React from 'react'\n\nimport fetchApi, { ContentType, InternalServerError } from '../../utils/fetch_api'\nimport { getUuid } from '../../utils/helpers'\nimport { HLC, compareHlc, incrementHlc, parseHlc, serializeHlc } from '../../utils/hlc'\nimport { getByteLengthOfString } from '../../utils/string-byte-length'\nimport { AutoSaveElement, DrawingContainerType } from './constants'\n\nconst RETRY_LIMIT = 5\n\nexport function useDrawingAutoSaveApi() {\n const postRetryCountRef = React.useRef(0)\n const deleteRetryCountRef = React.useRef(0)\n\n const fetchDrawings = React.useCallback(\n async ({\n tickers,\n containerTypes,\n lastChange,\n }: {\n tickers: string[]\n containerTypes: DrawingContainerType[]\n lastChange: string\n }) => {\n try {\n const data = await fetchApi<{ drawings: Array & { lastChange: string }> }>({\n location: '/api/auto_save.ashx',\n queryParameters: {\n ticker: tickers.join(','),\n containerTypes: containerTypes.join(',') || undefined,\n lastChange,\n },\n throwOnStatusCodes: [404],\n })\n return data.drawings.map((drawing) => ({ ...drawing, lastChange: parseHlc(drawing.lastChange) }))\n } catch {\n // ignore error\n }\n\n return []\n },\n []\n )\n\n const saveDrawings = React.useCallback(async (drawings: AutoSaveElement[]): Promise => {\n try {\n const bodyJsonString = JSON.stringify(\n drawings.map((item) => ({\n ...item,\n elementAttrs: JSON.stringify(item.elementAttrs),\n lastChange: serializeHlc(item.lastChange),\n }))\n )\n let keepalive = false\n try {\n keepalive = getByteLengthOfString(bodyJsonString) < 64000\n } catch (error: any) {\n window.Sentry?.captureException(error)\n }\n await fetchApi({\n location: '/api/auto_save.ashx',\n method: 'POST',\n throwOnStatusCodes: [404, 500],\n contentType: ContentType.ApplicationJson,\n body: bodyJsonString,\n keepalive,\n })\n const latestChangeHlc = [...drawings].sort((a, b) => compareHlc(b.lastChange, a.lastChange))[0]\n postRetryCountRef.current = 0\n return latestChangeHlc.lastChange\n } catch (error) {\n if (error instanceof InternalServerError) {\n if (postRetryCountRef.current < RETRY_LIMIT) {\n postRetryCountRef.current = postRetryCountRef.current + 1\n await new Promise((r) => setTimeout(r, 1000))\n return saveDrawings(drawings)\n } else {\n postRetryCountRef.current = 0\n }\n }\n // ignore error\n window.Sentry?.captureException(error, {\n extra: {\n drawings: drawings.map(({ lastChange, changeType, elementId, containerType }) => ({\n elementId,\n lastChange,\n changeType,\n containerType,\n })),\n },\n })\n return undefined\n }\n }, [])\n\n const deleteAllDrawings = React.useCallback(\n async ({ tickers, lastLocalChange }: { tickers: string[]; lastLocalChange: HLC }): Promise => {\n try {\n await fetchApi({\n location: `/api/auto_save.ashx?ticker=${tickers.join(',')}&hlc=${serializeHlc({\n ...incrementHlc(lastLocalChange, Date.now()),\n uuid: getUuid(), // we provide new UUID for HLC so we can fetch 'destroy' changes in next GET request\n })}`,\n method: 'DELETE',\n throwOnStatusCodes: [404, 500],\n keepalive: true,\n })\n deleteRetryCountRef.current = 0\n } catch (error) {\n if (error instanceof InternalServerError) {\n if (deleteRetryCountRef.current < RETRY_LIMIT) {\n deleteRetryCountRef.current = deleteRetryCountRef.current + 1\n await new Promise((r) => setTimeout(r, 1000))\n return deleteAllDrawings({ tickers, lastLocalChange })\n } else {\n deleteRetryCountRef.current = 0\n }\n }\n // ignore error\n window.Sentry?.captureException(error)\n }\n },\n []\n )\n\n return { fetchDrawings, saveDrawings, deleteAllDrawings }\n}\n","// byteLengthCharCode2 from https://stackoverflow.com/a/63893237\n\nexport function getByteLengthOfString(s: string) {\n //assuming the String is UCS-2(aka UTF-16) encoded\n let n = 0\n for (let i = 0, l = s.length; i < l; i++) {\n const hi = s.charCodeAt(i)\n if (hi < 0x0080) {\n n += 1\n } else if (hi < 0x0800) {\n n += 2\n } else if (hi < 0xd800) {\n n += 3\n } else if (hi < 0xdc00) {\n const lo = s.charCodeAt(++i)\n if (i < l && lo >= 0xdc00 && lo <= 0xdfff) {\n n += 4\n } else {\n throw new Error('UCS-2 String malformed')\n }\n } else if (hi < 0xe000) {\n throw new Error('UCS-2 String malformed')\n } else {\n n += 3\n }\n }\n return n\n}\n","import Spine from '@finviz/spine'\nimport * as React from 'react'\n\nimport { DefaultSpineEvents } from '../../types/shared'\nimport ElementModule from '../canvas/element'\nimport IndicatorModule from '../indicators/indicator'\nimport { useForceUpdate } from '../utils/force-update'\nimport { getJSONReplacerFunc } from '../utils/helpers'\n\ninterface UseModelStateOptions {\n watchProperties?: Array\n listenOnEvents?: string[]\n}\n\nconst getIsSpineObject = (value: any) =>\n [Spine.Model, Spine.Module, Spine.Collection].some((spineObject) => value instanceof spineObject)\n\nconst getWatchedPropValue = (\n watchedProp: Model[keyof Model] | ElementModule | IndicatorModule | undefined,\n model: Model | null\n) => {\n if (typeof watchedProp === 'function') {\n const value = watchedProp.call(model)\n\n if (value && !getIsSpineObject(value)) {\n throw Error('Watched prop should have a primitive value or a spine object')\n }\n\n if (typeof value?.all === 'function') {\n return value.all()\n }\n\n return value\n }\n\n if (typeof watchedProp === 'object') {\n const isElementOrIndicator = watchedProp instanceof ElementModule || watchedProp instanceof IndicatorModule\n return JSON.stringify(isElementOrIndicator ? watchedProp.toObject() : watchedProp, getJSONReplacerFunc())\n }\n\n return watchedProp\n}\n\nconst getWatchedProps = (model: Model | null, props?: Array) =>\n props?.reduce(\n (acc, propKey) => ({\n ...acc,\n [propKey]: getWatchedPropValue(model?.[propKey], model),\n }),\n {} as Partial\n )\n\nconst getAreWatchedPropsEqual = (\n currentValue: Value,\n previousValue: Value\n) => {\n if (currentValue instanceof Spine.Model) {\n return currentValue.eql(previousValue)\n }\n\n return currentValue === previousValue\n}\n\nconst DEFAULT_SPINE_EVENTS = Object.values(DefaultSpineEvents)\n\nexport function useModelState(\n model: Model | null,\n options: UseModelStateOptions = {}\n) {\n const { watchProperties = [], listenOnEvents = DEFAULT_SPINE_EVENTS } = options\n const stringifiedOptions = JSON.stringify(options)\n const { forceUpdate } = useForceUpdate()\n const watchedPropertiesRef = React.useRef(getWatchedProps(model, watchProperties))\n\n React.useEffect(() => {\n const handleModelChange = () => {\n const hasChange = watchProperties.some((propKey) => {\n const currentValue = getWatchedPropValue(model?.[propKey], model)\n const previousValue = watchedPropertiesRef.current?.[propKey]\n\n if (Array.isArray(currentValue)) {\n return (\n !Array.isArray(previousValue) ||\n currentValue.length !== previousValue.length ||\n currentValue.some((record, index) => !getAreWatchedPropsEqual(record, previousValue[index]))\n )\n }\n\n return !getAreWatchedPropsEqual(currentValue, previousValue)\n })\n\n if (hasChange) {\n watchedPropertiesRef.current = getWatchedProps(model, watchProperties)\n forceUpdate()\n }\n }\n\n const spineEvents = listenOnEvents.join(' ')\n\n model?.bind(spineEvents, handleModelChange)\n\n forceUpdate()\n\n return () => {\n model?.unbind(spineEvents, handleModelChange)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [model?.cid, stringifiedOptions, forceUpdate])\n\n return model\n}\n","import React from 'react'\n\nimport { SpecificChartFunctionality } from '../../constants/common'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport ChartLayout from '../../models/chart_layout'\nimport { getIsDrawingEnabledOnQuotePage } from '../../utils'\nimport { getIsAutoSaveEnabled, getIsPersistDrawingsEnabled } from '../../utils/chart'\n\nexport function useIsAutoSaveActive(chartLayout: ChartLayout) {\n const chartLayoutModel = useModelState(chartLayout, {\n watchProperties: ['isInit', 'isPreserveDrawingsActive', 'idea'],\n })!\n const { specificChartFunctionality, idea, isInit, isPreserveDrawingsActive } = chartLayoutModel\n return React.useMemo(() => {\n if (!getIsAutoSaveEnabled()) {\n return false\n }\n\n let isPageWithDrawings = false\n if (specificChartFunctionality === SpecificChartFunctionality.chartPage) {\n isPageWithDrawings = true\n } else if (specificChartFunctionality === SpecificChartFunctionality.quotePage) {\n isPageWithDrawings = getIsDrawingEnabledOnQuotePage()\n }\n\n return isPageWithDrawings && getIsPersistDrawingsEnabled() && isPreserveDrawingsActive && !!isInit && !idea?.id\n }, [specificChartFunctionality, isPreserveDrawingsActive, isInit, idea?.id])\n}\n","import React from 'react'\n\nimport { CustomSpineEvents, DrawingSpineOptions, DrawingSpineOptionsEvent } from '../../../types/shared'\nimport ElementCanvas from '../../canvas/element'\nimport { getCanvasElementByType } from '../../helpers/get-canvas-element-by-type'\nimport ChartModel from '../../models/chart'\nimport ChartLayout from '../../models/chart_layout'\nimport { AutoSaveState } from '../../models/constants'\nimport Element from '../../models/element'\nimport { getUuid } from '../../utils/helpers'\nimport { compareHlc, incrementHlc, initHlc, receiveHlc, serializeHlc } from '../../utils/hlc'\nimport { usePrevious } from '../../utils/use-prev-state'\nimport {\n AutoSaveChangeType,\n AutoSaveElement,\n DRAWINGS_SAVE_INTERVAL_MS,\n DRAWINGS_UPDATE_INTERVAL_MS,\n} from './constants'\nimport { useDrawingAutoSaveApi } from './use-drawing-autosave-api'\nimport { useIsAutoSaveActive } from './use-is-auto-save-active'\nimport {\n getContainerType,\n getInitialStoreDrawings,\n getTicker,\n getTickersAndIndicatorsInLayoutModel,\n mergeUpdatedDrawingsToInternalStore,\n updateInternalStoreWithChangedElement,\n} from './utils'\n\nfunction useDrawingAutoSave(chartLayout: ChartLayout) {\n const { fetchDrawings, saveDrawings, deleteAllDrawings } = useDrawingAutoSaveApi()\n const isAutoSaveActive = useIsAutoSaveActive(chartLayout)\n const prevIsAutoSaveActive = usePrevious(isAutoSaveActive)\n const internalStoreRef = React.useRef([])\n const instanceUUIDRef = React.useRef(getUuid())\n const latestRemoteUpdateTimestampRef = React.useRef(initHlc(instanceUUIDRef.current, 0))\n const lastestLocalUpdateTimestampRef = React.useRef(initHlc(instanceUUIDRef.current, 0))\n const saveTimeoutRef = React.useRef()\n\n const saveLatestChanges = React.useCallback(\n (withDelayInMs = DRAWINGS_SAVE_INTERVAL_MS) => {\n chartLayout.setAutoSaveState(AutoSaveState.UnsavedDrawings)\n if (saveTimeoutRef.current) {\n clearTimeout(saveTimeoutRef.current)\n }\n const saveQueue = internalStoreRef.current.filter(\n (item) =>\n compareHlc(item.lastChange, lastestLocalUpdateTimestampRef.current) > 0 &&\n item.lastChange.uuid === instanceUUIDRef.current\n )\n const shouldSkipDelay = saveQueue.some((item) => item.changeType === 'destroy')\n\n saveTimeoutRef.current = setTimeout(\n async () => {\n chartLayout.setAutoSaveState(AutoSaveState.SavingDrawings)\n const result = await saveDrawings(saveQueue)\n chartLayout.setAutoSaveState(AutoSaveState.SavedDrawings)\n if (result) {\n lastestLocalUpdateTimestampRef.current = receiveHlc(lastestLocalUpdateTimestampRef.current, result)\n }\n },\n shouldSkipDelay ? 0 : withDelayInMs\n )\n },\n [saveDrawings, chartLayout]\n )\n\n const syncChartLayoutDrawings = React.useCallback(\n (drawing: AutoSaveElement) => {\n const isRemove = drawing.changeType === 'destroy'\n chartLayout.getAllElements().forEach((element) => {\n if (element.isDrawing()) {\n const ticker = element.pane()?.chart()?.ticker\n\n const drawing = internalStoreRef.current.find(\n (drawing) =>\n drawing.elementId === element.elementId &&\n drawing.ticker === ticker &&\n drawing.containerType === getContainerType(element.pane())\n )\n if (!drawing || drawing.changeType === 'destroy') {\n element.destroyCascade()\n }\n }\n })\n\n chartLayout.getAllPanes().forEach((paneModel) => {\n const paneIndicatorType = getContainerType(paneModel)\n if (!paneIndicatorType || drawing.ticker !== paneModel.chart().quote()?.getRawTicker()) {\n return\n }\n const instanceObj = JSON.parse(drawing.elementAttrs)\n const element = paneModel\n .getAllElements()\n .find(\n (element) =>\n element.isDrawing() && element.elementId === drawing.elementId && element.pane()?.id === paneModel.id\n )\n\n const hasDrawingPaneIndicator = paneIndicatorType === drawing.containerType\n\n if (element) {\n if (drawing.elementAttrs !== JSON.stringify(element.instance.toAutosaveConfig())) {\n if (element.pane().selection !== element.instance) {\n element.instance.set(instanceObj)\n element.instance.updateScales()\n }\n }\n if (drawing.zIndex !== element.zIndex) {\n element.updateAttributes({ zIndex: drawing.zIndex })\n }\n if (isRemove || !hasDrawingPaneIndicator) {\n element.destroyCascade()\n }\n } else if (\n !isRemove &&\n !instanceObj.type.startsWith('charts/') &&\n getContainerType(paneModel) === drawing.containerType\n ) {\n const instance = getCanvasElementByType(instanceObj.type).fromObject(instanceObj, paneModel) as ElementCanvas\n paneModel.elements().create({ elementId: drawing.elementId, instance, zIndex: drawing.zIndex })\n instance.updateScales()\n }\n })\n },\n [chartLayout]\n )\n\n const checkDrawingUpdate = React.useCallback(\n async (isRefetchAll = false) => {\n const { tickers, containerTypes } = getTickersAndIndicatorsInLayoutModel(chartLayout)\n if (isRefetchAll) {\n latestRemoteUpdateTimestampRef.current = initHlc(instanceUUIDRef.current, 0)\n }\n\n const updatedDrawings = await fetchDrawings({\n tickers,\n containerTypes,\n lastChange: serializeHlc(latestRemoteUpdateTimestampRef.current),\n })\n const { newLastUpdateTimestamp, updatedElementIds, newInternalStore } = mergeUpdatedDrawingsToInternalStore({\n updatedDrawings,\n currentInternalStore: internalStoreRef.current,\n lastUpdateTimestamp: latestRemoteUpdateTimestampRef.current,\n })\n\n internalStoreRef.current = newInternalStore\n latestRemoteUpdateTimestampRef.current = newLastUpdateTimestamp\n if (isRefetchAll && internalStoreRef.current.length > 0) {\n saveLatestChanges(0)\n lastestLocalUpdateTimestampRef.current = receiveHlc(\n lastestLocalUpdateTimestampRef.current,\n [...internalStoreRef.current].sort((a, b) => compareHlc(b.lastChange, a.lastChange))[0].lastChange\n )\n }\n\n if (updatedElementIds.length > 0 || isRefetchAll) {\n const allElements = chartLayout.getAllElements()\n updatedElementIds.forEach((elementId) => {\n const element = allElements.find((element) => element.elementId === elementId)\n\n if (element && element.isDrawing() && !element.isMouseDown()) {\n element.destroyCascade()\n }\n })\n\n internalStoreRef.current.forEach(syncChartLayoutDrawings)\n chartLayout.getAllPanes().forEach((paneModel) => {\n paneModel.normalizeZIndexes()\n })\n }\n },\n [chartLayout, syncChartLayoutDrawings, fetchDrawings, saveLatestChanges]\n )\n\n const updateInternalStoreWithElement = React.useCallback(\n (element: Element, changeType: AutoSaveChangeType) => {\n const updateResult = updateInternalStoreWithChangedElement({\n element,\n changeType,\n currentInternalStore: internalStoreRef.current,\n lastUpdateTimestamp: incrementHlc(\n receiveHlc(lastestLocalUpdateTimestampRef.current, latestRemoteUpdateTimestampRef.current),\n Date.now()\n ),\n })\n\n if (updateResult) {\n const { shouldSyncAndSave, newInternalStore, newDrawing } = updateResult\n internalStoreRef.current = newInternalStore\n if (shouldSyncAndSave) {\n syncChartLayoutDrawings(newDrawing)\n saveLatestChanges()\n }\n }\n },\n [syncChartLayoutDrawings, saveLatestChanges]\n )\n\n const deleteAllAutoSavedElements = React.useCallback(async () => {\n const { tickers } = getTickersAndIndicatorsInLayoutModel(chartLayout)\n\n await deleteAllDrawings({ tickers, lastLocalChange: lastestLocalUpdateTimestampRef.current })\n await checkDrawingUpdate()\n }, [deleteAllDrawings, chartLayout, checkDrawingUpdate])\n\n const onElementChange = React.useCallback(\n (element: Element, _?: any, options?: DrawingSpineOptions) => {\n if (element.isDrawing() && !element.instance.isCreator) {\n chartLayout.getAllPanes().forEach((model) => {\n if (\n element.pane() &&\n getContainerType(model) === getContainerType(element.pane()) &&\n getTicker(model) === getTicker(element.pane())\n ) {\n const isRemove = options?.eventType === DrawingSpineOptionsEvent.Remove\n updateInternalStoreWithElement(element, isRemove ? 'destroy' : 'update')\n }\n })\n }\n },\n [updateInternalStoreWithElement, chartLayout]\n )\n\n React.useEffect(() => {\n // Restore initial drawings from server on page load\n const initialStoreDrawings = getInitialStoreDrawings()?.filter(({ containerType }) => containerType !== 'note')\n if (initialStoreDrawings?.length) internalStoreRef.current = initialStoreDrawings\n\n return () => {\n if (saveTimeoutRef.current) {\n clearTimeout(saveTimeoutRef.current)\n }\n }\n }, [])\n\n React.useEffect(() => {\n if (!isAutoSaveActive) {\n chartLayout.setAutoSaveState(AutoSaveState.Off)\n return\n }\n chartLayout.setAutoSaveState(AutoSaveState.Saved)\n if (!prevIsAutoSaveActive && isAutoSaveActive) {\n checkDrawingUpdate(true)\n }\n\n let tickers: string[] = chartLayout.getAllCharts().map((chart) => chart.quote()?.getRawTicker() ?? '')\n\n const onChartChange = () => {\n const newTickers = chartLayout.getAllCharts().map((chart) => chart.quote()?.getRawTicker() ?? '')\n if (JSON.stringify(tickers) !== JSON.stringify(newTickers)) {\n tickers = newTickers\n checkDrawingUpdate(true)\n }\n }\n const onIndicatorChange = () => {\n checkDrawingUpdate(true)\n }\n\n ChartModel.bind('change', onChartChange)\n ChartModel.bind(CustomSpineEvents.IndicatorsChange, onIndicatorChange)\n Element.bind('change', onElementChange)\n\n chartLayout.getAllElements().forEach((element) => {\n // Adds drawings to internal store if isAutoSaveActive and they are not in the store yet\n if (!internalStoreRef.current.find((drawing) => drawing.elementId === element.elementId)) {\n onElementChange(element)\n }\n })\n\n internalStoreRef.current.forEach(syncChartLayoutDrawings)\n const checkDrawingUpdateInterval = setInterval(checkDrawingUpdate, DRAWINGS_UPDATE_INTERVAL_MS)\n\n return () => {\n clearInterval(checkDrawingUpdateInterval)\n ChartModel.unbind('change', onChartChange)\n ChartModel.unbind(CustomSpineEvents.IndicatorsChange, onIndicatorChange)\n Element.unbind('change', onElementChange)\n }\n }, [\n chartLayout,\n internalStoreRef,\n checkDrawingUpdate,\n onElementChange,\n syncChartLayoutDrawings,\n isAutoSaveActive,\n prevIsAutoSaveActive,\n ])\n\n return { deleteAllAutoSavedElements, isAutoSaveActive }\n}\n\ninterface Props {\n chartLayoutModel: ChartLayout\n}\n\nexport const withDrawingsAutoSave = (Component: any) => (props: Props) => {\n const { deleteAllAutoSavedElements, isAutoSaveActive } = useDrawingAutoSave(props.chartLayoutModel)\n\n return (\n & { lastChange: string }\n\nexport const DRAWINGS_UPDATE_INTERVAL_MS = process.env.IS_E2E_TESTING ? 3000 : 15000\nexport const DRAWINGS_SAVE_INTERVAL_MS = 0 // 2000\n","const __WEBPACK_NAMESPACE_OBJECT__ = FLibs.ReactRouterDOM;","import * as dateFns from 'date-fns'\nimport * as React from 'react'\n\nimport {\n Button,\n ButtonGroup,\n DatePicker,\n Delayed,\n Dialog,\n DialogBody,\n DialogFooter,\n DialogHeader,\n Input,\n Notification,\n Paragraph,\n Spinner,\n withNotificationContext,\n} from '../../components'\nimport ChartModel from '../../models/chart'\nimport Quote from '../../models/quote'\nimport { dateFromUnixTimestamp } from '../../utils'\nimport {\n CustomDateRangePrefixEnum,\n DATE_RANGE_PREFIX_DELMITER,\n getCustomStartEndDateRangeUrlParam,\n getPrevPeriodDateRangeUrlParam,\n getTimeframeFromDateRange,\n parseCustomDateRangeUrlParam,\n} from '../../utils/chart-date-range-utils'\nimport { formatDateToStringUS } from '../../website-shared'\nimport { getChartStartEndDates, getVisibleBarsNumber } from '../renderUtils'\n\nconst DATA_YEAR_START = 1980\nconst DATE_PICKER_MIN_DATE = new Date(`01/01/${DATA_YEAR_START}`)\nconst YEARS_MAX_VALUE = new Date().getFullYear() - DATA_YEAR_START\n\nconst TAB_BUTTON_COMMON_PROPS = { type: 'button', className: 'flex-1', contentClass: 'text-center' }\n\nexport enum CustomRangeType {\n StartEnd,\n Manual,\n}\n\ninterface StartEndRange {\n kind: CustomRangeType.StartEnd\n start: Date | null\n end: Date | null\n}\n\ninterface ManualRange {\n kind: CustomRangeType.Manual\n days?: number\n months?: number\n years?: number\n}\n\nexport type CustomDateRangeType = StartEndRange | ManualRange\n\ninterface CustomRangeProps {\n chartModel: ChartModel | null\n /**\n * Dialog state\n */\n dialogState: any\n\n /**\n * Save handler\n */\n onSave: (value: any) => void\n}\n\ninterface DialogContentProps extends Omit {\n chartModel: ChartModel\n notificationContext: { show: (element: JSX.Element, options?: { inline?: boolean }) => void; hide: () => void }\n}\n\nconst DEFAULT_MANUAL_RANGE: ManualRange = {\n kind: CustomRangeType.Manual,\n days: 0,\n months: 0,\n years: 0,\n}\n\nconst DEFAULT_START_END_RANGE: StartEndRange = {\n kind: CustomRangeType.StartEnd,\n start: null,\n end: null,\n}\n\nfunction isValidManualRangeState({ years = 0, months = 0, days = 0 }: ManualRange) {\n return years + months + days > 0\n}\n\nfunction isValidStartEndRangeState({ start, end }: StartEndRange) {\n return !!(start || end)\n}\n\nfunction getDefaultSelectedTab(chartModel: ChartModel) {\n const { dateRange } = chartModel\n if (dateRange) {\n const [dateRangePrefix] = dateRange.split(DATE_RANGE_PREFIX_DELMITER)\n if (dateRangePrefix === CustomDateRangePrefixEnum.Range) {\n return CustomRangeType.StartEnd\n }\n if (dateRangePrefix === CustomDateRangePrefixEnum.Prev) {\n return CustomRangeType.Manual\n }\n }\n return CustomRangeType.StartEnd\n}\n\nfunction getDefaultSelectedDate(chartModel: ChartModel, anchorDate: Date): CustomDateRangeType {\n const { dateRange } = chartModel\n if (dateRange) {\n const [dateRangePrefix] = dateRange.split(DATE_RANGE_PREFIX_DELMITER)\n const { start, end } = parseCustomDateRangeUrlParam({ dateRange, anchorDate })\n if (dateRangePrefix === CustomDateRangePrefixEnum.Range) {\n return { kind: CustomRangeType.StartEnd, start, end }\n }\n if (dateRangePrefix === CustomDateRangePrefixEnum.Prev && start && end) {\n const { years, months, days } = dateFns.intervalToDuration({\n start,\n end,\n })\n return { kind: CustomRangeType.Manual, years, months, days }\n }\n }\n\n return DEFAULT_START_END_RANGE\n}\n\nfunction DialogContent({ dialogState, notificationContext, chartModel, onSave }: DialogContentProps) {\n const [isFetching, setIsFetching] = React.useState(false)\n const [selectedTab, setSelectedTab] = React.useState(getDefaultSelectedTab(chartModel))\n const anchorDate = React.useMemo(() => {\n const quote = chartModel.quote()\n return dateFromUnixTimestamp(quote.date[quote.date.length - 1])\n }, [chartModel])\n const [state, setState] = React.useState(getDefaultSelectedDate(chartModel, anchorDate))\n const { timeframe, ticker, instrument, premarket, aftermarket } = chartModel.quote()\n\n const onDialogSubmit = React.useCallback(\n async (ev: React.FormEvent) => {\n ev.preventDefault()\n let dateRange = null\n\n if (state?.kind === CustomRangeType.StartEnd && isValidStartEndRangeState(state)) {\n dateRange = getCustomStartEndDateRangeUrlParam({ start: state.start, end: state.end })\n } else if (state?.kind === CustomRangeType.Manual && isValidManualRangeState(state)) {\n dateRange = getPrevPeriodDateRangeUrlParam({\n days: state.days ?? 0,\n months: state.months ?? 0,\n years: state.years ?? 0,\n })\n }\n\n const newTimeframe = dateRange\n ? getTimeframeFromDateRange({\n ...parseCustomDateRangeUrlParam({ dateRange: dateRange!, anchorDate }),\n anchorDate,\n isPremium: window.FinvizSettings.hasUserPremium,\n instrument,\n })\n : timeframe\n\n const newState = {\n value: dateRange,\n timeframe: newTimeframe,\n }\n\n if (dateRange !== null) {\n const patterns = chartModel.getHasPatterns()\n setIsFetching(true)\n const quote = await Quote.get({\n ticker,\n instrument,\n timeframe: newTimeframe,\n options: {\n premarket,\n aftermarket,\n patterns,\n cachePredicate: (quote) => quote.ideaID === undefined,\n fetchNewDataOnCachedQuote: true,\n },\n })\n setIsFetching(false)\n\n const { numOfVisibleBars } = getVisibleBarsNumber({\n ...getChartStartEndDates({ dateRange, quote }),\n quote,\n dateRange,\n })\n if (numOfVisibleBars === 0) {\n notificationContext.show(\n \n \n There are no data for the selected date range. Try selecting different dates.\n \n \n )\n\n return\n }\n }\n\n onSave(newState)\n dialogState.hide()\n },\n // We only want `dialogState.hide`, not the whole dialog\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [dialogState.hide, onSave, state, anchorDate, instrument, premarket, aftermarket, timeframe, notificationContext]\n )\n\n const { current: onChange } = React.useRef((kind: CustomRangeType, newValue: Partial) => {\n setState((prevState) => {\n if (kind === CustomRangeType.Manual) {\n const defaults = prevState?.kind === CustomRangeType.Manual ? prevState : DEFAULT_MANUAL_RANGE\n return { ...defaults, ...newValue } as ManualRange\n }\n if (kind === CustomRangeType.StartEnd) {\n const defaults = prevState?.kind === CustomRangeType.StartEnd ? prevState : DEFAULT_START_END_RANGE\n\n const newState = { ...defaults, ...newValue }\n if (newState.start && newState.end && newState.start.getTime() > newState.end.getTime()) {\n const newEnd = new Date(newState.start.getTime())\n newState.start = newState.end\n newState.end = newEnd\n }\n return newState\n }\n return prevState\n })\n })\n\n const isAbsolute = state?.kind === CustomRangeType.StartEnd\n const fromDate = isAbsolute ? state.start : DEFAULT_START_END_RANGE.start\n const toDate = isAbsolute ? state.end : DEFAULT_START_END_RANGE.end\n\n const manualRange = {\n ...DEFAULT_MANUAL_RANGE,\n ...(state?.kind === CustomRangeType.Manual ? state : {}),\n }\n\n return (\n <>\n Custom Date Range \n \n \n )\n}\n\nconst DialogContentWithNotifications = withNotificationContext(DialogContent)\n\nexport function CustomDateRange(props: CustomRangeProps) {\n if (!props.chartModel) {\n return null\n }\n\n return (\n \n \n )\n}\n","import classnames from 'classnames'\nimport * as React from 'react'\n\nimport { Paragraph } from '../../components'\nimport math from '../../helpers/math'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport { QuoteFetchType } from '../../models/quote/constants'\nimport { getTickerChange } from '../../utils/chart'\nimport { useChartLayoutGlobalModel } from '../chart-settings/chart-layout-model'\n\ninterface Props {\n chartIndex: number\n}\n\ninterface ChangeLabelProps {\n children: React.ReactNode\n changePoints: number\n isTiny: boolean\n}\n\nconst CHANGE_UPATE_EVENTS = ['change', 'update']\nconst QUOTE_MODEL_CHANGE_EVENTS = [...CHANGE_UPATE_EVENTS, ...Object.values(QuoteFetchType)]\n\nfunction ChangeLabel({ children, changePoints, isTiny }: ChangeLabelProps) {\n return (\n 0,\n 'text-red-400': changePoints < 0,\n })}\n >\n {children}\n \n )\n}\n\nexport function DailyChangeDisplayComponent({ chartIndex }: Props) {\n const { chartLayoutModel } = useChartLayoutGlobalModel()\n const chartModel = useModelState(chartLayoutModel?.getAllCharts()[chartIndex] ?? null, {\n watchProperties: ['quote'],\n listenOnEvents: CHANGE_UPATE_EVENTS,\n })\n const quoteModel = useModelState(chartModel?.quote() ?? null, {\n watchProperties: ['lastClose', 'prevClose', 'afterClose'],\n listenOnEvents: QUOTE_MODEL_CHANGE_EVENTS,\n })\n\n const tickerChange = quoteModel && getTickerChange({ data: quoteModel })\n const isTiny =\n !!tickerChange?.tickerChange &&\n math.getInstrumentDecimalPlaces({\n instrument: quoteModel!.instrument,\n value: quoteModel!.lastClose,\n }) >= 6\n\n return (\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 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 _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 {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 * 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 { getIsAutoSaveEnabled, getIsPersistDrawingsEnabled } from '../../utils/chart'\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.quote().getRawTicker() === 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 (\n (isSameTicker || getIsAutoSaveEnabled()) &&\n getIsPersistDrawingsEnabled() &&\n chartLayoutModel.isPreserveDrawingsActive\n ) {\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 // Change all idea quotes to non idea quotes and refetch because we don't need them anymore but they may cause inconsistencies if they are in cache\n const ideaQuotes = chartModel.getAllQuotes().filter((chartQuote) => chartQuote.ideaID)\n if (ideaQuotes.length > 0) {\n await Promise.all(\n ideaQuotes.map((quote) => {\n quote.updateAttributes({ ideaID: undefined })\n return quote.fetchData({ fetchType: QuoteFetchType.Refetch })\n })\n )\n }\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 || ideaQuotes.length > 0) {\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, useNavigate } from 'react-router-dom'\n\nimport { useDialogState } from '../../components'\nimport {\n DateRangeType,\n FREE_PERIODS,\n SpecificChartFunctionality,\n TIMEFRAME,\n TimeframeAndIntradayType,\n} from '../../constants/common'\nimport Chart from '../../models/chart'\nimport {\n CUSTOM_DATE_RANGE,\n CustomDateRangePrefixEnum,\n DATE_RANGE_PREFIX_DELMITER,\n} from '../../utils/chart-date-range-utils'\nimport { decodeQueryString, encodeQueryString } from '../../utils/query_string'\nimport { useChartsPathLocation } from './use-charts-path-location'\nimport { getDateRangeGroups, getTimeFrameGroups } from './utils'\n\nexport function useTimeframeDateRangeGroups({\n chartModel,\n isPremium,\n specificChartFunctionality,\n}: {\n chartModel: Chart | null\n isPremium: boolean\n specificChartFunctionality: SpecificChartFunctionality\n}) {\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 generateChartLayoutRouterPath = React.useCallback(\n ({\n ticker,\n timeframe,\n dateRange,\n }: {\n timeframe: TimeframeAndIntradayType\n dateRange?: string | null\n ticker?: string\n }) => {\n if (specificChartFunctionality === SpecificChartFunctionality.quotePage) {\n if (isPremium || FREE_PERIODS.includes(timeframe)) {\n return {\n pathname: 'quote.ashx',\n search: `?${encodeQueryString({\n ...decodeQueryString(),\n i: undefined,\n p: timeframe,\n r: dateRange ?? undefined,\n })}`,\n }\n }\n\n return {\n pathname: '/elite.ashx',\n search: `?${encodeQueryString({\n utm_source: 'finviz',\n utm_medium: 'banner',\n utm_campaign: 'quote-timeframe',\n })}`,\n }\n }\n\n return getChartsToPath({\n ticker,\n timeframe: timeframe as TIMEFRAME,\n dateRange,\n })\n },\n [isPremium, specificChartFunctionality, getChartsToPath]\n )\n\n const timeFrameGroups = React.useMemo(\n () =>\n getTimeFrameGroups(isPremium).map((timeFrameGroup) => ({\n label: timeFrameGroup.label,\n timeframes: timeFrameGroup.timeframes.map((timeFrame) => ({\n ...timeFrame,\n href: generateChartLayoutRouterPath({ timeframe: timeFrame.value, dateRange: null }),\n })),\n })),\n [isPremium, generateChartLayoutRouterPath]\n )\n\n const dateRangeGroups = React.useMemo(() => {\n const rangeGroups = getDateRangeGroups(isPremium)\n if (window.FinvizSettings.hasUserCustomDateRangeCharts) {\n const dateRange = chartModel?.dateRange\n const [dateRangePrefix] = dateRange?.split(DATE_RANGE_PREFIX_DELMITER) ?? []\n rangeGroups.push({\n dateRanges: [\n {\n value:\n dateRange && Object.values(CustomDateRangePrefixEnum).includes(dateRangePrefix)\n ? dateRange\n : CUSTOM_DATE_RANGE,\n label: 'Custom',\n },\n ],\n })\n }\n\n return rangeGroups.map((dateRangeGroup) => ({\n label: dateRangeGroup.label,\n dateRanges: dateRangeGroup.dateRanges.map((dateRange) => ({\n ...dateRange,\n href:\n !isPremium || Object.values(DateRangeType).includes(dateRange.value as DateRangeType)\n ? generateChartLayoutRouterPath({ timeframe: dateRange.timeframe!, dateRange: dateRange.value })\n : null,\n })),\n }))\n }, [generateChartLayoutRouterPath, chartModel?.dateRange, isPremium])\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 { DateRangeType, TIMEFRAME, TimeframeAndIntradayType } from '../../constants/common'\n\ninterface ITimeFrame {\n value: TimeframeAndIntradayType\n label: string\n labelShort: string\n}\n\ninterface ITimeframeGroup {\n label: string\n timeframes: ITimeFrame[]\n}\n\ninterface IDateRange {\n value: string\n label: string\n timeframe?: TIMEFRAME\n}\n\nexport const getTimeFrameGroups = (isPremium = true): ITimeframeGroup[] => {\n const premiumTimeframes: ITimeframeGroup[] = [\n {\n label: '',\n timeframes: [\n { value: TIMEFRAME.i1, label: '1 Minute', labelShort: '1M' },\n { value: TIMEFRAME.i3, label: '3 Minutes', labelShort: '3M' },\n { value: TIMEFRAME.i5, label: '5 Minutes', labelShort: '5M' },\n { value: TIMEFRAME.i10, label: '10 Minutes', labelShort: '10M' },\n { value: TIMEFRAME.i15, label: '15 Minutes', labelShort: '15M' },\n { value: TIMEFRAME.i30, label: '30 Minutes', labelShort: '30M' },\n ],\n },\n {\n label: '',\n timeframes: [\n { value: TIMEFRAME.h, label: '1 Hour', labelShort: '1H' },\n { value: TIMEFRAME.h2, label: '2 Hours', labelShort: '2H' },\n { value: TIMEFRAME.h4, label: '4 Hours', labelShort: '4H' },\n ],\n },\n {\n label: '',\n timeframes: [\n { value: TIMEFRAME.d, label: '1 Day', labelShort: 'D' },\n { value: TIMEFRAME.w, label: '1 Week', labelShort: 'W' },\n { value: TIMEFRAME.m, label: '1 Month', labelShort: 'M' },\n ],\n },\n ]\n\n const freeTimeframes = [\n {\n // intradayTimeframe is only for non premium users used as redirect to elite subscription\n label: '',\n timeframes: [{ value: 'intraday' as const, label: 'Intraday', labelShort: 'Intraday' }],\n },\n {\n label: '',\n timeframes: [\n { value: TIMEFRAME.d, label: '1 Day', labelShort: 'Daily' },\n { value: TIMEFRAME.w, label: '1 Week', labelShort: 'Weekly' },\n { value: TIMEFRAME.m, label: '1 Month', labelShort: 'Monthly' },\n ],\n },\n ]\n\n return isPremium ? premiumTimeframes : freeTimeframes\n}\n\nexport const getDateRangeGroups = (isPremium = true) => {\n const rangeGroups: Array<{ label?: string; dateRanges: IDateRange[] }> = [\n {\n label: 'Days',\n dateRanges: [\n { value: DateRangeType.d1, label: '1 Day', timeframe: TIMEFRAME.i1 },\n { value: DateRangeType.d5, label: '5 Days', timeframe: TIMEFRAME.i5 },\n ],\n },\n {\n label: 'Months',\n dateRanges: [\n { value: DateRangeType.m1, label: '1 Month', timeframe: TIMEFRAME.d },\n { value: DateRangeType.m3, label: '3 Months', timeframe: TIMEFRAME.d },\n { value: DateRangeType.m6, label: '6 Months', timeframe: TIMEFRAME.d },\n ],\n },\n {\n label: 'Years',\n dateRanges: [\n { value: DateRangeType.ytd, label: 'Year to Date', timeframe: TIMEFRAME.d },\n { value: DateRangeType.y1, label: '1 Year', timeframe: TIMEFRAME.d },\n { value: DateRangeType.y2, label: '2 Years', timeframe: TIMEFRAME.w },\n { value: DateRangeType.y5, label: '5 Years', timeframe: isPremium ? TIMEFRAME.w : TIMEFRAME.m },\n { value: DateRangeType.max, label: 'Max', timeframe: TIMEFRAME.m },\n ],\n },\n ]\n\n return rangeGroups\n}\n","import React from 'react'\nimport { useNavigate } from 'react-router-dom'\n\nimport { TimeframeBar } from '../../components'\nimport { SpecificChartFunctionality, TIMEFRAME } from '../../constants/common'\nimport { useModelState } from '../../model-hooks/use-model-state'\nimport Chart from '../../models/chart'\nimport { CustomDateRange } from './custom-date-range'\nimport { DailyChangeDisplay } from './daily-change-display'\nimport Search from './search'\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 chartModel = useModelState(unwatchedChartModel, {\n watchProperties: ['ticker'],\n }) as Chart\n const {\n customDateRangeDialogState,\n handleDateRangeSelect,\n generateChartLayoutRouterPath,\n dateRangeGroups,\n timeFrameGroups,\n } = useTimeframeDateRangeGroups({\n isPremium: window.FinvizSettings.hasUserPremium,\n chartModel,\n specificChartFunctionality: SpecificChartFunctionality.chartPage,\n })\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 return (\n \n {chartModel.chart_layout().canChangeTicker && (\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","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 * Add preserve drawing settings button to toolbar\n * only available on interactive charts\n */\n isPreserveDrawingsAvailable?: boolean\n isAlternativeTheme?: boolean\n /**\n * Are tools disabled\n */\n areToolsDisabled?: boolean\n isIdea: boolean\n specificChartFunctionality: SpecificChartFunctionality\n isAutoSaveActive: 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 IToolbarItem {\n toolGroupTitle?: string\n}\n\nexport interface IToolbarDrawingToolItem extends IToolbarItem {\n defaultItem: IToolbarDrawingTool\n toolGroup?: Array\n}\n\nexport interface IToolbarDrawingActionItem extends IToolbarItem {\n defaultItem: IToolbarDrawingAction\n toolGroup?: Array\n}\n\nexport interface IToolbarDrawingsSettingItem extends IToolbarItem {\n defaultItem: IToolbarDrawingSetting\n toolGroup?: Array\n isDisabled?: 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'\n\ninterface LoadLatestDataButtonProps {\n chartModel: Chart\n}\n\nexport function LoadLatestDataButton({ chartModel: chartModelUnwatched }: LoadLatestDataButtonProps) {\n const chartModel = useModelState(chartModelUnwatched, { watchProperties: ['quote'] })! // We are sure we'll get chart model\n const chartLayoutModel = useModelState(chartModel.chart_layout(), { watchProperties: ['idea'] })!\n const quoteModel = useModelState(chartModel.quote(), { watchProperties: ['isFetching'] })\n const [hasNewDataAvailable, setHasNewDataAvailable] = React.useState(false)\n\n React.useEffect(() => {\n if (!chartModel.getRefreshInterval() && chartLayoutModel.idea?.id) {\n // We will do a check here if we have correct new data\n chartModel.quote().isPossibleToFetchSequentialData().then(setHasNewDataAvailable)\n } else if (!chartLayoutModel.idea?.id) {\n setHasNewDataAvailable(false)\n\n if (chartModel.getRefreshInterval() === null && window.FinvizSettings.hasUserPremium) {\n chartModel.updateAttributes({ refreshData: true })\n }\n }\n }, [chartModel, chartLayoutModel.idea])\n\n const handleLoadLatestData = async () => {\n const promises = chartModel.getAllQuotes().map((quote) => quote.fetchData({ fetchType: QuoteFetchType.NewerData }))\n chartModel.updateAttributes({ refreshData: true })\n await Promise.all(promises)\n setHasNewDataAvailable(false)\n window.gtag?.('event', 'load-latest-data', { event_category: 'ideas' })\n }\n\n if (!hasNewDataAvailable) {\n return null\n }\n\n return (\n \n \n )\n}\n","import classnames from 'classnames'\nimport debounce from 'lodash.debounce'\nimport React from 'react'\n\nimport { Button, ButtonGroup, Icon } from '../../components'\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 [isGoToRecentVisible, setIsGoToRecentVisible] = React.useState(false)\n const defaultZoomFactor = React.useMemo(() => chartModel.chart_layout().defaultZoomFactor, [chartModel])\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
\n \n )\n}\n","import Spine from '@finviz/spine'\nimport classnames from 'classnames'\nimport Hammer from 'hammerjs'\nimport React from 'react'\n\nimport { DrawingSpineOptionsEvent, EmptyObject, Instrument, ObjectHash, PaneArea } from '../../../types/shared'\nimport CanvasElement from '../../canvas/element'\nimport { Button, Notification, Paragraph, withNotificationContext } from '../../components'\nimport { ScaleType, 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 from '../../utils'\nimport { getBarWidthWithMargin, getIsPersistDrawingsEnabled, 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\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.recountScale)\n\n this.props.chartModel.bind('update', this.onChartUpdate)\n this.props.chartModel.bind('change', 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() && getIsPersistDrawingsEnabled()) {\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 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 {getChartAlt(this.quoteModel)} \n {this.chartLayoutModel.cross && = (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 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) {\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 el = element || this.props.model.selection || this.getElement(area)\n if (!el || el.thumbsAreInArea(area)) {\n return\n }\n const instance = ElementModel.findByAttribute('instance', el)\n if (!instance) return\n const hasProperties = ['indicator', 'canvas'].some((type) => el.type.startsWith(type))\n\n return ContextMenu.show(\n e,\n [\n hasProperties && {\n id: 'edit',\n label: 'Edit style',\n onClick: () => {\n this.props.openElementStyleDialog!(el)\n },\n },\n\n !(instance.isChart() || instance?.isIndicator()) && {\n id: 'clone',\n label: 'Clone',\n onClick: () => instance.makeClone(),\n },\n\n { type: 'divider' },\n\n {\n id: 'bring-to-front',\n label: 'Bring to Front',\n onClick: () => instance.bringToFront(),\n },\n {\n id: 'send-to-back',\n label: 'Send to Back',\n onClick: () => instance.sendToBack(),\n },\n {\n id: 'bring-forward',\n label: 'Bring Forward',\n onClick: () => instance.bringForward(),\n },\n {\n id: 'send-backward',\n label: 'Send Backward',\n onClick: () => instance.sendBackward(),\n },\n\n { type: 'divider' },\n\n {\n id: 'remove',\n label: 'Remove',\n onClick: () => {\n if (instance.isIndicator()) {\n handleRemoveIndicatorPane({ paneIndex: this.props.paneIndex, chartLayoutModel: this.chartLayoutModel })\n } else {\n instance.destroyCascade({ eventType: DrawingSpineOptionsEvent.Remove })\n this.props.model.normalizeZIndexes()\n }\n },\n },\n ].filter(Boolean)\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.chartLayoutModel.specificChartFunctionality === SpecificChartFunctionality.chartPage) {\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 (this.chartLayoutModel.isHideDrawingsActive && elementInstance.renderContent != null) {\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 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) {\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 MouseModel.updateAttributes({\n position: { x, y },\n 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 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 chartRef: React.MutableRefObject\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 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 } = this.props\n const panes = chartModel.panes().all()\n\n return (\n <>\n this.onClick(undefined)}\n data-testid={`chart-${chartIndex}-settings`}\n onMouseEnter={this.resetMouseModel}\n >\n {layoutModel.editors.includes(ChartEditorEnum.settings) && (\n \n {panes.map((pane, index) => (\n ) => {\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 } = getChartStartEndDates({\n dateRange: chartModel.dateRange,\n quote,\n })\n\n const { zoomFactor, leftOffset } = getChartZoomAndLeftOffset({\n chartVisibleWidth,\n start,\n end,\n quote,\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 } 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: Omit) {\n const { WrapperComp = DEFAULT_WRAPPER_COMPONENT, gridArea } = props\n const chartRef = React.useRef(null)\n const isModelDestroyedRef = React.useRef(false)\n const model = useModelState(props.chartModel, { watchProperties: ['panes', 'quote'] })!\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 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 (Component: React.ComponentType
) {\n return function WrappedComponent(props: P) {\n const model = useModelState(props.chartModel, { watchProperties: ['panes'] })\n\n return {\n dialog.show()\n window.gtag?.('event', 'help', { event_category: 'ideas' })\n }}\n >\n How it works\n \n \n dialog.hide()}>Help \n \n Drag the chart to the right to see historical data. \n \n Choose a tool from the panel on the left. Click on a chart to start drawing. Move your mouse and click again\n to add more points to a shape.\n \n Double-click on a drawing to edit its color. \n Right-click on a drawing to move it between layers or delete it. \n \n \n dialog.hide()} data-testid=\"charts-help-modal-cancel\">\n Close\n \n \n \n \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 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 Load \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 props.state.hide()}>Your ideas \n \n \n \n props.state.hide()} data-testid=\"charts-ideas-modal-cancel\">\n Close\n \n \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 = layoutModel.idea?.note || ''\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 React from 'react'\n\nimport { useDialogState } from '../components'\nimport { HelpDialog } from '../modals/help'\nimport { IdeasDialog, saveIdea } from '../modals/ideas'\nimport ChartLayout from '../models/chart_layout'\n\ninterface NoticeProps {\n layoutModel: ChartLayout\n handleAddNote: () => void\n}\n\nexport default function Notice(props: NoticeProps) {\n const dialog = useDialogState()\n\n return (\n <>\n \n
saveIdea(props.layoutModel)}\n >\n Save\n \n dialog.show()} data-testid=\"charts-notice-ideas-load-btn\">\n Load\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\nclass ArrowCreator extends Arrow {\n mouseDowns = 1\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n this.attrs.x1 = startArea.x\n this.attrs.x2 = startArea.x\n this.attrs.y1 = startArea.y\n this.attrs.y2 = startArea.y\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseDown() {\n this.mouseDowns++\n if (this.mouseDowns > 1) {\n this.release()\n this.replaceMyself(Arrow.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n }\n\n onMouseMove(area: Area) {\n this.attrs.x1 = area.x\n this.attrs.y1 = area.y\n this.trigger('change')\n }\n}\n\nexport default ArrowCreator\n","import simplify from 'simplify-js'\n\nimport { PaneArea } from '../../../types/shared'\nimport Brush, { BrushPoints, IBrushAttrs } from '../../canvas/brush/brush_v1'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IBrushAttrs\ntype PartialAttrs = Partial\n\nclass BrushCreator extends Brush {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super({ ...values, points: [[startArea.x, startArea.y]] }, model)\n\n this.bind('mousemove', this.onMouseMove)\n this.bind('mouseup', this.onMouseUp)\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n simplifyPolyline = (pointsArray: BrushPoints): BrushPoints =>\n simplify(\n pointsArray.map(([x, y]) => ({ x: this.fx(x), y: this.fy(y) })),\n 1\n ).map(({ x, y }) => [this.model.scale.x.invert(x), this.model.scale.y.invert(y)])\n\n onMouseMove = (area: Area) => {\n this.attrs.points.push([area.x, area.y])\n if (this.attrs.points.length > 5) {\n this.attrs.points = this.simplifyPolyline(this.attrs.points)\n }\n this.trigger('change')\n }\n\n onMouseUp = () => {\n this.release()\n this.replaceMyself(Brush.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n}\n\nexport default BrushCreator\n","import { PaneArea, RequireByKey, TextAttrs as TextAttrsRaw } from '../../../types/shared'\nimport Callout, { ICalloutAttrs } from '../../canvas/callout/callout_v1'\nimport { StyleDialogOpener } from '../../modals/element_style'\nimport ElementModel from '../../models/element'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype TextAttrs = RequireByKey\ntype Attrs = ICalloutAttrs & TextAttrs\ntype PartialAttrs = Partial\n\nclass CalloutCreator extends Callout {\n isCreator = true\n mouseUps = 0\n openStyleDialog: StyleDialogOpener\n\n constructor(\n startArea: Area,\n values: PartialAttrs,\n model: PaneModel,\n openStyleDialog: StyleDialogOpener,\n toolsCallback: () => void\n ) {\n super(values, model)\n\n this.openStyleDialog = openStyleDialog\n this.attrs.x1 = this.attrs.x2 = startArea.x\n this.attrs.y1 = this.attrs.y2 = startArea.y\n this.attrs.text = ''\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseUp(area: PaneArea) {\n this.mouseUps++\n if (this.mouseUps > 1) {\n this.attrs.x2 = area.x\n this.attrs.y2 = area.y\n this.isCreatorDialogOpen = true\n this.openStyleDialog(\n this,\n (values) => {\n this.set(values)\n this.release()\n this.replaceMyself(Callout.fromObject(this.attrs, this.model))\n this.toolsCallback()\n },\n () => {\n const instance = ElementModel.findByAttribute('instance', this)\n instance?.destroy()\n }\n )\n }\n }\n\n onMouseMove(area: Area) {\n this.attrs.x2 = area.x\n this.attrs.y2 = area.y\n return this.trigger('change')\n }\n}\n\nexport default CalloutCreator\n","import { PaneArea } from '../../types/shared'\nimport Curve, { ICurveAttrs } from '../canvas/curve'\nimport PaneModel from '../models/pane'\n\ntype Area = PaneArea\ntype Attrs = ICurveAttrs\ntype PartialAttrs = Partial\n\nconst TOTAL_CURVE_POINTS_COUNT = 3\n\nclass CurveCreator extends Curve {\n mouseDowns = 1\n isCreator = true\n curvePoints = 1\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n this.attrs.x1 = this.attrs.x2 = startArea.x\n this.attrs.y1 = this.attrs.y2 = startArea.y\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseDown() {\n this.curvePoints++\n if (this.curvePoints === TOTAL_CURVE_POINTS_COUNT) {\n this.release()\n this.replaceMyself(Curve.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n }\n\n onMouseMove(area: Area) {\n switch (this.curvePoints) {\n case 1:\n this.attrs = {\n ...this.attrs,\n x2: area.x,\n y2: area.y,\n }\n break\n case 2:\n this.attrs = {\n ...this.attrs,\n x3: area.x,\n y3: area.y,\n }\n break\n default:\n break\n }\n this.trigger('change')\n }\n}\n\nexport default CurveCreator\n","import { PaneArea } from '../../../types/shared'\nimport ElliottWaves, { IElliottWavesAttrs } from '../../canvas/elliott_waves/elliott_waves'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IElliottWavesAttrs\ntype PartialAttrs = Partial\n\nclass ElliottWavesCreator extends ElliottWaves> {\n isCreator = true\n mouseDowns = 0\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(\n {\n ...values,\n waves: [\n {\n x: startArea.x,\n y: startArea.y,\n },\n ],\n },\n model\n )\n this.toolsCallback = toolsCallback\n\n this.onMouseDown(startArea)\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseDown(area: Area) {\n this.mouseDowns++\n this.attrs.waves[this.mouseDowns - 1] = { x: area.x, y: area.y }\n if (this.mouseDowns === this.waves.length) {\n this.release()\n this.replaceMyself(ElliottWaves.fromObject(this.attrs, this.model))\n this.toolsCallback()\n } else {\n this.attrs.waves[this.mouseDowns] = { x: area.x, y: area.y }\n }\n }\n\n onMouseMove(area: Area) {\n this.attrs.waves[this.mouseDowns].x = area.x\n this.attrs.waves[this.mouseDowns].y = area.y\n this.trigger('change')\n }\n\n isInArea() {\n return true\n }\n}\n\nexport default ElliottWavesCreator\n","import { PaneArea } from '../../../types/shared'\nimport EllipseV1, { IEllipseAttrs } from '../../canvas/ellipse/ellipse_v1'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IEllipseAttrs\ntype PartialAttrs = Partial\n\nconst TOTAL_ELLIPSE_POINTS_COUNT = 3\nclass EllipseV1Creator extends EllipseV1 {\n ellipsePoints = 1\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n this.attrs.x1 = this.attrs.x2 = startArea.x\n this.attrs.y1 = this.attrs.y2 = startArea.y\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n setIsSelected(isSelected: boolean) {\n super.setIsSelected(isSelected)\n // setIsSelected can be called while drawing creator is active, but the click is made outside of the drawing bounderies\n // so we need to call \"set\" method manually to \"finish\" the drawing\n this.set({})\n }\n\n set(obj: PartialAttrs) {\n super.set(obj)\n if (!this.isSelected && this.ellipsePoints === TOTAL_ELLIPSE_POINTS_COUNT - 1) {\n this.ellipsePoints++\n this.release()\n setTimeout(() => {\n this.replaceMyself(EllipseV1.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }, 0)\n }\n return this\n }\n\n onMouseDown() {\n this.ellipsePoints++\n if (this.ellipsePoints === TOTAL_ELLIPSE_POINTS_COUNT) {\n this.release()\n this.replaceMyself(EllipseV1.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n }\n\n onMouseMove(area: Area) {\n switch (this.ellipsePoints) {\n case 1:\n this.attrs = {\n ...this.attrs,\n x2: area.x,\n y2: area.y,\n }\n break\n case 2:\n this.attrs = {\n ...this.attrs,\n cursorTargetX: area.x,\n cursorTargetY: area.y,\n }\n break\n default:\n break\n }\n return this.trigger('change')\n }\n}\n\nexport default EllipseV1Creator\n","import { PaneArea } from '../../types/shared'\nimport FR, { IFibonacciRetracementsAttrs } from '../canvas/fibonacci_retracements'\nimport PaneModel from '../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IFibonacciRetracementsAttrs\ntype PartialAttrs = Partial\n\nclass FRCreator extends FR {\n mouseDowns = 1\n isCreator = true\n curvePoints = 1\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n this.attrs.x1 = this.attrs.x2 = startArea.x\n this.attrs.y1 = this.attrs.y2 = startArea.y\n this.mouseDowns = 1\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseDown(area: PaneArea) {\n this.mouseDowns++\n if (this.mouseDowns > 1) {\n this.attrs.x2 = area.x\n this.attrs.y2 = area.y\n this.release()\n this.replaceMyself(FR.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n }\n\n onMouseMove(area: Area) {\n this.attrs.x2 = area.x\n this.attrs.y2 = area.y\n this.trigger('change')\n }\n}\n\nexport default FRCreator\n","import { PaneArea } from '../../types/shared'\nimport HorizontalLine from '../canvas/horizontal_line'\nimport { IScaledLineAttrs } from '../canvas/scaled_line'\nimport PaneModel from '../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IScaledLineAttrs\ntype PartialAttrs = Partial\n\nclass HorizontalLineCreator extends HorizontalLine {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n this.toolsCallback = toolsCallback\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseUp(area: Area) {\n this.attrs.y1 = area.y\n this.attrs.y2 = area.y\n this.release()\n this.replaceMyself(HorizontalLine.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n}\n\nexport default HorizontalLineCreator\n","import { PaneArea } from '../../types/shared'\nimport Measure, { IMeasureAttrs } from '../canvas/measure'\nimport PaneModel from '../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IMeasureAttrs\ntype PartialAttrs = Partial\n\nclass MeasureCreator extends Measure {\n mouseDowns = 1\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n this.attrs.x1 = this.attrs.x2 = Math.round(startArea.x)\n this.attrs.y1 = this.attrs.y2 = startArea.y\n this.mouseDowns = 1\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseDown() {\n this.mouseDowns++\n if (this.mouseDowns > 1) {\n this.release()\n this.replaceMyself(Measure.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n }\n\n onMouseMove(area: Area) {\n this.attrs.x2 = Math.round(area.x)\n this.attrs.y2 = area.y\n this.trigger('change')\n }\n}\n\nexport default MeasureCreator\n","import { PaneArea } from '../../../types/shared'\nimport Pitchfork, { IPitchforkAttrs } from '../../canvas/pitchfork/pitchfork_v1'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IPitchforkAttrs\ntype PartialAttrs = Partial\n\nclass PitchforkCreator extends Pitchfork {\n isCreator = true\n mouseDowns = 1\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n this.attrs.x1 = startArea.x\n this.attrs.y1 = startArea.y\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseDown() {\n this.mouseDowns++\n if (this.mouseDowns === 3) {\n this.release()\n this.replaceMyself(Pitchfork.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n }\n\n onMouseMove(area: Area) {\n switch (this.mouseDowns) {\n case 1:\n this.attrs.x2 = area.x\n this.attrs.y2 = area.y\n break\n case 2:\n this.attrs.x3 = area.x\n this.attrs.y3 = area.y\n break\n default:\n break\n }\n this.trigger('change')\n }\n}\n\nexport default PitchforkCreator\n","import { PaneArea, Point } from '../../types/shared'\nimport Polygon, { IPolygonAttrs } from '../canvas/polygon'\nimport PaneModel from '../models/pane'\n\nexport type Area = PaneArea\ntype Attrs = IPolygonAttrs\ntype PartialAttrs = Partial\n\nclass PolygonCreator extends Polygon> {\n mouseDowns = 1\n isCreator = true\n lastMouseDown: Point = { x: 0, y: 0 }\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(\n {\n ...values,\n points: [\n {\n x: startArea.x,\n y: startArea.y,\n },\n ],\n },\n model\n )\n this.mouseDowns = 0\n this.onMouseDown(startArea)\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n isSamePoint = ({ pointA, pointB, margin }: { pointA: Point; pointB: Point; margin: Point }) =>\n pointA.x - margin.x <= pointB.x &&\n pointB.x <= pointA.x + margin.x &&\n pointA.y - margin.y <= pointB.y &&\n pointB.y <= pointA.y + margin.y\n\n onMouseDown(area: Area) {\n this.mouseDowns++\n const first = this.attrs.points[0]\n const margin = {\n x: this.model.scale.x.invert(5),\n y: this.model.scale.y.invert(0) - this.model.scale.y.invert(5),\n }\n\n if (this.mouseDowns !== 1 && this.isSamePoint({ pointA: first, pointB: area, margin })) {\n this.attrs.points[this.attrs.points.length - 1] = {\n x: first.x,\n y: first.y,\n }\n this.release()\n this.replaceMyself(Polygon.fromObject(this.attrs, this.model))\n this.toolsCallback()\n } else if (this.mouseDowns !== 1 && this.isSamePoint({ pointA: this.lastMouseDown, pointB: area, margin })) {\n this.attrs.points.pop()\n this.release()\n this.replaceMyself(Polygon.fromObject(this.attrs, this.model))\n this.toolsCallback()\n } else {\n this.attrs.points[this.mouseDowns] = { x: area.x, y: area.y }\n }\n this.lastMouseDown = { x: area.x, y: area.y }\n this.trigger('change')\n }\n\n onMouseMove(area: Area) {\n this.attrs.points[this.mouseDowns].x = area.x\n this.attrs.points[this.mouseDowns].y = area.y\n this.trigger('change')\n }\n\n isInArea() {\n return true\n }\n}\n\nexport default PolygonCreator\n","import { PaneArea } from '../../types/shared'\nimport Position, { IPositionAttrs } from '../canvas/position'\nimport PaneModel from '../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IPositionAttrs\ntype PartialAttrs = Partial\n\nclass PositionCreator extends Position> {\n mouseDowns = 1\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(\n {\n ...values,\n targetY: startArea.y,\n centerY: startArea.y,\n stopY: startArea.y,\n },\n model\n )\n\n this.attrs.x1 = this.attrs.x2 = Math.round(startArea.x)\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseDown() {\n this.mouseDowns++\n if (this.mouseDowns === 2) {\n if (this.attrs.targetY <= this.attrs.centerY) {\n this.attrs.stopY = this.attrs.centerY + 0.001\n } else {\n this.attrs.stopY = this.attrs.centerY - 0.001\n }\n }\n if (this.mouseDowns > 2) {\n this.release()\n this.replaceMyself(Position.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n }\n\n onMouseMove(area: Area) {\n const { stopY, centerY } = this.attrs\n if (this.mouseDowns === 1) {\n this.attrs.centerY = this.attrs.stopY = area.y\n } else if (this.mouseDowns === 2) {\n if ((stopY >= centerY && area.y > centerY) || (stopY <= centerY && area.y < centerY)) {\n this.attrs.stopY = area.y\n }\n }\n this.attrs.x2 = Math.round(area.x)\n this.trigger('change')\n }\n}\n\nexport default PositionCreator\n","import { PaneArea } from '../../types/shared'\nimport Rectangle, { IRectangleAttrs } from '../canvas/rectangle'\nimport PaneModel from '../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IRectangleAttrs\ntype PartialAttrs = Partial\n\nclass RectangleCreator extends Rectangle {\n isCreator = true\n mouseDowns = 1\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n this.attrs.x1 = this.attrs.x2 = startArea.x\n this.attrs.y1 = this.attrs.y2 = startArea.y\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseDown(area: PaneArea) {\n this.mouseDowns++\n if (this.mouseDowns > 1) {\n this.attrs.x2 = area.x\n this.attrs.y2 = area.y\n this.release()\n this.replaceMyself(Rectangle.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n }\n\n onMouseMove(area: Area) {\n this.attrs.x2 = area.x\n this.attrs.y2 = area.y\n return this.trigger('change')\n }\n}\n\nexport default RectangleCreator\n","import { PaneArea } from '../../../types/shared'\nimport RotatedRectangleV1, { IRotatedRectangleV1Attrs } from '../../canvas/rotated_rectangle/rotated_rectangle_v1'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IRotatedRectangleV1Attrs\ntype PartialAttrs = Partial\n\nconst TOTAL_ROTATED_RECTANGLE_POINTS_COUNT = 3\nclass RotatedRectangleV1Creator extends RotatedRectangleV1 {\n rotatedRectanglePoints = 1\n lastY = 0\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n this.attrs.x1 = this.attrs.x2 = startArea.x\n this.attrs.y1 = this.attrs.y2 = startArea.y\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n setIsSelected(isSelected: boolean) {\n super.setIsSelected(isSelected)\n // setIsSelected can be called while drawing creator is active, but the click is made outside of the drawing bounderies\n // so we need to call \"set\" method manually to \"finish\" the drawing\n this.set({})\n }\n\n set(obj: PartialAttrs) {\n super.set(obj)\n if (!this.isSelected && this.rotatedRectanglePoints === TOTAL_ROTATED_RECTANGLE_POINTS_COUNT - 1) {\n this.rotatedRectanglePoints += 1\n this.release()\n setTimeout(() => {\n this.replaceMyself(RotatedRectangleV1.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }, 0)\n }\n return this\n }\n\n onMouseDown() {\n this.rotatedRectanglePoints++\n if (this.rotatedRectanglePoints === TOTAL_ROTATED_RECTANGLE_POINTS_COUNT) {\n this.release()\n this.replaceMyself(RotatedRectangleV1.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n }\n\n onMouseMove(area: Area) {\n switch (this.rotatedRectanglePoints) {\n case 1:\n this.attrs = {\n ...this.attrs,\n x2: area.x,\n y2: area.y,\n }\n break\n case 2:\n this.attrs = {\n ...this.attrs,\n cursorTargetX: area.x,\n cursorTargetY: area.y,\n }\n break\n default:\n break\n }\n this.lastY = area.y\n this.trigger('change')\n }\n}\n\nexport default RotatedRectangleV1Creator\n","import { PaneArea } from '../../types/shared'\nimport ScaledLine, { IScaledLineAttrs } from '../canvas/scaled_line'\nimport PaneModel from '../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IScaledLineAttrs\ntype PartialAttrs = Partial\n\nclass LineCreator extends ScaledLine {\n mouseDowns = 1\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n this.attrs.x1 = this.attrs.x2 = startArea.x\n this.attrs.y1 = this.attrs.y2 = startArea.y\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseDown() {\n this.mouseDowns++\n if (this.mouseDowns > 1) {\n this.release()\n this.replaceMyself(ScaledLine.fromObject(this.attrs, this.model))\n this.toolsCallback()\n }\n }\n\n onMouseMove(area: Area) {\n this.attrs.x2 = area.x // - @startArea.x\n this.attrs.y2 = area.y // - @startArea.y\n this.trigger('change')\n }\n}\n\nexport default LineCreator\n","import { PaneArea } from '../../types/shared'\nimport ScaledText from '../canvas/scaled_text'\nimport { ITextAttrs } from '../canvas/text'\nimport { StyleDialogOpener } from '../modals/element_style'\nimport ElementModel from '../models/element'\nimport PaneModel from '../models/pane'\n\ntype Area = PaneArea\ntype Attrs = ITextAttrs\ntype PartialAttrs = Partial\n\nclass ScaledTextCreator extends ScaledText {\n isCreator = true\n openStyleDialog: StyleDialogOpener\n\n constructor(\n startArea: Area,\n values: PartialAttrs,\n model: PaneModel,\n openStyleDialog: StyleDialogOpener,\n toolsCallback: () => void\n ) {\n super(values, model)\n\n this.openStyleDialog = openStyleDialog\n\n this.attrs.x = startArea.x\n this.attrs.y = startArea.y\n this.attrs.text = ''\n this.toolsCallback = toolsCallback\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n\n onMouseUp() {\n this.isCreatorDialogOpen = true\n this.openStyleDialog(\n this,\n (values) => {\n this.set(values)\n this.release()\n this.replaceMyself(ScaledText.fromObject(this.attrs, this.model))\n this.toolsCallback()\n },\n () => {\n const instance = ElementModel.findByAttribute('instance', this)\n instance?.destroy()\n }\n )\n }\n}\n\nexport default ScaledTextCreator\n","import { PaneArea } from '../../../types/shared'\nimport Arrow, { IArrowAttrs } from '../../canvas/arrow'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IArrowAttrs\ntype PartialAttrs = Partial\n\nclass ArrowCreator extends Arrow {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n const width = this.model.scale.x.width(35)\n const height = this.model.scale.y.height(35)\n this.attrs.x1 = startArea.x + width\n this.attrs.x2 = startArea.x - width\n this.attrs.y1 = startArea.y - height\n this.attrs.y2 = startArea.y + height\n\n setTimeout(() => {\n this.replaceMyself(Arrow.fromObject>(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default ArrowCreator\n","import BrushCreator from '../../brush/brush_v1'\n\nexport default BrushCreator\n","import { PaneArea, RequireByKey, TextAttrs as TextAttrsRaw } from '../../../../types/shared'\nimport Callout, { ICalloutAttrs } from '../../../canvas/callout/callout_v1'\nimport { StyleDialogOpener } from '../../../modals/element_style'\nimport ElementModel from '../../../models/element'\nimport PaneModel from '../../../models/pane'\n\ntype Area = PaneArea\ntype TextAttrs = RequireByKey\ntype Attrs = ICalloutAttrs & TextAttrs\ntype PartialAttrs = Partial\n\nclass CalloutCreator extends Callout {\n isCreator = true\n openStyleDialog: StyleDialogOpener\n\n constructor(\n startArea: Area,\n values: PartialAttrs,\n model: PaneModel,\n openStyleDialog: StyleDialogOpener,\n toolsCallback: () => void\n ) {\n super(values, model)\n\n this.openStyleDialog = openStyleDialog\n\n const width = this.model.scale.x.width(30)\n const height = this.model.scale.y.height(-20)\n this.attrs.x1 = startArea.x\n this.attrs.y1 = startArea.y\n this.attrs.x2 = startArea.x + width\n this.attrs.y2 = startArea.y + height\n this.attrs.text = ''\n this.isCreatorDialogOpen = true\n\n setTimeout(\n () =>\n this.openStyleDialog(\n this,\n (values) => {\n this.set(values)\n this.release()\n this.replaceMyself(Callout.fromObject(this.attrs, this.model))\n toolsCallback()\n },\n () => {\n const instance = ElementModel.findByAttribute('instance', this)\n instance?.destroy()\n }\n ),\n 0\n )\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default CalloutCreator\n","import { PaneArea } from '../../../types/shared'\nimport Curve, { ICurveAttrs } from '../../canvas/curve'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = ICurveAttrs\ntype PartialAttrs = Partial\n\nclass CurveCreator extends Curve {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n const width = this.model.scale.x.width(50)\n const height = this.model.scale.y.height(35)\n this.attrs.x1 = startArea.x\n this.attrs.x2 = startArea.x + width\n this.attrs.x3 = startArea.x + width * 2\n this.attrs.y1 = startArea.y\n this.attrs.y2 = startArea.y + height\n this.attrs.y3 = startArea.y\n\n // reason for setTimeout is that you need to run this.replaceMyself() in another\n // CPU tick || delay +- 10ms || as another task in BrowserQueue,\n // if it isn't there curve is not defined yet and you get error\n // Uncaught TypeError: Cannot read property 'replace' of undefined\n // deeper explanation here https://stackoverflow.com/a/779785\n setTimeout(() => {\n this.replaceMyself(Curve.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default CurveCreator\n","import { PaneArea } from '../../../../types/shared'\nimport ElliottWaves, { IElliottWavesAttrs } from '../../../canvas/elliott_waves/elliott_waves'\nimport PaneModel from '../../../models/pane'\nimport utils from '../../../utils'\n\ntype Area = PaneArea\ntype Attrs = IElliottWavesAttrs\ntype PartialAttrs = Partial\n\nclass ElliottWavesCreator extends ElliottWaves {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(\n {\n ...values,\n waves: [\n {\n x: startArea.x,\n y: startArea.y,\n },\n ],\n },\n model\n )\n\n const w = (w: number) => this.model.scale.x.width(w * 8)\n const h = (h: number) => this.model.scale.y.height(h * 16)\n\n this.attrs.waves[0] = { x: startArea.x, y: startArea.y }\n this.attrs.waves[1] = {\n x: this.attrs.waves[0].x + w(10.833),\n y: this.attrs.waves[0].y - h(3.379),\n }\n this.attrs.waves[2] = {\n x: this.attrs.waves[0].x + w(14.166),\n y: this.attrs.waves[0].y - h(1.126),\n }\n this.attrs.waves[3] = {\n x: this.attrs.waves[0].x + w(31.333),\n y: this.attrs.waves[0].y - h(6.228),\n }\n this.attrs.waves[4] = {\n x: this.attrs.waves[0].x + w(34.5),\n y: this.attrs.waves[0].y - h(4.373),\n }\n this.attrs.waves[5] = {\n x: this.attrs.waves[0].x + w(45.166),\n y: this.attrs.waves[0].y - h(7.819),\n }\n\n const [left, right] = utils.minMax(this.attrs.waves.map((wave) => wave.x))\n const [top, bottom] = utils.minMax(this.attrs.waves.map((wave) => wave.y))\n this.moveBy(left - (left + right) / 2, top - (top + bottom) / 2)\n\n setTimeout(() => {\n this.replaceMyself(ElliottWaves.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default ElliottWavesCreator\n","import { PaneArea } from '../../../../types/shared'\nimport EllipseV1, { IEllipseAttrs } from '../../../canvas/ellipse/ellipse_v1'\nimport PaneModel from '../../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IEllipseAttrs\ntype PartialAttrs = Partial\n\nclass EllipseV1Creator extends EllipseV1 {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n const xAxisOffset = this.model.scale.x.width(30)\n const yAxisOffset = this.model.scale.y.height(30)\n this.attrs.x1 = startArea.x - xAxisOffset\n this.attrs.x2 = startArea.x + xAxisOffset\n this.attrs.y1 = startArea.y - yAxisOffset\n this.attrs.y2 = startArea.y + yAxisOffset\n this.attrs.cursorTargetX = startArea.x + xAxisOffset\n this.attrs.cursorTargetY = startArea.y\n\n setTimeout(() => {\n this.replaceMyself(EllipseV1.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default EllipseV1Creator\n","import { PaneArea } from '../../../types/shared'\nimport FR, { IFibonacciRetracementsAttrs } from '../../canvas/fibonacci_retracements'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IFibonacciRetracementsAttrs\ntype PartialAttrs = Partial\n\nclass FRCreator extends FR {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n const width = this.model.scale.x.width(120)\n const height = this.model.scale.y.height(80)\n this.attrs.x1 = startArea.x - width\n this.attrs.x2 = startArea.x + width\n this.attrs.y1 = startArea.y - height\n this.attrs.y2 = startArea.y + height\n\n setTimeout(() => {\n this.replaceMyself(FR.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default FRCreator\n","import { PaneArea } from '../../../types/shared'\nimport HorizontalLine from '../../canvas/horizontal_line'\nimport { IScaledLineAttrs } from '../../canvas/scaled_line'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IScaledLineAttrs\ntype PartialAttrs = Partial\n\nclass HorizontalLineCreator extends HorizontalLine {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n this.attrs.y1 = startArea.y\n this.attrs.y2 = startArea.y\n\n setTimeout(() => {\n this.replaceMyself(HorizontalLine.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default HorizontalLineCreator\n","import { PaneArea } from '../../../types/shared'\nimport Measure, { IMeasureAttrs } from '../../canvas/measure'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IMeasureAttrs\ntype PartialAttrs = Partial\n\nclass MeasureCreator extends Measure {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n const width = this.model.scale.x.width(80)\n const height = this.model.scale.y.height(35)\n this.attrs.x1 = Math.round(startArea.x - width)\n this.attrs.x2 = Math.round(startArea.x + width)\n this.attrs.y1 = startArea.y + height\n this.attrs.y2 = startArea.y - height\n\n setTimeout(() => {\n this.replaceMyself(Measure.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default MeasureCreator\n","import { PaneArea } from '../../../../types/shared'\nimport Pitchfork, { IPitchforkAttrs } from '../../../canvas/pitchfork/pitchfork_v1'\nimport PaneModel from '../../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IPitchforkAttrs\ntype PartialAttrs = Partial\n\nconst SIZE_IN_PIXELS = 35\n\nclass PitchforkCreator extends Pitchfork {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n const width = this.model.scale.x.width(SIZE_IN_PIXELS)\n const height = this.model.scale.y.height(SIZE_IN_PIXELS)\n this.attrs.x1 = startArea.x - width\n this.attrs.x2 = startArea.x + width\n this.attrs.x3 = startArea.x\n this.attrs.y1 = startArea.y + height / 2\n this.attrs.y2 = startArea.y + height / 2\n this.attrs.y3 = startArea.y - height / 2\n\n setTimeout(() => {\n this.replaceMyself(Pitchfork.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default PitchforkCreator\n","import Polygon from '../../canvas/polygon'\nimport PolygonCreator, { Area } from '../polygon'\n\nclass PolygonTouchCreator extends PolygonCreator {\n onMouseDown(area: Area) {\n this.mouseDowns++\n const first = this.attrs.points[0]\n const margin = {\n x: this.model.scale.x.invert(15),\n y: this.model.scale.y.invert(0) - this.model.scale.y.invert(15),\n }\n if (this.mouseDowns !== 1 && this.isSamePoint({ pointA: first, pointB: area, margin })) {\n this.attrs.points.shift()\n this.attrs.points.push({\n x: first.x,\n y: first.y,\n })\n this.release()\n this.replaceMyself(Polygon.fromObject(this.attrs, this.model))\n this.toolsCallback()\n } else if (this.mouseDowns !== 1 && this.isSamePoint({ pointA: this.lastMouseDown, pointB: area, margin })) {\n this.attrs.points.shift()\n this.release()\n this.replaceMyself(Polygon.fromObject(this.attrs, this.model))\n this.toolsCallback()\n } else {\n this.attrs.points[this.mouseDowns] = { x: area.x, y: area.y }\n }\n this.lastMouseDown = { x: area.x, y: area.y }\n\n this.trigger('change')\n }\n}\n\nexport default PolygonTouchCreator\n","import { PaneArea } from '../../../types/shared'\nimport Position, { IPositionAttrs } from '../../canvas/position'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IPositionAttrs\ntype PartialAttrs = Partial\n\nclass PositionCreator extends Position {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n const width = this.model.scale.x.width(35)\n const height = this.model.scale.y.height(35)\n this.attrs.x1 = startArea.x - width\n this.attrs.x2 = startArea.x + width\n this.attrs.stopY = startArea.y + height\n this.attrs.centerY = startArea.y\n this.attrs.targetY = startArea.y - height\n\n setTimeout(() => {\n this.replaceMyself(Position.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default PositionCreator\n","import { PaneArea } from '../../../types/shared'\nimport Rectangle, { IRectangleAttrs } from '../../canvas/rectangle'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IRectangleAttrs\ntype PartialAttrs = Partial\n\nclass RectangleCreator extends Rectangle {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n const width = this.model.scale.x.width(35)\n const height = this.model.scale.y.height(35)\n this.attrs.x1 = startArea.x - width\n this.attrs.x2 = startArea.x + width\n this.attrs.y1 = startArea.y - height\n this.attrs.y2 = startArea.y + height\n\n setTimeout(() => {\n this.replaceMyself(Rectangle.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default RectangleCreator\n","import { PaneArea } from '../../../../types/shared'\nimport RotatedRectangleV1, { IRotatedRectangleV1Attrs } from '../../../canvas/rotated_rectangle/rotated_rectangle_v1'\nimport PaneModel from '../../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IRotatedRectangleV1Attrs\ntype PartialAttrs = Partial\n\nclass RotatedRectangleV1Creator extends RotatedRectangleV1 {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n const xAxisOffset = this.model.scale.x.width(30)\n const yAxisOffset = this.model.scale.y.height(30)\n this.attrs.x1 = startArea.x - xAxisOffset\n this.attrs.x2 = startArea.x + xAxisOffset\n this.attrs.y1 = startArea.y - yAxisOffset\n this.attrs.y2 = startArea.y + yAxisOffset\n this.attrs.cursorTargetX = startArea.x + xAxisOffset\n this.attrs.cursorTargetY = startArea.y\n\n setTimeout(() => {\n this.replaceMyself(RotatedRectangleV1.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default RotatedRectangleV1Creator\n","import { PaneArea } from '../../../types/shared'\nimport ScaledLine, { IScaledLineAttrs } from '../../canvas/scaled_line'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = IScaledLineAttrs\ntype PartialAttrs = Partial\n\nclass LineCreator extends ScaledLine {\n isCreator = true\n\n constructor(startArea: Area, values: PartialAttrs, model: PaneModel, _: unknown, toolsCallback: () => void) {\n super(values, model)\n\n const width = this.model.scale.x.width(35)\n const height = this.model.scale.y.height(35)\n this.attrs.x1 = startArea.x + width\n this.attrs.x2 = startArea.x - width\n this.attrs.y1 = startArea.y - height\n this.attrs.y2 = startArea.y + height\n\n setTimeout(() => {\n this.replaceMyself(ScaledLine.fromObject(this.attrs, this.model))\n toolsCallback()\n })\n\n window.gtag?.('event', 'create', { event_category: 'tools', event_label: this.name })\n }\n}\n\nexport default LineCreator\n","import { PaneArea } from '../../../types/shared'\nimport ScaledText from '../../canvas/scaled_text'\nimport { ITextAttrs } from '../../canvas/text'\nimport { StyleDialogOpener } from '../../modals/element_style'\nimport ElementModel from '../../models/element'\nimport PaneModel from '../../models/pane'\n\ntype Area = PaneArea\ntype Attrs = ITextAttrs\ntype PartialAttrs = Partial\n\nclass ScaledTextCreator extends ScaledText {\n isCreator = true\n\n constructor(\n startArea: Area,\n values: PartialAttrs,\n model: PaneModel,\n openStyleDialog: StyleDialogOpener,\n toolsCallback: () => void\n ) {\n super(values, model)\n\n this.isCreatorDialogOpen = true\n this.attrs.x = startArea.x\n this.attrs.y = startArea.y\n this.attrs.text = ''\n\n setTimeout(\n () =>\n openStyleDialog(\n this,\n (values) => {\n this.set(values)\n this.release()\n this.replaceMyself(ScaledText.fromObject(this.attrs, this.model))\n toolsCallback()\n },\n () => {\n const instance = ElementModel.findByAttribute