Add crop group mobile control

earthrise-media · Jan 16, 2024 · a634ff5 · a634ff5
1 parent 65530a3
commit a634ff5
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 43 deletions.
diff --git a/vacs-map-app/src/components/ExploreSidebar.vue b/vacs-map-app/src/components/ExploreSidebar.vue
@@ -71,7 +71,12 @@
           alt=""
           @click="openScenarioModal(selectedModel)"
         />
-        <RadioSwitch v-model="selectedModel" :options="scenarioOptions" name="selected-scenario" />
+        <RadioSwitch
+          v-model="selectedModel"
+          :options="scenarioOptions"
+          name="selected-scenario"
+          :grow="true"
+        />
       </div>
     </div>
 

diff --git a/vacs-map-app/src/components/MapTooltip.vue b/vacs-map-app/src/components/MapTooltip.vue
@@ -5,7 +5,7 @@
         v-if="showCropGroupMap"
         class="indicator"
         :style="{
-          background: getColor(hoveredCropId)
+          background: colorStore?.getCropColor(hoveredCropId)
         }"
       />
       <img v-else-if="hoveredValue > 0" src="../assets/img/positive-yield.svg" alt="" />
@@ -43,7 +43,6 @@ const { hoveredId, showCropGroupMap, cropGroupMetric } = storeToRefs(mapExploreS
 const { data: yieldData } = storeToRefs(cropYieldsStore)
 const { selectedCrop, selectedModel } = storeToRefs(filtersStore)
 const { copy } = storeToRefs(contentStore)
-const { ordinal: ordinalScheme, noData: noDataFill } = storeToRefs(colorStore)
 const { data: cropInfo } = storeToRefs(cropInformationStore)
 
 const sentence = computed(() => {
@@ -83,16 +82,6 @@ const selectedCropInfo = computed(() => {
   return cropInfo.value?.find((d) => d.id === selectedCrop.value)
 })
 
-const cropGroupCrops = computed(() => {
-  const groupName = selectedCropInfo.value?.crop_group
-  return cropInfo.value?.filter((c) => c.crop_group === groupName)
-})
-
-const getColor = (crop) => {
-  if (crop === 'none') return noDataFill.value
-  return ordinalScheme.value[cropGroupCrops.value.map((d) => d.id).indexOf(crop)]
-}
-
 const hoveredCropId = computed(() => {
   if (
     !yieldData.value ||

diff --git a/vacs-map-app/src/components/MobileExploreMapControls.vue b/vacs-map-app/src/components/MobileExploreMapControls.vue
@@ -1,37 +1,48 @@
 <template>
   <div class="wrapper">
-    <div class="top-row">
-      <div class="row-item">
-        <span class="item-label"> Crop </span>
-        <select v-model="selectedCrop" class="crop-picker interactive">
-          <optgroup v-for="group in availableCropGroups" :key="group" :label="group">
-            <option v-for="crop in getCropsByGroup(group)" :key="crop.id" :value="crop.id">
-              {{ crop.label }}
-            </option>
-          </optgroup>
-        </select>
-      </div>
+    <div class="top-section">
+      <div class="top-row">
+        <div class="row-item">
+          <span class="item-label"> Crop </span>
+          <select v-model="selectedCrop" class="crop-picker interactive">
+            <optgroup v-for="group in availableCropGroups" :key="group" :label="group">
+              <option v-for="crop in getCropsByGroup(group)" :key="crop.id" :value="crop.id">
+                {{ crop.label }}
+              </option>
+            </optgroup>
+          </select>
+        </div>
 
-      <div class="row-item">
-        <span class="item-label">
-          Emissions
-          <img
-            src="@/assets/img/info.svg"
-            alt=""
-            class="interactive info"
-            @click="openScenariosModal"
+        <div class="row-item">
+          <span class="item-label">
+            Emissions
+            <img
+              src="@/assets/img/info.svg"
+              alt=""
+              class="interactive info"
+              @click="openScenariosModal"
+            />
+          </span>
+          <RadioSwitch
+            v-model="selectedModel"
+            :options="scenarioOptions"
+            name="selected-scenario"
+            class="interactive"
           />
-        </span>
-        <RadioSwitch
-          v-model="selectedModel"
-          :options="scenarioOptions"
-          name="selected-scenario"
-          class="interactive"
-        />
+        </div>
       </div>
+
+      <button
+        @click="showCropGroupMap = !showCropGroupMap"
+        class="interactive"
+        :class="{ active: showCropGroupMap }"
+      >
+        All {{ selectedCropInfo?.crop_group }}
+      </button>
     </div>
 
-    <MapLegend class="interactive" />
+    <MapLegendCropGroups v-if="showCropGroupMap" class="interactive" />
+    <MapLegend v-else class="interactive" />
     <ContentModal
       v-if="modalOpen"
       @close="() => (modalOpen = false)"
@@ -58,14 +69,18 @@ import { computed, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { useCropInformationStore } from '@/stores/cropInformation'
 import { useContentStore } from '@/stores/siteContent'
+import { useMapExploreStore } from '@/stores/mapExplore'
 import RadioSwitch from '@/components/RadioSwitch.vue'
 import MapLegend from '@/components/MapLegend.vue'
 import MapLegendCropGroups from '@/components/MapLegendCropGroups.vue'
 import ContentModal from '@/components/ContentModal.vue'
 
+const mapExploreStore = useMapExploreStore()
 const contentStore = useContentStore()
 const cropInformationStore = useCropInformationStore()
 const filtersStore = useFiltersStore()
+
+const { showCropGroupMap } = storeToRefs(mapExploreStore)
 const { selectedCrop, availableModels, selectedModel, availableCropGroups } =
   storeToRefs(filtersStore)
 const { data: cropInformation } = storeToRefs(cropInformationStore)
@@ -82,6 +97,10 @@ const futureScenarios = computed(() => {
   return availableModels?.value?.filter((d) => d.startsWith('future'))
 })
 
+const selectedCropInfo = computed(() => {
+  return cropInformation.value?.find((d) => d.id === selectedCrop.value)
+})
+
 const scenarioOptions = computed(() => {
   return futureScenarios?.value?.map((s, i) => {
     return {
@@ -136,6 +155,12 @@ const openScenariosModal = () => {
   font-weight: 600;
 }
 
+.top-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.675rem;
+}
+
 .top-row {
   display: flex;
   flex-wrap: wrap;
@@ -182,6 +207,26 @@ select {
   background-repeat: no-repeat;
 }
 
+button {
+  border: none;
+  padding: 0.5rem 0.625rem;
+  border-radius: 6.25rem;
+  background: var(--dark-gray);
+  color: var(--white);
+  font-size: 0.875rem;
+  font-weight: 500;
+
+  height: min-content;
+  width: min-content;
+
+  white-space: nowrap;
+}
+
+button.active {
+  background: var(--ui-blue);
+  color: var(--black);
+}
+
 @media only screen and (max-width: 720px) {
   .wrapper {
     display: flex;

diff --git a/vacs-map-app/src/components/RadioSwitch.vue b/vacs-map-app/src/components/RadioSwitch.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="switch">
+  <span class="switch" :class="{ grow }">
     <label
       v-for="option in options"
       :key="option.value"
@@ -38,14 +38,18 @@ const props = defineProps({
   modelValue: {
     type: String,
     default: null
+  },
+
+  grow: {
+    type: Boolean,
+    default: false
   }
 })
 const { name, options, modelValue } = toRefs(props)
 </script>
 
 <style scoped>
 .switch {
-  flex-grow: 1;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -88,6 +92,10 @@ input {
   display: none;
 }
 
+.grow {
+  flex-grow: 1;
+}
+
 @media only screen and (max-width: 720px) {
   .switch {
     width: 100%;

diff --git a/vacs-map-app/src/components/TooltipWrapper.vue b/vacs-map-app/src/components/TooltipWrapper.vue
@@ -4,7 +4,8 @@
     class="tooltip"
     :class="{
       [horizontalAlign]: true,
-      [verticalAlign]: true
+      [verticalAlign]: true,
+      showCropGroupMap
     }"
     :style="{
       left: pageX + 'px',
@@ -16,9 +17,16 @@
 </template>
 
 <script setup>
+import { storeToRefs } from 'pinia'
 import { toRefs, ref, computed, onMounted, onUnmounted } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
 
+import { useMapExploreStore } from '@/stores/mapExplore'
+
+const mapExploreStore = useMapExploreStore()
+
+const { showCropGroupMap } = storeToRefs(mapExploreStore)
+
 const props = defineProps({
   align: {
     type: String,
@@ -136,5 +144,9 @@ const setPosition = (px, py) => {
     left: 1rem !important;
     transform: unset !important;
   }
+
+  .showCropGroupMap {
+    bottom: 20rem !important;
+  }
 }
 </style>