fix(site-finder): visible by-quarter pipeline bars
Bars rendered as ~1-15px because outer flex container had align-items:flex-end which made each column shrink to label height (~15.8px), so bar percentage heights resolved against that instead of the intended 80px container. Switched to align-items:stretch + fixed-pixel bar heights anchored to a 60px area (reserves ~20px for label row). Each column now uses justify-content:flex-end so bars + labels sit at the bottom baseline.
This commit is contained in:
parent
faa99abb94
commit
ca5d0acbff
1 changed files with 15 additions and 5 deletions
|
|
@ -205,16 +205,25 @@ export function Pipeline24moBlock({ data }: Props) {
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "flex-end",
|
alignItems: "stretch",
|
||||||
gap: 4,
|
gap: 4,
|
||||||
height: 80,
|
height: 80,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{data.by_quarter.map((q) => {
|
{data.by_quarter.map((q) => {
|
||||||
const heightPct =
|
// Bar height in pixels of the 60px area above label row
|
||||||
|
// (reserves ~16px for label). Using fixed px avoids the
|
||||||
|
// align-items:flex-end shrink-to-content trap where %-heights
|
||||||
|
// would resolve to the column's content height instead of
|
||||||
|
// the outer 80px container.
|
||||||
|
const BAR_AREA_PX = 60;
|
||||||
|
const barPx =
|
||||||
maxFlatsPerQuarter > 0
|
maxFlatsPerQuarter > 0
|
||||||
? Math.max(6, (q.flats / maxFlatsPerQuarter) * 100)
|
? Math.max(
|
||||||
: 6;
|
4,
|
||||||
|
(q.flats / maxFlatsPerQuarter) * BAR_AREA_PX,
|
||||||
|
)
|
||||||
|
: 4;
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={q.quarter}
|
key={q.quarter}
|
||||||
|
|
@ -222,6 +231,7 @@ export function Pipeline24moBlock({ data }: Props) {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
|
justifyContent: "flex-end",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
gap: 3,
|
gap: 3,
|
||||||
}}
|
}}
|
||||||
|
|
@ -229,7 +239,7 @@ export function Pipeline24moBlock({ data }: Props) {
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: `${heightPct}%`,
|
height: barPx,
|
||||||
background: c.fg,
|
background: c.fg,
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
borderRadius: "3px 3px 0 0",
|
borderRadius: "3px 3px 0 0",
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue