From 8dc133ada205dd70f0a236c765fe7be6247be947 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sun, 28 May 2023 20:37:53 -0700
Subject: [PATCH] add pie chart to meili stats

---
 .../client/src/widgets/server-metric/meilisearch.vue  | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/client/src/widgets/server-metric/meilisearch.vue b/packages/client/src/widgets/server-metric/meilisearch.vue
index f9993cd09..4047793f5 100644
--- a/packages/client/src/widgets/server-metric/meilisearch.vue
+++ b/packages/client/src/widgets/server-metric/meilisearch.vue
@@ -1,5 +1,6 @@
 <template>
 	<div class="ms_stats">
+		<XPie class="pie" :value="progress" />
 		<div>
 			<p><i class="ph-file-search ph-bold ph-lg"></i>MeiliSearch</p>
 			<p>{{ i18n.ts._widgets.meiliStatus }}: {{ available }}</p>
@@ -13,6 +14,7 @@
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted } from "vue";
 import bytes from "@/filters/bytes";
+import XPie from "./pie.vue";
 import { i18n } from "@/i18n";
 
 const props = defineProps<{
@@ -20,6 +22,8 @@ const props = defineProps<{
 	meta: any;
 }>();
 
+let progress: number = $ref(0);
+
 let total_size: number = $ref(0);
 let index_count: number = $ref(0);
 let available: string = $ref("unavailable");
@@ -28,6 +32,7 @@ function onStats(stats) {
 	total_size = stats.meilisearch.size;
 	index_count = stats.meilisearch.indexed_count;
 	available = stats.meilisearch.health;
+	progress = Math.floor((index_count / total_size) * 100);
 }
 
 onMounted(() => {
@@ -43,6 +48,12 @@ onBeforeUnmount(() => {
 .ms_stats {
 	padding: 16px;
 
+	> .pie {
+		height: 82px;
+		flex-shrink: 0;
+		margin-right: 16px;
+	}
+
 	> div {
 		> p {
 			margin: 0;