Merge pull request #39 from openearth/Feat-display-legend

Feat display legend

components/data-set-control-menu.vue

@@ -1,36 +1,49 @@
 <template>
   <Panel class="data-set-control-menu">
-    <span class="data-set-control-menu__title h4">{{ themeName }}</span>
+    <span class="data-set-control-menu__title h4 unselectable">{{
+      themeName
+    }}</span>
     <ul class="data-set-control-menu__list">
       <li
         v-for="(dataset, key) in datasets"
         :key="key"
         class="data-set-control-menu__list-item"
       >
-        <label class="data-set-control-menu__label">
-          <Icon
-            class="data-set-control-menu__icon"
-            :name="`dataset-${dataset.id}`"
-            fallback-name="placeholder"
-          />
-          <div class="data-set-control-menu__text">
-            {{ dataset.name }}
-          </div>
-          <div class="data-set-control-menu__control">
-            <UiToggle
-              v-if="checkVector(dataset.id)"
-              :checked="dataset.visible"
-              @change="toggleLocationDataset(dataset.id)"
-            />
-          </div>
-          <div class="data-set-control-menu__control">
-            <UiRadio
-              v-if="checkRaster(dataset.id)"
-              :checked="dataset.id === getActiveRasterLayer"
-              @click="toggleRasterLayer(dataset.id)"
+        <div id="menu-control">
+          <label class="data-set-control-menu__label">
+            <Icon
+              class="data-set-control-menu__icon"
+              :name="`dataset-${dataset.id}`"
+              fallback-name="placeholder"
             />
+            <div class="data-set-control-menu__text unselectable">
+              {{ dataset.name }}
+            </div>
+            <div class="data-set-control-menu__control">
+              <UiToggle
+                v-if="checkVector(dataset.id)"
+                :checked="dataset.visible"
+                @change="toggleLocationDataset(dataset.id)"
+              />
+            </div>
+            <div class="data-set-control-menu__control">
+              <UiRadio
+                v-if="checkRaster(dataset.id)"
+                :checked="dataset.id === getActiveRasterLayer"
+                @click="toggleRasterLayer(dataset.id)"
+              />
+            </div>
+          </label>
+        </div>
+        <div
+          v-if="getActiveRasterLayer === dataset.id"
+          class="default-layout__legend"
+        >
+          <LayerLegend id="layer-legend" />
+          <div id="units">
+            {{ ` [${dataset.units}]` }}
           </div>
-        </label>
+        </div>
       </li>
     </ul>
   </Panel>
@@ -43,9 +56,10 @@ import Panel from './panel'
 import UiToggle from './ui-toggle'
 import UiRadio from './ui-radio'
 import Icon from './icon'
+import LayerLegend from './layer-legend.vue'
 
 export default {
-  components: { Panel, UiToggle, Icon, UiRadio },
+  components: { Panel, UiToggle, Icon, UiRadio, LayerLegend },
   props: {
     datasets: {
       type: Array,
@@ -57,6 +71,7 @@ export default {
       'getActiveRasterLayer',
       'getActiveTheme',
       'getDatasets',
+      'activeRasterData',
     ]),
     themeName() {
       return _.get(this.getActiveTheme, 'name') || 'No theme selected'
@@ -95,8 +110,7 @@ export default {
 }
 
 .data-set-control-menu__list-item {
-  height: var(--spacing-large);
-  display: flex;
+  min-height: var(--spacing-large);
   align-items: center;
 }
 
@@ -121,4 +135,23 @@ export default {
   margin-left: auto;
   flex: 1;
 }
+
+.default-layout__legend {
+  padding-right: 4px;
+  margin-top: var(--spacing-small);
+  margin-bottom: var(--spacing-small);
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+
+#layer-legend {
+  flex-grow: inherit;
+  margin-right: 4px;
+  width: 100%;
+}
+#units {
+  height: 100%;
+  margin-top: auto;
+}
 </style>

components/layer-legend.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <svg viewBox="0 0 100 5">
+      <defs>
+        <linearGradient id="gradient" x1="0" x2="1" y1="0" y2="0">
+          <stop
+            v-for="(stop, i) in activeRasterLegendData.linearGradient"
+            :key="i"
+            :offset="stop.offset"
+            :style="{
+              'stop-color': stop.color,
+              'stop-opacity': stop.opacity,
+            }"
+          ></stop>
+        </linearGradient>
+      </defs>
+      <rect width="100" height="10" x="0" y="0" fill="url('#gradient')"></rect>
+    </svg>
+    <div id="legend-span" class="unselectable">
+      {{ `${activeRasterLegendData.min} ${activeRasterLegendData.max}` }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  computed: {
+    ...mapGetters('map', ['activeRasterLegendData']),
+  },
+}
+</script>
+
+<style>
+#legend-span {
+  width: 100%;
+  height: 10px;
+  display: inline-block;
+  text-align: justify;
+  text-align-last: justify;
+}
+</style>

css/main.css

@@ -25,3 +25,12 @@ html {
   box-sizing: border-box;
   margin: 0;
 }
+
+.unselectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

layouts/default.vue

