Made dimensions dynamic

jrg94 · Apr 18, 2019 · 6cd0dc0 · 6cd0dc0
1 parent b3f1618
commit 6cd0dc0
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/midiviz/js/NotesFrequencyPane.js b/midiviz/js/NotesFrequencyPane.js
@@ -10,8 +10,10 @@ class NotesFrequencyPane {
     var svg = d3.select("#note-frequency");
 
     var padding = 50;
-    var width = 700;
-    var height = 400;
+    var width;
+    var height;
+    [width, height] = getGraphDimensions("#note-frequency");
+
     // TODO: Separate this padding into a map? top/bottom/left/right. It appears inconsistently centered now.
 
     var keys = Object.keys(this.dashboard.midiFiles);

diff --git a/midiviz/js/NotesPlayedPane.js b/midiviz/js/NotesPlayedPane.js
@@ -17,8 +17,10 @@ class NotesPlayedPane {
     // TODO: Adjust width here based on parameters? (# of notes, length of song, screen size)?
     // Adjust title formula accordingly. Currently at * 2 for both
     var padding = 50;
-    var width = 3500;
-    var height = 600;
+    var width;
+    var height;
+    [width, height] = getGraphDimensions("#notes-over-time");
+
 
     let mapping = this.dashboard.mappings.notes;
 

diff --git a/midiviz/js/NotesVelocityPane.js b/midiviz/js/NotesVelocityPane.js
@@ -11,8 +11,9 @@ class NotesVelocityPane {
     var svg = d3.select("#velocity-over-time");
 
     var padding = 50;
-    var width = 1400;
-    var height = 400;
+    var width;
+    var height;
+    [width, height] = getGraphDimensions("#velocity-over-time");
 
     var keys = Object.keys(this.dashboard.midiFiles);
     var timestamps = this.dashboard.mappings.velocity;

diff --git a/midiviz/js/Utils.js b/midiviz/js/Utils.js
@@ -97,3 +97,11 @@ function drawYAxis(svg, yScale, padding, height, label) {
     .style("text-anchor", "middle")
     .text(label);
 }
+
+function getGraphDimensions(graph) {
+  var svg = d3.select(graph);
+  var viewBox = svg.attr("viewBox").split(" ");
+  var width = parseInt(viewBox[2], 10);
+  var height = parseInt(viewBox[3], 10);
+  return [width, height];
+}