feat: add svg pattern component

Author: graphieros

app/components/Chart/PatternSlot.vue

@@ -0,0 +1,41 @@
+<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>

test/nuxt/a11y.spec.ts

@@ -136,6 +136,7 @@ import {
   ButtonBase,
   LinkBase,
   CallToAction,
+  ChartPatternSlot,
   CodeDirectoryListing,
   CodeFileTree,
   CodeMobileTreeDrawer,
@@ -2149,6 +2150,23 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('ChartPatternSlot', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(ChartPatternSlot, {
+        props: {
+          id: 'perennius',
+          seed: 1,
+          foregroundColor: 'black',
+          fallbackColor: 'transparent',
+          maxSize: 24,
+          minSize: 16
+        }
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('CopyToClipboardButton', () => {
     it('should have no accessibility violations in default state', async () => {
       const component = await mountSuspended(CopyToClipboardButton, {