From a6693ba62fb3c3d8fb02349e92ce454226bf9417 Mon Sep 17 00:00:00 2001
From: Ivan Babrou <github@ivan.computer>
Date: Tue, 31 May 2022 10:16:37 -0700
Subject: [PATCH] TimeSeries: Add an option to set legend width (#49126)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add an option to set legend width

* Add width to the cue file

* Use legendStyle

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>
---
 packages/grafana-schema/src/schema/mudball.cue           | 1 +
 packages/grafana-schema/src/schema/mudball.gen.ts        | 1 +
 .../grafana-ui/src/components/VizLayout/VizLayout.tsx    | 6 ++++++
 packages/grafana-ui/src/options/builder/legend.tsx       | 9 +++++++++
 4 files changed, 17 insertions(+)

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<VizLegendOptions> = {
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<T extends OptionsWithLegend>(
         ],
       },
       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) {