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:
@@ -178,9 +178,25 @@ html.gin--dark-mode #figli-dashboard-app {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 2px;
|
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;
|
position: relative;
|
||||||
width: 0.9rem;
|
width: 0.9rem;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
#figli-dashboard-app .figli-year-bar {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
min-height: 2px;
|
min-height: 2px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -171,7 +171,9 @@
|
|||||||
'<div class="figli-year-col" v-for="y in years" :key="y.label">' +
|
'<div class="figli-year-col" v-for="y in years" :key="y.label">' +
|
||||||
'<div class="figli-year-track">' +
|
'<div class="figli-year-track">' +
|
||||||
'<div class="figli-year-bars">' +
|
'<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>' +
|
'</div>' +
|
||||||
'<div class="figli-year-label">{{ y.label }}</div>' +
|
'<div class="figli-year-label">{{ y.label }}</div>' +
|
||||||
|
|||||||
Reference in New Issue
Block a user