Chart logement vacant comparison gauge (graph 2)

assets/scripts/components/pages/LogementsVacants.tsx

@@ -18,6 +18,7 @@ const LogementsVacants: React.FC<{ endpoint: string }> = ({ endpoint }) => {
 
     useHighcharts([
         'logements_vacants_comparison_chart',
+        'logements_vacants_comparison_gauge_chart',
     ], isLoading);
 
     if (isLoading) return <Loader />;

assets/scripts/hooks/useHighcharts.ts

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import Highcharts from 'highcharts';
 import highchartsExporting from 'highcharts/modules/exporting';
 import exportDataModule from 'highcharts/modules/export-data';
+import HighchartsMore from 'highcharts/highcharts-more';
 import highchartsAccessibility from 'highcharts/modules/accessibility';
 import DependencyWheel from 'highcharts/modules/dependency-wheel';
 import Sankey from 'highcharts/modules/sankey';
@@ -11,6 +12,7 @@ import Treemap from 'highcharts/modules/treemap'
 import '../highcharts/lineargauge.js';
 
 highchartsExporting(Highcharts);
+HighchartsMore(Highcharts);
 exportDataModule(Highcharts);
 highchartsAccessibility(Highcharts);
 Sankey(Highcharts);

project/charts/__init__.py

@@ -50,6 +50,7 @@
     "PopulationConsoProgressionChart",
     "PopulationConsoComparisonChart",
     "LogementVacantComparisonChart",
+    "LogementVacantComparisonGaugeChart",
 ]
 
 from .AnnualArtifChart import AnnualArtifChart
@@ -120,6 +121,9 @@
 )
 from .ObjectiveChart import ObjectiveChart, ObjectiveChartExport
 from .urbanisme.LogementVacantComparisonChart import LogementVacantComparisonChart
+from .urbanisme.LogementVacantComparisonGaugeChart import (
+    LogementVacantComparisonGaugeChart,
+)
 from .UsageChangeWheelChart import UsageChangeWheelChart
 from .UsagePieChart import UsagePieChart, UsagePieChartExport
 from .UsageProgressionChart import UsageProgressionChart, UsageProgressionChartExport

project/charts/urbanisme/LogementVacantComparisonGaugeChart.py

@@ -0,0 +1,117 @@
+from project.charts.base_project_chart import ProjectChart
+from public_data.domain.containers import PublicDataContainer
+
+
+class LogementVacantComparisonGaugeChart(ProjectChart):
+    """
+    Graphique en barre de comparaison du nombre de logements vacants et de noueaux logements.
+    """
+
+    def _get_series(self):
+        """
+        Génère et retourne la liste des séries à utiliser dans le graphique.
+        """
+
+        autorisation_logement_progression = (
+            PublicDataContainer.autorisation_logement_progression_service().get_by_land(
+                land=self.project.land_proxy,
+                start_date=self.project.analyse_start_date,
+                end_date=self.project.analyse_end_date,
+            )
+        )
+
+        # On récupère la dernière année de données disponible sur la période
+        last_year_autorisation_logement_progression = autorisation_logement_progression.autorisation_logement[-1]
+
+        # Stocker la valeur réelle
+        raw_value = round(last_year_autorisation_logement_progression.percent_autorises_on_vacants_parc_general, 0)
+
+        # Limiter l'aiguille à 100 mais afficher ">100%" si la valeur est supérieure
+        display_value = ">100%" if raw_value > 100 else f"{raw_value}%"
+        needle_value = min(raw_value, 100)
+
+        return [
+            {
+                "name": "Rapport entre logements vacants et nouveaux logements autorisés (2023)",
+                "data": [needle_value],
+                "dataLabels": {
+                    "format": display_value,
+                    "borderWidth": 0,
+                    "style": {"fontSize": "16px"},
+                },
+                "dial": {
+                    "radius": "90%",
+                    "backgroundColor": "black",
+                    "baseWidth": 12,
+                    "baseLength": "0%",
+                    "rearLength": "0%",
+                },
+                "pivot": {"backgroundColor": "black", "radius": 6},
+            }
+        ]
+
+    @property
+    def param(self):
+        return super().param | {
+            "chart": {"type": "gauge"},
+            "title": {
+                "text": (
+                    "Rapport entre logements vacants et nouveaux "
+                    f"logements autorisés ({self.project.analyse_end_date})"
+                ),
+            },
+            "xAxis": {
+                "categories": [
+                    f"Nombre de nouveaux logements autorisés ({self.project.analyse_end_date})",
+                    f"Nombre de logements en vacance structurelle ({self.project.analyse_end_date})",
+                ]
+            },
+            "yAxis": {
+                "min": 0,
+                "max": 100,  # L'aiguille s'arrête à 100
+                "tickPosition": "inside",
+                "tickColor": "#FFFFFF",
+                "tickLength": 20,
+                "tickWidth": 0,
+                "minorTickInterval": None,
+                "labels": {"distance": 20, "style": {"fontSize": "14px"}},
+                "lineWidth": 0,
+                "plotBands": [
+                    {
+                        "from": 0,
+                        "to": 20,
+                        "color": "#44D492",
+                        "thickness": 60,
+                    },
+                    {
+                        "from": 20,
+                        "to": 40,
+                        "color": "#88F7E2",
+                        "thickness": 60,
+                    },
+                    {"from": 40, "to": 60, "color": "#F6EB67", "thickness": 60},
+                    {"from": 60, "to": 80, "color": "#FFA15C", "thickness": 60},
+                    {
+                        "from": 80,
+                        "to": 100,
+                        "color": "#FA233E",
+                        "thickness": 60,
+                    },
+                ],
+            },
+            "tooltip": {
+                "enabled": False,
+            },
+            "pane": {
+                "startAngle": -90,
+                "endAngle": 89.9,
+                "background": None,
+                "center": ["50%", "75%"],
+                "size": "110%",
+            },
+            "series": self._get_series(),
+        }
+
+    # To remove after refactoring
+    def add_series(self):
+        pass

