diff --git a/src/lib/DecompositionTree.svelte b/src/lib/DecompositionTree.svelte new file mode 100644 index 0000000000000000000000000000000000000000..263787f63f305dc25d3b745baa1dec17dfc07b84 --- /dev/null +++ b/src/lib/DecompositionTree.svelte @@ -0,0 +1,18 @@ +<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} diff --git a/src/lib/Waterfall/index.svelte b/src/lib/Waterfall/index.svelte index b71ab5ae7e30baa78bf5abac6e8b02444512d764..1904895fe46512b77e758d83b00b5988c2f67ca3 100644 --- a/src/lib/Waterfall/index.svelte +++ b/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" diff --git a/src/routes/calculations/index.svelte b/src/routes/calculations/index.svelte index 63fc90ff23d81b5ec279d81cfb2fa1f92459b136..5e1c53bbc48b4ed77a1327ca34c38727c9e8df04 100644 --- a/src/routes/calculations/index.svelte +++ b/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 +>