Łukasz Holeczek
527 lines
19 KiB
Vue
527 lines
19 KiB
Vue
<template>
|
|
<div>
|
|
<WidgetsStatsA />
|
|
<CRow>
|
|
<CCol md="12">
|
|
<CCard class="mb-4">
|
|
<CCardBody>
|
|
<CRow>
|
|
<CCol sm="5">
|
|
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
|
|
<div class="small text-medium-emphasis">November 2017</div>
|
|
</CCol>
|
|
<CCol sm="7" class="d-none d-md-block">
|
|
<CButton color="primary" class="float-end">
|
|
<CIcon icon="cil-cloud-download" />
|
|
</CButton>
|
|
<CButtonGroup
|
|
class="float-end me-3"
|
|
role="group"
|
|
aria-label="Basic outlined example"
|
|
>
|
|
<CButton color="secondary" variant="outline">Day</CButton>
|
|
<CButton color="secondary" variant="outline" active
|
|
>Month</CButton
|
|
>
|
|
<CButton color="secondary" variant="outline">Year</CButton>
|
|
</CButtonGroup>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow>
|
|
<MainChartExample
|
|
style="height: 300px; max-height: 300px; margin-top: 40px"
|
|
/>
|
|
</CRow>
|
|
</CCardBody>
|
|
<CCardFooter>
|
|
<CRow :xs="{ cols: 1 }" :md="{ cols: 5 }" class="text-center">
|
|
<CCol class="mb-sm-2 mb-0">
|
|
<div class="text-medium-emphasis">Visits</div>
|
|
<strong>29.703 Users (40%)</strong>
|
|
<CProgress
|
|
class="mt-2"
|
|
color="success"
|
|
thin
|
|
:precision="1"
|
|
:value="40"
|
|
/>
|
|
</CCol>
|
|
<CCol class="mb-sm-2 mb-0 d-md-down-none">
|
|
<div class="text-medium-emphasis">Unique</div>
|
|
<strong>24.093 Users (20%)</strong>
|
|
<CProgress
|
|
class="mt-2"
|
|
color="info"
|
|
thin
|
|
:precision="1"
|
|
:value="20"
|
|
/>
|
|
</CCol>
|
|
<CCol class="mb-sm-2 mb-0">
|
|
<div class="text-medium-emphasis">Pageviews</div>
|
|
<strong>78.706 Views (60%)</strong>
|
|
<CProgress
|
|
class="mt-2"
|
|
color="warning"
|
|
thin
|
|
:precision="1"
|
|
:value="60"
|
|
/>
|
|
</CCol>
|
|
<CCol class="mb-sm-2 mb-0">
|
|
<div class="text-medium-emphasis">New Users</div>
|
|
<strong>22.123 Users (80%)</strong>
|
|
<CProgress
|
|
class="mt-2"
|
|
color="danger"
|
|
thin
|
|
:precision="1"
|
|
:value="80"
|
|
/>
|
|
</CCol>
|
|
<CCol class="mb-sm-2 mb-0 d-md-down-none">
|
|
<div class="text-medium-emphasis">Bounce Rate</div>
|
|
<strong>Average Rate (40.15%)</strong>
|
|
<CProgress class="mt-2" :value="40" thin :precision="1" />
|
|
</CCol>
|
|
</CRow>
|
|
</CCardFooter>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
<WidgetsStatsD />
|
|
<CRow>
|
|
<CCol md="12">
|
|
<CCard class="mb-4">
|
|
<CCardHeader> Traffic & Sales </CCardHeader>
|
|
<CCardBody>
|
|
<CRow>
|
|
<CCol sm="12" lg="6">
|
|
<CRow>
|
|
<CCol sm="6">
|
|
<div
|
|
class="
|
|
border-start border-start-4 border-start-info
|
|
py-1
|
|
px-3
|
|
mb-3
|
|
"
|
|
>
|
|
<div class="text-medium-emphasis small">New Clients</div>
|
|
<div class="fs-5 fw-semibold">9,123</div>
|
|
</div>
|
|
</CCol>
|
|
<CCol sm="6">
|
|
<div
|
|
class="
|
|
border-start border-start-4 border-start-danger
|
|
py-1
|
|
px-3
|
|
mb-3
|
|
"
|
|
>
|
|
<div class="text-medium-emphasis small">
|
|
Recurring Clients
|
|
</div>
|
|
<div class="fs-5 fw-semibold">22,643</div>
|
|
</div>
|
|
</CCol>
|
|
</CRow>
|
|
<hr class="mt-0" />
|
|
<div class="progress-group mb-4">
|
|
<div class="progress-group-prepend">
|
|
<span class="progress-group-text"> Monday </span>
|
|
</div>
|
|
<div class="progress-group-bars">
|
|
<CProgress thin color="info" :value="34" />
|
|
<CProgress thin color="danger" :value="78" />
|
|
</div>
|
|
</div>
|
|
<div class="progress-group mb-4">
|
|
<div class="progress-group-prepend">
|
|
<span class="progress-group-text"> Tuesday </span>
|
|
</div>
|
|
<div class="progress-group-bars">
|
|
<CProgress thin :value="56" color="info" />
|
|
<CProgress thin :value="94" color="danger" />
|
|
</div>
|
|
</div>
|
|
<div class="progress-group mb-4">
|
|
<div class="progress-group-prepend">
|
|
<span class="progress-group-text"> Wednesday </span>
|
|
</div>
|
|
<div class="progress-group-bars">
|
|
<CProgress thin :value="12" color="info" />
|
|
<CProgress thin :value="67" color="danger" />
|
|
</div>
|
|
</div>
|
|
<div class="progress-group mb-4">
|
|
<div class="progress-group-prepend">
|
|
<span class="progress-group-text"> Thursday </span>
|
|
</div>
|
|
<div class="progress-group-bars">
|
|
<CProgress thin :value="43" color="info" />
|
|
<CProgress thin :value="91" color="danger" />
|
|
</div>
|
|
</div>
|
|
<div class="progress-group mb-4">
|
|
<div class="progress-group-prepend">
|
|
<span class="progress-group-text"> Friday </span>
|
|
</div>
|
|
<div class="progress-group-bars">
|
|
<CProgress thin :value="22" color="info" />
|
|
<CProgress thin :value="73" color="danger" />
|
|
</div>
|
|
</div>
|
|
<div class="progress-group mb-4">
|
|
<div class="progress-group-prepend">
|
|
<span class="progress-group-text"> Saturday </span>
|
|
</div>
|
|
<div class="progress-group-bars">
|
|
<CProgress thin :value="53" color="info" />
|
|
<CProgress thin :value="82" color="danger" />
|
|
</div>
|
|
</div>
|
|
<div class="progress-group mb-4">
|
|
<div class="progress-group-prepend">
|
|
<span class="progress-group-text"> Sunday </span>
|
|
</div>
|
|
<div class="progress-group-bars">
|
|
<CProgress thin :value="9" color="info" />
|
|
<CProgress thin :value="69" color="danger" />
|
|
</div>
|
|
</div>
|
|
</CCol>
|
|
<CCol sm="12" lg="6">
|
|
<CRow>
|
|
<CCol sm="6">
|
|
<div
|
|
class="
|
|
border-start border-start-4 border-start-warning
|
|
py-1
|
|
px-3
|
|
mb-3
|
|
"
|
|
>
|
|
<div class="text-medium-emphasis small">Pageviews</div>
|
|
<div class="fs-5 fw-semibold">78,623</div>
|
|
</div>
|
|
</CCol>
|
|
<CCol sm="6">
|
|
<div
|
|
class="
|
|
border-start border-start-4 border-start-success
|
|
py-1
|
|
px-3
|
|
mb-3
|
|
"
|
|
>
|
|
<div class="text-medium-emphasis small">Organic</div>
|
|
<div class="fs-5 fw-semibold">49,123</div>
|
|
</div>
|
|
</CCol>
|
|
</CRow>
|
|
<hr class="mt-0" />
|
|
<div class="progress-group">
|
|
<div class="progress-group-header">
|
|
<CIcon icon="cil-user" class="me-2" size="lg" />
|
|
<span class="title">Male</span>
|
|
<span class="ms-auto font-weight-bold">43%</span>
|
|
</div>
|
|
<div class="progress-group-bars">
|
|
<CProgress thin :value="43" color="warning" />
|
|
</div>
|
|
</div>
|
|
<div class="progress-group mb-5">
|
|
<div class="progress-group-header">
|
|
<CIcon icon="cil-user-female" class="me-2" size="lg" />
|
|
<span class="title">Female</span>
|
|
<span class="ms-auto font-weight-bold">37%</span>
|
|
</div>
|
|
<div class="progress-group-bars">
|
|
<CProgress thin :value="37" color="warning" />
|
|
</div>
|
|
</div>
|
|
<div class="progress-group">
|
|
<div class="progress-group-header">
|
|
<CIcon icon="cil-globe-alt" class="me-2" size="lg" />
|
|
<span class="title">Organic Search</span>
|
|
<span class="ms-auto font-weight-bold">
|
|
191,235
|
|
<span class="text-medium-emphasis small">(56%)</span>
|
|
</span>
|
|
</div>
|
|
<div class="progress-group-bars">
|
|
<CProgress thin :value="56" color="success" />
|
|
</div>
|
|
</div>
|
|
<div class="progress-group">
|
|
<div class="progress-group-header">
|
|
<CIcon
|
|
icon="cib-facebook"
|
|
height="17"
|
|
class="me-2"
|
|
size="lg"
|
|
/>
|
|
<span class="title">Facebook</span>
|
|
<span class="ms-auto font-weight-bold">
|
|
51,223
|
|
<span class="text-medium-emphasis small">(15%)</span>
|
|
</span>
|
|
</div>
|
|
<div class="progress-group-bars">
|
|
<CProgress thin :value="15" color="success" />
|
|
</div>
|
|
</div>
|
|
<div class="progress-group">
|
|
<div class="progress-group-header">
|
|
<CIcon
|
|
icon="cib-twitter"
|
|
height="17"
|
|
class="me-2"
|
|
size="lg"
|
|
/>
|
|
<span class="title">Twitter</span>
|
|
<span class="ms-auto font-weight-bold">
|
|
37,564
|
|
<span class="text-medium-emphasis small">(11%)</span>
|
|
</span>
|
|
</div>
|
|
<div class="progress-group-bars">
|
|
<CProgress thin :value="11" color="success" />
|
|
</div>
|
|
</div>
|
|
<div class="progress-group">
|
|
<div class="progress-group-header">
|
|
<CIcon
|
|
icon="cib-linkedin"
|
|
height="17"
|
|
class="me-2"
|
|
size="lg"
|
|
/>
|
|
<span class="title">LinkedIn</span>
|
|
<span class="ms-auto font-weight-bold">
|
|
27,319
|
|
<span class="text-medium-emphasis small"> (8%)</span>
|
|
</span>
|
|
</div>
|
|
<div class="progress-group-bars">
|
|
<CProgress thin :value="8" color="success" />
|
|
</div>
|
|
</div>
|
|
</CCol>
|
|
</CRow>
|
|
<br />
|
|
<CTable align="middle" class="mb-0 border" hover responsive>
|
|
<CTableHead color="light">
|
|
<CTableRow>
|
|
<CTableHeaderCell class="text-center">
|
|
<CIcon name="{cilPeople}" />
|
|
</CTableHeaderCell>
|
|
<CTableHeaderCell>User</CTableHeaderCell>
|
|
<CTableHeaderCell class="text-center"
|
|
>Country</CTableHeaderCell
|
|
>
|
|
<CTableHeaderCell>Usage</CTableHeaderCell>
|
|
<CTableHeaderCell class="text-center"
|
|
>Payment Method</CTableHeaderCell
|
|
>
|
|
<CTableHeaderCell>Activity</CTableHeaderCell>
|
|
</CTableRow>
|
|
</CTableHead>
|
|
<CTableBody>
|
|
<CTableRow v-for="item in tableItems" :key="item.name">
|
|
<CTableDataCell class="text-center">
|
|
<CAvatar
|
|
size="md"
|
|
:src="item.avatar.src"
|
|
:status="item.avatar.status"
|
|
/>
|
|
</CTableDataCell>
|
|
<CTableDataCell>
|
|
<div>{{ item.user.name }}</div>
|
|
<div class="small text-medium-emphasis">
|
|
<span>{{ item.user.new ? "New" : "Recurring" }}</span> |
|
|
{{ item.user.registered }}
|
|
</div>
|
|
</CTableDataCell>
|
|
<CTableDataCell class="text-center">
|
|
<CIcon
|
|
size="xl"
|
|
:name="item.country.flag"
|
|
:title="item.country.name"
|
|
/>
|
|
</CTableDataCell>
|
|
<CTableDataCell>
|
|
<div class="clearfix">
|
|
<div class="float-start">
|
|
<strong>{{ item.usage.value }}%</strong>
|
|
</div>
|
|
<div class="float-end">
|
|
<small class="text-medium-emphasis">
|
|
{{ item.usage.period }}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<CProgress
|
|
thin
|
|
:color="item.usage.color"
|
|
:value="item.usage.value"
|
|
/>
|
|
</CTableDataCell>
|
|
<CTableDataCell class="text-center">
|
|
<CIcon size="xl" :name="item.payment.icon" />
|
|
</CTableDataCell>
|
|
<CTableDataCell>
|
|
<div class="small text-medium-emphasis">Last login</div>
|
|
<strong>{{ item.activity }}</strong>
|
|
</CTableDataCell>
|
|
</CTableRow>
|
|
<CTableRow> </CTableRow>
|
|
</CTableBody>
|
|
</CTable>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import avatar1 from "./../assets/images/avatars/1.jpg";
|
|
import avatar2 from "./../assets/images/avatars/2.jpg";
|
|
import avatar3 from "./../assets/images/avatars/3.jpg";
|
|
import avatar4 from "./../assets/images/avatars/4.jpg";
|
|
import avatar5 from "./../assets/images/avatars/5.jpg";
|
|
import avatar6 from "./../assets/images/avatars/6.jpg";
|
|
import MainChartExample from "./charts/MainChartExample";
|
|
import WidgetsStatsA from './widgets/WidgetsStatsTypeA.vue'
|
|
import WidgetsStatsD from './widgets/WidgetsStatsTypeD.vue'
|
|
export default {
|
|
name: "Dashboard",
|
|
components: {
|
|
MainChartExample,
|
|
WidgetsStatsA,
|
|
WidgetsStatsD,
|
|
},
|
|
data() {
|
|
return {
|
|
selected: "Month",
|
|
tableItems: [
|
|
{
|
|
avatar: { src: avatar1, status: "success" },
|
|
user: {
|
|
name: "Yiorgos Avraamu",
|
|
new: true,
|
|
registered: "Jan 1, 2021",
|
|
},
|
|
country: { name: "USA", flag: "cif-us" },
|
|
usage: {
|
|
value: 50,
|
|
period: "Jun 11, 2021 - Jul 10, 2021",
|
|
color: "success",
|
|
},
|
|
payment: { name: "Mastercard", icon: "cib-cc-mastercard" },
|
|
activity: "10 sec ago",
|
|
},
|
|
{
|
|
avatar: { src: avatar2, status: "danger" },
|
|
user: {
|
|
name: "Avram Tarasios",
|
|
new: false,
|
|
registered: "Jan 1, 2021",
|
|
},
|
|
country: { name: "Brazil", flag: "cif-br" },
|
|
usage: {
|
|
value: 22,
|
|
period: "Jun 11, 2021 - Jul 10, 2021",
|
|
color: "info",
|
|
},
|
|
payment: { name: "Visa", icon: "cib-cc-visa" },
|
|
activity: "5 minutes ago",
|
|
},
|
|
{
|
|
avatar: { src: avatar3, status: "warning" },
|
|
user: { name: "Quintin Ed", new: true, registered: "Jan 1, 2021" },
|
|
country: { name: "India", flag: "cif-in" },
|
|
usage: {
|
|
value: 74,
|
|
period: "Jun 11, 2021 - Jul 10, 2021",
|
|
color: "warning",
|
|
},
|
|
payment: { name: "Stripe", icon: "cib-stripe" },
|
|
activity: "1 hour ago",
|
|
},
|
|
{
|
|
avatar: { src: avatar4, status: "secondary" },
|
|
user: { name: "Enéas Kwadwo", new: true, registered: "Jan 1, 2021" },
|
|
country: { name: "France", flag: "cif-fr" },
|
|
usage: {
|
|
value: 98,
|
|
period: "Jun 11, 2021 - Jul 10, 2021",
|
|
color: "danger",
|
|
},
|
|
payment: { name: "PayPal", icon: "cib-paypal" },
|
|
activity: "Last month",
|
|
},
|
|
{
|
|
avatar: { src: avatar5, status: "success" },
|
|
user: {
|
|
name: "Agapetus Tadeáš",
|
|
new: true,
|
|
registered: "Jan 1, 2021",
|
|
},
|
|
country: { name: "Spain", flag: "cif-es" },
|
|
usage: {
|
|
value: 22,
|
|
period: "Jun 11, 2021 - Jul 10, 2021",
|
|
color: "primary",
|
|
},
|
|
payment: { name: "Google Wallet", icon: "cib-google-pay" },
|
|
activity: "Last week",
|
|
},
|
|
{
|
|
avatar: { src: avatar6, status: "danger" },
|
|
user: {
|
|
name: "Friderik Dávid",
|
|
new: true,
|
|
registered: "Jan 1, 2021",
|
|
},
|
|
country: { name: "Poland", flag: "cif-pl" },
|
|
usage: {
|
|
value: 43,
|
|
period: "Jun 11, 2021 - Jul 10, 2021",
|
|
color: "success",
|
|
},
|
|
payment: { name: "Amex", icon: "cib-cc-amex" },
|
|
activity: "Last week",
|
|
},
|
|
],
|
|
tableFields: [
|
|
{ key: "avatar", label: "", _classes: "text-center" },
|
|
{ key: "user" },
|
|
{ key: "country", _classes: "text-center" },
|
|
{ key: "usage" },
|
|
{ key: "payment", label: "Payment method", _classes: "text-center" },
|
|
{ key: "activity" },
|
|
],
|
|
};
|
|
},
|
|
methods: {
|
|
color(value) {
|
|
let $color;
|
|
if (value <= 25) {
|
|
$color = "info";
|
|
} else if (value > 25 && value <= 50) {
|
|
$color = "success";
|
|
} else if (value > 50 && value <= 75) {
|
|
$color = "warning";
|
|
} else if (value > 75 && value <= 100) {
|
|
$color = "danger";
|
|
}
|
|
return $color;
|
|
},
|
|
},
|
|
};
|
|
</script>
|