From 1d8bd32027a02a7fb2e986a4abed126c1d1b849a Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Tue, 22 Sep 2026 18:59:23 -0700 Subject: [PATCH 1/7] feat(bignumber): add an alignment control for Big Number charts Superset 5 centered the Big Number value and subheader; the Emotion CSS-in-JS migration hardcoded align-items: flex-start on the shared BigNumberViz component, and there's been no way back since (#37674). Adds a header_alignment control (Left/Center/Right, default Left to match current behavior) to both BigNumberTotal and BigNumberWithTrendline, threaded through transformProps into BigNumberVizProps. BigNumberViz applies it as align-items on the outer container and text-container, and text-align on each text line (metric name, kicker, header, subheader, subtitle), so multi-line wrapped text aligns internally too. Scoped to alignment only: doesn't touch axis/grid config, context menu wiring, conditional formatting, or aggregation logic. Co-Authored-By: Evan Rusackas Co-Authored-By: Claude Sonnet 5 --- .../BigNumberTotal/controlPanel.test.ts | 10 +++ .../BigNumber/BigNumberTotal/controlPanel.ts | 2 + .../BigNumberTotal/transformProps.test.ts | 2 + .../BigNumberTotal/transformProps.ts | 2 + .../src/BigNumber/BigNumberViz.test.tsx | 67 +++++++++++++++++++ .../src/BigNumber/BigNumberViz.tsx | 21 +++++- .../BigNumberWithTrendline/controlPanel.tsx | 2 + .../transformProps.test.ts | 2 + .../BigNumberWithTrendline/transformProps.ts | 2 + .../src/BigNumber/sharedControls.ts | 19 ++++++ .../src/BigNumber/types.ts | 4 ++ 11 files changed, 130 insertions(+), 3 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.test.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.test.ts index 7d8e74156d4d..a71d3520a486 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.test.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.test.ts @@ -72,6 +72,16 @@ describe('BigNumber Total Control Panel Config', () => { row.some((control: any) => control.name === 'conditional_formatting'), ); expect(conditionalFormattingRow).toBeTruthy(); + + // Check header_alignment control exists in one of the rows + const headerAlignmentRow = thirdSection.find(row => + row.some((control: any) => control.name === 'header_alignment'), + ); + expect(headerAlignmentRow).toBeTruthy(); + expect(headerAlignmentRow![0]).toMatchObject({ + name: 'header_alignment', + config: expect.objectContaining({ default: 'left' }), + }); }); test('should have y_axis_format override with correct label', () => { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts index d926f06de012..906b01e91c98 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts @@ -32,6 +32,7 @@ import { subtitleControl, showMetricNameControl, metricNameFontSizeWithVisibility, + headerAlignmentControl, } from '../sharedControls'; export default { @@ -124,6 +125,7 @@ export default { }, }, ], + [headerAlignmentControl], ], }, ], diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.test.ts index 00522b9d0a8d..54f5898c9492 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.test.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.test.ts @@ -54,6 +54,7 @@ describe('BigNumberTotal transformProps', () => { yAxisFormat: 'SMART_NUMBER', conditionalFormatting: [{ color: 'red', op: '>', value: 0 }], currencyFormat: { symbol: '$', symbolPosition: 'prefix' }, + headerAlignment: 'center', }; const baseDatasource = { @@ -86,6 +87,7 @@ describe('BigNumberTotal transformProps', () => { expect(result.subtitle).toBe(baseFormData.subheader); expect(result.onContextMenu).toBe(onContextMenu); expect(result.refs).toEqual({}); + expect(result.headerAlignment).toBe('center'); // headerFormatter should be set even if there's no data expect(typeof result.headerFormatter).toBe('function'); // colorThresholdFormatters fallback to empty array when getColorFormatters returns falsy diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts index 3c7c78ecc707..2d7df441c319 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts @@ -63,6 +63,7 @@ export default function transformProps( currencyFormat, subheader, subheaderFontSize, + headerAlignment, } = formData; const refs: Refs = {}; const { @@ -143,5 +144,6 @@ export default function transformProps( metricName: originalLabel, showMetricName, metricNameFontSize, + headerAlignment, }; } diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx index db8d4e50f9d2..506803f3f6bb 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx @@ -246,3 +246,70 @@ describe('BigNumberViz trendline context menu', () => { expect(onContextMenu).not.toHaveBeenCalled(); }); }); + +describe('BigNumberViz alignment', () => { + test('defaults to left alignment', () => { + const { container } = render( + , + ); + + const textContainer = container.querySelector('.text-container'); + expect(textContainer).toHaveStyle({ alignItems: 'flex-start' }); + const headerLine = container.querySelector('.header-line'); + expect(headerLine).toHaveStyle({ textAlign: 'left' }); + }); + + test('centers content when headerAlignment is "center"', () => { + const { container } = render( + , + ); + + const textContainer = container.querySelector('.text-container'); + expect(textContainer).toHaveStyle({ alignItems: 'center' }); + const headerLine = container.querySelector('.header-line'); + expect(headerLine).toHaveStyle({ textAlign: 'center' }); + }); + + test('right-aligns content when headerAlignment is "right"', () => { + const { container } = render( + , + ); + + const textContainer = container.querySelector('.text-container'); + expect(textContainer).toHaveStyle({ alignItems: 'flex-end' }); + const headerLine = container.querySelector('.header-line'); + expect(headerLine).toHaveStyle({ textAlign: 'right' }); + }); +}); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx index ea4e89cd0ee7..e16e7efc1497 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx @@ -28,12 +28,18 @@ import { } from '@superset-ui/core'; import { styled, useTheme } from '@apache-superset/core/theme'; import Echart from '../components/Echart'; -import { BigNumberVizProps } from './types'; +import { BigNumberVizProps, HeaderAlignment } from './types'; import { PROPORTION } from './constants'; import { EventHandlers } from '../types'; const defaultNumberFormatter = getNumberFormatter(); +const ALIGN_ITEMS: Record = { + left: 'flex-start', + center: 'center', + right: 'flex-end', +}; + function BigNumberVis({ className = '', headerFormatter = defaultNumberFormatter, @@ -47,9 +53,11 @@ function BigNumberVis({ subheader = '', subheaderFontSize = PROPORTION.SUBHEADER, subtitleFontSize = PROPORTION.SUBHEADER, + headerAlignment = 'left', ...props }: BigNumberVizProps) { const theme = useTheme(); + const alignItems = ALIGN_ITEMS[headerAlignment]; // Convert state to hooks const [elementsRendered, setElementsRendered] = useState(false); @@ -132,6 +140,7 @@ function BigNumberVis({ style={{ fontSize, height: 'auto', + textAlign: headerAlignment, }} > {text} @@ -170,6 +179,7 @@ function BigNumberVis({ style={{ fontSize, height: 'auto', + textAlign: headerAlignment, }} > {text} @@ -239,6 +249,7 @@ function BigNumberVis({ fontSize, height: 'auto', color: numberColor, + textAlign: headerAlignment, }} onContextMenu={handleContextMenu} > @@ -275,6 +286,7 @@ function BigNumberVis({ style={{ fontSize, height: maxHeight, + textAlign: headerAlignment, }} > {text} @@ -321,6 +333,7 @@ function BigNumberVis({ style={{ fontSize: `${fontSize}px`, height: maxHeight, + textAlign: headerAlignment, }} > {text} @@ -425,11 +438,12 @@ function BigNumberVis({ const overflow = shouldApplyOverflow(allTextHeight); return ( -
+
-
+
{renderFallbackWarning()} {renderMetricName((metricNameFontSize || 0) * height)} {renderKicker((kickerFontSize || 0) * height)} diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx index d9d5b85a1cc7..762fe6ad94ca 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx @@ -35,6 +35,7 @@ import { subtitleControl, showMetricNameControl, metricNameFontSizeWithVisibility, + headerAlignmentControl, } from '../sharedControls'; const config: ControlPanelConfig = { @@ -235,6 +236,7 @@ const config: ControlPanelConfig = { }, }, ], + [headerAlignmentControl], ], }, { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.test.ts index 6a9752d57b9a..8e7816994a94 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.test.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.test.ts @@ -113,6 +113,7 @@ describe('BigNumberWithTrendline transformProps', () => { compareSuffix: 'WoW', colorPicker: { r: 0, g: 0, b: 0 }, currencyFormat: { symbol: '$', symbolPosition: 'prefix' }, + headerAlignment: 'right', }; const baseDatasource = { @@ -141,6 +142,7 @@ describe('BigNumberWithTrendline transformProps', () => { ); expect(result.bigNumber).toBeNull(); expect(result.subtitle).toBe('subtitle message'); + expect(result.headerAlignment).toBe('right'); }); test('should calculate subheader as percent change with suffix', () => { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts index fa57d2a8b710..9b4a4640e74d 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts @@ -114,6 +114,7 @@ export default function transformProps( showXAxisMinMaxLabels = false, showYAxis = false, showYAxisMinMaxLabels = false, + headerAlignment, } = formData; const granularity = extractTimegrain(rawFormData); const { @@ -416,5 +417,6 @@ export default function transformProps( onContextMenu, xValueFormatter: formatTime, refs, + headerAlignment, }; } diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/sharedControls.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/sharedControls.ts index 5c7647fa576a..44c2f1d72671 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/sharedControls.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/sharedControls.ts @@ -113,3 +113,22 @@ export const metricNameFontSizeWithVisibility: CustomControlItem = { resetOnHide: false, }, }; + +export const headerAlignmentControl: CustomControlItem = { + name: 'header_alignment', + config: { + type: 'SelectControl', + label: t('Alignment'), + renderTrigger: true, + clearable: false, + default: 'left', + options: [ + { label: t('Left'), value: 'left' }, + { label: t('Center'), value: 'center' }, + { label: t('Right'), value: 'right' }, + ], + description: t( + 'Horizontal alignment of the metric value and supporting text', + ), + }, +}; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/types.ts index d466a1781c85..d069b79219ed 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/types.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/types.ts @@ -34,10 +34,13 @@ export interface BigNumberDatum { [key: string]: number | string | null; } +export type HeaderAlignment = 'left' | 'center' | 'right'; + export type BigNumberTotalFormData = QueryFormData & { metric?: QueryFormMetric; yAxisFormat?: string; forceTimestampFormatting?: boolean; + headerAlignment?: HeaderAlignment; }; export type BigNumberWithTrendlineFormData = BigNumberTotalFormData & { @@ -107,4 +110,5 @@ export type BigNumberVizProps = { formData?: BigNumberWithTrendlineFormData; refs: Refs; colorThresholdFormatters?: ColorFormatters; + headerAlignment?: HeaderAlignment; }; From af09e6d7d4e997ea35fea33d58e1c310f95249a3 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Wed, 23 Sep 2026 01:55:18 -0700 Subject: [PATCH 2/7] fix(bignumber): fix header alignment and regenerate pot header-line is a flex container, so text-align never affected the big number's own position (only justify-content does); fix by aligning via justify-content instead, and update the alignment tests to match. Also regenerate messages.pot/po catalogs to pick up the new alignment control strings and a pre-existing drift from master. Co-Authored-By: Evan Rusackas Co-Authored-By: Claude Sonnet 5 --- .../src/BigNumber/BigNumberViz.test.tsx | 6 +++--- .../plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx | 4 +++- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx index 506803f3f6bb..7f35926b30a2 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx @@ -266,7 +266,7 @@ describe('BigNumberViz alignment', () => { const textContainer = container.querySelector('.text-container'); expect(textContainer).toHaveStyle({ alignItems: 'flex-start' }); const headerLine = container.querySelector('.header-line'); - expect(headerLine).toHaveStyle({ textAlign: 'left' }); + expect(headerLine).toHaveStyle({ justifyContent: 'flex-start' }); }); test('centers content when headerAlignment is "center"', () => { @@ -288,7 +288,7 @@ describe('BigNumberViz alignment', () => { const textContainer = container.querySelector('.text-container'); expect(textContainer).toHaveStyle({ alignItems: 'center' }); const headerLine = container.querySelector('.header-line'); - expect(headerLine).toHaveStyle({ textAlign: 'center' }); + expect(headerLine).toHaveStyle({ justifyContent: 'center' }); }); test('right-aligns content when headerAlignment is "right"', () => { @@ -310,6 +310,6 @@ describe('BigNumberViz alignment', () => { const textContainer = container.querySelector('.text-container'); expect(textContainer).toHaveStyle({ alignItems: 'flex-end' }); const headerLine = container.querySelector('.header-line'); - expect(headerLine).toHaveStyle({ textAlign: 'right' }); + expect(headerLine).toHaveStyle({ justifyContent: 'flex-end' }); }); }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx index e16e7efc1497..c789209aeef0 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx @@ -246,10 +246,12 @@ function BigNumberVis({ style={{ display: 'flex', alignItems: 'center', + // header-line is always a flex container, so text-align has no + // effect on the number's position; justify-content does. + justifyContent: alignItems, fontSize, height: 'auto', color: numberColor, - textAlign: headerAlignment, }} onContextMenu={handleContextMenu} > From 0ebc288e50ae93884ddb54c4435a7c90a221bece Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Sun, 27 Sep 2026 09:56:58 -0700 Subject: [PATCH 3/7] refactor(bignumber): dedupe alignment test render calls Extracts a renderViz helper for the three headerAlignment test cases in BigNumberViz.test.tsx, per bito-code-review's suggestion, so the ~13-prop render call lives in one place instead of three. Co-Authored-By: Evan Rusackas Co-Authored-By: Claude Sonnet 5 --- .../src/BigNumber/BigNumberViz.test.tsx | 42 +++++-------------- 1 file changed, 10 insertions(+), 32 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx index 7f35926b30a2..6c9b325afac6 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx @@ -26,7 +26,7 @@ import { render, fireEvent } from '../../../../spec/helpers/testing-library'; import BigNumberVis from './BigNumberViz'; import Echart from '../components/Echart'; import { EventHandlers } from '../types'; -import { BigNumberWithTrendlineFormData } from './types'; +import { BigNumberWithTrendlineFormData, HeaderAlignment } from './types'; jest.mock('../components/Echart', () => ({ __esModule: true, @@ -248,8 +248,8 @@ describe('BigNumberViz trendline context menu', () => { }); describe('BigNumberViz alignment', () => { - test('defaults to left alignment', () => { - const { container } = render( + const renderViz = (headerAlignment?: HeaderAlignment) => + render( { subtitleFontSize={0.125} subtitle="" refs={{}} + headerAlignment={headerAlignment} />, - ); + ).container; + + test('defaults to left alignment', () => { + const container = renderViz(); const textContainer = container.querySelector('.text-container'); expect(textContainer).toHaveStyle({ alignItems: 'flex-start' }); @@ -270,20 +274,7 @@ describe('BigNumberViz alignment', () => { }); test('centers content when headerAlignment is "center"', () => { - const { container } = render( - , - ); + const container = renderViz('center'); const textContainer = container.querySelector('.text-container'); expect(textContainer).toHaveStyle({ alignItems: 'center' }); @@ -292,20 +283,7 @@ describe('BigNumberViz alignment', () => { }); test('right-aligns content when headerAlignment is "right"', () => { - const { container } = render( - , - ); + const container = renderViz('right'); const textContainer = container.querySelector('.text-container'); expect(textContainer).toHaveStyle({ alignItems: 'flex-end' }); From 3daa6ce6b60fa3a1d74b51e42c74aed4b8b8d96b Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 1 Oct 2026 00:37:12 -0700 Subject: [PATCH 4/7] test(bignumber): assert centered alignment survives trendline overflow Forces the text-container overflow path (block display) and confirms the header value and subheader stay centered via their own inline styles rather than the parent's disabled alignItems. Co-Authored-By: Evan Rusackas Co-Authored-By: Claude Sonnet 5 --- .../src/BigNumber/BigNumberViz.test.tsx | 65 ++++++++++++++++++- 1 file changed, 64 insertions(+), 1 deletion(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx index 6c9b325afac6..abca82f1e26d 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx @@ -22,7 +22,11 @@ import { getNumberFormatter, TimeFormatter, } from '@superset-ui/core'; -import { render, fireEvent } from '../../../../spec/helpers/testing-library'; +import { + render, + fireEvent, + waitFor, +} from '../../../../spec/helpers/testing-library'; import BigNumberVis from './BigNumberViz'; import Echart from '../components/Echart'; import { EventHandlers } from '../types'; @@ -290,4 +294,63 @@ describe('BigNumberViz alignment', () => { const headerLine = container.querySelector('.header-line'); expect(headerLine).toHaveStyle({ justifyContent: 'flex-end' }); }); + + test('keeps the value and subheader centered when the trendline layout overflows', async () => { + const offsetHeightDescriptor = Object.getOwnPropertyDescriptor( + HTMLElement.prototype, + 'offsetHeight', + ); + // Force shouldApplyOverflow to report an overflow, which switches + // .text-container from a flex to a block container. + Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { + configurable: true, + get: () => 1000, + }); + + try { + const { container } = render( + , + ); + + await waitFor(() => { + expect(container.querySelector('.text-container')).toHaveStyle({ + display: 'block', + }); + }); + + const headerLine = container.querySelector('.header-line'); + expect(headerLine).toHaveStyle({ justifyContent: 'center' }); + const subheaderLine = container.querySelector('.subheader-line'); + expect(subheaderLine).toHaveStyle({ textAlign: 'center' }); + } finally { + if (offsetHeightDescriptor) { + Object.defineProperty( + HTMLElement.prototype, + 'offsetHeight', + offsetHeightDescriptor, + ); + } else { + delete (HTMLElement.prototype as { offsetHeight?: number }) + .offsetHeight; + } + } + }); }); From e68230c9fc965ed49738c79e566c0848a48e21ff Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 1 Oct 2026 14:27:20 -0700 Subject: [PATCH 5/7] test(bignumber): assert outer chart alignment for plain and trendline layouts Co-Authored-By: Evan Rusackas Co-Authored-By: Claude Sonnet 5.5 --- .../src/BigNumber/BigNumberViz.test.tsx | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx index abca82f1e26d..01b7e40eb866 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx @@ -272,6 +272,7 @@ describe('BigNumberViz alignment', () => { const container = renderViz(); const textContainer = container.querySelector('.text-container'); + expect(container.firstElementChild).toHaveStyle({ alignItems: 'flex-start' }); expect(textContainer).toHaveStyle({ alignItems: 'flex-start' }); const headerLine = container.querySelector('.header-line'); expect(headerLine).toHaveStyle({ justifyContent: 'flex-start' }); @@ -281,6 +282,7 @@ describe('BigNumberViz alignment', () => { const container = renderViz('center'); const textContainer = container.querySelector('.text-container'); + expect(container.firstElementChild).toHaveStyle({ alignItems: 'center' }); expect(textContainer).toHaveStyle({ alignItems: 'center' }); const headerLine = container.querySelector('.header-line'); expect(headerLine).toHaveStyle({ justifyContent: 'center' }); @@ -290,11 +292,47 @@ describe('BigNumberViz alignment', () => { const container = renderViz('right'); const textContainer = container.querySelector('.text-container'); + expect(container.firstElementChild).toHaveStyle({ alignItems: 'flex-end' }); expect(textContainer).toHaveStyle({ alignItems: 'flex-end' }); const headerLine = container.querySelector('.header-line'); expect(headerLine).toHaveStyle({ justifyContent: 'flex-end' }); }); + test.each([ + ['center', 'center'], + ['right', 'flex-end'], + ] as const)( + 'aligns the outer chart and text container for "%s" with a trendline', + (headerAlignment, alignItems) => { + const { container } = render( + , + ); + + expect(container.firstElementChild).toHaveStyle({ alignItems }); + expect(container.querySelector('.text-container')).toHaveStyle({ + alignItems, + }); + }, + ); + test('keeps the value and subheader centered when the trendline layout overflows', async () => { const offsetHeightDescriptor = Object.getOwnPropertyDescriptor( HTMLElement.prototype, From d0b58dce8fda7b1bc41114e3158e54e61716558f Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 1 Oct 2026 17:56:40 -0700 Subject: [PATCH 6/7] style(bignumber): format alignment test Co-Authored-By: Evan Rusackas Co-Authored-By: Claude Sonnet 5.5 --- .../plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx index 01b7e40eb866..f5792af4d7bf 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.test.tsx @@ -272,7 +272,9 @@ describe('BigNumberViz alignment', () => { const container = renderViz(); const textContainer = container.querySelector('.text-container'); - expect(container.firstElementChild).toHaveStyle({ alignItems: 'flex-start' }); + expect(container.firstElementChild).toHaveStyle({ + alignItems: 'flex-start', + }); expect(textContainer).toHaveStyle({ alignItems: 'flex-start' }); const headerLine = container.querySelector('.header-line'); expect(headerLine).toHaveStyle({ justifyContent: 'flex-start' }); From 1d3166586f972a16d21de9c827d4206aca94fa71 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 2 Oct 2026 15:52:21 -0700 Subject: [PATCH 7/7] chore(i18n): add alignment control strings to messages.pot Co-Authored-By: Evan Rusackas Co-Authored-By: Claude Sonnet 5.5 --- superset/translations/messages.pot | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/superset/translations/messages.pot b/superset/translations/messages.pot index 8cbf1347e6b3..d20b7a13ad8d 100644 --- a/superset/translations/messages.pot +++ b/superset/translations/messages.pot @@ -1536,6 +1536,9 @@ msgstr "" msgid "Alerts & reports" msgstr "" +msgid "Alignment" +msgstr "" + msgid "Align +/-" msgstr "" @@ -7209,6 +7212,9 @@ msgstr "" msgid "Horizontal alignment" msgstr "" +msgid "Horizontal alignment of the metric value and supporting text" +msgstr "" + msgid "Host" msgstr ""