feat(ui): generalize downloads chart and add social likes option (#1310)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

app/components/Compare/LineChart.vue

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

app/components/Package/ChartModal.vue

···
-<script setup lang="ts"></script>
+<script setup lang="ts">
+defineProps<{
+  modalTitle?: string
+}>()
+</script>
 
 <template>
   <Modal
-    :modalTitle="$t('package.downloads.modal_title')"
+    :modalTitle="modalTitle ?? $t('package.trends.title')"
     id="chart-modal"
     class="h-full sm:h-min sm:border sm:border-border sm:rounded-lg shadow-xl sm:max-h-[90vh] sm:max-w-3xl"
   >

app/components/Package/DownloadAnalytics.vue app/components/Package/TrendsChart.vue

···
 
 const props = defineProps<{
   // For single package downloads history
-  weeklyDownloads?: WeeklyDownloadPoint[]
+  weeklyDownloads?: WeeklyDataPoint[]
   inModal?: boolean
 
   /**
···
    */
   packageNames?: string[]
   createdIso?: string | null
+
+  /** When true, shows facet selector (e.g. Downloads / Likes). */
+  showFacetSelector?: boolean
 }>()
 
 const { locale } = useI18n()
···
   await nextTick()
   isMounted.value = true
 
-  loadNow()
+  loadMetric(selectedMetric.value)
 })
 
 const { colors } = useCssVariables(
···
 const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpointWidth)
 
 type ChartTimeGranularity = 'daily' | 'weekly' | 'monthly' | 'yearly'
-type EvolutionData =
-  | DailyDownloadPoint[]
-  | WeeklyDownloadPoint[]
-  | MonthlyDownloadPoint[]
-  | YearlyDownloadPoint[]
+const DEFAULT_GRANULARITY: ChartTimeGranularity = 'weekly'
+type EvolutionData = DailyDataPoint[] | WeeklyDataPoint[] | MonthlyDataPoint[] | YearlyDataPoint[]
 
 type DateRangeFields = {
   startDate?: string
···
   return typeof value === 'object' && value !== null
 }
 
-function isWeeklyDataset(data: unknown): data is WeeklyDownloadPoint[] {
+function isWeeklyDataset(data: unknown): data is WeeklyDataPoint[] {
   return (
     Array.isArray(data) &&
     data.length > 0 &&
     isRecord(data[0]) &&
     'weekStart' in data[0] &&
     'weekEnd' in data[0] &&
-    'downloads' in data[0]
+    'value' in data[0]
   )
 }
-function isDailyDataset(data: unknown): data is DailyDownloadPoint[] {
+function isDailyDataset(data: unknown): data is DailyDataPoint[] {
   return (
     Array.isArray(data) &&
     data.length > 0 &&
     isRecord(data[0]) &&
     'day' in data[0] &&
-    'downloads' in data[0]
+    'value' in data[0]
   )
 }
-function isMonthlyDataset(data: unknown): data is MonthlyDownloadPoint[] {
+function isMonthlyDataset(data: unknown): data is MonthlyDataPoint[] {
   return (
     Array.isArray(data) &&
     data.length > 0 &&
     isRecord(data[0]) &&
     'month' in data[0] &&
-    'downloads' in data[0]
+    'value' in data[0]
   )
 }
-function isYearlyDataset(data: unknown): data is YearlyDownloadPoint[] {
+function isYearlyDataset(data: unknown): data is YearlyDataPoint[] {
   return (
     Array.isArray(data) &&
     data.length > 0 &&
     isRecord(data[0]) &&
     'year' in data[0] &&
-    'downloads' in data[0]
+    'value' in data[0]
   )
 }
 
···
         {
           name: seriesName,
           type: 'line',
-          series: dataset.map(d => d.downloads),
+          series: dataset.map(d => d.value),
           color: accent.value,
           useArea: true,
         },
···
         {
           name: seriesName,
           type: 'line',
-          series: dataset.map(d => d.downloads),
+          series: dataset.map(d => d.value),
           color: accent.value,
           useArea: true,
         },
···
         {
           name: seriesName,
           type: 'line',
-          series: dataset.map(d => d.downloads),
+          series: dataset.map(d => d.value),
           color: accent.value,
           useArea: true,
         },
···
         {
           name: seriesName,
           type: 'line',
-          series: dataset.map(d => d.downloads),
+          series: dataset.map(d => d.value),
           color: accent.value,
           useArea: true,
         },
···
  *
  * Each returned point contains:
  * - `timestamp`: the numeric time value used for x-axis alignment
- * - `downloads`: the corresponding value at that time
+ * - `value`: the corresponding value at that time
  *
  * The timestamp field is selected according to granularity:
  * - **daily**   → `timestamp`
···
  *
  * @param selectedGranularity - Active chart time granularity
  * @param dataset - Raw evolution dataset to extract points from
- * @returns An array of normalized `{ timestamp, downloads }` points
+ * @returns An array of normalized `{ timestamp, value }` points
  */
 function extractSeriesPoints(
   selectedGranularity: ChartTimeGranularity,
   dataset: EvolutionData,
-): Array<{ timestamp: number; downloads: number }> {
+): Array<{ timestamp: number; value: 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 }))
+    return dataset.map(d => ({ timestamp: d.timestampEnd, value: d.value }))
   }
-  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 }))
+  if (
+    (selectedGranularity === 'daily' && isDailyDataset(dataset)) ||
+    (selectedGranularity === 'monthly' && isMonthlyDataset(dataset)) ||
+    (selectedGranularity === 'yearly' && isYearlyDataset(dataset))
+  ) {
+    return (dataset as Array<{ timestamp: number; value: number }>).map(d => ({
+      timestamp: d.timestamp,
+      value: d.value,
+    }))
   }
   return []
 }
···
   return single ? [single] : []
 })
 
-const selectedGranularity = shallowRef<ChartTimeGranularity>('weekly')
-const displayedGranularity = shallowRef<ChartTimeGranularity>('weekly')
+const selectedGranularity = shallowRef<ChartTimeGranularity>(DEFAULT_GRANULARITY)
+const displayedGranularity = shallowRef<ChartTimeGranularity>(DEFAULT_GRANULARITY)
 
 const isEndDateOnPeriodEnd = computed(() => {
   const g = selectedGranularity.value
···
 const options = shallowRef<
   | { granularity: 'day'; startDate?: string; endDate?: string }
   | { granularity: 'week'; weeks: number; startDate?: string; endDate?: string }
-  | { granularity: 'month'; months: number; startDate?: string; endDate?: string }
+  | {
+      granularity: 'month'
+      months: number
+      startDate?: string
+      endDate?: string
+    }
   | { granularity: 'year'; startDate?: string; endDate?: string }
 >({ granularity: 'week', weeks: 52 })
 
···
   return next
 }
 
-const { fetchPackageDownloadEvolution } = useCharts()
+const { fetchPackageDownloadEvolution, fetchPackageLikesEvolution } = useCharts()
 
-const evolution = shallowRef<EvolutionData>(props.weeklyDownloads ?? [])
-const evolutionsByPackage = shallowRef<Record<string, EvolutionData>>({})
-const pending = shallowRef(false)
+type MetricId = 'downloads' | 'likes'
+const DEFAULT_METRIC_ID: MetricId = 'downloads'
+
+type MetricDef = {
+  id: MetricId
+  label: string
+  fetch: (pkg: string, options: EvolutionOptions) => Promise<EvolutionData>
+}
+
+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 selectedMetric = shallowRef<MetricId>(DEFAULT_METRIC_ID)
+
+// Per-metric state keyed by metric id
+const metricStates = reactive<
+  Record<
+    MetricId,
+    {
+      pending: boolean
+      evolution: EvolutionData
+      evolutionsByPackage: Record<string, EvolutionData>
+      requestToken: number
+    }
+  >
+>({
+  downloads: {
+    pending: false,
+    evolution: props.weeklyDownloads ?? [],
+    evolutionsByPackage: {},
+    requestToken: 0,
+  },
+  likes: {
+    pending: false,
+    evolution: [],
+    evolutionsByPackage: {},
+    requestToken: 0,
+  },
+})
+
+const activeMetricState = computed(() => metricStates[selectedMetric.value])
+const activeMetricDef = computed(() => METRICS.value.find(m => m.id === selectedMetric.value)!)
+const pending = computed(() => activeMetricState.value.pending)
 
 const isMounted = shallowRef(false)
-let requestToken = 0
 
 // Watches granularity and date inputs to keep request options in sync and
 // manage the loading state.
···
 
     const packageNames = effectivePackageNames.value
     if (!import.meta.client || !packageNames.length) {
-      pending.value = false
+      activeMetricState.value.pending = false
       return
     }
 
-    const o = options.value as any
-    const hasExplicitRange = Boolean(o.startDate || o.endDate)
+    const o = options.value
+    const hasExplicitRange = ('startDate' in o && o.startDate) || ('endDate' in o && o.endDate)
 
     // Do not show loading when weeklyDownloads is already provided
     if (
+      selectedMetric.value === DEFAULT_METRIC_ID &&
       !isMultiPackageMode.value &&
-      o.granularity === 'week' &&
+      granularityValue === DEFAULT_GRANULARITY &&
       props.weeklyDownloads?.length &&
       !hasExplicitRange
     ) {
-      pending.value = false
+      activeMetricState.value.pending = false
       return
     }
 
-    pending.value = true
+    activeMetricState.value.pending = true
   },
   { immediate: true },
 )
 
 /**
- * Fetches download evolution data based on the current granularity,
+ * Fetches evolution data for a given metric based on the current granularity,
  * date range, and package selection.
  *
  * This function:
···
  * - supports both single-package and multi-package modes
  * - applies request de-duplication via a request token to avoid race conditions
  * - updates the appropriate reactive stores with fetched data
- * - manages the `pending` loading state
- *
- * Behavior details:
- * - In multi-package mode, all packages are fetched in parallel and partial
- *   failures are tolerated using `Promise.allSettled`
- * - In single-package mode, weekly data is reused from `weeklyDownloads`
- *   when available and no explicit date range is requested
- * - Outdated responses are discarded when a newer request supersedes them
- *
+ * - manages the metric's `pending` loading state
  */
