first commit
This commit is contained in:
Inshal
42
resources/js/views/dashboards/analytics/AnalyticsAward.vue
Normal file
42
resources/js/views/dashboards/analytics/AnalyticsAward.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<script setup>
|
||||
import trophy from '@images/misc/trophy.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="position-relative">
|
||||
<VCardText>
|
||||
<div class="mb-2">
|
||||
<h5 class="text-h5">
|
||||
Congratulations John! <span class="text-high-emphasis">🎉</span>
|
||||
</h5>
|
||||
<div class="text-body-1">
|
||||
Best seller of the month
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="text-h4 text-primary">
|
||||
$42.8k
|
||||
</h4>
|
||||
<div class="text-body-1 mb-2">
|
||||
78% of target <span class="text-high-emphasis">🚀</span>
|
||||
</div>
|
||||
<VBtn size="small">
|
||||
View Sales
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<!-- Trophy -->
|
||||
<VImg
|
||||
:src="trophy"
|
||||
class="trophy"
|
||||
/>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.v-card .trophy {
|
||||
position: absolute;
|
||||
inline-size: 5.188rem;
|
||||
inset-block-end: 1.25rem;
|
||||
inset-inline-end: 1.25rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,194 @@
|
||||
<script setup>
|
||||
import americanBank from '@images/logos/american-bank.png'
|
||||
import aws from '@images/logos/aws.png'
|
||||
import citiBank from '@images/logos/citi-bank.png'
|
||||
import digitalOcean from '@images/logos/digital-ocean.png'
|
||||
import github from '@images/logos/github.png'
|
||||
import google from '@images/logos/google.png'
|
||||
import gumroad from '@images/logos/gumroad.png'
|
||||
import mastercardLabel from '@images/logos/mastercard-label.png'
|
||||
import slack from '@images/logos/slack.png'
|
||||
import stripe from '@images/logos/stripe.png'
|
||||
|
||||
const deposits = [
|
||||
{
|
||||
title: 'Gumroad Account',
|
||||
subtitle: 'Sell UI Kit',
|
||||
amount: '+$4,650',
|
||||
logo: gumroad,
|
||||
},
|
||||
{
|
||||
title: 'Mastercard',
|
||||
subtitle: 'Wallet deposit',
|
||||
amount: '+$92,705',
|
||||
logo: mastercardLabel,
|
||||
},
|
||||
{
|
||||
title: 'Stripe Account',
|
||||
subtitle: 'iOS Application',
|
||||
amount: '+$957',
|
||||
logo: stripe,
|
||||
},
|
||||
{
|
||||
title: 'American Bank',
|
||||
subtitle: 'American Bank',
|
||||
amount: '+$6,837',
|
||||
logo: americanBank,
|
||||
},
|
||||
{
|
||||
title: 'Bank Account',
|
||||
subtitle: 'Wallet deposit',
|
||||
amount: '+$8,934',
|
||||
logo: citiBank,
|
||||
},
|
||||
]
|
||||
|
||||
const withdraws = [
|
||||
{
|
||||
title: 'Google Adsense',
|
||||
subtitle: 'PayPal deposit',
|
||||
amount: '-$145',
|
||||
logo: google,
|
||||
},
|
||||
{
|
||||
title: 'GitHub Enterprise',
|
||||
subtitle: 'Security & compliance',
|
||||
amount: '-$1870',
|
||||
logo: github,
|
||||
},
|
||||
{
|
||||
title: 'Upgrade Slack Plan',
|
||||
subtitle: 'Debit card deposit',
|
||||
amount: '-$450',
|
||||
logo: slack,
|
||||
},
|
||||
{
|
||||
title: 'DigitalOcean',
|
||||
subtitle: 'Cloud Hosting',
|
||||
amount: '-$540',
|
||||
logo: digitalOcean,
|
||||
},
|
||||
{
|
||||
title: 'AWS Account',
|
||||
subtitle: 'Choosing a Cloud Platform',
|
||||
amount: '-$21',
|
||||
logo: aws,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VRow no-gutters>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VCardItem>
|
||||
<VCardTitle>Deposit</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<h6 class="text-h6">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="text-primary"
|
||||
>View All</a>
|
||||
</h6>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="deposit in deposits"
|
||||
:key="deposit.logo"
|
||||
>
|
||||
<template #prepend>
|
||||
<div class="me-4">
|
||||
<VImg
|
||||
:height="30"
|
||||
:width="30"
|
||||
:src="deposit.logo"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="font-weight-medium mb-1">
|
||||
{{ deposit.title }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="text-body-1">
|
||||
{{ deposit.subtitle }}
|
||||
</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VListItemAction class="text-success font-weight-medium">
|
||||
{{ deposit.amount }}
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
|
||||
<VDivider :vertical="$vuetify.display.mdAndUp" />
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VCardItem>
|
||||
<VCardTitle>Withdraw</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<h6 class="text-h6">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="text-primary"
|
||||
>View All</a>
|
||||
</h6>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="withdraw in withdraws"
|
||||
:key="withdraw.logo"
|
||||
>
|
||||
<template #prepend>
|
||||
<div class="me-4">
|
||||
<VImg
|
||||
:height="30"
|
||||
:width="30"
|
||||
:src="withdraw.logo"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="font-weight-medium mb-1">
|
||||
{{ withdraw.title }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="text-body-1">
|
||||
{{ withdraw.subtitle }}
|
||||
</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VListItemAction>
|
||||
<span class="text-error font-weight-medium">
|
||||
{{ withdraw.amount }}
|
||||
</span>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 1.25rem;
|
||||
}
|
||||
</style>
|
||||
135
resources/js/views/dashboards/analytics/AnalyticsPerformance.vue
Normal file
135
resources/js/views/dashboards/analytics/AnalyticsPerformance.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const secondaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['medium-emphasis-opacity'] })`
|
||||
const disabledColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['disabled-opacity'] })`
|
||||
const borderColor = `rgba(${ hexToRgb(String(variableTheme.value['border-color'])) },${ variableTheme.value['border-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
colors: [
|
||||
currentTheme.value.primary,
|
||||
currentTheme.value.info,
|
||||
],
|
||||
plotOptions: {
|
||||
radar: {
|
||||
size: 110,
|
||||
polygons: {
|
||||
strokeColors: borderColor,
|
||||
connectorColors: borderColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
labels: { colors: secondaryTextColor },
|
||||
fontSize: '15px',
|
||||
markers: {
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
gradientToColors: [
|
||||
currentTheme.value.primary,
|
||||
currentTheme.value.info,
|
||||
],
|
||||
shadeIntensity: 1,
|
||||
type: 'vertical',
|
||||
opacityFrom: 1,
|
||||
opacityTo: 0.9,
|
||||
stops: [
|
||||
0,
|
||||
100,
|
||||
],
|
||||
},
|
||||
},
|
||||
labels: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
],
|
||||
markers: { size: 0 },
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: [
|
||||
disabledColor,
|
||||
disabledColor,
|
||||
disabledColor,
|
||||
disabledColor,
|
||||
disabledColor,
|
||||
disabledColor,
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: { show: false },
|
||||
grid: { show: false },
|
||||
}
|
||||
})
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Income',
|
||||
data: [
|
||||
70,
|
||||
90,
|
||||
90,
|
||||
90,
|
||||
80,
|
||||
90,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Net Worth',
|
||||
data: [
|
||||
120,
|
||||
80,
|
||||
100,
|
||||
80,
|
||||
100,
|
||||
80,
|
||||
],
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Performance</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="radar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="295"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,125 @@
|
||||
<script setup>
|
||||
const salesByCountries = [
|
||||
{
|
||||
abbr: 'US',
|
||||
amount: '$8,656k',
|
||||
country: 'United states of america',
|
||||
change: '+25.8%',
|
||||
sales: '894k',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
abbr: 'UK',
|
||||
amount: '$2,415k',
|
||||
country: 'United kingdom',
|
||||
change: '-6.2%',
|
||||
sales: '645k',
|
||||
color: 'error',
|
||||
},
|
||||
{
|
||||
abbr: 'IN',
|
||||
amount: '$865k',
|
||||
country: 'India',
|
||||
change: '+12.4%',
|
||||
sales: '148k',
|
||||
color: 'warning',
|
||||
},
|
||||
{
|
||||
abbr: 'JA',
|
||||
amount: '$745k',
|
||||
country: 'Japan',
|
||||
change: '-11.9%',
|
||||
sales: '86k',
|
||||
color: 'secondary',
|
||||
},
|
||||
{
|
||||
abbr: 'KO',
|
||||
amount: '$45k',
|
||||
country: 'Korea',
|
||||
change: '+16.2%',
|
||||
sales: '42k',
|
||||
color: 'error',
|
||||
},
|
||||
{
|
||||
abbr: 'CH',
|
||||
amount: '$12k',
|
||||
country: 'China',
|
||||
change: '+14.8%',
|
||||
sales: '8k',
|
||||
color: 'info',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Sales by Countries</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="data in salesByCountries"
|
||||
:key="data.country"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
:color="data.color"
|
||||
variant="tonal"
|
||||
size="40"
|
||||
>
|
||||
{{ data.abbr }}
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="mb-1 d-flex align-center">
|
||||
<h6 class="text-h6">
|
||||
{{ data.amount }}
|
||||
</h6>
|
||||
<VIcon
|
||||
size="24"
|
||||
:color="data.change.charAt(0) === '+' ? 'success' : 'error'"
|
||||
class="mx-1"
|
||||
>
|
||||
{{ data.change.charAt(0) === '+' ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line' }}
|
||||
</VIcon>
|
||||
<div
|
||||
:class="`${data.change.charAt(0) === '+' ? 'text-success' : 'text-error'}`"
|
||||
class="text-body-1"
|
||||
>
|
||||
{{ data.change.slice(1) }}
|
||||
</div>
|
||||
</VListItemTitle>
|
||||
|
||||
<VListItemSubtitle class="text-body-1 me-2">
|
||||
{{ data.country }}
|
||||
</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div>
|
||||
<h6 class="text-h6 mb-1">
|
||||
{{ data.sales }}
|
||||
</h6>
|
||||
<div class="text-body-2 text-disabled text-end">
|
||||
Sales
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,130 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
const currentTheme = computed(() => vuetifyTheme.current.value.colors)
|
||||
|
||||
const series = [{
|
||||
name: '2020',
|
||||
data: [
|
||||
35,
|
||||
85,
|
||||
55,
|
||||
50,
|
||||
70,
|
||||
],
|
||||
}]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const backgroundColor = currentTheme.value['track-bg']
|
||||
|
||||
return {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: false,
|
||||
width: 200,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -20,
|
||||
left: -7,
|
||||
right: 0,
|
||||
bottom: -5,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
currentTheme.value.error,
|
||||
currentTheme.value.primary,
|
||||
currentTheme.value.error,
|
||||
currentTheme.value.primary,
|
||||
currentTheme.value.primary,
|
||||
],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '20%',
|
||||
borderRadius: 4,
|
||||
distributed: true,
|
||||
colors: {
|
||||
backgroundBarColors: [
|
||||
backgroundColor,
|
||||
backgroundColor,
|
||||
backgroundColor,
|
||||
backgroundColor,
|
||||
backgroundColor,
|
||||
],
|
||||
backgroundBarRadius: 5,
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: { show: false },
|
||||
dataLabels: { enabled: false },
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false },
|
||||
},
|
||||
yaxis: { show: false },
|
||||
tooltip: { enabled: false },
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1628,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '20%',
|
||||
borderRadius: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 960,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '15%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 725,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '15%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<h4 class="text-h4">
|
||||
2,856
|
||||
</h4>
|
||||
|
||||
<VueApexCharts
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="80"
|
||||
class="my-1"
|
||||
/>
|
||||
|
||||
<h6 class="text-h6 text-center">
|
||||
Sessions
|
||||
</h6>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,105 @@
|
||||
<script setup>
|
||||
import aviato from '@images/logos/aviato.png'
|
||||
import bitbank from '@images/logos/bitbank.png'
|
||||
import zipcar from '@images/logos/zipcar.png'
|
||||
|
||||
const earnings = [
|
||||
{
|
||||
avatar: zipcar,
|
||||
title: 'Zipcar',
|
||||
subtitle: 'Vuejs, React & HTML',
|
||||
amount: '$24,895.65',
|
||||
progress: 'primary',
|
||||
},
|
||||
{
|
||||
avatar: bitbank,
|
||||
title: 'Bitbank',
|
||||
subtitle: 'Sketch, Figma & XD',
|
||||
amount: '$8,6500.20',
|
||||
progress: 'info',
|
||||
},
|
||||
{
|
||||
avatar: aviato,
|
||||
title: 'Aviato',
|
||||
subtitle: 'HTML & Anguler',
|
||||
amount: '$1,2450.80',
|
||||
progress: 'secondary',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Total Earning</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<div class="d-flex align-center">
|
||||
<h3 class="text-h3">
|
||||
$24,895
|
||||
</h3>
|
||||
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="ri-arrow-up-s-line"
|
||||
color="success"
|
||||
/>
|
||||
<div class="text-success">
|
||||
10%
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-body-1 mb-12">
|
||||
Compared to $84,325 last year
|
||||
</div>
|
||||
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="earning in earnings"
|
||||
:key="earning.title"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
rounded
|
||||
:image="earning.avatar"
|
||||
variant="tonal"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="font-weight-medium">
|
||||
{{ earning.title }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="text-body-1">
|
||||
{{ earning.subtitle }}
|
||||
</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div>
|
||||
<h6 class="text-h6 mb-2">
|
||||
{{ earning.amount }}
|
||||
</h6>
|
||||
<VProgressLinear
|
||||
:color="earning.progress"
|
||||
model-value="80"
|
||||
rounded-bar
|
||||
rounded
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const series = [{
|
||||
data: [
|
||||
0,
|
||||
20,
|
||||
5,
|
||||
30,
|
||||
15,
|
||||
45,
|
||||
],
|
||||
}]
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const currentTheme = vuetifyTheme.current.value.colors
|
||||
const variableTheme = vuetifyTheme.current.value.variables
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
grid: {
|
||||
borderColor: `rgba(${ hexToRgb(String(variableTheme['border-color'])) },${ variableTheme['border-opacity'] })`,
|
||||
strokeDashArray: 6,
|
||||
xaxis: { lines: { show: true } },
|
||||
yaxis: { lines: { show: false } },
|
||||
padding: {
|
||||
top: -10,
|
||||
left: -7,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 3,
|
||||
lineCap: 'butt',
|
||||
curve: 'straight',
|
||||
},
|
||||
colors: [currentTheme.primary],
|
||||
markers: {
|
||||
size: 6,
|
||||
offsetY: 4,
|
||||
offsetX: -2,
|
||||
strokeWidth: 3,
|
||||
colors: ['transparent'],
|
||||
strokeColors: 'transparent',
|
||||
discrete: [{
|
||||
size: 5.5,
|
||||
seriesIndex: 0,
|
||||
strokeColor: currentTheme.primary,
|
||||
fillColor: currentTheme.surface,
|
||||
dataPointIndex: series[0].data.length - 1,
|
||||
}],
|
||||
hover: { size: 7 },
|
||||
},
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: { labels: { show: false } },
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<h4 class="text-h4">
|
||||
$86.4k
|
||||
</h4>
|
||||
<VueApexCharts
|
||||
type="line"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="80"
|
||||
class="my-1"
|
||||
/>
|
||||
|
||||
<h6 class="text-h6 text-center">
|
||||
Total Profit
|
||||
</h6>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,82 @@
|
||||
<script setup>
|
||||
const statistics = [
|
||||
{
|
||||
title: 'Sales',
|
||||
stats: '245k',
|
||||
icon: 'ri-pie-chart-2-line',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
title: 'Customers',
|
||||
stats: '12.5k',
|
||||
icon: 'ri-group-line',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
title: 'Product',
|
||||
stats: '1.54k',
|
||||
icon: 'ri-macbook-line',
|
||||
color: 'warning',
|
||||
},
|
||||
{
|
||||
title: 'Revenue',
|
||||
stats: '$88k',
|
||||
icon: 'ri-money-dollar-circle-line',
|
||||
color: 'info',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard title="Transactions">
|
||||
<template #subtitle>
|
||||
<p class="text-body-1 mb-0">
|
||||
<span class="d-inline-block font-weight-medium text-high-emphasis">Total 48.5% Growth</span> <span class="text-high-emphasis">😎</span> this month
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #append>
|
||||
<IconBtn class="mt-n5">
|
||||
<VIcon
|
||||
color="high-emphasis"
|
||||
icon="ri-more-2-line"
|
||||
/>
|
||||
</IconBtn>
|
||||
</template>
|
||||
|
||||
<VCardText class="pt-10">
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="item in statistics"
|
||||
:key="item.title"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="3"
|
||||
>
|
||||
<div class="d-flex align-center gap-x-3">
|
||||
<VAvatar
|
||||
:color="item.color"
|
||||
rounded
|
||||
size="40"
|
||||
class="elevation-2"
|
||||
>
|
||||
<VIcon
|
||||
size="24"
|
||||
:icon="item.icon"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<div class="text-body-1">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<h5 class="text-h5">
|
||||
{{ item.stats }}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
250
resources/js/views/dashboards/analytics/AnalyticsUserTable.vue
Normal file
250
resources/js/views/dashboards/analytics/AnalyticsUserTable.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar2 from '@images/avatars/avatar-2.png'
|
||||
import avatar3 from '@images/avatars/avatar-3.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
import avatar5 from '@images/avatars/avatar-5.png'
|
||||
import avatar6 from '@images/avatars/avatar-6.png'
|
||||
import avatar7 from '@images/avatars/avatar-7.png'
|
||||
import avatar8 from '@images/avatars/avatar-8.png'
|
||||
|
||||
const headers = [
|
||||
{
|
||||
title: 'User',
|
||||
key: 'username',
|
||||
},
|
||||
{
|
||||
title: 'Email',
|
||||
key: 'email',
|
||||
},
|
||||
{
|
||||
title: 'Role',
|
||||
key: 'role',
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
key: 'status',
|
||||
},
|
||||
]
|
||||
|
||||
const userData = [
|
||||
{
|
||||
id: 1,
|
||||
fullName: 'Galasasen Slixby',
|
||||
company: 'Yotz PVT LTD',
|
||||
role: 'editor',
|
||||
username: 'gslixby0',
|
||||
country: 'El Salvador',
|
||||
contact: '(479) 232-9151',
|
||||
email: 'gslixby0@abc.net.au',
|
||||
currentPlan: 'enterprise',
|
||||
status: 'inactive',
|
||||
avatar: avatar1,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
fullName: 'Halsey Redmore',
|
||||
company: 'Skinder PVT LTD',
|
||||
role: 'author',
|
||||
username: 'hredmore1',
|
||||
country: 'Albania',
|
||||
contact: '(472) 607-9137',
|
||||
email: 'hredmore1@imgur.com',
|
||||
currentPlan: 'team',
|
||||
status: 'pending',
|
||||
avatar: avatar2,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
fullName: 'Marjory Sicely',
|
||||
company: 'Oozz PVT LTD',
|
||||
role: 'maintainer',
|
||||
username: 'msicely2',
|
||||
country: 'Russia',
|
||||
contact: '(321) 264-4599',
|
||||
email: 'msicely2@who.int',
|
||||
currentPlan: 'enterprise',
|
||||
status: 'active',
|
||||
avatar: avatar3,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
fullName: 'Cyrill Risby',
|
||||
company: 'Oozz PVT LTD',
|
||||
role: 'Admin',
|
||||
username: 'crisby3',
|
||||
country: 'China',
|
||||
contact: '(923) 690-6806',
|
||||
email: 'crisby3@wordpress.com',
|
||||
currentPlan: 'team',
|
||||
status: 'inactive',
|
||||
avatar: avatar4,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
fullName: 'Maggy Hurran',
|
||||
company: 'Aimbo PVT LTD',
|
||||
role: 'subscriber',
|
||||
username: 'mhurran4',
|
||||
country: 'Pakistan',
|
||||
contact: '(669) 914-1078',
|
||||
email: 'mhurran4@yahoo.co.jp',
|
||||
currentPlan: 'enterprise',
|
||||
status: 'pending',
|
||||
avatar: avatar5,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
fullName: 'Silvain Halstead',
|
||||
company: 'Jaxbean PVT LTD',
|
||||
role: 'author',
|
||||
username: 'shalstead5',
|
||||
country: 'China',
|
||||
contact: '(958) 973-3093',
|
||||
email: 'shalstead5@shinystat.com',
|
||||
currentPlan: 'company',
|
||||
status: 'active',
|
||||
avatar: avatar6,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
fullName: 'Breena Gallemore',
|
||||
company: 'Jazzy PVT LTD',
|
||||
role: 'subscriber',
|
||||
username: 'bgallemore6',
|
||||
country: 'Canada',
|
||||
contact: '(825) 977-8152',
|
||||
email: 'bgallemore6@boston.com',
|
||||
currentPlan: 'company',
|
||||
status: 'pending',
|
||||
avatar: avatar7,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
fullName: 'Kathryne Liger',
|
||||
company: 'Pixoboo PVT LTD',
|
||||
role: 'author',
|
||||
username: 'kliger7',
|
||||
country: 'France',
|
||||
contact: '(187) 440-0934',
|
||||
email: 'kliger7@vinaora.com',
|
||||
currentPlan: 'enterprise',
|
||||
status: 'pending',
|
||||
avatar: avatar8,
|
||||
},
|
||||
]
|
||||
|
||||
const resolveUserRoleVariant = role => {
|
||||
const roleLowerCase = role.toLowerCase()
|
||||
if (roleLowerCase === 'subscriber')
|
||||
return {
|
||||
color: 'success',
|
||||
icon: 'ri-user-line',
|
||||
}
|
||||
if (roleLowerCase === 'author')
|
||||
return {
|
||||
color: 'error',
|
||||
icon: 'ri-computer-line',
|
||||
}
|
||||
if (roleLowerCase === 'maintainer')
|
||||
return {
|
||||
color: 'info',
|
||||
icon: 'ri-pie-chart-line',
|
||||
}
|
||||
if (roleLowerCase === 'editor')
|
||||
return {
|
||||
color: 'warning',
|
||||
icon: 'ri-edit-box-line',
|
||||
}
|
||||
if (roleLowerCase === 'admin')
|
||||
return {
|
||||
color: 'primary',
|
||||
icon: 'ri-vip-crown-line',
|
||||
}
|
||||
|
||||
return {
|
||||
color: 'success',
|
||||
icon: 'ri-user-line',
|
||||
}
|
||||
}
|
||||
|
||||
const resolveUserStatusVariant = stat => {
|
||||
const statLowerCase = stat.toLowerCase()
|
||||
if (statLowerCase === 'pending')
|
||||
return 'warning'
|
||||
if (statLowerCase === 'active')
|
||||
return 'success'
|
||||
if (statLowerCase === 'inactive')
|
||||
return 'secondary'
|
||||
|
||||
return 'primary'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VDataTable
|
||||
:headers="headers"
|
||||
:items="userData"
|
||||
item-value="id"
|
||||
class="text-no-wrap"
|
||||
>
|
||||
<!-- User -->
|
||||
<template #item.username="{ item }">
|
||||
<div class="d-flex align-center gap-x-4">
|
||||
<VAvatar
|
||||
size="34"
|
||||
:variant="!item.avatar ? 'tonal' : undefined"
|
||||
:color="!item.avatar ? resolveUserRoleVariant(item.role).color : undefined"
|
||||
>
|
||||
<VImg
|
||||
v-if="item.avatar"
|
||||
:src="item.avatar"
|
||||
/>
|
||||
<span v-else>{{ avatarText(item.fullName) }}</span>
|
||||
</VAvatar>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<RouterLink
|
||||
:to="{ name: 'apps-user-view-id', params: { id: item.id } }"
|
||||
class="text-h6 font-weight-medium user-list-name"
|
||||
>
|
||||
{{ item.fullName }}
|
||||
</RouterLink>
|
||||
|
||||
<span class="text-sm text-medium-emphasis">@{{ item.username }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- Role -->
|
||||
<template #item.role="{ item }">
|
||||
<div class="d-flex gap-4">
|
||||
<VIcon
|
||||
:icon="resolveUserRoleVariant(item.role).icon"
|
||||
:color="resolveUserRoleVariant(item.role).color"
|
||||
size="22"
|
||||
/>
|
||||
<div class="text-capitalize text-high-emphasis">
|
||||
{{ item.role }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- Plan -->
|
||||
<template #item.plan="{ item }">
|
||||
<span class="text-capitalize text-high-emphasis">{{ item.currentPlan }}</span>
|
||||
</template>
|
||||
<!-- Status -->
|
||||
<template #item.status="{ item }">
|
||||
<VChip
|
||||
:color="resolveUserStatusVariant(item.status)"
|
||||
size="small"
|
||||
class="text-capitalize"
|
||||
>
|
||||
{{ item.status }}
|
||||
</VChip>
|
||||
</template>
|
||||
|
||||
<template #bottom />
|
||||
</VDataTable>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,137 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
const vuetifyTheme = useTheme()
|
||||
|
||||
const options = computed(() => {
|
||||
const currentTheme = ref(vuetifyTheme.current.value.colors)
|
||||
const variableTheme = ref(vuetifyTheme.current.value.variables)
|
||||
const disabledColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['disabled-opacity'] })`
|
||||
const borderColor = `rgba(${ hexToRgb(String(variableTheme.value['border-color'])) },${ variableTheme.value['border-opacity'] })`
|
||||
|
||||
return {
|
||||
chart: {
|
||||
offsetY: -10,
|
||||
offsetX: -15,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
distributed: true,
|
||||
columnWidth: '30%',
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
colors: [currentTheme.value.surface],
|
||||
},
|
||||
legend: { show: false },
|
||||
grid: {
|
||||
borderColor,
|
||||
strokeDashArray: 7,
|
||||
xaxis: { lines: { show: false } },
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
colors: [
|
||||
currentTheme.value['track-bg'],
|
||||
currentTheme.value['track-bg'],
|
||||
currentTheme.value['track-bg'],
|
||||
'rgba(var(--v-theme-primary),1)',
|
||||
currentTheme.value['track-bg'],
|
||||
currentTheme.value['track-bg'],
|
||||
],
|
||||
states: {
|
||||
hover: { filter: { type: 'none' } },
|
||||
active: { filter: { type: 'none' } },
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
'Sun',
|
||||
'Mon',
|
||||
'Tue',
|
||||
'Wed',
|
||||
'Thu',
|
||||
'Fri',
|
||||
'Sat',
|
||||
],
|
||||
tickPlacement: 'on',
|
||||
labels: { show: false },
|
||||
crosshairs: { opacity: 0 },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
yaxis: {
|
||||
show: true,
|
||||
tickAmount: 4,
|
||||
labels: {
|
||||
style: {
|
||||
colors: disabledColor,
|
||||
fontSize: '13px',
|
||||
},
|
||||
formatter: value => `${ value > 999 ? `${ (value / 1000).toFixed(0) }` : value }k`,
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1560,
|
||||
options: { plotOptions: { bar: { columnWidth: '35%' } } },
|
||||
},
|
||||
{
|
||||
breakpoint: 1380,
|
||||
options: { plotOptions: { bar: { columnWidth: '45%' } } },
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
|
||||
const series = [{
|
||||
data: [
|
||||
37,
|
||||
57,
|
||||
45,
|
||||
75,
|
||||
57,
|
||||
40,
|
||||
65,
|
||||
],
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Weekly Overview</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="me-n3">
|
||||
<MoreBtn />
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
:options="options"
|
||||
:series="series"
|
||||
:height="200"
|
||||
/>
|
||||
|
||||
<div class="d-flex align-center mb-5 gap-x-4">
|
||||
<h4 class="text-h4">
|
||||
45%
|
||||
</h4>
|
||||
<p class="mb-0">
|
||||
Your sales performance is 45% <span class="text-high-emphasis">😎</span> better compared to last month
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<VBtn block>
|
||||
Details
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
Reference in New Issue
Block a user