construction du composant time-series

src/views/ResultsCentroidsView.vue

@@ -378,6 +378,7 @@ export default {
         data.push(dataTab)
       }
       console.log(data)
+    console.log(colors)
     // }
 
     Plotly.newPlot('myDiv', data);

src/views/ResultsTimeSeries.vue

@@ -13,6 +13,16 @@
               <div class="stats-results">
                 <h2>Time series</h2>
                 <div id="myDiv"></div>
+                <div>
+                  <div v-for="(item, index) in clusters" :key="item">
+                    <input type="checkbox" :id="index" class="cluster" checked v-on:change="verifCluster"/>
+                    <label :for="item">{{item}}</label>
+                  </div>
+                  <div v-for="item2 in bands" :key="item2">
+                    <input type="checkbox" :id="item2.id" checked/>
+                    <label :for="item2.id">{{item2.name}}</label>
+                  </div>
+                 </div>
               </div>
             </div>
             <div class="d-flex align-start space-between">
@@ -40,12 +50,168 @@
 
 <script>
 import Plotly from 'plotly.js-dist-min'
+import result from "@/assets/javascript/result";
+import {toRaw} from "vue";
 export default {
   name: "ResultsTimeSeries",
-  mounted(){
-    var data;
-    Plotly.newPlot('myDiv', data);
-  }
+  data() {
+    return {
+      clusters: result._clusterName,
+      bands: [{name: "Band 1", id: "b1"}, {name: "Band 2", id: "b2"}, {name: "Band 3", id: "b3"}],
+      data: [],
+      deletedLines : [],
+      newData : []
+    }
+  },
+  methods: {
+    verifCluster() {
+      const clusterCheckboxes = document.querySelectorAll("input[type='checkbox'].cluster")
+
+      console.log(clusterCheckboxes, this.data)
+      for (let c = 0; c < clusterCheckboxes.length; c++) {
+        if (clusterCheckboxes[c].checked === false) {
+          for (let d = 0; d < toRaw(this.data).length; d++) {
+            if (toRaw(this.data)[d].name == c + 1) {
+              console.log(toRaw(this.data)[d])
+              //Lignes à effacer
+              //Vérification si l'objet n'existe pas déjà dans le tableau
+              if(this.deletedLines.indexOf(toRaw(this.data)[d]) === -1){
+                this.deletedLines.push(toRaw(this.data)[d])
+              }
+              this.newData.splice(d, 1)
+              //Sert à effacer immédiatement l'object séléctionné
+              // this.data.splice(d, 1)
+            }
+            // console.log('********', toRaw(this.deletedLines))
+            else if(this.deletedLines.indexOf(toRaw(this.data)[d]) === -1){
+              this.newData.push(toRaw(this.data)[d])
+            }
+          }
+          console.log(toRaw(this.deletedLines), toRaw(this.newData))
+
+        }
+      }
+      Plotly.newPlot('myDiv', this.newData);
+    }
+  },
+
+    mounted() {
+      // const clusterCheckboxes = document.querySelectorAll("input[type='checkbox'].cluster");
+      let colors = [
+        [
+          0,
+          "rgba(204,0,255,1)"
+        ],
+        [
+          0.1,
+          "rgba(255,0,0,1)"
+        ],
+        [
+          0.2,
+          "rgba(204,255,0,1)"
+        ],
+        [
+          0.3,
+          "rgba(0,102,255,1)"
+        ],
+        [
+          0.4,
+          "rgba(255,0,153,1)"
+        ],
+        [
+          0.5,
+          "rgba(51,0,255,1)"
+        ],
+        [
+          0.6,
+          "rgba(255,153,0,1)"
+        ],
+        [
+          0.7,
+          "rgba(0,255,102,1)"
+        ],
+        [
+          0.8,
+          "rgba(51,255,0,1)"
+        ],
+        [
+          0.9,
+          "rgba(0,255,255,1)"
+        ],
+        [
+          1,
+          "rgba(255,0,153,1)"
+        ]
+      ];
+      console.log('***colors***', colors)
+      let values = result._centroideValue;
+      let dashes = ['solid', 'dashdot', 'dot']
+
+      for (let i = 0; i < values.length; i++) {
+        for (let j = 0; j < values[i].items.length; j++) {
+          let plot;
+          for (let k = 0; k < values[i].items[j].items.length; k++) {
+            // console.log('fdgsdf', i , j)
+            //Chaque line affichée dans la console va correspondre à une ligne
+            plot = {
+              y: values[i].items[j].items,
+              type: 'scatter',
+              name: i + 1,
+              band: j + 1,
+              line: {
+                color: colors[i][1],
+                dash: dashes[j]
+              }
+            }
+          }
+          this.data.push(plot)
+        }
+      }
+      console.log(this.data)//Ici il y a toutes les lignes de data : c'est comme si on avait coché toutes les lignes du time series
+      //A présent nous allons vérifier si les lignes s'affichent lorsque la case est cochée
+
+      // for(let d = 0; d < this.data.length; d++){
+      //   // if(data[d].band === 1){
+      //   //   console.log(data[d])
+      //   // }
+      //   switch (data[d].name){
+      //     case 1 :
+      //       break;
+      //     case 2 :
+      //       break;
+      //     case 3 :
+      //       break;
+      //     case 4 :
+      //       break;
+      //     case 5 :
+      //       break;
+      //     case 6 :
+      //       break;
+      //     case 7 :
+      //       break;
+      //     case 8 :
+      //       break;
+      //     case 9 :
+      //       break;
+      //     case 10 :
+      //       break;
+      //   }
+      // }
+      var layout = {
+        height: 800,
+        width: 1000,
+        legend: {
+          y: 0.5,
+          traceorder: 'reversed',
+          font: {size: 16},
+          yref: 'paper'
+        }
+      }
+
+      Plotly.newPlot('myDiv', this.data, layout);
+
+    }
+
 }
 </script>