feat: add charts to compare page (#846)

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

app/components/Compare/LineChart.vue

···
+<script setup lang="ts">
+import DownloadAnalytics from '../Package/DownloadAnalytics.vue'
+
+const { packages } = defineProps<{
+  packages: string[]
+}>()
+</script>
+
+<template>
+  <div class="font-mono">
+    <DownloadAnalytics :package-names="packages" :in-modal="false" />
+  </div>
+</template>

app/components/Package/DownloadAnalytics.vue

···
 import { useDebounceFn, useElementSize } from '@vueuse/core'
 import { useCssVariables } from '~/composables/useColors'
 import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch } from '~/utils/colors'
+import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
 
 const props = defineProps<{
-  weeklyDownloads: WeeklyDownloadPoint[]
+  // For single package downloads history
+  weeklyDownloads?: WeeklyDownloadPoint[]
   inModal?: boolean
-  packageName: string
-  createdIso: string | null
+
+  /**
+   * Backward compatible single package mode.
+   * Used when `weeklyDownloads` is provided.
+   */
+  packageName?: string
+
+  /**
+   * Multi-package mode.
+   * Used when `weeklyDownloads` is not provided.
+   */
+  packageNames?: string[]
+  createdIso?: string | null
 }>()
+
+const shouldFetch = computed(() => true)
 
 const { locale } = useI18n()
 const { accentColors, selectedAccentColor } = useAccentColor()
···
 
 const { width } = useElementSize(rootEl)
 
-onMounted(() => {
+onMounted(async () => {
   rootEl.value = document.documentElement
   resolvedMode.value = colorMode.value === 'dark' ? 'dark' : 'light'
+
+  initDateRangeFromWeekly()
+  initDateRangeForMultiPackageWeekly52()
+  initDateRangeFallbackClient()
+
+  await nextTick()
+  isMounted.value = true
+
+  loadNow()
 })
 
 const { colors } = useCssVariables(
···
   {
     element: rootEl,
     watchHtmlAttributes: true,
-    watchResize: false, // set to true only if a var changes color on resize
+    watchResize: false,
   },
 )
 
···
 })
 
 const mobileBreakpointWidth = 640
-
-const isMobile = computed(() => {
-  return width.value > 0 && width.value < mobileBreakpointWidth
-})
+const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpointWidth)
 
 type ChartTimeGranularity = 'daily' | 'weekly' | 'monthly' | 'yearly'
 type EvolutionData =
