From 678afa10fb7b8c1022f3bf9dbbe205a78bc3160d Mon Sep 17 00:00:00 2001 From: graphieros Date: Sun, 22 Feb 2026 10:50:43 +0100 Subject: [PATCH 1/7] chore: bump vue-data-ui from 3.15.0 to 3.15.5 --- package.json | 2 +- pnpm-lock.yaml | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index f1668a7ae..c42235153 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.28", - "vue-data-ui": "3.15.0" + "vue-data-ui": "3.15.5" }, "devDependencies": { "@e18e/eslint-plugin": "0.1.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 23e69253d..c2b4416a0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -201,8 +201,8 @@ importers: specifier: 3.5.28 version: 3.5.28(typescript@5.9.3) vue-data-ui: - specifier: 3.15.0 - version: 3.15.0(vue@3.5.28(typescript@5.9.3)) + specifier: 3.15.5 + version: 3.15.5(vue@3.5.28(typescript@5.9.3)) devDependencies: '@e18e/eslint-plugin': specifier: 0.1.4 @@ -9497,8 +9497,8 @@ packages: vue-component-type-helpers@3.2.4: resolution: {integrity: sha512-05lR16HeZDcDpB23ku5b5f1fBOoHqFnMiKRr2CiEvbG5Ux4Yi0McmQBOET0dR0nxDXosxyVqv67q6CzS3AK8rw==} - vue-data-ui@3.15.0: - resolution: {integrity: sha512-uT500ijPaeFO5Qk/zn7Uv5+DyDdH5cerAK2GB3foyws4jgB6HjBWFcs9lDJkX0AfRT/HSGYo3/sYY83KxqACQQ==} + vue-data-ui@3.15.5: + resolution: {integrity: sha512-3rQMyocXuVbt55krbINdx2h//TeDt1jKd4u1Mgb+RLba3jPhh6Ci4kbMWL1VyFaLDl10Ns51IUnTLpmkV7ltww==} peerDependencies: jspdf: '>=3.0.1' vue: '>=3.3.0' @@ -21151,7 +21151,7 @@ snapshots: vue-component-type-helpers@3.2.4: {} - vue-data-ui@3.15.0(vue@3.5.28(typescript@5.9.3)): + vue-data-ui@3.15.5(vue@3.5.28(typescript@5.9.3)): dependencies: vue: 3.5.28(typescript@5.9.3) From e16dd25d5790f2f8f578cd50b5e0272eb49dffe6 Mon Sep 17 00:00:00 2001 From: graphieros Date: Sun, 22 Feb 2026 10:55:31 +0100 Subject: [PATCH 2/7] feat: apply subtle path gradient in dark mode --- app/components/Package/TrendsChart.vue | 60 ++++++++++---------------- 1 file changed, 23 insertions(+), 37 deletions(-) diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue index 58301fd7a..05a8658fd 100644 --- a/app/components/Package/TrendsChart.vue +++ b/app/components/Package/TrendsChart.vue @@ -201,59 +201,45 @@ function formatXyDataset( dataset: EvolutionData, seriesName: string, ): { dataset: VueUiXyDatasetItem[] | null; dates: number[] } { + const baseColor = accent.value + const lightColor = isDarkMode.value && baseColor ? lightenOklch(baseColor, 0.618) : undefined + + // Subtle path gradient applied in dark mode only + const temperatureColors = + isDarkMode.value && typeof baseColor === 'string' && typeof lightColor === 'string' + ? [lightColor, baseColor] + : undefined + + const datasetItem: VueUiXyDatasetItem = { + name: seriesName, + type: 'line', + series: dataset.map(d => d.value), + color: accent.value, + temperatureColors, + useArea: true, + } + if (selectedGranularity === 'weekly' && isWeeklyDataset(dataset)) { return { - dataset: [ - { - name: seriesName, - type: 'line', - series: dataset.map(d => d.value), - color: accent.value, - useArea: true, - }, - ], + dataset: [datasetItem], dates: dataset.map(d => d.timestampEnd), } } if (selectedGranularity === 'daily' && isDailyDataset(dataset)) { return { - dataset: [ - { - name: seriesName, - type: 'line', - series: dataset.map(d => d.value), - color: accent.value, - useArea: true, - }, - ], + dataset: [datasetItem], dates: dataset.map(d => d.timestamp), } } if (selectedGranularity === 'monthly' && isMonthlyDataset(dataset)) { return { - dataset: [ - { - name: seriesName, - type: 'line', - series: dataset.map(d => d.value), - color: accent.value, - useArea: true, - }, - ], + dataset: [datasetItem], dates: dataset.map(d => d.timestamp), } } if (selectedGranularity === 'yearly' && isYearlyDataset(dataset)) { return { - dataset: [ - { - name: seriesName, - type: 'line', - series: dataset.map(d => d.value), - color: accent.value, - useArea: true, - }, - ], + dataset: [datasetItem], dates: dataset.map(d => d.timestamp), } } @@ -1529,7 +1515,7 @@ const chartConfig = computed(() => { backdropFilter: false, backgroundColor: 'transparent', customFormat: ({ datapoint }: { datapoint: Record | any[] }) => { - if (!datapoint) return '' + if (!datapoint || pending.value) return '' const items = Array.isArray(datapoint) ? datapoint : [datapoint[0]] const hasMultipleItems = items.length > 1 From 50eeef7896ade6d2c66624e879fcd2a6b22f709d Mon Sep 17 00:00:00 2001 From: graphieros Date: Sun, 22 Feb 2026 10:56:07 +0100 Subject: [PATCH 3/7] fix: apply appropriate gradient on bars --- app/components/Package/VersionDistribution.vue | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue index 91e7ba3c5..062eb1e25 100644 --- a/app/components/Package/VersionDistribution.vue +++ b/app/components/Package/VersionDistribution.vue @@ -212,7 +212,7 @@ const chartConfig = computed(() => { backgroundColor: 'transparent', customFormat: (params: TooltipParams) => { const { datapoint, absoluteIndex, bars } = params - if (!datapoint) return '' + if (!datapoint || pending.value) return '' // Use absoluteIndex to get the correct version from chartDataset const index = Number(absoluteIndex) @@ -496,11 +496,12 @@ const endDate = computed(() => { /> - -