Add compact & inline options to ValueChange

src/lib/components/IrBudgetView.svelte

@@ -84,7 +84,8 @@
         title="⚠️ Les dispositifs n'étant pas tous à jour, cette somme est à considérer avec prudence."
       >
         <ValueChange
-          legend={true}
+          compact
+          legend
           unitName="currency-EUR"
           valueByCalculationName={{
             amendment: amendmentStateBudget.irpp,
@@ -139,6 +140,8 @@
               <!-- TODO use M€, etc  -->
               <span class="text-xl font-bold"
                 ><ValueChange
+                  compact
+                  inline
                   unitName="currency-EUR"
                   valueByCalculationName={{
                     amendment: amendmentQuantile.irpp,
@@ -150,6 +153,7 @@
             </p>
             <p class="text-xs text-gray-600">
               Soit <ValueChange
+                inline
                 unitName="/1"
                 valueByCalculationName={{
                   amendment: amendmentQuantile.irpp / amendmentStateBudget.irpp,
@@ -167,6 +171,7 @@
               En moyenne, un foyer de ce décile est prélevé de <span
                 class="text-xl font-bold"
                 ><ValueChange
+                  inline
                   unitName="currency-EUR"
                   valueByCalculationName={{
                     amendment: amendmentQuantile.irpp / amendmentQuantile.count,
@@ -179,6 +184,7 @@
             <p class="text-xs text-gray-600">
               <!-- TODO: Remplacer lawQuantile.rfr par lawQuantile.rfr_moyen (ie lawQuantile.rfr_total / lawQuantile.count ) -->
               Soit <ValueChange
+                inline
                 unitName="/1"
                 valueByCalculationName={{
                   amendment:

src/lib/components/ValueChange.svelte

@@ -2,9 +2,11 @@
   import { valueFormatter } from "$lib/values"
   import type { VariableValueByCalculationName } from "$lib/variables"
 
+  export let compact = false // For example: 1,2 Md €
+  export let inline = false
+  export let legend = false
   export let unitName: string | undefined | null
   export let valueByCalculationName: VariableValueByCalculationName
-  export let legend = false
 
   $: amendmentValue = valueByCalculationName.amendment as number | undefined
 
@@ -19,7 +21,7 @@
         : billValue
       : lawValue
 
-  $: format = valueFormatter(baseValue, unitName)
+  $: format = valueFormatter(baseValue, unitName, compact)
 
   $: amendmentValueFormatted =
     amendmentValue === undefined ? undefined : format(amendmentValue)
@@ -56,39 +58,55 @@
 </script>
 
 {#if showLawValue}
-  <div class="flex flex-col">
-    <div
+  <span class:block={!inline}>
+    <span
       class={showBillValue
         ? "line-through-bill "
         : showAmendmentValue
         ? "line-through-amendment "
         : ""}
+      class:block={!inline}
     >
       {lawValueFormatted}
-    </div>
-    {#if legend}<div class="text-xs font-normal">
+    </span>
+    {#if legend}
+      <span class="text-xs font-normal" class:block={!inline}>
         (Droit&nbsp;en&nbsp;vigueur)
-      </div>{/if}
-  </div>
+      </span>
+    {/if}
+  </span>
 {/if}
 {#if showBillValue}
-  <div>
-    <div
+  <span class:block={!inline}>
+    <span
       class=" text-le-rouge-bill"
+      class:block={!inline}
       class:line-through-amendment={showAmendmentValue}
     >
       {billValueFormatted}
-    </div>
-    {#if legend}<div class="text-xs font-normal text-le-rouge-bill">
+    </span>
+    {#if legend}
+      <span
+        class="text-xs font-normal text-le-rouge-bill"
+        class:block={!inline}
+      >
         (PLF/PLFSS)
-      </div>{/if}
-  </div>
+      </span>
+    {/if}
+  </span>
 {/if}
 {#if showAmendmentValue}
-  <div>
-    <div class="bg-le-jaune px-1 text-black">{amendmentValueFormatted}</div>
-    {#if legend}<div class="text-xs font-normal text-le-jaune-dark">
+  <span class:block={!inline}>
+    <span class="bg-le-jaune px-1 text-black" class:block={!inline}>
+      {amendmentValueFormatted}
+    </span>
+    {#if legend}
+      <span
+        class="text-xs font-normal text-le-jaune-dark"
+        class:block={!inline}
+      >
         (Votre&nbsp;réforme)
-      </div>{/if}
-  </div>
+      </span>
+    {/if}
+  </span>
 {/if}

src/lib/values.ts

@@ -5,6 +5,7 @@ export function formatValue(value: number, unitName?: string): string {
 export function valueFormatter(
   baseValue: unknown,
   unitName?: string | undefined | null,
+  compact: boolean = false,
 ): (value: unknown) => string {
   return baseValue === undefined
     ? ((() => "") as (value: unknown) => string)
@@ -20,7 +21,16 @@ export function valueFormatter(
           style: "percent",
         }).format as (value: unknown) => string)
       : unitName != null && unitName.startsWith("currency-")
-      ? (new Intl.NumberFormat("fr-FR", {
+      ? compact
+        ? (value: unknown): string =>
+            new Intl.NumberFormat("fr-FR", {
+              currency: unitName.replace(/^currency-/, ""),
+              maximumFractionDigits: 2,
+              minimumFractionDigits: 0,
+              notation: "compact", // Example: 3,2 Md €
+              style: "currency",
+            }).format(Math.round(value as number))
+        : (new Intl.NumberFormat("fr-FR", {
             currency: unitName.replace(/^currency-/, ""),
             maximumFractionDigits: 0,
             minimumFractionDigits: 0,