From 2449740a74295ea761a896eff868cfddf78cc663 Mon Sep 17 00:00:00 2001
From: Emmanuel Raviart <emmanuel@raviart.com>
Date: Thu, 15 Dec 2022 09:43:01 +0100
Subject: [PATCH] Use compact currency formatter to display numbers in Y axis
---
src/lib/components/CsgBudgetView.svelte | 11 ++++++++++-
src/lib/components/IrBudgetView.svelte | 11 ++++++++++-
2 files changed, 20 insertions(+), 2 deletions(-)
diff --git a/src/lib/components/CsgBudgetView.svelte b/src/lib/components/CsgBudgetView.svelte
index a5f5cbe21..e93db9f2c 100644
--- a/src/lib/components/CsgBudgetView.svelte
+++ b/src/lib/components/CsgBudgetView.svelte
@@ -11,6 +11,13 @@
export let budgetSimulation: BudgetSimulation
+ const euroAmountCompactFormatter = new Intl.NumberFormat("fr-FR", {
+ currency: "EUR",
+ maximumFractionDigits: 2,
+ minimumFractionDigits: 0,
+ notation: "compact", // Example: 3,2 Md €
+ style: "currency",
+ })
const euroAmountFormatter = new Intl.NumberFormat("fr-FR", {
currency: "EUR",
maximumFractionDigits: 0,
@@ -108,7 +115,9 @@
y="assiette_csg_abattue_sum"
>
<Svg>
- <AxisY />
+ <AxisY
+ formatTick={(value) => euroAmountCompactFormatter.format(value)}
+ />
<Column />
<Column
fill="red"
diff --git a/src/lib/components/IrBudgetView.svelte b/src/lib/components/IrBudgetView.svelte
index 25dd0768e..eb68367a5 100644
--- a/src/lib/components/IrBudgetView.svelte
+++ b/src/lib/components/IrBudgetView.svelte
@@ -11,6 +11,13 @@
export let budgetSimulation: BudgetSimulation
+ const euroAmountCompactFormatter = new Intl.NumberFormat("fr-FR", {
+ currency: "EUR",
+ maximumFractionDigits: 2,
+ minimumFractionDigits: 0,
+ notation: "compact", // Example: 3,2 Md €
+ style: "currency",
+ })
const euroAmountFormatter = new Intl.NumberFormat("fr-FR", {
currency: "EUR",
maximumFractionDigits: 0,
@@ -100,7 +107,9 @@
y="rfr_sum"
>
<Svg>
- <AxisY />
+ <AxisY
+ formatTick={(value) => euroAmountCompactFormatter.format(value)}
+ />
<Column />
<Column
fill="red"
--
GitLab