|
|
<!DOCTYPE html><html lang="en" dir=""><html xmlns:th="http://www.thymeleaf.org"><head th:replace="~{fragments/modules/base/head :: head}"></head> <body> <!--[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"> <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>Makkalai Thedi Mayor Module</h5> <span>Makkalai Thedi Mayoral Petition and the Complaints Proceeding from It</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">Makkalai Thedi Mayor</li> <li class="breadcrumb-item active" aria-current="page">Dashboard</li> </ol> </nav> </div> </div> </div> <hr> <div class="row"> <!-- analytic card start - First Tile Start --> <div class="col-xl-3 col-md-6"> <a href="javascript:void(0)"> <div class="card social-card"> <div class="card-body text-center"> <h2 class="text-facebook mb-20"><i class="ik ik-layers"></i></h2> <h3 class="text-facebook fw-700">6,750</h3> <p>Total Petitions</p> <p class="mb-0 mt-15">View Petition List<i class="fas fa-arrow-right ml-5 f-10 text-facebook"></i></p> </div> </div> </a> </div> <div class="col-xl-3 col-md-6"> <a href="javascript:void(0)"> <div class="card social-card"> <div class="card-body text-center"> <h2 class="text-twitter mb-20"><i class="fas fa-comments"></i></h2> <h3 class="text-twitter fw-700">9,752</h3> <p>Petition Completed</p> <p class="mb-0 mt-15">View Completed List<i class="fas fa-arrow-right ml-5 f-10 text-twitter"></i></p> </div> </div> </a> </div> <div class="col-xl-3 col-md-6"> <a href="javascript:void(0)"> <div class="card social-card"> <div class="card-body text-center"> <h2 class="text-green mb-20"><i class="far fa-smile-beam"></i></h2> <h3 class="text-green fw-700">8,752</h3> <p>Petition Partially Completed</p> <p class="mb-0 mt-15">View Partially Completed<i class="fas fa-arrow-right ml-5 f-10 text-green"></i></p> </div> </div> </a> </div> <div class="col-xl-3 col-md-6"> <a href="javascript:void(0)"> <div class="card social-card"> <div class="card-body text-center"> <h2 class="text-red mb-20"><i class="far fa-frown"></i></h2> <h3 class="text-red fw-700">952</h3> <p>Petitions Pending</p> <p class="mb-0 mt-15">View Pending List<i class="fas fa-arrow-right ml-5 f-10 text-red"></i></p> </div> </div> </a> </div> <!-- First Tile End --> <div class="col-md-12"> <div class="card sale-card"> <div class="card-header"> <h3>Deals Analytics</h3> </div> <div class="card-block"> <div id="deal-analytic-chart" class="chart-shadow" style="height:300px"></div> </div> </div> </div> <div class="col-md-12"> <div class="card"> <div class="card-header"> <h3>Page Title</h3> </div> <div class="card-block"> </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="node_modules/amcharts3/amcharts/amcharts.js"></script> <script src="node_modules/amcharts3/amcharts/serial.js"></script> <script src="node_modules/amcharts3/amcharts/themes/light.js"></script> <script> var chartData = []; var currentDate = new Date(); var currentMonth = currentDate.getMonth() + 1; var currentYear = currentDate.getFullYear(); var daysInMonth = new Date(currentYear, currentMonth, 0).getDate(); // Generate random data for each date in the current month for (var i = 1; i <= daysInMonth; i++) { var randomValue1 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want var randomValue2 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want var dateString = currentYear + '-' + (currentMonth < 10 ? '0' : '') + currentMonth + '-' + (i < 10 ? '0' : '') + i; var dataPoint = { "date": dateString, "market1": randomValue1, "market2": randomValue2 }; chartData.push(dataPoint); } // deal-analytic-chart var chart = AmCharts.makeChart("deal-analytic-chart", { "type": "serial", "theme": "light", "dataDateFormat": "YYYY-MM-DD", "precision": 2, "valueAxes": [{ "id": "v1", "position": "left", "autoGridCount": false, "labelFunction": function(value) { return "$" + Math.round(value) + "M"; } }, { "id": "v2", "gridAlpha": 0, "autoGridCount": false }], "graphs": [{ "id": "g1", "valueAxis": "v2", /*"bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 8, "hideBulletsCount": 50, "lineThickness": 3, "lineColor": "#2ed8b6",*/ "lineColor": "#2ed8b6", "fillColors": "#2ed8b6", "type": "column", "fillAlphas": 0.3, "columnWidth": 0.5, "title": "Positive Feedback", "useLineColorForBulletBorder": true, "valueField": "market1", "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>" }, { "id": "g2", "valueAxis": "v2", //"bullet": "round", //"bulletBorderAlpha": 1, //"bulletColor": "#FFFFFF", //"bulletSize": 8, //"hideBulletsCount": 50, //"lineThickness": 3, //"lineColor": "#e95753", "lineColor": "#F22613", "fillColors": "#F22613", "type": "column", "fillAlphas": 0.3, "columnWidth": 0.5, "title": "Negative Feedback", "useLineColorForBulletBorder": true, "valueField": "market2", "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>" }], "chartCursor": { "pan": true, "valueLineEnabled": true, "valueLineBalloonEnabled": true, "cursorAlpha": 0, "valueLineAlpha": 0.2 }, "categoryField": "date", "categoryAxis": { "parseDates": true, "dashLength": 1, "minorGridEnabled": true }, "legend": { "useGraphSettings": true, "position": "top" }, "balloon": { "borderThickness": 1, "shadowAlpha": 0 }, "dataProvider": chartData, }); </script> </body></html>
|
