utn-cli 2.0.7 → 2.0.9

package/commands/backend.js

@@ -159,6 +159,8 @@ export async function updateBackend() {
 
   copiarDirectorios(directoriodePlantillas, directorioDestino, archivosAExcluir);
   mostrarVersion(path.join(__dirname, '../package.json')); // Show main CLI version
+  fs.renameSync('gitignore', '.gitignore');
+  await inicializarProyectoBackend();
   console.log('Proyecto de backend actualizado exitosamente.');
   closeReadLine();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "utn-cli",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "Herramienta CLI unificada para la gestión de plantillas en SIGU.",
   "main": "index.js",
   "type": "module",

package/templates/frontend/src/app/Componentes/Nucleo/graficos/graficos.component.css

@@ -1,12 +1,26 @@
-.contenedor {
+.contenedor { /* This is the outermost div in graficos.component.html */
   display: flex;
   flex-wrap: wrap;
-  gap: 2rem;
+  gap: 1rem;
   justify-content: center;
+  width: 100%;
+  /* Remove height: 100% from here */
 }
 
-.grafico {
-  width: 400px;
+.grafico { /* This is the div containing the h3 and canvas */
+  position: relative;
+  width: 100%; /* Take 100% of parent's width */
+  height: 100%; /* Allow height to stretch based on parent */
+  max-height: 50vh; /* Further reduce max-height to 50% of viewport height for increased vertical responsiveness */
+  padding: 0.5rem;
+  box-sizing: border-box;
+  overflow: hidden; /* Prevent content from spilling outside */
+}
+
+.grafico canvas {
+  width: 100% !important;
+  height: 100% !important;
+  display: block; /* Remove any default inline spacing */
 }
 
 h3 {

package/templates/frontend/src/app/Componentes/Nucleo/graficos/graficos.component.html

@@ -1,25 +1,45 @@
-<div class="contenedor">
-  @if(Datos && TipoDeGrafico==='Barras') {
-  <!-- Gráfico de Barras -->
-  <div class="grafico" [ngStyle]="{ width: Ancho, height: Alto }">
-    <h3>{{Titulo}}</h3>
-    <canvas baseChart [data]="barChartData" [options]="barChartOptions" [type]="'bar'"></canvas>
-  </div>
-  }
-
-  @if(Datos && TipoDeGrafico==='Pie') {
-  <!-- Gráfico de Pie -->
-  <div class="grafico" [ngStyle]="{ width: Ancho, height: Alto }">
-    <h3>{{Titulo}}</h3>
-    <canvas baseChart [data]="pieChartData" [options]="pieChartOptions" [type]="'pie'"></canvas>
-  </div>
-  }
-
-  @if(Datos && TipoDeGrafico==='Línea') {
-  <!-- Gráfico de Línea -->
-  <div class="grafico" [ngStyle]="{ width: Ancho, height: Alto }">
-    <h3>{{Titulo}}</h3>
-    <canvas baseChart [data]="lineChartData" [options]="lineChartOptions" [type]="'line'"></canvas>
-  </div>
-  }
-</div>
+<div class="contenedor">
+
+  @if(sinDatosReales) {
+    <div style="text-align:center; padding: 20px;">
+      <p><b>No se encontraron datos</b></p>
+    </div>
+  } @else {
+
+    @if(Datos && TipoDeGrafico==='Barras') {
+      <div class="grafico">
+        <h3>{{Titulo}}</h3>
+        <canvas baseChart
+          [data]="barChartData"
+          [options]="barChartOptions"
+          [type]="'bar'"
+          [plugins]="[pluginMostrarValores]">
+        </canvas>
+      </div>
+    }
+
+    @if(Datos && TipoDeGrafico==='Pie') {
+      <div class="grafico">
+        <h3>{{Titulo}}</h3>
+        <canvas baseChart
+          [data]="pieChartData"
+          [options]="pieChartOptions"
+          [type]="'pie'">
+        </canvas>
+      </div>
+    }
+
+    @if(Datos && TipoDeGrafico==='Línea') {
+      <div class="grafico">
+        <h3>{{Titulo}}</h3>
+        <canvas baseChart
+          [data]="lineChartData"
+          [options]="lineChartOptions"
+          [type]="'line'">
+        </canvas>
+      </div>
+    }
+
+  }
+
+</div>

package/templates/frontend/src/app/Componentes/Nucleo/graficos/graficos.component.ts

@@ -1,80 +1,252 @@
-import { Component, Input } from '@angular/core';
-import { BaseChartDirective } from 'ng2-charts';
-import { ChartConfiguration, ChartData } from 'chart.js';
-import { NgStyle } from '@angular/common';
-
-@Component({
-  selector: 'app-graficos',
-  standalone: true,
-  imports: [BaseChartDirective, NgStyle],
-  templateUrl: './graficos.component.html',
-  styleUrl: './graficos.component.css'
-})
-export class GraficosComponent {
-
-  @Input() public TipoDeGrafico: string = '';
-  @Input() public Datos: [{}] = [{}];
-  @Input() public Titulo: string = '';
-  @Input() public Ancho: string = '400px';
-  @Input() public Alto: string = '300px';
-
-  // === Gráfico de Barras ===
-  public barChartOptions: ChartConfiguration<'bar'>['options'] = { responsive: true, };
-  public barChartData: ChartData<'bar'> = { labels: [], datasets: [] };
-
-  // === Gráfico de Pie ===
-  public pieChartOptions: ChartConfiguration<'pie'>['options'] = { responsive: true, };
-  public pieChartData: ChartData<'pie', number[], string | string[]> = { labels: [], datasets: [] };
-
-  // === Gráfico de Línea ===
-  public lineChartOptions: ChartConfiguration<'line'>['options'] = { responsive: true, };
-  public lineChartData: ChartData<'line'> = {
-    labels: [],
-    datasets: [
-      {
-        data: [65, 59, 80, 81, 56],
-        label: 'Tendencia de Ventas',
-        fill: true,
-        tension: 0.4, // suaviza la línea
-        borderColor: 'blue',
-        backgroundColor: 'rgba(30,144,255,0.2)'
-      },
-      {
-        data: [28, 48, 40, 19, 86],
-        label: 'Tendencia de Compras',
-        fill: true,
-        tension: 0.4,
-        borderColor: 'green',
-        backgroundColor: 'rgba(34,139,34,0.2)'
-      }
-    ]
-  };
-
-  constructor() { }
-
-  ngOnChanges() {
-    if (this.TipoDeGrafico === 'Pie') {
-      const Etiquetas: string[] = [];
-      const Datos: number[] = [];
-      this.Datos.forEach((elemento: any) => {
-        Etiquetas.push(elemento.Etiqueta);
-        Datos.push(elemento.Total);
-      });
-      this.pieChartData.datasets = [{ data: Datos }];
-      this.pieChartData.labels = Etiquetas;
-    }
-    if (this.TipoDeGrafico === 'Barras') {
-      const ejesHorizontales = [...new Set(this.Datos.map((item: any) => item.EjeHorizontal))];
-      const etiquetas = [...new Set(this.Datos.map((item: any) => item.Etiqueta))];
-      const datasets = etiquetas.map(etiqueta => ({
-        label: etiqueta,
-        data: ejesHorizontales.map(mes => {
-          const registro: any = this.Datos.find((item: any) => item.EjeHorizontal === mes && item.Etiqueta === etiqueta);
-          return registro ? registro.Total : 0;
-        })
-      }));
-      this.barChartData.labels = ejesHorizontales;
-      this.barChartData.datasets = datasets;
-    }
-  }
-}
+import { Component, Input } from '@angular/core';
+import { BaseChartDirective } from 'ng2-charts';
+import { ChartConfiguration, ChartData, Plugin } from 'chart.js';
+
+@Component({
+  selector: 'app-graficos',
+  standalone: true,
+  imports: [BaseChartDirective],
+  templateUrl: './graficos.component.html',
+  styleUrl: './graficos.component.css'
+})
+export class GraficosComponent {
+
+  @Input() public TipoDeGrafico: string = '';
+  @Input() public Datos: any[] = [];
+  @Input() public Titulo: string = '';
+  @Input() public Ancho: string = '400px';
+  @Input() public Alto: string = '300px';
+
+  // =========================
+  // ESTILO UNIFICADO (GLOBAL)
+  // =========================
+  private readonly GROSOR_LINEA: number = 4;
+  private readonly RADIO_PUNTO: number = 4;
+  private readonly RADIO_PUNTO_HOVER: number = 6;
+
+  private readonly BORDE_BARRA: number = 2;
+  private readonly BORDE_PIE: number = 2;
+
+  // =========================
+  // VALIDACIÓN DE DATOS VACÍOS
+  // =========================
+  get sinDatos(): boolean {
+    return !this.Datos || this.Datos.length === 0;
+  }
+
+  get sinDatosReales(): boolean {
+    if (!this.Datos || this.Datos.length === 0) return true;
+
+    return this.Datos.every((x: any) => {
+      const valor = Number(x.Total);
+      return isNaN(valor) || valor === 0;
+    });
+  }
+
+  // =========================
+  // CONFIGURACIÓN BARRAS
+  // =========================
+  public barChartOptions: ChartConfiguration<'bar'>['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        bottom: 20
+      }
+    },
+    scales: {
+      x: {
+        ticks: {
+          autoSkip: false,
+          maxRotation: 45,
+          minRotation: 45,
+          align: 'start',
+          crossAlign: 'near',
+        },
+        afterFit: (axis) => {
+          axis.height = 80;
+        }
+      },
+      y: {
+        beginAtZero: true
+      }
+    }
+  };
+
+  public barChartData: ChartData<'bar'> = {
+    labels: [],
+    datasets: []
+  };
+
+  // =========================
+  // CONFIGURACIÓN PIE
+  // =========================
+  public pieChartOptions: ChartConfiguration<'pie'>['options'] = {
+    responsive: true,
+    maintainAspectRatio: false
+  };
+
+  public pieChartData: ChartData<'pie', number[], string | string[]> = {
+    labels: [],
+    datasets: []
+  };
+
+  // =========================
+  // CONFIGURACIÓN LÍNEA
+  // =========================
+  public lineChartOptions: ChartConfiguration<'line'>['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        bottom: 20
+      }
+    },
+    scales: {
+      x: {
+        ticks: {
+          autoSkip: false,
+          maxRotation: 45,
+          minRotation: 45,
+          align: 'start',
+          crossAlign: 'near',
+        },
+        afterFit: (axis) => {
+          axis.height = 80;
+        }
+      },
+      y: {
+        beginAtZero: true
+      }
+    }
+  };
+
+  public lineChartData: ChartData<'line'> = {
+    labels: [],
+    datasets: []
+  };
+
+  // =========================
+  // PLUGIN MOSTRAR VALORES (BARRAS)
+  // =========================
+  public pluginMostrarValores: Plugin<'bar'> = {
+    id: 'pluginMostrarValores',
+    afterDatasetsDraw: (chart) => {
+      const { ctx } = chart;
+
+      ctx.save();
+      ctx.font = 'bold 12px Arial';
+      ctx.fillStyle = '#000';
+      ctx.textAlign = 'center';
+
+      chart.data.datasets.forEach((dataset, datasetIndex) => {
+        const meta = chart.getDatasetMeta(datasetIndex);
+
+        meta.data.forEach((bar: any, index: number) => {
+          const valor = dataset.data[index];
+          if (valor === null || valor === undefined) return;
+
+          const x = bar.x;
+          const y = bar.y - 6;
+
+          ctx.fillText(String(valor), x, y);
+        });
+      });
+
+      ctx.restore();
+    }
+  };
+
+  constructor() { }
+
+  ngOnChanges() {
+
+    // ✅ Si no hay datos, limpia todo para evitar gráficos raros
+    if (this.sinDatosReales) {
+      this.barChartData = { labels: [], datasets: [] };
+      this.pieChartData = { labels: [], datasets: [] };
+      this.lineChartData = { labels: [], datasets: [] };
+      return;
+    }
+
+    // =========================
+    // PIE
+    // =========================
+    if (this.TipoDeGrafico === 'Pie') {
+
+      const Etiquetas: string[] = [];
+      const Datos: number[] = [];
+
+      this.Datos.forEach((elemento: any) => {
+        Etiquetas.push(elemento.Etiqueta);
+        Datos.push(Number(elemento.Total));
+      });
+
+      this.pieChartData.datasets = [
+        {
+          data: Datos,
+
+          // ✅ borde uniforme para que no se vea "flaco"
+          borderWidth: this.BORDE_PIE
+        }
+      ];
+
+      this.pieChartData.labels = Etiquetas;
+    }
+
+    // =========================
+    // BARRAS
+    // =========================
+    if (this.TipoDeGrafico === 'Barras') {
+
+      const ejesHorizontales = [...new Set(this.Datos.map((item: any) => item.EjeHorizontal))];
+      const etiquetas = [...new Set(this.Datos.map((item: any) => item.Etiqueta))];
+
+      const datasets = etiquetas.map(etiqueta => ({
+        label: etiqueta,
+        data: ejesHorizontales.map(eje => {
+          const registro: any = this.Datos.find((item: any) =>
+            item.EjeHorizontal === eje && item.Etiqueta === etiqueta
+          );
+          return registro ? Number(registro.Total) : 0;
+        }),
+
+        // ✅ borde uniforme
+        borderWidth: this.BORDE_BARRA
+      }));
+
+      this.barChartData.labels = ejesHorizontales;
+      this.barChartData.datasets = datasets;
+    }
+
+    // =========================
+    // LÍNEA
+    // =========================
+    if (this.TipoDeGrafico === 'Línea') {
+
+      const ejesHorizontales = [...new Set(this.Datos.map((item: any) => item.EjeHorizontal))];
+      const etiquetas = [...new Set(this.Datos.map((item: any) => item.Etiqueta))];
+
+      const datasets = etiquetas.map(etiqueta => ({
+        label: etiqueta,
+        data: ejesHorizontales.map(eje => {
+          const registro: any = this.Datos.find((item: any) =>
+            item.EjeHorizontal === eje && item.Etiqueta === etiqueta
+          );
+          return registro ? Number(registro.Total) : 0;
+        }),
+
+        // ✅ estilo uniforme con todo el sistema
+        borderWidth: this.GROSOR_LINEA,
+        pointRadius: this.RADIO_PUNTO,
+        pointHoverRadius: this.RADIO_PUNTO_HOVER,
+
+        fill: false,
+        tension: 0.35
+      }));
+
+      this.lineChartData.labels = ejesHorizontales;
+      this.lineChartData.datasets = datasets;
+    }
+  }
+}

