|
| 1 | +<script setup lang="ts"> |
| 2 | +import type { ChartData, ChartOptions } from 'chart.js'; |
| 3 | +import { defineChartComponent } from 'vue-chart-3'; |
| 4 | +registerChartComponents(); |
| 5 | +
|
| 6 | +const FunnelChart = defineChartComponent('funnel', 'funnel'); |
| 7 | +
|
| 8 | +const chartOptions = ref<ChartOptions<'funnel'>>({ |
| 9 | + responsive: true, |
| 10 | + maintainAspectRatio: false, |
| 11 | + interaction: { |
| 12 | + intersect: false, |
| 13 | + mode: 'nearest', |
| 14 | + axis: 'x', |
| 15 | + includeInvisible: true |
| 16 | + }, |
| 17 | + scales: { |
| 18 | + y: { |
| 19 | + ticks: { display: true }, |
| 20 | + grid: { |
| 21 | + display: true, |
| 22 | + drawBorder: false, |
| 23 | + color: '#CCCCCC22', |
| 24 | + // borderDash: [5, 10] |
| 25 | + }, |
| 26 | + }, |
| 27 | + x: { |
| 28 | + ticks: { display: true }, |
| 29 | + grid: { |
| 30 | + display: true, |
| 31 | + drawBorder: false, |
| 32 | + color: '#CCCCCC22', |
| 33 | + } |
| 34 | + } |
| 35 | + }, |
| 36 | + plugins: { |
| 37 | + legend: { display: false }, |
| 38 | + title: { display: false }, |
| 39 | + tooltip: { |
| 40 | + enabled: true, |
| 41 | + backgroundColor: 'rgba(0, 0, 0, 0.8)', |
| 42 | + titleFont: { size: 16, weight: 'bold' }, |
| 43 | + bodyFont: { size: 14 }, |
| 44 | + padding: 10, |
| 45 | + cornerRadius: 4, |
| 46 | + boxPadding: 10, |
| 47 | + caretPadding: 20, |
| 48 | + yAlign: 'bottom', |
| 49 | + xAlign: 'center', |
| 50 | + } |
| 51 | + }, |
| 52 | +}); |
| 53 | +
|
| 54 | +
|
| 55 | +const chartData = ref<ChartData<'funnel'>>({ |
| 56 | + labels: [], |
| 57 | + datasets: [ |
| 58 | + { |
| 59 | + data: [], |
| 60 | + backgroundColor: ['#5680F8' + '77'], |
| 61 | + // borderColor: '#0000CC', |
| 62 | + // borderWidth: 4, |
| 63 | + fill: true, |
| 64 | + tension: 0.45, |
| 65 | + pointRadius: 0, |
| 66 | + pointHoverRadius: 10, |
| 67 | + hoverBackgroundColor: '#5680F8', |
| 68 | + // hoverBorderColor: 'white', |
| 69 | + // hoverBorderWidth: 2, |
| 70 | + }, |
| 71 | + ], |
| 72 | +}); |
| 73 | +
|
| 74 | +
|
| 75 | +onMounted(async () => { |
| 76 | +
|
| 77 | + // const c = document.createElement('canvas'); |
| 78 | + // const ctx = c.getContext("2d"); |
| 79 | + // let gradient: any = `${'#0000CC'}22`; |
| 80 | + // if (ctx) { |
| 81 | + // gradient = ctx.createLinearGradient(0, 25, 0, 300); |
| 82 | + // gradient.addColorStop(0, `${'#0000CC'}99`); |
| 83 | + // gradient.addColorStop(0.35, `${'#0000CC'}66`); |
| 84 | + // gradient.addColorStop(1, `${'#0000CC'}22`); |
| 85 | + // } else { |
| 86 | + // console.warn('Cannot get context for gradient'); |
| 87 | + // } |
| 88 | +
|
| 89 | + // chartData.value.datasets[0].backgroundColor = [gradient]; |
| 90 | +
|
| 91 | +}); |
| 92 | +
|
| 93 | +const activeProjectId = useActiveProjectId(); |
| 94 | +const { safeSnapshotDates } = useSnapshot(); |
| 95 | +
|
| 96 | +const eventsCount = await useFetch<{ _id: string, count: number }[]>(`/api/data/query`, { |
| 97 | + ...signHeaders({ |
| 98 | + 'x-pid': activeProjectId.data.value || '', |
| 99 | + 'x-schema': 'events', |
| 100 | + 'x-from': safeSnapshotDates.value.from, |
| 101 | + 'x-to': safeSnapshotDates.value.to, |
| 102 | + 'x-query-limit': '1000' |
| 103 | + }), lazy: true |
| 104 | +}); |
| 105 | +
|
| 106 | +
|
| 107 | +const enabledEvents = ref<string[]>([]); |
| 108 | +
|
| 109 | +async function onEventCheck(eventName: string) { |
| 110 | + const index = enabledEvents.value.indexOf(eventName); |
| 111 | + if (index == -1) { |
| 112 | + enabledEvents.value.push(eventName); |
| 113 | + } else { |
| 114 | + enabledEvents.value.splice(index, 1); |
| 115 | + } |
| 116 | +
|
| 117 | +
|
| 118 | + chartData.value.labels = enabledEvents.value; |
| 119 | + chartData.value.datasets[0].data = []; |
| 120 | +
|
| 121 | + for (const enabledEvent of enabledEvents.value) { |
| 122 | + const target = (eventsCount.data.value ?? []).find(e => e._id == enabledEvent); |
| 123 | + chartData.value.datasets[0].data.push(target?.count || 0); |
| 124 | + } |
| 125 | +} |
| 126 | +
|
| 127 | +</script> |
| 128 | + |
| 129 | + |
| 130 | +<template> |
| 131 | + <CardTitled title="Funnel" sub="Funnel events"> |
| 132 | + <div class="flex gap-2 justify-between"> |
| 133 | + <div> |
| 134 | + <div class="min-w-[20rem]"> |
| 135 | + Select two or more events |
| 136 | + </div> |
| 137 | + <div v-for="event of eventsCount.data.value"> |
| 138 | + <UCheckbox @change="onEventCheck(event._id)" :value="enabledEvents.includes(event._id)" |
| 139 | + :label="event._id"> |
| 140 | + </UCheckbox> |
| 141 | + </div> |
| 142 | + </div> |
| 143 | + <div class="grow"> |
| 144 | + <FunnelChart :chart-data="chartData" :options="chartOptions"> </FunnelChart> |
| 145 | + </div> |
| 146 | + </div> |
| 147 | + </CardTitled> |
| 148 | +</template> |
0 commit comments