Add functionality for download button

package.json

@@ -37,6 +37,7 @@
         "react-calendar-heatmap": "^1.9.0",
         "react-chartjs-2": "^5.2.0",
         "react-chatbot-kit": "^2.2.2",
+        "react-csv": "^2.2.2",
         "react-day-picker": "^8.10.1",
         "react-dom": "^18.3.1",
         "react-dropzone": "^14.2.3",

src/components/Dashboard/Analytics/AnalyticsPageTopSectionMainContent.jsx

@@ -8,16 +8,20 @@ import {
     TopSectionCaptionCTABtnBig,
     TopSectionCaptionCTABtnBigInnerSection,
     TopSectionMainContent,
+    TopSectionDownloadText,
 } from "./AnalyticsPageTopSectionMainContentElements";
 import { FiInfoIcon, SlCalenderIcon, TbFileDownloadIcon } from "./AnalyticsIconElements";
-import { lastAmountOfDays } from "./AnalyticsUtils";
+import { getAnalyticsFileData, lastAmountOfDays } from "./AnalyticsUtils";
 import { AnalyticsTopInnerCards } from "./AnalyticsTopInnerCards";
 import { AnalyticsBarChart } from "./AnalyticsBarChart";
 import { AnalyticsDoughnutChart } from "./AnalyticsDoughnutChart";
 import visitors from "./AnalyticsVisitorsData.json";
 import AnalyticsHorizontalBarCharts from "./AnalyticsHorizontalBarCharts";
+import { CSVLink } from "react-csv";
 
 export const AnalyticsPageTopSectionMainContent = () => {
+    const { headers, data } = getAnalyticsFileData();
+
     return (
         <TopSection>
             <Caption>
@@ -33,10 +37,12 @@ export const AnalyticsPageTopSectionMainContent = () => {
                         </TopSectionCaptionCTABtnBigInnerSection>
                     </TopSectionCaptionCTABtnBig>
                     <TopSectionCaptionCTABtnBig>
-                        <TopSectionCaptionCTABtnBigInnerSection>
-                            Download
-                            <TbFileDownloadIcon />
-                        </TopSectionCaptionCTABtnBigInnerSection>
+                        <CSVLink data={data} headers={headers} filename="Analytics_Data.csv">
+                            <TopSectionCaptionCTABtnBigInnerSection>
+                                <TopSectionDownloadText>Download</TopSectionDownloadText>
+                                <TbFileDownloadIcon />
+                            </TopSectionCaptionCTABtnBigInnerSection>
+                        </CSVLink>
                     </TopSectionCaptionCTABtnBig>
                 </CTABtn>
             </Caption>

src/components/Dashboard/Analytics/AnalyticsPageTopSectionMainContentElements.jsx

@@ -56,6 +56,10 @@ export const TopSectionCaptionCTABtnBig = styled.div`
     }
 `;
 
+export const TopSectionDownloadText = styled.p`
+    color: #e77b0f;
+`;
+
 export const TopSectionCaptionCTABtnBigInnerSection = styled.div`
     display: flex;
     justify-content: space-between;

src/components/Dashboard/Analytics/AnalyticsUtils.js

@@ -1,3 +1,6 @@
+import { datasets as monthsDatasets, xDataSet as xDataSetMonths } from "./MainBarChartDataMonths.json";
+import { datasets as hoursDatasets, xDataSet as xDataSetHours } from "./MainBarChartDataHours.json";
+
 export const lastAmountOfDays = 30;
 export const lastAmountOfMinAgo = 14;
 
@@ -142,3 +145,23 @@ export const allOptions = [
         responsive: true,
     },
 ];
+
+export const getAnalyticsFileData = () => {
+    const monthsDataset = monthsDatasets[0];
+    const hoursDataset = hoursDatasets[0];
+
+    const headers = [
+        { label: "Contributions Hours", key: "hours" },
+        { label: "Months Contribution", key: "months" },
+    ];
+
+    const data = [];
+
+    for (let i = 0; i < xDataSetHours.length; i++) {
+        const hoursData = `${xDataSetHours[i]} - ${hoursDataset.data[i]}`;
+        const monthsData = `${xDataSetMonths[i]} - ${monthsDataset.data[i]}`;
+        data.push({ hours: hoursData, months: monthsData });
+    }
+
+    return { headers, data };
+};