Prettier

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

@@ -8,9 +8,9 @@
 
     <div class="info" :class="{ bold: boldTitle, hasDescription: description }">
       <div class="title" :class="{ bold: boldTitle }">
-        <span> {{ title }}  </span>
+        <span> {{ title }} </span>
         <span class="subtitle"> {{ subtitle }} </span>
-        <img v-if="isDynamic && !isActive" src="../assets/img/arrow-right-pointy.svg" alt="">
+        <img v-if="isDynamic && !isActive" src="../assets/img/arrow-right-pointy.svg" alt="" />
       </div>
       <div v-if="indicator" class="indicator">
         <span class="indicator-category"> {{ indicator.key }} </span>

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

@@ -43,9 +43,7 @@
     <div class="svg-wrapper" ref="wrapperRef">
       <svg>
         <g class="chart" :transform="`translate(${width / 2}, ${height / 2})`">
-
-          <circle class="chart-background" :r="y(11)" fill="#17191b"/>
-
+          <circle class="chart-background" :r="y(11)" fill="#17191b" />
 
           <g class="selected-crop-plots">
             <path

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

@@ -1,7 +1,8 @@
 <template>
   <div class="map-legend">
     <div class="legend-title">
-      {{ selectedCropInfo?.crop_group }} by largest yield <span class="metric" @click="toggleMetric">{{ metric }}</span>
+      {{ selectedCropInfo?.crop_group }} by largest yield
+      <span class="metric" @click="toggleMetric">{{ metric }}</span>
       <img src="@/assets/img/info.svg" alt="" @click="openCropGroupModal" />
     </div>
     <div class="legend-items">

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

@@ -27,11 +27,10 @@ const { copy } = storeToRefs(contentStore)
 const { data: cropInfo } = storeToRefs(cropInformationStore)
 
 const sentence = computed(() => {
-
   const modelDescriptor =
-      selectedModel.value === 'future_ssp126'
-        ? 'a low emissions scenario'
-        : 'a high emissions scenario'
+    selectedModel.value === 'future_ssp126'
+      ? 'a low emissions scenario'
+      : 'a high emissions scenario'
 
   if (!showCropGroupMap.value) {
     const cropName = selectedCropInfo.value?.label
@@ -50,28 +49,31 @@ const sentence = computed(() => {
     const descriptor = cropGroupMetric.value === 'max' ? 'increase' : 'decrease'
 
     if (hoveredCropId === 'none') {
-      return `At this location, no ${selectedCropInfo.value.crop_group} are projected to ${descriptor} in yield` 
+      return `At this location, no ${selectedCropInfo.value.crop_group} are projected to ${descriptor} in yield`
     }
 
     const hoveredCropName = cropInfo.value.find((d) => d.id === hoveredCropId).label
 
-    return `Of the ${selectedCropInfo.value.crop_group}, ${hoveredCropName} is projected to have the greatest yield ${descriptor} (${pFormat(hoveredYieldRatio)}) at this location, in ${modelDescriptor}`
+    return `Of the ${
+      selectedCropInfo.value.crop_group
+    }, ${hoveredCropName} is projected to have the greatest yield ${descriptor} (${pFormat(
+      hoveredYieldRatio
+    )}) at this location, in ${modelDescriptor}`
   }
-
-  
 })
 
 const selectedCropInfo = computed(() => {
   return cropInfo.value?.find((d) => d.id === selectedCrop.value)
 })
 
 const hoveredValue = computed(() => {
-  if (!yieldData.value || !selectedCrop.value || !selectedModel.value || !hoveredId.value) return null
+  if (!yieldData.value || !selectedCrop.value || !selectedModel.value || !hoveredId.value)
+    return null
 
-  const columnName = !showCropGroupMap.value 
+  const columnName = !showCropGroupMap.value
     ? ['yieldratio', selectedCrop.value, selectedModel.value].join('_')
     : [selectedCropInfo.value?.crop_group, selectedModel.value].join('_')
-    
+
   const cellObject = yieldData.value.find((d) => d.id === hoveredId.value)
 
   if (!cellObject) return null