danvics/Pulse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Simplify metric bar labels on narrow viewports

Browse source
This commit is contained in:
rcourtman 2025-10-27 19:53:40 +00:00
parent 74a8372d48
commit a8e90e1e0e
1 changed files with 11 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
frontend-modern/src/components/Dashboard/MetricBar.tsx
View file

@ -1,4 +1,4 @@
import { createMemo } from 'solid-js'; import { Show, createMemo } from 'solid-js';
interface MetricBarProps { interface MetricBarProps {
value: number; value: number;
@ -44,14 +44,6 @@ export function MetricBar(props: MetricBarProps) {
return colorMap[getColor()] || 'bg-gray-500/60 dark:bg-gray-500/50'; return colorMap[getColor()] || 'bg-gray-500/60 dark:bg-gray-500/50';
}); });
// Combine label and sublabel for display text
const displayText = createMemo(() => {
if (props.sublabel) {
return `${props.label} (${props.sublabel})`;
}
return props.label;
});
return ( return (
<div class="metric-text"> <div class="metric-text">
<div class="relative min-w-[96px] w-full h-3.5 rounded overflow-hidden bg-gray-200 dark:bg-gray-600"> <div class="relative min-w-[96px] w-full h-3.5 rounded overflow-hidden bg-gray-200 dark:bg-gray-600">
@ -60,7 +52,16 @@ export function MetricBar(props: MetricBarProps) {
style={{ width: `${width()}%` }} style={{ width: `${width()}%` }}
/> />
<span class="absolute inset-0 flex items-center justify-center text-[10px] font-medium text-gray-800 dark:text-gray-100 leading-none"> <span class="absolute inset-0 flex items-center justify-center text-[10px] font-medium text-gray-800 dark:text-gray-100 leading-none">
<span class="whitespace-nowrap px-0.5">{displayText()}</span> <span class="flex items-center gap-1 whitespace-nowrap px-0.5">
<span>{props.label}</span>
<Show when={props.sublabel}>
{(sublabel) => (
<span class="metric-sublabel hidden xl:inline font-normal">
({sublabel()})
</span>
)}
</Show>
</span>
</span> </span>
</div> </div>
</div> </div>