Extract impact content into dedicated component

src/lib/components/budget/ImpactPane.svelte

+<script lang="ts">
+  import type { ApiResponse } from "$lib/components/budget/api-budget"
+  import HistogramPane from "$lib/components/budget/HistogramPane.svelte"
+
+  const CSG_ACTIVITE_TITLE =
+    "Recettes de CSG des revenus d'activité du secteur privé/public"
+  const CSG_RETRAITE_TITLE =
+    "Recettes de CSG des pensions de retraite du secteur privé/public"
+  const CSG_DESCRIPTION = "Montants estimés pour l'année 2022"
+  const CSG_GRAPH_TITLE =
+    "Périmètre actuel du simulateur par rapport à la CSG totale"
+
+  const HISTOGRAM_VARIABLES_TO_SUM_CSG_ACTIVITE = [
+    "csg_imposable_salaire",
+    "csg_deductible_salaire",
+  ]
+
+  export let csgResponseJson: ApiResponse | undefined = undefined
+  export let updateImpact: boolean = false
+</script>
+
+<section class="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-4 gap-10">
+  <HistogramPane
+    title={CSG_ACTIVITE_TITLE}
+    description={CSG_DESCRIPTION}
+    dataJson={csgResponseJson}
+    variablesToDraw={HISTOGRAM_VARIABLES_TO_SUM_CSG_ACTIVITE}
+    updatingHistogram={updateImpact}
+  />
+  <!-- image CSG -->
+  <div
+    class="text-gray-700 flex-col shadow-md rounded bg-white col-span-2 border-8 border-le-bleu-light"
+  >
+    <div class="bg-le-bleu-light pb-4 pt-1 px-2">
+      <div>
+        <p class="font-bold text-lg">{CSG_GRAPH_TITLE}</p>
+        <p class="text-sm ">
+          Source :
+          <a
+            class="underline  hover:text-le-bleu"
+            href="https://www.securite-sociale.fr/files/live/sites/SSFR/files/medias/CCSS/2021/RAPPORT%20CCSS%20JUIN%202021.pdf#page=47"
+          >
+            Les comptes de la Sécurité sociale : Résultats 2020 et prévisions
+            2021 (juin 2021) - p.47
+          </a>
+        </p>
+      </div>
+    </div>
+    <img
+      class="flex sm:hidden lg:flex 2xl:hidden 3xl:flex object-contain"
+      src="/budget-csg-2020.svg"
+      alt={CSG_GRAPH_TITLE}
+    />
+    <img
+      class="hidden sm:flex lg:hidden 2xl:flex 3xl:hidden object-contain"
+      src="/budget-csg-2020-vertical.svg"
+      alt={CSG_GRAPH_TITLE}
+    />
+  </div>
+
+  <HistogramPane
+    title={CSG_RETRAITE_TITLE}
+    description={CSG_DESCRIPTION}
+    dataJson={csgResponseJson}
+    variablesToDraw={HISTOGRAM_VARIABLES_TO_SUM_CSG_ACTIVITE}
+    {updateImpact}
+  />
+</section>

src/routes/index.svelte

@@ -8,11 +8,12 @@
   import { calculateBudget } from "$lib/components/budget/api-budget"
   import type { ApiResponse } from "$lib/components/budget/api-budget"
   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"
+  import ImpactPane from "$lib/components/budget/ImpactPane.svelte"
 
   // Budget Web API configuration from .env
 
@@ -31,14 +32,6 @@
   const IMPACT_SECTION_TITLE = "Impacts d'une réforme CSG activité"
   const IMPACT_SECTION_SUBTITLE = " sur le budget de la Sécurité sociale "
 
-  const CSG_ACTIVITE_TITLE =
-    "Recettes de CSG des revenus d'activité du secteur privé/public"
-  const CSG_RETRAITE_TITLE =
-    "Recettes de CSG des pensions de retraite du secteur privé/public"
-  const CSG_DESCRIPTION = "Montants estimés pour l'année 2022"
-  const CSG_GRAPH_TITLE =
-    "Périmètre actuel du simulateur par rapport à la CSG totale"
-
   // Reform listening and calculation requests for authorized user
 
   $: user = $session.user
@@ -46,10 +39,6 @@
   const reform = getContext("reform") as Writable<Reform>
   $: console.log("🔶 Réforme définie :", $reform)
 
-  const HISTOGRAM_VARIABLES_TO_SUM_CSG_ACTIVITE = [
-    "csg_imposable_salaire",
-    "csg_deductible_salaire",
-  ]
   const API_OUTPUT_VARIABLES: string[] = [
     "assiette_csg_abattue",
     "assiette_csg_non_abattue",
@@ -161,53 +150,7 @@
 
       <!-- section d'impact -->
       <div class="h-[calc(100vh-16rem)] overflow-y-auto pl-10 pr-6 lg:px-10">
-        <section class="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-4 gap-10">
-          <HistogramPane
-            title={CSG_ACTIVITE_TITLE}
-            description={CSG_DESCRIPTION}
-            dataJson={csgResponseJson}
-            variablesToDraw={HISTOGRAM_VARIABLES_TO_SUM_CSG_ACTIVITE}
-            {updatingHistogram}
-          />
-          <!-- image CSG -->
-          <div
-            class="text-gray-700 flex-col shadow-md rounded bg-white col-span-2 border-8 border-le-bleu-light"
-          >
-            <div class="bg-le-bleu-light pb-4 pt-1 px-2">
-              <div>
-                <p class="font-bold text-lg">{CSG_GRAPH_TITLE}</p>
-                <p class="text-sm ">
-                  Source :
-                  <a
-                    class="underline  hover:text-le-bleu"
-                    href="https://www.securite-sociale.fr/files/live/sites/SSFR/files/medias/CCSS/2021/RAPPORT%20CCSS%20JUIN%202021.pdf#page=47"
-                  >
-                    Les comptes de la Sécurité sociale : Résultats 2020 et
-                    prévisions 2021 (juin 2021) - p.47
-                  </a>
-                </p>
-              </div>
-            </div>
-            <img
-              class="flex sm:hidden lg:flex 2xl:hidden 3xl:flex object-contain"
-              src="/budget-csg-2020.svg"
-              alt={CSG_GRAPH_TITLE}
-            />
-            <img
-              class="hidden sm:flex lg:hidden 2xl:flex 3xl:hidden object-contain"
-              src="/budget-csg-2020-vertical.svg"
-              alt={CSG_GRAPH_TITLE}
-            />
-          </div>
-
-          <HistogramPane
-            title={CSG_RETRAITE_TITLE}
-            description={CSG_DESCRIPTION}
-            dataJson={csgResponseJson}
-            variablesToDraw={HISTOGRAM_VARIABLES_TO_SUM_CSG_ACTIVITE}
-            {updatingHistogram}
-          />
-        </section>
+        <ImpactPane {csgResponseJson} updateImpact={updatingHistogram} />
       </div>
     </div>
   {/if}