-async function loadNow() {
+async function loadMetric(metricId: MetricId) {
   if (!import.meta.client) return
 
   const packageNames = effectivePackageNames.value
   if (!packageNames.length) return
 
-  const currentToken = ++requestToken
-  pending.value = true
+  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)
 
   try {
     if (isMultiPackageMode.value) {
       const settled = await Promise.allSettled(
         packageNames.map(async pkg => {
-          const result = await fetchPackageDownloadEvolution(
-            pkg,
-            props.createdIso ?? null,
-            options.value,
-          )
+          const result = await fetchFn(pkg)
           return { pkg, result: (result ?? []) as EvolutionData }
         }),
       )
 
-      if (currentToken !== requestToken) return
+      if (currentToken !== state.requestToken) return
 
       const next: Record<string, EvolutionData> = {}
       for (const entry of settled) {
         if (entry.status === 'fulfilled') next[entry.value.pkg] = entry.value.result
       }
 
-      evolutionsByPackage.value = next
+      state.evolutionsByPackage = next
       displayedGranularity.value = selectedGranularity.value
       return
     }
 
     const pkg = packageNames[0] ?? ''
     if (!pkg) {
-      evolution.value = []
+      state.evolution = []
       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
+    // In single-package mode the parent already fetches weekly downloads for the
+    // sparkline (WeeklyDownloadStats). When the user hasn't customised the date
+    // range we can reuse that prop directly and skip a redundant API call.
+    if (metricId === DEFAULT_METRIC_ID) {
+      const o = options.value
+      const hasExplicitRange = ('startDate' in o && o.startDate) || ('endDate' in o && o.endDate)
+      if (
+        selectedGranularity.value === DEFAULT_GRANULARITY &&
+        props.weeklyDownloads?.length &&
+        !hasExplicitRange
+      ) {
+        state.evolution = props.weeklyDownloads
+        displayedGranularity.value = DEFAULT_GRANULARITY
+        return
+      }
     }
 
-    const result = await fetchPackageDownloadEvolution(pkg, props.createdIso ?? null, options.value)
-    if (currentToken !== requestToken) return
+    const result = await fetchFn(pkg)
+    if (currentToken !== state.requestToken) return
 
-    evolution.value = (result ?? []) as EvolutionData
+    state.evolution = (result ?? []) as EvolutionData
     displayedGranularity.value = selectedGranularity.value
   } catch {
-    if (currentToken !== requestToken) return
-    if (isMultiPackageMode.value) evolutionsByPackage.value = {}
-    else evolution.value = []
+    if (currentToken !== state.requestToken) return
+    if (isMultiPackageMode.value) state.evolutionsByPackage = {}
+    else state.evolution = []
   } finally {
-    if (currentToken === requestToken) pending.value = false
+    if (currentToken === state.requestToken) state.pending = false
   }
 }
 
···
 // - prevents unnecessary API load and visual flicker of the loading state
 //
 const debouncedLoadNow = useDebounceFn(() => {
-  loadNow()
+  loadMetric(selectedMetric.value)
 }, 1000)
 
 const fetchTriggerKey = computed(() => {
   const names = effectivePackageNames.value.join(',')
-  const o = options.value as any
+  const o = options.value
   return [
     isMultiPackageMode.value ? 'M' : 'S',
     names,
     String(props.createdIso ?? ''),
     String(o.granularity ?? ''),
-    String(o.weeks ?? ''),
-    String(o.months ?? ''),
-    String(o.startDate ?? ''),
-    String(o.endDate ?? ''),
+    String('weeks' in o ? (o.weeks ?? '') : ''),
+    String('months' in o ? (o.months ?? '') : ''),
+    String('startDate' in o ? (o.startDate ?? '') : ''),
+    String('endDate' in o ? (o.endDate ?? '') : ''),
   ].join('|')
 })
 
···
 )
 
 const effectiveDataSingle = computed<EvolutionData>(() => {
-  if (displayedGranularity.value === 'weekly' && props.weeklyDownloads?.length) {
-    if (isWeeklyDataset(evolution.value) && evolution.value.length) return evolution.value
+  const state = activeMetricState.value
+  if (
+    selectedMetric.value === DEFAULT_METRIC_ID &&
+    displayedGranularity.value === DEFAULT_GRANULARITY &&
+    props.weeklyDownloads?.length
+  ) {
+    if (isWeeklyDataset(state.evolution) && state.evolution.length) return state.evolution
     return props.weeklyDownloads
   }
-  return evolution.value
+  return state.evolution
 })
 
 /**
- * Normalized chart data derived from the fetched evolution datasets.
+ * Normalized chart data derived from the active metric's evolution datasets.
  *
- * This computed value adapts its behavior based on the current mode:
- *
- * - **Single-package mode**
- *   - Delegates formatting to `formatXyDataset`
- *   - Produces a single series with its corresponding timestamps
- *
- * - **Multi-package mode**
- *   - Merges multiple package datasets into a shared time axis
- *   - Aligns all series on the same sorted list of timestamps
- *   - Fills missing datapoints with `0` to keep series lengths consistent
- *   - Assigns framework-specific colors when applicable
- *
+ * Adapts its behavior based on the current mode:
+ * - **Single-package mode**: formats via `formatXyDataset`
+ * - **Multi-package mode**: merges datasets into a shared time axis
+
  * The returned structure matches the expectations of `VueUiXy`:
  * - `dataset`: array of series definitions, or `null` when no data is available
  * - `dates`: sorted list of timestamps used as the x-axis reference
···
  * Returning `dataset: null` explicitly signals the absence of data and allows
  * the template to handle empty states without ambiguity.
  */
-const chartData = computed<{ dataset: VueUiXyDatasetItem[] | null; dates: number[] }>(() => {
+const chartData = computed<{
+  dataset: VueUiXyDatasetItem[] | null
+  dates: number[]
+}>(() => {
   if (!isMultiPackageMode.value) {
     const pkg = effectivePackageNames.value[0] ?? props.packageName ?? ''
     return formatXyDataset(displayedGranularity.value, effectiveDataSingle.value, pkg)
   }
 
+  const state = activeMetricState.value
   const names = effectivePackageNames.value
   const granularity = displayedGranularity.value
 
   const timestampSet = new Set<number>()
-  const pointsByPackage = new Map<string, Array<{ timestamp: number; downloads: number }>>()
+  const pointsByPackage = new Map<string, Array<{ timestamp: number; value: number }>>()
 
   for (const pkg of names) {
-    const data = evolutionsByPackage.value[pkg] ?? []
+    const data = state.evolutionsByPackage[pkg] ?? []
     const points = extractSeriesPoints(granularity, data)
     pointsByPackage.set(pkg, points)
     for (const p of points) timestampSet.add(p.timestamp)
···
   const dataset: VueUiXyDatasetItem[] = names.map(pkg => {
     const points = pointsByPackage.get(pkg) ?? []
     const map = new Map<number, number>()
-    for (const p of points) map.set(p.timestamp, p.downloads)
+    for (const p of points) map.set(p.timestamp, p.value)
 
     const series = dates.map(t => map.get(t) ?? 0)
 
-    const item: VueUiXyDatasetItem = { name: pkg, type: 'line', series } as VueUiXyDatasetItem
+    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
   })
 
···
       backgroundColor: colors.value.bg,
       padding: { bottom: displayedGranularity.value === 'yearly' ? 84 : 64, right: 100 }, // padding right is set to leave space of last datapoint label(s)
       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.trends.download_file', { fileType: 'CSV' }),
           img: $t('package.trends.download_file', { fileType: 'PNG' }),
···
           axis: {
             yLabel: $t('package.trends.y_axis_label', {
               granularity: getGranularityLabel(selectedGranularity.value),
-              facet: $t('package.trends.items.downloads'),
+              facet: activeMetricDef.value.label,
             }),
             yLabelOffsetX: 12,
             fontSize: isMobile.value ? 32 : 24,
···
     },
   }
 })
+
+// Trigger data loading when the metric is switched
+watch(selectedMetric, value => {
+  if (!isMounted.value) return
+  loadMetric(value)
+})
 </script>
 
 <template>
-  <div class="w-full relative" id="download-analytics" :aria-busy="pending ? 'true' : 'false'">
+  <div
+    class="w-full relative"
+    id="trends-chart"
+    :aria-busy="activeMetricState.pending ? 'true' : 'false'"
+  >
     <div class="w-full mb-4 flex flex-col gap-3">
       <div class="flex flex-col sm:flex-row gap-3 sm:gap-2 sm:items-end">
         <SelectField
+          v-if="showFacetSelector"
+          id="trends-metric-select"
+          v-model="selectedMetric"
+          :items="METRICS.map(m => ({ label: m.label, value: m.id }))"
+          :label="$t('package.trends.facet')"
+        />
+
+        <SelectField
           :label="$t('package.trends.granularity')"
           id="granularity"
           v-model="selectedGranularity"
-          :disabled="pending"
+          :disabled="activeMetricState.pending"
           :items="[
             { label: $t('package.trends.granularity_daily'), value: 'daily' },
             { label: $t('package.trends.granularity_weekly'), value: 'weekly' },
···
               <InputBase
                 id="startDate"
                 v-model="startDate"
-                :disabled="pending"
+                :disabled="activeMetricState.pending"
                 type="date"
                 class="w-full min-w-0 bg-transparent ps-7"
                 size="medium"
···
               <InputBase
                 id="endDate"
                 v-model="endDate"
-                :disabled="pending"
+                :disabled="activeMetricState.pending"
                 type="date"
                 class="w-full min-w-0 bg-transparent ps-7"
                 size="medium"
···
       </div>
     </div>
 
-    <h2 id="download-analytics-title" class="sr-only">
-      {{ $t('package.downloads.title') }}
+    <h2 id="trends-chart-title" class="sr-only">
+      {{ $t('package.trends.title') }} — {{ activeMetricDef.label }}
     </h2>
 
-    <div role="region" aria-labelledby="download-analytics-title">
+    <!-- Chart panel (active metric) -->
+    <div role="region" aria-labelledby="trends-chart-title" class="min-h-[260px]">
       <ClientOnly v-if="chartData.dataset">
         <div :data-pending="pending" :data-minimap-visible="maxDatapoints > 6">
           <VueUiXy
···
           <div class="min-h-[260px]" />
         </template>
       </ClientOnly>
-    </div>
 
-    <div
-      v-if="!chartData.dataset && !pending"
-      class="min-h-[260px] flex items-center justify-center text-fg-subtle font-mono text-sm"
-    >
-      {{
-        $t('package.trends.no_data', {
-          facet: $t('package.trends.items.downloads'),
-        })
-      }}
+      <div
+        v-if="!chartData.dataset && !activeMetricState.pending"
+        class="min-h-[260px] flex items-center justify-center text-fg-subtle font-mono text-sm"
+      >
+        {{ $t('package.trends.no_data') }}
+      </div>
     </div>
 
     <div
-      v-if="pending"
+      v-if="activeMetricState.pending"
       role="status"
       aria-live="polite"
       class="absolute top-1/2 inset-is-1/2 -translate-x-1/2 -translate-y-1/2 text-xs text-fg-subtle font-mono bg-bg/70 backdrop-blur px-3 py-2 rounded-md border border-border"
···
 
 /* Override default placement of the refresh button to have it to the minimap's side */
 @media screen and (min-width: 767px) {
-  #download-analytics .vue-data-ui-refresh-button {
+  #trends-chart .vue-data-ui-refresh-button {
     top: -0.6rem !important;
     left: calc(100% + 2rem) !important;
   }

app/components/Package/WeeklyDownloadStats.vue

···
   return isDarkMode.value ? accent.value : lightenOklch(accent.value, 0.5)
 })
 
-const weeklyDownloads = shallowRef<WeeklyDownloadPoint[]>([])
+const weeklyDownloads = shallowRef<WeeklyDataPoint[]>([])
 const isLoadingWeeklyDownloads = shallowRef(true)
 const hasWeeklyDownloads = computed(() => weeklyDownloads.value.length > 0)
 
···
       () => props.createdIso,
       () => ({ granularity: 'week' as const, weeks: 52 }),
     )
