added new metrics to dropdown scenario ui

This commit is contained in:
Khalim Conn-Kowlessar 2025-12-11 13:49:03 +00:00
parent a1385bd164
commit 46dcc1b936
2 changed files with 41 additions and 4 deletions

View file

@ -106,10 +106,9 @@ export function ReportingClientArea({
: null;
// ----------------------------------------
// Financial drawer values (from API)
// Scenario specific metrics that appear in the drawer (from API) and cannot be overlayed on baseline
// ----------------------------------------
console.log("scenarioData", scenarioData);
const scenarioFinancial = scenarioData
const scenarioSpecific = scenarioData
? {
totalCost: scenarioData.total_cost,
contingency: scenarioData.contingency,
@ -126,6 +125,16 @@ export function ReportingClientArea({
netCost: scenarioData.net_cost,
grossPerUnit: scenarioData.gross_per_unit,
nUnits: scenarioData.n_units_upgraded,
totalCarbonSaved:
(baseline.totals.total_carbon ?? 0) - scenarioData.total_carbon,
totalBillsSaved:
(baseline.totals.total_bills ?? 0) - scenarioData.total_bills,
averageCaribonSaved:
((baseline.totals.total_carbon ?? 0) - scenarioData.total_carbon) /
scenarioData.n_units_upgraded,
averageBillsSaved:
((baseline.totals.total_bills ?? 0) - scenarioData.total_bills) /
scenarioData.n_units_upgraded,
}
: null;
@ -157,7 +166,7 @@ export function ReportingClientArea({
subtitle="High-level insights on performance, energy, and EPC quality."
/>
<ScenarioFinancialDrawer open={drawerOpen} metrics={scenarioFinancial} />
<ScenarioFinancialDrawer open={drawerOpen} metrics={scenarioSpecific} />
<div className="grid grid-cols-1 lg:grid-cols-[60%_40%] gap-6 p-2">
<DashboardSummaryCards

View file

@ -95,6 +95,34 @@ export function ScenarioFinancialDrawer({
color="text-brandblue"
bg="bg-brandblue/20"
/>
<Metric
label="Total Carbon Saved (tonnes) per year"
value={formatNumber(metrics.totalCarbonSaved)}
icon={Users}
color="text-brandblue"
bg="bg-brandblue/20"
/>
<Metric
label="Total Bills Saved (£) per year"
value={`£${formatNumber(metrics.totalBillsSaved)}`}
icon={Users}
color="text-brandblue"
bg="bg-brandblue/20"
/>
<Metric
label="Average Carbon Saved (tonnes) per unit per year"
value={formatNumber(metrics.averageCaribonSaved)}
icon={Users}
color="text-brandblue"
bg="bg-brandblue/20"
/>
<Metric
label="Average Bills Saved (£) per unit per year"
value={`£${formatNumber(metrics.averageBillsSaved)}`}
icon={Users}
color="text-brandblue"
bg="bg-brandblue/20"
/>
</div>
</div>
</motion.div>