new selfhosted version

2025-12-15 17:38:36 +01:00 · 2025-11-28 14:11:51 +01:00
parent afda29997d
commit 951860f67e
1046 changed files with 72586 additions and 574750 deletions
--- a/dashboard/components/complex/actionable-chart/MainChart.vue
+++ b/dashboard/components/complex/actionable-chart/MainChart.vue
@@ -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>