Merge pull request #14859 from grafana/fix/gauge-sizing

Fixed Gauge being cropped when resizing panel

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -19,6 +19,8 @@ import { DashboardModel } from '../dashboard_model';
 import { PanelPlugin } from 'app/types';
 import { TimeRange } from '@grafana/ui';
 
+import variables from 'sass/_variables.scss';
+
 export interface Props {
   panel: PanelModel;
   dashboard: DashboardModel;
@@ -122,8 +124,8 @@ export class PanelChrome extends PureComponent<Props, State> {
                         timeSeries={timeSeries}
                         timeRange={timeRange}
                         options={panel.getOptions(plugin.exports.PanelDefaults)}
-                        width={width}
-                        height={height - PANEL_HEADER_HEIGHT}
+                        width={width - 2 * variables.panelHorizontalPadding }
+                        height={height - PANEL_HEADER_HEIGHT - variables.panelVerticalPadding}
                         renderCounter={renderCounter}
                       />
                     </div>

public/app/plugins/panel/gauge/GaugePanel.tsx

@@ -15,6 +15,13 @@ export class GaugePanel extends PureComponent<Props> {
       nullValueMode: NullValueMode.Ignore,
     });
 
-    return <Gauge timeSeries={vmSeries} {...this.props.options} width={width} height={height} />;
+    return (
+      <Gauge
+        timeSeries={vmSeries}
+        {...this.props.options}
+        width={width}
+        height={height}
+      />
+    );
   }
 }

public/sass/_variables.scss

@@ -189,7 +189,9 @@ $side-menu-width: 60px;
 // dashboard
 $panel-margin: 10px;
 $dashboard-padding: $panel-margin * 2;
-$panel-padding: 0px 10px 5px 10px;
+$panel-horizontal-padding: 10;
+$panel-vertical-padding: 5;
+$panel-padding: 0px $panel-horizontal-padding+0px $panel-vertical-padding+0px $panel-horizontal-padding+0px;
 
 // tabs
 $tabs-padding: 10px 15px 9px;
@@ -202,3 +204,8 @@ $external-services: (
     oauth: (bgColor: #262628, borderColor: #393939, icon: '')
   )
   !default;
+
+:export {
+  panelHorizontalPadding: $panel-horizontal-padding;
+  panelVerticalPadding: $panel-vertical-padding;
+}

public/sass/_variables.scss.d.ts

+export interface GrafanaVariables {
+  'panelHorizontalPadding': number;
+  'panelVerticalPadding': number;
+}
+
+declare const variables: GrafanaVariables;
+
+export default variables;

tsconfig.json

@@ -28,7 +28,8 @@
     "pretty": true,
     "typeRoots": ["node_modules/@types", "types"],
     "paths": {
-      "app": ["app"]
+      "app": ["app"],
+      "sass": ["sass"]
     }
   },
   "include": ["public/app/**/*.ts", "public/app/**/*.tsx", "public/test/**/*.ts"]