Merge branch 'Bachir-Tak:main' into main

Wimmics · Jun 16, 2024 · 972bf61 · 972bf61
2 parents 872b269 + 5b219bf
commit 972bf61
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 13 deletions.
diff --git a/docs/assets/index-728414af.js → docs/assets/index-40473cc1.js b/docs/assets/index-728414af.js → docs/assets/index-40473cc1.js
diff --git a/docs/index.html b/docs/index.html
@@ -9,7 +9,7 @@
     <link rel="icon" href="./favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DemoKGViz</title>
-    <script type="module" crossorigin src="./assets/index-728414af.js"></script>
+    <script type="module" crossorigin src="./assets/index-40473cc1.js"></script>
     <link rel="stylesheet" href="./assets/index-8f5e497b.css">
   </head>
   <body>

diff --git a/src/components/Map.vue b/src/components/Map.vue
@@ -18,6 +18,7 @@ import { rgb, scaleOrdinal, schemeCategory10 } from "d3";
 
 import {
   getAvgTempPerRegion,
+  getAvgRainPerRegion,
   buildQuery_getAllStationsAvgTemp,
   buildQuery_avgRainQtyPerStation,
   buildQuery_getAllStationsAvgHumidity,
@@ -72,7 +73,7 @@ export default {
       show: true,
       showMark: false,
       showTime: false,
-      showTemp: false,
+      showTemp: true,
       showRain: false,
       scale: [],
       scaleUnit: "",
@@ -333,6 +334,11 @@ export default {
       });
       var min = Math.min(...arr);
       var max = Math.max(...arr);
+      if (this.showRain == true) {
+        var temp = min;
+        min = max;
+        max = temp;
+      }
       finalAvg.forEach((element) => {
         if (layer.feature.properties.code == element[0]) {
           layer.bindTooltip(
@@ -342,7 +348,8 @@ export default {
               " °"
           );
           var hue =
-            (1 - (element[1] - min) / (max - min)) * this.Color_int_region;
+            (1 - (element[1] - min) / (max - min)) * this.Color_int_region +
+            (this.showRain ? 180 : 0);
           layer.setStyle({
             fillColor: hsl(hue, 100, 50),
             weight: 1,
@@ -379,6 +386,35 @@ export default {
       this.loading = true;
       return finalArr;
     },
+    //Requête du avg des précipitations par région
+    async AvgRain() {
+      const response = await axios.post(
+        import.meta.env.VITE_API_URL,
+        {
+          query: getAvgRainPerRegion(this.start, this.end),
+        },
+        {
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded",
+          },
+          responseType: "json",
+        }
+      );
+      var feature = regionsJson.features;
+      var finalArr = [];
+      response.data.results.bindings.forEach((element) => {
+        feature.forEach((el) => {
+          if (el.properties.code == element.insee.value) {
+            finalArr.push([
+              el.properties.code,
+              element.avgAnnualRainfall.value,
+            ]);
+          }
+        });
+      });
+      this.loading = true;
+      return finalArr;
+    },
     //Requête du avg des mesures par station
     async AvgStationTemp(query) {
       const response = await axios.post(
@@ -425,13 +461,7 @@ export default {
           (1 - (eval(elementMesure) - min) / (max - min)) *
             this.Color_int_station +
           colorAdd;
-        console.log(
-          eval(elementMesure),
-          max,
-          min,
-          1 - (eval(elementMesure) - min) / (max - min),
-          hue
-        );
+
         var hslp = hsl(hue, 100, 50);
 
         finalArr.push([element.StationName.value, eval(elementMesure), hslp]);
@@ -727,16 +757,62 @@ export default {
       @click="
         () => {
           unsetStation();
+          this.getavg = this.AvgTemp();
+          this.showTemp = true;
         }
       "
       :class="{ orange: show }"
       class="btn_div"
     >
       Région
     </div>
-    <div @click="unsetRegion()" :class="{ orange: showMark }" class="btn_div">
+
+    <div
+      @click="
+        () => {
+          unsetRegion();
+          this.showTemp = false;
+          this.showRain = false;
+        }
+      "
+      :class="{ orange: showMark }"
+      class="btn_div"
+    >
       Station
     </div>
+    <div class="metrics fade-in" v-if="!this.showMark && !this.showTime">
+      <span
+        @click="
+          () => {
+            this.getavg = this.AvgTemp();
+            unsetEvery();
+            this.showTemp = true;
+            this.reload = false;
+            this.showTime = false;
+            this.loading = false;
+            this.reload = true;
+          }
+        "
+        :class="{ orange: this.showTemp }"
+        ><i class="fa-solid fa-temperature-high"></i
+      ></span>
+      <span
+        @click="
+          () => {
+            this.getavg = this.AvgRain();
+            unsetEvery();
+            this.showRain = true;
+            this.reload = false;
+            this.showTime = false;
+            this.loading = false;
+
+            this.reload = true;
+          }
+        "
+        :class="{ blue: this.showRain }"
+        ><i class="fa-solid fa-cloud-rain"></i
+      ></span>
+    </div>
     <div class="metrics fade-in" v-if="this.showMark">
       <span
         @click="
@@ -792,6 +868,7 @@ export default {
       ></span>
     </div>
     <v-select
+      v-if="!this.showTime"
       label="Year"
       v-model="defaultYear"
       :items="[

diff --git a/src/queries/queries.js b/src/queries/queries.js
@@ -1766,3 +1766,43 @@ export function getAvgTempPerRegion(start, end) {
       ORDER BY ?temp_avg`;
   return query;
 }
+export function getAvgRainPerRegion(start, end) {
+  let query =
+    `
+    PREFIX wes: <http://ns.inria.fr/meteo/observationslice/>
+    PREFIX weo: <http://ns.inria.fr/meteo/ontology/>
+    PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
+    PREFIX qb: <http://purl.org/linked-data/cube#>
+    PREFIX wes-dimension: <http://ns.inria.fr/meteo/observationslice/dimension#>
+    PREFIX wes-measure: <http://ns.inria.fr/meteo/observationslice/measure#>
+    PREFIX wes-attribute: <http://ns.inria.fr/meteo/observationslice/attribute#>
+    PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
+    PREFIX dct: <http://purl.org/dc/terms/>
+    PREFIX wdt: <http://www.wikidata.org/prop/direct/>
+SELECT  (AVG( ?totalrainfall) as ?avgAnnualRainfall) ?label ?insee  WHERE
+{
+ {
+  SELECT ?station ?Nstation ?insee  ?label (SUM(?dailyrainfall24h) as ?totalrainfall) WHERE {
+        ?s a qb:Slice ; wes-dimension:station ?station ;
+      qb:observation [
+        a qb:Observation ;
+      wes-attribute:observationDate ?date ;
+      wes-measure:rainfall24h ?dailyrainfall24h
+    ] .
+        ?station a weo:WeatherStation ; dct:spatial ?e ; rdfs:label ?Nstation .
+        ?e wdt:P131 ?item .
+        ?item rdfs:label ?label ; wdt:P2585 ?insee .
+    FILTER (?label != "Guyane"@fr && ?label !="Mayotte"@fr && ?label !="La Réunion"@fr && ?label !="Martinique"@fr && ?label !="Guadeloupe"@fr)
+      FILTER(?date >= xsd:date("` +
+    start +
+    `"))
+      FILTER(?date  < xsd:date("` +
+    end +
+    `"))
+}
+GROUP BY ?station ?label ?Nstation ?insee
+}
+}
+ORDER BY ?label`;
+  return query;
+}