Prechádzať zdrojové kódy

[search] Added enable selection to line chart

Enrico Berti 11 rokov pred
rodič
commit
b333451
1 zmenil súbory, kde vykonal 101 pridanie a 33 odobranie
  1. 101 33
      apps/search/static/js/nv.d3.lineWithBrushChart.js

+ 101 - 33
apps/search/static/js/nv.d3.lineWithBrushChart.js

@@ -21,10 +21,16 @@ nv.models.lineWithBrushChart = function() {
   // Public Variables with Default Settings
   //------------------------------------------------------------
 
+  var LABELS = {
+    SELECT: "Enable selection"
+  }
+
+
   var lines = nv.models.line()
     , xAxis = nv.models.axis()
     , yAxis = nv.models.axis()
     , legend = nv.models.legend()
+    , controls = nv.models.legend()
     , interactiveLayer = nv.interactiveGuideline()
     , brush = d3.svg.brush()
     ;
@@ -34,6 +40,7 @@ nv.models.lineWithBrushChart = function() {
     , width = null
     , height = null
     , showLegend = true
+    , showControls = true
     , showXAxis = true
     , showYAxis = true
     , rightAlignYAxis = false
@@ -49,6 +56,7 @@ nv.models.lineWithBrushChart = function() {
     , defaultState = null
     , noData = 'No Data Available.'
     , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState', 'brush')
+    , controlWidth = function() { return showControls ? 300 : 0 }
     , transitionDuration = 250
     , extent
     , brushExtent = null
@@ -65,6 +73,8 @@ nv.models.lineWithBrushChart = function() {
     .orient((rightAlignYAxis) ? 'right' : 'left')
     ;
 
+  controls.updateState(false);
+
   //============================================================
 
 
@@ -96,7 +106,15 @@ nv.models.lineWithBrushChart = function() {
                              - margin.top - margin.bottom;
 
 
-      chart.update = function() { container.transition().duration(transitionDuration).call(chart) };
+      chart.update = function() {
+        container.transition().duration(transitionDuration).call(chart)
+        if (selectionEnabled){
+          enableBrush();
+        }
+        else {
+          disableBrush();
+        }
+      };
       chart.container = this;
 
       //set state.disabled
@@ -160,10 +178,7 @@ nv.models.lineWithBrushChart = function() {
       gEnter.append('g').attr('class', 'nv-linesWrap');
       gEnter.append('g').attr('class', 'nv-legendWrap');
       gEnter.append('g').attr('class', 'nv-interactive');
-      if (selectionEnabled){
-        gEnter.append('g').attr('class', 'nv-brushBackground');
-        gEnter.append('g').attr('class', 'nv-x nv-brush');
-      }
+      gEnter.append('g').attr('class', 'nv-controlsWrap');
 
       g.select("rect")
         .attr("width",availableWidth)
@@ -172,7 +187,7 @@ nv.models.lineWithBrushChart = function() {
       // Legend
 
       if (showLegend) {
-        legend.width(availableWidth);
+        legend.width(availableWidth - controlWidth());
 
         g.select('.nv-legendWrap')
             .datum(data)
@@ -188,6 +203,19 @@ nv.models.lineWithBrushChart = function() {
             .attr('transform', 'translate(0,' + (-margin.top) +')')
       }
 
+      if (showControls) {
+        var controlsData = [
+          { key: LABELS.SELECT, disabled: !selectionEnabled, checkbox: true }
+        ];
+
+        controls.width(controlWidth()).color(['#444', '#444', '#444']);
+        g.select('.nv-controlsWrap')
+            .datum(controlsData)
+            .attr('transform', 'translate(0,' + (-margin.top) +')')
+            .call(controls);
+      }
+
+
       //------------------------------------------------------------
 
       wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
@@ -232,33 +260,49 @@ nv.models.lineWithBrushChart = function() {
       //------------------------------------------------------------
       // Setup Brush
       if (selectionEnabled){
-        brush
-          .x(x)
-          .on('brush', onBrush)
-          .on('brushend', onBrushEnd)
-
-        if (brushExtent) brush.extent(brushExtent);
-        var brushBG = g.select('.nv-brushBackground').selectAll('g')
-            .data([brushExtent || brush.extent()])
-        var brushBGenter = brushBG.enter()
-            .append('g');
-
-        brushBGenter.append('rect')
-            .attr('class', 'left')
-            .attr('x', 0)
-            .attr('y', 0)
-            .attr('height', availableHeight);
-
-        brushBGenter.append('rect')
-            .attr('class', 'right')
-            .attr('x', 0)
-            .attr('y', 0)
-            .attr('height', availableHeight);
-
-        var gBrush = g.select('.nv-x.nv-brush')
-            .call(brush);
-        gBrush.selectAll('rect')
-            .attr('height', availableHeight);
+        enableBrush();
+      }
+
+
+      function enableBrush() {
+        if (g.selectAll('.nv-brush')[0].length == 0) {
+          gEnter.append('g').attr('class', 'nv-brushBackground');
+          gEnter.append('g').attr('class', 'nv-x nv-brush');
+          brush
+              .x(x)
+              .on('brush', onBrush)
+              .on('brushend', onBrushEnd)
+
+          if (brushExtent) brush.extent(brushExtent);
+          var brushBG = g.select('.nv-brushBackground').selectAll('g')
+              .data([brushExtent || brush.extent()])
+          var brushBGenter = brushBG.enter()
+              .append('g');
+
+          brushBGenter.append('rect')
+              .attr('class', 'left')
+              .attr('x', 0)
+              .attr('y', 0)
+              .attr('height', availableHeight);
+
+          brushBGenter.append('rect')
+              .attr('class', 'right')
+              .attr('x', 0)
+              .attr('y', 0)
+              .attr('height', availableHeight);
+
+          var gBrush = g.select('.nv-x.nv-brush')
+              .call(brush);
+          gBrush.selectAll('rect')
+              .attr('height', availableHeight);
+        }
+        else {
+          g.selectAll('.nv-brush').attr('display', 'inline');
+        }
+      }
+
+      function disableBrush() {
+        g.selectAll('.nv-brush').attr('display', 'none');
       }
 
 
@@ -301,6 +345,24 @@ nv.models.lineWithBrushChart = function() {
           chart.update();
       });
 
+      controls.dispatch.on('legendClick', function(d,i) {
+        if (typeof d.checkbox == "undefined"){
+          if (!d.disabled) return;
+          controlsData = controlsData.map(function(s) {
+            s.disabled = true;
+            return s;
+          });
+          d.disabled = false;
+        }
+
+        switch (d.key) {
+          case LABELS.SELECT:
+            selectionEnabled = !selectionEnabled;
+            break;
+        }
+        chart.update();
+      });
+
       interactiveLayer.dispatch.on('elementMousemove', function(e) {
           lines.clearHighlights();
           var singlePoint, pointIndex, pointXLocation, allData = [];
@@ -472,6 +534,12 @@ nv.models.lineWithBrushChart = function() {
     return chart;
   };
 
+  chart.showControls = function(_) {
+    if (!arguments.length) return showControls;
+    showControls = _;
+    return chart;
+  };
+
   chart.showLegend = function(_) {
     if (!arguments.length) return showLegend;
     showLegend = _;