/
var
/
www
/
cobraambalaj
/
resources
/
views
/
admin
/
dashboard
/
/var/www/cobraambalaj/resources/views/admin/dashboard
mkdir
upload
Name
Size
Mode
Actions
dashboard.blade.php
18127
0644
edit
dl
rm
Edit:
/var/www/cobraambalaj/resources/views/admin/dashboard/dashboard.blade.php
(18127B)
@extends('admin.layout.app') @section('title', __('admin.dashboard.page_title')) @section('js') @if ($userCountry != null) <script type="text/javascript"> /* Users by country */ google.charts.load('current', { 'packages': ['geochart'], 'mapsApiKey': '64f486e6f95cecddf0a7ad1aa36d3677be28670a' }); google.charts.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() { var data = google.visualization.arrayToDataTable({!! json_encode($userCountry) !!}); var options = { displayMode: 'regions', legend: 'none', colorAxis: { minValue: 1, maxValue: 1, colors: ['#5cb85c'] } }; var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); chart.draw(data, options); } </script> @endif @if ($newUsers != null && $oldUsers != null) <script type="text/javascript"> // // Overview Users // var bouCtx = document.getElementsByClassName('blog-overview-users')[0]; // Data var bouData = { // Generate the days labels on the X axis. labels: Array.from(new Array(30), function(_, i) { return i === 0 ? 1 + ' ' + {!! json_encode(__('admin.dashboard.day')) !!} : i + ' ' + {!! json_encode(__('admin.dashboard.day')) !!}; }), datasets: [{ label: {!! json_encode(__('admin.dashboard.new_users')) !!}, fill: 'start', data: {!! json_encode($newUsers) !!}, backgroundColor: 'rgba(0,123,255,0.1)', borderColor: 'rgba(0,123,255,1)', pointBackgroundColor: '#ffffff', pointHoverBackgroundColor: 'rgb(0,123,255)', borderWidth: 1.5, pointRadius: 0, pointHoverRadius: 3 }, { label: {!! json_encode(__('admin.dashboard.returned_users')) !!}, fill: 'start', data: {!! json_encode($oldUsers) !!}, backgroundColor: 'rgba(255,65,105,0.1)', borderColor: 'rgba(255,65,105,1)', pointBackgroundColor: '#ffffff', pointHoverBackgroundColor: 'rgba(255,65,105,1)', borderDash: [3, 3], borderWidth: 1, pointRadius: 0, pointHoverRadius: 2, pointBorderColor: 'rgba(255,65,105,1)' }] }; // Options var bouOptions = { responsive: true, legend: { position: 'top' }, elements: { line: { // A higher value makes the line look skewed at this ratio. tension: 0.3 }, point: { radius: 0 } }, scales: { xAxes: [{ gridLines: false, ticks: { callback: function(tick, index) { // Jump every 7 values on the X axis labels to avoid clutter. return index % 7 !== 0 ? '' : tick; } } }], yAxes: [{ ticks: { suggestedMax: 45, callback: function(tick, index, ticks) { if (tick === 0) { return tick; } // Format the amounts using Ks for thousands. return tick > 999 ? (tick / 1000).toFixed(1) + 'K' : tick; } } }] }, // Uncomment the next lines in order to disable the animations. // animation: { // duration: 0 // }, hover: { mode: 'nearest', intersect: false }, tooltips: { custom: false, mode: 'nearest', intersect: false } }; // Generate the Analytics Overview chart. window.BlogOverviewUsers = new Chart(bouCtx, { type: 'LineWithLine', data: bouData, options: bouOptions }); // Hide initially the first and last analytics overview chart points. // They can still be triggered on hover. var aocMeta = BlogOverviewUsers.getDatasetMeta(0); aocMeta.data[0]._model.radius = 0; aocMeta.data[bouData.datasets[0].data.length - 1]._model.radius = 0; // Render the chart. window.BlogOverviewUsers.render(); </script> @endif @if ($userDevice != null) <script type="text/javascript"> // // Users by device pie chart // // Data var ubdData = { datasets: [{ hoverBorderColor: '#ffffff', data: [ {!! json_encode($desktopNumber) !!}, {!! json_encode($tabletNumber) !!}, {!! json_encode($mobileNumber) !!} ], backgroundColor: [ '#1adba2', '#fb7906', '#8445f7' ] }], labels: [ {!! json_encode(__('admin.dashboard.desktop')) !!}, {!! json_encode(__('admin.dashboard.tablet')) !!}, {!! json_encode(__('admin.dashboard.mobile')) !!}, ] }; // Options var ubdOptions = { legend: { display: false, position: 'bottom', labels: { padding: 25, boxWidth: 20 } }, cutoutPercentage: 0, // Uncomment the following line in order to disable the animations. // animation: false, tooltips: { custom: false, mode: 'index', position: 'nearest' } }; var ubdCtx = document.getElementsByClassName('blog-users-by-device')[0]; // Generate the users by device chart. window.ubdChart = new Chart(ubdCtx, { type: 'pie', data: ubdData, options: ubdOptions }); </script> @endif @endsection @section('content') <section class="page-content dashboard"> <!-- Small Stats Blocks --> <div class="row row-eq-height"> <div class="col-lg col-md-6 col-sm-6 mb-4"> <div class="stats-small stats-small--1 card card-small"> <div class="card-body p-0 d-flex"> <div class="d-flex flex-column m-auto"> <div class="stats-small__data text-center"> <span class="stats-small__label text-uppercase">{{ __('admin.dashboard.categories') }}</span> <h6 class="stats-small__value count my-3 text-blue">{{ $categories }}</h6> </div> </div> </div> </div> </div> <div class="col-lg col-md-6 col-sm-6 mb-4"> <div class="stats-small stats-small--1 card card-small"> <div class="card-body p-0 d-flex"> <div class="d-flex flex-column m-auto"> <div class="stats-small__data text-center"> <span class="stats-small__label text-uppercase">{{ __('admin.dashboard.products') }}</span> <h6 class="stats-small__value count my-3 text-green">{{ $products }}</h6> </div> </div> </div> </div> </div> <div class="col-lg col-md-4 col-sm-6 mb-4"> <div class="stats-small stats-small--1 card card-small"> <div class="card-body p-0 d-flex"> <div class="d-flex flex-column m-auto"> <div class="stats-small__data text-center"> <span class="stats-small__label text-uppercase">{{ __('admin.dashboard.clients') }}</span> <h6 class="stats-small__value count my-3 text-purple">{{ $clients }}</h6> </div> </div> </div> </div> </div> <div class="col-lg col-md-4 col-sm-6 mb-4"> <div class="stats-small stats-small--1 card card-small"> <div class="card-body p-0 d-flex"> <div class="d-flex flex-column m-auto"> <div class="stats-small__data text-center"> <span class="stats-small__label text-uppercase">{{ __('admin.dashboard.offers') }}</span> <h6 class="stats-small__value count my-3 text-orange">{{ $offers }}</h6> </div> </div> </div> </div> </div> <div class="col-lg col-md-4 col-sm-12 mb-4"> <div class="stats-small stats-small--1 card card-small"> <div class="card-body p-0 d-flex"> <div class="d-flex flex-column m-auto"> <div class="stats-small__data text-center"> <span class="stats-small__label text-uppercase">{{ __('admin.dashboard.contacts') }}</span> <h6 class="stats-small__value count my-3 text-cyan">{{ $contacts }}</h6> </div> </div> </div> </div> </div> </div> <!-- End Small Stats Blocks --> <div class="row row-eq-height"> <!-- Users Stats --> <div class="col-lg-8 col-md-12 col-sm-12 mb-4"> <div class="card card-small"> <div class="card-header border-bottom"> <h6 class="m-0">{{ __('admin.dashboard.users') }}</h6> </div> <div class="card-body pt-0"> <canvas height="130" style="max-width: 100% !important;" class="blog-overview-users"></canvas> </div> </div> </div> <!-- End Users Stats --> <!-- Users By Device Stats --> <div class="col-lg-4 col-md-6 col-sm-12 mb-4"> <div class="card card-small h-100"> <div class="card-header border-bottom"> <h6 class="m-0">{{ __('admin.dashboard.users_by_device') }}</h6> </div> <div class="card-body"> <canvas height="220" class="blog-users-by-device m-auto"></canvas> <div class="row mt-4"> <div class="col text-center"> <span class="text-teal">{{ $desktopNumber }}</span> <span class="font-sm mt-1 d-block"> <i class="material-icons-outlined font-sm text-teal"> circle </i> {{ __('admin.dashboard.desktop') }} </span> </div> <div class="col text-center"> <span class="text-orange">{{ $tabletNumber }}</span> <span class="font-sm mt-1 d-block"> <i class="material-icons-outlined font-sm text-orange"> circle </i> {{ __('admin.dashboard.tablet') }} </span> </div> <div class="col text-center"> <span class="text-purple">{{ $mobileNumber }}</span> <span class="font-sm mt-1 d-block"> <i class="material-icons-outlined font-sm text-purple"> circle </i> {{ __('admin.dashboard.mobile') }} </span> </div> </div> </div> </div> </div> <!-- End Users By Device Stats --> <!-- Most viewed pages --> <div class="col-lg-4 col-md-12 col-sm-12 mb-4"> <div class="card card-small"> <div class="card-header border-bottom"> <h6 class="m-0">{{ __('admin.dashboard.most_viewed_pages') }}</h6> </div> <div class="card-body scro" style="max-height:300px;"> <ul class="list-group list-group-small list-group-flush"> @forelse ($viewedPages as $viewedPage) <li class="list-group-item d-flex px-3 align-items-center"> <span class="d-block text-semibold text-fiord-blue" style="max-width:220px">{{ $viewedPage['pageTitle'] }}<br><span class="text-gray font-sm">{{ $viewedPage['url'] }}</span></span> <span class="ml-auto text-right text-semibold text-reagent-gray">{{ $viewedPage['pageViews'] }} View</span> </li> @empty <li class="list-group-item d-flex px-3 text-center"> There is no data </li> @endforelse </ul> </div> </div> </div> <!-- End Most viewed pages --> <!-- Top Referrals Component --> <div class="col-lg-4 col-md-12 col-sm-12 mb-4"> <div class="card card-small"> <div class="card-header border-bottom"> <h6 class="m-0">{{ __('admin.dashboard.top_referrals') }}</h6> </div> <div class="card-body scro" style="max-height:300px;"> <ul class="list-group list-group-small list-group-flush"> @forelse ($topReferrals as $topReferral) <li class="list-group-item d-flex px-3"> <span class="text-semibold text-fiord-blue">{{ $topReferral['url'] }}</span> <span class="ml-auto text-right text-semibold text-reagent-gray">{{ $topReferral['pageViews'] }} Referral</span> </li> @empty <li class="list-group-item d-flex px-3 text-center"> There is no data </li> @endforelse </ul> </div> </div> </div> <!-- End Top Referrals Component --> <!-- Users By Country --> <div class="col-lg-4 col-md-6 col-sm-12 mb-4"> <div class="card card-small h-100"> <div class="card-header border-bottom"> <h6 class="m-0">{{ __('admin.dashboard.users_by_country') }}</h6> </div> <div class="card-body"> <div id="regions_div" class="blog-users-by-device m-auto" style="width: 100%; height: 220px;"></div> </div> </div> </div> <!-- End Users By Country --> </div> </section> @endsection
Save
cmd:
run