Fix: Add sorting functionality for growth percentage columns in Grid tab

This commit is contained in:
Christian Vidal Wolf
2026-01-20 11:00:07 +01:00
parent cd2a5a7c4f
commit 15ad483c25
+28 -4
View File
@@ -354,6 +354,24 @@ const DataGrid: React.FC<DataGridProps> = ({ data }) => {
valB = b.totalsByYear[y]?.[m] || 0;
}
}
// Handle sorting by Growth Percentages (growth_sellOut_2024_2023)
else if ((sortConfig.key as string).startsWith('growth_')) {
const parts = (sortConfig.key as string).split('_');
// parts[1] = metric (sellOut/units), parts[2] = current year, parts[3] = previous year
if (parts.length === 4) {
const metric = parts[1] as 'sellOut' | 'units';
const currentYear = parts[2];
const prevYear = parts[3];
const currA = a.totalsByYear[currentYear]?.[metric] || 0;
const prevA = a.totalsByYear[prevYear]?.[metric] || 0;
valA = prevA !== 0 ? ((currA - prevA) / prevA) * 100 : (currA > 0 ? 100 : 0);
const currB = b.totalsByYear[currentYear]?.[metric] || 0;
const prevB = b.totalsByYear[prevYear]?.[metric] || 0;
valB = prevB !== 0 ? ((currB - prevB) / prevB) * 100 : (currB > 0 ? 100 : 0);
}
}
if (valA < valB) return sortConfig.direction === 'asc' ? -1 : 1;
if (valA > valB) return sortConfig.direction === 'asc' ? 1 : -1;
@@ -762,14 +780,20 @@ const DataGrid: React.FC<DataGridProps> = ({ data }) => {
{/* Growth Columns (if prev year exists) */}
{prevYear && (
<>
<th className="px-2 py-3 border-b border-border text-center bg-slate-950/50 min-w-[80px]">
<th
className="px-2 py-3 border-b border-border text-center bg-slate-950/50 min-w-[80px] cursor-pointer hover:text-white"
onClick={() => requestSort(`growth_sellOut_${year}_${prevYear}`)}
>
<div className="flex items-center justify-center text-[10px] text-slate-500 uppercase">
S.O. Δ%
S.O. Δ% {getSortIcon(`growth_sellOut_${year}_${prevYear}`)}
</div>
</th>
<th className="px-2 py-3 border-b border-border text-center bg-slate-950/50 min-w-[80px]">
<th
className="px-2 py-3 border-b border-border text-center bg-slate-950/50 min-w-[80px] cursor-pointer hover:text-white"
onClick={() => requestSort(`growth_units_${year}_${prevYear}`)}
>
<div className="flex items-center justify-center text-[10px] text-slate-500 uppercase">
Units Δ%
Units Δ% {getSortIcon(`growth_units_${year}_${prevYear}`)}
</div>
</th>
</>