433 lines
14 KiB
Vue
433 lines
14 KiB
Vue
<script setup>
|
|
import { hexToRgb } from "@layouts/utils";
|
|
import moment from "moment";
|
|
import { onBeforeMount, onMounted } from "vue";
|
|
import VueApexCharts from "vue3-apexcharts";
|
|
import { useTheme } from "vuetify";
|
|
import { useStore } from "vuex";
|
|
const vuetifyTheme = useTheme();
|
|
const store = useStore();
|
|
const total_sessions = ref();
|
|
const total_call_time = ref();
|
|
const avg_session_time = ref(0);
|
|
const getAnalytics = ref([]);
|
|
const getAnalyticsFilter = ref([]);
|
|
const monthly_session_count = ref([]);
|
|
const currentMonth = ref();
|
|
const refChart = ref(null);
|
|
const showGraph = ref(false);
|
|
const selectedFilter = ref(null);
|
|
const monthListf = ref([]);
|
|
const isHover = ref(false);
|
|
|
|
const currentTheme = "rgb(38 84 129 / 60%)";
|
|
const variableTheme = vuetifyTheme.current.value.variables;
|
|
const labelColor = `rgba(203 40 225 / 60%)`;
|
|
const labelPrimaryColor = `rgba(rgb(132 173 21 / 60%),0.1)`;
|
|
const series = ref([
|
|
{
|
|
data: [],
|
|
},
|
|
]);
|
|
|
|
onMounted(async () => {
|
|
console.log("refChart", refChart);
|
|
});
|
|
onBeforeMount(async () => {
|
|
currentMonth.value = moment().format("MMMM") + "(Month to date)";
|
|
console.log("cm", currentMonth.value);
|
|
await store.dispatch("getAnalytics");
|
|
getAnalytics.value = store.getters.getAnalytics;
|
|
console.log("getAnalytics", getAnalytics.value);
|
|
total_sessions.value = getAnalytics.value.total_sessions;
|
|
total_call_time.value = getAnalytics.value.total_call_time;
|
|
avg_session_time.value = getAnalytics.value.avg_session_time;
|
|
// monthListf.value = getAnalytics.value.months_list;
|
|
series.value[0].data = getAnalytics.value.data;
|
|
const currentTheme = vuetifyTheme.current.value.colors;
|
|
const variableTheme = vuetifyTheme.current.value.variables;
|
|
const labelColor = `rgba(${hexToRgb(currentTheme["on-background"])})`;
|
|
const labelPrimaryColor = `rgba(${hexToRgb(currentTheme.primary)},0.1)`;
|
|
chartOptions.value.colors = [
|
|
labelPrimaryColor,
|
|
labelPrimaryColor,
|
|
labelPrimaryColor,
|
|
labelPrimaryColor,
|
|
`rgba(${hexToRgb(currentTheme.primary)}, 1)`,
|
|
labelPrimaryColor,
|
|
labelPrimaryColor,
|
|
];
|
|
|
|
chartOptions.value.xaxis.labels.style.colors = labelColor;
|
|
chartOptions.value.xaxis.categories = getAnalytics.value.months_list;
|
|
showGraph.value = true;
|
|
});
|
|
const chartOptions1 = computed(() => {
|
|
return chartOptions.value;
|
|
});
|
|
const chartOptions = ref({
|
|
chart: {
|
|
type: "bar",
|
|
toolbar: { show: false },
|
|
},
|
|
tooltip: { enabled: false },
|
|
plotOptions: {
|
|
bar: {
|
|
barHeight: "60%",
|
|
columnWidth: "40%",
|
|
startingShape: "rounded",
|
|
endingShape: "rounded",
|
|
borderRadius: 5,
|
|
distributed: true,
|
|
},
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
top: -20,
|
|
bottom: 0,
|
|
left: -10,
|
|
right: -10,
|
|
},
|
|
},
|
|
colors: [
|
|
"rgba(rgb(132 173 21 / 60%),0.1)",
|
|
"rgba(rgb(132 173 21 / 60%),0.1)",
|
|
"rgba(rgb(132 173 21 / 60%),0.1)",
|
|
"rgba(rgb(132 173 21 / 60%),0.1)",
|
|
`rgba('38 84 129 / 60%', 1)`,
|
|
"rgba(rgb(132 173 21 / 60%),0.1)",
|
|
"rgba(rgb(132 173 21 / 60%),0.1)",
|
|
],
|
|
dataLabels: { enabled: false },
|
|
legend: { show: false },
|
|
xaxis: {
|
|
categories: [],
|
|
axisBorder: { show: false },
|
|
axisTicks: { show: false },
|
|
labels: {
|
|
style: {
|
|
colors: `rgba(203 40 225 / 60%)`,
|
|
fontSize: "13px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: { labels: { show: false } },
|
|
});
|
|
const filter = [
|
|
{
|
|
value: "This Month",
|
|
key: "current_month",
|
|
},
|
|
{
|
|
value: "Past Month",
|
|
key: "1_month",
|
|
},
|
|
{
|
|
value: "Past 2 Month from today",
|
|
key: "2_months",
|
|
},
|
|
{
|
|
value: "Past 3 Month from today",
|
|
key: "3_months",
|
|
},
|
|
{
|
|
value: "Past 6 Month from today",
|
|
key: "6_months",
|
|
},
|
|
{
|
|
value: "Past 12 Month from today",
|
|
key: "12_months",
|
|
},
|
|
|
|
{
|
|
value: "All Time",
|
|
key: "all_time",
|
|
},
|
|
];
|
|
const handleDateInput = async () => {
|
|
await store.dispatch("getAnalyticsFilter", {
|
|
filter: selectedFilter.value,
|
|
});
|
|
getAnalyticsFilter.value = store.getters.getAnalyticsFilter;
|
|
console.log("getAnalyticsFilter", getAnalyticsFilter.value);
|
|
total_sessions.value = getAnalyticsFilter.value.total_sessions;
|
|
total_call_time.value = getAnalyticsFilter.value.total_call_time;
|
|
avg_session_time.value = getAnalyticsFilter.value.avg_session_time;
|
|
store.dispatch("updateIsLoading", false);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<VRow class="mb-5">
|
|
<VCol cols="12">
|
|
<v-select
|
|
v-model="selectedFilter"
|
|
:items="filter"
|
|
:label="currentMonth"
|
|
item-title="value"
|
|
item-value="key"
|
|
@update:model-value="handleDateInput"
|
|
prepend-inner-icon="mdi-calendar"
|
|
density="compact"
|
|
clearable
|
|
class="custom-select"
|
|
>
|
|
</v-select>
|
|
</VCol>
|
|
<VCol cols="12" md="4" sm="6">
|
|
<div>
|
|
<VCard
|
|
class="logistics-card-statistics cursor-pointer"
|
|
:style="
|
|
isHover
|
|
? `border-block-end-color: rgb(var(--v-theme-primary))`
|
|
: `border-block-end-color: rgba(var(--v-theme-primary),0.7)`
|
|
"
|
|
@mouseenter="isHover = true"
|
|
@mouseleave="isHover = false"
|
|
>
|
|
<VCardText>
|
|
<div class="d-flex align-center gap-x-4 mb-2">
|
|
<VAvatar variant="tonal" color="yellow" rounded>
|
|
<VIcon icon="mdi-account-group" size="24" />
|
|
</VAvatar>
|
|
<h4 class="text-h5">Total Session</h4>
|
|
</div>
|
|
<h6 class="text-body-1 mb-2"></h6>
|
|
<div class="d-flex gap-x-2 align-center">
|
|
<div class="text-body-1 font-weight-medium me-2">
|
|
{{ total_sessions }}
|
|
</div>
|
|
<span class="text-sm text-disabled"
|
|
>Total session</span
|
|
>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</div>
|
|
</VCol>
|
|
<VCol cols="12" md="4" sm="6">
|
|
<div>
|
|
<VCard
|
|
class="logistics-card-statistics cursor-pointer"
|
|
:style="
|
|
isHover
|
|
? `border-block-end-color: rgb(var(--v-theme-warning))`
|
|
: `border-block-end-color: rgba(var(--v-theme-warning),0.7)`
|
|
"
|
|
@mouseenter="isHover = true"
|
|
@mouseleave="isHover = false"
|
|
>
|
|
<VCardText>
|
|
<div class="d-flex align-center gap-x-4 mb-2">
|
|
<VAvatar variant="tonal" color="yellow" rounded>
|
|
<VIcon icon="mdi-timer" size="24" />
|
|
</VAvatar>
|
|
<h4 class="text-h5">Session Minutes</h4>
|
|
</div>
|
|
<h6 class="text-body-1 mb-2"></h6>
|
|
<div class="d-flex gap-x-2 align-center">
|
|
<div class="text-body-1 font-weight-medium me-2">
|
|
{{ total_call_time }}
|
|
</div>
|
|
<span class="text-sm text-disabled"
|
|
>Total Call Minutes
|
|
</span>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</div>
|
|
</VCol>
|
|
<VCol cols="12" md="4" sm="6">
|
|
<div>
|
|
<VCard
|
|
class="logistics-card-statistics cursor-pointer"
|
|
:style="
|
|
isHover
|
|
? `border-block-end-color: rgb(var(--v-theme-info))`
|
|
: `border-block-end-color: rgba(var(--v-theme-info),0.7)`
|
|
"
|
|
@mouseenter="isHover = true"
|
|
@mouseleave="isHover = false"
|
|
>
|
|
<VCardText>
|
|
<div class="d-flex align-center gap-x-4 mb-2">
|
|
<VAvatar variant="tonal" color="yellow" rounded>
|
|
<VIcon icon="mdi-hourglass" size="24" />
|
|
</VAvatar>
|
|
<h4 class="text-h5">Avg Session Time</h4>
|
|
</div>
|
|
<h6 class="text-body-1 mb-2"></h6>
|
|
<div class="d-flex gap-x-2 align-center">
|
|
<div class="text-body-1 font-weight-medium me-2">
|
|
{{ avg_session_time }}
|
|
</div>
|
|
<span class="text-sm text-disabled"
|
|
>Avg Session Time
|
|
</span>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</div>
|
|
</VCol>
|
|
</VRow>
|
|
<VCard>
|
|
<VCardText class="pt-6">
|
|
<VRow>
|
|
<VDialog
|
|
v-model="store.getters.getIsLoading"
|
|
width="110"
|
|
height="150"
|
|
color="primary"
|
|
>
|
|
<VCardText class="" style="color: white !important">
|
|
<div class="demo-space-x">
|
|
<VProgressCircular
|
|
:size="40"
|
|
color="primary"
|
|
indeterminate
|
|
/>
|
|
</div>
|
|
</VCardText>
|
|
</VDialog>
|
|
|
|
<VCol cols="12" lg="4" md="4" sm="12" style="display: none">
|
|
<div class="d-flex align-center gap-4">
|
|
<v-icon size="42" color="rgb(var(--v-theme-yellow))"
|
|
>mdi-account-group</v-icon
|
|
>
|
|
|
|
<div class="d-flex flex-column">
|
|
<span class="text-h5 font-weight-medium mt-1">{{
|
|
total_sessions
|
|
}}</span>
|
|
<span
|
|
class="text-sm"
|
|
color="rgb(var(--v-theme-yellow))"
|
|
>
|
|
Total Session
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</VCol>
|
|
<VCol cols="12" lg="4" md="4" sm="12" style="display: none">
|
|
<div class="d-flex align-center gap-4">
|
|
<v-icon size="42" color="rgb(var(--v-theme-yellow))"
|
|
>mdi-timer</v-icon
|
|
>
|
|
|
|
<div class="d-flex flex-column">
|
|
<span class="text-h5 font-weight-medium">{{
|
|
total_call_time
|
|
}}</span>
|
|
<span class="text-sm"> Session Minutes </span>
|
|
</div>
|
|
</div>
|
|
</VCol>
|
|
<VCol cols="12" lg="4" md="4" sm="12" style="display: none">
|
|
<div class="d-flex align-center gap-4">
|
|
<v-icon size="42" color="rgb(var(--v-theme-yellow))"
|
|
>mdi-hourglass</v-icon
|
|
>
|
|
|
|
<div class="d-flex flex-column">
|
|
<span class="text-h5 font-weight-medium">{{
|
|
avg_session_time
|
|
}}</span>
|
|
<span class="text-sm"> Avg Session Time </span>
|
|
</div>
|
|
</div>
|
|
</VCol>
|
|
<VueApexCharts
|
|
v-if="showGraph"
|
|
ref="refChart"
|
|
:options="chartOptions1"
|
|
:series="series"
|
|
:height="250"
|
|
:width="850"
|
|
class="graph-scroll"
|
|
/>
|
|
</VRow>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|
|
<style scoped>
|
|
@media (max-width: 576px) {
|
|
.graph-scroll {
|
|
overflow-x: scroll;
|
|
overflow-y: hidden;
|
|
}
|
|
}
|
|
|
|
.text-h4 {
|
|
font-size: 1.5rem !important;
|
|
font-weight: 500;
|
|
line-height: 2.375rem;
|
|
letter-spacing: normal !important;
|
|
font-family: Public Sans, sans-serif, -apple-system, blinkmacsystemfont,
|
|
Segoe UI, roboto, Helvetica Neue, arial, sans-serif, "Apple Color Emoji",
|
|
"Segoe UI Emoji", Segoe UI Symbol;
|
|
text-transform: none !important;
|
|
}
|
|
|
|
.text-body-1 {
|
|
font-size: 0.9375rem !important;
|
|
font-weight: 400;
|
|
line-height: 1.375rem;
|
|
letter-spacing: normal !important;
|
|
font-family: Public Sans, sans-serif, -apple-system, blinkmacsystemfont,
|
|
Segoe UI, roboto, Helvetica Neue, arial, sans-serif, "Apple Color Emoji",
|
|
"Segoe UI Emoji", Segoe UI Symbol;
|
|
text-transform: none !important;
|
|
}
|
|
|
|
.logistics-card-statistics {
|
|
border-block-end-style: solid;
|
|
border-block-end-width: 2px;
|
|
|
|
&:hover {
|
|
border-block-end-width: 3px;
|
|
margin-block-end: -1px;
|
|
|
|
transition: all 0.1s ease-out;
|
|
}
|
|
}
|
|
|
|
.skin--bordered {
|
|
.logistics-card-statistics {
|
|
&:hover {
|
|
margin-block-end: -2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.custom-select {
|
|
width: 100%;
|
|
}
|
|
|
|
.custom-select :deep(.v-input__control) {
|
|
min-height: 40px;
|
|
}
|
|
|
|
.custom-select :deep(.v-select__selection) {
|
|
color: var(--v-primary-base);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.custom-select :deep(.v-input__slot) {
|
|
border-color: var(--v-primary-lighten2) !important;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.custom-select:hover :deep(.v-input__slot) {
|
|
border-color: var(--v-primary-base) !important;
|
|
box-shadow: 0 0 0 1px var(--v-primary-base);
|
|
}
|
|
|
|
.text-sm {
|
|
font-size: 13px;
|
|
line-height: 1.25rem;
|
|
}
|
|
</style>
|