Browse Source

HUE-2711 [search] Hide gray area on bar chart selection

Disable brush extent gray area
Select all the bars included in the brush
Incremented autorefresh input width to cover 4 digits
Enrico Berti 10 years ago
parent
commit
4f5dcf3365

+ 1 - 1
apps/search/src/search/templates/search.mako

@@ -1402,7 +1402,7 @@ ${ dashboard.layout_skeleton() }
     </div>
     </div>
     <div style="float: left;margin-right: 30px;">
     <div style="float: left;margin-right: 30px;">
     <label class="checkbox">
     <label class="checkbox">
-      <input type="checkbox"  style="margin-left: 0; margin-right: 4px;margin-top: 9px" data-bind="checked: $root.collection.autorefresh"/> ${ _('Auto-refresh every') } <input type="number" class="input-mini" style="margin-bottom: 0; margin-left: 6px; margin-right: 6px; width: 30px; text-align:center" data-bind="value: $root.collection.autorefreshSeconds"/> ${ _('seconds') }
+      <input type="checkbox"  style="margin-left: 0; margin-right: 4px;margin-top: 9px" data-bind="checked: $root.collection.autorefresh"/> ${ _('Auto-refresh every') } <input type="number" class="input-mini" style="margin-bottom: 0; margin-left: 6px; margin-right: 6px; width: 46px; text-align:center" data-bind="value: $root.collection.autorefreshSeconds"/> ${ _('seconds') }
     </label>
     </label>
     </div>
     </div>
   </div>
   </div>

+ 16 - 5
desktop/core/src/desktop/static/desktop/js/ko.charts.js

@@ -152,6 +152,7 @@ ko.bindingHandlers.barChart = {
     var _options = valueAccessor();
     var _options = valueAccessor();
     var _datum = _options.transformer(_options.datum);
     var _datum = _options.transformer(_options.datum);
     var _chart = $(element).data("chart");
     var _chart = $(element).data("chart");
+
     if (_chart) {
     if (_chart) {
 
 
       if (_chart.multibar){
       if (_chart.multibar){
@@ -167,16 +168,26 @@ ko.bindingHandlers.barChart = {
           }
           }
         }).call(_chart);
         }).call(_chart);
 
 
