feat: use patterns in tooltip markers

Author: graphieros

app/components/Chart/PatternSlot.vue

@@ -6,17 +6,9 @@
  * series in the context of data visualisation.
  */
 import { computed } from 'vue'
-import { createSeededSvgPattern } from '~/utils/charts'
+import { createSeededSvgPattern, type ChartPatternSlotProps } from '~/utils/charts'
 
-const props = defineProps<{
-  id: string
-  seed: string | number
-  color?: string
-  foregroundColor: string
-  fallbackColor: string
-  maxSize: number
-  minSize: number
-}>()
+const props = defineProps<ChartPatternSlotProps>()
 
 const pattern = computed(() =>
   createSeededSvgPattern(props.seed, {

app/components/Compare/FacetBarChart.vue

@@ -3,6 +3,7 @@ import { ref, computed } from 'vue'
 import { VueUiHorizontalBar } from 'vue-data-ui/vue-ui-horizontal-bar'
 import type { VueUiHorizontalBarConfig, VueUiHorizontalBarDatasetItem } from 'vue-data-ui'
 import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
+import { createChartPatternSlotMarkup } from '~/utils/charts'
 import { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
 
 import {
@@ -214,13 +215,40 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
           backdropFilter: false,
           backgroundColor: 'transparent',
           customFormat: ({ datapoint }) => {
-            const name = datapoint?.name?.replace(/\n/g, '<br>')
-            return `
+          const name = datapoint?.name?.replace(/\n/g, '<br>') ?? ''
+          const safeSeriesIndex = (datapoint?.absoluteIndex as number) ?? 0
+          const patternId = `tooltip-pattern-${safeSeriesIndex}`
+          const usePattern = safeSeriesIndex !== 0
+
+          const patternMarkup = usePattern
+            ? createChartPatternSlotMarkup({
+                id: patternId,
+                seed: safeSeriesIndex,
+                foregroundColor: colors.value.bg!,
+                fallbackColor: 'transparent',
+                maxSize: 24,
+                minSize: 16,
+              })
+            : ''
+
+          const markerMarkup = usePattern
+            ? `
+              <rect x="0" y="0" width="20" height="20" rx="3" fill="${datapoint?.color ?? 'transparent'}" />
+              <rect x="0" y="0" width="20" height="20" rx="3" fill="url(#${patternId})" />
+            `
+            : `
+              <rect x="0" y="0" width="20" height="20" rx="3" fill="${datapoint?.color ?? 'transparent'}" />
+            `
+
+          return `
             <div class="font-mono p-3 border border-border rounded-md bg-[var(--bg)]/10 backdrop-blur-md">
               <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 2 2" class="w-full h-full">
-                    <rect x="0" y="0" width="2" height="2" rx="0.3" fill="${datapoint?.color}" />
+                  <svg viewBox="0 0 20 20" class="w-full h-full" aria-hidden="true">
+                    <defs>
+                      ${patternMarkup}
+                    </defs>
+                    ${markerMarkup}
                   </svg>
                 </div>
                 <span class="text-3xs uppercase tracking-wide text-[var(--fg)]/70 truncate">
@@ -231,8 +259,8 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
                 </span>
               </div>
             </div>
-            `
-          },
+          `
+        }
         },
       },
     },

app/utils/charts.ts

@@ -1055,3 +1055,43 @@ export function createSeededSvgPattern(
     contentMarkup,
   }
 }
+
+export type ChartPatternSlotProps = {
+  id: string
+  seed: string | number
+  color?: string
+  foregroundColor: string
+  fallbackColor: string
+  maxSize: number
+  minSize: number
+}
+
+// Equivalent of the PatternSlot.vue component, to be used inside tooltip.customFormat in chart configs
+export function createChartPatternSlotMarkup({
+  id,
+  seed,
+  color,
+  foregroundColor,
+  fallbackColor,
+  maxSize,
+  minSize,
+}: ChartPatternSlotProps) {
+  const pattern = createSeededSvgPattern(seed, {
+    foregroundColor,
+    backgroundColor: color ?? fallbackColor,
+    minimumSize: minSize,
+    maximumSize: maxSize,
+  })
+
+  return `
+    <pattern
+      id="${id}"
+      patternUnits="userSpaceOnUse"
+      width="${pattern.width}"
+      height="${pattern.height}"
+      patternTransform="rotate(${pattern.rotation})"
+    >
+      ${pattern.contentMarkup}
+    </pattern>
+  `
+}

test/unit/app/utils/charts.spec.ts

@@ -17,6 +17,7 @@ import {
   applyEllipsis,
   createSeedNumber,
   createSeededSvgPattern,
+  createChartPatternSlotMarkup,
   type TrendLineConfig,
   type TrendLineDataset,
   type VersionsBarConfig,
@@ -1560,3 +1561,93 @@ describe('createSeededSvgPattern', () => {
     expect(numericSeedResult).toEqual(stringSeedResult)
   })
 })
