Add year property to histogram pane

As setting the year in the context didn't work

src/lib/components/budget/HistogramPane.svelte

@@ -17,6 +17,7 @@
 
   export let title: string | undefined = undefined
   export let description: string | undefined = undefined
+  export let year: string | undefined = undefined
   export let variablesToDraw: string[] | undefined = undefined
   export let dataJson: ApiResponse | undefined = undefined
 
@@ -299,7 +300,7 @@
       </div>
       <div>
         <h2 class="font-bold text-lg">{title}</h2>
-        <p>{description}</p>
+        <p>{description} {year}</p>
       </div>
     </div>
   {/if}

src/lib/config-csg-activite.ts

 const CSG_TITLE =
   "Recettes de CSG des revenus d'activité du secteur privé/public"
 
+const CSG_DESCRIPTION = "Montants estimés pour l'année"
+
 const HISTOGRAM_VARIABLES_TO_SUM = [
   "csg_imposable_salaire",
   "csg_deductible_salaire",
@@ -25,6 +27,7 @@ const API_QUANTILES_COMPARE_VARIABLES: string[] = [
 
 export {
   CSG_TITLE,
+  CSG_DESCRIPTION,
   HISTOGRAM_VARIABLES_TO_SUM,
   API_OUTPUT_VARIABLES,
   API_QUANTILES_BASE_VARIABLES,

src/routes/index.svelte

@@ -5,36 +5,40 @@
   import { session } from "$app/stores"
 
   import NavBar from "$lib/components/NavBar.svelte"
+  import ConnectionPane from "$lib/components/budget/ConnectionPane.svelte"
+  import HistogramPane from "$lib/components/budget/HistogramPane.svelte"
+  import LawEdit from "$lib/components/budget/LawEdit.svelte"
+  import ResetButton from "$lib/components/transverse_pages/ResetButton.svelte"
+
   import { calculateBudget } from "$lib/components/budget/api-budget"
   import type { ApiResponse } from "$lib/components/budget/api-budget"
+
   import {
     CSG_TITLE,
+    CSG_DESCRIPTION,
     HISTOGRAM_VARIABLES_TO_SUM,
     API_OUTPUT_VARIABLES,
     API_QUANTILES_BASE_VARIABLES,
     API_QUANTILES_COMPARE_VARIABLES,
   } from "$lib/config-csg-activite"
-  import ConnectionPane from "$lib/components/budget/ConnectionPane.svelte"
-  import HistogramPane from "$lib/components/budget/HistogramPane.svelte"
-  import LawEdit from "$lib/components/budget/LawEdit.svelte"
-  import ResetButton from "$lib/components/transverse_pages/ResetButton.svelte"
-
   import type { Reform } from "$lib/reforms"
 
-  // Budget Web API configuration from .env
-
+  // CONFIGURATION - BUDGET WEB API (.env)
   const budgetConfig = $session.budget
+
+  // → BASE
   const API_BUDGET_STATE_SIMULATION_URL =
     budgetConfig.apiBudgetUrl + budgetConfig.apiBudgetEndpointName
   const CALCULATION_BASE_YEAR = budgetConfig.calculationBaseYear
 
+  // → PLF
   const CALCULATION_PLF_YEAR = budgetConfig.calculationPlfYear
   // undefined CALCULATION_PLF_YEAR should never happen as the variable is compulsory in config
   // zero CALCULATION_PLF_YEAR happens when there is no value or when the value is an empty string
   const ACTIVATE_PLF =
     CALCULATION_PLF_YEAR !== undefined && CALCULATION_PLF_YEAR !== 0
 
-  // Budget UI configuration
+  // CONFIGURATION - BUDGET UI
 
   const TITLE_CONNECTION_BUTTON = "Budget CSG"
   const TITLE_LINK_CONNECTION_BUTTON =
@@ -46,7 +50,6 @@
     ? CALCULATION_PLF_YEAR
     : CALCULATION_BASE_YEAR
 
-  const CSG_DESCRIPTION = "Montants estimés pour l'année " + YEAR_ESTIMATION
   const CSG_GRAPH_TITLE =
     "Périmètre actuel du simulateur par rapport à la CSG totale"
 
@@ -58,8 +61,8 @@
   $: console.log("🔶 Réforme définie :", $reform)
 
   let csgResponseJson: ApiResponse | undefined = undefined
-
   let updatingHistogram = false
+
   function resetOnClick(): void {
     $reform = {}
     csgResponseJson = undefined
@@ -158,6 +161,7 @@
           <HistogramPane
             title={CSG_TITLE}
             description={CSG_DESCRIPTION}
+            year={YEAR_ESTIMATION}
             dataJson={csgResponseJson}
             variablesToDraw={HISTOGRAM_VARIABLES_TO_SUM}
             {updatingHistogram}