diff --git a/src/lib/components/admin/AnalyticsPanel.svelte b/src/lib/components/admin/AnalyticsPanel.svelte index 22d6ca2..4c025d4 100644 --- a/src/lib/components/admin/AnalyticsPanel.svelte +++ b/src/lib/components/admin/AnalyticsPanel.svelte @@ -25,9 +25,9 @@ let d1RowsWritten = $state(0); let r2PayloadSize = $state(0); - let d1ReadDaily = $derived(d1Data.length > 0 ? d1RowsRead / 30 : 0); + let d1ReadDaily = $derived(d1Data.length > 0 ? Math.round(d1RowsRead / 30) : 0); let d1ReadPercent = $derived(d1Data.length > 0 ? (d1ReadDaily / 5000000) * 100 : 0); - let d1WriteDaily = $derived(d1Data.length > 0 ? d1RowsWritten / 30 : 0); + let d1WriteDaily = $derived(d1Data.length > 0 ? Math.round(d1RowsWritten / 30) : 0); let d1WritePercent = $derived(d1Data.length > 0 ? (d1WriteDaily / 100000) * 100 : 0); let r2Percent = $derived( r2Data.length > 0 ? (r2PayloadSize / (10 * 1024 * 1024 * 1024)) * 100 : 0 @@ -89,7 +89,8 @@ const ChartJS = await import('chart.js/auto'); const Chart = ChartJS.default || ChartJS; - const labels = data.map((d: any) => d.dimensions.date); + // 格式化日期:去除年份,将 2026-09-27 转为 09-27,降低 X 轴文字密度 + const labels = data.map((d: any) => d.dimensions.date.substring(5)); const requests = data.map((d: any) => d.sum.requests); const pvs = data.map((d: any) => d.sum.pageViews); @@ -136,6 +137,12 @@ } }, scales: { + x: { + ticks: { + maxRotation: 45, + maxTicksLimit: 15 // 最多显示 15 个刻度,避免太拥挤 + } + }, y: { type: 'linear', display: true, @@ -167,7 +174,7 @@ function formatNumber(num: number) { if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M'; if (num >= 1000) return (num / 1000).toFixed(1) + 'K'; - return num.toString(); + return Math.round(num).toString(); } @@ -587,7 +594,7 @@ font-size: 0.75rem; font-weight: 400; background: rgba(0, 0, 0, 0.05); - border: 1px solid var(--text-color, #000); + border: 1px solid rgba(0, 0, 0, 0.15); padding: 2px 8px; border-radius: 12px; color: var(--text-muted, rgba(0, 0, 0, 0.6)); @@ -607,10 +614,9 @@ .quota-bar-bg { width: 100%; - height: 10px; - background: rgba(0, 0, 0, 0.1); - border: 1px solid var(--text-color, #000); - border-radius: 6px; + height: 8px; + background: rgba(0, 0, 0, 0.08); + border-radius: 4px; overflow: hidden; }