feat(a11y): use seeded patterns in bar charts

app/components/Chart/PatternSlot.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+/**
+ * This component is designed to create various patterns from seeds, and included
+ * inside vue-data-ui charts in the #pattern slots.
+ * Using patterns helps users with vision deficency (like achromatopsia) to distinguish
+ * series in the context of data visualisation.
+ */
+import { computed } from 'vue'
+import { createSeededSvgPattern } from '~/utils/charts'
+
+const props = defineProps<{
+  id: string
+  seed: string | number
+  color?: string
+  foregroundColor: string
+  fallbackColor: string
+  maxSize: number
+  minSize: number
+}>()
+
+const pattern = computed(() =>
+  createSeededSvgPattern(props.seed, {
+    foregroundColor: props.foregroundColor,
+    backgroundColor: props.color ?? props.fallbackColor,
+    minimumSize: props.minSize,
+    maximumSize: props.maxSize,
+  }),
+)
+</script>
+
+<template>
+  <pattern
+    :id
+    patternUnits="userSpaceOnUse"
+    :width="pattern.width"
+    :height="pattern.height"
+    :patternTransform="`rotate(${pattern.rotation})`"
+    v-html="pattern.contentMarkup"
+  />
+</template>

app/components/Compare/FacetBarChart.vue

@@ -4,6 +4,7 @@ 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 { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
+
 import {
   loadFile,
   insertLineBreaks,
@@ -243,8 +244,19 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
   <div class="font-mono facet-bar">
     <ClientOnly v-if="dataset.length">
       <VueUiHorizontalBar :key="chartKey" :dataset :config class="[direction:ltr]">
+        <template #pattern="{ patternId, seriesIndex }">
+          <ChartPatternSlot
+            v-if="seriesIndex != 0"
+            :id="patternId"
+            :seed="seriesIndex"
+            :foreground-color="colors.bg!"
+            fallback-color="transparent"
+            :max-size="24"
+            :min-size="16"
+          />
+        </template>
+
         <template #svg="{ svg }">
-          <!-- Inject npmx logo & tagline during SVG and PNG print -->
           <g
             v-if="svg.isPrintingSvg || svg.isPrintingImg"
             v-html="
@@ -261,15 +273,19 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
           <span v-if="isOpen" class="i-lucide:x w-6 h-6" aria-hidden="true" />
           <span v-else class="i-lucide:ellipsis-vertical w-6 h-6" aria-hidden="true" />
         </template>
+
         <template #optionCsv>
           <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
         </template>
+
         <template #optionImg>
           <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
         </template>
+
         <template #optionSvg>
           <span class="text-fg-subtle font-mono pointer-events-none">SVG</span>
         </template>
+
         <template #optionAltCopy>
           <span
             class="w-6 h-6"