clawverse/clawstor
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: hot tier chart units GB + tooltip text color

Browse Source 
- Convert size_mb → GB (÷1024) so axis and tooltip show GB not raw MB
- Add itemStyle to Tooltip so value text is zinc-400, not Recharts'
  default near-black which was unreadable on the dark background
- Add subtle hover cursor fill so bar highlight doesn't flash white
- Widen right margin so GB tick labels don't clip

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
This commit is contained in:
Omar Sobh
2026-06-30 11:19:00 +00:00
co-authored by Claude Sonnet 4.6
parent 70d1d410bb
commit c101cbe5ed
1 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/HotTierChart.tsx
+11 -6
View File
@@ -13,19 +13,24 @@ export function HotTierChart({ entries }: Props) {
) )
const data = [...entries].sort((a,b)=>b.size_mb-a.size_mb).slice(0,8).map(e=>({ const data = [...entries].sort((a,b)=>b.size_mb-a.size_mb).slice(0,8).map(e=>({
name: e.project.includes("/")?e.project.split("/").slice(-1)[0]:e.project, name: e.project.includes("/")?e.project.split("/").slice(-1)[0]:e.project,
mb: Math.round(e.size_mb), full: e.project gb: +(e.size_mb / 1024).toFixed(2), full: e.project
})) }))
return ( return (
<Card> <Card>
<CardHeader><div className="flex items-center gap-2"><Zap className="h-4 w-4 text-amber-400"/><CardTitle>Hot Tier — Build Artifacts</CardTitle></div></CardHeader> <CardHeader><div className="flex items-center gap-2"><Zap className="h-4 w-4 text-amber-400"/><CardTitle>Hot Tier — Build Artifacts</CardTitle></div></CardHeader>
<CardContent> <CardContent>
<ResponsiveContainer width="100%" height={160}> <ResponsiveContainer width="100%" height={160}>
<BarChart data={data} layout="vertical" margin={{left:0,right:24,top:0,bottom:0}}> <BarChart data={data} layout="vertical" margin={{left:0,right:36,top:0,bottom:0}}>
<XAxis type="number" unit="MB" tick={{fontSize:10,fill:"#71717a"}} axisLine={false} tickLine={false}/> <XAxis type="number" unit=" GB" tick={{fontSize:10,fill:"#71717a"}} axisLine={false} tickLine={false}/>
<YAxis type="category" dataKey="name" tick={{fontSize:10,fill:"#a1a1aa"}} width={80} axisLine={false} tickLine={false}/> <YAxis type="category" dataKey="name" tick={{fontSize:10,fill:"#a1a1aa"}} width={80} axisLine={false} tickLine={false}/>
<Tooltip contentStyle={{background:"#18181b",border:"1px solid #3f3f46",borderRadius:6,fontSize:12}} <Tooltip
labelStyle={{color:"#e4e4e7"}} formatter={(v)=>[`${v} MB`,"size"]}/> contentStyle={{background:"#18181b",border:"1px solid #3f3f46",borderRadius:6,fontSize:12}}
<Bar dataKey="mb" radius={[0,4,4,0]}> labelStyle={{color:"#e4e4e7"}}
itemStyle={{color:"#a1a1aa"}}
formatter={(v)=>[`${v} GB`,"size"]}
cursor={{fill:"rgba(255,255,255,0.04)"}}
/>
<Bar dataKey="gb" radius={[0,4,4,0]}>
{data.map((_,i)=><Cell key={i} fill={COLORS[i%COLORS.length]}/>)} {data.map((_,i)=><Cell key={i} fill={COLORS[i%COLORS.length]}/>)}
</Bar> </Bar>
</BarChart> </BarChart>