fix reactivity

dashboard/components/events/EventsStackedBarChart.vue

@@ -2,73 +2,75 @@
 import type { Slice } from '@services/DateService';
 import { onMounted } from 'vue';
 
-const datasets = ref<any[]>([]);
-const labels = ref<string[]>([]);
-const ready = ref<boolean>(false);
-const props = defineProps<{ slice: Slice }>();
 
+const props = defineProps<{ slice: Slice }>();
 const slice = computed(() => props.slice);
 
-const res = useEventsStackedTimeline(slice);
-
+const activeProject = useActiveProject();
 const { safeSnapshotDates } = useSnapshot()
 
-onMounted(async () => {
+const body = computed(() => {
+    return {
+        from: safeSnapshotDates.value.from,
+        to: safeSnapshotDates.value.to,
+        slice: slice.value,
+        Authorization: authorizationHeaderComputed.value,
+    }
+});
 
-    res.execute();
 
-    res.onResponse(resData => {
+function transformResponse(input: { _id: string, name: string, count: number }[]) {
 
-        if (!resData.value) return;
-
-        const fixed = fixMetrics({
-           data:resData.value,
-           from: safeSnapshotDates.value.from,
-           to: safeSnapshotDates.value.to
-        }, slice.value, {
-            advanced: true,
-            advancedGroupKey: 'name'
-        });
-
-        const parsedDatasets: any[] = [];
-        const colors = ['#5655d0', '#6bbbe3', '#a6d5cb', '#fae0b9'];
-
-        for (let i = 0; i < fixed.allKeys.length; i++) {
-            const line: any = {
-                data: [],
-                color: colors[i] || '#FF0000',
-                label: fixed.allKeys[i]
-            };
-            parsedDatasets.push(line)
-            fixed.data.forEach((e: { key: string, value: number }[]) => {
-                const target = e.find(e => e.key == fixed.allKeys[i]);
-                if (!target) return;
-                line.data.push(target.value);
-            });
-        }
-
-        datasets.value = parsedDatasets;
-        labels.value = fixed.labels;
-        ready.value = true;
+    const fixed = fixMetrics({
+        data: input,
+        from: safeSnapshotDates.value.from,
+        to: safeSnapshotDates.value.to
+    }, slice.value, {
+        advanced: true,
+        advancedGroupKey: 'name'
     });
 
-})
+    const parsedDatasets: any[] = [];
+    const colors = ['#5655d0', '#6bbbe3', '#a6d5cb', '#fae0b9'];
+
+    for (let i = 0; i < fixed.allKeys.length; i++) {
+        const line: any = {
+            data: [],
+            color: colors[i] || '#FF0000',
+            label: fixed.allKeys[i]
+        };
+        parsedDatasets.push(line)
+        fixed.data.forEach((e: { key: string, value: number }[]) => {
+            const target = e.find(e => e.key == fixed.allKeys[i]);
+            if (!target) return;
+            line.data.push(target.value);
+        });
+    }
+
+    return {
+        datasets: parsedDatasets,
+        labels: fixed.labels
+    }
+}
+
+const eventsStackedData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/events_stacked`, {
+    method: 'POST', body, lazy: true, immediate: false, transform: transformResponse
+});
 
 
-const chartVisible = computed(() => {
-    if (res.pending.value) return false;
-    if (!res.data.value) return false;
-    return true;
-})
+onMounted(async () => {
+    eventsStackedData.execute();
+});
 
 </script>
 
 <template>
     <div>
-        <div v-if="!chartVisible" class="flex justify-center py-40">
+        <div v-if="eventsStackedData.pending.value" class="flex justify-center py-40">
             <i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
         </div>
-        <AdvancedStackedBarChart v-if="chartVisible" :datasets="datasets" :labels="labels">
+        <AdvancedStackedBarChart v-if="!eventsStackedData.pending.value" :datasets="eventsStackedData.data.value?.datasets || []"
+            :labels="eventsStackedData.data.value?.labels || []">
         </AdvancedStackedBarChart>
     </div>
 </template>