@drax/dashboard-vue 0.37.0

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@drax/dashboard-vue",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.37.0",
+  "type": "module",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
+    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "@drax/crud-front": "^0.37.0",
+    "@drax/crud-share": "^0.37.0"
+  },
+  "peerDependencies": {
+    "pinia": "^2.2.2",
+    "vue": "^3.5.7",
+    "vue-i18n": "^9.14.0",
+    "vuetify": "^3.7.2"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^20.12.5",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/test-utils": "^2.4.5",
+    "@vue/tsconfig": "^0.5.1",
+    "cypress": "^13.7.2",
+    "eslint": "^8.57.0",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-vue": "^9.23.0",
+    "jsdom": "^24.0.0",
+    "npm-run-all2": "^6.1.2",
+    "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "prettier": "^3.2.5",
+    "start-server-and-test": "^2.0.3",
+    "typescript": "5.6.3",
+    "vite": "^5.4.3",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vite-plugin-dts": "^3.9.1",
+    "vitest": "^1.4.0",
+    "vue": "^3.5.3",
+    "vue-tsc": "^2.0.11",
+    "vuetify": "^3.7.1"
+  },
+  "gitHead": "0bca48d4b686fd9536a78d84f5befe6801238000"
+}

package/src/combobox/DashboardCombobox.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import {ref, onMounted} from "vue"
+import {DashboardProvider} from "@drax/dashboard-front";
+import type {IDashboard} from "@drax/dashboard-share";
+
+const valueModel = defineModel({default: null})
+
+const loading = ref(false)
+const items = ref<IDashboard[]>([])
+
+const fetchDashboards = async () => {
+  try {
+    loading.value = true
+    items.value = await DashboardProvider.instance.find({})
+  } catch (error) {
+    console.error('Error fetching dashboards:', error)
+  }finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchDashboards()
+})
+</script>
+
+<template>
+  <v-select
+      :loading="loading"
+      label="Dashboard"
+      v-model="valueModel"
+      :items="items"
+      item-text="title"
+      item-value="_id"
+      return-object
+  ></v-select>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/DashboardView/DashboardView.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type {PropType} from "vue";
+import type {IDashboard} from "@drax/dashboard-share";
+import GroupByCard from "../GroupByCard/GroupByCard.vue";
+import PaginateCard from "../PaginateCard/PaginateCard.vue";
+
+const {dashboard} = defineProps({
+  dashboard: {type: Object as PropType<IDashboard>, required: true},
+})
+
+</script>
+
+<template>
+  <v-card v-if="dashboard" class="mt-3" >
+    <v-card-title>{{dashboard.title}}</v-card-title>
+    <v-card-subtitle>{{dashboard.identifier}}</v-card-subtitle>
+    <v-card-text>
+      <v-row>
+        <v-col v-for="(card,i) in dashboard.cards" :key="i"
+               :cols="card?.layout?.cols || 12"
+               :sm="card?.layout?.sm || 12"
+               :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-title>{{card?.title}}</v-card-title>
+            <v-card-text >
+              <paginate-card v-if="card?.type === 'paginate'" :card="card" />
+              <group-by-card v-else-if="card?.type === 'groupBy'" :card="card" />
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-card-text>
+
+  </v-card>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/GroupByCard/GroupByCard.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type {PropType} from "vue";
+import type {IDashboardCard} from "@drax/dashboard-share";
+import {useDashboardCard} from "../../composables/UseDashboardCard";
+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";
+
+
+const {card} = defineProps({
+  card: {type: Object as PropType<IDashboardCard>, required: true},
+})
+
+const {fetchGroupByData, groupByHeaders, cardEntityFields} = useDashboardCard(card)
+
+const data = ref<any[]>()
+
+onMounted(async ()=> {
+  data.value = await fetchGroupByData()
+})
+
+</script>
+
+<template>
+  <group-by-table-render  v-if="card?.groupBy?.render === 'table'"
+                          :data="data"
+                          :headers="groupByHeaders"
+                          :fields="cardEntityFields"
+  />
+
+  <group-by-pie-render  v-else-if="card?.groupBy?.render === 'pie'"
+                        :data="data"
+                        :headers="groupByHeaders"
+                        :fields="cardEntityFields"
+  />
+
+  <group-by-bars-render  v-else-if="card?.groupBy?.render === 'bars'"
+                        :data="data"
+                        :headers="groupByHeaders"
+                        :fields="cardEntityFields"
+                         :show-legend="false"
+  />
+
+  <group-by-gallery-render  v-else-if="card?.groupBy?.render === 'gallery'"
+                         :data="data"
+                         :headers="groupByHeaders"
+                         :fields="cardEntityFields"
+                         :show-legend="false"
+  />
+
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,361 @@
+<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, showLegend} = 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'},
+  showLegend: {type: Boolean, default: true},
+})
+
+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)
+})
+
+// Calcular el valor máximo para escalar las barras
+const maxValue = computed(() => {
+  if (!data || data.length === 0) return 0
+  return Math.max(...data.map(item => item.count || 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 barras
+const drawBarChart = () => {
+  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 containerWidth = canvas.parentElement?.clientWidth || 400
+  const containerHeight = 300
+  canvas.width = containerWidth
+  canvas.height = containerHeight
+
+  const padding = { top: 20, right: 20, bottom: 60, left: 60 }
+  const chartWidth = containerWidth - padding.left - padding.right
+  const chartHeight = containerHeight - padding.top - padding.bottom
+
+  // Limpiar el canvas
+  ctx.clearRect(0, 0, containerWidth, containerHeight)
+
+  // Calcular el ancho de cada barra
+  const barWidth = chartWidth / chartData.value.length
+  const barPadding = barWidth * 0.2
+
+  // Dibujar el eje Y (valores)
+  ctx.strokeStyle = '#e0e0e0'
+  ctx.lineWidth = 1
+  ctx.beginPath()
+  ctx.moveTo(padding.left, padding.top)
+  ctx.lineTo(padding.left, padding.top + chartHeight)
+  ctx.stroke()
+
+  // Dibujar el eje X (categorías)
+  ctx.beginPath()
+  ctx.moveTo(padding.left, padding.top + chartHeight)
+  ctx.lineTo(padding.left + chartWidth, padding.top + chartHeight)
+  ctx.stroke()
+
+  // Dibujar líneas de referencia horizontales
+  const numGridLines = 5
+  ctx.strokeStyle = '#f5f5f5'
+  ctx.lineWidth = 1
+  ctx.font = '10px sans-serif'
+  ctx.fillStyle = '#666'
+  ctx.textAlign = 'right'
+
+  for (let i = 0; i <= numGridLines; i++) {
+    const y = padding.top + (chartHeight / numGridLines) * i
+    const value = Math.round(maxValue.value * (1 - i / numGridLines))
+
+    // Línea de referencia
+    ctx.beginPath()
+    ctx.moveTo(padding.left, y)
+    ctx.lineTo(padding.left + chartWidth, y)
+    ctx.stroke()
+
+    // Etiqueta del valor
+    ctx.fillText(value.toString(), padding.left - 10, y + 4)
+  }
+
+  // Dibujar las barras
+  chartData.value.forEach((segment, index) => {
+    const x = padding.left + (barWidth * index) + barPadding / 2
+    const barHeight = (segment.value / maxValue.value) * chartHeight
+    const y = padding.top + chartHeight - barHeight
+
+    // Dibujar la barra
+    ctx.fillStyle = segment.color
+    ctx.fillRect(x, y, barWidth - barPadding, barHeight)
+
+    // Dibujar borde de la barra
+    ctx.strokeStyle = '#ffffff'
+    ctx.lineWidth = 2
+    ctx.strokeRect(x, y, barWidth - barPadding, barHeight)
+
+    // Dibujar el valor encima de la barra
+    ctx.fillStyle = '#333'
+    ctx.font = 'bold 11px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.fillText(
+        segment.value.toString(),
+        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.rotate(-Math.PI / 4)
+    ctx.fillStyle = '#666'
+    ctx.font = '10px sans-serif'
+    ctx.textAlign = 'right'
+
+    // Truncar label si es muy largo
+    const maxLabelLength = 15
+    const label = segment.label.length > maxLabelLength
+        ? segment.label.substring(0, maxLabelLength) + '...'
+        : segment.label
+
+    ctx.fillText(label, 0, 0)
+    ctx.restore()
+  })
+}
+
+// Redibujar cuando cambien los datos
+watch(() => data, () => {
+  setTimeout(drawBarChart, 100)
+}, { deep: true })
+
+onMounted(() => {
+  drawBarChart()
+
+  // Redibujar al cambiar el tamaño de la ventana
+  window.addEventListener('resize', drawBarChart)
+})
+</script>
+
+<template>
+  <div class="bar-chart-container">
+    <div v-if="!data || data.length === 0" class="empty-state">
+      <v-icon size="64" color="grey-lighten-1">mdi-chart-bar</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 v-if="showLegend" 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 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>
+
+<style scoped>
+.bar-chart-container {
+  padding: 2px;
+  margin-top: 6px;
+  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;
+  width: 100%;
+}
+
+.chart-wrapper canvas {
+  height:  100%;
+}
+
+.legend-container {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 120px;
+  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>