Rewrite endpoints + bar cards

dashboard/components/BarCard/Base.vue

@@ -127,7 +127,7 @@ function openExternalLink(link: string) {
                         formatNumberK(element.count) }} </div>
                 </div>
                 <div v-if="props.data.length == 0" class="flex justify-center text-text-sub font-bold text-[1.1rem]">
-                    No visits yet
+                    No data yet
                 </div>
             </div>
             <div v-if="!hideShowMore" class="flex justify-center mt-4 text-text-sub/90 ">

dashboard/components/BarCard/Browsers.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+
+const isShowMore = ref<boolean>(false);
+
+const browsersData = useFetch('/api/data/browsers', {
+    headers: useComputedHeaders({
+        limit: computed(() => isShowMore.value ? '200' : '10'),
+    }), lazy: true
+});
+
+const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
+
+function showMore() {
+    isShowMore.value = true;
+    showDialog.value = true;
+    dialogBarData.value = browsersData.data.value || [];
+
+}
+
+</script>
+
+
+<template>
+    <div class="flex flex-col gap-2">
+        <BarCardBase @showMore="showMore()" @dataReload="browsersData.refresh()"
+            :data="browsersData.data.value || []" desc="The browsers most used to search your website."
+            :dataIcons="false" :loading="browsersData.pending.value" label="Top Browsers" sub-label="Browsers">
+        </BarCardBase>
+    </div>
+</template>

dashboard/components/BarCard/Devices.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+
+const isShowMore = ref<boolean>(false);
+
+const devicesData = useFetch('/api/data/devices', {
+    headers: useComputedHeaders({
+        limit: computed(() => isShowMore.value ? '200' : '10'),
+    }), lazy: true
+});
+
+
+const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
+
+
+function showMore() {
+    isShowMore.value = true;
+    showDialog.value = true;
+    dialogBarData.value = devicesData.data.value || [];
+
+}
+
+</script>
+
+
+<template>
+    <div class="flex flex-col gap-2">
+        <BarCardBase @showMore="showMore()" @dataReload="devicesData.refresh()" :data="devicesData.data.value || []" :dataIcons="false"
+            desc="The devices most used to access your website." :loading="devicesData.pending.value" label="Top Devices"
+            sub-label="Devices"></BarCardBase>
+    </div>
+</template>

dashboard/components/BarCard/Events.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+
+const router = useRouter();
+
+function goToView() {
+    router.push('/dashboard/events');
+}
+
+const isShowMore = ref<boolean>(false);
+
+const eventsData = useFetch('/api/data/events', {
+    headers: useComputedHeaders({
+        limit: computed(() => isShowMore.value ? '200' : '10'),
+    }), lazy: true
+});
+
+const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
+
+function showMore() {
+    isShowMore.value = true;
+    showDialog.value = true;
+    dialogBarData.value = eventsData.data.value || [];
+}
+
+</script>
+
+
+<template>
+    <div class="flex flex-col gap-2 h-full">
+        <BarCardBase @showMore="showMore()" @showRawData="goToView()"
+            desc="Most frequent user events triggered in this project" @dataReload="eventsData.refresh()"
+            :data="eventsData.data.value || []" :loading="eventsData.pending.value" label="Top Events"
+            sub-label="Events" :rawButton="!isLiveDemo()"></BarCardBase>
+    </div>
+</template>

