Adjust app/component layouts, restyle analyticsdashboard and realtimeanalytics
This commit is contained in:
@@ -93,9 +93,6 @@ const DashboardLayout = () => {
|
||||
<Header />
|
||||
</div>
|
||||
<Navigation />
|
||||
<AnalyticsDashboard />
|
||||
<UserBehaviorDashboard />
|
||||
<RealtimeAnalytics />
|
||||
<div className="p-4 space-y-4">
|
||||
<div className="grid grid-cols-1 xl:grid-cols-6 gap-4">
|
||||
<div className="xl:col-span-4 col-span-6">
|
||||
@@ -105,25 +102,35 @@ const DashboardLayout = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="feed-xl" className="xl:col-span-2 col-span-6 h-[500px] xl:h-[643px] 2xl:h-[510px] lg:hidden xl:block">
|
||||
<div id="realtime" className="xl:col-span-2 col-span-6 h-[508px] overflow-auto">
|
||||
<div className="h-full">
|
||||
<div className="h-full"><EventFeed /></div>
|
||||
<RealtimeAnalytics />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-12 gap-4">
|
||||
<div id="feed-lg" className="hidden lg:col-span-6 lg:block xl:hidden h-[740px]">
|
||||
<div id="feed" className="col-span-12 lg:col-span-6 xl:col-span-4 h-[600px] lg:h-[740px]">
|
||||
<EventFeed />
|
||||
</div>
|
||||
<div id="products" className="col-span-12 lg:col-span-6 xl:col-span-4 h-[600px] lg:h-[740px]">
|
||||
<ProductGrid />
|
||||
</div>
|
||||
<div id="sales" className="col-span-12 xl:col-span-8 h-full w-full flex">
|
||||
<SalesChart className="w-full h-full"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="campaigns">
|
||||
<KlaviyoCampaigns />
|
||||
<div className="grid grid-cols-12 gap-4">
|
||||
<div id="product-grid" className="col-span-4 h-[500px]">
|
||||
<ProductGrid />
|
||||
</div>
|
||||
<div id="campaigns" className="col-span-8">
|
||||
<KlaviyoCampaigns />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-12 gap-4">
|
||||
<div className="col-span-8">
|
||||
<AnalyticsDashboard />
|
||||
</div>
|
||||
<div className="col-span-4">
|
||||
<UserBehaviorDashboard />
|
||||
</div>
|
||||
</div>
|
||||
<div id="meta-campaigns">
|
||||
<MetaCampaigns />
|
||||
|
||||
@@ -7,7 +7,8 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
@@ -17,13 +18,130 @@ import {
|
||||
Tooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
ReferenceLine,
|
||||
} from "recharts";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { Loader2, TrendingUp, AlertCircle } from "lucide-react";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
// Add helper function for currency formatting
|
||||
const formatCurrency = (value, useFractionDigits = true) => {
|
||||
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",
|
||||
minimumFractionDigits: useFractionDigits ? 2 : 0,
|
||||
maximumFractionDigits: useFractionDigits ? 2 : 0,
|
||||
}).format(roundedValue);
|
||||
};
|
||||
|
||||
// Add skeleton components
|
||||
const SkeletonChart = () => (
|
||||
<div className="h-[400px] w-full bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="flex-1 relative">
|
||||
<div className="h-full w-full relative">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute w-full h-px bg-gray-200 dark:bg-gray-700"
|
||||
style={{ top: `${20 + i * 20}%` }}
|
||||
/>
|
||||
))}
|
||||
<div
|
||||
className="absolute inset-0 bg-gray-300 dark:bg-gray-600 animate-pulse"
|
||||
style={{
|
||||
opacity: 0.2,
|
||||
clipPath: "polygon(0 50%, 100% 20%, 100% 100%, 0 100%)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const SkeletonStats = () => (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-4 rounded-full" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Skeleton className="h-8 w-32 mb-2" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
// Add StatCard component
|
||||
const StatCard = ({
|
||||
title,
|
||||
value,
|
||||
description,
|
||||
trend,
|
||||
trendValue,
|
||||
colorClass = "text-gray-900 dark:text-gray-100",
|
||||
}) => (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
|
||||
<span className="text-sm text-muted-foreground">{title}</span>
|
||||
{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"
|
||||
}`}
|
||||
>
|
||||
{trendValue}
|
||||
</span>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="p-4 pt-0">
|
||||
<div className={`text-2xl font-bold mb-1 ${colorClass}`}>{value}</div>
|
||||
{description && (
|
||||
<div className="text-sm text-muted-foreground">{description}</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
// Add color constants
|
||||
const METRIC_COLORS = {
|
||||
activeUsers: {
|
||||
color: "#8b5cf6",
|
||||
className: "text-purple-600 dark:text-purple-400",
|
||||
},
|
||||
newUsers: {
|
||||
color: "#10b981",
|
||||
className: "text-emerald-600 dark:text-emerald-400",
|
||||
},
|
||||
pageViews: {
|
||||
color: "#f59e0b",
|
||||
className: "text-amber-600 dark:text-amber-400",
|
||||
},
|
||||
conversions: {
|
||||
color: "#3b82f6",
|
||||
className: "text-blue-600 dark:text-blue-400",
|
||||
},
|
||||
};
|
||||
|
||||
export const AnalyticsDashboard = () => {
|
||||
const [data, setData] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [timeRange, setTimeRange] = useState("30");
|
||||
const [metrics, setMetrics] = useState({
|
||||
activeUsers: true,
|
||||
newUsers: true,
|
||||
pageViews: true,
|
||||
conversions: true,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
@@ -75,322 +193,273 @@ export const AnalyticsDashboard = () => {
|
||||
return new Date(year, month - 1, day);
|
||||
};
|
||||
|
||||
const [selectedMetrics, setSelectedMetrics] = useState({
|
||||
activeUsers: true,
|
||||
newUsers: true,
|
||||
pageViews: true,
|
||||
conversions: true,
|
||||
});
|
||||
|
||||
const MetricToggle = ({ label, checked, onChange }) => (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id={label}
|
||||
checked={checked}
|
||||
onCheckedChange={onChange}
|
||||
className="dark:border-gray-600"
|
||||
/>
|
||||
<label
|
||||
htmlFor={label}
|
||||
className="text-sm font-medium leading-none text-gray-900 dark:text-gray-200 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
|
||||
const CustomLegend = ({ metrics, selectedMetrics }) => {
|
||||
// Separate items for left and right axes
|
||||
const leftAxisItems = Object.entries(metrics).filter(
|
||||
([key, metric]) => metric.yAxis === "left" && selectedMetrics[key]
|
||||
);
|
||||
|
||||
const rightAxisItems = Object.entries(metrics).filter(
|
||||
([key, metric]) => metric.yAxis === "right" && selectedMetrics[key]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex justify-between mt-4">
|
||||
<div className="flex flex-col space-y-2">
|
||||
<h4 className="font-semibold text-gray-700 dark:text-gray-300">
|
||||
Left Axis
|
||||
</h4>
|
||||
{leftAxisItems.map(([key, metric]) => (
|
||||
<div key={key} className="flex items-center space-x-2">
|
||||
<div
|
||||
style={{ backgroundColor: metric.color }}
|
||||
className="w-3 h-3 rounded-full"
|
||||
></div>
|
||||
<span className="text-gray-900 dark:text-gray-100">
|
||||
{metric.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col space-y-2">
|
||||
<h4 className="font-semibold text-gray-700 dark:text-gray-300">
|
||||
Right Axis
|
||||
</h4>
|
||||
{rightAxisItems.map(([key, metric]) => (
|
||||
<div key={key} className="flex items-center space-x-2">
|
||||
<div
|
||||
style={{ backgroundColor: metric.color }}
|
||||
className="w-3 h-3 rounded-full"
|
||||
></div>
|
||||
<span className="text-gray-900 dark:text-gray-100">
|
||||
{metric.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const formatXAxis = (date) => {
|
||||
if (!date) return "";
|
||||
return date.toLocaleDateString([], { month: "short", day: "numeric" });
|
||||
};
|
||||
|
||||
const metrics = {
|
||||
activeUsers: {
|
||||
label: "Active Users",
|
||||
color: "#8b5cf6",
|
||||
yAxis: "left"
|
||||
},
|
||||
newUsers: {
|
||||
label: "New Users",
|
||||
color: "#10b981",
|
||||
yAxis: "left"
|
||||
},
|
||||
pageViews: {
|
||||
label: "Page Views",
|
||||
color: "#f59e0b",
|
||||
yAxis: "right"
|
||||
},
|
||||
conversions: {
|
||||
label: "Conversions",
|
||||
color: "#3b82f6",
|
||||
yAxis: "right"
|
||||
},
|
||||
};
|
||||
|
||||
const calculateSummary = () => {
|
||||
const calculateSummaryStats = () => {
|
||||
if (!data.length) return null;
|
||||
|
||||
const totals = data.reduce(
|
||||
(acc, day) => ({
|
||||
activeUsers: acc.activeUsers + (Number(day.activeUsers) || 0),
|
||||
newUsers: acc.newUsers + (Number(day.newUsers) || 0),
|
||||
pageViews: acc.pageViews + (Number(day.pageViews) || 0),
|
||||
conversions: acc.conversions + (Number(day.conversions) || 0),
|
||||
avgSessionDuration:
|
||||
acc.avgSessionDuration + (Number(day.avgSessionDuration) || 0),
|
||||
bounceRate: acc.bounceRate + (Number(day.bounceRate) || 0),
|
||||
activeUsers: acc.activeUsers + day.activeUsers,
|
||||
newUsers: acc.newUsers + day.newUsers,
|
||||
pageViews: acc.pageViews + day.pageViews,
|
||||
conversions: acc.conversions + day.conversions,
|
||||
}),
|
||||
{
|
||||
activeUsers: 0,
|
||||
newUsers: 0,
|
||||
pageViews: 0,
|
||||
conversions: 0,
|
||||
avgSessionDuration: 0,
|
||||
bounceRate: 0,
|
||||
}
|
||||
);
|
||||
|
||||
return {
|
||||
...totals,
|
||||
avgSessionDuration: totals.avgSessionDuration / data.length,
|
||||
bounceRate: totals.bounceRate / data.length,
|
||||
const averages = {
|
||||
activeUsers: totals.activeUsers / data.length,
|
||||
newUsers: totals.newUsers / data.length,
|
||||
pageViews: totals.pageViews / data.length,
|
||||
conversions: totals.conversions / data.length,
|
||||
};
|
||||
|
||||
return { totals, averages };
|
||||
};
|
||||
|
||||
const summary = calculateSummary();
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card className="bg-white dark:bg-gray-900">
|
||||
<CardContent className="h-96 flex items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-gray-400 dark:text-gray-500" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const formatXAxisDate = (date) => {
|
||||
if (!(date instanceof Date)) return "";
|
||||
return `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
};
|
||||
const summaryStats = calculateSummaryStats();
|
||||
|
||||
const CustomTooltip = ({ active, payload, label }) => {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-lg shadow-lg p-3">
|
||||
<p className="text-sm font-medium mb-2 text-gray-900 dark:text-gray-100">
|
||||
{label instanceof Date ? label.toLocaleDateString() : label}
|
||||
</p>
|
||||
{payload.map((entry, index) => (
|
||||
<p key={index} className="text-sm" style={{ color: entry.color }}>
|
||||
{`${entry.name}: ${Number(entry.value).toLocaleString()}`}
|
||||
<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">
|
||||
{label instanceof Date ? label.toLocaleDateString() : label}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{payload.map((entry, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex justify-between items-center text-sm"
|
||||
>
|
||||
<span style={{ color: entry.color }}>{entry.name}:</span>
|
||||
<span className="font-medium ml-4">
|
||||
{entry.value.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="bg-white dark:bg-gray-900">
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-start">
|
||||
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">
|
||||
Analytics Overview
|
||||
</CardTitle>
|
||||
<Select value={timeRange} onValueChange={setTimeRange}>
|
||||
<SelectTrigger className="w-36 bg-white dark:bg-gray-800">
|
||||
<SelectValue placeholder="Select range" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="7">Last 7 days</SelectItem>
|
||||
<SelectItem value="14">Last 14 days</SelectItem>
|
||||
<SelectItem value="30">Last 30 days</SelectItem>
|
||||
<SelectItem value="90">Last 90 days</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Card className="w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm">
|
||||
<CardHeader className="p-6 pb-4">
|
||||
<div className="flex flex-col space-y-2">
|
||||
<div className="flex justify-between items-start">
|
||||
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">
|
||||
Analytics Overview
|
||||
</CardTitle>
|
||||
<Select value={timeRange} onValueChange={setTimeRange}>
|
||||
<SelectTrigger className="w-[130px] h-9">
|
||||
<SelectValue placeholder="Select range" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="7">Last 7 days</SelectItem>
|
||||
<SelectItem value="14">Last 14 days</SelectItem>
|
||||
<SelectItem value="30">Last 30 days</SelectItem>
|
||||
<SelectItem value="90">Last 90 days</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{summary && (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
|
||||
<div className="p-4 rounded-lg bg-gray-50 dark:bg-gray-800">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Total Users
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||
{summary.activeUsers.toLocaleString()}
|
||||
</div>
|
||||
{loading ? (
|
||||
<SkeletonStats />
|
||||
) : summaryStats ? (
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 py-4">
|
||||
<StatCard
|
||||
title="Active Users"
|
||||
value={summaryStats.totals.activeUsers.toLocaleString()}
|
||||
description={`Avg: ${Math.round(
|
||||
summaryStats.averages.activeUsers
|
||||
).toLocaleString()} per day`}
|
||||
colorClass={METRIC_COLORS.activeUsers.className}
|
||||
/>
|
||||
<StatCard
|
||||
title="New Users"
|
||||
value={summaryStats.totals.newUsers.toLocaleString()}
|
||||
description={`Avg: ${Math.round(
|
||||
summaryStats.averages.newUsers
|
||||
).toLocaleString()} per day`}
|
||||
colorClass={METRIC_COLORS.newUsers.className}
|
||||
/>
|
||||
<StatCard
|
||||
title="Page Views"
|
||||
value={summaryStats.totals.pageViews.toLocaleString()}
|
||||
description={`Avg: ${Math.round(
|
||||
summaryStats.averages.pageViews
|
||||
).toLocaleString()} per day`}
|
||||
colorClass={METRIC_COLORS.pageViews.className}
|
||||
/>
|
||||
<StatCard
|
||||
title="Conversions"
|
||||
value={summaryStats.totals.conversions.toLocaleString()}
|
||||
description={`Avg: ${Math.round(
|
||||
summaryStats.averages.conversions
|
||||
).toLocaleString()} per day`}
|
||||
colorClass={METRIC_COLORS.conversions.className}
|
||||
/>
|
||||
</div>
|
||||
<div className="p-4 rounded-lg bg-gray-50 dark:bg-gray-800">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
) : null}
|
||||
|
||||
<div className="flex items-center flex-col sm:flex-row gap-0 sm:gap-4 pt-2">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<Button
|
||||
variant={metrics.activeUsers ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
activeUsers: !prev.activeUsers,
|
||||
}))
|
||||
}
|
||||
>
|
||||
Active Users
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.newUsers ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
newUsers: !prev.newUsers,
|
||||
}))
|
||||
}
|
||||
>
|
||||
New Users
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||
{summary.newUsers.toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 rounded-lg bg-gray-50 dark:bg-gray-800">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.pageViews ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
pageViews: !prev.pageViews,
|
||||
}))
|
||||
}
|
||||
>
|
||||
Page Views
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||
{summary.pageViews.toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 rounded-lg bg-gray-50 dark:bg-gray-800">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.conversions ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
conversions: !prev.conversions,
|
||||
}))
|
||||
}
|
||||
>
|
||||
Conversions
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||
{summary.conversions.toLocaleString()}
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<div className="h-[400px] mt-4">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart data={data}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
className="stroke-gray-200 dark:stroke-gray-700"
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickFormatter={formatXAxisDate}
|
||||
className="text-gray-600 dark:text-gray-300"
|
||||
/>
|
||||
<YAxis
|
||||
yAxisId="left"
|
||||
className="text-gray-600 dark:text-gray-300"
|
||||
/>
|
||||
<YAxis
|
||||
yAxisId="right"
|
||||
orientation="right"
|
||||
className="text-gray-600 dark:text-gray-300"
|
||||
/>
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Legend content={<CustomLegend metrics={metrics} selectedMetrics={selectedMetrics} />} />
|
||||
{selectedMetrics.activeUsers && (
|
||||
<Line
|
||||
<CardContent className="p-6 pt-0">
|
||||
{loading ? (
|
||||
<SkeletonChart />
|
||||
) : !data.length ? (
|
||||
<div className="flex items-center justify-center h-[400px] text-muted-foreground">
|
||||
<div className="text-center">
|
||||
<TrendingUp className="h-12 w-12 mx-auto mb-4" />
|
||||
<div className="font-medium mb-2">No analytics data available</div>
|
||||
<div className="text-sm">Try selecting a different time range</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-[400px] mt-4 bg-card rounded-lg p-0">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart
|
||||
data={data}
|
||||
margin={{ top: 5, right: 0, left: -5, bottom: 5 }}
|
||||
>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
className="stroke-muted"
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickFormatter={formatXAxis}
|
||||
className="text-xs"
|
||||
tick={{ fill: "currentColor" }}
|
||||
/>
|
||||
<YAxis
|
||||
yAxisId="left"
|
||||
type="monotone"
|
||||
dataKey="activeUsers"
|
||||
name="Active Users"
|
||||
stroke={metrics.activeUsers.color}
|
||||
dot={false}
|
||||
className="text-xs"
|
||||
tick={{ fill: "currentColor" }}
|
||||
/>
|
||||
)}
|
||||
{selectedMetrics.newUsers && (
|
||||
<Line
|
||||
yAxisId="left"
|
||||
type="monotone"
|
||||
dataKey="newUsers"
|
||||
name="New Users"
|
||||
stroke={metrics.newUsers.color}
|
||||
dot={false}
|
||||
/>
|
||||
)}
|
||||
{selectedMetrics.pageViews && (
|
||||
<Line
|
||||
<YAxis
|
||||
yAxisId="right"
|
||||
type="monotone"
|
||||
dataKey="pageViews"
|
||||
name="Page Views"
|
||||
stroke={metrics.pageViews.color}
|
||||
dot={false}
|
||||
orientation="right"
|
||||
className="text-xs"
|
||||
tick={{ fill: "currentColor" }}
|
||||
/>
|
||||
)}
|
||||
{selectedMetrics.conversions && (
|
||||
<Line
|
||||
yAxisId="right"
|
||||
type="monotone"
|
||||
dataKey="conversions"
|
||||
name="Conversions"
|
||||
stroke={metrics.conversions.color}
|
||||
dot={false}
|
||||
/>
|
||||
)}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-4 mt-4">
|
||||
<MetricToggle
|
||||
label="Active Users"
|
||||
checked={selectedMetrics.activeUsers}
|
||||
onChange={(checked) =>
|
||||
setSelectedMetrics((prev) => ({ ...prev, activeUsers: checked }))
|
||||
}
|
||||
/>
|
||||
<MetricToggle
|
||||
label="New Users"
|
||||
checked={selectedMetrics.newUsers}
|
||||
onChange={(checked) =>
|
||||
setSelectedMetrics((prev) => ({ ...prev, newUsers: checked }))
|
||||
}
|
||||
/>
|
||||
<MetricToggle
|
||||
label="Page Views"
|
||||
checked={selectedMetrics.pageViews}
|
||||
onChange={(checked) =>
|
||||
setSelectedMetrics((prev) => ({ ...prev, pageViews: checked }))
|
||||
}
|
||||
/>
|
||||
<MetricToggle
|
||||
label="Conversions"
|
||||
checked={selectedMetrics.conversions}
|
||||
onChange={(checked) =>
|
||||
setSelectedMetrics((prev) => ({ ...prev, conversions: checked }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Legend />
|
||||
{metrics.activeUsers && (
|
||||
<Line
|
||||
yAxisId="left"
|
||||
type="monotone"
|
||||
dataKey="activeUsers"
|
||||
name="Active Users"
|
||||
stroke={METRIC_COLORS.activeUsers.color}
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
/>
|
||||
)}
|
||||
{metrics.newUsers && (
|
||||
<Line
|
||||
yAxisId="left"
|
||||
type="monotone"
|
||||
dataKey="newUsers"
|
||||
name="New Users"
|
||||
stroke={METRIC_COLORS.newUsers.color}
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
/>
|
||||
)}
|
||||
{metrics.pageViews && (
|
||||
<Line
|
||||
yAxisId="right"
|
||||
type="monotone"
|
||||
dataKey="pageViews"
|
||||
name="Page Views"
|
||||
stroke={METRIC_COLORS.pageViews.color}
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
/>
|
||||
)}
|
||||
{metrics.conversions && (
|
||||
<Line
|
||||
yAxisId="right"
|
||||
type="monotone"
|
||||
dataKey="conversions"
|
||||
name="Conversions"
|
||||
stroke={METRIC_COLORS.conversions.color}
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
/>
|
||||
)}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
@@ -219,7 +219,7 @@ const KlaviyoCampaigns = ({ className }) => {
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="overflow-y-auto pl-4 max-h-[350px] mb-4">
|
||||
<CardContent className="overflow-y-auto pl-4 max-h-[400px] mb-4">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
@@ -31,6 +31,21 @@ import {
|
||||
} from "@/components/ui/table";
|
||||
import { format } from "date-fns";
|
||||
|
||||
const METRIC_COLORS = {
|
||||
activeUsers: {
|
||||
color: "#8b5cf6",
|
||||
className: "text-purple-600 dark:text-purple-400",
|
||||
},
|
||||
pages: {
|
||||
color: "#10b981",
|
||||
className: "text-emerald-600 dark:text-emerald-400",
|
||||
},
|
||||
sources: {
|
||||
color: "#f59e0b",
|
||||
className: "text-amber-600 dark:text-amber-400",
|
||||
},
|
||||
};
|
||||
|
||||
const formatNumber = (value, decimalPlaces = 0) => {
|
||||
return new Intl.NumberFormat("en-US", {
|
||||
minimumFractionDigits: decimalPlaces,
|
||||
@@ -46,6 +61,7 @@ const summaryCard = (label, sublabel, value, options = {}) => {
|
||||
isMonetary = false,
|
||||
isPercentage = false,
|
||||
decimalPlaces = 0,
|
||||
colorClass = METRIC_COLORS.activeUsers.className,
|
||||
} = options;
|
||||
|
||||
let displayValue;
|
||||
@@ -58,15 +74,17 @@ const summaryCard = (label, sublabel, value, options = {}) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
|
||||
<div className="text-lg md:text-sm lg:text-lg text-gray-900 dark:text-gray-100">
|
||||
{label}
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||
{displayValue}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">{sublabel}</div>
|
||||
</div>
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 px-4 py-2">
|
||||
<span className="text-md">{label}</span>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pt-0 pb-2">
|
||||
<div className={`text-2xl font-bold mb-1 ${colorClass}`}>
|
||||
{displayValue}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">{sublabel}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -113,54 +131,51 @@ const QuotaInfo = ({ tokenQuota }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<UITooltip>
|
||||
<TooltipTrigger>
|
||||
<div className="flex items-center text-xs text-gray-500 dark:text-gray-400 space-x-1">
|
||||
<span>Quota:</span>
|
||||
<span className={`font-medium ${getStatusColor(hourlyPercentage)}`}>
|
||||
{hourlyPercentage}%
|
||||
</span>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="bg-white dark:bg-gray-800 border dark:border-gray-700">
|
||||
<div className="space-y-3 p-2">
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900 dark:text-gray-100">
|
||||
Project Hourly
|
||||
</div>
|
||||
<div className={`${getStatusColor(hourlyPercentage)}`}>
|
||||
{projectHourlyRemaining.toLocaleString()} / 14,000 remaining
|
||||
</div>
|
||||
<>
|
||||
<div className="flex items-center font-semibold rounded-md space-x-1">
|
||||
<span>Quota:</span>
|
||||
<span className={`font-medium ${getStatusColor(hourlyPercentage)}`}>
|
||||
{hourlyPercentage}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="dark:border-gray-700">
|
||||
<div className="space-y-3 mt-2">
|
||||
<div>
|
||||
<div className="font-semibold text-gray-100">
|
||||
Project Hourly
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900 dark:text-gray-100">
|
||||
Daily
|
||||
</div>
|
||||
<div className={`${getStatusColor(dailyPercentage)}`}>
|
||||
{dailyRemaining.toLocaleString()} / 200,000 remaining
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900 dark:text-gray-100">
|
||||
Server Errors
|
||||
</div>
|
||||
<div className={`${getStatusColor(errorPercentage)}`}>
|
||||
{errorsConsumed} / 10 used this hour
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900 dark:text-gray-100">
|
||||
Thresholded Requests
|
||||
</div>
|
||||
<div className={`${getStatusColor(thresholdPercentage)}`}>
|
||||
{thresholdConsumed} / 120 used this hour
|
||||
</div>
|
||||
<div className={`${getStatusColor(hourlyPercentage)}`}>
|
||||
{projectHourlyRemaining.toLocaleString()} / 14,000 remaining
|
||||
</div>
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</UITooltip>
|
||||
</TooltipProvider>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-100">
|
||||
Daily
|
||||
</div>
|
||||
<div className={`${getStatusColor(dailyPercentage)}`}>
|
||||
{dailyRemaining.toLocaleString()} / 200,000 remaining
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-100">
|
||||
Server Errors
|
||||
</div>
|
||||
<div className={`${getStatusColor(errorPercentage)}`}>
|
||||
{errorsConsumed} / 10 used this hour
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-100">
|
||||
Thresholded Requests
|
||||
</div>
|
||||
<div className={`${getStatusColor(thresholdPercentage)}`}>
|
||||
{thresholdConsumed} / 120 used this hour
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -195,7 +210,9 @@ export const RealtimeAnalytics = () => {
|
||||
const matchingRow = data.timeSeriesResponse?.rows?.find(
|
||||
(row) => parseInt(row.dimensionValues[0].value) === i
|
||||
);
|
||||
const users = matchingRow ? parseInt(matchingRow.metricValues[0].value) : 0;
|
||||
const users = matchingRow
|
||||
? parseInt(matchingRow.metricValues[0].value)
|
||||
: 0;
|
||||
const timestamp = new Date(Date.now() - i * 60000);
|
||||
return {
|
||||
minute: -i,
|
||||
@@ -243,7 +260,9 @@ export const RealtimeAnalytics = () => {
|
||||
data.eventResponse?.rows
|
||||
?.filter(
|
||||
(row) =>
|
||||
!["session_start", "(other)"].includes(row.dimensionValues[0].value)
|
||||
!["session_start", "(other)"].includes(
|
||||
row.dimensionValues[0].value
|
||||
)
|
||||
)
|
||||
.map((row) => ({
|
||||
event: row.dimensionValues[0].value,
|
||||
@@ -343,31 +362,31 @@ export const RealtimeAnalytics = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="bg-white dark:bg-gray-900">
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">
|
||||
Real-Time Analytics
|
||||
</CardTitle>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
Last updated: {format(new Date(basicData.lastUpdated), "HH:mm:ss")}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<QuotaInfo tokenQuota={basicData.tokenQuota} />
|
||||
<Button
|
||||
variant={isPaused ? "default" : "secondary"}
|
||||
size="sm"
|
||||
onClick={togglePause}
|
||||
>
|
||||
{isPaused ? "Resume" : "Pause"}
|
||||
</Button>
|
||||
<Card className="w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm h-full">
|
||||
<CardHeader className="p-6 pb-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">
|
||||
Real-Time Analytics
|
||||
</CardTitle>
|
||||
<div className="flex items-end">
|
||||
<TooltipProvider>
|
||||
<UITooltip>
|
||||
<TooltipTrigger>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Last updated:{" "}
|
||||
{format(new Date(basicData.lastUpdated), "h:mm a")}
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="p-3">
|
||||
<QuotaInfo tokenQuota={basicData.tokenQuota} />
|
||||
</TooltipContent>
|
||||
</UITooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<CardContent className="p-6 pt-0">
|
||||
{error && (
|
||||
<Alert variant="destructive" className="mb-4">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
@@ -375,16 +394,18 @@ export const RealtimeAnalytics = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-1 mb-3">
|
||||
{summaryCard(
|
||||
"Active Users",
|
||||
"Last 30 minutes",
|
||||
basicData.last30MinUsers
|
||||
"Active users",
|
||||
basicData.last30MinUsers,
|
||||
{ colorClass: METRIC_COLORS.activeUsers.className }
|
||||
)}
|
||||
{summaryCard(
|
||||
"Recent Activity",
|
||||
"Last 5 minutes",
|
||||
basicData.last5MinUsers
|
||||
"Active users",
|
||||
basicData.last5MinUsers,
|
||||
{ colorClass: METRIC_COLORS.activeUsers.className }
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -396,40 +417,58 @@ export const RealtimeAnalytics = () => {
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="activity">
|
||||
<div className="h-[300px]">
|
||||
<div className="h-[235px] bg-card rounded-lg">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={basicData.byMinute}>
|
||||
<BarChart
|
||||
data={basicData.byMinute}
|
||||
margin={{ top: 5, right: 5, left: -35, bottom: -5 }}
|
||||
>
|
||||
<XAxis
|
||||
dataKey="minute"
|
||||
tickFormatter={(value) => value + "m ago"}
|
||||
className="text-gray-600 dark:text-gray-300"
|
||||
tickFormatter={(value) => value + "m"}
|
||||
className="text-xs"
|
||||
tick={{ fill: "currentColor" }}
|
||||
/>
|
||||
<YAxis className="text-gray-600 dark:text-gray-300" />
|
||||
<YAxis className="text-xs" tick={{ fill: "currentColor" }} />
|
||||
<Tooltip
|
||||
content={({ active, payload }) => {
|
||||
if (active && payload && payload.length) {
|
||||
const timestamp = new Date(
|
||||
Date.now() + payload[0].payload.minute * 60000
|
||||
);
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-lg shadow-lg p-3">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
{payload[0].payload.minute}m ago
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">
|
||||
{payload[0].value} active users
|
||||
</p>
|
||||
</div>
|
||||
<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">
|
||||
{format(timestamp, "h:mm a")}
|
||||
</p>
|
||||
<div className="flex justify-between items-center text-sm">
|
||||
<span
|
||||
style={{
|
||||
color: METRIC_COLORS.activeUsers.color,
|
||||
}}
|
||||
>
|
||||
Active Users:
|
||||
</span>
|
||||
<span className="font-medium ml-4">
|
||||
{payload[0].value.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}}
|
||||
/>
|
||||
<Bar dataKey="users" fill="#8b5cf6" />
|
||||
<Bar dataKey="users" fill={METRIC_COLORS.activeUsers.color} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="pages">
|
||||
<div className="space-y-2 h-[300px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-300 dark:hover:scrollbar-thumb-gray-600">
|
||||
<div className="space-y-2 h-[230px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-300 dark:hover:scrollbar-thumb-gray-600">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="dark:border-gray-800">
|
||||
@@ -447,7 +486,9 @@ export const RealtimeAnalytics = () => {
|
||||
<TableCell className="font-medium text-gray-900 dark:text-gray-100">
|
||||
{page.path}
|
||||
</TableCell>
|
||||
<TableCell className="text-right text-gray-600 dark:text-gray-300">
|
||||
<TableCell
|
||||
className={`text-right ${METRIC_COLORS.pages.className}`}
|
||||
>
|
||||
{page.activeUsers}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
@@ -458,7 +499,7 @@ export const RealtimeAnalytics = () => {
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="sources">
|
||||
<div className="space-y-2 h-[300px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-300 dark:hover:scrollbar-thumb-gray-600">
|
||||
<div className="space-y-2 h-[230px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-300 dark:hover:scrollbar-thumb-gray-600">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="dark:border-gray-800">
|
||||
@@ -476,7 +517,9 @@ export const RealtimeAnalytics = () => {
|
||||
<TableCell className="font-medium text-gray-900 dark:text-gray-100">
|
||||
{source.source}
|
||||
</TableCell>
|
||||
<TableCell className="text-right text-gray-600 dark:text-gray-300">
|
||||
<TableCell
|
||||
className={`text-right ${METRIC_COLORS.sources.className}`}
|
||||
>
|
||||
{source.activeUsers}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
@@ -193,7 +193,7 @@ export const UserBehaviorDashboard = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="bg-white dark:bg-gray-900">
|
||||
<Card className="bg-white dark:bg-gray-900 h-full">
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-start">
|
||||
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">
|
||||
@@ -227,7 +227,7 @@ export const UserBehaviorDashboard = () => {
|
||||
|
||||
<TabsContent
|
||||
value="pages"
|
||||
className="mt-4 space-y-2 h-full max-h-[440px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-300 dark:hover:scrollbar-thumb-gray-600 pr-2"
|
||||
className="mt-4 space-y-2 h-full max-h-[540px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-300 dark:hover:scrollbar-thumb-gray-600 pr-2"
|
||||
>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
@@ -269,7 +269,7 @@ export const UserBehaviorDashboard = () => {
|
||||
|
||||
<TabsContent
|
||||
value="sources"
|
||||
className="mt-4 space-y-2 h-full max-h-[440px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-300 dark:hover:scrollbar-thumb-gray-600 pr-2"
|
||||
className="mt-4 space-y-2 h-full max-h-[540px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-300 dark:hover:scrollbar-thumb-gray-600 pr-2"
|
||||
>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
@@ -311,7 +311,7 @@ export const UserBehaviorDashboard = () => {
|
||||
|
||||
<TabsContent
|
||||
value="devices"
|
||||
className="mt-4 space-y-2 h-full max-h-[440px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-300 dark:hover:scrollbar-thumb-gray-600 pr-2"
|
||||
className="mt-4 space-y-2 h-full max-h-[540px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-300 dark:hover:scrollbar-thumb-gray-600 pr-2"
|
||||
>
|
||||
<div className="h-60">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
|
||||
Reference in New Issue
Block a user