feat: sparkline chart for weekly downloads (npmx-dev#10)

Author: graphieros

app/components/PackageDownloadStats.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+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,3 @@
+import { createSharedComposable } from '@vueuse/core'
+
+export const useCharts = createSharedComposable(function useCharts() {})

app/composables/useNpmRegistry.ts

@@ -141,6 +141,47 @@ 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,

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

@@ -42,6 +42,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 }>(
@@ -566,6 +567,9 @@ defineOgImageComponent('Package', {
             </ul>
           </section>
 
+          <!-- Donwload stats -->
+          <PackageDownloadStats :downloads="weeklyDownloads" />
+
           <section
             v-if="
               displayVersion?.engines && (displayVersion.engines.node || displayVersion.engines.npm)

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",