Merge pull request #60 from earthrise-media/crop-fingerprints

Add crop fingerprint chart
earthrise-media · Nov 27, 2023 · 8fa4b5c · 8fa4b5c
2 parents a28a06d + 26c8063
commit 8fa4b5c
Show file tree

Hide file tree

Showing 14 changed files with 396 additions and 180 deletions.
diff --git a/vacs-map-app/src/App.vue b/vacs-map-app/src/App.vue
@@ -8,14 +8,14 @@
 import { onMounted } from 'vue'
 import { RouterView } from 'vue-router'
 import { useCropYieldsStore } from '@/stores/cropYields'
-import { useCropInformationStore } from './stores/cropInformation';
+import { useCropInformationStore } from './stores/cropInformation'
 
 const cropYieldsStore = useCropYieldsStore()
-const cropInformationStore = useCropInformationStore();
+const cropInformationStore = useCropInformationStore()
 
 onMounted(() => {
-  cropYieldsStore.load();
-  cropInformationStore.load();
+  cropYieldsStore.load()
+  cropInformationStore.load()
 })
 </script>
 

diff --git a/vacs-map-app/src/MapExplorer.vue b/vacs-map-app/src/MapExplorer.vue
@@ -15,20 +15,20 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
-import { storeToRefs } from 'pinia';
-import MapContainerColor from '@/components/MapContainerColor.vue';
-import MapContainerColorAcrossScenarios from './components/MapContainerColorAcrossScenarios.vue';
-import MapContainerColorRadius from '@/components/MapContainerColorRadius.vue';
-import MapContainerNotFilled from '@/components/MapContainerNotFilled.vue';
-import MapContainerNotFilledTwoLayers from '@/components/MapContainerNotFilledTwoLayers.vue';
-import MapContainerColorAfricanUnion from '@/components/MapContainerColorAfricanUnion.vue';
-import MapContainerColorSandSoil from '@/components/MapContainerColorSandSoil.vue';
-import MapContainerColorSoil from '@/components/MapContainerColorSoil.vue';
-import MapContainerColorSand from '@/components/MapContainerColorSand.vue';
-import { useMapExploreStore } from '@/stores/mapExplore';
-import LayoutOverview from './components/layouts/LayoutOverview.vue';
-import ExploreSidebar from './components/ExploreSidebar.vue';
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import MapContainerColor from '@/components/MapContainerColor.vue'
+import MapContainerColorAcrossScenarios from './components/MapContainerColorAcrossScenarios.vue'
+import MapContainerColorRadius from '@/components/MapContainerColorRadius.vue'
+import MapContainerNotFilled from '@/components/MapContainerNotFilled.vue'
+import MapContainerNotFilledTwoLayers from '@/components/MapContainerNotFilledTwoLayers.vue'
+import MapContainerColorAfricanUnion from '@/components/MapContainerColorAfricanUnion.vue'
+import MapContainerColorSandSoil from '@/components/MapContainerColorSandSoil.vue'
+import MapContainerColorSoil from '@/components/MapContainerColorSoil.vue'
+import MapContainerColorSand from '@/components/MapContainerColorSand.vue'
+import { useMapExploreStore } from '@/stores/mapExplore'
+import LayoutOverview from './components/layouts/LayoutOverview.vue'
+import ExploreSidebar from './components/ExploreSidebar.vue'
 
 const availableMaps = [
   {
@@ -39,7 +39,7 @@ const availableMaps = [
   {
     id: 'color-across-scenarios',
     name: 'color across scenarios',
-    component: MapContainerColorAcrossScenarios,
+    component: MapContainerColorAcrossScenarios
   },
   {
     id: 'color-and-radius-1',
@@ -82,7 +82,7 @@ const mapExploreStore = useMapExploreStore()
 const { selectedMap } = storeToRefs(mapExploreStore)
 
 if (!selectedMap.value) {
-  selectedMap.value = availableMaps[1].id;
+  selectedMap.value = availableMaps[1].id
 }
 
 const selectedMapComponent = computed(() => {

diff --git a/vacs-map-app/src/components/CropCards.vue b/vacs-map-app/src/components/CropCards.vue
@@ -24,31 +24,26 @@ import { useFiltersStore } from '@/stores/filters'
 import { useCropInformationStore } from '../stores/cropInformation'
 import CardWrapper from './CardWrapper.vue'
 
-const router = useRouter();
-const filtersStore = useFiltersStore();
-const cropInformationStore = useCropInformationStore();
-const {  
-  selectedCrop, 
-  selectedModel,
-  selectedCropGroup,
-  cropSortBy,
-  cropSortOrder,
-} = storeToRefs(filtersStore)
-const { data: cropInformation } = storeToRefs(cropInformationStore);
+const router = useRouter()
+const filtersStore = useFiltersStore()
+const cropInformationStore = useCropInformationStore()
+const { selectedCrop, selectedModel, selectedCropGroup, cropSortBy, cropSortOrder } =
+  storeToRefs(filtersStore)
+const { data: cropInformation } = storeToRefs(cropInformationStore)
 
 const filteredCrops = computed(() => {
-  if (!selectedCropGroup.value) return cropInformation.value;
-  return cropInformation.value.filter(d => d.crop_group === selectedCropGroup.value);
+  if (!selectedCropGroup.value) return cropInformation.value
+  return cropInformation.value.filter((d) => d.crop_group === selectedCropGroup.value)
 })
 
 const sortedCrops = computed(() => {
-  if (!cropSortBy.value) return filteredCrops.value;
-  return [...filteredCrops.value].sort(
-    (a, b) => d3[cropSortOrder.value](
-      a.indicators.nutritional[cropSortBy.value], 
+  if (!cropSortBy.value) return filteredCrops.value
+  return [...filteredCrops.value].sort((a, b) =>
+    d3[cropSortOrder.value](
+      a.indicators.nutritional[cropSortBy.value],
       b.indicators.nutritional[cropSortBy.value]
     )
-  );
+  )
 })
 
 const navigate = (crop) => {
@@ -57,7 +52,7 @@ const navigate = (crop) => {
 }
 
 const getUrl = (crop) => {
-  return new URL(`../assets/img/minimaps/${crop}_${selectedModel.value}.svg`, import.meta.url).href;
+  return new URL(`../assets/img/minimaps/${crop}_${selectedModel.value}.svg`, import.meta.url).href
 }
 </script>
 

diff --git a/vacs-map-app/src/components/CropFilters.vue b/vacs-map-app/src/components/CropFilters.vue
@@ -14,7 +14,7 @@
     </div>
 
     <div class="crop-groups">
-      <div 
+      <div
         :class="{
           selected: selectedCropGroup === ''
         }"
@@ -37,21 +37,17 @@
     <div class="sort-by">
       <div class="sort-order">
         <div class="sort-order-option">
-          <input type="radio" v-model="cropSortOrder" id="descending" value="descending">
+          <input type="radio" v-model="cropSortOrder" id="descending" value="descending" />
           <label for="descending">High to low</label>
         </div>
         <div class="sort-order-option">
-          <input type="radio" v-model="cropSortOrder" id="ascending" value="ascending">
+          <input type="radio" v-model="cropSortOrder" id="ascending" value="ascending" />
           <label for="ascending">Low to high</label>
         </div>
       </div>
 
       <select v-model="cropSortBy">
-        <option 
-          v-for="option in cropSortByOptions" 
-          :key="option"
-          :value="option"
-        >
+        <option v-for="option in cropSortByOptions" :key="option" :value="option">
           {{ option }}
         </option>
       </select>
@@ -64,16 +60,16 @@ import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useFiltersStore } from '@/stores/filters'
 
-const filtersStore = useFiltersStore();
-const { 
-  availableModels, 
-  selectedModel, 
-  availableCropGroups, 
+const filtersStore = useFiltersStore()
+const {
+  availableModels,
+  selectedModel,
+  availableCropGroups,
   selectedCropGroup,
   cropSortByOptions,
   cropSortBy,
-  cropSortOrder,
-} = storeToRefs(filtersStore);
+  cropSortOrder
+} = storeToRefs(filtersStore)
 
 const futureScenarios = computed(() => {
   return availableModels.value.filter((d) => d.startsWith('future'))
@@ -86,7 +82,8 @@ const futureScenarios = computed(() => {
   gap: 2rem;
 }
 
-.scenarios, .crop-groups {
+.scenarios,
+.crop-groups {
   display: flex;
   flex-direction: row;
   gap: 1rem;
@@ -117,7 +114,8 @@ const futureScenarios = computed(() => {
   gap: 0.25rem;
 }
 
-.sort-order label, .sort-order input {
+.sort-order label,
+.sort-order input {
   cursor: pointer;
 }
 </style>