diff --git a/packages/grafana-schema/src/schema/mudball.cue b/packages/grafana-schema/src/schema/mudball.cue index 6031fb31c05..7d62ba661df 100644 --- a/packages/grafana-schema/src/schema/mudball.cue +++ b/packages/grafana-schema/src/schema/mudball.cue @@ -229,6 +229,7 @@ VizLegendOptions: { isVisible?: bool sortBy?: string sortDesc?: bool + width?: number calcs: [...string] } @cuetsy(kind="interface") diff --git a/packages/grafana-schema/src/schema/mudball.gen.ts b/packages/grafana-schema/src/schema/mudball.gen.ts index c77a9687d3b..95f51678386 100644 --- a/packages/grafana-schema/src/schema/mudball.gen.ts +++ b/packages/grafana-schema/src/schema/mudball.gen.ts @@ -276,6 +276,7 @@ export interface VizLegendOptions { placement: LegendPlacement; sortBy?: string; sortDesc?: boolean; + width?: number; } export const defaultVizLegendOptions: Partial = { diff --git a/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx b/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx index 3f91557fc78..bae52e9001f 100644 --- a/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx +++ b/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx @@ -68,6 +68,11 @@ export const VizLayout: VizLayoutComponentType = ({ width, height, legend, child if (legendMeasure) { size = { width: width - legendMeasure.width, height }; } + + if (legend.props.width) { + legendStyle.width = legend.props.width; + size = { width: width - legend.props.width, height }; + } break; } @@ -115,6 +120,7 @@ export interface VizLayoutLegendProps { children: React.ReactNode; maxHeight?: string; maxWidth?: string; + width?: number; } /** diff --git a/packages/grafana-ui/src/options/builder/legend.tsx b/packages/grafana-ui/src/options/builder/legend.tsx index c7cad82c20b..ef0d282eb07 100644 --- a/packages/grafana-ui/src/options/builder/legend.tsx +++ b/packages/grafana-ui/src/options/builder/legend.tsx @@ -36,6 +36,15 @@ export function addLegendOptions( ], }, showIf: (c) => c.legend.displayMode !== LegendDisplayMode.Hidden, + }) + .addNumberInput({ + path: 'legend.width', + name: 'Width', + category: ['Legend'], + settings: { + placeholder: 'Auto', + }, + showIf: (c) => c.legend.displayMode !== LegendDisplayMode.Hidden && c.legend.placement === 'right', }); if (includeLegendCalcs) {