Setting up structures for dashboard usage (#174)

* Recharts install

* Added year filter action to store; updated filters to clear when switching between grants and dashboard; set up basic chart and checkboxes but fixing sync

* Fixed filtering by changing processGrantData

* Updating border sizes

* Calendar date selected format

* Sample grant calculations

* Updating filter checkboxes to persist on refresh

* Calculation functions for grant metrics and tests

* Attempting to fix build errors

Author: janekamata

frontend/package-lock.json

@@ -20,7 +20,6 @@
     "core-js": "^3.38.1",
     "framer-motion": "^11.16.0",
     "fuse": "^0.12.1",
-
     "fuse.js": "^7.1.0",
     "mobx": "^6.13.2",
     "mobx-react-lite": "^4.1.0",
@@ -31,6 +30,7 @@
     "react-icons": "^5.4.0",
     "react-router-dom": "^6.26.2",
     "react-transition-group": "^4.4.5",
+    "recharts": "^3.2.1",
     "satcheljs": "^4.3.1"
   },
   "devDependencies": {

frontend/package.json

@@ -49,6 +49,10 @@ export const updateEndDateFilter = action (
     'updateEndDateFilter',
     (endDateFilter: Date | null) => ({endDateFilter})
 )
+export const updateYearFilter = action (
+    'updateYearFilter',
+    (yearFilter: number[] | null) => ({yearFilter})
+)
 
 /**
  * Append a new grant to the current list of grants.

frontend/src/external/bcanSatchel/actions.ts

@@ -5,7 +5,7 @@ import {
   logoutUser,
   fetchAllGrants,
   updateFilter,
-  updateStartDateFilter, updateEndDateFilter
+  updateStartDateFilter, updateEndDateFilter, updateYearFilter
 } from './actions';
 import { getAppStore } from './store';
 
@@ -68,3 +68,8 @@ mutator(updateEndDateFilter, (actionMessage) => {
   const store = getAppStore();
   store.endDateFilter = actionMessage.endDateFilter;
 })
+
+mutator(updateYearFilter, (actionMessage) => {
+  const store = getAppStore();
+  store.yearFilter = actionMessage.yearFilter;
+})

frontend/src/external/bcanSatchel/mutators.ts

@@ -12,7 +12,7 @@ export interface AppState {
   // TODO: should this be the ISODate type?
   startDateFilter: Date | null;
   endDateFilter: Date | null;
-}
+  yearFilter:number[] | null;}
 
 // Define initial state
 const initialState: AppState = {
@@ -23,6 +23,7 @@ const initialState: AppState = {
   filterStatus: null,
   startDateFilter: null,
   endDateFilter: null,
+  yearFilter: null,
 };
 
 const store = createStore<AppState>('appStore', initialState);

frontend/src/external/bcanSatchel/store.ts

@@ -5,6 +5,8 @@ import Header from "./header/Header";
 import Users from "./users/Users";
 
 function MainPage() {
+  
+
   return (
     <div className="w-full">
       <Header />

frontend/src/main-page/MainPage.tsx

@@ -0,0 +1,52 @@
+import { BarChart, Bar, CartesianGrid, XAxis, YAxis, Tooltip } from "recharts";
+import { observer } from "mobx-react-lite";
+import { useProcessGrantData } from "../../../main-page/grants/filter-bar/processGrantData";
+import { aggregateMoneyGrantsByYear, YearAmount } from "../grantCalculations";
+
+const SampleChart: React.FC = observer(() => {
+  const { grants } = useProcessGrantData();
+  const data = aggregateMoneyGrantsByYear(grants, "status").map(
+    (grant: YearAmount) => ({
+      name: grant.year.toString(),
+      active: grant.Active,
+      inactive: grant.Inactive,
+    })
+  );
+
+  return (
+    <div>
+      <BarChart
+        width={600}
+        height={300}
+        data={data}
+        margin={{ top: 5, right: 20, bottom: 5, left: 0 }}
+      >
+        <CartesianGrid stroke="#aaa" strokeDasharray="5 5" />
+        <Bar
+          type="monotone"
+          stackId="a"
+          dataKey="active"
+          fill="#90c4e5"
+          strokeWidth={2}
+          name="My data series name"
+        />
+        <Bar
+          type="monotone"
+          stackId="a"
+          dataKey="inactive"
+          fill="#F58D5C"
+          strokeWidth={2}
+          name="My data series name"
+        />
+        <XAxis dataKey="name" />
+        <YAxis
+          width="auto"
+          label={{ value: "UV", position: "insideLeft", angle: -90 }}
+        />
+        <Tooltip />
+      </BarChart>
+    </div>
+  );
+});
+
+export default SampleChart;

frontend/src/main-page/dashboard/Charts/SampleChart.tsx

@@ -1,11 +1,27 @@
+
+import DateFilter from "./DateFilter";
 import "./styles/Dashboard.css";
+import { observer } from "mobx-react-lite";
+import SampleChart from "./Charts/SampleChart";
+import { useEffect } from "react";
+import { updateYearFilter, updateFilter, updateEndDateFilter, updateStartDateFilter } from "../../external/bcanSatchel/actions";
+
+const Dashboard = observer(() => {
 
-function Dashboard() {
+  // reset filters on initial render
+    useEffect(() => {
+              updateYearFilter(null);
+              updateFilter(null);
+              updateEndDateFilter(null);
+              updateStartDateFilter(null);
+          }, []);
 
   return (
-    <div className="dashboard-page">
+    <div className="dashboard-page px-12 py-4">
+      <DateFilter />
+      <SampleChart/>
     </div>
   );
-}
+})
 
 export default Dashboard;

frontend/src/main-page/dashboard/Dashboard.tsx

@@ -0,0 +1,60 @@
+import { useState, useEffect } from "react";
+import { updateYearFilter } from "../../external/bcanSatchel/actions";
+import { getAppStore } from "../../external/bcanSatchel/store";
+import { observer } from "mobx-react-lite";
+
+const DateFilter: React.FC = observer(() => {
+  const { allGrants, yearFilter } = getAppStore();
+
+  // Generate unique years dynamically from grants
+  const uniqueYears = Array.from(
+    new Set(
+      allGrants.map((g) => new Date(g.application_deadline).getFullYear())
+    )
+  ).sort((a, b) => a - b);
+
+  // Initialize selection from store or fallback to all years
+  const [selectedYears, setSelectedYears] = useState<number[]>(uniqueYears);
+
+  // Keep local selection in sync if store changes
+  useEffect(() => {
+    (yearFilter && yearFilter.length) === 0
+      ? setSelectedYears(uniqueYears)
+      : setSelectedYears(yearFilter ?? uniqueYears);
+  }, [yearFilter, uniqueYears]);
+
+  // Update local store and state on checkbox change
+  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const year = Number(event.target.value);
+    const checked = event.target.checked;
+
+    let updatedYears;
+    if (checked) {
+      updatedYears = [...selectedYears, year];
+    } else {
+      updatedYears = selectedYears.filter((y) => y !== year);
+    }
+
+    setSelectedYears(updatedYears);
+    updateYearFilter(updatedYears);
+  };
+
+  return (
+    <div className="flex flex-col space-y-2 mb-4">
+      {uniqueYears.map((year) => (
+        <label key={year} className="flex items-center space-x-2">
+          <input
+            type="checkbox"
+            value={year}
+            checked={selectedYears.includes(year)}
+            onChange={handleCheckboxChange}
+            defaultChecked={true}
+          />
+          <span>{year}</span>
+        </label>
+      ))}
+    </div>
+  );
+});
+
+export default DateFilter;

frontend/src/main-page/dashboard/DateFilter.tsx

@@ -0,0 +1,68 @@
+import { Grant } from "../../../../middle-layer/types/Grant";
+
+export type YearAmount = {
+  year: number;
+  [key: string]: number;
+};
+
+/**
+ * Aggregates total grant amounts by year, optionally grouped by a secondary key.
+ *
+ * @param grants - Array of grants.
+ * @param groupBy - Optional secondary grouping key (e.g., "status" or "organization").
+ * @returns Array of { year, [groupValue]: amount }.
+ */
+export function aggregateMoneyGrantsByYear(
+  grants: Grant[],
+  groupBy?: keyof Grant
+): YearAmount[] {
+  const grouped: Record<number, Record<string, number>> = {};
+
+  for (const grant of grants) {
+    const year = new Date(grant.application_deadline).getUTCFullYear();
+    const groupValue = groupBy ? String(grant[groupBy] ?? "Unknown") : "All";
+
+    grouped[year] ??= {};
+    grouped[year][groupValue] = (grouped[year][groupValue] ?? 0) + grant.amount;
+  }
+
+  return Object.entries(grouped)
+    .map(([year, groups]) => ({
+      year: Number(year),
+      ...groups,
+    }))
+    .sort((a, b) => a.year - b.year);
+}
+
+/**
+ * Aggregates distinct grant counts by year, optionally grouped by a secondary key.
+ *
+ * @param grants - Array of grants.
+ * @param groupBy - Optional secondary grouping key (e.g., "status" or "organization").
+ * @returns Array of { year, [groupValue]: count }.
+ */
+export function aggregateCountGrantsByYear(
+  grants: Grant[],
+  groupBy?: keyof Grant
+): YearAmount[] {
+  const grouped: Record<number, Record<string, Set<number>>> = {};
+
+  for (const grant of grants) {
+    const year = new Date(grant.application_deadline).getUTCFullYear();
+    const groupValue = groupBy ? String(grant[groupBy] ?? "Unknown") : "All";
+
+    grouped[year] ??= {};
+    grouped[year][groupValue] ??= new Set<number>();
+    grouped[year][groupValue].add(grant.grantId);
+  }
+
+  return Object.entries(grouped)
+    .map(([year, groups]) => {
+      const counts: Record<string, number> = {};
+      for (const [key, ids] of Object.entries(groups)) {
+        counts[key] = ids.size;
+      }
+      return { year: Number(year), ...counts };
+    })
+    .sort((a, b) => a.year - b.year);
+}