update,
This commit is contained in:
louiscklaw
@@ -0,0 +1,306 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user