Feature/jccg no ref cambiar color graficas

harvester-app/src/framework/utils/css/paginas/analisis/generarReporte.css

@@ -144,8 +144,7 @@ body,
   position: relative;
   width: 362px;
 }
-.titulo-grafica,
-.titulo-texto {
+.titulo-grafica {
   background-color: #fafafa;
   padding: 10px;
   display: flex;
@@ -260,7 +259,7 @@ body,
   position: relative;
   color: #ffffff;
   text-align: center;
-  font-family: "SegoeUi-Regular", sans-serif;
+  font-family: 'SegoeUi-Regular', sans-serif;
   font-size: 24px;
   font-weight: 400;
   position: relative;
@@ -315,20 +314,28 @@ body,
   resize: vertical;
 }
 .titulo-texto {
-  position: relative;      
   background-color: #fafafa;
-  border-radius: 10px;
   padding: 10px;
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  background-image: none;
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+  color: var(--negro, #000000);
+  text-align: left;
+  font-family: 'SegoeUi-Regular', sans-serif;
+  font-size: 18px;
+  line-height: 100%;
+  letter-spacing: -0.02em;
+  font-weight: 400;
+  border-radius: 10px;
 }
 .titulo-texto select.tipo-texto {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
-  background-color: transparent;
   border: none;
   padding: 8px 32px 8px 12px;
   font-family: 'SegoeUi-Regular', sans-serif;
@@ -339,9 +346,17 @@ body,
   box-sizing: border-box;
   cursor: pointer;
   transition: background-color 0.2s ease, box-shadow 0.2s ease;
+  background-image:
+    linear-gradient(45deg, transparent 50%, #000 50%),
+    linear-gradient(135deg, #000 50%, transparent 50%);
+  background-position:
+    calc(100% - 20px) calc(50% - 3px),
+    calc(100% - 14px) calc(50% - 3px);
+  background-size: 6px 6px;
+  background-repeat: no-repeat;
 }
 .titulo-texto::after {
-  content: '';
+  content: none;
   position: absolute;
   right: 20px;
   top: 50%;
@@ -358,6 +373,24 @@ body,
   outline: none;
   box-shadow: 0 0 0 2px rgba(166,25,48,0.5);
 }
+.titulo-texto select.tipo-texto:active {
+  background-color: #ececec;
+}
+.titulo-texto select.tipo-texto option:hover {
+  background-color: #f5f5f5;
+}
+.titulo-texto select.tipo-texto option:checked {
+  background-color: #a61930;
+  color: #fff;
+}
+.titulo-texto input[type='color'] {
+  appearance: none;
+  border: none;
+  background: none;
+  padding: 0;
+  height: 100%;
+  cursor: pointer;
+}
 .tarjeta-texto .eliminar {
   display: flex;
   align-items: center;
@@ -370,51 +403,6 @@ body,
 .tarjeta-texto .eliminar:hover {
   background-color: rgba(255,255,255,0.1);
 }
-.titulo-texto::after {
-  content: none;
-}
-.titulo-texto select.tipo-texto {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-
-  background-color: #fafafa;
-  background-image:
-    linear-gradient(45deg, transparent 50%, #000 50%),
-    linear-gradient(135deg, #000 50%, transparent 50%);
-  background-position:
-    calc(100% - 20px) calc(50% - 3px),
-    calc(100% - 14px) calc(50% - 3px);
-  background-size: 6px 6px;
-  background-repeat: no-repeat;
-
-  padding: 8px 40px 8px 12px;
-
-  border: none;
-  border-radius: 8px;
-  width: 100%;
-  box-sizing: border-box;
-
-  cursor: pointer;
-  transition: background-color 0.2s ease, box-shadow 0.2s ease;
-}
-.titulo-texto select.tipo-texto:hover {
-  background-color: #f0f0f0;
-}
-.titulo-texto select.tipo-texto:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px rgba(166,25,48,0.5);
-}
-.titulo-texto select.tipo-texto:active {
-  background-color: #ececec;
-}
-.titulo-texto select.tipo-texto option:hover {
-  background-color: #f5f5f5;
-}
-.titulo-texto select.tipo-texto option:checked {
-  background-color: #a61930;
-  color: #fff;
-}
 .tarjeta-texto .eliminar:hover {
   transform: translateX(2px);
 }
@@ -991,4 +979,18 @@ body,
   color: #7f8c8d;
   margin: 4px 0;
   padding-right: 4px;
+}
+
+.select-tractores{
+  display: flex;
+  width: 100%;
+  gap: 10px
+}
+
+#color-grafica{
+  flex: 0 10 1000px
+}
+
+#tractor-grafica{
+  flex: 0 1 1000px
 }

harvester-app/src/framework/utils/scripts/paginas/analisis/agregarGrafica.js

@@ -9,7 +9,7 @@ const { mostrarAlerta } = require(`${rutaBase}/src/framework/vistas/includes/com
 const { eliminarCuadroFormulas } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/formulas/eliminarCuadroFormulas.js`);
 const { crearCuadroFormulas } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/formulas/crearCuadroFormulas.js`);
 const { procesarDatosUniversal } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/graficas/procesarDatosUniversal.js`);
-const { crearGrafica, verificarExcesoEtiquetas } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/graficas/crearGrafica.js`)
+const { crearGrafica, generarDegradadoHaciaBlanco, verificarExcesoEtiquetas } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/graficas/crearGrafica.js`)
 
 
 /* eslint-disable no-unused-vars */
@@ -85,11 +85,15 @@ function agregarGrafica(contenedorId, previsualizacionId, tarjetaRef = null, pos
       </select>
       <img class='type' src='${rutaBase}/src/framework/utils/iconos/GraficaBarras.svg' alt='Icono Gráfica' />
     </div>
-    <div class='titulo-texto'>
-      <select class='tipo-texto tractor-grafica'>
-        ${opcionesTractores}
-      </select>
-      <img class='type' src='${rutaBase}/src/framework/utils/iconos/GraficaBarras.svg' alt='Icono Gráfica' />
+    <div class='select-tractores'>
+      <div class='titulo-texto' id='tractor-grafica'>
+        <select class='tipo-texto tractor-grafica'>
+          ${opcionesTractores}
+        </select>
+      </div>
+      <div class='titulo-texto' id='color-grafica'>
+        <input type='color' id='color-entrada' name='color-grafica' value='#A61930' />
+      </div>
     </div>
     <div class='boton-formulas'>
       <div class='formulas'>Fórmulas</div>
@@ -100,15 +104,6 @@ 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
@@ -186,6 +181,11 @@ function agregarGrafica(contenedorId, previsualizacionId, tarjetaRef = null, pos
     modificarTipoGrafica(graficaDiv, selectorTipo, tituloGrafica);
   })
 
+  const entradaColor = tarjetaGrafica.querySelector('#color-entrada')
+  entradaColor.addEventListener('change', () => {
+    modificarColor(entradaColor, graficaDiv, 0)
+  })
+
   // Obtener el dato del tractor seleccionado para la gráfica
   const selectorTractor = tarjetaGrafica.querySelector('.tractor-grafica');
   selectorTractor.addEventListener('input', async () => {
@@ -209,40 +209,6 @@ function agregarGrafica(contenedorId, previsualizacionId, tarjetaRef = null, pos
   return tarjetaGrafica;
 }
 
-/**
- * Formateador universal para etiquetas de datos según el tipo de gráfica
- * @param {*} value - Valor del dato
- * @param {*} context - Contexto de Chart.js
- * @param {string} tipo - Tipo de gráfica
- * @returns {string} - Etiqueta formateada
- */
-function formatearEtiquetaUniversal(value, context, tipo) {
-  const etiqueta = context.chart.data.labels[context.dataIndex];
-
-  // Para gráficas circulares Y DE BARRAS - SIEMPRE frecuencias con porcentajes/valores
-  if (tipo === 'pie' || tipo === 'doughnut' || tipo === 'polarArea') {
-    const datos = context.chart.data.datasets[0].data;
-    const valorTotal = datos.reduce((total, datapoint) => total + datapoint, 0);
-
-    if (valorTotal === 0) return '';
-
-    const porcentaje = ((value / valorTotal) * 100).toFixed(1);
-    return `${etiqueta}\n${value} (${porcentaje}%)`;
-  }
-
-  // Para gráficas de barras - solo mostrar categoría y frecuencia
-  if (tipo === 'bar') {
-    return `${etiqueta}: ${value}`;
-  }
-
-  // Para gráficas lineales - Mostrar categoría y valor (aunque ya no se mostrarán las etiquetas)
-  if (etiqueta === 'Resultado') {
-    return `${etiqueta}\n${value}`;
-  } else {
-    return `${etiqueta}: ${value}`;
-  }
-}
-
 /**
  * Actualiza una gráfica aplicando los datos originales según el nuevo tipo
  * @param {number} graficaId - ID de la gráfica
@@ -254,23 +220,17 @@ function actualizarGraficaConTipo(graficaId, nuevoTipo, graficaExistente) {
   const canvasAntiguo = graficaExistente.canvas;
   const nuevoCanvas = document.createElement('canvas');
   canvasAntiguo.parentNode.replaceChild(nuevoCanvas, canvasAntiguo);
-
   const contexto = nuevoCanvas.getContext('2d');
 
-  // Preservar información importante
   const tituloActual = graficaExistente.options.plugins.title.text;
-
-  // Obtener datos originales si existen
+  const colorOriginal = graficaExistente.data.datasets[0].miColor
+  const arregloColor = colorOriginal.match(/\d+/g).map(Number);
   const datosOriginales = datosOriginalesFormulas.get(graficaId);
 
-  // Destruir gráfica actual
   graficaExistente.destroy();
 
-  // Crear nueva gráfica
-  const nuevaGrafica = crearGrafica(contexto, nuevoTipo);
-  console.log(nuevaGrafica.options.plugins.datalabels.display)
+  const nuevaGrafica = crearGrafica(contexto, nuevoTipo, arregloColor);
 
-  // Si hay datos originales, reprocesarlos para el nuevo tipo
   if (datosOriginales) {
     const datosRebuild = procesarDatosUniversal(
       datosOriginales.datos,
@@ -284,10 +244,7 @@ function actualizarGraficaConTipo(graficaId, nuevoTipo, graficaExistente) {
     nuevaGrafica.data.datasets[0].type = nuevoTipo;
   }
 
-  // Restaurar título
   nuevaGrafica.options.plugins.title.text = tituloActual;
-
-  // Actualizar
   nuevaGrafica.update();
 
   verificarExcesoEtiquetas(nuevaGrafica);
@@ -405,6 +362,42 @@ function agregarEnPosicion(tarjetaRef, elementoReporte, contenedores, posicion)
   }
 }
 
+/**
+ * Modifica el color de un dataset en una gráfica Chart.js, actualizando su color principal
+ * y generando un degradado hacia blanco.
+ *
+ * @param {HTMLInputElement} entradaColor - Elemento input de tipo color del cual se obtiene el valor hexadecimal.
+ * @param {HTMLDivElement} grafica - Elemento HTML que contiene el canvas de la gráfica Chart.js.
+ * @param {number} dataset - Índice del dataset dentro de la gráfica que se desea modificar.
+ */
+function modificarColor(entradaColor, grafica, dataset) {
+  const contexto = grafica.querySelector('canvas').getContext('2d');
+  const graficaOriginal = Chart.getChart(contexto);
+  const color = hexARGB(entradaColor.value);
+  const colores = generarDegradadoHaciaBlanco(color, 7);
+
+  graficaOriginal.config.data.datasets[dataset].miColor = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
+  graficaOriginal.config.data.datasets[dataset].misColores = colores;
+
+  graficaOriginal.update()
+}
+
+/**
+ * Convierte un valor hexadecimal de color en un arreglo con los valores RGB correspondientes.
+ *
+ * @param {string} colorHex - Color en formato hexadecimal (por ejemplo: "#FF5733" o "FF5733").
+ * @returns {number[]} Arreglo con tres números que representan los componentes R, G y B (en ese orden).
+ */
+function hexARGB(colorHex) {
+  colorHex = colorHex.replace(/^#/, '');
+
+  const rojo = parseInt(colorHex.substring(0, 2), 16);
+  const verde = parseInt(colorHex.substring(2, 4), 16);
+  const azul = parseInt(colorHex.substring(4, 6), 16);
+
+  return [rojo, verde, azul];
+}
+
 module.exports = {
   agregarGrafica,
 };