@drax/dashboard-vue 0.37.0

package/src/components/GroupByCard/renders/GroupByGalleryRender.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import type {PropType} from "vue";
+import {computed} from "vue";
+import {useDateFormat} from "@drax/common-vue"
+import type {IDraxDateFormatUnit} from "@drax/common-share";
+import type {IEntityCrudField} from "@drax/crud-share";
+
+const {formatDateByUnit} = useDateFormat()
+
+const {data, headers, fields, dateFormat} = defineProps({
+  data: {type: Array as PropType<any[]>, required: false},
+  headers: {type: Array as PropType<any[]>, required: false},
+  fields: {type: Array as PropType<IEntityCrudField[]>, required: false},
+  dateFormat: {type: String as PropType<IDraxDateFormatUnit>, required: false, default:'day'},
+})
+
+// Paleta de colores para las tarjetas
+const colors = [
+  'purple', 'indigo', 'teal', 'orange', 'pink',
+  'cyan', 'lime', 'amber', 'deep-purple', 'light-blue',
+  'deep-orange', 'blue-grey', 'brown', 'red', 'green'
+]
+
+// Calcular el total de todos los counts
+const totalCount = computed(() => {
+  if (!data || data.length === 0) return 0
+  return data.reduce((sum, item) => sum + (item.count || 0), 0)
+})
+
+// Preparar datos para las tarjetas
+const cardData = computed(() => {
+  if (!data || data.length === 0) return []
+
+  return data.map((item, index) => {
+    const percentage = totalCount.value > 0 ? (item.count / totalCount.value) * 100 : 0
+
+    // Obtener el label combinando todos los campos excepto count
+    const labelParts: string[] = []
+
+    // Iterar sobre las claves del item excepto count
+    Object.keys(item).forEach(key => {
+      if (key === 'count') return
+
+      // Buscar el campo correspondiente en fields
+      const field = fields?.find(f => f.name === key)
+      const value = item[key]
+
+      if (!field || value === null || value === undefined) return
+
+      let formattedValue = ''
+
+      if (field.type === 'ref' && field.refDisplay && value) {
+        formattedValue = value[field.refDisplay]
+      } else if (field.type === 'date' && value) {
+        formattedValue = formatDateByUnit(value, dateFormat)
+      } else if (field.type === 'enum' && value) {
+        formattedValue = value.toString()
+      } else if (typeof value === 'object' && !Array.isArray(value)) {
+        formattedValue = JSON.stringify(value)
+      } else {
+        formattedValue = value?.toString() || ''
+      }
+
+      if (formattedValue) {
+        labelParts.push(formattedValue)
+      }
+    })
+
+    const label = labelParts.length > 0 ? labelParts.join(' - ') : 'N/A'
+
+    return {
+      label,
+      value: item.count || 0,
+      percentage,
+      color: colors[index % colors.length]
+    }
+  })
+})
+</script>
+
+<template>
+  <div class="gallery-container">
+    <div v-if="!data || data.length === 0" class="empty-state">
+      <v-icon size="64" color="grey-lighten-1">mdi-view-grid</v-icon>
+      <p class="text-grey-lighten-1 mt-4">No hay datos para mostrar</p>
+    </div>
+
+    <template v-else>
+      <v-row dense class="ma-0">
+        <v-col
+            v-for="(card, index) in cardData"
+            :key="index"
+            cols="6"
+            sm="4"
+            md="3"
+            lg="2"
+            class="pa-1"
+        >
+          <v-card
+              :color="card.color"
+              variant="tonal"
+              class="gallery-card"
+              hover
+          >
+            <v-card-text class="pa-2">
+              <div class="d-flex flex-column align-center text-center">
+                <div class="card-value text-h5 font-weight-bold mb-1">
+                  {{ card.value }}
+                </div>
+                <div class="card-label text-caption text-truncate" :title="card.label">
+                  {{ card.label }}
+                </div>
+                <v-chip
+                    :color="card.color"
+                    size="x-small"
+                    variant="flat"
+                    class="mt-1"
+                >
+                  {{ card.percentage.toFixed(1) }}%
+                </v-chip>
+              </div>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+
+      <v-divider class="my-2"></v-divider>
+
+      <div class="total-section pa-2">
+        <v-card variant="flat" color="grey-lighten-4">
+          <v-card-text class="pa-2 d-flex align-center justify-space-between">
+            <span class="text-subtitle-2 font-weight-bold">Total</span>
+            <v-chip color="primary" size="small" variant="flat">
+              {{ totalCount }}
+            </v-chip>
+          </v-card-text>
+        </v-card>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.gallery-container {
+  width: 100%;
+  padding: 4px;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px;
+  min-height: 200px;
+}
+
+.gallery-card {
+  height: 100%;
+  transition: transform 0.2s, box-shadow 0.2s;
+  cursor: pointer;
+}
+
+.gallery-card:hover {
+  transform: translateY(-2px);
+}
+
+.card-value {
+  line-height: 1.2;
+}
+
+.card-label {
+  width: 100%;
+  line-height: 1.2;
+  max-width: 100%;
+}
+
+.total-section {
+  padding: 0 4px;
+}
+</style>

