457 lines
15 KiB
Vue
457 lines
15 KiB
Vue
<!-- Gráfica de Serie Temporal de Ingresos Diarios -->
|
|
<template>
|
|
<UCard class="brand-card border border-transparent">
|
|
<template #header>
|
|
<div class="flex flex-col gap-3">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h3 class="text-lg font-bold brand-section-title">Serie Temporal: Ingresos Diarios</h3>
|
|
<p class="text-xs text-[var(--brand-text-muted)] mt-1">
|
|
Cantidad ingresada por día
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
<UCheckbox
|
|
v-for="tipo in tipos"
|
|
:key="tipo.value"
|
|
:model-value="tiposSeleccionados.includes(tipo.value)"
|
|
@update:model-value="(checked) => toggleTipo(tipo.value, checked)"
|
|
:label="getTipoLabel(tipo)"
|
|
:disabled="isTipoDisabled(tipo.value)"
|
|
size="xs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Selector de Granularidad Temporal -->
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide">Granularidad:</span>
|
|
<div class="flex items-center gap-1">
|
|
<button
|
|
v-for="option in granularityOptions"
|
|
:key="option.value"
|
|
@click="selectedGranularity = option.value"
|
|
:class="[
|
|
'inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-xs font-medium transition-all',
|
|
selectedGranularity === option.value
|
|
? 'bg-[var(--brand-primary)] text-white shadow-sm'
|
|
: 'bg-gray-700/30 text-gray-400 hover:bg-gray-700/50 hover:text-gray-300'
|
|
]"
|
|
>
|
|
<UIcon :name="option.icon" class="w-3.5 h-3.5" />
|
|
<span>{{ option.label }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="relative w-full" style="height: 450px;">
|
|
<svg :viewBox="`0 0 ${width} ${height}`" class="w-full h-full" preserveAspectRatio="none">
|
|
<!-- Grid lines -->
|
|
<g v-for="i in 5" :key="`grid-${i}`">
|
|
<line
|
|
:x1="padding"
|
|
:y1="padding + (i - 1) * (chartHeight / 4)"
|
|
:x2="width - padding"
|
|
:y2="padding + (i - 1) * (chartHeight / 4)"
|
|
stroke="currentColor"
|
|
:stroke-opacity="0.1"
|
|
stroke-width="1"
|
|
/>
|
|
<text
|
|
:x="padding - 10"
|
|
:y="padding + (i - 1) * (chartHeight / 4) + 5"
|
|
text-anchor="end"
|
|
class="text-xs fill-[var(--brand-text-muted)]"
|
|
>
|
|
{{ formatValue(maxValue - (i - 1) * (maxValue / 4)) }}
|
|
</text>
|
|
</g>
|
|
|
|
<!-- Bars por cada tipo -->
|
|
<g v-for="(tipo, tipoIndex) in tiposActivos" :key="`tipo-${tipo.value}`">
|
|
<g v-for="(point, i) in getPointsForTipo(tipo.value)" :key="`bar-${tipo.value}-${i}`">
|
|
<rect
|
|
:x="point.x + tipoIndex * barWidth / tiposActivos.length"
|
|
:y="point.y"
|
|
:width="barWidth / tiposActivos.length"
|
|
:height="height - padding - point.y"
|
|
:fill="tipo.color"
|
|
:fill-opacity="0.8"
|
|
class="cursor-pointer hover:fill-opacity-100 transition-all"
|
|
>
|
|
<title>{{ tipo.label }} - {{ point.label }}: {{ point.value.toFixed(2) }} {{ getTipoUnidad(tipo) }}</title>
|
|
</rect>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- X-axis labels (distribuidos uniformemente) -->
|
|
<g v-if="tiposActivos.length > 0">
|
|
<text
|
|
v-for="(point, i) in getPointsForTipo(tiposActivos[0].value)"
|
|
:key="`label-${i}`"
|
|
v-show="shouldShowLabel(i, fechasUnicas.length)"
|
|
:x="point.x + barWidth / 2"
|
|
:y="height - padding + 20"
|
|
text-anchor="middle"
|
|
class="text-xs fill-[var(--brand-text-muted)]"
|
|
>
|
|
{{ point.dateLabel }}
|
|
</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<div class="flex items-center justify-between text-xs flex-wrap gap-2">
|
|
<div class="flex items-center gap-4 flex-wrap">
|
|
<div v-for="tipo in tiposActivos" :key="`total-${tipo.value}`" class="flex items-center gap-2">
|
|
<div class="w-3 h-3 rounded" :style="{ backgroundColor: tipo.color }"></div>
|
|
<span class="text-[var(--brand-text-muted)]">{{ tipo.label }}:</span>
|
|
<span class="font-bold" :style="{ color: tipo.color }">
|
|
{{ formatValue(getTotalForTipo(tipo.value)) }} {{ getTipoUnidad(tipo) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-[var(--brand-text-muted)]">
|
|
{{ fechasUnicas.length }} días
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { IngresoRecord } from '~/composables/useIngresosMetrics'
|
|
|
|
interface Props {
|
|
ingresos: IngresoRecord[]
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const tipos = [
|
|
{ value: 'uva', label: 'Uva', color: '#a855f7', unidad: 'lb' },
|
|
{ value: 'oreado', label: 'Oreado', color: '#f97316', unidad: 'qq' },
|
|
{ value: 'mojado', label: 'Mojado', color: '#06b6d4', unidad: 'qq' },
|
|
{ value: 'verde', label: 'Verde', color: '#22c55e', unidad: 'lb' }
|
|
]
|
|
|
|
const tiposSeleccionados = ref(['uva'])
|
|
|
|
const tiposActivos = computed(() => tipos.filter(t => tiposSeleccionados.value.includes(t.value)))
|
|
|
|
// Selector de granularidad temporal
|
|
type GranularityMode = 'auto' | 'year' | 'month' | 'day' | 'hour'
|
|
const selectedGranularity = ref<GranularityMode>('auto')
|
|
|
|
const granularityOptions = [
|
|
{ value: 'auto' as GranularityMode, label: 'Auto', icon: 'i-lucide-wand-2' },
|
|
{ value: 'year' as GranularityMode, label: 'Años', icon: 'i-lucide-calendar' },
|
|
{ value: 'month' as GranularityMode, label: 'Meses', icon: 'i-lucide-calendar-days' },
|
|
{ value: 'day' as GranularityMode, label: 'Días', icon: 'i-lucide-calendar-clock' },
|
|
{ value: 'hour' as GranularityMode, label: 'Horas', icon: 'i-lucide-clock' }
|
|
]
|
|
|
|
// Determinar si estamos en modo seco (oreado o mojado seleccionado)
|
|
const modoSeco = computed(() => {
|
|
return tiposSeleccionados.value.includes('oreado') || tiposSeleccionados.value.includes('mojado')
|
|
})
|
|
|
|
// Determinar si un tipo está deshabilitado
|
|
function isTipoDisabled(tipo: string): boolean {
|
|
if (tipo === 'verde') {
|
|
return modoSeco.value
|
|
}
|
|
if (tipo === 'oreado' || tipo === 'mojado') {
|
|
return tiposSeleccionados.value.includes('verde')
|
|
}
|
|
return false
|
|
}
|
|
|
|
// Obtener label dinámico con unidad correcta
|
|
function getTipoLabel(tipo: { value: string, label: string, color: string, unidad: string }): string {
|
|
if (tipo.value === 'uva') {
|
|
return modoSeco.value ? `${tipo.label} (qq)` : `${tipo.label} (lb)`
|
|
}
|
|
return `${tipo.label} (${tipo.unidad})`
|
|
}
|
|
|
|
// Obtener unidad dinámica según el modo
|
|
function getTipoUnidad(tipo: { value: string, label: string, color: string, unidad: string }): string {
|
|
if (tipo.value === 'uva') {
|
|
return modoSeco.value ? 'qq' : 'lb'
|
|
}
|
|
return tipo.unidad
|
|
}
|
|
|
|
function toggleTipo(value: string, checked: boolean) {
|
|
if (checked) {
|
|
if (!tiposSeleccionados.value.includes(value)) {
|
|
tiposSeleccionados.value.push(value)
|
|
}
|
|
// Si se activa verde, desactivar oreado y mojado
|
|
if (value === 'verde') {
|
|
tiposSeleccionados.value = tiposSeleccionados.value.filter(v => v !== 'oreado' && v !== 'mojado')
|
|
}
|
|
// Si se activa oreado o mojado, desactivar verde
|
|
if (value === 'oreado' || value === 'mojado') {
|
|
tiposSeleccionados.value = tiposSeleccionados.value.filter(v => v !== 'verde')
|
|
}
|
|
} else {
|
|
tiposSeleccionados.value = tiposSeleccionados.value.filter(v => v !== value)
|
|
}
|
|
}
|
|
|
|
const width = 1200
|
|
const height = 450
|
|
const padding = 60
|
|
|
|
const chartWidth = width - 2 * padding
|
|
const chartHeight = height - 2 * padding
|
|
|
|
interface DataPoint {
|
|
date: string
|
|
value: number
|
|
x: number
|
|
y: number
|
|
label: string
|
|
dateLabel: string
|
|
}
|
|
|
|
// Función para detectar granularidad temporal
|
|
function getTimeGranularity(startDate: Date, endDate: Date): 'year' | 'month' | 'day' | 'hour' {
|
|
// Si no es auto, usar la selección manual
|
|
if (selectedGranularity.value !== 'auto') {
|
|
return selectedGranularity.value
|
|
}
|
|
|
|
// Auto: detectar según el rango
|
|
const diffMs = endDate.getTime() - startDate.getTime()
|
|
const diffDays = diffMs / (1000 * 60 * 60 * 24)
|
|
const diffMonths = diffDays / 30
|
|
const diffYears = diffDays / 365
|
|
|
|
if (diffYears > 2) return 'year'
|
|
if (diffMonths > 2) return 'month'
|
|
if (diffDays > 2) return 'day'
|
|
return 'hour'
|
|
}
|
|
|
|
// Función para generar timestamps completos según granularidad
|
|
function generateTimeRange(startDate: Date, endDate: Date, granularity: 'year' | 'month' | 'day' | 'hour'): Date[] {
|
|
const dates: Date[] = []
|
|
const current = new Date(startDate)
|
|
|
|
while (current <= endDate) {
|
|
dates.push(new Date(current))
|
|
|
|
switch (granularity) {
|
|
case 'year':
|
|
current.setFullYear(current.getFullYear() + 1)
|
|
break
|
|
case 'month':
|
|
current.setMonth(current.getMonth() + 1)
|
|
break
|
|
case 'day':
|
|
current.setDate(current.getDate() + 1)
|
|
break
|
|
case 'hour':
|
|
current.setHours(current.getHours() + 1)
|
|
break
|
|
}
|
|
}
|
|
|
|
return dates
|
|
}
|
|
|
|
// Función para formatear fecha según granularidad
|
|
function formatDateByGranularity(date: Date, granularity: 'year' | 'month' | 'day' | 'hour'): string {
|
|
switch (granularity) {
|
|
case 'year':
|
|
return date.getFullYear().toString()
|
|
case 'month':
|
|
return date.toLocaleDateString('es-HN', { year: 'numeric', month: 'short' })
|
|
case 'day':
|
|
return date.toLocaleDateString('es-HN', { day: 'numeric', month: 'short' })
|
|
case 'hour':
|
|
return date.toLocaleTimeString('es-HN', { hour: '2-digit', minute: '2-digit' })
|
|
}
|
|
}
|
|
|
|
// Función para agrupar fecha según granularidad (devuelve formato ISO parseable)
|
|
function getDateKey(date: Date, granularity: 'year' | 'month' | 'day' | 'hour'): string {
|
|
const year = date.getFullYear()
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|
const hour = String(date.getHours()).padStart(2, '0')
|
|
|
|
switch (granularity) {
|
|
case 'year':
|
|
return `${year}`
|
|
case 'month':
|
|
return `${year}-${month}`
|
|
case 'day':
|
|
return `${year}-${month}-${day}`
|
|
case 'hour':
|
|
return `${year}-${month}-${day}T${hour}`
|
|
}
|
|
}
|
|
|
|
// Determinar si mostrar una etiqueta (máximo 10 etiquetas en el eje)
|
|
function shouldShowLabel(index: number, total: number): boolean {
|
|
if (total <= 10) return true
|
|
|
|
const maxLabels = 10
|
|
const step = Math.ceil(total / maxLabels)
|
|
|
|
// Siempre mostrar primera y última
|
|
if (index === 0 || index === total - 1) return true
|
|
|
|
// Mostrar cada N puntos
|
|
return index % step === 0
|
|
}
|
|
|
|
// Obtener todas las fechas únicas (ahora generadas completas)
|
|
const fechasUnicas = computed(() => {
|
|
const allDates = props.ingresos
|
|
.filter(i => tiposSeleccionados.value.includes(i.tipo))
|
|
.filter(i => i.created_at)
|
|
.map(i => new Date(i.created_at!))
|
|
|
|
if (allDates.length === 0) return []
|
|
|
|
const minDate = new Date(Math.min(...allDates.map(d => d.getTime())))
|
|
const maxDate = new Date(Math.max(...allDates.map(d => d.getTime())))
|
|
const granularity = getTimeGranularity(minDate, maxDate)
|
|
const timeRange = generateTimeRange(minDate, maxDate, granularity)
|
|
|
|
return timeRange.map(fecha => getDateKey(fecha, granularity))
|
|
})
|
|
|
|
const barWidth = computed(() => {
|
|
if (fechasUnicas.value.length === 0) return 0
|
|
return chartWidth / fechasUnicas.value.length * 0.8
|
|
})
|
|
|
|
const dataByTipo = computed(() => {
|
|
const result: Record<string, Map<string, number>> = {}
|
|
|
|
const allDates = props.ingresos
|
|
.filter(i => tiposSeleccionados.value.includes(i.tipo))
|
|
.filter(i => i.created_at)
|
|
.map(i => new Date(i.created_at!))
|
|
|
|
if (allDates.length === 0) {
|
|
tiposSeleccionados.value.forEach(tipo => {
|
|
result[tipo] = new Map<string, number>()
|
|
})
|
|
return result
|
|
}
|
|
|
|
const minDate = new Date(Math.min(...allDates.map(d => d.getTime())))
|
|
const maxDate = new Date(Math.max(...allDates.map(d => d.getTime())))
|
|
const granularity = getTimeGranularity(minDate, maxDate)
|
|
|
|
tiposSeleccionados.value.forEach(tipo => {
|
|
result[tipo] = new Map<string, number>()
|
|
|
|
props.ingresos
|
|
.filter(i => i.tipo === tipo)
|
|
.filter(i => i.created_at)
|
|
.forEach(ingreso => {
|
|
const fecha = new Date(ingreso.created_at!)
|
|
const key = getDateKey(fecha, granularity)
|
|
let valor = 0
|
|
|
|
if (tipo === 'uva') {
|
|
valor = modoSeco.value ? ingreso.peso_neto / 500 : ingreso.peso_neto
|
|
} else if (tipo === 'verde') {
|
|
valor = ingreso.peso_neto
|
|
} else {
|
|
valor = ingreso.peso_seco
|
|
}
|
|
|
|
result[tipo].set(key, (result[tipo].get(key) || 0) + valor)
|
|
})
|
|
})
|
|
|
|
return result
|
|
})
|
|
|
|
const maxValue = computed(() => {
|
|
let max = 0
|
|
Object.values(dataByTipo.value).forEach(map => {
|
|
Array.from(map.values()).forEach(value => {
|
|
if (value > max) max = value
|
|
})
|
|
})
|
|
return max * 1.1 || 100
|
|
})
|
|
|
|
function getPointsForTipo(tipo: string): DataPoint[] {
|
|
const data = dataByTipo.value[tipo]
|
|
if (!data) return []
|
|
|
|
const allDates = props.ingresos
|
|
.filter(i => tiposSeleccionados.value.includes(i.tipo))
|
|
.filter(i => i.created_at)
|
|
.map(i => new Date(i.created_at!))
|
|
|
|
if (allDates.length === 0) return []
|
|
|
|
const minDate = new Date(Math.min(...allDates.map(d => d.getTime())))
|
|
const maxDate = new Date(Math.max(...allDates.map(d => d.getTime())))
|
|
const granularity = getTimeGranularity(minDate, maxDate)
|
|
|
|
return fechasUnicas.value.map((fecha, i) => {
|
|
const value = data.get(fecha) || 0
|
|
const x = padding + (i / (fechasUnicas.value.length - 1 || 1)) * chartWidth
|
|
const y = height - padding - (value / maxValue.value) * chartHeight
|
|
|
|
// Parsear fecha según granularidad
|
|
let tempDate: Date
|
|
if (granularity === 'year') {
|
|
tempDate = new Date(parseInt(fecha), 0, 1)
|
|
} else if (granularity === 'month') {
|
|
const [year, month] = fecha.split('-')
|
|
tempDate = new Date(parseInt(year), parseInt(month) - 1, 1)
|
|
} else if (granularity === 'hour') {
|
|
// Formato: YYYY-MM-DDTHH
|
|
tempDate = new Date(fecha + ':00:00Z')
|
|
} else {
|
|
// granularity === 'day', formato: YYYY-MM-DD
|
|
tempDate = new Date(fecha + 'T00:00:00Z')
|
|
}
|
|
|
|
return {
|
|
date: fecha,
|
|
value,
|
|
x,
|
|
y,
|
|
label: fecha,
|
|
dateLabel: formatDateByGranularity(tempDate, granularity)
|
|
}
|
|
})
|
|
}
|
|
|
|
function getTotalForTipo(tipo: string): number {
|
|
const data = dataByTipo.value[tipo]
|
|
if (!data) return 0
|
|
|
|
let total = 0
|
|
data.forEach(value => {
|
|
total += value
|
|
})
|
|
return total
|
|
}
|
|
|
|
function formatValue(value: number): string {
|
|
if (value >= 1000) {
|
|
return (value / 1000).toFixed(1) + 'k'
|
|
}
|
|
return value.toFixed(0)
|
|
}
|
|
</script>
|