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

Sales chart tweaks

Browse Source
This commit is contained in:
Matt
2024-12-23 00:30:07 -05:00
parent 8f047a6d18
commit 3e2c76e8a0
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -449,7 +449,7 @@ const SummaryStats = memo(({ stats = {} }) => {
} = stats; } = stats;
return ( return (
<div className="grid grid-cols-4 gap-4 py-4 max-w-4xl"> <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 py-4 max-w-3xl">
<StatCard <StatCard
title="Total Revenue" title="Total Revenue"
value={formatCurrency(totalRevenue, false)} value={formatCurrency(totalRevenue, false)}
@@ -573,7 +573,6 @@ const SkeletonTable = () => (
const SalesChart = ({ const SalesChart = ({
timeRange = "last30days", timeRange = "last30days",
title = "Sales Overview", title = "Sales Overview",
description = "Track your sales performance over time",
}) => { }) => {
const [data, setData] = useState([]); const [data, setData] = useState([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@@ -684,12 +683,12 @@ const SalesChart = ({
{title} {title}
</CardTitle> </CardTitle>
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-2">
{!error && ( {!error && (
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button variant="outline" className="h-9"> <Button variant="outline" className="h-9">
View Details Details
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="min-w-[600px] max-w-[90vw] w-fit max-h-[85vh] overflow-hidden flex flex-col"> <DialogContent className="min-w-[600px] max-w-[90vw] w-fit max-h-[85vh] overflow-hidden flex flex-col">
@@ -759,7 +758,7 @@ const SalesChart = ({
})) }))
} }
> >
Compare Prev Period Compare Prev
</Button> </Button>
</div> </div>
</DialogHeader> </DialogHeader>
@@ -875,7 +874,7 @@ const SalesChart = ({
{/* Show metric toggles only if not in error state */} {/* Show metric toggles only if not in error state */}
{!error && ( {!error && (
<div className="flex items-center gap-2 pt-2"> <div className="flex items-center flex-col sm:flex-row gap-0 sm:gap-4 pt-2">
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
<Button <Button
variant={metrics.revenue ? "default" : "outline"} variant={metrics.revenue ? "default" : "outline"}
@@ -927,7 +926,8 @@ const SalesChart = ({
</Button> </Button>
</div> </div>
<Separator orientation="vertical" className="h-6" /> <Separator orientation="vertical" className="h-6 hidden sm:block" />
<Separator orientation="horizontal" className="sm:hidden w-20 my-2" />
<Button <Button
variant={metrics.showPrevious ? "default" : "outline"} variant={metrics.showPrevious ? "default" : "outline"}
@@ -975,11 +975,11 @@ const SalesChart = ({
</div> </div>
) : ( ) : (
<> <>
<div className="h-[400px] mt-4 bg-card rounded-lg p-4 relative"> <div className="h-[400px] mt-4 bg-card rounded-lg p-0 relative">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<LineChart <LineChart
data={data} data={data}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }} margin={{ top: 5, right: -30, left: -5, bottom: 5 }}
> >
<CartesianGrid <CartesianGrid
strokeDasharray="3 3" strokeDasharray="3 3"