junte/assessment-model
1
0
Fork 0
mirror of https://github.com/Hestia-Homes/assessment-model.git synced 2026-06-30 12:55:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

tweaking colours on EPC bar

Browse source
This commit is contained in:
Khalim Conn-Kowlessar 2026-04-15 13:01:09 +00:00
parent 53db26e8aa
commit 29ad7489c4
2 changed files with 23 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/app/components/building-passport/CurrentEfficiencyCard.tsx
View file

@ -21,6 +21,27 @@ function getEpcHex(letter: string | null | undefined): string {
}
}
const EPC_STOPS = [
{ sap: 0, color: "#e41e3b" }, // G
{ sap: 21, color: "#ef8026" }, // F
{ sap: 39, color: "#f3a96a" }, // E
{ sap: 55, color: "#f7cd14" }, // D
{ sap: 69, color: "#8dbd40" }, // C
{ sap: 81, color: "#2da55c" }, // B
{ sap: 92, color: "#117d58" }, // A
];
function getEpcGradient(sapPoints: number, epcHex: string): string {
if (sapPoints <= 0) return epcHex;
const stops = EPC_STOPS.filter(s => s.sap <= sapPoints);
const gradientStops = stops.map(s => {
const pct = s.sap === 0 ? 0 : (s.sap / sapPoints) * 100;
return `${s.color} ${pct.toFixed(1)}%`;
});
gradientStops.push(`${epcHex} 100%`);
return `linear-gradient(to right, ${gradientStops.join(", ")})`;
}
function getEpcDescription(letter: string | null | undefined): string {
switch (letter?.toUpperCase()) {
case "A":
@ -104,7 +125,7 @@ export function CurrentEfficiencyCard({
className="absolute inset-y-0 left-0 rounded-full"
style={{
width: `${Math.min(100, Math.max(2, sapPoints))}%`,
background: "linear-gradient(to right, #e41e3b, #ef8026, #f7cd14, #8dbd40, #117d58)",
background: getEpcGradient(sapPoints, epcHex),
}}
/>
</div>

2
src/app/portfolio/[slug]/components/propertyTableColumns.tsx
View file

@ -200,7 +200,7 @@ const coreColumns: ColumnDef<PropertyWithRelations>[] = [
<div className="flex flex-col gap-0.5">
<a
href={`${portfolioId}/building-passport/${propertyId}`}
className="text-xs font-bold text-primary hover:text-secondary transition-colors truncate"
className="text-xs font-bold text-primary hover:text-brandmidblue transition-colors truncate"
>
{address}
</a>