From cb4e56133cee1cb7b04eb19b9931180043535401 Mon Sep 17 00:00:00 2001
From: reaas <reaas@stud.ntnu.no>
Date: Mon, 14 Oct 2019 12:04:17 +0200
Subject: [PATCH] Google Trends chart component is working as intended. Takes
one argument, the movie title. It is not styled yet.. Ref. #22
---
client/package-lock.json | 18 ++++++++
client/package.json | 2 +
client/src/components/InterestOverTime.js | 53 +++++++++++++++++++++++
server/package-lock.json | 5 +++
server/package.json | 1 +
server/routes/movies.js | 24 ++++++++++
6 files changed, 103 insertions(+)
create mode 100644 client/src/components/InterestOverTime.js
diff --git a/client/package-lock.json b/client/package-lock.json
index 134f01c..b49672e 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -5815,6 +5815,11 @@
}
}
},
+ "google-trends-api": {
+ "version": "4.9.0",
+ "resolved": "https://registry.npmjs.org/google-trends-api/-/google-trends-api-4.9.0.tgz",
+ "integrity": "sha512-ujOLHM98bE7Igy8YA4Lrb5naDpaY1wGt215zgHXPznCDwHmMjMK1FW8yW//dHQ9CKyG/HzaNBDfF7jEAUk8Kkw=="
+ },
"graceful-fs": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.2.tgz",
@@ -10472,6 +10477,14 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.2.tgz",
"integrity": "sha512-DHRuRk3K4Lg9obI6J4Y+nKvtwjasYRU9CFL3ud42x9YJG1HbQjSNublapC/WBJOA726gNUbqbj0U2df9+uzspQ=="
},
+ "react-google-charts": {
+ "version": "3.0.15",
+ "resolved": "https://registry.npmjs.org/react-google-charts/-/react-google-charts-3.0.15.tgz",
+ "integrity": "sha512-78s5xOQOJvL+jIewrWQZEHtlVk+5Yh4zZy+ODA1on1o1FaRjKWXxoo4n4JQl1XuqkF/A9NWque3KqM6pMggjzQ==",
+ "requires": {
+ "react-load-script": "^0.0.6"
+ }
+ },
"react-is": {
"version": "16.10.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.1.tgz",
@@ -10482,6 +10495,11 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
+ "react-load-script": {
+ "version": "0.0.6",
+ "resolved": "https://registry.npmjs.org/react-load-script/-/react-load-script-0.0.6.tgz",
+ "integrity": "sha512-aRGxDGP9VoLxcsaYvKWIW+LRrMOzz2eEcubTS4NvQPPugjk2VvMhow0wWTkSl7RxookomD1MwcP4l5UStg5ShQ=="
+ },
"react-overlays": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-1.2.0.tgz",
diff --git a/client/package.json b/client/package.json
index 864fdae..b09a007 100644
--- a/client/package.json
+++ b/client/package.json
@@ -5,9 +5,11 @@
"dependencies": {
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
+ "google-trends-api": "^4.9.0",
"react": "^16.10.1",
"react-bootstrap": "^1.0.0-beta.14",
"react-dom": "^16.10.1",
+ "react-google-charts": "^3.0.15",
"react-redux": "^7.1.1",
"react-scripts": "3.1.2",
"redux": "^4.0.4"
diff --git a/client/src/components/InterestOverTime.js b/client/src/components/InterestOverTime.js
new file mode 100644
index 0000000..a17b196
--- /dev/null
+++ b/client/src/components/InterestOverTime.js
@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Chart } from 'react-google-charts';
+
+/**
+ * Component to get and show the Google search trend over the last week.
+ * Param: title - movie title to search for
+ * return: the component HTML as an Area chart.
+ */
+const InterestOverTime = ({ title }) => {
+ const [currentTitle, setTitle] = useState(title);
+ const [chartData, setChartData] = useState(0);
+
+ // Called each time a new title is passed to the component
+ useEffect(() => {
+ axios.get('/api/MovieTrend', { params: { Title: title }})
+ .then(res => {
+ let data = JSON.parse(res.data.data);
+
+ let tempData = [];
+ let tempTitles = ['Date', 'Interest'];
+ tempData.push(tempTitles);
+
+ // Since the data recieved from Google is not on the form we want,
+ // some magic has to happen. Created the data structure that
+ // react-google-charts wants
+ data.default.timelineData.map(time => {
+ let tempValues = [];
+ tempValues.push(time.formattedTime);
+ tempValues.push(Number(time.formattedValue[0]));
+ tempData.push(tempValues);
+ });
+
+ setChartData(tempData);
+ });
+ }, [title]);
+
+ return(
+ <Chart
+ width={300}
+ height={300}
+ chartType="AreaChart"
+ loader={<div>Loading chart</div>}
+ data={chartData}
+ options={{
+ title: title,
+ vAxis: { title: 'Interest over time' }
+ }}
+ />
+ )
+}
+
+export default InterestOverTime;
diff --git a/server/package-lock.json b/server/package-lock.json
index f1df13b..6632d14 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -311,6 +311,11 @@
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
"integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
},
+ "google-trends-api": {
+ "version": "4.9.0",
+ "resolved": "https://registry.npmjs.org/google-trends-api/-/google-trends-api-4.9.0.tgz",
+ "integrity": "sha512-ujOLHM98bE7Igy8YA4Lrb5naDpaY1wGt215zgHXPznCDwHmMjMK1FW8yW//dHQ9CKyG/HzaNBDfF7jEAUk8Kkw=="
+ },
"graceful-readlink": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
diff --git a/server/package.json b/server/package.json
index 0b5d96f..aafcbc6 100644
--- a/server/package.json
+++ b/server/package.json
@@ -9,6 +9,7 @@
"cookie-parser": "~1.4.3",
"debug": "~2.6.9",
"express": "~4.16.0",
+ "google-trends-api": "^4.9.0",
"http-errors": "~1.6.2",
"jade": "~1.11.0",
"mongoose": "^5.7.3",
diff --git a/server/routes/movies.js b/server/routes/movies.js
index 4bbbf11..8855bbd 100644
--- a/server/routes/movies.js
+++ b/server/routes/movies.js
@@ -1,6 +1,8 @@
var express = require('express');
var router = express.Router();
+const googleTrends = require('google-trends-api');
+
const Movies = require('../Schemas/Movies');
/* GET movies
@@ -120,4 +122,26 @@ router.post('/UpdateUserRating', function(req, res) {
});
});
+router.get('/MovieTrend', function(req, res) {
+ var days = 7;
+ var date = new Date();
+ var lastWeek = new Date(date.getTime() - (days * 24 * 60 * 60 * 1000));
+ var lastDay = lastWeek.getDate();
+ var lastMonth = lastWeek.getMonth() + 1;
+ var lastYear = lastWeek.getFullYear();
+
+ var startTime = new Date(lastYear + "-" + lastMonth + "-" + lastDay);
+
+ googleTrends.interestOverTime({
+ keyword: req.query.Title,
+ startTime: startTime
+ })
+ .then(function(result) {
+ return res.json({ success: true, data: result });
+ })
+ .catch(function(error) {
+ return res.json({ success: false, error: error });
+ });
+})
+
module.exports = router;
--
GitLab