From ef32d4a5b4aa61b2ed51e5893e65bad920d5809c Mon Sep 17 00:00:00 2001
From: Paul Rosenzweig <paulrosenzweig@users.noreply.github.com>
Date: Fri, 14 Jun 2019 17:40:44 -0400
Subject: [PATCH] fix truncated histogram bars (#10133)
---
.../visualizations/lib/LineAreaBarRenderer.js | 17 ++++++++----
.../LineAreaBarRenderer.unit.spec.js | 26 +++++++++++++++++++
2 files changed, 38 insertions(+), 5 deletions(-)
diff --git a/frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js b/frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js
index a72b1bcd0dc..16606938098 100644
--- a/frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js
+++ b/frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js
@@ -138,13 +138,20 @@ function getXInterval({ settings, series }, xValues) {
}
function getXAxisProps(props, datas) {
- const xValues = getXValues(datas);
-
+ const rawXValues = getXValues(datas);
+ const isHistogram = isHistogramBar(props);
+ const xInterval = getXInterval(props, rawXValues);
+
+ // For histograms we add a fake x value one xInterval to the right
+ // This compensates for the barshifting we do align ticks
+ const xValues = isHistogram
+ ? [...rawXValues, Math.max(...rawXValues) + xInterval]
+ : rawXValues;
return {
- xValues,
+ isHistogramBar: isHistogram,
xDomain: d3.extent(xValues),
- xInterval: getXInterval(props, xValues),
- isHistogramBar: isHistogramBar(props),
+ xInterval,
+ xValues,
};
}
diff --git a/frontend/test/metabase/visualizations/components/LineAreaBarRenderer.unit.spec.js b/frontend/test/metabase/visualizations/components/LineAreaBarRenderer.unit.spec.js
index b5c8dbd1aa3..4b038d9a76b 100644
--- a/frontend/test/metabase/visualizations/components/LineAreaBarRenderer.unit.spec.js
+++ b/frontend/test/metabase/visualizations/components/LineAreaBarRenderer.unit.spec.js
@@ -239,6 +239,32 @@ describe("LineAreaBarRenderer", () => {
});
});
+ describe("histogram", () => {
+ it("should have one more tick than it has bars", () => {
+ // this is because each bar has a tick on either side
+ renderLineAreaBar(
+ element,
+ [
+ {
+ data: {
+ cols: [NumberColumn(), NumberColumn()],
+ rows: [[1, 1], [2, 2], [3, 1]],
+ },
+ card: {
+ display: "bar",
+ visualization_settings: {
+ "graph.x_axis.axis_enabled": true,
+ "graph.x_axis.scale": "histogram",
+ },
+ },
+ },
+ ],
+ {},
+ );
+ expect(qsa(".axis.x .tick").length).toBe(4);
+ });
+ });
+
// querySelector shortcut
const qs = selector => element.querySelector(selector);
--
GitLab