Merge pull request #38 from openearth/Feat-display-shoreline-timeseries

Feat display shoreline timeseries

components/graph-line.vue

@@ -22,7 +22,6 @@
         :options="graphData()"
         :autoresize="true"
         class="graph-line__chart"
-        :manual-update="true"
       />
       <ui-button class="download-btn" kind="quiet" @click="download()"
         >DOWNLOAD</ui-button
@@ -41,6 +40,7 @@ import moment from 'moment'
 import ECharts from 'vue-echarts'
 import { saveAs } from 'file-saver'
 import 'echarts/lib/chart/line'
+import 'echarts/lib/chart/scatter'
 import 'echarts/lib/component/dataZoom'
 import 'echarts/lib/component/tooltip'
 
@@ -147,6 +147,14 @@ export default {
       type: String,
       default: '-',
     },
+    type: {
+      type: String,
+      default: 'line',
+      validator: function(value) {
+        // The value must match one of these strings
+        return ['line', 'scatter'].indexOf(value) !== -1
+      },
+    },
   },
   data: () => ({
     isCollapsed: false,
@@ -167,7 +175,7 @@ export default {
         },
         series: this.series.map(serie => {
           return {
-            type: 'line',
+            type: this.type,
             showAllSymbol: true,
             data: serie,
             // symbolSize: 5,

layouts/default.vue

@@ -58,7 +58,7 @@ import concat from 'lodash/fp/concat'
 import isEqual from 'lodash/fp/isEqual'
 import identity from 'lodash/fp/identity'
 import _ from 'lodash'
-import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
+import { mapState, mapGetters, mapMutations } from 'vuex'
 import DataSetControlMenu from '../components/data-set-control-menu'
 import SiteNavigation from '../components/site-navigation'
 import TimeStamp from '../components/time-stamp'
@@ -160,7 +160,6 @@ export default {
     await this.$nextTick()
   },
   methods: {
-    ...mapActions('map', ['loadPointDataForLocation']),
     ...mapMutations('map', ['clearActiveDatasetIds', 'setActiveRasterLayer']),
     updateFilter(layer) {
       // if there is a filterIds, concatenate the values into filter
@@ -174,12 +173,19 @@ export default {
       return layer
     },
     selectLocations(detail) {
+      // On the selection (by mouse event on map) of a location update the
+      // route accordingly
       this.geometry = detail.geometry
       const { datasetIds } = this.$route.params
-      const locationIds = detail.features.map(
-        feature =>
-          feature.properties.locationId || feature.properties.Transect_id,
-      )
+      const locationIds = []
+      detail.features.forEach(feature => {
+        // When a layer has a metadata with locationIdField use this layer and
+        // get the locationId usin this field
+        const locId = _.get(feature, 'layer.metadata.locationIdField')
+        if (locId) {
+          locationIds.push(feature.properties[locId])
+        }
+      })
       this.updateRoute({
         name: 'datasetIds-locationId',
         params: { datasetIds, locationId: head(locationIds) },
@@ -226,6 +232,7 @@ export default {
       this.updateRoute(newRouteObject)
     },
     updateRoute(routeObj) {
+      // Update route with route object
       const { datasetIds, locationId } = routeObj.params
       if (datasetIds === undefined) {
         this.geometry = {

pages/_datasetIds/_locationId.vue

@@ -14,6 +14,7 @@
         :theme="activeTheme"
         :collapsible="true"
         :units="data.units"
+        :type="data.type"
       />
     </section>
   </aside>
@@ -43,7 +44,6 @@ export default {
               .map(datasetId => get(`${pointId}.${datasetId}`, activePointData))
               .filter(identity)
         )
-
       return flatten(result)
     },
     locations() {

store/map/datasets.js

@@ -28,11 +28,16 @@ export const mutations = {
     if (!state[id]) Vue.set(state, id, {})
     const vectorData = getVectorData(state[id])
 
+    const mapboxLayers = _.get(data, 'vectorLayer.mapboxLayers') || []
+    const newMapboxLayers = mapboxLayers.map(layer => {
+      layer.metadata = {
+        locationIdField: _.get(data, 'locationIdField'),
+        datasetId: _.get(layer, 'id'),
+      }
+      return layer
+    })
     // TODO: make generic by looping over vectorLayer
-    const mergedVector = _.merge(
-      { mapboxLayer: _.get(data, 'vectorLayer.mapboxLayers') },
-      vectorData,
-    )
+    const mergedVector = _.merge({ mapboxLayer: newMapboxLayers }, vectorData)
     Vue.set(state[id], 'vector', mergedVector)
   },
   addDatasetRaster(state, data) {

store/map/index.js

@@ -131,7 +131,7 @@ export const actions = {
     // prettier-ignore
     datasets.forEach(datasetId => {
       const parameters = {
-        locationCode: locationId,
+        locationId: locationId,
         startTime: moment()
           .subtract(3, 'days')
           .format('YYYY-MM-DDTHH:mm:ssZ'),
@@ -269,6 +269,7 @@ export const getters = {
         const locData = _.get(data, `pointData.${locationId}`)
         locData.datasetName = _.get(data, 'metadata.name')
         locData.units = _.get(data, 'metadata.units')
+        locData.type = _.get(data, 'metadata.pointData')
         return locData
       })
     })

test/unit/store/map/datasets/mutations.spec.js

@@ -3,13 +3,13 @@ import { mutations } from '../../../../../store/map/datasets'
 describe('addDatasetVector', () => {
   test('updates state with payload', () => {
     const state = { wl: { metadata: 'foo' } }
-    const data = { id: 'wl', vectorLayer: { mapboxLayers: 'bar' } }
+    const data = { id: 'wl', vectorLayer: { mapboxLayers: [{ foo: 'bar' }] } }
 
     mutations.addDatasetVector(state, data)
     expect(state).toMatchObject({
       wl: {
         metadata: 'foo',
-        vector: { mapboxLayer: 'bar' },
+        vector: { mapboxLayer: [{ foo: 'bar' }] },
       },
     })
     expect(Object.isFrozen(state.wl.vector[0])).toBe(true)
@@ -19,7 +19,7 @@ describe('addDatasetVector', () => {
     const state = {
       wl: {
         vector: {
-          mapboxLayer: { foo: 'bar' },
+          mapboxLayer: [{ foo: 'bar' }],
         },
       },
     }
@@ -30,7 +30,7 @@ describe('addDatasetVector', () => {
     expect(state).toMatchObject({
       wl: {
         vector: {
-          mapboxLayer: { foo: 'bar' },
+          mapboxLayer: [{ foo: 'bar' }],
         },
       },
     })
@@ -41,24 +41,26 @@ describe('addDatasetVector', () => {
     const state = {
       wl: {
         vector: {
-          mapboxLayer: { foo: 'bar' },
+          mapboxLayer: [{ foo: 'bar' }],
         },
       },
     }
     const id = 'wl'
     const data = {
       vectorLayer: {
-        mapboxLayer: {
-          bar: 'foo',
-        },
+        mapboxLayers: [
+          {
+            bar: 'foo',
+          },
+        ],
       },
     }
 
     mutations.addDatasetVector(state, { id, data })
     expect(state).toMatchObject({
       wl: {
         vector: {
-          mapboxLayer: { foo: 'bar' },
+          mapboxLayer: [{ foo: 'bar' }],
         },
       },
     })
@@ -67,19 +69,26 @@ describe('addDatasetVector', () => {
   test('updates state with different id', () => {
     const state = {
       wl: {
-        vector: { mapboxLayer: { foo: 'bar' } },
+        vector: { mapboxLayer: [{ foo: 'bar' }] },
       },
     }
 
-    const data = { id: 'wd', vectorLayer: { mapboxLayers: { bar: 'foo' } } }
+    const data = { id: 'wd', vectorLayer: { mapboxLayers: [{ bar: 'foo' }] } }
 
     mutations.addDatasetVector(state, data)
     expect(state).toMatchObject({
       wl: {
-        vector: { mapboxLayer: { foo: 'bar' } },
+        vector: { mapboxLayer: [{ foo: 'bar' }] },
       },
       wd: {
-        vector: { mapboxLayer: { bar: 'foo' } },
+        vector: {
+          mapboxLayer: [
+            {
+              bar: 'foo',
+              metadata: { datasetId: undefined, locationIdField: undefined },
+            },
+          ],
+        },
       },
     })
   })

test/unit/store/map/index/actions.spec.js

@@ -151,7 +151,7 @@ describe('loadPointDataForLocation', () => {
       endTime: moment()
         .add(5, 'days')
         .format('YYYY-MM-DDTHH:mm:ssZ'),
-      locationCode: 'ef',
+      locationId: 'ef',
       startTime: moment()
         .subtract(3, 'days')
         .format('YYYY-MM-DDTHH:mm:ssZ'),
@@ -195,7 +195,7 @@ describe('loadPointDataForLocation', () => {
       endTime: moment()
         .add(5, 'days')
         .format('YYYY-MM-DDTHH:mm:ssZ'),
-      locationCode: 'ef',
+      locationId: 'ef',
       startTime: moment()
         .subtract(3, 'days')
         .format('YYYY-MM-DDTHH:mm:ssZ'),