package/src/components/GroupByCard/renders/GroupByPieRender.vue

@@ -0,0 +1,298 @@
+<script setup lang="ts">
+import type {PropType} from "vue";
+import {computed, ref, onMounted, watch} from "vue";
+import {useDateFormat} from "@drax/common-vue"
+import type {IDraxDateFormatUnit} from "@drax/common-share";
+import type {IEntityCrudField} from "@drax/crud-share";
+
+const {formatDateByUnit} = useDateFormat()
+
+const {data, headers, fields, dateFormat} = defineProps({
+  data: {type: Array as PropType<any[]>, required: false},
+  headers: {type: Array as PropType<any[]>, required: false},
+  fields: {type: Array as PropType<IEntityCrudField[]>, required: false},
+  dateFormat: {type: String as PropType<IDraxDateFormatUnit>, required: false, default:'day'},
+})
+
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+
+// Paleta de colores para el gráfico
+const colors = [
+  '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF',
+  '#FF9F40', '#FF6384', '#C9CBCF', '#4BC0C0', '#FF9F40',
+  '#36A2EB', '#FFCE56', '#9966FF', '#FF6384', '#4BC0C0'
+]
+
+// Calcular el total de todos los counts
+const totalCount = computed(() => {
+  if (!data || data.length === 0) return 0
+  return data.reduce((sum, item) => sum + (item.count || 0), 0)
+})
+
+// Preparar datos para el gráfico
+const chartData = computed(() => {
+  if (!data || data.length === 0) return []
+
+  return data.map((item, index) => {
+    const percentage = totalCount.value > 0 ? (item.count / totalCount.value) * 100 : 0
+
+    // Obtener el label combinando todos los campos excepto count
+    const labelParts: string[] = []
+
+    // Iterar sobre las claves del item excepto count
+    Object.keys(item).forEach(key => {
+      if (key === 'count') return
+
+      // Buscar el campo correspondiente en fields
+      const field = fields?.find(f => f.name === key)
+      const value = item[key]
+
+      if (!field || value === null || value === undefined) return
+
+      let formattedValue = ''
+
+      if (field.type === 'ref' && field.refDisplay && value) {
+        formattedValue = value[field.refDisplay]
+      } else if (field.type === 'date' && value) {
+        formattedValue = formatDateByUnit(value, dateFormat)
+      } else if (field.type === 'enum' && value) {
+        formattedValue = value.toString()
+      } else if (typeof value === 'object' && !Array.isArray(value)) {
+        formattedValue = JSON.stringify(value)
+      } else {
+        formattedValue = value?.toString() || ''
+      }
+
+      if (formattedValue) {
+        labelParts.push(formattedValue)
+      }
+    })
+
+    const label = labelParts.length > 0 ? labelParts.join(' - ') : 'N/A'
+
+    return {
+      label,
+      value: item.count || 0,
+      percentage,
+      color: colors[index % colors.length]
+    }
+  })
+})
+
+// Dibujar el gráfico de torta
+const drawPieChart = () => {
+  if (!canvasRef.value || chartData.value.length === 0) return
+
+  const canvas = canvasRef.value
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+
+  // Configurar el tamaño del canvas
+  const size = Math.min(canvas.parentElement?.clientWidth || 400, 400)
+  canvas.width = size
+  canvas.height = size
+
+  const centerX = size / 2
+  const centerY = size / 2
+  const radius = (size / 2) * 0.7
+
+  // Limpiar el canvas
+  ctx.clearRect(0, 0, size, size)
+
+  // Dibujar cada segmento
+  let currentAngle = -Math.PI / 2 // Comenzar desde arriba
+
+  chartData.value.forEach((segment) => {
+    const sliceAngle = (segment.percentage / 100) * 2 * Math.PI
+
+    // Dibujar el segmento
+    ctx.beginPath()
+    ctx.moveTo(centerX, centerY)
+    ctx.arc(centerX, centerY, radius, currentAngle, currentAngle + sliceAngle)
+    ctx.closePath()
+    ctx.fillStyle = segment.color
+    ctx.fill()
+
+    // Dibujar borde blanco
+    ctx.strokeStyle = '#ffffff'
+    ctx.lineWidth = 2
+    ctx.stroke()
+
+    currentAngle += sliceAngle
+  })
+
+  // Dibujar círculo blanco en el centro para efecto "donut" (opcional)
+  ctx.beginPath()
+  ctx.arc(centerX, centerY, radius * 0.5, 0, 2 * Math.PI)
+  ctx.fillStyle = '#ffffff'
+  ctx.fill()
+}
+
+// Redibujar cuando cambien los datos
+watch(() => data, () => {
+  setTimeout(drawPieChart, 100)
+}, { deep: true })
+
+onMounted(() => {
+  drawPieChart()
+
+  // Redibujar al cambiar el tamaño de la ventana
+  window.addEventListener('resize', drawPieChart)
+})
+</script>
+
+<template>
+  <div class="pie-chart-container">
+    <div v-if="!data || data.length === 0" class="empty-state">
+      <v-icon size="64" color="grey-lighten-1">mdi-chart-pie</v-icon>
+      <p class="text-grey-lighten-1 mt-4">No hay datos para mostrar</p>
+    </div>
+
+    <template v-else>
+      <div class="chart-wrapper">
+        <canvas ref="canvasRef"></canvas>
+      </div>
+
+      <div class="legend-container">
+        <div
+            v-for="(segment, index) in chartData"
+            :key="index"
+            class="legend-item"
+        >
+          <div class="legend-color" :style="{ backgroundColor: segment.color }"></div>
+          <div class="legend-content">
+            <div class="legend-label">{{ segment.label }}</div>
+            <div class="legend-stats">
+              <v-chip color="primary" size="x-small" variant="flat">
+                {{ segment.value }}
+              </v-chip>
+              <span class="legend-percentage">{{ segment.percentage.toFixed(1) }}%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="total-container">
+        <v-divider class="my-1"></v-divider>
+        <div class="d-flex align-center justify-space-between">
+          <span class="text-subtitle-1 font-weight-medium ml-2">Total</span>
+          <v-chip color="primary" variant="flat">
+            {{ totalCount }}
+          </v-chip>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.pie-chart-container {
+  padding: 2px;
+  width: 100%;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 2px;
+}
+
+.chart-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 2px;
+  padding: 2px;
+}
+
+.chart-wrapper canvas {
+  max-width: 200px;
+  max-height: 180px;
+  height: auto;
+}
+
+.legend-container {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 2px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 4px;
+  border-radius: 6px;
+  transition: background-color 0.2s;
+}
+
+.legend-item:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.legend-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+
+.legend-content {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 6px;
+}
+
+.legend-label {
+  font-size: 13px;
+  font-weight: 500;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.legend-stats {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.legend-percentage {
+  font-size: 11px;
+  color: rgba(0, 0, 0, 0.6);
+  font-weight: 500;
+  min-width: 40px;
+  text-align: right;
+}
+
+.total-container {
+  margin-top: 8px;
+}
+
+/* Scrollbar personalizado para la leyenda */
+.legend-container::-webkit-scrollbar {
+  width: 4px;
+}
+
+.legend-container::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 2px;
+}
+
+.legend-container::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 2px;
+}
+
+.legend-container::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+</style>

