Added Charts

frontend/package.json

@@ -7,7 +7,9 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "axios": "^0.20.0",
+    "chart.js": "^2.9.4",
     "react": "^16.13.1",
+    "react-chartjs-2": "^2.11.1",
     "react-dom": "^16.13.1",
     "react-fontawesome": "^1.7.1",
     "react-router-dom": "^5.2.0",

frontend/src/App.js

@@ -4,13 +4,15 @@ import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
 import Navbar from './components/layout/Navbar'
 import Footer from './components/layout/Footer';
 import Cards from './components/layout/Cards';
+import Charts from './components/layout/Charts';
 
 function App() {
   return (
 	<Router>
 		<div className="App">
 			<Navbar/>
 			<Cards/>
+			<Charts/>
 			<Footer/>
 		</div>
 	</Router>

frontend/src/components/layout/Cards.js

@@ -38,6 +38,7 @@ function Cards() {
                         description={description}
                         date={date}
                         time={time}
+                        key={title}
                     />
                 ))
             }

frontend/src/components/layout/Charts.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import '../styles/Charts.css';
+import {Line, Pie} from 'react-chartjs-2';
+
+function Charts() {
+
+    const dailyActivityData = {
+        labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6", "Day 7"],
+        datasets: [{
+            label: "Number of Hours Code",
+            data: [5, 2, 3, 5, 7, 6, 10],
+            backgroundColor: 'rgba(54, 162, 235, 0.2)',
+            borderColor: 'rgba(54, 162, 235, 1)',
+            borderWidth: 1
+        }]
+    };
+
+    const programmingLanguagesData = {
+        labels: ["HTML", "CSS", "JS", "Java", "C++"],
+        datasets: [{
+            label: "Number of Problems",
+            data: [5, 2, 3, 5, 7],
+            backgroundColor: randomColorArray(5, 0.3),
+            borderColor: 'white',
+            borderWidth: 1
+        }]
+    };
+
+    function randomColorArray(size, alpha) {
+        let colors = [];
+        for(let i=0; i<size; i=i+1) {
+            let red = Math.round(Math.random()*255);
+            let green = Math.round(Math.random()*255);
+            let blue = Math.round(Math.random()*255);
+
+            colors.push(`rgba(${red}, ${green}, ${blue}, ${alpha})`);
+        }
+        return colors;
+    }
+
+    return (
+        <div className="charts">
+            <div className="line-chart">
+                <div className="chart-title">Daily Activity</div>
+                <div className="chart-container">
+                    <div className="chart">
+                        <Line
+                            data={{
+                                labels: dailyActivityData.labels,
+                                datasets: dailyActivityData.datasets
+                            }}
+                            options={{
+                                maintainAspectRatio: false,
+                                scales: {
+                                    yAxes: [
+                                        {
+                                            ticks: {
+                                                beginAtZero: true,
+                                            },
+                                        },
+                                    ],
+                                }
+                            }}
+                        />
+                    </div>
+                    <div className="chart-text">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima ratione autem aspernatur ut, architecto neque saepe aliquid repellat quibusdam ducimus quae nulla commodi iure fugit.
+                    </div>
+                </div>
+            </div>
+            <div className="pie-chart">
+                <div className="chart-title">Programming Languages</div>
+                <div className="chart-container">
+                    <div className="chart">
+                        <Pie
+                            data={{
+                                labels: programmingLanguagesData.labels,
+                                datasets: programmingLanguagesData.datasets
+                            }}
+                            options={{
+                                maintainAspectRatio: false,
+                                scales: {
+                                    yAxes: [
+                                        {
+                                            ticks: {
+                                                beginAtZero: true,
+                                            },
+                                        },
+                                    ],
+                                }
+                            }}
+                        />
+                    </div>
+                    <div className="chart-text">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, harum rem fugit magni expedita, nemo ratione, vero dolorum amet natus reiciendis quia aspernatur magnam libero?
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Charts;

frontend/src/components/styles/Charts.css

@@ -0,0 +1,51 @@
+.charts {
+    background-color: aliceblue;
+    margin: 1rem 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.line-chart, .pie-chart {
+    height: 50vh;
+    padding: 1rem;
+}
+
+.chart-title {
+    font-size: 2rem;
+    padding: 0.5rem 0;
+}
+
+.chart-container {
+    display: flex;
+    height: 90%;
+}
+
+.chart {
+    width: 70%;
+}
+
+.chart-text {
+    padding: 1rem;
+    width: 30%;
+}
+
+@media only screen and (max-width: 580px) {
+    .chart-title {
+        font-size: 1.3rem;
+    }
+
+    .chart-container {
+        flex-direction: column;
+        margin: 0;
+    }
+
+    .chart, .chart-text {
+        width: 100%;
+        padding: 1rem 0;
+    }
+
+    .line-chart, .pie-chart {
+        height: auto;
+    }
+}