arifal/sibedas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add circle component and small circle percentage

Browse Source
This commit is contained in:
arifal
2025-02-04 01:12:33 +07:00
parent c43c79f65e
commit 6e726b4940
7 changed files with 483 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
resources/views/components/circle.blade.php Normal file
View File

@@ -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>

137
resources/views/dashboards/bigdata.blade.php
View File

@@ -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,8 +186,7 @@
</div>
<div class="row">
<!-- Card 5 -->
<div class="col-md-6 col-xl-3">
<div class="col-md-6 col-xl-3">
<div class="card">
<div class="card-body">
<div class="row">
@@ -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,8 +248,7 @@
</div>
<div class="row">
<!-- Card 5 -->
<div class="col-md-6 col-xl-3">
<div class="col-md-6 col-xl-3">
<div class="card">
<div class="card-body">
<div class="row">
@@ -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