Add map legend (#81)

vacs-map-app/src/MapExplorer.vue

@@ -8,8 +8,9 @@
           </template>
         </component>
         <div class="map-overlay">
-          <div class="overlay-left" ref="overlayLeftRef">
-            <ExploreSidebar class="interactive" />
+          <div class="overlay-left">
+            <ExploreSidebar class="interactive" ref="overlayLeftRef" />
+            <MapLegend />
           </div>
           <div class="overlay-right">
             <select v-model="selectedMap" class="interactive">
@@ -41,6 +42,7 @@ import { useMapExploreStore } from '@/stores/mapExplore'
 import LayoutOverview from './components/layouts/LayoutOverview.vue'
 import ExploreSidebar from './components/ExploreSidebar.vue'
 import RegionPicker from './components/RegionPicker.vue'
+import MapLegend from '@/components/MapLegend.vue'
 
 const availableMaps = [
   // {
@@ -159,6 +161,13 @@ onUnmounted(() => {
   padding: 2rem 0;
 }
 
+.overlay-left {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  gap: 2rem;
+}
+
 .overlay-right {
   position: relative;
   margin-right: var(--page-horizontal-margin);

vacs-map-app/src/components/MapLegend.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="map-legend">
+    <div class="legend-title">{{ selectedCropInfo?.label }} yield ratio</div>
+    <div class="legend-gradient" :style="gradientStyle"></div>
+    <div class="legend-ticks">
+      <div class="legend-tick">Min</div>
+      <div class="legend-tick">0</div>
+      <div class="legend-tick">Max</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useCropInformationStore } from '@/stores/cropInformation'
+import { useFiltersStore } from '@/stores/filters'
+import { divergingScheme } from '@/utils/colors'
+
+const cropInformationStore = useCropInformationStore()
+const filtersStore = useFiltersStore()
+const { selectedCrop } = storeToRefs(filtersStore)
+const { data: cropInformation } = storeToRefs(cropInformationStore)
+
+const selectedCropInfo = computed(() => {
+  return cropInformation?.value?.find((d) => d.id === selectedCrop.value)
+})
+
+const gradientStyle = {
+  background: `linear-gradient(to right, ${divergingScheme.min},
+  ${divergingScheme.center}, ${divergingScheme.max})`,
+}
+</script>
+
+<style scoped>
+.map-legend {
+  background: var(--black-90);
+  border: 1px solid var(--dark-gray);
+  border-radius: 4px;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 15rem;
+}
+
+.legend-title {
+  font-weight: 600;
+}
+
+.legend-gradient {
+  height: 1rem;
+}
+
+.legend-ticks {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.legend-tick {
+  font-size: 0.8em;
+  text-align: center;
+}
+
+.legend-tick:first-of-type {
+  text-align: left;
+}
+
+.legend-tick:last-of-type {
+  text-align: right;
+}
+</style>