Bläddra i källkod

HUE-8178 [charts] Reintroduce zoom

jdesjean 7 år sedan
förälder
incheckning
1dfc3e5179

+ 2 - 2
desktop/libs/dashboard/src/dashboard/facet_builder.py

@@ -96,8 +96,8 @@ def _get_interval(domain_ms, SLOTS):
   biggest_interval = TIME_INTERVALS[len(TIME_INTERVALS) - 1]
   biggest_interval_is_too_small = domain_ms / biggest_interval['ms'] > SLOTS
   if biggest_interval_is_too_small:
-    coeff = ceil(domain_ms / SLOTS)
-    return '+' + coeff + 'YEARS'
+    coeff = min(ceil(domain_ms / SLOTS), 100) # If we go over 100 years, something has gone wrong.
+    return '+' + str(coeff) + 'YEARS'
 
   for i in range(len(TIME_INTERVALS) - 2, 0, -1):
     slots = domain_ms / TIME_INTERVALS[i]['ms']

+ 2 - 2
desktop/libs/dashboard/src/dashboard/models.py

@@ -601,7 +601,7 @@ def augment_solr_response(response, collection, query):
                                  name,
                                  selected_values.get(facet['id'], []),
                                  counts,
-                                 datetime.datetime(datetime.MAXYEAR, 12, 31, 23, 59, 59, 0, dateutil.tz.tzoffset('Z', 0)) if facet['properties'].get('isDate') else 1,
+                                 facet['properties']['max'],
                                  collection_facet['properties']['facets'][0],
                                  collection_facet=collection_facet)
           else:
@@ -630,7 +630,7 @@ def augment_solr_response(response, collection, query):
                                _name,
                                selected_values.get(facet['id'], []),
                                val,
-                               datetime.datetime(datetime.MAXYEAR, 12, 31, 23, 59, 59, 0, dateutil.tz.tzoffset('Z', 0)) if facet['properties'].get('isDate') else 1,
+                               facet['properties']['max'],
                                collection_facet['properties']['facets'][0])
               extraSeries.append({'counts': _c, 'label': _name})
             counts = []

+ 65 - 26
desktop/libs/dashboard/src/dashboard/static/dashboard/js/search.ko.js

@@ -908,20 +908,34 @@ var Collection = function (vm, collection) {
         self._addObservablesToNestedFacet(facet, nestedFacet, vm, index);
       });
     }
-
+    function getFq () {
+      var _fq, fqs = vm.query && vm.query.fqs();
+      for (var i = 0; fqs && i < fqs.length; i++) {
+        var fq = fqs[i];
+        if (fq.id() == facet.id()) {
+          _fq = fq;
+          break;
+        }
+      }
+      return _fq;
+    }
     facet.canReset = ko.computed(function () {
-      var _fq = (function() {
-        var _fq, fqs = vm.query && vm.query.fqs();
-        for (var i = 0; fqs && i < fqs.length; i++) {
-          var fq = fqs[i];
-          if (fq.id() == facet.id()) {
-            _fq = fq;
-            break;
-          }
+      var _fq = getFq();
+      function isNotInitial () {
+        if (!facet.properties.canRange()) {
+          return false;
         }
-        return _fq;
-      })();
-      return _fq && _fq.filter().length;
+        if (facet.properties.facets) {
+          return facet.properties.facets()[0].start() !== facet.properties.initial_start() || facet.properties.facets()[0].end() !== facet.properties.initial_end();
+        } else {
+          return facet.properties.start() !== facet.properties.initial_start() || facet.properties.end() !== facet.properties.initial_end();
+        }
+      }
+      return _fq && _fq.filter().length || isNotInitial();
+    });
+    facet.canZoomIn = ko.computed(function () {
+      var _fq = getFq();
+      return facet.properties.canRange() && _fq && _fq.filter().length;
     });
   }
 
