add dashboard

dashboard/components/events/EventsStackedBarChart.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+
+const datasets = ref<any[]>([]);
+const labels = ref<string[]>([]);
+const ready = ref<boolean>(false);
+
+const props = defineProps<{ slice: SliceName }>();
+
+async function loadData() {
+    const response = await useTimelineDataRaw('events_stacked', props.slice);
+    if (!response) return;
+
+    const fixed = fixMetrics(response, props.slice, { 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;
+
+}
+
+onMounted(async () => {
+    await loadData();
+    watch(props, async () => { await loadData(); });
+})
+
+</script>
+
+<template>
+    <div>
+        <AdvancedStackedBarChart v-if="ready" :datasets="datasets" :labels="labels">
+        </AdvancedStackedBarChart>
+    </div>
+</template>