472 lines
15 KiB
Vue
472 lines
15 KiB
Vue
<!-- Gráfica de Acumulación de Uva/Oreado/Mojado/Verde -->
|
|
<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">Acumulación de Café</h3>
|
|
<p class="text-xs text-[var(--brand-text-muted)] mt-1">
|
|
Evolución acumulada en el tiempo
|
|
</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: boolean) => 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: 400px;">
|
|
<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>
|
|
|
|
<!-- Gráficas por cada tipo -->
|
|
<g v-for="tipo in tiposActivos" :key="`tipo-${tipo.value}`">
|
|
<!-- Area under curve -->
|
|
<path
|
|
:d="getAreaPathForTipo(tipo.value)"
|
|
:fill="tipo.color"
|
|
fill-opacity="0.2"
|
|
/>
|
|
|
|
<!-- Line -->
|
|
<path
|
|
:d="getLinePathForTipo(tipo.value)"
|
|
:stroke="tipo.color"
|
|
stroke-width="3"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
|
|
<!-- Points -->
|
|
<circle
|
|
v-for="(point, i) in getPointsForTipo(tipo.value)"
|
|
:key="`point-${tipo.value}-${i}`"
|
|
:cx="point.x"
|
|
:cy="point.y"
|
|
r="4"
|
|
:fill="tipo.color"
|
|
class="cursor-pointer hover:r-6 transition-all"
|
|
>
|
|
<title>{{ tipo.label }} - {{ point.label }}: {{ point.acumulado.toFixed(2) }} {{ getTipoUnidad(tipo) }}</title>
|
|
</circle>
|
|
</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, getPointsForTipo(tiposActivos[0].value).length)"
|
|
:x="point.x"
|
|
: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-full" :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)]">
|
|
{{ allDates.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 = 400
|
|
const padding = 60
|
|
|
|
const chartWidth = width - 2 * padding
|
|
const chartHeight = height - 2 * padding
|
|
|
|
interface DataPoint {
|
|
date: Date
|
|
value: number
|
|
acumulado: 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}`
|
|
}
|
|
}
|
|
|
|
// Datos por tipo
|
|
const dataByTipo = computed(() => {
|
|
const result: Record<string, DataPoint[]> = {}
|
|
|
|
// Encontrar rango temporal solo de los tipos seleccionados
|
|
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] = []
|
|
})
|
|
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)
|
|
const timeRange = generateTimeRange(minDate, maxDate, granularity)
|
|
|
|
tiposSeleccionados.value.forEach(tipo => {
|
|
const ingresosFiltrados = props.ingresos
|
|
.filter(i => i.tipo === tipo)
|
|
.filter(i => i.created_at)
|
|
|
|
const porPeriodo = new Map<string, number>()
|
|
|
|
ingresosFiltrados.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
|
|
}
|
|
|
|
porPeriodo.set(key, (porPeriodo.get(key) || 0) + valor)
|
|
})
|
|
|
|
let acumulado = 0
|
|
const puntos: DataPoint[] = []
|
|
|
|
timeRange.forEach(fecha => {
|
|
const key = getDateKey(fecha, granularity)
|
|
const valor = porPeriodo.get(key) || 0
|
|
acumulado += valor
|
|
|
|
puntos.push({
|
|
date: fecha,
|
|
value: valor,
|
|
acumulado,
|
|
x: 0,
|
|
y: 0,
|
|
label: key,
|
|
dateLabel: formatDateByGranularity(fecha, granularity)
|
|
})
|
|
})
|
|
|
|
result[tipo] = puntos
|
|
})
|
|
|
|
return result
|
|
})
|
|
|
|
const maxValue = computed(() => {
|
|
let max = 0
|
|
Object.values(dataByTipo.value).forEach(puntos => {
|
|
if (puntos.length > 0) {
|
|
const maxAcumulado = Math.max(...puntos.map(p => p.acumulado))
|
|
if (maxAcumulado > max) max = maxAcumulado
|
|
}
|
|
})
|
|
return max * 1.1 || 100
|
|
})
|
|
|
|
// Obtener todas las fechas únicas (ahora se genera automáticamente)
|
|
const allDates = computed(() => {
|
|
const firstTipo = tiposSeleccionados.value[0]
|
|
if (!firstTipo || !dataByTipo.value[firstTipo]) return []
|
|
return dataByTipo.value[firstTipo].map(p => p.label)
|
|
})
|
|
|
|
// 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
|
|
}
|
|
|
|
// Calcular puntos con coordenadas para cada tipo
|
|
function getPointsForTipo(tipo: string) {
|
|
const data = dataByTipo.value[tipo]
|
|
if (!data || data.length === 0) return []
|
|
|
|
return data.map((point, i) => {
|
|
const x = padding + (i / (data.length - 1 || 1)) * chartWidth
|
|
const y = height - padding - (point.acumulado / maxValue.value) * chartHeight
|
|
|
|
return { ...point, x, y }
|
|
})
|
|
}
|
|
|
|
function getLinePathForTipo(tipo: string) {
|
|
const points = getPointsForTipo(tipo)
|
|
if (points.length === 0) return ''
|
|
|
|
return points.map((point, i) => {
|
|
return i === 0 ? `M ${point.x} ${point.y}` : `L ${point.x} ${point.y}`
|
|
}).join(' ')
|
|
}
|
|
|
|
function getAreaPathForTipo(tipo: string) {
|
|
const points = getPointsForTipo(tipo)
|
|
if (points.length === 0) return ''
|
|
|
|
const linePart = points.map((point, i) => {
|
|
return i === 0 ? `M ${point.x} ${point.y}` : `L ${point.x} ${point.y}`
|
|
}).join(' ')
|
|
|
|
const lastPoint = points[points.length - 1]
|
|
const firstPoint = points[0]
|
|
|
|
if (!lastPoint || !firstPoint) return ''
|
|
|
|
return `${linePart} L ${lastPoint.x} ${height - padding} L ${firstPoint.x} ${height - padding} Z`
|
|
}
|
|
|
|
function getTotalForTipo(tipo: string) {
|
|
const data = dataByTipo.value[tipo]
|
|
if (!data || data.length === 0) return 0
|
|
return data[data.length - 1]?.acumulado || 0
|
|
}
|
|
|
|
function formatValue(value: number): string {
|
|
if (value >= 1000) {
|
|
return (value / 1000).toFixed(1) + 'k'
|
|
}
|
|
return value.toFixed(0)
|
|
}
|
|
</script>
|