Create maps future change

components/cpm/Future.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="w-full h-full">
+    <span class="space-x-3 p-3">
+      <CpmDropdown v-model="selectedVariable" :options="variables" alttext="Choose a variable." />
+      <CpmDropdown v-model="selectedSeason" :options="seasons" alttext="Select a season." />
+      <CpmDropdown v-model="selectedModel" :options="filterModels" alttext="Choose a model/group" />
+      <!-- same style but not selectable option to display region -->
+      <select
+        class="border border-gray-300 rounded-full cursor-pointer
+      text-gray-600 h-10 pl-5 pr-10 bg-white hover:border-gray-400
+      focus:outline-none appearance-none"
+      >
+        <option :value="domain">
+          {{ domain }}
+        </option>
+      </select>
+    </span>
+    <div class="w-full h-full flex flex-wrap">
+      <div class="w-1/3 h-full">
+        <p class="pt-6 text-center text-lg prose">
+          High-resolution models (CPM)
+        </p>
+        <div
+          class="bg-no-repeat bg-left-top bg-contain w-full h-full"
+          :style="{backgroundImage: `url(${cpmImage})` }"
+        />
+      </div>
+      <div class="w-1/3 h-full">
+        <p class="pt-6 text-center text-lg prose">
+          Regional models (RCM)
+        </p>
+        <div
+          class="bg-no-repeat bg-left-top bg-contain w-full h-full"
+          :style="{backgroundImage: `url(${rcmImage})` }"
+        />
+      </div>
+      <div class="w-1/3 h-full">
+        <p class="pt-6 text-center text-lg prose">
+          Global models (GCM)
+        </p>
+        <div
+          class="bg-no-repeat bg-left-top bg-contain w-full h-full"
+          :style="{backgroundImage: `url(${gcmImage})` }"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    domain: {
+      default: 'AL',
+      type: String
+    }
+  },
+  data () {
+    return {
+      selectedVariable: 'pr',
+      selectedSeason: 'DJF',
+      selectedModel: 'UKMO',
+      variables: {
+        pr: 'Precipitation',
+        tas: 'Temperature'
+      },
+      seasons: {
+        DJF: 'Winter',
+        JJA: 'Summer'
+      },
+      regionsModels: {
+        NW: ['CNRM', 'KNMI', 'ETHZ', 'UKMO'],
+        SW: ['CMCC', 'IPSL', 'ETHZ', 'UKMO'],
+        SE: ['ICTP', 'ETHZ', 'UKMO'],
+        C: ['GERICS', 'ETHZ', 'UKMO'],
+        CE: ['SMHI', 'ICTP', 'ETHZ', 'UKMO'],
+        N: ['SMHI', 'GERICS'],
+        AL: ['CNRM', 'CMCC', 'IPSL', 'KNMI', 'GERICS', 'ETHZ', 'SMHI', 'ICTP', 'UKMO']
+      }
+    }
+  },
+  computed: {
+    cpmImage () {
+      const fallback = 'empty.png'
+      try {
+        return require('~/static/cpm_analysis/future_change/' + this.domain + '/' + this.selectedVariable + '/' + 'cpm_' + this.selectedModel.toLowerCase() + '_' + this.selectedSeason + '.png')
+      } catch (err) {
+        return fallback
+      }
+    },
+    rcmImage () {
+      const fallback = 'empty.png'
+      try {
+        return require('~/static/cpm_analysis/future_change/' + this.domain + '/' + this.selectedVariable + '/' + 'rcm_' + this.selectedModel.toLowerCase() + '_' + this.selectedSeason + '.png')
+      } catch (err) {
+        return fallback
+      }
+    },
+    gcmImage () {
+      const fallback = 'empty.png'
+      try {
+        return require('~/static/cpm_analysis/future_change/' + this.domain + '/' + this.selectedVariable + '/' + 'gcm_' + this.selectedModel.toLowerCase() + '_' + this.selectedSeason + '.png')
+      } catch (err) {
+        return fallback
+      }
+    },
+    filterModels () {
+      const filterList = {}
+      this.regionsModels[this.domain].forEach((model) => {
+        if (model === 'SMHI') {
+          filterList[model] = 'DMI/SMHI'
+        } else {
+          filterList[model] = model
+        }
+      })
+      return filterList
+    }
+  }
+}
+</script>

components/cpm/Performance.vue

@@ -18,7 +18,7 @@
     <div class="w-full h-full flex flex-wrap">
       <div class="w-1/3 h-full">
         <p class="pt-6 text-center text-lg prose">
-          CPM experiment
+          High-resolution models (CPM)
         </p>
         <div
           class="bg-no-repeat bg-left-top bg-contain w-full h-full"
@@ -27,7 +27,7 @@
       </div>
       <div class="w-1/3 h-full">
         <p class="pt-6 text-center text-lg prose">
-          RCM experiment
+          Regional models (RCM)
         </p>
         <div
           class="bg-no-repeat bg-left-top bg-contain w-full h-full"
@@ -36,7 +36,7 @@
       </div>
       <div class="w-1/3 h-full">
         <p class="pt-6 text-center text-lg prose">
-          GCM experiment
+          Global models (GCM)
         </p>
         <div
           class="bg-no-repeat bg-left-top bg-contain w-full h-full"
@@ -68,93 +68,50 @@ export default {
         DJF: 'Winter',
         JJA: 'Summer'
       },
