From 8912735e937a7b61dd358941d260f49fba6740c3 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Tue, 8 Feb 2022 04:52:06 +0800
Subject: [PATCH] Fix Metrics type panel creation (#11454)

* Fix Metrics type panel creation

* clean up
---
 app/src/panels/metric/index.ts | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/src/panels/metric/index.ts b/app/src/panels/metric/index.ts
index 529606edaf..384debdb1f 100644
--- a/app/src/panels/metric/index.ts
+++ b/app/src/panels/metric/index.ts
@@ -1,7 +1,6 @@
 import { computed } from 'vue';
 import { useFieldsStore } from '@/stores';
 import { definePanel } from '@directus/shared/utils';
-import { Panel } from '@directus/shared/types';
 import PanelMetric from './metric.vue';
 
 export default definePanel({
@@ -10,17 +9,17 @@ export default definePanel({
 	description: '$t:panels.metric.description',
 	icon: 'functions',
 	component: PanelMetric,
-	options: (edits) => {
+	options: ({ options }) => {
 		const fieldsStore = useFieldsStore();
 
 		const fieldType = computed(() => {
-			const fieldStore = useFieldsStore();
-			const field = fieldStore.getField(edits.options?.collection, edits.options?.field);
-			return field?.type ?? null;
+			return options?.collection && options?.field
+				? fieldsStore.getField(options.collection, options.field)?.type
+				: null;
 		});
 
-		const supportsAggregate = computed(
-			() => fieldType.value && ['integer', 'bigInteger', 'float', 'decimal'].includes(fieldType.value)
+		const supportsAggregate = computed(() =>
+			fieldType.value ? ['integer', 'bigInteger', 'float', 'decimal'].includes(fieldType.value) : false
 		);
 
 		return [