diff --git a/src/components/Chart/Chart.tsx b/src/components/Chart/Chart.tsx index e30f076a15..a7457b3fe4 100644 --- a/src/components/Chart/Chart.tsx +++ b/src/components/Chart/Chart.tsx @@ -49,6 +49,10 @@ export const formatCurrencyTick = (value: unknown): string => { return `${formatCurrency(valueNum / 1000)}k`; } + if (valueNum > 100) { + return `${formatCurrency(valueNum)}`; + } + return formatCurrency(valueNum, 2); }; diff --git a/src/views/Lending/Cooler/dashboard/IncomeGraph.tsx b/src/views/Lending/Cooler/dashboard/IncomeGraph.tsx index 6e4145f5fc..25f0465f49 100644 --- a/src/views/Lending/Cooler/dashboard/IncomeGraph.tsx +++ b/src/views/Lending/Cooler/dashboard/IncomeGraph.tsx @@ -39,11 +39,14 @@ export const IncomeGraph = ({ startDate }: { startDate?: Date }) => { const bulletpointStyles = getBulletpointStylesMap(DEFAULT_BULLETPOINT_COLOURS, dataKeys); const colorsMap = getDataKeyColorsMap(DEFAULT_COLORS, dataKeys); const dataKeyLabels = getCategoriesMap(itemNames, dataKeys); + const tickStyle = getTickStyle(theme); + tickStyle.stroke = "#8A8B90"; + tickStyle.fill = "#8A8B90"; return ( - - + + Protocol Income @@ -68,7 +71,7 @@ export const IncomeGraph = ({ startDate }: { startDate?: Date }) => { dataKeyLabels={dataKeyLabels} infoTooltipMessage={""} isLoading={!coolerSnapshots} - tickStyle={getTickStyle(theme)} + tickStyle={tickStyle} itemDecimals={0} margin={{ left: 30 }} /> diff --git a/src/views/Lending/Cooler/dashboard/MaturityGraph.tsx b/src/views/Lending/Cooler/dashboard/MaturityGraph.tsx index f9f6e1c11c..1cf204f79b 100644 --- a/src/views/Lending/Cooler/dashboard/MaturityGraph.tsx +++ b/src/views/Lending/Cooler/dashboard/MaturityGraph.tsx @@ -102,11 +102,14 @@ export const MaturityGraph = () => { const bulletpointStyles = getBulletpointStylesMap(DEFAULT_BULLETPOINT_COLOURS, dataKeys); const colorsMap = getDataKeyColorsMap(DEFAULT_COLORS, dataKeys); const dataKeyLabels = getCategoriesMap(itemNames, dataKeys); + const tickStyle = getTickStyle(theme); + tickStyle.stroke = "#8A8B90"; + tickStyle.fill = "#8A8B90"; return ( - - + + Projected Maturity @@ -131,7 +134,7 @@ export const MaturityGraph = () => { dataKeyLabels={dataKeyLabels} infoTooltipMessage={""} isLoading={!coolerSnapshots} - tickStyle={getTickStyle(theme)} + tickStyle={tickStyle} itemDecimals={0} margin={{ left: 30 }} displayTooltipTotal={true} diff --git a/src/views/Lending/Cooler/dashboard/Metrics.tsx b/src/views/Lending/Cooler/dashboard/Metrics.tsx index 9cc9ae6371..af6ceff24a 100644 --- a/src/views/Lending/Cooler/dashboard/Metrics.tsx +++ b/src/views/Lending/Cooler/dashboard/Metrics.tsx @@ -109,7 +109,15 @@ export const TotalCapacityRemaining = () => { label="Total Capacity Remaining" metric={formatCurrency(getTotalCapacity(latestSnapshot), 0, "DAI")} isLoading={latestSnapshot === undefined} - tooltip="The value of the total capacity remaining in the clearinghouse and treasury" + tooltip={`The capacity remaining is the sum of the DAI and sDAI in the clearinghouse and treasury. As of the latest snapshot, the values (in DAI) are: + +Clearinghouse: +DAI: ${formatCurrency(latestSnapshot?.clearinghouse?.daiBalance || 0, 0, "DAI")} +sDAI: ${formatCurrency(latestSnapshot?.clearinghouse?.sDaiInDaiBalance || 0, 0, "DAI")} + +Treasury: +DAI: ${formatCurrency(latestSnapshot?.treasury?.daiBalance || 0, 0, "DAI")} +sDAI: ${formatCurrency(latestSnapshot?.treasury?.sDaiInDaiBalance || 0, 0, "DAI")}`} /> ); }; diff --git a/src/views/Lending/Cooler/dashboard/UtilisationGraph.tsx b/src/views/Lending/Cooler/dashboard/UtilisationGraph.tsx index 79b2399456..2d95974803 100644 --- a/src/views/Lending/Cooler/dashboard/UtilisationGraph.tsx +++ b/src/views/Lending/Cooler/dashboard/UtilisationGraph.tsx @@ -43,11 +43,14 @@ export const UtilisationGraph = ({ startDate }: { startDate?: Date }) => { const bulletpointStyles = getBulletpointStylesMap(DEFAULT_BULLETPOINT_COLOURS, dataKeys); const colorsMap = getDataKeyColorsMap(DEFAULT_COLORS, dataKeys); const dataKeyLabels = getCategoriesMap(itemNames, dataKeys); + const tickStyle = getTickStyle(theme); + tickStyle.stroke = "#8A8B90"; + tickStyle.fill = "#8A8B90"; return ( - - + + Utilisation @@ -72,7 +75,7 @@ export const UtilisationGraph = ({ startDate }: { startDate?: Date }) => { dataKeyLabels={dataKeyLabels} infoTooltipMessage={""} isLoading={!coolerSnapshots} - tickStyle={getTickStyle(theme)} + tickStyle={tickStyle} itemDecimals={0} margin={{ left: 30 }} />