From e833d24b08abebe1a02294e33336c037eabfe37c Mon Sep 17 00:00:00 2001
From: Rommel <rommtoledo@gmail.com>
Date: Sun, 18 May 2025 21:32:46 -0600
Subject: [PATCH 1/2] =?UTF-8?q?A=C3=B1adir=20limitaci=C3=B3n=20de=20caract?=
 =?UTF-8?q?eres=20al=20t=C3=ADtulo=20de=20la=20gr=C3=A1fica?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/framework/utils/js/agregarGrafica.js  | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/harvester-app/src/framework/utils/js/agregarGrafica.js b/harvester-app/src/framework/utils/js/agregarGrafica.js
index d53748aa..31f7a712 100644
--- a/harvester-app/src/framework/utils/js/agregarGrafica.js
+++ b/harvester-app/src/framework/utils/js/agregarGrafica.js
@@ -33,7 +33,7 @@ function agregarGrafica(contenedorId, previsualizacionId, tarjetaRef = null, pos
 
   // Inyectar HTML base
   tarjetaGrafica.innerHTML = `
-    <input class='titulo-grafica' placeholder='Nombre de la gráfica' />
+    <input class='titulo-grafica' placeholder='Nombre de la gráfica' maxlength='30'/>
     <div class='titulo-texto'>
       <select class='tipo-texto tipo-grafica'>
         <option value='line'>Línea</option>
@@ -54,6 +54,15 @@ function agregarGrafica(contenedorId, previsualizacionId, tarjetaRef = null, pos
         <div class='texto-eliminar'>Eliminar</div>
       </div>
     </div>
+    <style>
+      .contador-caracteres {
+        font-size: 12px;
+        text-align: right;
+        color: #7f8c8d;
+        margin: 4px 0;
+        padding-right: 4px;
+      }
+    </style>
   `;
 
   // Datos disponibles para fórmulas
@@ -88,6 +97,16 @@ function agregarGrafica(contenedorId, previsualizacionId, tarjetaRef = null, pos
   tarjetaGrafica
     .querySelector('.titulo-grafica')
     .addEventListener('input', function () {
+      // Verificar si ya existe un contador
+      let contador = tarjetaGrafica.querySelector('.contador-caracteres');
+      if (!contador) {
+        contador = document.createElement('div');
+        contador.className = 'contador-caracteres';
+        tarjetaGrafica.insertBefore(contador, tarjetaGrafica.querySelector('.titulo-texto'));
+      }
+
+      contador.textContent = `${this.value.length}/30`;
+
       const grafica = encontrarGrafica(nuevaId);
       if (grafica) {
         const ctx = grafica.querySelector('canvas').getContext('2d');

From 4a5eb1a37924449055b66b562ffeb619fae7eb3a Mon Sep 17 00:00:00 2001
From: Rommel <rommtoledo@gmail.com>
Date: Sun, 18 May 2025 21:43:08 -0600
Subject: [PATCH 2/2] =?UTF-8?q?A=C3=B1adir=20"caracteres"=20al=20contador?=
 =?UTF-8?q?=20para=20facilitar=20su=20comprensi=C3=B3n.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 harvester-app/src/framework/utils/js/agregarGrafica.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/harvester-app/src/framework/utils/js/agregarGrafica.js b/harvester-app/src/framework/utils/js/agregarGrafica.js
index 31f7a712..d9dfd544 100644
--- a/harvester-app/src/framework/utils/js/agregarGrafica.js
+++ b/harvester-app/src/framework/utils/js/agregarGrafica.js
@@ -105,7 +105,7 @@ function agregarGrafica(contenedorId, previsualizacionId, tarjetaRef = null, pos
         tarjetaGrafica.insertBefore(contador, tarjetaGrafica.querySelector('.titulo-texto'));
       }
 
-      contador.textContent = `${this.value.length}/30`;
+      contador.textContent = `${this.value.length}/30 caracteres`;
 
       const grafica = encontrarGrafica(nuevaId);
       if (grafica) {