PieChart: Fix right-oriented legends (#116084 ) (#116159 )

* chore(gdev-dashboard): reproduce CSS layout bug in a panel * fix(table-legend): tweak CSS for right oriented table legend in piechart * chore(gdev-dashboard): update migrated dashboard file to match Co-authored-by: Jesse David Peterson <jesdavpet@users.noreply.github.com>
2026-01-13 07:24:10 +08:00 · 2026-01-12 22:24:24 +01:00
4 changed files with 46 additions and 8 deletions
--- 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": "bottom",
+          "placement": "right",
          "showLegend": true,
          "values": [
            "percent"
@@ -304,7 +304,7 @@
          "fields": "",
          "values": false
        },
-        "showLegend": false,
+        "showLegend": true,
        "strokeWidth": 1,
        "text": {}
      },
@@ -323,6 +323,15 @@
        }
      ],
      "title": "Percent",
+      "transformations": [
+        {
+          "id": "renameByRegex",
+          "options": {
+            "regex": "^Backend-(.*)$",
+            "renamePattern": "b-$1"
+          }
+        }
+      ],
      "type": "piechart"
    },
    {
@@ -366,7 +375,7 @@
        ],
        "legend": {
          "displayMode": "table",
-          "placement": "bottom",
+          "placement": "right",
          "showLegend": true,
          "values": [
            "value"
@@ -380,7 +389,7 @@
          "fields": "",
          "values": false
        },
-        "showLegend": false,
+        "showLegend": true,
        "strokeWidth": 1,
        "text": {}
      },
@@ -399,6 +408,15 @@
        }
      ],
      "title": "Value",
+      "transformations": [
+        {
+          "id": "renameByRegex",
+          "options": {
+            "regex": "(.*)",
+            "renamePattern": "$1-how-much-wood-could-a-woodchuck-chuck-if-a-woodchuck-could-chuck-wood"
+          }
+        }
+      ],
      "type": "piechart"
    },
    {
--- 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": "bottom"
+          "placement": "right"
        },
        "pieType": "pie",
        "reduceOptions": {
@@ -256,7 +256,7 @@
          "fields": "",
          "values": false
        },
-        "showLegend": false,
+        "showLegend": true,
        "strokeWidth": 1,
        "text": {}
      },
@@ -272,6 +272,15 @@
      "timeFrom": null,
      "timeShift": null,
      "title": "Percent",
+      "transformations": [
+        {
+          "id": "renameByRegex",
+          "options": {
+            "regex": "^Backend-(.*)$",
+            "renamePattern": "b-$1"
+          }
+        }
+      ],
      "type": "piechart"
    },
    {
@@ -311,7 +320,7 @@
        "legend": {
          "values": ["value"],
          "displayMode": "table",
-          "placement": "bottom"
+          "placement": "right"
        },
        "pieType": "pie",
        "reduceOptions": {
@@ -319,7 +328,7 @@
          "fields": "",
          "values": false
        },
-        "showLegend": false,
+        "showLegend": true,
        "strokeWidth": 1,
        "text": {}
      },
@@ -335,6 +344,15 @@
      "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"
    },
    {
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx
+++ b/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx
@@ -119,6 +119,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
  table: css({
    width: '100%',
    'th:first-child': {
+      width: '100%',
      borderBottom: `1px solid ${theme.colors.border.weak}`,
    },
  }),
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx
+++ b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx
@@ -134,6 +134,7 @@ const getStyles = (theme: GrafanaTheme2) => {
      label: 'LegendLabelCell',
      maxWidth: 0,
      width: '100%',
+      minWidth: theme.spacing(16),
    }),
    labelCellInner: css({
      label: 'LegendLabelCellInner',