Fixes issue w3c#119

shikhar-scs · Aug 19, 2014 · c5ff49d · c5ff49d
1 parent e55b748
commit c5ff49d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 14 deletions.
diff --git a/css/metrics-graphics-darkness.css b/css/metrics-graphics-darkness.css
@@ -29,10 +29,6 @@ a:visited {
     fill: #f7f7f7;
 }
 
-.bar rect {
-    fill: #ffd300;
-}
-
 .baselines line {
     stroke: #fff;
 }
@@ -81,6 +77,14 @@ h2.chart_title span {
     stroke: #ccc;
 }
 
+.histogram .bar rect {
+    fill: #d8b307;
+}
+
+.histogram .bar rect.active {
+    fill: #b3960f;
+}
+
 .histogram .bar text {
     fill: #fff;
 }

diff --git a/css/metrics-graphics.css b/css/metrics-graphics.css
@@ -57,11 +57,6 @@ a.active {
     stroke: none;
 }
 
-.bar rect {
-    shape-rendering: crispEdges;
-    fill: #9d9dff;
-}
-
 body {
     background-color: #fff;
     color: #000;
@@ -149,6 +144,15 @@ h2.chart_title .fa {
     stroke: #ccc;
 }
 
+.histogram .bar rect {
+    shape-rendering: crispEdges;
+    fill: #b6b6fc;
+}
+
+.histogram .bar rect.active {
+    fill: #9e9efc;
+}
+
 .light-bg {
     background-color: #f1f1f1;
 }

diff --git a/js/metrics-graphics.js b/js/metrics-graphics.js
@@ -1283,8 +1283,8 @@ charts.histogram = function(args) {
             }
 
             //highlight active bar
-            $(args.target + ' svg .bar :eq(' + i + ')')
-                .css('opacity', 0.8);
+            d3.selectAll($(args.target + ' svg .bar :eq(' + i + ')'))
+                .classed('active', true);
 
             //update rollover text
             if (args.show_rollover_text) {
@@ -1316,9 +1316,9 @@ charts.histogram = function(args) {
 
         return function(d, i) {
             //reset all bars' opacity
-            $('.histogram .bar rect')
-                .css('opacity', 1);
-
+            d3.selectAll($(args.target + ' svg .bar :eq(' + i + ')'))
+                .classed('active', false);
+            
             //reset active data point text
             svg.select('.active_datapoint')
                 .text('');