diff --git a/app/src/modules/insights/components/panel.vue b/app/src/modules/insights/components/panel.vue
index d5763515d0..e8892b6aec 100644
--- a/app/src/modules/insights/components/panel.vue
+++ b/app/src/modules/insights/components/panel.vue
@@ -33,6 +33,10 @@
 			<div class="bottom-right" @pointerdown.stop="onPointerDown('resize-bottom-right', $event)" />
 			<div class="bottom-left" @pointerdown.stop="onPointerDown('resize-bottom-left', $event)" />
 		</div>
+
+		<div class="panel-content" :class="{ 'has-header': panel.show_header }">
+			<component :is="`panel-${panel.type}`" v-bind="panel" />
+		</div>
 	</div>
 </template>
 
@@ -229,6 +233,7 @@ export default defineComponent({
 .header {
 	display: flex;
 	align-items: center;
+	height: 48px;
 	padding: 12px;
 }
 
@@ -255,6 +260,15 @@ export default defineComponent({
 	--v-icon-color-hover: var(--foreground-normal);
 }
 
+.panel-content {
+	width: 100%;
+	height: 100%;
+}
+
+.panel-content.has-header {
+	height: calc(100% - 48px);
+}
+
 .edit-actions {
 	position: absolute;
 	top: 0;
diff --git a/app/src/panels/metric/index.ts b/app/src/panels/metric/index.ts
index 671f4e4f9e..63109c3ee9 100644
--- a/app/src/panels/metric/index.ts
+++ b/app/src/panels/metric/index.ts
@@ -7,7 +7,19 @@ export default definePanel({
 	description: '$t:panels.metric.description',
 	icon: 'functions',
 	component: PanelMetric,
-	options: [],
+	options: [
+		{
+			field: 'all',
+			name: 'All Options (Debug)',
+			type: 'json',
+			meta: {
+				interface: 'code',
+				options: {
+					language: 'json',
+				},
+			},
+		},
+	],
 	minWidth: 16,
 	minHeight: 6,
 });
diff --git a/app/src/panels/metric/metric.vue b/app/src/panels/metric/metric.vue
index e55754ea29..7789ba686a 100644
--- a/app/src/panels/metric/metric.vue
+++ b/app/src/panels/metric/metric.vue
@@ -1,3 +1,62 @@
 <template>
-	<div>Metric</div>
+	<div class="metric type-title">{{ loading ? 'loading' : metric }}</div>
 </template>
+
+<script lang="ts">
+import { defineComponent, ref, watch } from '@vue/composition-api';
+import api from '@/api';
+
+export default defineComponent({
+	props: {
+		options: {
+			type: Object,
+			default: null,
+		},
+	},
+	setup(props) {
+		const metric = ref();
+		const loading = ref(false);
+
+		fetchData();
+
+		watch(props.options, fetchData);
+
+		return { metric, loading };
+
+		async function fetchData() {
+			if (!props.options) return;
+
+			loading.value = true;
+
+			try {
+				const res = await api.get(`/items/${props.options.all.collection}`, {
+					params: {
+						aggregate: {
+							[props.options.all.function]: {
+								[props.options.all.field]: 'result',
+							},
+						},
+						filter: props.options.all.filter,
+					},
+				});
+
+				metric.value = Number(res.data.data[0].result).toFixed(props.options.all.decimals || 2);
+			} catch (err) {
+				// oh no
+			} finally {
+				loading.value = false;
+			}
+		}
+	},
+});
+</script>
+
+<style scoped>
+.metric {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: calc(100% - 24px);
+}
+</style>