Browse Source

HUE-8178 [charts] Fix NaN for string x axis & missing legend

jdesjean 7 years ago
parent
commit
da161e6882

+ 38 - 24
desktop/core/src/desktop/static/desktop/js/ko.charts.js

@@ -193,11 +193,23 @@
       }
       }
       var _datum = _options.transformer(_options.datum);
       var _datum = _options.transformer(_options.datum);
       var _chart = $(element).data("chart");
       var _chart = $(element).data("chart");
+      var _isPivot = _options.isPivot != null ? _options.isPivot : false;
 
 
       if (_chart) {
       if (_chart) {
         if (_chart.multibar){
         if (_chart.multibar){
           _chart.multibar.stacked(typeof _options.stacked != "undefined" ? _options.stacked : false);
           _chart.multibar.stacked(typeof _options.stacked != "undefined" ? _options.stacked : false);
         }
         }
+       if (numeric(_datum)) {
+          _chart.xAxis.showMaxMin(false).tickFormat(d3v3.format(",0f"));
+          _chart.multibar.barColor(null);
+        } else {
+          _chart.xAxis.tickFormat(function(s){ return s; });
+          if (!_isPivot) {
+            _chart.multibar.barColor(nv.utils.defaultColor());
+          } else {
+            _chart.multibar.barColor(null);
+          }
+        }
         window.setTimeout(function () {
         window.setTimeout(function () {
           handleSelection(_chart, _options, _datum);
           handleSelection(_chart, _options, _datum);
           var _d3 = d3v3.select($(element).find("svg")[0]);
           var _d3 = d3v3.select($(element).find("svg")[0]);
@@ -650,7 +662,7 @@
     var _el = d3v3.select(ref);
     var _el = d3v3.select(ref);
     var _mom = moment(d);
     var _mom = moment(d);
     if (_mom != null && _mom.isValid()) {
     if (_mom != null && _mom.isValid()) {
-      var _words = _chart.xAxis.tickFormat()(d).split(" ");
+      var _words = _el.text().split(" ");
       _el.text("");
       _el.text("");
       for (var i = 0; i < _words.length; i++) {
       for (var i = 0; i < _words.length; i++) {
         var tspan = _el.append("tspan").text(_words[i]);
         var tspan = _el.append("tspan").text(_words[i]);
@@ -670,19 +682,19 @@
     mn = day * 30.5,
     mn = day * 30.5,
     y = day * 365;
     y = day * 365;
     return d3v3.time.format.utc.multi([
     return d3v3.time.format.utc.multi([
-      ["%L %H:%M:%S", function(d) {
+      ["%L %Y-%m-%dT%H:%M:%S", function(d) {
         var domain = xAxis.domain();
         var domain = xAxis.domain();
         var domainDiff = domain[domain.length - 1] - domain[0];
         var domainDiff = domain[domain.length - 1] - domain[0];
-        var result = previous > d && domainDiff < s * minDiff;
+        var result = previous >= d && domainDiff < s * minDiff;
         if (result) {
         if (result) {
           previous = d;
           previous = d;
         }
         }
         return result;
         return result;
       }],
       }],
-      ["%S %H:%M", function(d) {
+      ["%S %Y-%m-%dT%H:%M", function(d) {
         var domain = xAxis.domain();
         var domain = xAxis.domain();
         var domainDiff = domain[domain.length - 1] - domain[0];
         var domainDiff = domain[domain.length - 1] - domain[0];
-        var result = previous > d && domainDiff < m * minDiff;
+        var result = previous >= d && domainDiff < m * minDiff;
         if (result) {
         if (result) {
           previous = d;
           previous = d;
         }
         }
@@ -691,7 +703,7 @@
       ["%H:%M %Y-%m-%d", function(d) {
       ["%H:%M %Y-%m-%d", function(d) {
         var domain = xAxis.domain();
         var domain = xAxis.domain();
         var domainDiff = domain[domain.length - 1] - domain[0];
         var domainDiff = domain[domain.length - 1] - domain[0];
-        var result = previous > d && domainDiff < h * minDiff;
+        var result = previous >= d && domainDiff < h * minDiff;
         if (result) {
         if (result) {
           previous = d;
           previous = d;
         }
         }
@@ -700,7 +712,7 @@
       ["%H:%M %Y-%m-%d", function(d) {
       ["%H:%M %Y-%m-%d", function(d) {
         var domain = xAxis.domain();
         var domain = xAxis.domain();
         var domainDiff = domain[domain.length - 1] - domain[0];
         var domainDiff = domain[domain.length - 1] - domain[0];
-        var result = previous > d && domainDiff < day * minDiff;
+        var result = previous >= d && domainDiff < day * minDiff;
         if (result) {
         if (result) {
           previous = d;
           previous = d;
         }
         }
@@ -709,7 +721,7 @@
       ["%d %Y-%m", function(d) {
       ["%d %Y-%m", function(d) {
         var domain = xAxis.domain();
         var domain = xAxis.domain();
         var domainDiff = domain[domain.length - 1] - domain[0];
         var domainDiff = domain[domain.length - 1] - domain[0];
-        var result = previous > d && domainDiff < mn * minDiff;
+        var result = previous >= d && domainDiff < mn * minDiff;
         if (result) {
         if (result) {
           previous = d;
           previous = d;
         }
         }
@@ -718,7 +730,7 @@
       ["%m %Y", function(d) {
       ["%m %Y", function(d) {
         var domain = xAxis.domain();
         var domain = xAxis.domain();
         var domainDiff = domain[domain.length - 1] - domain[0];
         var domainDiff = domain[domain.length - 1] - domain[0];
-        var result = previous > d && domainDiff < y * minDiff;
+        var result = previous >= d && domainDiff < y * minDiff;
         if (result) {
         if (result) {
           previous = d;
           previous = d;
         }
         }
@@ -914,27 +926,27 @@
       .append("div")
       .append("div")
         .style("position", "absolute")
         .style("position", "absolute")
         .style("overflow", "auto")
         .style("overflow", "auto")
-        .style("top", "0px")
+        .style("top", "20px")
         .style("right", "0px")
         .style("right", "0px")
         .style("width", "175px")
         .style("width", "175px")
-        .style("height", "100%")
+        .style("height", "calc(100% - 20px)")
       .append("svg");
       .append("svg");
   }
   }
-  function handleSelection(_chart, _options, _datum) {
-    function numeric() {
-      for (var j = 0; j < _datum.length; j++) {
-        for (var i = 0; i < _datum[j].values.length; i++) {
-          if (isNaN(_datum[j].values[i].x * 1)) {
-            return false;
-          }
+  function numeric(_datum) {
+    for (var j = 0; j < _datum.length; j++) {
+      for (var i = 0; i < _datum[j].values.length; i++) {
+        if (isNaN(_datum[j].values[i].x * 1)) {
+          return false;
         }
         }
       }
       }
-      return true;
     }
     }
+    return true;
+  }
+  function handleSelection(_chart, _options, _datum) {
     var _isPivot = _options.isPivot != null ? _options.isPivot : false;
     var _isPivot = _options.isPivot != null ? _options.isPivot : false;
     var _hideSelection = typeof _options.hideSelection !== 'undefined' ? typeof _options.hideSelection === 'function' ? _options.hideSelection() : _options.hideSelection : false;
     var _hideSelection = typeof _options.hideSelection !== 'undefined' ? typeof _options.hideSelection === 'function' ? _options.hideSelection() : _options.hideSelection : false;
     var _enableSelection = typeof _options.enableSelection !== 'undefined' ? typeof _options.enableSelection === 'function' ? _options.enableSelection() : _options.enableSelection : true;
     var _enableSelection = typeof _options.enableSelection !== 'undefined' ? typeof _options.enableSelection === 'function' ? _options.enableSelection() : _options.enableSelection : true;
-    _enableSelection = _enableSelection && numeric();
+    _enableSelection = _enableSelection && numeric(_datum);
     var _hideStacked = _options.hideStacked !== null ? typeof _options.hideStacked === 'function' ? _options.hideStacked() : _options.hideStacked : false;
     var _hideStacked = _options.hideStacked !== null ? typeof _options.hideStacked === 'function' ? _options.hideStacked() : _options.hideStacked : false;
     var fHideSelection = _isPivot || _hideSelection ? _chart.hideSelection : _chart.showSelection;
     var fHideSelection = _isPivot || _hideSelection ? _chart.hideSelection : _chart.showSelection;
     if (fHideSelection) {
     if (fHideSelection) {
@@ -951,7 +963,7 @@
     if (_chart.selectBars) {
     if (_chart.selectBars) {
       var _field = (typeof _options.field == "function") ? _options.field() : _options.field;
       var _field = (typeof _options.field == "function") ? _options.field() : _options.field;
       var bHasSelection = false;
       var bHasSelection = false;
-      $.each(_options.fqs(), function (cnt, item) {
+      $.each(_options.fqs ? _options.fqs() : [], function (cnt, item) {
         if (item.id() == _options.datum.widget_id) {
         if (item.id() == _options.datum.widget_id) {
           if (item.field() == _field) {
           if (item.field() == _field) {
             if (item.properties) {
             if (item.properties) {
@@ -1012,9 +1024,6 @@
       }
       }
       _chart = nv.models.multiBarWithBrushChart();
       _chart = nv.models.multiBarWithBrushChart();
       if (_datum.length > 0) $(element).data('chart_type', 'multibar_brush');
       if (_datum.length > 0) $(element).data('chart_type', 'multibar_brush');
-      if (!_isPivot && !_hideSelection) {
-        _chart.xAxis.showMaxMin(false).tickFormat(d3v3.format(",0f"));
-      }
       _chart.onSelectRange(function (from, to) {
       _chart.onSelectRange(function (from, to) {
         huePubSub.publish('charts.state', { updating: true });
         huePubSub.publish('charts.state', { updating: true });
         options.onSelectRange(from, to);
         options.onSelectRange(from, to);
@@ -1049,6 +1058,11 @@
         });
         });
       }
       }
       else {
       else {
+        if (numeric(_datum)) {
+          _chart.xAxis.showMaxMin(false).tickFormat(d3v3.format(",0f"));
+        } else if (!_isPivot) {
+          _chart.multibar.barColor(nv.utils.defaultColor());
+        }
         _chart.staggerLabels(true);
         _chart.staggerLabels(true);
       }
       }
       if ($(element).width() < 300 && typeof _chart.showLegend != "undefined") {
       if ($(element).width() < 300 && typeof _chart.showLegend != "undefined") {

+ 2 - 1
desktop/core/src/desktop/static/desktop/js/nv.d3.multiBarWithBrushChart.js

@@ -402,7 +402,7 @@ nv.models.multiBarWithBrushChart = function() {
           g.select('.nv-x.nv-axis').transition()
           g.select('.nv-x.nv-axis').transition()
               .call(xAxis);
               .call(xAxis);
 
 
-          var xTicks = g.select('.nv-x.nv-axis > g').selectAll('g');
+          var xTicks = g.selectAll('.nv-x.nv-axis g.tick');
 
 
           xTicks
           xTicks
               .selectAll('line, text')
               .selectAll('line, text')
@@ -758,6 +758,7 @@ nv.models.multiBarWithBrushChart = function() {
   chart.legend = legend;
   chart.legend = legend;
   chart.xAxis = xAxis;
   chart.xAxis = xAxis;
   chart.yAxis = yAxis;
   chart.yAxis = yAxis;
+  chart.xScale = multibar.xScale;
   chart.LABELS = LABELS;
   chart.LABELS = LABELS;
 
 
   d3v3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'xRange', 'yRange', 'forceX', 'forceY', 'clipEdge',
   d3v3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'xRange', 'yRange', 'forceX', 'forceY', 'clipEdge',

+ 0 - 2
desktop/libs/dashboard/src/dashboard/static/dashboard/js/search.ko.js

@@ -1640,8 +1640,6 @@ var Collection = function (vm, collection) {
     var facet = self.getFacetById(data.widget_id);
     var facet = self.getFacetById(data.widget_id);
 
 
     if (facet.properties.isDate()) {
     if (facet.properties.isDate()) {
-      facet.properties.start(moment(data.from).utc().format("YYYY-MM-DD[T]HH:mm:ss[Z]"));
-      facet.properties.end(moment(data.to).utc().format("YYYY-MM-DD[T]HH:mm:ss[Z]"));
       facet.properties.min(moment(data.from).utc().format("YYYY-MM-DD[T]HH:mm:ss[Z]"));
       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]"));
       facet.properties.max(moment(data.to).utc().format("YYYY-MM-DD[T]HH:mm:ss[Z]"));
     }
     }

+ 40 - 0
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -1259,6 +1259,8 @@ ${ dashboard.layout_skeleton(suffix='search') }
       <div style="position: relative;">
       <div style="position: relative;">
       <div data-bind="timelineChart: {datum: {counts: counts(), extraSeries: extraSeries(), widget_id: $parent.id(), label: label()}, stacked: $root.collection.getFacetById($parent.id()).properties.stacked(), enableSelection: true, field: field, label: label(), transformer: timelineChartDataTransformer,
       <div data-bind="timelineChart: {datum: {counts: counts(), extraSeries: extraSeries(), widget_id: $parent.id(), label: label()}, stacked: $root.collection.getFacetById($parent.id()).properties.stacked(), enableSelection: true, field: field, label: label(), transformer: timelineChartDataTransformer,
         type: $root.collection.getFacetById($parent.id()).properties.timelineChartType,
         type: $root.collection.getFacetById($parent.id()).properties.timelineChartType,
+        hideSelection: true,
+        hideStacked: hideStacked,
         fqs: $root.query.fqs,
         fqs: $root.query.fqs,
         onSelectRange: function(from, to){ $root.collection.selectTimelineFacet({from: from, to: to, cat: field, widget_id: $parent.id()}) },
         onSelectRange: function(from, to){ $root.collection.selectTimelineFacet({from: from, to: to, cat: field, widget_id: $parent.id()}) },
         onStateChange: function(state){ $root.collection.getFacetById($parent.id()).properties.stacked(state.stacked); $root.collection.getFacetById($parent.id()).properties.enableSelection(state.selectionEnabled); },
         onStateChange: function(state){ $root.collection.getFacetById($parent.id()).properties.stacked(state.stacked); $root.collection.getFacetById($parent.id()).properties.enableSelection(state.selectionEnabled); },
@@ -1336,6 +1338,9 @@ ${ dashboard.layout_skeleton(suffix='search') }
     <div style="position: relative;">
     <div style="position: relative;">
     <div data-bind="barChart: {datum: {counts: counts(), widget_id: $parent.id(), label: label()}, stacked: $root.collection.getFacetById($parent.id()).properties.stacked(), field: field, label: label(),
     <div data-bind="barChart: {datum: {counts: counts(), widget_id: $parent.id(), label: label()}, stacked: $root.collection.getFacetById($parent.id()).properties.stacked(), field: field, label: label(),
       fqs: $root.query.fqs,
       fqs: $root.query.fqs,
+      enableSelection: true,
+      hideSelection: true,
+      hideStacked: hideStacked,
       transformer: ($data.type == 'range-up' ? barChartRangeUpDataTransformer : barChartDataTransformer),
       transformer: ($data.type == 'range-up' ? barChartRangeUpDataTransformer : barChartDataTransformer),
       onStateChange: function(state){ $root.collection.getFacetById($parent.id()).properties.stacked(state.stacked); },
       onStateChange: function(state){ $root.collection.getFacetById($parent.id()).properties.stacked(state.stacked); },
       onClick: function(d) {
       onClick: function(d) {
@@ -1821,6 +1826,37 @@ ${ dashboard.layout_skeleton(suffix='search') }
   <!-- /ko -->
   <!-- /ko -->
 </script>
 </script>
 
 
+
+<script type="text/html" id="line-widget">
+  <div class="widget-spinner" data-bind="visible: isLoading()">
+    <i class="fa fa-spinner fa-spin"></i>
+  </div>
+
+  <!-- ko if: $root.getFacetFromQuery(id()).has_data() -->
+  <div class="row-fluid" data-bind="with: $root.getFacetFromQuery(id())">
+    <div data-bind="visible: $root.isEditing, with: $root.collection.getFacetById($parent.id())" style="margin-bottom: 20px">
+      <span data-bind="template: { name: 'facet-toggle' }">
+      </span>
+    </div>
+    <div class="clearfix"></div>
+    <div style="padding-bottom: 10px; text-align: right; padding-right: 20px" data-bind="visible: counts.length > 0">
+      <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>
+    </div>
+    <div style="position: relative;">
+    <div data-bind="lineChart: {datum: {counts: counts(), widget_id: $parent.id(), label: label()}, field: field, label: label(),
+      transformer: lineChartDataTransformer,
+      onClick: function(d){ searchViewModel.query.selectRangeFacet({count: d.obj.value, widget_id: d.obj.widget_id, from: d.obj.from, to: d.obj.to, cat: d.obj.field}) },
+      onSelectRange: function(from, to){ searchViewModel.collection.selectTimelineFacet({from: from, to: to, cat: field, widget_id: $parent.id()}) },
+      onComplete: function(){ searchViewModel.getWidgetById($parent.id()).isLoading(false); huePubSub.publish('gridster.autoheight'); }}"
+    />
+    </div>
+    <div class="clearfix"></div>
+  </div>
+  <!-- /ko -->
+</script>
+
+
 <script type="text/html" id="pie-widget">
 <script type="text/html" id="pie-widget">
   <!-- ko if: $root.getFacetFromQuery(id()).has_data() -->
   <!-- ko if: $root.getFacetFromQuery(id()).has_data() -->
   <div class="row-fluid" data-bind="with: $root.getFacetFromQuery(id())">
   <div class="row-fluid" data-bind="with: $root.getFacetFromQuery(id())">
@@ -2031,8 +2067,11 @@ ${ dashboard.layout_skeleton(suffix='search') }
       <div class="clearfix"></div>
       <div class="clearfix"></div>
 
 
       <!-- ko if: properties.scope() == 'stack' -->
       <!-- ko if: properties.scope() == 'stack' -->
+        <div style="position: relative;">
         <div data-bind="barChart: {datum: {counts: $parent.counts(), widget_id: $parent.id(), label: $parent.label()}, stacked: $root.collection.getFacetById($parent.id()).properties.stacked(),
         <div data-bind="barChart: {datum: {counts: $parent.counts(), widget_id: $parent.id(), label: $parent.label()}, stacked: $root.collection.getFacetById($parent.id()).properties.stacked(),
           isPivot: true,
           isPivot: true,
+          enableSelection: true,
+          hideSelection: true,
           fqs: $root.query.fqs,
           fqs: $root.query.fqs,
           transformer: pivotChartDataTransformer,
           transformer: pivotChartDataTransformer,
           onStateChange: function(state){ $root.collection.getFacetById($parent.id()).properties.stacked(state.stacked); },
           onStateChange: function(state){ $root.collection.getFacetById($parent.id()).properties.stacked(state.stacked); },
@@ -2041,6 +2080,7 @@ ${ dashboard.layout_skeleton(suffix='search') }
           },
           },
           onComplete: function(){ searchViewModel.getWidgetById($parent.id()).isLoading(false); }}"
           onComplete: function(){ searchViewModel.getWidgetById($parent.id()).isLoading(false); }}"
         />
         />
+        </div>
       <div class="clearfix"></div>
       <div class="clearfix"></div>
       <!-- /ko -->
       <!-- /ko -->
     </div>
     </div>

+ 2 - 2
desktop/libs/libsolr/src/libsolr/api.py

@@ -919,8 +919,8 @@ class SolrApi(object):
 
 
     if time_field and (collection['timeFilter']['value'] != 'all' or collection['timeFilter']['type'] == 'fixed'):
     if time_field and (collection['timeFilter']['value'] != 'all' or collection['timeFilter']['type'] == 'fixed'):
       # fqs overrides main time filter
       # fqs overrides main time filter
-      fq_time_ids = [fq['id'] for fq in query['fqs'] if fq['field'] == time_field]
-      props['time_filter_overrides'] = fq_time_ids
+      # No longer override
+      props['time_filter_overrides'] = []
       props['time_field'] = time_field
       props['time_field'] = time_field
 
 
       if collection['timeFilter']['type'] == 'rolling':
       if collection['timeFilter']['type'] == 'rolling':