package/templates/frontend/src/app/Componentes/Nucleo/tarjeta/tarjeta.component.html

@@ -1,4 +1,4 @@
-<div class="contenedor" (click)="onClick()">
+<div class="contenedor" (click)="onClick()" [style.border]="ColorDeBorde ? '1px solid ' + ColorDeBorde : ''">
   <div class="cabecera_contenedor">
     <div class="cabecera">
       <p class="titulo">

package/templates/frontend/src/app/Componentes/Nucleo/tarjeta/tarjeta.component.ts

@@ -22,6 +22,7 @@ export class TarjetaComponent implements AfterViewInit {
   @Input() rutaASeguir: string = '';
   @Input() cantidadMaxima: number | undefined;
   @Input() cantidadAMostrar: number = 0;
+  @Input() ColorDeBorde: string = '';
 
   constructor(private ruta: Router) { }
 

package/templates/frontend/src/app/Paginas/gestion-tabla-XYZ/gestion-tabla-XYZ.component.html

@@ -24,7 +24,7 @@
 [mostrarElBotonDeDescargar] = "true"
 [mostrarElBotonDeFiltro] = "true"
 [mostrarPaginador] = "true"
-[estadosQuePermitenEdicion] = "accionesSiempreClickeable"
+[estadosQuePermitenEdicion] = "estadosQuePermitenEdicion"
 [subEstadosQuePermitenEdicion] = "subEstadosQuePermitenEdicion"
 [paginarResultados] = "PaginarResultados"
 [TotalDeRegistros] = "TotalDeRegistros"