From ef8b4ba0130343f6a6b8726c022fab6fcf0ab656 Mon Sep 17 00:00:00 2001
From: Tom Robinson <tlrobinson@gmail.com>
Date: Sat, 8 Oct 2016 13:56:09 -0700
Subject: [PATCH] Make bar chart hover consistent with other charts. Resolves
#2751
---
frontend/src/metabase/css/dashboard.css | 13 ++++++++++++-
.../visualizations/lib/LineAreaBarRenderer.js | 5 ++++-
2 files changed, 16 insertions(+), 2 deletions(-)
diff --git a/frontend/src/metabase/css/dashboard.css b/frontend/src/metabase/css/dashboard.css
index 560e4ef7d5f..4c26d6f34bd 100644
--- a/frontend/src/metabase/css/dashboard.css
+++ b/frontend/src/metabase/css/dashboard.css
@@ -331,8 +331,13 @@
display: none;
}
+/* disable dc default behavior */
.dc-chart rect.bar:hover {
- fill-opacity: 1;
+ fill-opacity: 1 !important;
+}
+/* highlight single series bar */
+.mute-0 .dc-chart rect.bar:hover {
+ opacity: 1 !important;
}
.enable-dots .dc-tooltip circle.dot {
@@ -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,
diff --git a/frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js b/frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js
index 14ac6bf4aef..1fcdd1497b1 100644
--- a/frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js
+++ b/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)
--
GitLab