146 lines
3.2 KiB
Vue
146 lines
3.2 KiB
Vue
<template>
|
|
<div
|
|
class="border border-nt-blue-light bg-blue-50 dark:bg-notion-dark-light rounded-md p-4 mb-5 w-full mx-auto mt-4 select-all"
|
|
>
|
|
<div
|
|
v-if="!form.is_pro"
|
|
class="relative"
|
|
>
|
|
<div class="absolute inset-0 z-10">
|
|
<div class="p-5 max-w-md mx-auto mt-5">
|
|
<p class="text-center">
|
|
You need a <pro-tag
|
|
upgrade-modal-title="Upgrade today to access form analytics"
|
|
class="mx-1"
|
|
/> subscription to access your form
|
|
analytics.
|
|
</p>
|
|
<p class="mt-5 text-center">
|
|
<v-button
|
|
class="w-full"
|
|
@click.prevent="subscriptionModalStore.openModal()"
|
|
>
|
|
Subscribe
|
|
</v-button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<img
|
|
src="/img/pages/forms/blurred_graph.png"
|
|
alt="Sample Graph"
|
|
class="mx-auto filter blur-md z-0"
|
|
>
|
|
</div>
|
|
<Loader
|
|
v-else-if="isLoading"
|
|
class="h-6 w-6 text-nt-blue mx-auto"
|
|
/>
|
|
<LineChart
|
|
v-else
|
|
:options="chartOptions"
|
|
:data="chartData"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Line as LineChart } from "vue-chartjs"
|
|
import {
|
|
Chart as ChartJS,
|
|
Title,
|
|
Tooltip,
|
|
Legend,
|
|
LineElement,
|
|
LinearScale,
|
|
CategoryScale,
|
|
PointElement,
|
|
} from "chart.js"
|
|
import ProTag from "~/components/global/ProTag.vue"
|
|
|
|
ChartJS.register(
|
|
Title,
|
|
Tooltip,
|
|
Legend,
|
|
LineElement,
|
|
LinearScale,
|
|
CategoryScale,
|
|
PointElement,
|
|
)
|
|
|
|
export default {
|
|
name: "FormStats",
|
|
components: {
|
|
ProTag,
|
|
LineChart,
|
|
},
|
|
props: {
|
|
form: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
setup() {
|
|
const subscriptionModalStore = useSubscriptionModalStore()
|
|
return {
|
|
subscriptionModalStore
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
isLoading: true,
|
|
chartData: {
|
|
labels: [],
|
|
datasets: [
|
|
{
|
|
label: "Form Views",
|
|
backgroundColor: "rgba(59, 130, 246, 1)",
|
|
borderColor: "rgba(59, 130, 246, 1)",
|
|
data: [],
|
|
},
|
|
{
|
|
label: "Form Submissions",
|
|
backgroundColor: "rgba(16, 185, 129, 1)",
|
|
borderColor: "rgba(16, 185, 129, 1)",
|
|
data: [],
|
|
},
|
|
],
|
|
},
|
|
chartOptions: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
precision: 0,
|
|
},
|
|
},
|
|
},
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
},
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getChartData()
|
|
},
|
|
methods: {
|
|
getChartData() {
|
|
if (!this.form || !this.form.is_pro) { return null }
|
|
this.isLoading = true
|
|
opnFetch(
|
|
"/open/workspaces/" +
|
|
this.form.workspace_id +
|
|
"/form-stats/" +
|
|
this.form.id,
|
|
).then((statsData) => {
|
|
if (statsData && statsData.views !== undefined) {
|
|
this.chartData.labels = Object.keys(statsData.views)
|
|
this.chartData.datasets[0].data = statsData.views
|
|
this.chartData.datasets[1].data = statsData.submissions
|
|
this.isLoading = false
|
|
}
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|