Fix diverging year-bars chart: bars were pinned to the top, not the zero line
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>
This commit is contained in:
@@ -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>' +
|
||||
|
||||
Reference in New Issue
Block a user