272 lines
6.8 KiB
Vue
272 lines
6.8 KiB
Vue
<template>
|
|
<div class="page">
|
|
<Header />
|
|
<main class="container">
|
|
<section class="hero">
|
|
<div>
|
|
<p class="kicker">Radar automático de datos públicos</p>
|
|
<h1>Detecta cambios en datos.gob.es antes que nadie</h1>
|
|
<p class="lead">Monitoriza datasets, normaliza formatos y recibe alertas por email o Telegram. Configura perfiles sin complicaciones.</p>
|
|
<div class="hero-actions">
|
|
<NuxtLink to="/catalog" class="btn primary">Ver catálogo</NuxtLink>
|
|
<NuxtLink to="/alerts" class="btn ghost">Crear alertas</NuxtLink>
|
|
</div>
|
|
</div>
|
|
<div class="hero-card" v-if="summary">
|
|
<div class="metric">
|
|
<span class="metric-value">{{ summary.totals.items }}</span>
|
|
<span class="metric-label">Datasets</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-value">{{ summary.totals.changes }}</span>
|
|
<span class="metric-label">Cambios recientes</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-value">{{ summary.totals.alertProfiles }}</span>
|
|
<span class="metric-label">Perfiles activos</span>
|
|
</div>
|
|
<div class="card-footer">Actualizado automáticamente</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="trend" v-if="summary?.trend?.length">
|
|
<h2>Tendencia (últimos {{ summary.trend.length }} días)</h2>
|
|
<div class="trend-chart">
|
|
<div v-for="point in summary.trend" :key="point.date" class="trend-bar">
|
|
<span class="bar-fill" :style="{ height: barHeight(point.total) }"></span>
|
|
<small>{{ formatShortDate(point.date) }}</small>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="grid">
|
|
<article class="panel">
|
|
<h2>Cambios recientes</h2>
|
|
<ul>
|
|
<li v-for="change in summary?.latestChanges || []" :key="change.id">
|
|
<strong>{{ change.snapshot?.title || 'Sin título' }}</strong>
|
|
<span class="muted">{{ change.snapshot?.publisher || '—' }}</span>
|
|
<small class="muted">{{ formatDate(change.createdAt) }}</small>
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
<article class="panel">
|
|
<h2>Top publicadores</h2>
|
|
<ul>
|
|
<li v-for="pub in summary?.topPublishers || []" :key="pub.label">
|
|
<span>{{ pub.label }}</span>
|
|
<strong>{{ pub.value }}</strong>
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
<article class="panel">
|
|
<h2>Formatos más comunes</h2>
|
|
<ul>
|
|
<li v-for="fmt in summary?.topFormats || []" :key="fmt.label">
|
|
<span>{{ fmt.label }}</span>
|
|
<strong>{{ fmt.value }}</strong>
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
<article class="panel">
|
|
<h2>Top temas</h2>
|
|
<ul>
|
|
<li v-for="topic in summary?.topTopics || []" :key="topic.label">
|
|
<span>{{ topic.label }}</span>
|
|
<strong>{{ topic.value }}</strong>
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
<article class="panel">
|
|
<h2>Top territorios</h2>
|
|
<ul>
|
|
<li v-for="territory in summary?.topTerritories || []" :key="territory.label">
|
|
<span>{{ territory.label }}</span>
|
|
<strong>{{ territory.value }}</strong>
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Header from '~/components/Header.vue'
|
|
const config = useRuntimeConfig()
|
|
const { data: summary } = await useFetch(`${config.public.apiBase}/dashboard/summary`)
|
|
const maxTrend = computed(() => {
|
|
const values = summary.value?.trend?.map((p) => p.total) || []
|
|
return Math.max(...values, 1)
|
|
})
|
|
|
|
function formatDate(value) {
|
|
if (!value) return ''
|
|
return new Date(value).toLocaleDateString('es-ES')
|
|
}
|
|
|
|
function formatShortDate(value) {
|
|
if (!value) return ''
|
|
const date = new Date(value)
|
|
return date.toLocaleDateString('es-ES', { day: '2-digit', month: 'short' })
|
|
}
|
|
|
|
function barHeight(value) {
|
|
return `${Math.round((value / maxTrend.value) * 100)}%`
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page {
|
|
min-height: 100vh;
|
|
background: radial-gradient(circle at top, #f5f7ff 0%, #eef2f9 45%, #e5ecf5 100%);
|
|
color: #0f172a;
|
|
font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
|
|
}
|
|
.container {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: 2.5rem 1.5rem 4rem;
|
|
}
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
gap: 2rem;
|
|
align-items: center;
|
|
}
|
|
.kicker {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.2em;
|
|
font-size: 0.75rem;
|
|
color: #475569;
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
.hero h1 {
|
|
font-size: clamp(2.2rem, 3vw, 3rem);
|
|
margin: 0 0 1rem;
|
|
}
|
|
.lead {
|
|
font-size: 1.05rem;
|
|
color: #334155;
|
|
}
|
|
.hero-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
.btn {
|
|
padding: 0.7rem 1.4rem;
|
|
border-radius: 999px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.btn.primary {
|
|
background: #0f172a;
|
|
color: #fff;
|
|
}
|
|
.btn.ghost {
|
|
border: 1px solid #0f172a;
|
|
color: #0f172a;
|
|
}
|
|
.hero-card {
|
|
background: #0f172a;
|
|
color: #fff;
|
|
padding: 1.5rem;
|
|
border-radius: 24px;
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
.metric {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
}
|
|
.metric-value {
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
}
|
|
.metric-label {
|
|
font-size: 0.9rem;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
.card-footer {
|
|
font-size: 0.8rem;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
.grid {
|
|
margin-top: 3rem;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
.trend {
|
|
margin-top: 2.5rem;
|
|
background: #ffffff;
|
|
border-radius: 18px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
|
|
}
|
|
.trend h2 {
|
|
margin-top: 0;
|
|
font-size: 1.1rem;
|
|
}
|
|
.trend-chart {
|
|
margin-top: 1.2rem;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
|
|
gap: 0.6rem;
|
|
align-items: end;
|
|
}
|
|
.trend-bar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
height: 140px;
|
|
}
|
|
.bar-fill {
|
|
width: 100%;
|
|
max-width: 18px;
|
|
background: linear-gradient(180deg, #38bdf8 0%, #0f172a 100%);
|
|
border-radius: 999px;
|
|
display: block;
|
|
min-height: 8px;
|
|
}
|
|
.panel {
|
|
background: #ffffff;
|
|
border-radius: 18px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
|
|
}
|
|
.panel h2 {
|
|
margin-top: 0;
|
|
font-size: 1.1rem;
|
|
}
|
|
.panel ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 1rem 0 0;
|
|
display: grid;
|
|
gap: 0.9rem;
|
|
}
|
|
.panel li {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
}
|
|
.muted {
|
|
color: #64748b;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.hero-actions {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
}
|
|
</style>
|