????
Your IP : 216.73.216.168
<% layout('./layouts/userLayout.eta') %>
<link rel="stylesheet" href="/css/plugin/c3.min.css">
<div class="content">
<div class="page-inner">
<div class="page-header">
<h4 class="page-title">Trang chính</h4>
<ul class="breadcrumbs">
<li class="nav-home"><a href="/"><i class="flaticon-home"></i></a></li>
<li class="separator"><i class="flaticon-right-arrow"></i></li>
<li class="nav-item">Trang chính</li>
</ul>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<div class="card-title text-center">ĐỒ THỊ PHÔNG</div>
</div>
<div class="card-body">
<div id="fond-chart" class="w-100" style="min-height: 300px"></div>
<div class="fond-chart__legend"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<div class="card-title text-center">SỐ LIỆU PHÔNG</div>
</div>
<div class="card-body">
<table id="fond-table" class="table table-bordered table-striped table-hover w-100">
<thead>
<tr>
<th>Số</th>
<th>Tên phông</th>
<th>Tổng hồ sơ</th>
<th>Tổng văn bản</th>
<th>Tổng số trang</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/js/plugin/d3.min.js"></script>
<script type="text/javascript" src="/js/plugin/c3.min.js"></script>
<script type="text/javascript">
$(function () {
d3.json('/bieudo/phong').then(function (json) {
$('#fond-table').DataTable({
data: json,
ordering: false,
dom: 'tp',
language: {
url: "/js/plugin/datatables/Vietnamese.json",
thousands: '.'
},
columns: [
{ data: 'FondNumber', className: 'text-center' },
{ data: 'FondName', className: 'text-justify' },
{ data: 'tongSoHS', className: 'text-center', render: function (data) { return data ? data.toLocaleString('vi-VN') : 0 } },
{ data: 'tongSoVB', className: 'text-center', render: function (data) { return data ? data.toLocaleString('vi-VN') : 0 } },
{ data: 'PaperDigital', className: 'text-center', render: function (data) { return data ? data.toLocaleString('vi-VN') : 0 } }
]
});
var pageData = {};
var docData = {};
var fondCodes = [];
for (var i = 0; i < json.length; i++) {
fondCodes.push(json[i]['FondCode']);
pageData[json[i]['FondCode']] = json[i]['PaperDigital'];
docData[json[i]['FondCode']] = json[i]['tongSoVB'];
}
var fondChart = c3.generate({
data: {
json: [pageData],
keys: { value: fondCodes },
type: 'donut'
},
donut: { width: 80 },
bindto: '#fond-chart',
tooltip: {
format: {
name: function (d) { return json.find(f => f.FondCode === d)?.FondName; },
value: function (d) { return d.toLocaleString('vi-VN') + ' trang' }
}
}
});
});
})
</script>