Elizhium/litlyx
1
0
Fork 0
mirror of https://github.com/Litlyx/litlyx synced 2026-02-04 14:42:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

add event page + fix menu

Browse Source
This commit is contained in:
Emily
2024-06-13 16:19:50 +02:00
parent 4fd892e1bd
commit 16147da824
9 changed files with 170 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
dashboard/pages/events.vue Normal file
View File

@@ -0,0 +1,55 @@
<script lang="ts" setup>
definePageMeta({ layout: 'dashboard' });
const selectLabelsEvents = [
{ label: 'Day', value: 'day' },
{ label: 'Month', value: 'month' },
];
const eventsStackedSelectIndex = ref<number>(0);
</script>
<template>
<div class="w-full h-full overflow-y-auto pb-20 md:pt-4 lg:pt-0">
<div class="flex p-6 gap-6 flex-col xl:flex-row">
<CardTitled class="p-4 flex-[4]" title="Events" sub="Events stacked bar chart.">
<template #header>
<SelectButton @changeIndex="eventsStackedSelectIndex = $event"
:currentIndex="eventsStackedSelectIndex" :options="selectLabelsEvents">
</SelectButton>
</template>
<div>
<EventsStackedBarChart :slice="(selectLabelsEvents[eventsStackedSelectIndex].value as any)">
</EventsStackedBarChart>
</div>
</CardTitled>
<div class="bg-menu p-4 rounded-xl flex-[2] flex flex-col gap-10 h-full">
<div class="flex flex-col gap-1">
<div class="poppins font-semibold text-[1.4rem] text-text">
Top events
</div>
<div class="poppins text-[1rem] text-text-sub/90">
Displays key events.
</div>
</div>
<DashboardEventsChart class="w-full"> </DashboardEventsChart>
</div>
</div>
<div class="flex p-6">
<EventsMetadataAnalyzer></EventsMetadataAnalyzer>
</div>
</div>
</template>

42
dashboard/pages/index.vue
View File

@@ -7,7 +7,7 @@ const activeProject = useActiveProject();
const mainChartSelectIndex = ref<number>(1);
const sessionsChartSelectIndex = ref<number>(1);
const eventsStackedSelectIndex = ref<number>(0);
const route = useRoute();
@@ -66,10 +66,6 @@ const selectLabels = [
{ label: 'Day', value: 'day' }
];
const selectLabelsEvents = [
{ label: 'Day', value: 'day' },
{ label: 'Month', value: 'month' },
];
</script>
@@ -123,42 +119,6 @@ const selectLabelsEvents = [
</div>
<div class="flex p-6 gap-6 flex-col xl:flex-row">
<CardTitled class="p-4 flex-[4]" title="Events" sub="Events stacked bar chart.">
<template #header>
<SelectButton @changeIndex="eventsStackedSelectIndex = $event"
:currentIndex="eventsStackedSelectIndex" :options="selectLabelsEvents">
</SelectButton>
</template>
<div>
<EventsStackedBarChart :slice="(selectLabelsEvents[eventsStackedSelectIndex].value as any)">
</EventsStackedBarChart>
</div>
</CardTitled>
<div class="bg-menu p-4 rounded-xl flex-[2] flex flex-col gap-10 h-full">
<div class="flex flex-col gap-1">
<div class="poppins font-semibold text-[1.4rem] text-text">
Top events
</div>
<div class="poppins text-[1rem] text-text-sub/90">
Displays key events.
</div>
</div>
<DashboardEventsChart class="w-full"> </DashboardEventsChart>
</div>
</div>
<div class="flex w-full justify-center mt-6 px-6">
<div class="flex w-full gap-6 flex-col xl:flex-row">
<div class="flex-1">

106
dashboard/pages/test.vue
View File

@@ -1,106 +0,0 @@
<script lang="ts" setup>
definePageMeta({ layout: 'dashboard' });
const activeProject = useActiveProject();
const eventNames = ref<string[]>([]);
const selectedEventName = ref<string>();
const metadataFields = ref<string[]>([]);
const selectedMetadataField = ref<string>();
const metadataFieldGrouped = ref<any[]>([]);
onMounted(async () => {
eventNames.value = await $fetch<string[]>(`/api/metrics/${activeProject.value?._id.toString()}/events/names`, signHeaders());
});
watch(selectedEventName, () => {
getMetadataFields();
});
watch(selectedMetadataField, () => {
getMetadataFieldGrouped();
});
async function getMetadataFields() {
metadataFields.value = await $fetch<string[]>(`/api/metrics/${activeProject.value?._id.toString()}/events/metadata_fields?name=${selectedEventName.value}`, signHeaders());
selectedMetadataField.value = undefined;
currentSearchText.value = "";
}
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 metadataFieldGroupedFiltered = computed(() => {
if (currentSearchText.value.length == 0) return metadataFieldGrouped.value;
return metadataFieldGrouped.value.filter(e => {
const currentId: string = e._id || '';
const idToMatch = currentId.toLowerCase();
return idToMatch.includes(currentSearchText.value.toLowerCase());
});
});
const currentSearchText = ref<string>("");
const canSearch = computed(() => {
return selectedMetadataField.value != undefined;
});
</script>
<template>
<div class="w-full h-full p-8 flex flex-col">
<CardTitled title="Event metadata analyzer" sub="Filter events metadata fields to analyze them" class="w-full p-4">
<div class="p-2 flex flex-col">
<div class="flex flex-col gap-2">
<USelectMenu searchable searchable-placeholder="Search an event..." class="w-full"
placeholder="Select an event" :options="eventNames" v-model="selectedEventName">
</USelectMenu>
<USelectMenu v-if="metadataFields.length > 0" searchable searchable-placeholder="Search a field..."
class="w-full" placeholder="Select a field" :options="metadataFields"
v-model="selectedMetadataField">
</USelectMenu>
</div>
<div v-if="canSearch" class="flex gap-4 mt-4 items-center">
<div> Filter by name: </div>
<div class="h-full flex items-center text-[1.2rem]">
<input v-model="currentSearchText"
class="bg-black/70 hover:bg-black/40 rounded-lg px-4 py-1 focus:outline-none" type="text">
</div>
</div>
</div>
</CardTitled>
<div class="mt-8 overflow-y-auto px-4 flex flex-col gap-3">
<div class="text-accent poppins font-semibold">
Search results: {{ metadataFieldGroupedFiltered.length }}
</div>
<div class="flex flex-col">
<div v-for="item of metadataFieldGroupedFiltered">
<div class="flex gap-2">
<div> {{ item._id || 'OLD_EVENTS' }} </div>
<div> {{ item.count }} </div>
</div>
</div>
</div>
</div>
</div>
</template>

2
dashboard/pages/test2.vue
View File

@@ -12,7 +12,7 @@ onMounted(async () => {
});
function test() {
const res = $fetch(`/api/metrics/${activeProject.value?._id.toString()}/events/flow_from_name?name=docs_clicked`)
const res = $fetch(`/api/metrics/${activeProject.value?._id.toString()}/events/flow_from_name?name=ToggleFavorite`, signHeaders());
console.log(res);
}