+
+describe('createChartPatternSlotMarkup', () => {
+  it('returns a pattern element with the provided id', () => {
+    const result = createChartPatternSlotMarkup({
+      id: 'pattern-1',
+      seed: 7,
+      color: '#ff0000',
+      foregroundColor: '#ffffff',
+      fallbackColor: 'transparent',
+      maxSize: 24,
+      minSize: 16,
+    })
+
+    expect(result).toContain('<pattern')
+    expect(result).toContain('id="pattern-1"')
+    expect(result).toContain('patternUnits="userSpaceOnUse"')
+    expect(result).toContain('</pattern>')
+  })
+
+  it('includes width, height, rotation, and content markup from the generated pattern', () => {
+    const generatedPattern = createSeededSvgPattern(1, {
+      foregroundColor: '#000',
+      backgroundColor: 'transparent',
+      minimumSize: 16,
+      maximumSize: 24,
+    })
+
+    const result = createChartPatternSlotMarkup({
+      id: 'pattern-1',
+      seed: 1,
+      foregroundColor: '#000',
+      fallbackColor: 'transparent',
+      maxSize: 24,
+      minSize: 16,
+    })
+
+    expect(result).toContain(`width="${generatedPattern.width}"`)
+    expect(result).toContain(`height="${generatedPattern.height}"`)
+    expect(result).toContain(`patternTransform="rotate(${generatedPattern.rotation})"`)
+    expect(result).toContain(generatedPattern.contentMarkup)
+  })
+
+  it('is deterministic for the same inputs', () => {
+    const first = createChartPatternSlotMarkup({
+      id: 'pattern-stable',
+      seed: 'nuxt',
+      color: '#00ff00',
+      foregroundColor: '#000000',
+      fallbackColor: 'transparent',
+      maxSize: 40,
+      minSize: 10,
+    })
+
+    const second = createChartPatternSlotMarkup({
+      id: 'pattern-stable',
+      seed: 'nuxt',
+      color: '#00ff00',
+      foregroundColor: '#000000',
+      fallbackColor: 'transparent',
+      maxSize: 40,
+      minSize: 10,
+    })
+
+    expect(first).toBe(second)
+  })
+
+  it('changes when the id changes', () => {
+    const first = createChartPatternSlotMarkup({
+      id: 'pattern-a',
+      seed: 1,
+      color: '#00ff00',
+      foregroundColor: '#000000',
+      fallbackColor: 'transparent',
+      maxSize: 40,
+      minSize: 10,
+    })
+
+    const second = createChartPatternSlotMarkup({
+      id: 'pattern-b',
+      seed: 2,
+      color: '#00ff00',
+      foregroundColor: '#000000',
+      fallbackColor: 'transparent',
+      maxSize: 40,
+      minSize: 10,
+    })
+
+    expect(first).not.toBe(second)
+  })
+})