feat: improve scatter legend interactivity (#2649)

Author: graphieros

app/components/Compare/FacetScatterChart.vue

@@ -5,6 +5,7 @@ import {
   VueUiScatter,
   type VueUiScatterConfig,
   type VueUiScatterDatasetItem,
+  type VueUiScatterSeries,
 } from 'vue-data-ui/vue-ui-scatter'
 import { buildCompareScatterChartDataset } from '~/utils/compare-scatter-chart'
 import { loadFile, copyAltTextForCompareScatterChart } from '~/utils/charts'
@@ -285,6 +286,11 @@ function toggleAxisHighlight(state: AxisHighlight) {
   highlightedAxis.value = state
 }
 
+function toggleLegendItem(legendItem: VueUiScatterSeries) {
+  legendItem.segregate()
+  legendItem.onEnter()
+}
+
 const readyTeleport = shallowRef(false)
 
 onMounted(async () => {
@@ -389,26 +395,26 @@ onMounted(async () => {
                       : 'text-sm leading-6'
                   "
                 >
-                  <li v-for="datapoint in legend" :key="datapoint.name">
+                  <li v-for="legendItem in legend" :key="legendItem.id">
                     <button
-                      :aria-pressed="datapoint.isSegregated"
-                      :aria-label="datapoint.name"
+                      :aria-pressed="legendItem.isSegregated"
+                      :aria-label="legendItem.name"
                       type="button"
                       class="flex gap-1.5 place-items-center"
-                      @click="datapoint.segregate()"
+                      :class="legendItem.isSegregated ? 'line-through' : 'hover:underline'"
+                      @click="toggleLegendItem(legendItem)"
+                      @mouseenter="legendItem.onEnter()"
+                      @mouseleave="legendItem.onLeave()"
+                      @focus="legendItem.onEnter()"
+                      @blur="legendItem.onLeave()"
                     >
                       <div class="h-3 w-3" aria-hidden="true">
                         <svg viewBox="0 0 2 2" class="w-full">
-                          <circle cx="1" cy="1" r="1" :fill="datapoint.color" />
+                          <circle cx="1" cy="1" r="1" :fill="legendItem.color" />
                         </svg>
                       </div>
-                      <span
-                        class="text-fg"
-                        :style="{
-                          textDecoration: datapoint.isSegregated ? 'line-through' : undefined,
-                        }"
-                      >
-                        {{ datapoint.name }}
+                      <span class="text-fg">
+                        {{ legendItem.name }}
                       </span>
                     </button>
                   </li>
@@ -559,14 +565,35 @@ onMounted(async () => {
 </template>
 
 <style scoped>
+:deep(.vue-data-ui-component) {
+  --super-ease-out: cubic-bezier(0.15, 0.75, 0.35, 1);
+}
+
 :deep(.vue-data-ui-component svg:focus-visible) {
   outline: 1px solid var(--accent) !important;
   border-radius: 0.1rem;
   outline-offset: 0;
 }
+
 :deep(.vue-ui-user-options-button:focus-visible),
 :deep(.vue-ui-user-options :first-child:focus-visible) {
   outline: 0.1rem solid var(--accent) !important;
   border-radius: 0.25rem;
 }
+
+:deep(.vue-ui-scatter-scale-group),
+:deep(.vue-ui-scatter-datapoint text),
+:deep(.vue-ui-scatter-datapoint circle),
+:deep(.vue-ui-scatter-datapoint-label) {
+  transition: all 0.5s var(--super-ease-out) !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :deep(.vue-ui-scatter-scale-group),
+  :deep(.vue-ui-scatter-datapoint text),
+  :deep(.vue-ui-scatter-datapoint circle),
+  :deep(.vue-ui-scatter-datapoint-label) {
+    transition: none !important;
+  }
+}
 </style>

package.json

@@ -109,7 +109,7 @@
     "vite-plugin-pwa": "1.2.0",
     "vite-plus": "0.1.16",
     "vue": "3.5.33",
-    "vue-data-ui": "3.18.0",
+    "vue-data-ui": "3.18.2",
     "vue-router": "5.0.4"
   },
   "devDependencies": {