Cooler Loans: Dashboard Improvements (#2998)

* Add breakdown of cooler capacity * Add padding below title * Set title colour * Better formatting of numbers before 1000 * Adjust colour of ticks
OlympusDAO · Oct 13, 2023 · fed10f7 · fed10f7
1 parent edd3de0
commit fed10f7
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 10 deletions.
diff --git 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
@@ -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 (
     <Grid container>
-      <Grid item xs={12}>
-        <Typography variant="h6" color="textSecondary" display="inline">
+      <Grid item xs={12} paddingBottom={1}>
+        <Typography variant="h6" color="rgb(238, 233, 226)" display="inline">
           Protocol Income
         </Typography>
       </Grid>
@@ -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
@@ -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 (
     <Grid container>
-      <Grid item xs={12}>
-        <Typography variant="h6" color="textSecondary" display="inline">
+      <Grid item xs={12} paddingBottom={1}>
+        <Typography variant="h6" color="rgb(238, 233, 226)" display="inline">
           Projected Maturity
         </Typography>
       </Grid>
@@ -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
@@ -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
@@ -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 (
     <Grid container>
-      <Grid item xs={12}>
-        <Typography variant="h6" color="textSecondary" display="inline">
+      <Grid item xs={12} paddingBottom={1}>
+        <Typography variant="h6" color="rgb(238, 233, 226)" display="inline">
           Utilisation
         </Typography>
       </Grid>
@@ -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 }}
         />