41 lines
1.1 KiB
Vue
41 lines
1.1 KiB
Vue
<template>
|
|
<UCard class="brand-card border border-transparent">
|
|
<template #header>
|
|
<h2 class="text-xl font-bold brand-section-title">Precios Promedio Ponderados</h2>
|
|
</template>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<MetricCard
|
|
label="Precio Promedio Ponderado Uva"
|
|
:value="formatNumber(metrics.precioPromedioUvaPorQqLb.value)"
|
|
unit="L./lb"
|
|
/>
|
|
<MetricCard
|
|
label="Precio Promedio Ponderado Oreado"
|
|
:value="formatNumber(metrics.precioPromedioOreadoPorQq.value)"
|
|
unit="L./qq"
|
|
/>
|
|
<MetricCard
|
|
label="Precio Promedio Ponderado Mojado"
|
|
:value="formatNumber(metrics.precioPromedioMojadoPorQq.value)"
|
|
unit="L./qq"
|
|
/>
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { IngresosMetrics } from '~/composables/useIngresosMetrics'
|
|
|
|
defineProps<{
|
|
metrics: IngresosMetrics
|
|
}>()
|
|
|
|
const formatNumber = (value: number) => {
|
|
return value.toLocaleString('en-US', {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2
|
|
})
|
|
}
|
|
</script>
|