chore: progress

Author: harlan-zw

app/components/OgImage/Package.takumi.vue

@@ -58,6 +58,11 @@ const { repoRef, stars, refresh: refreshRepoMeta } = useRepoMeta(repositoryUrl)
 
 const formattedStars = computed(() => (stars.value > 0 ? compactFormat.format(stars.value) : ''))
 
+const weeklyDownloads = shallowRef(0)
+const formattedDownloads = computed(() =>
+  weeklyDownloads.value ? compactFormat.format(weeklyDownloads.value) : '',
+)
+
 const totalLikes = shallowRef(0)
 const formattedLikes = computed(() =>
   totalLikes.value ? compactFormat.format(totalLikes.value) : '',
@@ -184,8 +189,23 @@ const fetchLikes = $fetch<{ totalLikes: number }>(`/api/social/likes/${name}`)
   })
   .catch(() => {})
 
+const downloadUrl = `https://api.npmjs.org/downloads/point/last-week/${encodePackageName(name)}`
+const fetchDownloads = $fetch<{ downloads: number }>(downloadUrl)
+  .then(d => {
+    console.error('[og-image-package] downloads response:', JSON.stringify(d))
+    weeklyDownloads.value = d?.downloads ?? 0
+  })
+  .catch(err => {
+    console.error('[og-image-package] downloads fetch failed:', downloadUrl, err?.message || err)
+  })
+
 try {
-  await Promise.all([refreshPkg().then(() => refreshRepoMeta()), fetchVariantData(), fetchLikes])
+  await Promise.all([
+    refreshPkg().then(() => refreshRepoMeta()),
+    fetchVariantData(),
+    fetchLikes,
+    fetchDownloads,
+  ])
 } catch (err) {
   console.warn('[og-image-package] Failed to load data server-side:', err)
   throw createError({
@@ -273,6 +293,14 @@ const sparklineSrc = computed(() => {
           <span v-else>{{ $t('package.links.repo') }}</span>
         </div>
 
+        <span v-if="formattedDownloads" class="flex items-center gap-2" data-testid="downloads">
+          <div
+            class="i-lucide:download shrink-0 text-fg-muted"
+            :style="{ width: '32px', height: '32px' }"
+          />
+          <span>{{ formattedDownloads }}/wk</span>
+        </span>
+
         <span v-if="formattedStars" class="flex items-center gap-2" data-testid="stars">
           <div
             class="i-lucide:star shrink-0 text-fg-muted"

app/composables/useCharts.ts

@@ -66,65 +66,6 @@ function mergeDailyPoints(points: DailyRawPoint[]): DailyRawPoint[] {
     .map(([day, value]) => ({ day, value }))
 }
 
-export function buildDailyEvolutionFromDaily(daily: DailyRawPoint[]): DailyDataPoint[] {
-  return daily
-    .slice()
-    .sort((a, b) => a.day.localeCompare(b.day))
-    .map(item => {
-      const dayDate = parseIsoDate(item.day)
-      const timestamp = dayDate.getTime()
-
-      return { day: item.day, value: item.value, timestamp }
-    })
-}
-
-export function buildRollingWeeklyEvolutionFromDaily(
-  daily: DailyRawPoint[],
-  rangeStartIso: string,
-  rangeEndIso: string,
-): WeeklyDataPoint[] {
-  const sorted = daily.slice().sort((a, b) => a.day.localeCompare(b.day))
-  const rangeStartDate = parseIsoDate(rangeStartIso)
-  const rangeEndDate = parseIsoDate(rangeEndIso)
-
-  const groupedByIndex = new Map<number, number>()
-
-  for (const item of sorted) {
-    const itemDate = parseIsoDate(item.day)
-    const dayOffset = Math.floor((itemDate.getTime() - rangeStartDate.getTime()) / 86400000)
-    if (dayOffset < 0) continue
-
-    const weekIndex = Math.floor(dayOffset / 7)
-    groupedByIndex.set(weekIndex, (groupedByIndex.get(weekIndex) ?? 0) + item.value)
-  }
-
-  return Array.from(groupedByIndex.entries())
-    .sort(([a], [b]) => a - b)
-    .map(([weekIndex, value]) => {
-      const weekStartDate = addDays(rangeStartDate, weekIndex * 7)
-      const weekEndDate = addDays(weekStartDate, 6)
-
-      // Clamp weekEnd to the actual data range end date
-      const clampedWeekEndDate =
-        weekEndDate.getTime() > rangeEndDate.getTime() ? rangeEndDate : weekEndDate
-
-      const weekStartIso = toIsoDateString(weekStartDate)
-      const weekEndIso = toIsoDateString(clampedWeekEndDate)
-
-      const timestampStart = weekStartDate.getTime()
-      const timestampEnd = clampedWeekEndDate.getTime()
-
-      return {
-        value,
-        weekKey: `${weekStartIso}_${weekEndIso}`,
-        weekStart: weekStartIso,
-        weekEnd: weekEndIso,
-        timestampStart,
-        timestampEnd,
-      }
-    })
-}
-
 /** Catmull-Rom monotone cubic spline — same algorithm as vue-data-ui's smoothPath for OG Images */
 export function smoothPath(pts: { x: number; y: number }[]): string {
   if (pts.length < 2) return '0,0'
@@ -162,42 +103,6 @@ export function smoothPath(pts: { x: number; y: number }[]): string {
   return out.join(' ')
 }
 
-export function buildMonthlyEvolutionFromDaily(daily: DailyRawPoint[]): MonthlyDataPoint[] {
-  const sorted = daily.slice().sort((a, b) => a.day.localeCompare(b.day))
-  const valuesByMonth = new Map<string, number>()
-
-  for (const item of sorted) {
-    const month = item.day.slice(0, 7)
-    valuesByMonth.set(month, (valuesByMonth.get(month) ?? 0) + item.value)
-  }
-
-  return Array.from(valuesByMonth.entries())
-    .sort(([a], [b]) => a.localeCompare(b))
-    .map(([month, value]) => {
-      const monthStartDate = parseIsoDate(`${month}-01`)
-      const timestamp = monthStartDate.getTime()
-      return { month, value, timestamp }
-    })
-}
-
-export function buildYearlyEvolutionFromDaily(daily: DailyRawPoint[]): YearlyDataPoint[] {
-  const sorted = daily.slice().sort((a, b) => a.day.localeCompare(b.day))
-  const valuesByYear = new Map<string, number>()
-
-  for (const item of sorted) {
-    const year = item.day.slice(0, 4)
-    valuesByYear.set(year, (valuesByYear.get(year) ?? 0) + item.value)
-  }
-
-  return Array.from(valuesByYear.entries())
-    .sort(([a], [b]) => a.localeCompare(b))
-    .map(([year, value]) => {
-      const yearStartDate = parseIsoDate(`${year}-01-01`)
-      const timestamp = yearStartDate.getTime()
-      return { year, value, timestamp }
-    })
-}
-
 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

nuxt.config.ts

@@ -127,7 +127,6 @@ export default defineNuxtConfig({
     '/api/registry/package-meta/**': { isr: 300 },
     '/:pkg/.well-known/skills/**': { isr: 3600 },
     '/:scope/:pkg/.well-known/skills/**': { isr: 3600 },
-    '/_og/d/**': getISRConfig(60 * 60 * 24), // 1 day
     '/_avatar/**': { isr: 3600, proxy: 'https://www.gravatar.com/avatar/**' },
     '/opensearch.xml': { isr: true },
     '/oauth-client-metadata.json': { prerender: true },

test/nuxt/components/OgImagePackage.spec.ts

@@ -20,7 +20,6 @@ vi.mock('~/composables/useCharts', () => ({
   useCharts: vi.fn().mockReturnValue({
     fetchPackageDownloadEvolution: vi.fn().mockResolvedValue([]),
   }),
-  buildRollingWeeklyEvolutionFromDaily: vi.fn().mockReturnValue([]),
   smoothPath: vi.fn().mockReturnValue(''),
 }))
 
@@ -38,9 +37,31 @@ describe('OgImagePackage', () => {
       stars?: number
       license?: string | null
       packageName?: string
+      downloads?: number
     } = {},
   ) {
-    const { stars = 0, license = 'MIT', packageName = 'test-package' } = overrides
+    const {
+      stars = 0,
+      license = 'MIT',
+      packageName = 'test-package',
+      downloads = 12500,
+    } = overrides
+
+    // Mock $fetch for downloads endpoint
+    vi.spyOn(globalThis, '$fetch').mockImplementation((url: string) => {
+      if (typeof url === 'string' && url.includes('api.npmjs.org/downloads/point')) {
+        return Promise.resolve({
+          downloads,
+          start: '2026-04-03',
+          end: '2026-04-09',
+          package: packageName,
+        })
+      }
+      if (typeof url === 'string' && url.includes('/api/social/likes/')) {
+        return Promise.resolve({ totalLikes: 0, userHasLiked: false })
+      }
+      return Promise.resolve(null)
+    })
 
     mockUseResolvedVersion.mockReturnValue({
       data: ref('1.0.0'),
@@ -79,6 +100,7 @@ describe('OgImagePackage', () => {
     mockUseResolvedVersion.mockReset()
     mockUsePackage.mockReset()
     mockUseRepoMeta.mockReset()
+    vi.restoreAllMocks()
   })
 
   it('renders the package name', async () => {
@@ -135,6 +157,30 @@ describe('OgImagePackage', () => {
     })
   })
 
+  describe('downloads', () => {
+    it('shows formatted downloads when present', async () => {
+      setupMocks({ downloads: 12500 })
+
+      const component = await mountSuspended(OgImagePackage, {
+        props: baseProps,
+      })
+
+      expect(component.find('[data-testid="downloads"]').exists()).toBe(true)
+      expect(component.text()).toContain('12.5K')
+      expect(component.text()).toContain('/wk')
+    })
+
+    it('hides downloads when count is 0', async () => {
+      setupMocks({ downloads: 0 })
+
+      const component = await mountSuspended(OgImagePackage, {
+        props: baseProps,
+      })
+
+      expect(component.find('[data-testid="downloads"]').exists()).toBe(false)
+    })
+  })
+
   it('renders repo info', async () => {
     setupMocks()