add circle component and small circle percentage

app/Providers/AppServiceProvider.php

@@ -2,6 +2,8 @@
 
 namespace App\Providers;
 
+use App\View\Components\Circle;
+use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\ServiceProvider;
 use Carbon\Carbon;
 
@@ -20,6 +22,6 @@ class AppServiceProvider extends ServiceProvider
      */
     public function boot(): void
     {
-        
+        Blade::component('circle', Circle::class);
     }
 }

app/View/Components/Circle.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Circle extends Component
+{
+    public $document_title;
+    public $document_color;
+    public $document_type;
+    public $document_id;
+    public $visible_small_circle;
+    public function __construct($document_id = "",$document_title = "", $document_type = "", $document_color = "#020c5c", $visible_small_circle = true)
+    {
+        $this->document_title = $document_title;
+        $this->document_color = $document_color;
+        $this->document_type = $document_type;
+        $this->document_id = $document_id;
+        $this->visible_small_circle = $visible_small_circle;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.circle');
+    }
+}

resources/js/dashboards/bigdata.js

@@ -1,6 +1,5 @@
 import ApexCharts from "apexcharts";
 
-import jsVectorMap from "jsvectormap/dist/jsvectormap.js";
 import "jsvectormap/dist/maps/world-merc.js";
 import "jsvectormap/dist/maps/world.js";
 import GlobalConfig, { addThousandSeparators } from "../global-config.js";
