wip

components/DownloadGraph.js

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { Line } from 'react-chartjs-2';
 import 'chart.js/auto';
+import 'chartjs-adapter-date-fns';
 
 const DownloadGraph = () => {
     const [chartData, setChartData] = useState({
-        labels: [],
         datasets: [
             {
                 label: 'Release Downloads',
@@ -24,7 +24,25 @@ const DownloadGraph = () => {
     const options = {
         responsive: true,
         maintainAspectRatio: false,
-        aspectRatio: 1.5, // Lower ratio to make the chart taller
+        scales: {
+            x: {
+                type: 'time',
+                time: {
+                    unit: 'day'
+                },
+                title: {
+                    display: true,
+                    text: 'Date'
+                }
+            },
+            y: {
+                beginAtZero: true,
+                title: {
+                    display: true,
+                    text: 'Number of Downloads'
+                }
+            }
+        }
     };
 
     const fetchReleaseData = async (page = 1) => {
@@ -51,29 +69,21 @@ const DownloadGraph = () => {
                 // 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();
-                    const label = `${release.name} : ${date}`; // Combine release name with date
-                    labels.push(label);
-
+                    const date = new Date(release.published_at);
                     const dailyTotalDownloads = release.assets.reduce((acc, asset) => {
-                        if (asset.name.endsWith('.zip')) {
-                            return acc + asset.download_count;
-                        }
-                        return acc;
+                        return acc + (asset.name.endsWith('.zip') ? asset.download_count : 0);
                     }, 0);
 
                     cumulativeTotalDownloads += dailyTotalDownloads;
-                    dailyDownloads.push(dailyTotalDownloads);
-                    cumulativeDownloads.push(cumulativeTotalDownloads);
+                    dailyDownloads.push({ x: date, y: dailyTotalDownloads });
+                    cumulativeDownloads.push({ x: date, y: cumulativeTotalDownloads });
                 });
 
                 setChartData({
-                    labels,
                     datasets: [
                         { ...chartData.datasets[0], data: dailyDownloads },
                         { ...chartData.datasets[1], data: cumulativeDownloads },
@@ -94,4 +104,3 @@ const DownloadGraph = () => {
 };
 
 export default DownloadGraph;
-

components/Developers.js → components/Start.js

@@ -2,13 +2,13 @@ import React, { useEffect, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faWindows, faApple } from '@fortawesome/free-brands-svg-icons';
 import Link from 'next/link';
-import styles from './Developers.module.css';
+import styles from './Start.module.css';
 import { getReleasesDownloadCount } from 'utils/githubStats';
 import EmailForm from '@components/EmailForm';
 import { Bounties } from '@components/Bounties';
 import DownloadGraph from './DownloadGraph';
 
-export default function Developers() {
+export default function Start() {
     const [latestRelease, setLatestRelease] = useState({ version: null, date: null });
     const [downloadCount, setDownloadCount] = useState({ windows: 0, mac: 0 });
     const [showBuildWarning, setShowBuildWarning] = useState(false);

pages/index.js

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react'
 
-import Developers from '@components/Developers'
+import Start from '@components/Start'
 import FeedbackForm from '@components/FeedbackForm'
 import Footer from '@components/Footer'
 import IndustriesGrid from '@components/IndustriesGrid'
@@ -22,7 +22,7 @@ export default function Home() {
                 setFeedbackData={setFeedbackData}
                 sectionRef={sectionRef}
             />
-            <Developers />
+            <Start />
             <Footer />
         </div>
     )