Hide KILLXP charts when not filtering for KILLXP

Also filter KILLXP by default.

This closes #16.

2 files changed, 37 insertions, 18 deletions

diff --git a/public/index.html b/public/index.html
index 5d0a9a2..92cf50f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,27 +19,27 @@
       </div>
     </div>
     <div class="side thin col2">
-      <div id="target-chart">
-        <h3>Instance breakdown by Target <a class="reset" style="display: none;" href="javascript:mv.charts.target.filterAll();dc.redrawAll();">clear</a></h3>
-      </div>
-      <div id="wpn-chart">
-        <h3>Instance breakdown by Weapon <a class="reset" style="display: none;" href="javascript:mv.charts.wpn.filterAll();dc.redrawAll();">clear</a></h3>
-      </div>
-      <div id="num-attackers-chart">
-        <h3>Instance breakdown by number of attackers <a class="reset" style="display: none;" href="javascript:mv.charts.numAttackers.filterAll();dc.redrawAll();">clear</a><h3>
-      </div>
       <div id="type-chart">
         <h3>Instance breakdown by Type <a class="reset" style="display: none;" href="javascript:mv.charts.type.filterAll();dc.redrawAll();">clear</a></h3>
       </div>
-    </div>
-    <div id="main" class="col1">
-      <div class="vis-hide">
-        <div id="map-chart">
-          <h3>Breakdown 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.charts.map.filterAll();dc.redrawAll();">clear</a></h3>
+      <div id="killxp-charts">
+        <div id="target-chart">
+          <h3>Instance breakdown by Target <a class="reset" style="display: none;" href="javascript:mv.charts.target.filterAll();dc.redrawAll();">clear</a></h3>
         </div>
-        <div id="date-chart">
-          <h3>Instance breakdown by Date <a class="reset" style="display: none;" href="javascript:mv.charts.date.filterAll();dc.redrawAll();">clear</a></h3>
+        <div id="wpn-chart">
+          <h3>Instance breakdown by Weapon <a class="reset" style="display: none;" href="javascript:mv.charts.wpn.filterAll();dc.redrawAll();">clear</a></h3>
         </div>
+        <div id="num-attackers-chart">
+          <h3>Instance breakdown by number of attackers <a class="reset" style="display: none;" href="javascript:mv.charts.numAttackers.filterAll();dc.redrawAll();">clear</a><h3>
+        </div>
+      </div>
+    </div>
+    <div id="main" class="col1">
+      <div id="date-chart">
+        <h3>Instance breakdown by Date <a class="reset" style="display: none;" href="javascript:mv.charts.date.filterAll();dc.redrawAll();">clear</a></h3>
+      </div>
+      <div id="map-chart">
+        <h3>Breakdown 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.charts.map.filterAll();dc.redrawAll();">clear</a></h3>
       </div>
     </div>
   </div>
diff --git a/public/js/mv/chart.js b/public/js/mv/chart.js
index a5783ec..2e19aa5 100644
--- a/public/js/mv/chart.js
+++ b/public/js/mv/chart.js
@@ -48,7 +48,25 @@ var mv = function(mv) {
         .renderTitle(true)
         ;
       mv.charts.stats = trellisChart("#stat-chart", ["str", "agi", "vit", "dex", "int", "luk"].map(function(d) { mv.heap[d].name = d; return mv.heap[d]; }));
-      dc.renderlet(function() { mv.charts.stats(); });
+      mv.charts.type.filter("KILLXP");
+      var killxpShown = true;
+      var killxpCharts = d3.select("#killxp-charts");
+      dc.renderlet(function() {
+        mv.charts.stats();
+        if (killxpShown) {
+          if (mv.charts.type.filter() != "KILLXP") {
+            /* Hide killxp charts */
+            killxpCharts.style("opacity", "0");
+            killxpShown = false;
+          }
+        } else {
+          if (mv.charts.type.filter() == "KILLXP") {
+            /* Show killxp charts */
+            killxpCharts.style("opacity", "1");
+            killxpShown = true;
+          }
+        }
+      });
       dc.renderAll();
     }
     charter.filters = function() {
@@ -105,7 +123,8 @@ var mv = function(mv) {
   }
   function pie(chart) {
     return thin(chart)
-      .radius(90)
+      .radius(80)
+      .height(165)
       .colorCalculator(d3.scale.category20c())
       ;
   }