842 lines
46 KiB
Twig
Executable File
842 lines
46 KiB
Twig
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-90680653-2"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'UA-90680653-2');
|
|
</script>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<!-- Twitter -->
|
|
<!-- <meta name="twitter:site" content="@bootstrapdash">
|
|
<meta name="twitter:creator" content="@bootstrapdash">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="Azia">
|
|
<meta name="twitter:description" content="Responsive Bootstrap 4 Dashboard Template">
|
|
<meta name="twitter:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png"> -->
|
|
<!-- Facebook -->
|
|
<!-- <meta property="og:url" content="https://www.bootstrapdash.com/azia">
|
|
<meta property="og:title" content="Azia">
|
|
<meta property="og:description" content="Responsive Bootstrap 4 Dashboard Template">
|
|
|
|
<meta property="og:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
|
<meta property="og:image:secure_url" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
|
<meta property="og:image:type" content="image/png">
|
|
<meta property="og:image:width" content="1200">
|
|
<meta property="og:image:height" content="600"> -->
|
|
<!-- Meta -->
|
|
<meta name="description" content="Responsive Bootstrap 4 Dashboard Template">
|
|
<meta name="author" content="BootstrapDash">
|
|
<title>Azia Responsive Bootstrap 4 Dashboard Template</title>
|
|
<!-- vendor css -->
|
|
<link href="{{ asset('assets/lib/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/lib/ionicons/css/ionicons.min.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/lib/typicons.font/typicons.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/lib/flag-icon-css/css/flag-icon.min.css') }}" rel="stylesheet">
|
|
<!-- azia CSS -->
|
|
<link rel="stylesheet" href="{{ asset('assets/css/azia.css') }}">
|
|
</head>
|
|
<body>
|
|
<div class="az-header">
|
|
<div class="container">
|
|
<div class="az-header-left">
|
|
<a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
|
|
<a href="" id="azMenuShow" class="az-header-menu-icon d-lg-none"><span></span></a>
|
|
</div>
|
|
<!-- az-header-left -->
|
|
<div class="az-header-menu">
|
|
<div class="az-header-menu-header">
|
|
<a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
|
|
<a href="" class="close">×</a>
|
|
</div>
|
|
<!-- az-header-menu-header -->
|
|
<ul class="nav">
|
|
<li class="nav-item active show">
|
|
<a href="{{ path('app_demo_index') }}" class="nav-link"><i class="typcn typcn-chart-area-outline"></i> Dashboard</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="" class="nav-link with-sub"><i class="typcn typcn-document"></i> Pages</a>
|
|
<nav class="az-menu-sub">
|
|
<a href="{{ path('app_demo_signin') }}" class="nav-link">Sign In</a>
|
|
<a href="{{ path('app_demo_signup') }}" class="nav-link">Sign Up</a>
|
|
</nav>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="{{ path('app_demo_chart') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Charts</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="{{ path('app_demo_elements') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Forms</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="" class="nav-link with-sub"><i class="typcn typcn-book"></i> Components</a>
|
|
<div class="az-menu-sub">
|
|
<div class="container">
|
|
<div>
|
|
<nav class="nav">
|
|
<a href="{{ path('app_demo_buttons') }}" class="nav-link">Buttons</a>
|
|
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
|
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
|
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<!-- container -->
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- az-header-menu -->
|
|
<div class="az-header-right">
|
|
<a href="https://www.bootstrapdash.com/demo/azia-free/docs/documentation.html" target="_blank" class="az-header-search-link"><i class="far fa-file-alt"></i></a>
|
|
<a href="" class="az-header-search-link"><i class="fas fa-search"></i></a>
|
|
<div class="az-header-message">
|
|
<a href="#"><i class="typcn typcn-messages"></i></a>
|
|
</div>
|
|
<!-- az-header-message -->
|
|
<div class="dropdown az-header-notification">
|
|
<a href="" class="new"><i class="typcn typcn-bell"></i></a>
|
|
<div class="dropdown-menu">
|
|
<div class="az-dropdown-header mg-b-20 d-sm-none">
|
|
<a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
|
|
</div>
|
|
<h6 class="az-notification-title">Notifications</h6>
|
|
<p class="az-notification-text">You have 2 unread notification</p>
|
|
<div class="az-notification-list">
|
|
<div class="media new">
|
|
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face2.jpg') }}" alt=""></div>
|
|
<div class="media-body">
|
|
<p>Congratulate <strong>Socrates Itumay</strong> for work anniversaries</p>
|
|
<span>Mar 15 12:32pm</span>
|
|
</div>
|
|
<!-- media-body -->
|
|
</div>
|
|
<!-- media -->
|
|
<div class="media new">
|
|
<div class="az-img-user online"><img src="{{ asset('assets/img/faces/face3.jpg') }}" alt=""></div>
|
|
<div class="media-body">
|
|
<p><strong>Joyce Chua</strong> just created a new blog post</p>
|
|
<span>Mar 13 04:16am</span>
|
|
</div>
|
|
<!-- media-body -->
|
|
</div>
|
|
<!-- media -->
|
|
<div class="media">
|
|
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face4.jpg') }}" alt=""></div>
|
|
<div class="media-body">
|
|
<p><strong>Althea Cabardo</strong> just created a new blog post</p>
|
|
<span>Mar 13 02:56am</span>
|
|
</div>
|
|
<!-- media-body -->
|
|
</div>
|
|
<!-- media -->
|
|
<div class="media">
|
|
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face5.jpg') }}" alt=""></div>
|
|
<div class="media-body">
|
|
<p><strong>Adrian Monino</strong> added new comment on your photo</p>
|
|
<span>Mar 12 10:40pm</span>
|
|
</div>
|
|
<!-- media-body -->
|
|
</div>
|
|
<!-- media -->
|
|
</div>
|
|
<!-- az-notification-list -->
|
|
<div class="dropdown-footer"><a href="">View All Notifications</a></div>
|
|
</div>
|
|
<!-- dropdown-menu -->
|
|
</div>
|
|
<!-- az-header-notification -->
|
|
<div class="dropdown az-profile-menu">
|
|
<a href="" class="az-img-user"><img src="{{ asset('assets/img/faces/face1.jpg') }}" alt=""></a>
|
|
<div class="dropdown-menu">
|
|
<div class="az-dropdown-header d-sm-none">
|
|
<a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
|
|
</div>
|
|
<div class="az-header-profile">
|
|
<div class="az-img-user">
|
|
<img src="{{ asset('assets/img/faces/face1.jpg') }}" alt="">
|
|
</div>
|
|
<!-- az-img-user -->
|
|
<h6>Aziana Pechon</h6>
|
|
<span>Premium Member</span>
|
|
</div>
|
|
<!-- az-header-profile -->
|
|
<a href="" class="dropdown-item"><i class="typcn typcn-user-outline"></i> My Profile</a>
|
|
<a href="" class="dropdown-item"><i class="typcn typcn-edit"></i> Edit Profile</a>
|
|
<a href="" class="dropdown-item"><i class="typcn typcn-time"></i> Activity Logs</a>
|
|
<a href="" class="dropdown-item"><i class="typcn typcn-cog-outline"></i> Account Settings</a>
|
|
<a href="{{ path('app_demo_signin') }}" class="dropdown-item"><i class="typcn typcn-power-outline"></i> Sign Out</a>
|
|
</div>
|
|
<!-- dropdown-menu -->
|
|
</div>
|
|
</div>
|
|
<!-- az-header-right -->
|
|
</div>
|
|
<!-- container -->
|
|
</div>
|
|
<!-- az-header -->
|
|
<div class="az-content az-content-dashboard">
|
|
<div class="container">
|
|
<div class="az-content-body">
|
|
<div class="az-dashboard-one-title">
|
|
<div>
|
|
<h2 class="az-dashboard-title">Hi, welcome back!</h2>
|
|
<p class="az-dashboard-text">Your web analytics dashboard template.</p>
|
|
</div>
|
|
<div class="az-content-header-right">
|
|
<div class="media">
|
|
<div class="media-body">
|
|
<label>Start Date</label>
|
|
<h6>Oct 10, 2018</h6>
|
|
</div>
|
|
<!-- media-body -->
|
|
</div>
|
|
<!-- media -->
|
|
<div class="media">
|
|
<div class="media-body">
|
|
<label>End Date</label>
|
|
<h6>Oct 23, 2018</h6>
|
|
</div>
|
|
<!-- media-body -->
|
|
</div>
|
|
<!-- media -->
|
|
<div class="media">
|
|
<div class="media-body">
|
|
<label>Event Category</label>
|
|
<h6>All Categories</h6>
|
|
</div>
|
|
<!-- media-body -->
|
|
</div>
|
|
<!-- media -->
|
|
<a href="" class="btn btn-purple">Export</a>
|
|
</div>
|
|
</div>
|
|
<!-- az-dashboard-one-title -->
|
|
<div class="az-dashboard-nav">
|
|
<nav class="nav">
|
|
<a class="nav-link active" data-toggle="tab" href="#">Overview</a>
|
|
<a class="nav-link" data-toggle="tab" href="#">Audiences</a>
|
|
<a class="nav-link" data-toggle="tab" href="#">Demographics</a>
|
|
<a class="nav-link" data-toggle="tab" href="#">More</a>
|
|
</nav>
|
|
<nav class="nav">
|
|
<a class="nav-link" href="#"><i class="far fa-save"></i> Save Report</a>
|
|
<a class="nav-link" href="#"><i class="far fa-file-pdf"></i> Export to PDF</a>
|
|
<a class="nav-link" href="#"><i class="far fa-envelope"></i>Send to Email</a>
|
|
<a class="nav-link" href="#"><i class="fas fa-ellipsis-h"></i></a>
|
|
</nav>
|
|
</div>
|
|
<div class="row row-sm mg-b-20">
|
|
<div class="col-lg-7 ht-lg-100p">
|
|
<div class="card card-dashboard-one">
|
|
<div class="card-header">
|
|
<div>
|
|
<h6 class="card-title">Website Audience Metrics</h6>
|
|
<p class="card-text">Audience to which the users belonged while on the current date range.</p>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button class="btn active">Day</button>
|
|
<button class="btn">Week</button>
|
|
<button class="btn">Month</button>
|
|
</div>
|
|
</div>
|
|
<!-- card-header -->
|
|
<div class="card-body">
|
|
<div class="card-body-top">
|
|
<div>
|
|
<label class="mg-b-0">Users</label>
|
|
<h2>13,956</h2>
|
|
</div>
|
|
<div>
|
|
<label class="mg-b-0">Bounce Rate</label>
|
|
<h2>33.50%</h2>
|
|
</div>
|
|
<div>
|
|
<label class="mg-b-0">Page Views</label>
|
|
<h2>83,123</h2>
|
|
</div>
|
|
<div>
|
|
<label class="mg-b-0">Sessions</label>
|
|
<h2>16,869</h2>
|
|
</div>
|
|
</div>
|
|
<!-- card-body-top -->
|
|
<div class="flot-chart-wrapper">
|
|
<div id="flotChart" class="flot-chart"></div>
|
|
</div>
|
|
<!-- flot-chart-wrapper -->
|
|
</div>
|
|
<!-- card-body -->
|
|
</div>
|
|
<!-- card -->
|
|
</div>
|
|
<!-- col -->
|
|
<div class="col-lg-5 mg-t-20 mg-lg-t-0">
|
|
<div class="row row-sm">
|
|
<div class="col-sm-6">
|
|
<div class="card card-dashboard-two">
|
|
<div class="card-header">
|
|
<h6>33.50% <i class="icon ion-md-trending-up tx-success"></i> <small>18.02%</small></h6>
|
|
<p>Bounce Rate</p>
|
|
</div>
|
|
<!-- card-header -->
|
|
<div class="card-body">
|
|
<div class="chart-wrapper">
|
|
<div id="flotChart1" class="flot-chart"></div>
|
|
</div>
|
|
<!-- chart-wrapper -->
|
|
</div>
|
|
<!-- card-body -->
|
|
</div>
|
|
<!-- card -->
|
|
</div>
|
|
<!-- col -->
|
|
<div class="col-sm-6 mg-t-20 mg-sm-t-0">
|
|
<div class="card card-dashboard-two">
|
|
<div class="card-header">
|
|
<h6>86k <i class="icon ion-md-trending-down tx-danger"></i> <small>0.86%</small></h6>
|
|
<p>Total Users</p>
|
|
</div>
|
|
<!-- card-header -->
|
|
<div class="card-body">
|
|
<div class="chart-wrapper">
|
|
<div id="flotChart2" class="flot-chart"></div>
|
|
</div>
|
|
<!-- chart-wrapper -->
|
|
</div>
|
|
<!-- card-body -->
|
|
</div>
|
|
<!-- card -->
|
|
</div>
|
|
<!-- col -->
|
|
<div class="col-sm-12 mg-t-20">
|
|
<div class="card card-dashboard-three">
|
|
<div class="card-header">
|
|
<p>All Sessions</p>
|
|
<h6>16,869 <small class="tx-success"><i class="icon ion-md-arrow-up"></i> 2.87%</small></h6>
|
|
<small>The total number of sessions within the date range. It is the period time a user is actively engaged with your website, page or app, etc.</small>
|
|
</div>
|
|
<!-- card-header -->
|
|
<div class="card-body">
|
|
<div class="chart">
|
|
<canvas id="chartBar5"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- row -->
|
|
</div>
|
|
<!--col -->
|
|
</div>
|
|
<!-- row -->
|
|
<div class="row row-sm mg-b-20">
|
|
<div class="col-lg-4">
|
|
<div class="card card-dashboard-pageviews">
|
|
<div class="card-header">
|
|
<h6 class="card-title">Page Views by Page Title</h6>
|
|
<p class="card-text">This report is based on 100% of sessions.</p>
|
|
</div>
|
|
<!-- card-header -->
|
|
<div class="card-body">
|
|
<div class="az-list-item">
|
|
<div>
|
|
<h6>Admin Home</h6>
|
|
<span>/demo/admin/{{ path('app_demo_index') }}</span>
|
|
</div>
|
|
<div>
|
|
<h6 class="tx-primary">7,755</h6>
|
|
<span>31.74% (-100.00%)</span>
|
|
</div>
|
|
</div>
|
|
<!-- list-group-item -->
|
|
<div class="az-list-item">
|
|
<div>
|
|
<h6>Form Elements</h6>
|
|
<span>/demo/admin/forms.html</span>
|
|
</div>
|
|
<div>
|
|
<h6 class="tx-primary">5,215</h6>
|
|
<span>28.53% (-100.00%)</span>
|
|
</div>
|
|
</div>
|
|
<!-- list-group-item -->
|
|
<div class="az-list-item">
|
|
<div>
|
|
<h6>Utilities</h6>
|
|
<span>/demo/admin/util.html</span>
|
|
</div>
|
|
<div>
|
|
<h6 class="tx-primary">4,848</h6>
|
|
<span>25.35% (-100.00%)</span>
|
|
</div>
|
|
</div>
|
|
<!-- list-group-item -->
|
|
<div class="az-list-item">
|
|
<div>
|
|
<h6>Form Validation</h6>
|
|
<span>/demo/admin/validation.html</span>
|
|
</div>
|
|
<div>
|
|
<h6 class="tx-primary">3,275</h6>
|
|
<span>23.17% (-100.00%)</span>
|
|
</div>
|
|
</div>
|
|
<!-- list-group-item -->
|
|
<div class="az-list-item">
|
|
<div>
|
|
<h6>Modals</h6>
|
|
<span>/demo/admin/modals.html</span>
|
|
</div>
|
|
<div>
|
|
<h6 class="tx-primary">3,003</h6>
|
|
<span>22.21% (-100.00%)</span>
|
|
</div>
|
|
</div>
|
|
<!-- list-group-item -->
|
|
</div>
|
|
<!-- card-body -->
|
|
</div>
|
|
<!-- card -->
|
|
</div>
|
|
<!-- col -->
|
|
<div class="col-lg-8 mg-t-20 mg-lg-t-0">
|
|
<div class="card card-dashboard-four">
|
|
<div class="card-header">
|
|
<h6 class="card-title">Sessions by Channel</h6>
|
|
</div>
|
|
<!-- card-header -->
|
|
<div class="card-body row">
|
|
<div class="col-md-6 d-flex align-items-center">
|
|
<div class="chart">
|
|
<canvas id="chartDonut"></canvas>
|
|
</div>
|
|
</div>
|
|
<!-- col -->
|
|
<div class="col-md-6 col-lg-5 mg-lg-l-auto mg-t-20 mg-md-t-0">
|
|
<div class="az-traffic-detail-item">
|
|
<div>
|
|
<span>Organic Search</span>
|
|
<span>1,320 <span>(25%)</span></span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-purple wd-25p" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<!-- progress -->
|
|
</div>
|
|
<div class="az-traffic-detail-item">
|
|
<div>
|
|
<span>Email</span>
|
|
<span>987 <span>(20%)</span></span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-primary wd-20p" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<!-- progress -->
|
|
</div>
|
|
<div class="az-traffic-detail-item">
|
|
<div>
|
|
<span>Referral</span>
|
|
<span>2,010 <span>(30%)</span></span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-info wd-30p" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<!-- progress -->
|
|
</div>
|
|
<div class="az-traffic-detail-item">
|
|
<div>
|
|
<span>Social</span>
|
|
<span>654 <span>(15%)</span></span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-teal wd-15p" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<!-- progress -->
|
|
</div>
|
|
<div class="az-traffic-detail-item">
|
|
<div>
|
|
<span>Other</span>
|
|
<span>400 <span>(10%)</span></span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-gray-500 wd-10p" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<!-- progress -->
|
|
</div>
|
|
</div>
|
|
<!-- col -->
|
|
</div>
|
|
<!-- card-body -->
|
|
</div>
|
|
<!-- card-dashboard-four -->
|
|
</div>
|
|
<!-- col -->
|
|
</div>
|
|
<!-- row -->
|
|
<div class="row row-sm mg-b-20 mg-lg-b-0">
|
|
<div class="col-lg-5 col-xl-4">
|
|
<div class="row row-sm">
|
|
<div class="col-md-6 col-lg-12 mg-b-20 mg-md-b-0 mg-lg-b-20">
|
|
<div class="card card-dashboard-five">
|
|
<div class="card-header">
|
|
<h6 class="card-title">Acquisition</h6>
|
|
<span class="card-text">Tells you where your visitors originated from, such as search engines, social networks or website referrals.</span>
|
|
</div>
|
|
<!-- card-header -->
|
|
<div class="card-body row row-sm">
|
|
<div class="col-6 d-sm-flex align-items-center">
|
|
<div class="card-chart bg-primary">
|
|
<span class="peity-bar" data-peity='{"fill": ["#fff"], "width": 20, "height": 20 }'>6,4,7,5,7</span>
|
|
</div>
|
|
<div>
|
|
<label>Bounce Rate</label>
|
|
<h4>33.50%</h4>
|
|
</div>
|
|
</div>
|
|
<!-- col -->
|
|
<div class="col-6 d-sm-flex align-items-center">
|
|
<div class="card-chart bg-purple">
|
|
<span class="peity-bar" data-peity='{"fill": ["#fff"], "width": 21, "height": 20 }'>7,4,5,7,2</span>
|
|
</div>
|
|
<div>
|
|
<label>Sessions</label>
|
|
<h4>9,065</h4>
|
|
</div>
|
|
</div>
|
|
<!-- col -->
|
|
</div>
|
|
<!-- card-body -->
|
|
</div>
|
|
<!-- card-dashboard-five -->
|
|
</div>
|
|
<!-- col -->
|
|
<div class="col-md-6 col-lg-12">
|
|
<div class="card card-dashboard-five">
|
|
<div class="card-header">
|
|
<h6 class="card-title">Sessions</h6>
|
|
<span class="card-text"> A session is the period time a user is actively engaged with your website, app, etc.</span>
|
|
</div>
|
|
<!-- card-header -->
|
|
<div class="card-body row row-sm">
|
|
<div class="col-6 d-sm-flex align-items-center">
|
|
<div class="mg-b-10 mg-sm-b-0 mg-sm-r-10">
|
|
<span class="peity-donut" data-peity='{ "fill": ["#007bff", "#cad0e8"], "innerRadius": 14, "radius": 20 }'>4/7</span>
|
|
</div>
|
|
<div>
|
|
<label>% New Sessions</label>
|
|
<h4>26.80%</h4>
|
|
</div>
|
|
</div>
|
|
<!-- col -->
|
|
<div class="col-6 d-sm-flex align-items-center">
|
|
<div class="mg-b-10 mg-sm-b-0 mg-sm-r-10">
|
|
<span class="peity-donut" data-peity='{ "fill": ["#00cccc", "#cad0e8"], "innerRadius": 14, "radius": 20 }'>2/7</span>
|
|
</div>
|
|
<div>
|
|
<label>Pages/Session</label>
|
|
<h4>1,005</h4>
|
|
</div>
|
|
</div>
|
|
<!-- col -->
|
|
</div>
|
|
<!-- card-body -->
|
|
</div>
|
|
<!-- card-dashboard-five -->
|
|
</div>
|
|
<!-- col -->
|
|
</div>
|
|
<!-- row -->
|
|
</div>
|
|
<!-- col-lg-3 -->
|
|
<div class="col-lg-7 col-xl-8 mg-t-20 mg-lg-t-0">
|
|
<div class="card card-table-one">
|
|
<h6 class="card-title">What pages do your users visit</h6>
|
|
<p class="az-content-text mg-b-20">Part of this date range occurs before the new users metric had been calculated, so the old users metric is displayed.</p>
|
|
<div class="table-responsive">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th class="wd-5p"> </th>
|
|
<th class="wd-45p">Country</th>
|
|
<th>Entrances</th>
|
|
<th>Bounce Rate</th>
|
|
<th>Exits</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><i class="flag-icon flag-icon-us flag-icon-squared"></i></td>
|
|
<td><strong>United States</strong></td>
|
|
<td><strong>134</strong> (1.51%)</td>
|
|
<td>33.58%</td>
|
|
<td>15.47%</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="flag-icon flag-icon-gb flag-icon-squared"></i></td>
|
|
<td><strong>United Kingdom</strong></td>
|
|
<td><strong>290</strong> (3.30%)</td>
|
|
<td>9.22%</td>
|
|
<td>7.99%</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="flag-icon flag-icon-in flag-icon-squared"></i></td>
|
|
<td><strong>India</strong></td>
|
|
<td><strong>250</strong> (3.00%)</td>
|
|
<td>20.75%</td>
|
|
<td>2.40%</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="flag-icon flag-icon-ca flag-icon-squared"></i></td>
|
|
<td><strong>Canada</strong></td>
|
|
<td><strong>216</strong> (2.79%)</td>
|
|
<td>32.07%</td>
|
|
<td>15.09%</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="flag-icon flag-icon-fr flag-icon-squared"></i></td>
|
|
<td><strong>France</strong></td>
|
|
<td><strong>216</strong> (2.79%)</td>
|
|
<td>32.07%</td>
|
|
<td>15.09%</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i class="flag-icon flag-icon-ph flag-icon-squared"></i></td>
|
|
<td><strong>Philippines</strong></td>
|
|
<td><strong>197</strong> (2.12%)</td>
|
|
<td>32.07%</td>
|
|
<td>15.09%</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- table-responsive -->
|
|
</div>
|
|
<!-- card -->
|
|
</div>
|
|
<!-- col-lg -->
|
|
</div>
|
|
<!-- row -->
|
|
</div>
|
|
<!-- az-content-body -->
|
|
</div>
|
|
</div>
|
|
<!-- az-content -->
|
|
<div class="az-footer ht-40">
|
|
<div class="container ht-100p pd-t-0-f">
|
|
<span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © bootstrapdash.com 2020</span>
|
|
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"> Free <a href="https://www.bootstrapdash.com/bootstrap-admin-template/" target="_blank">Bootstrap admin templates</a> from Bootstrapdash.com</span>
|
|
</div>
|
|
<!-- container -->
|
|
</div>
|
|
<!-- az-footer -->
|
|
<script src="{{ asset('assets/lib/jquery/jquery.min.js') }}"></script>
|
|
<script src="{{ asset('assets/lib/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
|
<script src="{{ asset('assets/lib/ionicons/ionicons.js') }}"></script>
|
|
<script src="{{ asset('assets/lib/jquery.flot/jquery.flot.js') }}"></script>
|
|
<script src="{{ asset('assets/lib/jquery.flot/jquery.flot.resize.js') }}"></script>
|
|
<script src="{{ asset('assets/lib/chart.js/Chart.bundle.min.js') }}"></script>
|
|
<script src="{{ asset('assets/lib/peity/jquery.peity.min.js') }}"></script>
|
|
<script src="{{ asset('assets/js/azia.js') }}"></script>
|
|
<script src="{{ asset('assets/js/chart.flot.sampledata.js') }}"></script>
|
|
<script src="{{ asset('assets/js/dashboard.sampledata.js') }}"></script>
|
|
<script>
|
|
$(function(){
|
|
'use strict'
|
|
|
|
var plot = $.plot('#flotChart', [{
|
|
data: flotSampleData3,
|
|
color: '#007bff',
|
|
lines: {
|
|
fillColor: { colors: [{ opacity: 0 }, { opacity: 0.2 }]}
|
|
}
|
|
},{
|
|
data: flotSampleData4,
|
|
color: '#560bd0',
|
|
lines: {
|
|
fillColor: { colors: [{ opacity: 0 }, { opacity: 0.2 }]}
|
|
}
|
|
}], {
|
|
series: {
|
|
shadowSize: 0,
|
|
lines: {
|
|
show: true,
|
|
lineWidth: 2,
|
|
fill: true
|
|
}
|
|
},
|
|
grid: {
|
|
borderWidth: 0,
|
|
labelMargin: 8
|
|
},
|
|
yaxis: {
|
|
show: true,
|
|
min: 0,
|
|
max: 100,
|
|
ticks: [[0,''],[20,'20K'],[40,'40K'],[60,'60K'],[80,'80K']],
|
|
tickColor: '#eee'
|
|
},
|
|
xaxis: {
|
|
show: true,
|
|
color: '#fff',
|
|
ticks: [[25,'OCT 21'],[75,'OCT 22'],[100,'OCT 23'],[125,'OCT 24']],
|
|
}
|
|
});
|
|
|
|
$.plot('#flotChart1', [{
|
|
data: dashData2,
|
|
color: '#00cccc'
|
|
}], {
|
|
series: {
|
|
shadowSize: 0,
|
|
lines: {
|
|
show: true,
|
|
lineWidth: 2,
|
|
fill: true,
|
|
fillColor: { colors: [ { opacity: 0.2 }, { opacity: 0.2 } ] }
|
|
}
|
|
},
|
|
grid: {
|
|
borderWidth: 0,
|
|
labelMargin: 0
|
|
},
|
|
yaxis: {
|
|
show: false,
|
|
min: 0,
|
|
max: 35
|
|
},
|
|
xaxis: {
|
|
show: false,
|
|
max: 50
|
|
}
|
|
});
|
|
|
|
$.plot('#flotChart2', [{
|
|
data: dashData2,
|
|
color: '#007bff'
|
|
}], {
|
|
series: {
|
|
shadowSize: 0,
|
|
bars: {
|
|
show: true,
|
|
lineWidth: 0,
|
|
fill: 1,
|
|
barWidth: .5
|
|
}
|
|
},
|
|
grid: {
|
|
borderWidth: 0,
|
|
labelMargin: 0
|
|
},
|
|
yaxis: {
|
|
show: false,
|
|
min: 0,
|
|
max: 35
|
|
},
|
|
xaxis: {
|
|
show: false,
|
|
max: 20
|
|
}
|
|
});
|
|
|
|
|
|
//-------------------------------------------------------------//
|
|
|
|
|
|
// Line chart
|
|
$('.peity-line').peity('line');
|
|
|
|
// Bar charts
|
|
$('.peity-bar').peity('bar');
|
|
|
|
// Bar charts
|
|
$('.peity-donut').peity('donut');
|
|
|
|
var ctx5 = document.getElementById('chartBar5').getContext('2d');
|
|
new Chart(ctx5, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: [0,1,2,3,4,5,6,7],
|
|
datasets: [{
|
|
data: [2, 4, 10, 20, 45, 40, 35, 18],
|
|
backgroundColor: '#560bd0'
|
|
}, {
|
|
data: [3, 6, 15, 35, 50, 45, 35, 25],
|
|
backgroundColor: '#cad0e8'
|
|
}]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
tooltips: {
|
|
enabled: false
|
|
},
|
|
legend: {
|
|
display: false,
|
|
labels: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
display: false,
|
|
ticks: {
|
|
beginAtZero:true,
|
|
fontSize: 11,
|
|
max: 80
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
barPercentage: 0.6,
|
|
gridLines: {
|
|
color: 'rgba(0,0,0,0.08)'
|
|
},
|
|
ticks: {
|
|
beginAtZero:true,
|
|
fontSize: 11,
|
|
display: false
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
|
|
// Donut Chart
|
|
var datapie = {
|
|
labels: ['Search', 'Email', 'Referral', 'Social', 'Other'],
|
|
datasets: [{
|
|
data: [25,20,30,15,10],
|
|
backgroundColor: ['#6f42c1', '#007bff','#17a2b8','#00cccc','#adb2bd']
|
|
}]
|
|
};
|
|
|
|
var optionpie = {
|
|
maintainAspectRatio: false,
|
|
responsive: true,
|
|
legend: {
|
|
display: false,
|
|
},
|
|
animation: {
|
|
animateScale: true,
|
|
animateRotate: true
|
|
}
|
|
};
|
|
|
|
// For a doughnut chart
|
|
var ctxpie= document.getElementById('chartDonut');
|
|
var myPieChart6 = new Chart(ctxpie, {
|
|
type: 'doughnut',
|
|
data: datapie,
|
|
options: optionpie
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|