diff --git a/components/DownloadGraph.js b/components/DownloadGraph.js index bfc12e9..7900e3f 100644 --- a/components/DownloadGraph.js +++ b/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; - diff --git a/components/Developers.js b/components/Start.js similarity index 99% rename from components/Developers.js rename to components/Start.js index 61ee5c8..686ec7b 100644 --- a/components/Developers.js +++ b/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); diff --git a/components/Developers.module.css b/components/Start.module.css similarity index 100% rename from components/Developers.module.css rename to components/Start.module.css diff --git a/pages/index.js b/pages/index.js index 7ecf49f..58ecbf2 100644 --- a/pages/index.js +++ b/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} /> - +