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,11 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch, nextTick } from 'vue'
|
||||
import { Users, TrendingUp, Clock, Download, BarChart3 } from 'lucide-vue-next'
|
||||
import * as echarts from 'echarts'
|
||||
import type { ECharts } from 'echarts'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
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 EmptyState from '@/components/ds/feedback/EmptyState.vue'
|
||||
import Select from '@/components/ds/forms/Select.vue'
|
||||
|
||||
const api = useApi()
|
||||
const authStore = useAuthStore()
|
||||
@@ -60,6 +64,10 @@ const loadRetentionData = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
function cssVar(name: string): string {
|
||||
return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
|
||||
}
|
||||
|
||||
const renderCharts = () => {
|
||||
if (!retentionData.value || !retentionData.value.wipe_metrics.length) return
|
||||
|
||||
@@ -81,13 +89,22 @@ const renderCharts = () => {
|
||||
const retention48h = retentionData.value.wipe_metrics.map((w) => w.retention_48h_percent)
|
||||
const retention72h = retentionData.value.wipe_metrics.map((w) => w.retention_72h_percent)
|
||||
|
||||
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'
|
||||
|
||||
retentionChartInstance.setOption({
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: '#1a1a1a',
|
||||
borderColor: '#2a2a2a',
|
||||
textStyle: { color: '#e5e5e5' },
|
||||
backgroundColor: tooltipBg,
|
||||
borderColor: tooltipBorder,
|
||||
textStyle: { color: tooltipText, fontFamily: mono, fontSize: 11 },
|
||||
formatter: (params: any) => {
|
||||
let tooltip = `<strong>${params[0].axisValue}</strong><br/>`
|
||||
params.forEach((param: any) => {
|
||||
@@ -98,7 +115,7 @@ const renderCharts = () => {
|
||||
},
|
||||
legend: {
|
||||
data: ['24h Return', '48h Return', '72h Return'],
|
||||
textStyle: { color: '#a3a3a3' },
|
||||
textStyle: { color: labelColor, fontFamily: mono },
|
||||
top: 0
|
||||
},
|
||||
grid: {
|
||||
@@ -111,16 +128,18 @@ const renderCharts = () => {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: wipeLabels,
|
||||
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: 'Retention %',
|
||||
axisLine: { lineStyle: { color: '#404040' } },
|
||||
splitLine: { lineStyle: { color: '#2a2a2a' } },
|
||||
axisLine: { lineStyle: { color: axisLine } },
|
||||
splitLine: { lineStyle: { color: grid } },
|
||||
axisLabel: {
|
||||
color: '#808080',
|
||||
color: labelColor,
|
||||
fontFamily: mono,
|
||||
fontSize: 10,
|
||||
formatter: (value: number) => `${value}%`
|
||||
},
|
||||
max: 100
|
||||
@@ -131,8 +150,8 @@ const renderCharts = () => {
|
||||
type: 'line',
|
||||
data: retention24h,
|
||||
smooth: true,
|
||||
lineStyle: { color: '#CE422B', width: 3 },
|
||||
itemStyle: { color: '#CE422B' },
|
||||
lineStyle: { color: accent, width: 3 },
|
||||
itemStyle: { color: accent },
|
||||
symbolSize: 8
|
||||
},
|
||||
{
|
||||
@@ -187,117 +206,91 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 space-y-6">
|
||||
<div class="retention-view">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<Users class="w-5 h-5 text-oxide-500" />
|
||||
<h1 class="text-2xl font-bold text-neutral-100">Player Retention</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="retention-view__header">
|
||||
<h1 class="retention-view__title">Player retention</h1>
|
||||
<div class="retention-view__controls">
|
||||
<Button variant="secondary" size="sm" icon="download" @click="downloadCSV">
|
||||
Export CSV
|
||||
</button>
|
||||
<div class="flex items-center gap-2 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2">
|
||||
<label class="text-sm text-neutral-400">Wipes:</label>
|
||||
<select
|
||||
v-model.number="wipeCount"
|
||||
class="bg-transparent text-neutral-100 text-sm focus:outline-none"
|
||||
>
|
||||
<option :value="3">Last 3</option>
|
||||
<option :value="6">Last 6</option>
|
||||
<option :value="10">Last 10</option>
|
||||
<option :value="20">Last 20</option>
|
||||
</select>
|
||||
</div>
|
||||
</Button>
|
||||
<Select
|
||||
:options="[
|
||||
{ value: '3', label: 'Last 3 wipes' },
|
||||
{ value: '6', label: 'Last 6 wipes' },
|
||||
{ value: '10', label: 'Last 10 wipes' },
|
||||
{ value: '20', label: 'Last 20 wipes' }
|
||||
]"
|
||||
:model-value="String(wipeCount)"
|
||||
size="sm"
|
||||
@update:model-value="wipeCount = Number($event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading state -->
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<div class="text-neutral-500">Loading retention data...</div>
|
||||
<div v-if="loading" class="retention-view__loading">
|
||||
<span class="retention-view__loading-text">Loading retention data...</span>
|
||||
</div>
|
||||
|
||||
<template v-else-if="retentionData && retentionData.wipe_metrics.length > 0">
|
||||
<!-- Summary 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">Unique Players</p>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-neutral-100">{{ retentionData.summary.unique_players }}</p>
|
||||
<p class="text-xs text-neutral-600 mt-1">Last 30 days</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">Avg Session</p>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-neutral-100">
|
||||
{{ safeFixed(retentionData?.summary?.avg_session_duration_minutes, 0) }}m
|
||||
</p>
|
||||
<p class="text-xs text-neutral-600 mt-1">Duration</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">New Players</p>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-neutral-100">{{ retentionData.summary.new_players }}</p>
|
||||
<p class="text-xs text-neutral-600 mt-1">Last 30 days</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">Returning</p>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-neutral-100">{{ retentionData.summary.returning_players }}</p>
|
||||
<p class="text-xs text-neutral-600 mt-1">Last 30 days</p>
|
||||
</div>
|
||||
<div class="retention-view__stats">
|
||||
<StatCard
|
||||
label="Unique players"
|
||||
:value="retentionData.summary.unique_players"
|
||||
icon="users"
|
||||
note="Last 30 days"
|
||||
/>
|
||||
<StatCard
|
||||
label="Avg session"
|
||||
:value="safeFixed(retentionData?.summary?.avg_session_duration_minutes, 0)"
|
||||
unit="m"
|
||||
icon="clock"
|
||||
note="Duration"
|
||||
/>
|
||||
<StatCard
|
||||
label="New players"
|
||||
:value="retentionData.summary.new_players"
|
||||
icon="trending-up"
|
||||
note="Last 30 days"
|
||||
/>
|
||||
<StatCard
|
||||
label="Returning"
|
||||
:value="retentionData.summary.returning_players"
|
||||
icon="bar-chart-3"
|
||||
note="Last 30 days"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Retention curve chart -->
|
||||
<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">
|
||||
Retention Curve (Post-Wipe Return Rates)
|
||||
</h2>
|
||||
<div ref="retentionChart" class="h-96"></div>
|
||||
<div class="mt-4 text-xs text-neutral-500">
|
||||
<p>
|
||||
<strong>How to read:</strong> Percentage of players who played in the 7 days before a wipe and
|
||||
returned within 24h/48h/72h after the wipe.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Panel title="Retention curve (post-wipe return rates)">
|
||||
<div ref="retentionChart" class="retention-view__chart-area"></div>
|
||||
<p class="retention-view__chart-note">
|
||||
<strong>How to read:</strong> Percentage of players who played in the 7 days before a wipe and returned within 24h/48h/72h after the wipe.
|
||||
</p>
|
||||
</Panel>
|
||||
|
||||
<!-- Wipe details table -->
|
||||
<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">
|
||||
Wipe Details
|
||||
</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<Panel title="Wipe details" :flush-body="true">
|
||||
<div class="retention-view__table-wrap">
|
||||
<table class="retention-view__table">
|
||||
<thead>
|
||||
<tr class="border-b border-neutral-800">
|
||||
<th class="text-left py-2 px-3 text-neutral-400 font-medium">Wipe Date</th>
|
||||
<th class="text-right py-2 px-3 text-neutral-400 font-medium">Pre-Wipe Players</th>
|
||||
<th class="text-right py-2 px-3 text-neutral-400 font-medium">24h Return</th>
|
||||
<th class="text-right py-2 px-3 text-neutral-400 font-medium">48h Return</th>
|
||||
<th class="text-right py-2 px-3 text-neutral-400 font-medium">72h Return</th>
|
||||
<tr class="retention-view__thead-row">
|
||||
<th class="retention-view__th retention-view__th--left">Wipe date</th>
|
||||
<th class="retention-view__th retention-view__th--right">Pre-wipe players</th>
|
||||
<th class="retention-view__th retention-view__th--right">24h return</th>
|
||||
<th class="retention-view__th retention-view__th--right">48h return</th>
|
||||
<th class="retention-view__th retention-view__th--right">72h return</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="wipe in retentionData.wipe_metrics"
|
||||
:key="wipe.wipe_id"
|
||||
class="border-b border-neutral-800 hover:bg-neutral-800/50 transition-colors"
|
||||
class="retention-view__row"
|
||||
>
|
||||
<td class="py-3 px-3 text-neutral-300">
|
||||
<td class="retention-view__td retention-view__td--date">
|
||||
{{ new Date(wipe.wipe_date).toLocaleString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
@@ -306,38 +299,165 @@ onMounted(() => {
|
||||
minute: '2-digit'
|
||||
}) }}
|
||||
</td>
|
||||
<td class="py-3 px-3 text-right text-neutral-300">
|
||||
<td class="retention-view__td retention-view__td--num">
|
||||
{{ wipe.total_players_before_wipe }}
|
||||
</td>
|
||||
<td class="py-3 px-3 text-right">
|
||||
<span class="text-neutral-100 font-medium">{{ wipe.returned_24h }}</span>
|
||||
<span class="text-neutral-500 text-xs ml-1">({{ safeFixed(wipe.retention_24h_percent, 1) }}%)</span>
|
||||
<td class="retention-view__td retention-view__td--num">
|
||||
<span class="retention-view__count">{{ wipe.returned_24h }}</span>
|
||||
<span class="retention-view__pct">({{ safeFixed(wipe.retention_24h_percent, 1) }}%)</span>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-right">
|
||||
<span class="text-neutral-100 font-medium">{{ wipe.returned_48h }}</span>
|
||||
<span class="text-neutral-500 text-xs ml-1">({{ safeFixed(wipe.retention_48h_percent, 1) }}%)</span>
|
||||
<td class="retention-view__td retention-view__td--num">
|
||||
<span class="retention-view__count">{{ wipe.returned_48h }}</span>
|
||||
<span class="retention-view__pct">({{ safeFixed(wipe.retention_48h_percent, 1) }}%)</span>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-right">
|
||||
<span class="text-neutral-100 font-medium">{{ wipe.returned_72h }}</span>
|
||||
<span class="text-neutral-500 text-xs ml-1">({{ safeFixed(wipe.retention_72h_percent, 1) }}%)</span>
|
||||
<td class="retention-view__td retention-view__td--num">
|
||||
<span class="retention-view__count">{{ wipe.returned_72h }}</span>
|
||||
<span class="retention-view__pct">({{ safeFixed(wipe.retention_72h_percent, 1) }}%)</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</template>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div
|
||||
v-else
|
||||
class="bg-neutral-900 border border-neutral-800 rounded-lg p-12 text-center"
|
||||
>
|
||||
<Users class="w-12 h-12 text-neutral-700 mx-auto mb-4" />
|
||||
<p class="text-neutral-500 mb-2">No retention data available</p>
|
||||
<p class="text-sm text-neutral-600">
|
||||
Player retention metrics will appear here after wipes are tracked and players join/leave.
|
||||
</p>
|
||||
</div>
|
||||
<Panel v-else>
|
||||
<EmptyState
|
||||
icon="users"
|
||||
title="No retention data available"
|
||||
description="Player retention metrics will appear here after wipes are tracked and players join/leave."
|
||||
/>
|
||||
</Panel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.retention-view {
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.retention-view__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.retention-view__title {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.retention-view__controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.retention-view__loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 0;
|
||||
}
|
||||
|
||||
.retention-view__loading-text {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.retention-view__stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.retention-view__stats {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.retention-view__chart-area {
|
||||
height: 384px;
|
||||
}
|
||||
|
||||
.retention-view__chart-note {
|
||||
margin-top: 12px;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.retention-view__table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.retention-view__table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.retention-view__thead-row {
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.retention-view__th {
|
||||
padding: 10px 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
color: var(--text-tertiary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.retention-view__th--left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.retention-view__th--right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.retention-view__row {
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
transition: background var(--dur-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.retention-view__row:hover {
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
.retention-view__td {
|
||||
padding: 12px 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.retention-view__td--date {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.retention-view__td--num {
|
||||
text-align: right;
|
||||
font-family: var(--font-mono);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.retention-view__count {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.retention-view__pct {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--text-xs);
|
||||
margin-left: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user