banksampah
/
bank-sampah
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(dashboard): add dashboard on bottom

main
Kevin Hendrawan 2025-11-17 20:07:34 +07:00
parent 1a43272031
commit f42faca68c
3 changed files with 155 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
Views/Main/Dashboard/Index.cshtml
View File

@ -222,3 +222,28 @@
</div> </div>
</div> </div>
</div> </div>
<div class="h-6"></div>
<div class="card bg-white shadow-sm">
<div class="card-body pt-4 px-3">
<div class="flex flex-col gap-2 md:flex-row md:justify-between md:gap-0">
<div class="prose">
<span class="text-xl font-semibold text-gray-900 font-['Plus_Jakarta_Sans']">
Laporan Total Sampah per Bulan(Kg)
</span>
</div>
</div>
<div class="w-full overflow-x-auto">
<div class="min-w-[900px]">
<div class="h-64 md:h-96 relative">
<canvas id="chartBankSampah" class="w-full h-full"></canvas>
</div>
</div>
</div>
</div>
</div>
<script src="~/js/chart.js"></script>
<script src="/plugins/chartjs/setup.js"></script>

14
wwwroot/js/chart.js 100644
View File

File diff suppressed because one or more lines are too long

116
wwwroot/plugins/chartjs/setup.js 100644
View File

@ -0,0 +1,116 @@
const DATA_COUNT = 12;
const NUMBER_CFG = {count: DATA_COUNT, min: 500, max: 3000};
const ctx = document.getElementById('chartBankSampah').getContext('2d');
var gradientBSI = ctx.createLinearGradient(0, 0, 0, 1000);
gradientBSI.addColorStop(0, "rgba(36, 115, 50, 1)"); // hijau gelap
gradientBSI.addColorStop(1, "rgba(136, 194, 147, 1)"); // hijau muda
var gradientBSU = ctx.createLinearGradient(0, 0, 0, 1000);
gradientBSU.addColorStop(0, "rgba(56, 107, 202, 1)"); // biru gelap
gradientBSU.addColorStop(1, "rgba(138, 164, 242, 1)"); // biru muda
var gradientOfftaker = ctx.createLinearGradient(0, 0, 0, 1000);
gradientOfftaker.addColorStop(0, "rgba(247, 144, 9, 1)"); // orange
gradientOfftaker.addColorStop(1, "rgba(255, 219, 172, 1)"); // kuning lembut
const labels = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
const data = {
labels: labels,
datasets: [
{
label: 'BSI',
data:
[
500,
500,
500,
500,
500,
500,
500,
500,
500,
500,
500,
500,
],
borderColor: '#247332',
backgroundColor: gradientBSI,
},
{
label: 'BSU',
data:[
800,
800,
800,
800,
800,
800,
800,
800,
800,
800,
800,
800,
],
borderColor: '#386BCA',
backgroundColor: gradientBSU,
},
{
label: 'Offtaker',
data:[
2000,
2000,
2000,
2000,
2000,
2000,
2000,
2000,
2000,
2000,
2000,
2000,
],
borderColor: '#F79009',
backgroundColor: gradientOfftaker,
}
]
};
const config = {
type: 'bar',
data: data,
options: {
responsive: true,
maintainAspectRatio:false,
plugins: {
legend: {
position: 'bottom',
},
},
scales: {
y: {
beginAtZero: true,
max: 4000 // <--- atur batas tertinggi chart
}
}
},
};
const myChart = new Chart(ctx, config);