|
|
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/modules/base/head :: head}">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>
<style>.chart-container { display: flex; justify-content: center; align-items: center; height: 100%; box-sizing: border-box; /* Optionally set the height to fill the container */}</style><body> <link rel="stylesheet" href="/assets/node_modules/fullcalendar/dist/fullcalendar.min.css"> <div class="wrapper"> <!-- header top menu Start --> <header th:replace="~{fragments/modules/base/header :: header}"></header> <!-- header top menu end -->
<div class="page-wrap"> <!--=============== Left Menu side Start ================--> <div th:replace="~{fragments/modules/base/menu :: menu}"></div> <!--=============== Left side End ================--> <div class="main-content"> <div class="container-fluid">
<div class="page-header mb-2"> <div class="row align-items-end"> <div class="col-lg-8"> <div class="page-header-title"> <i class="ik ik-bar-chart-2 bg-blue"></i> <div class="d-inline"> <h5>PGR Report</h5> <span>Public Grievance Redressal Complaint Report</span> </div> </div> </div> <div class="col-lg-4"> <nav class="breadcrumb-container" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="index"><i class="ik ik-home"></i></a></li> <li class="breadcrumb-item active" aria-current="page">Dashboard</li> </ol> </nav> </div> </div> </div> <h4 class="h4 text-right text-mute" style="font-size: 12px;"> Auto refresh in <font id="refresh-countdown">00</font> seconds </h4>
<br>
<!--............. This is form for select departments to show bar and pie chart ............ -->
<form class="" action="" onsubmit="getByZone()">
<div class="row">
<div class="col-md-4">
<label for="fromDate" class="">From Date</label> <input type="date" class="form-control" id="fromDate" name="sFrDate" th:value="${sFrDate}" data-date-format="dd/mm/yy" required>
</div>
<div class="col-md-4">
<label for="toDate" class="">To Date</label> <input type="date" class="form-control" id="toDate" name="sToDate" th:value="${sToDate}" data-date-format="dd/mm/yy" required>
</div>
<div class="col-md-4">
<label for="DepartmentDropdown">Select AgeAnalysis Department for PieChart:</label> <select class="form-control" name="DEPT_NAME" id="zone"> <option value='0' th:selected="${DEPT_NAME == 0}">---- All ----</option> <option th:each="complaintdepartment : ${complaintdept1}" th:value="${complaintdepartment.name}" th:text="${complaintdepartment.name}" th:selected="${DEPT_NAME == complaintdepartment.name}"></option> </select> </div>
<div class="col-md-4">
<label for="DepartmentDropdown">Select ZoneWise Department for BarChart:</label> <select class="form-control" name="DEPTID" id="zonewithreopenbar"> <option value='0' th:selected="${DEPTID == 0}">---- All ----</option> <option th:each="complaintdepartment : ${complaintdept}" th:value="${complaintdepartment.id}" th:text="${complaintdepartment.name}" th:selected="${DEPTID == complaintdepartment.id}"></option> </select>
</div>
<div class="col-md-4 " style="display: flex; justify-content: space-between; align-items: center; margin-top: 25px;"> <button type="submit" style="width: 90%; height: auto;" class="btn btn-sm btn-primary">Submit</button> </div>
</div> </form>
<br>
<!-- ..................Styles and design for bar and PieChart............. -->
<div class="row" style="max-width: 100%; max-height: 100%; overflow: auto;">
<div class="col-md-12">
<div class="card sale-card" style="max-width: 150%; max-height: 150%; height: 100%; width: auto; overflow: auto;">
<div class="card-block" style="max-width: 100%; max-height: 90%; height: 90%; width: auto; overflow: auto;">
<svg id="chart-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMid meet" style="max-width: 100%; max-height: 100%;">
<foreignObject width="100%" height="100%">
<div id="totalpiechart" style="width: 50%; height: auto; float: left;"></div>
<div id="reopenpiechart" style="width: 50%; height: auto; float: left;"></div>
</foreignObject>
</svg>
</div>
<div class="card-block" style="max-width: 100%; max-height: 100%; height: 90%; width: auto; overflow: auto;">
<svg id="chart-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMid meet" style="max-width: 100%; max-height: 100%;">
<foreignObject width="100%" height="100%">
<div id="barchart" style="width: 50%; height: auto; float: left;"></div> </foreignObject>
</svg>
</div>
<div class="card-block" style="max-width: 100%; max-height: 100%; height: 100%; width: auto; overflow: auto;">
<svg id="chart-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMid meet" style="max-width: 100%; max-height: 100%;">
<foreignObject width="100%" height="100%"> <div id="reopenbarchart" style="width: 50%; height: auto; float: left;"></div>
</foreignObject>
</svg>
</div>
</div>
</div>
</div>
<!--.................... end ............. --> <br>
<!-- First Tile End --> </div> </div> </div>
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> </div>
<!-- Model Box -->
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
<script th:replace="~{fragments/modules/base/script :: script}"></script> <script src="/assets/node_modules/amcharts3/amcharts/amcharts.js"></script> <script src="/assets/node_modules/amcharts3/amcharts/serial.js"></script> <script src="/assets/node_modules/amcharts3/amcharts/themes/light.js"></script> <script src="/assets/node_modules/fullcalendar/dist/fullcalendar.min.js"></script> <script src="/assets/node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
<script>
//alert('Select departments to load data....');$(document).ready(function () { $.ajax({ url: '/pgr/dashboard', // Change this URL to your endpoint type: 'GET', success: function (data) { var dropdown = $('#DepartmentDropdown'); $.each(data, function (index, complaintdepartment) { dropdown.append($('<option></option>').attr('value', complaintdepartment.id).text(complaintdepartment.name)); }); }, //error: function () { // alert('Select departments to load data....'); // } });
});
function getByZone(){
alert("Wait for response to load data...") let DEPT_NAME = document.getElementById("zone").value; let DEPTID = document.getElementById("zonewithreopenbar").value; window.location.href='/dashboard?zone='+DEPT_NAME +'&zonewithreopenbar='+DEPTID; }
</script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" th:inline="javascript">
/*------------- Pie and bar chart-------------- */ var daysDataTotal = [ [(${ageanalysisdashboardList[0].DAYS_0_15_PEN})], [(${ageanalysisdashboardList[0].DAYS_16_30_PEN})], [(${ageanalysisdashboardList[0].DAYS_31_60_PEN})], [(${ageanalysisdashboardList[0].DAYS_61_90_PEN})], [(${ageanalysisdashboardList[0].DAYS_90_PEN})] ]; var daysDataReopen = [ [(${ageanalysisdashboardList[0].DAYS_0_15_REOPEN})], [(${ageanalysisdashboardList[0].DAYS_16_30_REOPEN})], [(${ageanalysisdashboardList[0].DAYS_31_60_REOPEN})], [(${ageanalysisdashboardList[0].DAYS_61_90_REOPEN})], [(${ageanalysisdashboardList[0].DAYS_90_REOPEN})] ]; /* var daysDataTotal = []; var daysDataReopen = []; if (ageanalysisdashboardList.length > 0) { daysDataTotal = [ [(${ageanalysisdashboardList[0].DAYS_0_15_PEN})], [(${ageanalysisdashboardList[0].DAYS_16_30_PEN})], [(${ageanalysisdashboardList[0].DAYS_31_60_PEN})], [(${ageanalysisdashboardList[0].DAYS_61_90_PEN})], [(${ageanalysisdashboardList[0].DAYS_90_PEN})] ]; daysDataReopen = [ [(${ageanalysisdashboardList[0].DAYS_0_15_REOPEN})], [(${ageanalysisdashboardList[0].DAYS_16_30_REOPEN})], [(${ageanalysisdashboardList[0].DAYS_31_60_REOPEN})], [(${ageanalysisdashboardList[0].DAYS_61_90_REOPEN})], [(${ageanalysisdashboardList[0].DAYS_90_REOPEN})] ]; } else { alert("No data available in the ageanalysis department."); } */
/* if (ageanalysisdashboardList.length === 0) { alert("No data available for this department. Please choose a different department."); } */
google.charts.load('current', {'packages': ['corechart']}); google.charts.setOnLoadCallback(drawPieCharts); // Use a new callback for pie charts google.charts.setOnLoadCallback(drawBarCharts); // Use a new callback for bar charts
function drawPieCharts() { console.log("Pie charts"); var dataTotal = google.visualization.arrayToDataTable([ ['Category', 'Count'], ['0-15 Days Pending', daysDataTotal[0]], ['16-30 Days Pending', daysDataTotal[1]], ['31-60 Days Pending', daysDataTotal[2]], ['61-90 Days Pending', daysDataTotal[3]], ['Above 90 Days Pending', daysDataTotal[4]], ]);
var dataReopen = google.visualization.arrayToDataTable([ ['Category', 'Count'], ['0-15 Days Reopen', daysDataReopen[0]], ['16-30 Days Reopen', daysDataReopen[1]], ['31-60 Days Reopen', daysDataReopen[2]], ['61-90 Days Reopen', daysDataReopen[3]], ['Above 90 Days Reopen', daysDataReopen[4]], ]); var optionspiepen = { 'title': 'Overall Pending Complaint Info ', 'legend': 'bottom', 'height': '500', 'width': '500', 'colors': ['#f4ca47', '#0ebce0', '#aae00e', '#053a4c', '#0ee0ad'] }; var optionspiere = { 'title': 'Overall Reopen Complaint Info ', 'legend': 'bottom', 'height': '500', 'width': '500', 'colors': ['#f4ca47', '#0ebce0', '#aae00e', '#053a4c', '#0ee0ad'] };
var piechartTotal = new google.visualization.PieChart(document.getElementById('totalpiechart')); var piechartReopen = new google.visualization.PieChart(document.getElementById('reopenpiechart'));
piechartTotal.draw(dataTotal, optionspiepen); piechartReopen.draw(dataReopen, optionspiere); }
<!-- Bar chart --> var zoneDatawithReopen = [ [(${zonewisedashboardList[0].NonBURSTLT})], [(${zonewisedashboardList[0].REOFGAR})], [(${zonewisedashboardList[0].ROAD})], [(${zonewisedashboardList[0].MOSQUITE})], [(${zonewisedashboardList[0].WATER})], [(${zonewisedashboardList[0].REOFDEB})], [(${zonewisedashboardList[0].TREE})], [(${zonewisedashboardList[0].DOGS})], [(${zonewisedashboardList[0].ENCMTN})], [(${zonewisedashboardList[0].POT})], [(${zonewisedashboardList[0].PTAX})], [(${zonewisedashboardList[0].OTHERS})], [(${zonewisedashboardList[0].TOTAL})] ]; var zoneDatawithoutReopen = [ [(${reopenzonewisedashboardList[0].NonBURSTLT})], [(${reopenzonewisedashboardList[0].REOFGAR})], [(${reopenzonewisedashboardList[0].ROAD})], [(${reopenzonewisedashboardList[0].MOSQUITE})], [(${reopenzonewisedashboardList[0].WATER})], [(${reopenzonewisedashboardList[0].REOFDEB})], [(${reopenzonewisedashboardList[0].TREE})], [(${reopenzonewisedashboardList[0].DOGS})], [(${reopenzonewisedashboardList[0].ENCMTN})], [(${reopenzonewisedashboardList[0].POT})], [(${reopenzonewisedashboardList[0].PTAX})], [(${reopenzonewisedashboardList[0].OTHERS})], [(${reopenzonewisedashboardList[0].TOTAL})] ];
function drawBarCharts() { console.log("Bar charts"); var zonewithReopen = google.visualization.arrayToDataTable([ ['Category', 'Count'], ['Street Light not burning', zoneDatawithReopen[0]], ['Removal of Garbage', zoneDatawithReopen[1]], ['Road Damaged', zoneDatawithReopen[2]], ['Mosquito Nuisance', zoneDatawithReopen[3]], ['Water Stagnation', zoneDatawithReopen[4]], ['Removal of Debries', zoneDatawithReopen[5]], ['Tree Fallen', zoneDatawithReopen[6]], ['Dog Menace', zoneDatawithReopen[7]], ['Encroachment', zoneDatawithReopen[8]], ['Potshole', zoneDatawithReopen[9]], ['Property Tax', zoneDatawithReopen[10]], ['Others', zoneDatawithReopen[11]], ['Total', zoneDatawithReopen[12]], ]); var zonewithoutReopen = google.visualization.arrayToDataTable([ ['Category', 'Count'], ['Street Light not burning', zoneDatawithoutReopen[0]], ['Removal of Garbage', zoneDatawithoutReopen[1]], ['Road Damaged', zoneDatawithoutReopen[2]], ['Mosquito Nuisance', zoneDatawithoutReopen[3]], ['Water Stagnation', zoneDatawithoutReopen[4]], ['Removal of Debries', zoneDatawithoutReopen[5]], ['Tree Fallen', zoneDatawithoutReopen[6]], ['Dog Menace', zoneDatawithoutReopen[7]], ['Encroachment', zoneDatawithoutReopen[8]], ['Potshole', zoneDatawithoutReopen[9]], ['Property Tax', zoneDatawithoutReopen[10]], ['Others', zoneDatawithoutReopen[11]], ['Total', zoneDatawithoutReopen[12]], ]); var optionszonewithreopencolumn = { 'title': 'Zonewise (With Reopen) Complaints ', 'legend': 'bottom', 'height': '500', 'width': '1100', "useLineColorForBulletBorder": true, 'colors': ['Green', 'Blue', 'Yellow', 'Brown', 'Pink', 'Orange', 'Purple', 'Grey', 'SkyBlue', 'LightGreen','Violet', 'Gold'], 'responsive':true };
var optionszonewithoutreopencolumn = { 'title': 'Zonewise (Without Reopen) Complaints ', 'legend': 'bottom', 'height': '500', 'width': '1100', "useLineColorForBulletBorder": true, 'colors': ['Red', 'Blue', 'Yellow', 'Brown', 'Pink', 'Orange', 'Purple', 'Grey', 'SkyBlue', 'LightGreen','Violet', 'Gold'], 'responsive':true }; var barchartReopen = new google.visualization.ColumnChart(document.getElementById('reopenbarchart')); var barchartwithReopen = new google.visualization.ColumnChart(document.getElementById('barchart')); barchartReopen.draw(zonewithoutReopen, optionszonewithoutreopencolumn); barchartwithReopen.draw(zonewithReopen, optionszonewithreopencolumn); }
</script>
</body></html>
|
