fix deprecated use of extrude

frontend/package-lock.json

@@ -10,10 +10,12 @@
       "dependencies": {
         "@tweenjs/tween.js": "^18.6.4",
         "bulma": "^0.9.3",
+        "chart.js": "^3.0.0",
         "dat.gui": "^0.7.9",
         "moment": "^2.29.1",
         "three": "^0.124.0",
         "vue": "^3.2.25",
+        "vue-chartjs": "^4.0.3",
         "vue-datepicker-next": "^1.0.2"
       },
       "devDependencies": {
@@ -157,6 +159,11 @@
       "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.3.tgz",
       "integrity": "sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g=="
     },
+    "node_modules/chart.js": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz",
+      "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA=="
+    },
     "node_modules/csstype": {
       "version": "2.6.20",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
@@ -756,6 +763,15 @@
         "@vue/shared": "3.2.31"
       }
     },
+    "node_modules/vue-chartjs": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-4.0.3.tgz",
+      "integrity": "sha512-TorpMvDzDqbqEe0H5iuF/Fundc7gf0urrXhkHnLYl2iL9NTKC3H1gAggOPUmJ+TX1z35Jub4392TAx0MzAD/hQ==",
+      "peerDependencies": {
+        "chart.js": "^3.7.0",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      }
+    },
     "node_modules/vue-datepicker-next": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/vue-datepicker-next/-/vue-datepicker-next-1.0.2.tgz",
@@ -891,6 +907,11 @@
       "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.3.tgz",
       "integrity": "sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g=="
     },
+    "chart.js": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz",
+      "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA=="
+    },
     "csstype": {
       "version": "2.6.20",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
@@ -1220,6 +1241,12 @@
         "@vue/shared": "3.2.31"
       }
     },
+    "vue-chartjs": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-4.0.3.tgz",
+      "integrity": "sha512-TorpMvDzDqbqEe0H5iuF/Fundc7gf0urrXhkHnLYl2iL9NTKC3H1gAggOPUmJ+TX1z35Jub4392TAx0MzAD/hQ==",
+      "requires": {}
+    },
     "vue-datepicker-next": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/vue-datepicker-next/-/vue-datepicker-next-1.0.2.tgz",

frontend/package.json

@@ -10,10 +10,12 @@
   "dependencies": {
     "@tweenjs/tween.js": "^18.6.4",
     "bulma": "^0.9.3",
+    "chart.js": "^3.0.0",
     "dat.gui": "^0.7.9",
     "moment": "^2.29.1",
     "three": "^0.124.0",
     "vue": "^3.2.25",
+    "vue-chartjs": "^4.0.3",
     "vue-datepicker-next": "^1.0.2"
   },
   "devDependencies": {

frontend/src/components/Globe.vue

@@ -13,7 +13,6 @@ const props = defineProps({
 const emit = defineEmits(['regionSelected'])
 
 watch(() => props.selectedDate, () => {
-    console.log("watch called")
     addAllRegions()
   })
 
@@ -124,8 +123,8 @@ function addRegion(shapePoints, covidDataWeek) {
   let shape = new THREE.Shape(shapePoints);
   let outerRadius = 305.0;
 
-  let shapeGeometry = shape.extrude({
-    amount: outerRadius - earthRadius,
+  let shapeGeometry = new THREE.ExtrudeGeometry(shape, {
+    depth: outerRadius - earthRadius,
     bevelEnabled: false,
   });
 
@@ -168,7 +167,6 @@ function addRegion(shapePoints, covidDataWeek) {
 
 // Draw all regions
 function addAllRegions() {
-  console.log("adding all regions")
   if (rootObject) {
     scene.remove(rootObject);
   }

frontend/src/components/Sidebar.vue

@@ -4,13 +4,20 @@ import "bulma/css/bulma.css";
 import { onMounted, watch } from "vue";
 import DatePicker from "vue-datepicker-next";
 import "vue-datepicker-next/index.css";
+import BarChart from "./BarChart.vue";
 
 const props = defineProps({
   covidData: Object,
   selectedNutsCode: String,
   selectedDate: Date,
 });
-const emit = defineEmits(["search", "dateSelected", "oneWeekBack", "oneWeekForward", "jumpCurrentWeek"]);
+const emit = defineEmits([
+  "search",
+  "dateSelected",
+  "oneWeekBack",
+  "oneWeekForward",
+  "jumpCurrentWeek",
+]);
 
 const selectedRegion = computed({
   get() {
@@ -31,10 +38,15 @@ const selectedRegion = computed({
 });
 
 onMounted(() => {
-  const dateInput = document.querySelector("input[name='date']")
-  dateInput.classList.add('input')
-  dateInput.classList.remove('mx-input')
-})
+  const dateInput = document.querySelector("input[name='date']");
+  dateInput.classList.add("input");
+  dateInput.classList.remove("mx-input");
+});
+
+const chartData = {
+  labels: ["January", "February", "March"],
+  datasets: [{ data: [40, 20, 12] }],
+};
 </script>
 
 <template>
@@ -60,6 +72,7 @@ onMounted(() => {
       <div class="column">
         <h4 class="title is-4">¿Cuando?</h4>
       </div>
+
       <div class="column">
         <date-picker
           :value="selectedDate"
@@ -92,10 +105,17 @@ onMounted(() => {
       </div>
     </div>
     <hr />
-    <h1>
-      selected region:
-      {{ selectedRegion == null ? "none" : selectedRegion.region }}
-    </h1>
+    <div>
+      <h6 class="title is-6">Region elegida:</h6>
+    </div>
+    <div>
+      <h4 class="title is-4">
+        {{ selectedRegion?.region || "ninguna" }}
+      </h4>
+    </div>
+    <div>
+      <bar-chart :chartData="chartData" />
+    </div>
   </div>
 </template>
 
@@ -112,7 +132,8 @@ div#menucontainer {
   text-align: center;
   padding: 2rem 1rem;
 }
-h4 {
+h4,
+h6 {
   color: white;
 }