Hide non-seller entries from seller chart
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 2m50s
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 2m50s
This commit is contained in:
@@ -133,6 +133,19 @@ const getSellerMetricValue = (metric: SellerMetricKey, revenue: number, orders:
|
|||||||
return revenue;
|
return revenue;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const normalizeSellerGraphName = (name: string) => (
|
||||||
|
name
|
||||||
|
.normalize('NFD')
|
||||||
|
.replace(/\p{Diacritic}/gu, '')
|
||||||
|
.trim()
|
||||||
|
.toLowerCase()
|
||||||
|
);
|
||||||
|
|
||||||
|
const shouldHideSellerFromGraph = (name: string) => {
|
||||||
|
const normalizedName = normalizeSellerGraphName(name);
|
||||||
|
return normalizedName === '0' || normalizedName === 'pos vendas';
|
||||||
|
};
|
||||||
|
|
||||||
const getBarGlowStyle = (color: string) => ({
|
const getBarGlowStyle = (color: string) => ({
|
||||||
filter: `drop-shadow(0 0 3px ${color}40)`
|
filter: `drop-shadow(0 0 3px ${color}40)`
|
||||||
});
|
});
|
||||||
@@ -326,10 +339,27 @@ const Dashboard = () => {
|
|||||||
return buildDashboardMetrics(ordersData, dateRange);
|
return buildDashboardMetrics(ordersData, dateRange);
|
||||||
}, [dateRange, ordersData, serverMetrics]);
|
}, [dateRange, ordersData, serverMetrics]);
|
||||||
|
|
||||||
|
const chartRevenueBySeller = useMemo(
|
||||||
|
() => revenueBySeller.filter(seller => !shouldHideSellerFromGraph(seller.name)),
|
||||||
|
[revenueBySeller]
|
||||||
|
);
|
||||||
|
const chartOrdersBySeller = useMemo(
|
||||||
|
() => ordersBySeller.filter(seller => !shouldHideSellerFromGraph(seller.name)),
|
||||||
|
[ordersBySeller]
|
||||||
|
);
|
||||||
|
const chartSellerRevenueByDate = useMemo(
|
||||||
|
() => sellerRevenueByDate.filter(seller => !shouldHideSellerFromGraph(seller.name)),
|
||||||
|
[sellerRevenueByDate]
|
||||||
|
);
|
||||||
|
const chartSellerRevenueByHour = useMemo(
|
||||||
|
() => sellerRevenueByHour.filter(seller => !shouldHideSellerFromGraph(seller.name)),
|
||||||
|
[sellerRevenueByHour]
|
||||||
|
);
|
||||||
|
|
||||||
const sellerColorMap = useMemo(() => {
|
const sellerColorMap = useMemo(() => {
|
||||||
const colorMap = new Map<string, string>();
|
const colorMap = new Map<string, string>();
|
||||||
|
|
||||||
[...revenueBySeller, ...ordersBySeller].forEach((seller) => {
|
[...chartRevenueBySeller, ...chartOrdersBySeller].forEach((seller) => {
|
||||||
const key = seller.id || seller.name;
|
const key = seller.id || seller.name;
|
||||||
if (!colorMap.has(key)) {
|
if (!colorMap.has(key)) {
|
||||||
colorMap.set(key, SELLER_COLORS[colorMap.size % SELLER_COLORS.length]);
|
colorMap.set(key, SELLER_COLORS[colorMap.size % SELLER_COLORS.length]);
|
||||||
@@ -337,21 +367,21 @@ const Dashboard = () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
return colorMap;
|
return colorMap;
|
||||||
}, [ordersBySeller, revenueBySeller]);
|
}, [chartOrdersBySeller, chartRevenueBySeller]);
|
||||||
|
|
||||||
const sellerMetricConfig = sellerMetricOptions.find(option => option.key === sellerMetric) || sellerMetricOptions[0];
|
const sellerMetricConfig = sellerMetricOptions.find(option => option.key === sellerMetric) || sellerMetricOptions[0];
|
||||||
|
|
||||||
const sellerTimeSeries = useMemo(() => {
|
const sellerTimeSeries = useMemo(() => {
|
||||||
const isSingleDayRange = formatDateKey(dateRange.start) === formatDateKey(dateRange.end);
|
const isSingleDayRange = formatDateKey(dateRange.start) === formatDateKey(dateRange.end);
|
||||||
const isHourly = isSingleDayRange && sellerRevenueByHour.length > 0;
|
const isHourly = isSingleDayRange && chartSellerRevenueByHour.length > 0;
|
||||||
const activeTrendPoints = isHourly
|
const activeTrendPoints = isHourly
|
||||||
? sellerRevenueByHour.map(point => ({
|
? chartSellerRevenueByHour.map(point => ({
|
||||||
...point,
|
...point,
|
||||||
date: formatHourKey(point.hour)
|
date: formatHourKey(point.hour)
|
||||||
}))
|
}))
|
||||||
: sellerRevenueByDate;
|
: chartSellerRevenueByDate;
|
||||||
|
|
||||||
if (!activeTrendPoints.length && revenueBySeller.length) {
|
if (!activeTrendPoints.length && chartRevenueBySeller.length) {
|
||||||
const startDate = formatDateKey(dateRange.start);
|
const startDate = formatDateKey(dateRange.start);
|
||||||
const endDate = formatDateKey(dateRange.end);
|
const endDate = formatDateKey(dateRange.end);
|
||||||
const chartDates = isSingleDayRange && isHourly
|
const chartDates = isSingleDayRange && isHourly
|
||||||
@@ -359,7 +389,7 @@ const Dashboard = () => {
|
|||||||
: startDate === endDate ? [endDate] : [startDate, endDate];
|
: startDate === endDate ? [endDate] : [startDate, endDate];
|
||||||
const sellersById = new Map<string, Omit<SellerTimeSeriesSeller, 'seriesKey' | 'total'>>();
|
const sellersById = new Map<string, Omit<SellerTimeSeriesSeller, 'seriesKey' | 'total'>>();
|
||||||
|
|
||||||
revenueBySeller.forEach(seller => {
|
chartRevenueBySeller.forEach(seller => {
|
||||||
const id = seller.id || seller.name;
|
const id = seller.id || seller.name;
|
||||||
sellersById.set(id, {
|
sellersById.set(id, {
|
||||||
id,
|
id,
|
||||||
@@ -370,7 +400,7 @@ const Dashboard = () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
ordersBySeller.forEach(seller => {
|
chartOrdersBySeller.forEach(seller => {
|
||||||
const id = seller.id || seller.name;
|
const id = seller.id || seller.name;
|
||||||
const existing = sellersById.get(id);
|
const existing = sellersById.get(id);
|
||||||
sellersById.set(id, {
|
sellersById.set(id, {
|
||||||
@@ -468,7 +498,7 @@ const Dashboard = () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
return { sellers, chartData, isFallback: false, isHourly };
|
return { sellers, chartData, isFallback: false, isHourly };
|
||||||
}, [dateRange.end, dateRange.start, ordersBySeller, revenueBySeller, sellerColorMap, sellerMetric, sellerRevenueByDate, sellerRevenueByHour]);
|
}, [chartOrdersBySeller, chartRevenueBySeller, chartSellerRevenueByDate, chartSellerRevenueByHour, dateRange.end, dateRange.start, sellerColorMap, sellerMetric]);
|
||||||
|
|
||||||
const focusedSeller = focusedSellerId ? sellerTimeSeries.sellers.find(seller => seller.id === focusedSellerId) : null;
|
const focusedSeller = focusedSellerId ? sellerTimeSeries.sellers.find(seller => seller.id === focusedSellerId) : null;
|
||||||
const effectiveFocusedSellerId = focusedSeller?.id || null;
|
const effectiveFocusedSellerId = focusedSeller?.id || null;
|
||||||
|
|||||||
Reference in New Issue
Block a user