feat(dashboard): adding analytics dashboard embed

adocasts · Dec 23, 2024 · 9372853 · 9372853
1 parent 7f77501
commit 9372853
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 20 deletions.
diff --git a/inertia/pages/dashboard.vue b/inertia/pages/dashboard.vue
@@ -1,11 +1,24 @@
 <script setup lang="ts">
 import { Head } from '@inertiajs/vue3'
-import type { GetDashboardCountsContract } from '#actions/dashboard/get_dashboard_counts';
-import { secondsToTimestring, toLocaleString } from '~/lib/utils';
+import type { GetDashboardCountsContract } from '#actions/dashboard/get_dashboard_counts'
+import { secondsToTimestring, toLocaleString } from '~/lib/utils'
+import { nextTick, onMounted, ref } from 'vue'
 
 defineProps<{
   counts: GetDashboardCountsContract
 }>()
+
+const analytics = ref<HTMLIFrameElement | null>(null)
+
+onMounted(() => {
+  setTimeout(() => {
+    const height = analytics.value?.contentDocument?.body.clientHeight
+    console.log({ height })
+    if (height) {
+      analytics.value!.style.height = `${height}px`
+    }
+  }, 3000)
+})
 </script>
 
 <template>
@@ -14,9 +27,7 @@ defineProps<{
   <div class="grid gap-4 md:grid-cols-3 md:gap-8 lg:grid-cols-5">
     <Card>
       <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle class="text-sm font-medium">
-          Users
-        </CardTitle>
+        <CardTitle class="text-sm font-medium"> Users </CardTitle>
         <DollarSign class="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
@@ -27,9 +38,7 @@ defineProps<{
     </Card>
     <Card>
       <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle class="text-sm font-medium">
-          Posts Published
-        </CardTitle>
+        <CardTitle class="text-sm font-medium"> Posts Published </CardTitle>
         <DollarSign class="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
@@ -40,9 +49,7 @@ defineProps<{
     </Card>
     <Card>
       <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle class="text-sm font-medium">
-          Total Video Runtime
-        </CardTitle>
+        <CardTitle class="text-sm font-medium"> Total Video Runtime </CardTitle>
         <DollarSign class="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
@@ -53,9 +60,7 @@ defineProps<{
     </Card>
     <Card>
       <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle class="text-sm font-medium">
-          Active/Completed Series
-        </CardTitle>
+        <CardTitle class="text-sm font-medium"> Active/Completed Series </CardTitle>
         <DollarSign class="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
@@ -66,9 +71,7 @@ defineProps<{
     </Card>
     <Card>
       <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle class="text-sm font-medium">
-          Topics Covered
-        </CardTitle>
+        <CardTitle class="text-sm font-medium"> Topics Covered </CardTitle>
         <DollarSign class="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
@@ -78,4 +81,15 @@ defineProps<{
       </CardContent>
     </Card>
   </div>
-</template>
+
+  <div class="-mx-8">
+    <iframe
+      plausible-embed
+      src="https://analytics.adocasts.com/share/adocasts.com?auth=bto1Dk1R4evg8bUsSCT7G&embed=true&theme=light&background=#ffffff"
+      scrolling="no"
+      frameborder="0"
+      loading="lazy"
+      style="width: 1px; min-width: 100%; height: 1600px"
+    ></iframe>
+  </div>
+</template>
diff --git a/resources/views/inertia_layout.edge b/resources/views/inertia_layout.edge
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -14,6 +13,7 @@
   <div id="portal"></div>
 
   @inertia()
-</body>
 
+  <script async src="https://analytics.adocasts.com/js/embed.host.js"></script>
+</body>
 </html>