Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Maj couche batiments raccordés chaleur + ajout couche batiments raccordés froid #903

Open
wants to merge 6 commits into
base: dev
Choose a base branch
from
+175 −65
Open

Maj couche batiments raccordés chaleur + ajout couche batiments raccordés froid #903

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
08a2402
Maj couche batiments raccordés chaleur + ajout couche batiments racco…
totakoko Oct 16, 2024
c09749e
Nettoyage raccordement ancienne popup
totakoko Oct 17, 2024
b42ae16
Nettoyage code obsolète
totakoko Oct 17, 2024
adfd46d
Ajout lien vers doc notion
totakoko Oct 17, 2024
2828bea
Style de la popup comme les conso de gaz
totakoko Oct 17, 2024
2c39ca9
Déplacement id réseau en bas
totakoko Oct 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 48 additions & 3 deletions src/components/Map/components/DynamicMapPopupContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { ReactElement } from 'react';

import Link from '@components/ui/Link';
import Text from '@components/ui/Text';
import { isDefined } from '@utils/core';
import { formatMWh, prettyFormatNumber } from '@utils/strings';
import { BatimentRaccordeReseauxChaleurFroid } from 'src/types/layers/BatimentRaccordeReseauxChaleurFroid';
import { BesoinsEnChaleur, BesoinsEnChaleurIndustrieCommunes } from 'src/types/layers/BesoinsEnChaleur';
import { CommuneFortPotentielPourCreationReseauxChaleur } from 'src/types/layers/CommuneFortPotentielPourCreationReseauxChaleur';
import {
Expand Down Expand Up @@ -33,6 +35,8 @@ export const layersWithDynamicContentPopup = [
'besoinsEnFroid',
'besoinsEnChaleurIndustrieCommunes',
'communesFortPotentielPourCreationReseauxChaleur',
'batimentsRaccordesReseauxChaleur',
'batimentsRaccordesReseauxFroid',
] as const satisfies ReadonlyArray<LayerId>;

export function isDynamicPopupContent(content: any): content is DynamicPopupContentType {
Expand All @@ -46,7 +50,8 @@ export type DynamicPopupContentType =
| ENRRMobilisablePopupContentType
| BesoinsEnChaleurPopupContentType
| BesoinsEnChaleurIndustrieCommunesPopupContentType
| CommuneFortPotentielPourCreationReseauxChaleurPopupContentType;
| CommuneFortPotentielPourCreationReseauxChaleurPopupContentType
| BatimentRaccordeReseauxChaleurFroidPopupContentType;

type BesoinsEnChaleurPopupContentType = {
type: 'besoinsEnChaleur' | 'besoinsEnFroid';
Expand All @@ -63,6 +68,11 @@ type CommuneFortPotentielPourCreationReseauxChaleurPopupContentType = {
properties: CommuneFortPotentielPourCreationReseauxChaleur;
};

type BatimentRaccordeReseauxChaleurFroidPopupContentType = {
type: 'batimentsRaccordesReseauxChaleur' | 'batimentsRaccordesReseauxFroid';
properties: BatimentRaccordeReseauxChaleurFroid;
};

type ZonePotentielChaudPopupContentType = {
type: 'zonesPotentielChaud' | 'zonesPotentielFortChaud';
properties: ZonePotentielChaud;
Expand Down Expand Up @@ -138,8 +148,11 @@ const DynamicPopupContent = ({ content }: { content: DynamicPopupContentType })
return (
<CommuneFortPotentielPourCreationReseauxChaleurPopupContent communeFortPotentielPourCreationReseauxChaleur={content.properties} />
);
case 'batimentsRaccordesReseauxChaleur':
case 'batimentsRaccordesReseauxFroid':
return <BatimentRaccordeReseauxChaleurFroidPopupContent batimentRaccordeReseauxChaleurFroid={content.properties} />;
default:
throw new Error('not implemented');
throw new Error(`popup type '${(content as any).type}' not implemented`);
}
};

Expand Down Expand Up @@ -294,7 +307,7 @@ const ENRRMobilisableUniteDIncinerationPopupContent = ({ uniteDIncineration }: {

interface PopupPropertyProps<T> {
label: string;
value: T;
value: T | undefined;
unit?: string; // overridden by the formatter if present
formatter?: (value: T) => string | ReactElement;
}
Expand Down Expand Up @@ -370,3 +383,35 @@ const CommuneFortPotentielPourCreationReseauxChaleurPopupContent = ({
</section>
);
};

const secteurBatimentRaccordeToLabels = {
A: 'Agriculture',
I: 'Industrie',
R: 'Résidentiel',
T: 'Tertiaire',
};

const BatimentRaccordeReseauxChaleurFroidPopupContent = ({
batimentRaccordeReseauxChaleurFroid,
}: {
batimentRaccordeReseauxChaleurFroid: BatimentRaccordeReseauxChaleurFroid;
}) => {
return (
<section>
{/* TODO froid ou chaud selon filiere */}
<PopupTitle className="fr-mr-3w">{batimentRaccordeReseauxChaleurFroid.adresse}</PopupTitle>
<strong>Identifiant du réseau&nbsp;:</strong>&nbsp;
<Link href={`/reseaux/${batimentRaccordeReseauxChaleurFroid.id_reseau}`} isExternal>
{batimentRaccordeReseauxChaleurFroid.id_reseau}
</Link>
<br />
<PopupProperty
label={`Consommation de ${batimentRaccordeReseauxChaleurFroid.filiere === 'C' ? 'chaleur' : 'froid'}`}
value={batimentRaccordeReseauxChaleurFroid.conso}
formatter={formatMWh}
/>
<PopupProperty label="Secteur" value={secteurBatimentRaccordeToLabels[batimentRaccordeReseauxChaleurFroid.code_grand_secteur]} />
<PopupProperty label="Source" value="SDES pour 2023" />
</section>
);
};
48 changes: 41 additions & 7 deletions src/components/Map/components/MapLegendReseaux.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ export const mapLegendFeatures = [
'reseauxDeFroid',
'reseauxEnConstruction',
'zonesDeDeveloppementPrioritaire',
'batimentsRaccordes',
'batimentsRaccordesReseauxChaleur',
'batimentsRaccordesReseauxFroid',
] as const;

export type MapLegendFeature = (typeof mapLegendFeatures)[number];
Expand Down Expand Up @@ -223,14 +224,14 @@ const MapLegendReseaux: React.FC<SimpleMapLegendProps> = ({ filtersVisible, setF
</Box>
)}

{enabledFeatures.includes('batimentsRaccordes') && (
{enabledFeatures.includes('batimentsRaccordesReseauxChaleur') && (
<>
<Box display="flex">
<SingleCheckbox
name="batimentsRaccordes"
checked={mapConfiguration.batimentsRaccordes}
onChange={() => toggleLayer('batimentsRaccordes')}
trackingEvent="Carto|Bâtiments raccordés"
name="batimentsRaccordesReseauxChaleur"
checked={mapConfiguration.batimentsRaccordesReseauxChaleur}
onChange={() => toggleLayer('batimentsRaccordesReseauxChaleur')}
trackingEvent="Carto|Bâtiments raccordés réseau chaleur"
/>

<Box
Expand All @@ -244,7 +245,7 @@ const MapLegendReseaux: React.FC<SimpleMapLegendProps> = ({ filtersVisible, setF

<Text
as="label"
htmlFor="batimentsRaccordes"
htmlFor="batimentsRaccordesReseauxChaleur"
fontSize="14px"
lineHeight="18px"
className="fr-col"
Expand Down Expand Up @@ -281,6 +282,39 @@ const MapLegendReseaux: React.FC<SimpleMapLegendProps> = ({ filtersVisible, setF
</Box>
</>
)}
{enabledFeatures.includes('batimentsRaccordesReseauxFroid') && (
<>
<Box display="flex">
<SingleCheckbox
name="batimentsRaccordesReseauxFroid"
checked={mapConfiguration.batimentsRaccordesReseauxFroid}
onChange={() => toggleLayer('batimentsRaccordesReseauxFroid')}
trackingEvent="Carto|Bâtiments raccordés réseau froid"
/>

<Box
backgroundColor={themeDefHeatNetwork.cold.color}
opacity={batimentsRaccordesLayerMaxOpacity}
height="16px"
width="16px"
mt="1v"
mr="3v"
/>

<Text
as="label"
htmlFor="batimentsRaccordesReseauxFroid"
fontSize="14px"
lineHeight="18px"
className="fr-col"
cursor="pointer"
style={{ marginTop: '2px' }}
>
Bâtiments raccordés à un réseau de froid
</Text>
</Box>
</>
)}

<Box mt="4w" display="flex" flexDirection="column" alignItems="stretch" justifyContent="center" gap="8px">
<Link
Expand Down
3 changes: 2 additions & 1 deletion src/components/Map/map-hover.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,8 @@ const clickEvents: {
{ layer: 'communesFortPotentielPourCreationReseauxChaleur', key: '*' },
{ layer: 'consommationsGaz', key: 'consommation' },
{ layer: 'energy', key: 'energy' },
{ layer: 'batimentsRaccordes', key: 'raccordement' },
{ layer: 'batimentsRaccordesReseauxChaleur', key: '*' },
{ layer: 'batimentsRaccordesReseauxFroid', key: '*' },
{
layer: 'enrrMobilisables-friches',
key: 'enrrMobilisables-friche',
Expand Down
74 changes: 56 additions & 18 deletions src/components/Map/map-layers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -361,7 +361,8 @@ export type LayerId =
| 'demandesEligibilite'
| 'energy'
| 'consommationsGaz'
| 'batimentsRaccordes'
| 'batimentsRaccordesReseauxChaleur'
| 'batimentsRaccordesReseauxFroid'
| 'enrrMobilisables-datacenter'
| 'enrrMobilisables-industrie'
| 'enrrMobilisables-installations-electrogenes'
Expand Down Expand Up @@ -749,18 +750,19 @@ export function buildMapLayers(config: MapConfiguration): MapSourceLayersSpecifi
// --- Raccordements ---
// ---------------------
{
sourceId: 'raccordements',
sourceId: 'batimentsRaccordesReseauxChaleurFroid',
source: {
type: 'vector',
tiles: [`${location.origin}/api/map/raccordements/{z}/{x}/{y}`],
maxzoom: tileSourcesMaxZoom,
tiles: [`${location.origin}/api/map/batimentsRaccordesReseauxChaleurFroid/{z}/{x}/{y}`],
minzoom: 9,
maxzoom: 9,
},
layers: [
{
id: 'batimentsRaccordes',
source: 'raccordements',
'source-layer': 'raccordements',
minzoom: intermediateTileLayersMinZoom,
id: 'batimentsRaccordesReseauxChaleur',
source: 'batimentsRaccordesReseauxChaleurFroid',
'source-layer': 'batiments_raccordes_reseaux_chaleur',
minzoom: 9,
type: 'symbol',
layout: {
'icon-image': 'square',
Expand All @@ -769,19 +771,54 @@ export function buildMapLayers(config: MapConfiguration): MapSourceLayersSpecifi
},
paint: {
'icon-color': themeDefHeatNetwork.classed.color,
'icon-opacity': [
'interpolate',
['linear'],
['zoom'],
intermediateTileLayersMinZoom + 0.2,
0,
intermediateTileLayersMinZoom + 0.5 + 1,
batimentsRaccordesLayerMaxOpacity,
],
'icon-opacity': ['interpolate', ['linear'], ['zoom'], 9 + 0.2, 0, 9 + 0.5 + 1, batimentsRaccordesLayerMaxOpacity],
},
},
{
id: 'batimentsRaccordesReseauxFroid',
source: 'batimentsRaccordesReseauxChaleurFroid',
'source-layer': 'batiments_raccordes_reseaux_froid',
minzoom: 9,
type: 'symbol',
layout: {
'icon-image': 'square',
'icon-overlap': 'always',
'icon-size': 0.5,
},
paint: {
'icon-color': themeDefHeatNetwork.cold.color,
'icon-opacity': ['interpolate', ['linear'], ['zoom'], 9 + 0.2, 0, 9 + 0.5 + 1, batimentsRaccordesLayerMaxOpacity],
},
},
],
},
// {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A garder?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Non pas du tout merci !

// sourceId: 'batimentsRaccordesReseauxFroid',
// source: {
// type: 'vector',
// tiles: [`${location.origin}/api/map/batimentsRaccordesReseauxFroid/{z}/{x}/{y}`],
// minzoom: 9,
// maxzoom: 12,
// },
// layers: [
// {
// id: 'batimentsRaccordesReseauxFroid',
// source: 'batimentsRaccordesReseauxFroid',
// 'source-layer': 'layer',
// minzoom: 9,
// type: 'symbol',
// layout: {
// 'icon-image': 'square',
// 'icon-overlap': 'always',
// 'icon-size': 0.5,
// },
// paint: {
// 'icon-color': themeDefHeatNetwork.classed.color,
// 'icon-opacity': ['interpolate', ['linear'], ['zoom'], 9 + 0.2, 0, 9 + 0.5 + 1, batimentsRaccordesLayerMaxOpacity],
// },
// },
// ],
// },

// --------------
// --- Energy ---
Expand Down Expand Up @@ -1174,7 +1211,8 @@ export function applyMapConfigurationToLayers(map: FCUMap, config: MapConfigurat
setLayerVisibility('consommationsGaz', config.consommationsGaz.show);
setLayerVisibility('reseauxDeChaleur-avec-trace', config.reseauxDeChaleur.show);
setLayerVisibility('reseauxDeChaleur-sans-trace', config.reseauxDeChaleur.show);
setLayerVisibility('batimentsRaccordes', config.batimentsRaccordes);
setLayerVisibility('batimentsRaccordesReseauxChaleur', config.batimentsRaccordesReseauxChaleur);
setLayerVisibility('batimentsRaccordesReseauxFroid', config.batimentsRaccordesReseauxFroid);
setLayerVisibility('zonesDeDeveloppementPrioritaire', config.zonesDeDeveloppementPrioritaire);
setLayerVisibility(
'enrrMobilisables-datacenter',
Expand Down
3 changes: 2 additions & 1 deletion src/pages/carte.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ export const layerURLKeysToMapConfigPath = {
consommationsGaz: 'consommationsGaz.show',
batimentsGazCollectif: 'batimentsGazCollectif.show',
batimentsFioulCollectif: 'batimentsFioulCollectif.show',
batimentsRaccordes: 'batimentsRaccordes',
batimentsRaccordesReseauxChaleur: 'batimentsRaccordesReseauxChaleur',
batimentsRaccordesReseauxFroid: 'batimentsRaccordesReseauxFroid',
zonesOpportunite: 'zonesOpportunite.show',
enrrMobilisablesChaleurFatale: 'enrrMobilisablesChaleurFatale.show',
enrrMobilisablesSolaireThermique: 'enrrMobilisablesSolaireThermique.show',
Expand Down
3 changes: 2 additions & 1 deletion src/pages/map.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ const legendURLKeyToLegendFeature: Record<LegendURLKey | string, MapLegendFeatur
futur_reseau: 'reseauxEnConstruction',
reseau_froid: 'reseauxDeFroid',
pdp: 'zonesDeDeveloppementPrioritaire',
raccordements: 'batimentsRaccordes',
raccordementsChaud: 'batimentsRaccordesReseauxChaleur',
raccordementsFroid: 'batimentsRaccordesReseauxFroid',
};

const MapPage = () => {
Expand Down
6 changes: 4 additions & 2 deletions src/services/Map/map-configuration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,8 @@ export type MapConfiguration = {
show: boolean;
interval: Interval;
};
batimentsRaccordes: boolean;
batimentsRaccordesReseauxChaleur: boolean;
batimentsRaccordesReseauxFroid: boolean;
enrrMobilisablesChaleurFatale: {
show: boolean;
showUnitesDIncineration: boolean;
Expand Down Expand Up @@ -178,7 +179,8 @@ export const emptyMapConfiguration: EmptyMapConfiguration = {
show: false,
interval: [50, Number.MAX_VALUE],
},
batimentsRaccordes: false,
batimentsRaccordesReseauxChaleur: false,
batimentsRaccordesReseauxFroid: false,
enrrMobilisablesChaleurFatale: {
show: false,
showDatacenters: true,
Expand Down
14 changes: 10 additions & 4 deletions src/services/analytics.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,11 +233,17 @@ const trackingEvents = {
'Carto|Bâtiments au fioul collectif|Désactive': {
matomo: ['Carto', 'Bâtiments au fioul collectif', 'Désactive'],
},
'Carto|Bâtiments raccordés|Active': {
matomo: ['Carto', 'Bâtiments raccordés', 'Active'],
'Carto|Bâtiments raccordés réseau chaleur|Active': {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Faut il prevenir l'équipe que l'event va changer?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤷 Je ne sais pas comment on fait pour versionner / suivre ça. Je vais poser la question à Florence pour voir ce qu'elle préfère.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

C'est bon pour Florence.

matomo: ['Carto', 'Bâtiments raccordés réseau chaleur', 'Active'],
},
'Carto|Bâtiments raccordés|Désactive': {
matomo: ['Carto', 'Bâtiments raccordés', 'Désactive'],
'Carto|Bâtiments raccordés réseau chaleur|Désactive': {
matomo: ['Carto', 'Bâtiments raccordés réseau chaleur', 'Désactive'],
},
'Carto|Bâtiments raccordés réseau froid|Active': {
matomo: ['Carto', 'Bâtiments raccordés réseau froid', 'Active'],
},
'Carto|Bâtiments raccordés réseau froid|Désactive': {
matomo: ['Carto', 'Bâtiments raccordés réseau froid', 'Désactive'],
},
'Carto|Besoins en chaleur|Active': {
matomo: ['Carto', 'Besoins en chaleur', 'Active'],
Expand Down
13 changes: 13 additions & 0 deletions src/services/tiles.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,9 @@ export const databaseSourceIds = [
'demands', // demandes d'éligibilité
'gas', // consommations de gaz
'energy', // batiments collectifs chauffés au fioul / gas
// TODO supprimer après déploiement en prod de batimentsRaccordesReseauxChaleurFroid
'raccordements', // bâtiments raccordés
'batimentsRaccordesReseauxChaleurFroid',
'enrrMobilisables',
'enrrMobilisables-friches',
'enrrMobilisables-parkings',
Expand Down Expand Up @@ -98,6 +100,7 @@ export const tilesInfo: Record<DatabaseSourceId, TileInfo> = {
properties: ['Mode de chauffage', 'Adresse', 'Type de chauffage', 'Structure'],
sourceLayer: 'demands',
},
// TODO supprimer après déploiement en prod de batimentsRaccordesReseauxChaleurFroid
raccordements: {
source: 'database',
table: 'batiments_raccordes_rdc',
Expand All @@ -107,6 +110,16 @@ export const tilesInfo: Record<DatabaseSourceId, TileInfo> = {
properties: ['fid', 'ADRESSE', 'CONSO', 'PDL', 'ID'],
sourceLayer: 'raccordements',
},
batimentsRaccordesReseauxChaleurFroid: {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ajouter un lien vers la doc dans Notion

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

source: 'database',
tiles: 'batiments_raccordes_reseaux_chaleur_froid_tiles', // contient 2 layers batiments_raccordes_reseaux_chaleur et batiments_raccordes_reseaux_froid
compressedTiles: true,
table: '', // useless
properties: [], // useless
sourceLayer: '', // useless
id: '', // useless
extraWhere: (query) => query, // useless
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

si useless, pkoi le garder?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A cause du typage de la structure legacy 🙃

},
network: {
source: 'database',
table: 'reseaux_de_chaleur',
Expand Down
Loading
Loading