فهرست منبع

HUE-2407 [beeswax] Enable chart X axis ordering

Added the possibility to sort bars, lines and pies
Removed Checkbox to select on the bar chart
Enrico Berti 11 سال پیش
والد
کامیت
6ebd6003a2
3فایلهای تغییر یافته به همراه65 افزوده شده و 3 حذف شده
  1. 62 2
      apps/beeswax/src/beeswax/templates/execute.mako
  2. 1 0
      apps/beeswax/static/js/beeswax.vm.js
  3. 2 1
      desktop/core/static/js/ko.charts.js

+ 62 - 2
apps/beeswax/src/beeswax/templates/execute.mako

@@ -429,7 +429,12 @@ ${layout.menubar(section='query')}
               </label>&nbsp;&nbsp;
               <label>${_('Y-Axis')}
               <select id="blueprintY" class="blueprintSelect"></select>
-              </label>
+              </label>&nbsp;
+              <div class="btn-group" data-toggle="buttons-radio">
+                <a rel="tooltip" data-placement="top" title="${_('No sorting')}" id="blueprintNoSort" href="javascript:void(0)" class="btn active"><i class="fa fa-align-left fa-rotate-270"></i></a>
+                <a rel="tooltip" data-placement="top" title="${_('Sort ascending')}" id="blueprintSortAsc" href="javascript:void(0)" class="btn"><i class="fa fa-sort-amount-asc fa-rotate-270"></i></a>
+                <a rel="tooltip" data-placement="top" title="${_('Sort descending')}" id="blueprintSortDesc" href="javascript:void(0)" class="btn"><i class="fa fa-sort-amount-desc fa-rotate-270"></i></a>
+              </div>&nbsp;&nbsp;
             </span>
             <span id="blueprintLatLng" class="hide">
               <label>${_('Latitude')}
@@ -450,7 +455,7 @@ ${layout.menubar(section='query')}
               transformer: pieChartDataTransformer,
               maxWidth: 350 }, visible: $root.chartType() == 'pie'"></div>
 
-            <div id="barChart" data-bind="barChart: {datum: {counts: $root.chartData}, fqs: ko.observableArray([]),
+            <div id="barChart" data-bind="barChart: {datum: {counts: $root.chartData}, fqs: ko.observableArray([]), hideSelection: true,
                   transformer: barChartDataTransformer}, visible: $root.chartType() == 'bars'"></div>
 
             <div id="lineChart" data-bind="lineChart: {datum: {counts: $root.chartData},
@@ -1865,6 +1870,25 @@ $(document).ready(function () {
     generateGraph(ko.HUE_CHARTS.TYPES.MAP)
   });
 
+  $("#blueprintNoSort").on("click", function () {
+    viewModel.chartSorting("none");
+    redrawChart();
+  });
+
+  $("#blueprintSortAsc").on("click", function () {
+    viewModel.chartSorting("asc");
+    redrawChart();
+  });
+
+  $("#blueprintSortDesc").on("click", function () {
+    viewModel.chartSorting("desc");
+    redrawChart();
+  });
+
+  function redrawChart() {
+    generateGraph(viewModel.chartType());
+  }
+
   $("#log pre:eq(1)").scroll(function () {
     if ($(this).scrollTop() + $(this).height() + 20 >= $(this)[0].scrollHeight) {
       logsAtEnd = true;
@@ -2704,6 +2728,18 @@ function pieChartDataTransformer(data) {
       obj: item
     });
   });
+
+  if (viewModel.chartSorting() == "asc"){
+    _data.sort(function(a, b){
+      return a.value > b.value
+    });
+  }
+  if (viewModel.chartSorting() == "desc"){
+    _data.sort(function(a, b){
+      return b.value > a.value
+    });
+  }
+
   return _data;
 }
 
@@ -2734,6 +2770,18 @@ function barChartDataTransformer(rawDatum) {
       });
     }
   });
+
+  if (viewModel.chartSorting() == "asc"){
+    _data.sort(function(a, b){
+      return a.y > b.y
+    });
+  }
+  if (viewModel.chartSorting() == "desc"){
+    _data.sort(function(a, b){
+      return b.y > a.y
+    });
+  }
+
   _datum.push({
     key: $("#blueprintY option:selected").text(),
     values: _data
@@ -2763,6 +2811,18 @@ function lineChartDataTransformer(rawDatum) {
         });
       }
     });
+
+    if (viewModel.chartSorting() == "asc"){
+      _data.sort(function(a, b){
+        return a.y > b.y
+      });
+    }
+    if (viewModel.chartSorting() == "desc"){
+      _data.sort(function(a, b){
+        return b.y > a.y
+      });
+    }
+
     _datum.push({
       key: $("#blueprintY option:selected").text(),
       values: _data

+ 1 - 0
apps/beeswax/static/js/beeswax.vm.js

@@ -74,6 +74,7 @@ function BeeswaxViewModel(server) {
   self.design = ko.mapping.fromJS(DESIGN_DEFAULTS);
 
   self.chartType = ko.observable("bars");
+  self.chartSorting = ko.observable("none");
   self.chartData = ko.observableArray();
 
   self.server = ko.observable(server);

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

@@ -426,6 +426,7 @@ function barChartBuilder(element, options, isTimeline) {
   $(element).height(300);
 
   var _isPivot = options.isPivot != null ? options.isPivot : false;
+  var _hideSelection = options.hideSelection != null ? options.hideSelection : false;
 
   if ($(element).find("svg").length > 0 && (_datum.length == 0 || _datum[0].values.length == 0)) {
     $(element).find("svg").empty();
@@ -508,7 +509,7 @@ function barChartBuilder(element, options, isTimeline) {
             _chart.enableSelection();
           }
 
-          if (_isPivot) {
+          if (_isPivot || _hideSelection) {
             _chart.hideSelection();
           }
           else {