feat: add GitHub contributors graph (#1445)

app/components/Package/TrendsChart.vue

···
 import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch } from '~/utils/colors'
 import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
 import { drawNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
+import type { RepoRef } from '#shared/utils/git-providers'
 import type {
   ChartTimeGranularity,
   DailyDataPoint,
···
      * Used when `weeklyDownloads` is not provided.
      */
     packageNames?: string[]
+    repoRef?: RepoRef | null | undefined
     createdIso?: string | null
 
     /** When true, shows facet selector (e.g. Downloads / Likes). */
···
   return single ? [single] : []
 })
 
+const {
+  fetchPackageDownloadEvolution,
+  fetchPackageLikesEvolution,
+  fetchRepoContributorsEvolution,
+  fetchRepoRefsForPackages,
+} = useCharts()
+
+const repoRefsByPackage = shallowRef<Record<string, RepoRef | null>>({})
+const repoRefsRequestToken = shallowRef(0)
+
+watch(
+  () => effectivePackageNames.value,
+  async names => {
+    if (!import.meta.client) return
+    if (!isMultiPackageMode.value) {
+      repoRefsByPackage.value = {}
+      return
+    }
+    const currentToken = ++repoRefsRequestToken.value
+    const refs = await fetchRepoRefsForPackages(names)
+    if (currentToken !== repoRefsRequestToken.value) return
+    repoRefsByPackage.value = refs
+  },
+  { immediate: true },
+)
+
 const selectedGranularity = usePermalink<ChartTimeGranularity>('granularity', DEFAULT_GRANULARITY, {
   permanent: props.permalink,
 })
···
 const isEstimationGranularity = computed(
   () => displayedGranularity.value === 'monthly' || displayedGranularity.value === 'yearly',
 )
