Feature - Add sparkline chart for weekly downloads

Author: graphieros

app/components/PackageDownloadStats.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { VueUiSparkline } from "vue-data-ui/vue-ui-sparkline"
+
+const props = defineProps<{
+    downloads?: Array<{
+        downloads: number | null,
+        weekStart: string,
+        weekEnd: string
+    }>
+}>()
+
+const dataset = computed(() => props.downloads?.map(d => ({
+    value: d?.downloads ?? 0,
+    period: `${d.weekStart ?? '-'} to ${d.weekEnd ?? '-'}`
+})));
+
+const lastDatapoint = computed(() => {
+    return (dataset.value || []).at(-1)?.period ?? ''
+})
+
+const config = computed(() => ({
+    theme: 'dark', // enforced dark mode for now
+    style: {
+        backgroundColor: 'transparent',
+        area: {
+            color: '#6A6A6A',
+            useGradient: false,
+            opacity: 10
+        },
+        dataLabel: {
+            offsetX: -10,
+            fontSize: 28,
+            bold: false,
+            color: '#FAFAFA'
+        },
+        line: {
+            color: '#6A6A6A'
+        },
+        plot: {
+            radius: 6,
+            stroke: '#FAFAFA'
+        },
+        title: {
+            text: lastDatapoint.value,
+            fontSize: 12,
+            color: '#666666',
+            bold: false,
+        },
+        verticalIndicator: {
+            strokeDasharray: 0,
+            color: '#FAFAFA'
+        }
+    }
+}))
+
+</script>
+
+<template>
+    <div class="space-y-8">
+        <!-- Download stats -->
+        <section>
+            <div class="flex items-center justify-between mb-3">
+                <h2
+                    id="dependencies-heading"
+                    class="text-xs text-fg-subtle uppercase tracking-wider"
+                >
+                    Weekly Downloads
+                </h2>
+            </div>
+            <div class="w-full">
+                <ClientOnly>
+                    <VueUiSparkline 
+                        :dataset
+                        :config
+                    />
+                </ClientOnly>
+            </div>
+        </section>
+    </div>
+</template>
+
+<style>
+/** Overrides */
+.vue-ui-sparkline-title span {
+    padding: 0 !important;
+    letter-spacing: 0.04rem;
+}
+.vue-ui-sparkline text {
+    font-family: Geist Mono, monospace !important;
+}
+</style>

app/composables/useCharts.ts

@@ -0,0 +1,5 @@
+import { createSharedComposable } from '@vueuse/core'
+
+export const useCharts = createSharedComposable(function useCharts() {
+
+})

app/composables/useNpmRegistry.ts

@@ -137,6 +137,45 @@ export function usePackageDownloads(
   )
 }
 
+type NpmDownloadsRangeResponse = {
+  start: string
+  end: string
+  package: string
+  downloads: Array<{ day: string, downloads: number }>
+}
+
+async function fetchNpmDownloadsRange(
+  packageName: string,
+  start: string,
+  end: string,
+): Promise<NpmDownloadsRangeResponse> {
+  const encodedName = encodePackageName(packageName)
+  return await $fetch<NpmDownloadsRangeResponse>(`${NPM_API}/downloads/range/${start}:${end}/${encodedName}`)
+}
+
+export function usePackageWeeklyDownloadEvolution(
+  name: MaybeRefOrGetter<string>,
+  options: MaybeRefOrGetter<{
+    weeks?: number
+    endDate?: string
+  }> = {},
+) {
+  return useLazyAsyncData(
+    () => `downloads-weekly-evolution:${toValue(name)}:${JSON.stringify(toValue(options))}`,
+    async () => {
+      const packageName = toValue(name)
+      const { weeks = 12, endDate } = toValue(options) ?? {}
+      const end = endDate ? new Date(`${endDate}T00:00:00.000Z`) : new Date()
+      const start = addDays(end, -(weeks * 7) + 1)
+      const startIso = toIsoDateString(start)
+      const endIso = toIsoDateString(end)
+      const range = await fetchNpmDownloadsRange(packageName, startIso, endIso)
+      const sortedDaily = [...range.downloads].sort((a, b) => a.day.localeCompare(b.day))
+      return buildWeeklyEvolutionFromDaily(sortedDaily)
+    },
+  )
+}
+
 const emptySearchResponse = { objects: [], total: 0, time: new Date().toISOString() } satisfies NpmSearchResponse
 
 export function useNpmSearch(

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

@@ -44,6 +44,7 @@ const orgName = computed(() => {
 const { data: pkg, status, error } = usePackage(packageName, requestedVersion)
 
 const { data: downloads } = usePackageDownloads(packageName, 'last-week')
+const { data: weeklyDownloads } = usePackageWeeklyDownloadEvolution(packageName, { weeks: 52 })
 
 // Fetch README for specific version if requested, otherwise latest
 const { data: readmeData } = useLazyFetch<{ html: string }>(() => {
@@ -607,6 +608,11 @@ defineOgImageComponent('Package', {
             </ul>
           </section>
 
+          <!-- Donwload stats -->
+          <PackageDownloadStats
+            :downloads="weeklyDownloads"
+          />
+
           <section
             v-if="displayVersion?.engines && (displayVersion.engines.node || displayVersion.engines.npm)"
             aria-labelledby="compatibility-heading"

app/utils/charts.ts

@@ -0,0 +1,29 @@
+export function sum(numbers: number[]): number {
+  return numbers.reduce((a, b) => a + b, 0)
+}
+
+export function chunkIntoWeeks<T>(items: T[], weekSize = 7): T[][] {
+  const result: T[][] = []
+  for (let index = 0; index < items.length; index += weekSize) {
+    result.push(items.slice(index, index + weekSize))
+  }
+  return result
+}
+
+export function buildWeeklyEvolutionFromDaily(
+  daily: Array<{ day: string, downloads: number }>,
+): Array<{ weekStart: string, weekEnd: string, downloads: number }> {
+  const weeks = chunkIntoWeeks(daily, 7)
+  return weeks.map((weekDays) => {
+    const weekStart = weekDays[0]?.day ?? ''
+    const weekEnd = weekDays[weekDays.length - 1]?.day ?? ''
+    const downloads = sum(weekDays.map(d => d.downloads))
+    return { weekStart, weekEnd, downloads }
+  })
+}
+
+export function addDays(date: Date, days: number): Date {
+  const d = new Date(date)
+  d.setUTCDate(d.getUTCDate() + days)
+  return d
+}

app/utils/formatters.ts

@@ -9,3 +9,10 @@ export function formatDate(dateStr: string): string {
     day: 'numeric',
   })
 }
+
+export function toIsoDateString(date: Date): string {
+  const year = date.getUTCFullYear()
+  const month = String(date.getUTCMonth() + 1).padStart(2, '0')
+  const day = String(date.getUTCDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}

package.json

@@ -42,7 +42,8 @@
     "shiki": "^3.21.0",
     "ufo": "^1.6.3",
     "unplugin-vue-router": "^0.19.2",
-    "vue": "3.5.27"
+    "vue": "3.5.27",
+    "vue-data-ui": "^3.13.0"
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.2.18",