@@ -37,12 +36,18 @@ class BigData {
         })
         .then((data) => {
             const seriesData = data.data.series;
-            document.getElementById(
+            document.querySelectorAll('.document-count.chart-all-task').forEach((element) => {
-                "countTargetPAD"
+                element.innerText = `${data.data.count}`;
-            ).innerText = `${data.data.count} Berkas`;
+            });
+            document.querySelectorAll('.document-total.chart-all-task').forEach((element) => {
+                element.innerText = `Rp.${addThousandSeparators(data.data.total)}`;
+            });
             document.getElementById(
                 "totalTargetPAD"
             ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
+            document.getElementById(
+                "countTargetPAD"
+            ).innerText = `${data.data.count} Berkas`;
             var options1 = {
                 chart: {
                     type: "area",
@@ -122,6 +127,12 @@ class BigData {
         })
         .then((data) => {
             const seriesData = data.data.series;
+            document.querySelectorAll('.document-count.chart-non-business').forEach((element) => {
+                element.innerText = `${data.data.count}`;
+            });
+            document.querySelectorAll('.document-total.chart-non-business').forEach((element) => {
+                element.innerText = `Rp.${addThousandSeparators(data.data.total)}`;
+            });
             document.getElementById(
                 "countBusinessDocuments"
             ).innerText = `${data.data.count} Berkas`;
@@ -207,6 +218,12 @@ class BigData {
         })
         .then((data) => {
             const seriesData = data.data.series;
+            document.querySelectorAll('.document-count.chart-business').forEach((element) => {
+                element.innerText = `${data.data.count}`;
+            });
+            document.querySelectorAll('.document-total.chart-business').forEach((element) => {
+                element.innerText = `Rp.${addThousandSeparators(data.data.total)}`;
+            });
             document.getElementById(
                 "countNonUsaha"
             ).innerText = `${data.data.count} Berkas`;
@@ -1036,6 +1053,63 @@ class BigData {
     }
 }
 
+class ArrowConnectorCircles {
+    // Fungsi untuk membuat garis dengan panah
+    drawArrow(startElement, endElement) {
+    const svg = document.getElementById("arrow-svg");
+    const startRect = startElement.getBoundingClientRect();
+    const endRect = endElement.getBoundingClientRect();
+  
+    // Hitung posisi pusat dari setiap lingkaran
+    const startX = startRect.left + startRect.width / 2;
+    const startY = startRect.top + startRect.height / 2;
+    const endX = endRect.left + endRect.width / 2;
+    const endY = endRect.top + endRect.height / 2;
+  
+    // Bersihkan isi SVG sebelum menggambar ulang
+    svg.innerHTML = "";
+  
+    // Buat elemen garis
+    const arrowLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    arrowLine.setAttribute("x1", startX);
+    arrowLine.setAttribute("y1", startY);
+    arrowLine.setAttribute("x2", endX);
+    arrowLine.setAttribute("y2", endY);
+    arrowLine.setAttribute("stroke", "black");
+    arrowLine.setAttribute("stroke-width", "2");
+  
+    // Buat elemen panah
+    const arrowHead = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+    const arrowSize = 10;
+    const angle = Math.atan2(endY - startY, endX - startX);
+    const arrowPoint1X = endX - arrowSize * Math.cos(angle - Math.PI / 6);
+    const arrowPoint1Y = endY - arrowSize * Math.sin(angle - Math.PI / 6);
+    const arrowPoint2X = endX - arrowSize * Math.cos(angle + Math.PI / 6);
+    const arrowPoint2Y = endY - arrowSize * Math.sin(angle + Math.PI / 6);
+  
+    arrowHead.setAttribute(
+      "points",
+      `${endX},${endY} ${arrowPoint1X},${arrowPoint1Y} ${arrowPoint2X},${arrowPoint2Y}`
+    );
+    arrowHead.setAttribute("fill", "black");
+  
+    // Tambahkan garis dan panah ke SVG
+    svg.appendChild(arrowLine);
+    svg.appendChild(arrowHead);
+  }
+  init(){
+      const circle1 = document.getElementById("chart-not-verified");
+      const circle2 = document.getElementById("chart-all-task");
+      
+      // Gambar panah antara dua lingkaran
+      this.drawArrow(circle1, circle2);
+      
+      // Tambahkan event listener jika ingin garis berubah sesuai posisi dinamis (opsional)
+      document.addEventListener("resize", () => drawArrow(circle1, circle2));
+  }
+}
+
 document.addEventListener("DOMContentLoaded", function (e) {
     new BigData().init();
+    // new ArrowConnectorCircles().init();
 });

resources/scss/components/_circle.scss

@@ -0,0 +1,227 @@
+:root {
+  --circle-color: #c97a04; /* Default warna lingkaran */
+}
+
+.circle-container {
+  width: 250px; /* Ukuran lingkaran */
+  height: 250px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--circle-color);; /* Warna lingkaran utama */
+  border-radius: 50%; /* Membuat lingkaran */
+  border: 6px solid white; /* Border putih */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
+  position: relative;
+
+  .circle-content {
+    width: 200px; /* Ukuran lingkaran dalam */
+    height: 200px;
+    background-color: var(--circle-color); /* Warna lingkaran dalam */
+    border-radius: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: white; /* Warna teks */
+    border: 4px solid white; /* Border lingkaran dalam */
+    padding: 10px;
+    box-sizing: border-box;
+  }
+  
+  .circle-content .document-title {
+    font-size: 14px;
+    font-weight: bold;
+    margin: 0 5px;
+    line-height: 1.5;
+  }
+  
+  .circle-content .document-total {
+    font-size: 14px;
+    font-weight: bold;
+    color: #000000; /* Warna biru gelap untuk total */
+    background-color: white; /* Background putih untuk total */
+    padding: 0 7px;
+    border-radius: 10px;
+    margin: 0;
+  }
+  
+  .circle-content .document-count {
+    font-size: 24px;
+    font-weight: bold;
+    margin: 0;
+  }
+  
+  .circle-content .document-type {
+    font-size: 14px;
+    margin: 0;
+  }
+
+  .small-circle-container {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 80px; /* Ukuran lingkaran kecil */
+    height: 80px;
+    background-color: #2d4f90; /* Warna lingkaran kecil */
+    border-radius: 50%; /* Membuat lingkaran */
+    // border: 4px solid white; /* Border putih */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
+
+    .small-circle-content{
+      width: 70px;
+      height: 70px;
+      background-color: #2d4f90; /* Warna lingkaran kecil */
+      border-radius: 50%; /* Membuat lingkaran */
+      border: 4px solid white; /* Border putih */
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .small-percentage {
+        font-size: 14px;
+        font-weight: bold;
+        color: white; /* Warna teks */
+        margin: 0;
+      }
+    }
+
+  }
+}
+
+
+
+.arrow-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none; /* Agar SVG tidak menghalangi interaksi */
+}
+
+
+// .circle-container {
+//   width: 20vw; /* Responsif menggunakan unit viewport */
+//   height: 20vw; /* Pastikan tinggi sama dengan lebar */
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   background-color: var(--circle-color); /* Warna lingkaran utama */
+//   border-radius: 50%; /* Membuat lingkaran */
+//   border: 0.4vw solid white; /* Border putih responsif */
+//   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
+//   position: relative;
+//   min-width: 150px; /* Ukuran minimum untuk layar kecil */
+//   min-height: 150px;
+// }
+
+// .circle-content {
+//   width: 85%; /* 85% dari ukuran lingkaran luar */
+//   height: 85%;
+//   background-color: var(--circle-color); /* Warna lingkaran dalam */
+//   border-radius: 50%;
+//   display: flex;
+//   flex-direction: column;
+//   align-items: center;
+//   justify-content: center;
+//   text-align: center;
+//   color: white; /* Warna teks */
+//   border: 0.4vw solid white; /* Border lingkaran dalam responsif */
+//   padding: 10px;
+//   box-sizing: border-box;
+// }
+
+// .circle-content .document-title {
+//   font-size: 1.2vw; /* Font responsif berbasis viewport */
+//   font-weight: bold;
+//   margin: 0 10px;
+//   line-height: 1.5;
+// }
+
+// .circle-content .document-total {
+//   font-size: 1.2vw; /* Font responsif */
+//   font-weight: bold;
+//   color: #000000; /* Warna biru gelap untuk total */
+//   background-color: white; /* Background putih untuk total */
+//   padding: 0.5vw 0.2vw;
+//   border-radius: 10px;
+//   margin: 5px 0;
+// }
+
+// .circle-content .document-count {
+//   font-size: 2vw; /* Font responsif besar */
+//   font-weight: bold;
+//   margin: 0;
+// }
+
+// .circle-content .document-type {
+//   font-size: 1.4vw;
+//   margin: 0;
+// }
+
+// /* Media Query untuk layar lebih kecil (tablet) */
+// @media (max-width: 768px) {
+//   .circle-container {
+//     width: 40vw;
+//     height: 40vw;
+//     border-width: 2vw; /* Border lebih besar di layar kecil */
+//   }
+
+//   .circle-content {
+//     width: 90%;
+//     height: 90%;
+//     border-width: 1vw;
+//   }
+
+//   .circle-content .document-title {
+//     font-size: 3vw;
+//   }
+
+//   .circle-content .document-total {
+//     font-size: 2.5vw;
+//     padding: 1vw;
+//   }
+
+//   .circle-content .document-count {
+//     font-size: 5vw;
+//   }
+
+//   .circle-content .document-type {
+//     font-size: 3vw;
+//   }
+// }
+
+// /* Media Query untuk layar sangat kecil (ponsel) */
+// @media (max-width: 480px) {
+//   .circle-container {
+//     width: 50vw;
+//     height: 50vw;
+//     border-width: 3vw;
+//   }
+
+//   .circle-content {
+//     width: 95%;
+//     height: 95%;
+//   }
+
+//   .circle-content .document-title {
+//     font-size: 4vw;
+//   }
+
+//   .circle-content .document-total {
+//     font-size: 3.5vw;
+//   }
+
+//   .circle-content .document-count {
+//     font-size: 6vw;
+//   }
+
+//   .circle-content .document-type {
+//     font-size: 4vw;
+//   }
+// }

resources/scss/style.scss

@@ -45,6 +45,8 @@
 @import "components/tooltip";
 @import "components/widgets";
 
+// custom components
+@import "components/circle";
 
 // Plugin
 @import "plugins/simplebar";

resources/views/components/circle.blade.php

@@ -0,0 +1,19 @@
+@section('css')
+@vite(['resources/scss/components/_circle.scss'])
+@endsection
+
+<div class="circle-container" style="--circle-color: {{$document_color}};" id="{{$document_id}}">
+    <div class="circle-content">
+        <p class="document-title {{$document_id}}" >{{$document_title}}</p>
+        <p class="document-total {{$document_id}}" >Rp.0</p>
+        <p class="document-count {{$document_id}}" >0</p>
+        <p class="document-type {{$document_id}}" >{{$document_type}}</p>
+    </div>
+    @if ($visible_small_circle)
+    <div class="small-circle-container">
+        <div class="small-circle-content">
+            <p class="small-percentage">0%</p>
+        </div>
+    </div>
+    @endif
+</div>

resources/views/dashboards/bigdata.blade.php

@@ -5,7 +5,124 @@
 @include('layouts.partials/page-title', ['title' => 'Dashboards', 'subtitle' => 'SIBEDAS'])
 
 <div class="row">
-    <!-- Card 1 -->
+    <div class="row d-flex justify-content-center">
+        @component('components.circle', [
+            'document_title' => 'Perkiraan Potensi PBG Dari Tata Ruang',
+            'document_color' => '#bf04bc',
+            'document_type' => 'Pemohon',
+            'document_id' => 'chart-all-task',
+            'visible_small_circle' => true
+        ])
+        @endcomponent
+
+        @component('components.circle', [
+            'document_title' => 'Perkiraan Potensi PBG Dari Tata Ruang',
+            'document_color' => '#f75b1b',
+            'document_type' => 'Pemohon',
+            'document_id' => 'chart-all-task',
+            'visible_small_circle' => true
+        ])
+        @endcomponent
+    </div>
+    <div class="row d-flex justify-content-center">
+        @component('components.circle', [
+            'document_title' => 'Target PAD 2024',
+            'document_color' => '#020e42',
+            'document_type' => 'Pemohon',
+            'document_id' => 'chart-all-task',
+            'visible_small_circle' => true
+        ])
+        @endcomponent
+    </div>
+    <div class="row d-flex justify-content-center">
+    @component('components.circle', [
+            'document_title' => 'Kekurangan Potensi',
+            'document_color' => '#911701',
+            'document_type' => 'Pemohon',
+            'document_id' => 'chart-all-task',
+            'visible_small_circle' => true
+        ])
+        @endcomponent
+
+        @component('components.circle', [
+            'document_title' => 'Total Potensi Berkas',
+            'document_color' => '#02acfa',
+            'document_type' => 'Pemohon',
+            'document_id' => 'chart-all-task',
+            'visible_small_circle' => true
+        ])
+        @endcomponent
+    </div>
+    <div class="row d-flex justify-content-center">
+    @component('components.circle', [
+            'document_title' => 'Berkas Terverifikasi',
+            'document_color' => '#0561f5',
+            'document_type' => 'Berkas',
+            'document_id' => 'chart-business',
+            'visible_small_circle' => true
+        ])
+        @endcomponent
+
+        @component('components.circle', [
+            'document_title' => 'Berkas Belum Terverifikasi',
+            'document_color' => '#b973ff',
+            'document_type' => 'Berkas',
+            'document_id' => 'chart-business',
+            'visible_small_circle' => true
+        ])
+        @endcomponent
+    </div>
+    <div class="row d-flex justify-content-center">
+    @component('components.circle', [
+            'document_title' => 'Non Usaha',
+            'document_color' => '#028399',
+            'document_type' => 'Berkas',
+            'document_id' => 'chart-non-business',
+            'visible_small_circle' => true
+        ])
+        @endcomponent
+    
+        @component('components.circle', [
+            'document_title' => 'Usaha',
+            'document_color' => '#616b7d',
+            'document_type' => 'Berkas',
+            'document_id' => 'chart-business',
+            'visible_small_circle' => true
+        ])
+        @endcomponent
+
+        @component('components.circle',[
+            'document_title' => 'Realisasi Terbit PBG',
+            'document_color' => '#09ab5a',
+            'document_type' => 'Berkas',
+            'document_id' => 'chart-business',
+            'visible_small_circle' => true
+            ])
+        @endcomponent
+
+        @component('components.circle',[
+            'document_title' => 'Berproses Di Dinas Teknis',
+            'document_color' => '#422519',
+            'document_type' => 'Berkas',
+            'document_id' => 'chart-business',
+            'visible_small_circle' => true
+            ])
+        @endcomponent
+    </div>
+    <div class="row d-flex justify-content-center">
+        @component('components.circle',[
+            'document_title' => 'Progress Manual',
+            'document_color' => '#0294ad',
+            'document_type' => 'Berkas',
+            'document_id' => 'chart-business',
+            'visible_small_circle' => true
+            ])
+        @endcomponent
+    </div>
+</div>
+
+<!-- <div class="row">
+
     <div class="col-md-6 col-xl-3">
         <div class="card">
             <div class="card-body">
@@ -21,7 +138,6 @@
         </div>
     </div>
 
-    <!-- Card 2 -->
     <div class="col-md-6 col-xl-3">
         <div class="card">
             <div class="card-body">
@@ -37,7 +153,7 @@
         </div>
     </div>
 
-    <!-- Card 3 -->
+
     <div class="col-md-6 col-xl-3">
         <div class="card">
             <div class="card-body">
@@ -53,7 +169,6 @@
         </div>
     </div>
 
-    <!-- Card 4 -->
     <div class="col-md-6 col-xl-3">
         <div class="card">
             <div class="card-body">
@@ -71,7 +186,6 @@
 </div>
 
 <div class="row">
-        <!-- Card 5 -->
     <div class="col-md-6 col-xl-3">
         <div class="card">
             <div class="card-body">
@@ -87,7 +201,6 @@
         </div>
     </div>
 
-    <!-- Card 6 -->
     <div class="col-md-6 col-xl-3">
         <div class="card">
             <div class="card-body">
@@ -103,7 +216,6 @@
         </div>
     </div>
 
-    <!-- Card 7 -->
     <div class="col-md-6 col-xl-3">
         <div class="card">
             <div class="card-body">
@@ -119,7 +231,6 @@
         </div>
     </div>
 
-    <!-- Card 8 -->
     <div class="col-md-6 col-xl-3">
         <div class="card">
             <div class="card-body">
@@ -137,7 +248,6 @@
 </div>
 
 <div class="row">
-        <!-- Card 5 -->
     <div class="col-md-6 col-xl-3">
         <div class="card">
             <div class="card-body">
@@ -153,7 +263,6 @@
         </div>
     </div>
 
-    <!-- Card 6 -->
     <div class="col-md-6 col-xl-3">
         <div class="card">
             <div class="card-body">
@@ -169,7 +278,6 @@
         </div>
     </div>
 
-    <!-- Card 7 -->
     <div class="col-md-6 col-xl-3">
         <div class="card">
             <div class="card-body">
@@ -185,7 +293,6 @@
         </div>
     </div>
 
-    <!-- Card 8 -->
     <div class="col-md-6 col-xl-3">
         <div class="card">
             <div class="card-body">
@@ -200,7 +307,7 @@
             <div id="chart12"></div>
         </div>
     </div>
-</div>
+</div> -->
 
 @endsection