feat(redesign): re-skin server-ops/operations/store/analytics views to DS (Phase D batch 2)
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
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>
This commit is contained in:
Vantz Stockwell
@@ -1,6 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch, nextTick } from 'vue'
|
||||
import { BarChart3, TrendingUp, Users, Clock, Download } from 'lucide-vue-next'
|
||||
import * as echarts from 'echarts'
|
||||
import type { ECharts } from 'echarts'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
@@ -8,6 +7,11 @@ 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()
|
||||
@@ -54,9 +58,22 @@ const loadAnalytics = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
@@ -68,9 +85,9 @@ const renderCharts = () => {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: '#1a1a1a',
|
||||
borderColor: '#2a2a2a',
|
||||
textStyle: { color: '#e5e5e5' }
|
||||
backgroundColor: tooltipBg,
|
||||
borderColor: tooltipBorder,
|
||||
textStyle: { color: tooltipText, fontFamily: mono, fontSize: 11 }
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
@@ -86,14 +103,14 @@ const renderCharts = () => {
|
||||
day: 'numeric',
|
||||
hour: '2-digit'
|
||||
})),
|
||||
axisLine: { lineStyle: { color: '#404040' } },
|
||||
axisLabel: { color: '#808080', rotate: 45 }
|
||||
axisLine: { lineStyle: { color: axisLine } },
|
||||
axisLabel: { color: labelColor, rotate: 45, fontFamily: mono, fontSize: 10 }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: { lineStyle: { color: '#404040' } },
|
||||
splitLine: { lineStyle: { color: '#2a2a2a' } },
|
||||
axisLabel: { color: '#808080' }
|
||||
axisLine: { lineStyle: { color: axisLine } },
|
||||
splitLine: { lineStyle: { color: grid } },
|
||||
axisLabel: { color: labelColor, fontFamily: mono, fontSize: 10 }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@@ -101,14 +118,14 @@ const renderCharts = () => {
|
||||
type: 'line',
|
||||
data: timeseries.value.player_count,
|
||||
smooth: true,
|
||||
lineStyle: { color: '#CE422B', width: 2 },
|
||||
lineStyle: { color: accent, width: 2 },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(206, 66, 43, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(206, 66, 43, 0)' }
|
||||
{ offset: 0, color: accent + '55' },
|
||||
{ offset: 1, color: accent + '00' }
|
||||
])
|
||||
},
|
||||
itemStyle: { color: '#CE422B' }
|
||||
itemStyle: { color: accent }
|
||||
}
|
||||
]
|
||||
})
|
||||
@@ -125,13 +142,13 @@ const renderCharts = () => {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: '#1a1a1a',
|
||||
borderColor: '#2a2a2a',
|
||||
textStyle: { color: '#e5e5e5' }
|
||||
backgroundColor: tooltipBg,
|
||||
borderColor: tooltipBorder,
|
||||
textStyle: { color: tooltipText, fontFamily: mono, fontSize: 11 }
|
||||
},
|
||||
legend: {
|
||||
data: ['FPS', 'Entities'],
|
||||
textStyle: { color: '#a3a3a3' },
|
||||
textStyle: { color: labelColor, fontFamily: mono },
|
||||
top: 0
|
||||
},
|
||||
grid: {
|
||||
@@ -148,25 +165,25 @@ const renderCharts = () => {
|
||||
day: 'numeric',
|
||||
hour: '2-digit'
|
||||
})),
|
||||
axisLine: { lineStyle: { color: '#404040' } },
|
||||
axisLabel: { color: '#808080', rotate: 45 }
|
||||
axisLine: { lineStyle: { color: axisLine } },
|
||||
axisLabel: { color: labelColor, rotate: 45, fontFamily: mono, fontSize: 10 }
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: 'FPS',
|
||||
position: 'left',
|
||||
axisLine: { lineStyle: { color: '#404040' } },
|
||||
splitLine: { lineStyle: { color: '#2a2a2a' } },
|
||||
axisLabel: { color: '#808080' }
|
||||
axisLine: { lineStyle: { color: axisLine } },
|
||||
splitLine: { lineStyle: { color: grid } },
|
||||
axisLabel: { color: labelColor, fontFamily: mono, fontSize: 10 }
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: 'Entities',
|
||||
position: 'right',
|
||||
axisLine: { lineStyle: { color: '#404040' } },
|
||||
axisLine: { lineStyle: { color: axisLine } },
|
||||
splitLine: { show: false },
|
||||
axisLabel: { color: '#808080' }
|
||||
axisLabel: { color: labelColor, fontFamily: mono, fontSize: 10 }
|
||||
}
|
||||
],
|
||||
series: [
|
||||
@@ -223,114 +240,209 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 space-y-6">
|
||||
<div class="analytics-view">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<BarChart3 class="w-5 h-5 text-oxide-500" />
|
||||
<h1 class="text-2xl font-bold text-neutral-100">Analytics</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button
|
||||
@click="downloadCSV"
|
||||
class="flex items-center gap-2 px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg hover:bg-neutral-700 transition-colors text-sm text-neutral-300"
|
||||
>
|
||||
<Download class="w-4 h-4" />
|
||||
<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>
|
||||
<div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
|
||||
<button
|
||||
v-for="opt in (['24h', '7d', '30d'] as const)"
|
||||
:key="opt"
|
||||
@click="timeRange = opt"
|
||||
class="px-3 py-2 text-sm font-medium transition-colors"
|
||||
:class="timeRange === opt ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
|
||||
>
|
||||
{{ opt }}
|
||||
</button>
|
||||
</div>
|
||||
</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="flex items-center justify-center py-12">
|
||||
<div class="text-neutral-500">Loading analytics...</div>
|
||||
<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="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<Users class="w-4 h-4 text-neutral-500" />
|
||||
<p class="text-sm text-neutral-400">Peak Players</p>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-neutral-100">{{ summary.peak_players }}</p>
|
||||
<p class="text-xs text-neutral-600 mt-1">Last {{ timeRange }}</p>
|
||||
</div>
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<TrendingUp class="w-4 h-4 text-neutral-500" />
|
||||
<p class="text-sm text-neutral-400">Avg Players</p>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-neutral-100">{{ safeFixed(summary?.avg_players, 1) }}</p>
|
||||
<p class="text-xs text-neutral-600 mt-1">Last {{ timeRange }}</p>
|
||||
</div>
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<Clock class="w-4 h-4 text-neutral-500" />
|
||||
<p class="text-sm text-neutral-400">Uptime</p>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-neutral-100">{{ safeFixed(summary?.uptime_percentage, 1) }}%</p>
|
||||
<p class="text-xs text-neutral-600 mt-1">Last {{ timeRange }}</p>
|
||||
</div>
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<BarChart3 class="w-4 h-4 text-neutral-500" />
|
||||
<p class="text-sm text-neutral-400">Unique Players</p>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-neutral-100">{{ summary.unique_players ?? '—' }}</p>
|
||||
<p class="text-xs text-neutral-600 mt-1">Phase 2.2</p>
|
||||
</div>
|
||||
<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="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Player Count Over Time</h2>
|
||||
<div ref="playerChart" class="h-64"></div>
|
||||
</div>
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Server Performance</h2>
|
||||
<div ref="perfChart" class="h-64"></div>
|
||||
</div>
|
||||
<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 -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Player Retention</h2>
|
||||
<span class="text-xs font-medium px-2 py-0.5 bg-neutral-800 text-neutral-500 rounded-full border border-neutral-700">Phase 2</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
<div class="bg-neutral-800/50 rounded-lg p-4 border border-neutral-800">
|
||||
<p class="text-xs text-neutral-500 mb-1">New Players</p>
|
||||
<p class="text-2xl font-bold text-neutral-600">\u2014</p>
|
||||
<p class="text-xs text-neutral-600 mt-1">First-time visitors</p>
|
||||
<!-- 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="bg-neutral-800/50 rounded-lg p-4 border border-neutral-800">
|
||||
<p class="text-xs text-neutral-500 mb-1">Returning Players</p>
|
||||
<p class="text-2xl font-bold text-neutral-600">\u2014</p>
|
||||
<p class="text-xs text-neutral-600 mt-1">Seen more than once</p>
|
||||
<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="bg-neutral-800/50 rounded-lg p-4 border border-neutral-800">
|
||||
<p class="text-xs text-neutral-500 mb-1">Avg Session Duration</p>
|
||||
<p class="text-2xl font-bold text-neutral-600">\u2014</p>
|
||||
<p class="text-xs text-neutral-600 mt-1">Per visit</p>
|
||||
<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="text-xs text-neutral-600 mt-4 text-center">Player retention analytics will be available in Phase 2</p>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user