Fixed Gauge being cropped when resizing panel

Enabled import of SASS viariables into TS

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

@@ -3,6 +3,7 @@ import { GaugeOptions, PanelProps, NullValueMode } from '@grafana/ui';
 
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
 import Gauge from 'app/viz/Gauge';
+import variables from 'sass/_variables.scss';
 
 interface Props extends PanelProps<GaugeOptions> {}
 
@@ -15,6 +16,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 - 2 * variables.panelHorizontalPadding}
+        height={height - variables.panelVerticalPadding}
+      />
+    );
   }
 }

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"]