blyzer/graphs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

extract frontend analytics helpers
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m12s
Details

Browse Source
This commit is contained in:
Cauê Faleiros
2026-05-27 15:58:12 -03:00
parent 8c2590c56a
commit 72ded82ec7
9 changed files with 362 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/pages/Dashboard.tsx
View File

@@ -4,27 +4,7 @@ import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContaine
import { DollarSign, ShoppingCart, TrendingUp } from 'lucide-react';
import DateRangePicker from '../components/DateRangePicker';
import type { OrderData, DateRange } from '../types';
import { parseOrderDate } from '../dataService';
const COLORS = [
// 10 Strong Base Colors
'#10b981', '#3b82f6', '#8b5cf6', '#f43f5e', '#f97316',
'#06b6d4', '#ec4899', '#eab308', '#6366f1', '#14b8a6',
// 10 Softer Versions
'#6ee7b7', '#93c5fd', '#c4b5fd', '#fda4af', '#fdba74',
'#67e8f9', '#f9a8d4', '#fde047', '#a5b4fc', '#5eead4'
];
const globalColorMap: Record<string, string> = {};
let globalColorIndex = 0;
const getProductColor = (name: string) => {
if (!globalColorMap[name]) {
globalColorMap[name] = COLORS[globalColorIndex % COLORS.length];
globalColorIndex++;
}
return globalColorMap[name];
};
import { buildDashboardMetrics } from '../analytics/dashboard';
const formatCurrency = (value: number) => {
return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
@@ -73,65 +53,9 @@ const Dashboard = () => {
loadData: (showLoading?: boolean) => void
}>();
const filteredData = useMemo(() => {
const orders = ordersData;
return orders.filter(order => {
const orderDate = parseOrderDate(order.Data_Pedido);
return orderDate >= dateRange.start && orderDate <= dateRange.end;
});
}, [dateRange, ordersData]);
const { totalRevenue, totalOrders, averageOrderValue, salesByProduct, revenueByProduct } = useMemo(() => {
let revenue = 0;
let totalItems = 0;
const productSalesMap: Record<string, number> = {};
const productRevenueMap: Record<string, number> = {};
const productNameIdMap: Record<string, string> = {};
filteredData.forEach(order => {
const itemRevenue = order.Quantidade * order.Valor_Unitario;
revenue += itemRevenue;
totalItems += order.Quantidade;
const productName = order.Descricao_Produto.split(' TAMANHO')[0];
productNameIdMap[productName] = order.ID_Produto;
if (productSalesMap[productName]) {
productSalesMap[productName] += order.Quantidade;
productRevenueMap[productName] += itemRevenue;
} else {
productSalesMap[productName] = order.Quantidade;
productRevenueMap[productName] = itemRevenue;
}
});
// Identify which products will actually be displayed in both charts (Top 10 of each)
const topSalesNames = Object.keys(productSalesMap).sort((a, b) => productSalesMap[b] - productSalesMap[a]).slice(0, 10);
const topRevenueNames = Object.keys(productRevenueMap).sort((a, b) => productRevenueMap[b] - productRevenueMap[a]).slice(0, 10);
// Combine them into a unique set to assign colors only to the VISIBLE products
const displayProducts = Array.from(new Set([...topSalesNames, ...topRevenueNames])).sort();
const productColors: Record<string, string> = {};
displayProducts.forEach((name) => {
productColors[name] = getProductColor(name);
});
const productsData = topSalesNames.map(name => ({
name,
id: productNameIdMap[name],
value: productSalesMap[name],
fill: productColors[name]
}));
const revenueData = topRevenueNames.map(name => ({
name,
id: productNameIdMap[name],
value: productRevenueMap[name],
fill: productColors[name]
}));
return { totalRevenue: revenue, totalOrders: totalItems, averageOrderValue: revenue / (filteredData.length || 1), salesByProduct: productsData, revenueByProduct: revenueData };
}, [filteredData]);
return buildDashboardMetrics(ordersData, dateRange);
}, [dateRange, ordersData]);
return (
<div className="space-y-6">