chore: use vue-data-ui generic type annotations

Author: graphieros

app/components/Package/TrendsChart.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { VueUiXyDatasetItem } from 'vue-data-ui'
+import type { VueUiXyConfig, VueUiXyDatapointItem, 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'
@@ -1404,9 +1404,9 @@ function drawSvgPrintLegend(svg: Record<string, any>) {
 }
 
 // VueUiXy chart component configuration
-const chartConfig = computed(() => {
+const chartConfig = computed<VueUiXyConfig>(() => {
   return {
-    theme: isDarkMode.value ? 'dark' : 'default',
+    theme: isDarkMode.value ? 'dark' : '',
     chart: {
       height: isMobile.value ? 950 : 600,
       backgroundColor: colors.value.bg,
@@ -1428,10 +1428,13 @@ const chartConfig = computed(() => {
           altCopy: undefined, // TODO: set to proper translation key
         },
         callbacks: {
-          img: ({ imageUri }: { imageUri: string }) => {
+          img: args => {
+            const imageUri = args?.imageUri
+            if (!imageUri) return
             loadFile(imageUri, buildExportFilename('png'))
           },
-          csv: (csvStr: string) => {
+          csv: csvStr => {
+            if (!csvStr) return
             const PLACEHOLDER_CHAR = '\0'
             const multilineDateTemplate = $t('package.trends.date_range_multiline', {
               start: PLACEHOLDER_CHAR,
@@ -1448,7 +1451,7 @@ const chartConfig = computed(() => {
             loadFile(url, buildExportFilename('csv'))
             URL.revokeObjectURL(url)
           },
-          svg: ({ blob }: { blob: Blob }) => {
+          svg: ({ blob }) => {
             const url = URL.createObjectURL(blob)
             loadFile(url, buildExportFilename('svg'))
             URL.revokeObjectURL(url)
@@ -1510,7 +1513,7 @@ const chartConfig = computed(() => {
         borderColor: 'transparent',
         backdropFilter: false,
         backgroundColor: 'transparent',
-        customFormat: ({ datapoint }: { datapoint: Record<string, any> | any[] }) => {
+        customFormat: ({ datapoint }) => {
           if (!datapoint || pending.value) return ''
 
           const items = Array.isArray(datapoint) ? datapoint : [datapoint[0]]

app/components/Package/VersionDistribution.vue

@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import { VueUiXy } from 'vue-data-ui/vue-ui-xy'
-import {
-  type VueUiXyDatasetItem,
-  type VueUiXyDatasetBarItem,
-  type VueUiXyDatapointItem,
-  type MinimalCustomFormatParams,
-} from 'vue-data-ui'
+import { type VueUiXyDatasetItem, type VueUiXyConfig } from 'vue-data-ui'
 import { useElementSize } from '@vueuse/core'
 import { useCssVariables } from '~/composables/useColors'
 import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch, lightenHex } from '~/utils/colors'
@@ -15,10 +10,6 @@ import {
 } from '~/composables/useChartWatermark'
 import TooltipApp from '~/components/Tooltip/App.vue'
 
-type TooltipParams = MinimalCustomFormatParams<VueUiXyDatapointItem[]> & {
-  bars: VueUiXyDatasetBarItem[]
-}
-
 const props = defineProps<{
   packageName: string
   inModal?: boolean
@@ -176,7 +167,7 @@ const hasMinimap = computed<boolean>(() => {
   return series.length > 6
 })
 
-const chartConfig = computed(() => {
+const chartConfig = computed<VueUiXyConfig>(() => {
   return {
     theme: isDarkMode.value ? 'dark' : '',
     chart: {
@@ -209,10 +200,13 @@ const chartConfig = computed(() => {
           altCopy: undefined, // TODO: set to proper translation key
         },
         callbacks: {
-          img: ({ imageUri }: { imageUri: string }) => {
+          img: args => {
+            const imageUri = args?.imageUri
+            if (!imageUri) return
             loadFile(imageUri, buildExportFilename('png'))
           },
-          csv: (csvStr: string) => {
+          csv: csvStr => {
+            if (!csvStr) return
             const PLACEHOLDER_CHAR = '\0'
             const multilineDateTemplate = $t('package.trends.date_range_multiline', {
               start: PLACEHOLDER_CHAR,
@@ -229,7 +223,7 @@ const chartConfig = computed(() => {
             loadFile(url, buildExportFilename('csv'))
             URL.revokeObjectURL(url)
           },
-          svg: ({ blob }: { blob: Blob }) => {
+          svg: ({ blob }) => {
             const url = URL.createObjectURL(blob)
             loadFile(url, buildExportFilename('svg'))
             URL.revokeObjectURL(url)
@@ -277,8 +271,7 @@ const chartConfig = computed(() => {
         borderColor: 'transparent',
         backdropFilter: false,
         backgroundColor: 'transparent',
-        customFormat: (params: TooltipParams) => {
-          const { datapoint, absoluteIndex, bars } = params
+        customFormat: ({ datapoint, absoluteIndex, bars }) => {
           if (!datapoint || pending.value) return ''
 
           // Use absoluteIndex to get the correct version from chartDataset
@@ -329,9 +322,6 @@ const chartConfig = computed(() => {
         },
       },
     },
-    table: {
-      show: false,
-    },
   }
 })
 </script>
@@ -447,7 +437,7 @@ const chartConfig = computed(() => {
       role="region"
       aria-labelledby="version-distribution-title"
       class="relative"
-      :class="isMobile ? 'min-h-[260px]' : 'min-h-[400px]'"
+      :class="isMobile ? 'min-h-[260px]' : 'min-h-[520px]'"
     >
       <!-- Chart content -->
       <ClientOnly v-if="xyDataset.length > 0 && !error">
@@ -463,6 +453,16 @@ const chartConfig = computed(() => {
                 v-if="svg.isPrintingSvg || svg.isPrintingImg"
                 v-html="drawNpmxLogoAndTaglineWatermark(svg, watermarkColors, $t, 'bottom')"
               />
+
+              <!-- Overlay covering the chart area to hide line resizing when switching granularities recalculates VueUiXy scaleMax when estimation lines are necessary -->
+              <rect
+                v-if="pending"
+                :x="svg.drawingArea.left"
+                :y="svg.drawingArea.top - 12"
+                :width="svg.drawingArea.width + 12"
+                :height="svg.drawingArea.height + 48"
+                :fill="colors.bg"
+              />
             </template>
 
             <!-- Custom bar gradient based on the series color -->
@@ -620,21 +620,6 @@ const chartConfig = computed(() => {
 :deep(.vue-ui-xy) svg rect {
   transition: none !important;
 }
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.chart-container {
-  animation: fadeInUp 350ms cubic-bezier(0.4, 0, 0.2, 1);
-}
 </style>
 
 <style>

app/components/Package/WeeklyDownloadStats.vue

@@ -4,6 +4,7 @@ import { useCssVariables } from '~/composables/useColors'
 import type { WeeklyDataPoint } from '~/types/chart'
 import { OKLCH_NEUTRAL_FALLBACK, lightenOklch } from '~/utils/colors'
 import type { RepoRef } from '#shared/utils/git-providers'
+import type { VueUiSparklineConfig, VueUiSparklineDatasetItem } from 'vue-data-ui'
 
 const props = defineProps<{
   packageName: string
@@ -176,7 +177,7 @@ watch(
   () => loadWeeklyDownloads(),
 )
 
-const dataset = computed(() =>
+const dataset = computed<VueUiSparklineDatasetItem[]>(() =>
   weeklyDownloads.value.map(d => ({
     value: d?.value ?? 0,
     period: $t('package.trends.date_range', {
@@ -188,7 +189,7 @@ const dataset = computed(() =>
 
 const lastDatapoint = computed(() => dataset.value.at(-1)?.period ?? '')
 
-const config = computed(() => {
+const config = computed<VueUiSparklineConfig>(() => {
   return {
     theme: 'dark',
     /**
@@ -234,7 +235,7 @@ const config = computed(() => {
           show: hasSparklineAnimation.value, // the pulse will not show if prefers-reduced-motion (enforced by vue-data-ui)
           loop: true, // runs only once if false
           radius: 1.5,
-          color: pulseColor.value,
+          color: pulseColor.value!,
           easing: 'ease-in-out',
           trail: {
             show: true,
@@ -248,7 +249,7 @@ const config = computed(() => {
         stroke: isDarkMode.value ? 'oklch(0.985 0 0)' : 'oklch(0.145 0 0)',
       },
       title: {
-        text: lastDatapoint.value,
+        text: String(lastDatapoint.value),
         fontSize: 12,
         color: colors.value.fgSubtle,
         bold: false,