blyzer/graphs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine seller chart legend
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 39s
Details

Browse Source
This commit is contained in:
Cauê Faleiros
2026-06-29 10:58:18 -03:00
parent 9bd595fcac
commit fc6f417cc6
1 changed files with 29 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/Dashboard.tsx
View File

@@ -639,30 +639,36 @@ const Dashboard = () => {
</ResponsiveContainer>
</div>
<div className="mt-5 flex flex-wrap gap-2 border-t border-dark-border pt-4">
<div className="relative mt-5 border-t border-dark-border pt-3">
<div className="flex h-8 items-center gap-5 overflow-x-auto overflow-y-hidden whitespace-nowrap pr-8 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
{sellerTimeSeries.sellers.map(seller => {
const isFocused = effectiveFocusedSellerId === seller.id;
const isDimmed = Boolean(effectiveFocusedSellerId && !isFocused);
return (
<button
key={`seller-legend-${seller.id}`}
type="button"
onClick={() => setFocusedSellerId(current => current === seller.id ? null : seller.id)}
className={`flex max-w-full cursor-pointer items-center gap-2 rounded-full border px-3 py-2 text-left transition-colors ${
className={`group inline-flex h-7 shrink-0 cursor-pointer items-center gap-2 rounded-md px-1.5 text-left transition-colors ${
isFocused
? 'border-dark-text bg-dark-input text-dark-text'
: 'border-dark-border bg-dark-input/40 text-dark-muted hover:bg-dark-input hover:text-dark-text'
? 'bg-dark-input/70 text-dark-text'
: 'text-dark-muted hover:text-dark-text'
}`}
style={{ opacity: isDimmed ? 0.48 : 1 }}
style={{ opacity: isDimmed ? 0.38 : 1 }}
title={seller.name}
>
<span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: seller.fill }} />
<span className="max-w-[220px] truncate text-sm font-bold">{seller.name}</span>
<span className="shrink-0 text-xs font-bold opacity-75">{sellerMetricConfig.formatTick(seller.total)}</span>
<span className="h-1.5 w-5 shrink-0 rounded-full" style={{ backgroundColor: seller.fill }} />
<span className="max-w-[190px] truncate text-xs font-bold">{seller.name}</span>
<span className="shrink-0 text-[11px] font-bold text-dark-muted group-hover:text-dark-text">
{sellerMetricConfig.formatTick(seller.total)}
</span>
</button>
);
})}
</div>
<div className="pointer-events-none absolute bottom-0 right-0 top-3 w-10 bg-gradient-to-l from-dark-card to-transparent" />
</div>
</div>
) : (
<div className="flex h-80 items-center justify-center">