{"version":3,"file":"survey-page-statistics.js","sources":["../Views/Surveys/SurveyPageStatistics/SurveyChart/surveyChartConfig.ts","../Views/Surveys/SurveyPageStatistics/SurveyChart/SurveyChart.vue","../Views/Surveys/SurveyPageStatistics/SurveyPageStatistics.entry.ts"],"sourcesContent":["import { ChartData, ChartOptions, TooltipItem } from 'chart.js';\r\nimport { PageTimeStat } from '../interfaces';\r\n\r\nexport function surveyChartOptions(pageTimeStats: PageTimeStat[]): ChartOptions<'bar' | 'line'> {\r\n    return {\r\n        responsive: true,\r\n        plugins: {\r\n            tooltip: {\r\n                callbacks: {\r\n                    label: (tooltipItem: TooltipItem<'bar' | 'line'>) => {\r\n                        const pageCount = pageTimeStats[tooltipItem.dataIndex].PageCount;\r\n                        const mainLabel =\r\n                            tooltipItem.datasetIndex === 0 ? `${tooltipItem.raw} ${$Resources.SurveyPageSeconds}` : `${$Resources.SurveyViews} ${pageCount}`;\r\n                        return mainLabel;\r\n                    },\r\n                    labelColor: (tooltipItem: TooltipItem<'bar' | 'line'>) => {\r\n                        const index = tooltipItem.datasetIndex;\r\n                        if (index === 1) {\r\n                            return {\r\n                                backgroundColor: 'rgba(255, 0, 255, 1)',\r\n                                borderColor: 'rgba(255, 0, 255, 1)',\r\n                            };\r\n                        } else {\r\n                            return {\r\n                                backgroundColor: 'rgba(31,169,176,1)',\r\n                                borderColor: 'rgba(31,169,176,1)',\r\n                            };\r\n                        }\r\n                    },\r\n                    title: (tooltipItems: TooltipItem<'bar' | 'line'>[]) => {\r\n                        const dataIndex = tooltipItems[0].dataIndex;\r\n                        const fullLabel = pageTimeStats?.[dataIndex]\r\n                            ? `${$Resources.SurveyPage} ${pageTimeStats[dataIndex].PageIndex} - ${pageTimeStats[dataIndex].FirstQuestion}`\r\n                            : '';\r\n                        return fullLabel;\r\n                    },\r\n                    footer: (tooltipItems: TooltipItem<'bar' | 'line'>[]) => {\r\n                        const pageCount = pageTimeStats[tooltipItems[0].dataIndex].PageCount;\r\n                        const firstPageCount = pageTimeStats[0]?.PageCount || 1;\r\n                        const percentage = ((pageCount / firstPageCount) * 100).toFixed(0);\r\n                        const percentageLabel = `${percentage}% ${$Resources.SurveyGraphLabel}`;\r\n                        return percentageLabel;\r\n                    },\r\n                },\r\n            },\r\n        },\r\n        scales: {\r\n            y: {\r\n                beginAtZero: true,\r\n                type: 'linear',\r\n                position: 'left',\r\n                title: {\r\n                    display: true,\r\n                    text: $Resources.SurveyPageTimeDuration,\r\n                },\r\n                ticks: {\r\n                    callback: (value: string | number) => {\r\n                        if (typeof value === 'number') {\r\n                            if (value < 60) {\r\n                                return `${value} s`;\r\n                            } else {\r\n                                const minutes = Math.floor(value / 60);\r\n                                const seconds = value % 60;\r\n                                return `${minutes}:${seconds < 10 ? '0' : ''}${seconds} min`;\r\n                            }\r\n                        }\r\n                        return value;\r\n                    },\r\n                },\r\n            },\r\n            y1: {\r\n                beginAtZero: true,\r\n                type: 'linear',\r\n                position: 'right',\r\n                title: {\r\n                    display: true,\r\n                    text: $Resources.SurveyVisitsOnPageCount,\r\n                },\r\n                grid: {\r\n                    drawOnChartArea: false,\r\n                },\r\n            },\r\n        },\r\n    };\r\n}\r\n\r\nexport function surveyChartData(pageTimeStats?: PageTimeStat[]): ChartData<'bar' | 'line'> {\r\n    return {\r\n        labels: pageTimeStats?.map((x) => {\r\n            const labelText = `${$Resources.SurveyPage} ${x.PageIndex.toString()} - ${x.FirstQuestion}`;\r\n            return labelText.length > 14 ? `${labelText.substring(0, 14)}...` : labelText;\r\n        }),\r\n        datasets: [\r\n            {\r\n                type: 'bar' as const,\r\n                label: $Resources.SurveyPageTimeDuration,\r\n                data: pageTimeStats?.map((x) => +x.AverageDuration.toFixed(1)) ?? [],\r\n                backgroundColor: 'rgba(31,169,176,1)',\r\n                borderColor: 'rgba(31,169,176,1)',\r\n                borderWidth: 1,\r\n                yAxisID: 'y',\r\n                order: 2,\r\n                maxBarThickness: 90,\r\n            },\r\n            {\r\n                type: 'line' as const,\r\n                label: $Resources.SurveyVisitsOnPageCount,\r\n                data: pageTimeStats?.map((x) => x.PageCount) ?? [],\r\n                backgroundColor: 'rgba(255, 0, 255, 1)',\r\n                borderColor: 'rgba(255, 0, 255, 1)',\r\n                borderWidth: 2,\r\n                fill: false,\r\n                yAxisID: 'y1',\r\n                order: 1,\r\n            },\r\n        ],\r\n    };\r\n}\r\n","<script lang=\"ts\" setup>\r\n    import {\r\n        BarController,\r\n        BarElement,\r\n        CategoryScale,\r\n        Chart as ChartJS,\r\n        Legend,\r\n        LinearScale,\r\n        LineController,\r\n        LineElement,\r\n        PointElement,\r\n        Title,\r\n        Tooltip,\r\n    } from 'chart.js';\r\n    import { reactive } from 'vue';\r\n    import { Chart } from 'vue-chartjs';\r\n    import { PageTimeStat } from '../interfaces';\r\n    import { surveyChartData, surveyChartOptions } from './surveyChartConfig';\r\n\r\n    const { pageTimeStats } = defineProps<{\r\n        pageTimeStats: PageTimeStat[];\r\n    }>();\r\n\r\n    ChartJS.register(CategoryScale, LinearScale, BarElement, LineElement, PointElement, Title, Tooltip, Legend, BarController, LineController);\r\n    const chartData = reactive(surveyChartData(pageTimeStats));\r\n    const options = surveyChartOptions(pageTimeStats);\r\n</script>\r\n<template>\r\n    <template v-if=\"chartData?.datasets?.length > 0\">\r\n        <div class=\"chart-wrapper\">\r\n            <Chart type=\"bar\" :data=\"chartData\" :options=\"options\" />\r\n        </div>\r\n    </template>\r\n    <template v-else>\r\n        <div class=\"chart-wrapper\">\r\n            <p>{{ $Resources.SurveyChartNoData }}</p>\r\n        </div>\r\n    </template>\r\n</template>\r\n\r\n<style scoped>\r\n    .chart-wrapper {\r\n        position: relative;\r\n        display: flex;\r\n    }\r\n</style>\r\n","import { rootElement } from '@shared/setup';\r\nimport SurveyPageStatistics from './SurveyPageStatistics.vue';\r\n\r\nconst init = async () => {\r\n    rootElement({\r\n        name: 'SurveyPageStatistics', // pascal, camel & kebab-case are valid\r\n        component: SurveyPageStatistics,\r\n        vm: {},\r\n        contextComponents: ['<div>Waiting...</div>'],\r\n    });\r\n};\r\n\r\ninit();\r\n"],"names":["surveyChartOptions","pageTimeStats","tooltipItem","pageCount","tooltipItems","dataIndex","firstPageCount","_a","value","minutes","seconds","surveyChartData","x","labelText","ChartJS","CategoryScale","LinearScale","BarElement","LineElement","PointElement","Title","Tooltip","Legend","BarController","LineController","chartData","reactive","__props","options","init","rootElement","SurveyPageStatistics"],"mappings":"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"}