From efac0d30edba10dca606f956a2ea00350df4b4a7 Mon Sep 17 00:00:00 2001 From: alfianchii Date: Mon, 27 Mar 2023 14:14:23 +0700 Subject: [PATCH] feat: skeleton loadings --- resources/js/dashboard.js | 546 +++++++++++----------- resources/views/dashboard/index.blade.php | 64 ++- 2 files changed, 339 insertions(+), 271 deletions(-) diff --git a/resources/js/dashboard.js b/resources/js/dashboard.js index 9a63f947..41df4250 100644 --- a/resources/js/dashboard.js +++ b/resources/js/dashboard.js @@ -5,299 +5,317 @@ fetch(`/dashboard/chart-data`, { .querySelector('meta[name="csrf-token"]') .getAttribute("content"), }, -}).then(async (result) => { - const body = await result.json(); +}) + .then(async (result) => { + const body = await result.json(); - // Set user level - const userLevel = body.authentication.data.level; + // Set user level + const userLevel = body.authentication.data.level; - // Response JSON - const allComplaints = body.chart.data.allComplaints ?? []; - const allResponses = body.chart.data.allResponses ?? []; - const responses = body.chart.data.responses ?? []; - const complaints = body.chart.data.complaints ?? []; + // Response JSON + const allComplaints = body.chart.data.allComplaints ?? []; + const allResponses = body.chart.data.allResponses ?? []; + const responses = body.chart.data.responses ?? []; + const complaints = body.chart.data.complaints ?? []; - if (userLevel === "admin") { - // Set options - var optionsComplaintAndResponse = { - series: [ - { - name: "Keluhan", - data: allComplaints.data.yAxis, - }, - { - name: "Tanggapan", - data: allResponses.data.yAxis, - }, - ], - chart: { - height: 350, - type: "area", - zoom: { + if (userLevel === "admin") { + // Set options + var optionsComplaintAndResponse = { + series: [ + { + name: "Keluhan", + data: allComplaints.data.yAxis, + }, + { + name: "Tanggapan", + data: allResponses.data.yAxis, + }, + ], + chart: { + height: 350, + type: "area", + zoom: { + enabled: false, + }, + stacked: false, + }, + dataLabels: { enabled: false, }, - stacked: false, - }, - dataLabels: { - enabled: false, - }, - stroke: { - curve: "smooth", - }, - xaxis: { - categories: allComplaints.data.xAxis, - type: "datetime", - }, - yaxis: { - labels: { - formatter: function (value) { - return Math.round(value); + stroke: { + curve: "smooth", + }, + xaxis: { + categories: allComplaints.data.xAxis, + type: "datetime", + }, + yaxis: { + labels: { + formatter: function (value) { + return Math.round(value); + }, + }, + }, + tooltip: { + x: { + format: "dd/MM/yy", }, }, - }, - tooltip: { - x: { - format: "dd/MM/yy", - }, - }, - }; - var optionsYourResponse = { - annotations: { - position: "back", - }, - dataLabels: { - enabled: false, - }, - chart: { - type: "bar", - height: 300, - zoom: { + }; + var optionsYourResponse = { + annotations: { + position: "back", + }, + dataLabels: { enabled: false, }, - }, - fill: { - opacity: 1, - }, - plotOptions: {}, - series: [ - { - name: "Tanggapan Kamu", - data: responses.yAxis, - }, - ], - colors: "#435ebe", - xaxis: { - categories: responses.xAxis, - type: "datetime", - }, - yaxis: { - labels: { - formatter: function (value) { - return Math.round(value); + chart: { + type: "bar", + height: 300, + zoom: { + enabled: false, }, }, - max: Math.max(...allResponses.data.yAxis), - }, - tooltip: { - x: { - format: "dd/MM/yy", - }, - }, - }; - let optionsAllResponsesGender = { - series: [allResponses.genders.male, allResponses.genders.female], - labels: ["Male", "Female"], - colors: ["#435ebe", "#55c6e8"], - chart: { - type: "donut", - width: "100%", - height: "350px", - }, - legend: { - position: "bottom", - }, - plotOptions: { - pie: { - donut: { - size: "30%", + fill: { + opacity: 1, + }, + plotOptions: {}, + series: [ + { + name: "Tanggapan Kamu", + data: responses.yAxis, }, + ], + colors: "#435ebe", + xaxis: { + categories: responses.xAxis, + type: "datetime", + }, + yaxis: { + labels: { + formatter: function (value) { + return Math.round(value); + }, + }, + max: Math.max(...allResponses.data.yAxis), + }, + tooltip: { + x: { + format: "dd/MM/yy", + }, + }, + }; + let optionsAllResponsesGender = { + series: [ + allResponses.genders.male, + allResponses.genders.female, + ], + labels: ["Male", "Female"], + colors: ["#435ebe", "#55c6e8"], + chart: { + type: "donut", + width: "100%", + height: "350px", + }, + legend: { + position: "bottom", + }, + plotOptions: { + pie: { + donut: { + size: "30%", + }, + }, + }, + }; + let optionsAllComplaintsGender = { + series: [ + allComplaints.genders.male, + allComplaints.genders.female, + ], + labels: ["Male", "Female"], + colors: ["#435ebe", "#55c6e8"], + chart: { + type: "donut", + width: "100%", + height: "350px", }, - }, - }; - let optionsAllComplaintsGender = { - series: [allComplaints.genders.male, allComplaints.genders.female], - labels: ["Male", "Female"], - colors: ["#435ebe", "#55c6e8"], - chart: { - type: "donut", - width: "100%", - height: "350px", - }, - legend: { - position: "bottom", - }, - plotOptions: { - pie: { - donut: { - size: "30%", + legend: { + position: "bottom", + }, + plotOptions: { + pie: { + donut: { + size: "30%", + }, }, }, - }, - }; + }; - // Instance chart - var chartComplaintAndResponse = new ApexCharts( - document.getElementById("chart-complaint"), - optionsComplaintAndResponse - ); - var chartYourResponses = new ApexCharts( - document.querySelector("#chart-your-responses"), - optionsYourResponse - ); - var chartAllResponsesGender = new ApexCharts( - document.getElementById("chart-response-genders"), - optionsAllResponsesGender - ); - var chartAllComplaintsGender = new ApexCharts( - document.getElementById("chart-complaint-genders"), - optionsAllComplaintsGender - ); + // Instance chart + var chartComplaintAndResponse = new ApexCharts( + document.getElementById("chart-complaint"), + optionsComplaintAndResponse + ); + var chartYourResponses = new ApexCharts( + document.querySelector("#chart-your-responses"), + optionsYourResponse + ); + var chartAllResponsesGender = new ApexCharts( + document.getElementById("chart-response-genders"), + optionsAllResponsesGender + ); + var chartAllComplaintsGender = new ApexCharts( + document.getElementById("chart-complaint-genders"), + optionsAllComplaintsGender + ); - // Render - chartYourResponses.render(); - chartAllResponsesGender.render(); - chartAllComplaintsGender.render(); - chartComplaintAndResponse.render(); - } else if (userLevel === "officer") { - // Set options - var optionsYourResponses = { - annotations: { - position: "back", - }, - dataLabels: { - enabled: false, - }, - chart: { - type: "bar", - height: 300, - zoom: { + // Render + chartYourResponses.render(); + chartAllResponsesGender.render(); + chartAllComplaintsGender.render(); + chartComplaintAndResponse.render(); + } else if (userLevel === "officer") { + // Set options + var optionsYourResponses = { + annotations: { + position: "back", + }, + dataLabels: { enabled: false, }, - }, - fill: { - opacity: 1, - }, - plotOptions: {}, - series: [ - { - name: "Tanggapan Kamu", - data: responses.yAxis, - }, - ], - colors: "#435ebe", - xaxis: { - categories: responses.xAxis, - type: "datetime", - }, - yaxis: { - labels: { - formatter: function (value) { - return Math.round(value); + chart: { + type: "bar", + height: 300, + zoom: { + enabled: false, + }, + }, + fill: { + opacity: 1, + }, + plotOptions: {}, + series: [ + { + name: "Tanggapan Kamu", + data: responses.yAxis, }, + ], + colors: "#435ebe", + xaxis: { + categories: responses.xAxis, + type: "datetime", }, - }, - tooltip: { - x: { - format: "dd/MM/yy", - }, - }, - }; - let optionsAllResponsesGender = { - series: [allResponses.genders.male, allResponses.genders.female], - labels: ["Male", "Female"], - colors: ["#435ebe", "#55c6e8"], - chart: { - type: "donut", - width: "100%", - height: "350px", - }, - legend: { - position: "bottom", - }, - plotOptions: { - pie: { - donut: { - size: "30%", + yaxis: { + labels: { + formatter: function (value) { + return Math.round(value); + }, }, }, - }, - }; + tooltip: { + x: { + format: "dd/MM/yy", + }, + }, + }; + let optionsAllResponsesGender = { + series: [ + allResponses.genders.male, + allResponses.genders.female, + ], + labels: ["Male", "Female"], + colors: ["#435ebe", "#55c6e8"], + chart: { + type: "donut", + width: "100%", + height: "350px", + }, + legend: { + position: "bottom", + }, + plotOptions: { + pie: { + donut: { + size: "30%", + }, + }, + }, + }; - // Instance chart - var chartYourResponses = new ApexCharts( - document.querySelector("#chart-your-responses"), - optionsYourResponses - ); - var chartAllResponsesGender = new ApexCharts( - document.getElementById("chart-response-genders"), - optionsAllResponsesGender - ); + // Instance chart + var chartYourResponses = new ApexCharts( + document.querySelector("#chart-your-responses"), + optionsYourResponses + ); + var chartAllResponsesGender = new ApexCharts( + document.getElementById("chart-response-genders"), + optionsAllResponsesGender + ); - // Render - chartYourResponses.render(); - chartAllResponsesGender.render(); - } else if (userLevel === "student") { - // Set options - var optionsYourComplaints = { - annotations: { - position: "back", - }, - dataLabels: { - enabled: false, - }, - chart: { - type: "bar", - height: 300, - zoom: { + // Render + chartYourResponses.render(); + chartAllResponsesGender.render(); + } else if (userLevel === "student") { + // Set options + var optionsYourComplaints = { + annotations: { + position: "back", + }, + dataLabels: { enabled: false, }, - }, - fill: { - opacity: 1, - }, - plotOptions: {}, - series: [ - { - name: "Keluhan Kamu", - data: complaints.yAxis, - }, - ], - colors: "#435ebe", - xaxis: { - categories: complaints.xAxis, - type: "datetime", - }, - yaxis: { - labels: { - formatter: function (value) { - return Math.round(value); + chart: { + type: "bar", + height: 300, + zoom: { + enabled: false, }, }, - }, - tooltip: { - x: { - format: "dd/MM/yy", + fill: { + opacity: 1, }, - }, - }; + plotOptions: {}, + series: [ + { + name: "Keluhan Kamu", + data: complaints.yAxis, + }, + ], + colors: "#435ebe", + xaxis: { + categories: complaints.xAxis, + type: "datetime", + }, + yaxis: { + labels: { + formatter: function (value) { + return Math.round(value); + }, + }, + }, + tooltip: { + x: { + format: "dd/MM/yy", + }, + }, + }; + + // Instance chart + var chartYourComplaints = new ApexCharts( + document.querySelector("#chart-your-complaints"), + optionsYourComplaints + ); - // Instance chart - var chartYourComplaints = new ApexCharts( - document.querySelector("#chart-your-complaints"), - optionsYourComplaints - ); + // Render + chartYourComplaints.render(); + } + }) + .finally(() => { + // Hide loading + let skeletonLoadings = document.querySelectorAll(".skeleton-loading"); - // Render - chartYourComplaints.render(); - } -}); + skeletonLoadings.forEach((skeletonLoading) => { + skeletonLoading.classList.add("d-none"); + }); + }); diff --git a/resources/views/dashboard/index.blade.php b/resources/views/dashboard/index.blade.php index 8366ef08..318e6568 100644 --- a/resources/views/dashboard/index.blade.php +++ b/resources/views/dashboard/index.blade.php @@ -123,7 +123,13 @@

Statistik Keluhan dan Tanggapan

-
+
+
+ +
+
@@ -135,7 +141,13 @@

Statistik Tanggapan Kamu

-
+
+
+ +
+
@@ -276,7 +288,13 @@ class="btn btn-warning">

Tanggapan

-
+
+
+ +
+
@@ -284,7 +302,13 @@ class="btn btn-warning">

Keluhan

-
+
+
+ +
+
@@ -437,7 +461,16 @@ class="btn btn-sm btn-outline-secondary">Report

Statistik Tanggapan Kamu

-
+
+
+
+ +
+
+
@@ -578,7 +611,15 @@ class="btn btn-warning">

Tanggapan

-
+
+
+
+ +
+
+
@@ -689,7 +730,16 @@ class="btn btn-sm btn-outline-secondary">Report

Statistik Keluhan Kamu

-
+
+
+
+ +
+
+