From 6cd0dc0d68984d50aafd9c5bd9b81c2d3b653b22 Mon Sep 17 00:00:00 2001
From: Jeremy Grifski <jeremy.grifski@gmail.com>
Date: Thu, 18 Apr 2019 09:36:00 -0400
Subject: [PATCH] Made dimensions dynamic

---
 midiviz/js/NotesFrequencyPane.js | 6 ++++--
 midiviz/js/NotesPlayedPane.js    | 6 ++++--
 midiviz/js/NotesVelocityPane.js  | 5 +++--
 midiviz/js/Utils.js              | 8 ++++++++
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/midiviz/js/NotesFrequencyPane.js b/midiviz/js/NotesFrequencyPane.js
index 68a9aa1..f907733 100644
--- 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
index f2eeaf7..c97770c 100644
--- 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
index 2b4470e..aa80b37 100644
--- 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
index eedb53c..9e433e0 100644
--- 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];
+}