From 27b0d9f8df5418628bd97207ac481791f95f7635 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Wed, 30 Jun 2021 15:40:07 -0400
Subject: [PATCH] Fix box

---
 app/src/lang/translations/en-US.yaml          |  2 ++
 .../modules/insights/components/workspace.vue |  4 ++--
 app/src/modules/insights/routes/dashboard.vue | 22 ++++++++---------
 app/src/panels/metric/metric.vue              |  5 ++--
 app/src/panels/time-series/index.ts           | 24 +++++++++++++++++++
 app/src/panels/time-series/time-series.vue    | 14 +++++++++--
 6 files changed, 53 insertions(+), 18 deletions(-)

diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index 2ab91d9736..2c5eca49bf 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -703,6 +703,8 @@ unsaved_changes: Unsaved Changes
 unsaved_changes_copy: Are you sure you want to leave this page?
 discard_changes: Discard Changes
 discard_changes_copy: Are you sure you want to discard all the changes made?
+show_x_axis: Show X Axis
+show_y_axis: Show Y Axis
 keep_editing: Keep Editing
 page_help_collections_overview: '**Collections Overview** — List of all collections you have access to.'
 page_help_collections_collection: >-
diff --git a/app/src/modules/insights/components/workspace.vue b/app/src/modules/insights/components/workspace.vue
index 29e70e4343..77ba857af2 100644
--- a/app/src/modules/insights/components/workspace.vue
+++ b/app/src/modules/insights/components/workspace.vue
@@ -128,7 +128,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.workspace-box {
+.workspace-padding-box {
 	position: relative;
 }
 
@@ -168,7 +168,7 @@ export default defineComponent({
 	pointer-events: none;
 }
 
-.workspace.editing::before {
+.workspace-padding-box.editing .workspace::before {
 	opacity: 1;
 }
 </style>
diff --git a/app/src/modules/insights/routes/dashboard.vue b/app/src/modules/insights/routes/dashboard.vue
index 96130d8d0c..6cb8acf66b 100644
--- a/app/src/modules/insights/routes/dashboard.vue
+++ b/app/src/modules/insights/routes/dashboard.vue
@@ -74,18 +74,16 @@
 			<insights-navigation />
 		</template>
 
-		<div class="padding-box">
-			<insights-workspace
-				:edit-mode="editMode"
-				:panels="panels"
-				:zoom-to-fit="zoomToFit"
-				:now="now"
-				@update="stagePanelEdits"
-				@move="movePanelID = $event"
-				@delete="deletePanel"
-				@duplicate="duplicatePanel"
-			/>
-		</div>
+		<insights-workspace
+			:edit-mode="editMode"
+			:panels="panels"
+			:zoom-to-fit="zoomToFit"
+			:now="now"
+			@update="stagePanelEdits"
+			@move="movePanelID = $event"
+			@delete="deletePanel"
+			@duplicate="duplicatePanel"
+		/>
 
 		<router-view
 			name="detail"
diff --git a/app/src/panels/metric/metric.vue b/app/src/panels/metric/metric.vue
index 2faadb9f05..1587ee0adb 100644
--- a/app/src/panels/metric/metric.vue
+++ b/app/src/panels/metric/metric.vue
@@ -16,6 +16,7 @@ import { isEqual } from 'lodash';
 import { Filter } from '@/types';
 import { useI18n } from 'vue-i18n';
 import { abbreviateNumber } from '@/utils/abbreviate-number';
+import { isNil } from 'lodash';
 
 type MetricOptions = {
 	abbreviate: boolean;
@@ -72,7 +73,7 @@ export default defineComponent({
 		);
 
 		const displayValue = computed(() => {
-			if (metric.value === null || metric.value === undefined) return null;
+			if (isNil(metric.value)) return null;
 
 			if (props.options.abbreviate) {
 				return abbreviateNumber(metric.value, props.options.decimals);
@@ -85,7 +86,7 @@ export default defineComponent({
 		});
 
 		const color = computed(() => {
-			if (!metric.value) return null;
+			if (isNil(metric.value)) return null;
 
 			let matchingFormat: MetricOptions['conditionalFormatting'][number] | null = null;
 
diff --git a/app/src/panels/time-series/index.ts b/app/src/panels/time-series/index.ts
index abe1b5a20b..9eef9c6e2c 100644
--- a/app/src/panels/time-series/index.ts
+++ b/app/src/panels/time-series/index.ts
@@ -256,6 +256,30 @@ export default definePanel({
 				},
 			},
 		},
+		{
+			field: 'showXAxis',
+			type: 'boolean',
+			name: '$t:show_x_axis',
+			meta: {
+				interface: 'boolean',
+				width: 'half',
+			},
+			schema: {
+				default_value: true,
+			},
+		},
+		{
+			field: 'showYAxis',
+			type: 'boolean',
+			name: '$t:show_y_axis',
+			meta: {
+				interface: 'boolean',
+				width: 'half',
+			},
+			schema: {
+				default_value: true,
+			},
+		},
 	],
 	minWidth: 12,
 	minHeight: 6,
diff --git a/app/src/panels/time-series/time-series.vue b/app/src/panels/time-series/time-series.vue
index df8fdd990c..5583e69bb6 100644
--- a/app/src/panels/time-series/time-series.vue
+++ b/app/src/panels/time-series/time-series.vue
@@ -53,9 +53,17 @@ export default defineComponent({
 			type: Date,
 			required: true,
 		},
+		showXAxis: {
+			type: Boolean,
+			default: true,
+		},
+		showYAxis: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	setup(props) {
-		const { d, t, n } = useI18n();
+		const { t, n } = useI18n();
 
 		const fieldsStore = useFieldsStore();
 
@@ -66,7 +74,7 @@ export default defineComponent({
 		const chart = ref<ApexCharts>();
 
 		const valueLabel = computed(() => {
-			const field = fieldsStore.getField(props.options.collection, props.options.valueField);
+			const field = fieldsStore.getField(props.options.collection, props.options.valueField)!;
 			const operation = t(props.options.function);
 			return `${field.name} (${operation})`;
 		});
@@ -270,6 +278,7 @@ export default defineComponent({
 					},
 				},
 				xaxis: {
+					show: props.showXAxis,
 					type: 'datetime',
 					tooltip: {
 						enabled: false,
@@ -298,6 +307,7 @@ export default defineComponent({
 					},
 				},
 				yaxis: {
+					show: props.showXAxis,
 					forceNiceScale: true,
 					min: isNil(props.options.min) ? undefined : Number(props.options.min),
 					max: isNil(props.options.max) ? undefined : Number(props.options.max),