-    weeklyDownloads.value = (result as WeeklyDownloadPoint[]) ?? []
+    weeklyDownloads.value = (result as WeeklyDataPoint[]) ?? []
   } catch {
     weeklyDownloads.value = []
   } finally {
···
 
 const dataset = computed(() =>
   weeklyDownloads.value.map(d => ({
-    value: d?.downloads ?? 0,
+    value: d?.value ?? 0,
     period: $t('package.trends.date_range', {
       start: d.weekStart ?? '-',
       end: d.weekEnd ?? '-',
···
     <!-- The Chart is mounted after the dialog has transitioned -->
     <!-- This avoids flaky behavior that hides the chart's minimap half of the time -->
     <Transition name="opacity" mode="out-in">
-      <PackageDownloadAnalytics
+      <PackageTrendsChart
         v-if="hasChartModalTransitioned"
         :weeklyDownloads="weeklyDownloads"
         :inModal="true"
         :packageName="props.packageName"
         :createdIso="createdIso"
+        show-facet-selector
       />
     </Transition>
 
-    <!-- This placeholder bears the same dimensions as the PackageDownloadAnalytics component -->
+    <!-- This placeholder bears the same dimensions as the PackageTrendsChart component -->
     <!-- Avoids CLS when the dialog has transitioned -->
     <div
       v-if="!hasChartModalTransitioned"

app/composables/useCharts.ts

···
   time?: Record<string, string>
 }
 
-export type DailyDownloadPoint = { downloads: number; day: string; timestamp: number }
-export type WeeklyDownloadPoint = {
-  downloads: number
+export type DailyDataPoint = { value: number; day: string; timestamp: number }
+export type WeeklyDataPoint = {
+  value: number
   weekKey: string
   weekStart: string
   weekEnd: string
   timestampStart: number
   timestampEnd: number
 }
-export type MonthlyDownloadPoint = { downloads: number; month: string; timestamp: number }
-export type YearlyDownloadPoint = { downloads: number; year: string; timestamp: number }
+export type MonthlyDataPoint = { value: number; month: string; timestamp: number }
+export type YearlyDataPoint = { value: number; year: string; timestamp: number }
 
-type PackageDownloadEvolutionOptionsBase = {
+type EvolutionOptionsBase = {
   startDate?: string
   endDate?: string
 }
 
-export type PackageDownloadEvolutionOptionsDay = PackageDownloadEvolutionOptionsBase & {
+export type EvolutionOptionsDay = EvolutionOptionsBase & {
   granularity: 'day'
 }
-export type PackageDownloadEvolutionOptionsWeek = PackageDownloadEvolutionOptionsBase & {
+export type EvolutionOptionsWeek = EvolutionOptionsBase & {
   granularity: 'week'
   weeks?: number
 }
-export type PackageDownloadEvolutionOptionsMonth = PackageDownloadEvolutionOptionsBase & {
+export type EvolutionOptionsMonth = EvolutionOptionsBase & {
   granularity: 'month'
   months?: number
 }
-export type PackageDownloadEvolutionOptionsYear = PackageDownloadEvolutionOptionsBase & {
+export type EvolutionOptionsYear = EvolutionOptionsBase & {
   granularity: 'year'
 }
 
-export type PackageDownloadEvolutionOptions =
-  | PackageDownloadEvolutionOptionsDay
-  | PackageDownloadEvolutionOptionsWeek
-  | PackageDownloadEvolutionOptionsMonth
-  | PackageDownloadEvolutionOptionsYear
+export type EvolutionOptions =
+  | EvolutionOptionsDay
+  | EvolutionOptionsWeek
+  | EvolutionOptionsMonth
+  | EvolutionOptionsYear
 
-type DailyDownloadsResponse = { downloads: Array<{ day: string; downloads: number }> }
+type DailyRawPoint = { day: string; value: number }
 
 function toIsoDateString(date: Date): string {
   return date.toISOString().slice(0, 10)
···
   return chunks
 }
 
-function mergeDailyPoints(
-  points: Array<{ day: string; downloads: number }>,
-): Array<{ day: string; downloads: number }> {
-  const downloadsByDay = new Map<string, number>()
+function mergeDailyPoints(points: DailyRawPoint[]): DailyRawPoint[] {
+  const valuesByDay = new Map<string, number>()
 
   for (const point of points) {
-    downloadsByDay.set(point.day, (downloadsByDay.get(point.day) ?? 0) + point.downloads)
+    valuesByDay.set(point.day, (valuesByDay.get(point.day) ?? 0) + point.value)
   }
 
-  return Array.from(downloadsByDay.entries())
+  return Array.from(valuesByDay.entries())
     .sort(([a], [b]) => a.localeCompare(b))
-    .map(([day, downloads]) => ({ day, downloads }))
+    .map(([day, value]) => ({ day, value }))
 }
 
-function buildDailyEvolutionFromDaily(
-  daily: Array<{ day: string; downloads: number }>,
-): Array<{ day: string; downloads: number; timestamp: number }> {
+export function buildDailyEvolutionFromDaily(daily: DailyRawPoint[]): DailyDataPoint[] {
   return daily
     .slice()
     .sort((a, b) => a.day.localeCompare(b.day))
···
       const dayDate = parseIsoDateOnly(item.day)
       const timestamp = dayDate.getTime()
 
-      return { day: item.day, downloads: item.downloads, timestamp }
+      return { day: item.day, value: item.value, timestamp }
     })
 }
 
-function buildRollingWeeklyEvolutionFromDaily(
-  daily: Array<{ day: string; downloads: number }>,
+export function buildRollingWeeklyEvolutionFromDaily(
+  daily: DailyRawPoint[],
   rangeStartIso: string,
   rangeEndIso: string,
-): WeeklyDownloadPoint[] {
+): WeeklyDataPoint[] {
   const sorted = daily.slice().sort((a, b) => a.day.localeCompare(b.day))
   const rangeStartDate = parseIsoDateOnly(rangeStartIso)
   const rangeEndDate = parseIsoDateOnly(rangeEndIso)
···
     if (dayOffset < 0) continue
 
     const weekIndex = Math.floor(dayOffset / 7)
-    groupedByIndex.set(weekIndex, (groupedByIndex.get(weekIndex) ?? 0) + item.downloads)
+    groupedByIndex.set(weekIndex, (groupedByIndex.get(weekIndex) ?? 0) + item.value)
   }
 
   return Array.from(groupedByIndex.entries())
     .sort(([a], [b]) => a - b)
-    .map(([weekIndex, downloads]) => {
+    .map(([weekIndex, value]) => {
       const weekStartDate = addDays(rangeStartDate, weekIndex * 7)
       const weekEndDate = addDays(weekStartDate, 6)
 
···
       const timestampEnd = clampedWeekEndDate.getTime()
 
       return {
-        downloads,
+        value,
         weekKey: `${weekStartIso}_${weekEndIso}`,
         weekStart: weekStartIso,
         weekEnd: weekEndIso,
···
     })
 }
 
-function buildMonthlyEvolutionFromDaily(
-  daily: Array<{ day: string; downloads: number }>,
-): Array<{ month: string; downloads: number; timestamp: number }> {
+export function buildMonthlyEvolutionFromDaily(daily: DailyRawPoint[]): MonthlyDataPoint[] {
   const sorted = daily.slice().sort((a, b) => a.day.localeCompare(b.day))
-  const downloadsByMonth = new Map<string, number>()
+  const valuesByMonth = new Map<string, number>()
 
   for (const item of sorted) {
     const month = item.day.slice(0, 7)
-    downloadsByMonth.set(month, (downloadsByMonth.get(month) ?? 0) + item.downloads)
+    valuesByMonth.set(month, (valuesByMonth.get(month) ?? 0) + item.value)
   }
 
-  return Array.from(downloadsByMonth.entries())
+  return Array.from(valuesByMonth.entries())
     .sort(([a], [b]) => a.localeCompare(b))
-    .map(([month, downloads]) => {
+    .map(([month, value]) => {
       const monthStartDate = parseIsoDateOnly(`${month}-01`)
       const timestamp = monthStartDate.getTime()
-      return { month, downloads, timestamp }
+      return { month, value, timestamp }
     })
 }
 
-function buildYearlyEvolutionFromDaily(
-  daily: Array<{ day: string; downloads: number }>,
-): Array<{ year: string; downloads: number; timestamp: number }> {
+export function buildYearlyEvolutionFromDaily(daily: DailyRawPoint[]): YearlyDataPoint[] {
   const sorted = daily.slice().sort((a, b) => a.day.localeCompare(b.day))
-  const downloadsByYear = new Map<string, number>()
+  const valuesByYear = new Map<string, number>()
 
   for (const item of sorted) {
     const year = item.day.slice(0, 4)
-    downloadsByYear.set(year, (downloadsByYear.get(year) ?? 0) + item.downloads)
+    valuesByYear.set(year, (valuesByYear.get(year) ?? 0) + item.value)
   }
 
-  return Array.from(downloadsByYear.entries())
+  return Array.from(valuesByYear.entries())
     .sort(([a], [b]) => a.localeCompare(b))
-    .map(([year, downloads]) => {
+    .map(([year, value]) => {
       const yearStartDate = parseIsoDateOnly(`${year}-01-01`)
       const timestamp = yearStartDate.getTime()
-      return { year, downloads, timestamp }
+      return { year, value, timestamp }
     })
 }
 
-function getClientDailyRangePromiseCache() {
-  if (!import.meta.client) return null
-
-  const globalScope = globalThis as unknown as {
-    __npmDailyRangePromiseCache?: Map<string, Promise<Array<{ day: string; downloads: number }>>>
-  }
-
-  if (!globalScope.__npmDailyRangePromiseCache) {
-    globalScope.__npmDailyRangePromiseCache = new Map()
-  }
+const npmDailyRangeCache = import.meta.client ? new Map<string, Promise<DailyRawPoint[]>>() : null
+const likesEvolutionCache = import.meta.client ? new Map<string, Promise<DailyRawPoint[]>>() : null
 
-  return globalScope.__npmDailyRangePromiseCache
+/** Clears client-side promise caches. Exported for use in tests. */
+export function clearClientCaches() {
+  npmDailyRangeCache?.clear()
+  likesEvolutionCache?.clear()
 }
 
 async function fetchDailyRangeCached(packageName: string, startIso: string, endIso: string) {
-  const cache = getClientDailyRangePromiseCache()
+  const cache = npmDailyRangeCache
 
   if (!cache) {
     const response = await fetchNpmDownloadsRange(packageName, startIso, endIso)
-    return [...response.downloads].sort((a, b) => a.day.localeCompare(b.day))
+    return [...response.downloads]
+      .sort((a, b) => a.day.localeCompare(b.day))
+      .map(d => ({ day: d.day, value: d.downloads }))
   }
 
   const cacheKey = `${packageName}:${startIso}:${endIso}`
···
   if (cachedPromise) return cachedPromise
 
   const promise = fetchNpmDownloadsRange(packageName, startIso, endIso)
-    .then((response: DailyDownloadsResponse) =>
-      [...response.downloads].sort((a, b) => a.day.localeCompare(b.day)),
+    .then(response =>
+      [...response.downloads]
+        .sort((a, b) => a.day.localeCompare(b.day))
+        .map(d => ({ day: d.day, value: d.downloads })),
     )
     .catch(error => {
       cache.delete(cacheKey)
···
     return fetchDailyRangeCached(packageName, startIso, endIso)
   }
 
-  const all: Array<{ day: string; downloads: number }> = []
+  const all: DailyRawPoint[] = []
 
   for (const range of ranges) {
     const part = await fetchDailyRangeCached(packageName, range.startIso, range.endIso)
···
   return /^\d{4}-\d{2}-\d{2}$/.test(dateOnly) ? dateOnly : null
 }
 
-function getNpmPackageCreationDate(packument: PackumentLikeForTime): string | null {
+export function getNpmPackageCreationDate(packument: PackumentLikeForTime): string | null {
   const time = packument.time
   if (!time) return null
   if (time.created) return time.created
···
 
 export function useCharts() {
   function resolveDateRange(
-    downloadEvolutionOptions: PackageDownloadEvolutionOptions,
+    evolutionOptions: EvolutionOptions,
     packageCreatedIso: string | null,
   ): { start: Date; end: Date } {
     const today = new Date()
···
       Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate() - 1),
     )
 
-    const endDateOnly = toDateOnly(downloadEvolutionOptions.endDate)
+    const endDateOnly = toDateOnly(evolutionOptions.endDate)
     const end = endDateOnly ? parseIsoDateOnly(endDateOnly) : yesterday
 
-    const startDateOnly = toDateOnly(downloadEvolutionOptions.startDate)
+    const startDateOnly = toDateOnly(evolutionOptions.startDate)
     if (startDateOnly) {
       const start = parseIsoDateOnly(startDateOnly)
       return { start, end }
···
 
     let start: Date
 
-    if (downloadEvolutionOptions.granularity === 'year') {
+    if (evolutionOptions.granularity === 'year') {
       if (packageCreatedIso) {
         start = startOfUtcYear(new Date(packageCreatedIso))
       } else {
         start = addDays(end, -(5 * 365) + 1)
       }
-    } else if (downloadEvolutionOptions.granularity === 'month') {
-      const monthCount = downloadEvolutionOptions.months ?? 12
+    } else if (evolutionOptions.granularity === 'month') {
+      const monthCount = evolutionOptions.months ?? 12
       const firstOfThisMonth = startOfUtcMonth(end)
       start = new Date(
         Date.UTC(
···
           1,
         ),
       )
-    } else if (downloadEvolutionOptions.granularity === 'week') {
-      const weekCount = downloadEvolutionOptions.weeks ?? 52
+    } else if (evolutionOptions.granularity === 'week') {
+      const weekCount = evolutionOptions.weeks ?? 52
 
       // Full rolling weeks ending on `end` (yesterday by default)
       // Range length is exactly weekCount * 7 days (inclusive)
···
   async function fetchPackageDownloadEvolution(
     packageName: MaybeRefOrGetter<string>,
     createdIso: MaybeRefOrGetter<string | null | undefined>,
-    downloadEvolutionOptions: MaybeRefOrGetter<PackageDownloadEvolutionOptions>,
-  ): Promise<
-    DailyDownloadPoint[] | WeeklyDownloadPoint[] | MonthlyDownloadPoint[] | YearlyDownloadPoint[]
-  > {
+    evolutionOptions: MaybeRefOrGetter<EvolutionOptions>,
+  ): Promise<DailyDataPoint[] | WeeklyDataPoint[] | MonthlyDataPoint[] | YearlyDataPoint[]> {
     const resolvedPackageName = toValue(packageName)
     const resolvedCreatedIso = toValue(createdIso) ?? null
-    const resolvedOptions = toValue(downloadEvolutionOptions)
+    const resolvedOptions = toValue(evolutionOptions)
 
     const { start, end } = resolveDateRange(resolvedOptions, resolvedCreatedIso)
 
···
     return buildYearlyEvolutionFromDaily(sortedDaily)
   }
 
+  async function fetchPackageLikesEvolution(
+    packageName: MaybeRefOrGetter<string>,
+    evolutionOptions: MaybeRefOrGetter<EvolutionOptions>,
+  ): Promise<DailyDataPoint[] | WeeklyDataPoint[] | MonthlyDataPoint[] | YearlyDataPoint[]> {
+    const resolvedPackageName = toValue(packageName)
+    const resolvedOptions = toValue(evolutionOptions)
+
+    // Fetch daily likes data (with client-side promise caching)
+    const cache = likesEvolutionCache
+    const cacheKey = resolvedPackageName
+
+    let dailyLikesPromise: Promise<DailyRawPoint[]>
+
+    if (cache?.has(cacheKey)) {
+      dailyLikesPromise = cache.get(cacheKey)!
+    } else {
+      dailyLikesPromise = $fetch<Array<{ day: string; likes: number }>>(
+        `/api/social/likes-evolution/${resolvedPackageName}`,
+      )
+        .then(data => (data ?? []).map(d => ({ day: d.day, value: d.likes })))
+        .catch(error => {
+          cache?.delete(cacheKey)
+          throw error
+        })
+
+      cache?.set(cacheKey, dailyLikesPromise)
+    }
+
+    const sortedDaily = await dailyLikesPromise
+
+    const { start, end } = resolveDateRange(resolvedOptions, null)
+    const startIso = toIsoDateString(start)
+    const endIso = toIsoDateString(end)
+
+    const filteredDaily = sortedDaily.filter(d => d.day >= startIso && d.day <= endIso)
+
+    if (resolvedOptions.granularity === 'day') return buildDailyEvolutionFromDaily(filteredDaily)
+    if (resolvedOptions.granularity === 'week')
+      return buildRollingWeeklyEvolutionFromDaily(filteredDaily, startIso, endIso)
+    if (resolvedOptions.granularity === 'month')
+      return buildMonthlyEvolutionFromDaily(filteredDaily)
+    return buildYearlyEvolutionFromDaily(filteredDaily)
+  }
+
   return {
     fetchPackageDownloadEvolution,
+    fetchPackageLikesEvolution,
     getNpmPackageCreationDate,
   }
 }

i18n/locales/ar.json

···
     "downloads": {
       "title": "التنزيلات الأسبوعية",
       "analyze": "تحليل التنزيلات",
-      "community_distribution": "عرض توزيع تبنّي المجتمع",
-      "modal_title": "التنزيلات"
+      "community_distribution": "عرض توزيع تبنّي المجتمع"
     },
     "install_scripts": {
       "title": "سكربتات التثبيت",

i18n/locales/az-AZ.json

···
     },
     "downloads": {
       "title": "Həftəlik Endirmələr",
-      "analyze": "Endirmələri təhlil et",
-      "modal_title": "Endirmələr"
+      "analyze": "Endirmələri təhlil et"
     },
     "install_scripts": {
       "title": "Quraşdırma Skriptləri",

i18n/locales/bn-IN.json

···
     },
     "downloads": {
       "title": "সাপ্তাহিক ডাউনলোড",
-      "analyze": "ডাউনলোড বিশ্লেষণ করুন",
-      "modal_title": "ডাউনলোড"
+      "analyze": "ডাউনলোড বিশ্লেষণ করুন"
     },
     "install_scripts": {
       "title": "ইনস্টল স্ক্রিপ্ট",

i18n/locales/cs-CZ.json

···
     },
     "downloads": {
       "title": "Týdenní stažení",
-      "analyze": "Analyzovat stažení",
-      "modal_title": "Stažení"
+      "analyze": "Analyzovat stažení"
     },
     "install_scripts": {
       "title": "Instalační skripty",

i18n/locales/de-DE.json

···
     "downloads": {
       "title": "Wöchentliche Downloads",
       "analyze": "Downloads analysieren",
-      "community_distribution": "Community-Adoptionsverteilung ansehen",
-      "modal_title": "Downloads"
+      "community_distribution": "Community-Adoptionsverteilung ansehen"
     },
     "install_scripts": {
       "title": "Installationsskripte",
···
         "types_none": "Keine",
         "vulnerabilities_summary": "{count} ({critical}C/{high}H)",
         "up_to_you": "Deine Entscheidung!"
-      },
-      "trends": {
-        "title": "Wöchentliche Downloads"
       }
     }
   },

i18n/locales/en.json

···
       "legend_estimation": "Estimation",
       "no_data": "No data available",
       "y_axis_label": "{granularity} {facet}",
+      "facet": "Facet",
+      "title": "Trends",
       "items": {
-        "downloads": "Downloads"
+        "downloads": "Downloads",
+        "likes": "Likes"
       }
     },
     "downloads": {
       "title": "Weekly Downloads",
       "analyze": "Analyze downloads",
-      "community_distribution": "View community adoption distribution",
-      "modal_title": "Downloads"
+      "community_distribution": "View community adoption distribution"
     },
     "install_scripts": {
       "title": "Install Scripts",
···
         "up_to_you": "Up to you!"
       },
       "trends": {
-        "title": "Weekly Downloads"
+        "title": "Compare Trends"
       }
     }
   },

i18n/locales/es.json

···
     "downloads": {
       "title": "Descargas Semanales",
       "analyze": "Analizar descargas",
-      "community_distribution": "Ver distribución de adopción comunitaria",
-      "modal_title": "Descargas"
+      "community_distribution": "Ver distribución de adopción comunitaria"
     },
     "install_scripts": {
       "title": "Scripts de Instalación",

i18n/locales/fr-FR.json

···
       "show_more": "(afficher {count} de plus)",
       "show_less": "(afficher moins)"
     },
-    "trends": {
-      "granularity": "Granularité",
-      "granularity_daily": "Quotidien",
-      "granularity_weekly": "Hebdomadaire",
-      "granularity_monthly": "Mensuel",
-      "granularity_yearly": "Annuel",
-      "start_date": "Début",
-      "end_date": "Fin",
-      "loading": "Chargement...",
-      "date_range": "{start} au {end}",
-      "date_range_multiline": "{start}\nau {end}",
-      "download_file": "Télécharger {fileType}",
-      "toggle_annotator": "Afficher/Masquer l'annotateur",
-      "legend_estimation": "Estimation",
-      "no_data": "Données non disponibles",
-      "y_axis_label": "{facet} {granularity}",
-      "items": {
-        "downloads": "Téléchargements"
-      }
-    },
     "downloads": {
       "title": "Téléchargements hebdomadaires",
       "analyze": "Analyser les téléchargements",
-      "community_distribution": "Voir la distribution des versions téléchargées par la communauté",
-      "modal_title": "Téléchargements"
+      "community_distribution": "Voir la distribution des versions téléchargées par la communauté"
     },
     "install_scripts": {
       "title": "Scripts d'installation",
···
       "published": "Récemment publié",
       "name_asc": "Nom (A-Z)",
       "name_desc": "Nom (Z-A)"
+    },
+    "trends": {
+      "granularity": "Granularité",
+      "granularity_daily": "Quotidien",
+      "granularity_weekly": "Hebdomadaire",
+      "granularity_monthly": "Mensuel",
+      "granularity_yearly": "Annuel",
+      "start_date": "Début",
+      "end_date": "Fin",
+      "loading": "Chargement...",
+      "date_range": "{start} au {end}",
+      "date_range_multiline": "{start}\nau {end}",
+      "download_file": "Télécharger {fileType}",
+      "toggle_annotator": "Afficher/Masquer l'annotateur",
+      "legend_estimation": "Estimation",
+      "no_data": "Données non disponibles",
+      "y_axis_label": "{facet} {granularity}",
+      "facet": "Facette",
+      "title": "Tendances",
+      "items": {
+        "downloads": "Téléchargements",
+        "likes": "J'aime"
+      }
     },
     "size": {
       "b": "{size} o",
···
         "up_to_you": "À vous de décider !"
       },
       "trends": {
-        "title": "Téléchargements hebdomadaires"
+        "title": "Comparer les tendances"
       }
     }
   },

i18n/locales/hi-IN.json

···
     },
     "downloads": {
       "title": "साप्ताहिक डाउनलोड्स",
-      "analyze": "डाउनलोड्स का विश्लेषण करें",
-      "modal_title": "डाउनलोड्स"
+      "analyze": "डाउनलोड्स का विश्लेषण करें"
     },
     "install_scripts": {
       "title": "इंस्टॉल स्क्रिप्ट्स",

i18n/locales/hu-HU.json

···
     },
     "downloads": {
       "title": "Heti letöltések",
-      "analyze": "Letöltések elemzése",
-      "modal_title": "Letöltések"
+      "analyze": "Letöltések elemzése"
     },
     "install_scripts": {
       "title": "Telepítő scriptek",

i18n/locales/id-ID.json

···
     },
     "downloads": {
       "title": "Unduhan Mingguan",
-      "analyze": "Analisis unduhan",
-      "modal_title": "Unduhan"
+      "analyze": "Analisis unduhan"
     },
     "install_scripts": {
       "title": "Skrip Instalasi",

i18n/locales/it-IT.json

···
     "downloads": {
       "title": "Download settimanali",
       "analyze": "Analizza download",
-      "community_distribution": "Visualizza distribuzione adozione della comunità",
-      "modal_title": "Download"
+      "community_distribution": "Visualizza distribuzione adozione della comunità"
     },
     "install_scripts": {
       "title": "Script di installazione",

i18n/locales/ja-JP.json

···
     "downloads": {
       "title": "週間ダウンロード数",
       "analyze": "ダウンロード数を分析",
-      "community_distribution": "コミュニティの採用分布を表示",
-      "modal_title": "ダウンロード数"
+      "community_distribution": "コミュニティの採用分布を表示"
     },
     "install_scripts": {
       "title": "インストールスクリプト",

i18n/locales/ne-NP.json

···
     },
     "downloads": {
       "title": "साप्ताहिक डाउनलोड",
-      "analyze": "डाउनलोड विश्लेषण",
-      "modal_title": "डाउनलोडहरू"
+      "analyze": "डाउनलोड विश्लेषण"
     },
     "install_scripts": {
       "title": "इन्स्टल स्क्रिप्टहरू",

i18n/locales/no-NO.json

···
     "downloads": {
       "title": "Ukentlige nedlastinger",
       "analyze": "Analyser nedlastinger",
-      "community_distribution": "Vis distribusjon av bruk i fellesskapet",
-      "modal_title": "Nedlastinger"
+      "community_distribution": "Vis distribusjon av bruk i fellesskapet"
     },
     "install_scripts": {
       "title": "Installasjonsskript",

i18n/locales/pl-PL.json

···
     },
     "downloads": {
       "title": "Pobrania tygodniowe",
-      "analyze": "Analizuj pobrania",
-      "modal_title": "Pobrania"
+      "analyze": "Analizuj pobrania"
     },
     "install_scripts": {
       "title": "Skrypty instalacji",

i18n/locales/pt-BR.json

···
     },
     "downloads": {
       "title": "Downloads Semanais",
-      "analyze": "Analisar downloads",
-      "modal_title": "Downloads"
+      "analyze": "Analisar downloads"
     },
     "install_scripts": {
       "title": "Scripts de Instalação",

i18n/locales/ru-RU.json

···
     },
     "downloads": {
       "title": "Загрузки за неделю",
-      "analyze": "Анализировать загрузки",
-      "modal_title": "Загрузки"
+      "analyze": "Анализировать загрузки"
     },
     "install_scripts": {
       "title": "Скрипты установки",

i18n/locales/te-IN.json

···
     },
     "downloads": {
       "title": "వారపు డౌన్‌లోడ్‌లు",
-      "analyze": "డౌన్‌లోడ్‌లను విశ్లేషించండి",
-      "modal_title": "డౌన్‌లోడ్‌లు"
+      "analyze": "డౌన్‌లోడ్‌లను విశ్లేషించండి"
     },
     "install_scripts": {
       "title": "ఇన్‌స్టాల్ స్క్రిప్ట్‌లు",

i18n/locales/uk-UA.json

···
     },
     "downloads": {
       "title": "Завантажень на тиждень",
-      "analyze": "Проаналізувати завантаження",
-      "modal_title": "Завантаження"
+      "analyze": "Проаналізувати завантаження"
     },
     "install_scripts": {
       "title": "Скрипти встановлення",

i18n/locales/zh-CN.json

···
     "downloads": {
       "title": "每周下载量",
       "analyze": "分析下载量",
-      "community_distribution": "查看社区采用分布",
-      "modal_title": "下载量"
+      "community_distribution": "查看社区采用分布"
     },
     "install_scripts": {
       "title": "安装脚本",
···
         "types_none": "无",
         "vulnerabilities_summary": "{count}（{critical} 严重/{high} 高）",
         "up_to_you": "由你决定!"
-      },
-      "trends": {
-        "title": "每周下载量"
       }
     }
   },

i18n/locales/zh-TW.json

···
     "downloads": {
       "title": "每週下載量",
       "analyze": "分析下載量",
-      "community_distribution": "檢視社群採用分布",
-      "modal_title": "下載量"
+      "community_distribution": "檢視社群採用分布"
     },
     "install_scripts": {
       "title": "安裝腳本",

i18n/schema.json

···
             "y_axis_label": {
               "type": "string"
             },
+            "facet": {
+              "type": "string"
+            },
+            "title": {
+              "type": "string"
+            },
             "items": {
               "type": "object",
               "properties": {
                 "downloads": {
+                  "type": "string"
+                },
+                "likes": {
                   "type": "string"
                 }
               },
···
               "type": "string"
             },
             "community_distribution": {
-              "type": "string"
-            },
-            "modal_title": {
               "type": "string"
             }
           },

lunaria/files/ar-EG.json

···
     "downloads": {
       "title": "التنزيلات الأسبوعية",
       "analyze": "تحليل التنزيلات",
-      "community_distribution": "عرض توزيع تبنّي المجتمع",
-      "modal_title": "التنزيلات"
+      "community_distribution": "عرض توزيع تبنّي المجتمع"
     },
     "install_scripts": {
       "title": "سكربتات التثبيت",

lunaria/files/az-AZ.json

···
     },
     "downloads": {
       "title": "Həftəlik Endirmələr",
-      "analyze": "Endirmələri təhlil et",
-      "modal_title": "Endirmələr"
+      "analyze": "Endirmələri təhlil et"
     },
     "install_scripts": {
       "title": "Quraşdırma Skriptləri",

lunaria/files/bn-IN.json

···
     },
     "downloads": {
       "title": "সাপ্তাহিক ডাউনলোড",
-      "analyze": "ডাউনলোড বিশ্লেষণ করুন",
-      "modal_title": "ডাউনলোড"
+      "analyze": "ডাউনলোড বিশ্লেষণ করুন"
     },
     "install_scripts": {
       "title": "ইনস্টল স্ক্রিপ্ট",

lunaria/files/cs-CZ.json

···
     },
     "downloads": {
       "title": "Týdenní stažení",
-      "analyze": "Analyzovat stažení",
-      "modal_title": "Stažení"
+      "analyze": "Analyzovat stažení"
     },
     "install_scripts": {
       "title": "Instalační skripty",

lunaria/files/de-DE.json

···
     "downloads": {
       "title": "Wöchentliche Downloads",
       "analyze": "Downloads analysieren",
-      "community_distribution": "Community-Adoptionsverteilung ansehen",
-      "modal_title": "Downloads"
+      "community_distribution": "Community-Adoptionsverteilung ansehen"
     },
     "install_scripts": {
       "title": "Installationsskripte",
···
         "types_none": "Keine",
         "vulnerabilities_summary": "{count} ({critical}C/{high}H)",
         "up_to_you": "Deine Entscheidung!"
-      },
-      "trends": {
-        "title": "Wöchentliche Downloads"
       }
     }
   },

lunaria/files/en-GB.json

···
       "legend_estimation": "Estimation",
       "no_data": "No data available",
       "y_axis_label": "{granularity} {facet}",
+      "facet": "Facet",
+      "title": "Trends",
       "items": {
-        "downloads": "Downloads"
+        "downloads": "Downloads",
+        "likes": "Likes"
       }
     },
     "downloads": {
       "title": "Weekly Downloads",
       "analyze": "Analyze downloads",
-      "community_distribution": "View community adoption distribution",
-      "modal_title": "Downloads"
+      "community_distribution": "View community adoption distribution"
     },
     "install_scripts": {
       "title": "Install Scripts",
···
         "up_to_you": "Up to you!"
       },
       "trends": {
-        "title": "Weekly Downloads"
+        "title": "Compare Trends"
       }
     }
   },

lunaria/files/en-US.json

···
       "legend_estimation": "Estimation",
       "no_data": "No data available",
       "y_axis_label": "{granularity} {facet}",
+      "facet": "Facet",
+      "title": "Trends",
       "items": {
-        "downloads": "Downloads"
+        "downloads": "Downloads",
+        "likes": "Likes"
       }
     },
     "downloads": {
       "title": "Weekly Downloads",
       "analyze": "Analyze downloads",
-      "community_distribution": "View community adoption distribution",
-      "modal_title": "Downloads"
+      "community_distribution": "View community adoption distribution"
     },
     "install_scripts": {
       "title": "Install Scripts",
···
         "up_to_you": "Up to you!"
       },
       "trends": {
-        "title": "Weekly Downloads"
+        "title": "Compare Trends"
       }
     }
   },

lunaria/files/es-419.json

···
     "downloads": {
       "title": "Descargas Semanales",
       "analyze": "Analizar descargas",
-      "community_distribution": "Ver distribución de adopción comunitaria",
-      "modal_title": "Descargas"
+      "community_distribution": "Ver distribución de adopción comunitaria"
     },
     "install_scripts": {
       "title": "Scripts de Instalación",

lunaria/files/es-ES.json

···
     "downloads": {
       "title": "Descargas Semanales",
       "analyze": "Analizar descargas",
-      "community_distribution": "Ver distribución de adopción comunitaria",
-      "modal_title": "Descargas"
+      "community_distribution": "Ver distribución de adopción comunitaria"
     },
     "install_scripts": {
       "title": "Scripts de Instalación",

lunaria/files/fr-FR.json

···
       "show_more": "(afficher {count} de plus)",
       "show_less": "(afficher moins)"
     },
-    "trends": {
-      "granularity": "Granularité",
-      "granularity_daily": "Quotidien",
-      "granularity_weekly": "Hebdomadaire",
-      "granularity_monthly": "Mensuel",
-      "granularity_yearly": "Annuel",
-      "start_date": "Début",
-      "end_date": "Fin",
-      "loading": "Chargement...",
-      "date_range": "{start} au {end}",
-      "date_range_multiline": "{start}\nau {end}",
-      "download_file": "Télécharger {fileType}",
-      "toggle_annotator": "Afficher/Masquer l'annotateur",
-      "legend_estimation": "Estimation",
-      "no_data": "Données non disponibles",
-      "y_axis_label": "{facet} {granularity}",
-      "items": {
-        "downloads": "Téléchargements"
-      }
-    },
     "downloads": {
       "title": "Téléchargements hebdomadaires",
       "analyze": "Analyser les téléchargements",
-      "community_distribution": "Voir la distribution des versions téléchargées par la communauté",
-      "modal_title": "Téléchargements"
+      "community_distribution": "Voir la distribution des versions téléchargées par la communauté"
     },
     "install_scripts": {
       "title": "Scripts d'installation",
···
       "published": "Récemment publié",
       "name_asc": "Nom (A-Z)",
       "name_desc": "Nom (Z-A)"
+    },
+    "trends": {
+      "granularity": "Granularité",
+      "granularity_daily": "Quotidien",
+      "granularity_weekly": "Hebdomadaire",
+      "granularity_monthly": "Mensuel",
+      "granularity_yearly": "Annuel",
+      "start_date": "Début",
+      "end_date": "Fin",
+      "loading": "Chargement...",
+      "date_range": "{start} au {end}",
+      "date_range_multiline": "{start}\nau {end}",
+      "download_file": "Télécharger {fileType}",
+      "toggle_annotator": "Afficher/Masquer l'annotateur",
+      "legend_estimation": "Estimation",
+      "no_data": "Données non disponibles",
+      "y_axis_label": "{facet} {granularity}",
+      "facet": "Facette",
+      "title": "Tendances",
+      "items": {
+        "downloads": "Téléchargements",
+        "likes": "J'aime"
+      }
     },
     "size": {
       "b": "{size} o",
···
         "up_to_you": "À vous de décider !"
       },
       "trends": {
-        "title": "Téléchargements hebdomadaires"
+        "title": "Comparer les tendances"
       }
     }
   },

lunaria/files/hi-IN.json

···
     },
     "downloads": {
       "title": "साप्ताहिक डाउनलोड्स",
-      "analyze": "डाउनलोड्स का विश्लेषण करें",
-      "modal_title": "डाउनलोड्स"
+      "analyze": "डाउनलोड्स का विश्लेषण करें"
     },
     "install_scripts": {
       "title": "इंस्टॉल स्क्रिप्ट्स",

lunaria/files/hu-HU.json

···
     },
     "downloads": {
       "title": "Heti letöltések",
-      "analyze": "Letöltések elemzése",
-      "modal_title": "Letöltések"
+      "analyze": "Letöltések elemzése"
     },
     "install_scripts": {
       "title": "Telepítő scriptek",

lunaria/files/id-ID.json

···
     },
     "downloads": {
       "title": "Unduhan Mingguan",
-      "analyze": "Analisis unduhan",
-      "modal_title": "Unduhan"
+      "analyze": "Analisis unduhan"
     },
     "install_scripts": {
       "title": "Skrip Instalasi",

lunaria/files/it-IT.json

···
     "downloads": {
       "title": "Download settimanali",
       "analyze": "Analizza download",
-      "community_distribution": "Visualizza distribuzione adozione della comunità",
-      "modal_title": "Download"
+      "community_distribution": "Visualizza distribuzione adozione della comunità"
     },
     "install_scripts": {
       "title": "Script di installazione",

lunaria/files/ja-JP.json

···
     "downloads": {
       "title": "週間ダウンロード数",
       "analyze": "ダウンロード数を分析",
-      "community_distribution": "コミュニティの採用分布を表示",
-      "modal_title": "ダウンロード数"
+      "community_distribution": "コミュニティの採用分布を表示"
     },
     "install_scripts": {
       "title": "インストールスクリプト",

lunaria/files/ne-NP.json

···
     },
     "downloads": {
       "title": "साप्ताहिक डाउनलोड",
-      "analyze": "डाउनलोड विश्लेषण",
-      "modal_title": "डाउनलोडहरू"
+      "analyze": "डाउनलोड विश्लेषण"
     },
     "install_scripts": {
       "title": "इन्स्टल स्क्रिप्टहरू",

lunaria/files/no-NO.json

···
     "downloads": {
       "title": "Ukentlige nedlastinger",
       "analyze": "Analyser nedlastinger",
-      "community_distribution": "Vis distribusjon av bruk i fellesskapet",
-      "modal_title": "Nedlastinger"
+      "community_distribution": "Vis distribusjon av bruk i fellesskapet"
     },
     "install_scripts": {
       "title": "Installasjonsskript",

lunaria/files/pl-PL.json

···
     },
     "downloads": {
       "title": "Pobrania tygodniowe",
-      "analyze": "Analizuj pobrania",
-      "modal_title": "Pobrania"
+      "analyze": "Analizuj pobrania"
     },
     "install_scripts": {
       "title": "Skrypty instalacji",

lunaria/files/pt-BR.json

···
     },
     "downloads": {
       "title": "Downloads Semanais",
-      "analyze": "Analisar downloads",
-      "modal_title": "Downloads"
+      "analyze": "Analisar downloads"
     },
     "install_scripts": {
       "title": "Scripts de Instalação",

lunaria/files/ru-RU.json

···
     },
     "downloads": {
       "title": "Загрузки за неделю",
-      "analyze": "Анализировать загрузки",
-      "modal_title": "Загрузки"
+      "analyze": "Анализировать загрузки"
     },
     "install_scripts": {
       "title": "Скрипты установки",

lunaria/files/te-IN.json

···
     },
     "downloads": {
       "title": "వారపు డౌన్‌లోడ్‌లు",
-      "analyze": "డౌన్‌లోడ్‌లను విశ్లేషించండి",
-      "modal_title": "డౌన్‌లోడ్‌లు"
+      "analyze": "డౌన్‌లోడ్‌లను విశ్లేషించండి"
     },
     "install_scripts": {
       "title": "ఇన్‌స్టాల్ స్క్రిప్ట్‌లు",

lunaria/files/uk-UA.json

···
     },
     "downloads": {
       "title": "Завантажень на тиждень",
-      "analyze": "Проаналізувати завантаження",
-      "modal_title": "Завантаження"
+      "analyze": "Проаналізувати завантаження"
     },
     "install_scripts": {
       "title": "Скрипти встановлення",

lunaria/files/zh-CN.json

···
     "downloads": {
       "title": "每周下载量",
       "analyze": "分析下载量",
-      "community_distribution": "查看社区采用分布",
-      "modal_title": "下载量"
+      "community_distribution": "查看社区采用分布"
     },
     "install_scripts": {
       "title": "安装脚本",
···
         "types_none": "无",
         "vulnerabilities_summary": "{count}（{critical} 严重/{high} 高）",
         "up_to_you": "由你决定!"
-      },
-      "trends": {
-        "title": "每周下载量"
       }
     }
   },

lunaria/files/zh-TW.json

···
     "downloads": {
       "title": "每週下載量",
       "analyze": "分析下載量",
-      "community_distribution": "檢視社群採用分布",
-      "modal_title": "下載量"
+      "community_distribution": "檢視社群採用分布"
     },
     "install_scripts": {
       "title": "安裝腳本",

server/api/social/likes-evolution/[...pkg].get.ts

···
+export default defineEventHandler(async event => {
+  const packageName = getRouterParam(event, 'pkg')
+  if (!packageName) {
+    throw createError({
+      status: 400,
+      message: 'package name not provided',
+    })
+  }
+
+  const likesUtil = new PackageLikesUtils()
+  return await likesUtil.getLikesEvolution(packageName)
+})

server/utils/atproto/utils/likes.ts

···
 import { $nsid as likeNsid } from '#shared/types/lexicons/dev/npmx/feed/like.defs'
 import type { Backlink } from '#shared/utils/constellation'
+import { TID } from '@atproto/common'
 
 //Cache keys and helpers
 const CACHE_PREFIX = 'atproto-likes:'
···
   `${CACHE_PREFIX}${packageName}:users:${did}:liked`
 const CACHE_USERS_BACK_LINK = (packageName: string, did: string) =>
   `${CACHE_PREFIX}${packageName}:users:${did}:backlink`
+const CACHE_EVOLUTION_KEY = (packageName: string) => `${CACHE_PREFIX}${packageName}:evolution`
 
 const CACHE_MAX_AGE = CACHE_MAX_AGE_ONE_MINUTE * 5
 
 /**
+ * Decodes TID timestamps from backlink rkeys and groups by day.
+ * Pure function — no I/O, no side effects.
+ */
+export function aggregateBacklinksByDay(
+  backlinks: Backlink[],
+): Array<{ day: string; likes: number }> {
+  const countsByDay = new Map<string, number>()
+  for (const backlink of backlinks) {
+    try {
+      const tid = TID.fromStr(backlink.rkey)
+      const timestampMs = tid.timestamp() / 1000
+      const date = new Date(timestampMs)
+      const day = date.toISOString().slice(0, 10)
+      countsByDay.set(day, (countsByDay.get(day) ?? 0) + 1)
+    } catch {
+      console.warn(`Skipping non-TID rkey: ${backlink.rkey}`)
+    }
+  }
+  return Array.from(countsByDay.entries())
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([day, likes]) => ({ day, likes }))
+}
+
+/** The subset of Constellation that PackageLikesUtils actually needs. */
+export type ConstellationLike = Pick<Constellation, 'getBackLinks' | 'getLinksDistinctDids'>
+
+/**
  * Logic to handle liking, unliking, and seeing if a user has liked a package on npmx
  */
 export class PackageLikesUtils {
-  private readonly constellation: Constellation
+  private readonly constellation: ConstellationLike
   private readonly cache: CacheAdapter
 
-  constructor() {
-    this.constellation = new Constellation(
-      // Passes in a fetch wrapped as cachedfetch since are already doing some heavy caching here
-      async <T = unknown>(
-        url: string,
-        options: Parameters<typeof $fetch>[1] = {},
-        _ttl?: number,
-      ): Promise<CachedFetchResult<T>> => {
-        const data = (await $fetch<T>(url, options)) as T
-        return { data, isStale: false, cachedAt: null }
-      },
-    )
-    this.cache = getCacheAdapter('generic')
+  constructor(deps?: { constellation?: ConstellationLike; cache?: CacheAdapter }) {
+    this.constellation =
+      deps?.constellation ??
+      new Constellation(
+        // Passes in a fetch wrapped as cachedfetch since are already doing some heavy caching here
+        async <T = unknown>(
+          url: string,
+          options: Parameters<typeof $fetch>[1] = {},
+          _ttl?: number,
+        ): Promise<CachedFetchResult<T>> => {
+          const data = (await $fetch<T>(url, options)) as T
+          return { data, isStale: false, cachedAt: null }
+        },
+      )
+    this.cache = deps?.cache ?? getCacheAdapter('generic')
   }
 
   /**
···
       totalLikes: totalLikes,
       userHasLiked: false,
     }
+  }
+
+  /**
+   * Gets the likes evolution for a package as daily {day, likes} points.
+   * Fetches ALL backlinks via paginated constellation calls, decodes TID
+   * timestamps from each rkey, and groups by day.
+   * Results are cached for 5 minutes.
+   */
+  async getLikesEvolution(packageName: string): Promise<Array<{ day: string; likes: number }>> {
+    const cacheKey = CACHE_EVOLUTION_KEY(packageName)
+    const cached = await this.cache.get<Array<{ day: string; likes: number }>>(cacheKey)
+    if (cached) return cached
+
+    const subjectRef = PACKAGE_SUBJECT_REF(packageName)
+    const allBacklinks: Backlink[] = []
+    let cursor: string | undefined
+
+    // Paginate through all backlinks
+    do {
+      const { data } = await this.constellation.getBackLinks(
+        subjectRef,
+        likeNsid,
+        'subjectRef',
+        100,
+        cursor,
+        false,
+        [],
+        0,
+      )
+      allBacklinks.push(...data.records)
+      cursor = data.cursor
+    } while (cursor)
+
+    const result = aggregateBacklinksByDay(allBacklinks)
+
+    await this.cache.set(cacheKey, result, CACHE_MAX_AGE)
+    return result
   }
 }

test/nuxt/a11y.spec.ts

···
 // 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'
 import SearchProviderToggleServer from '~/components/SearchProviderToggle.server.vue'
+import PackageTrendsChart from '~/components/Package/TrendsChart.vue'
 
 describe('component accessibility audits', () => {
   describe('DateTime', () => {
···
     // inherently provided by the native <dialog> element with aria-labelledby.
   })
 
-  describe('PackageDownloadAnalytics', () => {
+  describe('PackageTrendsChart', () => {
     const mockWeeklyDownloads = [
       {
-        downloads: 1000,
+        value: 1000,
         weekKey: '2024-W01',
         weekStart: '2024-01-01',
         weekEnd: '2024-01-07',
···
         timestampEnd: 1704585600,
       },
       {
-        downloads: 1200,
+        value: 1200,
         weekKey: '2024-W02',
         weekStart: '2024-01-08',
         weekEnd: '2024-01-14',
···
         timestampEnd: 1705190400,
       },
       {
-        downloads: 1500,
+        value: 1500,
         weekKey: '2024-W03',
         weekStart: '2024-01-15',
         weekEnd: '2024-01-21',
···
     ]
 
     it('should have no accessibility violations (non-modal)', async () => {
-      const wrapper = await mountSuspended(PackageDownloadAnalytics, {
+      const wrapper = await mountSuspended(PackageTrendsChart, {
         props: {
           weeklyDownloads: mockWeeklyDownloads,
           packageName: 'vue',
···
     })
 
     it('should have no accessibility violations with empty data', async () => {
-      const wrapper = await mountSuspended(PackageDownloadAnalytics, {
+      const wrapper = await mountSuspended(PackageTrendsChart, {
         props: {
           weeklyDownloads: [],
           packageName: 'vue',
···
         props: { packages: [] },
         global: {
           stubs: {
-            DownloadAnalytics: {
-              template: '<div data-test-id="download-analytics-stub"></div>',
+            TrendsChart: {
+              template: '<div data-test-id="trends-chart-stub"></div>',
             },
           },
         },
···
         props: { packages: ['vue', 'react'] },
         global: {
           stubs: {
-            DownloadAnalytics: {
-              template: '<div data-test-id="download-analytics-stub"></div>',
+            TrendsChart: {
+              template: '<div data-test-id="trends-chart-stub"></div>',
             },
           },
         },

test/nuxt/components/PackageWeeklyDownloadStats.spec.ts

···
         weekEnd: '2026-01-07',
         timestampStart: 1767225600000,
         timestampEnd: 1767744000000,
-        downloads: 42,
+        value: 42,
       },
     ])
 

test/nuxt/composables/use-charts.spec.ts

···
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { clearClientCaches } from '~/composables/useCharts'
+
+const mockLikesResponse = [
+  { day: '2025-03-01', likes: 5 },
+  { day: '2025-03-02', likes: 3 },
+  { day: '2025-03-03', likes: 8 },
+  { day: '2025-03-04', likes: 2 },
+  { day: '2025-03-05', likes: 10 },
+  { day: '2025-03-06', likes: 1 },
+  { day: '2025-03-07', likes: 4 },
+  { day: '2025-03-08', likes: 6 },
+  { day: '2025-03-09', likes: 7 },
+  { day: '2025-03-10', likes: 3 },
+]
+
+describe('useCharts – fetchPackageLikesEvolution', () => {
+  let fetchSpy: ReturnType<typeof vi.fn>
+
+  beforeEach(() => {
+    fetchSpy = vi.fn().mockResolvedValue(mockLikesResponse)
+    vi.stubGlobal('$fetch', fetchSpy)
+
+    // Clear any client-side caches between tests
+    clearClientCaches()
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('propagates API errors', async () => {
+    fetchSpy.mockRejectedValueOnce(new Error('Network error'))
+
+    const { fetchPackageLikesEvolution } = useCharts()
+
+    await expect(
+      fetchPackageLikesEvolution('fail-pkg', {
+        granularity: 'day',
+        startDate: '2025-03-01',
+        endDate: '2025-03-10',
+      }),
+    ).rejects.toThrow('Network error')
+  })
+
+  it('returns daily points with value field mapped from likes', async () => {
+    const { fetchPackageLikesEvolution } = useCharts()
+
+    const result = await fetchPackageLikesEvolution('vue', {
+      granularity: 'day',
+      startDate: '2025-03-01',
+      endDate: '2025-03-10',
+    })
+
+    expect(result.length).toBeGreaterThan(0)
+    expect(result[0]).toHaveProperty('value')
+    expect(result[0]).toHaveProperty('day')
+    expect(result[0]).toHaveProperty('timestamp')
+    expect(result[0]).not.toHaveProperty('downloads')
+    expect(result[0]).not.toHaveProperty('likes')
+  })
+
+  it('uses client-side promise caching for repeated calls', async () => {
+    const { fetchPackageLikesEvolution } = useCharts()
+
+    const options = { granularity: 'day' as const, startDate: '2025-03-01', endDate: '2025-03-10' }
+
+    await fetchPackageLikesEvolution('vue', options)
+    await fetchPackageLikesEvolution('vue', options)
+
+    // Should only fetch once thanks to client-side promise caching
+    expect(fetchSpy).toHaveBeenCalledTimes(1)
+  })
+})

test/unit/app/composables/use-charts.spec.ts

···
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('~/utils/npm/api', () => ({
+  fetchNpmDownloadsRange: vi.fn(),
+}))
+
+import {
+  buildDailyEvolutionFromDaily,
+  buildRollingWeeklyEvolutionFromDaily,
+  buildMonthlyEvolutionFromDaily,
+  buildYearlyEvolutionFromDaily,
+  getNpmPackageCreationDate,
+} from '../../../../app/composables/useCharts'
+
+describe('buildDailyEvolutionFromDaily', () => {
+  it('adds timestamps and preserves values', () => {
+    const result = buildDailyEvolutionFromDaily([
+      { day: '2025-03-01', value: 10 },
+      { day: '2025-03-02', value: 20 },
+    ])
+
+    expect(result).toEqual([
+      { day: '2025-03-01', value: 10, timestamp: Date.UTC(2025, 2, 1) },
+      { day: '2025-03-02', value: 20, timestamp: Date.UTC(2025, 2, 2) },
+    ])
+  })
+
+  it('sorts by day', () => {
+    const result = buildDailyEvolutionFromDaily([
+      { day: '2025-03-03', value: 3 },
+      { day: '2025-03-01', value: 1 },
+      { day: '2025-03-02', value: 2 },
+    ])
+
+    expect(result.map(r => r.day)).toEqual(['2025-03-01', '2025-03-02', '2025-03-03'])
+  })
+
+  it('returns empty array for empty input', () => {
+    expect(buildDailyEvolutionFromDaily([])).toEqual([])
+  })
+})
+
+describe('buildRollingWeeklyEvolutionFromDaily', () => {
+  it('groups daily data into rolling 7-day buckets', () => {
+    const daily = Array.from({ length: 14 }, (_, i) => ({
+      day: `2025-03-${String(i + 1).padStart(2, '0')}`,
+      value: 10,
+    }))
+
+    const result = buildRollingWeeklyEvolutionFromDaily(daily, '2025-03-01', '2025-03-14')
+
+    expect(result).toHaveLength(2)
+    expect(result[0]!.value).toBe(70)
+    expect(result[0]!.weekStart).toBe('2025-03-01')
+    expect(result[0]!.weekEnd).toBe('2025-03-07')
+    expect(result[1]!.value).toBe(70)
+    expect(result[1]!.weekStart).toBe('2025-03-08')
+    expect(result[1]!.weekEnd).toBe('2025-03-14')
+  })
+
+  it('clamps last week to range end date', () => {
+    const daily = [
+      { day: '2025-03-01', value: 5 },
+      { day: '2025-03-02', value: 5 },
+      { day: '2025-03-08', value: 10 },
+    ]
+
+    const result = buildRollingWeeklyEvolutionFromDaily(daily, '2025-03-01', '2025-03-09')
+
+    // Last week bucket should be clamped to end date
+    const lastWeek = result[result.length - 1]!
+    expect(lastWeek.weekEnd).toBe('2025-03-09')
+  })
+
+  it('returns empty array for empty input', () => {
+    expect(buildRollingWeeklyEvolutionFromDaily([], '2025-03-01', '2025-03-14')).toEqual([])
+  })
+})
+
+describe('buildMonthlyEvolutionFromDaily', () => {
+  it('aggregates daily data by month', () => {
+    const result = buildMonthlyEvolutionFromDaily([
+      { day: '2025-01-15', value: 10 },
+      { day: '2025-01-20', value: 5 },
+      { day: '2025-02-10', value: 20 },
+    ])
+
+    expect(result).toEqual([
+      { month: '2025-01', value: 15, timestamp: Date.UTC(2025, 0, 1) },
+      { month: '2025-02', value: 20, timestamp: Date.UTC(2025, 1, 1) },
+    ])
+  })
+
+  it('sorts by month', () => {
+    const result = buildMonthlyEvolutionFromDaily([
+      { day: '2025-03-01', value: 1 },
+      { day: '2025-01-01', value: 1 },
+      { day: '2025-02-01', value: 1 },
+    ])
+
+    expect(result.map(r => r.month)).toEqual(['2025-01', '2025-02', '2025-03'])
+  })
+
+  it('returns empty array for empty input', () => {
+    expect(buildMonthlyEvolutionFromDaily([])).toEqual([])
+  })
+})
+
+describe('buildYearlyEvolutionFromDaily', () => {
+  it('aggregates daily data by year', () => {
+    const result = buildYearlyEvolutionFromDaily([
+      { day: '2024-06-15', value: 100 },
+      { day: '2024-12-01', value: 50 },
+      { day: '2025-03-01', value: 200 },
+    ])
+
+    expect(result).toEqual([
+      { year: '2024', value: 150, timestamp: Date.UTC(2024, 0, 1) },
+      { year: '2025', value: 200, timestamp: Date.UTC(2025, 0, 1) },
+    ])
+  })
+
+  it('returns empty array for empty input', () => {
+    expect(buildYearlyEvolutionFromDaily([])).toEqual([])
+  })
+})
+
+describe('getNpmPackageCreationDate', () => {
+  it('returns created date from packument time', () => {
+    const result = getNpmPackageCreationDate({
+      time: {
+        'created': '2020-01-15T10:00:00.000Z',
+        'modified': '2025-01-01T00:00:00.000Z',
+        '1.0.0': '2020-01-15T10:00:00.000Z',
+      },
+    })
+
+    expect(result).toBe('2020-01-15T10:00:00.000Z')
+  })
+
+  it('returns earliest version date when created is missing', () => {
+    const result = getNpmPackageCreationDate({
+      time: {
+        'modified': '2025-01-01T00:00:00.000Z',
+        '1.0.0': '2020-06-01T00:00:00.000Z',
+        '2.0.0': '2021-01-01T00:00:00.000Z',
+      },
+    })
+
+    expect(result).toBe('2020-06-01T00:00:00.000Z')
+  })
+
+  it('returns null when time is missing', () => {
+    expect(getNpmPackageCreationDate({})).toBeNull()
+  })
+})

test/unit/server/utils/likes-evolution.spec.ts

···
+import { describe, expect, it, vi, beforeEach, type Mocked } from 'vitest'
+import { TID } from '@atproto/common'
+import type { ConstellationLike } from '../../../../server/utils/atproto/utils/likes'
+import type { CacheAdapter } from '../../../../server/utils/cache/shared'
+
+vi.stubGlobal('CACHE_MAX_AGE_ONE_MINUTE', 60)
+vi.stubGlobal('PACKAGE_SUBJECT_REF', (pkg: string) => `https://npmx.dev/package/${pkg}`)
+vi.stubGlobal('$fetch', vi.fn())
+vi.stubGlobal('Constellation', vi.fn())
+vi.stubGlobal('getCacheAdapter', vi.fn())
+
+vi.mock('#shared/types/lexicons/dev/npmx/feed/like.defs', () => ({
+  $nsid: 'dev.npmx.feed.like',
+}))
+
+const { aggregateBacklinksByDay, PackageLikesUtils } =
+  await import('../../../../server/utils/atproto/utils/likes')
+
+function tidFromDate(date: Date): string {
+  const microseconds = date.getTime() * 1000
+  return TID.fromTime(microseconds, 0).toString()
+}
+
+function backlink(date: Date): { did: string; collection: string; rkey: string } {
+  return { did: 'did:plc:test', collection: 'dev.npmx.feed.like', rkey: tidFromDate(date) }
+}
+
+describe('aggregateBacklinksByDay', () => {
+  it('groups backlinks by day from TID rkeys', () => {
+    const result = aggregateBacklinksByDay([
+      backlink(new Date('2025-03-10T12:00:00.000Z')),
+      backlink(new Date('2025-03-10T18:00:00.000Z')),
+      backlink(new Date('2025-03-11T09:00:00.000Z')),
+    ])
+
+    expect(result).toEqual([
+      { day: '2025-03-10', likes: 2 },
+      { day: '2025-03-11', likes: 1 },
+    ])
+  })
+
+  it('sorts results chronologically', () => {
+    const result = aggregateBacklinksByDay([
+      backlink(new Date('2025-05-03T10:00:00.000Z')),
+      backlink(new Date('2025-05-01T10:00:00.000Z')),
+      backlink(new Date('2025-05-02T10:00:00.000Z')),
+    ])
+
+    expect(result.map(r => r.day)).toEqual(['2025-05-01', '2025-05-02', '2025-05-03'])
+  })
+
+  it('skips non-TID rkeys with warning', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    const result = aggregateBacklinksByDay([
+      { did: 'did:plc:user1', collection: 'dev.npmx.feed.like', rkey: 'not-a-valid-tid' },
+      backlink(new Date('2025-04-20T10:00:00.000Z')),
+    ])
+
+    expect(result).toEqual([{ day: '2025-04-20', likes: 1 }])
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('non-TID rkey'))
+
+    warnSpy.mockRestore()
+  })
+
+  it('returns empty array for empty input', () => {
+    expect(aggregateBacklinksByDay([])).toEqual([])
+  })
+
+  it('aggregates multiple likes on same day', () => {
+    const result = aggregateBacklinksByDay([
+      backlink(new Date('2025-07-04T08:00:00.000Z')),
+      backlink(new Date('2025-07-04T12:00:00.000Z')),
+      backlink(new Date('2025-07-04T20:00:00.000Z')),
+    ])
+
+    expect(result).toEqual([{ day: '2025-07-04', likes: 3 }])
+  })
+})
+
+function makeBacklinksPage(
+  records: Array<{ did: string; collection: string; rkey: string }>,
+  cursor?: string,
+) {
+  return {
+    data: {
+      records,
+      total: records.length,
+      cursor,
+    },
+    isStale: false,
+    cachedAt: null,
+  }
+}
+
+describe('PackageLikesUtils.getLikesEvolution', () => {
+  const mockConstellation: Mocked<ConstellationLike> = {
+    getBackLinks: vi.fn(),
+    getLinksDistinctDids: vi.fn(),
+  }
+  // vi.fn() can't represent CacheAdapter's generic get<T>/set<T> signatures,
+  // so we assert once here and get full type-safety everywhere else.
+  const mockCache = {
+    get: vi.fn(),
+    set: vi.fn(),
+    delete: vi.fn(),
+  } as unknown as Mocked<CacheAdapter>
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockCache.get.mockResolvedValue(undefined)
+    mockCache.set.mockResolvedValue(undefined)
+  })
+
+  it('paginates through backlinks and caches the result', async () => {
+    const day1 = new Date('2025-01-15T10:00:00.000Z')
+    const day2 = new Date('2025-01-16T10:00:00.000Z')
+
+    // Page 1 returns a cursor
+    mockConstellation.getBackLinks.mockResolvedValueOnce(
+      makeBacklinksPage([backlink(day1)], 'cursor-page-2'),
+    )
+    // Page 2 returns no cursor (end)
+    mockConstellation.getBackLinks.mockResolvedValueOnce(makeBacklinksPage([backlink(day2)]))
+
+    const utils = new PackageLikesUtils({
+      constellation: mockConstellation,
+      cache: mockCache,
+    })
+
+    const result = await utils.getLikesEvolution('react')
+
+    expect(mockConstellation.getBackLinks).toHaveBeenCalledTimes(2)
+    expect(result).toEqual([
+      { day: '2025-01-15', likes: 1 },
+      { day: '2025-01-16', likes: 1 },
+    ])
+    expect(mockCache.set).toHaveBeenCalledWith(
+      expect.stringContaining('evolution'),
+      result,
+      expect.any(Number),
+    )
+  })
+
+  it('returns cached result without calling constellation', async () => {
+    const cachedData = [{ day: '2025-06-01', likes: 5 }]
+    mockCache.get.mockResolvedValueOnce(cachedData)
+
+    const utils = new PackageLikesUtils({
+      constellation: mockConstellation,
+      cache: mockCache,
+    })
+
+    const result = await utils.getLikesEvolution('lodash')
+
+    expect(mockConstellation.getBackLinks).not.toHaveBeenCalled()
+    expect(result).toEqual(cachedData)
+  })
+
+  it('returns empty array when no backlinks exist', async () => {
+    mockConstellation.getBackLinks.mockResolvedValueOnce(makeBacklinksPage([]))
+
+    const utils = new PackageLikesUtils({
+      constellation: mockConstellation,
+      cache: mockCache,
+    })
+
+    const result = await utils.getLikesEvolution('empty-pkg')
+
+    expect(result).toEqual([])
+  })
+})