maximus/Simpl-Resultat
1
0
Fork 0
Code Issues Pull requests Projects Releases 10 Packages Wiki Activity Actions

fix: display level 4+ categories under their parent in dashboard (#23) #28

Merged
maximus merged 4 commits from fix/simpl-resultat-23-dashboard-category-ordering into main 2026-03-10 01:26:20 +00:00
Conversation 4 Commits 4 Files changed 9 +4 -5
1 changed files with 4 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 18c7ef3ee9 - Show all commits

9
src/components/dashboard/CategoryPieChart.tsx
View file

@ -117,15 +117,14 @@ export default function CategoryPieChart({
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
<div <div className="flex flex-wrap gap-x-3 gap-y-1 mt-2">
className={`flex flex-wrap gap-x-4 gap-y-1 mt-2 transition-opacity duration-200 ${isChartHovered ? "opacity-100" : "opacity-0 pointer-events-none"}`}
>
{data.map((item, index) => { {data.map((item, index) => {
const isHidden = hiddenCategories.has(item.category_name); const isHidden = hiddenCategories.has(item.category_name);
const pct = total > 0 && !isHidden ? Math.round((item.total / total) * 100) : null;
return ( return (
<button <button
key={index} key={index}
className={`flex items-center gap-1.5 text-sm ${isHidden ? "opacity-40" : ""}`} className={`flex items-center gap-1 text-xs ${isHidden ? "opacity-40" : ""}`}
onContextMenu={(e) => { onContextMenu={(e) => {
e.preventDefault(); e.preventDefault();
setContextMenu({ x: e.clientX, y: e.clientY, item }); setContextMenu({ x: e.clientX, y: e.clientY, item });
@ -135,7 +134,7 @@ export default function CategoryPieChart({
> >
<PatternSwatch index={index} color={item.category_color} prefix="cat-pie" /> <PatternSwatch index={index} color={item.category_color} prefix="cat-pie" />
<span className="text-[var(--muted-foreground)]"> <span className="text-[var(--muted-foreground)]">
{item.category_name} {total > 0 && !isHidden ? `${Math.round((item.total / total) * 100)}%` : ""} {item.category_name}{isChartHovered && pct != null ? ` ${pct}%` : ""}
</span> </span>
</button> </button>
); );