implementing snapshots

This commit is contained in:
Emily
2024-08-02 16:09:11 +02:00
parent 376b39e247
commit 93f22dfc54
16 changed files with 195 additions and 53 deletions

View File

@@ -26,12 +26,27 @@ async function getMetadataFields() {
currentSearchText.value = "";
}
const { safeSnapshotDates } = useSnapshot();
async function getMetadataFieldGrouped() {
if (!selectedMetadataField.value) return;
metadataFieldGrouped.value = await $fetch<string[]>(`/api/metrics/${activeProject.value?._id.toString()}/events/metadata_field_group?name=${selectedEventName.value}&field=${selectedMetadataField.value}`, signHeaders());
const queryParams: Record<string, any> = {
from: safeSnapshotDates.value.from,
to: safeSnapshotDates.value.to,
name: selectedEventName.value,
field: selectedMetadataField.value
}
const queryParamsString = Object.keys(queryParams).map((key) => `${key}=${queryParams[key]}`).join('&');
metadataFieldGrouped.value = await $fetch<string[]>(`/api/metrics/${activeProject.value?._id.toString()}/events/metadata_field_group?${queryParamsString}`, signHeaders());
}
const metadataFieldGroupedFiltered = computed(() => {
if (currentSearchText.value.length == 0) return metadataFieldGrouped.value;
return metadataFieldGrouped.value.filter(e => {

View File

@@ -12,13 +12,28 @@ onMounted(async () => {
const userFlowData = ref<any>();
const analyzing = ref<boolean>(false);
async function analyzeEvent() {
const { safeSnapshotDates } = useSnapshot();
async function getUserFlowData() {
userFlowData.value = undefined;
analyzing.value = true;
userFlowData.value = await $fetch(`/api/metrics/${activeProject.value?._id.toString()}/events/flow_from_name?name=${selectedEventName.value}`, signHeaders());
const queryParams: Record<string, any> = {
from: safeSnapshotDates.value.from,
to: safeSnapshotDates.value.to,
name: selectedEventName.value
}
const queryParamsString = Object.keys(queryParams).map((key) => `${key}=${queryParams[key]}`).join('&');
userFlowData.value = await $fetch(`/api/metrics/${activeProject.value?._id.toString()}/events/flow_from_name?${queryParamsString}`, signHeaders());
analyzing.value = false;
}
async function analyzeEvent() {
getUserFlowData();
}
</script>
<template>
@@ -41,13 +56,15 @@ async function analyzeEvent() {
</div>
<div class="flex flex-col gap-2" v-if="userFlowData">
<div class="flex gap-4 items-center bg-bg py-1 px-2 rounded-lg" v-for="(count, referrer) in userFlowData">
<div class="flex gap-4 items-center bg-bg py-1 px-2 rounded-lg"
v-for="(count, referrer) in userFlowData">
<div class="w-5 h-5 flex items-center justify-center">
<img :src="`https://s2.googleusercontent.com/s2/favicons?domain=${referrer}&sz=64`" :alt="'referrer'">
<img :src="`https://s2.googleusercontent.com/s2/favicons?domain=${referrer}&sz=64`"
:alt="'referrer'">
</div>
<div> {{ referrer }} </div>
<div class="grow"></div>
<div> {{ count }} </div>
<div> {{ count.toFixed(2).replace('.', ',') }} % </div>
</div>
</div>