project/templates/project/components/dashboard/logements_vacants.html

@@ -2,7 +2,23 @@
 {% load sri %}
 
 <div class="fr-mt-5w">
-    <h3 id="conso-annuelle">Consommation d'espaces NAF annuelle sur le territoire</h3>
+    <h3 id="conso-annuelle"></h3>
+
+    <div class="fr-grid-row fr-grid-row--gutters">
+        <div class="fr-col-12">
+            <div class="bg-white fr-p-2w h-100">
+                <div class="d-flex justify-content-end align-items-center fr-mb-2w">
+                    {% include "project/components/widgets/chart_buttons.html" with chart="logements_vacants_comparison_gauge_chart" show_fullscreen=True %}
+                    {% comment %} <button class="fr-btn fr-icon-question-line fr-btn--tertiary fr-btn--sm" data-bs-toggle="modal" data-bs-target="#consoAnnuelle" data-toggle="tooltip" title="Astuces pour lire le graphique"></button> {% endcomment %}
+                </div>
+                <div id="logements_vacants_comparison_gauge_chart"></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="fr-mt-5w">
+    <h3 id="conso-annuelle"></h3>
 
     <div class="fr-grid-row fr-grid-row--gutters">
         <div class="fr-col-12">
@@ -18,3 +34,4 @@ <h3 id="conso-annuelle">Consommation d'espaces NAF annuelle sur le territoire</h
 </div>
 
 {% display_chart_data 'logements_vacants_comparison_chart' logements_vacants_comparison_chart CSP_NONCE %}
+{% display_chart_data 'logements_vacants_comparison_gauge_chart' logements_vacants_comparison_gauge_chart CSP_NONCE %}

project/views/report.py

@@ -304,6 +304,7 @@ def get_context_data(self, **kwargs):
             {
                 "diagnostic": project,
                 "logements_vacants_comparison_chart": charts.LogementVacantComparisonChart(project),
+                "logements_vacants_comparison_gauge_chart": charts.LogementVacantComparisonGaugeChart(project),
             }
         )
         return super().get_context_data(**kwargs)

public_data/domain/urbanisme/autorisation_logement/entity/AnnualAutorisationLogement.py

@@ -6,3 +6,4 @@ class AnnualAutorisationLogement:
     year: int
     logements_autorises: int
     percent_autorises_on_parc_general: float
+    percent_autorises_on_vacants_parc_general: float

public_data/infra/urbanisme/autorisation_logement/progression/AutorisationLogementProgressionService.py

@@ -31,6 +31,7 @@ def get_by_land(
                     year=item.year,
                     logements_autorises=item.logements_autorises,
                     percent_autorises_on_parc_general=item.percent_autorises_on_parc_general,
+                    percent_autorises_on_vacants_parc_general=item.percent_autorises_on_vacants_parc_general,
                 )
                 for item in data
             ],