From 2f70c7537e97700da1623d5edd66f02309eaa379 Mon Sep 17 00:00:00 2001 From: Jane Kamata Date: Thu, 12 Feb 2026 00:40:43 -0500 Subject: [PATCH 01/12] Most formatting done except pie and stacked --- .../dashboard/Charts/BarYearGrantStatus.tsx | 19 +++-- .../dashboard/Charts/DonutMoneyApplied.tsx | 21 ++--- .../Charts/GanttYearGrantTimeline.tsx | 6 +- .../main-page/dashboard/Charts/KPICard.tsx | 41 +++++----- .../main-page/dashboard/Charts/KPICards.tsx | 2 +- .../dashboard/Charts/LineChartSuccessRate.tsx | 31 +++++--- .../Charts/StackedBarMoneyReceived.tsx | 29 +++---- .../src/main-page/dashboard/Dashboard.tsx | 79 +++++++++++-------- .../src/main-page/dashboard/DateFilter.tsx | 11 ++- .../main-page/dashboard/styles/Dashboard.css | 20 +++-- .../main-page/grants/styles/GrantButton.css | 7 +- frontend/src/styles/index.css | 2 +- 12 files changed, 146 insertions(+), 122 deletions(-) diff --git a/frontend/src/main-page/dashboard/Charts/BarYearGrantStatus.tsx b/frontend/src/main-page/dashboard/Charts/BarYearGrantStatus.tsx index e25267cc..5bae07a6 100644 --- a/frontend/src/main-page/dashboard/Charts/BarYearGrantStatus.tsx +++ b/frontend/src/main-page/dashboard/Charts/BarYearGrantStatus.tsx @@ -47,12 +47,12 @@ const BarYearGrantStatus = observer( .sort((a, b) => b.value - a.value); return ( -
+
{/* Title */}
- Year Grant Status + Grant Status
{/* Year */}
{recentYear}
@@ -77,20 +77,19 @@ const BarYearGrantStatus = observer(
- + - - typeof label === "number" ? checked diff --git a/frontend/src/main-page/dashboard/Charts/DonutMoneyApplied.tsx b/frontend/src/main-page/dashboard/Charts/DonutMoneyApplied.tsx index 595164b3..39627a4f 100644 --- a/frontend/src/main-page/dashboard/Charts/DonutMoneyApplied.tsx +++ b/frontend/src/main-page/dashboard/Charts/DonutMoneyApplied.tsx @@ -31,8 +31,8 @@ const DonutMoneyApplied = observer(({ grants }: { grants: Grant[] }) => { ); const total = sumReceived + sumUnreceived; const data = [ - { name: "Received", value: sumReceived, fill: "var(--color-yellow)"}, - { name: "Unreceived", value: sumUnreceived, fill: "var(--color-primary-800)" }, + { name: "Received", value: sumReceived, fill: "var(--color-primary-900)"}, + { name: "Unreceived", value: sumUnreceived, fill: "var(--color-primary-700)" }, ]; // Creating the label for the slices @@ -66,11 +66,11 @@ const DonutMoneyApplied = observer(({ grants }: { grants: Grant[] }) => { return (
-
+
{/* Title */} -
+
Money Applied For {/* Total Amount */}
{`$${((sumReceived + sumUnreceived) / 1000000).toLocaleString( @@ -87,7 +87,7 @@ const DonutMoneyApplied = observer(({ grants }: { grants: Grant[] }) => { name="Unreceived" value={sumUnreceived} percent={sumUnreceived / total} - color="var(--color-primary-800)" + color="var(--color-primary-700)" />
)} @@ -98,15 +98,16 @@ const DonutMoneyApplied = observer(({ grants }: { grants: Grant[] }) => { name="Received" value={sumReceived} percent={sumReceived / total} - color="var(--color-yellow)" + color="var(--color-primary-900)" />
)}
- + { endAngle={450} dataKey="value" nameKey="name" - innerRadius="60%" + innerRadius="55%" outerRadius="80%" cornerRadius={50} stroke="white" diff --git a/frontend/src/main-page/dashboard/Charts/GanttYearGrantTimeline.tsx b/frontend/src/main-page/dashboard/Charts/GanttYearGrantTimeline.tsx index 847169a8..d9f12f72 100644 --- a/frontend/src/main-page/dashboard/Charts/GanttYearGrantTimeline.tsx +++ b/frontend/src/main-page/dashboard/Charts/GanttYearGrantTimeline.tsx @@ -140,10 +140,10 @@ export const GanttYearGrantTimeline = observer( })); return ( -
+
{/* Title */}
- Year Grant Timeline + Grant Timeline
{/* Year */}
@@ -152,7 +152,7 @@ export const GanttYearGrantTimeline = observer( : ""} {recentYear}
-
+
{ return ( -
+
{/* Title */}
{title}
- +
{formattedValue}
{/* Value and Percent Change */}
-
- {formattedValue} -
- {priorYear && ( -
- {percentChange >= 0 - ? `+${percentChange.toFixed(0)}%` - : `-${Math.abs(percentChange).toFixed(0)}%`} +
{percentChange >= 0 ? ( - + + + {`${percentChange.toFixed(0)}%`} + + ) : ( - + + + {`${Math.abs(percentChange).toFixed(0)}%`} + )} -
+
)} -
- - {/* Year comparison at bottom */} -
- {recentYear} - {priorYear ? ` vs. ${priorYear}` : ""} + {/* Year comparison at bottom */} +
+ {recentYear} + {priorYear ? ` vs. ${priorYear}` : ""} +
); - } + }, ); export default KPICard; diff --git a/frontend/src/main-page/dashboard/Charts/KPICards.tsx b/frontend/src/main-page/dashboard/Charts/KPICards.tsx index c71e241a..94989817 100644 --- a/frontend/src/main-page/dashboard/Charts/KPICards.tsx +++ b/frontend/src/main-page/dashboard/Charts/KPICards.tsx @@ -92,7 +92,7 @@ const KPICards = observer( prior.countReceived > 0 ? prior.moneyReceived / prior.countReceived : 0; return ( -
+
{ const moneyReceived = getListApplied(true); const moneyUnreceived = getListApplied(false); + const [width, setWidth] = useState(0); + // Formatting money data const data_money = aggregateMoneyGrantsByYear(grants, "status").map( (grant: YearAmount) => { @@ -87,26 +89,27 @@ const LineChartSuccessRate = observer(({ grants }: { grants: Grant[] }) => { data.sort((a, b) => a.date.getTime() - b.date.getTime()); return ( -
+
{/* Title */} -
+
Success Rate by Year
setWidth(w)} > - 300 && ( { ) => ( {value} )} - /> + />)} { { domain={["auto", "auto"]} scale="time" dy={10} + style={{ fontSize: "var(--font-size-sm)" }} tickFormatter={(date: Date) => date.getFullYear().toString()} axisLine={false} tickLine={false} diff --git a/frontend/src/main-page/dashboard/Charts/StackedBarMoneyReceived.tsx b/frontend/src/main-page/dashboard/Charts/StackedBarMoneyReceived.tsx index 4d858fe8..f55785fd 100644 --- a/frontend/src/main-page/dashboard/Charts/StackedBarMoneyReceived.tsx +++ b/frontend/src/main-page/dashboard/Charts/StackedBarMoneyReceived.tsx @@ -40,18 +40,18 @@ const StackedBarMoneyReceived = observer(({ grants }: { grants: Grant[] }) => { ); return ( -
+
{/* Title */}
Money Received by Year
- + { | undefined ) => ( {value} @@ -81,7 +81,7 @@ const StackedBarMoneyReceived = observer(({ grants }: { grants: Grant[] }) => { type="monotone" stackId="a" dataKey="unreceived" - fill="var(--color-primary-800)" + fill="var(--color-primary-700)" strokeWidth={2} name="Unreceived" radius={[15, 15, 15, 15]} @@ -89,7 +89,7 @@ const StackedBarMoneyReceived = observer(({ grants }: { grants: Grant[] }) => { typeof label === "number" && label > 0 ? `$${label / 1000}k` @@ -101,7 +101,7 @@ const StackedBarMoneyReceived = observer(({ grants }: { grants: Grant[] }) => { type="monotone" stackId="a" dataKey="received" - fill="var(--color-yellow)" + fill="var(--color-primary-900)" strokeWidth={2} name="Received" radius={[15, 15, 15, 15]} @@ -109,7 +109,7 @@ const StackedBarMoneyReceived = observer(({ grants }: { grants: Grant[] }) => { typeof label === "number" && label > 0 ? `$${label / 1000}k` @@ -117,15 +117,8 @@ const StackedBarMoneyReceived = observer(({ grants }: { grants: Grant[] }) => { } /> - - `$${value / 1000}k`} - /> + + { new Set( yearFilter && yearFilter?.length > 0 ? yearFilter - : allGrants.map((g) => new Date(g.application_deadline).getFullYear()) - ) + : allGrants.map((g) => new Date(g.application_deadline).getFullYear()), + ), ).sort((a, b) => b - a); const recentYear = uniqueYears[0]; @@ -45,41 +45,52 @@ const Dashboard = observer(() => { const { grants } = ProcessGrantData(); - return(
-
- - + return ( +
+
+
Dashboard
+ + +
+ +
+ {/* ROW 1 */} +
+ +
+ +
+ +
+ +
+ +
+ + {/* ROW 2 */} +
+ +
+ +
+
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
+ {/* ROW 3 (Scrollable) */} +
+
-
) +
+
+ ); }); export default Dashboard; diff --git a/frontend/src/main-page/dashboard/DateFilter.tsx b/frontend/src/main-page/dashboard/DateFilter.tsx index bf8d6a1c..bfd4003e 100644 --- a/frontend/src/main-page/dashboard/DateFilter.tsx +++ b/frontend/src/main-page/dashboard/DateFilter.tsx @@ -3,6 +3,8 @@ import { updateYearFilter } from "../../external/bcanSatchel/actions"; import { getAppStore } from "../../external/bcanSatchel/store"; import { observer } from "mobx-react-lite"; import { FaChevronDown } from "react-icons/fa"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faXmark } from "@fortawesome/free-solid-svg-icons"; const DateFilter: React.FC = observer(() => { const { allGrants, yearFilter } = getAppStore(); @@ -48,6 +50,8 @@ const DateFilter: React.FC = observer(() => { setShowDropdown(false); }; + + return (
+