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

feat: add sorting by Top 50 rank in Weekly Sales

Browse Source 
- Updated SortConfig to support 'rank' metric
- Implemented sorting logic by 2025 rank (1-50)
- Automatically trigger rank sort when 'Top 50 Only' filter is active
- Added sortable header for 'Product Details' column
- Added subtle animation for sort arrow
This commit is contained in:
Christian Vidal Wolf
2026-01-22 12:22:36 +01:00
parent 2d1f3703c2
commit ade6d01df2
1 changed files with 29 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/WeeklyGrid.tsx
+29 -6
View File
@@ -9,9 +9,9 @@ interface WeeklyGridProps {
}
type SortConfig = {
key: string; // weekKey
key: string; // weekKey or 'rank'
direction: 'asc' | 'desc';
metric: 'units' | 'spend';
metric: 'units' | 'spend' | 'rank';
} | null;
const ROWS_PER_PAGE = 50;
@@ -64,12 +64,12 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking }) => {
setCurrentPage(1);
}, [debouncedSearch, showOnlyTop50]);
const handleSort = useCallback((weekKey: string, metric: 'units' | 'spend') => {
const handleSort = useCallback((weekKey: string, metric: 'units' | 'spend' | 'rank') => {
setSortConfig(prev => {
if (prev?.key === weekKey && prev.metric === metric) {
return { key: weekKey, direction: prev.direction === 'asc' ? 'desc' : 'asc', metric };
}
return { key: weekKey, direction: 'desc', metric };
return { key: weekKey, direction: metric === 'rank' ? 'asc' : 'desc', metric };
});
}, []);
@@ -149,6 +149,11 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking }) => {
const direction = sortConfig.direction;
result.sort((a, b) => {
if (sortConfig.metric === 'rank') {
const rankA = top50Ranking?.get(a.asin.trim().toUpperCase()) || 999;
const rankB = top50Ranking?.get(b.asin.trim().toUpperCase()) || 999;
return direction === 'asc' ? rankA - rankB : rankB - rankA;
}
const valA = a[metricKey][weekKey] || 0;
const valB = b[metricKey][weekKey] || 0;
return direction === 'asc' ? valA - valB : valB - valA;
@@ -248,7 +253,13 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking }) => {
{/* Top 50 Filter Toggle */}
{top50Ranking && top50Ranking.size > 0 && (
<button
onClick={() => setShowOnlyTop50(!showOnlyTop50)}
onClick={() => {
const newMode = !showOnlyTop50;
setShowOnlyTop50(newMode);
if (newMode) {
handleSort('rank', 'rank');
}
}}
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-bold transition-all border ${showOnlyTop50
? 'bg-gradient-to-r from-amber-500 to-orange-500 text-white border-amber-400 shadow-lg shadow-amber-500/20'
: 'bg-slate-950/50 text-slate-400 border-white/10 hover:border-amber-500/50 hover:text-amber-400'
@@ -307,7 +318,19 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking }) => {
<table className="w-full text-left border-collapse min-w-[max-content]">
<thead className="sticky top-0 z-20 bg-slate-900">
<tr className="bg-slate-900 border-b border-white/10">
<th className="p-3 text-[11px] font-black text-slate-400 uppercase tracking-widest sticky left-0 z-40 bg-slate-900 border-r border-white/10 min-w-[240px]">Product Details</th>
<th
onClick={() => handleSort('rank', 'rank')}
className="p-3 text-[11px] font-black text-slate-400 uppercase tracking-widest sticky left-0 z-40 bg-slate-900 border-r border-white/10 min-w-[240px] cursor-pointer hover:bg-white/5 transition-colors group"
>
<div className="flex items-center gap-2">
<span>Product Details</span>
{sortConfig?.metric === 'rank' && (
<span className="text-amber-500 font-black text-sm animate-bounce-subtle">
{sortConfig.direction === 'asc' ? '↑' : '↓'}
</span>
)}
</div>
</th>
{weeks.map(week => (
<th
key={week}