Эх сурвалжийг харах

[search] Grid charts should use just the selected grid fields

Also fixed some chart rendering flakiness
Enrico Berti 10 жил өмнө
parent
commit
98d8d5c

+ 12 - 1
apps/search/src/search/static/search/js/search.ko.js

@@ -498,6 +498,13 @@ var Collection = function (vm, collection) {
   }, collection.template.chartSettings);
 
   self.template = ko.mapping.fromJS(collection.template);
+
+  for (var setting in self.template.chartSettings) {
+    self.template.chartSettings[setting].subscribe(function () {
+      huePubSub.publish('gridChartForceUpdate');
+    });
+  }
+
   self.template.fieldsSelected.subscribe(function () {
     vm.search();
   });
@@ -848,7 +855,11 @@ var Collection = function (vm, collection) {
   });
 
   self.template.getMeta = function (extraCheck) {
-    return $.map(self.template.fieldsAttributes(), function (field) {
+    var iterable = self.template.fieldsAttributes();
+    if (self.template.fields().length > 0) {
+      iterable = self.template.fields();
+    }
+    return $.map(iterable, function (field) {
       if (field.name() != '' && extraCheck(field.type())) {
         return field;
       }

+ 8 - 2
apps/search/src/search/templates/search.mako

@@ -557,7 +557,7 @@ ${ dashboard.layout_skeleton() }
 
         <div class="dropdown">
           <a class="grid-side-btn" style="padding-right:0" href="javascript:void(0)"
-             data-bind="css: {'active': $root.collection.template.showChart() }, click: function(){ $root.collection.template.showChart(true); $root.collection.template.showGrid(false); }">
+             data-bind="css: {'active': $root.collection.template.showChart() }, click: function(){ $root.collection.template.showChart(true); $root.collection.template.showGrid(false); huePubSub.publish('gridChartForceUpdate'); }">
             <i class="hcha hcha-bar-chart" data-bind="visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.BARCHART"></i>
             <i class="hcha hcha-line-chart" data-bind="visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.LINECHART"
                style="display: none;"></i>
@@ -736,7 +736,7 @@ ${ dashboard.layout_skeleton() }
 
       <div data-bind="visible: $root.hasRetrievedResults() && $root.results().length > 0 && $root.collection.template.showChart()">
         <div data-bind="visible: !$root.collection.template.hasDataForChart()" style="padding: 10px">${ _('Please select the chart parameters on the left.') }</div>
-        <div data-bind="visible: $root.collection.template.hasDataForChart" style="overflow-x: auto">
+        <div class="grid-chart-container" data-bind="visible: $root.collection.template.hasDataForChart" style="overflow-x: auto">
           <div data-bind="attr:{'id': 'pieChart_'+id()}, pieChart: {data: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data}, fqs: ko.observableArray([]),
                 transformer: pieChartDataTransformerGrid, maxWidth: 350, parentSelector: '.chart-container' }, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.PIECHART" class="chart"></div>
 
@@ -2837,6 +2837,12 @@ $(document).ready(function () {
     resizeFieldsList();
   });
 
+  huePubSub.subscribe('gridChartForceUpdate', function () {
+    window.setTimeout(function () {
+      $('.grid-chart-container').children().trigger('forceUpdate')
+    }, 200);
+  });
+
   var _query = ${ query | n,unicode };
   viewModel = new SearchViewModel(${ collection.get_json(user) | n,unicode }, _query, ${ initial | n,unicode });