Oliver/cc-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: chart bars use pixel heights instead of percentages

Browse source 
Percentage heights relative to a flex parent are unreliable without explicit
height on the parent chain. Compute bar heights directly in pixels (max 160px)
to guarantee visible bars regardless of flex/CSS cascade.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-05-06 21:34:56 +01:00
parent ea7e44648b
commit 3671657d11
1 changed files with 8 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
web/src/views/DashboardView.vue
View file

@ -191,18 +191,14 @@ const DOW_LABELS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
<p class="text-xs text-muted-foreground">No sessions in this period</p>
</div>
<!-- Chart -->
<div v-else class="h-40 flex items-stretch gap-px">
<div v-else class="h-40 flex items-end gap-px overflow-hidden">
<div
v-for="point in monthly"
:key="point.date"
class="flex-1 flex flex-col justify-end items-center group"
class="flex-1 bg-primary/70 hover:bg-primary rounded-t transition-colors duration-150 cursor-default"
:style="{ height: `${Math.max((point.hours / maxMonthlyHours) * 160, 2)}px` }"
:title="`${point.date}: ${formatDuration(point.hours)}`"
>
<div
class="w-full bg-primary/70 hover:bg-primary rounded-t transition-colors duration-150"
:style="{ height: `${(point.hours / maxMonthlyHours) * 100}%`, minHeight: '2px' }"
/>
</div>
/>
</div>
</CardContent>
</Card>
@ -228,15 +224,16 @@ const DOW_LABELS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
<p class="text-xs text-muted-foreground">No sessions in this period</p>
</div>
<!-- Chart -->
<div v-else class="h-40 flex items-stretch gap-2">
<div v-else class="flex items-end gap-2" style="height: 160px">
<div
v-for="point in dow"
:key="point.dow"
class="flex-1 flex flex-col justify-end items-center gap-1"
class="flex-1 flex flex-col items-center gap-1 cursor-default"
style="height: 160px; justify-content: flex-end"
>
<div
class="w-full bg-primary/70 hover:bg-primary rounded-t transition-colors duration-150"
:style="{ height: `${Math.max((point.hours / maxDowHours) * 100, 2)}%` }"
:style="{ height: `${Math.max((point.hours / maxDowHours) * 128, 2)}px` }"
:title="`${point.label}: ${formatDuration(point.hours)}`"
/>
<span class="text-[10px] text-muted-foreground font-medium">{{ point.label.slice(0, 2) }}</span>