package/src/components/GroupByCard/renders/GroupByTableRender.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import type {PropType} from "vue";
+import {computed} from "vue";
+import {useDateFormat} from "@drax/common-vue"
+import type {IDraxDateFormatUnit} from "@drax/common-share";
+import type {IEntityCrudField} from "@drax/crud-share";
+
+const {formatDateByUnit} = useDateFormat()
+
+const {data, headers, fields, dateFormat} = defineProps({
+  data: {type: Array as PropType<any[]>, required: false},
+  headers: {type: Array as PropType<any[]>, required: false},
+  fields: {type: Array as PropType<IEntityCrudField[]>, required: false},
+  dateFormat: {type: String as PropType<IDraxDateFormatUnit>, required: false, default:'day'},
+})
+
+// Calcular el total de todos los counts
+const totalCount = computed(() => {
+  if (!data || data.length === 0) return 0
+  return data.reduce((sum, item) => sum + (item.count || 0), 0)
+})
+
+// Calcular el porcentaje para cada item
+const getPercentage = (count: number) => {
+  if (totalCount.value === 0) return 0
+  return ((count / totalCount.value) * 100).toFixed(1)
+}
+
+</script>
+
+<template>
+  <div>
+    <v-data-table
+        :headers="headers"
+        :items="data"
+        density="compact"
+        :items-per-page="-1"
+        hide-default-footer
+    >
+      <template v-slot:bottom></template>
+
+      <!-- Slot para personalizar la visualización de cada campo -->
+      <template
+          v-for="field in fields"
+          :key="field.name"
+          v-slot:[`item.${field.name}`]="{ value }"
+      >
+        <template v-if="field.type === 'ref' && field.refDisplay">
+          {{value[field.refDisplay]}}
+        </template>
+        <template v-else-if="field.type === 'date'">
+          {{ formatDateByUnit(value, dateFormat) }}
+        </template>
+        <template v-else>
+          {{ value }}
+        </template>
+
+      </template>
+
+      <!-- Formato especial para el count con porcentaje -->
+      <template v-slot:item.count="{ item }">
+        <div class="d-flex align-center justify-end ga-2">
+          <v-chip color="primary" size="small" variant="flat">
+            {{ item.count }}
+          </v-chip>
+          <span class="text-caption text-grey text-left percentage-text">
+            ({{ getPercentage(item.count) }}%)
+          </span>
+        </div>
+      </template>
+    </v-data-table>
+
+    <!-- Fila de totales -->
+    <v-divider class="my-2"></v-divider>
+    <div class="d-flex align-center justify-space-between px-4 py-2">
+      <span class="text-subtitle-1 font-weight-medium">Total</span>
+      <v-chip color="primary" variant="flat">
+        {{ totalCount }}
+      </v-chip>
+    </div>
+  </div>
+
+</template>
+
+<style scoped>
+.percentage-text {
+  display: inline-block;
+  min-width: 45px;
+  text-align: right;
+}
+</style>

