Skip to content

Commit adfb04a

Browse files
smdsgnsmdsgn
authored
Merge pull request #1481 from MTES-MCT/feature/feedbacks-recette-page-trajectoire
Feedback recette page trajectoires
2 parents be36f73 + 0e3fbd8 commit adfb04a

File tree

23 files changed

+592
-384
lines changed

23 files changed

+592
-384
lines changed

‎frontend/scripts/components/charts/consommation/BivariateMap/BivariateLegend.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -129,8 +129,8 @@ const Cell = styled.div<{ $color: string; $highlighted?: boolean }>`
129129
border-radius: 6px;
130130
background: ${({ $color }) => $color};
131131
border: none;
132-
transition: filter 0.15s ease, box-shadow 0.15s ease;
133-
box-shadow: ${({ $highlighted }) => $highlighted ? '0 0 0 3px rgba(0,0,0,0.4)' : 'none'};
132+
transition: filter 0.15s ease, transform 0.2s ease;
133+
transform: ${({ $highlighted }) => $highlighted ? 'scale(.95)' : 'scale(1)'};
134134
filter: ${({ $highlighted }) => $highlighted ? 'brightness(1.1)' : 'none'};
135135
136136
&:hover {
@@ -322,15 +322,15 @@ export const BivariateLegend: React.FC<BivariateLegendProps> = ({
322322
<IconBadge icon={`bi ${LEVEL_ICONS[row]}`} size={22} variant="light" />
323323
<span>{consoLabel}</span>
324324
</MetricLabel>
325-
<Badge variant="highlight" size="sm">{consoDisplay}</Badge>
325+
<Badge variant="primary" size="sm">{consoDisplay}</Badge>
326326
</MetricRow>
327327

328328
<MetricRow>
329329
<MetricLabel>
330330
<IconBadge icon={`bi ${LEVEL_ICONS[col]}`} size={22} variant="light" />
331331
<span>{indicName}</span>
332332
</MetricLabel>
333-
<Badge variant="highlight" size="sm">{indicDisplay}</Badge>
333+
<Badge variant="primary" size="sm">{indicDisplay}</Badge>
334334
</MetricRow>
335335
</MetricList>
336336

‎frontend/scripts/components/features/TerritorySelector.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import styled from 'styled-components';
33
import SearchBar from '@components/ui/SearchBar';
44
import Button from '@components/ui/Button';
55
import { LandDetailResultType } from '@services/types/land';
6+
import Tag from '@components/ui/Tag';
7+
68

79
interface TerritorySelectorProps {
810
territories: LandDetailResultType[];
@@ -60,16 +62,13 @@ const TerritorySelector: React.FC<TerritorySelectorProps> = ({
6062
<p className="fr-text--sm fr-text--alt">{emptyText}</p>
6163
) : (
6264
territories.map((territory) => (
63-
<Button
65+
<Tag
6466
key={`${territory.land_type}_${territory.land_id}`}
65-
size="sm"
66-
variant="secondary"
67-
icon="bi bi-x-lg"
68-
iconPosition="right"
69-
onClick={() => onRemoveTerritory(territory)}
67+
variant="primary"
68+
onDismiss={() => onRemoveTerritory(territory)}
7069
>
7170
{territory.name}
72-
</Button>
71+
</Tag>
7372
))
7473
)}
7574
</TerritoryList>

‎frontend/scripts/components/pages/Consommation/components/ConsoAnnuelle.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -81,10 +81,8 @@ export const ConsoAnnuelle: React.FC<ConsoAnnuelleProps> = ({
8181
badge="Donnée clé"
8282
footer={{
8383
type: "period",
84-
periods: [
85-
{ label: String(startYear), active: true },
86-
{ label: String(endYear) },
87-
],
84+
from: String(startYear),
85+
to: String(endYear),
8886
}}
8987
/>
9088
</div>

‎frontend/scripts/components/pages/Consommation/components/ConsoComparison.tsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import GuideContent from "@components/ui/GuideContent";
66
import Button from "@components/ui/Button";
77
import { djangoApi } from "@services/api";
88
import BaseCard from "@components/ui/BaseCard";
9+
import Notice from "@components/ui/Notice";
10+
import Badge from "@components/ui/Badge";
911

1012
const BUBBLE_CHARTS = [
1113
{
@@ -96,18 +98,23 @@ export const ConsoComparison: React.FC<ConsoComparisonProps> = ({
9698
<div className="fr-mt-7w">
9799
<div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", flexWrap: "wrap", gap: "0.5rem" }} className="fr-mb-2w">
98100
<h3 id="conso-comparaison" className="fr-mb-0">Comparaison avec d'autres territoires</h3>
99-
<span className="fr-badge fr-badge--info fr-badge--no-icon">
101+
<Badge variant="highlight">
100102
{territories.length} territoire{territories.length > 1 ? "s" : ""} sélectionné{territories.length > 1 ? "s" : ""}
101-
</span>
103+
</Badge>
102104
</div>
103105

104106
<BaseCard style={{ padding: "1.25rem", overflow: "visible" }} className="fr-mb-3w">
105-
<div className="fr-notice fr-notice--info fr-mb-2w" style={{ padding: "0.75rem 1rem" }}>
106-
<div className="fr-notice__body" style={{ marginLeft: 0 }}>
107-
<p className="fr-notice__title fr-text--xs fr-mb-0" style={{ fontWeight: 400 }}>
108-
Par défaut, les territoires de comparaison ont été automatiquement sélectionnés en fonction de leur proximité géographique avec <strong>{landName}</strong>.
109-
</p>
110-
</div>
107+
<div className="fr-mb-2w">
108+
<Notice
109+
type="info"
110+
title=""
111+
description={
112+
<>
113+
Par défaut, les territoires de comparaison ont été automatiquement sélectionnés en fonction de leur proximité géographique avec <strong>{landName}</strong>.
114+
</>
115+
}
116+
withCard={false}
117+
/>
111118
</div>
112119

113120
<TerritorySelector

‎frontend/scripts/components/pages/Consommation/components/ConsoDemography.tsx‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Button from "@components/ui/Button";
77
import { formatNumber } from "@utils/formatUtils";
88
import { djangoApi, useGetSocioEconomicStatsQuery } from "@services/api";
99
import { useConsommationControls } from "../context/ConsommationControlsContext";
10+
import Badge from "@components/ui/Badge";
1011

1112
interface ConsoDemographyProps {
1213
landId: string;
@@ -96,47 +97,53 @@ export const ConsoDemography: React.FC<ConsoDemographyProps> = ({
9697
<Kpi
9798
icon="bi bi-people"
9899
label="Évolution annuelle de la population"
99-
value={formatAnnualValue(stats?.population_annual_evolution, "hab / an", loading)}
100-
description={formatAnnualPercent(stats?.population_annual_evolution_percent, loading)}
100+
value={
101+
<>
102+
<div>{formatAnnualValue(stats?.population_annual_evolution, "hab / an", loading)}</div>
103+
<Badge variant="primary"><strong>{formatAnnualPercent(stats?.population_annual_evolution_percent, loading)}</strong></Badge>
104+
</>
105+
}
101106
variant="default"
102107
footer={{
103108
type: "period",
104-
periods: [
105-
{ label: String(startYear), active: true },
106-
{ label: String(Math.min(endYear, 2022)) },
107-
],
109+
from: String(startYear),
110+
to: String(Math.min(endYear, 2022)),
108111
}}
109112
/>
110113
</div>
111114
<div className="fr-col-12 fr-col-xl-4 fr-grid-row">
112115
<Kpi
113116
icon="bi bi-house-door"
114117
label="Évolution annuelle du nombre de ménages"
115-
value={formatAnnualValue(stats?.menages_annual_evolution, "ménages / an", loading)}
116-
description={formatAnnualPercent(stats?.menages_annual_evolution_percent, loading)}
118+
value={
119+
<>
120+
<div>{formatAnnualValue(stats?.menages_annual_evolution, "ménages / an", loading)}</div>
121+
<Badge variant="primary"><strong>{formatAnnualPercent(stats?.menages_annual_evolution_percent, loading)}</strong></Badge>
122+
</>
123+
}
117124
variant="default"
118125
footer={{
119126
type: "period",
120-
periods: [
121-
{ label: String(startYear), active: true },
122-
{ label: String(Math.min(endYear, 2022)) },
123-
],
127+
from: String(startYear),
128+
to: String(Math.min(endYear, 2022)),
124129
}}
125130
/>
126131
</div>
127132
<div className="fr-col-12 fr-col-xl-4 fr-grid-row">
128133
<Kpi
129134
icon="bi bi-briefcase"
130135
label="Évolution annuelle du nombre d'emplois"
131-
value={formatAnnualValue(stats?.emplois_annual_evolution, "emplois / an", loading)}
132-
description={formatAnnualPercent(stats?.emplois_annual_evolution_percent, loading)}
136+
value={
137+
<>
138+
<div>{formatAnnualValue(stats?.emplois_annual_evolution, "emplois / an", loading)}</div>
139+
<Badge variant="primary"><strong>{formatAnnualPercent(stats?.emplois_annual_evolution_percent, loading)}</strong></Badge>
140+
</>
141+
}
133142
variant="default"
134143
footer={{
135144
type: "period",
136-
periods: [
137-
{ label: String(startYear), active: true },
138-
{ label: String(Math.min(endYear, 2022)) },
139-
],
145+
from: String(startYear),
146+
to: String(Math.min(endYear, 2022)),
140147
}}
141148
/>
142149
</div>

‎frontend/scripts/components/pages/ResidencesSecondaires/components/RSKpis.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,8 @@ export const RSKpis: React.FC<RSKpisProps> = ({
3535
badge="Donnée clé"
3636
footer={{
3737
type: "period",
38-
periods: [
39-
{ label: "2011", active: true },
40-
{ label: "2022" },
41-
],
38+
from: "2011",
39+
to: "2022",
4240
}}
4341
/>
4442
</div>
@@ -50,7 +48,8 @@ export const RSKpis: React.FC<RSKpisProps> = ({
5048
variant="default"
5149
footer={{
5250
type: "period",
53-
periods: [{ label: "2022" }],
51+
from: "2022",
52+
to: "2022",
5453
}}
5554
/>
5655
</div>
@@ -62,7 +61,8 @@ export const RSKpis: React.FC<RSKpisProps> = ({
6261
variant="default"
6362
footer={{
6463
type: "period",
65-
periods: [{ label: "2022" }],
64+
from: "2022",
65+
to: "2022",
6666
}}
6767
/>
6868
</div>

‎frontend/scripts/components/pages/Synthese/components/SyntheseArtif.tsx‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -37,24 +37,16 @@ const SyntheseArtifContent: React.FC<SyntheseArtifProps> = ({
3737
<Kpi
3838
icon={data.flux_surface > 0 ? "bi bi-arrow-up" : data.flux_surface < 0 ? "bi bi-arrow-down" : "bi bi-dash"}
3939
label="Artificialisation nette observée"
40-
description="Dernières données OCS GE disponibles"
4140
value={<>{data.flux_surface > 0 ? "+" : ""}{formatNumber({ number: data.flux_surface })} <span>ha</span></>}
4241
variant={data.flux_surface > 0 ? "error" : data.flux_surface < 0 ? "success" : "default"}
4342
footer={{
4443
type: "period",
45-
periods: [
46-
{
47-
label: landData.is_interdepartemental
48-
? `Millésime n°${data.millesime_index - 1}`
49-
: data.flux_previous_years.length > 0 ? data.flux_previous_years.join("-") : "—",
50-
active: true,
51-
},
52-
{
53-
label: landData.is_interdepartemental
54-
? `Millésime n°${data.millesime_index}`
55-
: data.years.length > 0 ? data.years.join("-") : "—",
56-
},
57-
],
44+
from: landData.is_interdepartemental
45+
? `Millésime n°${data.millesime_index - 1}`
46+
: data.flux_previous_years.length > 0 ? data.flux_previous_years.join("-") : "—",
47+
to: landData.is_interdepartemental
48+
? `Millésime n°${data.millesime_index}`
49+
: data.years.length > 0 ? data.years.join("-") : "—",
5850
}}
5951
action={{
6052
label: "Voir le diagnostic d'artificialisation",

‎frontend/scripts/components/pages/Synthese/components/SyntheseConso.tsx‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { formatNumber } from "@utils/formatUtils";
55
import Kpi from "@components/ui/Kpi";
66
import GuideContent from "@components/ui/GuideContent";
77
import ConsoCorrectionStatus from "@components/features/status/ConsoCorrectionStatus";
8+
import Badge from "@components/ui/Badge";
89

910
interface SyntheseConsoProps {
1011
landData: LandDetailResultType;
@@ -32,16 +33,18 @@ const SyntheseConso: React.FC<SyntheseConsoProps> = ({
3233
<div className="fr-col-12 fr-col-xl-6 fr-grid-row">
3334
<Kpi
3435
icon="bi bi-archive"
35-
label="Consommation d'espaces NAF"
36-
description="Base de calcul pour définir l'objectif de réduction"
37-
value={<>{formatNumber({ number: conso_2011_2020 })} <span>ha</span></>}
36+
label="Consommation d'espaces NAF observée"
37+
value={
38+
<>
39+
<div>{formatNumber({ number: conso_2011_2020 })} <span>ha</span></div>
40+
<Badge variant="primary"><strong>{formatNumber({ number: conso_2011_2020 / 10 })} ha / an</strong></Badge>
41+
</>
42+
}
3843
variant="default"
3944
footer={{
4045
type: "period",
41-
periods: [
42-
{ label: "2011", active: true },
43-
{ label: "2020" },
44-
],
46+
from: "2011",
47+
to: "2020",
4548
}}
4649
action={{
4750
label: "Voir le diagnostic de consommation",
@@ -50,7 +53,7 @@ const SyntheseConso: React.FC<SyntheseConsoProps> = ({
5053
/>
5154
</div>
5255
<div className="fr-col-12 fr-col-xl-6 fr-grid-row">
53-
<GuideContent title="Pourquoi cette période de référence ?">
56+
<GuideContent title="Comprendre la période de référence">
5457
<p className="fr-text--sm">
5558
La consommation d'espaces NAF entre 2011 et 2021 constitue
5659
la base de calcul pour définir la trajectoire de réduction fixée
@@ -75,16 +78,18 @@ const SyntheseConso: React.FC<SyntheseConsoProps> = ({
7578
<div className="fr-col-12 fr-col-xl-4 fr-grid-row">
7679
<Kpi
7780
icon="bi bi-check"
78-
label="Consommation d'espaces NAF"
79-
description="Consommation réelle observée"
80-
value={<>{formatNumber({ number: conso_since_2021 })} <span>ha</span></>}
81+
label="Consommation d'espaces NAF observée"
82+
value={
83+
<>
84+
<div>{formatNumber({ number: conso_since_2021 })} <span>ha</span></div>
85+
<Badge variant="primary"><strong>{formatNumber({ number: conso_since_2021 / 3 })} ha / an</strong></Badge>
86+
</>
87+
}
8188
variant="default"
8289
footer={{
8390
type: "period",
84-
periods: [
85-
{ label: "2021", active: true },
86-
{ label: "2023" },
87-
],
91+
from: "2021",
92+
to: "2023",
8893
}}
8994
action={{
9095
label: "Voir le diagnostic de consommation",
@@ -94,17 +99,20 @@ const SyntheseConso: React.FC<SyntheseConsoProps> = ({
9499
</div>
95100
<div className="fr-col-12 fr-col-xl-4 fr-grid-row">
96101
<Kpi
97-
icon="bi bi-arrow-right"
98-
label="Consommation d'espaces NAF"
99-
description="Consommation à ne pas dépasser"
100-
value={<>{formatNumber({ number: allowed_conso_2021_2030 })} <span>ha</span></>}
101-
variant="default"
102+
icon="bi bi-bullseye"
103+
label="Consommation d'espaces NAF à ne pas dépasser"
104+
value={
105+
<>
106+
<div>{formatNumber({ number: allowed_conso_2021_2030 })} <span>ha</span></div>
107+
<Badge variant="success"><strong>{formatNumber({ number: allowed_conso_2021_2030 / 10 })} ha / an</strong></Badge>
108+
</>
109+
}
110+
variant="success"
111+
badge="Objectif national (-50%)"
102112
footer={{
103113
type: "period",
104-
periods: [
105-
{ label: "2021", active: false },
106-
{ label: "2031" },
107-
],
114+
from: "2021",
115+
to: "2031",
108116
}}
109117
action={{
110118
label: "Simuler une trajectoire",

‎frontend/scripts/components/pages/Synthese/components/SyntheseLogementVacant.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,12 @@ const SyntheseLogementVacant: React.FC<SyntheseLogementVacantProps> = ({
4444
items: [
4545
{
4646
icon: "bi bi-house",
47-
label: "Parc privé",
47+
label: "Logements vacants dans le parc privé",
4848
value: hasPriveData ? formatNumber({ number: logements_vacants_parc_prive, decimals: 0 }) : "—",
4949
},
5050
{
5151
icon: "bi bi-houses",
52-
label: "Parc bailleurs sociaux",
52+
label: "Logements vacants dans le parc des bailleurs sociaux",
5353
value: hasSocialData ? formatNumber({ number: logements_vacants_parc_social, decimals: 0 }) : "—",
5454
},
5555
],

‎frontend/scripts/components/pages/Synthese/components/TerritoryIdentityCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ export const TerritoryIdentityCard = ({ landData, className }: TerritoryIdentity
182182
<DataSectionLabel>Données disponibles pour ce territoire :</DataSectionLabel>
183183
<DataSectionBadges>
184184
{dataCoverage.map((data) => (
185-
<Badge key={data.key} variant={data.available ? "highlight" : "neutral"} size="sm">
185+
<Badge key={data.key} variant={data.available ? "primary" : "neutral"} size="sm">
186186
<i className={data.available ? "bi bi-check-lg" : "bi bi-x-lg"} />
187187
{data.label}
188188
</Badge>

0 commit comments

Comments
 (0)