refactor: 优化管理员分析面板的图表展示与数据格式化
continuous-integration/drone/push Build is passing

This commit is contained in:
seahi committed 2026-09-26 11:29:16 +08:00
1 parent bcbdf647be
commit 5a9e64fc15
1 file changed
+15 -9
+15 -9
View File
@@ -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();
}
</script>
@@ -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;
}