Browse Source

HUE-2129 [search] Show selected bar on bar charts

Added dashed borded to the selected bars
Enrico Berti 11 years ago
parent
commit
916722c

+ 10 - 0
apps/search/static/css/nv.d3.css

@@ -27,3 +27,13 @@ Overrides nvd3 classes
 .nvd3 .nv-legend .disabled rect {
 .nvd3 .nv-legend .disabled rect {
   fill-opacity: 0;
   fill-opacity: 0;
 }
 }
+
+.nvd3 .selected {
+  stroke-width: 2!important;
+  stroke-dasharray: 5;
+  stroke-opacity: 1!important;
+}
+
+.nvd3 .selected > rect {
+  stroke-opacity: 1!important;
+}

+ 6 - 0
apps/search/static/js/charts.ko.js

@@ -361,6 +361,12 @@ function barChart(element, options, isTimeline) {
           }
           }
         }).call(_chart);
         }).call(_chart);
 
 
+    $.each(options.fqs(), function(cnt, item){
+      if (item.field() == options.field){
+        _chart.selectBars(item.filter());
+      }
+    });
+
     nv.utils.windowResize(_chart.update);
     nv.utils.windowResize(_chart.update);
 
 
     return _chart;
     return _chart;

+ 1 - 4
apps/search/static/js/nv.d3.growingDiscreteBar.js

@@ -141,9 +141,8 @@ nv.models.growingDiscreteBar = function() {
       selectBars = function(selected) {
       selectBars = function(selected) {
         $(selected).each(function(cnt, item){
         $(selected).each(function(cnt, item){
           bars.each(function(d, i) {
           bars.each(function(d, i) {
-            if (d.data.obj.value == item) {
+            if (d.x == item) {
               d3.select(this).classed('selected', true);
               d3.select(this).classed('selected', true);
-              d3.select(this).select("rect").transition().duration(100).attr('y', -5);
             }
             }
           });
           });
         });
         });
@@ -156,7 +155,6 @@ nv.models.growingDiscreteBar = function() {
           })
           })
           .on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here
           .on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here
             d3.select(this).classed('hover', true);
             d3.select(this).classed('hover', true);
-            //d3.select(this).select("rect").transition().duration(100).attr('y', -5);
             dispatch.elementMouseover({
             dispatch.elementMouseover({
               value: getY(d,i),
               value: getY(d,i),
               point: d,
               point: d,
@@ -169,7 +167,6 @@ nv.models.growingDiscreteBar = function() {
           })
           })
           .on('mouseout', function(d,i) {
           .on('mouseout', function(d,i) {
             d3.select(this).classed('hover', false);
             d3.select(this).classed('hover', false);
-            d3.select(this).select("rect").transition().duration(100).attr('y', 0);
             dispatch.elementMouseout({
             dispatch.elementMouseout({
               value: getY(d,i),
               value: getY(d,i),
               point: d,
               point: d,

+ 9 - 15
apps/search/static/js/nv.d3.growingMultiBar.js

@@ -208,9 +208,15 @@ nv.models.growingMultiBar = function() {
       selectBars = function(selected) {
       selectBars = function(selected) {
         $(selected).each(function(cnt, item){
         $(selected).each(function(cnt, item){
           bars.each(function(d, i) {
           bars.each(function(d, i) {
-            if (d.data.obj.value == item) {
-              d3.select(this).classed('selected', true);
-              d3.select(this).transition().duration(100).attr('y', -5);
+            if (d.x instanceof Date){
+              if (moment(d.x).utc().format("YYYY-MM-DD[T]HH:mm:ss[Z]") == item) {
+                d3.select(this).classed('selected', true);
+              }
+            }
+            else {
+              if (d.x == item) {
+                d3.select(this).classed('selected', true);
+              }
             }
             }
           });
           });
         });
         });
@@ -233,12 +239,6 @@ nv.models.growingMultiBar = function() {
       barsEnter
       barsEnter
           .on('mouseover', function(d,i) {
           .on('mouseover', function(d,i) {
             d3.select(this).classed('hover', true);
             d3.select(this).classed('hover', true);
-//            if (stacked){
-//              d3.select(this).transition().duration(100).attr('y', y((stacked ? d.y1 : 0)) - 5);
-//            }
-//            else {
-//              d3.select(this).transition().duration(100).attr('y', y(getY(d,i)) - 5);
-//            }
             dispatch.elementMouseover({
             dispatch.elementMouseover({
               value: getY(d,i),
               value: getY(d,i),
               point: d,
               point: d,
@@ -251,12 +251,6 @@ nv.models.growingMultiBar = function() {
           })
           })
           .on('mouseout', function(d,i) {
           .on('mouseout', function(d,i) {
             d3.select(this).classed('hover', false);
             d3.select(this).classed('hover', false);
-            if (stacked){
-              d3.select(this).transition().duration(100).attr('y', y((stacked ? d.y1 : 0)));
-            }
-            else {
-              d3.select(this).transition().duration(100).attr('y', y(getY(d,i)));
-            }
             dispatch.elementMouseout({
             dispatch.elementMouseout({
               value: getY(d,i),
               value: getY(d,i),
               point: d,
               point: d,

+ 9 - 0
apps/search/static/js/nv.d3.multiBarWithBrushChart.js

@@ -66,6 +66,7 @@ nv.models.multiBarWithBrushChart = function() {
     , onSelectRange = null
     , onSelectRange = null
     , onStateChange = null
     , onStateChange = null
     , onChartUpdate = null
     , onChartUpdate = null
+    , selectBars = null
     ;
     ;
 
 
   multibar
   multibar
@@ -258,6 +259,8 @@ nv.models.multiBarWithBrushChart = function() {
           return d.color || color(d, i);
           return d.color || color(d, i);
         }).filter(function(d,i) { return !data[i].disabled }))
         }).filter(function(d,i) { return !data[i].disabled }))
 
 
+      selectBars = multibar.selectBars;
+
 
 
       var dataBars = data.filter(function(d) { return !d.disabled && d.bar });
       var dataBars = data.filter(function(d) { return !d.disabled && d.bar });
       var barsWrap = g.select('.nv-barsWrap')
       var barsWrap = g.select('.nv-barsWrap')
@@ -664,6 +667,12 @@ nv.models.multiBarWithBrushChart = function() {
     return chart;
     return chart;
   };
   };
 
 
+  chart.selectBars = function(args) {
+    if (!arguments.length) return selectBars;
+    selectBars(args);
+    return chart;
+  };
+
 
 
   //============================================================
   //============================================================