add circle component and small circle percentage
This commit is contained in:
arifal
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
32
app/View/Components/Circle.php
Normal file
32
app/View/Components/Circle.php
Normal file
@@ -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');
|
||||
}
|
||||
}
|
||||
@@ -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(
|
||||
"countTargetPAD"
|
||||
).innerText = `${data.data.count} Berkas`;
|
||||
document.querySelectorAll('.document-count.chart-all-task').forEach((element) => {
|
||||
element.innerText = `${data.data.count}`;
|
||||
});
|
||||
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();
|
||||
});
|
||||
|
||||
227
resources/scss/components/_circle.scss
Normal file
227
resources/scss/components/_circle.scss
Normal file
@@ -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;
|
||||
// }
|
||||
// }
|
||||
@@ -45,6 +45,8 @@
|
||||
@import "components/tooltip";
|
||||
@import "components/widgets";
|
||||
|
||||
// custom components
|
||||
@import "components/circle";
|
||||
|
||||
// Plugin
|
||||
@import "plugins/simplebar";
|
||||
|
||||
19
resources/views/components/circle.blade.php
Normal file
19
resources/views/components/circle.blade.php
Normal 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>
|
||||
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user