Finish: Phase 33 — Alert Quality Analytics
This commit is contained in:
voltsrage
@@ -0,0 +1,156 @@
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useAlertQualityStore } from '@/stores/alertQuality'
|
||||
import { alertTypeLabel } from '@/api/normalize'
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import Badge from '@/components/ui/Badge.vue'
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import Skeleton from '@/components/ui/Skeleton.vue'
|
||||
import AlertQualityChart from '@/components/charts/AlertQualityChart.vue'
|
||||
|
||||
const store = useAlertQualityStore()
|
||||
const { summaryStats, byAlertType, snapshots, loading, error, periodDays } = storeToRefs(store)
|
||||
|
||||
const periodOptions = [
|
||||
{ label: '7 days', value: 7 },
|
||||
{ label: '14 days', value: 14 },
|
||||
{ label: '30 days', value: 30 },
|
||||
]
|
||||
|
||||
onMounted(() => store.loadDashboard())
|
||||
|
||||
function changePeriod(days) {
|
||||
store.setPeriodDays(days)
|
||||
store.loadDashboard()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full min-w-0 space-y-8">
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h1 class="text-xl font-bold dark:text-white">Alert Quality Analytics</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
Clinician feedback and acknowledgement metrics from the last {{ periodDays }} days.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button
|
||||
v-for="opt in periodOptions"
|
||||
:key="opt.value"
|
||||
size="sm"
|
||||
:variant="periodDays === opt.value ? 'primary' : 'secondary'"
|
||||
@click="changePeriod(opt.value)"
|
||||
>
|
||||
{{ opt.label }}
|
||||
</Button>
|
||||
<Button variant="secondary" size="sm" :disabled="loading" @click="store.loadDashboard()">
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="text-sm text-red-600 dark:text-red-400">{{ error }}</p>
|
||||
|
||||
<!-- KPI cards -->
|
||||
<div v-if="loading" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<Skeleton v-for="n in 4" :key="n" class="h-24" />
|
||||
</div>
|
||||
<div v-else class="grid w-full min-w-0 grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<Card>
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold dark:text-white">{{ summaryStats.totalAlerts }}</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">Total Alerts</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold text-green-600">{{ summaryStats.usefulRate }}%</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">Useful Rate</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold text-red-600">{{ summaryStats.falsePositiveRate }}%</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">False Positive Rate</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold text-blue-600">{{ summaryStats.acknowledgementRate }}%</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">Acknowledgement Rate</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Secondary KPIs -->
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<Card>
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold dark:text-white">{{ summaryStats.totalFeedback }}</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">Feedback Submissions</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold dark:text-white">{{ summaryStats.avgAckMinutes }} min</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">Avg Time to Acknowledge</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold dark:text-white">{{ summaryStats.avgResolveMinutes }} min</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">Avg Time to Resolve</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Charts -->
|
||||
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
<AlertQualityChart
|
||||
:snapshots="snapshots"
|
||||
metric="usefulRate"
|
||||
title="Useful Rate by Alert Type"
|
||||
/>
|
||||
<AlertQualityChart
|
||||
:snapshots="snapshots"
|
||||
metric="falsePositiveRate"
|
||||
title="False Positive Rate by Alert Type"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Per alert type table -->
|
||||
<Card>
|
||||
<h2 class="mb-4 text-lg font-semibold dark:text-white">By Alert Type</h2>
|
||||
<div class="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<div
|
||||
v-for="(rows, alertType) in byAlertType"
|
||||
:key="alertType"
|
||||
class="flex flex-col gap-2 py-4 sm:flex-row sm:items-center sm:justify-between"
|
||||
>
|
||||
<div>
|
||||
<span class="text-sm font-medium dark:text-white">{{ alertTypeLabel(alertType) }}</span>
|
||||
<span class="ml-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
({{ rows.reduce((s, r) => s + r.totalAlerts, 0) }} alerts)
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Badge variant="success" size="xs">
|
||||
{{ Math.round(rows.at(-1)?.usefulRate * 100 ?? 0) }}% useful
|
||||
</Badge>
|
||||
<Badge variant="critical" size="xs">
|
||||
{{ Math.round(rows.at(-1)?.falsePositiveRate * 100 ?? 0) }}% FP
|
||||
</Badge>
|
||||
<Badge variant="info" size="xs">
|
||||
{{ Math.round(rows.at(-1)?.acknowledgementRate * 100 ?? 0) }}% ack
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="!Object.keys(byAlertType).length" class="py-4 text-sm text-gray-400">
|
||||
No aggregated metrics yet. Metrics appear after the hourly aggregation cycle runs.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user