Merge pull request #176 from openearth/update-chart-data-mapcomponent

Changes to mapcomponent

public/static/data/TimeserieParameters.json

@@ -1,18 +1,18 @@
 [
   {
-    "value": "U10mag",
+    "value": "U_10_mag",
     "label": "Hourly-averaged horizontal wind speed at 10 m height U_{10,mag} (m/s)"
   },
   {
-    "value": "U60mag",
+    "value": "U_60_mag",
     "label": "Hourly-averaged horizontal wind speed at 60 m height U_{60,mag} (m/s)"
   },
   {
-    "value": "U100mag",
+    "value": "U_100_mag",
     "label": "Hourly-averaged horizontal wind speed at 100 m height U_{100,mag} (m/s)"
   },
   {
-    "value": "U120mag",
+    "value": "U_120_mag",
     "label": "Hourly-averaged horizontal wind speed at 120 m height U_{120,mag} (m/s)"
   },
   {

src/components/MapComponent.vue

@@ -345,7 +345,7 @@ export default {
         if (locId) {
           locationIds.push(locId)
           // locationIds.push(feature.properties[locId])
-          feature.properties.zarrIndex = 1
+          feature.properties.zarrIndex = feature.properties.id
         }
         
         // write location index for zarr file to state

src/store/map/index.js

@@ -273,7 +273,8 @@ export const actions = {
     const datasetId = state.activeVectorDataIds
     const locationId = state.activeLocationIds
     // const slice = [null, -1]
-    const url = 'https://storage.googleapis.com/dgds-data-public/metocean/time_series/point_00001.zarr'
+    const paddedLocationId = state.activeLocationIndex.padStart(5, '0')
+    const url = `https://storage.googleapis.com/dgds-data-public/metocean/time_series/point_${paddedLocationId}.zarr`
     const path = parameter
 
     return openArray({
@@ -291,7 +292,7 @@ export const actions = {
           return res.get().then(data => {
 
             var arrayData = Array.from(data.data);
-            console.log(arrayData)
+
             // Filter out NaN values
             var filteredData = arrayData.filter(value => !isNaN(value))
 
@@ -335,8 +336,6 @@ export const actions = {
                   timeFormat: "{yyyy}"
               }
             }
-
-            console.log(pointData)
 
             commit('addDatasetPointData', pointData)
 

src/views/data/datasetIds/LocationId.vue

@@ -151,171 +151,47 @@ import {
 
 export default {
   components: { GraphLine, TimeSeries, RosePlot, ExtremeValues, WeatherWindow, JointOccurence },
-  computed: {
-      ...mapGetters(['colors', 'user']),
-    },
   
-  setup() {
-    const { proxy } = getCurrentInstance()
-    const store = useStore()
-
-    const option = ref({
-      title: {
-        text: 'Traffic Sources',
-        left: 'center'
-      },
-      tooltip: {
-        trigger: 'item',
-        formatter: '{a} <br/>{b} : {c} ({d}%)'
-      },
-      legend: {
-        orient: 'vertical',
-        left: 'left',
-        data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines']
-      },
-      series: [
-        {
-          name: 'Traffic Sources',
-          type: 'pie',
-          radius: '55%',
-          center: ['50%', '60%'],
-          data: [
-            { value: 335, name: 'Direct' },
-            { value: 310, name: 'Email' },
-            { value: 234, name: 'Ad Networks' },
-            { value: 135, name: 'Video Ads' },
-            { value: 1548, name: 'Search Engines' }
-          ],
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)'
-            }
-          }
-        }
-      ],
-      backgroundColor: 'transparent'
-    })
-
-    const expandedDatasets = ref([])
-    const activePointDataPerDataset = computed(
-      () => store.getters.activePointDataPerDataset
-    )
-    const getActiveRasterLayer = computed(
-      () => store.getters.getActiveRasterLayer
-    )
-    const activeRasterData = computed(() => store.getters.activeRasterData)
-    const activeSummary = computed(() => store.getters.activeSummary)
-
-    const datasets = computed(() => {
-      const activePointData = activePointDataPerDataset.value
+  computed: {
+    ...mapGetters(['colors', 'user', 'activePointDataPerDataset', 'getActiveRasterLayer', 'activeRasterData', 'activeSummary']),
+    datasets() {
+      const activePointData = this.activePointDataPerDataset;
       const result = Object.keys(activePointData).map((pointId) =>
         _.get(activePointData, [pointId][0])
-      )
-      return flatten(result)
-    })
-
-    const hasSerieData = computed(() => {
-      if (_.get(datasets.value, '[0].type') === 'images') {
-        return _.get(datasets.value, '[0].imageUrl')
-      } else {
-        return (
-          _.get(datasets.value, '[0].serie') &&
-          _.get(datasets.value, '[0].serie').length > 0
-        )
-      }
-    })
-
-    const locations = computed(() => proxy.$route.params.locationId)
-    const getTimeStep = computed(() => {
-      const date = _.get(activeRasterData.value, 'date')
-      if (date) {
-        return date
-      } else {
-        return ''
-      }
-    })
-
-    const activeSummaryId = computed(() => {
-      let summary = ''
-      if (activeSummary.value.length === 2) {
-        summary =
-          activeSummary.value[0].chosenValue +
-          '_' +
-          activeSummary.value[1].chosenValue
+      );
+      return flatten(result);
+    },
+    hasSerieData() {
+      if (_.get(this.datasets, '[0].type') === 'images') {
+        return _.get(this.datasets, '[0].imageUrl');
       } else {
-        summary = activeSummary.value.length
-      }
-      return summary
-    })
-
-    watch(
-      () => proxy.$route.params.locationId,
-      () => {
-        updateLocationPanel()
-      }
-    )
-
-    watch(
-      () => proxy.$route.params.datasetIds,
-      () => {
-        updateLocationPanel()
+        return _.get(this.datasets, '[0].serie') && _.get(this.datasets, '[0].serie').length > 0;
       }
-    )
-
-    watch(activePointDataPerDataset, () => {
-      expandedDatasets.value = []
-    })
-
-    watch(activeSummary, {
-      handler() {
-        updateLocationPanel()
-      },
-      deep: true
-    })
-
-    onMounted(() => {
-      setTimeout(updateLocationPanel, 3000)
-      expandedDatasets.value = [...Array(datasets.value.length).keys()]
-    })
-
-    onUnmounted(() => {
-      clearActiveLocationIds()
-    })
-
-    const {
-      loadPointDataForLocation,
-      clearActiveLocationIds,
-      setActiveLocationIds
-    } = mapMutations(['clearActiveLocationIds', 'setActiveLocationIds'])
-
-    const updateLocationPanel = () => {
-      const { datasetIds, locationId } = proxy.$route.params
-      setActiveLocationIds([locationId])
-      loadPointDataForLocation({ datasetIds, locationId })
-    }
-
-    const close = () => {
-      proxy.$router.push({
-        path: `/data/${proxy.$route.params.datasetIds}`,
-        params: { datasetIds: proxy.$route.params.datasetIds }
-      })
     }
-
-    return {
-      close,
-      option,
-      expandedDatasets,
-      datasets,
-      hasSerieData,
-      locations,
-      getTimeStep,
-      activeSummaryId,
-      updateLocationPanel,
+  },
+  
+  mounted() {
+    setTimeout(this.updateLocationPanel, 3000);
+    this.expandedDatasets = [...Array(this.datasets.length).keys()];
+  },
+
+  methods: {
+    ...mapMutations(['clearActiveLocationIds', 'setActiveLocationIds']),
+    ...mapActions(['loadPointDataForLocation']),
+    updateLocationPanel() {
+      const { datasetIds, locationId } = this.$route.params;
+      console.log('Inside updateLocationPanel:', { datasetIds, locationId });
+      this.setActiveLocationIds([locationId]);
+      // this.loadPointDataForLocation({ datasetIds, locationId });
+    },
+    close() {
+      this.$router.push({
+        path: `/data/${this.$route.params.datasetIds}`,
+        params: { datasetIds: this.$route.params.datasetIds }
+      });
     }
   }
-}
+};
 </script>
 
 <style lang="css" scoped>