fix: resolve maximum call stack size exceeded error and optimize master table

This commit is contained in:
Christian Vidal Wolf
2026-03-16 13:19:21 +01:00
parent 845a8e0ae6
commit b304e0ddb8
3 changed files with 22 additions and 17 deletions
+3 -2
View File
@@ -596,9 +596,10 @@ const App: React.FC = () => {
const gridContext = useMemo(() => {
if (rawData.length === 0) return { minWeek: 1, maxWeek: 53, currentYear: new Date().getFullYear() };
const currentYear = Math.max(...rawData.map(r => r.year));
const currentYear = rawData.reduce((max, r) => Math.max(max, r.year), 0);
const currentYearData = rawData.filter(r => r.year === currentYear);
const maxWeek = Math.max(...currentYearData.map(r => r.week).filter(Boolean));
const maxWeek = currentYearData.map(r => r.week).filter((w): w is number => w !== undefined)
.reduce((max, w) => Math.max(max, w), 0);
return { minWeek: 1, maxWeek: maxWeek || 53, currentYear };
}, [rawData]);
+14 -13
View File
@@ -158,19 +158,20 @@ export const MasterTable: React.FC<MasterTableProps> = ({ products, includeCOGS,
</tr>
{/* Product Rows */}
{sortedProducts.map((product) => {
const metrics = calculateProductMetrics(product, includeCOGS);
// Data bar width calculation (relative to max sales)
const maxSales = Math.max(...products.map(p => p.grossSales));
const salesBarWidth = `${(product.grossSales / maxSales) * 100}%`;
{(() => {
const maxSales = products.reduce((max, p) => Math.max(max, p.grossSales), 0);
return sortedProducts.map((product) => {
const metrics = calculateProductMetrics(product, includeCOGS);
// Data bar width calculation (relative to max sales)
const salesBarWidth = maxSales > 0 ? `${(product.grossSales / maxSales) * 100}%` : '0%';
return (
<tr
key={product.id}
className="hover:bg-[#1A1E2A] transition-colors cursor-pointer group"
onClick={() => onProductClick(product)}
>
return (
<tr
key={product.id}
className="hover:bg-[#1A1E2A] transition-colors cursor-pointer group"
onClick={() => onProductClick(product)}
>
<td className="px-6 py-4 whitespace-normal min-w-[250px] max-w-[300px]">
<div className="font-medium text-slate-200 group-hover:text-indigo-400 transition-colors line-clamp-2" title={product.name}>{product.name}</div>
<div className="text-xs text-slate-500 font-mono mt-0.5">{product.sku} | {product.asin}</div>
@@ -230,7 +231,7 @@ export const MasterTable: React.FC<MasterTableProps> = ({ products, includeCOGS,
</td>
</tr>
);
})}
})})()}
</tbody>
</table>
</div>
+5 -2
View File
@@ -2461,9 +2461,12 @@ export const calculateVelocityMap = (data: SalesRecord[]): Map<string, number> =
const validYears = data.map(r => r.year).filter(y => y > 0);
if (validYears.length === 0) return new Map();
const latestYear = Math.max(...validYears);
const latestYear = validYears.reduce((a, b) => Math.max(a, b), 0);
const yearData = data.filter(r => r.year === latestYear);
const latestWeek = yearData.length > 0 ? Math.max(...yearData.map(r => r.week).filter(w => w !== undefined) as number[]) : 0;
const latestWeek = yearData.length > 0
? (yearData.map(r => r.week).filter(w => w !== undefined) as number[])
.reduce((a, b) => Math.max(a, b), 0)
: 0;
const last4WeeksKeys = new Set<string>();
for (let i = 0; i < 4; i++) {