Skip to content
Snippets Groups Projects

Google Trends chart component is working as intended. Takes one argument, the...

Merged Rolf Erik Sesseng Aas requested to merge advanced-view into dev
6 files
+ 103
0
Compare changes
  • Side-by-side
  • Inline
Files
6
+ 53
0
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;
Loading