feat: recent downloads (#69)

![image](https://github.com/cnpm/cnpmweb/assets/5574625/1da9f4d4-f0ae-4eef-8f10-9e5a5b6c9f36)

> closes #68 

* 添加「下载趋势」相关信息
* 分别展示当前版本和左右版本下载信息

package.json

@@ -18,6 +18,7 @@
     "@vercel/node": "^2.15.5",
     "antd": "^5.6.4",
     "antd-style": "^3.4.4",
+    "chart.js": "^4.4.1",
     "dayjs": "^1.11.9",
     "eslint": "8.44.0",
     "eslint-config-next": "13.4.4",
@@ -29,6 +30,7 @@
     "next": "13.4.7",
     "npm-package-arg": "^11.0.1",
     "react": "18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.3.1",
     "semver": "^7.5.4",
@@ -37,10 +39,11 @@
   "repository": "https://github.com/cnpm/cnpmweb.git",
   "devDependencies": {
     "@types/lodash": "^4.14.197",
-    "@types/npm-package-arg": "^6.1.3",
-    "@types/semver": "^7.5.0",
     "@types/node": "20.4.1",
+    "@types/npm-package-arg": "^6.1.3",
     "@types/react": "18.2.14",
-    "prettier": "^3.0.3"
+    "@types/semver": "^7.5.0",
+    "prettier": "^3.0.3",
+    "typescript": "5.3.3"
   }
 }

src/components/RecentDownloads.tsx

@@ -0,0 +1,56 @@
+import { useRecentDownloads } from '@/hooks/useRecentDownloads';
+import React from 'react';
+import { Empty } from 'antd';
+
+import { Line } from 'react-chartjs-2';
+import "chart.js/auto";
+import { scales } from 'chart.js/auto';
+
+
+type RecentDownloadsContentProps = {
+  pkgName: string;
+  version: string;
+};
+
+export function RecentDownloads({ pkgName, version }: RecentDownloadsContentProps) {
+  const { data: res, isLoading } = useRecentDownloads(pkgName, version);
+  if (isLoading) {
+    return <Empty description="暂无数据" />;
+  }
+
+  return (
+    <Line
+      options={{
+        scales: {
+          x: {
+            display: false,
+          },
+        },
+        plugins: {
+          tooltip: {
+            enabled: true,
+          },
+        },
+      }}
+      data={{
+        labels: res!.versions?.[version]?.map((_) => _.day),
+        datasets: [
+          {
+            fill: true,
+            label: '所有版本',
+            data: res!.downloads?.map((_) => _.downloads),
+            borderColor: 'rgb(53, 162, 235, 0.7)',
+            backgroundColor: 'rgba(53, 162, 235, 0.4)',
+          },
+          {
+            fill: true,
+            label: version,
+            data: res!.versions?.[version]?.map((_) => _.downloads),
+            borderColor: 'rgb(53, 162, 235, 0.8)',
+            backgroundColor: 'rgba(53, 162, 235, 0.7)',
+          },
+        ],
+      }}
+    />
+  );
+}

src/hooks/useRecentDownloads.ts

@@ -0,0 +1,24 @@
+import { REGISTRY } from '@/config';
+import dayjs from 'dayjs';
+import useSwr from 'swr';
+
+type DownloadRes = {
+  downloads: { day: string; downloads: number; }[];
+  versions?: {
+    [version: string]: { day: string; downloads: number; }[];
+  };
+};
+
+// https://registry.npmmirror.com/downloads/range/2023-01-01:2023-12-28/antd
+function getUrl(pkgName: string, range = 8) {
+  const today = dayjs();
+  const todayStr = today.format('YYYY-MM-DD');
+  const lastWeekStr = today.subtract(range, 'day').format('YYYY-MM-DD');
+  return `${REGISTRY}/downloads/range/${lastWeekStr}:${todayStr}/${pkgName}`;
+};
+export const useRecentDownloads = (pkgName: string, version: string, range?: number) => {
+  return useSwr<DownloadRes>(`recent_downloads: ${pkgName}_${version}`, async () => {
+    return fetch(`${getUrl(pkgName, range)}`)
+      .then((res) => res.json());
+  });
+};

src/slugs/home/index.tsx

@@ -12,6 +12,7 @@ import { createStyles } from 'antd-style';
 import RecentVersion from '@/components/RecentVersion';
 import Sync from '@/components/Sync';
 import { PackageTag } from '@/components/PackageCard';
+import { RecentDownloads } from '@/components/RecentDownloads';
 
 const useStyles = createStyles(({ token, css }) => {
   return {
@@ -60,6 +61,9 @@ export default function Home({ manifest, version, additionalInfo: needSync }: Pa
       <Col flex="0 0 378px">
         <Space direction={'vertical'} size="middle" style={{ minWidth: 378 }}>
           <AdVPS />
+          <PresetCard title="下载趋势">
+            <RecentDownloads pkgName={manifest.name} version={version!} />
+          </PresetCard>
           {manifest.maintainers?.length > 0 && (
             <PresetCard title="项目成员">
               <ContributorContent members={manifest.maintainers} />