nucleo000/analiticaNucleo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mejoras de ui UX demasido intensas

Browse Source
This commit is contained in:
josedario87
2025-10-01 07:44:14 -06:00
parent 32b10e1ad6
commit 053501a16d
5 changed files with 545 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
nuxt4-app/app/components/comparativa/CosechasHeatmap.vue
View File

@@ -199,11 +199,11 @@
<span class="text-[10px] text-[var(--brand-text-muted)] uppercase font-semibold">Leyenda:</span>
<div class="flex items-center gap-1.5">
<div class="w-2 h-2 rounded-full bg-[#c08040]"></div>
<span class="text-[10px] text-[var(--brand-text-muted)]">Total completo</span>
<span class="text-[10px] text-[var(--brand-text-muted)]">Total completo de la cosecha</span>
</div>
<div class="flex items-center gap-1.5">
<div class="w-2 h-2 rounded-full bg-blue-400"></div>
<span class="text-[10px] text-[var(--brand-text-muted)]">Acumulado hasta hoy (día {{ diaActualRelativo }})</span>
<span class="text-[10px] text-[var(--brand-text-muted)]">Acumulado hasta la fecha</span>
</div>
</div>
@@ -224,18 +224,18 @@
{{ formatTotal(cosecha.total) }}
</div>
<div
v-if="cosecha.totalALaFecha !== null"
v-if="cosecha.totalALaFecha !== null && cosecha.totalALaFecha > 0"
class="text-[10px] text-blue-400 font-medium"
:title="`Acumulado hasta el día ${diaActualRelativo} (equivalente a hoy)`"
title="Acumulado hasta la fecha actual"
>
↗ {{ formatTotal(cosecha.totalALaFecha) }}
</div>
<div
v-else
class="text-[10px] text-gray-500 italic"
title="Esta cosecha aún no ha llegado a este día del año"
title="Sin datos hasta la fecha [actual]"
>
Sin datos
0
</div>
</div>
</div>
@@ -272,10 +272,6 @@
:key="`${cosecha.id}-${dia}`"
class="border-r border-b transition-all cursor-pointer relative"
:class="[
// Marcador del día actual
dia - 1 === diaActualRelativo
? 'border-l-2 border-l-blue-400'
: '',
// Rango seleccionado (naranja)
isInSelectedRange(dia - 1)
? 'ring-2 ring-[#c08040] border-[#c08040] z-10'
@@ -295,16 +291,17 @@
@mouseenter="showTooltip($event, cosecha, dia - 1)"
@mouseleave="hideTooltip"
>
<!-- Overlay gris para días ya transcurridos -->
<div
v-if="isDiaPasado(cosecha.id, dia - 1)"
class="absolute inset-0 bg-gray-400/15 pointer-events-none"
/>
<!-- Marcador visual para primera celda seleccionada -->
<div
v-if="primerDiaSeleccionado === dia - 1 && rangoSeleccionado === null"
class="absolute inset-0 bg-blue-500/30 pointer-events-none"
/>
<!-- Indicador del día actual -->
<div
v-if="dia - 1 === diaActualRelativo"
class="absolute left-0 top-0 bottom-0 w-0.5 bg-blue-400 pointer-events-none z-20"
/>
</div>
</div>
</div>
@@ -318,11 +315,11 @@
<span class="text-[10px] text-[var(--brand-text-muted)] uppercase font-semibold">Leyenda:</span>
<div class="flex items-center gap-1.5">
<div class="w-2 h-2 rounded-full bg-[#c08040]"></div>
<span class="text-[10px] text-[var(--brand-text-muted)]">Total completo</span>
<span class="text-[10px] text-[var(--brand-text-muted)]">Total completo de la cosecha</span>
</div>
<div class="flex items-center gap-1.5">
<div class="w-2 h-2 rounded-full bg-blue-400"></div>
<span class="text-[10px] text-[var(--brand-text-muted)]">Acumulado hasta hoy (día {{ diaActualRelativo }})</span>
<span class="text-[10px] text-[var(--brand-text-muted)]">Acumulado hasta la fecha</span>
</div>
</div>
@@ -343,18 +340,18 @@
{{ formatTotal(cosecha.total) }}
</div>
<div
v-if="cosecha.totalALaFecha !== null"
v-if="cosecha.totalALaFecha !== null && cosecha.totalALaFecha > 0"
class="text-[10px] text-blue-400 font-medium"
:title="`Acumulado hasta el día ${diaActualRelativo} (equivalente a hoy)`"
title="Acumulado hasta la fecha actual"
>
↗ {{ formatTotal(cosecha.totalALaFecha) }}
</div>
<div
v-else
class="text-[10px] text-gray-500 italic"
title="Esta cosecha aún no ha llegado a este día del año"
title="Sin datos hasta la fecha actual"
>
Sin datos
{{ formatTotal(cosecha.totalALaFecha) }}
</div>
</div>
</div>
@@ -392,10 +389,6 @@
:key="`${cosecha.id}-${dia}`"
class="relative border-b cursor-pointer group"
:class="[
// Marcador del día actual
dia - 1 === diaActualRelativo
? 'border-l-2 border-l-blue-400'
: '',
// Rango seleccionado (naranja)
isInSelectedRange(dia - 1)
? 'border-[#c08040] border-2 bg-[#c08040]/10'
@@ -411,6 +404,12 @@
@mouseenter="showTooltip($event, cosecha, dia - 1)"
@mouseleave="hideTooltip"
>
<!-- Overlay gris para días ya transcurridos -->
<div
v-if="isDiaPasado(cosecha.id, dia - 1)"
class="absolute inset-0 bg-gray-400/15 pointer-events-none"
/>
<!-- Barra horizontal -->
<div
class="absolute left-0 top-1/2 -translate-y-1/2 transition-all group-hover:opacity-90"
@@ -420,11 +419,6 @@
backgroundColor: getCosechaColor(cosecha.id)
}"
/>
<!-- Indicador del día actual -->
<div
v-if="dia - 1 === diaActualRelativo"
class="absolute left-0 top-0 bottom-0 w-0.5 bg-blue-400 pointer-events-none z-20"
/>
</div>
</div>
</div>
@@ -636,25 +630,45 @@ const tooltipX = ref(0)
const tooltipY = ref(0)
const tooltipData = ref({ cosecha: '', dia: 0, valor: '', fecha: '' })
// Calcular el día actual relativo desde el inicio del año de cosecha (8 de septiembre)
const diaActualRelativo = computed(() => {
// Día y mes actual para comparar
const fechaActual = computed(() => {
const hoy = new Date()
// Normalizar a medianoche para comparaciones
hoy.setHours(0, 0, 0, 0)
return {
dia: hoy.getDate(),
mes: hoy.getMonth(), // 0-11
fecha: hoy,
formatted: hoy.toLocaleDateString('es-HN', { day: 'numeric', month: 'short' })
}
})
// Fecha de inicio del año de cosecha actual (8 de septiembre del año correspondiente)
let anioInicioCosecha = hoy.getFullYear()
const inicioCosechaEsteAnio = new Date(anioInicioCosecha, 8, 8) // 8 de septiembre
// Calcular cuántos días han pasado desde el 7 de septiembre de este año
const diasTranscurridosDesdeInicio = computed(() => {
const hoy = new Date()
hoy.setHours(0, 0, 0, 0)
// Si aún no hemos llegado al 8 de septiembre de este año, el inicio fue el año pasado
if (hoy < inicioCosechaEsteAnio) {
anioInicioCosecha--
// 7 de septiembre del año actual
const inicioDelAnio = new Date(hoy.getFullYear(), 8, 7) // mes 8 = septiembre (0-indexed)
inicioDelAnio.setHours(0, 0, 0, 0)
// Si todavía no llegamos al 7 de septiembre de este año, usar el del año pasado
if (hoy < inicioDelAnio) {
inicioDelAnio.setFullYear(inicioDelAnio.getFullYear() - 1)
}
const inicioCosecha = new Date(anioInicioCosecha, 8, 8) // 8 de septiembre
const diaRelativo = Math.floor((hoy.getTime() - inicioCosecha.getTime()) / (1000 * 60 * 60 * 24))
// Calcular diferencia en días
const diffMs = hoy.getTime() - inicioDelAnio.getTime()
const diffDias = Math.floor(diffMs / (1000 * 60 * 60 * 24))
return diaRelativo
return diffDias
})
// Función para verificar si un día ya pasó (basado en días desde el inicio, no en año)
function isDiaPasado(cosechaId: string, diaIndex: number): boolean {
return diaIndex <= diasTranscurridosDesdeInicio.value
}
// Calcular datos por cosecha usando vista_resumen_ingresos
const datosCosechas = computed(() => {
return props.cosechasSeleccionadas.map(cosechaId => {
@@ -747,13 +761,25 @@ const datosCosechas = computed(() => {
}
}
// Calcular total acumulado hasta la fecha actual (día relativo de hoy)
// Calcular total acumulado hasta la fecha actual (mismo día/mes pero del año de cada cosecha)
let totalALaFecha: number | null = null
// Solo calcular si el día actual está dentro del rango de datos disponibles
if (diaActualRelativo.value >= 0 && diaActualRelativo.value < valoresPorDia.length) {
totalALaFecha = 0
for (let i = 0; i <= diaActualRelativo.value; i++) {
// Obtener el año de inicio de esta cosecha
const anioInicioCosecha = fechaInicio.getFullYear()
// Construir la fecha objetivo: mismo día y mes de hoy, pero del año de inicio de esta cosecha
// Ej: Si hoy es 1 oct 2025 y la cosecha inició en sep 2023, usamos 1 oct 2023
const fechaObjetivoCosecha = new Date(anioInicioCosecha, fechaActual.value.mes, fechaActual.value.dia)
// Calcular el día relativo desde el inicio de la cosecha hasta esa fecha objetivo
const diaObjetivo = Math.floor((fechaObjetivoCosecha.getTime() - fechaInicio.getTime()) / (1000 * 60 * 60 * 24))
// Acumular desde el inicio de la cosecha hasta la fecha objetivo
totalALaFecha = 0
if (diaObjetivo >= 0) {
// Sumar todos los días desde el inicio hasta la fecha objetivo (o hasta donde haya datos)
const limiteSuperior = Math.min(diaObjetivo, valoresPorDia.length - 1)
for (let i = 0; i <= limiteSuperior; i++) {
totalALaFecha += valoresPorDia[i] || 0
}
}