diff --git a/client/js/bar.js b/client/js/bar.js index 9b6f2f2b..9718b3e2 100644 --- a/client/js/bar.js +++ b/client/js/bar.js @@ -2,49 +2,44 @@ * @file constructs bar graph from scratch */ -// hard coded data for bar chart for now -const CHART_VALUES = [1, 3, 1, 2]; -const CHART_CATEGORIES = [ - 'Pop Music', - 'Other Music', - 'Electronic Music', - 'Music of Latin America', -]; +import {SVG_NS} from '/js/util.js'; +import {fetchMusicGenre} from '/js/genre.js'; const GRAPH_HEIGHT = 100; +const GRAPH_LEFT_PADDING = 2.5; + // each bar container is composed of bar padding and fill const BAR_PERCENT_FILL = 0.7; const BAR_PERCENT_PADDING = 1 - BAR_PERCENT_FILL; -const GRAPH_LEFT_PADDING = 2.5; - /** * creates SVG bar chart given chart values and categories + * * @param {number[]} chartValues array of bar values/lengths * @param {string[]} chartCategories array of bar categories/labels */ function createBarChart(chartValues, chartCategories) { - const maxChartValues = Math.max(...chartValues); + const maxChartVal = Math.max(...chartValues); const barContainerHeight = GRAPH_HEIGHT / chartValues.length; const barThickness = BAR_PERCENT_FILL * barContainerHeight; - const barUnitLength = 100 / maxChartValues; + const barUnitLength = 100 / maxChartVal; // top graph padding depends on bar padding const graphTopPadding = (BAR_PERCENT_PADDING / 2) * barContainerHeight; - const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + const svg = document.createElementNS(SVG_NS, 'svg'); svg.setAttribute('viewBox', '0 0 100 100'); svg.setAttribute('preserveAspectRatio', 'none'); svg.setAttribute('class', 'svg'); document.getElementById('graph').appendChild(svg); for (let i = 0; i < chartValues.length; i++) { - const g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); + const g = document.createElementNS(SVG_NS, 'g'); svg.appendChild(g); g.setAttribute('class', 'bar'); - const bar = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); + const bar = document.createElementNS(SVG_NS, 'rect'); g.appendChild(bar); bar.setAttribute('width', barUnitLength * chartValues[i]); bar.setAttribute('height', barThickness); @@ -59,4 +54,8 @@ function createBarChart(chartValues, chartCategories) { } } -createBarChart(CHART_VALUES, CHART_CATEGORIES); +fetchMusicGenre().then((genreAnalysisInfo) => { + createBarChart( + Object.values(genreAnalysisInfo.genreData), + Object.keys(genreAnalysisInfo.genreData)); +}); diff --git a/client/js/genre.js b/client/js/genre.js index f9dffd51..a2fe9c62 100644 --- a/client/js/genre.js +++ b/client/js/genre.js @@ -1,24 +1,20 @@ /** - * fetches youtube api calls from YoutubeServlet.java + * @file fetches youtube api calls from YoutubeServlet.java * and displays on youtube-genre.html */ -const genreBlock = document.getElementById('genres'); - /** - * fetches genre count hashmap from /api/youtube and updates html + * fetches and returns genre analysis object from /api/youtube + * + * @returns {Promise} An obj containing Youtube genre data and stats */ -async function displayMusicGenre() { - // keep track of num_videos in URL w/o reload - history.pushState('', '', `youtube-genre.html`); - - const response = await fetch(`/api/youtube`); +export async function fetchMusicGenre() { + const response = await fetch('/api/youtube'); if (response.status == 401) { // no oauth login so redirect to new page window.open('/api/oauth/login/youtube'); } const genreCount = await response.text(); - genreBlock.innerHTML = genreCount; + return JSON.parse(genreCount); } - diff --git a/client/youtube-genre.html b/client/youtube-genre.html index c7d4cb87..3e2fccde 100644 --- a/client/youtube-genre.html +++ b/client/youtube-genre.html @@ -8,13 +8,9 @@ -
-

What music do you listen to on youtube?

-
-

- -

-
+
@@ -26,6 +22,6 @@

Youtube Genre Bar Chart

- - + +