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

Add hourly seller chart for single-day ranges
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m35s
Details

Browse Source
This commit is contained in:
Cauê Faleiros
2026-06-30 14:30:14 -03:00
parent 839e1f814e
commit 6a414a5bf4
6 changed files with 133 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/analytics/dashboard.ts
View File

@@ -32,6 +32,11 @@ export interface SellerDateRevenueMetric extends ChartProductMetric {
orders: number;
}
export interface SellerHourRevenueMetric extends ChartProductMetric {
hour: number;
orders: number;
}
export interface DashboardMetrics {
totalRevenue: number;
totalOrders: number;
@@ -41,6 +46,7 @@ export interface DashboardMetrics {
revenueBySeller: ChartProductMetric[];
ordersBySeller: ChartProductMetric[];
sellerRevenueByDate: SellerDateRevenueMetric[];
sellerRevenueByHour: SellerHourRevenueMetric[];
}
export const applyDashboardColors = (metrics: DashboardAnalytics): DashboardMetrics => {
@@ -49,7 +55,8 @@ export const applyDashboardColors = (metrics: DashboardAnalytics): DashboardMetr
...metrics.revenueByProduct.map(product => product.name),
...(metrics.revenueBySeller || []).map(seller => seller.name),
...(metrics.ordersBySeller || []).map(seller => seller.name),
...(metrics.sellerRevenueByDate || []).map(seller => seller.name)
...(metrics.sellerRevenueByDate || []).map(seller => seller.name),
...(metrics.sellerRevenueByHour || []).map(seller => seller.name)
])).sort();
const productColors = displayProducts.reduce<Record<string, string>>((colors, name) => {
colors[name] = getProductColor(name);
@@ -83,6 +90,12 @@ export const applyDashboardColors = (metrics: DashboardAnalytics): DashboardMetr
name: formatDisplayName(removeTrailingSellerId(seller.name)),
orders: seller.orders || 0,
fill: productColors[seller.name]
})),
sellerRevenueByHour: (metrics.sellerRevenueByHour || []).map(seller => ({
...seller,
name: formatDisplayName(removeTrailingSellerId(seller.name)),
orders: seller.orders || 0,
fill: productColors[seller.name]
}))
};
};
@@ -96,7 +109,9 @@ export const buildDashboardMetrics = (ordersData: OrderData[], dateRange: DateRa
const productNameIdMap: Record<string, string> = {};
const sellerRevenueMap: Record<string, number> = {};
const sellerRevenueByDateMap: Record<string, Record<string, number>> = {};
const sellerRevenueByHourMap: Record<string, Record<number, number>> = {};
const sellerOrderKeysByDateMap: Record<string, Record<string, Set<string>>> = {};
const sellerOrderKeysByHourMap: Record<string, Record<number, Set<string>>> = {};
const sellerOrderKeysMap: Record<string, Set<string>> = {};
const sellerIdMap: Record<string, string> = {};
@@ -118,6 +133,8 @@ export const buildDashboardMetrics = (ordersData: OrderData[], dateRange: DateRa
const dateKey = Number.isNaN(parsedOrderDate.getTime())
? order.Data_Pedido
: parsedOrderDate.toISOString().slice(0, 10);
const orderTimestamp = order.Recebido_Em ? new Date(order.Recebido_Em) : null;
const orderHour = orderTimestamp && !Number.isNaN(orderTimestamp.getTime()) ? orderTimestamp.getHours() : null;
sellerIdMap[sellerName] = sellerId;
sellerRevenueMap[sellerName] = (sellerRevenueMap[sellerName] || 0) + itemRevenue;
@@ -126,6 +143,13 @@ export const buildDashboardMetrics = (ordersData: OrderData[], dateRange: DateRa
if (!sellerOrderKeysByDateMap[sellerName]) sellerOrderKeysByDateMap[sellerName] = {};
if (!sellerOrderKeysByDateMap[sellerName][dateKey]) sellerOrderKeysByDateMap[sellerName][dateKey] = new Set();
sellerOrderKeysByDateMap[sellerName][dateKey].add(orderKey);
if (orderHour !== null) {
if (!sellerRevenueByHourMap[sellerName]) sellerRevenueByHourMap[sellerName] = {};
sellerRevenueByHourMap[sellerName][orderHour] = (sellerRevenueByHourMap[sellerName][orderHour] || 0) + itemRevenue;
if (!sellerOrderKeysByHourMap[sellerName]) sellerOrderKeysByHourMap[sellerName] = {};
if (!sellerOrderKeysByHourMap[sellerName][orderHour]) sellerOrderKeysByHourMap[sellerName][orderHour] = new Set();
sellerOrderKeysByHourMap[sellerName][orderHour].add(orderKey);
}
if (!sellerOrderKeysMap[sellerName]) sellerOrderKeysMap[sellerName] = new Set();
sellerOrderKeysMap[sellerName].add(orderKey);
}
@@ -182,6 +206,20 @@ export const buildDashboardMetrics = (ordersData: OrderData[], dateRange: DateRa
}))
));
const sellerRevenueByHour = topSellerRevenueNames.flatMap(name => (
Object.keys(sellerRevenueByHourMap[name] || {})
.map(Number)
.sort((a, b) => a - b)
.map(hour => ({
name,
id: sellerIdMap[name],
hour,
value: sellerRevenueByHourMap[name][hour],
orders: sellerOrderKeysByHourMap[name]?.[hour]?.size || 0,
fill: getProductColor(name)
}))
));
return {
totalRevenue: revenue,
totalOrders: totalItems,
@@ -190,6 +228,7 @@ export const buildDashboardMetrics = (ordersData: OrderData[], dateRange: DateRa
revenueByProduct,
revenueBySeller,
ordersBySeller,
sellerRevenueByDate
sellerRevenueByDate,
sellerRevenueByHour
};
};

