christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 13:55:23 +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
App.tsx
+2
View File
@@ -108,6 +108,7 @@ const App: React.FC = () => {
asin: [],
sku: [],
title: [],
week: [],
});
};
@@ -249,6 +250,7 @@ const App: React.FC = () => {
asin: getUniqueValues(rawData, 'asin'),
sku: getUniqueValues(rawData, 'sku'),
title: getUniqueValues(rawData, 'title'),
week: Array.from(new Set(rawData.map(r => r.week).filter(w => w !== undefined))).sort((a, b) => (a as number) - (b as number)).map(w => `W${w}`),
};
}, [rawData]);
components/DataGrid.tsx
+64 -5
View File
@@ -651,9 +651,12 @@ const DataGrid: React.FC<DataGridProps> = ({ data }) => {
);
})}
{/* Total Columns per Year */}
{years.map(year => (
{/* 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}`)}
@@ -663,15 +666,32 @@ const DataGrid: React.FC<DataGridProps> = ({ data }) => {
</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]"
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>
);
})}
components/FilterBar.tsx
+8
View File
@@ -14,6 +14,7 @@ interface FilterBarProps {
asin: string[];
sku: string[];
title: string[];
week: string[];
};
}
@@ -42,6 +43,13 @@ const FilterBar: React.FC<FilterBarProps> = ({ filters, onFilterChange, options
onChange={(v) => onFilterChange('month', v)}
className="flex-1"
/>
<MultiSelectDropdown
label="Week"
selected={filters.week}
options={options.week}
onChange={(v) => onFilterChange('week', v)}
className="flex-1"
/>
<MultiSelectDropdown
label="Product Line"
selected={filters.line}
services/dataProcessor.ts
+6 -1
View File
@@ -531,7 +531,12 @@ export const filterData = (data: SalesRecord[], filters: FilterState): SalesReco
const skuMatch = filters.sku.length === 0 || filters.sku.includes(item.sku);
const titleMatch = filters.title.length === 0 || filters.title.includes(item.title);
return customerMatch && yearMatch && monthMatch && lineMatch && asinMatch && skuMatch && titleMatch;
// Week Logic: Match "W1", "W2" etc.
// item.week is a number (e.g. 1), filter uses strings "W1"
const weekStr = item.week ? `W${item.week}` : '';
const weekMatch = filters.week.length === 0 || (weekStr !== '' && filters.week.includes(weekStr));
return customerMatch && yearMatch && monthMatch && lineMatch && asinMatch && skuMatch && titleMatch && weekMatch;
});
};
types.ts
+1
View File
@@ -22,6 +22,7 @@ export interface FilterState {
asin: string[];
sku: string[];
title: string[]; // Added Title filter
week: string[]; // Added Week filter
}
export interface GrowthMetric {