-
-
       if (_chart.selectBars) {
       if (_chart.selectBars) {
         var _field = (typeof _options.field == "function") ? _options.field() : _options.field;
         var _field = (typeof _options.field == "function") ? _options.field() : _options.field;
         $.each(_options.fqs(), function (cnt, item) {
         $.each(_options.fqs(), function (cnt, item) {
           if (item.id() == _options.datum.widget_id) {
           if (item.id() == _options.datum.widget_id) {
             if (item.field() == _field) {
             if (item.field() == _field) {
-              _chart.selectBars($.map(item.filter(), function (it) {
-                return it.value();
-              }));
+              if (item.properties){
+                _chart.selectBars({
+                  singleValues: $.map(item.filter(), function (it) {
+                    return it.value();
+                  }),
+                  rangeValues: $.map(item.properties(), function (it) {
+                    return {from: it.from(), to: it.to() };
+                  })
+                });
+              }
+              else {
+                _chart.selectBars($.map(item.filter(), function (it) {
+                    return it.value();
+                }));
+              }
             }
             }
             if (Array.isArray(item.field())) {
             if (Array.isArray(item.field())) {
               _chart.selectBars({
               _chart.selectBars({

+ 29 - 18
desktop/core/src/desktop/static/desktop/js/nv.d3.growingMultiBar.js

@@ -206,33 +206,44 @@ nv.models.growingMultiBar = function() {
       bars.exit().remove();
       bars.exit().remove();
 
 
       selectBars = function(selected) {
       selectBars = function(selected) {
-        var _pivotField = null;
-        if (!Array.isArray(selected)){
-          _pivotField = selected.field;
-          selected = selected.selected;
-        }
-
-        $(selected).each(function(cnt, item){
-          bars.each(function(d, i) {
-            if (_pivotField != null){
-              if ((Array.isArray(_pivotField) ? ko.toJSON(d.obj.fq_fields) == ko.toJSON(_pivotField) : d.obj.fq_fields == _pivotField) && (item.values ? ko.toJSON(d.obj.fq_values) == ko.toJSON(item.values) : d.obj.fq_values == item)){
+        if (selected.rangeValues){
+          $(selected.rangeValues).each(function(cnt, item){
+            bars.each(function(d, i) {
+              if (parseInt(d.x) >= parseInt(item.from) && parseInt(d.x_end) <= parseInt(item.to)) {
                 d3.select(this).classed('selected', true);
                 d3.select(this).classed('selected', true);
               }
               }
-            }
-            else {
-              if (d.x instanceof Date){
-                if (moment(d.x).utc().format("YYYY-MM-DD[T]HH:mm:ss[Z]") == item) {
+            });
+          });
+        }
+        else {
+          var _pivotField = null;
+          if (!Array.isArray(selected)){
+            _pivotField = selected.field;
+            selected = selected.selected;
+          }
+
+          $(selected).each(function(cnt, item){
+            bars.each(function(d, i) {
+              if (_pivotField != null){
+                if ((Array.isArray(_pivotField) ? ko.toJSON(d.obj.fq_fields) == ko.toJSON(_pivotField) : d.obj.fq_fields == _pivotField) && (item.values ? ko.toJSON(d.obj.fq_values) == ko.toJSON(item.values) : d.obj.fq_values == item)){
                   d3.select(this).classed('selected', true);
                   d3.select(this).classed('selected', true);
                 }
                 }
               }
               }
               else {
               else {
-                if (d.x == item) {
-                  d3.select(this).classed('selected', true);
+                if (d.x instanceof Date){
+                  if (moment(d.x).utc().format("YYYY-MM-DD[T]HH:mm:ss[Z]") == item) {
+                    d3.select(this).classed('selected', true);
+                  }
+                }
+                else {
+                  if (d.x == item) {
+                    d3.select(this).classed('selected', true);
+                  }
                 }
                 }
               }
               }
-            }
+            });
           });
           });
-        });
+        }
       };
       };
 
 
 
 

+ 12 - 0
desktop/core/src/desktop/static/desktop/js/nv.d3.multiBarWithBrushChart.js

@@ -294,6 +294,7 @@ nv.models.multiBarWithBrushChart = function() {
           brush
           brush
               .x(x)
               .x(x)
               .on('brush', onBrush)
               .on('brush', onBrush)
+              .on('brushstart', onBrushStart)
               .on('brushend', onBrushEnd)
               .on('brushend', onBrushEnd)
 
 
           if (brushExtent) brush.extent(brushExtent);
           if (brushExtent) brush.extent(brushExtent);
@@ -479,6 +480,10 @@ nv.models.multiBarWithBrushChart = function() {
         dispatch.brush({extent: extent, brush: brush});
         dispatch.brush({extent: extent, brush: brush});
       }
       }
 
 
+      function onBrushStart(){
+        gEnter.select(".nv-brush").select(".extent").style("display", "block");
+      }
+
       function onBrushEnd(){
       function onBrushEnd(){
         brushExtent = brush.empty() ? null : brush.extent();
         brushExtent = brush.empty() ? null : brush.extent();
         extent = brush.empty() ? x.domain() : brush.extent();
         extent = brush.empty() ? x.domain() : brush.extent();
@@ -495,6 +500,8 @@ nv.models.multiBarWithBrushChart = function() {
 
 
           onSelectRange(_from, _to);
           onSelectRange(_from, _to);
         }
         }
+
+        gEnter.select(".nv-brush").select(".extent").style("display", "none");
       }
       }
     });
     });
 
 
@@ -662,6 +669,11 @@ nv.models.multiBarWithBrushChart = function() {
     return chart;
     return chart;
   };
   };
 
 
+  chart.disableSelection = function() {
+    selectionEnabled = false;
+    return chart;
+  };
+
   chart.hideSelection = function() {
   chart.hideSelection = function() {
     selectionHidden = true;
     selectionHidden = true;
     selectionEnabled = false;
     selectionEnabled = false;