307 lines
12 KiB
PHP
307 lines
12 KiB
PHP
<x-layout bodyClass="g-sidenav-show bg-gray-200">
|
|
<x-navbars.sidebar activePage='dashboard'></x-navbars.sidebar>
|
|
<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
|
|
<!-- Navbar -->
|
|
<x-navbars.navs.auth titlePage="Dashboard"></x-navbars.navs.auth>
|
|
<!-- End Navbar -->
|
|
<div class="container-fluid py-4">
|
|
<div class="row">
|
|
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
|
|
<div class="card">
|
|
<div class="card-header p-3 pt-2">
|
|
<div
|
|
class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute">
|
|
<i class="material-icons opacity-10">weekend</i>
|
|
</div>
|
|
<div class="text-end pt-1">
|
|
<p class="text-sm mb-0 text-capitalize">Today's Money</p>
|
|
<h4 class="mb-0">$53k</h4>
|
|
</div>
|
|
</div>
|
|
<hr class="dark horizontal my-0">
|
|
<div class="card-footer p-3">
|
|
<p class="mb-0"><span class="text-success text-sm font-weight-bolder">+55% </span>than
|
|
lask week</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
|
|
<div class="card">
|
|
<div class="card-header p-3 pt-2">
|
|
<div
|
|
class="icon icon-lg icon-shape bg-gradient-primary shadow-primary text-center border-radius-xl mt-n4 position-absolute">
|
|
<i class="material-icons opacity-10">person</i>
|
|
</div>
|
|
<div class="text-end pt-1">
|
|
<p class="text-sm mb-0 text-capitalize">Today's Users</p>
|
|
<h4 class="mb-0">2,300</h4>
|
|
</div>
|
|
</div>
|
|
<hr class="dark horizontal my-0">
|
|
<div class="card-footer p-3">
|
|
<p class="mb-0"><span class="text-success text-sm font-weight-bolder">+3% </span>than
|
|
lask month</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<x-footers.auth></x-footers.auth>
|
|
</div>
|
|
</main>
|
|
<x-plugins></x-plugins>
|
|
</div>
|
|
@push('js')
|
|
<script src="{{ asset('assets') }}/js/plugins/chartjs.min.js"></script>
|
|
<script>
|
|
var ctx = document.getElementById("chart-bars").getContext("2d");
|
|
|
|
new Chart(ctx, {
|
|
type: "bar",
|
|
data: {
|
|
labels: ["M", "T", "W", "T", "F", "S", "S"],
|
|
datasets: [{
|
|
label: "Sales",
|
|
tension: 0.4,
|
|
borderWidth: 0,
|
|
borderRadius: 4,
|
|
borderSkipped: false,
|
|
backgroundColor: "rgba(255, 255, 255, .8)",
|
|
data: [50, 20, 10, 22, 50, 10, 40],
|
|
maxBarThickness: 6
|
|
}, ],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
}
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'index',
|
|
},
|
|
scales: {
|
|
y: {
|
|
grid: {
|
|
drawBorder: false,
|
|
display: true,
|
|
drawOnChartArea: true,
|
|
drawTicks: false,
|
|
borderDash: [5, 5],
|
|
color: 'rgba(255, 255, 255, .2)'
|
|
},
|
|
ticks: {
|
|
suggestedMin: 0,
|
|
suggestedMax: 500,
|
|
beginAtZero: true,
|
|
padding: 10,
|
|
font: {
|
|
size: 14,
|
|
weight: 300,
|
|
family: "Roboto",
|
|
style: 'normal',
|
|
lineHeight: 2
|
|
},
|
|
color: "#fff"
|
|
},
|
|
},
|
|
x: {
|
|
grid: {
|
|
drawBorder: false,
|
|
display: true,
|
|
drawOnChartArea: true,
|
|
drawTicks: false,
|
|
borderDash: [5, 5],
|
|
color: 'rgba(255, 255, 255, .2)'
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
color: '#f8f9fa',
|
|
padding: 10,
|
|
font: {
|
|
size: 14,
|
|
weight: 300,
|
|
family: "Roboto",
|
|
style: 'normal',
|
|
lineHeight: 2
|
|
},
|
|
}
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
|
|
var ctx2 = document.getElementById("chart-line").getContext("2d");
|
|
|
|
new Chart(ctx2, {
|
|
type: "line",
|
|
data: {
|
|
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
|
datasets: [{
|
|
label: "Mobile apps",
|
|
tension: 0,
|
|
borderWidth: 0,
|
|
pointRadius: 5,
|
|
pointBackgroundColor: "rgba(255, 255, 255, .8)",
|
|
pointBorderColor: "transparent",
|
|
borderColor: "rgba(255, 255, 255, .8)",
|
|
borderColor: "rgba(255, 255, 255, .8)",
|
|
borderWidth: 4,
|
|
backgroundColor: "transparent",
|
|
fill: true,
|
|
data: [50, 40, 300, 320, 500, 350, 200, 230, 500],
|
|
maxBarThickness: 6
|
|
|
|
}],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
}
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'index',
|
|
},
|
|
scales: {
|
|
y: {
|
|
grid: {
|
|
drawBorder: false,
|
|
display: true,
|
|
drawOnChartArea: true,
|
|
drawTicks: false,
|
|
borderDash: [5, 5],
|
|
color: 'rgba(255, 255, 255, .2)'
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
color: '#f8f9fa',
|
|
padding: 10,
|
|
font: {
|
|
size: 14,
|
|
weight: 300,
|
|
family: "Roboto",
|
|
style: 'normal',
|
|
lineHeight: 2
|
|
},
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
drawBorder: false,
|
|
display: false,
|
|
drawOnChartArea: false,
|
|
drawTicks: false,
|
|
borderDash: [5, 5]
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
color: '#f8f9fa',
|
|
padding: 10,
|
|
font: {
|
|
size: 14,
|
|
weight: 300,
|
|
family: "Roboto",
|
|
style: 'normal',
|
|
lineHeight: 2
|
|
},
|
|
}
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
var ctx3 = document.getElementById("chart-line-tasks").getContext("2d");
|
|
|
|
new Chart(ctx3, {
|
|
type: "line",
|
|
data: {
|
|
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
|
datasets: [{
|
|
label: "Mobile apps",
|
|
tension: 0,
|
|
borderWidth: 0,
|
|
pointRadius: 5,
|
|
pointBackgroundColor: "rgba(255, 255, 255, .8)",
|
|
pointBorderColor: "transparent",
|
|
borderColor: "rgba(255, 255, 255, .8)",
|
|
borderWidth: 4,
|
|
backgroundColor: "transparent",
|
|
fill: true,
|
|
data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
|
|
maxBarThickness: 6
|
|
|
|
}],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
}
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'index',
|
|
},
|
|
scales: {
|
|
y: {
|
|
grid: {
|
|
drawBorder: false,
|
|
display: true,
|
|
drawOnChartArea: true,
|
|
drawTicks: false,
|
|
borderDash: [5, 5],
|
|
color: 'rgba(255, 255, 255, .2)'
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
padding: 10,
|
|
color: '#f8f9fa',
|
|
font: {
|
|
size: 14,
|
|
weight: 300,
|
|
family: "Roboto",
|
|
style: 'normal',
|
|
lineHeight: 2
|
|
},
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
drawBorder: false,
|
|
display: false,
|
|
drawOnChartArea: false,
|
|
drawTicks: false,
|
|
borderDash: [5, 5]
|
|
},
|
|
ticks: {
|
|
display: true,
|
|
color: '#f8f9fa',
|
|
padding: 10,
|
|
font: {
|
|
size: 14,
|
|
weight: 300,
|
|
family: "Roboto",
|
|
style: 'normal',
|
|
lineHeight: 2
|
|
},
|
|
}
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
</script>
|
|
@endpush
|
|
</x-layout>
|