@@ -280,8 +280,8 @@ export default {
 
 .default-layout__timestamp {
   position: relative;
-  left: var(--spacing-default);
-  bottom: calc(var(--spacing-default) + 50px);
+  left: calc(var(--spacing-default) + var(--spacing-large));
+  bottom: calc(var(--spacing-default) + var(--spacing-large));
   width: 15vw;
   height: 50px;
 }

store/map/datasets.js

@@ -47,11 +47,14 @@ export const mutations = {
     // else add to datasets
     if (!state[id]) Vue.set(state, id, {})
     const rasterData = getRasterData(state[id])
-    const vectorLayer = merge(rasterData, {
+    const rasterLayer = merge(rasterData, {
       tiles: get('rasterLayer.url', data),
+      linearGradient: _.get(data, 'rasterLayer.linearGradient'),
+      min: _.get(data, 'rasterLayer.min'),
+      max: _.get(data, 'rasterLayer.max'),
     })
     if (!_.get(data, 'rasterLayer.url')) return
-    Vue.set(state[id], 'raster', vectorLayer)
+    Vue.set(state[id], 'raster', rasterLayer)
   },
   addDatasetPointData(state, { id, data }) {
     if (!state[id]) Vue.set(state, id, {})

store/map/index.js

@@ -197,7 +197,9 @@ export const getters = {
       .filter(identity)
   },
 
-  activeTimestamp(state, { activeRasterData }) {
+  activeTimestamp({ activeRasterData }) {
+    // Retrieve the timestamp according to the current selected Raster layer
+    // TODO: this function still works with the old fews url sources
     if (_.head(activeRasterData)) {
       const str = activeRasterData[0]
       const timestamp = str.split(/time=([^&]+)/)[1]
@@ -214,14 +216,26 @@ export const getters = {
     const tiles = get(`${activeRasterLayerId}.raster.tiles`, datasets)
     return [tiles]
   },
+  activeRasterLegendData({ datasets, activeRasterLayerId, activeDatasets }) {
+    // Return the active raster data tiles (if not defined, return [])
+    if (activeRasterLayerId === '' || activeRasterLayerId === null) return []
+    const raster = get(`${activeRasterLayerId}.raster`, datasets)
+    return {
+      linearGradient: raster.linearGradient,
+      min: raster.min,
+      max: raster.max,
+    }
+  },
   activeVectorData({ activeLocationIds }, { activeDatasets }) {
+    // Retrieve for active layers where vector data is available the data
     const vectorLayers = activeDatasets.filter(has('vector'))
     const mapboxLayers = vectorLayers.map(layer => {
       return get('vector.mapboxLayer', layer)
     })
     return mapboxLayers.filter(identity)
   },
   activeDatasetsLocations({ activeLocationIds }, { activeDatasets }) {
+    // Retrieve for the active datasets the locations
     const getActiveProperty = feature =>
       pipe([
         get('properties.locationId'),

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

@@ -85,6 +85,99 @@ describe('activeDatasets', () => {
   })
 })
 
+describe('activeTimestamp', () => {
+  test('returns empty when no activeRasterData is available', () => {
+    const state = {
+      activeRasterData: [],
+    }
+    const result = getters.activeTimestamp(state)
+    expect(result).toBe('')
+  })
+  test('returns date when activeRasterData is available and a correct time string', () => {
+    const state = {
+      activeRasterData: ['test/time=01-01-2019 00:00'],
+    }
+    const result = getters.activeTimestamp(state)
+    expect(result).toBe('01-01-2019 00:00')
+  })
+
+  test('returns date when activeRasterData is available and not a correct time string', () => {
+    const state = {
+      activeRasterData: ['foo'],
+    }
+    const result = getters.activeTimestamp(state)
+    expect(result).toBe('')
+  })
+})
+
+describe('activeRasterData', () => {
+  const state = {
+    activeRasterLayerId: '',
+    datasets: {
+      foo: {
+        raster: {
+          tiles: 'bar',
+        },
+      },
+    },
+  }
+  test('return empty array when no active raster data', () => {
+    const result = getters.activeRasterData(state)
+    expect(result).toEqual([])
+  })
+
+  test('return the tiles of the active raster data', () => {
+    state.activeRasterLayerId = 'foo'
+    const result = getters.activeRasterData(state)
+    expect(result).toEqual(['bar'])
+  })
+})
+
+describe('activeRasterLegendData', () => {
+  const state = {
+    activeRasterLayerId: '',
+    datasets: {
+      foo: {
+        raster: {
+          linearGradient: 'LG',
+          min: 'min',
+          max: 'max',
+        },
+      },
+    },
+  }
+  test('return empty array when no active raster data', () => {
+    const result = getters.activeRasterLegendData(state)
+    expect(result).toEqual([])
+  })
+  test('return the tiles of the active raster data', () => {
+    state.activeRasterLayerId = 'foo'
+    const result = getters.activeRasterLegendData(state)
+    expect(result).toEqual({
+      linearGradient: 'LG',
+      min: 'min',
+      max: 'max',
+    })
+  })
+})
+
+describe('activeVectorData', () => {
+  const state = {
+    activeLocationIds: ['loc1'],
+    activeDatasets: [
+      {
+        vector: {
+          mapboxLayer: 'mblayer',
+        },
+      },
+    ],
+  }
+  test('return active vector data', () => {
+    const result = getters.activeVectorData(state, state)
+    expect(result).toEqual(['mblayer'])
+  })
+})
+
 describe('activeDatasetsLocations', () => {
   test('returns array of datasets for the active locations', () => {
     const state = {