<x-layout>
<x-slot:title>
Home
</x-slot:title>
<div class="px-4 py-6">
<div class="mb-8 rounded-2xl bg-gradient-to-r from-blue-600 via-purple-600 to-red-600 p-8 text-white">
<div class="grid grid-cols-1 gap-8 lg:grid-cols-4">
<div class="relative flex items-center gap-4">
<div class="relative h-16 w-16">
<div class="absolute inset-0 rounded-full bg-pink-400 opacity-20"></div>
<svg class="h-16 w-16 -rotate-90" viewBox="0 0 40 40">
<circle cx="20" cy="20" r="16" fill="none" stroke="currentColor"
strokeWidth="3" class="opacity-10" />
<circle cx="20" cy="20" r="16" fill="none" stroke="currentColor"
strokeWidth="3" strokeDasharray="90 100"
class="text-pink-400 transition-all duration-700" />
</svg>
</div>
<div>
<div class="text-2xl font-bold" id="total-saksi">0</div>
<div class="text-sm text-gray-300">Total Saksi</div>
</div>
</div>
<div class="relative flex items-center gap-4">
<div class="relative h-16 w-16">
<div class="absolute inset-0 rounded-full bg-green-400 opacity-20"></div>
<svg class="h-16 w-16 -rotate-90" viewBox="0 0 40 40">
<circle cx="20" cy="20" r="16" fill="none" stroke="currentColor"
strokeWidth="3" class="opacity-10" />
<circle cx="20" cy="20" r="16" fill="none" stroke="currentColor"
strokeWidth="3" strokeDasharray="70 100"
class="text-green-400 transition-all duration-700" />
</svg>
</div>
<div>
<div class="text-2xl font-bold" id="total-dpt">0</div>
<div class="text-sm text-gray-300">DPT</div>
</div>
</div>
<div class="relative flex items-center gap-4">
<div class="relative h-16 w-16">
<div class="absolute inset-0 rounded-full bg-blue-400 opacity-20"></div>
<svg class="h-16 w-16 -rotate-90" viewBox="0 0 40 40">
<circle cx="20" cy="20" r="16" fill="none" stroke="currentColor"
strokeWidth="3" class="opacity-10" />
<circle cx="20" cy="20" r="16" fill="none" stroke="currentColor"
strokeWidth="3" strokeDasharray="50 100"
class="text-blue-400 transition-all duration-700" />
</svg>
</div>
<div>
<div class="text-2xl font-bold" id="total-tps">0</div>
<div class="text-sm text-gray-300">TPS</div>
</div>
</div>
<div class="rounded-xl bg-white p-4 text-black">
<div class="flex items-center gap-4">
<div>
<div class="text-2xl font-bold" id="total-suara-konfirmasi">0</div>
<div class="text-sm text-gray-500">Total Suara</div>
</div>
<div class="ml-auto">
<svg class="h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4 mb-8" id="list-calon">
<div class="border shadow rounded-md p-4 max-w-sm w-full mx-auto loading">
<div class="animate-pulse flex flex-col items-center space-x-4 w-full gap-6">
<div class="rounded-full bg-gray-400 h-40 w-40"></div>
<div class="flex-1 space-y-6 py-1 w-full">
<div class="h-2 bg-gray-400 rounded"></div>
<div class="h-2 bg-gray-400 rounded"></div>
</div>
</div>
</div>
<div class="border shadow rounded-md p-4 max-w-sm w-full mx-auto loading">
<div class="animate-pulse flex flex-col items-center space-x-4 w-full gap-6">
<div class="rounded-full bg-gray-400 h-40 w-40"></div>
<div class="flex-1 space-y-6 py-1 w-full">
<div class="h-2 bg-gray-400 rounded"></div>
<div class="h-2 bg-gray-400 rounded"></div>
</div>
</div>
</div>
<div class="border shadow rounded-md p-4 max-w-sm w-full mx-auto loading">
<div class="animate-pulse flex flex-col items-center space-x-4 w-full gap-6">
<div class="rounded-full bg-gray-400 h-40 w-40"></div>
<div class="flex-1 space-y-6 py-1 w-full">
<div class="h-2 bg-gray-400 rounded"></div>
<div class="h-2 bg-gray-400 rounded"></div>
</div>
</div>
</div>
<div class="rounded-xl bg-white p-6 shadow-sm">
<div class="space-y-4">
<div class="relative">
<select id="kabupaten_kota_id"
name="kabupaten_kota_id"
onchange="selectKabupatenKota(this)"
class="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-blue-500 focus:ring-blue-500">
<option value="" selected>Semua Kabupaten Kota</option>
@foreach (Helper::kabupatenKotas() as $key => $kota)
<option value="{{ $key }}">{{ $kota }}</option>
@endforeach
</select>
</div>
<div class="relative">
<select id="kecamatan_id"
onchange="selectKecamatan(this)"
class="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-blue-500 focus:ring-blue-500">
<option value="" selected>Pilih Kecamatan</option>
</select>
</div>
<div class="relative">
<select id="kelurahan_desa_id"
class="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-blue-500 focus:ring-blue-500">
<option value="" selected>Pilih Kelurahan/Desa</option>
</select>
</div>
<button type="button" id="submit-filter"
class="w-full rounded-md bg-gray-600 px-4 py-2 text-white transition-colors hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
Lihat Data
</button>
</div>
</div>
</div>
<div class="grid gap-4 grid-cols-1 md:grid-cols-3 mt-4">
<div
class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800">
<div class="flex items-center justify-between my-4">
<div class="flex-shrink-0">
<span class="text-xl font-bold leading-none text-gray-900 sm:text-2xl dark:text-white"
id="suara-masuk">0</span>
/
<span class="text-xl font-bold leading-none text-gray-900 sm:text-2xl dark:text-white"
id="dpt">0</span>
<h3 class="text-base font-light text-gray-500 dark:text-gray-400">Suara Masuk / DPT (Sistem)
</h3>
</div>
</div>
<div id="chart2"></div>
</div>
<div
class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800">
<div class="flex items-center justify-between my-4">
<div class="flex-shrink-0">
<span class="text-xl font-bold leading-none text-gray-900 sm:text-2xl dark:text-white"
id="dpt-tps">0</span>
/
<span class="text-xl font-bold leading-none text-gray-900 sm:text-2xl dark:text-white"
id="dpt-sistem">0</span>
<h3 class="text-base font-light text-gray-500 dark:text-gray-400">DPT (Tps) / DPT (Sistem)</h3>
</div>
</div>
<div id="chart3"></div>
</div>
<div
class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800">
<div class="flex items-center justify-between my-4">
<div class="flex-shrink-0">
<span class="text-xl font-bold leading-none text-gray-900 sm:text-2xl dark:text-white"
id="suara-sah">0</span>
/
<span class="text-xl font-bold leading-none text-gray-900 sm:text-2xl dark:text-white"
id="suara-tidak-sah">0</span>
<h3 class="text-base font-light text-gray-500 dark:text-gray-400">Suara Sah / Suara Tidak Sah
</h3>
</div>
</div>
<div id="chart4"></div>
</div>
</div>
<div
class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800 mt-4">
<div class="flex items-center justify-between mb-4">
<div class="flex-shrink-0">
<h3 class="text-base font-light text-gray-500 dark:text-gray-400">Suara Per Kabupaten/Kota</h3>
</div>
</div>
<div id="chart-kabupaten-kota"></div>
</div>
<div
class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800 mt-4">
<div class="flex items-center justify-between mb-4">
<div class="flex-shrink-0">
<h3 class="text-base font-light text-gray-500 dark:text-gray-400">TPS Per Kabupaten/Kota</h3> <span
class="text-xl font-bold leading-none text-gray-900 sm:text-2xl dark:text-white"
id="jumlah-tps-per-kabupaten-kota">0</span>
</div>
</div>
<div id="chart-tps-kabupaten-kota"></div>
</div>
<div
class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800 mt-4">
<div class="flex items-center justify-between mb-4">
<div class="flex-shrink-0">
<h3 class="text-base font-light text-gray-500 dark:text-gray-400">DPT Per Kabupaten/Kota</h3> <span
class="text-xl font-bold leading-none text-gray-900 sm:text-2xl dark:text-white"
id="jumlah-dpt-per-kabupaten-kota">0</span>
</div>
</div>
<div id="chart-dpt-kabupaten-kota"></div>
</div>
<div class="grid w-full grid-cols-1 gap-4 mt-4 xl:grid-cols-2 2xl:grid-cols-3">
@foreach (Helper::servers() as $key => $item)
@php
$parsedUrl = parse_url($key);
$sub = explode('.', $parsedUrl['host']);
@endphp
<div id="server-{{ $sub[0] }}" data-url="{{ $key }}"
class="servers p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800">
<div class="w-full">
<h2>Server {{ $sub[0] }}</h2>
<h3 class="mb-2 text-base font-normal text-gray-500 dark:text-gray-400">
<a href="{{ $key }}">{{ $key }}</a>
<span class="p-2 bg-yellow-500 rounded-full h-4 w-4 inline-block status"></span>
</h3>
<div class="grid grid-cols-3 items-center justify-center mb-2 text-center">
<div>
<div class="chart-storage"></div>
<small>
Storage (GB)
</small>
</div>
<div>
<div class="chart-memory"></div>
<small>
Memory (GB)
</small>
</div>
<div>
<div class="chart-cpu"></div>
<small>CPU (%)</small>
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
<x-slot:scripts>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script >
const formatter = new Intl.NumberFormat('id-ID', {
currency: 'IDR',
trailingZeroDisplay: 'stripIfInteger'
});
const servers = @json(Helper::servers());
const totalSaksiElm = document.getElementById('total-saksi');
const totalDptElm = document.getElementById('total-dpt');
const totalTpsElm = document.getElementById('total-tps');
const totalSuaraElm = document.getElementById('total-suara');
const totalSuaraKonfirmasiElm = document.getElementById('total-suara-konfirmasi');
function selectKabupatenKota(e) {
const id = e.value;
if (id != "") {
for (const [key, value] of Object.entries(servers)) {
if (value.includes(parseInt(id))) {
getKecamatan(key + "/ajax/kecamatan?kabupaten_kota_id=" + id);
document.getElementById("kelurahan_desa_id").innerHTML = "";
}
}
}
}
function selectKecamatan(e) {
const id = e.value;
if (id != "") {
for (const [key, value] of Object.entries(servers)) {
if (value.includes(parseInt(document.getElementById("kabupaten_kota_id").value))) {
getKelurahanDesa(key + "/ajax/kelurahan-desa?kecamatan_id=" + id);
}
}
}
}
function getKecamatan(url) {
fetch(url).then(response => {
if (!response.ok) {
throw new Error(`Failed to fetch ${url}: ${response.statusText}`);
}
return response.json();
}).then(results => {
let options = "<option value='' selected>Pilih Kecamatan</option>";
for (let i = 0; i < results.length; i++) {
const result = results[i];
options += `<option value="${result.id}">${result.nama}</option>`
}
document.getElementById("kecamatan_id").innerHTML = options;
});
}
function getKelurahanDesa(url) {
fetch(url).then(response => {
if (!response.ok) {
throw new Error(`Failed to fetch ${url}: ${response.statusText}`);
}
return response.json();
}).then(results => {
let options = "<option value='' selected>Pilih Kelurahan/Desa</option>";
for (let i = 0; i < results.length; i++) {
const result = results[i];
options += `<option value="${result.id}">${result.nama}</option>`
}
document.getElementById("kelurahan_desa_id").innerHTML = options;
});
}
document.getElementById("submit-filter").addEventListener('click', function() {
getInfoZona();
});
var options = {
colors: ['#ffd56d', '#ca0705'],
chart: {
type: 'donut'
},
series: [0],
labels: ['Suara'],
legend: {
show: true,
position: 'bottom',
},
tooltip: {
custom: function({
series,
seriesIndex,
dataPointIndex,
w
}) {
var data = w.globals.initialSeries[seriesIndex];
var formatValue = formatter.format(series[seriesIndex]);
return `<div class="p-2" style="background-color:${w.globals.colors[seriesIndex]}">
${formatValue}
</div>`;
}
}
}
var chart2 = new ApexCharts(document.querySelector("#chart2"), options);
chart2.render();
var chart3 = new ApexCharts(document.querySelector("#chart3"), {
colors: ['#ffd56d', '#ca0705'],
series: [{
name: "DPT TPS",
data: [0]
}, {
name: "DPT Sistem",
data: [0]
}],
labels: [
"DPT Tps",
"DPT Sistem"
],
chart: {
type: 'bar',
height: 430
},
plotOptions: {
bar: {
horizontal: true,
dataLabels: {
position: 'top',
},
}
},
dataLabels: {
enabled: true,
offsetX: -6,
style: {
fontSize: '12px',
colors: ['#fff']
}
},
stroke: {
show: true,
width: 1,
colors: ['#fff']
},
tooltip: {
shared: true,
intersect: false,
y: {
formatter: function(value, {
series,
seriesIndex,
dataPointIndex,
w
}) {
return formatter.format(value);
}
}
},
xaxis: {
categories: ["DPT"],
},
});
chart3.render();
var chart4 = new ApexCharts(document.querySelector("#chart4"), options);
chart4.render();
function filterParam() {
return '?kabupaten_kota_id=' + document.getElementById("kabupaten_kota_id").value + "&kecamatan_id=" + document
.getElementById("kecamatan_id").value + "&kelurahan_desa_id=" + document.getElementById("kelurahan_desa_id")
.value;
}
function tranformDataCalon(results) {
var datas = {
series: [],
labels: []
};
let calons = [];
let total_suara_tidak_sah = 0;
for (let x = 0; x < results.length; x++) {
const result = results[x];
for (let i = 0; i < result.length; i++) {
const item = result[i];
if (item.id != undefined) {
if (calons[item.id] == undefined) {
calons[item.id] = {
"nomor": item.nomor,
"nama_calon": item.nama_calon,
"nama_wakil_calon": item.nama_wakil_calon,
"foto_pasangan": item.foto_pasangan,
"total_suara": item.jumlah_suara
}
} else {
calons[item.id]["total_suara"] += item.jumlah_suara;
}
const indexOf = datas.labels.indexOf(`${item.nama_calon}/${item.nama_wakil_calon}`);
if (indexOf >= 0) {
datas.series[indexOf] += item.jumlah_suara;
} else {
datas.series.push(item.jumlah_suara)
datas.labels.push(`${item.nama_calon}/${item.nama_wakil_calon}`)
}
} else {
const indexOf = datas.labels.indexOf(`Suara Tidak Sah`);
total_suara_tidak_sah += item.jumlah_suara_tidak_sah;
if (indexOf >= 0) {
datas.series[indexOf] += item.jumlah_suara_tidak_sah;
} else {
datas.series.push(item.jumlah_suara_tidak_sah)
datas.labels.push(`Suara Tidak Sah`)
}
}
}
}
document.getElementById("list-calon").innerHTML = `
<div class="rounded-xl bg-white p-6 shadow-sm transition-all hover:shadow-md">
<div class="flex flex-col items-center gap-4">
<div style="height:150px;width:150px;" class="flex items-center justify-center rounded-lg bg-gray-200">
<svg class="h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</div>
<div class="text-center">
<h3 class="font-medium text-gray-900">Suara Tidak Sah</h3>
<p class="mt-1 text-2xl font-bold text-blue-600">${formatter.format(total_suara_tidak_sah)}</p>
</div>
</div>
</div>
` + document.getElementById("list-calon").innerHTML;
calons.reverse();
calons.forEach(calon => {
document.getElementById("list-calon").innerHTML = `
<div class="rounded-xl bg-white p-6 shadow-sm transition-all hover:shadow-md">
<div class="flex flex-col items-center gap-4">
<img src="${calon['foto_pasangan']}"
alt="${calon['nama_calon']} / ${calon['nama_wakil_calon']}" style="height:150px;" class="rounded-lg object-cover" />
<div class="text-center">
<h3 class="font-medium text-gray-900">${calon['nama_calon']} / ${calon['nama_wakil_calon']}</h3>
<p class="mt-1 text-2xl font-bold text-blue-600">${formatter.format(calon['total_suara'])}</p>
</div>
</div>
</div>
` + document.getElementById("list-calon").innerHTML;
});
}
function transformDataSuara(results) {
let totalSuara = 0;
let jumlahDpt = 0;
let jumlahDptTps = 0;
let suaraSah = 0;
let suaraTidakSah = 0;
for (let x = 0; x < results.length; x++) {
const result = results[x];
totalSuara += result.jumlah_suara;
jumlahDpt += result.jumlah_dpt;
jumlahDptTps += result.jumlah_dpt_tps;
suaraSah += result.suara_sah;
suaraTidakSah += result.suara_tidak_sah;
}
chart2.updateOptions({
series: [
totalSuara,
jumlahDpt
],
labels: [
"Suara Masuk",
"DPT"
]
});
chart3.updateOptions({
series: [{
name: "DPT TPS",
data: [jumlahDptTps]
}, {
name: "DPT Sistem",
data: [jumlahDpt]
}]
});
chart4.updateOptions({
series: [
suaraSah,
suaraTidakSah
],
labels: [
"Suara Sah",
"Suara Tidak Sah"
]
});
document.getElementById("suara-masuk").innerHTML = formatter.format(totalSuara)
document.getElementById("dpt").innerHTML = formatter.format(jumlahDpt)
document.getElementById("dpt-tps").innerHTML = formatter.format(jumlahDptTps)
document.getElementById("dpt-sistem").innerHTML = formatter.format(jumlahDpt)
document.getElementById("suara-sah").innerHTML = formatter.format(suaraSah)
document.getElementById("suara-tidak-sah").innerHTML = formatter.format(suaraTidakSah)
}
const chartPerKabupatenKota = new ApexCharts(document.getElementById('chart-kabupaten-kota'), {
// colors: ['#1A56DB', '#FDBA8C'],
series: [],
chart: {
type: 'bar',
height: '420px',
fontFamily: 'Inter, sans-serif',
foreColor: '#4B5563',
toolbar: {
show: false
}
},
plotOptions: {
bar: {
columnWidth: '90%',
borderRadius: 3
}
},
tooltip: {
shared: true,
intersect: false,
style: {
fontSize: '14px',
fontFamily: 'Inter, sans-serif'
},
y: {
formatter: function(value, {
series,
seriesIndex,
dataPointIndex,
w
}) {
return formatter.format(value);
}
}
},
states: {
hover: {
filter: {
type: 'darken',
value: 1
}
}
},
stroke: {
show: true,
width: 5,
colors: ['transparent']
},
grid: {
show: false
},
dataLabels: {
enabled: false
},
// legend: {
// show: false
// },
xaxis: {
floating: false,
labels: {
show: true
},
axisBorder: {
show: false
},
axisTicks: {
show: false
},
},
yaxis: {
show: false
},
fill: {
opacity: 1
}
});
chartPerKabupatenKota.render();
function transformDataPerKabupatenKota(results) {
let suaras = [];
for (let x = 0; x < results.length; x++) {
const result = results[x];
for (let i = 0; i < result.length; i++) {
const item = result[i];
if (suaras[item.id] == undefined) {
suaras[item.id] = item;
} else {
suaras[item.id].total_suara += item.total_suara;
suaras[item.id].total_suara_tidak_sah += item.total_suara_tidak_sah;
for (let x = 0; x < suaras[item.id].calon.length; x++) {
const calon = suaras[item.id].calon[x];
for (let i = 0; i < item.calon.length; i++) {
const cc = item.calon[i];
if (calon.id == cc.id) {
suaras[item.id].calon[x].total_suara += cc.total_suara;
}
}
}
}
}
}
var datas = {
series: [],
labels: []
};
for (const [key, value] of Object.entries(suaras)) {
for (let i = 0; i < value.calon.length; i++) {
const calon = value.calon[i];
const seriesIndex = datas.series.findIndex(function(a) {
return a.name == calon.nama_calon + " & " + calon.nama_wakil_calon;
});
if (seriesIndex >= 0) {
datas.series[seriesIndex].data.push({
x: value.nama,
y: calon.total_suara
})
} else {
datas.series.push({
"name": calon.nama_calon + " & " + calon.nama_wakil_calon,
"data": [{
x: value.nama,
y: calon.total_suara
}]
})
}
}
const seriesIndex = datas.series.findIndex(function(a) {
return a.name == "Suara Tidak Sah";
});
if (seriesIndex >= 0) {
datas.series[seriesIndex].data.push({
x: value.nama,
y: value.total_suara_tidak_sah
})
} else {
datas.series.push({
"name": "Suara Tidak Sah",
"data": [{
x: value.nama,
y: value.total_suara_tidak_sah
}]
})
}
}
chartPerKabupatenKota.updateOptions({
series: datas.series
});
}
const chartTpsPerKabupatenKota = new ApexCharts(document.getElementById('chart-tps-kabupaten-kota'), {
// colors: ['#1A56DB', '#FDBA8C'],
series: [],
chart: {
type: 'bar',
height: '420px',
fontFamily: 'Inter, sans-serif',
foreColor: '#29cc7d',
toolbar: {
show: false
}
},
plotOptions: {
bar: {
columnWidth: '90%',
borderRadius: 3
}
},
tooltip: {
shared: true,
intersect: false,
style: {
fontSize: '14px',
fontFamily: 'Inter, sans-serif'
},
y: {
formatter: function(value, {
series,
seriesIndex,
dataPointIndex,
w
}) {
return formatter.format(value);
}
}
},
states: {
hover: {
filter: {
type: 'darken',
value: 1
}
}
},
stroke: {
show: true,
width: 5,
colors: ['transparent']
},
grid: {
show: false
},
dataLabels: {
enabled: false
},
// legend: {
// show: false
// },
xaxis: {
floating: false,
labels: {
show: true
},
axisBorder: {
show: false
},
axisTicks: {
show: false
},
},
yaxis: {
show: false
},
fill: {
opacity: 1
}
});
chartTpsPerKabupatenKota.render();
function transformDataTpsPerKabupatenKota(results) {
var datas = {
series: [{
"name": "TPS",
"data": []
}],
labels: []
};
let total = 0;
for (let index = 0; index < results.length; index++) {
const element = results[index];
for (let x = 0; x < element.length; x++) {
const result = element[x];
datas.series[0].data.push({
x: result.nama,
y: result.jumlah_tps
});
total += result.jumlah_tps;
}
}
chartTpsPerKabupatenKota.updateOptions({
series: datas.series
});
if (total > 0) {
document.getElementById("jumlah-tps-per-kabupaten-kota").innerHTML = formatter.format(total);
}
}
const chartDptPerKabupatenKota = new ApexCharts(document.getElementById('chart-dpt-kabupaten-kota'), {
// colors: ['#1A56DB', '#FDBA8C'],
series: [],
chart: {
type: 'bar',
height: '420px',
fontFamily: 'Inter, sans-serif',
foreColor: '#29cc7d',
toolbar: {
show: false
}
},
plotOptions: {
bar: {
columnWidth: '90%',
borderRadius: 3
}
},
tooltip: {
shared: true,
intersect: false,
style: {
fontSize: '14px',
fontFamily: 'Inter, sans-serif'
},
y: {
formatter: function(value, {
series,
seriesIndex,
dataPointIndex,
w
}) {
return formatter.format(value);
}
}
},
states: {
hover: {
filter: {
type: 'darken',
value: 1
}
}
},
stroke: {
show: true,
width: 5,
colors: ['transparent']
},
grid: {
show: false
},
dataLabels: {
enabled: false
},
// legend: {
// show: false
// },
xaxis: {
floating: false,
labels: {
show: true
},
axisBorder: {
show: false
},
axisTicks: {
show: false
},
},
yaxis: {
show: false
},
fill: {
opacity: 1
}
});
chartDptPerKabupatenKota.render();
function transformDataDptPerKabupatenKota(results) {
var datas = {
series: [{
"name": "DPT",
"data": []
}],
labels: []
};
let total = 0;
for (let index = 0; index < results.length; index++) {
const element = results[index];
for (let x = 0; x < element.length; x++) {
const result = element[x];
datas.series[0].data.push({
x: result.nama,
y: result.jumlah_dpt
})
total += result.jumlah_dpt;
}
}
chartDptPerKabupatenKota.updateOptions({
series: datas.series
});
if (total > 0) {
document.getElementById("jumlah-dpt-per-kabupaten-kota").innerHTML = formatter.format(total);
}
}
getInfoZona();
function getInfoZona() {
const loadings = document.querySelectorAll('.loading');
loadings.forEach((loading) => {
loading.classList.remove('hidden');
});
const serversElm = document.querySelectorAll('.servers');
const urls = @json(Helper::urlServers('/api/info'));
Promise.allSettled(urls.map(url => fetch(url + filterParam())
.then(response => {
if (!response.ok) {
throw new Error(`Failed to fetch ${url}: ${response.statusText}`);
}
return response.json(); // assuming the response is JSON
})
))
.then(results => {
console.log(results);
const successfulResults = results
.filter(result => result.status === 'fulfilled') // only keep successful fetches
.map(result => result.value); // extract the value (response data)
const failedResults = results
.filter(result => result.status === 'rejected') // only keep failed fetches
.map(result => result.reason); // extract the error reason
//hide all .loading
loadings.forEach((loading) => {
loading.classList.add('hidden');
});
for (let index = 0; index < urls.length; index++) {
const url = urls[index];
const {
hostname
} = new URL(url);
const sub = hostname.split('.')[0];
const elm = document.getElementById('server-' + sub);
if (results[index].status == "fulfilled") {
elm.querySelector(".status").classList.remove("bg-yellow-500");
elm.querySelector(".status").classList.add("bg-green-500");
const result = results[index].value;
const options = {
series: [0, 0],
labels: ['Used', 'Free'],
colors: ['#ca0705', '#1A56DB'],
chart: {
type: 'donut',
height: 400,
fontFamily: 'Inter, sans-serif',
toolbar: {
show: false
},
},
responsive: [{
breakpoint: 430,
options: {
chart: {
height: 300
}
}
}],
states: {
hover: {
filter: {
type: 'darken',
value: 0.9
}
}
},
tooltip: {
shared: true,
followCursor: false,
fillSeriesColor: false,
inverseOrder: true,
style: {
fontSize: '14px',
fontFamily: 'Inter, sans-serif'
},
x: {
show: true,
formatter: function(_, {
seriesIndex,
w
}) {
const label = w.config.labels[seriesIndex];
return label
}
},
y: {
formatter: function(value) {
return parseFloat(value).toFixed(2);
}
}
},
grid: {
show: false
},
legend: {
show: false
},
};
const chart = new ApexCharts(elm.querySelector(".chart-storage"), options);
chart.render();
chart.updateOptions({
series: [
result.storage_usage.used,
result.storage_usage.free
],
});
const chart2 = new ApexCharts(elm.querySelector(".chart-memory"), options);
chart2.render();
chart2.updateOptions({
series: [
result.memory_usage.used / 1024 / 1024 / 1024,
result.memory_usage.free / 1024 / 1024 / 1024
],
});
const chart3 = new ApexCharts(elm.querySelector(".chart-cpu"), options);
chart3.render();
chart3.updateOptions({
series: [
result.cpu_usage,
100 - result.cpu_usage
]
});
} else {
elm.querySelector(".status").classList.remove("bg-yellow-500");
elm.querySelector(".status").classList.add("bg-red-700");
}
}
console.log(successfulResults);
totalSaksiElm.innerHTML = formatter.format(successfulResults.map(r => r.jumlah_saksi).reduce(
function(a, b) {
return a + b;
}, 0));
totalDptElm.innerHTML = formatter.format(successfulResults.map(r => r.jumlah_dpt).reduce(function(a,
b) {
return a + b;
}, 0));
totalTpsElm.innerHTML = formatter.format(successfulResults.map(r => r.jumlah_tps).reduce(function(a,
b) {
return a + b;
}, 0));
totalSuaraKonfirmasiElm.innerHTML = formatter.format(successfulResults.map(r => r.jumlah_suara)
.reduce(function(a, b) {
return a + b;
}, 0));
tranformDataCalon(successfulResults.map(r => r.suara_calon));
transformDataPerKabupatenKota(successfulResults.map(r => r.suara_kabupaten_kota));
transformDataTpsPerKabupatenKota(successfulResults.map(r => r.tps_kabupaten_kota));
transformDataDptPerKabupatenKota(successfulResults.map(r => r.dpt_kabupaten_kota))
transformDataSuara(successfulResults);
});
}
</script>
</x-slot:scripts>
</x-layout>
Anons79 File Manager Version 1.0, Coded By Anons79
Email: [email protected]
Anons79 Mini Shell