christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 12:25:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add Week filter and Grid Growth % columns

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-01-16 11:47:59 +01:00
parent 15b44d4d91
commit 0075129d76
5 changed files with 162 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/DataGrid.tsx
+81 -22
View File
@@ -651,27 +651,47 @@ const DataGrid: React.FC<DataGridProps> = ({ data }) => {
);
})}
{/* Total Columns per Year */}
{years.map(year => (
<React.Fragment key={year}>
<th
className="px-4 py-3 border-b border-border text-right cursor-pointer hover:text-white bg-slate-950 min-w-[100px]"
onClick={() => requestSort(`total_sellOut_${year}`)}
>
<div className="flex items-center justify-end">
Sell Out {year} {getSortIcon(`total_sellOut_${year}`)}
</div>
</th>
<th
className="px-4 py-3 border-b border-border text-right cursor-pointer hover:text-white bg-slate-950 min-w-[100px]"
onClick={() => requestSort(`total_units_${year}`)}
>
<div className="flex items-center justify-end">
Units {year} {getSortIcon(`total_units_${year}`)}
</div>
</th>
</React.Fragment>
))}
{/* Data Columns: Year Groups */}
{years.map((year, index) => {
const prevYear = years[index + 1]; // Since years are sorted desc: 2025, 2024... next index is prev year
return (
<React.Fragment key={year}>
{/* Sell Out & Units */}
<th
className="px-4 py-3 border-b border-border text-right cursor-pointer hover:text-white bg-slate-950 min-w-[100px]"
onClick={() => requestSort(`total_sellOut_${year}`)}
>
<div className="flex items-center justify-end">
Sell Out {year} {getSortIcon(`total_sellOut_${year}`)}
</div>
</th>
<th
className="px-4 py-3 border-b border-border text-right cursor-pointer hover:text-white bg-slate-950 min-w-[80px]"
onClick={() => requestSort(`total_units_${year}`)}
>
<div className="flex items-center justify-end">
Units {year} {getSortIcon(`total_units_${year}`)}
</div>
</th>
{/* 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]">
<div className="flex items-center justify-center text-[10px] text-slate-500 uppercase">
S.O. Δ%
</div>
</th>
<th className="px-2 py-3 border-b border-border text-center bg-slate-950/50 min-w-[80px]">
<div className="flex items-center justify-center text-[10px] text-slate-500 uppercase">
Units Δ%
</div>
</th>
</>
)}
</React.Fragment>
);
})}
</tr>
</thead>
<tbody className="divide-y divide-border text-slate-300">
@@ -688,8 +708,27 @@ const DataGrid: React.FC<DataGridProps> = ({ data }) => {
))}
{/* Metric Values */}
{years.map(year => {
{years.map((year, index) => {
const data = row.totalsByYear[year];
const prevYear = years[index + 1];
const prevData = prevYear ? row.totalsByYear[prevYear] : null;
// Calculate Growth
let sellOutGrowth = null;
let unitsGrowth = null;
if (prevYear) {
const currSO = data?.sellOut || 0;
const prevSO = prevData?.sellOut || 0;
if (prevSO !== 0) sellOutGrowth = ((currSO - prevSO) / prevSO) * 100;
else if (currSO > 0) sellOutGrowth = 100; // New entry
const currUnits = data?.units || 0;
const prevUnits = prevData?.units || 0;
if (prevUnits !== 0) unitsGrowth = ((currUnits - prevUnits) / prevUnits) * 100;
else if (currUnits > 0) unitsGrowth = 100;
}
return (
<React.Fragment key={year}>
<td className="px-4 py-3 text-right font-medium text-white group-hover:text-emerald-400 transition-colors">
@@ -698,6 +737,26 @@ const DataGrid: React.FC<DataGridProps> = ({ data }) => {
<td className="px-4 py-3 text-right text-slate-400">
{data ? data.units.toLocaleString() : '-'}
</td>
{/* Growth Cells */}
{prevYear && (
<>
<td className={`px-2 py-3 text-center font-bold text-xs ${sellOutGrowth !== null ? (sellOutGrowth >= 0 ? 'text-emerald-500' : 'text-red-500') : 'text-slate-600'}`}>
{sellOutGrowth !== null ? (
<span className="flex items-center justify-center gap-1">
{sellOutGrowth >= 0 ? '↑' : '↓'} {Math.abs(sellOutGrowth).toFixed(0)}%
</span>
) : '-'}
</td>
<td className={`px-2 py-3 text-center font-bold text-xs ${unitsGrowth !== null ? (unitsGrowth >= 0 ? 'text-emerald-500' : 'text-red-500') : 'text-slate-600'}`}>
{unitsGrowth !== null ? (
<span className="flex items-center justify-center gap-1">
{unitsGrowth >= 0 ? '↑' : '↓'} {Math.abs(unitsGrowth).toFixed(0)}%
</span>
) : '-'}
</td>
</>
)}
</React.Fragment>
);
})}