mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 16:45:24 +02:00
feat: add Week filter and Grid Growth % columns
This commit is contained in:
Christian Vidal Wolf
@@ -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]);
|
||||
|
||||
|
||||
+81
-22
@@ -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>
|
||||
);
|
||||
})}
|
||||
|
||||
+43
-35
@@ -14,6 +14,7 @@ interface FilterBarProps {
|
||||
asin: string[];
|
||||
sku: string[];
|
||||
title: string[];
|
||||
week: string[];
|
||||
};
|
||||
}
|
||||
|
||||
@@ -22,53 +23,60 @@ const FilterBar: React.FC<FilterBarProps> = ({ filters, onFilterChange, options
|
||||
<div className="bg-slate-950 border-b border-border sticky top-0 z-[60] p-4 shadow-xl">
|
||||
<div className="max-w-7xl mx-auto flex flex-wrap gap-4 items-end">
|
||||
<MultiSelectDropdown
|
||||
label="Customer"
|
||||
selected={filters.customer}
|
||||
options={options.customer}
|
||||
onChange={(v) => onFilterChange('customer', v)}
|
||||
className="flex-1"
|
||||
label="Customer"
|
||||
selected={filters.customer}
|
||||
options={options.customer}
|
||||
onChange={(v) => onFilterChange('customer', v)}
|
||||
className="flex-1"
|
||||
/>
|
||||
<MultiSelectDropdown
|
||||
label="Year"
|
||||
selected={filters.year}
|
||||
options={options.year}
|
||||
onChange={(v) => onFilterChange('year', v)}
|
||||
className="flex-1"
|
||||
label="Year"
|
||||
selected={filters.year}
|
||||
options={options.year}
|
||||
onChange={(v) => onFilterChange('year', v)}
|
||||
className="flex-1"
|
||||
/>
|
||||
<MultiSelectDropdown
|
||||
label="Month"
|
||||
selected={filters.month}
|
||||
options={options.month}
|
||||
onChange={(v) => onFilterChange('month', v)}
|
||||
className="flex-1"
|
||||
label="Month"
|
||||
selected={filters.month}
|
||||
options={options.month}
|
||||
onChange={(v) => onFilterChange('month', v)}
|
||||
className="flex-1"
|
||||
/>
|
||||
<MultiSelectDropdown
|
||||
label="Product Line"
|
||||
selected={filters.line}
|
||||
options={options.line}
|
||||
onChange={(v) => onFilterChange('line', v)}
|
||||
className="flex-1"
|
||||
label="Week"
|
||||
selected={filters.week}
|
||||
options={options.week}
|
||||
onChange={(v) => onFilterChange('week', v)}
|
||||
className="flex-1"
|
||||
/>
|
||||
<MultiSelectDropdown
|
||||
label="SKU"
|
||||
selected={filters.sku}
|
||||
options={options.sku}
|
||||
onChange={(v) => onFilterChange('sku', v)}
|
||||
className="flex-1"
|
||||
label="Product Line"
|
||||
selected={filters.line}
|
||||
options={options.line}
|
||||
onChange={(v) => onFilterChange('line', v)}
|
||||
className="flex-1"
|
||||
/>
|
||||
<MultiSelectDropdown
|
||||
label="Title"
|
||||
selected={filters.title}
|
||||
options={options.title}
|
||||
onChange={(v) => onFilterChange('title', v)}
|
||||
className="flex-1"
|
||||
label="SKU"
|
||||
selected={filters.sku}
|
||||
options={options.sku}
|
||||
onChange={(v) => onFilterChange('sku', v)}
|
||||
className="flex-1"
|
||||
/>
|
||||
<MultiSelectDropdown
|
||||
label="ASIN"
|
||||
selected={filters.asin}
|
||||
options={options.asin}
|
||||
onChange={(v) => onFilterChange('asin', v)}
|
||||
className="flex-1"
|
||||
label="Title"
|
||||
selected={filters.title}
|
||||
options={options.title}
|
||||
onChange={(v) => onFilterChange('title', v)}
|
||||
className="flex-1"
|
||||
/>
|
||||
<MultiSelectDropdown
|
||||
label="ASIN"
|
||||
selected={filters.asin}
|
||||
options={options.asin}
|
||||
onChange={(v) => onFilterChange('asin', v)}
|
||||
className="flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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;
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -22,6 +22,7 @@ export interface FilterState {
|
||||
asin: string[];
|
||||
sku: string[];
|
||||
title: string[]; // Added Title filter
|
||||
week: string[]; // Added Week filter
|
||||
}
|
||||
|
||||
export interface GrowthMetric {
|
||||
@@ -90,27 +91,27 @@ export interface ChatMessage {
|
||||
|
||||
// New Interfaces for Dynamic Pivot Grid
|
||||
export interface YearlyData {
|
||||
sellOut: number;
|
||||
units: number;
|
||||
sellOut: number;
|
||||
units: number;
|
||||
}
|
||||
|
||||
export interface MonthlyPivot {
|
||||
monthIndex: number;
|
||||
byYear: Record<string, YearlyData>;
|
||||
monthIndex: number;
|
||||
byYear: Record<string, YearlyData>;
|
||||
}
|
||||
|
||||
export interface PivotRow {
|
||||
id: string;
|
||||
customer: string;
|
||||
line: string;
|
||||
title: string; // Added Title
|
||||
articleName: string;
|
||||
sku: string;
|
||||
asin: string;
|
||||
id: string;
|
||||
customer: string;
|
||||
line: string;
|
||||
title: string; // Added Title
|
||||
articleName: string;
|
||||
sku: string;
|
||||
asin: string;
|
||||
|
||||
// Dynamic buckets
|
||||
totalsByYear: Record<string, YearlyData>;
|
||||
months: MonthlyPivot[]; // Always 12 elements
|
||||
// Dynamic buckets
|
||||
totalsByYear: Record<string, YearlyData>;
|
||||
months: MonthlyPivot[]; // Always 12 elements
|
||||
}
|
||||
|
||||
export interface TimeSeriesData {
|
||||
|
||||
Reference in New Issue
Block a user