fix date range for sidebar atleast

frontend/src/App.vue

@@ -8,6 +8,7 @@ import { nextTick, ref } from "vue";
 import { computed } from "@vue/reactivity";
 import moment from "moment";
 import { registerRegions, getNutsCode } from "./helpers/regionNames.js";
+import { getFirstDate, getLastDate } from "./helpers/dates.js";
 
 // define moment locale and some constants
 moment.updateLocale("en", {
@@ -21,7 +22,8 @@ const globeTextureFile = "../src/assets/8081_earthmap10k.jpeg";
 const skyboxTextureFile = '../src/assets/skybox/corona';
 const geoDataFile = "../src/assets/NUTS_RG_60M_2021_4326.geojson";
 const covidDataFile = "../src/assets/sample-covid-data-2022-13.json";
-const initialDate = "2022-03-14T00:00:00.000Z"; // TODO: determine last date somehow?
+let firstDate;
+let lastDate;
 
 const geoData = ref({});
 const covidData = ref({});
@@ -41,8 +43,10 @@ Promise.all([
   covidData.value = loadedCovidData;
   textures.value.globeTexture = loadedGlobeTexture;
   textures.value.skyboxTexture = loadedSkyboxTexture;
+  firstDate = getFirstDate(covidData);
+  lastDate = getLastDate(covidData);
   registerRegions(geoData);
-  selectedDate.value = new Date(initialDate);
+  selectedDate.value = new Date(lastDate);
 });
 
 const search = async function (regionName) {
@@ -63,10 +67,15 @@ const dataLoaded = computed(() => {
 
 const setSelectedDate = function (date) {
   let momentDate = date._isAMomentObject ? date : moment(date);
-  momentDate.utc(true);
   momentDate.startOf("week");
-  if (momentDate.isDST()) momentDate.add(1, "h");
+  momentDate.utc(true);
+  if (momentDate > moment(lastDate)) {
+    selectedDate.value = moment(lastDate).toDate();
+  } else if (momentDate < moment(firstDate)) {
+    selectedDate.value = moment(firstDate).toDate();
+  } else {
     selectedDate.value = momentDate.toDate();
+  }
 };
 
 const oneWeekBack = function () {

frontend/src/components/Sidebar.vue

@@ -15,6 +15,10 @@ import SimpleTypeahead from "vue3-simple-typeahead";
 import "vue3-simple-typeahead/dist/vue3-simple-typeahead.css";
 import { getRegionName, getRegionList } from "../helpers/regionNames.js";
 import Gradient from "./Gradient.vue";
+import { getFirstDate, getLastDate } from "../helpers/dates.js";
+
+let firstDate;
+let lastDate;
 
 const chartDisplayWeeks = ref(14);
 const casesChartDivide = ref(false);
@@ -35,6 +39,7 @@ const emit = defineEmits([
 ]);
 
 function numberWithDots(x) {
+  if (!x) return "";
   return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
 }
 
@@ -57,24 +62,32 @@ const isRegionSelected = computed({
   },
 });
 
+const disabledDates = function(date, currentValue) {
+  return date < firstDate || date > moment(lastDate).add(6, "days").toDate();
+}
+
 const currentCovidElement = computed({
   get() {
     if (!isRegionSelected.value) return null;
 
-    return props.covidData[props.selectedDate.toJSON()][props.selectedNutsCode];
+    let covidWeekData = props.covidData[props.selectedDate.toJSON()]
+    if (!covidWeekData) return undefined;
+    return covidWeekData[props.selectedNutsCode];
   },
 });
 
 const extractAccessorsAndLabels = function () {
   const accessors = [];
   const labels = [];
-  const referenceDate = moment(props.selectedDate).subtract(
+  let date = moment(props.selectedDate).subtract(
     chartDisplayWeeks.value,
     "weeks"
   );
+  let isDST = date.isDST();
   for (let i = 0; i < chartDisplayWeeks.value; i++) {
-    const date = referenceDate.add(1, "weeks");
-    if (date.isDST()) date.add(1, "hour");
+    date.add(1, "weeks");
+    date = date.startOf("week");
+    date.utc(true);
     accessors.push(date.toJSON());
     labels.push(date.format("DD/MM/YYYY"));
   }
@@ -95,9 +108,15 @@ const chartDataIncidence = computed({
     const data = [];
     const colors = [];
     accessors.forEach((date) => {
-      let element = props.covidData[date][props.selectedNutsCode];
+      let covidDataForDate = props.covidData[date]
+      if (!covidDataForDate) {
+        data.push(null)
+        colors.push(null)
+      } else {
+        let element = covidDataForDate[props.selectedNutsCode];
         data.push(parseFloat(element.incidence));
         colors.push(visualization.colorByIncidence(element.incidence));
+      }
     });
 
     // return labels and data
@@ -121,13 +140,16 @@ const chartDataNewCases = computed({
     const data = [];
     const colors = [];
     accessors.forEach((date) => {
-      let element = props.covidData[date][props.selectedNutsCode];
-      let proportion =
-        parseFloat(element.count) / parseFloat(element.population);
-      data.push(
-        casesChartDivide.value ? proportion : parseFloat(element.count)
-      );
+      let covidDataForDate = props.covidData[date];
+      if (!covidDataForDate) {
+        data.push(null);
+        colors.push(null);
+      } else {
+        let element = covidDataForDate[props.selectedNutsCode];
+        let proportion = parseFloat(element.count) / parseFloat(element.population);
+        data.push(casesChartDivide.value ? proportion : parseFloat(element.count));
         colors.push(visualization.colorByProportion(proportion));
+      }
     });
 
     return {
@@ -147,6 +169,9 @@ const checkboxChanged = function () {
 };
 
 onMounted(() => {
+  firstDate = new Date(getFirstDate(props.covidData));
+  lastDate = new Date(getLastDate(props.covidData));
+
   const dateInput = document.querySelector("input[name='date']");
   dateInput.classList.add("input");
   dateInput.classList.remove("mx-input");
@@ -189,6 +214,7 @@ onMounted(() => {
           format="DD/MM/YYYY"
           :clearable="false"
           :lang="{ formatLocale: { firstDayOfWeek: 1 } }"
+          :disabled-date="disabledDates"
         ></date-picker>
       </div>
       <div class="column">
@@ -221,13 +247,13 @@ onMounted(() => {
         <div class="card-content">
           <div class="media">
             <div class="media-content">
-              <p class="title is-4">{{ getRegionName(currentCovidElement.nuts) }}</p>
-              <p class="subtitle is-6">{{ currentCovidElement.country }}</p>
+              <p class="title is-4">{{ getRegionName(currentCovidElement?.nuts) }}</p>
+              <p class="subtitle is-6">{{ currentCovidElement?.country }}</p>
             </div>
             <div class="media-right">
               <figure class="image is-48x48">
                 <img
-                  :src="getFlagUrl(currentCovidElement.country)"
+                  :src="getFlagUrl(currentCovidElement?.country)"
                   alt="Placeholder image"
                 />
               </figure>
@@ -241,7 +267,7 @@ onMounted(() => {
                   <i class="fa fa-virus-covid-slash"></i> Incidencia
                 </p>
                 <p class="title">
-                  {{ numberWithDots(parseInt(currentCovidElement.incidence)) }}
+                  {{ numberWithDots(parseInt(currentCovidElement?.incidence)) }}
                 </p>
               </div>
             </div>
@@ -251,7 +277,7 @@ onMounted(() => {
                   <i class="fa fa-virus-covid"></i> Nuevos Casos
                 </p>
                 <p class="title">
-                  {{ numberWithDots(currentCovidElement.count) }}
+                  {{ numberWithDots(currentCovidElement?.count) }}
                 </p>
               </div>
             </div>
@@ -261,7 +287,7 @@ onMounted(() => {
                   <i class="fa fa-people-group"></i> Población
                 </p>
                 <p class="title">
-                  {{ numberWithDots(currentCovidElement.population) }}
+                  {{ numberWithDots(currentCovidElement?.population) }}
                 </p>
               </div>
             </div>

frontend/src/helpers/dates.js

+function orderDates(covidData) {
+    const dates = Object.keys(covidData.value ? covidData.value : covidData);
+    return dates.sort();
+}
+
+const getFirstDate = function(covidData) {
+    const dates = orderDates(covidData);
+    return dates[0];
+}
+
+const getLastDate = function(covidData) {
+    const dates = orderDates(covidData);
+    return dates[dates.length - 1];
+}
+
+export {
+    getFirstDate,
+    getLastDate,
+}