have one highcharts-based chart nearly working

Author: dsjoerg

app/assets/javascripts/angular/controllers/scout.js

@@ -33,92 +33,5 @@ gg.controller('ScoutController', ['$scope', '$element', '$urlFilter',
             renderAll();
         }
     });
-
-    $scope.render = function() {
-      var grp = asGrp.all();
-      if (typeof grp !== 'undefined') {
-        xyValues = _.map(grp, function (g) { return [g.key, g.value.value]; })
-        $scope.chart.series[0].setData(xyValues);
-      }
-    }
-
-    options = {
-      chart: {
-        type: "column",
-        renderTo: $element.find('.canvas')[0],
-        backgroundColor: "#F7F4EF",
-        color: "#00f",
-        animation: false,
-        zoomType: 'x',
-        width: 170,
-        height: 130,
-        events: {
-          selection: function(event) {
-            console.log("Selected", event.xAxis[0].min, event.xAxis[0].max, event);
-
-            // TODO bind dimension to chart properly
-            if (typeof asDim !== 'undefined') {
-              asDim.filterRange([event.xAxis[0].min, event.xAxis[0].max]);
-              renderAll();
-            }
-
-            // TODO show current filter as text
-            // TODO when filter is active, show a RESET link
-            // TODO show filter as highlighted region on chart
-            // TODO switch all charts over to highcharts            
-            // TODO if not too hard, make selection area draggable
-
-            event.preventDefault();
-          }
-        }
-      },
-      title: {text: ""},
-      legend: {enabled: false},
-      xAxis: {
-          labels: {
-              enabled: true,
-              style: {"fontFamily":"'Open Sans', verdana, arial, helvetica, sans-serif"},
-              formatter: function () { return this.value; }
-          }
-      },
-      yAxis: {
-          lineWidth: 0,
-          minorGridLineWidth: 0,
-          lineColor: 'transparent',
-          labels: { enabled: false },
-          minorTickLength: 0,
-          tickLength: 0,
-          title: '',
-          endOnTick: false
-      },
-      credits: {enabled:false},
-      plotOptions: {
-          column:{
-              animation:false,
-              color:'steelblue',
-              groupPadding: 0,
-              pointPadding: 0,
-              borderWidth: 0,
-              pointPlacement: 'on',
-              marker: {
-                  enabled:true,
-                  radius:4,
-                  symbol: "circle",
-                  lineColor: "#111",
-                  lineWidth:1,
-                  fillColor:"#222",
-                  states: {hover:{enabled:true}}
-              },
-              shadow:false,
-              threshold:0
-          }
-      },
-      subtitle: {}
-    };
-    options.series = [];
-    $scope.chart = new Highcharts.Chart(options);
-    $scope.chart.addSeries({
-           data: [1]
-    });
   }
 ]);

app/assets/javascripts/scout.js

@@ -75,8 +75,8 @@ function render(method) {
 }
 
 function renderAll() {
-    $('#static').scope().render();
-//    $('.filterchart').each(function() { this.render() });
+//    $('#static').scope().render();
+    $('.filterchart').each(function() { this.render() });
     chart.each(render);
     list.each(render);
     d3.select("#active").text(formatNumber(gr_all.value()));
@@ -368,8 +368,8 @@ function entities_url() {
     return data_host() + "/ents" + debug_suffix() + ".csv";
 }
 
-function filter_chart(element, dimension, group, domain, title) {
-    options = {
+function filter_chart(element, dimension, group, domain) {
+    var options = {
       chart: {
         type: "column",
         renderTo: element,
@@ -383,13 +383,27 @@ function filter_chart(element, dimension, group, domain, title) {
           selection: function(event) {
             console.log("Selected", event.xAxis[0].min, event.xAxis[0].max, event);
 
+            event.xAxis[0].axis.removePlotBand('plot-band-1');
+
+            event.xAxis[0].axis.addPlotBand({
+                from: event.xAxis[0].min,
+                to: event.xAxis[0].max,
+                color: 'rgba(150, 50, 50, 0.1)',
+                zIndex: 5,
+                id: 'plot-band-1'
+            });
+
+            filterchart = event.currentTarget.container.parentElement.parentElement
+            $(filterchart).children(".filtered").show();
+            $(filterchart).find(".lower").text(Math.floor(event.xAxis[0].min));
+            $(filterchart).find(".upper").text(Math.floor(event.xAxis[0].max));
+
             dimension.filterRange([event.xAxis[0].min, event.xAxis[0].max]);
             renderAll();
 
-            // TODO show current filter as text
-            // TODO when filter is active, show a RESET link
-            // TODO show filter as highlighted region on chart
-            // TODO switch all charts over to highcharts            
+            // TODO make the RESET link actually work
+            // TODO when filter is cleared, hide the filter text and RESET link
+            // TODO switch all charts over to highcharts, in a nice DRY way
             // TODO if not too hard, make selection area draggable
 
             event.preventDefault();
@@ -635,10 +649,25 @@ function scout_init() {
                 })
             });
 
-              
+            
+            chartContainer = $(document.createElement('div')).addClass('djchart');
+
+            chartTitle = $('<div class="title">Player\'s Army Strength @ X minutes</div>');
+
+            chartFilterText = $('<div class="filtered title" style="display:none">from <span class="lower">-</span> to <span class="upper">-</span></div>');
+            filterResetLink = $('<a href="#" class="reset">reset</a>');
+            filterResetLink.click(function(e) { e.preventDefault(); console.log('reset!'); });
+            chartFilterText.append(filterResetLink);
+
+            chartContainer.append(chartTitle);
+            chartContainer.append(chartFilterText);
+
+
             asChart = $(document.createElement('div')).addClass('filterchart');
-//            filter_chart(asChart, asDim, asGrp, [0, 2500], 'FOOBABY');
-//            $('#filtercharts').append(asChart);
+            chartContainer.append(asChart);
+
+            filter_chart(asChart[0], asDim, asGrp, [0, 2500]);
+            $('#filtercharts').append(chartContainer);
 
             renderAll();
 

app/assets/stylesheets/scout.css.scss

@@ -15,9 +15,9 @@
 }
 
 .reset {
-  padding-left: 1em;
+  padding-left: 2em;
   font-size: smaller;
-  color: #ccc;
+  text-decoration: none !important;
 }
 
 .background.bar {

app/views/home/scout.html

@@ -21,10 +21,6 @@
       <div><span>Player id:</span><input type="text" id="player_id"></input></div>
       <div><span id="winrate">-</span>% matches won.</div>
       <div><span id="active">-</span> of <span id="total">-</span> matches selected.</div>
-      <div class="djchart">
-          <div class="title">Player's Army Strength @ X minutes</div>
-          <div class="canvas"></div>
-      </div>
       <div id="filtercharts"></div>
       <div id="charts">
         <div id="league-chart" class="chart">