add csv filters

This commit is contained in:
Emily
2024-06-14 16:19:57 +02:00
parent 96abb174d1
commit 3f65141422
3 changed files with 80 additions and 4 deletions

View File

@@ -79,6 +79,35 @@ function onHideClicked() {
isAdminHidden.value = true; isAdminHidden.value = true;
} }
const projectsCount = computed(() => {
return projects.value?.length || 0;
});
const premiumCount = computed(() => {
let premiums = 0;
projects.value?.forEach(e => {
if (e.premium) premiums++;
})
return premiums;
})
const usersCount = computed(() => {
const uniqueUsers = new Set<string>();
projects.value?.forEach(e => uniqueUsers.add(e.user.email));
return uniqueUsers.size;
});
const totalVisits = computed(() => {
return projects.value?.reduce((a, e) => a + e.total_visits, 0) || 0;
});
const totalEvents = computed(() => {
return projects.value?.reduce((a, e) => a + e.total_events, 0) || 0;
});
const details = ref<any>(); const details = ref<any>();
const showDetails = ref<boolean>(false); const showDetails = ref<boolean>(false);
async function getProjectDetails(project_id: string) { async function getProjectDetails(project_id: string) {
@@ -114,6 +143,26 @@ async function resetCount(project_id: string) {
</div> </div>
<Card class="p-4">
<div class="grid grid-cols-2">
<div>
Users: {{ usersCount }}
</div>
<div>
Projects: {{ projectsCount }} ( {{ premiumCount }} premium )
</div>
<div>
Total visits: {{ formatNumberK(totalVisits) }}
</div>
<div>
Total events: {{ formatNumberK(totalEvents) }}
</div>
</div>
</Card>
<div v-for="item of projectsGrouped" class="bg-menu p-4 rounded-xl flex flex-col gap-2 w-full relative"> <div v-for="item of projectsGrouped" class="bg-menu p-4 rounded-xl flex flex-col gap-2 w-full relative">
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">

View File

@@ -47,7 +47,7 @@ const creatingCsv = ref<boolean>(false);
async function downloadCSV() { async function downloadCSV() {
creatingCsv.value = true; creatingCsv.value = true;
const result = await $fetch(`/api/project/generate_csv?mode=visits`, signHeaders()); const result = await $fetch(`/api/project/generate_csv?mode=visits&slice=${options.indexOf(selectedTimeFrom.value)}`, signHeaders());
const blob = new Blob([result], { type: 'text/csv' }); const blob = new Blob([result], { type: 'text/csv' });
const url = window.URL.createObjectURL(blob); const url = window.URL.createObjectURL(blob);
const a = document.createElement('a'); const a = document.createElement('a');
@@ -60,6 +60,14 @@ async function downloadCSV() {
creatingCsv.value = false; creatingCsv.value = false;
} }
const options = ['Last day', 'Last week', 'Last month', 'Total']
const selectedTimeFrom = ref<string>(options[0]);
const showWarning = computed(() => {
return options.indexOf(selectedTimeFrom.value) > 1
})
</script> </script>
@@ -75,7 +83,14 @@ async function downloadCSV() {
</div> </div>
</div> </div>
<div class="flex justify-end px-12 py-3"> <div class="flex justify-end px-12 py-3 items-center gap-2">
<div v-if="showWarning" class="text-orange-400 flex gap-2 items-center">
<i class="far fa-warning "></i>
<div> It can take a few minutes </div>
</div>
<div class="w-[15rem] flex flex-col gap-0">
<USelectMenu v-model="selectedTimeFrom" :options="options"></USelectMenu>
</div>
<div @click="downloadCSV()" <div @click="downloadCSV()"
class="bg-[#57c78fc0] hover:bg-[#57c78fab] cursor-pointer text-text poppins font-semibold px-8 py-2 rounded-lg"> class="bg-[#57c78fc0] hover:bg-[#57c78fab] cursor-pointer text-text poppins font-semibold px-8 py-2 rounded-lg">
Download CSV Download CSV

View File

@@ -18,14 +18,26 @@ export default defineEventHandler(async event => {
const project = await ProjectModel.findById(project_id); const project = await ProjectModel.findById(project_id);
if (!project) return setResponseStatus(event, 400, 'Project not found'); if (!project) return setResponseStatus(event, 400, 'Project not found');
const { mode } = getQuery(event); const { mode, slice } = getQuery(event);
let timeSub = 1000 * 60 * 60 * 24;
if (slice == '0') {
timeSub = 1000 * 60 * 60 * 24
} else if (slice == '1') {
timeSub = 1000 * 60 * 60 * 24 * 7
} else if (slice == '2') {
timeSub = 1000 * 60 * 60 * 24 * 7 * 30
} else if (slice == '3') {
timeSub = 1000 * 60 * 60 * 24 * 7 * 30 * 12 * 2
}
if (mode === 'visits') { if (mode === 'visits') {
const visistsReportData = await VisitModel.find({ const visistsReportData = await VisitModel.find({
project_id, project_id,
created_at: { created_at: {
$gt: Date.now() - 1000 * 60 * 60 * 24 * 7 $gt: Date.now() - timeSub
} }
}); });