Skip to content

Commit f1bd8ef

Browse files
smdsgnsmdsgn
committed
Add badge to friches KPIs
1 parent ead855b commit f1bd8ef

2 files changed

Lines changed: 68 additions & 62 deletions

File tree

‎frontend/scripts/components/pages/Friches/components/FrichesKpiCards.tsx‎

Lines changed: 67 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -22,106 +22,112 @@ export const FrichesKpiCards: React.FC = () => {
2222
friche_reconvertie_count,
2323
} = fricheStatusDetails;
2424

25-
const sansProjetFooter: [
26-
{ icon: string; label: string; value: string },
27-
{ icon: string; label: string; value: string }
28-
] = [
29-
{
30-
icon: "bi bi-buildings",
31-
label: "Surfaces artificialisées",
32-
value: `${formatNumber({ number: friche_sans_projet_surface_artif })} ha`,
33-
},
34-
{
35-
icon: "bi bi-droplet",
36-
label: "Surfaces imperméables",
37-
value: `${formatNumber({ number: friche_sans_projet_surface_imper })} ha`,
38-
},
39-
];
40-
41-
const avecProjetFooter: [
42-
{ icon: string; label: string; value: string },
43-
{ icon: string; label: string; value: string }
44-
] = [
45-
{
46-
icon: "bi bi-buildings",
47-
label: "Surfaces artificialisées",
48-
value: `${formatNumber({ number: friche_avec_projet_surface_artif })} ha`,
49-
},
50-
{
51-
icon: "bi bi-droplet",
52-
label: "Surfaces imperméables",
53-
value: `${formatNumber({ number: friche_avec_projet_surface_imper })} ha`,
54-
},
55-
];
56-
57-
const reconvertieFooter: [
58-
{ icon: string; label: string; value: string },
59-
{ icon: string; label: string; value: string }
60-
] = [
61-
{
62-
icon: "bi bi-buildings",
63-
label: "Surfaces artificialisées",
64-
value: `${formatNumber({ number: friche_reconvertie_surface_artif })} ha`,
65-
},
66-
{
67-
icon: "bi bi-droplet",
68-
label: "Surfaces imperméables",
69-
value: `${formatNumber({ number: friche_reconvertie_surface_imper })} ha`,
70-
},
71-
];
72-
7325
return (
7426
<div className="fr-mb-5w">
7527
<div className="fr-grid-row fr-grid-row--gutters fr-mb-3w">
7628
<div className="fr-col-12 fr-col-xl-4">
7729
<Kpi
7830
icon="bi bi-building-x"
79-
label={`${friche_sans_projet_count} ${pluralize(friche_sans_projet_count, "friche")} sans projet`}
8031
value={
8132
<>
82-
{formatNumber({ number: friche_sans_projet_surface })}{" "}
83-
<span>ha</span>
33+
<div>
34+
{formatNumber({ number: friche_sans_projet_surface })}{" "}
35+
<span>ha</span>
36+
</div>
37+
<span className="fr-badge fr-badge--no-icon text-lowercase fr-badge--warning">
38+
<strong>
39+
{friche_sans_projet_count}{" "}
40+
{pluralize(friche_sans_projet_count, "friche")} sans projet
41+
</strong>
42+
</span>
8443
</>
8544
}
8645
variant="default"
87-
badge="Actionnable"
8846
footer={{
8947
type: "metric",
90-
items: sansProjetFooter,
48+
items: [
49+
{
50+
icon: "bi bi-buildings",
51+
label: "Surfaces artificialisées",
52+
value: `${formatNumber({ number: friche_sans_projet_surface_artif })} ha`,
53+
},
54+
{
55+
icon: "bi bi-droplet",
56+
label: "Surfaces imperméables",
57+
value: `${formatNumber({ number: friche_sans_projet_surface_imper })} ha`,
58+
},
59+
],
9160
}}
9261
/>
9362
</div>
9463
<div className="fr-col-12 fr-col-xl-4">
9564
<Kpi
9665
icon="bi bi-building"
97-
label={`${friche_avec_projet_count} ${pluralize(friche_avec_projet_count, "friche")} avec projet`}
9866
value={
9967
<>
100-
{formatNumber({ number: friche_avec_projet_surface })}{" "}
101-
<span>ha</span>
68+
<div>
69+
{formatNumber({ number: friche_avec_projet_surface })}{" "}
70+
<span>ha</span>
71+
</div>
72+
<span className="fr-badge fr-badge--no-icon text-lowercase fr-badge--info">
73+
<strong>
74+
{friche_avec_projet_count}{" "}
75+
{pluralize(friche_avec_projet_count, "friche")} avec projet
76+
</strong>
77+
</span>
10278
</>
10379
}
10480
variant="default"
10581
footer={{
10682
type: "metric",
107-
items: avecProjetFooter,
83+
items: [
84+
{
85+
icon: "bi bi-buildings",
86+
label: "Surfaces artificialisées",
87+
value: `${formatNumber({ number: friche_avec_projet_surface_artif })} ha`,
88+
},
89+
{
90+
icon: "bi bi-droplet",
91+
label: "Surfaces imperméables",
92+
value: `${formatNumber({ number: friche_avec_projet_surface_imper })} ha`,
93+
},
94+
],
10895
}}
10996
/>
11097
</div>
11198
<div className="fr-col-12 fr-col-xl-4">
11299
<Kpi
113100
icon="bi bi-building-check"
114-
label={`${friche_reconvertie_count} ${pluralize(friche_reconvertie_count, "friche")} reconvertie${friche_reconvertie_count > 1 ? "s" : ""}`}
115101
value={
116102
<>
117-
{formatNumber({ number: friche_reconvertie_surface })}{" "}
118-
<span>ha</span>
103+
<div>
104+
{formatNumber({ number: friche_reconvertie_surface })}{" "}
105+
<span>ha</span>
106+
</div>
107+
<span className="fr-badge fr-badge--no-icon text-lowercase fr-badge--success">
108+
<strong>
109+
{friche_reconvertie_count}{" "}
110+
{pluralize(friche_reconvertie_count, "friche")} reconvertie
111+
{friche_reconvertie_count > 1 ? "s" : ""}
112+
</strong>
113+
</span>
119114
</>
120115
}
121116
variant="default"
122117
footer={{
123118
type: "metric",
124-
items: reconvertieFooter,
119+
items: [
120+
{
121+
icon: "bi bi-buildings",
122+
label: "Surfaces artificialisées",
123+
value: `${formatNumber({ number: friche_reconvertie_surface_artif })} ha`,
124+
},
125+
{
126+
icon: "bi bi-droplet",
127+
label: "Surfaces imperméables",
128+
value: `${formatNumber({ number: friche_reconvertie_surface_imper })} ha`,
129+
},
130+
],
125131
}}
126132
/>
127133
</div>

‎frontend/scripts/components/ui/Kpi.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ interface KpiAction {
2626

2727
export interface KpiProps {
2828
icon: string;
29-
label: string;
29+
label?: string;
3030
value: ReactNode;
3131
description?: ReactNode;
3232
detail?: ReactNode;

0 commit comments

Comments
 (0)