fix(stats): keep daily usage bars always visible
Each day now has a full-height track behind a solid accent fill, so low-usage days no longer render as a near-invisible sliver that only stood out on hover.
This commit is contained in:
parent
c74ef1e632
commit
ea2b9842e1
1 changed files with 9 additions and 3 deletions
|
|
@ -63,15 +63,21 @@ export default function Stats() {
|
||||||
) : (
|
) : (
|
||||||
<div className="flex items-end gap-0.5 h-24">
|
<div className="flex items-end gap-0.5 h-24">
|
||||||
{data.daily.map((d) => (
|
{data.daily.map((d) => (
|
||||||
|
// Each day gets a full-height track so the column is always visible
|
||||||
|
// (even on near-zero days); the accent fill renders the value on top.
|
||||||
<div
|
<div
|
||||||
key={d.day}
|
key={d.day}
|
||||||
className="flex-1 bg-accent/70 hover:bg-accent rounded-t transition"
|
className="flex-1 h-full flex items-end bg-card/50 rounded-t"
|
||||||
style={{ height: `${Math.max(2, (d.total / maxDaily) * 100)}%` }}
|
|
||||||
title={t("stats.dailyTooltip", {
|
title={t("stats.dailyTooltip", {
|
||||||
day: d.day,
|
day: d.day,
|
||||||
units: d.total.toLocaleString(),
|
units: d.total.toLocaleString(),
|
||||||
})}
|
})}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="w-full bg-accent hover:opacity-80 rounded-t transition"
|
||||||
|
style={{ height: `${Math.max(3, (d.total / maxDaily) * 100)}%` }}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue