Probindo/database-pertani-web
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dashboard indikator pertanian

Browse Source
This commit is contained in:
Syaharani
2026-08-07 16:09:24 +07:00
parent 0d9f6c0b64
commit a4f38998d5
2 changed files with 307 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/dashboard/indikator-pertanian.blade.php
+174 -2
View File
@@ -146,7 +146,13 @@
#chart-penyakit-tanaman .apexcharts-tooltip,
#chart-keparahan-serangan .apexcharts-tooltip,
#chart-status-hak-kelola-lahan .apexcharts-tooltip,
#chart-praktik-pemupukan .apexcharts-tooltip {
#chart-praktik-pemupukan .apexcharts-tooltip,
#chart-produksi-komoditas .apexcharts-tooltip,
#chart-produktivitas-komoditas .apexcharts-tooltip,
#chart-luas-panen-komoditas .apexcharts-tooltip,
#chart-status-panen .apexcharts-tooltip,
#chart-survey-produktivitas-ha .apexcharts-tooltip,
#chart-survey-produktivitas-pohon .apexcharts-tooltip {
background: transparent !important;
border: none !important;
box-shadow: none !important;
@@ -531,12 +537,100 @@
</div>
</div>
<div class="tab-pane fade" id="indicator-tab-produksi" role="tabpanel">
<div class="row g-6 mt-1">
<div class="col-xxl-4 col-lg-6">
<div class="card h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<div class="card-title mb-0">
<h5 class="m-0 me-2">Total Produksi per Komoditas</h5>
<small class="text-body-secondary">Akumulasi hasil panen aktual</small>
</div>
</div>
<div class="card-body">
<div id="chart-produksi-komoditas" class="indicator-chart"></div>
</div>
</div>
</div>
<div class="col-xxl-4 col-lg-6">
<div class="card h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<div class="card-title mb-0">
<h5 class="m-0 me-2">Produktivitas Aktual</h5>
<small class="text-body-secondary">Rata-rata kg/ha per komoditas</small>
</div>
</div>
<div class="card-body">
<div id="chart-produktivitas-komoditas" class="indicator-chart"></div>
</div>
</div>
</div>
<div class="col-xxl-4 col-lg-6">
<div class="card h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<div class="card-title mb-0">
<h5 class="m-0 me-2">Luas Panen per Komoditas</h5>
<small class="text-body-secondary">Akumulasi luas panen terdata</small>
</div>
</div>
<div class="card-body">
<div id="chart-luas-panen-komoditas" class="indicator-chart"></div>
</div>
</div>
</div>
<div class="col-xxl-4 col-lg-6">
<div class="card h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<div class="card-title mb-0">
<h5 class="m-0 me-2">Status Panen</h5>
<small class="text-body-secondary">Jumlah catatan produksi per status</small>
</div>
</div>
<div class="card-body">
<div id="chart-status-panen" class="indicator-chart-sm"></div>
</div>
</div>
</div>
<div class="col-xxl-4 col-lg-6">
<div class="card h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<div class="card-title mb-0">
<h5 class="m-0 me-2">Produktivitas Survey (ha/tahun)</h5>
<small class="text-body-secondary">Rata-rata produktivitas per komoditas</small>
</div>
</div>
<div class="card-body">
<div id="chart-survey-produktivitas-ha" class="indicator-chart"></div>
</div>
</div>
</div>
<div class="col-xxl-4 col-lg-6">
<div class="card h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<div class="card-title mb-0">
<h5 class="m-0 me-2">Produktivitas Survey (pohon/tahun)</h5>
<small class="text-body-secondary">Rata-rata produktivitas per komoditas</small>
</div>
</div>
<div class="card-body">
<div id="chart-survey-produktivitas-pohon" class="indicator-chart"></div>
</div>
</div>
</div>
</div>
</div>
@foreach ([
'indicator-tab-produksi' => 'Produksi dan Produktivitas',
'indicator-tab-input-produksi' => 'Input Produksi',
'indicator-tab-panen' => 'Panen dan Pascapanen',
'indicator-tab-akses-pasar' => 'Akses Pasar',
] as $tabId => $tabLabel)
<div class="tab-pane fade" id="{{ $tabId }}" role="tabpanel">
<div class="card">
<div class="card-body text-center text-body-secondary py-5">
@@ -1154,6 +1248,84 @@
labelWidth: 180,
valueDigits: 0,
});
let productionChartsRendered = false;
function renderProductionCharts() {
if (productionChartsRendered) {
return;
}
productionChartsRendered = true;
renderBar('#chart-produksi-komoditas', chartData.produksiPerKomoditas, {
name: 'Produksi',
suffix: 'kg',
colors: colorsFor(0),
height: 330,
horizontal: true,
labelWidth: 150,
valueDigits: 0,
});
renderBar('#chart-produktivitas-komoditas', chartData.produktivitasPerKomoditas, {
name: 'Produktivitas',
suffix: 'kg/ha',
colors: colorsFor(2),
height: 330,
horizontal: true,
labelWidth: 150,
valueDigits: 2,
});
renderBar('#chart-luas-panen-komoditas', chartData.luasPanenPerKomoditas, {
name: 'Luas panen',
suffix: 'ha',
colors: colorsFor(4),
height: 330,
horizontal: true,
labelWidth: 150,
valueDigits: 2,
});
renderDonut(
'#chart-status-panen',
chartData.statusPanen,
colorsFor(6),
{
totalLabel: 'Catatan',
valueDigits: 0,
}
);
renderBar('#chart-survey-produktivitas-ha', chartData.surveyProduktivitasHa, {
name: 'Produktivitas',
suffix: 'ha/tahun',
colors: colorsFor(1),
height: 330,
horizontal: true,
labelWidth: 150,
valueDigits: 2,
});
renderBar('#chart-survey-produktivitas-pohon', chartData.surveyProduktivitasPohon, {
name: 'Produktivitas',
suffix: 'pohon/tahun',
colors: colorsFor(3),
height: 330,
horizontal: true,
labelWidth: 150,
valueDigits: 2,
});
}
document
.querySelector('[data-bs-target="#indicator-tab-produksi"]')
?.addEventListener('shown.bs.tab', renderProductionCharts);
if (document.querySelector('#indicator-tab-produksi')?.classList.contains('active')) {
renderProductionCharts();
}
});
</script>
@endpush