matt/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update stat cards/trends and more toggle group tweaks

Browse Source
This commit is contained in:
Matt
2024-12-21 16:43:22 -05:00
parent 9ddd528d61
commit 371dfb08d0
1 changed files with 340 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

440
dashboard/src/components/dashboard/SalesChart.jsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect, useMemo, useCallback, memo } from 'react';
import axios from 'axios';
import React, { useState, useEffect, useMemo, useCallback, memo } from "react";
import axios from "axios";
import {
Card,
CardContent,
@@ -17,7 +17,15 @@ import {
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Loader2, TrendingUp, TrendingDown, Info, AlertCircle } from "lucide-react";
import {
Loader2,
TrendingUp,
TrendingDown,
Info,
AlertCircle,
ArrowUp,
ArrowDown,
} from "lucide-react";
import {
LineChart,
Line,
@@ -28,8 +36,13 @@ import {
ResponsiveContainer,
Legend,
ReferenceLine,
} from 'recharts';
import { TIME_RANGES, GROUP_BY_OPTIONS, formatDateForInput, parseDateFromInput } from "@/lib/constants";
} from "recharts";
import {
TIME_RANGES,
GROUP_BY_OPTIONS,
formatDateForInput,
parseDateFromInput,
} from "@/lib/constants";
import { Checkbox } from "@/components/ui/checkbox";
import {
Table,
@@ -53,26 +66,26 @@ import { Separator } from "@/components/ui/separator";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
const METRIC_IDS = {
PLACED_ORDER: 'Y8cqcF',
PAYMENT_REFUNDED: 'R7XUYh'
PLACED_ORDER: "Y8cqcF",
PAYMENT_REFUNDED: "R7XUYh",
};
// Map current periods to their previous equivalents
const PREVIOUS_PERIOD_MAP = {
today: 'yesterday',
thisWeek: 'lastWeek',
thisMonth: 'lastMonth',
last7days: 'previous7days',
last30days: 'previous30days',
last90days: 'previous90days',
yesterday: 'twoDaysAgo'
today: "yesterday",
thisWeek: "lastWeek",
thisMonth: "lastMonth",
last7days: "previous7days",
last30days: "previous30days",
last90days: "previous90days",
yesterday: "twoDaysAgo",
};
// Add helper function to calculate previous period dates
const calculatePreviousPeriodDates = (timeRange, startDate, endDate) => {
if (timeRange && timeRange !== 'custom') {
if (timeRange && timeRange !== "custom") {
return {
timeRange: PREVIOUS_PERIOD_MAP[timeRange]
timeRange: PREVIOUS_PERIOD_MAP[timeRange],
};
} else if (startDate && endDate) {
const start = new Date(startDate);
@@ -84,7 +97,7 @@ const calculatePreviousPeriodDates = (timeRange, startDate, endDate) => {
return {
startDate: prevStart.toISOString(),
endDate: prevEnd.toISOString()
endDate: prevEnd.toISOString(),
};
}
return null;
@@ -92,35 +105,36 @@ const calculatePreviousPeriodDates = (timeRange, startDate, endDate) => {
// Enhanced helper function for consistent currency formatting with explicit rounding
const formatCurrency = (value, useFractionDigits = true) => {
if (typeof value !== 'number') return '$0.00';
if (typeof value !== "number") return "$0.00";
const roundedValue = parseFloat(value.toFixed(useFractionDigits ? 2 : 0));
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
return new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
minimumFractionDigits: useFractionDigits ? 2 : 0,
maximumFractionDigits: useFractionDigits ? 2 : 0
maximumFractionDigits: useFractionDigits ? 2 : 0,
}).format(roundedValue);
};
// Add a helper function for percentage formatting
const formatPercentage = (value) => {
if (typeof value !== 'number') return '0%';
return `${value >= 0 ? '+' : ''}${Math.round(value)}%`;
if (typeof value !== "number") return "0%";
return `${Math.abs(Math.round(value))}%`;
};
// Add color mapping for metrics
const METRIC_COLORS = {
revenue: '#8b5cf6',
orders: '#10b981',
avgOrderValue: '#9333ea',
movingAverage: '#f59e0b',
prevRevenue: '#f97316',
prevOrders: '#0ea5e9',
prevAvgOrderValue: '#f59e0b'
revenue: "#8b5cf6",
orders: "#10b981",
avgOrderValue: "#9333ea",
movingAverage: "#f59e0b",
prevRevenue: "#f97316",
prevOrders: "#0ea5e9",
prevAvgOrderValue: "#f59e0b",
};
// Memoize the StatCard component
const StatCard = memo(({
const StatCard = memo(
({
title,
value,
description,
@@ -132,73 +146,93 @@ const StatCard = memo(({
trendSuffix = "",
className = "",
colorClass = "text-gray-900 dark:text-gray-100",
info
}) => (
<Card className={className}>
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
<div className="flex items-center gap-2">
<span className="text-sm text-muted-foreground">{title}</span>
{info && (
<Info
className="w-4 h-4 text-muted-foreground cursor-help"
title={info}
/>
{trend && (
<span
className={`text-sm flex items-center gap-1 ${
trend === "up"
? "text-emerald-600 dark:text-emerald-400"
: "text-rose-600 dark:text-rose-400"
}`}
>
{trend === "up" ? (
<ArrowUp className="w-4 h-4" />
) : (
<ArrowDown className="w-4 h-4" />
)}
{trendPrefix}
{trendValue}
{trendSuffix}
</span>
)}
</div>
</CardHeader>
<CardContent className="p-4 pt-0">
<div className={`text-2xl font-bold mb-1 ${colorClass}`}>
{valuePrefix}{value}{valueSuffix}
{valuePrefix}
{value}
{valueSuffix}
</div>
{description && (
<div className="text-sm text-muted-foreground">
{description}
</div>
)}
{trend && (
<div className={`text-sm flex items-center gap-1 mt-2 ${trend === 'up' ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400'}`}>
{trend === 'up' ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
{trendPrefix}{trendValue}{trendSuffix}
</div>
<div className="text-sm text-muted-foreground">{description}</div>
)}
</CardContent>
</Card>
));
)
);
// Add display name for debugging
StatCard.displayName = 'StatCard';
StatCard.displayName = "StatCard";
const CustomTooltip = ({ active, payload, label }) => {
if (active && payload && payload.length) {
const date = new Date(label);
const formattedDate = date.toLocaleDateString('en-US', {
weekday: 'short',
month: 'short',
day: 'numeric',
year: 'numeric'
const formattedDate = date.toLocaleDateString("en-US", {
weekday: "short",
month: "short",
day: "numeric",
year: "numeric",
});
// Group metrics by type (current vs previous)
const currentMetrics = payload.filter(p => !p.dataKey.toLowerCase().includes('prev'));
const previousMetrics = payload.filter(p => p.dataKey.toLowerCase().includes('prev'));
const currentMetrics = payload.filter(
(p) => !p.dataKey.toLowerCase().includes("prev")
);
const previousMetrics = payload.filter((p) =>
p.dataKey.toLowerCase().includes("prev")
);
return (
<Card className="p-3 shadow-lg bg-white dark:bg-gray-800 border-none">
<CardContent className="p-0 space-y-2">
<p className="font-medium text-sm border-b pb-1 mb-2">{formattedDate}</p>
<p className="font-medium text-sm border-b pb-1 mb-2">
{formattedDate}
</p>
<div className="space-y-1">
{currentMetrics.map((entry, index) => {
const value = entry.dataKey.toLowerCase().includes('revenue') ||
entry.dataKey === 'avgOrderValue' ||
entry.dataKey === 'movingAverage' ||
entry.dataKey === 'aovMovingAverage'
const value =
entry.dataKey.toLowerCase().includes("revenue") ||
entry.dataKey === "avgOrderValue" ||
entry.dataKey === "movingAverage" ||
entry.dataKey === "aovMovingAverage"
? formatCurrency(entry.value)
: entry.value.toLocaleString();
return (
<div key={index} className="flex justify-between items-center text-sm">
<span style={{ color: entry.stroke || METRIC_COLORS[entry.dataKey.toLowerCase()] }}>
<div
key={index}
className="flex justify-between items-center text-sm"
>
<span
style={{
color:
entry.stroke ||
METRIC_COLORS[entry.dataKey.toLowerCase()],
}}
>
{entry.name}:
</span>
<span className="font-medium ml-4">{value}</span>
@@ -211,17 +245,29 @@ const CustomTooltip = ({ active, payload, label }) => {
<>
<div className="border-t my-2"></div>
<div className="space-y-1">
<p className="text-xs text-muted-foreground mb-1">Previous Period</p>
<p className="text-xs text-muted-foreground mb-1">
Previous Period
</p>
{previousMetrics.map((entry, index) => {
const value = entry.dataKey.toLowerCase().includes('revenue') ||
entry.dataKey.includes('avgOrderValue')
const value =
entry.dataKey.toLowerCase().includes("revenue") ||
entry.dataKey.includes("avgOrderValue")
? formatCurrency(entry.value)
: entry.value.toLocaleString();
return (
<div key={index} className="flex justify-between items-center text-sm">
<span style={{ color: entry.stroke || METRIC_COLORS[entry.dataKey.toLowerCase()] }}>
{entry.name.replace('Previous ', '')}:
<div
key={index}
className="flex justify-between items-center text-sm"
>
<span
style={{
color:
entry.stroke ||
METRIC_COLORS[entry.dataKey.toLowerCase()],
}}
>
{entry.name.replace("Previous ", "")}:
</span>
<span className="font-medium ml-4">{value}</span>
</div>
@@ -246,10 +292,11 @@ const calculate7DayAverage = (data) => {
const window = array.slice(startIndex, index + 1);
// Calculate averages for all metrics
const validPoints = window.filter(point =>
const validPoints = window.filter(
(point) =>
point &&
typeof point.revenue === 'number' &&
typeof point.orders === 'number' &&
typeof point.revenue === "number" &&
typeof point.orders === "number" &&
!isNaN(point.revenue) &&
!isNaN(point.orders)
);
@@ -259,7 +306,7 @@ const calculate7DayAverage = (data) => {
...day,
movingAverage: 0,
orderMovingAverage: 0,
aovMovingAverage: 0
aovMovingAverage: 0,
};
}
@@ -274,7 +321,7 @@ const calculate7DayAverage = (data) => {
...day,
movingAverage: Number(revenueAvg.toFixed(2)),
orderMovingAverage: Number(orderAvg.toFixed(2)),
aovMovingAverage: Number(aovAvg.toFixed(2))
aovMovingAverage: Number(aovAvg.toFixed(2)),
};
});
};
@@ -283,28 +330,44 @@ const processData = (stats = []) => {
if (!Array.isArray(stats)) return [];
// First, convert the stats array into the base format
const baseData = stats.map(day => ({
const baseData = stats.map((day) => ({
timestamp: day.date || day.timestamp,
revenue: Number(day.revenue || 0),
orders: Number(day.orders || 0),
avgOrderValue: Number(day.averageOrderValue || (day.orders > 0 ? day.revenue / day.orders : 0)),
avgOrderValue: Number(
day.averageOrderValue || (day.orders > 0 ? day.revenue / day.orders : 0)
),
prevRevenue: Number(day.prevRevenue || 0),
prevOrders: Number(day.prevOrders || 0),
prevAvgOrderValue: Number(day.prevAvgOrderValue || (day.prevOrders > 0 ? day.prevRevenue / day.prevOrders : 0)),
prevAvgOrderValue: Number(
day.prevAvgOrderValue ||
(day.prevOrders > 0 ? day.prevRevenue / day.prevOrders : 0)
),
growth: {
revenue: 0,
orders: 0,
avgOrderValue: 0
}
avgOrderValue: 0,
},
}));
// Calculate growth rates
baseData.forEach(day => {
baseData.forEach((day) => {
// Calculate growth
day.growth = {
revenue: day.prevRevenue > 0 ? ((day.revenue - day.prevRevenue) / day.prevRevenue) * 100 : 0,
orders: day.prevOrders > 0 ? ((day.orders - day.prevOrders) / day.prevOrders) * 100 : 0,
avgOrderValue: day.prevAvgOrderValue > 0 ? ((day.avgOrderValue - day.prevAvgOrderValue) / day.prevAvgOrderValue) * 100 : 0
revenue:
day.prevRevenue > 0
? ((day.revenue - day.prevRevenue) / day.prevRevenue) * 100
: 0,
orders:
day.prevOrders > 0
? ((day.orders - day.prevOrders) / day.prevOrders) * 100
: 0,
avgOrderValue:
day.prevAvgOrderValue > 0
? ((day.avgOrderValue - day.prevAvgOrderValue) /
day.prevAvgOrderValue) *
100
: 0,
};
});
@@ -332,7 +395,7 @@ const calculateSummaryStats = (data = []) => {
revenue: current.revenue,
timestamp: current.timestamp,
orders: current.orders,
avgOrderValue: current.avgOrderValue
avgOrderValue: current.avgOrderValue,
};
}
return best;
@@ -340,9 +403,13 @@ const calculateSummaryStats = (data = []) => {
// Calculate growth percentages
const growth = {
revenue: prevRevenue ? ((totalRevenue - prevRevenue) / prevRevenue) * 100 : 0,
revenue: prevRevenue
? ((totalRevenue - prevRevenue) / prevRevenue) * 100
: 0,
orders: prevOrders ? ((totalOrders - prevOrders) / prevOrders) * 100 : 0,
avgOrderValue: prevAvgOrderValue ? ((avgOrderValue - prevAvgOrderValue) / prevAvgOrderValue) * 100 : 0
avgOrderValue: prevAvgOrderValue
? ((avgOrderValue - prevAvgOrderValue) / prevAvgOrderValue) * 100
: 0,
};
return {
@@ -357,8 +424,8 @@ const calculateSummaryStats = (data = []) => {
movingAverages: {
revenue: data[data.length - 1]?.movingAverage || 0,
orders: data[data.length - 1]?.orderMovingAverage || 0,
avgOrderValue: data[data.length - 1]?.aovMovingAverage || 0
}
avgOrderValue: data[data.length - 1]?.aovMovingAverage || 0,
},
};
};
@@ -372,7 +439,7 @@ const SummaryStats = memo(({ stats = {} }) => {
prevRevenue = 0,
prevOrders = 0,
prevAvgOrderValue = 0,
growth = { revenue: 0, orders: 0, avgOrderValue: 0 }
growth = { revenue: 0, orders: 0, avgOrderValue: 0 },
} = stats;
return (
@@ -381,7 +448,7 @@ const SummaryStats = memo(({ stats = {} }) => {
title="Total Revenue"
value={formatCurrency(totalRevenue, false)}
description={`Previous: ${formatCurrency(prevRevenue, false)}`}
trend={growth.revenue >= 0 ? 'up' : 'down'}
trend={growth.revenue >= 0 ? "up" : "down"}
trendValue={formatPercentage(growth.revenue)}
info="Total revenue for the selected period"
colorClass="text-green-600 dark:text-green-400"
@@ -391,17 +458,17 @@ const SummaryStats = memo(({ stats = {} }) => {
title="Total Orders"
value={totalOrders.toLocaleString()}
description={`Previous: ${prevOrders.toLocaleString()} orders`}
trend={growth.orders >= 0 ? 'up' : 'down'}
trend={growth.orders >= 0 ? "up" : "down"}
trendValue={formatPercentage(growth.orders)}
info="Total number of orders for the selected period"
colorClass="text-blue-600 dark:text-blue-400"
/>
<StatCard
title="Average Order Value"
title="AOV"
value={formatCurrency(avgOrderValue)}
description={`Previous: ${formatCurrency(prevAvgOrderValue)}`}
trend={growth.avgOrderValue >= 0 ? 'up' : 'down'}
trend={growth.avgOrderValue >= 0 ? "up" : "down"}
trendValue={formatPercentage(growth.avgOrderValue)}
info="Average value per order for the selected period"
colorClass="text-purple-600 dark:text-purple-400"
@@ -410,9 +477,14 @@ const SummaryStats = memo(({ stats = {} }) => {
<StatCard
title="Best Day"
value={formatCurrency(bestDay?.revenue || 0, false)}
description={bestDay?.timestamp ?
`${new Date(bestDay.timestamp).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} - ${bestDay.orders} orders` :
'No data'}
description={
bestDay?.timestamp
? `${new Date(bestDay.timestamp).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
})} - ${bestDay.orders} orders`
: "No data"
}
info="Day with highest revenue in the selected period"
colorClass="text-orange-600 dark:text-orange-400"
/>
@@ -420,7 +492,7 @@ const SummaryStats = memo(({ stats = {} }) => {
);
});
SummaryStats.displayName = 'SummaryStats';
SummaryStats.displayName = "SummaryStats";
// Add these skeleton components near the top of the file
const SkeletonChart = () => (
@@ -493,11 +565,11 @@ const SkeletonTable = () => (
);
const SalesChart = ({
timeRange = 'last30days',
timeRange = "last30days",
startDate,
endDate,
title = "Sales Overview",
description = "Track your sales performance over time"
description = "Track your sales performance over time",
}) => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
@@ -509,12 +581,12 @@ const SalesChart = ({
orders: true,
avgOrderValue: false,
movingAverage: true,
showPrevious: false
showPrevious: false,
});
const [summaryStats, setSummaryStats] = useState({});
const [customDateRange, setCustomDateRange] = useState({
startDate: formatDateForInput(startDate) || '',
endDate: formatDateForInput(endDate) || ''
startDate: formatDateForInput(startDate) || "",
endDate: formatDateForInput(endDate) || "",
});
// Fetch data function
@@ -524,20 +596,22 @@ const SalesChart = ({
setError(null);
// Fetch data
const response = await axios.get('/api/klaviyo/events/stats/details', {
const response = await axios.get("/api/klaviyo/events/stats/details", {
params: {
...params,
metric: 'revenue',
daily: true
}
metric: "revenue",
daily: true,
},
});
if (!response.data) {
throw new Error('Invalid response format');
throw new Error("Invalid response format");
}
// Process the data
const currentStats = Array.isArray(response.data) ? response.data : response.data.stats || [];
const currentStats = Array.isArray(response.data)
? response.data
: response.data.stats || [];
// Process the data directly without remapping
const processedData = processData(currentStats);
@@ -546,9 +620,8 @@ const SalesChart = ({
setData(processedData);
setSummaryStats(stats);
setError(null);
} catch (error) {
console.error('Error fetching data:', error);
console.error("Error fetching data:", error);
setError(error.message);
} finally {
setLoading(false);
@@ -556,40 +629,60 @@ const SalesChart = ({
}, []);
// Handle time range change
const handleTimeRangeChange = useCallback((value) => {
const handleTimeRangeChange = useCallback(
(value) => {
setSelectedTimeRange(value);
const params = value === 'custom'
const params =
value === "custom"
? {
startDate: parseDateFromInput(customDateRange.startDate)?.toISOString(),
endDate: parseDateFromInput(customDateRange.endDate)?.toISOString()
startDate: parseDateFromInput(
customDateRange.startDate
)?.toISOString(),
endDate: parseDateFromInput(
customDateRange.endDate
)?.toISOString(),
}
: { timeRange: value };
fetchData(params);
}, [customDateRange, fetchData]);
},
[customDateRange, fetchData]
);
// Handle custom date change
const handleCustomDateChange = useCallback((field, value) => {
setCustomDateRange(prev => ({
const handleCustomDateChange = useCallback(
(field, value) => {
setCustomDateRange((prev) => ({
...prev,
[field]: value
[field]: value,
}));
if (selectedTimeRange === 'custom' && customDateRange.startDate && customDateRange.endDate) {
if (
selectedTimeRange === "custom" &&
customDateRange.startDate &&
customDateRange.endDate
) {
fetchData({
startDate: parseDateFromInput(customDateRange.startDate)?.toISOString(),
endDate: parseDateFromInput(customDateRange.endDate)?.toISOString()
startDate: parseDateFromInput(
customDateRange.startDate
)?.toISOString(),
endDate: parseDateFromInput(customDateRange.endDate)?.toISOString(),
});
}
}, [selectedTimeRange, customDateRange, fetchData]);
},
[selectedTimeRange, customDateRange, fetchData]
);
// Initial load effect
useEffect(() => {
const params = selectedTimeRange === 'custom'
const params =
selectedTimeRange === "custom"
? {
startDate: parseDateFromInput(customDateRange.startDate)?.toISOString(),
endDate: parseDateFromInput(customDateRange.endDate)?.toISOString()
startDate: parseDateFromInput(
customDateRange.startDate
)?.toISOString(),
endDate: parseDateFromInput(customDateRange.endDate)?.toISOString(),
}
: { timeRange: selectedTimeRange };
@@ -600,13 +693,13 @@ const SalesChart = ({
useEffect(() => {
let intervalId = null;
if (selectedTimeRange === 'today') {
if (selectedTimeRange === "today") {
// Initial fetch
fetchData({ timeRange: 'today' });
fetchData({ timeRange: "today" });
// Set up interval
intervalId = setInterval(() => {
fetchData({ timeRange: 'today' });
fetchData({ timeRange: "today" });
}, 60000);
}
@@ -618,12 +711,13 @@ const SalesChart = ({
}, [selectedTimeRange, fetchData]);
const formatXAxis = (value) => {
if (!value) return '';
if (!value) return "";
const date = new Date(value);
return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
return date.toLocaleDateString([], { month: "short", day: "numeric" });
};
const averageRevenue = data.length > 0
const averageRevenue =
data.length > 0
? data.reduce((sum, day) => sum + day.revenue, 0) / data.length
: 0;
@@ -633,10 +727,15 @@ const SalesChart = ({
<div className="flex flex-col space-y-2">
<div className="flex justify-between items-start">
<div>
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">{title}</CardTitle>
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">
{title}
</CardTitle>
</div>
<div className="flex items-center gap-4">
<Select value={selectedTimeRange} onValueChange={handleTimeRangeChange}>
<Select
value={selectedTimeRange}
onValueChange={handleTimeRangeChange}
>
<SelectTrigger className="w-[180px] h-9">
<SelectValue placeholder="Select time range" />
</SelectTrigger>
@@ -652,7 +751,7 @@ const SalesChart = ({
</div>
</div>
{selectedTimeRange === 'custom' && (
{selectedTimeRange === "custom" && (
<div className="grid grid-cols-2 gap-4 max-w-md">
<div className="space-y-2">
<Label htmlFor="startDate">Start Date</Label>
@@ -660,7 +759,9 @@ const SalesChart = ({
id="startDate"
type="datetime-local"
value={customDateRange.startDate}
onChange={(e) => handleCustomDateChange('startDate', e.target.value)}
onChange={(e) =>
handleCustomDateChange("startDate", e.target.value)
}
className="h-9"
/>
</div>
@@ -670,7 +771,9 @@ const SalesChart = ({
id="endDate"
type="datetime-local"
value={customDateRange.endDate}
onChange={(e) => handleCustomDateChange('endDate', e.target.value)}
onChange={(e) =>
handleCustomDateChange("endDate", e.target.value)
}
className="h-9"
/>
</div>
@@ -678,25 +781,24 @@ const SalesChart = ({
)}
{/* Show either skeletons or actual stats */}
{loading ? (
<SkeletonStats />
) : (
<SummaryStats stats={summaryStats} />
)}
{loading ? <SkeletonStats /> : <SummaryStats stats={summaryStats} />}
{/* Metric Toggles */}
<div className="flex items-center gap-2 pt-2">
<ToggleGroup type="multiple" variant="outline" className="flex-wrap justify-start"
<ToggleGroup
type="multiple"
variant="outline"
className="flex-wrap justify-start"
value={Object.entries(metrics)
.filter(([key, value]) => value && key !== 'showPrevious')
.filter(([key, value]) => value && key !== "showPrevious")
.map(([key]) => key)}
onValueChange={(values) => {
setMetrics(prev => ({
setMetrics((prev) => ({
...prev,
revenue: values.includes('revenue'),
orders: values.includes('orders'),
avgOrderValue: values.includes('avgOrderValue'),
movingAverage: values.includes('movingAverage'),
revenue: values.includes("revenue"),
orders: values.includes("orders"),
movingAverage: values.includes("movingAverage"),
avgOrderValue: values.includes("avgOrderValue"),
}));
}}
>
@@ -714,13 +816,6 @@ const SalesChart = ({
>
Orders
</ToggleGroupItem>
<ToggleGroupItem
value="avgOrderValue"
aria-label="Toggle AOV"
className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
>
AOV
</ToggleGroupItem>
<ToggleGroupItem
value="movingAverage"
aria-label="Toggle 7-day average"
@@ -728,6 +823,13 @@ const SalesChart = ({
>
7-Day Avg
</ToggleGroupItem>
<ToggleGroupItem
value="avgOrderValue"
aria-label="Toggle AOV"
className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
>
AOV
</ToggleGroupItem>
</ToggleGroup>
<Separator orientation="vertical" className="h-6" />
@@ -737,9 +839,14 @@ const SalesChart = ({
variant={metrics.showPrevious ? "outline" : "primary"}
size="sm"
className="h-8"
onClick={() => setMetrics(prev => ({ ...prev, showPrevious: !prev.showPrevious }))}
onClick={() =>
setMetrics((prev) => ({
...prev,
showPrevious: !prev.showPrevious,
}))
}
>
Compare with prev
Compare Prev Period
</Button>
</div>
</div>
@@ -768,7 +875,9 @@ const SalesChart = ({
<div className="text-center">
<TrendingUp className="h-12 w-12 mx-auto mb-4" />
<div className="font-medium mb-2">No sales data available</div>
<div className="text-sm">Try selecting a different time range</div>
<div className="text-sm">
Try selecting a different time range
</div>
</div>
</div>
) : (
@@ -779,7 +888,10 @@ const SalesChart = ({
data={data}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
<CartesianGrid
strokeDasharray="3 3"
className="stroke-muted"
/>
<XAxis
dataKey="timestamp"
tickFormatter={formatXAxis}
@@ -918,7 +1030,9 @@ const SalesChart = ({
<TableHead className="text-right">Avg Order</TableHead>
<TableHead className="text-right">Prev Orders</TableHead>
<TableHead className="text-right">Prev Revenue</TableHead>
<TableHead className="text-right">Prev Avg Order</TableHead>
<TableHead className="text-right">
Prev Avg Order
</TableHead>
<TableHead className="text-right">7-Day Avg</TableHead>
</TableRow>
</TableHeader>