From bd251d0a5e2f2a15a9d7ed5be3ef8621bc7b0262 Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Sun, 6 Sep 2026 18:14:00 +0200
Subject: [PATCH] Fix diverging year-bars chart: bars were pinned to the top,
 not the zero line
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause: .figli-year-bar was position: relative with an explicit
height (set inline by barStyle()), which opts it out of the flex
container's default stretch alignment -- so it rendered flex-start
(top) aligned first, and the top/bottom: 50% from barStyle() only
*offset* that already-top position instead of anchoring an edge to the
middle. Visibly: green (positive) bars piling up near the top instead
of growing upward from the zero line.

Fixed by wrapping each bar in a .figli-year-bar-slot that stays in the
normal flex flow (so horizontal side-by-side layout for two bars/year
still works) and giving the bar itself position: absolute, anchored
against the slot's full-height box -- that's what makes a 50% top/
bottom offset actually mean "the zero line" instead of "50% further
down/up from wherever flex already put it."

Verified geometrically in-browser: bars now straddle the track's
midpoint and extend outward in the correct direction (positive up,
negative down) on both "Entrées vs versements par année" and
"Évolution du solde".

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../figli_compta_ledger/css/dashboard.css      | 18 +++++++++++++++++-
 .../figli_compta_ledger/js/dashboard-compte.js |  4 +++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/web/modules/custom/figli_compta_ledger/css/dashboard.css b/web/modules/custom/figli_compta_ledger/css/dashboard.css
index 3e511d2..e68991d 100644
--- a/web/modules/custom/figli_compta_ledger/css/dashboard.css
+++ b/web/modules/custom/figli_compta_ledger/css/dashboard.css
@@ -178,9 +178,25 @@ html.gin--dark-mode #figli-dashboard-app {
   justify-content: center;
   gap: 2px;
 }
-#figli-dashboard-app .figli-year-bar {
+/* Slot stays in normal flex flow (so justify-content/gap on
+   .figli-year-bars above still lays several bars out side by side) and
+   gives the bar a definite height (100% of the track) to anchor
+   against. The bar itself must be position: absolute, not relative --
+   with relative, an explicit height opts it out of the flex stretch
+   default, so it renders flex-start (top) aligned *first*, and the
+   top/bottom: 50% from barStyle() only *offsets* that already-top
+   position instead of anchoring the edge to the middle -- the visible
+   bug this replaces (bars pinned near the top instead of growing from
+   the zero line). */
+#figli-dashboard-app .figli-year-bar-slot {
   position: relative;
   width: 0.9rem;
+  height: 100%;
+}
+#figli-dashboard-app .figli-year-bar {
+  position: absolute;
+  left: 0;
+  right: 0;
   min-height: 2px;
   border-radius: 2px;
 }
diff --git a/web/modules/custom/figli_compta_ledger/js/dashboard-compte.js b/web/modules/custom/figli_compta_ledger/js/dashboard-compte.js
index e893bba..cb2506e 100644
--- a/web/modules/custom/figli_compta_ledger/js/dashboard-compte.js
+++ b/web/modules/custom/figli_compta_ledger/js/dashboard-compte.js
@@ -171,7 +171,9 @@
       '<div class="figli-year-col" v-for="y in years" :key="y.label">' +
       '<div class="figli-year-track">' +
       '<div class="figli-year-bars">' +
-      '<div class="figli-year-bar" v-for="(bar, i) in y.bars" :key="i" :style="barStyle(bar)" :title="bar.title + \' : \' + formatValue(bar.value)"></div>' +
+      '<div class="figli-year-bar-slot" v-for="(bar, i) in y.bars" :key="i">' +
+      '<div class="figli-year-bar" :style="barStyle(bar)" :title="bar.title + \' : \' + formatValue(bar.value)"></div>' +
+      '</div>' +
       '</div>' +
       '</div>' +
       '<div class="figli-year-label">{{ y.label }}</div>' +