Add income graph

src/components/Chart/Chart.tsx

@@ -646,9 +646,6 @@ const renderBarChart = (
   displayTooltipTotal?: boolean,
   onMouseMove?: CategoricalChartFunc,
 ) => {
-  const dataKey = dataKeys[0];
-  const dataKeyColor = dataKeyColors.get(dataKey);
-
   return (
     <BarChart data={data} margin={margin} onMouseMove={onMouseMove}>
       <XAxis
@@ -671,7 +668,7 @@ const renderBarChart = (
         width={33}
         domain={[0, maximumYValue]}
         allowDataOverflow={false}
-        tickFormatter={number => (number !== 0 ? number : "")}
+        tickFormatter={number => getTickFormatter(dataFormat, number)}
       />
       <Tooltip
         content={
@@ -684,7 +681,9 @@ const renderBarChart = (
           />
         }
       />
-      <Bar dataKey={dataKey} fill={dataKeyColor} />
+      {dataKeys.map((value: string) => {
+        return <Bar key={value} dataKey={value} fill={dataKeyColors.get(value)} stackId="1" />;
+      })}
     </BarChart>
   );
 };

src/views/Lending/Cooler/dashboard/Dashboard.tsx

@@ -1,4 +1,5 @@
 import { Grid, Paper, useMediaQuery, useTheme } from "@mui/material";
+import { IncomeGraph } from "src/views/Lending/Cooler/dashboard/IncomeGraph";
 import { UtilisationGraph } from "src/views/Lending/Cooler/dashboard/UtilisationGraph";
 
 export const CoolerDashboard = () => {
@@ -28,7 +29,7 @@ export const CoolerDashboard = () => {
         </Grid>
         <Grid item xs={12}>
           <Paper {...paperProps} style={paperStyles}>
-            {/* Revenue */}
+            <IncomeGraph />
           </Paper>
         </Grid>
         <Grid item xs={12}>

src/views/Lending/Cooler/dashboard/DataHelper.ts

@@ -61,6 +61,21 @@ export const useCoolerSnapshots = (earliestDate: Date) => {
     },
   ];
 
+  const defaultEvents = [
+    {
+      id: "0",
+      date: "2023-08-10",
+      // etc
+      collateralIncome: 20000,
+    },
+    {
+      id: "0",
+      date: "2023-08-15",
+      // etc
+      collateralIncome: 80050,
+    },
+  ];
+
   // When the data loading is complete, process it into a CoolerSnapshot
   const [byDateSnapshot, setByDateSnapshot] = useState<CoolerSnapshot[] | null>(null);
 
@@ -138,7 +153,21 @@ export const useCoolerSnapshots = (earliestDate: Date) => {
     }
 
     // Update the snapshot
-    coolerSnapshot.interestIncome = element.interestIncome;
+    coolerSnapshot.interestIncome += element.interestIncome;
+  });
+
+  // Iterate through the Default events, created whenever a loan defaults
+  defaultEvents.forEach(element => {
+    const dateString = getISO8601String(new Date(element.date));
+
+    // Get the snapshot
+    const coolerSnapshot = tempSnapshots.get(dateString);
+    if (!coolerSnapshot) {
+      throw new Error("Could not find CoolerSnapshot at date " + dateString);
+    }
+
+    // Update the snapshot
+    coolerSnapshot.collateralIncome += element.collateralIncome;
   });
 
   // Order snapshots to be in reverse-chronological order

src/views/Lending/Cooler/dashboard/IncomeGraph.tsx

@@ -0,0 +1,47 @@
+import { useTheme } from "@mui/material";
+import Chart from "src/components/Chart/Chart";
+import { ChartType, DataFormat } from "src/components/Chart/Constants";
+import {
+  getBulletpointStylesMap,
+  getCategoriesMap,
+  getDataKeyColorsMap,
+} from "src/helpers/subgraph/ProtocolMetricsHelper";
+import { useCoolerSnapshots } from "src/views/Lending/Cooler/dashboard/DataHelper";
+import { DEFAULT_BULLETPOINT_COLOURS, DEFAULT_COLORS } from "src/views/TreasuryDashboard/components/Graph/Constants";
+import { getTickStyle } from "src/views/TreasuryDashboard/components/Graph/helpers/ChartHelper";
+
+export const IncomeGraph = () => {
+  const theme = useTheme();
+
+  // Get loan data
+  const byDateSnapshots = useCoolerSnapshots(new Date("2023-08-01"));
+
+  /**
+   * Chart inputs
+   */
+  const dataKeys: string[] = ["interestIncome", "collateralIncome"];
+  const itemNames: string[] = ["Interest", "Reclaimed Collateral"];
+
+  const bulletpointStyles = getBulletpointStylesMap(DEFAULT_BULLETPOINT_COLOURS, dataKeys);
+  const colorsMap = getDataKeyColorsMap(DEFAULT_COLORS, dataKeys);
+  const dataKeyLabels = getCategoriesMap(itemNames, dataKeys);
+
+  return (
+    <Chart
+      type={ChartType.Bar}
+      data={byDateSnapshots || []}
+      dataFormat={DataFormat.Currency}
+      headerText="Protocol Income"
+      headerSubText={""}
+      dataKeys={dataKeys}
+      dataKeyColors={colorsMap}
+      dataKeyBulletpointStyles={bulletpointStyles}
+      dataKeyLabels={dataKeyLabels}
+      infoTooltipMessage={""}
+      isLoading={byDateSnapshots == null}
+      tickStyle={getTickStyle(theme)}
+      itemDecimals={0}
+      margin={{ left: 30 }}
+    />
+  );
+};