-const shouldRenderEstimationOverlay = computed(
-  () => !pending.value && isEstimationGranularity.value,
+const supportsEstimation = computed(
+  () => isEstimationGranularity.value && selectedMetric.value !== 'contributors',
 )
+const shouldRenderEstimationOverlay = computed(() => !pending.value && supportsEstimation.value)
 
 const startDate = usePermalink<string>('start', '', {
   permanent: props.permalink,
···
   return next
 }
 
-const { fetchPackageDownloadEvolution, fetchPackageLikesEvolution } = useCharts()
+type MetricId = 'downloads' | 'likes' | 'contributors'
+const DEFAULT_METRIC_ID: MetricId = 'downloads'
 
-type MetricId = 'downloads' | 'likes'
-const DEFAULT_METRIC_ID: MetricId = 'downloads'
+type MetricContext = {
+  packageName: string
+  repoRef?: RepoRef | null
+}
 
 type MetricDef = {
   id: MetricId
   label: string
-  fetch: (pkg: string, options: EvolutionOptions) => Promise<EvolutionData>
+  fetch: (context: MetricContext, options: EvolutionOptions) => Promise<EvolutionData>
+  supportsMulti?: boolean
 }
 
-const METRICS = computed<MetricDef[]>(() => [
-  {
-    id: 'downloads',
-    label: $t('package.trends.items.downloads'),
-    fetch: (pkg, opts) =>
-      fetchPackageDownloadEvolution(pkg, props.createdIso ?? null, opts) as Promise<EvolutionData>,
-  },
-  {
-    id: 'likes',
-    label: $t('package.trends.items.likes'),
-    fetch: (pkg, opts) => fetchPackageLikesEvolution(pkg, opts) as Promise<EvolutionData>,
-  },
-])
+const hasContributorsFacet = computed(() => {
+  if (isMultiPackageMode.value) {
+    return Object.values(repoRefsByPackage.value).some(ref => ref?.provider === 'github')
+  }
+  const ref = props.repoRef
+  return ref?.provider === 'github' && ref.owner && ref.repo
+})
+
+const METRICS = computed<MetricDef[]>(() => {
+  const metrics: MetricDef[] = [
+    {
+      id: 'downloads',
+      label: $t('package.trends.items.downloads'),
+      fetch: ({ packageName }, opts) =>
+        fetchPackageDownloadEvolution(
+          packageName,
+          props.createdIso ?? null,
+          opts,
+        ) as Promise<EvolutionData>,
+      supportsMulti: true,
+    },
+    {
+      id: 'likes',
+      label: $t('package.trends.items.likes'),
+      fetch: ({ packageName }, opts) => fetchPackageLikesEvolution(packageName, opts),
+      supportsMulti: true,
+    },
+  ]
+
+  if (hasContributorsFacet.value) {
+    metrics.push({
+      id: 'contributors',
+      label: $t('package.trends.items.contributors'),
+      fetch: ({ repoRef }, opts) => fetchRepoContributorsEvolution(repoRef, opts),
+      supportsMulti: true,
+    })
+  }
+
+  return metrics
+})
 
 const selectedMetric = usePermalink<MetricId>('facet', DEFAULT_METRIC_ID, {
   permanent: props.permalink,
 })
 
+const effectivePackageNamesForMetric = computed<string[]>(() => {
+  if (!isMultiPackageMode.value) return effectivePackageNames.value
+  if (selectedMetric.value !== 'contributors') return effectivePackageNames.value
+  return effectivePackageNames.value.filter(
+    name => repoRefsByPackage.value[name]?.provider === 'github',
+  )
+})
+
+const skippedPackagesWithoutGitHub = computed(() => {
+  if (!isMultiPackageMode.value) return []
+  if (selectedMetric.value !== 'contributors') return []
+  if (!effectivePackageNames.value.length) return []
+
+  return effectivePackageNames.value.filter(
+    name => repoRefsByPackage.value[name]?.provider !== 'github',
+  )
+})
+
+const availableGranularities = computed<ChartTimeGranularity[]>(() => {
+  if (selectedMetric.value === 'contributors') {
+    return ['weekly', 'monthly', 'yearly']
+  }
+
+  return ['daily', 'weekly', 'monthly', 'yearly']
+})
+
+watch(
+  () => [selectedMetric.value, availableGranularities.value] as const,
+  () => {
+    if (!availableGranularities.value.includes(selectedGranularity.value)) {
+      selectedGranularity.value = 'weekly'
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  () => METRICS.value,
+  metrics => {
+    if (!metrics.some(m => m.id === selectedMetric.value)) {
+      selectedMetric.value = DEFAULT_METRIC_ID
+    }
+  },
+  { immediate: true },
+)
+
 // Per-metric state keyed by metric id
 const metricStates = reactive<
   Record<
···
     evolutionsByPackage: {},
     requestToken: 0,
   },
+  contributors: {
+    pending: false,
+    evolution: [],
+    evolutionsByPackage: {},
+    requestToken: 0,
+  },
 })
 
 const activeMetricState = computed(() => metricStates[selectedMetric.value])
-const activeMetricDef = computed(() => METRICS.value.find(m => m.id === selectedMetric.value)!)
+const activeMetricDef = computed(
+  () => METRICS.value.find(m => m.id === selectedMetric.value) ?? METRICS.value[0],
+)
 const pending = computed(() => activeMetricState.value.pending)
 
 const isMounted = shallowRef(false)
···
 async function loadMetric(metricId: MetricId) {
   if (!import.meta.client) return
 
-  const packageNames = effectivePackageNames.value
-  if (!packageNames.length) return
-
   const state = metricStates[metricId]
   const metric = METRICS.value.find(m => m.id === metricId)!
   const currentToken = ++state.requestToken
   state.pending = true
 
-  const fetchFn = (pkg: string) => metric.fetch(pkg, options.value)
+  const fetchFn = (context: MetricContext) => metric.fetch(context, options.value)
 
   try {
+    const packageNames = effectivePackageNamesForMetric.value
+    if (!packageNames.length) {
+      if (isMultiPackageMode.value) state.evolutionsByPackage = {}
+      else state.evolution = []
+      displayedGranularity.value = selectedGranularity.value
+      return
+    }
+
     if (isMultiPackageMode.value) {
+      if (metric.supportsMulti === false) {
+        state.evolutionsByPackage = {}
+        displayedGranularity.value = selectedGranularity.value
+        return
+      }
+
       const settled = await Promise.allSettled(
         packageNames.map(async pkg => {
-          const result = await fetchFn(pkg)
+          const repoRef = metricId === 'contributors' ? repoRefsByPackage.value[pkg] : null
+          const result = await fetchFn({ packageName: pkg, repoRef })
           return { pkg, result: (result ?? []) as EvolutionData }
         }),
       )
···
       }
     }
 
-    const result = await fetchFn(pkg)
+    const result = await fetchFn({ packageName: pkg, repoRef: props.repoRef })
     if (currentToken !== state.requestToken) return
 
     state.evolution = (result ?? []) as EvolutionData
···
 const fetchTriggerKey = computed(() => {
   const names = effectivePackageNames.value.join(',')
   const o = options.value
+  const repoKey = props.repoRef
+    ? `${props.repoRef.provider}:${props.repoRef.owner}/${props.repoRef.repo}`
+    : ''
   return [
     isMultiPackageMode.value ? 'M' : 'S',
     names,
+    repoKey,
     String(props.createdIso ?? ''),
     String(o.granularity ?? ''),
     String('weeks' in o ? (o.weeks ?? '') : ''),
···
   { flush: 'post' },
 )
 
+watch(
+  () => repoRefsByPackage.value,
+  () => {
+    if (!import.meta.client) return
+    if (!isMounted.value) return
+    if (!isMultiPackageMode.value) return
+    if (selectedMetric.value !== 'contributors') return
+    debouncedLoadNow()
+  },
+  { deep: true },
+)
+
 const effectiveDataSingle = computed<EvolutionData>(() => {
   const state = activeMetricState.value
   if (
···
   }
 
   const state = activeMetricState.value
-  const names = effectivePackageNames.value
+  const names = effectivePackageNamesForMetric.value
   const granularity = displayedGranularity.value
 
   const timestampSet = new Set<number>()
···
 
 const normalisedDataset = computed(() => {
   return chartData.value.dataset?.map(d => {
+    const lastValue = d.series.at(-1) ?? 0
+
+    // Contributors is an absolute metric: keep the partial period value as-is.
+    const projectedLastValue =
+      selectedMetric.value === 'contributors' ? lastValue : extrapolateLastValue(lastValue)
+
     return {
       ...d,
-      series: [...d.series.slice(0, -1), extrapolateLastValue(d.series.at(-1) ?? 0)],
+      series: [...d.series.slice(0, -1), projectedLastValue],
     }
   })
 })
···
   return granularityLabels.value[granularity]
 }
 
+const granularityItems = computed(() =>
+  availableGranularities.value.map(granularity => ({
+    label: granularityLabels.value[granularity],
+    value: granularity,
+  })),
+)
+
 function clampRatio(value: number): number {
   if (value < 0) return 0
   if (value > 1) return 1
···
  * or the original `lastValue` when no extrapolation should be applied.
  */
 function extrapolateLastValue(lastValue: number) {
+  if (selectedMetric.value === 'contributors') return lastValue
+
   if (displayedGranularity.value !== 'monthly' && displayedGranularity.value !== 'yearly')
     return lastValue
 
···
   })
 
   // Inject the estimation legend item when necessary
-  if (
-    ['monthly', 'yearly'].includes(displayedGranularity.value) &&
-    !isEndDateOnPeriodEnd.value &&
-    !isZoomed.value
-  ) {
+  if (supportsEstimation.value && !isEndDateOnPeriodEnd.value && !isZoomed.value) {
     seriesNames.push(`
         <line
           x1="${svg.drawingArea.left + 12}"
···
           axis: {
             yLabel: $t('package.trends.y_axis_label', {
               granularity: getGranularityLabel(selectedGranularity.value),
-              facet: activeMetricDef.value.label,
+              facet: activeMetricDef.value?.label,
             }),
             yLabelOffsetX: 12,
             fontSize: isMobile.value ? 32 : 24,
···
           id="granularity"
           v-model="selectedGranularity"
           :disabled="activeMetricState.pending"
-          :items="[
-            { label: $t('package.trends.granularity_daily'), value: 'daily' },
-            { label: $t('package.trends.granularity_weekly'), value: 'weekly' },
-            { label: $t('package.trends.granularity_monthly'), value: 'monthly' },
-            { label: $t('package.trends.granularity_yearly'), value: 'yearly' },
-          ]"
+          :items="granularityItems"
         />
 
         <div class="grid grid-cols-2 gap-2 flex-1">
···
           <span class="i-lucide:undo-2 w-5 h-5" aria-hidden="true" />
         </button>
       </div>
+
+      <p v-if="skippedPackagesWithoutGitHub.length > 0" class="text-2xs font-mono text-fg-subtle">
+        {{ $t('package.trends.contributors_skip', { count: skippedPackagesWithoutGitHub.length }) }}
+        {{ skippedPackagesWithoutGitHub.join(', ') }}
+      </p>
     </div>
 
     <h2 id="trends-chart-title" class="sr-only">
-      {{ $t('package.trends.title') }} — {{ activeMetricDef.label }}
+      {{ $t('package.trends.title') }} — {{ activeMetricDef?.label }}
     </h2>
 
     <!-- Chart panel (active metric) -->
···
             <template #svg="{ svg }">
               <!-- Estimation lines for monthly & yearly granularities when the end date induces a downwards trend -->
               <g
-                v-if="
-                  !pending &&
-                  ['monthly', 'yearly'].includes(displayedGranularity) &&
-                  !isEndDateOnPeriodEnd &&
-                  !isZoomed
-                "
+                v-if="shouldRenderEstimationOverlay && !isEndDateOnPeriodEnd && !isZoomed"
                 v-html="drawEstimationLine(svg)"
               />
 
···
                 </template>
 
                 <!-- Estimation extra legend item -->
-                <div
-                  class="flex gap-1 place-items-center"
-                  v-if="['monthly', 'yearly'].includes(selectedGranularity)"
-                >
+                <div class="flex gap-1 place-items-center" v-if="supportsEstimation">
                   <svg viewBox="0 0 20 2" width="20">
                     <line
                       x1="0"

app/components/Package/WeeklyDownloadStats.vue

···
 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'
 
 const props = defineProps<{
   packageName: string
   createdIso: string | null
+  repoRef?: RepoRef | null | undefined
 }>()
 
 const router = useRouter()
···
         :weeklyDownloads="weeklyDownloads"
         :inModal="true"
         :packageName="props.packageName"
+        :repoRef="props.repoRef"
         :createdIso="createdIso"
         permalink
         show-facet-selector

app/composables/useCharts.ts

···
   WeeklyDataPoint,
   YearlyDataPoint,
 } from '~/types/chart'
+import type { RepoRef } from '#shared/utils/git-providers'
+import { parseRepoUrl } from '#shared/utils/git-providers'
+import type { PackageMetaResponse } from '#shared/types'
+import { encodePackageName } from '#shared/utils/npm'
 import { fetchNpmDownloadsRange } from '~/utils/npm/api'
 
 export type PackumentLikeForTime = {
···
 
 const npmDailyRangeCache = import.meta.client ? new Map<string, Promise<DailyRawPoint[]>>() : null
 const likesEvolutionCache = import.meta.client ? new Map<string, Promise<DailyRawPoint[]>>() : null
+const contributorsEvolutionCache = import.meta.client
+  ? new Map<string, Promise<GitHubContributorStats[]>>()
+  : null
+const repoMetaCache = import.meta.client ? new Map<string, Promise<RepoRef | null>>() : null
 
 /** Clears client-side promise caches. Exported for use in tests. */
 export function clearClientCaches() {
   npmDailyRangeCache?.clear()
   likesEvolutionCache?.clear()
+  contributorsEvolutionCache?.clear()
+  repoMetaCache?.clear()
+}
+
+type GitHubContributorWeek = {
+  w: number
+  a: number
+  d: number
+  c: number
+}
+
+type GitHubContributorStats = {
+  total: number
+  weeks: GitHubContributorWeek[]
+}
+
+function pad2(value: number): string {
+  return value.toString().padStart(2, '0')
+}
+
+function toIsoMonthKey(date: Date): string {
+  return `${date.getUTCFullYear()}-${pad2(date.getUTCMonth() + 1)}`
+}
+
+function isOverlappingRange(start: Date, end: Date, rangeStart: Date, rangeEnd: Date): boolean {
+  return end.getTime() >= rangeStart.getTime() && start.getTime() <= rangeEnd.getTime()
+}
+
+function buildWeeklyEvolutionFromContributorCounts(
+  weeklyCounts: Map<number, number>,
+  rangeStart: Date,
+  rangeEnd: Date,
+): WeeklyDataPoint[] {
+  return Array.from(weeklyCounts.entries())
+    .sort(([a], [b]) => a - b)
+    .map(([weekStartSeconds, value]) => {
+      const weekStartDate = new Date(weekStartSeconds * 1000)
+      const weekEndDate = addDays(weekStartDate, 6)
+
+      if (!isOverlappingRange(weekStartDate, weekEndDate, rangeStart, rangeEnd)) return null
+
+      const clampedWeekEndDate = weekEndDate.getTime() > rangeEnd.getTime() ? rangeEnd : weekEndDate
+
+      const weekStartIso = toIsoDateString(weekStartDate)
+      const weekEndIso = toIsoDateString(clampedWeekEndDate)
+
+      return {
+        value,
+        weekKey: `${weekStartIso}_${weekEndIso}`,
+        weekStart: weekStartIso,
+        weekEnd: weekEndIso,
+        timestampStart: weekStartDate.getTime(),
+        timestampEnd: clampedWeekEndDate.getTime(),
+      }
+    })
+    .filter((item): item is WeeklyDataPoint => Boolean(item))
+}
+
+function buildMonthlyEvolutionFromContributorCounts(
+  monthlyCounts: Map<string, number>,
+  rangeStart: Date,
+  rangeEnd: Date,
+): MonthlyDataPoint[] {
+  return Array.from(monthlyCounts.entries())
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([month, value]) => {
+      const [year, monthNumber] = month.split('-').map(Number)
+      if (!year || !monthNumber) return null
+
+      const monthStartDate = new Date(Date.UTC(year, monthNumber - 1, 1))
+      const monthEndDate = new Date(Date.UTC(year, monthNumber, 0))
+
+      if (!isOverlappingRange(monthStartDate, monthEndDate, rangeStart, rangeEnd)) return null
+
+      return {
+        month,
+        value,
+        timestamp: monthStartDate.getTime(),
+      }
+    })
+    .filter((item): item is MonthlyDataPoint => Boolean(item))
+}
+
+function buildYearlyEvolutionFromContributorCounts(
+  yearlyCounts: Map<string, number>,
+  rangeStart: Date,
+  rangeEnd: Date,
+): YearlyDataPoint[] {
+  return Array.from(yearlyCounts.entries())
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([year, value]) => {
+      const yearNumber = Number(year)
+      if (!yearNumber) return null
+
+      const yearStartDate = new Date(Date.UTC(yearNumber, 0, 1))
+      const yearEndDate = new Date(Date.UTC(yearNumber, 11, 31))
+
+      if (!isOverlappingRange(yearStartDate, yearEndDate, rangeStart, rangeEnd)) return null
+
+      return {
+        year,
+        value,
+        timestamp: yearStartDate.getTime(),
+      }
+    })
+    .filter((item): item is YearlyDataPoint => Boolean(item))
+}
+
+function buildContributorCounts(stats: GitHubContributorStats[]) {
+  const weeklyCounts = new Map<number, number>()
+  const monthlyCounts = new Map<string, number>()
+  const yearlyCounts = new Map<string, number>()
+
+  for (const contributor of stats ?? []) {
+    const monthSet = new Set<string>()
+    const yearSet = new Set<string>()
+
+    for (const week of contributor?.weeks ?? []) {
+      if (!week || week.c <= 0) continue
+
+      weeklyCounts.set(week.w, (weeklyCounts.get(week.w) ?? 0) + 1)
+
+      const weekStartDate = new Date(week.w * 1000)
+      monthSet.add(toIsoMonthKey(weekStartDate))
+      yearSet.add(String(weekStartDate.getUTCFullYear()))
+    }
+
+    for (const key of monthSet) {
+      monthlyCounts.set(key, (monthlyCounts.get(key) ?? 0) + 1)
+    }
+    for (const key of yearSet) {
+      yearlyCounts.set(key, (yearlyCounts.get(key) ?? 0) + 1)
+    }
+  }
+
+  return { weeklyCounts, monthlyCounts, yearlyCounts }
 }
 
 async function fetchDailyRangeCached(packageName: string, startIso: string, endIso: string) {
···
     return buildYearlyEvolutionFromDaily(filteredDaily)
   }
 
+  async function fetchRepoContributorsEvolution(
+    repoRef: MaybeRefOrGetter<RepoRef | null | undefined>,
+    evolutionOptions: MaybeRefOrGetter<EvolutionOptions>,
+  ): Promise<DailyDataPoint[] | WeeklyDataPoint[] | MonthlyDataPoint[] | YearlyDataPoint[]> {
+    const resolvedRepoRef = toValue(repoRef)
+    if (!resolvedRepoRef || resolvedRepoRef.provider !== 'github') return []
+
+    const resolvedOptions = toValue(evolutionOptions)
+
+    const cache = contributorsEvolutionCache
+    const cacheKey = `${resolvedRepoRef.owner}/${resolvedRepoRef.repo}`
+
+    let statsPromise: Promise<GitHubContributorStats[]>
+
+    if (cache?.has(cacheKey)) {
+      statsPromise = cache.get(cacheKey)!
+    } else {
+      statsPromise = $fetch<GitHubContributorStats[]>(
+        `/api/github/contributors-evolution/${resolvedRepoRef.owner}/${resolvedRepoRef.repo}`,
+      )
+        .then(data => (Array.isArray(data) ? data : []))
+        .catch(error => {
+          cache?.delete(cacheKey)
+          throw error
+        })
+
+      cache?.set(cacheKey, statsPromise)
+    }
+
+    const stats = await statsPromise
+    const { start, end } = resolveDateRange(resolvedOptions, null)
+
+    const { weeklyCounts, monthlyCounts, yearlyCounts } = buildContributorCounts(stats)
+
+    if (resolvedOptions.granularity === 'week') {
+      return buildWeeklyEvolutionFromContributorCounts(weeklyCounts, start, end)
+    }
+    if (resolvedOptions.granularity === 'month') {
+      return buildMonthlyEvolutionFromContributorCounts(monthlyCounts, start, end)
+    }
+    if (resolvedOptions.granularity === 'year') {
+      return buildYearlyEvolutionFromContributorCounts(yearlyCounts, start, end)
+    }
+
+    return []
+  }
+
+  async function fetchRepoRefsForPackages(
+    packageNames: MaybeRefOrGetter<string[]>,
+  ): Promise<Record<string, RepoRef | null>> {
+    const names = (toValue(packageNames) ?? []).map(n => String(n).trim()).filter(Boolean)
+    if (!import.meta.client || !names.length) return {}
+
+    const settled = await Promise.allSettled(
+      names.map(async name => {
+        const cacheKey = name
+        const cache = repoMetaCache
+        if (cache?.has(cacheKey)) {
+          const ref = await cache.get(cacheKey)!
+          return { name, ref }
+        }
+
+        const promise = $fetch<PackageMetaResponse>(
+          `/api/registry/package-meta/${encodePackageName(name)}`,
+        )
+          .then(meta => {
+            const repoUrl = meta?.links?.repository
+            return repoUrl ? parseRepoUrl(repoUrl) : null
+          })
+          .catch(error => {
+            cache?.delete(cacheKey)
+            throw error
+          })
+
+        cache?.set(cacheKey, promise)
+        const ref = await promise
+        return { name, ref }
+      }),
+    )
+
+    const next: Record<string, RepoRef | null> = {}
+    for (const [index, entry] of settled.entries()) {
+      const name = names[index]
+      if (!name) continue
+      if (entry.status === 'fulfilled') {
+        next[name] = entry.value.ref ?? null
+      } else {
+        next[name] = null
+      }
+    }
+
+    return next
+  }
+
   return {
     fetchPackageDownloadEvolution,
     fetchPackageLikesEvolution,
+    fetchRepoContributorsEvolution,
+    fetchRepoRefsForPackages,
     getNpmPackageCreationDate,
   }
 }

app/pages/compare.vue

···
         </h2>
 
         <div
-          v-if="status === 'pending' && (!packagesData || packagesData.every(p => p === null))"
+          v-if="
+            (status === 'pending' || status === 'idle') &&
+            (!packagesData || packagesData.every(p => p === null))
+          "
           class="flex items-center justify-center py-12"
         >
           <LoadingSpinner :text="$t('compare.packages.loading')" />
···
           <CompareLineChart :packages="packages.filter(p => p !== NO_DEPENDENCY_ID)" />
         </div>
 
-        <div v-else class="text-center py-12" role="alert">
+        <div v-else-if="status === 'error'" class="text-center py-12" role="alert">
           <p class="text-fg-muted">{{ $t('compare.packages.error') }}</p>
+        </div>
+        <div v-else class="flex items-center justify-center py-12">
+          <LoadingSpinner :text="$t('compare.packages.loading')" />
         </div>
       </section>
 

app/pages/package/[[org]]/[name].vue

···
           </ClientOnly>
 
           <!-- Download stats -->
-          <PackageWeeklyDownloadStats :packageName :createdIso="pkg?.time?.created ?? null" />
+          <PackageWeeklyDownloadStats
+            :packageName
+            :createdIso="pkg?.time?.created ?? null"
+            :repoRef="repoRef"
+          />
 
           <!-- Playground links -->
           <PackagePlaygrounds

i18n/locales/en.json

···
       "y_axis_label": "{granularity} {facet}",
       "facet": "Facet",
       "title": "Trends",
+      "contributors_skip": "Not shown in Contributors (no GitHub repo):",
       "items": {
         "downloads": "Downloads",
-        "likes": "Likes"
+        "likes": "Likes",
+        "contributors": "Contributors"
       }
     },
     "downloads": {

i18n/schema.json

···
             "title": {
               "type": "string"
             },
+            "contributors_skip": {
+              "type": "string"
+            },
             "items": {
               "type": "object",
               "properties": {
···
                   "type": "string"
                 },
                 "likes": {
+                  "type": "string"
+                },
+                "contributors": {
                   "type": "string"
                 }
               },

lunaria/files/en-GB.json

···
       "y_axis_label": "{granularity} {facet}",
       "facet": "Facet",
       "title": "Trends",
+      "contributors_skip": "Not shown in Contributors (no GitHub repo):",
       "items": {
         "downloads": "Downloads",
-        "likes": "Likes"
+        "likes": "Likes",
+        "contributors": "Contributors"
       }
     },
     "downloads": {

lunaria/files/en-US.json

···
       "y_axis_label": "{granularity} {facet}",
       "facet": "Facet",
       "title": "Trends",
+      "contributors_skip": "Not shown in Contributors (no GitHub repo):",
       "items": {
         "downloads": "Downloads",
-        "likes": "Likes"
+        "likes": "Likes",
+        "contributors": "Contributors"
       }
     },
     "downloads": {

modules/runtime/server/cache.ts

···
   esmHeaders: 'esm-sh:headers',
   esmTypes: 'esm-sh:types',
   githubContributors: 'github:contributors.json',
+  githubContributorsStats: 'github:contributors-stats.json',
 } as const
 
 type FixtureType = keyof typeof FIXTURE_PATHS
···
   const { host, pathname } = urlObj
 
   if (host !== 'api.github.com') return null
+
+  // Contributors stats endpoint: /repos/{owner}/{repo}/stats/contributors
+  const contributorsStatsMatch = pathname.match(/^\/repos\/([^/]+)\/([^/]+)\/stats\/contributors$/)
+  if (contributorsStatsMatch) {
+    const contributorsStats = await storage.getItem<unknown[]>(
+      FIXTURE_PATHS.githubContributorsStats,
+    )
+    if (contributorsStats) {
+      return { data: contributorsStats }
+    }
+    return { data: [] }
+  }
 
   // Contributors endpoint: /repos/{owner}/{repo}/contributors
   const contributorsMatch = pathname.match(/^\/repos\/([^/]+)\/([^/]+)\/contributors$/)

server/api/github/contributors-evolution/[owner]/[repo].get.ts

···
+import { CACHE_MAX_AGE_ONE_DAY } from '#shared/utils/constants'
+
+type GitHubContributorWeek = {
+  w: number
+  a: number
+  d: number
+  c: number
+}
+
+type GitHubContributorStats = {
+  total: number
+  weeks: GitHubContributorWeek[]
+}
+
+export default defineCachedEventHandler(
+  async event => {
+    const owner = getRouterParam(event, 'owner')
+    const repo = getRouterParam(event, 'repo')
+
+    if (!owner || !repo) {
+      throw createError({
+        status: 400,
+        message: 'repository not provided',
+      })
+    }
+
+    const url = `https://api.github.com/repos/${owner}/${repo}/stats/contributors`
+    const headers = {
+      'User-Agent': 'npmx',
+      'Accept': 'application/vnd.github+json',
+    }
+
+    const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
+    const maxAttempts = 6
+    let delayMs = 1000
+
+    try {
+      for (let attempt = 0; attempt < maxAttempts; attempt += 1) {
+        const response = await $fetch.raw<GitHubContributorStats[]>(url, { headers })
+        const status = response.status
+
+        if (status === 200) {
+          return Array.isArray(response._data) ? response._data : []
+        }
+
+        if (status === 204) {
+          return []
+        }
+
+        if (status === 202) {
+          if (attempt === maxAttempts - 1) return []
+          await sleep(delayMs)
+          delayMs = Math.min(delayMs * 2, 16_000)
+          continue
+        }
+
+        return []
+      }
+
+      return []
+    } catch {
+      return []
+    }
+  },
+  {
+    maxAge: CACHE_MAX_AGE_ONE_DAY,
+  },
+)

test/fixtures/github/contributors-stats.json

···
+[
+  {
+    "total": 5,
+    "weeks": [
+      { "w": 1700438400, "a": 12, "d": 3, "c": 2 },
+      { "w": 1701043200, "a": 0, "d": 0, "c": 0 },
+      { "w": 1701648000, "a": 7, "d": 1, "c": 1 }
+    ]
+  },
+  {
+    "total": 9,
+    "weeks": [
+      { "w": 1700438400, "a": 20, "d": 5, "c": 4 },
+      { "w": 1701043200, "a": 2, "d": 0, "c": 1 },
+      { "w": 1702252800, "a": 4, "d": 1, "c": 1 }
+    ]
+  }
+]