├── Client
└── dashboard
│ ├── .gitignore
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
│ └── src
│ ├── App.css
│ ├── App.js
│ ├── charts
│ ├── BarChart.jsx
│ ├── DoughnutChart.jsx
│ ├── LineChart.jsx
│ ├── PieChart.jsx
│ ├── PolarChart.jsx
│ └── RadarChart.jsx
│ ├── components
│ ├── AccordionForCharts.jsx
│ ├── CardsForData.jsx
│ ├── Filters.jsx
│ ├── Header.jsx
│ └── Tabsrow.jsx
│ └── index.js
└── Server
├── .gitignore
├── app.js
├── controllers
└── index.js
├── database
└── index.js
├── models
└── index.js
├── package-lock.json
├── package.json
└── routes
└── index.js
/Client/dashboard/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/Client/dashboard/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "dashboard",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.5",
7 | "@testing-library/react": "^13.4.0",
8 | "@testing-library/user-event": "^13.5.0",
9 | "axios": "^1.4.0",
10 | "bootstrap": "^5.2.3",
11 | "chart.js": "^4.3.0",
12 | "react": "^18.2.0",
13 | "react-bootstrap": "^2.7.4",
14 | "react-chartjs-2": "^5.2.0",
15 | "react-dom": "^18.2.0",
16 | "react-scripts": "5.0.1",
17 | "web-vitals": "^2.1.4"
18 | },
19 | "scripts": {
20 | "start": "react-scripts start",
21 | "build": "react-scripts build",
22 | "test": "react-scripts test",
23 | "eject": "react-scripts eject"
24 | },
25 | "eslintConfig": {
26 | "extends": [
27 | "react-app",
28 | "react-app/jest"
29 | ]
30 | },
31 | "browserslist": {
32 | "production": [
33 | ">0.2%",
34 | "not dead",
35 | "not op_mini all"
36 | ],
37 | "development": [
38 | "last 1 chrome version",
39 | "last 1 firefox version",
40 | "last 1 safari version"
41 | ]
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/Client/dashboard/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ayusharma-ctrl/Data_Visualization_Dashboard-MERN-Stack/d07ccbf1c8401b26da285ee5d03dcf66a5750427/Client/dashboard/public/favicon.ico
--------------------------------------------------------------------------------
/Client/dashboard/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | React App
28 |
29 |
30 | You need to enable JavaScript to run this app.
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/Client/dashboard/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ayusharma-ctrl/Data_Visualization_Dashboard-MERN-Stack/d07ccbf1c8401b26da285ee5d03dcf66a5750427/Client/dashboard/public/logo192.png
--------------------------------------------------------------------------------
/Client/dashboard/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ayusharma-ctrl/Data_Visualization_Dashboard-MERN-Stack/d07ccbf1c8401b26da285ee5d03dcf66a5750427/Client/dashboard/public/logo512.png
--------------------------------------------------------------------------------
/Client/dashboard/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/Client/dashboard/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/Client/dashboard/src/App.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap');
2 |
3 | *{
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | font-family: 'Inter', sans-serif;
8 | font-weight: 400;
9 | }
10 |
11 | .tabsClass {
12 | margin: 1vw 2vw;
13 | }
14 |
15 | .cardText {
16 | font-size: 0.8rem;
17 | white-space: nowrap;
18 | overflow: hidden;
19 | text-overflow: ellipsis;
20 | }
21 |
22 | .cardDiv {
23 | transition: transform 0.2s ease-in-out;
24 | }
25 |
26 | .cardDiv:hover{
27 | transform: scale(0.9);
28 | background-color: thistle;
29 | }
--------------------------------------------------------------------------------
/Client/dashboard/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import axios from 'axios';
3 | import './App.css';
4 |
5 | //import from files
6 | import Header from './components/Header';
7 | import Tabsrow from './components/Tabsrow';
8 |
9 |
10 | function App() {
11 | //state to save data received from the server
12 | const [mainData, setMainData] = useState([]);
13 | //asynchronous function to fetch data from server and updating the state
14 | const getDataFromDB = async() => {
15 | try{
16 | const response = await axios.get("https://dashboard-6bfs.onrender.com/api/data/all");
17 | setMainData(response.data.data)
18 | }
19 | catch(e){
20 | console.log(e)
21 | }
22 | }
23 | //calling the above function on first render
24 | useEffect(()=>{
25 | getDataFromDB();
26 | },[])
27 | //where a state is updated, we will print the length of data received just for the test purposes
28 | useEffect(()=>{
29 | console.log(mainData.length)
30 | },[mainData])
31 |
32 | return (
33 |
34 |
35 |
37 | );
38 | }
39 |
40 | export default App;
41 |
--------------------------------------------------------------------------------
/Client/dashboard/src/charts/BarChart.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Bar } from 'react-chartjs-2';
3 | import Chart from 'chart.js/auto';
4 |
5 |
6 | const BarChart = ({serverData}) => {
7 |
8 | let uniqueSectors = [];
9 |
10 | //using forEach because it doesn't return any array and we are adding unique sector names to an array
11 | serverData.forEach((i) => {
12 | if (!uniqueSectors.includes(i.sector) && i.sector !== "") {
13 | uniqueSectors.push(i.sector);
14 | }
15 | })
16 |
17 | // counting the total number of projects in each sector uniquely
18 | const sectorCount = uniqueSectors.map((item) => {
19 | return {
20 | sector: item,
21 | count: serverData.filter((i) => i.sector === item).length
22 | }
23 | })
24 |
25 |
26 | return (
27 |
28 | e),
31 | datasets: [
32 | {
33 | label: 'Total Projects',
34 | data: sectorCount.map(e=>e.count),
35 | borderWidth: 1,
36 | },
37 | // {
38 | // label: 'Quantity',
39 | // data: [7, 26, 111, 22, 11, 56]
40 | // }
41 | ]
42 | }}
43 | options={{
44 | maintainAspectRatio: false,
45 | scales: {
46 | y: {
47 | type: 'linear',
48 | beginAtZero: true,
49 | },
50 | }
51 | }}
52 | height={300}
53 |
54 | />
55 |
56 | )
57 | }
58 |
59 | export default BarChart
--------------------------------------------------------------------------------
/Client/dashboard/src/charts/DoughnutChart.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Doughnut } from 'react-chartjs-2';
3 | import Chart from 'chart.js/auto';
4 |
5 | const DoughnutChart = ({serverData}) => {
6 |
7 | let uniqueSectors = [];
8 | //using forEach because it doesn't return any array
9 | serverData.forEach((i) => {
10 | if (!uniqueSectors.includes(i.sector) && i.sector !== "") {
11 | uniqueSectors.push(i.sector);
12 | }
13 | })
14 |
15 | let uniqueTopics = [];
16 | serverData.forEach((i) => {
17 | if (!uniqueTopics.includes(i.topic) && i.topic !== "") {
18 | uniqueTopics.push(i.topic);
19 | }
20 | })
21 |
22 | let uniqueRegion = [];
23 | serverData.forEach((i) => {
24 | if (!uniqueRegion.includes(i.region) && i.region !== "") {
25 | uniqueRegion.push(i.region);
26 | }
27 | })
28 |
29 | let uniqueCountry = [];
30 | serverData.forEach((i) => {
31 | if (!uniqueCountry.includes(i.country) && i.country !== "") {
32 | uniqueCountry.push(i.country);
33 | }
34 | })
35 |
36 | let uniqueSource = [];
37 | serverData.forEach((i) => {
38 | if (!uniqueSource.includes(i.source) && i.source !== "") {
39 | uniqueSource.push(i.source);
40 | }
41 | })
42 |
43 | let uniquePestle = [];
44 | serverData.forEach((i) => {
45 | if (!uniquePestle.includes(i.pestle) && i.pestle !== "") {
46 | uniquePestle.push(i.pestle);
47 | }
48 | })
49 |
50 | const label = ["Country", "Region", "Source", "Topic", "Sector", "Pestle"];
51 | return (
52 |
53 |
78 | )
79 | }
80 |
81 | export default DoughnutChart
--------------------------------------------------------------------------------
/Client/dashboard/src/charts/LineChart.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Line } from 'react-chartjs-2';
3 | import Chart from 'chart.js/auto';
4 |
5 | const LineChart = ({serverData}) => {
6 |
7 | let uniquePestle = [];
8 | serverData.forEach((i) => {
9 | if (!uniquePestle.includes(i.pestle) && i.pestle !== "") {
10 | uniquePestle.push(i.pestle);
11 | }
12 | })
13 |
14 | const pestleCount = uniquePestle.map((item) => {
15 | return {
16 | pestle: item,
17 | count: serverData.filter((i) => i.pestle === item).length
18 | }
19 | })
20 |
21 | return (
22 |
23 | i.count),
30 | borderWidth: 1,
31 | },
32 | ]
33 | }}
34 | options={{
35 | maintainAspectRatio: false,
36 | scales: {
37 | y: {
38 | type: 'linear',
39 | beginAtZero: true
40 | },
41 | }
42 | }}
43 | height={300}
44 | />
45 |
46 | )
47 | }
48 |
49 | export default LineChart
--------------------------------------------------------------------------------
/Client/dashboard/src/charts/PieChart.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Pie } from 'react-chartjs-2';
3 | import Chart from 'chart.js/auto';
4 |
5 | const PieChart = ({serverData}) => {
6 | let uniquePestle = [];
7 |
8 | serverData.forEach((i) => {
9 | if (!uniquePestle.includes(i.pestle) && i.pestle !== "") {
10 | uniquePestle.push(i.pestle);
11 | }
12 | })
13 |
14 | const pestleCount = uniquePestle.map((item) => {
15 | return {
16 | pestle: item,
17 | count: serverData.filter((i) => i.pestle === item).length
18 | }
19 | })
20 |
21 | return (
22 |
23 |
i.count),
30 | borderWidth: 1,
31 | hoverOffset: 5,
32 | },
33 | ]
34 | }}
35 | options={{
36 | maintainAspectRatio: false,
37 | scales: {
38 | y: {
39 | type: 'linear',
40 | beginAtZero: true
41 | },
42 | }
43 | }}
44 | height={300}
45 | />
46 |
24 | i.count),
31 | borderWidth: 1,
32 | },
33 | ]
34 | }}
35 | options={{
36 | maintainAspectRatio: false,
37 | scales: {
38 | y: {
39 | type: 'linear',
40 | beginAtZero: true
41 | },
42 | }
43 | }}
44 | height={300}
45 | />
46 |
47 | )
48 | }
49 |
50 | export default RadarChart
--------------------------------------------------------------------------------
/Client/dashboard/src/components/AccordionForCharts.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Accordion from 'react-bootstrap/Accordion';
3 |
4 | //import from files
5 | import BarChart from '../charts/BarChart';
6 | import PolarChart from '../charts/PolarChart';
7 | import LineChart from '../charts/LineChart';
8 | import RadarChart from '../charts/RadarChart';
9 | import DoughnutChart from '../charts/DoughnutChart';
10 | import PieChart from '../charts/PieChart';
11 |
12 | const AccordionForCharts = ({ data }) => {
13 | // defaultActiveKey="0"
14 | return (
15 |
16 |
17 |
18 | Polar Area and Doughnut Charts - represents number of countries, sectors, topics, pestles, sources, etc are involved
19 |
20 |
24 |
25 |
26 |
27 | Bar Chart- represents number of projects in each sector
28 |
29 |
31 |
32 |
33 | Line Chart- represents number of projects as per pestle
34 |
35 |
37 |
38 |
39 | Radar and Pie Charts- represents number of projects as per pestle
40 |
41 |
45 |
46 |
47 |
48 |
49 |
8 |
9 |
10 | Project Details
11 | {item.sector ? item.sector : "Sector"}
12 |
13 |
14 | {item.topic ? item.topic : "No Info"}
15 | {item.title ? item.title : "No Info"}
16 | {item.insight ? item.insight : "No Info"}
17 | {item.url ? item.url : "No Info"}
18 | {item.region ? item.region : "No Info"}
19 | {item.country ? item.country : "No Info"}
20 | {item.source ? item.source : "No Info"}
21 | {item.pestle ? item.pestle : "No Info"}
22 | {item.start_year ? item.start_year : "No Info"}
23 | {item.end_year ? item.end_year : "No Info"}
24 | {item.added ? item.added : "No Info"}
25 | {item.published ? item.published : "No Info"}
26 | {item.intensity ? item.intensity : "No Info"}
27 | {item.likelihood ? item.likelihood : "No Info"}
28 |
29 |
30 |
31 |
32 |
36 |
37 |
38 |
39 |
40 | Filter By Year
41 |
42 |
43 |
44 | 2014
45 | 2015
46 | 2016
47 | 2017
48 | 2018
49 | 2019
50 | 2020
51 |
52 |
53 |
54 | Reset Filters
55 |
56 | )
57 | }
58 |
59 | export default Filters
--------------------------------------------------------------------------------
/Client/dashboard/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Container from 'react-bootstrap/Container';
3 | import Navbar from 'react-bootstrap/Navbar';
4 |
5 | // we are using bootstrap navbar
6 | const Header = () => {
7 | return (
8 | <>
9 |
10 |
11 | Data Virtualization Dashboard
12 |
13 |
14 |
15 | )
16 | }
17 |
18 | export default Header
--------------------------------------------------------------------------------
/Client/dashboard/src/components/Tabsrow.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import Tab from 'react-bootstrap/Tab';
3 | import Tabs from 'react-bootstrap/Tabs';
4 | import CardGroup from 'react-bootstrap/CardGroup';
5 | import Button from 'react-bootstrap/Button';
6 |
7 | //import from files
8 | import CardsForData from './CardsForData';
9 | import AccordionForCharts from './AccordionForCharts';
10 | import Filters from './Filters';
11 | import axios from 'axios';
12 |
13 | const Tabsrow = ({ data, setMainData }) => {
14 | // state to store the number of data cards we want to display at a time, we'll update it on click of a button
15 | const [limit, setLimit] = useState(5);
16 | const limitedData = data.slice(0, limit);
17 | // state to store the search bar text
18 | const [search, setSearch] = useState("");
19 | // function to make an api call to get the filtered data
20 | const handleSearchResult = async (e) => {
21 | e.preventDefault();
22 | try {
23 | const response = await axios.get(`https://dashboard-6bfs.onrender.com/api/data/any/${search}`);
24 | setMainData(response.data.data);
25 | setSearch("");
26 | }
27 | catch (e) {
28 | console.log(e)
29 | }
30 | }
31 |
32 | return (
33 |
34 |
39 |
40 |
44 | No data found, or please wait for a while.
48 | ) : limitedData && limitedData.length > 0 ? (
49 |
50 | {limitedData.map((e, i) => {
51 | return
54 | ) : (
55 | Loading...
56 | )}
57 | setLimit(prev => prev + 5)}>Show More
58 |
59 |
60 |
64 |
67 |
68 |
9 |
11 | );
12 |
--------------------------------------------------------------------------------
/Server/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | config.env
--------------------------------------------------------------------------------
/Server/app.js:
--------------------------------------------------------------------------------
1 | import express from 'express';
2 | import { config } from 'dotenv';
3 | import cors from 'cors';
4 |
5 | // import from files
6 | import reportRouter from './routes/index.js'
7 | import { mongoDB } from './database/index.js'
8 |
9 |
10 | //creates a new instance of an Express application
11 | const app = express();
12 |
13 | //setting up config.env file so that we can use content of it
14 | config({
15 | path: "./config.env"
16 | })
17 |
18 | //connecting server and database, just call this func^
19 | mongoDB();
20 |
21 |
22 | // <------------ middlewares ------------>
23 |
24 | //we'll be sending data in json format, that's why it is required to use this middleware
25 | app.use(express.json());
26 |
27 | //we'll be using dynamic routes, in order to read the data from url we have to use this
28 | app.use(express.urlencoded({ extended: true }));
29 |
30 | //set 'credentials: true' to pass --> headers, cookies, etc to browser/frontend
31 | app.use(cors({
32 | origin: [process.env.FRONTEND_URL],
33 | methods: ["GET", "POST", "PUT", "DELETE"],
34 | credentials: true,
35 | }))
36 |
37 | // route splitting
38 | app.use("/api/data", reportRouter)
39 |
40 | // <----------------------------------------------------------------------->
41 |
42 |
43 | // variables
44 | const PORT = process.env.PORT || 8000
45 |
46 |
47 | //it is a test route just to see our server is working
48 | app.get("/", (req, res) => {
49 | return res.send(`Welcome to Data Virtualization Server
50 |
Below are the some examples of supported routes...
51 |
52 | GET all data from the database - /api/data
53 | GET data filtered by year - /api/data/year/:year
54 | GET data filtered by region - /api/data/region/:region
55 | Much more...
56 |
57 |