fix: bump vue-data-ui and impacts (#1568)

Author: graphieros

app/components/Package/TrendsChart.vue

@@ -3,7 +3,7 @@ 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'
-import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch } from '~/utils/colors'
+import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch, lightenOklch } from '~/utils/colors'
 import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
 import { drawNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
 import type { RepoRef } from '#shared/utils/git-providers'
@@ -201,59 +201,41 @@ function formatXyDataset(
   dataset: EvolutionData,
   seriesName: string,
 ): { dataset: VueUiXyDatasetItem[] | null; dates: number[] } {
+  const lightColor = isDarkMode.value ? lightenOklch(accent.value, 0.618) : undefined
+
+  // Subtle path gradient applied in dark mode only
+  const temperatureColors = lightColor ? [lightColor, accent.value] : 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 +1511,7 @@ const chartConfig = computed(() => {
         backdropFilter: false,
         backgroundColor: 'transparent',
         customFormat: ({ datapoint }: { datapoint: Record<string, any> | any[] }) => {
-          if (!datapoint) return ''
+          if (!datapoint || pending.value) return ''
 
           const items = Array.isArray(datapoint) ? datapoint : [datapoint[0]]
           const hasMultipleItems = items.length > 1

app/components/Package/VersionDistribution.vue

@@ -8,7 +8,7 @@ import type {
 } from 'vue-data-ui'
 import { useElementSize } from '@vueuse/core'
 import { useCssVariables } from '~/composables/useColors'
-import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch } from '~/utils/colors'
+import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch, lightenHex } from '~/utils/colors'
 import {
   drawSvgPrintLegend,
   drawNpmxLogoAndTaglineWatermark,
@@ -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(() => {
               />
             </template>
 
-            <!-- Subtle gradient applied for area charts -->
-            <template #area-gradient="{ series: chartModalSeries, id: gradientId }">
-              <linearGradient :id="gradientId" x1="0" x2="0" y1="0" y2="1">
-                <stop offset="0%" :stop-color="chartModalSeries.color" stop-opacity="0.2" />
-                <stop offset="100%" :stop-color="colors.bg" stop-opacity="0" />
+            <!-- Custom bar gradient based on the series color -->
+            <template #bar-gradient="{ series, positiveId }">
+              <linearGradient :id="positiveId" x1="0" x2="0" y1="0" y2="1">
+                <!-- vue-data-ui exposes hex-normalized colors -->
+                <stop offset="0%" :stop-color="lightenHex(series.color, 0.618)" />
+                <stop offset="100%" :stop-color="series.color" stop-opacity="0.618" />
               </linearGradient>
             </template>
 

app/components/Package/WeeklyDownloadStats.vue

@@ -231,7 +231,7 @@ const config = computed(() => {
           easing: 'ease-in-out',
           trail: {
             show: true,
-            length: 20,
+            length: 30,
             opacity: 0.75,
           },
         },

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",