vitalitymailg/shorturl-analytics
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chart

Browse Source
This commit is contained in:
William Tso
2025-03-24 18:25:05 +08:00
parent 98c5f0f154
commit f41a6b6e5b
2 changed files with 549 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

684
app/links/[id]/page.tsx
View File

@@ -16,6 +16,11 @@ import {
ReferrerItem, ReferrerItem,
} from "@/app/api/types"; } from "@/app/api/types";
import { TimeGranularity } from "@/lib/analytics"; import { TimeGranularity } from "@/lib/analytics";
import {
PieChart, Pie, ResponsiveContainer, Tooltip, Cell, Legend,
BarChart, Bar, XAxis, YAxis, CartesianGrid, LineChart, Line,
LabelList
} from "recharts";
interface LinkDetails { interface LinkDetails {
id: string; id: string;
@@ -206,7 +211,28 @@ export default function LinkDetailsPage({
} }
const details = await response.json(); const details = await response.json();
setLinkDetails(details); console.log("Link details:", details); // 添加日志以确认 API 响应
// 将 API 返回的数据映射到组件需要的格式
setLinkDetails({
id: details.link_id || linkId,
name: details.title || "Untitled Link",
shortUrl: details.short_url || window.location.hostname + "/" + details.link_id,
originalUrl: details.original_url || "",
creator: details.created_by || "Unknown",
createdAt: details.created_at || new Date().toISOString(),
visits: details.visits || 0,
visitChange: details.visit_change || 0,
uniqueVisitors: details.unique_visitors || 0,
uniqueVisitorsChange: details.unique_visitors_change || 0,
avgTime: formatTime(details.avg_time_spent || 0),
avgTimeChange: details.avg_time_change || 0,
conversionRate: details.conversion_rate || 0,
conversionChange: details.conversion_change || 0,
status: details.is_active ? "active" : "inactive",
tags: details.tags || [],
});
setLoading(false); setLoading(false);
// 获取分析数据 // 获取分析数据
@@ -689,77 +715,78 @@ export default function LinkDetailsPage({
<h3 className="mb-4 font-medium text-md text-foreground"> <h3 className="mb-4 font-medium text-md text-foreground">
Device Types Device Types
</h3> </h3>
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
<div className="flex flex-col items-center"> {/* 饼图显示 */}
<div className="mb-2 text-sm font-medium text-text-secondary"> <div className="flex flex-col items-center">
Mobile <div className="w-full h-64">
</div> <ResponsiveContainer width="100%" height="100%">
<div className="text-2xl font-bold text-foreground"> <PieChart>
{overviewData.deviceTypes.mobile} <Pie
</div> data={[
<div className="mt-1 text-xs text-text-secondary"> { name: 'Mobile', value: overviewData.deviceTypes.mobile, fill: "#3498db" },
{overviewData.totalVisits { name: 'Desktop', value: overviewData.deviceTypes.desktop, fill: "#2ecc71" },
? Math.round( { name: 'Tablet', value: overviewData.deviceTypes.tablet, fill: "#f39c12" },
(overviewData.deviceTypes.mobile / { name: 'Other', value: overviewData.deviceTypes.other, fill: "#e74c3c" }
overviewData.totalVisits) * ].filter(item => item.value > 0)}
100 cx="50%"
) cy="50%"
: 0} innerRadius={60}
% outerRadius={90}
</div> fill="#8884d8"
dataKey="value"
nameKey="name"
label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
labelLine={true}
>
{/* 为每种设备类型设置不同的颜色 */}
{[
{ key: "mobile", name: 'Mobile', value: overviewData.deviceTypes.mobile, fill: "#3498db" },
{ key: "desktop", name: 'Desktop', value: overviewData.deviceTypes.desktop, fill: "#2ecc71" },
{ key: "tablet", name: 'Tablet', value: overviewData.deviceTypes.tablet, fill: "#f39c12" },
{ key: "other", name: 'Other', value: overviewData.deviceTypes.other, fill: "#e74c3c" }
]
.filter(item => item.value > 0)
.map(item => (
<Cell key={item.key} fill={item.fill} />
))
}
</Pie>
<Tooltip
formatter={(value) => [`${value} 访问`, '数量']}
separator=": "
/>
<Legend />
</PieChart>
</ResponsiveContainer>
</div> </div>
<div className="flex flex-col items-center"> <div className="grid grid-cols-4 gap-8 mt-4 text-center">
<div className="mb-2 text-sm font-medium text-text-secondary"> <div>
Desktop <div className="text-sm font-medium text-text-secondary">Mobile</div>
<div className="text-lg font-bold text-foreground">{overviewData.deviceTypes.mobile}</div>
<div className="text-xs text-text-secondary">
{overviewData.totalVisits ? Math.round((overviewData.deviceTypes.mobile / overviewData.totalVisits) * 100) : 0}%
</div>
</div> </div>
<div className="text-2xl font-bold text-foreground"> <div>
{overviewData.deviceTypes.desktop} <div className="text-sm font-medium text-text-secondary">Desktop</div>
<div className="text-lg font-bold text-foreground">{overviewData.deviceTypes.desktop}</div>
<div className="text-xs text-text-secondary">
{overviewData.totalVisits ? Math.round((overviewData.deviceTypes.desktop / overviewData.totalVisits) * 100) : 0}%
</div>
</div> </div>
<div className="mt-1 text-xs text-text-secondary"> <div>
{overviewData.totalVisits <div className="text-sm font-medium text-text-secondary">Tablet</div>
? Math.round( <div className="text-lg font-bold text-foreground">{overviewData.deviceTypes.tablet}</div>
(overviewData.deviceTypes.desktop / <div className="text-xs text-text-secondary">
overviewData.totalVisits) * {overviewData.totalVisits ? Math.round((overviewData.deviceTypes.tablet / overviewData.totalVisits) * 100) : 0}%
100 </div>
)
: 0}
%
</div> </div>
</div> <div>
<div className="flex flex-col items-center"> <div className="text-sm font-medium text-text-secondary">Other</div>
<div className="mb-2 text-sm font-medium text-text-secondary"> <div className="text-lg font-bold text-foreground">{overviewData.deviceTypes.other}</div>
Tablet <div className="text-xs text-text-secondary">
</div> {overviewData.totalVisits ? Math.round((overviewData.deviceTypes.other / overviewData.totalVisits) * 100) : 0}%
<div className="text-2xl font-bold text-foreground"> </div>
{overviewData.deviceTypes.tablet}
</div>
<div className="mt-1 text-xs text-text-secondary">
{overviewData.totalVisits
? Math.round(
(overviewData.deviceTypes.tablet /
overviewData.totalVisits) *
100
)
: 0}
%
</div>
</div>
<div className="flex flex-col items-center">
<div className="mb-2 text-sm font-medium text-text-secondary">
Other
</div>
<div className="text-2xl font-bold text-foreground">
{overviewData.deviceTypes.other}
</div>
<div className="mt-1 text-xs text-text-secondary">
{overviewData.totalVisits
? Math.round(
(overviewData.deviceTypes.other /
overviewData.totalVisits) *
100
)
: 0}
%
</div> </div>
</div> </div>
</div> </div>
@@ -781,26 +808,41 @@ export default function LinkDetailsPage({
</div> </div>
</div> </div>
<div className="relative pt-2"> <div className="h-80">
{funnelData.steps.map((step) => ( <ResponsiveContainer width="100%" height="100%">
<div key={step.name} className="mb-4"> <BarChart
<div className="flex justify-between items-center mb-1"> layout="vertical"
<span className="text-sm font-medium"> data={funnelData.steps}
{step.name} margin={{ top: 20, right: 30, left: 40, bottom: 5 }}
</span> >
<span className="text-sm text-text-secondary"> <CartesianGrid strokeDasharray="3 3" />
{step.value} ({(step.percent || 0).toFixed(1)} <XAxis type="number" />
%) <YAxis
</span> dataKey="name"
</div> type="category"
<div className="w-full bg-card-border rounded-full h-2.5"> width={100}
<div tick={{ fontSize: 14 }}
className="bg-accent-blue h-2.5 rounded-full" />
style={{ width: `${step.percent || 0}%` }} <Tooltip
></div> formatter={(value: number, name: string, props: any) => [
</div> `${value} (${props.payload.percent.toFixed(1)}%)`,
</div> "Value"
))} ]}
/>
<Bar
dataKey="value"
fill="#3498db"
radius={[0, 4, 4, 0]}
>
<LabelList
dataKey="percent"
position="right"
formatter={(value: number) => `${value.toFixed(1)}%`}
style={{ fill: "#666", fontSize: 12 }}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
</div> </div>
</div> </div>
)} )}
@@ -850,38 +892,51 @@ export default function LinkDetailsPage({
</div> </div>
</div> </div>
{/* 简单趋势表格 */} {/* 图表展示访问趋势 */}
<div className="overflow-x-auto"> <div className="h-80">
<table className="min-w-full divide-y divide-card-border"> <ResponsiveContainer width="100%" height="100%">
<thead> <LineChart
<tr> data={trendsData.trends}
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary"> margin={{ top: 20, right: 30, left: 20, bottom: 10 }}
Time >
</th> <CartesianGrid strokeDasharray="3 3" />
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary"> <XAxis
Visits dataKey="timestamp"
</th> tick={{ fontSize: 12 }}
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary"> interval="preserveStartEnd"
Unique Visitors />
</th> <YAxis
</tr> tickFormatter={(value: number) => value.toLocaleString()}
</thead> />
<tbody className="divide-y bg-card-bg divide-card-border"> <Tooltip
{trendsData.trends.map((trend, i) => ( formatter={(value: number, name: string) => [
<tr key={i}> value.toLocaleString(),
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground"> name === "visits" ? "访问量" : "唯一访客"
{trend.timestamp} ]}
</td> />
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground"> <Legend
{trend.visits} verticalAlign="top"
</td> height={36}
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground"> formatter={(value: string) => value === "visits" ? "访问量" : "唯一访客"}
{trend.uniqueVisitors} />
</td> <Line
</tr> type="monotone"
))} dataKey="visits"
</tbody> stroke="#3498db"
</table> strokeWidth={2}
activeDot={{ r: 6 }}
name="visits"
/>
<Line
type="monotone"
dataKey="uniqueVisitors"
stroke="#2ecc71"
strokeWidth={2}
dot={{ r: 4 }}
name="uniqueVisitors"
/>
</LineChart>
</ResponsiveContainer>
</div> </div>
</div> </div>
</div> </div>
@@ -895,6 +950,63 @@ export default function LinkDetailsPage({
<h3 className="mb-4 font-medium text-md text-foreground"> <h3 className="mb-4 font-medium text-md text-foreground">
Link Performance Link Performance
</h3> </h3>
{/* 添加图表展示 */}
<div className="mb-8">
<div className="flex flex-col md:flex-row gap-6">
{/* 柱状图展示总点击量和独立访客 */}
<div className="h-80 md:w-1/2">
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={[
{ name: 'Total Clicks', value: performanceData.totalClicks },
{ name: 'Unique Visitors', value: performanceData.uniqueVisitors },
{ name: 'Active Days', value: performanceData.activeDays },
{ name: 'Unique Referrers', value: performanceData.uniqueReferrers }
]}
margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip formatter={(value: number) => [value.toLocaleString(), 'Count']} />
<Legend />
<Bar dataKey="value" name="Value" fill="#3498db" radius={[4, 4, 0, 0]}>
<LabelList dataKey="value" position="top" formatter={(value: number) => value.toLocaleString()} />
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
{/* 饼图展示跳出率、转化率等比例数据 */}
<div className="h-80 md:w-1/2">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={[
{ name: 'Bounce Rate', value: performanceData.bounceRate, fill: '#e74c3c' },
{ name: 'Conversion Rate', value: performanceData.conversionRate, fill: '#2ecc71' },
{ name: 'Non-converting, Non-bounce Visits',
value: 100 - performanceData.bounceRate - performanceData.conversionRate,
fill: '#3498db' }
]}
cx="50%"
cy="50%"
innerRadius={60}
outerRadius={90}
dataKey="value"
nameKey="name"
label={({name, value}: {name: string, value: number}) => `${name}: ${value}%`}
labelLine={true}
/>
<Tooltip formatter={(value: number) => [`${value}%`, 'Percentage']} />
<Legend />
</PieChart>
</ResponsiveContainer>
</div>
</div>
</div>
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4"> <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="mb-1 text-sm font-medium text-text-secondary"> <div className="mb-1 text-sm font-medium text-text-secondary">
@@ -975,6 +1087,89 @@ export default function LinkDetailsPage({
<h3 className="mb-4 font-medium text-md text-foreground"> <h3 className="mb-4 font-medium text-md text-foreground">
Popular Referrers Popular Referrers
</h3> </h3>
{/* 添加图表展示 */}
<div className="mb-8">
<div className="flex flex-col md:flex-row gap-4">
{/* 条形图展示访问量和独立访客 */}
<div className="h-80 md:w-2/3">
<ResponsiveContainer width="100%" height="100%">
<BarChart
layout="vertical"
data={referrersData.referrers.slice(0, 10)} // 只显示前10个引荐来源
margin={{ top: 20, right: 30, left: 120, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" horizontal={false} />
<XAxis type="number" />
<YAxis
dataKey="source"
type="category"
tick={{ fontSize: 12 }}
width={120}
/>
<Tooltip
formatter={(value: number, name: string) => [
value,
name === "visitCount" ? "访问量" : "独立访客"
]}
/>
<Legend verticalAlign="top" height={36} />
<Bar
name="访问量"
dataKey="visitCount"
fill="#3498db"
radius={[0, 4, 4, 0]}
>
<LabelList
dataKey="percent"
position="right"
formatter={(value: number) => `${value}%`}
style={{ fill: "#666", fontSize: 12 }}
/>
</Bar>
<Bar
name="独立访客"
dataKey="uniqueVisitors"
fill="#2ecc71"
radius={[0, 4, 4, 0]}
/>
</BarChart>
</ResponsiveContainer>
</div>
{/* 饼图展示来源占比 */}
<div className="h-80 md:w-1/3">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={referrersData.referrers.slice(0, 6)} // 只显示前6个引荐来源
dataKey="visitCount"
nameKey="source"
cx="50%"
cy="50%"
innerRadius={60}
outerRadius={90}
paddingAngle={2}
fill="#8884d8"
label={({source, percent}: {source: string, percent: number}) =>
`${source.substring(0, 10)}...: ${(percent * 100).toFixed(0)}%`
}
labelLine={false}
>
{referrersData.referrers.slice(0, 6).map((entry, index) => (
<Cell key={`cell-${index}`} fill={['#3498db', '#2ecc71', '#9b59b6', '#f39c12', '#e74c3c', '#1abc9c'][index % 6]} />
))}
</Pie>
<Tooltip />
<Legend
formatter={(value: string) => value.length > 20 ? value.substring(0, 20) + '...' : value}
/>
</PieChart>
</ResponsiveContainer>
</div>
</div>
</div>
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="min-w-full divide-y divide-card-border"> <table className="min-w-full divide-y divide-card-border">
<thead> <thead>
@@ -1031,6 +1226,36 @@ export default function LinkDetailsPage({
<h3 className="mb-4 font-medium text-md text-foreground"> <h3 className="mb-4 font-medium text-md text-foreground">
Device Types Device Types
</h3> </h3>
{/* 添加设备类型饼图 */}
<div className="mb-8">
<div className="h-80">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={deviceData.deviceTypes}
dataKey="count"
nameKey="name"
cx="50%"
cy="50%"
innerRadius={60}
outerRadius={90}
fill="#8884d8"
label={({name, percent}: {name: string, percent: number}) =>
`${name}: ${(percent * 100).toFixed(0)}%`
}
>
{deviceData.deviceTypes.map((entry, index) => (
<Cell key={`device-type-cell-${index}`} fill={['#3498db', '#2ecc71', '#9b59b6', '#f39c12', '#e74c3c'][index % 5]} />
))}
</Pie>
<Tooltip formatter={(value: number) => [`${value} 次访问`, '访问量']} />
<Legend />
</PieChart>
</ResponsiveContainer>
</div>
</div>
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
{deviceData.deviceTypes.map( {deviceData.deviceTypes.map(
(device: DeviceItem, i: number) => ( (device: DeviceItem, i: number) => (
@@ -1054,6 +1279,44 @@ export default function LinkDetailsPage({
<h3 className="mb-4 font-medium text-md text-foreground"> <h3 className="mb-4 font-medium text-md text-foreground">
Device Brands Device Brands
</h3> </h3>
{/* 添加设备品牌横向条形图 */}
<div className="mb-8">
<div className="h-80">
<ResponsiveContainer width="100%" height="100%">
<BarChart
layout="vertical"
data={deviceData.deviceBrands.slice(0, 10)}
margin={{ top: 5, right: 30, left: 100, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" horizontal={false} />
<XAxis type="number" />
<YAxis
dataKey="name"
type="category"
tick={{ fontSize: 12 }}
width={100}
/>
<Tooltip
formatter={(value: number) => [`${value} 次访问`, '访问量']}
/>
<Bar
dataKey="count"
name="访问量"
fill="#3498db"
radius={[0, 4, 4, 0]}
>
<LabelList
dataKey="percent"
position="right"
formatter={(value: number) => `${value}%`}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
</div>
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="min-w-full divide-y divide-card-border"> <table className="min-w-full divide-y divide-card-border">
<thead> <thead>
@@ -1098,6 +1361,81 @@ export default function LinkDetailsPage({
<h3 className="mb-4 font-medium text-md text-foreground"> <h3 className="mb-4 font-medium text-md text-foreground">
Platform Distribution Platform Distribution
</h3> </h3>
{/* 添加图表展示 */}
<div className="mb-8">
<div className="flex flex-col md:flex-row gap-6">
{/* 操作系统分布饼图 */}
<div className="h-80 md:w-1/2">
<h4 className="mb-3 text-sm font-medium text-text-secondary text-center">
Operating Systems
</h4>
<ResponsiveContainer width="100%" height="90%">
<PieChart>
<Pie
data={platformData.platforms.slice(0, 6)}
dataKey="count"
nameKey="name"
cx="50%"
cy="50%"
innerRadius={60}
outerRadius={90}
paddingAngle={2}
fill="#8884d8"
label={({name, percent}: {name: string, percent: number}) =>
`${name}: ${(percent * 100).toFixed(0)}%`
}
labelLine={true}
>
{platformData.platforms.slice(0, 6).map((entry, index) => (
<Cell key={`os-cell-${index}`} fill={['#3498db', '#2ecc71', '#9b59b6', '#f39c12', '#e74c3c', '#1abc9c'][index % 6]} />
))}
</Pie>
<Tooltip formatter={(value: number, name: string) => [`${value} 次访问`, name]} />
<Legend formatter={(value: string) => value.length > 25 ? value.substring(0, 25) + '...' : value} />
</PieChart>
</ResponsiveContainer>
</div>
{/* 浏览器分布条形图 */}
<div className="h-80 md:w-1/2">
<h4 className="mb-3 text-sm font-medium text-text-secondary text-center">
Browsers
</h4>
<ResponsiveContainer width="100%" height="90%">
<BarChart
data={platformData.browsers.slice(0, 8)}
layout="vertical"
margin={{ top: 5, right: 30, left: 80, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" horizontal={false} />
<XAxis type="number" />
<YAxis
type="category"
dataKey="name"
tick={{ fontSize: 12 }}
width={80}
/>
<Tooltip formatter={(value: number) => [`${value} 次访问`, '数量']} />
<Legend />
<Bar
dataKey="count"
name="访问量"
fill="#3498db"
radius={[0, 4, 4, 0]}
>
<LabelList
dataKey="percent"
position="right"
formatter={(value: number) => `${value}%`}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
</div>
</div>
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
<div> <div>
<h4 className="mb-3 text-sm font-medium text-text-secondary"> <h4 className="mb-3 text-sm font-medium text-text-secondary">
@@ -1225,6 +1563,42 @@ export default function LinkDetailsPage({
<h3 className="mb-4 font-medium text-md text-foreground"> <h3 className="mb-4 font-medium text-md text-foreground">
Scan Locations Scan Locations
</h3> </h3>
{/* 添加扫描位置饼图 */}
<div className="mb-8">
<div className="h-80">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={qrCodeData.locations.slice(0, 8)}
dataKey="scanCount"
nameKey="city"
cx="50%"
cy="50%"
innerRadius={60}
outerRadius={90}
paddingAngle={2}
fill="#8884d8"
label={({city, country, percent}: {city: string, country: string, percent: number}) =>
`${city}: ${(percent * 100).toFixed(0)}%`
}
>
{qrCodeData.locations.slice(0, 8).map((entry, index) => (
<Cell key={`location-cell-${index}`} fill={['#3498db', '#2ecc71', '#9b59b6', '#f39c12', '#e74c3c', '#1abc9c', '#34495e', '#16a085'][index % 8]} />
))}
</Pie>
<Tooltip formatter={(value: number, name: string) => [`${value} 次扫描`, name]} />
<Legend
formatter={(value: string) => {
const location = qrCodeData.locations.find(loc => loc.city === value);
return location ? `${location.city}, ${location.country}` : value;
}}
/>
</PieChart>
</ResponsiveContainer>
</div>
</div>
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="min-w-full divide-y divide-card-border"> <table className="min-w-full divide-y divide-card-border">
<thead> <thead>
@@ -1263,40 +1637,46 @@ export default function LinkDetailsPage({
<h3 className="mb-4 font-medium text-md text-foreground"> <h3 className="mb-4 font-medium text-md text-foreground">
Scan Time Distribution Scan Time Distribution
</h3> </h3>
<div className="grid grid-cols-1 gap-6">
<div className="overflow-x-auto"> {/* 添加扫描时间分布柱状图 */}
<table className="min-w-full divide-y divide-card-border"> <div className="mb-8">
<thead> <div className="h-80">
<tr> <ResponsiveContainer width="100%" height="100%">
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary"> <BarChart
Hour data={qrCodeData.hourlyDistribution}
</th> margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary"> >
Scans <CartesianGrid strokeDasharray="3 3" />
</th> <XAxis
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary"> dataKey="hour"
Percentage label={{ value: 'Hour of Day', position: 'insideBottom', offset: -5 }}
</th> />
</tr> <YAxis
</thead> label={{ value: 'Scan Count', angle: -90, position: 'insideLeft' }}
<tbody className="divide-y bg-card-bg divide-card-border"> />
{qrCodeData.hourlyDistribution.map((hour) => ( <Tooltip
<tr key={hour.hour}> formatter={(value: number) => [`${value} 次扫描`, '扫描次数']}
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground"> labelFormatter={(hour) => `${hour}:00 - ${hour}:59`}
{hour.hour}:00 - {hour.hour}:59 />
</td> <Bar
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground"> dataKey="scanCount"
{hour.scanCount} name="扫描次数"
</td> fill="#3498db"
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground"> radius={[4, 4, 0, 0]}
{hour.percent.toFixed(1)}% >
</td> <LabelList
</tr> dataKey="percent"
))} position="top"
</tbody> formatter={(value: number) => `${value.toFixed(1)}%`}
</table> />
</Bar>
</BarChart>
</ResponsiveContainer>
</div> </div>
</div> </div>
<div className="grid grid-cols-1 gap-6">
</div>
</div> </div>
</div> </div>
)} )}

19
windmill/sync_shorturl_event_from_mongo.ts
View File

@@ -479,8 +479,23 @@ export async function main(
.toArray(); .toArray();
if (records.length === 0) { if (records.length === 0) {
logWithTimestamp(`第 ${page+1} 批次没有找到数据，结束处理`); logWithTimestamp(`第 ${page+1} 批次没有找到数据，但将继续尝试后续批次...`);
break;
// 更新查询条件，以确保能找到后续数据
// 更新查询时间，增加一定的时间窗口以尝试找到后续数据
const timeGap = 3600 * 1000; // 1小时的毫秒数
lastCreateTime += timeGap;
query.createTime = { $gt: lastCreateTime };
if (lastId) {
// 移除ID条件，因为我们已经跳过了时间
delete query._id;
}
logWithTimestamp(`调整查询条件向前搜索: 创建时间 > ${new Date(lastCreateTime).toISOString()}`);
// 继续下一批次，不中断循环
continue;
} }
logWithTimestamp(`获取到 ${records.length} 条记录，开始处理...`); logWithTimestamp(`获取到 ${records.length} 条记录，开始处理...`);