chore: use built-in vue-data-ui pattern component

app/components/Chart/SplitSparkline.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { VueUiSparkline } from 'vue-data-ui/vue-ui-sparkline'
+import { VueUiPatternSeed } from 'vue-data-ui/vue-ui-pattern-seed'
 import { useCssVariables } from '~/composables/useColors'
 import {
   type VueUiSparklineConfig,
   type VueUiSparklineDatasetItem,
   type VueUiXyDatasetItem,
 } from 'vue-data-ui'
 import { getPalette, lightenColor } from 'vue-data-ui/utils'
+import { CHART_PATTERN_CONFIG } from '~/utils/charts'
 
 import('vue-data-ui/style.css')
 
@@ -194,19 +196,37 @@ const configs = computed(() => {
     <ClientOnly v-for="(config, i) in configs" :key="`config_${i}`">
       <div @mouseleave="resetHover" @keydown.esc="resetHover" class="w-full max-w-[400px] mx-auto">
         <div class="flex gap-2 place-items-center">
-          <div class="h-3 w-3">
-            <svg viewBox="0 0 2 2" class="w-full">
+          <div class="h-5 w-5">
+            <svg viewBox="0 0 30 30" class="w-full">
+              <defs>
+                <VueUiPatternSeed
+                  v-if="i != 0"
+                  :id="`marker_${i}`"
+                  :seed="i"
+                  :foreground-color="colors.bg!"
+                  :background-color="
+                    dataset?.[i]?.color ??
+                    palette[i] ??
+                    palette[i % palette.length] ??
+                    palette[0] ??
+                    'transparent'
+                  "
+                  :max-size="CHART_PATTERN_CONFIG.maxSize"
+                  :min-size="CHART_PATTERN_CONFIG.minSize"
+                  :disambiguator="CHART_PATTERN_CONFIG.disambiguator"
+                />
+              </defs>
               <rect
                 x="0"
                 y="0"
-                width="2"
-                height="2"
-                rx="0.3"
-                :fill="dataset?.[i]?.color ?? palette[i]"
+                width="30"
+                height="30"
+                rx="3"
+                :fill="i === 0 ? (dataset?.[0]?.color ?? palette[0]) : `url(#marker_${i})`"
               />
             </svg>
           </div>
-          {{ applyEllipsis(dataset?.[i]?.name ?? '', 28) }}
+          {{ applyEllipsis(dataset?.[i]?.name ?? '', 27) }}
         </div>
         <VueUiSparkline
           :key="`${i}_${step}`"

app/components/Compare/FacetBarChart.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { VueUiHorizontalBar } from 'vue-data-ui/vue-ui-horizontal-bar'
+import { VueUiPatternSeed } from 'vue-data-ui/vue-ui-pattern-seed'
 import type { VueUiHorizontalBarConfig, VueUiHorizontalBarDatasetItem } from 'vue-data-ui'
 import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
-import { createChartPatternSlotMarkup } from '~/utils/charts'
+import { createPatternDef } from 'vue-data-ui/utils'
 import { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
 
 import {
@@ -12,6 +13,7 @@ import {
   sanitise,
   applyEllipsis,
   copyAltTextForCompareFacetBarChart,
+  CHART_PATTERN_CONFIG,
 } from '~/utils/charts'
 
 import('vue-data-ui/style.css')
@@ -227,14 +229,15 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
             const patternId = `tooltip-pattern-${safeSeriesIndex}`
             const usePattern = safeSeriesIndex !== 0
 
-            const patternMarkup = usePattern
-              ? createChartPatternSlotMarkup({
+            const patternDef = usePattern
+              ? createPatternDef({
                   id: patternId,
                   seed: safeSeriesIndex,
                   foregroundColor: colors.value.bg!,
-                  fallbackColor: 'transparent',
-                  maxSize: 24,
-                  minSize: 16,
+                  backgroundColor: 'transparent',
+                  maxSize: CHART_PATTERN_CONFIG.maxSize,
+                  minSize: CHART_PATTERN_CONFIG.minSize,
+                  disambiguator: CHART_PATTERN_CONFIG.disambiguator,
                 })
               : ''
 
@@ -252,9 +255,7 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
               <div class="grid grid-cols-[12px_minmax(0,1fr)_max-content] items-center gap-x-3">
                 <div class="w-3 h-3">
                   <svg viewBox="0 0 20 20" class="w-full h-full" aria-hidden="true">
-                    <defs>
-                      ${patternMarkup}
-                    </defs>
+                    ${patternDef}
                     ${markerMarkup}
                   </svg>
                 </div>
@@ -286,14 +287,15 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
         </template>
 
         <template #pattern="{ patternId, seriesIndex }">
-          <ChartPatternSlot
+          <VueUiPatternSeed
             v-if="seriesIndex != 0"
             :id="patternId"
             :seed="seriesIndex"
             :foreground-color="colors.bg!"
-            fallback-color="transparent"
-            :max-size="24"
-            :min-size="16"
+            background-color="transparent"
+            :max-size="CHART_PATTERN_CONFIG.maxSize"
+            :min-size="CHART_PATTERN_CONFIG.minSize"
+            :disambiguator="CHART_PATTERN_CONFIG.disambiguator"
           />
         </template>