@drax/dashboard-vue 2.6.0 → 2.8.0

package/src/components/DashboardView/DashboardView.vue

@@ -11,8 +11,8 @@ const {dashboard} = defineProps({
 </script>
 
 <template>
-  <v-card v-if="dashboard" class="mt-3" >
-    <v-card-title>{{dashboard.title}}</v-card-title>
+  <v-card v-if="dashboard" class="mt-3" variant="flat" >
+    <v-card-title style="font-size: 2rem">{{dashboard.title}}</v-card-title>
     <v-card-text>
       <v-row>
         <v-col v-for="(card,i) in dashboard.cards" :key="i"
@@ -21,7 +21,7 @@ const {dashboard} = defineProps({
                :md="card?.layout?.md || 12"
                :lg="card?.layout?.lg || 12"
         >
-          <v-card :variant="card?.layout?.cardVariant || 'outlined' " :height="card?.layout?.height || 300" style="overflow-y: auto">
+          <v-card :variant="card?.layout?.cardVariant || 'elevated' " hover :height="card?.layout?.height || 300" style="overflow-y: auto">
             <v-card-title>{{card?.title}}</v-card-title>
             <v-card-text >
               <paginate-card v-if="card?.type === 'paginate'" :card="card" />

package/src/components/GroupByCard/GroupByCard.vue

@@ -6,7 +6,7 @@ import GroupByTableRender from "./renders/GroupByTableRender.vue";
 import GroupByPieRender from "./renders/GroupByPieRender.vue";
 import GroupByBarsRender from "./renders/GroupByBarsRender.vue";
 import GroupByGalleryRender from "./renders/GroupByGalleryRender.vue";
-import {ref, onMounted, defineProps } from "vue";
+import {ref, onMounted} from "vue";
 
 
 const {card} = defineProps({

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

@@ -100,7 +100,7 @@ const drawBarChart = () => {
   canvas.width = containerWidth
   canvas.height = containerHeight
 
-  const padding = { top: 20, right: 20, bottom: 60, left: 60 }
+  const padding = { top: 40, right: 20, bottom: 80, left: 60 }
   const chartWidth = containerWidth - padding.left - padding.right
   const chartHeight = containerHeight - padding.top - padding.bottom
 
@@ -162,26 +162,37 @@ const drawBarChart = () => {
     ctx.lineWidth = 2
     ctx.strokeRect(x, y, barWidth - barPadding, barHeight)
 
-    // Dibujar el valor encima de la barra
+    // Dibujar el valor y porcentaje encima de la barra
     ctx.fillStyle = '#333'
-    ctx.font = 'bold 11px sans-serif'
+    ctx.font = 'bold 12px sans-serif'
     ctx.textAlign = 'center'
+
+    // Valor
     ctx.fillText(
         segment.value.toString(),
         x + (barWidth - barPadding) / 2,
+        y - 18
+    )
+
+    // Porcentaje
+    ctx.font = '11px sans-serif'
+    ctx.fillStyle = '#666'
+    ctx.fillText(
+        `(${segment.percentage.toFixed(1)}%)`,
+        x + (barWidth - barPadding) / 2,
         y - 5
     )
 
     // Dibujar etiqueta del eje X (rotada si es necesario)
     ctx.save()
-    ctx.translate(x + (barWidth - barPadding) / 2, padding.top + chartHeight + 10)
+    ctx.translate(x + (barWidth - barPadding) / 2, padding.top + chartHeight + 12)
     ctx.rotate(-Math.PI / 4)
     ctx.fillStyle = '#666'
-    ctx.font = '10px sans-serif'
+    ctx.font = '12px sans-serif'
     ctx.textAlign = 'right'
 
     // Truncar label si es muy largo
-    const maxLabelLength = 15
+    const maxLabelLength = 20
     const label = segment.label.length > maxLabelLength
         ? segment.label.substring(0, maxLabelLength) + '...'
         : segment.label
@@ -212,6 +223,16 @@ onMounted(() => {
     </div>
 
     <template v-else>
+      <div v-if="showLegend" class="total-container-top">
+        <div class="d-flex align-center justify-space-between">
+          <span class="text-h6 font-weight-bold">Total</span>
+          <v-chip color="primary" size="large" variant="flat">
+            {{ totalCount }}
+          </v-chip>
+        </div>
+        <v-divider class="my-2"></v-divider>
+      </div>
+
       <div class="chart-wrapper">
         <canvas ref="canvasRef"></canvas>
       </div>
@@ -234,16 +255,6 @@ onMounted(() => {
           </div>
         </div>
       </div>
-
-      <div v-if="showLegend" 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>
@@ -317,9 +328,8 @@ onMounted(() => {
   font-size: 13px;
   font-weight: 500;
   flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  word-break: break-word;
+  line-height: 1.3;
 }
 
 .legend-stats {
@@ -336,8 +346,11 @@ onMounted(() => {
   text-align: right;
 }
 
-.total-container {
-  margin-top: 8px;
+.total-container-top {
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 8px;
 }
 
 /* Scrollbar personalizado para la leyenda */

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

@@ -90,10 +90,10 @@ const cardData = computed(() => {
         <v-col
             v-for="(card, index) in cardData"
             :key="index"
-            cols="6"
-            sm="4"
-            md="3"
-            lg="2"
+            cols="12"
+            sm="6"
+            md="4"
+            lg="4"
             class="pa-1"
         >
           <v-card
@@ -112,7 +112,7 @@ const cardData = computed(() => {
                 </div>
                 <v-chip
                     :color="card.color"
-                    size="x-small"
+                    size="small"
                     variant="flat"
                     class="mt-1"
                 >
@@ -126,16 +126,31 @@ const cardData = computed(() => {
 
       <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">
+      <v-card
+          color="black"
+          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">
               {{ totalCount }}
+            </div>
+            <div class="card-label text-caption text-truncate" >
+              TOTAL
+            </div>
+            <v-chip
+                color="black"
+                size="small"
+                variant="flat"
+                class="mt-1"
+            >
+              100%
             </v-chip>
-          </v-card-text>
-        </v-card>
-      </div>
+          </div>
+        </v-card-text>
+      </v-card>
     </template>
   </div>
 </template>

package/src/components/GroupByCard/renders/GroupByGalleryRenderbkp.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,  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 (['ref','object'].includes(field.type) && 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>