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

feat: make charts and legends clickable to navigate to product details
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 2m2s
Details

Browse Source
This commit is contained in:
Cauê Faleiros
2026-05-11 16:49:06 -03:00
parent 8be7dbbe06
commit fbd35d65af
1 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/pages/Dashboard.tsx
View File

@@ -1,5 +1,5 @@
import { useMemo } from 'react';
import { useOutletContext } from 'react-router-dom';
import { useOutletContext, useNavigate } from 'react-router-dom';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
import { DollarSign, ShoppingCart, TrendingUp } from 'lucide-react';
import DateRangePicker from '../components/DateRangePicker';
@@ -47,6 +47,7 @@ const CustomTooltip = ({ active, payload, label, isCurrency }: any) => {
};
const Dashboard = () => {
const navigate = useNavigate();
const { dateRange, setDateRange, ordersData, refreshInterval, setRefreshInterval, loadData } = useOutletContext<{
dateRange: DateRange,
setDateRange: (range: DateRange) => void,
@@ -69,12 +70,14 @@ const Dashboard = () => {
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;
@@ -99,12 +102,14 @@ const Dashboard = () => {
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]
}));
@@ -179,9 +184,9 @@ const Dashboard = () => {
/>
<YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
<Tooltip content={<CustomTooltip />} cursor={{ fill: '#222222' }} />
<Bar dataKey="value" radius={[4, 4, 0, 0]}>
<Bar dataKey="value" radius={[4, 4, 0, 0]} onClick={(data) => { if(data?.payload?.id) navigate(`/products/${data.payload.id}`) }} style={{ cursor: 'pointer' }}>
{salesByProduct.map((entry) => (
<Cell key={`cell-${entry.name}`} fill={entry.fill} />
<Cell key={`cell-${entry.name}`} fill={entry.fill} style={{ cursor: 'pointer' }} />
))}
</Bar>
</BarChart>
@@ -189,7 +194,7 @@ const Dashboard = () => {
</div>
<div className="mt-4 grid grid-cols-2 gap-2">
{salesByProduct.map((entry) => (
<div key={`bar-legend-${entry.name}`} className="flex items-center text-[10px]">
<div key={`bar-legend-${entry.name}`} className="flex items-center text-[10px] cursor-pointer hover:opacity-80 transition-opacity" onClick={() => navigate(`/products/${entry.id}`)}>
<span className="w-2.5 h-2.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: entry.fill }}></span>
<span className="text-dark-muted truncate font-semibold" title={entry.name}>{entry.name}</span>
</div>
@@ -202,9 +207,9 @@ const Dashboard = () => {
<div className="h-80 w-full flex items-center justify-center">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie data={revenueByProduct} cx="50%" cy="50%" innerRadius={80} outerRadius={110} paddingAngle={5} dataKey="value" stroke="none">
<Pie data={revenueByProduct} cx="50%" cy="50%" innerRadius={80} outerRadius={110} paddingAngle={5} dataKey="value" stroke="none" onClick={(data) => { if(data?.payload?.id) navigate(`/products/${data.payload.id}`) }} style={{ cursor: 'pointer' }}>
{revenueByProduct.map((entry) => (
<Cell key={`cell-${entry.name}`} fill={entry.fill} />
<Cell key={`cell-${entry.name}`} fill={entry.fill} style={{ cursor: 'pointer' }} />
))}
</Pie>
<Tooltip content={<CustomTooltip isCurrency={true} />} cursor={{ fill: '#222222' }} />
@@ -213,7 +218,7 @@ const Dashboard = () => {
</div>
<div className="mt-4 grid grid-cols-2 gap-2">
{revenueByProduct.map((entry) => (
<div key={`pie-legend-${entry.name}`} className="flex items-center text-[10px]">
<div key={`pie-legend-${entry.name}`} className="flex items-center text-[10px] cursor-pointer hover:opacity-80 transition-opacity" onClick={() => navigate(`/products/${entry.id}`)}>
<span className="w-2.5 h-2.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: entry.fill }}></span>
<span className="text-dark-muted truncate font-semibold">{entry.name}</span>
</div>