Bring back correct legend sizing afer PlotLegend refactor (#31582)

packages/grafana-ui/src/components/BarChart/BarChart.tsx

@@ -105,6 +105,8 @@ class UnthemedBarChart extends React.Component<BarChartProps, BarChartState> {
         config={config}
         onSeriesColorChange={onSeriesColorChange}
         onLegendClick={onLegendClick}
+        maxHeight="35%"
+        maxWidth="60%"
         {...legend}
       />
     );

packages/grafana-ui/src/components/GraphNG/GraphNG.tsx

@@ -165,6 +165,8 @@ class UnthemedGraphNG extends React.Component<GraphNGProps, GraphNGState> {
         config={config}
         onSeriesColorChange={onSeriesColorChange}
         onLegendClick={onLegendClick}
+        maxHeight="35%"
+        maxWidth="60%"
         {...legend}
       />
     );

packages/grafana-ui/src/components/VizLayout/VizLayout.tsx

@@ -94,9 +94,9 @@ interface VizSize {
  */
 export interface VizLayoutLegendProps {
   placement: LegendPlacement;
+  children: React.ReactNode;
   maxHeight?: string;
   maxWidth?: string;
-  children: React.ReactNode;
 }
 
 /**

packages/grafana-ui/src/components/uPlot/PlotLegend.tsx

@@ -3,14 +3,14 @@ import { DataFrame, DisplayValue, fieldReducers, reduceField } from '@grafana/da
 import { UPlotConfigBuilder } from './config/UPlotConfigBuilder';
 import { VizLegendItem, VizLegendOptions } from '../VizLegend/types';
 import { AxisPlacement } from './config';
-import { VizLayout } from '../VizLayout/VizLayout';
+import { VizLayout, VizLayoutLegendProps } from '../VizLayout/VizLayout';
 import { mapMouseEventToMode } from '../GraphNG/utils';
 import { VizLegend } from '../VizLegend/VizLegend';
 import { GraphNGLegendEvent } from '..';
 
 const defaultFormatter = (v: any) => (v == null ? '-' : v.toFixed(1));
 
-interface PlotLegendProps extends VizLegendOptions {
+interface PlotLegendProps extends VizLegendOptions, Omit<VizLayoutLegendProps, 'children'> {
   data: DataFrame[];
   config: UPlotConfigBuilder;
   onSeriesColorChange?: (label: string, color: string) => void;
@@ -22,7 +22,10 @@ export const PlotLegend: React.FC<PlotLegendProps> = ({
   config,
   onSeriesColorChange,
   onLegendClick,
-  ...legend
+  placement,
+  calcs,
+  displayMode,
+  ...vizLayoutLegendProps
 }) => {
   const onLegendLabelClick = useCallback(
     (legend: VizLegendItem, event: React.MouseEvent) => {
@@ -60,17 +63,17 @@ export const PlotLegend: React.FC<PlotLegendProps> = ({
         label: seriesConfig.fieldName,
         yAxis: axisPlacement === AxisPlacement.Left ? 1 : 2,
         getDisplayValues: () => {
-          if (!legend.calcs?.length) {
+          if (!calcs?.length) {
             return [];
           }
 
           const fmt = field.display ?? defaultFormatter;
           const fieldCalcs = reduceField({
             field,
-            reducers: legend.calcs,
+            reducers: calcs,
           });
 
-          return legend.calcs.map<DisplayValue>((reducer) => {
+          return calcs.map<DisplayValue>((reducer) => {
             return {
               ...fmt(fieldCalcs[reducer]),
               title: fieldReducers.get(reducer).name,
@@ -82,12 +85,12 @@ export const PlotLegend: React.FC<PlotLegendProps> = ({
     .filter((i) => i !== undefined) as VizLegendItem[];
 
   return (
-    <VizLayout.Legend placement={legend.placement} maxHeight="35%" maxWidth="60%">
+    <VizLayout.Legend placement={placement} {...vizLayoutLegendProps}>
       <VizLegend
         onLabelClick={onLegendLabelClick}
-        placement={legend.placement}
+        placement={placement}
         items={legendItems}
-        displayMode={legend.displayMode}
+        displayMode={displayMode}
         onSeriesColorChange={onSeriesColorChange}
       />
     </VizLayout.Legend>