From e2e2b7e5b57471e2b8dc0c21f360fe35444ae314 Mon Sep 17 00:00:00 2001 From: CindyvdVries Date: Wed, 11 Sep 2019 11:55:47 +0200 Subject: [PATCH 1/5] use the locationIdField and add to mapboxlayers --- layouts/default.vue | 12 ++++++++---- store/map/datasets.js | 13 +++++++++---- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/layouts/default.vue b/layouts/default.vue index b85b6772..f18d1963 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -176,10 +176,14 @@ export default { selectLocations(detail) { 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 => { + const locId = _.get(feature, 'layer.metadata.locationIdField') + if (locId) { + locationIds.push(feature.properties[locId]) + } + }) + console.log(locationIds) this.updateRoute({ name: 'datasetIds-locationId', params: { datasetIds, locationId: head(locationIds) }, diff --git a/store/map/datasets.js b/store/map/datasets.js index 80004ac5..99fb4336 100644 --- a/store/map/datasets.js +++ b/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) { From d64e03eb163356a32f8bfb4d3612c53232ba8196 Mon Sep 17 00:00:00 2001 From: CindyvdVries Date: Wed, 11 Sep 2019 13:20:58 +0200 Subject: [PATCH 2/5] locationId in timeseries request --- store/map/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/store/map/index.js b/store/map/index.js index a15b089e..93a54c3e 100644 --- a/store/map/index.js +++ b/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'), From 6418b1ffb1e5cf8ce2efe9612621bfffde98fdf5 Mon Sep 17 00:00:00 2001 From: CindyvdVries Date: Wed, 11 Sep 2019 13:57:06 +0200 Subject: [PATCH 3/5] fix changes timeseries plots --- components/graph-line.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/components/graph-line.vue b/components/graph-line.vue index 9ee1b865..1f01a417 100644 --- a/components/graph-line.vue +++ b/components/graph-line.vue @@ -22,7 +22,6 @@ :options="graphData()" :autoresize="true" class="graph-line__chart" - :manual-update="true" /> DOWNLOAD Date: Wed, 11 Sep 2019 16:36:00 +0200 Subject: [PATCH 4/5] Fix GDV-267 Shoreline timeseries (scatter and line) --- components/graph-line.vue | 7 +++- layouts/default.vue | 4 +-- pages/_datasetIds/_locationId.vue | 2 +- store/map/datasets.js | 2 +- store/map/index.js | 1 + .../unit/store/map/datasets/mutations.spec.js | 35 ++++++++++++------- test/unit/store/map/index/actions.spec.js | 4 +-- 7 files changed, 34 insertions(+), 21 deletions(-) diff --git a/components/graph-line.vue b/components/graph-line.vue index 1f01a417..57e01419 100644 --- a/components/graph-line.vue +++ b/components/graph-line.vue @@ -40,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' @@ -146,6 +147,10 @@ export default { type: String, default: '-', }, + type: { + type: String, + default: 'line', + }, }, data: () => ({ isCollapsed: false, @@ -166,7 +171,7 @@ export default { }, series: this.series.map(serie => { return { - type: 'line', + type: this.type, showAllSymbol: true, data: serie, // symbolSize: 5, diff --git a/layouts/default.vue b/layouts/default.vue index f18d1963..474ddf75 100644 --- a/layouts/default.vue +++ b/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 @@ -183,7 +182,6 @@ export default { locationIds.push(feature.properties[locId]) } }) - console.log(locationIds) this.updateRoute({ name: 'datasetIds-locationId', params: { datasetIds, locationId: head(locationIds) }, diff --git a/pages/_datasetIds/_locationId.vue b/pages/_datasetIds/_locationId.vue index 7351fd64..cece60de 100644 --- a/pages/_datasetIds/_locationId.vue +++ b/pages/_datasetIds/_locationId.vue @@ -14,6 +14,7 @@ :theme="activeTheme" :collapsible="true" :units="data.units" + :type="data.type" /> @@ -43,7 +44,6 @@ export default { .map(datasetId => get(`${pointId}.${datasetId}`, activePointData)) .filter(identity) ) - return flatten(result) }, locations() { diff --git a/store/map/datasets.js b/store/map/datasets.js index 99fb4336..b212dba5 100644 --- a/store/map/datasets.js +++ b/store/map/datasets.js @@ -28,7 +28,7 @@ export const mutations = { if (!state[id]) Vue.set(state, id, {}) const vectorData = getVectorData(state[id]) - const mapboxLayers = _.get(data, 'vectorLayer.mapboxLayers') + const mapboxLayers = _.get(data, 'vectorLayer.mapboxLayers') || [] const newMapboxLayers = mapboxLayers.map(layer => { layer.metadata = { locationIdField: _.get(data, 'locationIdField'), diff --git a/store/map/index.js b/store/map/index.js index 93a54c3e..a2b7e4d6 100644 --- a/store/map/index.js +++ b/store/map/index.js @@ -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 }) }) diff --git a/test/unit/store/map/datasets/mutations.spec.js b/test/unit/store/map/datasets/mutations.spec.js index 49fd5ec0..719dccfd 100644 --- a/test/unit/store/map/datasets/mutations.spec.js +++ b/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,16 +41,18 @@ describe('addDatasetVector', () => { const state = { wl: { vector: { - mapboxLayer: { foo: 'bar' }, + mapboxLayer: [{ foo: 'bar' }], }, }, } const id = 'wl' const data = { vectorLayer: { - mapboxLayer: { - bar: 'foo', - }, + mapboxLayers: [ + { + bar: 'foo', + }, + ], }, } @@ -58,7 +60,7 @@ describe('addDatasetVector', () => { 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 }, + }, + ], + }, }, }) }) diff --git a/test/unit/store/map/index/actions.spec.js b/test/unit/store/map/index/actions.spec.js index b8bdef62..970d8b3e 100644 --- a/test/unit/store/map/index/actions.spec.js +++ b/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'), From e5833a5699d85e625e30370b0fd2f5dfa45c544b Mon Sep 17 00:00:00 2001 From: CindyvdVries Date: Thu, 12 Sep 2019 16:20:57 +0200 Subject: [PATCH 5/5] added comments and resolve feedback --- components/graph-line.vue | 4 ++++ layouts/default.vue | 5 +++++ 2 files changed, 9 insertions(+) diff --git a/components/graph-line.vue b/components/graph-line.vue index 57e01419..f0f9b344 100644 --- a/components/graph-line.vue +++ b/components/graph-line.vue @@ -150,6 +150,10 @@ export default { type: { type: String, default: 'line', + validator: function(value) { + // The value must match one of these strings + return ['line', 'scatter'].indexOf(value) !== -1 + }, }, }, data: () => ({ diff --git a/layouts/default.vue b/layouts/default.vue index 474ddf75..9093f54f 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -173,10 +173,14 @@ 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.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]) @@ -228,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 = {