Browse Source

HUE-8178 [charts] Move mouseover detail to right side.

jdesjean 7 years ago
parent
commit
99f5a6b228

+ 19 - 0
desktop/core/src/desktop/static/desktop/js/ko.charts.js

@@ -1005,6 +1005,10 @@
     if (fHideStacked) {
     if (fHideStacked) {
       fHideStacked.call(_chart);
       fHideStacked.call(_chart);
     }
     }
+    var fTooltips = _chart.tooltips;
+    if (fTooltips) {
+      fTooltips.call(_chart, _hideStacked);
+    }
     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;
@@ -1079,6 +1083,21 @@
           options.onClick(d.point);
           options.onClick(d.point);
         }
         }
       });
       });
+      _chart.multibar.dispatch.on('elementMouseover.tooltip', function(e) {
+        var _hideStacked = options.hideStacked !== null ? typeof options.hideStacked === 'function' ? options.hideStacked() : options.hideStacked : false;
+        if (!_hideStacked) {
+          $('a[href=\'#nv-detail-mouseover\']').tab('show');
+          var values = _chart.tooltipContent()((e.list || [e]).map(function (e) {
+            var x = _chart.multibar.x()(e.point, e.pointIndex),
+            y = _chart.multibar.y()(e.point, e.pointIndex);
+            return {x: x, y: y, key: e.series.key};
+          }));
+          var content = values.map(function (value) {
+            return '<p><b>' + hueUtils.htmlEncode(value.key) + '</b>: ' +  hueUtils.htmlEncode(value.y) + '</p>';
+          }).join("") + '<h3>' + hueUtils.htmlEncode(values[0] && values[0].x) + '</h3>';
+          $('#nv-detail-mouseover .tab-pane-content').html(content);
+        }
+      });
       _chart.onStateChange(options.onStateChange);
       _chart.onStateChange(options.onStateChange);
       if (options.selectedSerie) {
       if (options.selectedSerie) {
         _chart.onLegendChange(function (state) {
         _chart.onLegendChange(function (state) {

+ 33 - 5
desktop/core/src/desktop/static/desktop/js/nv.d3.multiBarWithBrushChart.js

@@ -50,6 +50,7 @@ nv.models.multiBarWithBrushChart = function() {
     , tooltips = true
     , tooltips = true
     , tooltip = null
     , tooltip = null
     , minTickWidth = 60
     , minTickWidth = 60
+    , tooltipContent = null
     , tooltipSingle = function(value) {
     , tooltipSingle = function(value) {
       return '<h3>' + hueUtils.htmlEncode(value.key) + '</h3>' +
       return '<h3>' + hueUtils.htmlEncode(value.key) + '</h3>' +
         '<p>' + hueUtils.htmlEncode(value.y) + ' on ' + hueUtils.htmlEncode(value.x) + '</p>';
         '<p>' + hueUtils.htmlEncode(value.y) + ' on ' + hueUtils.htmlEncode(value.x) + '</p>';
@@ -107,14 +108,14 @@ nv.models.multiBarWithBrushChart = function() {
 
 
   var showTooltip = function(e, offsetElement) {
   var showTooltip = function(e, offsetElement) {
     var values;
     var values;
-    if (!tooltip) {
+    if (!tooltipContent) {
       values = (e.list || [e]).map(function (e) {
       values = (e.list || [e]).map(function (e) {
         var x = xAxis.tickFormat()(multibar.x()(e.point, e.pointIndex)),
         var x = xAxis.tickFormat()(multibar.x()(e.point, e.pointIndex)),
         y = yAxis.tickFormat()(multibar.y()(e.point, e.pointIndex));
         y = yAxis.tickFormat()(multibar.y()(e.point, e.pointIndex));
         return {x: x, y: y, key: e.series.key};
         return {x: x, y: y, key: e.series.key};
       });
       });
     } else {
     } else {
-      values = tooltip((e.list || [e]).map(function (e) {
+      values = tooltipContent((e.list || [e]).map(function (e) {
         var x = multibar.x()(e.point, e.pointIndex),
         var x = multibar.x()(e.point, e.pointIndex),
         y = multibar.y()(e.point, e.pointIndex);
         y = multibar.y()(e.point, e.pointIndex);
         return {x: x, y: y, key: e.series.key};
         return {x: x, y: y, key: e.series.key};
@@ -222,6 +223,11 @@ nv.models.multiBarWithBrushChart = function() {
       gEnter.append('g').attr('class', 'nv-x nv-axis');
       gEnter.append('g').attr('class', 'nv-x nv-axis');
       gEnter.append('g').attr('class', 'nv-y nv-axis');
       gEnter.append('g').attr('class', 'nv-y nv-axis');
       gEnter.append('g').attr('class', 'nv-barsWrap');
       gEnter.append('g').attr('class', 'nv-barsWrap');
+      gEnter.append('g').attr('class', 'nv-mouseover')
+      .append('line')
+      .attr('stroke-dasharray', '5, 5')
+      .style('stroke', 'rgba(0,0,0,0.5)')
+      .style('stroke-width', '1');
       // We put the legend in an another SVG to support scrolling
       // We put the legend in an another SVG to support scrolling
       var legendDiv = d3.select(container.node().parentNode).select('div');
       var legendDiv = d3.select(container.node().parentNode).select('div');
       var legendSvg = legendDiv.select('svg').size() === 0 ? legendDiv.append('svg') : legendDiv.select('svg');
       var legendSvg = legendDiv.select('svg').size() === 0 ? legendDiv.append('svg') : legendDiv.select('svg');
@@ -251,10 +257,25 @@ nv.models.multiBarWithBrushChart = function() {
             .datum(data)
             .datum(data)
             .call(legend)
             .call(legend)
           .selectAll('text')
           .selectAll('text')
+          .text(function (d) {
+            return d.key && d.key.substring(0, 15)
+          })
           .append('title')
           .append('title')
           .text(function(d){
           .text(function(d){
             return d.key;
             return d.key;
           });
           });
+          legendG.selectAll('g.nv-series')
+          .append('text')
+          .text(function (d, i) {
+            return d.values[0].y;
+          })
+          .attr('dx', 125)
+          .attr('dy', '.32em')
+          .attr('text-anchor', 'end')
+          .append('title')
+          .text(function (d, i) {
+            return d.values[0].y;
+          })
         }
         }
         catch (e){}
         catch (e){}
       }
       }
@@ -516,7 +537,7 @@ nv.models.multiBarWithBrushChart = function() {
       });
       });
 
 
       dispatch.on('tooltipShow', function(e) {
       dispatch.on('tooltipShow', function(e) {
-        if (tooltips) showTooltip(e, that.parentNode)
+        showTooltip(e, that.parentNode)
       });
       });
 
 
       // Update chart from a state object passed to event handler
       // Update chart from a state object passed to event handler
@@ -646,6 +667,13 @@ nv.models.multiBarWithBrushChart = function() {
             return fGetNumericValue(getX(rect)) === fGetNumericValue(getX(d)) && d.series === rect.series;
             return fGetNumericValue(getX(rect)) === fGetNumericValue(getX(d)) && d.series === rect.series;
           });
           });
         });
         });
+        var mouse_x = d3v3.mouse(this)[0];
+        container.select('g.nv-mouseover line')
+        .attr('x1', mouse_x)
+        .attr('y1', 0)
+        .attr('x2', mouse_x)
+        .attr('y2', availableHeight);
+
         // If there's rectangle with the hover class that are not the target, remove the class and dispatch mouseout
         // If there's rectangle with the hover class that are not the target, remove the class and dispatch mouseout
         var others = container.selectAll('g.nv-wrap.nv-multiBarWithLegend rect.hover').filter(function(rect) {
         var others = container.selectAll('g.nv-wrap.nv-multiBarWithLegend rect.hover').filter(function(rect) {
           return !el || !el.some(function(d) {
           return !el || !el.some(function(d) {
@@ -862,8 +890,8 @@ nv.models.multiBarWithBrushChart = function() {
   };
   };
 
 
   chart.tooltipContent = function(_) {
   chart.tooltipContent = function(_) {
-    if (!arguments.length) return tooltip;
-    tooltip = _;
+    if (!arguments.length) return tooltipContent;
+    tooltipContent = _;
     return chart;
     return chart;
   };
   };