Añadido que cambie la imagen SCL al seleccionar un punto de la gráfica

reports/static/reports/js/reportImg.js

@@ -24,13 +24,14 @@ document.getElementById("myChart").onclick = function (evt) {
     console.log(activePoint)
     console.log(activePoint.length)
     if(activePoint.length>0){
-        console.log("asd")
       
         var firstPoint = activePoint[0];
         //console.log(firstPoint)
-        //console.log(firstPoint._datasetIndex)    //la clase a la que pertenece (vegetación, agua, etc.)
+        //console.log(firstPoint._datasetIndex)    //indice de la clase a la que pertenece (vegetación, agua, etc.)
         var label = myChart.data.labels[firstPoint._index];
-        //console.log(label)
+        console.log("label: ")
+        console.log(label)
+        //console.log(myChart.legend.legendItems[firstPoint._datasetIndex].text) //nombre de la capa a la que pertenece (vegetación, agua, etc.)
         //if (!firstPoint) return;
         activePoints.forEach(function (value, index) {
             //if(value==firstPoint){
@@ -120,7 +121,20 @@ function updateImage(imagePoint) {
     titleLabel = label.slice(0, 4) + "/" + label.slice(4, 6) + "/" + label.slice(6);
     document.getElementById("titleMap").innerHTML = titleLabel;
     document.getElementById("satImage").src = "../../static/reports/tmpImages/repsat_test_dev/" + image_path + label + "_TCI_60m.jpg"
-    document.getElementById("scl_Vegetation").src = "../../static/reports/tmpImages/repsat_test_dev/" + scl_path + label + "_SCL_60m_vegetation.png"
+    
+    document.getElementById("scl_saturated").src = "../../static/reports/tmpImages/repsat_test_dev/" + scl_path + label + "_SCL_60m_saturated.png"
+    document.getElementById("scl_shadows").src = "../../static/reports/tmpImages/repsat_test_dev/" + scl_path + label + "_SCL_60m_shadows.png"
+    document.getElementById("scl_cloud_shadows").src = "../../static/reports/tmpImages/repsat_test_dev/" + scl_path + label + "_SCL_60m_cloud_shadows.png"
+    document.getElementById("scl_vegetation").src = "../../static/reports/tmpImages/repsat_test_dev/" + scl_path + label + "_SCL_60m_vegetation.png"
+    document.getElementById("scl_not-vegetated").src = "../../static/reports/tmpImages/repsat_test_dev/" + scl_path + label + "_SCL_60m_not-vegetated.png"
+    document.getElementById("scl_water").src = "../../static/reports/tmpImages/repsat_test_dev/" + scl_path + label + "_SCL_60m_water.png"
+    document.getElementById("scl_unclassified").src = "../../static/reports/tmpImages/repsat_test_dev/" + scl_path + label + "_SCL_60m_unclassified.png"
+    document.getElementById("scl_cloud_medium_probability").src = "../../static/reports/tmpImages/repsat_test_dev/" + scl_path + label + "_SCL_60m_cloud_medium_probability.png"
+    document.getElementById("scl_cloud_high_probability").src = "../../static/reports/tmpImages/repsat_test_dev/" + scl_path + label + "_SCL_60m_cloud_high_probability.png"
+    document.getElementById("scl_thin_cirrus").src = "../../static/reports/tmpImages/repsat_test_dev/" + scl_path + label + "_SCL_60m_thin_cirrus.png"
+    document.getElementById("scl_snow").src = "../../static/reports/tmpImages/repsat_test_dev/" + scl_path + label + "_SCL_60m_snow.png"
+    
+    //document.getElementById("scl_vegetation").src = "../../static/reports/tmpImages/repsat_test_dev/" + scl_path + label + "_SCL_60m_vegetation.png"
 }
 
 function change(newType) {

reports/templates/L2ASCL_data.html

@@ -357,12 +357,19 @@
             console.log(meta.hidden)
             var layer = legendItem.text.toLowerCase();
             //layer = layer.replace(" ", "_");
-            layer = layer.replace(/\s/g,'_');
+            layer = layer.replace(/\s/g,'_');  //reeemplaza los espacios con guion bajo
             console.log(layer)
             
+            var activePoint = ch.getElementAtEvent(e);  
+            console.log(document.getElementById("titleMap").textContent)  
+            var label = document.getElementById("titleMap").textContent;  //obtiene la fecha que se está viendo
+            label = label.replace(/\//g,'');   // reemplaza los diagonales por nada
+            console.log(label)  
+            
+            
             if(meta.hidden){
                 console.log("Mostrar!!!")
-                document.getElementById("scl_"+layer).src = "../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}{{ dafaultLabel }}_SCL_60m_"+layer+".png"
+                document.getElementById("scl_"+layer).src = "../../static/reports/tmpImages/repsat_test_dev/{{ SCL_PATH }}"+label+"_SCL_60m_"+layer+".png"
             }
             else{
                 console.log("Ocultar!!")