Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vanilla bars w/ BACKEND DATA!! #74

Open
wants to merge 20 commits into
base: master
Choose a base branch
from
+27 −36
Open

Vanilla bars w/ BACKEND DATA!! #74

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
d1f0db0
change front pg display
gracetian6 Jul 30, 2020
acf0eb5
changed display to fetch
gracetian6 Jul 30, 2020
f6a7eca
change quote marks
gracetian6 Jul 30, 2020
48107cf
pull .eslintrc
gracetian6 Jul 30, 2020
e17e523
[bugs] import SVG_NS
gracetian6 Jul 30, 2020
d3dd58f
import SVG_NS works
gracetian6 Jul 30, 2020
1648211
ES LINT import doesn't work, query limit up for youtube
gracetian6 Jul 30, 2020
b52d2e9
add util.js
gracetian6 Jul 30, 2020
b3d2efe
integrated with backend!
gracetian6 Jul 30, 2020
16e285e
formatted long promise unwrapping
gracetian6 Jul 30, 2020
4b30211
moved around code
gracetian6 Jul 30, 2020
51749a0
maxChartVal typo
gracetian6 Jul 30, 2020
d6e5d05
delete num videos tracker
gracetian6 Jul 30, 2020
232e799
Merge branch 'master' of github.com:googleinterns/step99-2020 into va…
gracetian6 Aug 1, 2020
7ee23f6
changed DATA to genreAnalysisInfo
gracetian6 Aug 4, 2020
35a62a2
changed return type of fetch Music Genre
gracetian6 Aug 4, 2020
c75d3be
deleted button (bugs), refresh works instead
gracetian6 Aug 4, 2020
6fe2f95
genre analysis promise
gracetian6 Aug 6, 2020
7306d87
export fn instead of variable
gracetian6 Aug 8, 2020
78a7b71
delete max chart val param
gracetian6 Aug 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions client/js/bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {GENRE_ANALYSIS_PROMISE} 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
* @param {number} maxChartVal largest value of chartValues
*/
function createBarChart(chartValues, chartCategories) {
const maxChartValues = Math.max(...chartValues);
function createBarChart(chartValues, chartCategories, maxChartVal) {
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);
Expand All @@ -59,4 +54,9 @@ function createBarChart(chartValues, chartCategories) {
}
}

createBarChart(CHART_VALUES, CHART_CATEGORIES);
GENRE_ANALYSIS_PROMISE.then((genreAnalysisInfo) => {
createBarChart(
Object.values(genreAnalysisInfo.genreData),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My opinion here would be to pass the entire map rather than separating it out. In createBarChart, we start to lose the connection between these two arrays when you're accessing values in one array based on the length of the other array. Open to other thoughts though @geekster777?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1. It makes your function call more concise, and like Jess said, keeps the direct connection between your categories and their values.

Object.keys(genreAnalysisInfo.genreData),
genreAnalysisInfo.maxGenreCount);
});
18 changes: 8 additions & 10 deletions client/js/genre.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,22 @@
/**
* 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<object>} 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`);
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);
}

export const GENRE_ANALYSIS_PROMISE = fetchMusicGenre();
14 changes: 5 additions & 9 deletions client/youtube-genre.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,9 @@

</head>
<body>
<div id="content">
<h1>What music do you listen to on youtube?</h1>
<div id="numVideoForm">
<p>
<input type="submit" onclick="displayMusicGenre()"/>
</p>
</div>
<div class="title hero" id="banner">
<h1>What music do you listen to on YouTube? </h1>
<div id="genres"></div>
</div>
<main>
<div class='hero'>
Expand All @@ -26,6 +22,6 @@ <h1>Youtube Genre Bar Chart</h1>
</div>
</main>
</body>
<script src="js/genre.js"></script>
<script src="js/bar.js"></script>
<script type="module" src="js/genre.js"></script>
<script type="module" src="js/bar.js"></script>
</html>