@@ -1640,11 +1654,6 @@ var Collection = function (vm, collection) {
   self.selectTimelineFacet = function (data) {
     var facet = self.getFacetById(data.widget_id);
 
-    if (facet.properties.isDate()) {
-      facet.properties.min(moment(data.from).utc().format("YYYY-MM-DD[T]HH:mm:ss[Z]"));
-      facet.properties.max(moment(data.to).utc().format("YYYY-MM-DD[T]HH:mm:ss[Z]"));
-    }
-
     vm.query.selectRangeFacet({widget_id: data.widget_id, from: data.from, to: data.to, cat: data.cat, no_refresh: true, force: true});
 
     $.ajax({
@@ -1670,11 +1679,6 @@ var Collection = function (vm, collection) {
     var facet = self.getFacetById(data.widget_id);
     var nestedFacet = facet.properties.facets()[0];
 
-    if (nestedFacet.isDate()) {
-      nestedFacet.min(moment(data.from).utc().format("YYYY-MM-DD[T]HH:mm:ss[Z]"));
-      nestedFacet.max(moment(data.to).utc().format("YYYY-MM-DD[T]HH:mm:ss[Z]"));
-    }
-
     vm.query.selectRangeFacet({widget_id: data.widget_id, from: data.from, to: data.to, cat: data.cat, no_refresh: true, force: true});
 
     $.ajax({
@@ -1696,21 +1700,56 @@ var Collection = function (vm, collection) {
     vm.search();
   }
 
+  self.rangeZoomIn = function (facet_json) {
+    var facet_id = ko.mapping.toJS(facet_json).id;
+    var facet = self.getFacetById(facet_id);
+    var fqs = vm.query.fqs();
+    var fq;
+    for (var i = 0; i < fqs.length; i++) {
+      if (fqs[i].id() == facet_id) {
+        fq = fqs[i];
+      }
+    }
+    if (!fq || !fq.properties()[0].from) {
+      return;
+    }
+    var properties;
+    if (facet_json.type() == 'nested') {
+      facet = facet.properties.facets()[0];
+      properties = facet;
+    } else {
+      properties = facet.properties;
+    }
+    if (facet.isDate && facet.isDate()) {
+      properties.start(moment(fq.properties()[0].from()).utc().format("YYYY-MM-DD[T]HH:mm:ss[Z]"));
+      properties.end(moment(fq.properties()[0].to()).utc().format("YYYY-MM-DD[T]HH:mm:ss[Z]"));
+    } else {
+      properties.start(fq.properties()[0].from());
+      properties.end(fq.properties()[0].to());
+    }
+
+    vm.search();
+  };
+
   self.rangeZoomOut = function (facet_json) {
     var facet_id = ko.mapping.toJS(facet_json).id;
     var facet = self.getFacetById(facet_id);
 
     vm.query.removeFilter(ko.mapping.fromJS({'id': facet_id}));
-    if (facet.properties.gap() != null) { // Bar, line charts don't have gap
+    if (facet.properties.canRange()) {
       facet.properties.gap(facet.properties.initial_gap());
-    }
-    if (facet.properties.initial_start() != null) { // Bar and line charts
       facet.properties.start(facet.properties.initial_start());
       facet.properties.end(facet.properties.initial_end());
       facet.properties.min(facet.properties.initial_start());
       facet.properties.max(facet.properties.initial_end());
+      if (facet.properties.facets) {
+        var nestedFacet = facet.properties.facets()[0];
+        nestedFacet.start(facet.properties.initial_start());
+        nestedFacet.end(facet.properties.initial_end());
+        nestedFacet.min(facet.properties.initial_start());
+        nestedFacet.max(facet.properties.initial_end());
+      }
     }
-
     vm.search();
   }
 

+ 26 - 4
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -1238,6 +1238,16 @@ ${ dashboard.layout_skeleton(suffix='search') }
     <div class="clearfix"></div>
 
     <div style="padding-bottom: 10px; text-align: right; padding-right: 20px" data-bind="visible: counts().length > 0">
+      <div data-bind="visible: canZoomIn() || canReset()" class="inline-block">
+        <span class="facet-field-label">${ _('Zoom') }</span>
+        <i class="fa fa-search-minus"></i>
+      </div>
+      <div class="inline-block" style="padding-bottom: 10px; padding-right: 20px" data-bind="visible: canZoomIn">
+        <a href="javascript:void(0)" data-bind="click: $root.collection.rangeZoomIn">${ _('to selection') }</a>
+      </div>
+      <div class="inline-block" style="padding-bottom: 10px; padding-right: 20px" data-bind="visible: canReset">
+        <a href="javascript:void(0)" data-bind="click: $root.collection.rangeZoomOut">${ _('reset') }</a>
+      </div>
       <span data-bind="with: $root.collection.getFacetById($parent.id())">
         <span class="facet-field-label">${ _('Chart Type') }</span>
         <select class="input-small" data-bind="options: $root.timelineChartTypes,
@@ -1246,8 +1256,6 @@ ${ dashboard.layout_skeleton(suffix='search') }
                        value: properties.timelineChartType">
         </select>&nbsp;
       </span>
-      <span class="facet-field-label">${ _('Zoom') }</span>
-      <a href="javascript:void(0)" data-bind="click: $root.collection.rangeZoomOut"><i class="fa fa-search-minus"></i> ${ _('reset') }</a>
       <span class="facet-field-label" data-bind="visible: $root.query.multiqs().length > 1">${ _('Group by') }</span>
       <select class="input-medium" data-bind="visible: $root.query.multiqs().length > 1, options: $root.query.multiqs, optionsValue: 'id', optionsText: 'label', value: $root.query.selectedMultiq"></select>
     </div>
@@ -1287,8 +1295,15 @@ ${ dashboard.layout_skeleton(suffix='search') }
     </div>
 
     <div style="padding-bottom: 10px; text-align: right; padding-right: 20px">
+      <div data-bind="visible: canZoomIn() || canReset()" class="inline-block">
+        <span class="facet-field-label">${ _('Zoom') }</span>
+        <i class="fa fa-search-minus"></i>
+      </div>
+      <div class="inline-block" style="padding-bottom: 10px; padding-right: 20px" data-bind="visible: canZoomIn">
+        <a href="javascript:void(0)" data-bind="click: $root.collection.rangeZoomIn">${ _('to selection') }</a>
+      </div>
       <div class="inline-block" style="padding-bottom: 10px; padding-right: 20px" data-bind="visible: canReset">
-        <a href="javascript:void(0)" data-bind="click: $root.collection.rangeZoomOut"></i> ${ _('reset') }</a>
+        <a href="javascript:void(0)" data-bind="click: $root.collection.rangeZoomOut">${ _('reset') }</a>
       </div>
       <span data-bind="with: $root.collection.getFacetById($parent.id())">
         <span class="facet-field-label">${ _('Chart Type') }</span>
@@ -1792,8 +1807,15 @@ ${ dashboard.layout_skeleton(suffix='search') }
     <div>
       <span data-bind="template: { name: 'facet-toggle2' }"></span>
       <div class="pull-right">
+        <div data-bind="visible: canZoomIn() || canReset()" class="inline-block">
+        <span class="facet-field-label">${ _('Zoom') }</span>
+      <i class="fa fa-search-minus"></i>
+      </div>
+      <div class="inline-block" style="padding-bottom: 10px; padding-right: 20px" data-bind="visible: canZoomIn">
+        <a href="javascript:void(0)" data-bind="click: $root.collection.rangeZoomIn">${ _('to selection') }</a>
+      </div>
       <div class="inline-block" style="padding-bottom: 10px; padding-right: 20px" data-bind="visible: canReset">
-        <a href="javascript:void(0)" data-bind="click: $root.collection.rangeZoomOut"></i> ${ _('reset') }</a>
+        <a href="javascript:void(0)" data-bind="click: $root.collection.rangeZoomOut">${ _('reset') }</a>
       </div>
       <!-- ko if: properties.canRange -->
       <div class="inline-block" style="padding-bottom: 10px; padding-right: 20px">