This commit is contained in:
Emily
2025-04-24 17:36:23 +02:00
parent a9bbc58ad1
commit eb954cac6c
17 changed files with 358 additions and 158 deletions

View File

@@ -6,6 +6,7 @@ registerChartComponents();
const props = defineProps<{
datasets: any[],
labels: string[],
legendPosition?: "left" | "top" | "right" | "bottom" | "center" | "chartArea"
}>();
const chartOptions = ref<ChartOptions<'bar'>>({
@@ -40,7 +41,7 @@ const chartOptions = ref<ChartOptions<'bar'>>({
plugins: {
legend: {
display: true,
position: 'right',
position: props.legendPosition ?? 'right',
},
title: { display: false },
tooltip: {

View File

@@ -84,23 +84,8 @@ function reloadPage() {
<div class="flex gap-6 xl:flex-row flex-col">
<div class="h-full w-full">
<CardTitled class="h-full w-full xl:min-w-[400px] xl:h-[35rem]" title="Quick setup tutorial"
sub="Quickly Set Up Litlyx in 30 Seconds!">
<div class="flex items-center justify-center h-full w-full">
<iframe class="w-full h-full min-h-[400px]"
src="https://www.youtube.com/embed/LInFoNLJ-CI?si=a97HVXpXFDgFg2Yp" title="Litlyx"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</CardTitled>
</div>
<div class="flex flex-col gap-6">
<div class="flex gap-4">
<div class="w-full">
<CardTitled title="Quick Integration"
@@ -133,27 +118,6 @@ function reloadPage() {
</div>
</div>
<div>
<div>
<CardTitled class="w-full h-full" title="Start with Wordpress." sub="Setup Litlyx analytics in 30 seconds on Wordpress.">
<template #header>
<LyxUiButton @click="Lit.event('no_visit_goto_docs')" type="secondary"
to="https://docs.litlyx.com/techs/wordpress">
Visit documentation
</LyxUiButton>
</template>
<div class="flex flex-col items-end">
<div class="justify-center w-full hidden xl:flex gap-3">
<a href="https://docs.litlyx.com/techs/wordpress">
<img class="cursor-pointer" :src="'tech-icons/wpel.png'" alt="Litlyx-Wordpress-Elementor">
</a>
</div>
</div>
</CardTitled>
</div>
</div>
<div>
<div>
<CardTitled class="w-full h-full" title="Modules"
@@ -168,28 +132,36 @@ function reloadPage() {
<div class="flex flex-col items-end">
<div class="justify-center w-full hidden xl:flex gap-3">
<a href="https://docs.litlyx.com/techs/js" target="_blank">
<img class="cursor-pointer" :src="'tech-icons/js.png'" alt="Litlyx-Javascript-Analytics">
<img class="cursor-pointer" :src="'tech-icons/js.png'"
alt="Litlyx-Javascript-Analytics">
</a>
<a href="https://docs.litlyx.com/techs/nuxt" target="_blank">
<img class="cursor-pointer" :src="'tech-icons/nuxt.png'" alt="Litlyx-Nuxt-Analytics">
<img class="cursor-pointer" :src="'tech-icons/nuxt.png'"
alt="Litlyx-Nuxt-Analytics">
</a>
<a href="https://docs.litlyx.com/techs/next" target="_blank">
<img class="cursor-pointer" :src="'tech-icons/next.png'" alt="Litlyx-Next-Analytics">
<img class="cursor-pointer" :src="'tech-icons/next.png'"
alt="Litlyx-Next-Analytics">
</a>
<a href="https://docs.litlyx.com/techs/react" target="_blank">
<img class="cursor-pointer" :src="'tech-icons/react.png'" alt="Litlyx-React-Analytics">
<img class="cursor-pointer" :src="'tech-icons/react.png'"
alt="Litlyx-React-Analytics">
</a>
<a href="https://docs.litlyx.com/techs/vue" target="_blank">
<img class="cursor-pointer" :src="'tech-icons/vue.png'" alt="Litlyx-Vue-Analytics">
<img class="cursor-pointer" :src="'tech-icons/vue.png'"
alt="Litlyx-Vue-Analytics">
</a>
<a href="https://docs.litlyx.com/techs/angular" target="_blank">
<img class="cursor-pointer" :src="'tech-icons/angular.png'" alt="Litlyx-Angular-Analytics">
<img class="cursor-pointer" :src="'tech-icons/angular.png'"
alt="Litlyx-Angular-Analytics">
</a>
<a href="https://docs.litlyx.com/techs/python" target="_blank">
<img class="cursor-pointer" :src="'tech-icons/py.png'" alt="Litlyx-Python-Analytics">
<img class="cursor-pointer" :src="'tech-icons/py.png'"
alt="Litlyx-Python-Analytics">
</a>
<a href="https://docs.litlyx.com/techs/serverless" target="_blank">
<img class="cursor-pointer" :src="'tech-icons/serverless.png'" alt="Litlyx-Serverless-Analytics">
<img class="cursor-pointer" :src="'tech-icons/serverless.png'"
alt="Litlyx-Serverless-Analytics">
</a>
</div>
@@ -197,6 +169,48 @@ function reloadPage() {
</CardTitled>
</div>
</div>
<div class="flex gap-4 w-full">
<CardTitled class="w-full h-full" title="Start with Wordpress."
sub="Setup Litlyx analytics in 30 seconds on Wordpress.">
<!-- <template #header>
<LyxUiButton @click="Lit.event('no_visit_goto_docs')" type="secondary"
to="https://docs.litlyx.com/techs/wordpress">
Visit documentation
</LyxUiButton>
</template> -->
<div class="flex flex-col items-end">
<div class="justify-center w-full hidden xl:flex gap-3">
<a href="https://docs.litlyx.com/techs/wordpress">
<img class="cursor-pointer" :src="'tech-icons/wpel.png'"
alt="Litlyx-Wordpress-Elementor">
</a>
</div>
</div>
</CardTitled>
<CardTitled class="w-full h-full" title="Start with Shopify."
sub="Setup Litlyx analytics in 30 seconds on Shopify.">
<!-- <template #header>
<LyxUiButton @click="Lit.event('no_visit_goto_docs')" type="secondary"
to="https://docs.litlyx.com/techs/shopify">
Visit documentation
</LyxUiButton>
</template> -->
<div class="flex flex-col items-end">
<div class="justify-center w-full hidden xl:flex gap-3">
<a href="https://docs.litlyx.com/techs/wordpress">
<img class="cursor-pointer" :src="'tech-icons/shopify.png'" alt="Litlyx-Shopify">
</a>
</div>
</div>
</CardTitled>
</div>
</div>
</div>

View File

@@ -72,7 +72,7 @@ const canSearch = computed(() => {
<template>
<CardTitled title="Event metadata analyzer" sub="Filter events metadata fields to analyze them" class="w-full p-4">
<CardTitled title="Analyze event metadata" sub="Filter events metadata fields to analyze them" class="w-full p-4">
<div class="">

View File

@@ -74,7 +74,7 @@ onMounted(async () => {
</div>
<AdvancedStackedBarChart v-if="!eventsStackedData.pending.value && !errorData.errored"
:datasets="eventsStackedData.data.value?.datasets || []"
:labels="eventsStackedData.data.value?.labels || []">
:labels="eventsStackedData.data.value?.labels || []" legendPosition="bottom">
</AdvancedStackedBarChart>
<div v-if="errorData.errored" class="flex items-center justify-center py-8 h-full">
{{ errorData.text }}

View File

@@ -0,0 +1,73 @@
<script setup lang="ts">
const emits = defineEmits<{
(event: 'file_selected', value: string): void;
}>();
const fileInput = ref<HTMLElement | null>(null)
const isDragging = ref(false)
const triggerFileSelect = () => { (fileInput.value as any).click() }
const handleFileChange = async (event: any) => {
const file = event.target.files[0]
if (file) {
const b64 = await getBase64FromFile(file);
emits('file_selected', b64);
}
}
function getBase64FromFile(file: File) {
return new Promise<string>(resolve => {
const reader = new FileReader();
reader.onloadend = async function () {
const base64String = reader.result;
if (!base64String) return alert('Error reading image');
resolve(base64String as string);
}
reader.readAsDataURL(file);
})
}
const handleDrop = async (event: any) => {
const file = event.dataTransfer.files[0]
isDragging.value = false
if (file) {
const b64 = await getBase64FromFile(file);
emits('file_selected', b64);
}
}
const handleDragOver = () => {
isDragging.value = true
}
const handleDragLeave = () => {
isDragging.value = false
}
</script>
<template>
<div id="drop-area"
class="w-full select-none max-w-md border-2 border-dashed border-gray-600 rounded-lg p-12 text-center cursor-pointer hover:border-blue-500 transition"
@click="triggerFileSelect" @dragover.prevent="handleDragOver" @dragleave="handleDragLeave"
@drop.prevent="handleDrop" :class="{ 'border-blue-500': isDragging }">
<p class="text-gray-400">
Drag & drop an image here
<br>
or click to select a file
</p>
<input ref="fileInput" type="file" accept="image/*" class="hidden" @change="handleFileChange" />
</div>
</template>

View File

@@ -148,7 +148,7 @@ const sessionsLabel = computed(() => {
<div v-if="!isGuest"
class="outline rounded-lg w-full px-8 py-4 flex flex-col gap-4 outline-[1px] outline-[#541c15] bg-lyx-lightmode-widget-light dark:bg-[#1e1412]">
<div class="poppins font-semibold"> This operation will reset this project to it's initial state (0
<div class="poppins font-semibold"> This operation will reset this project to its initial state (0
visits 0 events 0 sessions) </div>
<div @click="openDeleteAllDomainDataDialog()"
class="text-[#e95b61] poppins font-semibold cursor-pointer hover:text-black hover:bg-red-700 outline rounded-lg w-fit px-8 py-2 outline-[1px] outline-[#532b26] bg-lyx-lightmode-widget-light dark:bg-[#291415]">