Add Download Graph

components/Developers.js

@@ -4,6 +4,8 @@ import { faWindows, faApple } from '@fortawesome/free-brands-svg-icons';
 import Link from 'next/link';
 import styles from './Developers.module.css';
 import { getReleasesDownloadCount } from 'utils/githubStats';
+import DownloadStats from './DownloadStats';
+
 
 export default function Developers() {
     const [latestRelease, setLatestRelease] = useState({ version: null, date: null });
@@ -162,6 +164,7 @@ export default function Developers() {
                         style={{ border: '0', borderRadius: '6px' }}
                         className="mx-auto mb-4"
                     ></iframe>
+                    <DownloadStats />
                     <p className="text-center">
                         Don't forget to{' '}
                         <a href="#register">Register for Updates</a>.

components/DownloadStats.js

@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import { Line } from 'react-chartjs-2';
+import 'chart.js/auto';
+
+const DownloadStats = () => {
+    const [chartData, setChartData] = useState({
+        labels: [],
+        datasets: [
+            {
+                label: 'Daily Downloads',
+                data: [],
+                borderColor: 'rgb(75, 192, 192)',
+                backgroundColor: 'rgba(75, 192, 192, 0.5)',
+            },
+            {
+                label: 'Cumulative Total Downloads',
+                data: [],
+                borderColor: 'rgb(255, 99, 132)',
+                backgroundColor: 'rgba(255, 99, 132, 0.5)',
+            },
+        ],
+    });
+
+    const fetchReleaseData = async (page = 1) => {
+        const queryParams = new URLSearchParams({
+            per_page: 30,
+            page,
+        });
+        const response = await fetch(`https://api.github.com/repos/OpenAdaptAI/OpenAdapt/releases?${queryParams.toString()}`);
+        return response.json();
+    };
+
+    useEffect(() => {
+        let cumulativeTotalDownloads = 0;
+        let allReleases = [];
+
+        const processReleases = async (page = 1) => {
+            const releaseData = await fetchReleaseData(page);
+            if (releaseData.length === 0) return;
+
+            allReleases = [...allReleases, ...releaseData];
+            if (releaseData.length === 30) {
+                await processReleases(page + 1);
+            } else {
+                // Sort releases by published date
+                allReleases.sort((a, b) => new Date(a.published_at) - new Date(b.published_at));
+
+                const labels = [];
+                const dailyDownloads = [];
+                const cumulativeDownloads = [];
+
+                allReleases.forEach(release => {
+                    const date = new Date(release.published_at).toLocaleDateString();
+                    labels.push(date);
+
+                    // Filter assets that are ZIP files and accumulate download counts
+                    const dailyTotalDownloads = release.assets.reduce((acc, asset) => {
+                        if (asset.name.endsWith('.zip')) {
+                            return acc + asset.download_count;
+                        }
+                        return acc;
+                    }, 0);
+
+                    cumulativeTotalDownloads += dailyTotalDownloads;
+                    dailyDownloads.push(dailyTotalDownloads);
+                    cumulativeDownloads.push(cumulativeTotalDownloads);
+                });
+
+                setChartData({
+                    labels,
+                    datasets: [
+                        { ...chartData.datasets[0], data: dailyDownloads },
+                        { ...chartData.datasets[1], data: cumulativeDownloads },
+                    ],
+                });
+            }
+        };
+
+        processReleases();
+    }, []);
+
+    return (
+        <div>
+            <h2>Download Statistics</h2>
+            <Line data={chartData} />
+        </div>
+    );
+};
+
+export default DownloadStats;
+

package.json

@@ -23,13 +23,16 @@
         "@fortawesome/free-regular-svg-icons": "^6.4.0",
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@fortawesome/react-fontawesome": "^0.2.0",
+        "chart.js": "^4.4.3",
+        "chartjs-adapter-date-fns": "^3.0.0",
         "cypress": "^10.0.3",
         "daisyui": "^4.7.2",
         "eslint-config-next": "^13.3.4",
         "framer-motion": "^11.0.8",
         "next": "^14.1.2",
         "p5": "^1.9.1",
         "react": "^18.2.0",
+        "react-chartjs-2": "^5.2.0",
         "react-dom": "^18.2.0",
         "react-fontawesome": "^1.7.1"
     },