|
|
<!DOCTYPE html><html lang="en" dir=""><html xmlns:th="http://www.thymeleaf.org"><head th:replace="~{fragments/modules/base/head :: head}"></head>
<style>.chart-container { width: 100%; height: 350px; font-size: 12px;}
@media (max-width: 768px) { .chart-container { height: 200px; /* Adjust height for mobile view */ }}.highlight-red{ color:red;}</style>
<body><link rel="stylesheet" href="/assets/node_modules/amcharts3/amcharts/plugins/export/export.css" type="text/css" media="all" /><!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p><![endif]-->
<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>CM Works</h5> <span>CM Works TradeLicense</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">TradeLicense</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> <div class="row"> <div class="col-md-12"> <div class="card sale-card"> <div class="card-header"> <h3> <i class="fas fa-chart-pie pr-2"></i><b>Trade Analysis:</b> </h3> </div> <div class="card-block" style="text-align:center;"> <div class="col-sm-12 d-flex justify-content-center align-items-center mt-10 mb-30"> <div class="row"> <div class="col-sm-12 col-lg-6 mb-3" > <label class="pr-2" for="zone1" style="font-size:large;margin-bottom: 0px;"><b>Select Zone:</b></label> <select class="form-select custom-select" name="zone1" id="zone1" onchange="getDiv(this);"> <option>---Select Zone---</option> </select> </div> <div class="col-sm-12 col-lg-6"> <label for="division" class="pr-2" style="font-size:large;margin-bottom: 0px;"><b>Select Ward:</b></label> <select id="division" name="division" class="form-select custom-select"> <option value="All">Overall Zone Wise</option> <!-- Add options dynamically --> </select> </div> </div> </div> <div class="col-12"> <h4><b><span id="license_counts" class="highlight-red"></span> </b></h4> <h3 id="load_card" style="font-size:14px"></h3> <div id="newLicChart" class="chart-container" style= "height:450px; width:100%;"> </div> </div> <hr> <div class="col-md-12"> <h4><b><span id="license_amounts" class="highlight-red"></span> </b></h4> <div id="amtChart" class="chart-container" style= "height:600px; width:100%;"></div> </div> </div> </div> </div> </div> </div> </div> <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> </div> </div>
<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/plugins/export/export.min.js"></script> <script src="/assets/node_modules/amcharts3/amcharts/pie.js"></script> <script src="/assets/node_modules/amcharts3/amcharts/themes/light.js"></script>
<script src="/assets/node_modules/amcharts3/amcharts/plugins/responsive/responsive.js"></script> <script src="/assets/node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
<script> var loading_text_msg = getLoadingMessage(); const loading = $("#load_card"); //This function To show the selected zone and division display in UI part function updateChartTitles() { const wardSelect = document.getElementById("division"); const selectedWard = wardSelect.options[wardSelect.selectedIndex].text;
const lic_count = document.getElementById("license_counts"); const lic_amt = document.getElementById("license_amounts");
lic_count.innerHTML = selectedWard; lic_amt.innerHTML = selectedWard; }
var initialData = []; getZoneNo();
updateChart();
$("#zone1").change(function() { getDiv(this); }); $("#division").change(function () { filterAndRenderCharts(); //updateChart(); });
//Getting Zone No function getZoneNo() {
$.ajax({ type: "GET", url: '/gcc/api/works/getZoneNo', dataType: 'json', success: function (bodyMessage) { var tempJson = bodyMessage['ZoneDetailsResult']; //alert("tempJson---:"+tempJson); for (var i = 0; i < tempJson.length; i++) { var tempJsonValue = tempJson[i]['ZoneId']; //var tempJsonValue = tempJson[i]['ZoneName'].replace('N', ''); var tempJsonLabel = tempJson[i]['ZoneName'].replace('N', ''); $('#zone1').append("<option value='" + tempJsonValue + "'>" + tempJsonLabel + "</option>"); } }, error: function (e, ts, et) { // alert(ts) }
}); }
//Getting Div function getDiv($this) {
$('#division').empty(); // Clear existing options $('#division').append("<option value='All'>OverAll Zone Wise</option>"); // Add 'All' option var zoneId = $this.value; //var zone = $this.value; //alert("zone---:"+zone); $.ajax({ type: "GET", url: '/gcc/api/works/getDiv', data: {'zoneId': zoneId}, dataType: 'json', success: function (bodyMessage) { var tempJson = bodyMessage['DivisionDetailsResult']; for (var i = 0; i < tempJson.length; i++) { var tempJsonValue = tempJson[i]['DivisionName']; //var tempJsonValue = tempJson[i]['DivisionId']; var tempJsonLabel = tempJson[i]['DivisionName']; $('#division').append("<option value='" + tempJsonValue + "'>" + tempJsonLabel + "</option>"); } }, error: function (e, ts, et) { // alert(ts) } }); }
function updateChart() { const divisionName = $("#division").val(); //console.log("Selected region:", divisionName); updateChartTitles(); // Show loading animation loading.html(searchinfo("<b>" + loading_text_msg + "</b>")); call_loading('newLicChart', 'amtChart', 'start');
// Clear existing charts $("#newLicChart").html(""); $("#amtChart").html("");
$.ajax({ url: '/gcc/api/works/getTradelicenseReports', // Corrected endpoint URL type: 'GET', data: { divisionName: divisionName }, // Send regionName parameter success: function(response) { //console.log('Data from API:', response); initialData = response; filterAndRenderCharts(); //renderCharts(response); }, error: function(error) { console.error("Error fetching data:", error); // Hide loading animation on error loading.html(""); call_loading('newLicChart', 'amtChart', 'stop'); } });
}
function filterAndRenderCharts() { updateChartTitles(); const divisionName = $("#division").val(); //console.log("selected division",divisionName); let filteredData = initialData;
if (divisionName !== 'All') { filteredData = initialData.filter(item => item.WARD === divisionName); }
renderCharts(filteredData); } function formatValue(value) { if (value >= 1e9) { return (value / 1e9).toFixed(2) + ' Billion'; } else if (value >= 1e7) { return (value / 1e7).toFixed(2) + ' Crore'; } else if (value >= 1e6) { return (value / 1e6).toFixed(2) + ' Million'; } else if (value >= 1e5) { return (value / 1e5).toFixed(2) + ' Lakh'; } else if (value >= 1e4) { return (value / 1e4).toFixed(2) + ' Thousand'; } return value.toFixed(2); }
function renderCharts(data) {
if (data.length === 1 && data[0].REGION === 'All') { // Calculate total sum for all regions const totalNewLic = data.reduce((sum, item) => sum + item.NEW_LIC, 0); const totalRenWithPenalty = data.reduce((sum, item) => sum + item.REN_WITH_PENALTY, 0); const totalRenWithoutPenalty = data.reduce((sum, item) => sum + item.REN_WITH_OUT_PENALTY, 0); const totalNonRenewed = data.reduce((sum, item) => sum + item.NON_RENEWED, 0); const totalNewLicAmt = data.reduce((sum, item) => sum + item.NEW_LIC_AMT, 0); const totalRenWithPenaltyAmt = data.reduce((sum, item) => sum + item.REN_WITH_PENALTY_AMT, 0); const totalRenWithoutPenaltyAmt = data.reduce((sum, item) => sum + item.REN_WITH_OUT_PENALTY_AMT, 0); const totalNonRenewedAmt = data.reduce((sum, item) => sum + item.NONRNWDCNTAMT, 0);
// Create chart data for 'total counts' const collectionsChartData = [{ //zone: 'All', zone: divisionName === 'All' ? 'All' : divisionName, newLic: totalNewLic, renWithPenalty: totalRenWithPenalty, renWithoutPenalty: totalRenWithoutPenalty, nonRenewed: totalNonRenewed }];
// Create chart data for 'total amounts' const amountsChartData = [{ //zone: 'All', zone: divisionName === 'All' ? 'All' : divisionName, newLicamt: totalNewLicAmt, renWithPenaltyamt: totalRenWithPenaltyAmt, renWithoutPenaltyamt: totalRenWithoutPenaltyAmt, nonRenewedamt: totalNonRenewedAmt }];
// Render charts renderColumnChart("newLicChart", collectionsChartData); renderColumnChartAmt("amtChart", amountsChartData, );
} else { // Group data by zone and calculate totals const zoneData = data.reduce((acc, item) => { if (!acc[item.ZONE]) { acc[item.ZONE] = { newLic: 0, renWithPenalty: 0, renWithoutPenalty: 0, nonRenewed: 0, newLicamt: 0, renWithPenaltyamt: 0, renWithoutPenaltyamt: 0, nonRenewedamt: 0 }; } acc[item.ZONE].newLic += item.NEW_LIC; acc[item.ZONE].renWithPenalty += item.REN_WITH_PENALTY; acc[item.ZONE].renWithoutPenalty += item.REN_WITH_OUT_PENALTY; acc[item.ZONE].nonRenewed += item.NON_RENEWED; acc[item.ZONE].newLicamt += item.NEW_LIC_AMT; acc[item.ZONE].renWithPenaltyamt += item.REN_WITH_PENALTY_AMT; acc[item.ZONE].renWithoutPenaltyamt += item.REN_WITH_OUT_PENALTY_AMT; acc[item.ZONE].nonRenewedamt += item.NONRNWDCNTAMT; return acc; }, {});
// Convert to array format for charts const collectionsChartData = Object.keys(zoneData).map(zone => ({ zone: zone, newLic: zoneData[zone].newLic, renWithPenalty: zoneData[zone].renWithPenalty, renWithoutPenalty: zoneData[zone].renWithoutPenalty, nonRenewed: zoneData[zone].nonRenewed }));
const amountsChartData = Object.keys(zoneData).map(zone => ({ zone: zone, newLicamt: zoneData[zone].newLicamt, renWithPenaltyamt: zoneData[zone].renWithPenaltyamt, renWithoutPenaltyamt: zoneData[zone].renWithoutPenaltyamt, nonRenewedamt: zoneData[zone].nonRenewedamt }));
// Render charts renderColumnChart("newLicChart", collectionsChartData); renderColumnChartAmt("amtChart", amountsChartData, ); } loading.html(""); call_loading('newLicChart', 'amtChart', 'stop'); }
function renderColumnChart(elementId, chartData) { AmCharts.makeChart(elementId, { "type": "serial", "theme": "light", "dataProvider": chartData, "startEffect":"easeOutSine", "startDuration": 1, "valueAxes": [{ "id": "v1", "position": "left", "autoGridCount": false, "labelFunction": function (value) { return value; } }], "graphs": [ { "id": "g1", "valueAxis": "v1", "lineColor": "#2ed8b6", "fillColors": "#2ed8b6", "type": "column", "fillAlphas": 0.8, "title": "New License", "valueField": "newLic", "labelPosition":"right", "labelRotation": 270, "labelText":"[[[[value]]]]", "balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>", }, { "id": "g2", "valueAxis": "v1", "lineColor": "#F22613", "fillColors": "#F22613", "type": "column", "fillAlphas": 0.8, "title": "Rent With Penalty", "valueField": "renWithPenalty", "labelPosition":"right", "labelRotation": 270, "labelText":"[[[[value]]]]", "balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>", }, { "id": "g3", "valueAxis": "v1", "lineColor": "#FFC107", "fillColors": "#FFC107", "type": "column", "fillAlphas": 0.8, "title": "Rent Without Penalty", "valueField": "renWithoutPenalty", "labelPosition":"top", "labelRotation": 270, "labelText":"[[[[value]]]]", "balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>", }, { "id": "g4", "valueAxis": "v1", "lineColor": "#8E44AD", "fillColors": "#8E44AD", "type": "column", "fillAlphas": 0.8, "title": "Non Renewed", "valueField": "nonRenewed", "labelPosition":"right", "labelRotation": 270, "labelText":"[[[[value]]]]", "balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>", } ], "chartCursor": { "pan": true, "valueLineEnabled": true, "valueLineBalloonEnabled": true, "cursorAlpha": 0, "valueLineAlpha": 0.2 }, "categoryField": "zone", "categoryAxis": { "gridPosition": "start", "axisAlpha": 0, "tickLength": 0 }, "legend": { "useGraphSettings": true, "position": "bottom", "spacing":350, "markerType":"diamond" }, "balloon": { "borderThickness": 2, "shadowAlpha": 0 }, "export": { "enabled": true, "position":"top-right" }, "titles": [{ "text": "Trade License collection Chart", "size": 20 }], }); } function renderColumnChartAmt(elementId,chartData) { AmCharts.makeChart(elementId, { "type": "serial", "theme": "light", "dataProvider": chartData, "startEffect":"easeOutSine", "startDuration": 1, "valueAxes": [{ "id": "v1", "position": "left", "gridAlpha":0, "autoGridCount": false, "labelFunction": function (value) { return formatValue(value); } }], "graphs": [ { "id": "g1", "valueAxis": "v1", "lineColor": "#2ed8b6", "fillColors": "#2ed8b6", "type": "column", "fillAlphas": 0.8, //"columnWidth":0.9, "title": "New License Amt", "valueField": "newLicamt", "labelText":"[[[[value]]]]", "balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>", "labelFunction": function(graphDataItem) { return formatValue(graphDataItem.values.value); }, "labelPosition":"right", "labelRotation": 270, "balloonFunction": function(graphDataItem, graph) { return "<b>" + graph.title + "</b><br />" + formatValue(graphDataItem.values.value); } }, { "id": "g2", "valueAxis": "v1", "lineColor": "#F22613", "fillColors": "#F22613", "type": "column", "fillAlphas": 0.8, //"columnWidth":0.9, "title": "Rent With Penalty Amt", "valueField": "renWithPenaltyamt", "labelText":"[[[[value]]]]", "labelPosition":"right", "labelFunction": function(graphDataItem) { return formatValue(graphDataItem.values.value); }, "labelRotation": 270, "balloonFunction": function(graphDataItem, graph) { return "<b>" + graph.title + "</b><br />" + formatValue(graphDataItem.values.value); }, "balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>", }, { "id": "g3", "valueAxis": "v1", "lineColor": "#FFC107", "fillColors": "#FFC107", "type": "column", "fillAlphas": 0.8, // "columnWidth":0.9, "title": "Rent Without Penalty Amt", "valueField": "renWithoutPenaltyamt", "labelText":"[[[[value]]]]", "labelPosition":"top", "balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>", "labelFunction": function(graphDataItem) { return formatValue(graphDataItem.values.value); }, "labelRotation": 270, "balloonFunction": function(graphDataItem, graph) { return "<b>" + graph.title + "</b><br />" + formatValue(graphDataItem.values.value); } }, { "id": "g4", "valueAxis": "v1", "lineColor": "#8E44AD", "fillColors": "#8E44AD", "type": "column", "fillAlphas": 0.8, //"columnWidth":0.9, "title": "Non Renewed Amt", "valueField": "nonRenewedamt", "labelText":"[[[[value]]]]", "labelPosition":"right", "balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b> ([[[[percents]]]]%)</span>", "labelFunction": function(graphDataItem) { return formatValue(graphDataItem.values.value); }, "labelRotation": 270, "balloonFunction": function(graphDataItem, graph) { return "<b>" + graph.title + "</b><br />" + formatValue(graphDataItem.values.value); } } ], //"rotate":true, "chartCursor": { "pan": true, "valueLineEnabled": true, "valueLineBalloonEnabled": true, "cursorAlpha": 0, "valueLineAlpha": 0.2 }, "categoryField": "zone", "categoryAxis": { "gridPosition": "start", //"axisAlpha": 0, "tickLength": 0 }, "legend": { "useGraphSettings": true, "position": "bottom", "spacing":350, "markerType":"diamond", "valueWidth":100, "labelWidth":100 }, "balloon": { "borderThickness": 2, "shadowAlpha": 0 }, "export": { "enabled": true, "position":"top-right" }, "titles": [{ "text": "Trade License Amount Chart", "size": 20 }], }); }
</script></body></html>
|