chore: add generic type annotations to chart components (#1615)

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

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, 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,9 @@ const chartConfig = computed(() => {
             loadFile(url, buildExportFilename('csv'))
             URL.revokeObjectURL(url)
           },
-          svg: ({ blob }: { blob: Blob }) => {
+          svg: args => {
+            const blob = args?.blob
+            if (!blob) return
             const url = URL.createObjectURL(blob)
             loadFile(url, buildExportFilename('svg'))
             URL.revokeObjectURL(url)
@@ -1510,10 +1515,9 @@ const chartConfig = computed(() => {
         borderColor: 'transparent',
         backdropFilter: false,
         backgroundColor: 'transparent',
-        customFormat: ({ datapoint }: { datapoint: Record<string, any> | any[] }) => {
-          if (!datapoint || pending.value) return ''
+        customFormat: ({ datapoint: items }) => {
+          if (!items || pending.value) return ''
 
-          const items = Array.isArray(datapoint) ? datapoint : [datapoint[0]]
           const hasMultipleItems = items.length > 1
 
           const rows = items

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,9 @@ const chartConfig = computed(() => {
             loadFile(url, buildExportFilename('csv'))
             URL.revokeObjectURL(url)
           },
-          svg: ({ blob }: { blob: Blob }) => {
+          svg: args => {
+            const blob = args?.blob
+            if (!blob) return
             const url = URL.createObjectURL(blob)
             loadFile(url, buildExportFilename('svg'))
             URL.revokeObjectURL(url)
@@ -277,8 +273,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 +324,6 @@ const chartConfig = computed(() => {
         },
       },
     },
-    table: {
-      show: false,
-    },
   }
 })
 </script>
@@ -447,7 +439,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 +455,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 +622,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/Versions.vue

@@ -1077,7 +1077,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
     <!-- Avoids CLS when the dialog has transitioned -->
     <div
       v-if="!hasDistributionModalTransitioned"
-      class="w-full aspect-[272/609] sm:aspect-[718/571]"
+      class="w-full aspect-[272/609] sm:aspect-[718/592.67]"
     />
   </PackageChartModal>
 </template>

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,

package.json

@@ -110,7 +110,7 @@
     "vite-plugin-pwa": "1.2.0",
     "vite-plus": "0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab",
     "vue": "3.5.28",
-    "vue-data-ui": "3.15.5"
+    "vue-data-ui": "3.15.6"
   },
   "devDependencies": {
     "@e18e/eslint-plugin": "0.2.0",