{title}
\r\n\r\n \r\n
\r\n );\r\n if (visiblePages[index + 1] && p + 1 !== visiblePages[index + 1]) {\r\n result.push(...
)\r\n }\r\n });\r\n return result;\r\n };\r\n\r\n const validatePageInput = (value) => {\r\n if (value >= 1 && value <= pages) {\r\n return;\r\n }\r\n\r\n return `Valid range is 1-${pages}`;\r\n }\r\n\r\n const handleChangePageInput = (e) => {\r\n setPageInput(Number(e.target.value) || '');\r\n\r\n if (errorPageInput) {\r\n const error = validatePageInput(e.target.value);\r\n setErrorPageInput(error);\r\n }\r\n }\r\n\r\n const renderGoToPageNavigation = () => {\r\n return (\r\n \r\n Go to page:\r\n {\r\n handlePageChange(pageInput);\r\n }}\r\n disabled={pageInput === selectedPage || errorPageInput || !pageInput}\r\n className=\"btn btn-ghost btn-sm\"\r\n >\r\n Go\r\n \r\n
\r\n );\r\n };\r\n\r\n const handlePageChange = (page) => {\r\n const error = validatePageInput(page);\r\n setErrorPageInput(error);\r\n\r\n if (!error) {\r\n setSelectedPage(page);\r\n onPageChanged && onPageChanged(page);\r\n }\r\n }\r\n\r\n const getLastItemIndexInList = () => {\r\n return (itemsOnPage * (selectedPage - 1)) + itemsOnPage;\r\n };\r\n\r\n const previous = () => {\r\n handlePageChange(selectedPage - 1);\r\n };\r\n\r\n const next = () => {\r\n handlePageChange(selectedPage + 1);\r\n };\r\n\r\n return (\r\n <>\r\n {typeof children === 'function' ? children(getItems()) : children}\r\n {\r\n (total > itemsOnPage || list.length > itemsOnPage) && (\r\n \r\n
\r\n {errorPageInput}
}\r\n \r\n
\r\n )\r\n }\r\n \r\n );\r\n}\r\n\r\nPagination.defaultProps = {\r\n onPageChanged: () => {},\r\n list: [],\r\n itemsOnPage: 10,\r\n total: 0,\r\n}\r\n","import React from 'react';\r\nimport { DealerFilterOptions } from './DealerFilterOptions';\r\nimport { DealerListFilterOption } from '../../types/state/DealerListState';\r\nimport { FilterSelect } from '../common/filters/FilterSelect';\r\n\r\ninterface Props {\r\n disabled: boolean;\r\n filterOptions: DealerListFilterOption[];\r\n onFilterChange: (option: DealerListFilterOption) => void;\r\n}\r\n\r\nexport const DealerListFilter: React.FC\r\n {`${(itemsOnPage * (selectedPage - 1)) + 1}-${getLastItemIndexInList() > totalItems ? totalItems : getLastItemIndexInList()} of ${totalItems}`}\r\n
\r\n \r\n \r\n \r\n
\r\n {withGoToPageNavigation && renderGoToPageNavigation()}\r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nShortLongDatedDealsChart.defaultProps = {\r\n divId: 'long-short-dated-deals-chart'\r\n};\r\n","import React, { useMemo } from 'react';\r\nimport { constants } from '../../../constants';\r\nimport { TransactionType } from '../../../types/amr-pipeline/enums/TransactionType';\r\nimport { ChartGrouping, ChartTypes, ChartUnits, ChartUnitsList } from '../../../types/dashboard/AmrChart';\r\nimport { Currency } from '../../../types/enums/Currency';\r\nimport { DropDownList } from '../../controls/DropDownList';\r\nimport { FilterPanel, FilterSection, FilterSwitch } from '../../filters';\r\n\r\nexport interface ShortLongDatedDealsChartFilter {\r\n transactionType: TransactionType | string;\r\n units: ChartUnits;\r\n grouping: ChartGrouping;\r\n currencyCode?: Currency;\r\n}\r\n\r\nexport interface ShortLongDatedDealsChartFilterProps extends ShortLongDatedDealsChartFilter {\r\n onChange: (value: ShortLongDatedDealsChartFilter) => void;\r\n}\r\n\r\nexport function ShortLongDatedDealsFilter({\r\n onChange,\r\n ...values\r\n}: ShortLongDatedDealsChartFilterProps) {\r\n const handleValueChange = (prop: keyof ShortLongDatedDealsChartFilter) => (value: any) => {\r\n onChange({\r\n ...values,\r\n [prop]: value,\r\n });\r\n };\r\n\r\n const chartTypes = useMemo(() => {\r\n const all = {\r\n value: constants.allListItem,\r\n text: 'All',\r\n selected: values.transactionType === constants.allListItem,\r\n };\r\n\r\n return [\r\n all,\r\n ...ChartTypes.map(({ value, text }) => ({\r\n value,\r\n text,\r\n selected: values.transactionType === value,\r\n })),\r\n ];\r\n }, [values.transactionType]);\r\n\r\n const chartUnits = useMemo(() => ChartUnitsList\r\n .map(({ value, text }) => ({\r\n value,\r\n text,\r\n selected: values.units === value,\r\n })), [values.units]);\r\n\r\n return (\r\n {ChartLegends[1]}
\r\n {ChartLegends[0]}
\r\n \r\n {[Currency.USD, Currency.EUR].map(currencyCode =>\r\n handleValueChange('currencyCode')(currencyCode)}\r\n />)}\r\n
\r\n \r\n {[\r\n ChartGrouping.M,\r\n ChartGrouping.Q,\r\n ChartGrouping.Y,\r\n ].map(grouping =>\r\n handleValueChange('grouping')(grouping)}\r\n />)}\r\n
\r\n {chartName}{subtitle && {subtitle}}
\r\n\r\n All statistics are calculated based on the transaction pricing date.\r\n \r\n ) : null\r\n }\r\n >\r\n {shortLongDatedDeals?.length ? chart :
the KTX ATS Platform}\r\n onClose={handleClose}\r\n modalClass=\"modal-invite-broker\"\r\n >\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {messageError}
}\r\n \r\n \r\n \r\n Send\r\n \r\n
\r\n \r\n )\r\n}\r\n","import React from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { inviteToJoinActions } from '../../../actions';\r\nimport { InviteToJoinPopup } from './InviteToJoinPopup';\r\nimport { FeatureButton } from '../../access/FeatureButton';\r\nimport { OnHoverTooltip } from '../../common/OnHoverTooltip';\r\nimport { RoleActionBlocker } from '../../access/RoleActionBlocker';\r\nimport { roles } from '../../../constants';\r\n\r\nexport function InviteToJoinAllButton({ disabled = true }) {\r\n const dispatch = useDispatch();\r\n\r\n return (\r\n e.stopPropagation()}>\r\n \r\n {\r\n blocked =>\r\n \r\n dispatch(inviteToJoinActions.setVisiblePopup(true))}\r\n >\r\n Invite to Join\r\n \r\n \r\n }\r\n \r\n
\r\n )\r\n}\r\n","import React, { useCallback } from 'react';\r\nimport Confirm from '../alerts/Confirm';\r\nimport { useSelector } from 'react-redux';\r\nimport { AppState } from '../../types/state/AppState';\r\nimport { companyStatuses } from '../../constants';\r\nimport { dealersSelector } from '../../selectors/dealers.selector';\r\nimport { useBrokerDealerUsers } from '../../effects/useBrokerDealerUsers';\r\nimport { useSettlementAgentAgreements } from '../../effects/useSettlementAgentAgreements';\r\nimport { dealersActions } from '../../actions';\r\nimport { useAppDispatch } from '../../effects/useAppDispatch';\r\n\r\nconst ConfirmRequestToBidPopup: React.FC = () => {\r\n const dispatch = useAppDispatch();\r\n\r\n const confirmRequestToBidPopupState = useSelector((s: AppState) => s.dealers.confirmRequestToBidPopup);\r\n const isRequestingSendRequestToBidRequest = useSelector((s: AppState) => s.dealers.requestToBidRequestState);\r\n const brokerDealersState = useSelector(dealersSelector);\r\n\r\n const brokerDealerUsers = useBrokerDealerUsers();\r\n const settlementAgentAgreements = useSettlementAgentAgreements();\r\n\r\n const getDealers = useCallback(() => brokerDealersState.filter((d) => (\r\n d.isClearingBank && (\r\n confirmRequestToBidPopupState.dealerId\r\n ? d.id === confirmRequestToBidPopupState.dealerId\r\n : (\r\n d.status === companyStatuses.active.statusCode &&\r\n brokerDealerUsers.items.some(contact => contact.companyId === d.id) &&\r\n !settlementAgentAgreements.items.some(agreement => agreement.settlementAgent.id === d.id)\r\n )\r\n )\r\n )), [brokerDealersState, brokerDealerUsers.items, settlementAgentAgreements.items, confirmRequestToBidPopupState.dealerId]);\r\n\r\n const handleConfirm = () => {\r\n const dealers = getDealers();\r\n let clearingBankId;\r\n if(process.env.REACT_APP_SEND_REQUEST_TO_CUSTOM_SETTLEMENT_AGENT_ENABLED === 'true' && dealers && dealers.length === 1) {\r\n clearingBankId = dealers[0].id;\r\n }\r\n dispatch(dealersActions.requestToBid(clearingBankId));\r\n };\r\n\r\n return (\r\n - \r\n {\r\n getDealers().map(c => (\r\n
- {c.name} \r\n ))\r\n }\r\n
\r\n \r\n {\r\n !isLoading &&\r\n \r\n
\r\n )\r\n};\r\n","import { ColumnBuilder } from \"../../../bidding/common/table/columns/column-builder/ColumnBuilder\";\r\nimport { IColumnDefinition } from \"../../../bidding/common/table/types/ColumnDefinition\";\r\nimport { AmrTransaction } from \"../../../../types/amr-pipeline/models/AmrTransaction\";\r\nimport { OriginatingTransaction } from \"../../../../types/amr-pipeline/models/OriginatingTransaction\";\r\nimport { PipelineWidgetColumn } from \"../../../../types/dashboard/PipelineWidgetColumn\";\r\nimport { formatUtils } from \"../../../../utils\";\r\nimport { constants } from \"../../../../constants\";\r\nimport { FilterRelatedTransactionsIcon } from '../../../amrPipeline/common/FilterRelatedTransactionsIcon';\r\nimport { DetailedPageLink } from \"../../../amrPipeline/common/DetailedPageLink\";\r\nimport { OnHoverTooltip } from \"../../../common\";\r\nimport { ActionBlocker } from \"../../../access/ActionBlocker\";\r\nimport { SubscriptionFeature } from \"../../../../types/billing/SubscriptionFeature\";\r\n\r\nconst buyColumnsDefinitions: IColumnDefinition\r\n
\r\n \r\n dispatch(dealersActions.setSearchTerm(value))}\r\n onClear={() => dispatch(dealersActions.setSearchTerm(''))}\r\n disabled={!dealerList.length}\r\n maxLengthValue={128}\r\n />\r\n
\r\n Dealers
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n {(blocked: boolean) => (\r\n \r\n \r\n REQUEST DirrectBidding\r\n \r\n \r\n )}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n {chartName}
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nUsBslEuCompliantDealsChart.defaultProps = {\r\n divId: 'us-bsl-esg-new-issue-chart'\r\n};\r\n","import React, { useMemo } from 'react';\r\nimport { constants } from '../../../constants';\r\nimport { TransactionType } from '../../../types/amr-pipeline/enums/TransactionType';\r\nimport { ChartGrouping, ChartTypes, ChartUnits } from '../../../types/dashboard/AmrChart';\r\nimport { DropDownList } from '../../controls/DropDownList';\r\nimport { FilterPanel, FilterSection, FilterSwitch } from '../../filters';\r\n\r\nexport interface UsBslEuCompliantDealsChartFilter {\r\n transactionType: TransactionType | string;\r\n units: ChartUnits;\r\n grouping: ChartGrouping;\r\n}\r\n\r\ninterface UsBslEuCompliantDealsChartFilterProps extends UsBslEuCompliantDealsChartFilter {\r\n onChange: (value: UsBslEuCompliantDealsChartFilter) => void;\r\n}\r\n\r\nexport function UsBslEuCompliantDealsFilter({\r\n onChange,\r\n ...values\r\n}: UsBslEuCompliantDealsChartFilterProps) {\r\n const handleValueChange = (prop: keyof UsBslEuCompliantDealsChartFilter) => (value: any) => {\r\n onChange({\r\n ...values,\r\n [prop]: value,\r\n });\r\n };\r\n\r\n const chartTypes = useMemo(() => {\r\n const all = {\r\n value: constants.allListItem,\r\n text: 'All',\r\n selected: values.transactionType === constants.allListItem,\r\n };\r\n\r\n return [\r\n all,\r\n ...ChartTypes.map(({ value, text }) => ({\r\n value,\r\n text,\r\n selected: values.transactionType === value,\r\n })),\r\n ];\r\n }, [values.transactionType]);\r\n\r\n return (\r\n EU Compliant
\r\n US BSL
\r\n % of EU Compliant Deals
\r\n \r\n {[ChartUnits.Volume, ChartUnits.Count].map(unit =>\r\n handleValueChange('units')(unit)}\r\n />\r\n )}\r\n
\r\n \r\n {[\r\n ChartGrouping.M,\r\n ChartGrouping.Q,\r\n ChartGrouping.Y,\r\n ].map(grouping =>\r\n handleValueChange('grouping')(grouping)}\r\n />)}\r\n
\r\n {chartName}
\r\n` +\r\n `${moneyUtils.money(row.median, true)}
`\r\n )\r\n }\r\n\r\n let outliers;\r\n\r\n if (row.bottomOutlier && row.topOutlier) {\r\n outliers = moneyUtils.money(row.bottomOutlier, true) + '; ' + moneyUtils.money(row.topOutlier, true);\r\n } else {\r\n const outlier = row.bottomOutlier || row.topOutlier;\r\n outliers = outlier ? moneyUtils.money(outlier, true) : undefined;\r\n }\r\n\r\n return (\r\n `${getDimension(spread)}
` +\r\n `Min: ${moneyUtils.money(row.min, true)}
` +\r\n `Q1: ${moneyUtils.money(row.q1, true)}
` +\r\n `Med: ${moneyUtils.money(row.median, true)}
` +\r\n `Q3: ${moneyUtils.money(row.q3, true)}
` +\r\n `Max: ${moneyUtils.money(row.max, true)}
` +\r\n (outliers ? `Outlier(s): ${(outliers)}
` : '')\r\n );\r\n };\r\n const getChartData = () => {\r\n return spreads.reduce((acc: any, spread: IssuanceSpreadBase) => {\r\n const dimension = getDimension(spread);\r\n const row = fieldSelector(spread);\r\n\r\n if (!row) return acc;\r\n\r\n const isSingleValue = isSingleValueSpread(row);\r\n const isEmptyMarker = isEmptyMarkerSpread(row)\r\n\r\n let data = [...acc];\r\n\r\n if (!isEmptyMarker) {\r\n const box = row.count ? {\r\n q1: [row.q1],\r\n q3: [row.q3],\r\n median: [row.median],\r\n lowerfence: [row.min],\r\n upperfence: [row.max],\r\n name: isSingleValue ? undefined : getHoverInfoText(spread),\r\n x: [dimension],\r\n type: 'box',\r\n marker: {\r\n color: border,\r\n },\r\n fillcolor: bar,\r\n hoverinfo: isSingleValue ? 'skip' : 'name',\r\n boxpoints: false,\r\n } : {};\r\n\r\n const topOutlier = {\r\n x: [dimension],\r\n y: [row.count ? row.topOutlier : undefined],\r\n hoverinfo: 'skip',\r\n mode: 'markers',\r\n type: 'scatter',\r\n marker: {\r\n size: 6,\r\n color: border,\r\n },\r\n };\r\n\r\n const bottomOutliers = {\r\n x: [dimension],\r\n y: [row.count ? row.bottomOutlier : undefined],\r\n hoverinfo: 'skip',\r\n mode: 'markers',\r\n type: 'scatter',\r\n marker: {\r\n size: 6,\r\n color: border,\r\n },\r\n };\r\n\r\n data.push(box, topOutlier, bottomOutliers);\r\n }\r\n\r\n if (isSingleValue || isEmptyMarker) {\r\n data.push({\r\n x: [dimension],\r\n y: [row.median],\r\n name: isEmptyMarker ? undefined : getHoverInfoText(spread),\r\n hoverinfo: isEmptyMarker ? 'skip' : 'name',\r\n mode: 'none'\r\n });\r\n }\r\n\r\n return data;\r\n }, []);\r\n };\r\n\r\n const getLayout = () => {\r\n return {\r\n ...chartLayout,\r\n showlegend: false,\r\n autosize: true,\r\n hovermode: 'closest',\r\n hoverlabel,\r\n xaxis: {\r\n automargin: true,\r\n type: 'category',\r\n tickcolor: tickColor,\r\n tickfont: tickFont,\r\n fixedrange: true,\r\n dtick: 'D1',\r\n tickformat: '%m/%d/%y',\r\n },\r\n yaxis: {\r\n automargin: true,\r\n showgrid: true,\r\n showtickprefix: 'all',\r\n fixedrange: true,\r\n gridcolor: tickColor,\r\n ticks: 'inside',\r\n tickcolor: tickColor,\r\n tickfont: tickFont,\r\n zerolinecolor: zeroLineColor,\r\n separatethousands: true,\r\n },\r\n };\r\n };\r\n\r\n const data = getChartData();\r\n const layout = getLayout();\r\n\r\n return (\r\n <>\r\n
{title}
\r\n\r\n {ratings.map(rating => ratingColors[rating]\r\n ? (\r\n
\r\n )\r\n}\r\n","import { SubscriptionFeature } from '../../../types/billing/SubscriptionFeature';\r\nimport { UsBslNewIssueWeeklySpread } from './UsBslNewIssueWeeklySpread';\r\n\r\nexport function UsBslNewIssueWasWidget() {\r\n return (\r\n \r\n {rating}\r\n
\r\n ) : null\r\n )}\r\n {chartName}
\r\n\r\n
\r\n \r\n
\r\n \r\n ({\r\n value,\r\n text,\r\n selected: value === type,\r\n })\r\n )}\r\n onChange={handleTypeChange}\r\n className=\"custom-drop-down-ghost\"\r\n prefix=\"Type: \"\r\n />\r\n
\r\n \r\n ({\r\n value,\r\n text,\r\n selected: value === currency,\r\n }))}\r\n onChange={handleCurrencyChange}\r\n className=\"custom-drop-down-ghost\"\r\n defaultSortingEnabled={false}\r\n prefix=\"Ccy: \"\r\n />\r\n
\r\n \r\n ({\r\n ...x,\r\n selected: collateralType === x.value,\r\n }))}\r\n defaultSortingEnabled={false}\r\n onChange={({ value }) => setCollateralType(value as string)}\r\n renderSelectedItemCallback={amrChartUtils.renderSelectedFilterOptionWithPrefix('Collat.')}\r\n className=\"custom-drop-down-ghost\"\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nUsBslEsgNewIssueChart.defaultProps = {\r\n divId: 'us-bsl-esg-new-issue-chart'\r\n};\r\n","import React from 'react';\r\nimport { ChartGrouping, ChartUnits } from '../../../types/dashboard/AmrChart';\r\nimport { FilterPanel, FilterSection, FilterSwitch } from '../../filters';\r\n\r\nexport interface UsBslEsgNewIssueChartFilter {\r\n grouping: ChartGrouping;\r\n units: ChartUnits;\r\n}\r\n\r\ninterface IssueTransactionVolumeFilterProps extends UsBslEsgNewIssueChartFilter {\r\n onChange: (value: UsBslEsgNewIssueChartFilter) => void;\r\n}\r\n\r\nexport function UsBslEsgNewIssueFilter({\r\n onChange,\r\n ...values\r\n}: IssueTransactionVolumeFilterProps) {\r\n const handleValueChange = (prop: string) => (value: any) => {\r\n onChange({\r\n ...values,\r\n [prop]: value,\r\n });\r\n };\r\n\r\n return (\r\n Deals with ESG Language
\r\n US BSL New Issue
\r\n % of Issuance with ESG
\r\n \r\n {[ChartUnits.Volume, ChartUnits.Count].map(unit =>\r\n handleValueChange('units')(unit)}\r\n />\r\n )}\r\n
\r\n \r\n {[\r\n ChartGrouping.M,\r\n ChartGrouping.Q,\r\n ChartGrouping.Y,\r\n ].map(grouping =>\r\n handleValueChange('grouping')(grouping)}\r\n />)}\r\n
\r\n {chartName}
\r\n\r\n
\r\n )\r\n}\r\n","import React from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { SecuritiesSearchInput } from '../../filters';\r\nimport { dashboardOnSelectedSecurity, dashboardExportBwiStatistic } from '../../../actions';\r\nimport { dashboardChartBox, roles } from '../../../constants';\r\nimport { ChartBox } from '../../common/charts';\r\nimport { RequestState } from '../../../constants/request-state';\r\nimport { DashboardWidget, DashboardWidgetContent, DashboardWidgetHeader } from '../widget';\r\nimport { DashboardNoData } from '../DashboardNoData'\r\nimport { WidgetDescription } from '../WidgetDescription';\r\nimport { SubscriptionFeature } from '../../../types/billing/SubscriptionFeature';\r\nimport IconSVG from '../../../styles/svg-icons';\r\nimport { ShowFor } from '../../access';\r\nimport { ChartRequiredFeature } from '../../access/ChartRequiredFeature';\r\nimport { user } from '../../../user';\r\n\r\nexport function BoxPxTalkAndColorWidget() {\r\n const dispatch = useDispatch();\r\n\r\n const selectedSecurityHistory = useSelector(s => s.dashboard.selectedSecurityHistory) || [];\r\n const requestStateFetchSecurityHistory = useSelector(s => s.dashboard.requestStateFetchSecurityHistory);\r\n const searchTermItem = useSelector(s => s.dashboard.searchTermItem);\r\n const lookupCache = useSelector((s) => s.searchSecurities.lookupCache);\r\n const searchTerm = useSelector((s) => s.searchSecurities.searchTerm);\r\n\r\n const chartHasData = () => {\r\n return selectedSecurityHistory.some(s => (s.color || (s.pxTalks && s.pxTalks.length)));\r\n };\r\n\r\n const chartVisible = () => {\r\n return selectedSecurityHistory.length && requestStateFetchSecurityHistory === RequestState.success && searchTermItem && chartHasData();\r\n };\r\n\r\n const renderContent = () => {\r\n if (chartVisible()) {\r\n return (\r\n <>\r\n by identifiers.}\r\n />\r\n );\r\n }\r\n if (!chartHasData() && requestStateFetchSecurityHistory === RequestState.success && searchTermItem) {\r\n return (\r\n
{chartName}
\r\n\r\n dispatch(dashboardExportBwiStatistic())}\r\n >\r\n
\r\n ) : null}\r\n ` +\r\n `Last day of the range: ${moment.utc(data.endDate).format(constants.dashboardDateFormat)}
` +\r\n `Volume: ${data.USD == null ? '' : chartUtils.getMoneyString(data.USD, '$')}` +\r\n `${data.USD == null || data.EUR == null ? '' : ' / '}` +\r\n `${data.EUR == null ? '' : chartUtils.getMoneyString(data.EUR, '€')}`;\r\n\r\n const chartData = getChartData();\r\n\r\n const getYRange = () => {\r\n const max = chartUtils.roundToNumber(maxValue, dTick) || defaultYRangeMaxValue;\r\n const maxRange = max + numericUtils.getPercentage(max, yAxisLastLineMargin);\r\n return [0, maxRange]\r\n };\r\n\r\n const layout = {\r\n ...chartLayout,\r\n showlegend: false,\r\n barmode: \"group\",\r\n autosize: true,\r\n hovermode: 'closest',\r\n hoverlabel,\r\n xaxis: {\r\n range: xAxisRange,\r\n tickcolor: tickColor,\r\n tickfont: tickFont\r\n },\r\n yaxis: {\r\n showgrid: true,\r\n range: getYRange(),\r\n mirror: 'ticks',\r\n showtickprefix: 'none',\r\n fixedrange: true,\r\n gridcolor: tickColor,\r\n ticks: 'inside',\r\n tickcolor: tickColor,\r\n tickfont: tickFont,\r\n zerolinecolor: zeroLineColor,\r\n dtick: maxValue ? ( maxValue < dTick ? dTick / defaultDTick : dTick) : defaultDTick\r\n },\r\n };\r\n\r\n const renderPoints = () => {\r\n return data.map((dntRates, index) => (\r\n \r\n •\r\n {moment(dntRates.endDate, 'YYYY-MM-DD').format(constants.dashboardDateFormat)}\r\n \r\n ));\r\n };\r\n\r\n const renderChart = () => (\r\n
{renderPoints()}
\r\n \r\n );\r\n}\r\n\r\nBarDntChart.defaultProps = {\r\n divId: 'bar-dnt-chart'\r\n};\r\n","import React, { useMemo } from 'react';\r\nimport { BarDntChart } from './BarDntChart';\r\nimport { isRequesting } from '../../../utils';\r\nimport { DashboardWidget, DashboardWidgetContent, DashboardWidgetHeader } from '../widget';\r\nimport { SubscriptionFeature } from '../../../types/billing/SubscriptionFeature';\r\nimport { DashboardSkeleton } from '../DashboardSkeleton';\r\nimport { useAppSelector } from '../../../effects/useAppSelector';\r\nimport { ChartRequiredFeature } from '../../access/ChartRequiredFeature';\r\nimport { ShowFor } from '../../access';\r\n\r\nconst chartName = \"DNT %: Demand Barometer\";\r\n\r\nexport function BarDntWidget() {\r\n const dntRates = useAppSelector(s => s.dashboard.dntRates);\r\n const requestStateFetchDntRates = useAppSelector(s => s.dashboard.requestStateFetchDntRates);\r\n const filter = useAppSelector(s => s.dashboard.filter);\r\n const filterActive = useAppSelector(s => s.dashboard.filterActive);\r\n\r\n const { selectedCurrencies, selectedRatings } = filter;\r\n\r\n const filteredDntRates = useMemo(() => [...dntRates]\r\n .sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime())\r\n .map(rates => ({\r\n ...rates,\r\n dntRates: rates.dntRates.filter(rate => {\r\n if (selectedRatings.length && !selectedRatings.some(rating => rate.rating === rating)) {\r\n return false;\r\n }\r\n return !(selectedCurrencies.length && !selectedCurrencies.some(currency => rate.currency === currency));\r\n })\r\n })), [dntRates, selectedRatings, selectedCurrencies]);\r\n const chart = useMemo(() => {chartName}rolling 30-day avg
\r\n\r\n \r\n \r\n {!hideCreateNewBwic && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n
\r\n ) : (\r\n \r\n \r\n Create new bwic\r\n \r\n
\r\n {chartName}
\r\n\r\n \r\n {!portfolioExist && (\r\n
\r\n \r\n }\r\n \r\n )\r\n}\r\n","import React, { useEffect } from 'react';\r\nimport moment from 'moment';\r\nimport classNames from 'classnames';\r\nimport { Pagination } from '../tables/Pagination';\r\nimport { Preloader } from '../../common';\r\nimport { isRequestFailed, isRequesting, isRequestSuccess, moneyUtils } from '../../../utils';\r\nimport { Table } from '../../bidding/common/table';\r\nimport { IColumnDefinition } from '../../bidding/common/table/types/ColumnDefinition';\r\nimport { InventoryPosition } from '../../../types/inventory/InventoryPosition';\r\nimport { ColumnBuilder } from '../../bidding/common/table/columns/column-builder/ColumnBuilder';\r\nimport { constants, routes } from '../../../constants';\r\nimport { InventoryPositionStatus } from '../../../types/inventory/InventoryPositionStatus';\r\nimport { useHistory } from 'react-router';\r\nimport { DashboardNoData } from '../DashboardNoData';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { AppState } from '../../../types/state/AppState';\r\nimport {\r\n dashboardGetPortfolioInventorySecuritiesRequest,\r\n dashboardPortfolioInventorySortParamsChanged,\r\n dashboardSetPortfolioInventoryCurrentPage\r\n} from '../../../actions';\r\nimport { user } from '../../../user';\r\nimport { SubscriptionFeature } from '../../../types/billing/SubscriptionFeature';\r\nimport {\r\n InventorySecurityOrderByColumn,\r\n InventorySecuritySortOrder\r\n} from '../../../types/inventory/InventorySecurityOrderByColumn';\r\nimport { RequiredFeature } from '../../access/RequiredFeature';\r\nimport { PortfolioAgreementDisclaimerActionBlocker } from '../../portfolio-agreement-disclaimer/PortfolioAgreementDisclaimerActionBlocker';\r\nimport { CreatePortfolioButton } from '../../portfolio-agreement-disclaimer/CreatePortfolioButton';\r\nimport { Link } from '../../controls/Link';\r\n\r\nconst inventorySecuritiesItemsOnPage = 7;\r\n\r\nexport const DashboardPortfolioInventorySecurities: React.FC = () => {\r\n const history = useHistory();\r\n const dispatch = useDispatch();\r\n\r\n const portfolioExist = useSelector((s: AppState) => s.dashboard.portfolioExist);\r\n const {\r\n currentPage,\r\n securities,\r\n totalRecordNumber,\r\n requestStateGetSecurities,\r\n sortField,\r\n sortOrder,\r\n } = useSelector((s: AppState) => s.dashboard.portfolioInventory);\r\n\r\n const items = securities[currentPage];\r\n\r\n useEffect(() => {\r\n if (\r\n !securities[currentPage] &&\r\n !isRequesting(requestStateGetSecurities) &&\r\n !isRequestFailed(requestStateGetSecurities) &&\r\n user.hasFeatures(SubscriptionFeature.viewIncludedToPortfolioInventory)\r\n ) {\r\n dispatch(\r\n dashboardGetPortfolioInventorySecuritiesRequest(\r\n currentPage,\r\n inventorySecuritiesItemsOnPage,\r\n InventorySecurityOrderByColumn[sortField as keyof typeof InventorySecurityOrderByColumn],\r\n InventorySecuritySortOrder[sortOrder as keyof typeof InventorySecuritySortOrder]\r\n )\r\n )\r\n }\r\n }, [dispatch, currentPage, securities, requestStateGetSecurities, sortField, sortOrder])\r\n\r\n const handlePageChanged = (page: number) => {\r\n dispatch(dashboardSetPortfolioInventoryCurrentPage(page))\r\n }\r\n\r\n const getColumns = () => {\r\n const columnsDefinitions: IColumnDefinition\r\n \r\n \r\n Create Portfolio\r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n {!portfolioExist && (\r\n
\r\n )\r\n }\r\n\r\n const createSecurityCustomClassName = (inventory: InventoryPosition) => {\r\n return classNames({ 'sold-status': inventory.status === InventoryPositionStatus.traded })\r\n };\r\n\r\n const handleSortChange = (field: string, order: string) => {\r\n dispatch(dashboardPortfolioInventorySortParamsChanged(field, order))\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n Create Portfolio\r\n \r\n \r\n
\r\n )}\r\n \r\n {chartName}
\r\n {showAlerts &&\r\n\r\n
\r\n }\r\n Volume: ${chartData.data[d].amountMoney}`),\r\n textposition: 'none',\r\n }]\r\n };\r\n\r\n const layout = {\r\n ...chartLayout,\r\n annotations,\r\n showlegend: false,\r\n autosize: true,\r\n hovermode: 'closest',\r\n hoverlabel,\r\n yaxis: {\r\n showgrid: true,\r\n range: yAxisRange,\r\n fixedrange: true,\r\n showtickprefix: 'none',\r\n gridcolor: tickColor,\r\n ticks: 'inside',\r\n tickcolor: tickColor,\r\n tickfont: tickFont,\r\n zerolinecolor: zeroLineColor,\r\n },\r\n xaxis: {\r\n zeroline: false,\r\n tickcolor: tickColor,\r\n tickfont: tickFont,\r\n },\r\n };\r\n\r\n return (\r\n
{chartName}
\r\nValue %: ${d.amountPercentBySameDay}
Volume: ${d.amountToDisplay}`\r\n : ''\r\n ),\r\n textposition: 'none',\r\n }];\r\n\r\n const chartData = getChartData();\r\n\r\n const annotations = data.map((d) => {\r\n return {\r\n x: d.periodFrom,\r\n y: Number(d.amountPercentBySameDay) + annotationMargin,\r\n xref: 'x',\r\n yref: 'y',\r\n text: `${d.amountPercentBySameDay} %`,\r\n arrowhead: 0,\r\n ax: 0,\r\n ay: 0\r\n };\r\n });\r\n\r\n const layout = {\r\n ...chartLayout,\r\n annotations,\r\n hoverlabel,\r\n xaxis: {\r\n tickcolor: tickColor,\r\n tickfont: tickFont,\r\n range: xAxisRange\r\n },\r\n yaxis: {\r\n range: yAxisRange,\r\n dtick: dTick,\r\n showgrid: true,\r\n mirror: 'ticks',\r\n showtickprefix: 'none',\r\n fixedrange: true,\r\n gridcolor: tickColor,\r\n ticks: 'inside',\r\n tickcolor: tickColor,\r\n tickfont: tickFont,\r\n zerolinecolor: zeroLineColor,\r\n }\r\n };\r\n\r\n return (\r\n
{chartName}weekly avg
\r\n{chartName}USD, MM
\r\n\r\n
\r\n Dealer Net Flow
\r\n \r\n {minMaxYear} Cumulative Position\r\n
\r\n HY Volume: ${formatChartMoney(pointData.y.hy)}`\r\n };\r\n\r\n const plotData = createPlotData();\r\n\r\n const getYAxesMaxValue = () => {\r\n let maxValue = 0;\r\n data.forEach(d => {\r\n const total = d.y.ig + d.y.hy;\r\n if (total > maxValue) {\r\n maxValue = total\r\n }\r\n });\r\n return maxValue\r\n };\r\n\r\n const getYAxesRange = () => {\r\n const { yAxesMaxValueLineMargin } = chartDtcIgHyConstants;\r\n const maxValue = getYAxesMaxValue();\r\n\r\n let roundTo = 500;\r\n if (maxValue < roundTo) {\r\n roundTo = 100; \r\n }\r\n\r\n const roundMaxValue = chartUtils.roundToNumber(maxValue, roundTo);\r\n return [0, roundMaxValue + numericUtils.getPercentage(roundMaxValue, yAxesMaxValueLineMargin)];\r\n };\r\n\r\n const annotations = data.map((d) => {\r\n const { annotationMargin, annotationsFont } = chartDtcIgHyConstants;\r\n const total = d.y.ig + d.y.hy;\r\n const maxValue = getYAxesMaxValue();\r\n return {\r\n x: d.x,\r\n y: total + numericUtils.getPercentage(maxValue, annotationMargin),\r\n text: moneyUtils.money(total),\r\n arrowhead: 0,\r\n ax: 0,\r\n ay: 0,\r\n font: annotationsFont\r\n }\r\n });\r\n\r\n const layout = {\r\n barmode: 'stack',\r\n showlegend: false,\r\n autosize: true,\r\n hovermode: 'closest',\r\n annotations,\r\n margin: chartDtcIgHyConstants.margin,\r\n hoverlabel: chartDtcIgHyConstants.hoverlabel,\r\n xaxis: {\r\n tickcolor: chartDtcIgHyConstants.tickColor,\r\n tickfont: chartDtcIgHyConstants.font,\r\n },\r\n yaxis: {\r\n separatethousands: true,\r\n zerolinecolor: chartDtcIgHyConstants.tickColor,\r\n range: getYAxesRange(),\r\n gridcolor: chartDtcIgHyConstants.tickColor,\r\n ticks: 'inside',\r\n tickcolor: chartDtcIgHyConstants.tickColor,\r\n tickfont: chartDtcIgHyConstants.font,\r\n },\r\n };\r\n\r\n return (\r\n
{chartName}USD, MM
\r\n\r\n
\r\n IG
\r\n HY (includes unrated securities)
\r\n {chartName}
\r\n\r\n
\r\n Avg Color
\r\n Avg Px Talk
\r\n Px Talk Range
\r\n \r\n {chartName}rolling 30 days\r\n
\r\nValue: ${formatUtils.formatDecimal(data.y[index], 2)}%`\r\n );\r\n\r\n const createPlotData = () => {\r\n return chartData.data.map(data => ({\r\n x: data.x,\r\n y: data.y,\r\n mode: 'markers',\r\n type: 'scatter',\r\n name: data.x,\r\n text: getHoverText(data),\r\n hoverinfo: 'text',\r\n marker: {\r\n size: chartPxTalkDeviation.markerSize,\r\n color: data.markersColors\r\n }\r\n }))\r\n };\r\n\r\n const getYRange = () => {\r\n const additionalValueInPercentagesForLastLine = 30;\r\n if(chartData.maxValue) {\r\n const maxValue = numericUtils.round(chartData.maxValue, 0);\r\n const max = maxValue + numericUtils.getPercentage(maxValue, additionalValueInPercentagesForLastLine);\r\n return [0, max];\r\n }\r\n return []\r\n };\r\n\r\n const plotData = createPlotData();\r\n\r\n const layout = {\r\n barmode: 'stack',\r\n showlegend: false,\r\n autosize: true,\r\n hovermode: 'closest',\r\n margin: chartPxTalkDeviation.margin,\r\n hoverlabel: chartPxTalkDeviation.hoverlabel,\r\n xaxis: {\r\n showgrid: false,\r\n tickcolor: chartPxTalkDeviation.tickColor,\r\n tickfont: chartPxTalkDeviation.font,\r\n ticks: 'none'\r\n },\r\n yaxis: {\r\n fixedrange: true,\r\n separatethousands: true,\r\n zerolinecolor: chartPxTalkDeviation.tickColor,\r\n range: getYRange(),\r\n gridcolor: chartPxTalkDeviation.tickColor,\r\n ticks: 'inside',\r\n tickcolor: chartPxTalkDeviation.tickColor,\r\n tickfont: chartPxTalkDeviation.font,\r\n },\r\n };\r\n\r\n return (\r\n
{chartName}
\r\n{chartName}
\r\n\r\n
\r\n HY
\r\n IG
\r\n \r\n All CLO/CDO trades involving FINRA participants are recorded on TRACE and aggregated daily.\r\n To determine how much trading volume is conducted via BWICs, we divide our recorded BWIC volumes\r\n by TRACE-reported volumes, using 5-day rolling averages for each metric. Historically, BWICs have\r\n represented one-quarter to one-third of all CLO trading volume. This graph shows how 'open' the\r\n market is at any given time. High values indicate more activity on BWICs, while lower values\r\n indicate more out-of-comp trades are occurring.\r\n
\r\n \r\n {chartName}\r\n rolling 30 days\r\n
\r\n\r\n
\r\n )\r\n}\r\n","import React, { FC, useMemo } from 'react';\r\nimport moment from 'moment';\r\nimport { mainConfig, Plot } from '../../common/charts'\r\nimport { kIndicator } from '../../../constants/dashboard/kIndicator';\r\nimport { KIndicator } from '../../../types/dashboard/KIndicator';\r\nimport {minBy, maxBy} from 'lodash';\r\n\r\ninterface Props {\r\n chartDiv?: string;\r\n data: KIndicator[];\r\n}\r\n\r\nexport const KIndicatorChart: FC\r\n
\r\n \r\n \r\n ({\r\n text: x,\r\n value: x,\r\n selected: (\r\n notAppliedFilter.selectedRatings.some(el => el === x)\r\n ),\r\n visible: true,\r\n disabled: false\r\n }))\r\n }\r\n onChangeItemSelection={item => onChangeRating([item.value])}\r\n onClearAll={() => onChangeRating(notAppliedFilter.selectedRatings)}\r\n onSelectAll={() => onChangeRating(Ratings)}\r\n />\r\n \r\n \r\n ({\r\n text: x,\r\n value: x,\r\n selected: (\r\n notAppliedFilter.selectedCurrencies.some(el => el === x)\r\n ),\r\n visible: true,\r\n disabled: false\r\n }))\r\n }\r\n onChangeItemSelection={item => onChangeCurrency([item.value])}\r\n onClearAll={() => onChangeCurrency(notAppliedFilter.selectedCurrencies as Currency[])}\r\n onSelectAll={() => onChangeCurrency(Currencies)}\r\n />\r\n \r\n \r\n \r\n Apply\r\n \r\n \r\n \r\n \r\n
\r\n {title}
\r\nValues below -1 correspond to a very stressed market, and values below -2 imply an extremely stressed market.\r\n
Values above 1 correspond to a very well-functioning market, and values above 2 imply near-perfect liquidity.\"\r\n />\r\n
\r\n
\r\n )\r\n}\r\n\r\nexport const Dashboard = withRouter(DashboardComponent);\r\n","import { ColumnBuilder } from \"../../../bidding/common/table/columns/column-builder/ColumnBuilder\";\r\nimport { IColumnDefinition } from \"../../../bidding/common/table/types/ColumnDefinition\";\r\nimport { TopFilterTypes } from \"../../../../types/dashboard/RedirectFilterTypes\";\r\nimport { AmrTransaction } from \"../../../../types/amr-pipeline/models/AmrTransaction\";\r\nimport { OriginatingTransaction } from \"../../../../types/amr-pipeline/models/OriginatingTransaction\";\r\nimport { PipelineWidgetColumn } from \"../../../../types/dashboard/PipelineWidgetColumn\";\r\nimport { formatUtils } from \"../../../../utils\";\r\nimport { constants } from \"../../../../constants\";\r\nimport moment from \"moment\";\r\nimport { ManagerLink } from '../../../amrPipeline/common/ManagerLink';\r\nimport { FilterLinkIcon } from '../../../amrPipeline/common/FilterLinkIcon';\r\nimport { FilterRelatedTransactionsIcon } from '../../../amrPipeline/common/FilterRelatedTransactionsIcon';\r\nimport { DetailedPageLink } from \"../../../amrPipeline/common/DetailedPageLink\";\r\nimport { OnHoverTooltip } from \"../../../common\";\r\nimport { ActionBlocker } from \"../../../access/ActionBlocker\";\r\nimport { SubscriptionFeature } from \"../../../../types/billing/SubscriptionFeature\";\r\n\r\nconst buyColumnsDefinitions: IColumnDefinition<\r\n AmrTransaction | OriginatingTransaction\r\n>[] = [\r\n {\r\n columnKey: PipelineWidgetColumn.dealName,\r\n renderColumnHeaderContent: () => \"Deal Name\",\r\n renderColumnContent: (transaction) => (\r\n \r\n
\r\n \r\n
\r\n Dashboard
\r\n\r\n \r\n {\r\n isRequestSuccess(requestStateInitDashboard) &&\r\n \r\n \r\n \r\n\r\n \r\n }\r\n \r\n
\r\n BWICs Volume & Price
\r\n\r\n
\r\n\r\n Market Health Indicators
\r\n\r\n
\r\n\r\n Issuance Monitor
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n My Portfolio
\r\n\r\n
\r\n {chartName}
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n);\r\n","import React from 'react';\r\nimport { UserSlim } from '../../types/account/UserSlim';\r\nimport { OnHoverTooltip } from '../common/OnHoverTooltip';\r\nimport { constants } from '../../constants';\r\n\r\ninterface DealerUserProps {\r\n user: UserSlim\r\n}\r\n\r\nexport const DealerUser: React.FC\r\n
\r\n )\r\n};\r\n","import * as React from 'react';\r\nimport IconSVG from '../../styles/svg-icons';\r\nimport { ContextMenu } from '../controls';\r\nimport { ListBuilder } from '../../utils/ListBuilder';\r\nimport { roles } from '../../constants';\r\n\r\ninterface Props {\r\n canEditContact?: boolean;\r\n sending: boolean;\r\n disabled?: boolean;\r\n onSend: () => void;\r\n onEditContact?: () => void;\r\n onDeleteContact?: () => void;\r\n onMenuShow: () => void;\r\n onMenuHide: () => void;\r\n invitationSent?: boolean;\r\n}\r\n\r\nexport const DealerContactOptions: React.FC\r\n \r\n \r\n \r\n \r\n {user.firstName} {user.lastName}\r\n \r\n
\r\n \r\n \r\n {user.title || constants.emptyPlaceholder}\r\n \r\n
\r\n \r\n \r\n \r\n {{user.email} || constants.emptyPlaceholder}\r\n \r\n \r\n
\r\n {user.phone || constants.emptyPlaceholder}
\r\n \r\n
\r\n )\r\n};\r\n","import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport IconSVG from '../../styles/svg-icons';\r\nimport { DealerContactOptions } from './DealerContactOptions';\r\nimport { BrokerDealerCompanySlim } from '../../types/company/BrokerDealerCompanySlim';\r\nimport { companyStatuses, constants } from '../../constants';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { AppState } from '../../types/state/AppState';\r\nimport { dealerListActions } from '../../actions/dealer-list.actions';\r\nimport { OnHoverTooltip } from '../common/OnHoverTooltip';\r\nimport { nameUtils } from '../../utils';\r\n\r\ninterface DealerHeadOfTradingProps {\r\n dealer: BrokerDealerCompanySlim;\r\n enableContactOptions: boolean;\r\n}\r\n\r\nexport const DealerHeadOfTrading: React.FC\r\n {contact.invitationSent &&\r\n \r\n {fullName}\r\n \r\n
\r\n \r\n \r\n {contact.role || constants.emptyPlaceholder}\r\n \r\n
\r\n \r\n \r\n {{contact.email} || constants.emptyPlaceholder}\r\n \r\n
\r\n {contact.phone || constants.emptyPlaceholder}
\r\n {\r\n enableContactOptions &&\r\n \r\n setActive(true)}\r\n onMenuHide={() => setActive(false)}\r\n invitationSent={contact.invitationSent}\r\n />\r\n
\r\n }\r\n \r\n
\r\n )\r\n};\r\n","import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport IconSVG from '../../styles/svg-icons';\r\nimport { DealerContactOptions } from './DealerContactOptions';\r\nimport { BrokerDealerCompanySlim } from '../../types/company/BrokerDealerCompanySlim';\r\nimport { companyStatuses, constants } from '../../constants';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { AppState } from '../../types/state/AppState';\r\nimport { dealerListActions } from '../../actions/dealer-list.actions';\r\nimport { OnHoverTooltip } from '../common/OnHoverTooltip';\r\n\r\ninterface DealerDistributionListProps {\r\n dealer: BrokerDealerCompanySlim;\r\n enableContactOptions: boolean;\r\n}\r\n\r\nexport const DealerDistributionList: React.FC\r\n \r\n {fullName}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {dealer?.headOfTrading.email}\r\n \r\n \r\n
\r\n {constants.emptyPlaceholder}
\r\n \r\n {dealer.status !== companyStatuses.active.statusCode && enableContactOptions && (\r\n \r\n setActive(true)}\r\n onMenuHide={() => setActive(false)}\r\n />\r\n \r\n )}\r\n
\r\n \r\n
\r\n )\r\n};\r\n","import * as React from 'react';\r\nimport { SettlementAgentCommissionByRating } from '../../types/bid-as-dealer/SettlementAgentCommissionByRating';\r\nimport { CompanySlim } from '../../types/company/CompanySlim';\r\nimport { ViewSettlementAgentCommissionPopup } from '../management/companies/clearing-bank/ViewSettlementAgentComissionPopup';\r\n\r\ninterface Props {\r\n company: CompanySlim;\r\n commission: SettlementAgentCommissionByRating;\r\n}\r\n\r\nexport function ViewSettlementAgentCommission({ company, commission }: Props) {\r\n const [isPopupVisible, setPopupVisible] = React.useState(false);\r\n\r\n const handleClick = (e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n setPopupVisible(true);\r\n }\r\n\r\n return (\r\n \r\n {constants.emptyPlaceholder}\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {dealer.distributionList}\r\n \r\n \r\n
\r\n {constants.emptyPlaceholder}
\r\n \r\n {dealer.status !== companyStatuses.active.statusCode && enableContactOptions && (\r\n \r\n setActive(true)}\r\n onMenuHide={() => setActive(false)}\r\n />\r\n \r\n )}\r\n
\r\n e.stopPropagation()}>\r\n \r\n {\r\n isPopupVisible &&\r\n setPopupVisible(false)}\r\n />\r\n }\r\n
\r\n );\r\n}\r\n","import React from 'react';\r\nimport moment from 'moment';\r\nimport { SettlementAgreementStatus } from '../../types/bid-as-dealer/SettlementAgreementStatus';\r\nimport { BidAsDealerAgreementStatusLabel } from '../bid-as-dealer/BidAsDealerAgreementStatusLabel';\r\nimport { OnHoverTooltip } from '../common/OnHoverTooltip';\r\nimport { FeatureButton } from '../access/FeatureButton';\r\nimport { companyStatuses, constants, roles } from '../../constants';\r\nimport { BrokerDealerCompanySlim } from '../../types/company/BrokerDealerCompanySlim';\r\nimport { useDispatch } from 'react-redux';\r\nimport { UserSlim } from '../../types/account/UserSlim';\r\nimport { dealersActions } from '../../actions';\r\nimport { useSettlementAgentAgreements } from '../../effects/useSettlementAgentAgreements';\r\nimport { ViewSettlementAgentCommission } from './ViewSettlementAgentCommission';\r\nimport { DailyTradingLimitDialog } from '../common/DailyTradingLimitDialog';\r\nimport { RoleActionBlocker } from '../access/RoleActionBlocker';\r\n\r\ninterface Props {\r\n dealer: BrokerDealerCompanySlim;\r\n dealerUsers: UserSlim[];\r\n enableRequestToBid: boolean;\r\n}\r\n\r\nexport const DealerRequestToBidButton: React.FC\r\n {getRequestDate()}\r\n
\r\n );\r\n case SettlementAgreementStatus.confirmed:\r\n return (\r\n \r\n
\r\n );\r\n default: // No agreement\r\n return (\r\n \r\n {\r\n agreement?.dailyTradingLimit &&\r\n
\r\n \r\n \r\n {\r\n !dealerUsers.length\r\n ?\r\n \r\n \r\n \r\n \r\n \r\n :\r\n \r\n REQUEST DirrectBidding\r\n \r\n }\r\n \r\n
\r\n );\r\n }\r\n};\r\n","import React, { FC, useMemo } from 'react';\r\nimport cn from 'classnames';\r\nimport { dealerListActions } from '../../actions/dealer-list.actions';\r\nimport { useDispatch } from 'react-redux';\r\nimport { BrokerDealerCompanySlim } from '../../types/company/BrokerDealerCompanySlim';\r\nimport { Contact } from '../../types/company/Contact';\r\nimport { UserSlim } from '../../types/account/UserSlim';\r\nimport { DealerUser } from './DealerUser';\r\nimport { DealerContact } from './DealerContact';\r\nimport { DealerHeadOfTrading } from './DealerHeadOfTrading';\r\nimport { DealerDistributionList } from './DealerDistributionList';\r\nimport { FavoriteButton, OnHoverTooltip, Pluralize } from '../common';\r\nimport { DealerRequestToBidButton } from './DealerRequestToBidButton';\r\nimport { Checkbox } from '../controls/Checkbox';\r\nimport { Bid } from '../../types/bidding/Bid';\r\nimport IconSVG from '../../styles/svg-icons';\r\nimport { SettlementAgentAgreement } from '../../types/bid-as-dealer/SettlementAgentAgreement';\r\nimport { SettlementAgreementStatus } from '../../types/bid-as-dealer/SettlementAgreementStatus';\r\nimport { CompanyStatus } from '../../types/company/CompanyStatus';\r\n\r\ninterface DealerCompanyProps {\r\n dealer: BrokerDealerCompanySlim;\r\n expanded: boolean;\r\n expandEnabled: boolean;\r\n selected: boolean;\r\n contacts: Contact[];\r\n users: UserSlim[];\r\n enableContactOptions: boolean;\r\n enableRequestToBid: boolean;\r\n selectEnabled: boolean;\r\n favoriteButtonDisabled: boolean;\r\n companyBids: Bid[];\r\n onSelectAllChange?: (dealerId: number) => void;\r\n agreements?: SettlementAgentAgreement[];\r\n liveBidding?: boolean;\r\n}\r\n\r\ntype TCompanyMember = UserSlim | Contact;\r\n\r\nexport const DealerCompany: FC\r\n
\r\n \r\n
\r\n )\r\n};\r\n","import React, { useMemo } from 'react';\r\nimport { Form, Formik } from 'formik';\r\nimport { InputField } from '../forms';\r\nimport { AutoCompleteInput, FormError, Popup, PopupBody, PopupFooter } from '../controls';\r\nimport { constants, errorMessages } from '../../constants';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { AppState } from '../../types/state/AppState';\r\nimport { dealerListActions } from '../../actions/dealer-list.actions';\r\nimport { stringUtils } from '../../utils';\r\nimport { yup } from '../../validation/yup';\r\nimport { SaveContactModel } from '../../types/company/Contact';\r\n\r\nconst initialFormState: SaveContactModel = {\r\n id: 0,\r\n firstName: '',\r\n lastName: '',\r\n email: '',\r\n phone: '',\r\n role: '',\r\n dealerName: '',\r\n};\r\n\r\nexport const EditContactPanel: React.FC = () => {\r\n const dispatch = useDispatch();\r\n const editableContact = useSelector((state: AppState) => state.dealerList.editableContact);\r\n const brokerDealerList = useSelector((state: AppState) => state.entities.brokerDealerList.items);\r\n const brokerDealerContactList = useSelector((state: AppState) => state.entities.brokerDealerContactList.items);\r\n const companyNames = useMemo(() => brokerDealerList.map(b => b.name), [brokerDealerList]);\r\n\r\n const initialFormData = useMemo(() => editableContact.contact\r\n ? {\r\n id: editableContact.contact.id,\r\n dealerName: editableContact.dealerName,\r\n firstName: editableContact.contact.firstName,\r\n lastName: editableContact.contact.lastName,\r\n email: editableContact.contact.email,\r\n role: editableContact.contact.role || '',\r\n phone: editableContact.contact.phone || '',\r\n }\r\n : initialFormState,\r\n [editableContact.contact, editableContact.dealerName]\r\n );\r\n\r\n if (!editableContact.contact) {\r\n return null\r\n }\r\n\r\n const handleSubmit = (contact: SaveContactModel) => {\r\n dispatch(dealerListActions.editableContactSave({ ...contact, id: editableContact.contact?.id || 0 }));\r\n };\r\n\r\n const handleBrokerDealerCustomValidate = (dealerName: string | null | undefined) =>\r\n brokerDealerList\r\n .map(c => c.name)\r\n .some(n => n.localeCompare(String(dealerName), undefined, { sensitivity: 'accent' }) === 0);\r\n\r\n const handleEmailCustomValidate = (email: string) => {\r\n if (!stringUtils.isNullOrEmpty(email)) {\r\n return !brokerDealerContactList.some(contact => {\r\n return (\r\n contact.email.localeCompare(email, undefined, { sensitivity: 'accent' }) === 0\r\n && (editableContact.contact?.id === 0 || (editableContact.contact?.id !== contact.id))\r\n )\r\n }\r\n );\r\n }\r\n return true;\r\n };\r\n\r\n const handleCustomValidate = (email: string | null | undefined) => handleEmailCustomValidate(email || '');\r\n\r\n const validationSchema = yup.object().shape({\r\n firstName: yup.string().trim().matches(constants.name).max(64),\r\n lastName: yup.string().trim().matches(constants.name).max(64),\r\n email: yup.string().trim().required().email().max(256).test('email', errorMessages.duplicateDealerEmail, handleCustomValidate),\r\n role: yup.string().trim().max(256, errorMessages.maxLength(256)),\r\n phone: yup.string().trim().matches(constants.nonWhitespace).max(constants.phoneMaxLength),\r\n dealerName: yup.string().required().test('dealerName', errorMessages.invalidValue, handleBrokerDealerCustomValidate)\r\n });\r\n\r\n const renderError = (error: string | undefined, isTouched: boolean | undefined) => (\r\n isTouched && \r\n \r\n
\r\n \r\n
}\r\n \r\n {expanded && renderList()}\r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n return (\r\n \r\n
\r\n )\r\n};\r\n","import * as React from 'react';\r\nimport { ReactNode } from 'react';\r\nimport ImageSVG from '../../styles/svg';\r\n\r\ninterface Props {\r\n imgName?: string;\r\n imgWidth?: number;\r\n imgHeight?: number;\r\n title?: ReactNode;\r\n text?: ReactNode;\r\n children?: ReactNode;\r\n}\r\n\r\nexport const DashboardNoData = ({ imgName, imgWidth, imgHeight, title, text, children }: Props) => (\r\n \r\n {!!dealers.length\r\n ? (\r\n <>\r\n
\r\n \r\n {renderCollapseAllButton()}\r\n {renderSelectAllCheckbox()}\r\n {\r\n !selectedDealersCount &&\r\n <>\r\n
\r\n Name
\r\n Title
\r\n Email
\r\n Phone
\r\n Actions
\r\n \r\n }\r\n {\r\n !!selectedDealersCount && \r\n {\r\n dealers.map(dealer =>\r\n
\r\n \r\n ) : \r\n {\r\n !!imgName &&\r\n
\r\n);\r\n","import React from 'react';\r\n\r\nexport const DashboardWidgetContext = React.createContext({\r\n descriptionExpanded: false,\r\n setDescriptionExpanded: (value: boolean) => {}\r\n});\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport classNames from 'classnames';\r\nimport { DashboardWidgetContext } from './DashboardWidgetContext';\r\nimport { useContentVisibilityLogger } from '../../../logging/useContentVisibilityLogger';\r\n\r\ninterface DashboardWidgetProps {\r\n children: React.ReactNode;\r\n filterActive?: boolean;\r\n className?: string;\r\n title?: string;\r\n}\r\n\r\nexport function DashboardWidget({ children, filterActive, className, title }: DashboardWidgetProps) {\r\n const [descriptionExpanded, setDescriptionExpanded] = useState(false);\r\n const containerRef = useRef{title}
}\r\n {!!text &&{text}
}\r\n {children}\r\n{description}
}\r\n \r\n );\r\n\r\n return (\r\n \r\n {requestState === RequestState.failure ?
\r\n )\r\n}\r\n\r\nDashboardWidgetContent.defaultProps = {\r\n className: ''\r\n};\r\n","import React from 'react'\r\nimport classNames from 'classnames';\r\n\r\ninterface DashboardWidgetMaximizedHeaderProps {\r\n children: React.ReactNode;\r\n className?: string;\r\n}\r\n\r\nexport function DashboardWidgetHeader({ children, className }: DashboardWidgetMaximizedHeaderProps) {\r\n return (\r\n \r\n {children}\r\n
\r\n )\r\n}\r\n","import React from 'react';\r\nimport { IColumnDefinition } from '../../../bidding/common/table/types/ColumnDefinition';\r\nimport { ColumnBuilder } from '../../../bidding/common/table/columns/column-builder/ColumnBuilder';\r\nimport { moneyUtils } from '../../../../utils';\r\nimport { TradingStatsColumnDefinitions } from '../../../bidding/common/table/types/TradingStatsColumnDefinitions';\r\n\r\nconst tradingStatsColumnDefinitions: IColumnDefinition\r\n
\r\n );\r\n\r\n const renderAccordionDescription = () =>\r\n \r\n 1 MM 2 Traded Only 3 Average\r\n Updated daily at 5:00 PM EST.\r\n
\r\nColor% - % of trades where a seller discloses second best price received
\r\n\r\n Color - second best price received during BWIC; digitized by the KTX ATS Platform according to the Rules\r\n
\r\n \r\n Px Talk - expected price for a security sent by market-makers prior to a BWIC; digitized by the KTX ATS\r\n Platform according to the Rules\r\n
\r\n {chartName}{periodName}
\r\n {\r\n requestStateFetchTradingStats !== RequestState.failure &&\r\n\r\n \r\n \r\n \r\n
\r\n \r\n {category !== NewsCategory.None && (\r\n
\r\n );\r\n\r\n return (\r\n \r\n
\r\n )}\r\n\r\n {label !== NewsLabel.None && (\r\n \r\n {newsCategoryTitles[category]}\r\n
\r\n \r\n
\r\n )}\r\n\r\n {provider && provider !== NewsProvider.None && (\r\n \r\n {newsLabelTitles[label]}\r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n ![{newsProviderTitles[provider]}]({newsProviderLogos[provider]})
\r\n
\r\n \r\n {renderTopSection()}\r\n
\r\n );\r\n};\r\n","import { useEffect, useRef } from \"react\";\r\nimport { News } from \"../../../types/news/News\";\r\nimport { KWatchNewsListItem } from \"./KWatchNewsListItem\";\r\nimport Slider from \"react-slick\";\r\nimport { constants } from '../../../constants';\r\n\r\nconst speed = 2000;\r\nconst autoplaySpeed = 5000;\r\nconst slidesToShow = constants.maxCountNewsOnSlider;\r\n\r\ninterface Props {\r\n data: News[];\r\n}\r\n\r\nexport const KWatchNewsList = ({ data }: Props) => {\r\n const sliderRef = useRef\r\n \r\n \r\n {blocked => (\r\n \r\n {title}\r\n \r\n )}\r\n \r\n \r\n
\r\n \r\n {data.length <= constants.maxCountNewsOnSlider ? \r\n renderNews()\r\n : (\r\n \r\n {renderNews()}\r\n \r\n )}\r\n
\r\n );\r\n};\r\n","import classnames from 'classnames';\r\nimport { DashboardSkeleton } from \"../DashboardSkeleton\";\r\nimport {\r\n DashboardWidget,\r\n DashboardWidgetContent,\r\n DashboardWidgetHeader,\r\n} from \"../widget\";\r\nimport { isRequesting } from \"../../../utils\";\r\nimport IconSVG from \"../../../styles/svg-icons\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { routes } from \"../../../constants\";\r\nimport { KWatchNewsList } from \"./KWatchNewsList\";\r\nimport { hasKWatchNewsAccess } from \"../../../utils/amr-pipeline.utils\";\r\nimport { News } from '../../../types/news/News';\r\nimport { RequestState } from '../../../constants/request-state';\r\n\r\ninterface KWatchNewsWidgetProps {\r\n news: News[];\r\n requestState: RequestState;\r\n className?: string;\r\n onAllNewsClick?: () => void;\r\n}\r\n\r\nconst title = \"K-Watch News\";\r\n\r\nexport const KWatchNewsWidget = ({ news, requestState, className = \"double-size\", onAllNewsClick }: KWatchNewsWidgetProps) => {\r\n if (!hasKWatchNewsAccess()) {\r\n return null;\r\n }\r\n\r\n return (\r\n {title}
\r\n \r\n\r\n
\r\n \r\n );\r\n}\r\n\r\nIssueTransactionVolumeChart.defaultProps = {\r\n divId: 'issue-transaction-volume-chart'\r\n};\r\n","import { constants } from '../../../constants';\r\nimport { TransactionType } from '../../../types/amr-pipeline/enums/TransactionType';\r\nimport { SubscriptionFeature } from '../../../types/billing/SubscriptionFeature';\r\nimport { ChartGrouping, ChartTypes, ChartUnits, ChartView } from '../../../types/dashboard/AmrChart';\r\nimport { Currency } from '../../../types/enums/Currency';\r\nimport { ActionBlocker } from '../../access/ActionBlocker';\r\nimport { DropDownList } from '../../controls/DropDownList';\r\nimport { FilterPanel, FilterSection, FilterSwitch } from '../../filters';\r\n\r\nexport interface ChartFilter {\r\n transactionType: TransactionType | string;\r\n units: ChartUnits;\r\n grouping: ChartGrouping;\r\n view: ChartView;\r\n currencyCode: Currency;\r\n}\r\n\r\ninterface IssueTransactionVolumeFilterProps extends ChartFilter {\r\n onChange: (value: ChartFilter) => void;\r\n}\r\n\r\nconst ViewLabel = {\r\n [ChartView.Grouped]: 'Grouped',\r\n [ChartView.Stacked]: 'Stacked',\r\n};\r\n\r\nconst ChartTypeList = [\r\n {\r\n value: constants.allListItem,\r\n text: 'All',\r\n },\r\n ...ChartTypes,\r\n];\r\n\r\nexport function IssueTransactionVolumeFilter({\r\n onChange,\r\n ...values\r\n}: IssueTransactionVolumeFilterProps) {\r\n const handleValueChange = (prop: string) => (value: any) => {\r\n let changedFilter = {\r\n ...values,\r\n [prop]: value,\r\n };\r\n\r\n onChange(changedFilter);\r\n };\r\n\r\n return (\r\n {collateralTypes[CollateralType.broadlySyndicated]}
\r\n {collateralTypes[CollateralType.middleMarket]}
\r\n \r\n {[ChartUnits.Volume, ChartUnits.Count].map(unit =>\r\n \r\n {blocked =>\r\n handleValueChange('units')(unit)}\r\n />}\r\n \r\n )}\r\n
\r\n \r\n {[Currency.USD, Currency.EUR].map(currencyCode =>\r\n \r\n {blocked =>\r\n handleValueChange('currencyCode')(currencyCode)}\r\n />}\r\n \r\n )}\r\n
\r\n \r\n {[\r\n ChartGrouping.M,\r\n ChartGrouping.Q,\r\n ChartGrouping.Y,\r\n ].map(grouping =>\r\n \r\n {blocked =>\r\n handleValueChange('grouping')(grouping)}\r\n />}\r\n \r\n )}\r\n
\r\n \r\n {[ChartView.Grouped, ChartView.Stacked].map(view =>\r\n \r\n {blocked =>\r\n handleValueChange('view')(view)}\r\n />}\r\n \r\n )}\r\n
\r\n {chartName}
\r\n` +\r\n `Color: ${numericUtils.round(averageColorValue)}
` +\r\n `Q1: ${numericUtils.round(arrayStats.q3) || ''}
` +\r\n `Med: ${numericUtils.round(arrayStats.median) || ''}
` +\r\n `Q3: ${numericUtils.round(arrayStats.q1) || ''}`;\r\n };\r\n\r\n const boxData = ratingWithGroupValues.map((r, index) => {\r\n const arrayStats = chartUtils.getArrayStats(getDataByRating(r));\r\n return {\r\n q1: [arrayStats.q1],\r\n q3: [arrayStats.q3],\r\n median: [arrayStats.median],\r\n lowerfence: [arrayStats.min],\r\n upperfence: [arrayStats.max],\r\n x: [ratingWithGroupValues[index]],\r\n exclusive: getDataByRating(r),\r\n type: 'box',\r\n name: getHoverInfoText(r),\r\n marker: {\r\n color: priceLevelBarColors[r].border\r\n },\r\n fillcolor: priceLevelBarColors[r].bar,\r\n hoverinfo: 'name',\r\n boxpoints: false,\r\n }\r\n });\r\n\r\n const getYRange = () => {\r\n const defaultMinValue = -0.1;\r\n const defaultMinMargin = 0.01;\r\n const defaultMaxvalue = 1;\r\n const marginInPercent = 4;\r\n const linesInChart = 5;\r\n const valuesForRange = ratingWithGroupValues.reduce((result: number[], rating) => {\r\n return result.concat(getDataByRating(rating).filter(r => r >= 0))\r\n }, []);\r\n let minValue = valuesForRange.length ? Math.min(...valuesForRange) : defaultMinValue;\r\n let maxValue = valuesForRange.length ? Math.max(...valuesForRange) : defaultMaxvalue;\r\n const difference = maxValue - minValue;\r\n let roundTo = defaultMaxvalue;\r\n if (difference > linesInChart && difference < (linesInChart * 2)) {\r\n roundTo = linesInChart\r\n } else if (difference >= (linesInChart * 2) && difference < (linesInChart * 10)) {\r\n roundTo = linesInChart * 2\r\n } else if (difference >= (linesInChart * 10) && difference < (linesInChart * 50)) {\r\n roundTo = linesInChart * 4\r\n } else if (difference >= (linesInChart * 50)){\r\n roundTo = linesInChart * 10\r\n }\r\n minValue = chartUtils.roundToNumber(minValue, roundTo, true);\r\n maxValue = chartUtils.roundToNumber(maxValue, roundTo);\r\n let margin = numericUtils.getPercentage(difference || marginInPercent, marginInPercent);\r\n if (margin < defaultMinMargin) {\r\n margin = defaultMinMargin\r\n }\r\n\r\n return [\r\n minValue <= 0 ? defaultMinValue : minValue - margin,\r\n maxValue + margin\r\n ]\r\n };\r\n\r\n return (\r\n
\r\n {chartName}\r\n {hasData && {priceLevel.periodName}}\r\n
\r\n\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n return children;\r\n}\r\n","import { useMemo } from 'react';\r\nimport moment, { Moment } from 'moment';\r\nimport { Plot, mainConfig } from '../../common/charts';\r\nimport { chartIssuanceSpread, constants } from '../../../constants';\r\nimport { chartUtils } from '../../../utils';\r\nimport { ChartGrouping, Term } from '../../../types/dashboard/AmrChart';\r\nimport { WeeklyIssuanceSpread } from '../../../types/dashboard/IssuanceSpread';\r\nimport { IssuanceSpreadChartFilter } from './IssuanceSpreadFilter';\r\nimport { PlotMouseEvent } from 'plotly.js';\r\nimport { IssuanceSpreadsChartClickHandler } from './types';\r\nimport { TransactionType } from '../../../types/amr-pipeline/enums/TransactionType';\r\nimport { FloaterIndex } from '../../../types/amr-pipeline/enums/FloaterIndex';\r\nimport { amrChartUtils } from '../../../utils/amr-chart.utils';\r\n\r\ninterface IssuanceSpreadChartProps {\r\n issuanceSpread: WeeklyIssuanceSpread[];\r\n commonMedian: number;\r\n filter: IssuanceSpreadChartFilter;\r\n withSlider?: boolean;\r\n divId?: string;\r\n onClick?: IssuanceSpreadsChartClickHandler;\r\n}\r\n\r\nconst MaxRangeYears = 12;\r\n\r\nconst BarWidthInDays = {\r\n [ChartGrouping.M]: 15,\r\n [ChartGrouping.Q]: 45,\r\n [ChartGrouping.Y]: 182,\r\n [ChartGrouping.W]: 3,\r\n};\r\n\r\nconst GroupingTickFormat = {\r\n [ChartGrouping.M]: {\r\n tickformat: '%b `%y',\r\n dtick: 'M1',\r\n },\r\n [ChartGrouping.Q]: {\r\n tickformat: '%qQ `%y',\r\n dtick: 'M3',\r\n },\r\n [ChartGrouping.Y]: {\r\n tickformat: '%Y',\r\n dtick: 'M12',\r\n },\r\n [ChartGrouping.W]: {\r\n tickformat: '%m/%d/%y',\r\n // 7 days (1 week)\r\n dtick: constants.dayMs * 7,\r\n },\r\n};\r\n\r\nconst ChartDimensionFormat = {\r\n [ChartGrouping.M]: 'YYYY-MM',\r\n [ChartGrouping.Q]: 'YYYY-MM',\r\n [ChartGrouping.Y]: 'YYYY',\r\n [ChartGrouping.W]: 'YYYY-MM-DD',\r\n};\r\n\r\nconst TooltipDimensionFormat = {\r\n [ChartGrouping.M]: 'MMM `YY',\r\n [ChartGrouping.Q]: 'Q[Q] `YY',\r\n [ChartGrouping.Y]: 'YYYY',\r\n [ChartGrouping.W]: 'MM/DD/YYYY',\r\n};\r\n\r\nexport function IssuanceSpreadChart({\r\n issuanceSpread,\r\n commonMedian,\r\n filter,\r\n divId,\r\n withSlider = false,\r\n onClick,\r\n}: IssuanceSpreadChartProps) {\r\n const {\r\n chartLayout,\r\n tickColor,\r\n tickFont,\r\n bar,\r\n border,\r\n zeroLineColor,\r\n hoverlabel,\r\n minAdditionalYAmount,\r\n } = chartIssuanceSpread;\r\n\r\n const filteredData = useMemo(() => {\r\n switch (filter.grouping) {\r\n case ChartGrouping.W:\r\n return issuanceSpread\r\n .filter((x) => !!x.week)\r\n .sort(\r\n (a, b) =>\r\n new Date(a.week as Date).getTime() -\r\n new Date(b.week as Date).getTime()\r\n );\r\n case ChartGrouping.M:\r\n return issuanceSpread\r\n .filter((x) => !!x.month)\r\n .sort((a, b) => {\r\n const yearA = a.year || 0;\r\n const yearB = b.year || 0;\r\n const monthA = a.month || 0;\r\n const monthB = b.month || 0;\r\n return yearA - yearB ? yearA - yearB : monthA - monthB;\r\n });\r\n case ChartGrouping.Q:\r\n return issuanceSpread\r\n .filter((x) => !!x.quarter)\r\n .sort((a, b) => {\r\n const yearA = a.year || 0;\r\n const yearB = b.year || 0;\r\n const quarterA = a.quarter || 0;\r\n const quarterB = b.quarter || 0;\r\n return yearA - yearB\r\n ? yearA - yearB\r\n : quarterA - quarterB;\r\n });\r\n default:\r\n return issuanceSpread\r\n .filter(\r\n (x) => !!x.year && !x.month && !x.quarter && !x.week\r\n )\r\n .sort((a, b) => (a.year as number) - (b.year as number));\r\n }\r\n }, [issuanceSpread, filter.grouping]);\r\n\r\n const handleChartClick = (e: PlotMouseEvent) => {\r\n if (!onClick) {\r\n return;\r\n }\r\n\r\n if (!e.points.length) {\r\n return;\r\n }\r\n\r\n const [point] = e.points;\r\n\r\n const dimension = point.x;\r\n\r\n const periodStart = moment.utc(dimension);\r\n\r\n const periodEnd = periodStart.clone();\r\n\r\n switch (filter.grouping) {\r\n case ChartGrouping.M:\r\n periodEnd.endOf('month');\r\n break;\r\n case ChartGrouping.Q:\r\n periodEnd.endOf('quarter');\r\n break;\r\n case ChartGrouping.W:\r\n periodEnd.endOf('week');\r\n break;\r\n case ChartGrouping.Y:\r\n periodEnd.endOf('year');\r\n break;\r\n }\r\n\r\n onClick({\r\n startPeriod: periodStart.toDate(),\r\n endPeriod: periodEnd.toDate(),\r\n transactionType: filter.transactionType === constants.allListItem\r\n ? undefined\r\n : filter.transactionType as TransactionType,\r\n collateralType: filter.collateralType,\r\n rating: filter.rating,\r\n currencyCode: filter.currencyCode,\r\n term: filter.term === constants.allListItem\r\n ? undefined\r\n : filter.term as Term,\r\n floaterIndex: filter.floaterIndex === constants.allListItem\r\n ? undefined\r\n : filter.floaterIndex as FloaterIndex,\r\n });\r\n };\r\n\r\n const getDimension = (row: WeeklyIssuanceSpread) => {\r\n switch (filter.grouping) {\r\n case ChartGrouping.M:\r\n return row.year && row.month\r\n ? moment([row.year, row.month - 1])\r\n : undefined;\r\n case ChartGrouping.W:\r\n return row.week ? moment(row.week) : undefined;\r\n case ChartGrouping.Q:\r\n return row.year && row.quarter\r\n ? moment(`${row.year}-${row.quarter}`, 'YYYY-Q', true)\r\n : undefined;\r\n default:\r\n return row.year ? moment([row.year]) : undefined;\r\n }\r\n };\r\n\r\n const getTooltipDimesion = (row: WeeklyIssuanceSpread) =>\r\n getDimension(row)?.format(TooltipDimensionFormat[filter.grouping]);\r\n\r\n const getChartDimension = (row: WeeklyIssuanceSpread) =>\r\n getDimension(row)?.format(ChartDimensionFormat[filter.grouping]);\r\n\r\n const getHoverInfoText = (row: WeeklyIssuanceSpread) => {\r\n const outliers =\r\n row.bottomOutlier && row.topOutlier\r\n ? row.bottomOutlier + '; ' + row.topOutlier\r\n : row.bottomOutlier || row.topOutlier;\r\n return (\r\n `${getTooltipDimesion(row)}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n ` +\r\n `Min: ${row.min}
` +\r\n `Q1: ${row.q1}
` +\r\n `Med: ${row.median}
` +\r\n `Q3: ${row.q3}
` +\r\n `Max: ${row.max}
` +\r\n `Common Med: ${commonMedian}
` +\r\n `Trend Mean: ${row.mean}
` +\r\n (outliers ? `Outlier(s): ${outliers}
` : '')\r\n );\r\n };\r\n\r\n const getChartRange = (min: Moment, max: Moment) => {\r\n let rangeMin = min.clone();\r\n let rangeMax = max.clone();\r\n\r\n switch (filter.grouping) {\r\n case ChartGrouping.M:\r\n rangeMin = max.clone()\r\n .subtract(11, 'months')\r\n .subtract(15, 'days');\r\n rangeMax.add(15, 'days');\r\n break;\r\n case ChartGrouping.W:\r\n rangeMin = max.clone()\r\n .subtract(11, 'weeks')\r\n .startOf('week')\r\n .subtract(3.5, 'days');\r\n rangeMax.startOf('week')\r\n .add(3.5, 'days');\r\n break;\r\n case ChartGrouping.Q:\r\n rangeMin = max.clone()\r\n .subtract(11, 'quarters')\r\n .subtract(45, 'days');\r\n rangeMax.startOf('quarter')\r\n .add(45, 'days');\r\n break;\r\n default: {\r\n rangeMin = max.clone()\r\n .subtract(MaxRangeYears - 1, 'years')\r\n .startOf('year')\r\n .subtract(6, 'months');\r\n\r\n if (rangeMin.isBefore(min)) {\r\n rangeMin = min.clone()\r\n .startOf('year')\r\n .subtract(6, 'months');\r\n }\r\n\r\n rangeMax.startOf('year')\r\n .add(6, 'months');\r\n }\r\n }\r\n\r\n return [\r\n rangeMin.format(),\r\n rangeMax.format(),\r\n ];\r\n };\r\n\r\n const getAdditionalYData = () => {\r\n const maxValue = Math.max(...issuanceSpread.map(i => i.topOutlier || i.q3));\r\n const minValue = Math.min(...issuanceSpread.map(i => i.bottomOutlier || i.q1));\r\n\r\n const difference = (maxValue - minValue);\r\n const isLowData = difference < minAdditionalYAmount;\r\n // adding of number with half to prevent empty row on the top and bottom\r\n const rowsToAdd = difference < minAdditionalYAmount ? 2.5 : 1.5;\r\n const rangeY = isLowData ? [minValue - rowsToAdd, maxValue + rowsToAdd] : [];\r\n const dtickY = isLowData ? 1 : 0;\r\n\r\n return {\r\n rangeY,\r\n dtickY,\r\n }\r\n };\r\n\r\n const getChartData = () => {\r\n return filteredData.reduce((accum: any, row) => {\r\n const xAxis = [getChartDimension(row)];\r\n const box = {\r\n q1: [row.q1],\r\n q3: [row.q3],\r\n median: [row.median],\r\n lowerfence: [row.min],\r\n upperfence: [row.max],\r\n x: xAxis,\r\n name: getHoverInfoText(row),\r\n type: 'box',\r\n marker: {\r\n color: border,\r\n },\r\n width: BarWidthInDays[filter.grouping] * constants.dayMs,\r\n fillcolor: bar,\r\n hoverinfo: 'name',\r\n boxpoints: false,\r\n };\r\n\r\n const topOutlier = {\r\n x: xAxis,\r\n y: [row.topOutlier],\r\n mode: 'markers',\r\n type: 'scatter',\r\n hoverinfo: 'skip',\r\n marker: {\r\n size: 6,\r\n color: border,\r\n },\r\n };\r\n\r\n const bottomOutliers = {\r\n x: xAxis,\r\n y: [row.bottomOutlier],\r\n mode: 'markers',\r\n type: 'scatter',\r\n hoverinfo: 'skip',\r\n marker: {\r\n size: 6,\r\n color: border,\r\n },\r\n };\r\n\r\n return [...accum, box, topOutlier, bottomOutliers];\r\n }, []);\r\n };\r\n\r\n const commonMedianData = {\r\n type: 'scatter',\r\n x: [0, 100],\r\n y: filteredData.map(() => commonMedian),\r\n mode: 'lines',\r\n xaxis: 'x2',\r\n line: {\r\n color: 'red',\r\n width: 2,\r\n dash: 'dash',\r\n },\r\n };\r\n\r\n const trendMeanData = {\r\n type: 'scatter',\r\n x: filteredData.map((row) => getChartDimension(row)),\r\n y: filteredData.map((row) => row.mean),\r\n mode: 'lines',\r\n hoverinfo: 'skip',\r\n line: {\r\n color: 'green',\r\n width: 2,\r\n dash: 'dash',\r\n },\r\n };\r\n\r\n const getLayout = () => {\r\n const { dtick, tickformat } = GroupingTickFormat[filter.grouping];\r\n\r\n const { min, max } = amrChartUtils.getEdgeDimensionValues(filteredData, getDimension);\r\n const chartRange = getChartRange(min, max);\r\n const sliderRange = [min.format(), max.format()];\r\n const { dtickY, rangeY } = getAdditionalYData();\r\n const tick0 = min.format(ChartDimensionFormat[filter.grouping]);\r\n\r\n return {\r\n ...chartLayout,\r\n showlegend: false,\r\n autosize: true,\r\n hovermode: 'closest',\r\n hoverlabel,\r\n xaxis: {\r\n tickcolor: tickColor,\r\n type: 'date',\r\n tickfont: tickFont,\r\n range: withSlider ? chartRange : sliderRange,\r\n fixedrange: true,\r\n dtick,\r\n tickformat,\r\n tick0,\r\n rangeslider: withSlider ? {\r\n range: sliderRange,\r\n bgcolor: 'rgba(79, 123, 156, 0.2)',\r\n } : undefined,\r\n },\r\n yaxis: {\r\n showgrid: true,\r\n showtickprefix: 'all',\r\n fixedrange: true,\r\n gridcolor: tickColor,\r\n ticks: 'inside',\r\n tickcolor: tickColor,\r\n tickfont: tickFont,\r\n zerolinecolor: zeroLineColor,\r\n ticksuffix: ' bps',\r\n range: rangeY,\r\n dtick : dtickY,\r\n },\r\n xaxis2: {\r\n zeroline: false,\r\n showgrid: false,\r\n fixedrange: true,\r\n range: [0, 100],\r\n overlaying: 'x',\r\n showticklabels: false,\r\n },\r\n };\r\n };\r\n\r\n const data = [...getChartData(), commonMedianData, trendMeanData];\r\n const layout = getLayout();\r\n\r\n return (\r\n <>\r\n
\r\n
\r\n \r\n );\r\n}\r\n\r\nIssuanceSpreadChart.defaultProps = {\r\n divId: 'issuance-spread-chart',\r\n};\r\n","import { useMemo } from 'react';\r\nimport { constants } from '../../../constants';\r\nimport { CollateralType } from '../../../types/amr-pipeline/enums/CollateralType';\r\nimport { FloaterIndex } from '../../../types/amr-pipeline/enums/FloaterIndex';\r\nimport { TransactionType } from '../../../types/amr-pipeline/enums/TransactionType';\r\nimport { ChartGrouping, ChartTypes, Term } from '../../../types/dashboard/AmrChart';\r\nimport { Currency } from '../../../types/enums/Currency';\r\nimport { Rating } from '../../../types/enums/Rating';\r\nimport { DropDownList, DropDownListItem } from '../../controls/DropDownList';\r\nimport { FilterPanel, FilterSection } from '../../filters';\r\n\r\nexport interface IssuanceSpreadChartFilter {\r\n transactionType: TransactionType | string;\r\n collateralType: CollateralType;\r\n rating: Rating;\r\n currencyCode: Currency;\r\n grouping: ChartGrouping;\r\n term: Term | string;\r\n floaterIndex: FloaterIndex | string;\r\n}\r\n\r\ninterface IssuanceSpreadFilterProps extends IssuanceSpreadChartFilter {\r\n onChange: (value: IssuanceSpreadChartFilter) => void;\r\n availableGroupings?: ChartGrouping[];\r\n withAllTermsOption?: boolean;\r\n}\r\n\r\nconst ChartTypeList = [\r\n {\r\n value: constants.allListItem,\r\n text: 'All',\r\n },\r\n ...ChartTypes,\r\n];\r\n\r\nconst FloaterIndexList = [\r\n {\r\n value: constants.allListItem,\r\n text: 'All',\r\n },\r\n ...[\r\n FloaterIndex.Fixed,\r\n FloaterIndex.Sofr,\r\n FloaterIndex.Libor,\r\n FloaterIndex.Euribor\r\n ].map(floaterIndex => ({\r\n text: floaterIndex,\r\n value: floaterIndex,\r\n })),\r\n];\r\n\r\nconst RatingsList = [Rating.AAA, Rating.AA, Rating.A, Rating.BBB, Rating.BB]\r\n .map(rating => ({\r\n text: rating,\r\n value: rating,\r\n }));\r\n\r\nconst CollateralTypesList = [\r\n {\r\n text: 'BSL',\r\n value: CollateralType.broadlySyndicated,\r\n },\r\n {\r\n text: 'MM',\r\n value: CollateralType.middleMarket,\r\n }\r\n];\r\n\r\nconst AllTermsItem = {\r\n text: 'All',\r\n value: constants.allListItem,\r\n payload: ''\r\n};\r\n\r\nconst TermsList = [\r\n {\r\n text: Term.Short,\r\n value: Term.Short,\r\n payload: 'Short Dated',\r\n },\r\n {\r\n text: Term.Long,\r\n value: Term.Long,\r\n payload: 'Long Dated',\r\n }\r\n];\r\n\r\nconst PeriodsList = [\r\n {\r\n text: ChartGrouping.W,\r\n value: ChartGrouping.W,\r\n payload: 'Week',\r\n },\r\n {\r\n text: ChartGrouping.M,\r\n value: ChartGrouping.M,\r\n payload: 'Month',\r\n },\r\n {\r\n text: ChartGrouping.Q,\r\n value: ChartGrouping.Q,\r\n payload: 'Quarter',\r\n },\r\n {\r\n text: ChartGrouping.Y,\r\n value: ChartGrouping.Y,\r\n payload: 'Year',\r\n },\r\n];\r\n\r\nconst CurrencyList = [Currency.USD, Currency.EUR]\r\n .map(currency => ({\r\n text: currency,\r\n value: currency,\r\n }));\r\n\r\nexport function IssuanceSpreadFilter({\r\n onChange,\r\n availableGroupings = Object.values(ChartGrouping),\r\n withAllTermsOption = false,\r\n ...values\r\n}: IssuanceSpreadFilterProps) {\r\n const handleValueChange = (prop: keyof IssuanceSpreadChartFilter) => (value: any) => {\r\n onChange({\r\n ...values,\r\n [prop]: value,\r\n });\r\n };\r\n\r\n const renderSelectedWithPrefix = (prefix: string) =>\r\n (item: DropDownListItem) => `${prefix}: ${item.text}`;\r\n\r\n const renderListItemWithDescription = (item: DropDownListItem) => (\r\n Common Median
\r\n Trend Mean
\r\n Outlier(s)
\r\n \r\n {item.text}\r\n {item.payload}\r\n
\r\n );\r\n\r\n const periods = useMemo(() =>\r\n PeriodsList.filter(x => availableGroupings.includes(x.value)),\r\n [availableGroupings]\r\n );\r\n\r\n const terms = useMemo(() => withAllTermsOption\r\n ? [AllTermsItem, ...TermsList]\r\n : TermsList,\r\n [withAllTermsOption])\r\n\r\n return (\r\n {chartName}
\r\n\r\n All statistics are calculated based on the transaction pricing date.\r\n \r\n ) : null\r\n }\r\n >\r\n {issuanceSpreads?.length ? chart :
')\r\n : getWarningText(cellData)\r\n };\r\n\r\n const getChartText = () => {\r\n return z\r\n .map((columnCollection) => columnCollection\r\n .map((cellData) => getCellText(cellData))\r\n )\r\n };\r\n\r\n const layout = {\r\n plot_bgcolor: lineColor,\r\n annotations: z.map((i1, index1) => i1.map((i2, index2) => {\r\n return {\r\n x: x[index2],\r\n y: y[index1],\r\n text: getAnnotationText(i2),\r\n font: {\r\n family: 'Roboto Medium, Arial, Helvetica, sans- serif',\r\n size: 10,\r\n color: getAnnotationsFontColor(i2),\r\n },\r\n showarrow: false,\r\n }\r\n })).reduce((n, current) => {\r\n return n.concat(current)\r\n }, []),\r\n hoverlabel,\r\n xaxis: {\r\n linecolor: lineColor,\r\n linewidth: lineWidth,\r\n range: getYRange(x),\r\n fixedrange: true,\r\n mirror: true,\r\n tickcolor: tickColor,\r\n tickfont: tickFont,\r\n },\r\n yaxis: {\r\n linecolor: lineColor,\r\n linewidth: lineWidth,\r\n mirror: true,\r\n fixedrange: true,\r\n tickvals: y,\r\n ticktext: yTick,\r\n tickcolor: tickColor,\r\n tickfont: tickFont,\r\n zeroline: false\r\n },\r\n margin\r\n };\r\n\r\n const heatMap = [{\r\n x: x,\r\n y: y,\r\n z: z.map((i1) => i1.map((i2) => i2.size.USD + i2.size.EUR)),\r\n type: 'heatmap',\r\n showscale: false,\r\n hoverongaps: true,\r\n colorscale: maxValue ? colorScale : whiteColorScale,\r\n hoverinfo: 'text',\r\n text: getChartText(),\r\n xgap: .6,\r\n ygap: .6\r\n }];\r\n\r\n const handleOnHeatMapCellClick = (e: PlotMouseEvent) => {\r\n const point: any = e && e.points && e.points[0];\r\n const [columnIndex, cellIndex] = point.pointIndex;\r\n const cellData = z[columnIndex][cellIndex];\r\n const hour = Number(timeValues[point.y]);\r\n const date = String(point.x);\r\n const ratings = Object.keys(cellData.ratings);\r\n if (point.y !== 0) {\r\n onHeatMapCellClick(date, hour, ratings)\r\n }\r\n };\r\n\r\n return (\r\n
{title}
\r\n\r\n \r\n Plan out your bidding schedule all in one place. Filter by rating and click on any time\r\n slot to view the most relevant listings.\r\n \r\n \r\n Find the ideal time to run your next BWIC; data suggest that intra-day competition can\r\n affect execution.\r\n \r\n
\r\n {chartName}
\r\n\r\n
\r\n \r\n
\r\n \r\n ({\r\n value,\r\n text,\r\n selected: value === type,\r\n }))}\r\n onChange={handleTypeChange}\r\n className=\"custom-drop-down-ghost\"\r\n prefix=\"Type: \"\r\n />\r\n
\r\n \r\n ({\r\n value,\r\n text,\r\n selected: value === currency,\r\n }))}\r\n onChange={handleCurrencyChange}\r\n className=\"custom-drop-down-ghost\"\r\n defaultSortingEnabled={false}\r\n prefix=\"Ccy: \"\r\n />\r\n
\r\n \r\n ({\r\n ...x,\r\n selected: collateralType === x.value,\r\n }))}\r\n defaultSortingEnabled={false}\r\n onChange={({ value }) => setCollateralType(value as string)}\r\n renderSelectedItemCallback={amrChartUtils.renderSelectedFilterOptionWithPrefix('Collat.')}\r\n className=\"custom-drop-down-ghost\"\r\n />\r\n
\r\n \r\n
\r\n {chartName}
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n {blocked =>\r\n ({\r\n value,\r\n text,\r\n selected: value === type,\r\n }))}\r\n className=\"custom-drop-down-ghost\"\r\n prefix=\"Type: \"\r\n disabled={blocked}\r\n onChange={handleTypeChange}\r\n />}\r\n \r\n
\r\n \r\n \r\n {blocked =>\r\n ({\r\n value,\r\n text,\r\n selected: value === currency,\r\n }))}\r\n disabled={blocked}\r\n className=\"custom-drop-down-ghost\"\r\n defaultSortingEnabled={false}\r\n prefix=\"Ccy: \"\r\n onChange={handleCurrencyChange}\r\n />}\r\n \r\n
\r\n \r\n \r\n {blocked =>\r\n ({\r\n ...x,\r\n selected: collateralType === x.value,\r\n }))}\r\n disabled={blocked}\r\n defaultSortingEnabled={false}\r\n renderSelectedItemCallback={amrChartUtils.renderSelectedFilterOptionWithPrefix('Collat.')}\r\n className=\"custom-drop-down-ghost\"\r\n onChange={({ value }) => setCollateralType(value as string)}\r\n />}\r\n \r\n
\r\n \r\n \r\n {blocked =>\r\n \r\n
\r\n