diff --git a/.gitignore b/.gitignore index b3d8d1f..ed7cbb7 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ .vscode/* */migrations/* media/history/* +spotifyvis/static/graphs/sass/* *.pyc *.log diff --git a/api/views.py b/api/views.py index e84dba2..65b3b24 100644 --- a/api/views.py +++ b/api/views.py @@ -31,7 +31,8 @@ ARTIST_LIMIT = 50 FEATURES_LIMIT = 100 # ARTIST_LIMIT = 25 # FEATURES_LIMIT = 25 -TRACKS_TO_QUERY = 100 +# TRACKS_TO_QUERY = 100 +TRACKS_TO_QUERY = 500 TRACKS_ENDPOINT = 'https://api.spotify.com/v1/tracks' CONSOLE_LOGGING = True # CONSOLE_LOGGING = False @@ -141,7 +142,7 @@ def get_artist_data(request, user_secret): artist_counts = Artist.objects.annotate(num_songs=Count('track', filter=Q(track__users=user))) processed_artist_counts = [{'name': artist.name, 'num_songs': artist.num_songs} - for artist in artist_counts if artist.num_songs > 1] + for artist in artist_counts if artist.num_songs > 2] if CONSOLE_LOGGING: pprint(processed_artist_counts) return JsonResponse(data=processed_artist_counts, safe=False) diff --git a/graphs/static/graphs/css/graphs.css b/graphs/static/graphs/css/graphs.css deleted file mode 100644 index 61a2cc4..0000000 --- a/graphs/static/graphs/css/graphs.css +++ /dev/null @@ -1,9 +0,0 @@ -.chart { -height: 16rem; -position: relative; -} - -.chart > svg { -width: 100%; -height: 100%; -} diff --git a/graphs/static/graphs/sass/max-height.scss b/graphs/static/graphs/sass/max-height.scss new file mode 100644 index 0000000..13c6dec --- /dev/null +++ b/graphs/static/graphs/sass/max-height.scss @@ -0,0 +1,13 @@ +html, body { + height: 100%; +} + +.container-fluid { + height: 100%; +} + + +.svg-container { + height: 100%; + padding-bottom: 0%; +} diff --git a/graphs/static/graphs/sass/responsive_graph.scss b/graphs/static/graphs/sass/responsive_graph.scss new file mode 100644 index 0000000..8c5726a --- /dev/null +++ b/graphs/static/graphs/sass/responsive_graph.scss @@ -0,0 +1,16 @@ +.svg-container { + display: inline-block; + position: relative; + width: 100%; + /* aspect ratio */ + padding-bottom: 55%; + vertical-align: top; + // overflow: hidden; + + .svg-content-responsive { + display: inline-block; + position: absolute; + top: 10px; + left: 0; + } +} diff --git a/graphs/static/graphs/scripts/artist_graph.js b/graphs/static/graphs/scripts/artist_graph.js index 023dfd9..a01af92 100644 --- a/graphs/static/graphs/scripts/artist_graph.js +++ b/graphs/static/graphs/scripts/artist_graph.js @@ -5,8 +5,8 @@ */ function drawArtistGraph(artistData, parentElem) { let margin = {top: 20, right: 30, bottom: 30, left: 40}; - let width = 1000 - margin.right - margin.left; - let height = 1000 - margin.top - margin.bottom; + // let width = 1000 - margin.right - margin.left; + // let height = 1000 - margin.top - margin.bottom; let color = d3.scaleOrdinal(d3.schemeCategory10); /* @@ -22,14 +22,23 @@ function drawArtistGraph(artistData, parentElem) { let circleRadiusScale = d3.scaleSqrt().domain(songCountExtent).range([circleSize.min, circleSize.max]); let bubble = d3.pack(artistData) - .size([width + 100, height + 100]) + // .size([width + 100, height + 100]) + .size([600, 250]) .padding(0.2); let svg = d3.select(parentElem) + // .append("svg") + // .attr("width", width + margin.right + margin.left) + // .attr("height", height + margin.top + margin.bottom) + // .attr("class", "bubble"); + .append("div") + .classed("svg-container", true) //container class to make it responsive .append("svg") - .attr("width", width + margin.right + margin.left) - .attr("height", height + margin.top + margin.bottom) - .attr("class", "bubble"); + //responsive SVG needs these 2 attributes and no width and height attr + .attr("preserveAspectRatio", "xMinYMin meet") + .attr("viewBox", "0 0 600 250") + //class to make it responsive + .classed("svg-content-responsive", true); let nodes = d3.hierarchy(artistData) .sum(function(d) { return d.num_songs; }); @@ -86,8 +95,9 @@ function drawArtistGraph(artistData, parentElem) { .attr("fill", "white"); d3.select(self.frameElement) - .style("height", height + "px"); + // .style("height", height + "px"); + .style("height", "100%") -} \ No newline at end of file +} diff --git a/graphs/static/graphs/scripts/audio_feat_graph.js b/graphs/static/graphs/scripts/audio_feat_graph.js index 45b9270..2a32681 100644 --- a/graphs/static/graphs/scripts/audio_feat_graph.js +++ b/graphs/static/graphs/scripts/audio_feat_graph.js @@ -13,7 +13,7 @@ */ function drawAudioFeatGraph(audioFeature, intervalEndPoints, colId, userSecret) { // TODO: Not hard code the dimensions? - let margin = {top: 20, right: 30, bottom: 30, left: 40}; + let margin = {top: 40, right: 40, bottom: 40, left: 40}; let width = 480 - margin.left - margin.right, height = 270 - margin.top - margin.bottom; @@ -76,8 +76,16 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, colId, userSecret) let yAxis = d3.axisLeft().scale(vScale); let featureSVG = d3.select('#' + colId) - .append('svg').attr('width', width + margin.left + margin.right) - .attr('height', height + margin.top + margin.bottom); + // .append('svg').attr('width', width + margin.left + margin.right) + // .attr('height', height + margin.top + margin.bottom) + .append("div") + .classed("svg-container", true) //container class to make it responsive + .append("svg") + //responsive SVG needs these 2 attributes and no width and height attr + .attr("preserveAspectRatio", "xMinYMin meet") + .attr("viewBox", "0 0 600 400") + //class to make it responsive + .classed("svg-content-responsive", true); let featureGraph = featureSVG.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) diff --git a/graphs/templates/graphs/artist_graph.html b/graphs/templates/graphs/artist_graph.html index e081639..3627250 100644 --- a/graphs/templates/graphs/artist_graph.html +++ b/graphs/templates/graphs/artist_graph.html @@ -3,22 +3,26 @@ {% load sass_tags %} - - Artist Graphs - + + Artist Graphs + + + - - - - +
+
+ + + diff --git a/graphs/templates/graphs/features_graphs.html b/graphs/templates/graphs/features_graphs.html index 61017e1..8996030 100644 --- a/graphs/templates/graphs/features_graphs.html +++ b/graphs/templates/graphs/features_graphs.html @@ -12,6 +12,7 @@ +