From e1100a4c35fc232fb022f572070c9de8ac9010bb Mon Sep 17 00:00:00 2001 From: Paul Marbach Date: Tue, 13 Jan 2026 16:18:30 -0500 Subject: [PATCH] Legends: Revert scrolled truncated legend for now (#116219) Legends: Revert scrolled truncated legend for now (#116217) * Revert "PieChart: Fix right-oriented legends (#116084)" This reverts commit 0c8c886930f31f805b4ee2f85e082cc0f5b5014e. * Revert "TimeSeries: Fix truncated label text in legend table mode (#115647)" This reverts commit f91efcfe2c8f6e6078d64118e3fd1332f9c12873. --- .../panel_test_piechart.v42.json | 26 +--- .../panel-piechart/panel_test_piechart.json | 26 +--- .../VizLegend/VizLegendTable.test.tsx | 78 ------------ .../VizLegend/VizLegendTableItem.test.tsx | 112 ------------------ .../VizLegend/VizLegendTableItem.tsx | 65 ++++------ 5 files changed, 30 insertions(+), 277 deletions(-) delete mode 100644 packages/grafana-ui/src/components/VizLegend/VizLegendTable.test.tsx delete mode 100644 packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.test.tsx diff --git a/apps/dashboard/pkg/migration/testdata/dev-dashboards-output/panel-piechart/panel_test_piechart.v42.json b/apps/dashboard/pkg/migration/testdata/dev-dashboards-output/panel-piechart/panel_test_piechart.v42.json index 5b07f246ae3..f705124be5b 100644 --- a/apps/dashboard/pkg/migration/testdata/dev-dashboards-output/panel-piechart/panel_test_piechart.v42.json +++ b/apps/dashboard/pkg/migration/testdata/dev-dashboards-output/panel-piechart/panel_test_piechart.v42.json @@ -290,7 +290,7 @@ ], "legend": { "displayMode": "table", - "placement": "right", + "placement": "bottom", "showLegend": true, "values": [ "percent" @@ -304,7 +304,7 @@ "fields": "", "values": false }, - "showLegend": true, + "showLegend": false, "strokeWidth": 1, "text": {} }, @@ -323,15 +323,6 @@ } ], "title": "Percent", - "transformations": [ - { - "id": "renameByRegex", - "options": { - "regex": "^Backend-(.*)$", - "renamePattern": "b-$1" - } - } - ], "type": "piechart" }, { @@ -375,7 +366,7 @@ ], "legend": { "displayMode": "table", - "placement": "right", + "placement": "bottom", "showLegend": true, "values": [ "value" @@ -389,7 +380,7 @@ "fields": "", "values": false }, - "showLegend": true, + "showLegend": false, "strokeWidth": 1, "text": {} }, @@ -408,15 +399,6 @@ } ], "title": "Value", - "transformations": [ - { - "id": "renameByRegex", - "options": { - "regex": "(.*)", - "renamePattern": "$1-how-much-wood-could-a-woodchuck-chuck-if-a-woodchuck-could-chuck-wood" - } - } - ], "type": "piechart" }, { diff --git a/devenv/dev-dashboards/panel-piechart/panel_test_piechart.json b/devenv/dev-dashboards/panel-piechart/panel_test_piechart.json index ac11fd803b9..4333993ea8e 100644 --- a/devenv/dev-dashboards/panel-piechart/panel_test_piechart.json +++ b/devenv/dev-dashboards/panel-piechart/panel_test_piechart.json @@ -248,7 +248,7 @@ "legend": { "values": ["percent"], "displayMode": "table", - "placement": "right" + "placement": "bottom" }, "pieType": "pie", "reduceOptions": { @@ -256,7 +256,7 @@ "fields": "", "values": false }, - "showLegend": true, + "showLegend": false, "strokeWidth": 1, "text": {} }, @@ -272,15 +272,6 @@ "timeFrom": null, "timeShift": null, "title": "Percent", - "transformations": [ - { - "id": "renameByRegex", - "options": { - "regex": "^Backend-(.*)$", - "renamePattern": "b-$1" - } - } - ], "type": "piechart" }, { @@ -320,7 +311,7 @@ "legend": { "values": ["value"], "displayMode": "table", - "placement": "right" + "placement": "bottom" }, "pieType": "pie", "reduceOptions": { @@ -328,7 +319,7 @@ "fields": "", "values": false }, - "showLegend": true, + "showLegend": false, "strokeWidth": 1, "text": {} }, @@ -344,15 +335,6 @@ "timeFrom": null, "timeShift": null, "title": "Value", - "transformations": [ - { - "id": "renameByRegex", - "options": { - "regex": "(.*)", - "renamePattern": "$1-how-much-wood-could-a-woodchuck-chuck-if-a-woodchuck-could-chuck-wood" - } - } - ], "type": "piechart" }, { diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTable.test.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTable.test.tsx deleted file mode 100644 index 131133bcdfb..00000000000 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendTable.test.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { render, screen } from '@testing-library/react'; - -import { VizLegendTable } from './VizLegendTable'; -import { VizLegendItem } from './types'; - -describe('VizLegendTable', () => { - const mockItems: VizLegendItem[] = [ - { label: 'Series 1', color: 'red', yAxis: 1 }, - { label: 'Series 2', color: 'blue', yAxis: 1 }, - { label: 'Series 3', color: 'green', yAxis: 1 }, - ]; - - it('renders without crashing', () => { - const { container } = render(); - expect(container.querySelector('table')).toBeInTheDocument(); - }); - - it('renders all items', () => { - render(); - expect(screen.getByText('Series 1')).toBeInTheDocument(); - expect(screen.getByText('Series 2')).toBeInTheDocument(); - expect(screen.getByText('Series 3')).toBeInTheDocument(); - }); - - it('renders table headers when items have display values', () => { - const itemsWithStats: VizLegendItem[] = [ - { - label: 'Series 1', - color: 'red', - yAxis: 1, - getDisplayValues: () => [ - { numeric: 100, text: '100', title: 'Max' }, - { numeric: 50, text: '50', title: 'Min' }, - ], - }, - ]; - render(); - expect(screen.getByText('Max')).toBeInTheDocument(); - expect(screen.getByText('Min')).toBeInTheDocument(); - }); - - it('renders sort icon when sorted', () => { - const { container } = render( - - ); - expect(container.querySelector('svg')).toBeInTheDocument(); - }); - - it('calls onToggleSort when header is clicked', () => { - const onToggleSort = jest.fn(); - render(); - const header = screen.getByText('Name'); - header.click(); - expect(onToggleSort).toHaveBeenCalledWith('Name'); - }); - - it('does not call onToggleSort when not sortable', () => { - const onToggleSort = jest.fn(); - render(); - const header = screen.getByText('Name'); - header.click(); - expect(onToggleSort).not.toHaveBeenCalled(); - }); - - it('renders with long labels', () => { - const itemsWithLongLabels: VizLegendItem[] = [ - { - label: 'This is a very long series name that should be scrollable within its table cell', - color: 'red', - yAxis: 1, - }, - ]; - render(); - expect( - screen.getByText('This is a very long series name that should be scrollable within its table cell') - ).toBeInTheDocument(); - }); -}); diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.test.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.test.tsx deleted file mode 100644 index 4ca95aa395c..00000000000 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.test.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { render, screen } from '@testing-library/react'; - -import { LegendTableItem } from './VizLegendTableItem'; -import { VizLegendItem } from './types'; - -describe('LegendTableItem', () => { - const mockItem: VizLegendItem = { - label: 'Series 1', - color: 'red', - yAxis: 1, - }; - - it('renders without crashing', () => { - const { container } = render( - - - - -
- ); - expect(container.querySelector('tr')).toBeInTheDocument(); - }); - - it('renders label text', () => { - render( - - - - -
- ); - expect(screen.getByText('Series 1')).toBeInTheDocument(); - }); - - it('renders with long label text', () => { - const longLabelItem: VizLegendItem = { - ...mockItem, - label: 'This is a very long series name that should be scrollable in the table cell', - }; - render( - - - - -
- ); - expect( - screen.getByText('This is a very long series name that should be scrollable in the table cell') - ).toBeInTheDocument(); - }); - - it('renders stat values when provided', () => { - const itemWithStats: VizLegendItem = { - ...mockItem, - getDisplayValues: () => [ - { numeric: 100, text: '100', title: 'Max' }, - { numeric: 50, text: '50', title: 'Min' }, - ], - }; - render( - - - - -
- ); - expect(screen.getByText('100')).toBeInTheDocument(); - expect(screen.getByText('50')).toBeInTheDocument(); - }); - - it('renders right y-axis indicator when yAxis is 2', () => { - const rightAxisItem: VizLegendItem = { - ...mockItem, - yAxis: 2, - }; - render( - - - - -
- ); - expect(screen.getByText('(right y-axis)')).toBeInTheDocument(); - }); - - it('calls onLabelClick when label is clicked', () => { - const onLabelClick = jest.fn(); - render( - - - - -
- ); - const button = screen.getByRole('button'); - button.click(); - expect(onLabelClick).toHaveBeenCalledWith(mockItem, expect.any(Object)); - }); - - it('does not call onClick when readonly', () => { - const onLabelClick = jest.fn(); - render( - - - - -
- ); - const button = screen.getByRole('button'); - expect(button).toBeDisabled(); - }); -}); diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx index 6de77fd660b..335cf4309e9 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx @@ -69,7 +69,7 @@ export const LegendTableItem = ({ return ( - + -
- -
+ {item.getDisplayValues && @@ -130,28 +128,6 @@ const getStyles = (theme: GrafanaTheme2) => { background: rowHoverBg, }, }), - labelCell: css({ - label: 'LegendLabelCell', - maxWidth: 0, - width: '100%', - minWidth: theme.spacing(16), - }), - labelCellInner: css({ - label: 'LegendLabelCellInner', - display: 'block', - flex: 1, - minWidth: 0, - overflowX: 'auto', - overflowY: 'hidden', - paddingRight: theme.spacing(3), - scrollbarWidth: 'none', - msOverflowStyle: 'none', - maskImage: `linear-gradient(to right, black calc(100% - ${theme.spacing(3)}), transparent 100%)`, - WebkitMaskImage: `linear-gradient(to right, black calc(100% - ${theme.spacing(3)}), transparent 100%)`, - '&::-webkit-scrollbar': { - display: 'none', - }, - }), label: css({ label: 'LegendLabel', whiteSpace: 'nowrap', @@ -159,6 +135,9 @@ const getStyles = (theme: GrafanaTheme2) => { border: 'none', fontSize: 'inherit', padding: 0, + maxWidth: '600px', + textOverflow: 'ellipsis', + overflow: 'hidden', userSelect: 'text', }), labelDisabled: css({