update

app/Http/Controllers/AjaxController.php

@@ -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,
+        ]);
+
+    }
 }

resources/views/modules/dashboard/dashboard.blade.php

@@ -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="flex items-center justify-center">
-                <div class="mb-5">
+                <div class="w-full">
-                    <h5 class="text-md font-bold">Data Resource</h5>
+                    <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 class="flex items-center justify-center">
-                <div id="toolbar">
+                <div class="w-full">
-                    <h5 class="text-md font-bold">10 Data Update Terakhir</h5>
+                    <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 -->
+     fetch(base_url+'/getPenduduk/'+tahun)
-<script src="{{asset('assets/libs/jsvectormap/js/jsvectormap.min.js')}}"></script>
+        .then(res => res.json())
-<script src="{{asset('assets/libs/jsvectormap/maps/world-merc.js')}}"></script>
+        .then(data => {
-<script src="{{asset('assets/libs/jsvectormap/maps/world.js')}}"></script>
+            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

routes/modules/modules.php

@@ -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');