From b757eac66472b3f6a156eec387573a93b3578807 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Fri, 13 Feb 2026 06:59:52 +0100
Subject: [PATCH 1/3] chore: bump vue-data-ui from 3.14.10 to 3.15.0

---
 package.json   |  2 +-
 pnpm-lock.yaml | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index a8dac7839..86c266870 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
     "vite-plugin-pwa": "1.2.0",
     "vite-plus": "0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab",
     "vue": "3.5.27",
-    "vue-data-ui": "3.14.10"
+    "vue-data-ui": "3.15.0"
   },
   "devDependencies": {
     "@e18e/eslint-plugin": "0.1.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 52a4afe68..d90982664 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -201,8 +201,8 @@ importers:
         specifier: 3.5.27
         version: 3.5.27(typescript@5.9.3)
       vue-data-ui:
-        specifier: 3.14.10
-        version: 3.14.10(vue@3.5.27(typescript@5.9.3))
+        specifier: 3.15.0
+        version: 3.15.0(vue@3.5.27(typescript@5.9.3))
     devDependencies:
       '@e18e/eslint-plugin':
         specifier: 0.1.4
@@ -9437,8 +9437,8 @@ packages:
   vue-component-type-helpers@3.2.4:
     resolution: {integrity: sha512-05lR16HeZDcDpB23ku5b5f1fBOoHqFnMiKRr2CiEvbG5Ux4Yi0McmQBOET0dR0nxDXosxyVqv67q6CzS3AK8rw==}
 
-  vue-data-ui@3.14.10:
-    resolution: {integrity: sha512-2mzt/5InMFWpE1458gm1h26ILpQxotQ9cOM1xcS8boWRZnjEw1ficfay+g/HNQZL0k4AzMSZKnWWBJ/PaKgclA==}
+  vue-data-ui@3.15.0:
+    resolution: {integrity: sha512-uT500ijPaeFO5Qk/zn7Uv5+DyDdH5cerAK2GB3foyws4jgB6HjBWFcs9lDJkX0AfRT/HSGYo3/sYY83KxqACQQ==}
     peerDependencies:
       jspdf: '>=3.0.1'
       vue: '>=3.3.0'
@@ -21060,7 +21060,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.4: {}
 
-  vue-data-ui@3.14.10(vue@3.5.27(typescript@5.9.3)):
+  vue-data-ui@3.15.0(vue@3.5.27(typescript@5.9.3)):
     dependencies:
       vue: 3.5.27(typescript@5.9.3)
 

From 770b3cd94a0ea2af7dced52c0e265d4df42f8122 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Fri, 13 Feb 2026 07:00:26 +0100
Subject: [PATCH 2/3] chore: update chart configs

---
 app/components/Package/TrendsChart.vue        | 20 +++++++++++++++++--
 .../Package/VersionDistribution.vue           | 12 ++++++++++-
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index 9339abf76..67bd9b4b8 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { VueUiXyDatasetItem } from 'vue-data-ui'
+import type { VueUiXyConfig, VueUiXyDatasetItem } from 'vue-data-ui'
 import { VueUiXy } from 'vue-data-ui/vue-ui-xy'
 import { useDebounceFn, useElementSize } from '@vueuse/core'
 import { useCssVariables } from '~/composables/useColors'
@@ -1283,12 +1283,14 @@ const chartConfig = computed(() => {
           fullscreen: false,
           table: false,
           tooltip: false,
+          altCopy: false, // TODO: set to true to enable the alt copy feature
         },
         buttonTitles: {
           csv: $t('package.trends.download_file', { fileType: 'CSV' }),
           img: $t('package.trends.download_file', { fileType: 'PNG' }),
           svg: $t('package.trends.download_file', { fileType: 'SVG' }),
           annotator: $t('package.trends.toggle_annotator'),
+          altCopy: undefined, // TODO: set to proper translation key
         },
         callbacks: {
           img: ({ imageUri }: { imageUri: string }) => {
@@ -1316,6 +1318,10 @@ const chartConfig = computed(() => {
             loadFile(url, buildExportFilename('svg'))
             URL.revokeObjectURL(url)
           },
+          // altCopy: ({ dataset: dst, config: cfg }: { dataset: Array<VueUiXyDatasetItem>; config: VueUiXyConfig}) => {
+          //   // TODO: implement a reusable copy-alt-text-to-clipboard feature based on the dataset & configuration
+          //   console.log({ dst, cfg})
+          // }
         },
       },
       grid: {
@@ -1422,6 +1428,9 @@ const chartConfig = computed(() => {
           selectedColor: accent.value,
           selectedColorOpacity: 0.06,
           frameColor: colors.value.border,
+          handleWidth: isMobile.value ? 40 : 20, // does not affect the size of the touch area
+          handleBorderColor: colors.value.fgSubtle,
+          handleType: 'grab', // 'empty' | 'chevron' | 'arrow' | 'grab'
         },
         preview: {
           fill: transparentizeOklch(accent.value, isDarkMode.value ? 0.95 : 0.92),
@@ -1722,6 +1731,13 @@ watch(selectedMetric, value => {
                 aria-hidden="true"
               />
             </template>
+            <template #optionAltCopy>
+              <span
+                class="i-carbon:accessibility-alt w-6 h-6 text-fg-subtle"
+                style="pointer-events: none"
+                aria-hidden="true"
+              />
+            </template>
           </VueUiXy>
         </div>
 
@@ -1768,7 +1784,7 @@ watch(selectedMetric, value => {
 @media screen and (min-width: 767px) {
   #trends-chart .vue-data-ui-refresh-button {
     top: -0.6rem !important;
-    left: calc(100% + 2rem) !important;
+    left: calc(100% + 4rem) !important;
   }
 }
 
diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
index 4297fab35..c686735bc 100644
--- a/app/components/Package/VersionDistribution.vue
+++ b/app/components/Package/VersionDistribution.vue
@@ -5,6 +5,7 @@ import type {
   VueUiXyDatasetBarItem,
   VueUiXyDatapointItem,
   MinimalCustomFormatParams,
+  VueUiXyConfig,
 } from 'vue-data-ui'
 import { useElementSize } from '@vueuse/core'
 import { useCssVariables } from '~/composables/useColors'
@@ -132,12 +133,14 @@ const chartConfig = computed(() => {
           fullscreen: false,
           table: false,
           tooltip: false,
+          altCopy: false, // TODO: set to true to enable the alt copy feature
         },
         buttonTitles: {
           csv: $t('package.trends.download_file', { fileType: 'CSV' }),
           img: $t('package.trends.download_file', { fileType: 'PNG' }),
           svg: $t('package.trends.download_file', { fileType: 'SVG' }),
           annotator: $t('package.trends.toggle_annotator'),
+          altCopy: undefined, // TODO: set to proper translation key
         },
         callbacks: {
           img: ({ imageUri }: { imageUri: string }) => {
@@ -165,6 +168,10 @@ const chartConfig = computed(() => {
             loadFile(url, buildExportFilename('svg'))
             URL.revokeObjectURL(url)
           },
+          // altCopy: ({ dataset: dst, config: cfg }: { dataset: Array<VueUiXyDatasetItem>; config: VueUiXyConfig}) => {
+          //   // TODO: implement a reusable copy-alt-text-to-clipboard feature based on the dataset & configuration
+          //   console.log({ dst, cfg})
+          // }
         },
       },
       grid: {
@@ -243,6 +250,9 @@ const chartConfig = computed(() => {
           selectedColor: accent.value,
           selectedColorOpacity: 0.06,
           frameColor: colors.value.border,
+          handleWidth: isMobile.value ? 40 : 20, // does not affect the size of the touch area
+          handleBorderColor: colors.value.fgSubtle,
+          handleType: 'grab', // 'empty' | 'chevron' | 'arrow' | 'grab'
         },
         preview: {
           fill: transparentizeOklch(accent.value, isDarkMode.value ? 0.95 : 0.92),
@@ -663,7 +673,7 @@ const endDate = computed(() => {
 @media screen and (min-width: 767px) {
   #version-distribution .vue-data-ui-refresh-button {
     top: -0.6rem !important;
-    left: calc(100% + 2rem) !important;
+    left: calc(100% + 4rem) !important;
   }
 }
 </style>

From 59c4b2d429ef6706361103d2ed545238830bfbae Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Fri, 13 Feb 2026 07:09:04 +0100
Subject: [PATCH 3/3] fix: remove unused type

---
 app/components/Package/TrendsChart.vue         | 2 +-
 app/components/Package/VersionDistribution.vue | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index 67bd9b4b8..ce12285e8 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { VueUiXyConfig, VueUiXyDatasetItem } from 'vue-data-ui'
+import type { VueUiXyDatasetItem } from 'vue-data-ui'
 import { VueUiXy } from 'vue-data-ui/vue-ui-xy'
 import { useDebounceFn, useElementSize } from '@vueuse/core'
 import { useCssVariables } from '~/composables/useColors'
diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
index c686735bc..9cf79b9ba 100644
--- a/app/components/Package/VersionDistribution.vue
+++ b/app/components/Package/VersionDistribution.vue
@@ -5,7 +5,6 @@ import type {
   VueUiXyDatasetBarItem,
   VueUiXyDatapointItem,
   MinimalCustomFormatParams,
-  VueUiXyConfig,
 } from 'vue-data-ui'
 import { useElementSize } from '@vueuse/core'
 import { useCssVariables } from '~/composables/useColors'