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