Skip to content

aa.gusti / eis

Go to a project
Commit 5aa0e9dd by Ari Agung Prasetiyo Committed by Ari Agung Prasetiyo
Options

update dashboard pcpd

1 parent 45f65ea8
Inline Side-by-side
Showing 1 changed file with 101 additions and 34 deletions
eispajak/views/templates/pcpd.pt
...@@ -19,6 +19,10 @@ ...@@ -19,6 +19,10 @@
border-radius: 10px; border-radius: 10px;
} }
.panel, .panel-heading {
border-radius: 10px;
}
.primary { .primary {
color: #1976d2; color: #1976d2;
} }
...@@ -62,11 +66,15 @@ ...@@ -62,11 +66,15 @@
.right-0 { .right-0 {
right: 0 !important; right: 0 !important;
} }
h1 {
font-size: 36px;
}
.chart-container { .main-panel .panel-body .odometer-formatting-mark{
position: relative; color :#648baf;
height: 20vh;
} }
</style> </style>
<div metal:fill-slot="content"> <div metal:fill-slot="content">
...@@ -74,16 +82,16 @@ ...@@ -74,16 +82,16 @@
<div class="col-md-12"> <div class="col-md-12">
<div class="panel panel-default text-center main-panel"> <div class="panel panel-default text-center main-panel">
<div class="panel-body"> <div class="panel-body">
<h4><b>Realisasi Pajak dan Retribusi Daerah</b></h4> <h1><b>Realisasi Pajak dan Retribusi Daerah</b></h1>
<div> <div>
<h5 id="current">Rab, 4 Jun 2025 - 14:11:05</h5> <h5 id="current">Rab, 4 Jun 2025 - 14:11:05</h5>
</div> </div>
<h4> <h4 style="font-size: 4.0em;">
<b>Rp. <b>Rp.
<h4 class="odometer bold" id="odometer"></h4> <h4 class="odometer bold" id="odometer"></h4>
</b> </b>
</h4> </h4>
<h5>1.067 KBM</h5> <h5><b>1.067 KBM</b></h5>
</div> </div>
</div> </div>
</div> </div>
...@@ -98,11 +106,10 @@ ...@@ -98,11 +106,10 @@
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class="chart-container"> <div class="chart-container">
<h4 class="primary"> <h2 class="primary">
<b>Rp. <h4 class="odometer bold primary" id="odometer2">0</h4></b> <b>Rp. <h2 class="odometer bold primary" id="odometer2" style="font-size: 2.5em;">0</h2></b>
</h4> </h2>
<h4></h4> <h3 class="primary bold">1.067 KBM</h3>
<h5 class="primary bold">1.067 KBM</h5>
</div> </div>
</div> </div>
</div> </div>
...@@ -123,23 +130,25 @@ ...@@ -123,23 +130,25 @@
</div> </div>
</div> </div>
<div class="row "> <div class="row ">
<div class="col-md-6"> <div class="col-md-2">
<select class="form-control"> <select class="form-control">
<option value="1">Harian</option> <option value="1">Harian</option>
<option value="2">Mingguan</option> <option value="2">Mingguan</option>
<option value="3">Bulanan</option> <option value="3">Bulanan</option>
</select> </select>
</div> </div>
<hr>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h3>Tren Realiasi(Rp)</h3> <h5 class="text-left bold">Tren Realiasi (Rp)
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class="chart-container text-center" style="position: relative; height:20vh; width: auto;"> <div class="chart-container text-center" style="position: relative;">
<canvas id="chartRealisasi"></canvas> <canvas id="chartRealisasi"></canvas>
</div> </div>
</div> </div>
...@@ -148,10 +157,12 @@ ...@@ -148,10 +157,12 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h3>Tren Realiasi Transaksi</h3> <h5 class="text-left bold">Tren Realiasi Transaksi
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class="chart-container text-center" style="position: relative; height:20vh; width: auto;"> <div class="chart-container text-center" style="position: relative;">
<canvas id="chartRealisasiCnt"></canvas> <canvas id="chartRealisasiCnt"></canvas>
</div> </div>
</div> </div>
...@@ -162,11 +173,12 @@ ...@@ -162,11 +173,12 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h3>Tren Realiasi Kumulatif (Rp)</h3> <h5 class="text-left bold">Tren Realiasi Kumulatif (Rp)
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class="chart-container text-center" style="position: relative; height:20vh; width: auto;"> <div class="chart-container text-center" style="position: relative;">
<canvas id="chartKumulatif" width="200" height="200"></canvas> <canvas id="chartKumulatif" width="200" height="200"></canvas>
</div> </div>
</div> </div>
...@@ -175,11 +187,12 @@ ...@@ -175,11 +187,12 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h3>Tren Realiasi Kumulatif Transaksi</h3> <h5 class="text-left bold">Tren Realiasi Kumulatif Transaksi
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class="chart-container text-center" style="position: relative; height:20vh; width: auto;"> <div class="chart-container text-center" style="position: relative;">
<canvas id="chartKumulatifCnt" width="200" height="200"></canvas> <canvas id="chartKumulatifCnt" width="200" height="200"></canvas>
</div> </div>
</div> </div>
...@@ -187,10 +200,10 @@ ...@@ -187,10 +200,10 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-12">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-body"> <div class="panel-body">
Basic panel example Realisasi Penerimaan Opsen PKB
</div> </div>
</div> </div>
</div> </div>
...@@ -208,6 +221,9 @@ ...@@ -208,6 +221,9 @@
<script metal:fill-slot="scripts"> <script metal:fill-slot="scripts">
$(document).ready(function () { $(document).ready(function () {
var ctx = document.getElementById('chartPie').getContext('2d'); var ctx = document.getElementById('chartPie').getContext('2d');
var canvas = document.getElementById('chartPie');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 3.38;
const pie_data = { const pie_data = {
labels: [ labels: [
'Pajak', 'Pajak',
...@@ -216,8 +232,8 @@ ...@@ -216,8 +232,8 @@
datasets: [{ datasets: [{
data: [300, 100], data: [300, 100],
backgroundColor: [ backgroundColor: [
'rgb(255, 99, 132)', '#16a75c', //'rgb(255, 99, 132)',
'rgb(54, 162, 235)' '#ffb900' // 'rgb(54, 162, 235)'
], ],
hoverOffset: 4 hoverOffset: 4
}] }]
...@@ -227,51 +243,101 @@ ...@@ -227,51 +243,101 @@
{ {
type: 'pie', type: 'pie',
data: pie_data, data: pie_data,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom'
}
}
}
}); });
var ctx = document.getElementById('chartRealisasi').getContext('2d'); var ctx = document.getElementById('chartRealisasi').getContext('2d');
var canvas = document.getElementById('chartRealisasi');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 3.38;
var realisasi_data = { var realisasi_data = {
labels: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'H7',], labels: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'H7',],
datasets: [{ datasets: [{
data: [100, 50, 300, 250, 100, 150, 200], label: 'Tren Realiasi',
borderColor: 'rgb(75, 192, 192)', data: [100, 50, 300, 250, 100, 150, 2000],
borderColor: '#16a75c',// 'rgb(75, 192, 192)',
backgroundColor: '#16a75c8a',
fill: true, fill: true,
tension: 0.1 tension: 0.5
}] }]
}; };
const realisasi_chart = new Chart(ctx, { const realisasi_chart = new Chart(ctx, {
type: 'line', type: 'line',
data: realisasi_data, data: realisasi_data,
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
grid: {
display: false,
drawBorder: false,
}
}
}
}
}); });
var ctx = document.getElementById('chartRealisasiCnt').getContext('2d'); var ctx = document.getElementById('chartRealisasiCnt').getContext('2d');
var canvas = document.getElementById('chartRealisasiCnt');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 3.38;
const realisasicnt_chart = new Chart(ctx, { const realisasicnt_chart = new Chart(ctx, {
type: 'line', type: 'line',
data: realisasi_data, data: realisasi_data,
options: {
responsive: true,
maintainAspectRatio: false,
}
}); });
var ctx = document.getElementById('chartKumulatif').getContext('2d'); var ctx = document.getElementById('chartKumulatif').getContext('2d');
var canvas = document.getElementById('chartKumulatif');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 3.38;
var kumulatif_data = { var kumulatif_data = {
labels: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'H7',], labels: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'H7',],
datasets: [{ datasets: [{
label: 'Realisasi Kumulatif',
data: [100, 150, 400, 650, 900, 950, 1100], data: [100, 150, 400, 650, 900, 950, 1100],
borderColor: 'rgb(75, 192, 192)', borderColor: '#ffb900', //'rgb(75, 192, 192)',
backgroundColor: '#debd68ad',
fill: true, fill: true,
tension: 0.1 tension: 0.5
}] }]
}; };
const kumulatif_chart = new Chart(ctx, { const kumulatif_chart = new Chart(ctx, {
type: 'line', type: 'line',
data: kumulatif_data, data: kumulatif_data,
options: {
responsive: true,
maintainAspectRatio: false,
}
}); });
var ctx = document.getElementById('chartKumulatifCnt').getContext('2d'); var ctx = document.getElementById('chartKumulatifCnt').getContext('2d');
var canvas = document.getElementById('chartKumulatifCnt');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 3.38;
const kumulatifcnt_chart = new Chart(ctx, { const kumulatifcnt_chart = new Chart(ctx, {
type: 'line', type: 'line',
data: kumulatif_data, data: kumulatif_data,
options: {
responsive: true,
maintainAspectRatio: false,
}
}); });
// $().datarefresh(); // $().datarefresh();
}); });
$.fn.datarefresh = function () { $.fn.datarefresh = function () {
...@@ -284,6 +350,7 @@ ...@@ -284,6 +350,7 @@
odometer2.innerHTML = 190647500; odometer2.innerHTML = 190647500;
d = new Date(); d = new Date();
current.innerHTML = d.toLocaleString(); current.innerHTML = d.toLocaleString();
current.style.fontWeight = 'bold';
} }
setTimeout(function () { setTimeout(function () {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!