mirror of
https://github.com/plausible/analytics.git
synced 2024-11-29 14:04:12 +03:00
b9ec38038c
* Update applications * Clone community config * Move modules to experimental dir * Update runtime config * Apply first set of compile-time conditionals * Move funnel schemas to experimental * Make funnel schema-less build compile * Use experimental/lib for elixir code * Move JS funnels to experimental * Clean up conditional rendering * Tidy up the pipeline * Make two builds pass tests without warnings * Reuse existing dotenvs * Do a bunch of renames * Clean up naming * Run secondary CI * Update router * Remove RewriteFunnelDupes migration Tests were disabled already and it was a one-off shot * Fixup quota mixins * Add moduledoc * Change MIX_ENV for seconary test run * Skip crm on small * !fixup * Exclude flags pipeline * Update lib/plausible_web/controllers/stats_controller.ex Co-authored-by: Adrian Gruntkowski <adrian.gruntkowski@gmail.com> --------- Co-authored-by: Adrian Gruntkowski <adrian.gruntkowski@gmail.com>
86 lines
3.2 KiB
JavaScript
86 lines
3.2 KiB
JavaScript
export default function FunnelTooltip(palette, funnel) {
|
|
return (context) => {
|
|
const tooltipModel = context.tooltip
|
|
const dataIndex = tooltipModel.dataPoints[0].dataIndex
|
|
const offset = document.getElementById("funnel").getBoundingClientRect()
|
|
let tooltipEl = document.getElementById('chartjs-tooltip')
|
|
|
|
if (!tooltipEl) {
|
|
tooltipEl = document.createElement('div')
|
|
tooltipEl.id = 'chartjs-tooltip'
|
|
tooltipEl.style.display = 'none'
|
|
tooltipEl.style.opacity = 0
|
|
document.body.appendChild(tooltipEl)
|
|
}
|
|
|
|
if (tooltipEl && offset && window.innerWidth < 768) {
|
|
tooltipEl.style.top = offset.y + offset.height + window.scrollY + 15 + 'px'
|
|
tooltipEl.style.left = offset.x + 'px'
|
|
tooltipEl.style.right = null
|
|
tooltipEl.style.opacity = 1
|
|
}
|
|
|
|
if (tooltipModel.opacity === 0) {
|
|
tooltipEl.style.display = 'none'
|
|
return
|
|
}
|
|
|
|
|
|
if (tooltipModel.body) {
|
|
const currentStep = funnel.steps[dataIndex]
|
|
const previousStep = (dataIndex > 0) ? funnel.steps[dataIndex - 1] : null
|
|
|
|
tooltipEl.innerHTML = `
|
|
<aside class="text-gray-100 flex flex-col">
|
|
<div class="flex justify-between items-center border-b-2 border-gray-700 pb-2">
|
|
<span class="font-semibold mr-4 text-lg">${previousStep ? `<span class="mr-2">${previousStep.label}</span>` : ""}
|
|
<span class="text-gray-500 mr-2">→</span>
|
|
${tooltipModel.title}
|
|
</span>
|
|
</div>
|
|
|
|
<table class="min-w-full mt-2">
|
|
<tr>
|
|
<th>
|
|
<span class="flex items-center mr-4">
|
|
<div class="w-3 h-3 mr-1 rounded-full ${palette.visitorsLegendClass}"></div>
|
|
<span>
|
|
${dataIndex == 0 ? "Entered the funnel" : "Visitors"}
|
|
</span>
|
|
</span>
|
|
</th>
|
|
<td class="text-right font-bold px-4">
|
|
<span>
|
|
${dataIndex == 0 ? funnel.entering_visitors.toLocaleString() : currentStep.visitors.toLocaleString()}
|
|
</span>
|
|
</td>
|
|
<td class="text-right text-sm">
|
|
<span>
|
|
${dataIndex == 0 ? funnel.entering_visitors_percentage : currentStep.conversion_rate_step}%
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
<span class="flex items-center">
|
|
<div class="w-3 h-3 mr-1 rounded-full ${palette.dropoffLegendClass}"></div>
|
|
<span>
|
|
${dataIndex == 0 ? "Never entered the funnel" : "Dropoff"}
|
|
</span>
|
|
</span>
|
|
</th>
|
|
<td class="text-right font-bold px-4">
|
|
<span>${dataIndex == 0 ? funnel.never_entering_visitors.toLocaleString() : currentStep.dropoff.toLocaleString()}</span>
|
|
</td >
|
|
<td class="text-right text-sm">
|
|
<span>${dataIndex == 0 ? funnel.never_entering_visitors_percentage : currentStep.dropoff_percentage}%</span>
|
|
</td>
|
|
</tr >
|
|
</table >
|
|
</aside >
|
|
`
|
|
}
|
|
tooltipEl.style.display = null
|
|
}
|
|
}
|