From e46b6273474b5d775b4b897f4705031b4217674a Mon Sep 17 00:00:00 2001
From: Emmad Usmani <emmadusmani@berkeley.edu>
Date: Tue, 1 Oct 2024 09:29:29 -0700
Subject: [PATCH] fix uncentered pie chart (#48179)
---
.../visualizations-charts/pie_chart.cy.spec.js | 11 +++++++++++
.../visualizations/components/ChartWithLegend.jsx | 1 +
.../components/ChartWithLegend.module.css | 10 +++-------
3 files changed, 15 insertions(+), 7 deletions(-)
diff --git a/e2e/test/scenarios/visualizations-charts/pie_chart.cy.spec.js b/e2e/test/scenarios/visualizations-charts/pie_chart.cy.spec.js
index 0429baa831f..0c3b6a25260 100644
--- a/e2e/test/scenarios/visualizations-charts/pie_chart.cy.spec.js
+++ b/e2e/test/scenarios/visualizations-charts/pie_chart.cy.spec.js
@@ -41,6 +41,17 @@ describe("scenarios > visualizations > pie chart", () => {
ensurePieChartRendered(["Doohickey", "Gadget", "Gizmo", "Widget"], 200);
+ // chart should be centered (#48123)
+ cy.findByTestId("chart-legend").then(([legend]) => {
+ const legendWidth = legend.getBoundingClientRect().width;
+
+ cy.findByTestId("chart-legend-spacer").then(([spacer]) => {
+ const spacerWidth = spacer.getBoundingClientRect().width;
+
+ expect(legendWidth).to.be.equal(spacerWidth);
+ });
+ });
+
cy.log("#35244");
cy.findByLabelText("Switch to data").click();
tableHeaderClick("Count");
diff --git a/frontend/src/metabase/visualizations/components/ChartWithLegend.jsx b/frontend/src/metabase/visualizations/components/ChartWithLegend.jsx
index fea67f67aa2..f655c4a058a 100644
--- a/frontend/src/metabase/visualizations/components/ChartWithLegend.jsx
+++ b/frontend/src/metabase/visualizations/components/ChartWithLegend.jsx
@@ -146,6 +146,7 @@ class ChartWithLegend extends Component {
className={cx(styles.LegendSpacer)}
// don't center the chart on dashboards
style={isDashboard ? { flexBasis: 0 } : {}}
+ data-testid="chart-legend-spacer"
>
{legend}
</div>
diff --git a/frontend/src/metabase/visualizations/components/ChartWithLegend.module.css b/frontend/src/metabase/visualizations/components/ChartWithLegend.module.css
index 01f56d4948e..01ddbd3b1a9 100644
--- a/frontend/src/metabase/visualizations/components/ChartWithLegend.module.css
+++ b/frontend/src/metabase/visualizations/components/ChartWithLegend.module.css
@@ -13,8 +13,11 @@
.ChartWithLegend .LegendSpacer,
.ChartWithLegend .LegendWrapper {
+ display: flex;
+ justify-content: center;
flex-basis: auto;
flex-grow: 1;
+ flex-shrink: 1;
/* allow legend and spacer to shrink */
min-width: 0;
@@ -23,13 +26,6 @@
.ChartWithLegend .LegendSpacer {
visibility: hidden;
- flex-shrink: 10; /* shrink the spacer much faster than the wrapper */
-}
-
-.ChartWithLegend .LegendWrapper {
- display: flex;
- justify-content: center;
- flex-shrink: 1;
}
.ChartWithLegend .Chart {
--
GitLab