54 |
59 | );
60 | }
61 |
62 | export default App;
63 |
--------------------------------------------------------------------------------
/src/App.module.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --background: #e2e1e0;
3 |
4 | /* // border radius */
5 | --radius: 4px;
6 |
7 | /* //Text */
8 | --heading: #424242;
9 | --text: #1b1b1b;
10 | --sub-text: #6d6d6d;
11 |
12 | /* // Color */
13 | --happy: #fddb22; /*/use as overall*/
14 | --fear: #3d3d3d; /*/use as hashtal*/
15 | --sad: #3333ff; /*/use as today*/
16 | --anger: #ff1f1f;
17 |
18 | /* //Box Shadow */
19 | --card: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
20 | --card-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
21 | --card-hover: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
22 | --rest: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
23 | }
24 |
25 | .App {
26 | display: flex;
27 | flex: 1;
28 | flex-flow: column;
29 | }
30 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import App from './App';
4 |
5 | test('renders learn react link', () => {
6 | const { getByText } = render(
57 |
91 | );
92 | }
93 |
94 |
95 | function DatePicker(props) {
96 | return (
97 |
58 | {text}
59 |
62 | Why
60 | {why} 61 |
63 |
72 |
68 |
71 | Select Date
69 |
73 |
90 |
74 |
77 | Emotion
75 | {(Object.keys(date).length !== 0) ?
78 |
81 | Score
79 | {(Object.keys(date).length !== 0) ?
82 | 
:
85 | {/* Word Cloud
83 | {imgUrl !== "" ? :
86 |
*/}
89 | Select Date
87 |
11 |
12 |
15 |
16 |
17 | );
18 | }
19 |
20 | export default Header;
--------------------------------------------------------------------------------
/src/component/Header/Header.module.css:
--------------------------------------------------------------------------------
1 | .Container {
2 | color: white;
3 | margin: 0 0;
4 | padding: 0 0;
5 | background-color: #191919;
6 | }
7 |
8 | .Container h1 {
9 | padding: 0 10px;
10 | margin: 5px 0;
11 | }
12 |
13 | .Container h1:hover {
14 | cursor: pointer;
15 | }
16 |
17 | .NavItem {
18 | color: white;
19 | padding: 0 10px;
20 | display: flex;
21 | align-items: center;
22 | background-color: #004f7c;
23 | text-decoration: none;
24 | }
25 |
--------------------------------------------------------------------------------
/src/component/Home/Home.jsx:
--------------------------------------------------------------------------------
1 | // Don't re-invent the wheel - Best software developer tip
2 |
3 | // Use react material ui and bootstrap for designing
4 | import React from 'react';
5 | import styles from './Home.module.scss';
6 | import { Link } from "react-router-dom";
7 | import Jumbotron from 'react-bootstrap/Jumbotron'
8 | import Container from 'react-bootstrap/Container'
9 | import Typography from '@material-ui/core/Typography'
10 | import Button from '@material-ui/core/Button';
11 | import { Dashboard, DeveloperMode } from "@material-ui/icons";
12 |
13 | const overview = `Twitter sentiment analysis Machine learning model, which can find the sentiment score based
14 | on the tweets data. We are finding sentiment scores and emotion for 5000 tweets data everyday
15 | using machine learning models and analyzing it with various data analysis like frequency count
16 | ,monthly and weekly data analysis . Based on the sentiment score of everyday and
17 | ,we can analyze the sentiments ,variation in sentiments of public.`;
18 |
19 | const purpose = `Sentiment analysis is extremely useful in social media monitoring as it allows us to gain an
20 | overview of the wider public opinion behind certain topics. Social media websites like Twitte,
21 | Facebook make that process quicker and easier than ever before, thanks to real-time
22 | monitoring capabilities.The human language is complex. Teaching a machine to analyse the various grammatical
23 | nuances, cultural variations, slang and misspellings that occur in online mentions is a difficult
24 | process. Teaching a machine to understand how context can affect tone is even more difficult
25 | The Corona Virus endangers our physical health indeed, but alongside, social distancing also
26 | poses a threat to our emotional stability. Thus, it is crucial to understand public sentiments under COVID-19.`;
27 |
28 |
29 | function Home() {
30 | // Add flexbox and style and content
31 | return (
32 |
33 | DashBoard
14 |
34 |
71 | );
72 | }
73 |
74 | export default Home;
--------------------------------------------------------------------------------
/src/component/Home/Home.module.scss:
--------------------------------------------------------------------------------
1 | .grid {
2 | display: grid;
3 | grid-template-rows: 40% auto;
4 | grid-template-columns: 100%;
5 | height: 100%;
6 | .child_1 {
7 | background-image: url("./../../assets/images/twitter.jpg");
8 | background-repeat: no-repeat;
9 | background-position: center center;
10 | background-size: cover;
11 | width: 100%;
12 | .jumbotron {
13 | margin: 6%;
14 | }
15 | .title {
16 | font-size: 4em;
17 | color: #1f7bac;
18 | }
19 | .subtitle {
20 | font-size: 1.1em;
21 | color: #93dcff;
22 | }
23 | .button {
24 | color: white;
25 | border: 1px solid white;
26 | margin-top: 2%;
27 | .link {
28 | padding: 0 10px;
29 | color: white;
30 | text-decoration: none;
31 | }
32 | margin-left: 2%;
33 | }
34 | }
35 | .child_2 {
36 | display: grid;
37 | grid-template-columns: 20% auto 20%;
38 | .summary {
39 | grid-column: 2/3;
40 | margin-top: 5%;
41 | padding: 10px 0;
42 | h1 {
43 | margin: 0 0;
44 | color: #1f7bac;
45 | }
46 | .text {
47 | padding: 10px 0;
48 | color: #1b1b1b;
49 | line-height: 1.5em;
50 | }
51 | }
52 | }
53 | }
54 |
55 | @media (max-width: 480px), (max-height: 480px) and (orientation: landscape) {
56 | .grid {
57 | .button {
58 | background-color: #1b1b1b;
59 | }
60 | .child_2 {
61 | display: flex;
62 | padding: 10px 20px;
63 | flex-flow: column;
64 | align-items: center;
65 | .summary {
66 | margin-top: 5%;
67 | h1 {
68 | margin: 0 0;
69 | }
70 | .text {
71 | padding: 10px 0;
72 | color: #1b1b1b;
73 | font-size: 1.2rem;
74 | }
75 | }
76 | }
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/src/component/Navbar/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { DateRange, ShowChart, Assessment } from "@material-ui/icons";
3 | import styles from "./Navbar.module.css";
4 |
5 | function Navbar(props) {
6 | return (
7 |
35 |
36 |
37 |
38 | Covid-19 Dashboard
39 |
40 |
41 | Sentiment Analysis of COVID-19 Tweets – Visualization Dashboard
42 |
43 | {/* */}
44 |
48 |
52 |
53 |
54 |
55 |
56 |
70 |
57 |
59 |
60 | {overview}
61 |
62 |
64 |
65 | {purpose}
66 | For more Information, Click Here.
67 |
68 |
69 | Overview
58 |59 |
Purpose
63 |64 |
8 |
21 | );
22 | }
23 |
24 | export default Navbar;
--------------------------------------------------------------------------------
/src/component/Navbar/Navbar.module.css:
--------------------------------------------------------------------------------
1 | .Container {
2 | display: grid;
3 | grid-template-columns: 1fr 1fr 1fr;
4 | color: white;
5 | background-color: #191919;
6 | text-align: center;
7 | background-color: #1f7bac;
8 | }
9 |
10 | .Item {
11 | border: 1px solid white;
12 | display: flex;
13 | justify-content: center;
14 | align-items: center;
15 | }
16 |
17 | .Item h1 {
18 | margin: 3px 10px;
19 | font-size: 1.5rem;
20 | padding: 0 0;
21 | }
22 |
23 | .Item:hover {
24 | background-color: #004f7c;
25 | cursor: pointer;
26 | }
27 |
--------------------------------------------------------------------------------
/src/component/Overall/Overall.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import styles from "./Overall.module.css";
3 | import LineChart, { DualLineChart, MultiLineChart } from "../charts/LineChart/LineChart";
4 | import BarChart, { ScoreBarChart, FrequencyBarChart, MultiBarChart, MultiFrequencyBarChart } from "../charts/BarChart/BarChart";
5 | import { getWeekData, getMonthData } from "../../services/utilities";
6 | import { NativeSelect, FormControl, CircularProgress } from "@material-ui/core";
7 | import * as freq from "../../services/frequency";
8 | import SimpleCard from "../ui/Cards/SimpleCard";
9 |
10 | const spinner = props.onSelect("Date")}>
9 |
12 | Date
11 | props.onSelect("Overall")}>
13 |
16 | Overall
15 | props.onSelect("Tracker")}>
17 |
20 | Tracker
19 |
81 |
151 | );
152 | }
153 |
154 | function Tab(props) {
155 | return (
156 |
82 | {text}
83 |
86 | Why
84 | {why} 85 |
87 |
92 |
93 |
98 |
94 |
96 | {props.data.length !== 0 ? Score Daily
95 |
99 |
106 |
100 |
103 | {scoreType === "Monthly" && props.data.length !== 0 && {scoreType}
101 |
107 |
114 | {/* Emotions section here */}
115 |
108 |
111 | {(props.data.length !== 0 && scoreFrequency === "Subjectivity") && Frequency
109 |
116 |
122 |
123 |
130 |
124 |
126 | {props.data.length === 0 && spinner}
127 | {props.data.length !== 0 && tabTitle === "Emotions" && {tabTitle + " Daily"}
125 |
131 |
141 |
132 |
135 |
136 | {emotionType === "Monthly" && props.data.length !== 0 && tabTitle === "Emotions" && {emotionType}
133 |
142 |
150 |
143 |
146 | {(props.data.length !== 0 && tabTitle === "Emotions" && emotionFrequency === "Overall") && Frequency
144 | {tabTitle !== "Emotions" && props.onSelect(props.title)}>
157 |
159 | );
160 | }
161 |
162 | function Picker(props) {
163 | return (
164 | {props.title}
158 |
118 |
168 | );
169 | }
170 |
171 | export default TestModel;
--------------------------------------------------------------------------------
/src/component/TestModel/TestModel.module.scss:
--------------------------------------------------------------------------------
1 | .grid {
2 | display: grid;
3 | grid-template-rows: 40% auto;
4 | grid-template-columns: 100%;
5 | grid-row-gap: 10px;
6 | height: 100%;
7 | .child_1 {
8 | background-image: url("./../../assets/images/testS.jpg");
9 | background-repeat: no-repeat;
10 | width: 100%;
11 | height: 100%;
12 | background-position: center center;
13 | background-size: cover;
14 | .jumbotron {
15 | margin: 6%;
16 | }
17 | .Link {
18 | text-decoration: none;
19 | display: flex;
20 | align-items: center;
21 | color: white;
22 | padding: 10px 10px;
23 | }
24 | .Link h2 {
25 | margin: 0 0;
26 | padding: 5px 5px;
27 | font-size: 1em;
28 | }
29 | .title {
30 | font-size: 4em;
31 | color: #1f7bac;
32 | }
33 | .subtitle {
34 | font-size: 1.1em;
35 | color: #1f7bacbd;
36 | }
37 | }
38 | .child_2 {
39 | display: grid;
40 | grid-template-columns: 20% auto 20%;
41 | grid-template-rows: 40% 30% 15% auto;
42 | grid-row-gap: 10px;
43 | .summary {
44 | grid-column: 2/3;
45 | margin-top: 5%;
46 | .text {
47 | color: #1b1b1b;
48 | line-height: 1.5em;
49 | }
50 | }
51 | .input {
52 | grid-column: 2/3;
53 | width: 70%;
54 | height: 100%;
55 | min-height: fit-content;
56 | }
57 | .button {
58 | grid-column: 2/3;
59 | width: fit-content;
60 | height: 60%;
61 | margin: 10px 0;
62 | border: 1px solid #1f7bac;
63 | color: #1f7bac;
64 | background-color: white;
65 | &:hover {
66 | background-color: #1f7bac;
67 | color: white;
68 | border: none;
69 | }
70 | }
71 | .output {
72 | display: grid;
73 | grid-template-rows: auto auto auto;
74 | grid-template-columns: auto auto;
75 | grid-row-gap: 10px;
76 | grid-column: 2/3;
77 | margin-bottom: 8%;
78 | margin-top: 3%;
79 | .subject {
80 | grid-row: 1/2;
81 | grid-column: 1/2;
82 | font-weight: bold;
83 | color: #1f7bac;
84 | display: grid;
85 | grid-template-columns: 50% auto;
86 | span {
87 | color: black;
88 | font-size: 1.5rem;
89 | font-weight: normal;
90 | margin-right: 5%;
91 | }
92 | }
93 | .polar {
94 | grid-row: 2/3;
95 | grid-column: 1/2;
96 | font-weight: bold;
97 | color: #1f7bac;
98 | display: grid;
99 | grid-template-columns: 50% auto;
100 | span {
101 | color: black;
102 | font-size: 1.5rem;
103 | font-weight: normal;
104 | margin-right: 5%;
105 | }
106 | }
107 | .emotion {
108 | grid-row: 3/4;
109 | grid-column: 1/2;
110 | font-weight: bold;
111 | color: #1f7bac;
112 | display: grid;
113 | grid-template-columns: 50% auto;
114 | span {
115 | color: black;
116 | font-size: 1.5rem;
117 | font-weight: normal;
118 | margin-right: 5%;
119 | }
120 | }
121 | .emoji {
122 | display: flex;
123 | align-items: center;
124 | grid-row: 1/3;
125 | grid-column: 2/3;
126 | }
127 | }
128 | }
129 | }
130 |
131 | @media (max-width: 480px), (max-height: 480px) and (orientation: landscape) {
132 | .grid {
133 | .child_2 {
134 | display: flex;
135 | padding: 10px 20px;
136 | flex-flow: column;
137 | align-items: center;
138 | .output {
139 | width: 90%;
140 | display: flex;
141 | flex-flow: column;
142 | justify-content: space-between;
143 | margin-bottom: 8%;
144 | margin-top: 3%;
145 | .subject {
146 | display: flex;
147 | align-items: center;
148 | justify-content: space-between;
149 | span {
150 | font-size: 1rem;
151 | }
152 | }
153 | .polar {
154 | display: flex;
155 | align-items: center;
156 | justify-content: space-between;
157 | span {
158 | font-size: 1rem;
159 | }
160 | }
161 | .emotion {
162 | display: flex;
163 | align-items: center;
164 | justify-content: space-between;
165 | span {
166 | font-size: 1rem;
167 | }
168 | }
169 | .emoji {
170 | display: flex;
171 | align-items: center;
172 | justify-content: space-between;
173 | span {
174 | font-size: 1rem;
175 | }
176 | img {
177 | height: 50px;
178 | width: 50px;
179 | }
180 | }
181 | }
182 | .summary {
183 | margin-top: 5%;
184 | .text {
185 | color: #1b1b1b;
186 | font-size: 1.2rem;
187 | }
188 | }
189 | }
190 | }
191 | }
192 |
--------------------------------------------------------------------------------
/src/component/Tracker/Cards/Cards.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Card, CardContent, Typography, Grid } from "@material-ui/core";
3 | import styles from "./Cards.module.css";
4 | import CountUp from "react-countup";
5 | import cx from "classnames";
6 |
7 | function Cards({ data: { confirmed, recovered, deaths, lastUpdate } }) {
8 | // console.log(data);
9 | if (!confirmed) {
10 | return "Loading.....";
11 | }
12 | return (
13 |
119 |
121 |
122 |
123 | Analyze text
124 |
125 |
126 | Sentiment analysis and Emotion Anlaysis ML Model
127 |
128 |
129 |
130 |
131 | Back to Home
132 |
167 |
133 |
134 | Check and Analyse Emotion and Score with our custom made ML model.We have used Text Blob
135 | for finding sentiment score and IBM Tone Analyzer & BERT Model for emotion analysis.
136 |
137 |
138 |
139 | handleInput(e.target.value)}
151 | />
152 |
153 | }
158 | onClick={handleSubmit}
159 | >Check
160 | {/* store output here */}
161 |
166 | Subjectivity :
162 | {showSpinner ? spinner : (Object.keys(score).length !== 0 && score.Subjectivity.toFixed(2))}
Polarity :
163 | {showSpinner ? spinner : (Object.keys(score).length !== 0 && score.Polarity.toFixed(2))}
Emotion :
164 | {showSpinner ? spinner : emotion}
Emoji : {showSpinner ? spinner : (imgSource !== "" && 
)}
165 |
14 |
15 |
16 |
17 | Infected
18 |
19 |
21 | {new Date(lastUpdate).toLocaleDateString()}
22 | Number of active Cases of Covid-19
23 |
24 |
25 |
26 |
27 | Recoveries
28 |
29 |
31 | {new Date(lastUpdate).toLocaleDateString()}
32 | Number of recoveries from Covid-19
33 |
34 |
35 |
36 |
37 | Deaths
38 |
39 |
41 | {new Date(lastUpdate).toLocaleDateString()}
42 | Number of deaths caused by Covid-19
43 |
44 |
45 |
46 |
47 | );
48 | }
49 |
50 | export default Cards;
--------------------------------------------------------------------------------
/src/component/Tracker/Cards/Cards.module.css:
--------------------------------------------------------------------------------
1 | .container{
2 | margin: 50px 0;
3 |
4 | }
5 |
6 | .card{
7 | margin: 0 2% !important;
8 | }
9 |
10 | .infected{
11 | border-bottom: 10px solid rgba(0,0 , 255, 0.75);
12 | }
13 |
14 | .recovered{
15 | border-bottom: 10px solid rgba(0,255 , 0, 0.75);
16 | }
17 |
18 | .deaths{
19 | border-bottom: 10px solid rgba(255,0 , 0, 0.75);
20 | }
21 |
22 | @media (max-width: 770px){
23 | .card{
24 | margin: 2% 0 !important;
25 | }
26 | }
--------------------------------------------------------------------------------
/src/component/Tracker/Chart/Chart.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from "react";
2 | import { fetchDailyData } from "../../../services/api";
3 | import { Line, Bar } from "react-chartjs-2";
4 | import styles from "./Chart.module.css";
5 |
6 | function Chart({ data: { confirmed, recovered, deaths }, country }) {
7 | const [dailyData, setDailyData] = useState([]);
8 | const isCancelled = useRef(false);//prevent memory leaks performs only api calls when component is loaded to dom
9 |
10 | useEffect(() => {
11 | const fetchAPI = async () => {
12 | setDailyData(await fetchDailyData());
13 | }
14 | if (!isCancelled.current)
15 | fetchAPI();
16 | return () => {
17 | isCancelled.current = true;
18 | }
19 | // console.log(dailyData);
20 | }, []);
21 |
22 | const lineChart = (
23 | dailyData.length !== 0 ? (
24 |
68 | {country ? barChart : lineChart}
69 |
70 | );
71 | }
72 |
73 | export default Chart;
--------------------------------------------------------------------------------
/src/component/Tracker/Chart/Chart.module.css:
--------------------------------------------------------------------------------
1 | .container{
2 | display: flex;
3 | justify-content: center;
4 | width: 85%;
5 | }
6 |
7 | @media (max-width: 770px){
8 | .container{
9 | width: 100%;
10 | }
11 | }
--------------------------------------------------------------------------------
/src/component/Tracker/CountryPicker/CountryPicker.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from "react";
2 | import { NativeSelect, FormControl } from "@material-ui/core";
3 | import styles from "./CountryPicker.module.css";
4 | import { fetchCountries } from "../../../services/api";
5 |
6 | function CountryPicker({ handleCountryChange }) {
7 | const isCancelled = useRef(false);//prevent memory leaks performs only api calls when component is loaded to dom
8 | const [fetchedCountries, setFetchedCountries] = useState([]);
9 |
10 | useEffect(() => {
11 | const fetchAPI = async () => {
12 | setFetchedCountries(await fetchCountries());
13 | }
14 | if (!isCancelled.current)
15 | fetchAPI();
16 | return () => {
17 | isCancelled.current = true;
18 | }
19 | }, [setFetchedCountries]);
20 |
21 | // console.log(fetchedCountries);
22 |
23 | return (
24 |
32 | 
33 |
37 | );
38 | }
39 | }
40 |
41 | export default Tracker;
--------------------------------------------------------------------------------
/src/component/Tracker/Tracker.module.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: rgb(250, 250, 250);
3 | }
4 |
5 | .container {
6 | display: flex;
7 | justify-content: center;
8 | align-items: center;
9 | flex-direction: column;
10 | }
11 |
12 | .image {
13 | width: 370px;
14 | margin-top: 50px;
15 | }
16 |
17 | @media (max-width: 770px) {
18 | .container {
19 | margin: 0 10%;
20 | }
21 |
22 | .image {
23 | width: 100%;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/component/charts/BarChart/BarChart.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Bar } from "react-chartjs-2";
3 |
4 | import styles from "./BarChart.module.css";
5 |
6 | const colors = {
7 | joy: "#fddb22",
8 | anger: "#ff1f1f",
9 | sad: "#3333ff",
10 | fear: "#3d3d3d",
11 | subjectivity: "#0047fc",
12 | polarity: "#1f7bac"
13 | }
14 |
15 |
16 | function BarChart(props) {
17 | let monthly = props.monthly;
18 | const stateBar = props.sentiment.length !== 0 ? {
19 | labels: props.sentiment.map(d => {
20 | if (d.week)
21 | return d.week;
22 | if (d.Month)
23 | return d.Month;
24 | if (d.date)
25 | return d.date;
26 | return d;
27 | }),
28 | datasets: [{
29 | label: "Percentage " + props.title,
30 | fill: false,
31 | barThickness: 12,
32 | backgroundColor: colors[props.title],
33 | borderWidth: 2,
34 | data: props.sentiment.map(d => (d[props.title].toFixed(2)))
35 | }
36 | ]
37 | } : null;
38 |
39 | const bar = stateBar !== null ? (
76 |
82 |
83 | );
84 | }
85 |
86 |
87 | function MultiBarChart(props) {
88 | let monthly = props.monthly;
89 | const stateBar = props.sentiment.length !== 0 ? {
90 | labels: props.sentiment.map(d => {
91 | if (d.week)
92 | return d.week;
93 | if (d.Month)
94 | return d.Month;
95 | if (d.date)
96 | return d.date;
97 | return d;
98 | }),
99 | datasets: [{
100 | label: "Joy",
101 | fill: false,
102 | barThickness: 12,
103 | backgroundColor: colors.joy,
104 | borderWidth: 2,
105 | data: props.sentiment.map(d => (d.joy.toFixed(2)))
106 | }, {
107 | label: "Sad",
108 | fill: false,
109 | barThickness: 12,
110 | backgroundColor: colors.sad,
111 | borderWidth: 2,
112 | data: props.sentiment.map(d => (d.sad.toFixed(2)))
113 | }, {
114 | label: "Anger",
115 | fill: false,
116 | barThickness: 12,
117 | backgroundColor: colors.anger,
118 | borderWidth: 2,
119 | data: props.sentiment.map(d => (d.anger.toFixed(2)))
120 | }, {
121 | label: "Fear",
122 | fill: false,
123 | barThickness: 12,
124 | backgroundColor: colors.fear,
125 | borderWidth: 2,
126 | data: props.sentiment.map(d => (d.fear.toFixed(2)))
127 | }
128 | ]
129 | } : null;
130 |
131 | const bar = stateBar !== null ? (
77 |
81 |
78 | {bar}
79 |
80 |
169 |
175 |
176 | );
177 | }
178 |
179 | function FrequencyBarChart(props) {
180 | //here prop is object
181 | let score = props.score;
182 | const stateBar = props.sentiment.length !== 0 ? {
183 | labels: Object.keys(props.sentiment),
184 | datasets: [{
185 | label: "Frequency " + props.title,
186 | fill: false,
187 | barThickness: 12,
188 | backgroundColor: colors[props.title.toLowerCase()],
189 | borderWidth: 2,
190 | data: Object.values(props.sentiment)
191 | }
192 | ]
193 | } : null;
194 |
195 | const bar = stateBar !== null ? (
170 |
174 |
171 | {bar}
172 |
173 |
232 |
238 |
239 | );
240 | }
241 |
242 | function MultiFrequencyBarChart(props) {
243 | //here prop is array of object of all emotions
244 | const stateBar = props.sentiment.length !== 0 ? {
245 | labels: Object.keys(props.sentiment[0]),
246 | datasets: [{
247 | label: "Joy",
248 | fill: false,
249 | barThickness: 12,
250 | backgroundColor: colors.joy,
251 | borderWidth: 2,
252 | data: Object.values(props.sentiment[0])
253 | }, {
254 | label: "Sad",
255 | fill: false,
256 | barThickness: 12,
257 | backgroundColor: colors.sad,
258 | borderWidth: 2,
259 | data: Object.values(props.sentiment[1])
260 | }, {
261 | label: "Anger",
262 | fill: false,
263 | barThickness: 12,
264 | backgroundColor: colors.anger,
265 | borderWidth: 2,
266 | data: Object.values(props.sentiment[2])
267 | }, {
268 | label: "Fear",
269 | fill: false,
270 | barThickness: 12,
271 | backgroundColor: colors.fear,
272 | borderWidth: 2,
273 | data: Object.values(props.sentiment[3])
274 | }
275 | ]
276 | } : null;
277 |
278 | const bar = stateBar !== null ? (
233 |
237 |
234 | {bar}
235 |
236 |
315 |
321 |
322 | );
323 | }
324 |
325 | function ScoreBarChart(props) {
326 | let monthly = props.monthly;
327 | const stateBar = props.sentiment.length !== 0 ? {
328 | labels: props.sentiment.map(d => {
329 | if (d.week)
330 | return d.week;
331 | if (d.Month)
332 | return d.Month;
333 | if (d.date)
334 | return d.date;
335 | return "";
336 | }),
337 | datasets: [{
338 | label: "Subjectivity",
339 | fill: false,
340 | barThickness: 12,
341 | backgroundColor: 'orange',
342 | borderWidth: 2,
343 | data: props.sentiment.map(d => d.subjectivity.toFixed(2))
344 | }, {
345 | label: "Polarity",
346 | fill: false,
347 | barThickness: 12,
348 | backgroundColor: 'lightgreen',
349 | borderWidth: 2,
350 | data: props.sentiment.map(d => d.polarity.toFixed(2))
351 | }
352 | ]
353 | } : null;
354 |
355 | const bar = stateBar !== null ? (
316 |
320 |
317 | {bar}
318 |
319 |
392 |
398 |
399 | );
400 | }
401 |
402 | export default BarChart;
403 | export { ScoreBarChart, FrequencyBarChart, MultiBarChart, MultiFrequencyBarChart };
--------------------------------------------------------------------------------
/src/component/charts/BarChart/BarChart.module.css:
--------------------------------------------------------------------------------
1 | .Container {
2 | display: flex;
3 | flex-flow: column;
4 | flex: 1;
5 | justify-content: space-between;
6 | align-items: center;
7 | }
8 |
9 | .Chart {
10 | /* height: 80%; */
11 | height: fit-content;
12 | width: 70%;
13 | padding: 20px 20px;
14 | /* overflow-x: scroll; */
15 | }
16 |
17 | .ChartElement {
18 | height: 400px;
19 | /* width: 2000px; */
20 | /* background-color: lightgreen; */
21 | }
22 |
23 | .MultiBar {
24 | overflow-x: scroll;
25 | width: 600px;
26 | }
27 |
28 | /* Mobile */
29 |
30 | @media (max-width: 480px) {
31 | .Chart {
32 | overflow-x: scroll;
33 | }
34 |
35 | .MultiBar {
36 | overflow-x: scroll;
37 | width: 70%;
38 | }
39 | .ChartElement {
40 | width: fit-content;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/component/charts/LineChart/LineChart.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Line } from "react-chartjs-2";
3 |
4 | import styles from "./LineChart.module.css";
5 |
6 |
7 | const colors = {
8 | joy: "#fddb22",
9 | anger: "#ff1f1f",
10 | sad: "#3333ff",
11 | fear: "#3d3d3d"
12 | }
13 |
14 | function LineChart(props) {
15 | const stateLine = props.sentiment.length !== 0 ? {
16 | labels: props.sentiment.map(d =>
17 | d.date),
18 | datasets: [{
19 | label: "Percentage Score " + props.title,
20 | fill: false,
21 | backgroundColor: 'black',
22 | lineTension: .5,
23 | borderColor: colors[props.title.toLowerCase()],
24 | borderWidth: 2,
25 | data: props.sentiment.map(d => (d.value[props.title].toFixed(2)))
26 | }]
27 | } : null;
28 |
29 | const line = stateLine !== null ? (
393 |
397 |
394 | {bar}
395 |
396 |
71 |
77 |
78 | );
79 | }
80 |
81 | function DualLineChart(props) {
82 | const stateLine = props.sentiment.length !== 0 ? {
83 | labels: props.sentiment.map(d =>
84 | d.date),
85 | datasets: [{
86 | label: "Percentage Score " + props.title1,
87 | fill: false,
88 | backgroundColor: 'black',
89 | lineTension: .5,
90 | borderColor: 'rgba(144,238,144,10)',
91 | borderWidth: 2,
92 | data: props.sentiment.map(d => (d.value[props.title1].toFixed(2))),
93 | yAxisID: "polarity"
94 | },
95 | {
96 | label: "Percentage Score " + props.title2,
97 | fill: false,
98 | backgroundColor: 'black',
99 | lineTension: .5,
100 | borderColor: 'rgba(255,165,0,10)',
101 | borderWidth: 2,
102 | data: props.sentiment.map(d => (d.value[props.title2].toFixed(2))),
103 | yAxisID: "subjectivity"
104 | }]
105 | } : null;
106 |
107 | const line = stateLine !== null ? (
72 |
76 |
73 | {line}
74 |
75 |
163 |
169 |
170 | );
171 | }
172 |
173 |
174 | function MultiLineChart(props) {
175 | const stateLine = props.sentiment.length !== 0 ? {
176 | labels: props.sentiment.map(d =>
177 | d.date),
178 | datasets: [{
179 | label: "Percentage Joy",
180 | fill: false,
181 | backgroundColor: 'black',
182 | lineTension: .5,
183 | borderColor: colors.joy,
184 | borderWidth: 2,
185 | data: props.sentiment.map(d => (d.value.joy.toFixed(2)))
186 | }, {
187 | label: "Percentage Sad",
188 | fill: false,
189 | backgroundColor: 'black',
190 | lineTension: .5,
191 | borderColor: colors.sad,
192 | borderWidth: 2,
193 | data: props.sentiment.map(d => (d.value.sad.toFixed(2)))
194 | }, {
195 | label: "Percentage Anger",
196 | fill: false,
197 | backgroundColor: 'black',
198 | lineTension: .5,
199 | borderColor: colors.anger,
200 | borderWidth: 2,
201 | data: props.sentiment.map(d => (d.value.anger.toFixed(2)))
202 | }, {
203 | label: "Percentage Fear",
204 | fill: false,
205 | backgroundColor: 'black',
206 | lineTension: .5,
207 | borderColor: colors.fear,
208 | borderWidth: 2,
209 | data: props.sentiment.map(d => (d.value.fear.toFixed(2)))
210 | }]
211 | } : null;
212 |
213 | const line = stateLine !== null ? (
164 |
168 |
165 | {line}
166 |
167 |
255 |
261 |
262 | );
263 | }
264 |
265 |
266 | export default LineChart;
267 | export { DualLineChart, MultiLineChart };
--------------------------------------------------------------------------------
/src/component/charts/LineChart/LineChart.module.css:
--------------------------------------------------------------------------------
1 | .Container {
2 | display: flex;
3 | flex-flow: column;
4 | flex: 1;
5 | height: fit-content;
6 | justify-content: space-between;
7 | align-items: center;
8 | }
9 |
10 | .Chart {
11 | /* height: 80%; */
12 | height: fit-content;
13 | width: 70%;
14 | padding: 20px 20px;
15 | overflow-x: scroll;
16 | }
17 |
18 | .ChartElement {
19 | height: 400px;
20 | /* width: 1000px; */
21 | /* background-color: rgb(251, 90, 41); */
22 | }
23 |
24 | @media (max-width: 480px) {
25 | .ChartElement {
26 | width: 1000px;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/component/charts/PieChart/PieChart.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Doughnut } from 'react-chartjs-2';
3 |
4 | import styles from "./PieChart.module.css";
5 |
6 | const colors = {
7 | joy: "#fddb22",
8 | anger: "#ff1f1f",
9 | sad: "#3333ff",
10 | fear: "#3d3d3d"
11 | }
12 |
13 | function PieChart(props) {
14 |
15 | const statePie = props.sentiment.length !== 0 ? {
16 | labels: Object.keys(colors),
17 | datasets: [{
18 | borderColor: 'rgba(255,255,255,10)',
19 | borderWidth: 2,
20 | data: props.sentiment.map(d => +d.toFixed(2)),
21 | backgroundColor: Object.values(colors),
22 | hoverBackgroundColor: Object.values(colors),
23 | },
24 | ],
25 | } : null;
26 |
27 | const pie = statePie !== null ? (
256 |
260 |
257 | {line}
258 |
259 |
48 |
54 |
55 | );
56 |
57 | }
58 |
59 | export default PieChart;
--------------------------------------------------------------------------------
/src/component/charts/PieChart/PieChart.module.css:
--------------------------------------------------------------------------------
1 | .Container {
2 | display: flex;
3 | flex-flow: column;
4 | flex: 1;
5 | justify-content: space-between;
6 | align-items: center;
7 | }
8 |
9 | .Chart {
10 | /* height: 80%;
11 | width: 70%; */
12 | padding: 20px 0;
13 | /* overflow-x: scroll; */
14 | }
15 |
16 | .ChartElement {
17 | padding: 0 0;
18 | margin: 0 0;
19 | min-width: fit-content;
20 | min-height: fit-content;
21 | height: 400px;
22 | width: 400px;
23 | }
24 |
--------------------------------------------------------------------------------
/src/component/ui/Cards/SimpleCard.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { makeStyles } from '@material-ui/core/styles';
3 | import Card from '@material-ui/core/Card';
4 | import CardContent from '@material-ui/core/CardContent';
5 | import Typography from '@material-ui/core/Typography';
6 |
7 | import CountUp from "react-countup";
8 |
9 | const useStyles = makeStyles({
10 | root:{
11 | borderRadius : "5px",
12 | boxShadow: "0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)"
13 | },
14 | bullet: {
15 | display: 'inline-block',
16 | margin: '0 2px',
17 | transform: 'scale(0.8)',
18 | },
19 | title: {
20 | fontSize: 14,
21 | },
22 | pos: {
23 | marginBottom: 12,
24 | },
25 | });
26 |
27 | export default function SimpleCard(props) {
28 | const classes = useStyles();
29 |
30 | return (
31 |
49 |
53 |
50 | {pie}
51 |
52 |