NPM Stats Dashboard

A dashboard for tracking npm download statistics for Cloudinary packages. Built with SvelteKit 2, Svelte 5, and Chart.js.

Features

• Package groups — Browse Starter Kits, Core SDKs, Framework SDKs, and Media packages in tabs
• Flexible date ranges — Presets (7d, 30d, 90d, YTD), custom dates, or "days back" input
• Auto-aggregation — Daily view for ≤30 days, weekly for ≤180 days, monthly beyond
• KPI cards — Average daily downloads, peak day, and half-over-half trend
• Package metadata — Latest version, publish date, total versions, license, npm/GitHub links
• GitHub stats — Stars, forks, open issues, last push (fetched live)
• Version breakdown — Per-version download bars for the last 7 days (npm API limitation)
• Responsive — Works on desktop and mobile

Tech Stack

• SvelteKit 2 + Svelte 5
• Chart.js for line charts
• npm Registry API for downloads and metadata
• GitHub REST API for repository stats

Getting Started

pnpm install
pnpm dev

Open http://localhost:5173.

Project Structure

src/
├── lib/
│   ├── types/          # Shared TypeScript types
│   ├── utils/          # Date helpers, formatting, KPI computation, aggregation, constants
│   ├── data/           # Data fetching (npm downloads, registry metadata, GitHub stats)
│   └── components/     # Reusable Svelte components
│       ├── PackageTabs.svelte
│       ├── DateControls.svelte
│       ├── ChartCard.svelte
│       ├── KpiRow.svelte
│       ├── MetaRow.svelte
│       └── VersionBreakdown.svelte
└── routes/
    ├── +layout.svelte  # Global styles
    └── +page.svelte    # Main dashboard page

No API Keys Required

All data is fetched directly from the public npm and GitHub APIs — no backend or API keys needed.