Add decomposition tree with amounts. Add toggle to show null values.

src/lib/DecompositionTree.svelte

+<script lang="ts">
+  import type { Decomposition } from "$lib/decompositions"
+
+  export let decomposition: Decomposition
+  export let showNulls: boolean
+</script>
+
+<span>{Math.round(decomposition.delta)} €</span>
+<span>{decomposition.short_name}</span>
+{#if decomposition.children !== undefined}
+  <ul class="list-disc list-inside ml-4">
+    {#each decomposition.children as child}
+      {#if showNulls || child.delta !== 0}
+        <li><svelte:self decomposition={child} /></li>
+      {/if}
+    {/each}
+  </ul>
+{/if}

src/lib/Waterfall/index.svelte

@@ -9,11 +9,12 @@
   import Column from "./Column.svelte"
 
   export let decomposition: Decomposition
+  export let showNulls: boolean
 
   $: data = [...walkDecomposition(decomposition, true)]
 
   $: xDomain = data
-    .filter(({ delta }) => delta !== 0)
+    .filter(({ delta }) => showNulls || delta !== 0)
     .map((node) => node.short_name)
 
   $: yDomain = computeYDomain(data)
@@ -36,7 +37,7 @@
 </script>
 
 {#if xDomain.length > 0}
-  <div class="h-64 max-w-2xl mx-auto">
+  <div class="h-64 w-full mx-auto">
     <LayerCake
       {data}
       x="short_name"

src/routes/calculations/index.svelte

@@ -5,6 +5,7 @@
   import { session } from "$app/stores"
   import type { Decomposition } from "$lib/decompositions"
   import { decomposition as decompositionWithoutValue } from "$lib/decompositions"
+  import DecompositionTree from "$lib/DecompositionTree.svelte"
   import type { Situation } from "$lib/situations"
   import TestCaseEdit from "$lib/TestCaseEdit.svelte"
   import Waterfall from "$lib/Waterfall"
@@ -14,6 +15,7 @@
     decompositionWithoutValue as Decomposition,
     deltaByCode,
   )
+  let showNulls = false
   let situation: Situation | undefined = undefined
   let webSocket: Sockette | undefined = undefined
   let webSocketOpen = false
@@ -137,5 +139,14 @@
   <button on:click={submit}>Simuler</button>
 </div>
 
-<Waterfall {decomposition} />
-<!-- <pre>{JSON.stringify(simulation, null, 2)}</pre> -->
+<div class="flex">
+  <div>
+    <DecompositionTree {decomposition} {showNulls} />
+  </div>
+
+  <Waterfall {decomposition} {showNulls} />
+</div>
+
+<label
+  ><input bind:checked={showNulls} type="checkbox" /> Montrer les montants nuls</label
+>