b42a2d7ea7
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
18 admin views re-skinned onto design-system components + tokens: Server/Players/Plugins/ChatLog, Wipes/WipeProfiles/Maps/Schedules/Alerts, StoreConfig/StoreItems/ModuleStore, Analytics/WipeAnalytics/MapAnalytics/PlayerRetention/StoreRevenue. ECharts now read var(--accent) (token-driven, follows game skin). 14 icons added to the registry. All logic/store/router/handlers/API calls preserved; presentation-only re-skin. Build green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
449 lines
12 KiB
Vue
449 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, watch, nextTick } from 'vue'
|
|
import * as echarts from 'echarts'
|
|
import type { ECharts } from 'echarts'
|
|
import { useApi } from '@/composables/useApi'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
import { useToastStore } from '@/stores/toast'
|
|
import type { AnalyticsSummary, TimeseriesData } from '@/types'
|
|
import { safeFixed } from '@/utils/formatters'
|
|
import Panel from '@/components/ds/data/Panel.vue'
|
|
import StatCard from '@/components/ds/data/StatCard.vue'
|
|
import Button from '@/components/ds/core/Button.vue'
|
|
import Badge from '@/components/ds/core/Badge.vue'
|
|
import Tabs from '@/components/ds/navigation/Tabs.vue'
|
|
|
|
const api = useApi()
|
|
const authStore = useAuthStore()
|
|
const toast = useToastStore()
|
|
|
|
const timeRange = ref<'24h' | '7d' | '30d'>('7d')
|
|
const loading = ref(true)
|
|
const summary = ref<AnalyticsSummary | null>(null)
|
|
const timeseries = ref<TimeseriesData | null>(null)
|
|
|
|
const playerChart = ref<HTMLElement | null>(null)
|
|
const perfChart = ref<HTMLElement | null>(null)
|
|
let playerChartInstance: ECharts | null = null
|
|
let perfChartInstance: ECharts | null = null
|
|
|
|
const rangeToHours = (range: string): number => {
|
|
switch (range) {
|
|
case '24h': return 24
|
|
case '7d': return 168
|
|
case '30d': return 720
|
|
default: return 168
|
|
}
|
|
}
|
|
|
|
const loadAnalytics = async () => {
|
|
loading.value = true
|
|
try {
|
|
const hours = rangeToHours(timeRange.value)
|
|
|
|
const [summaryRes, timeseriesRes] = await Promise.all([
|
|
api.get<AnalyticsSummary>(`/analytics/summary?range=${hours}`),
|
|
api.get<TimeseriesData>(`/analytics/timeseries?range=${hours}&granularity=hourly`)
|
|
])
|
|
|
|
summary.value = summaryRes
|
|
timeseries.value = timeseriesRes
|
|
|
|
await nextTick()
|
|
renderCharts()
|
|
} catch {
|
|
toast.error('Failed to load analytics data')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function cssVar(name: string): string {
|
|
return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
|
|
}
|
|
|
|
const renderCharts = () => {
|
|
if (!timeseries.value) return
|
|
|
|
const accent = cssVar('--accent') || '#CE422B'
|
|
const grid = cssVar('--border-subtle') || 'rgba(255,255,255,0.06)'
|
|
const axisLine = cssVar('--border-default') || '#404040'
|
|
const labelColor = cssVar('--text-tertiary') || '#808080'
|
|
const tooltipBg = cssVar('--surface-overlay') || '#1a1a1a'
|
|
const tooltipBorder = cssVar('--border-default') || '#2a2a2a'
|
|
const tooltipText = cssVar('--text-primary') || '#e5e5e5'
|
|
const mono = 'JetBrains Mono, monospace'
|
|
|
|
// Player count chart
|
|
if (playerChart.value) {
|
|
if (playerChartInstance) {
|
|
playerChartInstance.dispose()
|
|
}
|
|
playerChartInstance = echarts.init(playerChart.value)
|
|
|
|
playerChartInstance.setOption({
|
|
backgroundColor: 'transparent',
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
backgroundColor: tooltipBg,
|
|
borderColor: tooltipBorder,
|
|
textStyle: { color: tooltipText, fontFamily: mono, fontSize: 11 }
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '10%',
|
|
top: '10%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: timeseries.value.timestamps.map(ts => new Date(ts).toLocaleString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit'
|
|
})),
|
|
axisLine: { lineStyle: { color: axisLine } },
|
|
axisLabel: { color: labelColor, rotate: 45, fontFamily: mono, fontSize: 10 }
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: { lineStyle: { color: axisLine } },
|
|
splitLine: { lineStyle: { color: grid } },
|
|
axisLabel: { color: labelColor, fontFamily: mono, fontSize: 10 }
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Players',
|
|
type: 'line',
|
|
data: timeseries.value.player_count,
|
|
smooth: true,
|
|
lineStyle: { color: accent, width: 2 },
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: accent + '55' },
|
|
{ offset: 1, color: accent + '00' }
|
|
])
|
|
},
|
|
itemStyle: { color: accent }
|
|
}
|
|
]
|
|
})
|
|
}
|
|
|
|
// Performance chart (FPS + Entities)
|
|
if (perfChart.value) {
|
|
if (perfChartInstance) {
|
|
perfChartInstance.dispose()
|
|
}
|
|
perfChartInstance = echarts.init(perfChart.value)
|
|
|
|
perfChartInstance.setOption({
|
|
backgroundColor: 'transparent',
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
backgroundColor: tooltipBg,
|
|
borderColor: tooltipBorder,
|
|
textStyle: { color: tooltipText, fontFamily: mono, fontSize: 11 }
|
|
},
|
|
legend: {
|
|
data: ['FPS', 'Entities'],
|
|
textStyle: { color: labelColor, fontFamily: mono },
|
|
top: 0
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '10%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: timeseries.value.timestamps.map(ts => new Date(ts).toLocaleString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit'
|
|
})),
|
|
axisLine: { lineStyle: { color: axisLine } },
|
|
axisLabel: { color: labelColor, rotate: 45, fontFamily: mono, fontSize: 10 }
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: 'FPS',
|
|
position: 'left',
|
|
axisLine: { lineStyle: { color: axisLine } },
|
|
splitLine: { lineStyle: { color: grid } },
|
|
axisLabel: { color: labelColor, fontFamily: mono, fontSize: 10 }
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: 'Entities',
|
|
position: 'right',
|
|
axisLine: { lineStyle: { color: axisLine } },
|
|
splitLine: { show: false },
|
|
axisLabel: { color: labelColor, fontFamily: mono, fontSize: 10 }
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: 'FPS',
|
|
type: 'line',
|
|
yAxisIndex: 0,
|
|
data: timeseries.value.fps,
|
|
smooth: true,
|
|
lineStyle: { color: '#10b981', width: 2 },
|
|
itemStyle: { color: '#10b981' }
|
|
},
|
|
{
|
|
name: 'Entities',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: timeseries.value.entity_count,
|
|
smooth: true,
|
|
lineStyle: { color: '#6366f1', width: 2 },
|
|
itemStyle: { color: '#6366f1' }
|
|
}
|
|
]
|
|
})
|
|
}
|
|
}
|
|
|
|
const downloadCSV = async () => {
|
|
try {
|
|
const hours = rangeToHours(timeRange.value)
|
|
const response = await fetch(`/api/analytics/export?range=${hours}`, {
|
|
headers: {
|
|
'Authorization': `Bearer ${authStore.accessToken}`
|
|
}
|
|
})
|
|
const blob = await response.blob()
|
|
const url = window.URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = `server_stats_${timeRange.value}.csv`
|
|
a.click()
|
|
window.URL.revokeObjectURL(url)
|
|
} catch {
|
|
toast.error('Failed to download analytics export')
|
|
}
|
|
}
|
|
|
|
watch(timeRange, () => {
|
|
loadAnalytics()
|
|
})
|
|
|
|
onMounted(() => {
|
|
loadAnalytics()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="analytics-view">
|
|
<!-- Header -->
|
|
<div class="analytics-view__header">
|
|
<h1 class="analytics-view__title">Analytics</h1>
|
|
<div class="analytics-view__controls">
|
|
<Button variant="secondary" size="sm" icon="download" @click="downloadCSV">
|
|
Export CSV
|
|
</Button>
|
|
<Tabs
|
|
:items="(['24h', '7d', '30d'] as const).map(v => ({ value: v, label: v }))"
|
|
v-model="timeRange"
|
|
variant="pill"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading state -->
|
|
<div v-if="loading" class="analytics-view__loading">
|
|
<span class="analytics-view__loading-text">Loading analytics...</span>
|
|
</div>
|
|
|
|
<template v-else-if="summary">
|
|
<!-- Stat cards -->
|
|
<div class="analytics-view__stats">
|
|
<StatCard
|
|
label="Peak players"
|
|
:value="summary.peak_players ?? '—'"
|
|
icon="users"
|
|
:note="`Last ${timeRange}`"
|
|
/>
|
|
<StatCard
|
|
label="Avg players"
|
|
:value="safeFixed(summary?.avg_players, 1)"
|
|
icon="trending-up"
|
|
:note="`Last ${timeRange}`"
|
|
/>
|
|
<StatCard
|
|
label="Uptime"
|
|
:value="safeFixed(summary?.uptime_percentage, 1)"
|
|
unit="%"
|
|
icon="clock"
|
|
:note="`Last ${timeRange}`"
|
|
/>
|
|
<StatCard
|
|
label="Unique players"
|
|
:value="summary.unique_players ?? '—'"
|
|
icon="bar-chart-3"
|
|
note="Phase 2.2"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Charts -->
|
|
<div class="analytics-view__charts">
|
|
<Panel title="Player count over time">
|
|
<div ref="playerChart" class="analytics-view__chart-area"></div>
|
|
</Panel>
|
|
<Panel title="Server performance">
|
|
<div ref="perfChart" class="analytics-view__chart-area"></div>
|
|
</Panel>
|
|
</div>
|
|
|
|
<!-- Player Retention placeholder -->
|
|
<Panel eyebrow="Coming in phase 2" title="Player retention">
|
|
<template #title-append>
|
|
<Badge tone="neutral">Phase 2</Badge>
|
|
</template>
|
|
<div class="analytics-view__retention-grid">
|
|
<div class="analytics-view__retention-cell">
|
|
<p class="analytics-view__retention-label">New players</p>
|
|
<p class="analytics-view__retention-value">—</p>
|
|
<p class="analytics-view__retention-note">First-time visitors</p>
|
|
</div>
|
|
<div class="analytics-view__retention-cell">
|
|
<p class="analytics-view__retention-label">Returning players</p>
|
|
<p class="analytics-view__retention-value">—</p>
|
|
<p class="analytics-view__retention-note">Seen more than once</p>
|
|
</div>
|
|
<div class="analytics-view__retention-cell">
|
|
<p class="analytics-view__retention-label">Avg session duration</p>
|
|
<p class="analytics-view__retention-value">—</p>
|
|
<p class="analytics-view__retention-note">Per visit</p>
|
|
</div>
|
|
</div>
|
|
<p class="analytics-view__retention-footer">
|
|
Player retention analytics will be available in phase 2.
|
|
</p>
|
|
</Panel>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.analytics-view {
|
|
padding: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.analytics-view__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.analytics-view__title {
|
|
font-size: var(--text-xl);
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
.analytics-view__controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.analytics-view__loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 48px 0;
|
|
}
|
|
|
|
.analytics-view__loading-text {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.analytics-view__stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 12px;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.analytics-view__stats {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
|
|
.analytics-view__charts {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.analytics-view__charts {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
.analytics-view__chart-area {
|
|
height: 256px;
|
|
}
|
|
|
|
.analytics-view__retention-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.analytics-view__retention-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
.analytics-view__retention-cell {
|
|
background: var(--surface-raised);
|
|
border-radius: var(--radius-md);
|
|
padding: 14px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.analytics-view__retention-label {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.analytics-view__retention-value {
|
|
font-family: var(--font-mono);
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1;
|
|
}
|
|
|
|
.analytics-view__retention-note {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.analytics-view__retention-footer {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
margin-top: 12px;
|
|
}
|
|
</style>
|