\r\n {currentBreakpoint && (\r\n
\r\n )\r\n}\r\n","import * as dateFns from 'date-fns'\r\n\r\n/**\r\n * Check if a given date is DST in the US\r\n * - begins on the second Sunday in March\r\n * - ends on the first Sunday in November\r\n *\r\n * Keep in sync with https://github.com/finvizhq/charts/blob/master/app/utils.ts\r\n */\r\nexport function getIsDstInNy(date: Date) {\r\n const dayNumber = date.getDate()\r\n const monthIndex = date.getMonth()\r\n const dayOfWeek = date.getDay()\r\n const previousSunday = dayNumber - dayOfWeek\r\n if (monthIndex < 2 || monthIndex > 10) {\r\n return false\r\n }\r\n if (monthIndex > 2 && monthIndex < 10) {\r\n return true\r\n }\r\n return monthIndex === 2 ? previousSunday >= 8 : previousSunday <= 0\r\n}\r\n\r\nexport function getDate(seed?: string | number | Date | null) {\r\n var date = seed != null ? new Date(seed) : new Date()\r\n const dateAsNY = new Date(\r\n date.getUTCFullYear(),\r\n date.getUTCMonth(),\r\n date.getUTCDate(),\r\n date.getUTCHours() - 5,\r\n date.getUTCMinutes(),\r\n date.getUTCSeconds()\r\n )\r\n const isDst = getIsDstInNy(dateAsNY)\r\n\r\n if (isDst) {\r\n dateAsNY.setUTCHours(dateAsNY.getUTCHours() + 1)\r\n }\r\n\r\n return dateAsNY\r\n}\r\n\r\nfunction getWeekDay(date: Date) {\r\n return date.toLocaleDateString('en-US', { weekday: 'short' })\r\n}\r\n\r\nfunction getMonth(date: Date, uppercase = true) {\r\n const name = date.toLocaleDateString('en-US', { month: 'short' })\r\n return uppercase ? name.toUpperCase() : name\r\n}\r\n\r\nfunction getDay(date: Date) {\r\n return date.getDate().toString().padStart(2, '0')\r\n}\r\n\r\nfunction getTime(date: Date) {\r\n return date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })\r\n}\r\n\r\nenum TimeFormat {\r\n long,\r\n short,\r\n dateOnly,\r\n timeOnly,\r\n}\r\n\r\nexport type TimeFormatType = keyof typeof TimeFormat\r\n\r\nexport function getFormattedDateString(date: Date = getDate(), format: TimeFormatType = 'long') {\r\n switch (TimeFormat[format]) {\r\n case TimeFormat.long:\r\n return `${getWeekDay(date)} ${getMonth(date)} ${getDay(date)} ${date.getFullYear()} ${getTime(date)} ET`\r\n case TimeFormat.short:\r\n return `${getWeekDay(date)} ${getMonth(date)} ${getDay(date)} ${getTime(date)}`\r\n case TimeFormat.dateOnly:\r\n return `${getMonth(date, false)} ${getDay(date)}`\r\n case TimeFormat.timeOnly:\r\n return getTime(date)\r\n }\r\n}\r\n\r\nexport function formatDate(value: Date | unknown, inputOrOutputFormat: string, outputFormat?: string): string {\r\n return dateFns.format(\r\n dateFns.isDate(value) ? (value as Date) : dateFns.parse(`${value}`, inputOrOutputFormat, new Date()),\r\n outputFormat ?? inputOrOutputFormat\r\n )\r\n}\r\n\r\nexport function isPremarket(date: Date = getDate(), isPremium = FinvizSettings.hasUserPremium) {\r\n const dayOfWeek = date.getDay()\r\n const min = date.getMinutes()\r\n const hours = date.getHours()\r\n\r\n if (isPremium && dayOfWeek !== 0 && dayOfWeek !== 6 && (hours === 7 || hours === 8 || (hours === 9 && min < 30))) {\r\n return true\r\n }\r\n return false\r\n}\r\n\r\nexport function isAftermarket(date: Date = getDate(), isPremium = FinvizSettings.hasUserPremium) {\r\n const dayOfWeek = date.getDay()\r\n const min = date.getMinutes()\r\n\r\n if (\r\n isPremium &&\r\n dayOfWeek !== 0 &&\r\n dayOfWeek !== 6 &&\r\n (date.getHours() === 16 || date.getHours() === 17 || (date.getHours() === 18 && min < 30))\r\n ) {\r\n return true\r\n }\r\n return false\r\n}\r\n\r\n/**\r\n * https://www.nyse.com/markets/hours-calendars\r\n */\r\nconst HOLIDAY_DATES = [\r\n {\r\n label: \"New Year's Day\",\r\n test: (day: number, month: number) => month === 1 && day === 2,\r\n },\r\n {\r\n label: 'Martin Luther King, Jr. Day',\r\n test: (day: number, month: number) => month === 1 && day === 16,\r\n },\r\n {\r\n label: 'Presidents Day',\r\n test: (day: number, month: number) => month === 2 && day === 20,\r\n },\r\n {\r\n label: 'Good Friday',\r\n test: (day: number, month: number) => month === 4 && day === 7,\r\n },\r\n {\r\n label: 'Memorial Day',\r\n test: (day: number, month: number) => month === 5 && day === 29,\r\n },\r\n {\r\n label: 'Juneteenth Holiday',\r\n test: (day: number, month: number) => month === 6 && day === 19,\r\n },\r\n {\r\n label: 'Early Close',\r\n test: (day: number, month: number, hours: number) => month === 7 && day === 3 && hours >= 13,\r\n },\r\n {\r\n label: 'Independence Day',\r\n test: (day: number, month: number) => month === 7 && day === 4,\r\n },\r\n {\r\n label: 'Labor Day',\r\n test: (day: number, month: number) => month === 9 && day === 4,\r\n },\r\n {\r\n label: 'Thanksgiving Day',\r\n test: (day: number, month: number) => month === 11 && day === 23,\r\n },\r\n {\r\n label: 'Day after Thanksgiving (closed from 1 PM)',\r\n test: (day: number, month: number, hours: number) => month === 11 && day === 24 && hours >= 13,\r\n },\r\n {\r\n label: 'Christmas Day',\r\n test: (day: number, month: number) => month === 12 && day === 25,\r\n },\r\n]\r\n\r\nexport function getHoliday(date: Date = getDate()) {\r\n var day = date.getDate()\r\n var month = date.getMonth() + 1\r\n var hours = date.getHours()\r\n\r\n return HOLIDAY_DATES.find((holiday) => holiday.test(day, month, hours))\r\n}\r\n\r\nexport function isHoliday(date: Date = getDate()) {\r\n return !!getHoliday(date)\r\n}\r\n\r\nexport function isMarketOpen(date: Date = getDate(), isPremium = FinvizSettings.hasUserPremium) {\r\n if (isPremarket(date, isPremium) || isAftermarket(date, isPremium) || isHoliday(date)) {\r\n return false\r\n }\r\n\r\n const dayOfWeek = date.getDay()\r\n const hour = date.getHours()\r\n const minute = date.getMinutes()\r\n\r\n const isWeekend = dayOfWeek === 0 || dayOfWeek === 6\r\n // Day starts at 9:30\r\n const dayStarted = hour === 9 ? minute >= 30 : hour >= 10\r\n // Ends at 16:00\r\n const dayEnded = hour >= 16\r\n\r\n return !isWeekend && dayStarted && !dayEnded\r\n}\r\n","import { ReactNode } from 'react'\r\n\r\nexport enum MapTypeId {\r\n Sector = 'sec',\r\n World = 'geo',\r\n SectorFull = 'sec_all',\r\n ETF = 'etf',\r\n Screener = 'screener',\r\n Portfolio = 'portfolio',\r\n}\r\n\r\nexport enum MapSubtypeId {\r\n DayPerf = 'd1',\r\n WeekPerf = 'w1',\r\n MonthPerf = 'w4',\r\n ThreeMonthPerf = 'w13',\r\n SixMonthPerf = 'w26',\r\n YearPerf = 'w52',\r\n YearToDatePerf = 'ytd',\r\n RelativeVolume = 'relvol',\r\n PriceToEarnings = 'pe',\r\n ForwardPriceToEearnings = 'fpe',\r\n PriceEarningsToGrowth = 'peg',\r\n PriceToSellsRatio = 'ps',\r\n PriceToBookRatio = 'pb',\r\n DividendYield = 'div',\r\n EPSGrowth5y = 'eps5y',\r\n FloatShort = 'short',\r\n AnalystRecommendation = 'rec',\r\n EarningsPerf = 'earnperf',\r\n EarningsDate = 'earndate',\r\n // Portfolio\r\n PortfolioGainPct = 'portfolioGainPct',\r\n PortfolioGainUsd = 'portfolioGainUsd',\r\n PortfolioChangePct = 'portfolioChangePct',\r\n PortfolioChangeUsd = 'portfolioChangeUsd',\r\n}\r\n\r\nexport enum ScaleId {\r\n DayPerf = 'default',\r\n WeekPerf = '_5',\r\n MonthPerf = '_10',\r\n ThreeMonthPerf = '_15',\r\n SixMonthPerf = '_20',\r\n YearPerf = '_25',\r\n RelativeVolume = '_relvol',\r\n PriceToEarnings = '_pe',\r\n ForwardPriceToEearnings = '_fpe',\r\n PriceEarningsToGrowth = '_peg',\r\n PriceToSellsRatio = '_ps',\r\n PriceToBookRatio = '_pb',\r\n DividendYield = '_div',\r\n EPSGrowth5y = '_eps5y',\r\n FloatShort = '_short',\r\n AnalystRecommendation = '_rec',\r\n EarningsDate = '_earndate',\r\n // Portfolio\r\n PortfolioPct = '_portfolioPct',\r\n PortfolioUsd = '_portfolioUsd',\r\n}\r\n\r\nexport const enum NodeDepth {\r\n Root,\r\n Sector,\r\n Industry,\r\n Node,\r\n}\r\n\r\nexport interface MapDataRow {\r\n name: string\r\n perf?: number\r\n x: number\r\n y: number\r\n dx: number\r\n dy: number\r\n data: any\r\n depth: NodeDepth\r\n}\r\n\r\nexport interface MapDataRoot {\r\n name: 'Root'\r\n children: MapDataSector[]\r\n duplicateTickers: number\r\n}\r\n\r\nexport interface MapDataSector extends MapDataRow {\r\n children: MapDataIndustry[]\r\n parent: MapDataRoot\r\n}\r\n\r\nexport interface MapDataIndustry extends MapDataRow {\r\n children: MapDataNode[]\r\n parent: MapDataSector\r\n}\r\n\r\nexport interface MapDataNode extends MapDataRow {\r\n parent: MapDataIndustry\r\n additional?: string\r\n description: string\r\n perfText: string\r\n value: number\r\n}\r\n\r\nexport interface MapData {\r\n sectors: MapDataSector[]\r\n industries: MapDataIndustry[]\r\n nodes: MapDataNode[]\r\n}\r\n\r\nexport type PerfData = {\r\n nodes: Record\r\n {currentBreakpoint.marketBadgeText ? (\r\n
\r\n )}\r\n \r\n {React.Children.map(children, (child: React.ReactElement) => {\r\n if (React.isValidElement(child) && child.type === RedGreenText) {\r\n return React.cloneElement(child, {\r\n className: classnames(child.props.className, 'table-row'),\r\n rightClass: 'table-cell align-middle',\r\n })\r\n }\r\n\r\n return child\r\n })}\r\n
\r\n )\r\n}\r\n","import classnames from 'classnames'\r\nimport * as React from 'react'\r\n\r\nexport const Table = React.forwardRef(\r\n (props: React.PropsWithChildren\r\n {isValidIconName(leftContent) ?
\r\n )}\r\n {children && !isSquare ? (\r\n \r\n {isValidIconName(rightContent) ?
\r\n )}\r\n \r\n )\r\n}\r\n\r\n/**\r\n * We need to forward ref to the function, but typescript looses the type of the\r\n * props param so we need to typecast to get suggestions to work\r\n */\r\nexport const Button = React.forwardRef(ButtonComponent) as <\r\n TagType extends React.ElementType = typeof BUTTON_DEFAULT_ELEMENT\r\n>(\r\n props: PropsWithAs\r\n
\r\n {label ?? children}\r\n \r\n )\r\n}\r\n\r\nexport const Checkbox = forwardRef(CheckboxComponent)\r\n","import classnames from 'classnames'\r\nimport { HTMLProps, PropsWithChildren, memo, useCallback, useLayoutEffect, useRef, useState } from 'react'\r\n\r\nexport interface Interaction {\r\n left: number\r\n top: number\r\n}\r\n\r\n/**\r\n * Clamp value between two bounds\r\n */\r\nfunction clamp(num: number, min = 0, max = 1) {\r\n return num > max ? max : num < min ? min : num\r\n}\r\n\r\n/**\r\n * Check if an event was triggered by touch\r\n */\r\nfunction isTouch(event: MouseEvent | TouchEvent): event is TouchEvent {\r\n return 'touches' in event\r\n}\r\n\r\n/**\r\n * Returns a relative position of the pointer inside the node's bounding box\r\n */\r\nfunction getRelativePosition(node: HTMLDivElement, event: MouseEvent | TouchEvent): Interaction {\r\n const rect = node.getBoundingClientRect()\r\n\r\n // Get user's pointer position from `touches` array if it's a `TouchEvent`\r\n const pointer = isTouch(event) ? event.touches[0] : (event as MouseEvent)\r\n\r\n return {\r\n left: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),\r\n top: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height),\r\n }\r\n}\r\n\r\n/**\r\n * Browsers introduced an intervention, making touch events passive by default.\r\n * This workaround removes `preventDefault` call from the touch handlers.\r\n * @see https://github.com/facebook/react/issues/19651\r\n */\r\nfunction preventDefaultMove(event: MouseEvent | TouchEvent) {\r\n !isTouch(event) && event.preventDefault()\r\n}\r\n\r\ninterface Props {\r\n onMove: (interaction: Interaction) => void\r\n onKey: (offset: Interaction) => void\r\n}\r\n\r\nfunction DraggablePickerComponent({\r\n onMove,\r\n onKey,\r\n className,\r\n ...props\r\n}: PropsWithChildren\r\n \r\n
\r\n \r\n {colors.map((colorObj) => {\r\n const isSelected = lowerCaseColor.startsWith(colorObj.value)\r\n return (\r\n onChange(colorObj.value, hexStringToHSVA(colorObj.value))}\r\n >\r\n {isSelected &&
\r\n )\r\n })}\r\n \r\n )\r\n}\r\n","import { useCallback, useMemo } from 'react'\r\n\r\nimport { DraggablePicker, Interaction } from './draggable'\r\nimport { Pointer } from './pointer'\r\nimport { HSVA, hsvaToHEXString } from './util'\r\n\r\ninterface HueSaturationProps {\r\n color: HSVA\r\n onChange: (color: HSVA) => void\r\n}\r\n\r\nfunction getPositionFromHSLA(color: HSVA) {\r\n return {\r\n left: color.h / 360,\r\n top: 1 - color.s,\r\n }\r\n}\r\n\r\nexport function HueSaturation({ color, onChange }: HueSaturationProps) {\r\n const position = useMemo(() => getPositionFromHSLA(color), [color])\r\n\r\n const colorPreview = useMemo(() => hsvaToHEXString({ h: color.h, s: color.s, v: 1, a: 1 }), [color.h, color.s])\r\n\r\n const changeSaturation = useCallback(\r\n (pos: Interaction) =>\r\n onChange({\r\n h: Math.round(pos.left * 360),\r\n s: 1 - pos.top,\r\n v: 1,\r\n a: color.a,\r\n }),\r\n [color.a, onChange]\r\n )\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n {isValidIconName(icon) ? (\r\n
\r\n )}\r\n {colors.map((color, index) => (\r\n // has to be there because of a bug on safari which ignores h-full when empty element\r\n \r\n \r\n
\r\n ))}\r\n \r\n )\r\n}\r\n","import classnames from 'classnames'\r\nimport React, { ForwardedRef, useCallback, useEffect, useState } from 'react'\r\n\r\nimport { Input, InputComponentProps } from '../input'\r\nimport { ColorPreview } from './color-preview'\r\nimport { ColorPickerProps } from './picker'\r\nimport * as colorUtil from './util'\r\n\r\ninterface PickerInputProps extends Omit\r\n
\r\n )}\r\n {!isRgba && #}\r\n \r\n }\r\n onChange={handleColorInputChange}\r\n />\r\n )\r\n }\r\n)\r\n","import classnames from 'classnames'\r\nimport React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\r\n\r\nimport { isMobile } from '../../../app/shared/isMobile'\r\nimport { Button } from '../button'\r\nimport { Popover, PopoverTrigger, usePopoverState } from '../popover'\r\nimport { Alpha } from './alpha'\r\nimport { ColorPalette } from './color-palette'\r\nimport { HueSaturation } from './hue-saturation'\r\nimport { Lightness } from './lightness'\r\nimport { PickerInput } from './picker-input'\r\nimport * as colorUtil from './util'\r\n\r\nexport interface ColorPickerProps {\r\n /**\r\n * The selected color in HEX format (supports HEX8 for alpha)\r\n */\r\n color: string\r\n\r\n /**\r\n * Whether or not the user is able to select custom color\r\n *\r\n * @default true\r\n */\r\n canSelectCustom?: boolean\r\n\r\n /**\r\n * Whether or not the user is able to change alpha channel. Only applicable\r\n * when `canSelectCustom` is true\r\n *\r\n * @default true\r\n */\r\n canSelectAlpha?: boolean\r\n\r\n /**\r\n * Sets the output format for the color picker\r\n *\r\n * @default 'hex'\r\n */\r\n outputFormat?: 'hex' | 'rgba'\r\n\r\n /**\r\n * Callback when user changes color. Use the second parameter to do color space\r\n * conversions otherwise the color could differ due to rounding\r\n */\r\n onChange: (color: string, originalColor: colorUtil.HSVA) => void\r\n\r\n /**\r\n * Callback when user clicks on a palette item. Used to close popover\r\n */\r\n onPaletteItemClick?: () => void\r\n}\r\n\r\nexport function ColorPicker({\r\n color,\r\n canSelectCustom = true,\r\n canSelectAlpha = true,\r\n outputFormat = 'hex',\r\n onChange,\r\n onPaletteItemClick,\r\n}: ColorPickerProps) {\r\n const cachedColor = useRef(color)\r\n const [hsvaColor, setColor] = useState(colorUtil.getHSVAFromColor(color))\r\n\r\n /**\r\n * Update state if the color from outside changed\r\n */\r\n useEffect(() => {\r\n const currentColor = colorUtil.removeHashSymbol(cachedColor.current)\r\n const newColor = colorUtil.removeHashSymbol(color)\r\n\r\n if (currentColor === newColor || !colorUtil.isValidColor(newColor)) return\r\n\r\n cachedColor.current = color\r\n setColor(colorUtil.getHSVAFromColor(color))\r\n }, [color])\r\n\r\n /**\r\n * Handle color change\r\n * 1. update cache so we can correctly check when outside color updates\r\n * 2. Update internal color representation\r\n * 3. call onChange with string color\r\n */\r\n const onChangeCallback = useCallback(\r\n (color: colorUtil.HSVA) => {\r\n const stringColor = colorUtil.stringifyHSVAColor(color, outputFormat, canSelectAlpha)\r\n cachedColor.current = stringColor\r\n onChange(stringColor, color)\r\n setColor(color)\r\n },\r\n [onChange, canSelectAlpha, outputFormat]\r\n )\r\n\r\n const onSetCustomCodeClick = useCallback(() => {\r\n const value = prompt('Enter a color code')?.trim()\r\n\r\n if (!value) return\r\n\r\n const isValid = colorUtil.isValidColor(value)\r\n\r\n if (!isValid) {\r\n return alert('The code is not a valid color')\r\n }\r\n\r\n onChangeCallback(colorUtil.getHSVAFromColor(value))\r\n }, [onChangeCallback])\r\n\r\n return (\r\n \r\n {canSelectCustom && (\r\n <>\r\n {isMobile() && (\r\n \r\n )}\r\n \r\n {\r\n onPaletteItemClick?.()\r\n onChangeCallback({ ...orignalColor, a: hsvaColor.a })\r\n }}\r\n />\r\n
\r\n \r\n )\r\n}\r\n\r\ninterface InputColorPickerProps extends ColorPickerProps {\r\n /**\r\n * Label for the input\r\n */\r\n label?: ReactNode\r\n inputDataTestId?: string\r\n}\r\n\r\nexport function InputColorPicker({ label, inputDataTestId, onChange, ...props }: InputColorPickerProps) {\r\n const popoverState = usePopoverState()\r\n const canSelectCustom = props.canSelectCustom !== false\r\n const isMobileDevice = isMobile()\r\n\r\n return (\r\n <>\r\n \r\n
\r\n )}\r\n \r\n \r\n {colors.map(({ color, label }, index) => (\r\n setActiveColorIndex(index)}\r\n >\r\n {label}\r\n \r\n ))}\r\n \r\n
\r\n )}\r\n \r\n e.currentTarget.select()}\r\n inputClass=\"h-12\"\r\n data-testid=\"copy-to-clipboard-textarea\"\r\n value={text}\r\n />\r\n
\r\n )\r\n}\r\n","import * as React from 'react'\r\nimport { CalendarProps } from 'react-calendar'\r\n\r\nimport { Box } from '../box'\r\nimport { ZIndexContext, getExtendedDialogState } from '../dialog'\r\nimport { Popover, PopoverTrigger, usePopoverState } from '../popover'\r\nimport { Spinner } from '../spinner'\r\n\r\nconst DatePickerComponent = React.lazy(() => import('./picker'))\r\n\r\ntype RangePickerCallback = (value: [Date, Date], ev: React.ChangeEvent\r\n {bottomLeftContent && \r\n {isCopied ? 'Copied' : 'Copy'}\r\n \r\n
\r\n {bottomLeftContent}
}\r\n {props.actions}
\r\n {subtitle}
}\r\n \r\n )\r\n }}\r\n \r\n
\r\n \r\n {caption && typeof caption !== 'boolean' && (\r\n \r\n \r\n {caption && typeof caption !== 'boolean' && (\r\n {caption} \r\n )}\r\n {error && typeof error !== 'boolean' && {error} }\r\n
\r\n )\r\n}\r\n\r\nexport const Input = forwardRef(InputComponent)\r\nexport const Textarea = forwardRef(TextareaComponent)\r\n","import * as React from 'react'\r\nimport * as Reakit from 'reakit/Composite'\r\n\r\nexport const ListContext = React.createContext{props.children}
\r\n {props.actions ?? }
\r\n \r\n )\r\n}\r\n","import * as React from 'react'\r\n\r\nimport { NotificationContextType, useNotification } from './hooks'\r\n\r\nexport function withNotificationContext\r\n \r\n {React.Children.map(children, (child) => {\r\n if (!React.isValidElement(child)) return child\r\n\r\n if (child.type === ComboBoxItem) {\r\n return React.cloneElement(\r\n child as React.ReactElement>,\r\n {\r\n state,\r\n onMouseUp: () => {\r\n onChange(child.props.value)\r\n },\r\n }\r\n )\r\n }\r\n\r\n return child\r\n })}\r\n \r\n
\r\n )}\r\n \r\n {data && data.length !== 0 && (\r\n \r\n Show All Results\r\n \r\n )}\r\n
\r\n )\r\n}\r\n","import { Placement } from '@popperjs/core'\r\nimport { useQueryErrorResetBoundary } from '@tanstack/react-query'\r\nimport classnames from 'classnames'\r\nimport * as React from 'react'\r\nimport { ErrorBoundary } from 'react-error-boundary'\r\n\r\nimport { getSanitizedTicker } from '../../../app/shared/ticker-sanitizer'\r\nimport { ComboBox, useComboBoxState } from '../combo-box'\r\nimport { getExtendedDialogState } from '../dialog'\r\nimport { IconNameType } from '../icon'\r\nimport { InputSize, InputTheme } from '../input'\r\nimport { List, ListItem, useListState } from '../list'\r\nimport { INSTRUMENT_CATEGORIES } from './constants'\r\nimport { SearchError } from './search-error'\r\nimport { SearchList } from './search-list'\r\nimport { getRedirectForTicker } from './util'\r\n\r\ninterface SearchProps {\r\n autoFocus?: boolean\r\n defaultValue?: string\r\n defaultPlacement?: Placement\r\n placeholder?: string\r\n theme?: keyof typeof InputTheme\r\n size?: keyof typeof InputSize\r\n allowCategorySwitching?: boolean\r\n inputClass?: string\r\n popoverClass?: string\r\n chartIndex?: number\r\n isMatchInputAndBoxWidth?: boolean\r\n isSearchIcon?: boolean\r\n isShowAllVisible?: boolean\r\n isSearchItemLink?: boolean\r\n rightContent?: JSX.Element | IconNameType\r\n onTickerSelected?: (ticker: string) => void\r\n}\r\n\r\nexport function Search({\r\n isSearchIcon = true,\r\n isShowAllVisible = true,\r\n isSearchItemLink = true,\r\n ...props\r\n}: SearchProps) {\r\n const { reset } = useQueryErrorResetBoundary()\r\n const state = useComboBoxState({\r\n minValueLength: 1,\r\n inputValue: props.defaultValue,\r\n placement: props.defaultPlacement ?? 'bottom-start',\r\n })\r\n const { isFullyClosed } = getExtendedDialogState(state)\r\n const listState = useListState({ orientation: 'vertical' })\r\n const [category, setCategory] = React.useState(0)\r\n\r\n const changeCategory = React.useRef((ev: React.KeyboardEvent) => {\r\n switch (ev.key) {\r\n case 'ArrowRight':\r\n state.first()\r\n break\r\n case 'ArrowUp':\r\n setCategory((state) => (state - 1 + INSTRUMENT_CATEGORIES.length) % INSTRUMENT_CATEGORIES.length)\r\n break\r\n case 'ArrowDown':\r\n setCategory((state) => (state + 1) % INSTRUMENT_CATEGORIES.length)\r\n break\r\n }\r\n })\r\n\r\n /**\r\n * The search box can be child of a modal/dialog so we need to handle ESC\r\n * otherwise it would close both the combobox and the parent.\r\n */\r\n const onInputKeyDown = React.useCallback(\r\n (ev: React.KeyboardEvent) => {\r\n if (ev.key === 'Escape' && state.visible) {\r\n ev.stopPropagation()\r\n state.hide()\r\n }\r\n },\r\n // We only use `visible` and `hide` and don’t need the full state\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n [state.visible, state.hide]\r\n )\r\n\r\n /**\r\n * Reset to category \"All\" when the combobox closes\r\n */\r\n React.useEffect(() => {\r\n if (isFullyClosed) {\r\n setCategory(0)\r\n }\r\n }, [isFullyClosed])\r\n\r\n return (\r\n \r\n {data.map((item) => (\r\n ) => {\r\n ev.preventDefault()\r\n props.onTickerSelected?.(item.ticker)\r\n props.state?.setInputValue('')\r\n },\r\n }\r\n }\r\n />\r\n ))}\r\n
\r\n )}\r\n {props.isShowAllVisible && (\r\n \r\n {props.allowCategorySwitching && (\r\n setCategory(index)}\r\n onKeyDown={changeCategory.current}\r\n >\r\n {INSTRUMENT_CATEGORIES.map((category) => (\r\n {category.name} \r\n ))}\r\n \r\n )}\r\n {!isFullyClosed && (\r\n \r\n
\r\n \r\n )\r\n}\r\n","import * as Reakit from 'reakit/Combobox'\r\n\r\nimport { COMPONENT_ANIMATION_DURATION } from '../constants'\r\n\r\nexport function useComboBoxState(options?: Reakit.unstable_ComboboxInitialState) {\r\n return Reakit.unstable_useComboboxState({\r\n ...options,\r\n animated: COMPONENT_ANIMATION_DURATION,\r\n modal: false,\r\n inline: true,\r\n unstable_offset: [0, 5],\r\n })\r\n}\r\n","import * as React from 'react'\r\n\r\nimport { PopoverStateReturn } from '../popover'\r\nimport { SelectItem } from './types'\r\n\r\nfunction getSelectedItemIndex(items: SelectItem\r\n {label}}>\r\n \r\n
\r\n )}\r\n \r\n )\r\n}\r\n","import classNames from 'classnames'\r\nimport * as React from 'react'\r\nimport { Link, To } from 'react-router-dom'\r\n\r\nimport { BoxRounding } from '../box'\r\nimport { Button, ButtonHTMLProps, ButtonProps, ButtonSizeType } from '../button'\r\nimport { DropdownSeparator } from '../dropdown'\r\nimport { Icon } from '../icon'\r\nimport { SelectItem, SelectOption, SelectWithTooltip } from '../select'\r\nimport { LabelWithDelayedSpinner } from './label-with-delayed-spinner'\r\n\r\nexport type TimeframeBaseOption\r\n
\r\n )}\r\n {!isCompactView && (\r\n \r\n {\r\n /*\r\n * Vertical scrolling doesn't scroll horizontally by default (it's possible when holding shift)\r\n * When using touchpad we may get values in both delatX and deltaY, so if someone's scrolling horizontally we don't want to do anything\r\n * but if they are scrolling vertically (deltaY > deltaX) we want to scroll horizontally the value they would nativally scroll in vertical direction\r\n * */\r\n const absDx = Math.abs(event.deltaX)\r\n const absDy = Math.abs(event.deltaY)\r\n if (absDy > absDx) {\r\n event.currentTarget.scrollLeft += event.deltaY\r\n }\r\n }}\r\n >\r\n {timeframesInExpandedPanel.map((timeframe) => {\r\n let linkProps = {}\r\n if (timeframe.href) {\r\n linkProps = {\r\n as: Link,\r\n to: timeframe.href,\r\n reloadDocument: timeframe.withReload ?? !isPremium,\r\n onClick: () => onTimeframeSelect(timeframe),\r\n }\r\n } else {\r\n linkProps = {\r\n onClick: (ev: React.MouseEvent) => {\r\n ev.preventDefault()\r\n onTimeframeSelect(timeframe)\r\n },\r\n }\r\n }\r\n return (\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n )\r\n}\r\n","import { type To } from 'react-router-dom'\r\n\r\nimport { decodeQueryString, encodeQueryString } from '../../../app/queryString'\r\nimport { SpecificChartFunctionality } from '../../../app/shared/chartLayoutConfig'\r\nimport { TIMEFRAME } from '../../constants'\r\nimport { DateRangeType, Instrument } from '../../types'\r\nimport { CUSTOM_DATE_RANGE, CustomDateRangePrefixEnum, DATE_RANGE_PREFIX_DELMITER } from './custom-date-range-utils'\r\n\r\ninterface ITimeFrame {\r\n value: TIMEFRAME | 'intraday'\r\n label: string\r\n labelShort: string\r\n labelPageTitle?: string\r\n}\r\n\r\nexport interface ITimeframeGroup {\r\n label: string\r\n timeframes: ITimeFrame[]\r\n}\r\n\r\ninterface IDateRange {\r\n value: string\r\n label: string\r\n timeframe?: TIMEFRAME\r\n}\r\n\r\nexport interface IRangeGroup {\r\n label?: string\r\n dateRanges: IDateRange[]\r\n}\r\n\r\nexport const generateTimeframeGroups = (isPremium = true): ITimeframeGroup[] => {\r\n const premiumTimeframes: ITimeframeGroup[] = [\r\n {\r\n label: '',\r\n timeframes: [\r\n { value: TIMEFRAME.i1, label: '1 Minute', labelShort: '1M' },\r\n { value: TIMEFRAME.i2, label: '2 Minutes', labelShort: '2M' },\r\n { value: TIMEFRAME.i3, label: '3 Minutes', labelShort: '3M' },\r\n { value: TIMEFRAME.i5, label: '5 Minutes', labelShort: '5M' },\r\n { value: TIMEFRAME.i10, label: '10 Minutes', labelShort: '10M' },\r\n { value: TIMEFRAME.i15, label: '15 Minutes', labelShort: '15M' },\r\n { value: TIMEFRAME.i30, label: '30 Minutes', labelShort: '30M' },\r\n ],\r\n },\r\n {\r\n label: '',\r\n timeframes: [\r\n { value: TIMEFRAME.h, label: '1 Hour', labelShort: '1H', labelPageTitle: 'Hourly' },\r\n { value: TIMEFRAME.h2, label: '2 Hours', labelShort: '2H' },\r\n { value: TIMEFRAME.h4, label: '4 Hours', labelShort: '4H' },\r\n ],\r\n },\r\n {\r\n label: '',\r\n timeframes: [\r\n { value: TIMEFRAME.d, label: '1 Day', labelShort: 'D', labelPageTitle: 'Daily' },\r\n { value: TIMEFRAME.w, label: '1 Week', labelShort: 'W', labelPageTitle: 'Weekly' },\r\n { value: TIMEFRAME.m, label: '1 Month', labelShort: 'M', labelPageTitle: 'Monthly' },\r\n ],\r\n },\r\n ]\r\n\r\n const freeTimeframes = [\r\n {\r\n // intradayTimeframe is only for non premium users used as redirect to elite subscription\r\n label: '',\r\n timeframes: [{ value: 'intraday' as const, label: 'Intraday', labelShort: 'Intraday' }],\r\n },\r\n {\r\n label: '',\r\n timeframes: [\r\n { value: TIMEFRAME.d, label: '1 Day', labelShort: 'Daily' },\r\n { value: TIMEFRAME.w, label: '1 Week', labelShort: 'Weekly' },\r\n { value: TIMEFRAME.m, label: '1 Month', labelShort: 'Monthly' },\r\n ],\r\n },\r\n ]\r\n\r\n return isPremium ? premiumTimeframes : freeTimeframes\r\n}\r\n\r\nexport function getTimeframeGroups(isPremium: boolean) {\r\n return generateTimeframeGroups(isPremium)\r\n}\r\n\r\nexport const generateDateRangeGroups = ({\r\n isPremium,\r\n instrument,\r\n}: {\r\n isPremium: boolean\r\n instrument: Instrument\r\n}): IRangeGroup[] => {\r\n const isStock = instrument === Instrument.Stock\r\n const rangeGroups: Array<{ label?: string; dateRanges: IDateRange[] }> = [\r\n {\r\n label: 'Days',\r\n dateRanges: [\r\n { value: DateRangeType.d1, label: '1 Day', timeframe: isStock ? TIMEFRAME.i1 : TIMEFRAME.i5 },\r\n { value: DateRangeType.d5, label: '5 Days', timeframe: isStock ? TIMEFRAME.i5 : TIMEFRAME.i30 },\r\n ],\r\n },\r\n {\r\n label: 'Months',\r\n dateRanges: [\r\n { value: DateRangeType.m1, label: '1 Month', timeframe: TIMEFRAME.d },\r\n { value: DateRangeType.m3, label: '3 Months', timeframe: TIMEFRAME.d },\r\n { value: DateRangeType.m6, label: '6 Months', timeframe: TIMEFRAME.d },\r\n ],\r\n },\r\n {\r\n label: 'Years',\r\n dateRanges: [\r\n { value: DateRangeType.ytd, label: 'Year to Date', timeframe: TIMEFRAME.d },\r\n { value: DateRangeType.y1, label: '1 Year', timeframe: TIMEFRAME.d },\r\n { value: DateRangeType.y2, label: '2 Years', timeframe: TIMEFRAME.w },\r\n { value: DateRangeType.y5, label: '5 Years', timeframe: isPremium ? TIMEFRAME.w : TIMEFRAME.m },\r\n { value: DateRangeType.max, label: 'Max', timeframe: TIMEFRAME.m },\r\n ],\r\n },\r\n ]\r\n\r\n return rangeGroups\r\n}\r\n\r\nexport function getDateRangeGroups({\r\n isPremium,\r\n customRange,\r\n isCustomAvailable = true,\r\n instrument,\r\n}: {\r\n isPremium: boolean\r\n customRange?: string\r\n isCustomAvailable?: boolean\r\n instrument: Instrument\r\n}) {\r\n const rangeGroups = generateDateRangeGroups({ isPremium, instrument })\r\n\r\n if (isPremium && isCustomAvailable !== false) {\r\n const [dateRangePrefix] = customRange?.split(DATE_RANGE_PREFIX_DELMITER) ?? []\r\n rangeGroups.push({\r\n dateRanges: [\r\n {\r\n value:\r\n customRange && Object.values\r\n \r\n \r\n \r\n {children}\r\n \r\n
\r\n )}\r\n