Merge pull request #3486 from metabase/bar-chart-hovering-consistency

Make bar chart hover consistent with other charts

frontend/src/metabase/css/dashboard.css

@@ -331,9 +331,14 @@
   display: none;
 }
 
-.dc-chart rect.bar:hover {
+/* disable dc default behavior */
+.Card-outer .dc-chart rect.bar:hover {
   fill-opacity: 1;
 }
+/* highlight single series bar */
+.mute-0 .Card-outer .dc-chart rect.bar:hover {
+  opacity: 1;
+}
 
 .enable-dots .dc-tooltip circle.dot {
   r: 3px !important;
@@ -392,6 +397,12 @@
 .mute-3 svg > g > .chart-body .stack._3 .line,
 .mute-4 svg > g > .chart-body .stack._4 .line,
 .mute-5 svg > g > .chart-body .stack._5 .line,
+.mute-0 svg > g > .chart-body .stack._0 .bar,
+.mute-1 svg > g > .chart-body .stack._1 .bar,
+.mute-2 svg > g > .chart-body .stack._2 .bar,
+.mute-3 svg > g > .chart-body .stack._3 .bar,
+.mute-4 svg > g > .chart-body .stack._4 .bar,
+.mute-5 svg > g > .chart-body .stack._5 .bar,
 .mute-0 svg > g > .chart-body .dc-tooltip._0 .dot,
 .mute-1 svg > g > .chart-body .dc-tooltip._1 .dot,
 .mute-2 svg > g > .chart-body .dc-tooltip._2 .dot,

frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js

@@ -261,6 +261,8 @@ function applyChartTooltips(chart, series, onHoverChange) {
     chart.on("renderlet.tooltips", function(chart) {
         chart.selectAll(".bar, .dot, .area, .line, .bubble, g.pie-slice, g.features")
             .on("mousemove", function(d, i) {
+                const isSingleSeriesBar = this.classList.contains("bar") && series.length === 1;
+
                 let data;
                 if (Array.isArray(d.key)) { // scatter
                     data = d.key.map((value, index) => (
@@ -274,7 +276,8 @@ function applyChartTooltips(chart, series, onHoverChange) {
                 }
 
                 onHoverChange && onHoverChange({
-                    index: determineSeriesIndexFromElement(this),
+                    // for single series bar charts, fade the series and highlght the hovered element with CSS
+                    index: isSingleSeriesBar ? -1 : determineSeriesIndexFromElement(this),
                     element: this,
                     d: d,
                     data: data && _.uniq(data, (d) => d.col)