update
Ilham Wara Nugroho
parent
2ea1bfd70d
commit
4b3b7bfa45
|
|
@ -4,6 +4,9 @@ namespace App\Http\Controllers;
|
|||
|
||||
use Illuminate\Http\Request;
|
||||
use App\Models\Master\Instansi;
|
||||
use App\Models\Dataset;
|
||||
use App\Models\Dataset\DatasetTable45;
|
||||
use App\Models\Dataset\DatasetTable47;
|
||||
|
||||
class AjaxController extends Controller
|
||||
{
|
||||
|
|
@ -19,4 +22,38 @@ class AjaxController extends Controller
|
|||
|
||||
return response()->json(['data' => $data,'status' => true]);
|
||||
}
|
||||
|
||||
function getPenduduk($tahun){
|
||||
$_data = [];
|
||||
|
||||
$dataset = Dataset::whereIn('tahun',[$tahun])->pluck('DatasetId')->toArray();
|
||||
|
||||
$data = DatasetTable45::whereIn('dataset_id',$dataset)->select('kabupaten_kota', 'jumlah_penduduk')->get();
|
||||
|
||||
$labels = $data->pluck('kabupaten_kota');
|
||||
$series = $data->pluck('jumlah_penduduk')->map(fn($v) => (int)$v);
|
||||
|
||||
return response()->json([
|
||||
'labels' => $labels,
|
||||
'series' => $series,
|
||||
]);
|
||||
|
||||
}
|
||||
|
||||
function getTimbulan($tahun){
|
||||
$_data = [];
|
||||
|
||||
$dataset = Dataset::whereIn('tahun',[$tahun])->pluck('DatasetId')->toArray();
|
||||
|
||||
$data = DatasetTable47::whereIn('dataset_id',$dataset)->select('kabupaten_kota', 'timbulan_sampah')->get();
|
||||
|
||||
$labels = $data->pluck('kabupaten_kota');
|
||||
$series = $data->pluck('timbulan_sampah')->map(fn($v) => (int)$v);
|
||||
|
||||
return response()->json([
|
||||
'labels' => $labels,
|
||||
'series' => $series,
|
||||
]);
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,84 +59,258 @@
|
|||
|
||||
</div>
|
||||
@endif
|
||||
<div class="grid xl:grid-cols-1 lg:grid-cols-1 grid-cols-1 gap-6 mb-6">
|
||||
<div class="grid xl:grid-cols-2 lg:grid-cols-2 grid-cols-1 gap-6 mb-6">
|
||||
<div class="card">
|
||||
<div class="p-6">
|
||||
<div>
|
||||
<div class="mb-5">
|
||||
<h5 class="text-md font-bold">Data Resource</h5>
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="w-full">
|
||||
<h5 class="text-lg bold mb-10">Data Penduduk Berdasarkan Tingkat Pendidikan Tahun {{(date('Y')-1)}}</h5>
|
||||
<p class="mb-10">Ini adalah data Data Penduduk Berdasarkan Tingkat Pendidikan 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 Tingkat Pendidikan Tahun {{date('Y')}}</h5>
|
||||
<p class="mb-10">Ini adalah data Data Penduduk Berdasarkan Tingkat Pendidikan Tahun {{date('Y')}}, berdasarkan data yang sudah di upload sebelumnya</p>
|
||||
<div id="penduduk2"></div>
|
||||
</div>
|
||||
<table class="gridjs-table"
|
||||
data-search="false"
|
||||
data-toggle="table"
|
||||
data-pagination="true"
|
||||
data-toolbar="#toolbar"
|
||||
data-show-refresh="false"
|
||||
data-url="{{route('modules.dashboard.gridResource')}}"
|
||||
data-sort-name="ids"
|
||||
data-sort-order="desc"
|
||||
data-page-size="5"
|
||||
data-id-field="id"
|
||||
id="grid-data">
|
||||
<thead class="gridjs-thead">
|
||||
<tr class="gridjs-tr bg-primary-light">
|
||||
<th class="gridjs-td gridjs-th text-sm" data-width="10" data-field="action">#</th>
|
||||
<th class="gridjs-td gridjs-th text-sm" data-width="10" data-field="no">No</th>
|
||||
<th class="gridjs-td gridjs-th text-sm" data-field="name">Resource Data</th>
|
||||
<th class="gridjs-td gridjs-th text-sm" data-field="jumlah">Jumlah Upload Dataset</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="gridjs-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- <div class="grid xl:grid-cols-1 lg:grid-cols-1 grid-cols-1 gap-6 mb-6 hidden">
|
||||
|
||||
<div class="grid xl:grid-cols-2 lg:grid-cols-2 grid-cols-1 gap-6 mb-6">
|
||||
<div class="card">
|
||||
<div class="p-6">
|
||||
<div>
|
||||
<div id="toolbar">
|
||||
<h5 class="text-md font-bold">10 Data Update Terakhir</h5>
|
||||
<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>
|
||||
<table class="gridjs-table"
|
||||
data-search="true"
|
||||
data-toggle="table"
|
||||
data-pagination="true"
|
||||
data-toolbar="#toolbar"
|
||||
data-show-refresh="false"
|
||||
data-url="{{route('modules.dashboard.grid')}}"
|
||||
data-sort-name="ids"
|
||||
data-sort-order="desc"
|
||||
data-page-size="10"
|
||||
data-id-field="id"
|
||||
id="grid-data">
|
||||
<thead class="gridjs-thead">
|
||||
<tr class="gridjs-tr bg-primary-light">
|
||||
<th class="gridjs-td gridjs-th text-sm" data-width="10" data-field="action">#</th>
|
||||
<th class="gridjs-td gridjs-th text-sm" data-width="10" data-field="no">No</th>
|
||||
<th class="gridjs-td gridjs-th text-sm" data-field="instansi">Nama Instansi</th>
|
||||
<th class="gridjs-td gridjs-th text-sm" data-field="name">Nama Dataset</th>
|
||||
<th class="gridjs-td gridjs-th text-sm" data-field="tahun">Tahun</th>
|
||||
<th class="gridjs-td gridjs-th text-sm text-center" data-field="status">Status</th>
|
||||
<th class="gridjs-td gridjs-th text-sm" data-field="created_at">Tanggal Dibuat</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="gridjs-tbody"></tbody>
|
||||
</table>
|
||||
</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="{{asset('assets/js/pages/dashboard-analytics.js')}}"></script>
|
||||
<!-- Apex Charts js -->
|
||||
<script src="{{asset('assets/libs/apexcharts/apexcharts.min.js')}}"></script>
|
||||
<script>
|
||||
var base_url = '{{ url("/") }}';
|
||||
var tahun = '{{ date("Y")-1 }}';
|
||||
|
||||
<!-- Vector Map Js -->
|
||||
<script src="{{asset('assets/libs/jsvectormap/js/jsvectormap.min.js')}}"></script>
|
||||
<script src="{{asset('assets/libs/jsvectormap/maps/world-merc.js')}}"></script>
|
||||
<script src="{{asset('assets/libs/jsvectormap/maps/world.js')}}"></script>
|
||||
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: 400
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#timbulan2"), options);
|
||||
chart.render();
|
||||
}).catch(error => console.error('Error:', error));
|
||||
</script>
|
||||
@endsection
|
||||
|
|
@ -11,7 +11,10 @@ use App\Http\Controllers\Management\RoleController;
|
|||
use App\Http\Controllers\Management\AksesController;
|
||||
use App\Http\Controllers\Opendata\DatasetController;
|
||||
use App\Http\Controllers\Opendata\DatasetTambahanController;
|
||||
use App\Http\Controllers\AjaxController;
|
||||
|
||||
Route::get('getPenduduk/{tahun}',[AjaxController::class,'getPenduduk'])->name('getPenduduk');
|
||||
Route::get('getTimbulan/{tahun}',[AjaxController::class,'getTimbulan'])->name('getTimbulan');
|
||||
|
||||
Route::name('dashboard.')->prefix('dashboard')->group(function () {
|
||||
Route::get('/',[HomeController::class,'dashboard'])->name('dashboard');
|
||||
|
|
|
|||
Loading…
Reference in New Issue