-      modelsList: {
-        CMCC: {
-          cpm: 'cclm_ec-earth',
-          rcm: 'cclm-ec-earth',
-          gcm: 'ec-earth-cclm'
-        },
-        CNRM: {
-          cpm: 'cnrm-arome_cnrm-cm5',
-          rcm: 'cnrm-cnrm-cm5',
-          gcm: 'cnrm-cnrm-cm5'
-        },
-        ETHZ: {
-          cpm: 'ethz-cclm_mpi',
-          rcm: 'ethz-cclm-mpi',
-          gcm: 'ethz-mpi-esm-lr'
-        },
-        GERICS: {
-          cpm: 'gerics_mpi-esm-lr',
-          rcm: 'gerics-mpi-esm-lr',
-          gcm: 'gerics-mpi-esm-lr'
-        },
-        UKMO: {
-          cpm: 'mohc-um10.1_hadgem3-gc3.1',
-          rcm: 'mohc-hadgem3-gc3.1',
-          gcm: 'hadgem2-es'
-        },
-        'DMI/SMHI': {
-          cpm: 'hclim_ec-earth',
-          rcm: 'hclim-ec-earth',
-          gcm: 'ec-earth-smhi'
-        },
-        ICTP: {
-          cpm: 'regcm4_hadgem2-es',
-          rcm: 'regcm4-hadgem2-es',
-          gcm: 'hadgem2-es'
-        },
-        IPSL: {
-          cpm: 'ipsl-wrf_ipsl-cm5-mr',
-          rcm: 'ipsl-wrf_ipsl-cm5a-mr',
-          gcm: 'ipsl-cm5a-mr'
-        },
-        KNMI: {
-          cpm: 'hclim-knmi_ec-earth',
-          rcm: 'knmi-racmo-ec-earth',
-          gcm: 'knmi-ec-earth'
-        }
-      },
       regionsModels: {
         NW: ['CNRM', 'KNMI', 'ETHZ', 'UKMO'],
         SW: ['CMCC', 'IPSL', 'ETHZ', 'UKMO'],
         SE: ['ICTP', 'ETHZ', 'UKMO'],
         C: ['GERICS', 'ETHZ', 'UKMO'],
-        CE: ['DMI/SMHI', 'ICTP', 'ETHZ', 'UKMO'],
-        N: ['DMI/SMHI', 'GERICS'],
-        AL: ['CNRM', 'CMCC', 'IPSL', 'KNMI', 'GERICS', 'ETHZ', 'DMI/SMHI', 'ICTP', 'UKMO']
+        CE: ['SMHI', 'ICTP', 'ETHZ', 'UKMO'],
+        N: ['SMHI', 'GERICS'],
+        AL: ['CNRM', 'CMCC', 'IPSL', 'KNMI', 'GERICS', 'ETHZ', 'SMHI', 'ICTP', 'UKMO']
       }
     }
   },
   computed: {
     cpmImage () {
       const fallback = 'empty.png'
       try {
-        return require('~/static/cpm_analysis/past_performance/' + this.domain + '/' + this.selectedVariable + '/' + 'cpm_' + this.modelsList[this.selectedModel].cpm + '_' + this.selectedSeason + '.png')
+        return require('~/static/cpm_analysis/past_performance/' + this.domain + '/' + this.selectedVariable + '/' + 'cpm_' + this.selectedModel.toLowerCase() + '_' + this.selectedSeason + '.png')
       } catch (err) {
         return fallback
       }
     },
     rcmImage () {
       const fallback = 'empty.png'
       try {
-        return require('~/static/cpm_analysis/past_performance/' + this.domain + '/' + this.selectedVariable + '/' + 'rcm_' + this.modelsList[this.selectedModel].rcm + '_' + this.selectedSeason + '.png')
+        return require('~/static/cpm_analysis/past_performance/' + this.domain + '/' + this.selectedVariable + '/' + 'rcm_' + this.selectedModel.toLowerCase() + '_' + this.selectedSeason + '.png')
       } catch (err) {
         return fallback
       }
     },
     gcmImage () {
       const fallback = 'empty.png'
       try {
-        return require('~/static/cpm_analysis/past_performance/' + this.domain + '/' + this.selectedVariable + '/' + 'gcm_' + this.modelsList[this.selectedModel].gcm + '_' + this.selectedSeason + '.png')
+        return require('~/static/cpm_analysis/past_performance/' + this.domain + '/' + this.selectedVariable + '/' + 'gcm_' + this.selectedModel.toLowerCase() + '_' + this.selectedSeason + '.png')
       } catch (err) {
         return fallback
       }
     },
     filterModels () {
       const filterList = {}
       this.regionsModels[this.domain].forEach((model) => {
-        filterList[model] = model
+        if (model === 'SMHI') {
+          filterList[model] = 'DMI/SMHI'
+        } else {
+          filterList[model] = model
+        }
       })
       return filterList
     }

pages/cpm.vue

@@ -18,6 +18,7 @@ export default {
       pages: [
         { title: 'CPM home', url: '/cpm' },
         { title: 'Past performance', url: '/cpm/performance' },
+        { title: 'Future change', url: '/cpm/future' },
         { title: 'Analyse', url: '/cpm/analyse' },
         { title: 'Explore', url: '/cpm/explore' },
         { title: 'Download', url: '/cpm/download' },

pages/cpm/future.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="w-full h-full p-2">
+    <CpmFuture :domain="domain" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['domain']
+}
+</script>