From 63ebba5c272a815f525e07562fe3654a36d97e89 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 28 May 2021 16:05:24 -0400
Subject: [PATCH] Fix metric alignment, only load on options change, Show
 header

---
 .../modules/insights/routes/panel-configuration.vue  |  2 +-
 app/src/panels/metric/metric.vue                     | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/src/modules/insights/routes/panel-configuration.vue b/app/src/modules/insights/routes/panel-configuration.vue
index c9ac3fd372..6bb301b2c6 100644
--- a/app/src/modules/insights/routes/panel-configuration.vue
+++ b/app/src/modules/insights/routes/panel-configuration.vue
@@ -77,7 +77,7 @@ export default defineComponent({
 		const { panels } = getPanels();
 
 		const edits = reactive<Partial<Panel>>({
-			show_header: props.panel?.show_header || true,
+			show_header: props.panel?.show_header ?? true,
 			type: props.panel?.type || undefined,
 			name: props.panel?.name,
 			note: props.panel?.note,
diff --git a/app/src/panels/metric/metric.vue b/app/src/panels/metric/metric.vue
index 0e1af634d7..7b1b693af2 100644
--- a/app/src/panels/metric/metric.vue
+++ b/app/src/panels/metric/metric.vue
@@ -8,6 +8,7 @@
 <script lang="ts">
 import { defineComponent, ref, watch } from '@vue/composition-api';
 import api from '@/api';
+import { isEqual } from 'lodash';
 
 export default defineComponent({
 	props: {
@@ -26,7 +27,14 @@ export default defineComponent({
 
 		fetchData();
 
-		watch(() => props.options, fetchData, { deep: true });
+		watch(
+			() => props.options,
+			(newOptions, oldOptions) => {
+				if (isEqual(newOptions, oldOptions)) return;
+				fetchData();
+			},
+			{ deep: true }
+		);
 
 		return { metric, loading };
 
@@ -71,6 +79,6 @@ export default defineComponent({
 }
 
 .metric.has-header {
-	height: calc(100% - 48px);
+	height: calc(100% - 24px);
 }
 </style>