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}
/>
-
+
)