Add dummy data and data structure for the utilisation graph.

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

@@ -21,17 +21,17 @@ export const CoolerDashboard = () => {
   return (
     <div id="cooler-metrics">
       <Grid container spacing={1}>
-        <Grid item xs={8} sm={6} md={5} lg={4} textAlign={"center"}>
+        <Grid item xs={12}>
           <Paper {...paperProps} style={paperStyles}>
             <UtilisationGraph />
           </Paper>
         </Grid>
-        <Grid item xs={8} sm={6} md={5} lg={4} textAlign={"center"}>
+        <Grid item xs={12}>
           <Paper {...paperProps} style={paperStyles}>
             {/* Revenue */}
           </Paper>
         </Grid>
-        <Grid item xs={8} sm={6} md={5} lg={4} textAlign={"center"}>
+        <Grid item xs={12}>
           <Paper {...paperProps} style={paperStyles}>
             {/* Loan Maturity */}
           </Paper>

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

@@ -1,3 +1,6 @@
+import { useState } from "react";
+import { getISO8601String } from "src/helpers/DateHelper";
+
 /**
  * Represents a daily snapshot of all Cooler Loans
  */
@@ -12,8 +15,140 @@ export type CoolerSnapshot = {
   // TODO Maturity
 };
 
-export const getCoolerSnapshotData = async () => {
+export const useCoolerSnapshots = (earliestDate: Date) => {
   // Get the data from the subgraph hooks: CoolerLoan and ClearinghouseSnapshot
+  const clearinghouseSnapshots = [
+    {
+      id: "0",
+      date: "2023-08-01",
+      blockNumber: 12223,
+      blockTimestamp: 100000,
+      clearinghouse: "0x00000",
+      isActive: true,
+      nextRebalanceTimestamp: 100001,
+      receivables: 18000000.01,
+      daiBalance: 10000000.0,
+      sDaiBalance: 500000.0,
+      sDaiInDaiBalance: 600000.01,
+    },
+    {
+      id: "0",
+      date: "2023-08-20",
+      blockNumber: 12223,
+      blockTimestamp: 100000,
+      clearinghouse: "0x00000",
+      isActive: true,
+      nextRebalanceTimestamp: 100001,
+      receivables: 20000000.01,
+      daiBalance: 9000000.0,
+      sDaiBalance: 500000.0,
+      sDaiInDaiBalance: 600000.01,
+    },
+  ];
+
+  const repaymentEvents = [
+    {
+      id: "0",
+      date: "2023-08-08",
+      // etc
+      interestIncome: 50000.02,
+    },
+    {
+      id: "0",
+      date: "2023-08-15",
+      // etc
+      interestIncome: 60000.03,
+    },
+  ];
+
   // When the data loading is complete, process it into a CoolerSnapshot
+  const [byDateSnapshot, setByDateSnapshot] = useState<CoolerSnapshot[] | null>(null);
+
+  // TODO convert to useMemo
+  // Check that both sets of results have been received
+
+  // Sort the results by date
+
+  const tempSnapshots: Map<string, CoolerSnapshot> = new Map<string, CoolerSnapshot>();
+
+  // Iterate through the ClearinghouseSnapshot results, created whenever rebalancing or defunding is performed
+  clearinghouseSnapshots.forEach(element => {
+    const date: Date = new Date(element.date);
+    date.setUTCHours(0, 0, 0, 0);
+    const dateString = getISO8601String(date);
+
+    // Create a snapshot
+    const coolerSnapshot: CoolerSnapshot = {
+      date: dateString,
+      timestamp: date.getTime(),
+      receivables: element.receivables,
+      capacity: element.daiBalance + element.sDaiInDaiBalance,
+      interestIncome: 0,
+      collateralIncome: 0,
+    };
+
+    console.log("created snapshot for date " + dateString);
+
+    // Add the snapshot to the map
+    tempSnapshots.set(dateString, coolerSnapshot);
+  });
+
+  // Forward-fill the snapshots
+  let lastSnapshot: CoolerSnapshot | null = null;
+
+  const currentDate: Date = new Date(earliestDate);
+  currentDate.setUTCHours(0, 0, 0, 0);
+  const today: Date = new Date();
+  today.setUTCHours(0, 0, 0, 0);
+  while (currentDate <= today) {
+    const dateString = getISO8601String(currentDate);
+
+    // Get the snapshot
+    const coolerSnapshot = tempSnapshots.get(dateString);
+
+    // If there is an existing snapshot, track it and move on
+    if (coolerSnapshot) {
+      lastSnapshot = coolerSnapshot;
+      console.log("existing snapshot for date " + dateString);
+      currentDate.setDate(currentDate.getDate() + 1);
+      continue;
+    }
+
+    // If there is no previous snapshot, create a new one
+    const newSnapshot: CoolerSnapshot = {
+      date: dateString,
+      timestamp: currentDate.getTime(),
+      receivables: lastSnapshot ? lastSnapshot.receivables : 0,
+      capacity: lastSnapshot ? lastSnapshot.capacity : 0,
+      interestIncome: 0,
+      collateralIncome: 0,
+    };
+    console.log("created forward-fill snapshot for date " + dateString);
+    console.log("receivables = " + newSnapshot.receivables);
+
+    tempSnapshots.set(dateString, newSnapshot);
+
+    // Increment currentDate
+    currentDate.setDate(currentDate.getDate() + 1);
+  }
+
+  // Iterate through the Repayment events, created whenever a loan is repaid
+  repaymentEvents.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.interestIncome = element.interestIncome;
+  });
+
+  // Order snapshots to be in reverse-chronological order
+  setByDateSnapshot(Array.from(tempSnapshots.values()).sort((a, b) => b.timestamp - a.timestamp));
+
   // Return the CoolerSnapshot
+  return byDateSnapshot;
 };

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

@@ -6,13 +6,15 @@ import {
   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 UtilisationGraph = () => {
   const theme = useTheme();
 
   // Get loan data
+  const byDateSnapshots = useCoolerSnapshots(new Date("2023-08-01"));
 
   /**
    * Chart inputs
@@ -27,7 +29,7 @@ export const UtilisationGraph = () => {
   return (
     <Chart
       type={ChartType.MultiLine}
-      data={[]}
+      data={byDateSnapshots || []}
       dataFormat={DataFormat.Currency}
       headerText="Utilisation"
       headerSubText={""}
@@ -36,8 +38,10 @@ export const UtilisationGraph = () => {
       dataKeyBulletpointStyles={bulletpointStyles}
       dataKeyLabels={dataKeyLabels}
       infoTooltipMessage={""}
-      isLoading={false}
+      isLoading={byDateSnapshots == null}
       tickStyle={getTickStyle(theme)}
+      itemDecimals={0}
+      margin={{ left: 30 }}
     />
   );
 };