362 lines
16 KiB
PHP
362 lines
16 KiB
PHP
@extends('layouts.master')
|
|
@section('css')
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
|
crossorigin=""/>
|
|
|
|
@endsection
|
|
@section('content')
|
|
<!-- Page Title Start -->
|
|
{{-- <div class="flex justify-between items-center mb-6"> --}}
|
|
{{-- <h4 class="text-slate-900 dark:text-slate-200 text-lg font-medium">Dashboard</h4> --}}
|
|
{{-- </div> --}}
|
|
|
|
<div class="mb-3 hidden">
|
|
<div class="card">
|
|
<div class="card-header flex justify-between items-center">
|
|
<h4 class="bold">Profile Wilayah</h4>
|
|
<div>
|
|
<select name="" id="" class="form-input">
|
|
<option value="">Data Penduduk</option>
|
|
<option value="">Data Timbulan Sampah</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="grid lg:grid-cols-2 grid-cols-1">
|
|
<div class="flex p-6">
|
|
<div class="rounded" id="map" style="width: 600px; height: 400px;"></div>
|
|
</div>
|
|
<div class="flex justify-center items-center p-6">
|
|
Data
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex hidden gap-3">
|
|
<div class="w-full">
|
|
<div class="card">
|
|
<div class="card-header flex justify-between items-center">
|
|
<h4 class="bold">
|
|
Persebaran Data -
|
|
@if(@request()->key)
|
|
{{ str_replace('_',' ',ucwords(@request()->key)) }}
|
|
@else
|
|
Tata Guna Lahan
|
|
@endif
|
|
</h4>
|
|
<div>
|
|
<select name="" id="" class="form-input kategori">
|
|
<option {{ @request()->key == '' ? 'selected' : '' }} {{ @request()->key == 'tata_guna_lahan' ? 'selected' : '' }} value="tata_guna_lahan">Tata Guna Lahan </option>
|
|
<option {{ @request()->key == 'kualitas_air' ? 'selected' : '' }} value="kualitas_air">Kualitas Air</option>
|
|
<option {{ @request()->key == 'kualitas_udara' ? 'selected' : '' }} value="kualitas_udara">Kualitas Udara</option>
|
|
<option {{ @request()->key == 'perkotaan' ? 'selected' : '' }} value="perkotaan">Perkotaan</option>
|
|
<option {{ @request()->key == 'kebencanaan' ? 'selected' : '' }} value="kebencanaan">Kebencanaan</option>
|
|
<option {{ @request()->key == 'tata_kelola' ? 'selected' : '' }} value="tata_kelola">Tata Kelola</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
|
|
<div class="card">
|
|
<div class="card-header bg-primary-light text-primary bold">Driving Force</div>
|
|
<div class="p-6"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tenetur repudiandae labore reprehenderit, ipsam consequatur odio molestiae quidem ratione atque dignissimos omnis nam voluptate iste at, cumque ipsum voluptas aperiam!</p></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header bg-primary-light text-primary bold">Pressures</div>
|
|
<div class="p-6"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tenetur repudiandae labore reprehenderit, ipsam consequatur odio molestiae quidem ratione atque dignissimos omnis nam voluptate iste at, cumque ipsum voluptas aperiam!</p></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header bg-primary-light text-primary bold">State</div>
|
|
<div class="p-6"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tenetur repudiandae labore reprehenderit, ipsam consequatur odio molestiae quidem ratione atque dignissimos omnis nam voluptate iste at, cumque ipsum voluptas aperiam!</p></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header bg-primary-light text-primary bold">Impact</div>
|
|
<div class="p-6"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tenetur repudiandae labore reprehenderit, ipsam consequatur odio molestiae quidem ratione atque dignissimos omnis nam voluptate iste at, cumque ipsum voluptas aperiam!</p></div>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 lg:grid-cols-1 gap-3 mt-3">
|
|
<div class="card">
|
|
<div class="card-header bg-primary-light text-primary bold">Response</div>
|
|
<div class="p-6"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tenetur repudiandae labore reprehenderit, ipsam consequatur odio molestiae quidem ratione atque dignissimos omnis nam voluptate iste at, cumque ipsum voluptas aperiam!</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid xl:grid-cols-2 lg:grid-cols-2 grid-cols-1 gap-6 mb-6 hidden">
|
|
<div class="card">
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-center">
|
|
<div class="w-full">
|
|
<h5 class="text-lg bold mb-10">Data Penduduk Berdasarkan Wilayah Tahun {{(date('Y')-1)}}</h5>
|
|
<p class="mb-10">Ini adalah data Data Penduduk Berdasarkan Wilayah Tahun {{(date('Y')-1)}}, berdasarkan data yang sudah di upload sebelumnya</p>
|
|
<div id="penduduk1"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-center">
|
|
<div class="w-full">
|
|
<h5 class="text-lg bold mb-10">Data Penduduk Berdasarkan Wilayah Tahun {{date('Y')}}</h5>
|
|
<p class="mb-10">Ini adalah data Data Penduduk Berdasarkan Wilayah Tahun {{date('Y')}}, berdasarkan data yang sudah di upload sebelumnya</p>
|
|
<div id="penduduk2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid xl:grid-cols-2 lg:grid-cols-2 grid-cols-1 gap-6 mb-6 hidden">
|
|
<div class="card">
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-center">
|
|
<div class="w-full">
|
|
<h5 class="text-lg bold mb-10">Data Jumlah Timbulan Sampah Tahun {{(date('Y')-1)}}</h5>
|
|
<p class="mb-10">Ini adalah data Data Jumlah Timbulan Sampah Tahun {{(date('Y')-1)}}, berdasarkan data yang sudah di upload sebelumnya</p>
|
|
<div id="timbulan1"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-center">
|
|
<div class="w-full">
|
|
<h5 class="text-lg bold mb-10">Data Jumlah Timbulan Sampah Tahun {{date('Y')}}</h5>
|
|
<p class="mb-10">Ini adalah data Data Jumlah Timbulan Sampah Tahun {{date('Y')}}, berdasarkan data yang sudah di upload sebelumnya</p>
|
|
<div id="timbulan2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- end row -->
|
|
@endsection
|
|
@section('js')
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
|
crossorigin=""></script>
|
|
<script>
|
|
var map = L.map('map').setView([51.505, -0.09], 13);
|
|
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
L.marker([51.5, -0.09]).addTo(map)
|
|
.bindPopup('A pretty CSS popup.<br> Easily customizable.')
|
|
.openPopup();
|
|
</script>
|
|
<script src="{{asset('assets/libs/apexcharts/apexcharts.min.js')}}"></script>
|
|
<script>
|
|
$('.kategori').on('change',function(){
|
|
var val = $(this).val();
|
|
window.location = "{{ url('dashboard?key=') }}"+val;
|
|
});
|
|
var base_url = '{{ url("/") }}';
|
|
var tahun = '{{ date("Y")-1 }}';
|
|
|
|
fetch(base_url+'/getPenduduk/'+tahun)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
const series = data.series.map(Number);
|
|
|
|
var options = {
|
|
chart: {
|
|
type: 'pie',
|
|
height: 400
|
|
},
|
|
series: series,
|
|
labels: data.labels,
|
|
tooltip: {
|
|
custom: function({ series, seriesIndex, w }) {
|
|
// ambil nama kabupaten/kota langsung dari chart context
|
|
const kota = w.globals.labels[seriesIndex];
|
|
const value = series[seriesIndex].toLocaleString('id-ID');
|
|
|
|
// hitung persentase dari total
|
|
const total = series.reduce((a, b) => a + b, 0);
|
|
const persen = ((series[seriesIndex] / total) * 100).toFixed(1);
|
|
|
|
return `
|
|
<div style="padding:6px 10px; font-size:13px;">
|
|
Jumlah Penduduk <b>${kota}</b>: ${value} (${persen}%)
|
|
</div>
|
|
`;
|
|
}
|
|
},
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
chart: {
|
|
width: 400
|
|
},
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#penduduk1"), options);
|
|
chart.render();
|
|
}).catch(error => console.error('Error:', error));
|
|
</script>
|
|
<script>
|
|
var base_url = '{{ url("/") }}';
|
|
var tahun = '{{ date("Y") }}';
|
|
|
|
fetch(base_url+'/getPenduduk/'+tahun)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
const series = data.series.map(Number);
|
|
|
|
var options = {
|
|
chart: {
|
|
type: 'pie',
|
|
height: 400
|
|
},
|
|
series: series,
|
|
labels: data.labels,
|
|
tooltip: {
|
|
custom: function({ series, seriesIndex, w }) {
|
|
// ambil nama kabupaten/kota langsung dari chart context
|
|
const kota = w.globals.labels[seriesIndex];
|
|
const value = series[seriesIndex].toLocaleString('id-ID');
|
|
|
|
// hitung persentase dari total
|
|
const total = series.reduce((a, b) => a + b, 0);
|
|
const persen = ((series[seriesIndex] / total) * 100).toFixed(1);
|
|
|
|
return `
|
|
<div style="padding:6px 10px; font-size:13px;">
|
|
Jumlah Penduduk <b>${kota}</b>: ${value} (${persen}%)
|
|
</div>
|
|
`;
|
|
}
|
|
},
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
chart: {
|
|
width: 400
|
|
},
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#penduduk2"), options);
|
|
chart.render();
|
|
}).catch(error => console.error('Error:', error));
|
|
</script>
|
|
<script>
|
|
var base_url = '{{ url("/") }}';
|
|
var tahun = '{{ date("Y")-1 }}';
|
|
|
|
fetch(base_url+'/getTimbulan/'+tahun)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
const series = data.series.map(Number);
|
|
|
|
var options = {
|
|
chart: {
|
|
type: 'pie',
|
|
height: 400
|
|
},
|
|
series: series,
|
|
labels: data.labels,
|
|
tooltip: {
|
|
custom: function({ series, seriesIndex, w }) {
|
|
// ambil nama kabupaten/kota langsung dari chart context
|
|
const kota = w.globals.labels[seriesIndex];
|
|
const value = series[seriesIndex].toLocaleString('id-ID');
|
|
|
|
// hitung persentase dari total
|
|
const total = series.reduce((a, b) => a + b, 0);
|
|
const persen = ((series[seriesIndex] / total) * 100).toFixed(1);
|
|
|
|
return `
|
|
<div style="padding:6px 10px; font-size:13px;">
|
|
Jumlah Timbulan Kg Per Hari <b>${kota}</b>: ${value} (${persen}%)
|
|
</div>
|
|
`;
|
|
}
|
|
},
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
chart: {
|
|
width: 400
|
|
},
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#timbulan1"), options);
|
|
chart.render();
|
|
}).catch(error => console.error('Error:', error));
|
|
</script>
|
|
<script>
|
|
var base_url = '{{ url("/") }}';
|
|
var tahun = '{{ date("Y") }}';
|
|
|
|
fetch(base_url+'/getTimbulan/'+tahun)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
const series = data.series.map(Number);
|
|
|
|
var options = {
|
|
chart: {
|
|
type: 'pie',
|
|
height: 400
|
|
},
|
|
series: series,
|
|
labels: data.labels,
|
|
tooltip: {
|
|
custom: function({ series, seriesIndex, w }) {
|
|
// ambil nama kabupaten/kota langsung dari chart context
|
|
const kota = w.globals.labels[seriesIndex];
|
|
const value = series[seriesIndex].toLocaleString('id-ID');
|
|
|
|
// hitung persentase dari total
|
|
const total = series.reduce((a, b) => a + b, 0);
|
|
const persen = ((series[seriesIndex] / total) * 100).toFixed(1);
|
|
|
|
return `
|
|
<div style="padding:6px 10px; font-size:13px;">
|
|
Jumlah Timbulan Kg Per Hari <b>${kota}</b>: ${value} (${persen}%)
|
|
</div>
|
|
`;
|
|
}
|
|
},
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
chart: {
|
|
width: "100%"
|
|
},
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#timbulan2"), options);
|
|
chart.render();
|
|
}).catch(error => console.error('Error:', error));
|
|
</script>
|
|
@endsection |