···
 function formatXyDataset(
   selectedGranularity: ChartTimeGranularity,
   dataset: EvolutionData,
+  seriesName: string,
 ): { dataset: VueUiXyDatasetItem[] | null; dates: number[] } {
   if (selectedGranularity === 'weekly' && isWeeklyDataset(dataset)) {
     return {
       dataset: [
         {
-          name: props.packageName,
+          name: seriesName,
           type: 'line',
           series: dataset.map(d => d.downloads),
           color: accent.value,
···
     return {
       dataset: [
         {
-          name: props.packageName,
+          name: seriesName,
           type: 'line',
           series: dataset.map(d => d.downloads),
           color: accent.value,
···
     return {
       dataset: [
         {
-          name: props.packageName,
+          name: seriesName,
           type: 'line',
           series: dataset.map(d => d.downloads),
           color: accent.value,
···
     return {
       dataset: [
         {
-          name: props.packageName,
+          name: seriesName,
           type: 'line',
           series: dataset.map(d => d.downloads),
           color: accent.value,
···
   return { dataset: null, dates: [] }
 }
 
+function extractSeriesPoints(
+  selectedGranularity: ChartTimeGranularity,
+  dataset: EvolutionData,
+): Array<{ timestamp: number; downloads: number }> {
+  if (selectedGranularity === 'weekly' && isWeeklyDataset(dataset)) {
+    return dataset.map(d => ({ timestamp: d.timestampEnd, downloads: d.downloads }))
+  }
+  if (selectedGranularity === 'daily' && isDailyDataset(dataset)) {
+    return dataset.map(d => ({ timestamp: d.timestamp, downloads: d.downloads }))
+  }
+  if (selectedGranularity === 'monthly' && isMonthlyDataset(dataset)) {
+    return dataset.map(d => ({ timestamp: d.timestamp, downloads: d.downloads }))
+  }
+  if (selectedGranularity === 'yearly' && isYearlyDataset(dataset)) {
+    return dataset.map(d => ({ timestamp: d.timestamp, downloads: d.downloads }))
+  }
+  return []
+}
+
 function toIsoDateOnly(value: string): string {
   return value.slice(0, 10)
 }
-
 function isValidIsoDateOnly(value: string): boolean {
   return /^\d{4}-\d{2}-\d{2}$/.test(value)
 }
-
 function safeMin(a: string, b: string): string {
   return a.localeCompare(b) <= 0 ? a : b
 }
-
 function safeMax(a: string, b: string): string {
   return a.localeCompare(b) >= 0 ? a : b
 }
 
 /**
- * Two-phase state:
- * - selectedGranularity: immediate UI
- * - displayedGranularity: only updated once data is ready
+ * Multi-package mode detection:
+ * packageNames has entries, and packageName is not set.
  */
+const isMultiPackageMode = computed(() => {
+  const names = (props.packageNames ?? []).map(n => String(n).trim()).filter(Boolean)
+  const single = String(props.packageName ?? '').trim()
+  return names.length > 0 && !single
+})
+
+const effectivePackageNames = computed<string[]>(() => {
+  if (isMultiPackageMode.value)
+    return (props.packageNames ?? []).map(n => String(n).trim()).filter(Boolean)
+  const single = String(props.packageName ?? '').trim()
+  return single ? [single] : []
+})
+
+const xAxisLabel = computed(() => {
+  if (!isMultiPackageMode.value) return props.packageName ?? ''
+  const names = effectivePackageNames.value
+  if (names.length === 1) return names[0]
+  return 'packages'
+})
+
 const selectedGranularity = shallowRef<ChartTimeGranularity>('weekly')
 const displayedGranularity = shallowRef<ChartTimeGranularity>('weekly')
 
-/**
- * Date range inputs.
- * They are initialized from the current effective range:
- * - weekly: from weeklyDownloads first -> weekStart/weekEnd
- * - fallback: last 30 days ending yesterday (client-side)
- */
 const startDate = shallowRef<string>('') // YYYY-MM-DD
 const endDate = shallowRef<string>('') // YYYY-MM-DD
 const hasUserEditedDates = shallowRef(false)
···
   if (!endDate.value) endDate.value = end
 }
 
+function toUtcDateOnly(date: Date): string {
+  return date.toISOString().slice(0, 10)
+}
+function addUtcDays(date: Date, days: number): Date {
+  const next = new Date(date)
+  next.setUTCDate(next.getUTCDate() + days)
+  return next
+}
+function initDateRangeForMultiPackageWeekly52() {
+  if (hasUserEditedDates.value) return
+  if (!import.meta.client) return
+  if (!isMultiPackageMode.value) return
+  if (startDate.value && endDate.value) return
+
+  const today = new Date()
+  const yesterday = new Date(
+    Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate() - 1),
+  )
+
+  endDate.value = toUtcDateOnly(yesterday)
+  startDate.value = toUtcDateOnly(addUtcDays(yesterday, -(52 * 7) + 1))
+}
+
 watch(
-  () => props.weeklyDownloads?.length,
+  () => (props.packageNames ?? []).length,
   () => {
-    initDateRangeFromWeekly()
-    initDateRangeFallbackClient()
+    initDateRangeForMultiPackageWeekly52()
   },
   { immediate: true },
 )
···
 watch(
   [startDate, endDate],
   () => {
-    // mark edited only when both have some value (prevents init watchers from flagging too early)
     if (startDate.value || endDate.value) hasUserEditedDates.value = true
     setInitialRangeIfEmpty()
   },
···
   return startDate.value !== initialStartDate.value || endDate.value !== initialEndDate.value
 })
 
+function resetDateRange() {
+  hasUserEditedDates.value = false
+  startDate.value = ''
+  endDate.value = ''
+  initDateRangeFromWeekly()
+  initDateRangeForMultiPackageWeekly52()
+  initDateRangeFallbackClient()
+}
+
 const options = shallowRef<
   | { granularity: 'day'; startDate?: string; endDate?: string }
   | { granularity: 'week'; weeks: number; startDate?: string; endDate?: string }
···
   return next
 }
 
+const { fetchPackageDownloadEvolution } = useCharts()
+
+const evolution = shallowRef<EvolutionData>(props.weeklyDownloads ?? [])
+const evolutionsByPackage = shallowRef<Record<string, EvolutionData>>({})
+const pending = shallowRef(false)
+
+const isMounted = shallowRef(false)
+let requestToken = 0
+
 watch(
   [selectedGranularity, startDate, endDate],
   ([granularityValue]) => {
···
     else if (granularityValue === 'monthly')
       options.value = applyDateRange({ granularity: 'month', months: 24 })
     else options.value = applyDateRange({ granularity: 'year' })
-  },
-  { immediate: true },
-)
 
-const { fetchPackageDownloadEvolution } = useCharts()
+    // Do not set pending during initial setup
+    if (!isMounted.value) return
 
-const evolution = shallowRef<EvolutionData>(props.weeklyDownloads)
-const pending = shallowRef(false)
+    const packageNames = effectivePackageNames.value
+    if (!import.meta.client || !shouldFetch.value || !packageNames.length) {
+      pending.value = false
+      return
+    }
 
-let lastRequestKey = ''
-let requestToken = 0
+    const o = options.value as any
+    const hasExplicitRange = Boolean(o.startDate || o.endDate)
 
-const debouncedLoad = useDebounceFn(() => {
-  load()
-}, 1000)
+    // Do not show loading when weeklyDownloads is already provided
+    if (
+      !isMultiPackageMode.value &&
+      o.granularity === 'week' &&
+      props.weeklyDownloads?.length &&
+      !hasExplicitRange
+    ) {
+      pending.value = false
+      return
+    }
 
-async function load() {
+    pending.value = true
+  },
+  { immediate: true },
+)
+
+async function loadNow() {
   if (!import.meta.client) return
-  if (!props.inModal) return
+  if (!shouldFetch.value) return
 
-  const o = options.value
-  const extraBase =
-    o.granularity === 'week'
-      ? `w:${String(o.weeks ?? '')}`
-      : o.granularity === 'month'
-        ? `m:${String(o.months ?? '')}`
-        : ''
+  const packageNames = effectivePackageNames.value
+  if (!packageNames.length) return
 
-  const startKey = (o as any).startDate ?? ''
-  const endKey = (o as any).endDate ?? ''
-  const requestKey = `${props.packageName}|${props.createdIso ?? ''}|${o.granularity}|${extraBase}|${startKey}|${endKey}`
+  const currentToken = ++requestToken
+  pending.value = true
 
-  if (requestKey === lastRequestKey) return
-  lastRequestKey = requestKey
+  try {
+    if (isMultiPackageMode.value) {
+      const settled = await Promise.allSettled(
+        packageNames.map(async pkg => {
+          const result = await fetchPackageDownloadEvolution(
+            pkg,
+            props.createdIso ?? null,
+            options.value,
+          )
+          return { pkg, result: (result ?? []) as EvolutionData }
+        }),
+      )
 
-  const hasExplicitRange = Boolean((o as any).startDate || (o as any).endDate)
-  if (o.granularity === 'week' && props.weeklyDownloads?.length && !hasExplicitRange) {
-    evolution.value = props.weeklyDownloads
-    pending.value = false
-    displayedGranularity.value = 'weekly'
-    return
-  }
+      if (currentToken !== requestToken) return
 
-  pending.value = true
-  const currentToken = ++requestToken
+      const next: Record<string, EvolutionData> = {}
+      for (const entry of settled) {
+        if (entry.status === 'fulfilled') next[entry.value.pkg] = entry.value.result
+      }
 
-  try {
-    const result = await fetchPackageDownloadEvolution(
-      () => props.packageName,
-      () => props.createdIso,
-      () => o as any, // FIXME: any
-    )
+      evolutionsByPackage.value = next
+      displayedGranularity.value = selectedGranularity.value
+      return
+    }
 
+    const pkg = packageNames[0] ?? ''
+    if (!pkg) {
+      evolution.value = []
+      displayedGranularity.value = selectedGranularity.value
+      return
+    }
+
+    const o = options.value
+    const hasExplicitRange = Boolean((o as any).startDate || (o as any).endDate)
+    if (o.granularity === 'week' && props.weeklyDownloads?.length && !hasExplicitRange) {
+      evolution.value = props.weeklyDownloads
+      displayedGranularity.value = 'weekly'
+      return
+    }
+
+    const result = await fetchPackageDownloadEvolution(pkg, props.createdIso ?? null, options.value)
     if (currentToken !== requestToken) return
 
-    evolution.value = (result as EvolutionData) ?? []
+    evolution.value = (result ?? []) as EvolutionData
     displayedGranularity.value = selectedGranularity.value
   } catch {
     if (currentToken !== requestToken) return
-    evolution.value = []
+    if (isMultiPackageMode.value) evolutionsByPackage.value = {}
+    else evolution.value = []
   } finally {
-    if (currentToken === requestToken) {
-      pending.value = false
-    }
+    if (currentToken === requestToken) pending.value = false
   }
 }
 
-watch(
-  () => props.inModal,
-  () => {
-    // modal open/close should be immediate
-    load()
-  },
-  { immediate: true },
-)
+const debouncedLoadNow = useDebounceFn(() => {
+  loadNow()
+}, 1000)
 
-watch(
-  () => [
-    props.packageName,
-    props.createdIso,
-    options.value.granularity,
-    (options.value as any).weeks,
-    (options.value as any).months,
-  ],
-  () => {
-    // changing package or granularity should be immediate
-    load()
-  },
-  { immediate: true },
-)
+const fetchTriggerKey = computed(() => {
+  const names = effectivePackageNames.value.join(',')
+  const o = options.value as any
+  return [
+    shouldFetch.value ? '1' : '0',
+    isMultiPackageMode.value ? 'M' : 'S',
+    names,
+    String(props.createdIso ?? ''),
+    String(o.granularity ?? ''),
+    String(o.weeks ?? ''),
+    String(o.months ?? ''),
+    String(o.startDate ?? ''),
+    String(o.endDate ?? ''),
+  ].join('|')
+})
 
 watch(
-  () => [(options.value as any).startDate, (options.value as any).endDate],
+  () => fetchTriggerKey.value,
   () => {
-    // date typing / picking should be debounced
-    debouncedLoad()
+    if (!import.meta.client) return
+    if (!isMounted.value) return
+    debouncedLoadNow()
   },
-  { immediate: true },
+  { flush: 'post' },
 )
 
-const effectiveData = computed<EvolutionData>(() => {
+const effectiveDataSingle = computed<EvolutionData>(() => {
   if (displayedGranularity.value === 'weekly' && props.weeklyDownloads?.length) {
     if (isWeeklyDataset(evolution.value) && evolution.value.length) return evolution.value
     return props.weeklyDownloads
···
 })
 
 const chartData = computed<{ dataset: VueUiXyDatasetItem[] | null; dates: number[] }>(() => {
-  return formatXyDataset(displayedGranularity.value, effectiveData.value)
+  if (!isMultiPackageMode.value) {
+    const pkg = effectivePackageNames.value[0] ?? props.packageName ?? ''
+    return formatXyDataset(displayedGranularity.value, effectiveDataSingle.value, pkg)
+  }
+
+  const names = effectivePackageNames.value
+  const granularity = displayedGranularity.value
+
+  const timestampSet = new Set<number>()
+  const pointsByPackage = new Map<string, Array<{ timestamp: number; downloads: number }>>()
+
+  for (const pkg of names) {
+    const data = evolutionsByPackage.value[pkg] ?? []
+    const points = extractSeriesPoints(granularity, data)
+    pointsByPackage.set(pkg, points)
+    for (const p of points) timestampSet.add(p.timestamp)
+  }
+
+  const dates = Array.from(timestampSet).sort((a, b) => a - b)
+  if (!dates.length) return { dataset: null, dates: [] }
+
+  const dataset: VueUiXyDatasetItem[] = names.map((pkg, index) => {
+    const points = pointsByPackage.get(pkg) ?? []
+    const map = new Map<number, number>()
+    for (const p of points) map.set(p.timestamp, p.downloads)
+
+    const series = dates.map(t => map.get(t) ?? 0)
+
+    const item: VueUiXyDatasetItem = { name: pkg, type: 'line', series } as VueUiXyDatasetItem
+
+    if (isListedFramework(pkg)) {
+      item.color = getFrameworkColor(pkg)
+    }
+    // Other packages default to built-in palette
+    return item
+  })
+
+  return { dataset, dates }
 })
 
 const formatter = ({ value }: { value: number }) => formatCompactNumber(value, { decimals: 1 })
···
 
 const datetimeFormatterOptions = computed(() => {
   return {
-    daily: {
-      year: 'yyyy-MM-dd',
-      month: 'yyyy-MM-dd',
-      day: 'yyyy-MM-dd',
-    },
-    weekly: {
-      year: 'yyyy-MM-dd',
-      month: 'yyyy-MM-dd',
-      day: 'yyyy-MM-dd',
-    },
-    monthly: {
-      year: 'MMM yyyy',
-      month: 'MMM yyyy',
-      day: 'MMM yyyy',
-    },
-    yearly: {
-      year: 'yyyy',
-      month: 'yyyy',
-      day: 'yyyy',
-    },
+    daily: { year: 'yyyy-MM-dd', month: 'yyyy-MM-dd', day: 'yyyy-MM-dd' },
+    weekly: { year: 'yyyy-MM-dd', month: 'yyyy-MM-dd', day: 'yyyy-MM-dd' },
+    monthly: { year: 'MMM yyyy', month: 'MMM yyyy', day: 'MMM yyyy' },
+    yearly: { year: 'yyyy', month: 'yyyy', day: 'yyyy' },
   }[selectedGranularity.value]
 })
 
+const sanitise = (value: string) =>
+  value
+    .replace(/^@/, '')
+    .replace(/[\\/:"*?<>|]/g, '-')
+    .replace(/\//g, '-')
+
+function buildExportFilename(extension: string): string {
+  const g = selectedGranularity.value
+  const range = `${startDate.value}_${endDate.value}`
+
+  if (!isMultiPackageMode.value) {
+    const name = effectivePackageNames.value[0] ?? props.packageName ?? 'package'
+    return `${sanitise(name)}-${g}_${range}.${extension}`
+  }
+
+  const names = effectivePackageNames.value
+  const label = names.length === 1 ? names[0] : names.join('_')
+  return `${sanitise(label ?? '')}-${g}_${range}.${extension}`
+}
+
 const config = computed(() => {
   return {
     theme: isDarkMode.value ? 'dark' : 'default',
     chart: {
       height: isMobile.value ? 950 : 600,
-      padding: {
-        bottom: 36,
-      },
+      padding: { bottom: 36 },
       userOptions: {
-        buttons: {
-          pdf: false,
-          labels: false,
-          fullscreen: false,
-          table: false,
-          tooltip: false,
-        },
+        buttons: { pdf: false, labels: false, fullscreen: false, table: false, tooltip: false },
         buttonTitles: {
           csv: $t('package.downloads.download_file', { fileType: 'CSV' }),
           img: $t('package.downloads.download_file', { fileType: 'PNG' }),
···
         },
         callbacks: {
           img: ({ imageUri }: { imageUri: string }) => {
-            loadFile(
-              imageUri,
-              `${props.packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.png`,
-            )
+            loadFile(imageUri, buildExportFilename('png'))
           },
           csv: (csvStr: string) => {
-            // Extract multiline date format template and replace newlines with spaces in CSV
-            // This ensures CSV compatibility by converting multiline date ranges to single-line format
             const PLACEHOLDER_CHAR = '\0'
             const multilineDateTemplate = $t('package.downloads.date_range_multiline', {
               start: PLACEHOLDER_CHAR,
···
                 .replaceAll(`\n${multilineDateTemplate}`, ` ${multilineDateTemplate}`),
             ])
             const url = URL.createObjectURL(blob)
-            loadFile(
-              url,
-              `${props.packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.csv`,
-            )
+            loadFile(url, buildExportFilename('csv'))
             URL.revokeObjectURL(url)
           },
           svg: ({ blob }: { blob: Blob }) => {
             const url = URL.createObjectURL(blob)
-            loadFile(
-              url,
-              `${props.packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.svg`,
-            )
+            loadFile(url, buildExportFilename('svg'))
             URL.revokeObjectURL(url)
           },
         },
···
             yLabel: $t('package.downloads.y_axis_label', {
               granularity: $t(`package.downloads.granularity_${selectedGranularity.value}`),
             }),
-            xLabel: props.packageName,
+            xLabel: isMultiPackageMode.value ? '' : xAxisLabel.value, // for multiple series, names are displayed in the chart's legend
             yLabelOffsetX: 12,
             fontSize: isMobile.value ? 32 : 24,
           },
···
           yAxis: {
             formatter,
             useNiceScale: true,
+            gap: 24, // vertical gap between individual series in stacked mode
           },
         },
       },
···
         backgroundColor: colors.value.bgElevated,
         color: colors.value.fg,
         fontSize: 16,
-        circleMarker: {
-          radius: 3,
-          color: colors.value.border,
-        },
+        circleMarker: { radius: 3, color: colors.value.border },
         useDefaultFormat: true,
         timeFormat: 'yyyy-MM-dd HH:mm:ss',
       },
-      highlighter: {
-        useLine: true,
-      },
-      legend: {
-        show: false, // As long as a single package is displayed
-      },
+      highlighter: { useLine: true },
+      legend: { show: false, position: 'top' },
       tooltip: {
-        teleportTo: '#chart-modal',
+        teleportTo: props.inModal ? '#chart-modal' : undefined,
         borderColor: 'transparent',
         backdropFilter: false,
         backgroundColor: 'transparent',
-        customFormat: ({ datapoint }: { datapoint: Record<string, any> }) => {
+        customFormat: ({ datapoint }: { datapoint: Record<string, any> | any[] }) => {
           if (!datapoint) return ''
-          const displayValue = formatter({ value: datapoint[0]?.value ?? 0 })
-          return `<div class="flex flex-col font-mono text-xs p-3 border border-border rounded-md bg-[var(--bg)]/10 backdrop-blur-md">
-          <span class="text-xl text-[var(--fg)]">${displayValue}</span>
-        </div>
-        `
+
+          const items = Array.isArray(datapoint) ? datapoint : [datapoint[0]]
+          const hasMultipleItems = items.length > 1
+
+          const rows = items
+            .map((d: any) => {
+              const label = String(d?.name ?? '').trim()
+              const raw = Number(d?.value ?? 0)
+              const v = formatter({ value: Number.isFinite(raw) ? raw : 0 })
+
+              if (!hasMultipleItems) {
+                // We don't need the name of the package in this case, since it is shown in the xAxis label
+                return `<div>
+                  <span class="text-base text-[var(--fg)] font-mono tabular-nums">${v}</span>
+                </div>`
+              }
+
+              return `<div class="grid grid-cols-[12px_minmax(0,1fr)_max-content] items-center gap-x-3">
+                <div class="w-3 h-3">
+                  <svg viewBox="0 0 2 2" class="w-full h-full">
+                    <rect x="0" y="0" width="2" height="2" rx="0.3" fill="${d.color}" />
+                  </svg>
+                </div>
+
+                <span class="text-[10px] uppercase tracking-wide text-[var(--fg)]/70 truncate">
+                  ${label}
+                </span>
+
+                <span class="text-base text-[var(--fg)] font-mono tabular-nums text-right">
+                  ${v}
+                </span>
+              </div>`
+            })
+            .join('')
+
+          return `<div class="font-mono text-xs p-3 border border-border rounded-md bg-[var(--bg)]/10 backdrop-blur-md">
+            <div class="${hasMultipleItems ? 'flex flex-col gap-2' : ''}">
+              ${rows}
+            </div>
+          </div>`
         },
       },
       zoom: {
···
 </script>
 
 <template>
-  <div class="w-full relative" id="download-analytics">
+  <div class="w-full relative" id="download-analytics" :aria-busy="pending ? 'true' : 'false'">
     <div class="w-full mb-4 flex flex-col gap-3">
-      <!-- Mobile: stack vertically, Desktop: horizontal -->
       <div class="flex flex-col sm:flex-row gap-3 sm:gap-2 sm:items-end">
-        <!-- Granularity -->
         <div class="flex flex-col gap-1 sm:shrink-0">
           <label
             for="granularity"
···
             <select
               id="granularity"
               v-model="selectedGranularity"
+              :disabled="pending"
               class="w-full px-2.5 py-1.75 bg-bg-subtle font-mono text-sm text-fg outline-none appearance-none focus-visible:outline-accent/70"
             >
               <option value="daily">{{ $t('package.downloads.granularity_daily') }}</option>
···
           </div>
         </div>
 
-        <!-- Date range inputs -->
         <div class="grid grid-cols-2 gap-2 flex-1">
           <div class="flex flex-col gap-1">
             <label
···
               <input
                 id="startDate"
                 v-model="startDate"
+                :disabled="pending"
                 type="date"
                 class="w-full min-w-0 bg-transparent font-mono text-sm text-fg outline-none [color-scheme:light] dark:[color-scheme:dark]"
               />
···
               <input
                 id="endDate"
                 v-model="endDate"
+                :disabled="pending"
                 type="date"
                 class="w-full min-w-0 bg-transparent font-mono text-sm text-fg outline-none [color-scheme:light] dark:[color-scheme:dark]"
               />
···
           </div>
         </div>
 
-        <!-- Reset button -->
         <button
           v-if="showResetButton"
           type="button"
           aria-label="Reset date range"
           class="self-end flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-accent/70 sm:mb-0"
-          @click="
-            () => {
-              hasUserEditedDates = false
-              startDate = ''
-              endDate = ''
-              initDateRangeFromWeekly()
-              initDateRangeFallbackClient()
-            }
-          "
+          @click="resetDateRange"
         >
           <span class="i-carbon:reset w-5 h-5" aria-hidden="true" />
         </button>
       </div>
     </div>
 
-    <ClientOnly v-if="inModal && chartData.dataset">
-      <VueUiXy :dataset="chartData.dataset" :config="config" class="[direction:ltr]">
-        <template #menuIcon="{ isOpen }">
-          <span v-if="isOpen" class="i-carbon:close w-6 h-6" aria-hidden="true" />
-          <span v-else class="i-carbon:overflow-menu-vertical w-6 h-6" aria-hidden="true" />
-        </template>
-        <template #optionCsv>
-          <span
-            class="i-carbon:csv w-6 h-6 text-fg-subtle"
-            style="pointer-events: none"
-            aria-hidden="true"
-          />
-        </template>
-        <template #optionImg>
-          <span
-            class="i-carbon:png w-6 h-6 text-fg-subtle"
-            style="pointer-events: none"
-            aria-hidden="true"
-          />
-        </template>
-        <template #optionSvg>
-          <span
-            class="i-carbon:svg w-6 h-6 text-fg-subtle"
-            style="pointer-events: none"
-            aria-hidden="true"
-          />
-        </template>
+    <h2 id="download-analytics-title" class="sr-only">
+      {{ $t('package.downloads.title') }}
+    </h2>
+
+    <div role="region" aria-labelledby="download-analytics-title">
+      <ClientOnly v-if="chartData.dataset">
+        <div>
+          <VueUiXy :dataset="chartData.dataset" :config="config" class="[direction:ltr]">
+            <!-- Custom legend for multiple series -->
+            <template v-if="isMultiPackageMode" #legend="{ legend }">
+              <div class="flex gap-4 flex-wrap justify-center">
+                <button
+                  v-for="datapoint in legend"
+                  :key="datapoint.name"
+                  :aria-pressed="datapoint.isSegregated"
+                  :aria-label="datapoint.name"
+                  type="button"
+                  class="flex gap-1 place-items-center"
+                  @click="datapoint.segregate()"
+                >
+                  <div class="h-3 w-3">
+                    <svg viewBox="0 0 2 2" class="w-full">
+                      <rect x="0" y="0" width="2" height="2" rx="0.3" :fill="datapoint.color" />
+                    </svg>
+                  </div>
+                  <span
+                    :style="{
+                      textDecoration: datapoint.isSegregated ? 'line-through' : undefined,
+                    }"
+                  >
+                    {{ datapoint.name }}
+                  </span>
+                </button>
+              </div>
+            </template>
+
+            <template #menuIcon="{ isOpen }">
+              <span v-if="isOpen" class="i-carbon:close w-6 h-6" aria-hidden="true" />
+              <span v-else class="i-carbon:overflow-menu-vertical w-6 h-6" aria-hidden="true" />
+            </template>
+            <template #optionCsv>
+              <span
+                class="i-carbon:csv w-6 h-6 text-fg-subtle"
+                style="pointer-events: none"
+                aria-hidden="true"
+              />
+            </template>
+            <template #optionImg>
+              <span
+                class="i-carbon:png w-6 h-6 text-fg-subtle"
+                style="pointer-events: none"
+                aria-hidden="true"
+              />
+            </template>
+            <template #optionSvg>
+              <span
+                class="i-carbon:svg w-6 h-6 text-fg-subtle"
+                style="pointer-events: none"
+                aria-hidden="true"
+              />
+            </template>
+
+            <template #annotator-action-close>
+              <span
+                class="i-carbon:close w-6 h-6 text-fg-subtle"
+                style="pointer-events: none"
+                aria-hidden="true"
+              />
+            </template>
+            <template #annotator-action-color="{ color }">
+              <span class="i-carbon:color-palette w-6 h-6" :style="{ color }" aria-hidden="true" />
+            </template>
+            <template #annotator-action-undo>
+              <span
+                class="i-carbon:undo w-6 h-6 text-fg-subtle"
+                style="pointer-events: none"
+                aria-hidden="true"
+              />
+            </template>
+            <template #annotator-action-redo>
+              <span
+                class="i-carbon:redo w-6 h-6 text-fg-subtle"
+                style="pointer-events: none"
+                aria-hidden="true"
+              />
+            </template>
+            <template #annotator-action-delete>
+              <span
+                class="i-carbon:trash-can w-6 h-6 text-fg-subtle"
+                style="pointer-events: none"
+                aria-hidden="true"
+              />
+            </template>
+            <template #optionAnnotator="{ isAnnotator }">
+              <span
+                v-if="isAnnotator"
+                class="i-carbon:edit-off w-6 h-6 text-fg-subtle"
+                style="pointer-events: none"
+                aria-hidden="true"
+              />
+              <span
+                v-else
+                class="i-carbon:edit w-6 h-6 text-fg-subtle"
+                style="pointer-events: none"
+                aria-hidden="true"
+              />
+            </template>
+          </VueUiXy>
+        </div>
 
-        <template #annotator-action-close>
-          <span
-            class="i-carbon:close w-6 h-6 text-fg-subtle"
-            style="pointer-events: none"
-            aria-hidden="true"
-          />
+        <template #fallback>
+          <div class="min-h-[260px]" />
         </template>
-        <template #annotator-action-color="{ color }">
-          <span class="i-carbon:color-palette w-6 h-6" :style="{ color }" aria-hidden="true" />
-        </template>
-        <template #annotator-action-undo>
-          <span
-            class="i-carbon:undo w-6 h-6 text-fg-subtle"
-            style="pointer-events: none"
-            aria-hidden="true"
-          />
-        </template>
-        <template #annotator-action-redo>
-          <span
-            class="i-carbon:redo w-6 h-6 text-fg-subtle"
-            style="pointer-events: none"
-            aria-hidden="true"
-          />
-        </template>
-        <template #annotator-action-delete>
-          <span
-            class="i-carbon:trash-can w-6 h-6 text-fg-subtle"
-            style="pointer-events: none"
-            aria-hidden="true"
-          />
-        </template>
-        <template #optionAnnotator="{ isAnnotator }">
-          <span
-            v-if="isAnnotator"
-            class="i-carbon:edit-off w-6 h-6 text-fg-subtle"
-            style="pointer-events: none"
-            aria-hidden="true"
-          />
-          <span
-            v-else
-            class="i-carbon:edit w-6 h-6 text-fg-subtle"
-            style="pointer-events: none"
-            aria-hidden="true"
-          />
-        </template>
-      </VueUiXy>
-      <template #fallback>
-        <div class="min-h-[260px]" />
-      </template>
-    </ClientOnly>
+      </ClientOnly>
+    </div>
 
-    <!-- Empty state when no chart data -->
     <div
-      v-if="inModal && !chartData.dataset && !pending"
+      v-if="shouldFetch && !chartData.dataset && !pending"
       class="min-h-[260px] flex items-center justify-center text-fg-subtle font-mono text-sm"
     >
       {{ $t('package.downloads.no_data') }}

app/pages/compare.vue

···
               :headers="gridHeaders"
             />
           </div>
+
+          <h2
+            id="comparison-heading"
+            class="text-xs text-fg-subtle uppercase tracking-wider mb-4 mt-10"
+          >
+            {{ $t('package.downloads.title') }}
+          </h2>
+
+          <CompareLineChart :packages />
         </div>
 
         <div v-else class="text-center py-12" role="alert">

app/pages/index.vue

···
 <script setup lang="ts">
 import { debounce } from 'perfect-debounce'
+import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks'
 
 const searchQuery = shallowRef('')
 const searchInputRef = useTemplateRef('searchInputRef')
 const { focused: isSearchFocused } = useFocus(searchInputRef)
-const frameworks = ref([
-  { name: 'nuxt', package: 'nuxt' },
-  { name: 'vue', package: 'vue' },
-  { name: 'nitro', package: 'nitro' },
-  { name: 'react', package: 'react' },
-  { name: 'svelte', package: 'svelte' },
-  { name: 'vite', package: 'vite' },
-  { name: 'next', package: 'next' },
-  { name: 'astro', package: 'astro' },
-  { name: 'typescript', package: 'typescript' },
-  { name: 'angular', package: '@angular/core' },
-])
 
 async function search() {
   const query = searchQuery.value.trim()
···
         style="animation-delay: 0.3s"
       >
         <ul class="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 list-none m-0 p-0">
-          <li v-for="framework in frameworks" :key="framework.name">
+          <li v-for="framework in SHOWCASED_FRAMEWORKS" :key="framework.name">
             <NuxtLink
               :to="{ name: 'package', params: { package: [framework.package] } }"
               class="link-subtle font-mono text-sm inline-flex items-center gap-2 group"

app/utils/frameworks.ts

···
+export type ShowcasedFramework = {
+  name: string
+  package: string
+  color: string
+}
+
+export const SHOWCASED_FRAMEWORKS = [
+  {
+    name: 'nuxt',
+    package: 'nuxt',
+    color: 'oklch(0.7862 0.192 155.63)',
+  },
+  { name: 'vue', package: 'vue', color: 'oklch(0.7025 0.132 160.37)' },
+  {
+    name: 'nitro',
+    package: 'nitro',
+    color: 'oklch(70.4% 0.191 22.216)',
+  },
+  {
+    name: 'react',
+    package: 'react',
+    color: 'oklch(0.832 0.1167 218.69)',
+  },
+  {
+    name: 'svelte',
+    package: 'svelte',
+    color: 'oklch(0.6917 0.1865 35.04)',
+  },
+  {
+    name: 'vite',
+    package: 'vite',
+    color: 'oklch(0.7484 0.1439 294.03)',
+  },
+  {
+    name: 'next',
+    package: 'next',
+    color: 'oklch(71.7% .1648 250.794)',
+  },
+  {
+    name: 'astro',
+    package: 'astro',
+    color: 'oklch(0.5295 0.2434 270.23)',
+  },
+  {
+    name: 'typescript',
+    package: 'typescript',
+    color: 'oklch(0.5671 0.1399 253.3)',
+  },
+  {
+    name: 'angular',
+    package: '@angular/core',
+    color: 'oklch(0.626 0.2663 310.4)',
+  },
+]
+
+export type FrameworkPackageName = (typeof SHOWCASED_FRAMEWORKS)[number]['package']
+
+export function getFrameworkColor(framework: FrameworkPackageName): string {
+  return SHOWCASED_FRAMEWORKS.find(f => f.package === framework)!.color
+}
+
+export function isListedFramework(name: string): name is FrameworkPackageName {
+  return SHOWCASED_FRAMEWORKS.some(f => f.package === name)
+}

package.json

···
     "vite-plugin-pwa": "1.2.0",
     "vite-plus": "0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab",
     "vue": "3.5.27",
-    "vue-data-ui": "3.14.3"
+    "vue-data-ui": "3.14.5"
   },
   "devDependencies": {
     "@intlify/core-base": "11.2.8",

pnpm-lock.yaml

···
         specifier: 3.5.27
         version: 3.5.27(typescript@5.9.3)
       vue-data-ui:
-        specifier: 3.14.3
-        version: 3.14.3(vue@3.5.27(typescript@5.9.3))
+        specifier: 3.14.5
+        version: 3.14.5(vue@3.5.27(typescript@5.9.3))
     devDependencies:
       '@intlify/core-base':
         specifier: 11.2.8
···
   vue-component-type-helpers@3.2.4:
     resolution: {integrity: sha512-05lR16HeZDcDpB23ku5b5f1fBOoHqFnMiKRr2CiEvbG5Ux4Yi0McmQBOET0dR0nxDXosxyVqv67q6CzS3AK8rw==}
 
-  vue-data-ui@3.14.3:
-    resolution: {integrity: sha512-cpRxBWVKep8sfFGDh88lsdRMirEher2661NZQm/W0Jlsox0sGSJWITyj8+rlQrYi822oVDdVnWq8l8cJ7g/0BA==}
+  vue-data-ui@3.14.5:
+    resolution: {integrity: sha512-VjRJAHvnb0NFqrz/hB8cG4bNnOVzO0J3kJ1lE9Ir3dMFKA37R1lEriu7Q4tlgkoFLmsvhV/wfan2iiLFCBYKWA==}
     peerDependencies:
       jspdf: '>=3.0.1'
       vue: '>=3.3.0'
···
 
   vue-component-type-helpers@3.2.4: {}
 
-  vue-data-ui@3.14.3(vue@3.5.27(typescript@5.9.3)):
+  vue-data-ui@3.14.5(vue@3.5.27(typescript@5.9.3)):
     dependencies:
       vue: 3.5.27(typescript@5.9.3)
 

test/nuxt/a11y.spec.ts

···
 import type { VueWrapper } from '@vue/test-utils'
 import 'axe-core'
 import type { AxeResults, RunOptions } from 'axe-core'
-import { afterEach, describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 
 // axe-core is a UMD module that exposes itself as window.axe in the browser
 declare const axe: {
···
   mountedContainers.length = 0
 })
 
+// VueUiXy is imported directly in <script setup>, so global stubs cannot override it.
+// We mock the module itself to prevent vue-data-ui from mounting charts during tests
+// (it relies on DOM measurements and causes runtime errors in Vitest / Playwright).
+// This render-function stub avoids the Vue runtime-compiler warning and keeps slots working.
+vi.mock('vue-data-ui/vue-ui-xy', () => {
+  return {
+    VueUiXy: defineComponent({
+      name: 'VueUiXy',
+      inheritAttrs: false,
+      setup(_, { attrs, slots }) {
+        return () =>
+          h('div', { ...attrs, 'data-test-id': 'vue-ui-xy-stub' }, slots.default?.() ?? [])
+      },
+    }),
+  }
+})
+
 // Import components from #components where possible
 // For server/client variants, we need to import directly to test the specific variant
 import {
···
   CompareFacetCard,
   CompareFacetRow,
   CompareFacetSelector,
+  CompareLineChart,
   ComparePackageSelector,
   DateTime,
   DependencyPathPopup,
···
   PackageCompatibility,
   PackageDependencies,
   PackageDeprecatedTree,
-  PackageDownloadAnalytics,
   PackageInstallScripts,
   PackageKeywords,
   PackageList,
···
 // The #components import automatically provides the client variant
 import HeaderAccountMenuServer from '~/components/Header/AccountMenu.server.vue'
 import ToggleServer from '~/components/Settings/Toggle.server.vue'
+import PackageDownloadAnalytics from '~/components/Package/DownloadAnalytics.vue'
 
 describe('component accessibility audits', () => {
   describe('DateTime', () => {
···
     ]
 
     it('should have no accessibility violations (non-modal)', async () => {
-      // Test only non-modal mode to avoid vue-data-ui chart rendering issues
-      const component = await mountSuspended(PackageDownloadAnalytics, {
+      const wrapper = await mountSuspended(PackageDownloadAnalytics, {
         props: {
           weeklyDownloads: mockWeeklyDownloads,
           packageName: 'vue',
···
           inModal: false,
         },
       })
-      const results = await runAxe(component)
+
+      const results = await runAxe(wrapper)
       expect(results.violations).toEqual([])
     })
 
     it('should have no accessibility violations with empty data', async () => {
-      const component = await mountSuspended(PackageDownloadAnalytics, {
+      const wrapper = await mountSuspended(PackageDownloadAnalytics, {
         props: {
           weeklyDownloads: [],
           packageName: 'vue',
···
           inModal: false,
         },
       })
-      const results = await runAxe(component)
+
+      const results = await runAxe(wrapper)
       expect(results.violations).toEqual([])
     })
-
-    // Note: Modal mode tests with inModal: true are skipped because vue-data-ui VueUiXy
-    // component has issues in the test environment (requires DOM measurements).
   })
 
   describe('PackagePlaygrounds', () => {
···
   describe('CompareFacetSelector', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(CompareFacetSelector)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('CompareLineChart', () => {
+    it('should have no accessibility violations with no packages', async () => {
+      const component = await mountSuspended(CompareLineChart, {
+        props: { packages: [] },
+        global: {
+          stubs: {
+            DownloadAnalytics: {
+              template: '<div data-test-id="download-analytics-stub"></div>',
+            },
+          },
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with packages selected', async () => {
+      const component = await mountSuspended(CompareLineChart, {
+        props: { packages: ['vue', 'react'] },
+        global: {
+          stubs: {
+            DownloadAnalytics: {
+              template: '<div data-test-id="download-analytics-stub"></div>',
+            },
+          },
+        },
+      })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })

test/unit/app/utils/frameworks.spec.ts

···
+import { describe, expect, it } from 'vitest'
+import {
+  SHOWCASED_FRAMEWORKS,
+  getFrameworkColor,
+  isListedFramework,
+  type ShowcasedFramework,
+} from '../../../../app/utils/frameworks'
+
+describe('getFrameworkColor', () => {
+  it('returns the color a listed framework', () => {
+    SHOWCASED_FRAMEWORKS.forEach((framework: ShowcasedFramework) => {
+      expect(getFrameworkColor(framework.package)).toBe(framework.color)
+    })
+  })
+})
+
+describe('isListedFramework', () => {
+  it('returns true for a listed framework', () => {
+    SHOWCASED_FRAMEWORKS.forEach((framework: ShowcasedFramework) => {
+      expect(isListedFramework(framework.package)).toBe(true)
+    })
+  })
+
+  it('returns false for non listed frameworks', () => {
+    expect(isListedFramework('leftpad')).toBe(false)
+  })
+})