dashboard/components/BarCard/Geolocations.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 
-import type { IconProvider } from './BarsCard.vue';
+import type { IconProvider } from '../BarCard/Base.vue';
 
 function iconProvider(id: string): ReturnType<IconProvider> {
     if (id === 'self') return ['icon', 'fas fa-link'];
@@ -12,23 +12,12 @@ function iconProvider(id: string): ReturnType<IconProvider> {
 
 const customIconStyle = `width: 2rem; padding: 1px;`
 
-const activeProject = useActiveProject();
-
-const { safeSnapshotDates } = useSnapshot()
-
 const isShowMore = ref<boolean>(false);
 
-const headers = computed(() => {
-    return {
-        'x-from': safeSnapshotDates.value.from,
-        'x-to': safeSnapshotDates.value.to,
-        Authorization: authorizationHeaderComputed.value,
-        limit: isShowMore.value === true ? '200' : '10'
-    }
-});
-
-const geolocationData = useFetch(`/api/metrics/${activeProject.value?._id}/data/countries`, {
-    method: 'POST', headers, lazy: true, immediate: false
+const geolocationData = useFetch('/api/data/countries', {
+    headers: useComputedHeaders({
+        limit: computed(() => isShowMore.value ? '200' : '10'),
+    }), lazy: true
 });
 
 
@@ -46,18 +35,14 @@ function showMore() {
 
 }
 
-onMounted(async () => {
-    geolocationData.execute();
-});
-
 </script>
 
 
 <template>
     <div class="flex flex-col gap-2">
-        <DashboardBarsCard @showMore="showMore()" @dataReload="geolocationData.refresh()" :data="geolocationData.data.value || []" :dataIcons="false"
+        <BarCardBase @showMore="showMore()" @dataReload="geolocationData.refresh()" :data="geolocationData.data.value || []" :dataIcons="false"
             :loading="geolocationData.pending.value" label="Top Countries" sub-label="Countries" :iconProvider="iconProvider"
             :customIconStyle="customIconStyle" desc=" Lists the countries where users access your website.">
-        </DashboardBarsCard>
+        </BarCardBase>
     </div>
 </template>

dashboard/components/BarCard/OperatingSystems.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+
+const isShowMore = ref<boolean>(false);
+
+const ossData = useFetch('/api/data/oss', {
+    headers: useComputedHeaders({
+        limit: computed(() => isShowMore.value ? '200' : '10'),
+    }), lazy: true
+});
+
+const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
+
+
+function showMore() {
+    isShowMore.value = true;
+    showDialog.value = true;
+    dialogBarData.value = ossData.data.value || [];
+}
+
+
+</script>
+
+
+<template>
+    <div class="flex flex-col gap-2 h-full">
+        <BarCardBase @showMore="showMore()" @dataReload="ossData.refresh()" :data="ossData.data.value || []"
+            desc="The operating systems most commonly used by your website's visitors." :dataIcons="false"
+            :loading="ossData.pending.value" label="Top OS" sub-label="OSs"></BarCardBase>
+    </div>
+</template>

dashboard/components/BarCard/Referrers.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+
+import type { IconProvider } from './Base.vue';
+
+function iconProvider(id: string): ReturnType<IconProvider> {
+    if (id === 'self') return ['icon', 'fas fa-link'];
+    return ['img', `https://s2.googleusercontent.com/s2/favicons?domain=${id}&sz=64`]
+}
+
+function elementTextTransformer(element: string) {
+    if (element === 'self') return 'Direct Link';
+    return element;
+}
+
+const isShowMore = ref<boolean>(false);
+
+const referrersData = useFetch('/api/data/referrers', {
+    headers: useComputedHeaders({
+        limit: computed(() => isShowMore.value ? '200' : '10'),
+    }), lazy: true
+});
+
+const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
+
+function showMore() {
+    isShowMore.value = true;
+    showDialog.value = true;
+    dialogBarData.value = referrersData.data.value?.map(e => {
+        return { ...e, icon: iconProvider(e._id) }
+    }) || [];
+}
+
+</script>
+
+
+<template>
+    <div class="flex flex-col gap-2">
+        <BarCardBase @showMore="showMore()" :elementTextTransformer="elementTextTransformer"
+            :iconProvider="iconProvider" @dataReload="referrersData.refresh()" :showLink=true
+            :data="referrersData.data.value || []" :interactive="false" desc="Where users find your website."
+            :dataIcons="true" :loading="referrersData.pending.value" label="Top Referrers" sub-label="Referrers">
+        </BarCardBase>
+    </div>
+</template>

dashboard/components/BarCard/Websites.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+
+const isShowMore = ref<boolean>(false);
+
+const currentWebsite = ref<string>("");
+
+const websitesData = useFetch('/api/data/websites', {
+    headers: useComputedHeaders({
+        limit: computed(() => isShowMore.value ? '200' : '10'),
+    }), lazy: true
+});
+
+const pagesData = useFetch('/api/data/websites_pages', {
+    headers: useComputedHeaders({
+        limit: computed(() => isShowMore.value ? '200' : '10'),
+        custom: {
+            'x-website-name': currentWebsite
+        }
+    }), lazy: true
+});
+
+
+const isPagesView = ref<boolean>(false);
+
+const currentData = computed(() => {
+    return isPagesView.value ? pagesData : websitesData
+})
+
+
+async function showDetails(website: string) {
+    currentWebsite.value = website;
+    isPagesView.value = true;
+}
+
+async function showGeneral() {
+    websitesData.execute();
+    isPagesView.value = false;
+}
+
+const router = useRouter();
+
+function goToView() {
+    router.push('/dashboard/visits');
+}
+
+</script>
+
+
+<template>
+    <div class="flex flex-col gap-2 h-full">
+        <BarCardBase :hideShowMore="true" @showGeneral="showGeneral()" @showRawData="goToView()"
+            @dataReload="currentData.refresh()" @showDetails="showDetails" :data="currentData.data.value || []"
+            :loading="currentData.pending.value" :label="isPagesView ? 'Top pages' : 'Top Websites'"
+            :sub-label="isPagesView ? 'Page' : 'Website'"
+            :desc="isPagesView ? 'Most visited pages' : 'Most visited website in this project'"
+            :interactive="!isPagesView" :rawButton="!isLiveDemo()" :isDetailView="isPagesView">
+        </BarCardBase>
+    </div>
+</template>

dashboard/components/dashboard/ActionableChart.vue

@@ -3,12 +3,8 @@ import { onMounted } from 'vue';
 import DateService, { type Slice } from '@services/DateService';
 import type { ChartData, ChartOptions, TooltipModel } from 'chart.js';
 import { useLineChart, LineChart } from 'vue-chart-3';
-registerChartComponents();
 
-const errorData = ref<{ errored: boolean, text: string }>({
-    errored: false,
-    text: ''
-})
+const errorData = ref<{ errored: boolean, text: string }>({ errored: false, text: '' })
 
 const chartOptions = ref<ChartOptions<'line'>>({
     responsive: true,
@@ -102,7 +98,6 @@ const chartData = ref<ChartData<'line' | 'bar' | 'bubble'>>({
     ],
 });
 
-
 const { lineChartProps, lineChartRef, update: updateChart } = useLineChart({ chartData: (chartData as any), options: chartOptions });
 
 const externalTooltipElement = ref<null | HTMLDivElement>(null);
@@ -135,8 +130,6 @@ function externalTooltipHandler(context: { chart: any, tooltip: TooltipModel<'li
     tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
 
 }
-
-
 const selectLabels: { label: string, value: Slice }[] = [
     { label: 'Hour', value: 'hour' },
     { label: 'Day', value: 'day' },
@@ -144,14 +137,9 @@ const selectLabels: { label: string, value: Slice }[] = [
 ];
 
 const selectedLabelIndex = ref<number>(1);
-
-
-const activeProject = useActiveProject();
-
-const { safeSnapshotDates } = useSnapshot()
-
 const allDatesFull = ref<string[]>([]);
 
+
 function transformResponse(input: { _id: string, count: number }[]) {
     const data = input.map(e => e.count);
     const labels = input.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, selectLabels[selectedLabelIndex.value].value));
@@ -159,50 +147,31 @@ function transformResponse(input: { _id: string, count: number }[]) {
     return { data, labels }
 }
 
-const body = computed(() => {
-    return {
-        from: safeSnapshotDates.value.from,
-        to: safeSnapshotDates.value.to,
-        slice: selectLabels[selectedLabelIndex.value].value
-    }
-});
-
-
 function onResponseError(e: any) {
-    console.log('ON RESPONSE ERROR')
     errorData.value = { errored: true, text: e.response._data.message ?? 'Generic error' }
 }
 
 function onResponse(e: any) {
-    console.log('ON RESPONSE')
     if (e.response.status != 500) errorData.value = { errored: false, text: '' }
 }
 
-const visitsData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/visits`, {
-    method: 'POST', ...signHeaders({ v2: 'true' }), body, transform: transformResponse,
-    lazy: true, immediate: false,
-    onResponseError,
-    onResponse
+
+const visitsData = useFetch('/api/timeline/visits', {
+    headers: useComputedHeaders({ slice: selectLabels[selectedLabelIndex.value].value }), lazy: true,
+    transform: transformResponse, onResponseError, onResponse
 });
 
-const eventsData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/events`, {
-    method: 'POST', ...signHeaders({ v2: 'true' }), body, transform: transformResponse,
-    lazy: true, immediate: false,
-    onResponseError,
-    onResponse
+const sessionsData = useFetch('/api/timeline/sessions', {
+    headers: useComputedHeaders({ slice: selectLabels[selectedLabelIndex.value].value }), lazy: true,
+    transform: transformResponse, onResponseError, onResponse
 });
 
-const sessionsData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/sessions`, {
-    method: 'POST', ...signHeaders({ v2: 'true' }), body, transform: transformResponse,
-    lazy: true, immediate: false,
-    onResponseError,
-    onResponse
+const eventsData = useFetch('/api/timeline/events', {
+    headers: useComputedHeaders({ slice: selectLabels[selectedLabelIndex.value].value }), lazy: true,
+    transform: transformResponse, onResponseError, onResponse
 });
 
-
-const readyToDisplay = computed(() => {
-    return !visitsData.pending.value && !eventsData.pending.value && !sessionsData.pending.value;
-});
+const readyToDisplay = computed(() => !visitsData.pending.value && !eventsData.pending.value && !sessionsData.pending.value);
 
 watch(readyToDisplay, () => {
     if (readyToDisplay.value === true) onDataReady();
@@ -226,14 +195,10 @@ function createGradient(startColor: string) {
 }
 
 function onDataReady() {
-    console.log('DATA READY');
-
     if (!visitsData.data.value) return;
     if (!eventsData.data.value) return;
     if (!sessionsData.data.value) return;
 
-    console.log('DATA READY 2');
-
     chartData.value.labels = visitsData.data.value.labels;
 
     const maxChartY = Math.max(...visitsData.data.value.data, ...sessionsData.data.value.data);
@@ -250,9 +215,7 @@ function onDataReady() {
     chartData.value.datasets[1].backgroundColor = [createGradient('#4abde8')];
     chartData.value.datasets[2].backgroundColor = [createGradient('#fbbf24')];
 
-    console.log('UPDATE CHART');
     updateChart();
-
 }
 
 const currentTooltipData = ref<{ visits: number, events: number, sessions: number, date: string }>({
@@ -268,19 +231,7 @@ function onLegendChange(dataset: any, index: number, checked: any) {
     dataset.hidden = !checked;
 }
 
-const legendColors = [
-    '#5655d7',
-    '#4abde8',
-    '#fbbf24'
-]
-
-
-onMounted(async () => {
-    visitsData.execute();
-    eventsData.execute();
-    sessionsData.execute();
-});
-
+const legendColors = ['#5655d7', '#4abde8', '#fbbf24']
 
 const inLiveDemo = isLiveDemo();
 

dashboard/components/dashboard/BrowsersBarCard.vue

@@ -1,46 +0,0 @@
-<script lang="ts" setup>
-
-const activeProject = useActiveProject();
-
-const { safeSnapshotDates } = useSnapshot()
-
-const isShowMore = ref<boolean>(false);
-
-const headers = computed(() => {
-    return {
-        'x-from': safeSnapshotDates.value.from,
-        'x-to': safeSnapshotDates.value.to,
-        Authorization: authorizationHeaderComputed.value,
-        limit: isShowMore.value === true ? '200' : '10'
-    }
-});
-
-const browsersData = useFetch(`/api/metrics/${activeProject.value?._id}/data/browsers`, {
-    method: 'POST', headers, lazy: true, immediate: false
-});
-
-const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
-
-
-function showMore() {
-    isShowMore.value = true;
-    showDialog.value = true;
-    dialogBarData.value = browsersData.data.value || [];
-
-}
-
-onMounted(() => {
-    browsersData.execute();
-});
-
-</script>
-
-
-<template>
-    <div class="flex flex-col gap-2">
-        <DashboardBarsCard @showMore="showMore()" @dataReload="browsersData.refresh()"
-            :data="browsersData.data.value || []" desc="The browsers most used to search your website."
-            :dataIcons="false" :loading="browsersData.pending.value" label="Top Browsers" sub-label="Browsers">
-        </DashboardBarsCard>
-    </div>
-</template>

dashboard/components/dashboard/DevicesBarCard.vue

@@ -1,46 +0,0 @@
-<script lang="ts" setup>
-
-const activeProject = useActiveProject();
-
-const { safeSnapshotDates } = useSnapshot()
-
-const isShowMore = ref<boolean>(false);
-
-const headers = computed(() => {
-    return {
-        'x-from': safeSnapshotDates.value.from,
-        'x-to': safeSnapshotDates.value.to,
-        Authorization: authorizationHeaderComputed.value,
-        limit: isShowMore.value === true ? '200' : '10'
-    }
-});
-
-const devicesData = useFetch(`/api/metrics/${activeProject.value?._id}/data/devices`, {
-    method: 'POST', headers, lazy: true, immediate: false
-});
-
-const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
-
-
-function showMore() {
-    isShowMore.value = true;
-    showDialog.value = true;
-    dialogBarData.value = devicesData.data.value || [];
-
-}
-
-
-onMounted(() => {
-    devicesData.execute();
-});
-
-</script>
-
-
-<template>
-    <div class="flex flex-col gap-2">
-        <DashboardBarsCard @showMore="showMore()" @dataReload="devicesData.refresh()" :data="devicesData.data.value || []" :dataIcons="false"
-            desc="The devices most used to access your website." :loading="devicesData.pending.value" label="Top Devices"
-            sub-label="Devices"></DashboardBarsCard>
-    </div>
-</template>

dashboard/components/dashboard/EventsBarCard.vue

@@ -1,51 +0,0 @@
-<script lang="ts" setup>
-
-const router = useRouter();
-
-function goToView() {
-    router.push('/dashboard/events');
-}
-
-const activeProject = useActiveProject();
-
-const { safeSnapshotDates } = useSnapshot()
-
-const isShowMore = ref<boolean>(false);
-
-const headers = computed(() => {
-    return {
-        'x-from': safeSnapshotDates.value.from,
-        'x-to': safeSnapshotDates.value.to,
-        Authorization: authorizationHeaderComputed.value,
-        limit: isShowMore.value === true ? '200' : '10'
-    }
-});
-
-const eventsData = useFetch(`/api/metrics/${activeProject.value?._id}/data/events`, {
-    method: 'POST', headers, lazy: true, immediate: false
-});
-
-const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
-
-function showMore() {
-    isShowMore.value = true;
-    showDialog.value = true;
-    dialogBarData.value = eventsData.data.value || [];
-}
-
-onMounted(async () => {
-    eventsData.execute();
-});
-
-
-</script>
-
-
-<template>
-    <div class="flex flex-col gap-2 h-full">
-        <DashboardBarsCard @showMore="showMore()" @showRawData="goToView()"
-            desc="Most frequent user events triggered in this project" @dataReload="eventsData.refresh()"
-            :data="eventsData.data.value || []" :loading="eventsData.pending.value" label="Top Events"
-            sub-label="Events" :rawButton="!isLiveDemo()"></DashboardBarsCard>
-    </div>
-</template>

dashboard/components/dashboard/OssBarCard.vue

@@ -1,44 +0,0 @@
-<script lang="ts" setup>
-
-const activeProject = useActiveProject();
-
-const { safeSnapshotDates } = useSnapshot()
-
-const isShowMore = ref<boolean>(false);
-
-const headers = computed(() => {
-    return {
-        'x-from': safeSnapshotDates.value.from,
-        'x-to': safeSnapshotDates.value.to,
-        Authorization: authorizationHeaderComputed.value,
-        limit: isShowMore.value === true ? '200' : '10'
-    }
-});
-
-const ossData = useFetch(`/api/metrics/${activeProject.value?._id}/data/oss`, {
-    method: 'POST', headers, lazy: true, immediate: false
-});
-
-const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
-
-
-function showMore() {
-    isShowMore.value = true;
-    showDialog.value = true;
-    dialogBarData.value = ossData.data.value || [];
-}
-
-onMounted(() => {
-    ossData.execute();
-});
-
-</script>
-
-
-<template>
-    <div class="flex flex-col gap-2 h-full">
-        <DashboardBarsCard @showMore="showMore()" @dataReload="ossData.refresh()" :data="ossData.data.value || []"
-            desc="The operating systems most commonly used by your website's visitors." :dataIcons="false"
-            :loading="ossData.pending.value" label="Top OS" sub-label="OSs"></DashboardBarsCard>
-    </div>
-</template>

dashboard/components/dashboard/ReferrersBarCard.vue

@@ -1,68 +0,0 @@
-<script lang="ts" setup>
-
-import type { IconProvider } from './BarsCard.vue';
-import ReferrerBarChart from '../referrer/ReferrerBarChart.vue';
-
-function iconProvider(id: string): ReturnType<IconProvider> {
-    if (id === 'self') return ['icon', 'fas fa-link'];
-    return ['img', `https://s2.googleusercontent.com/s2/favicons?domain=${id}&sz=64`]
-}
-
-function elementTextTransformer(element: string) {
-    if (element === 'self') return 'Direct Link';
-    return element;
-}
-
-const activeProject = useActiveProject();
-
-const { safeSnapshotDates } = useSnapshot()
-
-const isShowMore = ref<boolean>(false);
-
-const headers = computed(() => {
-    return {
-        'x-from': safeSnapshotDates.value.from,
-        'x-to': safeSnapshotDates.value.to,
-        Authorization: authorizationHeaderComputed.value,
-        limit: isShowMore.value === true ? '200' : '10'
-    }
-});
-
-const referrersData = useFetch(`/api/metrics/${activeProject.value?._id}/data/referrers`, {
-    method: 'POST', headers, lazy: true, immediate: false
-});
-
-const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
-
-// const customDialog = useCustomDialog();
-
-// function onShowDetails(referrer: string) {
-//     customDialog.openDialog(ReferrerBarChart, { slice: 'day', referrer });
-// }
-
-function showMore() {
-
-    isShowMore.value = true;
-    showDialog.value = true;
-    dialogBarData.value = referrersData.data.value?.map(e => {
-        return { ...e, icon: iconProvider(e._id) }
-    }) || [];
-
-}
-
-onMounted(async () => {
-   referrersData.execute();
-});
-
-</script>
-
-
-<template>
-    <div class="flex flex-col gap-2">
-        <DashboardBarsCard @showMore="showMore()"
-            :elementTextTransformer="elementTextTransformer" :iconProvider="iconProvider"
-            @dataReload="referrersData.refresh()" :showLink=true :data="referrersData.data.value || []"
-            :interactive="false" desc="Where users find your website." :dataIcons="true" :loading="referrersData.pending.value"
-            label="Top Referrers" sub-label="Referrers"></DashboardBarsCard>
-    </div>
-</template>

dashboard/components/dashboard/WebsitesBarCard.vue

@@ -1,81 +0,0 @@
-<script lang="ts" setup>
-
-import type { VisitsWebsiteAggregated } from '~/server/api/metrics/[project_id]/data/websites';
-
-const activeProject = useActiveProject();
-
-const { safeSnapshotDates } = useSnapshot()
-
-const isShowMore = ref<boolean>(false);
-
-const currentWebsite = ref<string>("");
-
-const websitesHeaders = computed(() => {
-    return {
-        'x-from': safeSnapshotDates.value.from,
-        'x-to': safeSnapshotDates.value.to,
-        Authorization: authorizationHeaderComputed.value,
-        limit: isShowMore.value === true ? '200' : '10'
-    }
-});
-
-const pagesHeaders = computed(() => {
-    return {
-        'x-from': safeSnapshotDates.value.from,
-        'x-to': safeSnapshotDates.value.to,
-        Authorization: authorizationHeaderComputed.value,
-        limit: isShowMore.value === true ? '200' : '10',
-        'x-website-name': currentWebsite.value
-    }
-});
-
-const websitesData = useFetch(`/api/metrics/${activeProject.value?._id}/data/websites`, {
-    method: 'POST', headers: websitesHeaders, lazy: true, immediate: false
-});
-
-const pagesData = useFetch(`/api/metrics/${activeProject.value?._id}/data/pages`, {
-    method: 'POST', headers: pagesHeaders, lazy: true, immediate: false
-});
-
-const isPagesView = ref<boolean>(false);
-
-const currentData = computed(() => {
-    return isPagesView.value ? pagesData : websitesData
-})
-
-
-async function showDetails(website: string) {
-    currentWebsite.value = website;
-    pagesData.execute();
-    isPagesView.value = true;
-}
-
-async function showGeneral() {
-    websitesData.execute();
-    isPagesView.value = false;
-}
-
-const router = useRouter();
-
-function goToView() {
-    router.push('/dashboard/visits');
-}
-
-onMounted(()=>{
-    websitesData.execute();
-})
-
-</script>
-
-
-<template>
-    <div class="flex flex-col gap-2 h-full">
-        <DashboardBarsCard :hideShowMore="true" @showGeneral="showGeneral()" @showRawData="goToView()"
-            @dataReload="currentData.refresh()" @showDetails="showDetails" :data="currentData.data.value || []"
-            :loading="currentData.pending.value" :label="isPagesView ? 'Top pages' : 'Top Websites'"
-            :sub-label="isPagesView ? 'Page' : 'Website'"
-            :desc="isPagesView ? 'Most visited pages' : 'Most visited website in this project'"
-            :interactive="!isPagesView" :rawButton="!isLiveDemo()" :isDetailView="isPagesView">
-        </DashboardBarsCard>
-    </div>
-</template>