mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-10 15:58:38 +01:00
new selfhosted version
This commit is contained in:
antonio
91
dashboard/components/complex/actionable-chart/ChartCard.vue
Normal file
91
dashboard/components/complex/actionable-chart/ChartCard.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Slice } from '~/shared/services/DateService';
|
||||
import ChartSliceSelector from './ChartSliceSelector.vue';
|
||||
import { Table } from 'lucide-vue-next'
|
||||
|
||||
useHead({
|
||||
meta: [{ name: 'robots', content: 'noindex, nofollow' }]
|
||||
});
|
||||
|
||||
const { isShared } = useShared();
|
||||
|
||||
const props = defineProps<{ modelValue: string | undefined }>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', slice: Slice): void
|
||||
}>();
|
||||
|
||||
const exporting = ref<boolean>(false);
|
||||
|
||||
async function exportEvents() {
|
||||
if (exporting.value) return;
|
||||
exporting.value = true;
|
||||
const result = await useAuthFetchSync(`/api/raw/export_events`);
|
||||
const blob = new Blob([result as any], { type: 'text/csv' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'ReportEvents.csv';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(url);
|
||||
exporting.value = false;
|
||||
}
|
||||
|
||||
async function exportVisits() {
|
||||
if (exporting.value) return;
|
||||
exporting.value = true;
|
||||
const result = await useAuthFetchSync(`/api/raw/export_visits`);
|
||||
const blob = new Blob([result as any], { type: 'text/csv' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'ReportVisits.csv';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(url);
|
||||
exporting.value = false;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="gap-2">
|
||||
<CardHeader>
|
||||
<CardTitle>
|
||||
Trend chart
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Easily match Visits, Unique sessions and Events trends.
|
||||
</CardDescription>
|
||||
<CardAction class="flex items-center h-full gap-4 flex-col md:flex-row">
|
||||
|
||||
<div v-if="!isShared" class="flex gap-4">
|
||||
<Popover>
|
||||
<PopoverTrigger>
|
||||
<Button variant="ghost">
|
||||
<Table class="size-4" /> Raw Data
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="flex flex-col gap-2 w-[12rem] px-4">
|
||||
<NuxtLink to="/raw_visits"><Button variant="outline" class="w-full">Visits</Button>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/raw_events"><Button variant="outline" class="w-full">Events</Button>
|
||||
</NuxtLink>
|
||||
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<ChartSliceSelector v-if="props.modelValue" :model-value="props.modelValue"
|
||||
@update:model-value="emit('update:modelValue', $event)"></ChartSliceSelector>
|
||||
</div>
|
||||
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<slot></slot>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
@@ -0,0 +1,48 @@
|
||||
<script setup lang="ts">
|
||||
import { ChevronDown } from 'lucide-vue-next';
|
||||
import DateService, { type Slice } from '~/shared/services/DateService';
|
||||
|
||||
const slices: Slice[] = ['hour', 'day', 'month'];
|
||||
|
||||
const props = defineProps<{ modelValue: string }>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', slice: Slice): void
|
||||
}>();
|
||||
|
||||
const snapshotStore = useSnapshotStore();
|
||||
|
||||
const availabilityMap = DateService.sliceAvailabilityMap;
|
||||
|
||||
const allowedSlices = computed(() => {
|
||||
const days = snapshotStore.duration;
|
||||
return slices.filter(e => days > availabilityMap[e][0] && days < availabilityMap[e][1]);
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger class="group cursor-pointer">
|
||||
<div class="flex gap-1 items-center w-fit">
|
||||
<div class="group-data-[state=open]:opacity-80"> {{ modelValue }} </div>
|
||||
<ChevronDown
|
||||
class="w-5 mt-[1px] transition-transform duration-400 group-data-[state=open]:rotate-180"
|
||||
/>
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent class="w-[--reka-dropdown-menu-trigger-width] min-w-[10rem] rounded-lg" align="start"
|
||||
side="bottom" :side-offset="16">
|
||||
<DropdownMenuLabel class="text-xs text-gray-500 dark:text-gray-400">
|
||||
Slice
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuItem v-for="item in allowedSlices" :key="item"
|
||||
:class="{ 'text-accent-foreground': modelValue === item }" class="gap-2 p-2"
|
||||
@click="emit('update:modelValue', item)">
|
||||
{{ item }}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</template>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
|
||||
export type TooltipData = {
|
||||
visits: number,
|
||||
events: number,
|
||||
sessions: number,
|
||||
date: string
|
||||
}
|
||||
|
||||
const props = defineProps<{ data: any }>();
|
||||
const colors = useChartColor();
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="z-[400] absolute pointer-events-none transition-all duration-300">
|
||||
|
||||
<Card class="py-2 px-3 flex flex-col gap-2 !border-violet-500/20">
|
||||
|
||||
<div class="flex gap-2 items-center">
|
||||
<div> Date: </div>
|
||||
<div v-if="data"> {{ data.date }}</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex gap-2 items-center bg-muted dark:bg-muted/20 px-2 py-1 rounded">
|
||||
<div class="size-3 rounded-full" :style="`background-color: ${colors.visits};`">
|
||||
</div>
|
||||
<div> Visits: </div>
|
||||
<div class="text-muted-foreground">{{ props.data.visits }}</div>
|
||||
</div>
|
||||
<div class="flex gap-2 items-center bg-muted dark:bg-muted/20 px-2 py-1 rounded">
|
||||
<div class="size-3 rounded-full" :style="`background-color: ${colors.sessions};`">
|
||||
</div>
|
||||
<div> Unique Visitors: </div>
|
||||
<div class="text-muted-foreground">{{ props.data.sessions }}</div>
|
||||
</div>
|
||||
<div class="flex gap-2 items-center bg-muted dark:bg-muted/20 px-2 py-1 rounded">
|
||||
<div class="size-3 rounded-full" :style="`background-color: yellow;`">
|
||||
</div>
|
||||
<div> Events: </div>
|
||||
<div class="text-muted-foreground">{{ props.data.events }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
161
dashboard/components/complex/actionable-chart/MainChart.vue
Normal file
161
dashboard/components/complex/actionable-chart/MainChart.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<script lang="ts" setup>
|
||||
import type { ChartData, ChartOptions, TooltipModel } from 'chart.js';
|
||||
import { useLineChart, LineChart } from 'vue-chart-3';
|
||||
import { type Slice } from '~/shared/services/DateService';
|
||||
|
||||
export type ActionableChartData = {
|
||||
labels: string[],
|
||||
visits: number[],
|
||||
sessions: number[],
|
||||
events: { x: number, y: number, r: number, r2: any }[],
|
||||
slice: Slice,
|
||||
todayIndex: number,
|
||||
tooltipHandler?: any,
|
||||
showViews?: boolean,
|
||||
showVisitors?: boolean,
|
||||
showEvents?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<{ data: ActionableChartData }>();
|
||||
|
||||
const chartColor = useChartColor();
|
||||
|
||||
const chartOptions = shallowRef<ChartOptions<'line'>>({
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'nearest',
|
||||
axis: 'x',
|
||||
includeInvisible: true
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
ticks: { display: true },
|
||||
grid: {
|
||||
display: true,
|
||||
drawBorder: false,
|
||||
color: '#CCCCCC22',
|
||||
// borderDash: [5, 10]
|
||||
},
|
||||
beginAtZero: true,
|
||||
},
|
||||
x: {
|
||||
ticks: { display: true },
|
||||
stacked: false,
|
||||
offset: false,
|
||||
grid: {
|
||||
display: true,
|
||||
drawBorder: false,
|
||||
color: '#CCCCCC22',
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
title: { display: false },
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
position: 'nearest',
|
||||
external: props.data.tooltipHandler
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const chartData = shallowRef<ChartData<'line' | 'bar' | 'bubble'>>(getChartData());
|
||||
|
||||
function getChartData(): ChartData<'line' | 'bar' | 'bubble'> {
|
||||
|
||||
return {
|
||||
labels: props.data.labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Visits',
|
||||
data: props.data.visits,
|
||||
backgroundColor: [`${chartColor.visits}`],
|
||||
borderColor: `${chartColor.visits}`,
|
||||
borderWidth: 4,
|
||||
fill: true,
|
||||
tension: 0.35,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 10,
|
||||
hoverBackgroundColor: `${chartColor.visits}`,
|
||||
hoverBorderColor: 'white',
|
||||
hoverBorderWidth: 2,
|
||||
hidden: props.data.showViews != true,
|
||||
segment: {
|
||||
borderColor(ctx, options) {
|
||||
const todayIndex = props.data.todayIndex;
|
||||
if (!todayIndex || todayIndex == -1) return `${chartColor.visits}`;
|
||||
if (ctx.p1DataIndex > todayIndex - 1) return `${chartColor.visits}00`;
|
||||
return `${chartColor.visits}`
|
||||
},
|
||||
borderDash(ctx, options) {
|
||||
const todayIndex = props.data.todayIndex;
|
||||
if (!todayIndex || todayIndex == -1) return undefined;
|
||||
if (ctx.p1DataIndex == todayIndex - 1) return [3, 5];
|
||||
return undefined;
|
||||
},
|
||||
backgroundColor(ctx, options) {
|
||||
const todayIndex = props.data.todayIndex;
|
||||
if (!todayIndex || todayIndex == -1) return `${chartColor.visits}00`;
|
||||
if (ctx.p1DataIndex >= todayIndex) return `${chartColor.visits}00`;
|
||||
return `${chartColor.visits}00`;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Unique visitors',
|
||||
data: props.data.sessions,
|
||||
backgroundColor: props.data.sessions.map((e, i) => {
|
||||
const todayIndex = props.data.todayIndex;
|
||||
if (i == todayIndex - 1) return `${chartColor.sessions}22`;
|
||||
return `${chartColor.sessions}00`;
|
||||
}),
|
||||
borderColor: `${chartColor.sessions}`,
|
||||
borderWidth: 2,
|
||||
hoverBackgroundColor: `${chartColor.sessions}22`,
|
||||
hoverBorderColor: `${chartColor.sessions}`,
|
||||
hoverBorderWidth: 2,
|
||||
hidden: props.data.showVisitors != true,
|
||||
type: 'bar',
|
||||
// barThickness: 20,
|
||||
borderSkipped: props.data.sessions.map((e, i) => {
|
||||
const todayIndex = props.data.todayIndex;
|
||||
if (i == todayIndex - 1) return true;
|
||||
return 'bottom';
|
||||
}),
|
||||
},
|
||||
{
|
||||
label: 'Events',
|
||||
data: props.data.events,
|
||||
backgroundColor: props.data.sessions.map((e, i) => {
|
||||
const todayIndex = props.data.todayIndex;
|
||||
if (i == todayIndex - 1) return `#fbbf2422`;
|
||||
return `#fbbf2400`;
|
||||
}),
|
||||
borderWidth: 2,
|
||||
hoverBackgroundColor: '#fbbf2444',
|
||||
hoverBorderColor: '#fbbf24',
|
||||
hoverBorderWidth: 2,
|
||||
hidden: props.data.showEvents != true,
|
||||
type: 'bubble',
|
||||
stack: 'combined',
|
||||
borderColor: ["#fbbf24"],
|
||||
}
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
watch(props, () => {
|
||||
chartData.value = getChartData();
|
||||
})
|
||||
|
||||
|
||||
const { lineChartProps, lineChartRef, update: updateChart } = useLineChart({ chartData: (chartData as any), options: chartOptions });
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LineChart v-if="chartData" ref="lineChartRef" class="w-full h-full" v-bind="lineChartProps"> </LineChart>
|
||||
</template>
|
||||
Reference in New Issue
Block a user