Merge pull request #116 from earthrise-media/fingerprint-benchmark-up…

…date Update benchmark color, add benchmark hover
earthrise-media · Dec 6, 2023 · 9f2b6c7 · 9f2b6c7
2 parents 6c568d9 + af6b226
commit 9f2b6c7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/vacs-map-app/src/MapExplorer.vue b/vacs-map-app/src/MapExplorer.vue
@@ -9,7 +9,7 @@
           </template>
         </component>
         <div class="overlay-wrapper">
-          <OverviewTop class="interactive"/>
+          <OverviewTop class="interactive" />
           <div class="map-overlay desktop">
             <div class="overlay-left">
               <ExploreSidebar class="interactive" ref="overlayLeftRef" />

diff --git a/vacs-map-app/src/components/CropFingerprint.vue b/vacs-map-app/src/components/CropFingerprint.vue
@@ -29,7 +29,14 @@
           >
             {{ cat }}
           </span>
-          <span v-if="showBenchmark" class="category-label benchmark-label"> Benchmark </span>
+          <span
+            v-if="showBenchmark"
+            class="category-label benchmark-label"
+            @mouseenter="hoveredCategory = 'benchmark'"
+            @mouseleave="hoveredCategory = null"
+          >
+            Benchmark
+          </span>
         </div>
       </div>
     </div>
@@ -64,15 +71,19 @@
                 v-for="indicator in benchmarkIndicators"
                 :key="indicator.key"
                 fill="#ffffff01"
-                stroke="#7e899c"
+                stroke="#DAB967"
                 :stroke-width="1"
                 :d="arc(indicator)"
                 :class="{
                   highlighted:
-                    hovered?.key === indicator.key || hoveredCategory === indicator.category,
+                    hovered?.key === indicator.key ||
+                    hoveredCategory === indicator.category ||
+                    hoveredCategory === 'benchmark',
                   unhighlighted:
-                    (hovered && hovered.key !== indicator.key) ||
-                    (hoveredCategory && hoveredCategory !== indicator.category)
+                    (hovered && hovered.key !== indicator.key && hoveredCategory !== 'benchmark') ||
+                    (hoveredCategory &&
+                      hoveredCategory !== indicator.category &&
+                      hoveredCategory !== 'benchmark')
                 }"
               />
             </g>
@@ -241,7 +252,7 @@ svg {
 }
 
 .unhighlighted {
-  opacity: 0.5;
+  opacity: 0.2;
 }
 
 .legend {
@@ -290,7 +301,7 @@ svg {
 }
 
 .benchmark-label {
-  color: var(--gray);
-  border: 1px solid var(--gray);
+  color: #dab967;
+  border: 1px solid #dab967;
 }
 </style>