From b3b1c21d772929cde9b5f6d5adcc8ee97b5608ec Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Mon, 14 Jan 2019 09:45:55 +0100
Subject: [PATCH] Fixed Gauge being cropped when resizing panel

Enabled import of SASS viariables into TS
---
 public/app/plugins/panel/gauge/GaugePanel.tsx | 10 +++++++++-
 public/sass/_variables.scss                   |  9 ++++++++-
 public/sass/_variables.scss.d.ts              |  8 ++++++++
 tsconfig.json                                 |  3 ++-
 4 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 public/sass/_variables.scss.d.ts

diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx
index 79220daf37a..3aedfcf1f67 100644
--- a/public/app/plugins/panel/gauge/GaugePanel.tsx
+++ b/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}
+      />
+    );
   }
 }
diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss
index 111ee870658..a10fefadf10 100644
--- a/public/sass/_variables.scss
+++ b/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;
+}
diff --git a/public/sass/_variables.scss.d.ts b/public/sass/_variables.scss.d.ts
new file mode 100644
index 00000000000..f3de2340419
--- /dev/null
+++ b/public/sass/_variables.scss.d.ts
@@ -0,0 +1,8 @@
+export interface GrafanaVariables {
+  'panelHorizontalPadding': number;
+  'panelVerticalPadding': number;
+}
+
+declare const variables: GrafanaVariables;
+
+export default variables;
diff --git a/tsconfig.json b/tsconfig.json
index 3c8c41f34e2..5772b931820 100644
--- a/tsconfig.json
+++ b/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"]