浏览代码

HUE-2300 [search] Adding support for discrete multibar chart for pivot

Enrico Berti 11 年之前
父节点
当前提交
667df39

+ 54 - 0
apps/search/src/search/templates/search.mako

@@ -803,6 +803,22 @@ ${ dashboard.layout_skeleton() }
 
     <span data-bind="text: ko.mapping.toJSON(count)"></span>
 
+    <div data-bind="barChart: {datum: {counts: count, widget_id: $parent.id(), label: label}, stacked: true,
+      isPivot: true,
+      fqs: $root.query.fqs,
+      transformer: pivotChartDataTransformer,
+      onStateChange: function(state){ },
+      onClick: function(d) {
+        if (d.obj.field != undefined) {
+          viewModel.query.selectRangeFacet({count: d.obj.value, widget_id: d.obj.widget_id, from: d.obj.from, to: d.obj.to, cat: d.obj.field});
+        } else {
+          viewModel.query.toggleFacet({facet: d.obj, widget_id: d.obj.widget_id});
+        }
+      },
+      onSelectRange: function(from, to){ viewModel.collection.selectTimelineFacet({from: from, to: to, cat: field, widget_id: id}) },
+      onComplete: function(){ viewModel.getWidgetById(id).isLoading(false) } }"
+    />
+
   </div>
   <!-- /ko -->
   <div class="widget-spinner" data-bind="visible: isLoading()">
@@ -1141,6 +1157,44 @@ function barChartDataTransformer(rawDatum) {
   return _datum;
 }
 
+function pivotChartDataTransformer(rawDatum) {
+
+  rawDatum = {"counts": [{"count": 904, "value": "Firefox", "cat": "US"}, {"count": 96, "selected": false, "value": "Explorer", "cat": "US"}, {"count": 116, "selected": false, "value": "Chrome", "cat": "US"}, {"count": 94, "value": "Firefox", "cat": "CUR"}, {"count": 6, "selected": false, "value": "Explorer", "cat": "CUR"}, {"count": 16, "selected": false, "value": "Chrome", "cat": "CUR"}]};
+
+  var _datum = [];
+  var _data = [];
+
+  var _cats = [];
+
+  $(rawDatum.counts).each(function (cnt, item) {
+    item.widget_id = rawDatum.widget_id;
+
+    var _cat = null;
+    _cats.forEach(function(cat){
+      if (cat.key == item.value){
+        _cat = cat;
+      }
+    });
+
+    if (_cat == null){
+     _cat = {
+        key: item.value,
+        values: []
+      };
+     _cats.push(_cat);
+    }
+
+    _cat.values.push({
+      series: 0,
+      x: item.cat,
+      y: item.count,
+      obj: item
+    });
+  });
+
+  return _cats;
+}
+
 function lineChartDataTransformer(rawDatum) {
   var _datum = [];
   var _data = [];

+ 10 - 2
desktop/core/static/js/ko.charts.js

@@ -428,6 +428,8 @@ function barChartBuilder(element, options, isTimeline) {
   var _datum = options.transformer(options.datum);
   $(element).height(300);
 
+  var _isPivot = options.isPivot != null ? options.isPivot : false;
+
   if ($(element).find('svg').length > 0 && (_datum.length == 0 || _datum[0].values.length == 0)) {
     $(element).find('svg').empty();
   }
@@ -487,7 +489,7 @@ function barChartBuilder(element, options, isTimeline) {
             }
           }
         }
-        if (_isDiscrete) {
+        if (_isDiscrete && ! _isPivot) {
           if ($(element).find('svg').length > 0 && $(element).find('.nv-multiBarWithLegend').length > 0) {
             $(element).find('svg').empty();
           }
@@ -508,7 +510,13 @@ function barChartBuilder(element, options, isTimeline) {
           if (_datum.length > 0 && _datum[0].values.length > 10) {
             _chart.enableSelection();
           }
-          _chart.xAxis.showMaxMin(false).tickFormat(d3.format(',0f'));
+
+          if (_isPivot){
+            _chart.hideSelection();
+          }
+          else {
+            _chart.xAxis.showMaxMin(false).tickFormat(d3.format(',0f'));
+          }
           _chart.multibar.hideable(true);
           _chart.multibar.stacked(typeof options.stacked != "undefined" ? options.stacked : false);
           _chart.onStateChange(options.onStateChange);

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

@@ -58,11 +58,12 @@ nv.models.multiBarWithBrushChart = function() {
     , defaultState = null
     , noData = "No Data Available."
     , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState', 'brush')
-    , controlWidth = function() { return showControls ? 300 : 0 }
+    , controlWidth = function() { return showControls ? (selectionHidden ? 240 : 300) : 0 }
     , transitionDuration = 250
     , extent
     , brushExtent = null
     , selectionEnabled = false
+    , selectionHidden = false
     , onSelectRange = null
     , onStateChange = null
     , onChartUpdate = null
@@ -230,10 +231,13 @@ nv.models.multiBarWithBrushChart = function() {
       if (showControls) {
         var controlsData = [
           { key: LABELS.GROUPED, disabled: multibar.stacked() },
-          { key: LABELS.STACKED, disabled: !multibar.stacked() },
-          { key: LABELS.SELECT, disabled: !selectionEnabled, checkbox: true }
+          { key: LABELS.STACKED, disabled: !multibar.stacked() }
         ];
 
+        if (! selectionHidden) {
+          controlsData.push({ key: LABELS.SELECT, disabled: !selectionEnabled, checkbox: true });
+        }
+
         controls.width(controlWidth()).color(['#444', '#444', '#444']);
         g.select('.nv-controlsWrap')
             .datum(controlsData)
@@ -652,6 +656,11 @@ nv.models.multiBarWithBrushChart = function() {
     return chart;
   };
 
+  chart.hideSelection = function() {
+    selectionHidden = true;
+    return chart;
+  }
+
   chart.onSelectRange = function(_) {
     if (!arguments.length) return onSelectRange;
     onSelectRange = _;