Pārlūkot izejas kodu

[search] Added visual hint for updating charts for slower collections

Enrico Berti 11 gadi atpakaļ
vecāks
revīzija
1ba0fbab3d

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

@@ -807,7 +807,7 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
   <div data-bind="foreach: { data: $root.query.fqs, afterRender: function(){ isLoading(false); } }">
     <!-- ko if: $data.type() == 'field' -->
     <div class="filter-box">
-      <a href="javascript:void(0)" class="pull-right" data-bind="click: function(){ viewModel.query.removeFilter($data); viewModel.search() }"><i class="fa fa-times"></i></a>
+      <a href="javascript:void(0)" class="pull-right" data-bind="click: function(){ chartsUpdatingState(); viewModel.query.removeFilter($data); viewModel.search() }"><i class="fa fa-times"></i></a>
       <strong>${_('field')}</strong>:
       <span data-bind="text: $data.field"></span>
       <br/>
@@ -817,7 +817,7 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
     <!-- /ko -->
     <!-- ko if: $data.type() == 'range' -->
     <div class="filter-box">
-      <a href="javascript:void(0)" class="pull-right" data-bind="click: function(){ viewModel.query.removeFilter($data); viewModel.search() }"><i class="fa fa-times"></i></a>
+      <a href="javascript:void(0)" class="pull-right" data-bind="click: function(){ chartsUpdatingState(); viewModel.query.removeFilter($data); viewModel.search() }"><i class="fa fa-times"></i></a>
       <strong>${_('field')}</strong>:
       <span data-bind="text: $data.field"></span>
       <br/>

+ 21 - 4
apps/search/static/js/charts.ko.js

@@ -65,6 +65,7 @@ ko.bindingHandlers.pieChart = {
       }, function () {
         d3.selectAll(".nv-slice").on('click',
           function (d, i) {
+            chartsUpdatingState();
             _options.onClick(d);
           });
       });
@@ -174,6 +175,7 @@ ko.bindingHandlers.mapChart = {
         data: mapData,
         onClick: function(data) {
           if (typeof options.onClick != "undefined") {
+            chartsUpdatingState();
             options.onClick(data);
           }
         },
@@ -245,7 +247,10 @@ function lineChart(element, options) {
     if (_datum.length > 0 && _datum[0].values.length > 10){
       _chart.enableSelection();
     }
-    _chart.onSelectRange(options.onSelectRange);
+    _chart.onSelectRange(function(from, to){
+      chartsUpdatingState();
+      options.onSelectRange(from, to);
+    });
     _chart.xAxis.showMaxMin(false);
 
     _chart.yAxis
@@ -261,8 +266,9 @@ function lineChart(element, options) {
 
     return _chart;
   }, function () {
-    d3.selectAll(".nv-bar").on('click',
+    d3.selectAll(".nv-line").on('click',
       function (d, i) {
+        chartsUpdatingState();
         options.onClick(d);
       });
   });
@@ -297,7 +303,10 @@ function barChart(element, options, isTimeline) {
       if (_datum.length > 0 && _datum[0].values.length > 10){
         _chart.enableSelection();
       }
-      _chart.onSelectRange(options.onSelectRange);
+      _chart.onSelectRange(function(from, to){
+        chartsUpdatingState();
+        options.onSelectRange(from, to);
+      });
       _chart.xAxis.tickFormat(d3.time.format("%Y-%m-%d %H:%M:%S"));
       _chart.multibar.hideable(true);
       _chart.multibar.stacked(typeof options.stacked != "undefined" ? options.stacked : false);
@@ -331,7 +340,10 @@ function barChart(element, options, isTimeline) {
         _chart.multibar.hideable(true);
         _chart.multibar.stacked(typeof options.stacked != "undefined" ? options.stacked : false);
         _chart.onStateChange(options.onStateChange);
-        _chart.onSelectRange(options.onSelectRange);
+        _chart.onSelectRange(function(from, to){
+          chartsUpdatingState();
+          options.onSelectRange(from, to);
+        });
       }
     }
     _chart.transitionDuration(0);
@@ -355,8 +367,13 @@ function barChart(element, options, isTimeline) {
   }, function () {
     d3.selectAll(".nv-bar").on("click",
       function (d, i) {
+        chartsUpdatingState();
         options.onClick(d);
       });
   });
 
 }
+
+function chartsUpdatingState() {
+  $(document).find("svg").css("opacity", "0.5");
+}