@drax/dashboard-vue 3.17.0 → 3.18.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.17.0",
+  "version": "3.18.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -46,5 +46,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "d8a056b087d67157bc8c2e684b7e6696399d06a4"
+  "gitHead": "c7709f3912ba1f8ae6a7e78376e17d50b32cfa7d"
 }

package/src/components/DashboardConfig/DashboardCardEditor.vue

@@ -314,7 +314,7 @@ const {
                         clearable class="mb-3"></v-select>
             </v-col>
             <v-col cols="12" md="6">
-              <v-select v-model="form.groupBy!.render" :items="['pie', 'bars', 'table', 'gallery']"
+              <v-select v-model="form.groupBy!.render" :items="['pie', 'bars', 'lines', 'table', 'gallery']"
                         label="Render visual" variant="outlined" density="compact" hide-details="auto"
                         class="mb-3"></v-select>
             </v-col>

package/src/components/DashboardView/DashboardView.vue

@@ -21,9 +21,14 @@ const {dashboard} = defineProps({
                :md="card?.layout?.md || 12"
                :lg="card?.layout?.lg || 12"
         >
-          <v-card :variant="card?.layout?.cardVariant || 'elevated' " hover :height="card?.layout?.height || 300" style="overflow-y: auto">
+          <v-card
+              class="dashboard-card"
+              :variant="card?.layout?.cardVariant || 'elevated' "
+              hover
+              :height="card?.layout?.height || 300"
+          >
             <v-card-title>{{card?.title}}</v-card-title>
-            <v-card-text >
+            <v-card-text class="dashboard-card__content">
               <paginate-card v-if="card?.type === 'paginate'" :card="card" />
               <group-by-card v-else-if="card?.type === 'groupBy'" :card="card" />
             </v-card-text>
@@ -36,5 +41,14 @@ const {dashboard} = defineProps({
 </template>
 
 <style scoped>
+.dashboard-card {
+  display: flex;
+  flex-direction: column;
+}
 
+.dashboard-card__content {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
 </style>

package/src/components/GroupByCard/GroupByCard.vue

@@ -6,6 +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 GroupByLinesRender from "./renders/GroupByLinesRender.vue";
 import {ref, onMounted} from "vue";
 
 
@@ -38,18 +39,21 @@ watch(() => card, async () => {
                           :data="data"
                           :headers="groupByHeaders"
                           :fields="cardEntityFields"
+                          :date-format="card?.groupBy?.dateFormat"
   />
 
   <group-by-pie-render  v-else-if="card?.groupBy?.render === 'pie'"
                         :data="data"
                         :headers="groupByHeaders"
                         :fields="cardEntityFields"
+                        :date-format="card?.groupBy?.dateFormat"
   />
 
   <group-by-bars-render  v-else-if="card?.groupBy?.render === 'bars'"
                         :data="data"
                         :headers="groupByHeaders"
                         :fields="cardEntityFields"
+                        :date-format="card?.groupBy?.dateFormat"
                          :show-legend="false"
   />
 
@@ -57,9 +61,17 @@ watch(() => card, async () => {
                          :data="data"
                          :headers="groupByHeaders"
                          :fields="cardEntityFields"
+                         :date-format="card?.groupBy?.dateFormat"
                          :show-legend="false"
   />
 
+  <group-by-lines-render  v-else-if="card?.groupBy?.render === 'lines'"
+                          :data="data"
+                          :headers="groupByHeaders"
+                          :fields="cardEntityFields"
+                          :date-format="card?.groupBy?.dateFormat"
+  />
+
 </template>
 
 <style scoped>

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

@@ -0,0 +1,324 @@
+<script setup lang="ts">
+import type {PropType} from "vue";
+import {computed, ref, onMounted, onUnmounted, 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, 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'},
+  showLegend: {type: Boolean, default: true},
+})
+
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+
+const colors = [
+  '#2563eb', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6',
+  '#06b6d4', '#ec4899', '#84cc16', '#f97316', '#14b8a6'
+]
+
+const isNumericValue = (value: unknown) => typeof value === 'number' && Number.isFinite(value)
+
+const formatFieldValue = (fieldName: string, value: any) => {
+  const field = fields?.find((item) => item.name === fieldName)
+
+  if (value === null || value === undefined) return 'N/A'
+
+  if (field?.type === 'date') {
+    return formatDateByUnit(value, dateFormat)
+  }
+
+  if (['ref', 'object'].includes(field?.type || '') && field?.refDisplay && value) {
+    return value[field.refDisplay] || 'N/A'
+  }
+
+  if (typeof value === 'object' && !Array.isArray(value)) {
+    return JSON.stringify(value)
+  }
+
+  return String(value)
+}
+
+const xField = computed(() => {
+  if (!data?.length) return null
+
+  const sample = data.find((item) => item && typeof item === 'object')
+  if (!sample) return null
+
+  return Object.keys(sample).find((key) => key !== 'count' && !isNumericValue(sample[key])) || null
+})
+
+const xFieldConfig = computed(() => {
+  if (!xField.value) return null
+  return fields?.find((field) => field.name === xField.value) || null
+})
+
+const seriesKeys = computed(() => {
+  if (!data?.length) return ['count']
+
+  const sample = data.find((item) => item && typeof item === 'object')
+  if (!sample) return ['count']
+
+  const keys = Object.keys(sample).filter((key) => key !== xField.value && isNumericValue(sample[key]))
+  return keys.length > 0 ? keys : ['count']
+})
+
+const seriesMeta = computed(() => {
+  return seriesKeys.value.map((key, index) => {
+    const field = fields?.find((item) => item.name === key)
+
+    return {
+      key,
+      label: field?.label || key,
+      color: colors[index % colors.length]
+    }
+  })
+})
+
+const buildItemLabel = (item: Record<string, any>) => {
+  const labelParts: string[] = []
+
+  Object.keys(item).forEach((key) => {
+    if (seriesKeys.value.includes(key)) return
+
+    const formattedValue = formatFieldValue(key, item[key])
+
+    if (formattedValue && formattedValue !== 'N/A') {
+      labelParts.push(formattedValue)
+    }
+  })
+
+  return labelParts.length > 0 ? labelParts.join(' - ') : 'N/A'
+}
+
+const chartData = computed(() => {
+  if (!data?.length || !xField.value) return []
+
+  const normalized = data.map((item, index) => {
+    const rawX = item?.[xField.value as string]
+    const xLabel = formatFieldValue(xField.value as string, rawX)
+    const fullLabel = buildItemLabel(item)
+    const xValue = xFieldConfig.value?.type === 'date' && rawX ? new Date(rawX).getTime() : index
+
+    const seriesValues = Object.fromEntries(
+      seriesMeta.value.map((series) => [series.key, Number(item?.[series.key] || 0)])
+    )
+
+    return {
+      rawX,
+      xLabel,
+      fullLabel,
+      xValue,
+      seriesValues
+    }
+  })
+
+  return normalized.sort((left, right) => {
+    if (xFieldConfig.value?.type === 'date') {
+      return left.xValue - right.xValue
+    }
+
+    return left.xLabel.localeCompare(right.xLabel, undefined, {numeric: true, sensitivity: 'base'})
+  })
+})
+
+const maxValue = computed(() => {
+  if (!chartData.value.length) return 0
+
+  const values = chartData.value.flatMap((item) => seriesMeta.value.map((series) => item.seriesValues[series.key] || 0))
+  return Math.max(...values, 0)
+})
+
+const yAxisTicks = computed(() => {
+  const steps = 5
+  const currentMax = maxValue.value
+
+  if (currentMax <= 0) {
+    return [0, 1, 2, 3, 4, 5]
+  }
+
+  return Array.from({length: steps + 1}, (_, index) => {
+    return (currentMax / steps) * index
+  })
+})
+
+const drawLineChart = () => {
+  if (!canvasRef.value || !chartData.value.length || !xField.value) return
+
+  const canvas = canvasRef.value
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+
+  const parentWidth = canvas.parentElement?.clientWidth || 640
+  const width = parentWidth
+  const height = 340
+  const padding = {top: 24, right: 24, bottom: 72, left: 56}
+
+  canvas.width = width
+  canvas.height = height
+
+  const chartWidth = width - padding.left - padding.right
+  const chartHeight = height - padding.top - padding.bottom
+
+  ctx.clearRect(0, 0, width, height)
+  ctx.textBaseline = 'middle'
+
+  yAxisTicks.value.forEach((tick) => {
+    const y = padding.top + chartHeight - ((tick / Math.max(maxValue.value, 5)) * chartHeight)
+
+    ctx.beginPath()
+    ctx.moveTo(padding.left, y)
+    ctx.lineTo(padding.left + chartWidth, y)
+    ctx.strokeStyle = '#e5e7eb'
+    ctx.lineWidth = 1
+    ctx.stroke()
+
+    ctx.fillStyle = '#6b7280'
+    ctx.font = '11px sans-serif'
+    ctx.textAlign = 'right'
+    ctx.fillText(Number.isInteger(tick) ? String(tick) : tick.toFixed(1), padding.left - 8, y)
+  })
+
+  ctx.beginPath()
+  ctx.moveTo(padding.left, padding.top)
+  ctx.lineTo(padding.left, padding.top + chartHeight)
+  ctx.lineTo(padding.left + chartWidth, padding.top + chartHeight)
+  ctx.strokeStyle = '#9ca3af'
+  ctx.lineWidth = 1.25
+  ctx.stroke()
+
+  const getPointX = (index: number) => {
+    if (chartData.value.length === 1) return padding.left + (chartWidth / 2)
+    return padding.left + ((chartWidth / (chartData.value.length - 1)) * index)
+  }
+
+  const getPointY = (value: number) => {
+    const safeMax = Math.max(maxValue.value, 5)
+    return padding.top + chartHeight - ((value / safeMax) * chartHeight)
+  }
+
+  seriesMeta.value.forEach((series) => {
+    ctx.beginPath()
+
+    chartData.value.forEach((item, index) => {
+      const x = getPointX(index)
+      const y = getPointY(item.seriesValues[series.key] || 0)
+
+      if (index === 0) {
+        ctx.moveTo(x, y)
+      } else {
+        ctx.lineTo(x, y)
+      }
+    })
+
+    ctx.strokeStyle = series.color
+    ctx.lineWidth = 2.5
+    ctx.stroke()
+
+    chartData.value.forEach((item, index) => {
+      const x = getPointX(index)
+      const y = getPointY(item.seriesValues[series.key] || 0)
+      const valueLabel = String(item.seriesValues[series.key] || 0)
+
+      ctx.beginPath()
+      ctx.arc(x, y, 4, 0, 2 * Math.PI)
+      ctx.fillStyle = '#ffffff'
+      ctx.fill()
+      ctx.lineWidth = 2
+      ctx.strokeStyle = series.color
+      ctx.stroke()
+
+      ctx.fillStyle = series.color
+      ctx.font = '11px sans-serif'
+      ctx.textAlign = 'center'
+      ctx.fillText(valueLabel, x, y - 12)
+    })
+  })
+
+  chartData.value.forEach((item, index) => {
+    const x = getPointX(index)
+
+    ctx.beginPath()
+    ctx.moveTo(x, padding.top + chartHeight)
+    ctx.lineTo(x, padding.top + chartHeight + 6)
+    ctx.strokeStyle = '#9ca3af'
+    ctx.lineWidth = 1
+    ctx.stroke()
+
+    ctx.save()
+    ctx.translate(x, padding.top + chartHeight + 18)
+    ctx.rotate(-Math.PI / 4)
+    ctx.fillStyle = '#4b5563'
+    ctx.font = '12px sans-serif'
+    ctx.textAlign = 'right'
+    const maxLabelLength = 36
+    const label = item.fullLabel.length > maxLabelLength
+      ? `${item.fullLabel.slice(0, maxLabelLength)}...`
+      : item.fullLabel
+    ctx.fillText(label, 0, 0)
+    ctx.restore()
+  })
+}
+
+watch(chartData, () => {
+  setTimeout(drawLineChart, 100)
+}, {deep: true})
+
+onMounted(() => {
+  drawLineChart()
+  window.addEventListener('resize', drawLineChart)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', drawLineChart)
+})
+</script>
+
+<template>
+  <div class="line-chart-container">
+    <div v-if="!data || data.length === 0" class="empty-state">
+      <v-icon size="64" color="grey-lighten-1">mdi-chart-line</v-icon>
+      <p class="text-grey-lighten-1 mt-4">No hay datos para mostrar</p>
+    </div>
+
+    <div v-else-if="!xField" class="empty-state">
+      <v-icon size="64" color="grey-lighten-1">mdi-axis-x-arrow</v-icon>
+      <p class="text-grey-lighten-1 mt-4">Se necesita al menos un campo categórico o de fecha para el eje X</p>
+    </div>
+
+    <template v-else>
+      <div class="chart-wrapper">
+        <canvas ref="canvasRef"></canvas>
+      </div>
+
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.line-chart-container {
+  width: 100%;
+  min-height: 360px;
+}
+
+.chart-wrapper {
+  position: relative;
+  width: 100%;
+  min-height: 340px;
+  overflow-x: auto;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  text-align: center;
+}
+</style>

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

@@ -173,13 +173,23 @@ const drawPieChart = () => {
     ctx.fillStyle = segment.color
     ctx.fill()
 
+    const textX = lineEndX + (isRightSide ? 6 : -6)
+
     ctx.fillStyle = '#374151'
     ctx.font = '500 12px sans-serif'
     ctx.textAlign = isRightSide ? 'left' : 'right'
     ctx.fillText(
       segment.shortLabel,
-      lineEndX + (isRightSide ? 6 : -6),
-      lineEndY
+      textX,
+      lineEndY - 7
+    )
+
+    ctx.fillStyle = '#6b7280'
+    ctx.font = '11px sans-serif'
+    ctx.fillText(
+      `${segment.value}`,
+      textX,
+      lineEndY + 8
     )
 
     currentAngle = endAngle

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

@@ -29,52 +29,57 @@ const getPercentage = (count: number) => {
 </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 }"
+  <div class="table-render">
+    <div class="table-render__scroll">
+      <v-data-table
+          :headers="headers"
+          :items="data"
+          density="compact"
+          :items-per-page="-1"
+          hide-default-footer
+          height="100%"
+          :fixed-header="true"
+          class="table-render__table"
       >
-        <template v-if="['ref','object'].includes(field.type) && field.refDisplay">
-          {{value ? value[field.refDisplay] : '-' }}
-        </template>
+        <template v-slot:bottom></template>
 
-        <template v-else-if="field.type === 'date'">
-          {{ formatDateByUnit(value, dateFormat) }}
-        </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="['ref','object'].includes(field.type) && field.refDisplay">
+            {{value ? value[field.refDisplay] : '-' }}
+          </template>
 
-        <template v-else-if="field.type === 'number'">
-          {{ value.toLocaleString('es-ar') }}
-        </template>
+          <template v-else-if="field.type === 'date'">
+            {{ formatDateByUnit(value, dateFormat) }}
+          </template>
+
+          <template v-else-if="field.type === 'number'">
+            {{ value.toLocaleString('es-ar') }}
+          </template>
+
+          <template v-else>
+            {{ value }}
+          </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>
+        <!-- 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>
+    </div>
 
     <!-- Fila de totales -->
     <v-divider class="my-2"></v-divider>
@@ -89,6 +94,23 @@ const getPercentage = (count: number) => {
 </template>
 
 <style scoped>
+.table-render {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.table-render__scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.table-render__table {
+  height: 100%;
+}
+
 .percentage-text {
   display: inline-block;
   min-width: 45px;