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

perubahan query

Browse Source
This commit is contained in:
fir2be
2026-10-15 13:02:42 +07:00
parent 9d56b67998
commit 9b5c0a7309
3 changed files with 145 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/dashboard/produktivitas.blade.php
+63 -7
View File
@@ -717,7 +717,7 @@
<div class="row g-4 mb-4">
@foreach ($kpiCards as $card)
<div class="col-xl-4 col-md-4">
<div class="col-12 col-sm-6 col-xl-4">
<div class="card card-border-shadow-{{ $card['variant'] }} h-100 produksi-kpi-card">
<div class="card-body">
<div class="d-flex align-items-center gap-4">
@@ -764,12 +764,12 @@
<div class="row g-4 mb-4">
<div class="col-12">
<div class="card h-100 produksi-chart-card">
<div class="card-header">
<!-- <div class="card-header">
<div class="card-title mb-0">
<h5 class="m-0 me-2">Peta Sebaran & Praktik Budidaya</h5>
<small class="text-body-secondary">Petani, luas lahan, komoditas, OPT, dan praktik budidaya berdasarkan filter aktif</small>
</div>
</div>
</div> -->
<div class="card-body">
<div class="d-flex flex-column gap-4">
<section>
@@ -1077,6 +1077,8 @@
document.addEventListener('DOMContentLoaded', function () {
const chartData = @json($chartData);
const mapData = @json($mapData);
const dashboardFilters = @json($dashboardFilters);
const mapInformationUrl = @json(route('dashboard.produktivitas.map-information'));
const mapInformation = mapData.information || {};
const wilayah = @json($wilayah);
const headingColor = config.colors.headingColor;
@@ -1090,6 +1092,7 @@ document.addEventListener('DOMContentLoaded', function () {
let productionMapRendered = false;
let cultivationMapRendered = false;
let actualProductivityRendered = false;
let mapInformationRequestId = 0;
function hasData(data) {
return data && Array.isArray(data.series) && data.series.some(function (value) {
@@ -1119,7 +1122,7 @@ document.addEventListener('DOMContentLoaded', function () {
const indexValue = mapInformation.indeks === null || mapInformation.indeks === undefined
? '-'
: `${formatNumber(mapInformation.indeks, 2)} / 5`;
const renderBars = function (rows, emptyLabel) {
const renderBars = function (rows, emptyLabel, unitLabel) {
if (!rows.length) {
return `<div class="produksi-map-information-empty">${emptyLabel}</div>`;
}
@@ -1134,7 +1137,7 @@ document.addEventListener('DOMContentLoaded', function () {
<div>
<div class="produksi-map-information-bar-label">
<span>${escapeHtml(row.nama || 'Belum ditentukan')}</span>
<strong>${formatNumber(value, 0)}</strong>
<strong>${formatNumber(value, 0)} ${unitLabel}</strong>
</div>
<div class="produksi-map-information-track" aria-hidden="true">
<div class="produksi-map-information-fill" style="width: ${width}%"></div>
@@ -1177,17 +1180,50 @@ document.addEventListener('DOMContentLoaded', function () {
</div>
<section>
<span class="produksi-map-information-section-title">Jumlah Petani / Komoditas</span>
<div class="produksi-map-information-bars">${renderBars(commodityRows, 'Belum ada data komoditas.')}</div>
<div class="produksi-map-information-bars">${renderBars(commodityRows, 'Belum ada data komoditas.', 'petani')}</div>
</section>
${includeOpt ? `
<section>
<span class="produksi-map-information-section-title">OPT (Organisme Pengganggu Tanaman)</span>
<div class="produksi-map-information-bars">${renderBars(optRows, 'Belum ada data OPT.')}</div>
<div class="produksi-map-information-bars">${renderBars(optRows, 'Belum ada data OPT.', 'lahan')}</div>
</section>
` : ''}
`;
}
async function loadProductionMapInformation(level = null, id = null) {
const requestId = ++mapInformationRequestId;
const params = new URLSearchParams();
Object.entries(dashboardFilters || {}).forEach(function ([key, value]) {
if (value !== null && value !== undefined && value !== '') {
params.set(key, value);
}
});
if (level && id !== null && id !== undefined) {
params.set('level', level);
params.set('id', id);
}
try {
const response = await fetch(`${mapInformationUrl}?${params.toString()}`, {
headers: { Accept: 'application/json' },
});
if (!response.ok) return;
const information = await response.json();
if (requestId !== mapInformationRequestId) return;
Object.assign(mapInformation, information);
renderProductionMapInformation('produksi-map-information');
renderProductionMapInformation('produksi-budidaya-map-information', false);
} catch (error) {
console.error('Gagal memuat informasi wilayah pada peta.', error);
}
}
function toGroupedBarData(data, seriesName) {
if (!data || !Array.isArray(data.labels) || !Array.isArray(data.series)) {
return data;
@@ -1410,6 +1446,8 @@ document.addEventListener('DOMContentLoaded', function () {
empty: null,
group: null,
history: [],
informationId: null,
informationLevel: null,
layers: {},
map: null,
};
@@ -1447,6 +1485,9 @@ document.addEventListener('DOMContentLoaded', function () {
if (previous) {
renderProductionMapLevel(previous.level, previous.parentId);
productionMapState.informationLevel = previous.informationLevel;
productionMapState.informationId = previous.informationId;
loadProductionMapInformation(previous.informationLevel, previous.informationId);
if (previous.bounds?.isValid()) {
productionMapState.map.fitBounds(previous.bounds, { padding: [30, 30] });
@@ -1534,7 +1575,12 @@ document.addEventListener('DOMContentLoaded', function () {
level: nextLevel,
parentId,
bounds: productionMapState.group.getBounds(),
informationLevel: productionMapState.informationLevel,
informationId: productionMapState.informationId,
});
productionMapState.informationLevel = nextLevel;
productionMapState.informationId = item.id;
loadProductionMapInformation(nextLevel, item.id);
renderProductionMapLevel(nextProductionMapLevel(nextLevel), item.id, event.target.getBounds());
});
}
@@ -1627,6 +1673,8 @@ document.addEventListener('DOMContentLoaded', function () {
empty: null,
group: null,
history: [],
informationId: null,
informationLevel: null,
layers: {},
map: null,
};
@@ -1664,6 +1712,9 @@ document.addEventListener('DOMContentLoaded', function () {
if (previous) {
renderCultivationMapLevel(previous.level, previous.parentId);
cultivationMapState.informationLevel = previous.informationLevel;
cultivationMapState.informationId = previous.informationId;
loadProductionMapInformation(previous.informationLevel, previous.informationId);
if (previous.bounds?.isValid()) {
cultivationMapState.map.fitBounds(previous.bounds, { padding: [30, 30] });
@@ -1751,7 +1802,12 @@ document.addEventListener('DOMContentLoaded', function () {
level: nextLevel,
parentId,
bounds: cultivationMapState.group.getBounds(),
informationLevel: cultivationMapState.informationLevel,
informationId: cultivationMapState.informationId,
});
cultivationMapState.informationLevel = nextLevel;
cultivationMapState.informationId = item.id;
loadProductionMapInformation(nextLevel, item.id);
renderCultivationMapLevel(nextProductionMapLevel(nextLevel), item.id, event.target.getBounds());
});
}