fix: Replace unsafe .toFixed() calls with safeFixed() in analytics views

- AnalyticsView: avg_players, uptime_percentage
- WipeAnalyticsView: success_rate, population curve, durations, CSV export
- PlayerRetentionView: retention percentages, session duration, tooltip
- MapAnalyticsView: rotation effectiveness, performance metrics, table

All analytics views now use safe formatter utilities with optional chaining
to prevent null/undefined runtime errors when displaying numeric data.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
2026-02-15 21:56:04 -05:00
parent daa9c3035f
commit 26e717ac96
18 changed files with 111 additions and 53 deletions

View File

@@ -5,6 +5,7 @@ import * as echarts from 'echarts'
import type { ECharts } from 'echarts'
import { useApi } from '@/composables/useApi'
import type { WipePerformanceMetrics } from '@/types'
import { safeFixed } from '@/utils/formatters'
const api = useApi()
@@ -173,7 +174,7 @@ const renderCharts = () => {
}
durationTrendChartInstance = echarts.init(durationTrendChart.value)
const durations = metrics.value.wipes.map(w => (w.duration_seconds / 60).toFixed(1))
const durations = metrics.value.wipes.map(w => safeFixed(w.duration_seconds / 60, 1))
const dates = metrics.value.wipes.map(w => new Date(w.date).toLocaleDateString('en-US', {
month: 'short',
day: 'numeric'
@@ -241,7 +242,7 @@ const downloadCSV = async () => {
let csv = 'Date,Duration (seconds),Peak Population,Hours to Peak,Success\n'
metrics.value.wipes.forEach(wipe => {
csv += `${new Date(wipe.date).toISOString()},${wipe.duration_seconds},${wipe.peak_population},${wipe.hours_to_peak.toFixed(2)},${wipe.success}\n`
csv += `${new Date(wipe.date).toISOString()},${wipe.duration_seconds},${wipe.peak_population},${safeFixed(wipe.hours_to_peak, 2)},${wipe.success}\n`
})
const blob = new Blob([csv], { type: 'text/csv' })
@@ -305,7 +306,7 @@ onMounted(() => {
<Target class="w-4 h-4 text-neutral-500" />
<p class="text-sm text-neutral-400">Success Rate</p>
</div>
<p class="text-2xl font-bold text-neutral-100">{{ metrics.success_rate_percent.toFixed(1) }}%</p>
<p class="text-2xl font-bold text-neutral-100">{{ safeFixed(metrics?.success_rate_percent, 1) }}%</p>
<p class="text-xs text-neutral-600 mt-1">{{ metrics.successful_wipes }}/{{ metrics.total_wipes }} wipes</p>
</div>
@@ -324,7 +325,7 @@ onMounted(() => {
<p class="text-sm text-neutral-400">Peak Population</p>
</div>
<p class="text-2xl font-bold text-neutral-100">Day 1</p>
<p class="text-xs text-neutral-600 mt-1">{{ metrics.population_curve.day_1_avg.toFixed(1) }} avg players</p>
<p class="text-xs text-neutral-600 mt-1">{{ safeFixed(metrics?.population_curve?.day_1_avg, 1) }} avg players</p>
</div>
<div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
@@ -346,7 +347,7 @@ onMounted(() => {
<ul class="text-sm text-neutral-300 space-y-1">
<li> Your best wipe day is <span class="font-semibold text-oxide-400">{{ metrics.optimal_wipe_day }} at {{ metrics.optimal_wipe_hour }}:00</span> based on post-wipe population peaks.</li>
<li v-if="metrics.population_curve.day_1_avg > metrics.population_curve.day_2_avg * 1.2">
Players peak on Day 1 ({{ metrics.population_curve.day_1_avg.toFixed(0) }} avg). Consider <span class="font-semibold text-oxide-400">weekly wipes</span> to maintain engagement.
Players peak on Day 1 ({{ safeFixed(metrics?.population_curve?.day_1_avg, 0) }} avg). Consider <span class="font-semibold text-oxide-400">weekly wipes</span> to maintain engagement.
</li>
<li v-if="metrics.avg_duration_seconds > 600">
Average wipe duration is {{ formatDuration(metrics.avg_duration_seconds) }}. Review pre-wipe commands for optimization opportunities.