Rearrange charts by needed width

3 files changed, 18 insertions, 18 deletions

diff --git a/css/style.css b/css/style.css
index 0b37fb7..486ef83 100644
--- a/css/style.css
+++ b/css/style.css
@@ -6,14 +6,14 @@ body {
 }
 
 /* Top-level layout */
-#side {
+.side {
   float: right;
 }
 #main {
   overflow: hidden;
 }
 
-#body, #main, #status, #side {
+#body, #main, #status, .side {
   min-height: 40px;
 }
 
@@ -26,8 +26,8 @@ body {
   font-size: smaller;
 }
 
-#side {
-  width: 650px;
+.side {
+  width: 400px;
   font-size: smaller;
 }
 
diff --git a/index.html b/index.html
index 1a029cd..ea347f2 100644
--- a/index.html
+++ b/index.html
@@ -5,14 +5,8 @@
 <link rel="stylesheet" type="text/css" href="js/dc/test/dc.css" />
 
 <div id="body">
-  <div id="side">
+  <div class="side">
     <div class="vis-hide">
-      <div id="date-chart">
-        <h3>Experience gain instances by Date <a class="reset" style="display: none;" href="javascript:mv.dateChart.filterAll();dc.redrawAll();">clear</a></h3>
-      </div>
-      <div id="player-chart">
-        <h3>Experience gain instances by Character ID <span class="help" title="Older to newer characters appear left to right, respectively.">[?]</span> <a class="reset" style="display: none;" href="javascript:mv.pcChart.filterAll();dc.redrawAll();">clear</a></h3>
-      </div>
       <div id="blvl-chart">
         <h3>Experience gain instances by Character Base Level <a class="reset" style="display: none;" href="javascript:mv.blvlChart.filterAll();dc.redrawAll();">clear</a></h3>
       </div>
@@ -52,6 +46,12 @@
       <div id="map-chart">
         <h3>Experience gain by Map <span class="help" title="Bubble size indicates instances of experience gain for that map. X axis position indicates the sum of level experience gain for that map. Y axis position indicates the sum of job experience gain for that map.">[?]</span> <a class="reset" style="display: none;" href="javascript:mv.mapChart.filterAll();dc.redrawAll();">clear</a></h3>
       </div>
+      <div id="date-chart">
+        <h3>Experience gain instances by Date <a class="reset" style="display: none;" href="javascript:mv.dateChart.filterAll();dc.redrawAll();">clear</a></h3>
+      </div>
+      <div id="player-chart">
+        <h3>Experience gain instances by Character ID <span class="help" title="Older to newer characters appear left to right, respectively.">[?]</span> <a class="reset" style="display: none;" href="javascript:mv.pcChart.filterAll();dc.redrawAll();">clear</a></h3>
+      </div>
     </div>
   </div>
 </div>
diff --git a/js/mv.js b/js/mv.js
index 019e8ff..b4910ed 100644
--- a/js/mv.js
+++ b/js/mv.js
@@ -220,7 +220,7 @@ var mv = {};
       .style("opacity", 1)
       ;
     mv.dateChart = dc.barChart("#date-chart")
-      .width(630)
+      .width(700)
       .height(130)
       .margins({left: 60, right: 18, top: 5, bottom: 30})
       .dimension(dateDim)
@@ -238,7 +238,7 @@ var mv = {};
       .brushOn(true)
       ;
     mv.pcChart = dc.barChart("#player-chart")
-      .width(630)
+      .width(700)
       .height(130)
       .margins({left: 60, right: 18, top: 5, bottom: 30})
       .dimension(pcDim)
@@ -252,7 +252,7 @@ var mv = {};
       .brushOn(true)
       ;
     mv.blvlChart = dc.barChart("#blvl-chart")
-      .width(630)
+      .width(380)
       .height(130)
       .margins({left: 60, right: 18, top: 5, bottom: 30})
       .dimension(blvlDim)
@@ -265,7 +265,7 @@ var mv = {};
       .brushOn(true)
       ;
     mv.typeChart = dc.pieChart("#type-chart")
-      .width(630)
+      .width(380)
       .height(130)
       .radius(60)
       .dimension(typeDim)
@@ -273,7 +273,7 @@ var mv = {};
       .colorCalculator(d3.scale.category20c())
       ;
     mv.targetChart = dc.pieChart("#target-chart")
-      .width(630)
+      .width(380)
       .height(130)
       .radius(60)
       .dimension(targetDim)
@@ -281,7 +281,7 @@ var mv = {};
       .colorCalculator(d3.scale.category20c())
       ;
     mv.targetChart = dc.pieChart("#wpn-chart")
-      .width(630)
+      .width(380)
       .height(130)
       .radius(60)
       .dimension(wpnDim)
@@ -289,7 +289,7 @@ var mv = {};
       .colorCalculator(d3.scale.category20c())
       ;
     mv.defChart = dc.pieChart("#def-chart")
-      .width(630)
+      .width(380)
       .height(130)
       .radius(60)
       .dimension(defDim)