package/src/components/PaginateCard/PaginateCard.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type {PropType} from "vue";
+import type {IDashboardCard} from "@drax/dashboard-share";
+import {useDashboardCard} from "../../composables/UseDashboardCard";
+import PaginateTableRender from "./renders/PaginateTableRender.vue";
+import {ref, onMounted, defineProps } from "vue";
+import type {IDraxPaginateResult} from "@drax/crud-share";
+
+
+const {card} = defineProps({
+  card: {type: Object as PropType<IDashboardCard>, required: true},
+})
+
+const {fetchPaginateData, cardEntityFields, paginateHeaders} = useDashboardCard(card)
+
+const data = ref<IDraxPaginateResult<any>>()
+
+onMounted(async ()=> {
+  data.value = await fetchPaginateData()
+})
+
+</script>
+
+<template>
+  <paginate-table-render  v-if="card?.groupBy?.render === 'table'"
+                          :data="data"
+                          :fields="cardEntityFields"
+                          :headers="paginateHeaders"
+  />
+
+</template>
+
+<style scoped>
+
+</style>

package/src/components/PaginateCard/renders/PaginateTableRender.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type {PropType} from "vue";
+import {useDateFormat} from "@drax/common-vue"
+import type {IDraxDateFormatUnit} from "@drax/common-share";
+import type {IEntityCrudField} from "@drax/crud-share";
+import type {IDraxPaginateResult} from "@drax/crud-share";
+
+const {formatDateByUnit} = useDateFormat()
+
+const {data, headers, fields, dateFormat} = defineProps({
+  data: {type: Object as PropType<IDraxPaginateResult<any>>, required: false},
+  headers: {type: Array as PropType<any[]>, required: false},
+  fields: {type: Array as PropType<IEntityCrudField[]>, required: false},
+  dateFormat: {type: String as PropType<IDraxDateFormatUnit>, required: false, default:'day'},
+})
+
+
+</script>
+
+<template>
+  <div v-if="data">
+    <v-data-table-server
+        :headers="headers"
+        :items="data?.items"
+        density="compact"
+        v-model:page="data.page"
+        v-model:items-per-page="data.limit"
+        :items-length="data.total"
+        striped="odd"
+        hide-default-footer
+    >
+
+      <!-- Slot para personalizar la visualización de cada campo -->
+      <template
+          v-for="field in fields"
+          :key="field.name"
+          v-slot:[`item.${field.name}`]="{ value }"
+      >
+        <template v-if="field.type === 'ref' && field.refDisplay">
+          {{value[field.refDisplay]}}
+        </template>
+        <template v-else-if="field.type === 'date'">
+          {{ formatDateByUnit(value, dateFormat) }}
+        </template>
+        <template v-else>
+          {{ value }}
+        </template>
+
+      </template>
+
+
+    </v-data-table-server>
+
+
+  </div>
+
+</template>
+
+<style scoped>
+.percentage-text {
+  display: inline-block;
+  min-width: 45px;
+  text-align: right;
+}
+</style>