diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue index 9339abf76..ce12285e8 100644 --- a/app/components/Package/TrendsChart.vue +++ b/app/components/Package/TrendsChart.vue @@ -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; 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" /> + @@ -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..9cf79b9ba 100644 --- a/app/components/Package/VersionDistribution.vue +++ b/app/components/Package/VersionDistribution.vue @@ -132,12 +132,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 +167,10 @@ const chartConfig = computed(() => { loadFile(url, buildExportFilename('svg')) URL.revokeObjectURL(url) }, + // altCopy: ({ dataset: dst, config: cfg }: { dataset: Array; config: VueUiXyConfig}) => { + // // TODO: implement a reusable copy-alt-text-to-clipboard feature based on the dataset & configuration + // console.log({ dst, cfg}) + // } }, }, grid: { @@ -243,6 +249,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 +672,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; } } 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)