You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
237 lines
11 KiB
237 lines
11 KiB
<!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>1913 Tax Collection Module</h5>
|
|
<span>Tax collection appication for senior citizen and disability users</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">1913 Tax Collection</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>Assets</p>
|
|
<p class="mb-0 mt-15">View Assets 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>Feedbacks</p>
|
|
<p class="mb-0 mt-15">View Feedbacks 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>Positive Feedbacks</p>
|
|
<p class="mb-0 mt-15">View Positive Feedbacks<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>Negative Feedbacks</p>
|
|
<p class="mb-0 mt-15">View Negative Feedbacks<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>
|