3
src/dataService.ts
View File

@@ -180,7 +180,8 @@ export const fetchDashboardAnalytics = async (dateRange: DateRange, options?: Ca
metrics &&
Array.isArray(metrics.revenueBySeller) &&
Array.isArray(metrics.ordersBySeller) &&
Array.isArray(metrics.sellerRevenueByDate)
Array.isArray(metrics.sellerRevenueByDate) &&
Array.isArray(metrics.sellerRevenueByHour)
);
}
});

44
src/pages/Dashboard.tsx
View File

@@ -37,6 +37,8 @@ const formatDateLabel = (value: string) => {
return new Intl.DateTimeFormat('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' }).format(date);
};
const formatHourKey = (hour: number) => `${String(hour).padStart(2, '0')}h`;
const formatDateKey = (date: Date) => {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -319,7 +321,7 @@ const Dashboard = () => {
return () => clearInterval(intervalId);
}, [dateRange, loadDashboardMetrics, refreshInterval]);
const { totalRevenue, totalOrders, averageOrderValue, salesByProduct, revenueByProduct, revenueBySeller, ordersBySeller, sellerRevenueByDate } = useMemo(() => {
const { totalRevenue, totalOrders, averageOrderValue, salesByProduct, revenueByProduct, revenueBySeller, ordersBySeller, sellerRevenueByDate, sellerRevenueByHour } = useMemo(() => {
if (serverMetrics) return applyDashboardColors(serverMetrics);
return buildDashboardMetrics(ordersData, dateRange);
}, [dateRange, ordersData, serverMetrics]);
@@ -340,10 +342,21 @@ const Dashboard = () => {
const sellerMetricConfig = sellerMetricOptions.find(option => option.key === sellerMetric) || sellerMetricOptions[0];
const sellerTimeSeries = useMemo(() => {
if (!sellerRevenueByDate.length && revenueBySeller.length) {
const isSingleDayRange = formatDateKey(dateRange.start) === formatDateKey(dateRange.end);
const isHourly = isSingleDayRange && sellerRevenueByHour.length > 0;
const activeTrendPoints = isHourly
? sellerRevenueByHour.map(point => ({
...point,
date: formatHourKey(point.hour)
}))
: sellerRevenueByDate;
if (!activeTrendPoints.length && revenueBySeller.length) {
const startDate = formatDateKey(dateRange.start);
const endDate = formatDateKey(dateRange.end);
const chartDates = startDate === endDate ? [endDate] : [startDate, endDate];
const chartDates = isSingleDayRange && isHourly
? Array.from({ length: 24 }, (_, hour) => formatHourKey(hour))
: startDate === endDate ? [endDate] : [startDate, endDate];
const sellersById = new Map<string, Omit<SellerTimeSeriesSeller, 'seriesKey' | 'total'>>();
revenueBySeller.forEach(seller => {
@@ -395,13 +408,13 @@ const Dashboard = () => {
return row;
});
return { sellers, chartData, isFallback: true };
return { sellers, chartData, isFallback: true, isHourly };
}
const sellersById = new Map<string, Omit<SellerTimeSeriesSeller, 'seriesKey' | 'total'>>();
const valuesByDate = new Map<string, Map<string, { revenue: number; orders: number }>>();
sellerRevenueByDate.forEach(point => {
activeTrendPoints.forEach(point => {
const id = point.id || point.name;
const existing = sellersById.get(id);
sellersById.set(id, {
@@ -439,19 +452,23 @@ const Dashboard = () => {
seriesKey: `seller_${index}`
}));
const chartData: SellerTimeSeriesChartData[] = [...valuesByDate.entries()]
.sort(([dateA], [dateB]) => dateA.localeCompare(dateB))
.map(([date, values]) => {
const chartKeys = isHourly
? Array.from({ length: 24 }, (_, hour) => formatHourKey(hour))
: [...valuesByDate.keys()].sort((dateA, dateB) => dateA.localeCompare(dateB));
const chartData: SellerTimeSeriesChartData[] = chartKeys
.map(date => {
const values = valuesByDate.get(date);
const row: SellerTimeSeriesChartData = { date };
sellers.forEach(seller => {
const value = values.get(seller.id);
const value = values?.get(seller.id);
row[seller.seriesKey] = value ? getSellerMetricValue(sellerMetric, value.revenue, value.orders) : 0;
});
return row;
});
return { sellers, chartData, isFallback: false };
}, [dateRange.end, dateRange.start, ordersBySeller, revenueBySeller, sellerColorMap, sellerMetric, sellerRevenueByDate]);
return { sellers, chartData, isFallback: false, isHourly };
}, [dateRange.end, dateRange.start, ordersBySeller, revenueBySeller, sellerColorMap, sellerMetric, sellerRevenueByDate, sellerRevenueByHour]);
const focusedSeller = focusedSellerId ? sellerTimeSeries.sellers.find(seller => seller.id === focusedSellerId) : null;
const effectiveFocusedSellerId = focusedSeller?.id || null;
@@ -530,6 +547,8 @@ const Dashboard = () => {
<p className="mt-1 text-sm font-medium text-dark-muted">
{focusedSeller
? `Foco em ${focusedSeller.name}`
: sellerTimeSeries.isHourly
? 'Evolução por horário no dia selecionado.'
: sellerTimeSeries.isFallback
? sellerMetricConfig.fallbackDescription
: sellerMetricConfig.trendDescription}
@@ -584,7 +603,8 @@ const Dashboard = () => {
fontSize={11}
tickLine={false}
axisLine={false}
minTickGap={18}
minTickGap={sellerTimeSeries.isHourly ? 10 : 18}
interval={sellerTimeSeries.isHourly ? 2 : undefined}
tickFormatter={formatDateTick}
/>
<YAxis

7
src/types.ts
View File

@@ -85,6 +85,13 @@ export interface DashboardAnalytics {
value: number;
orders?: number;
}>;
sellerRevenueByHour?: Array<{
name: string;
id: string;
hour: number;
value: number;
orders?: number;
}>;
}
export interface ProductAnalyticsItem {