Skip to content

aa.gusti / eis

Go to a project
Commit 85281360 by aa.gustiana@gmail.com
Options

Perbaikan HasilPertemuan 4 Juli 2025

1 parent 5b2fc957
Inline Side-by-side
Showing 6 changed files with 746 additions and 25 deletions
eispajak/models/payment.py
......@@ -208,6 +208,60 @@ class PaymentWEBR(PCBase, CommonModel):
return qry
class TargetJNS(PCBase, CommonModel):
__tablename__ = 'target_jenis'
__table_args__ = {'schema': 'public'}
id = Column(Integer, primary_key=True)
created = Column(Date, nullable=False)
updated = Column(Date, nullable=False)
kode = Column(String(32))
nama = Column(String(128))
status = Column(SmallInteger)
class Targets(PCBase, DefaultModel):
__tablename__ = 'targets'
__table_args__ = {'schema': 'public'}
id = Column(Integer, primary_key=True)
created = Column(Date, nullable=False)
updated = Column(Date, nullable=False)
kode = Column(String(32))
nama = Column(String(128))
tahun = Column(Integer)
jenis = Column(Integer)
t_anggaran = Column(BigInteger)
t_perubahan = Column(BigInteger)
m01 = Column(BigInteger)
m02 = Column(BigInteger)
m03 = Column(BigInteger)
m04 = Column(BigInteger)
m05 = Column(BigInteger)
m06 = Column(BigInteger)
m07 = Column(BigInteger)
m08 = Column(BigInteger)
m09 = Column(BigInteger)
m10 = Column(BigInteger)
m11 = Column(BigInteger)
m12 = Column(BigInteger)
status = Column(SmallInteger)
@classmethod
def query_from(cls, columns=None, filters=None, db_session=PCDBSession):
query = db_session.query().select_from(cls)
if columns:
for c in columns:
query = query.add_columns(c)
if filters:
filter_expressions = []
for d in filters:
field = getattr(cls, d[0])
operator = d[1]
value = d[2]
filter_expressions.append(field.op(operator)(value))
query = query.filter(
*[e for i, e in enumerate(filter_expressions) if e is not None])
return query
def get_connection(settings):
url = 'pcpd.url' in settings and settings['pcpd.url'] and 'pcpd.' or 'sqlalchemy.'
......
eispajak/scripts/data/routes.csv
......@@ -2,7 +2,7 @@ kode,nama,path,status,type,is_menu,parent_id,file_name,class_name,func_name,perm
eis-pcpd,PCPD,/eis/pcpd,1,0,0
eis-pcpd-act,PCPD Act,/eis/pcpd/{act}/act,1,0
eis-pajak,Pajak,#,1,0,1
eis-pajak-kumulatif,Pajak,/eis/pajak,1,0,1,eis-pajak,pcpd,Views,view_pajak,,pcpd.pt
eis-pajak-kumulatif,Pajak,/eis/pajak,1,0,1,eis-pajak,pcpd,Views,view_pajak,,pcpd_pajak.pt
eis-pbb,PBB,/eis/pbb,1,0,1,eis-pajak,pcpd,Views,view_pbb,eis,pbb.pt
eis-bphtb,BPHTB,/eis/bphtb,1,0,1,eis-pajak,pcpd,Views,view_bphtb,eis,pcpd.pt
eis-hotel,Hotel,/eis/hotel,1,0,1,eis-pajak,pcpd,Views,view_hotel,eis,pcpd.pt
......
eispajak/views/pcpd.py
......@@ -8,7 +8,7 @@ from ..models.eis import Eis, Chart, ChartItem, Slide
from datatables import ColumnDT, DataTables
from sqlalchemy import func, and_, String
from sqlalchemy.sql.expression import cast
from ..models.payment import PaymentPBB, PaymentPAD, PaymentBPHTB, PaymentWEBR
from ..models.payment import PaymentPBB, PaymentPAD, PaymentBPHTB, PaymentWEBR, Targets
from opensipkd.pbb.monitoring.models import PembayaranSppt, Kecamatan, Kelurahan, Sppt
from datetime import timedelta
logger = logging.getLogger(__name__)
......@@ -27,6 +27,97 @@ PAD_TYP = {
"pbb": ["PBB", "BPHTB"]
}
jenis_pajak = {
"opsen": {
"kode": "41012",
"nama": "Opsen",
"subs": [
{"kode": "410120010001",
"nama": "Opsen PKB"},
{"kode": "410121010001",
"nama": "Opsen BBNKB"},
]},
"pbb": {
"kode": "410115",
"nama": "PBBP2"},
"bphtb": {
"kode": "410116",
"nama": "BPHTB-Pemindahan Hak"},
"resto": {
"kode": "41011901",
"nama": "PBJT Restoran",
"subs": [
{"kode": "410119010001",
"nama": "PBJT-Restoran"},
{"kode": "410119010002",
"nama": "PBJT-Penyedia Jasa Boga atau Katering"},
{"kode": "410119020001",
"nama": "PBJT-Konsumsi Tenaga Listrik dari Sumber Lain"},
]},
"ppju": {
"kode": "41011902",
"nama": "PBJT-Tenaga Listrik",
"subs": []},
"hotel": {
"kode": "41011903",
"nama": "PBJT Jasa Perhotelan",
"subs": [
{"kode": "410119030001", "nama": "PBJT-Hotel"},
{"kode": "410119030003", "nama": "PBJT-Vila"},
{"kode": "410119030007", "nama": "PBJT-Wisma Pariwisata"},
]},
"parkir": {
"kode": "41011904",
"nama": "PBJT-Penyediaan atau Penyelenggaraan Tempat Parkir"},
"hiburan": {
"kode": "41011905",
"nama": "PBJT-Jasa Kesenian dan Hiburan",
"subs": [
{"kode": "410119050001",
"nama": "PBJT-Tontonan Film atau Bentuk Tontonan Audio Visual Lainnya yang Dipertontonkan secara Langsung di Suatu Lokasi Tertentu"},
{"kode": "410119050002",
"nama": "PBJT-Pergelaran Kesenian, Musik, Tari, dan/atau Busana"},
{"kode": "410119050007",
"nama": "PBJT-Pacuan Kuda dan Perlombaan Kendaraan Bermotor"},
{"kode": "410119050008",
"nama": "PBJT-Permainan Ketangkasan"},
{"kode": "410119050009",
"nama": "PBJT-Olahraga Permainan dengan Menggunakan Tempat/Ruang dan/atau Peralatan dan Perlengkapan untuk Olahraga dan Kebugaran"},
{"kode": "410119050010",
"nama": "PBJT-Rekreasi Wahana Air, Wahana Ekologi, Wahana Pendidikan, Wahana Budaya, Wahana Salju, Wahana Permainan, Pemancingan, Agrowisata, dan Kebun Binatang"},
{"kode": "410119050012",
"nama": "PBJT-Distkotek, Karaoke, Kelab Malam, Bar, dan Mandi Uap/Spa"},
]},
"reklame": {
"kode": "410109",
"nama": "Pajak Reklame",
"subs": [
{"kode": "410109010001",
"nama": "Pajak Reklame Papan/Billboard/Videotron/Megatron"},
{"kode": "410109020001", "nama": "Pajak Reklame Kain"},
{"kode": "410109030001",
"nama": "Pajak Reklame Melekat/Stiker"},
{"kode": "410109050001", "nama": "Pajak Reklame Berjalan"},
]},
"atd": {
"kode": "410112",
"nama": "Pajak Air Tanah"},
"walet": {
"kode": "410113",
"nama": "Pajak Sarang Burung Walet "},
"minerba": {
"kode": "410114",
"nama": "Pajak Mineral Bukan Logam dan Batuan",
"subs": [
{"kode": "410114230001", "nama": "Pajak Pasir dan Kerikil"},
{"kode": "410114300001", "nama": "Pajak Tanah Liat"},
]}
}
class Views(BaseView):
@view_config(route_name='eis-pcpd', renderer='templates/pcpd.pt',
......@@ -145,6 +236,22 @@ class Views(BaseView):
# "monthlyAcc": monthlyAcc,
# "monthlyAccTrx": monthlyAccTrx,
# }
def get_targets(self, kode=None):
targets = Targets.query_from([func.sum(Targets.t_anggaran).label("murni"),
func.sum(Targets.t_perubahan).label("perubahan"),]).filter(
Targets.tahun == self.ses['tahun'],
)
if kode:
targets = targets.filter(
Targets.kode.ilike(jenis_pajak[kode]["kode"]+'%'))
targets = targets.first()
if targets:
target = targets.perubahan or targets.murni or 0
else:
target = 0
target = float(target)
return target
def get_pbb_data(self):
if log.root.level == logging.DEBUG:
today = datetime.strptime('2025-06-05', "%Y-%m-%d")
......@@ -178,6 +285,9 @@ class Views(BaseView):
week, weekTrx, weekly, weeklyTrx, weeklyAcc, weeklyAccTrx = \
self.get_daily_data(PembayaranSppt, field, None, filter_exp)
ytd_target = self.get_targets("pbb")
ytd_persen = round(ytd/ytd_target * 100, 2) if ytd_target > 0 else 0
return {"today": amt,
"trx": trx,
"daily": daily,
......@@ -197,6 +307,8 @@ class Views(BaseView):
"monthlyTrx": monthlyTrx,
"monthlyAcc": monthlyAcc,
"monthlyAccTrx": monthlyAccTrx,
"ytdTarget": ytd_target,
"ytdPersen": ytd_persen,
}
def get_bphtb_data(self):
......@@ -229,7 +341,8 @@ class Views(BaseView):
today-timedelta(weeks=6), today)
week, weekTrx, weekly, weeklyTrx, weeklyAcc, weeklyAccTrx = \
self.get_daily_data(PaymentBPHTB, field, None, filter_exp)
ytd_target = float(self.get_targets("bphtb"))
ytd_persen = round(ytd/ytd_target * 100, 2) if ytd_target > 0 else 0
return {"today": amt,
"trx": trx,
"daily": daily,
......@@ -249,6 +362,8 @@ class Views(BaseView):
"monthlyTrx": monthlyTrx,
"monthlyAcc": monthlyAcc,
"monthlyAccTrx": monthlyAccTrx,
"ytdTarget": ytd_target,
"ytdPersen": ytd_persen,
}
def get_pad_data(self, typ):
......@@ -283,7 +398,8 @@ class Views(BaseView):
today-timedelta(weeks=6), today)
week, weekTrx, weekly, weeklyTrx, weeklyAcc, weeklyAccTrx = \
self.get_daily_data(PaymentPAD, field, None, filter_exp, typ)
ytd_target = float(self.get_targets(typ))
ytd_persen = round(ytd/ytd_target * 100, 2) if ytd_target > 0 else 0
return {"today": amt,
"trx": trx,
"daily": daily,
......@@ -303,6 +419,8 @@ class Views(BaseView):
"monthlyTrx": monthlyTrx,
"monthlyAcc": monthlyAcc,
"monthlyAccTrx": monthlyAccTrx,
"ytdTarget": ytd_target,
"ytdPersen": ytd_persen,
}
def get_webr_data(self):
......@@ -359,6 +477,7 @@ class Views(BaseView):
"monthlyTrx": monthlyTrx,
"monthlyAcc": monthlyAcc,
"monthlyAccTrx": monthlyAccTrx,
"target": 0,
}
def loop_data(self, src, dst):
......@@ -427,15 +546,20 @@ class Views(BaseView):
self.loop_data(pdl["weeklyTrx"], weeklyTrx)
self.loop_data(pdl["weeklyAcc"], weeklyAcc)
self.loop_data(pdl["weeklyAccTrx"], weeklyAccTrx)
ytd_target = float(pbb.get("ytdTarget", 0)) + float(bphtb.get("ytdTarget", 0)) + \
float(pdl.get("ytdTarget", 0))
ytd = float(pbb.get("ytd", 0)) + float(bphtb.get("ytd", 0)) + \
float(pdl.get("ytd", 0))
resp = {"today": float(pbb.get("today", 0)) + float(bphtb.get("today", 0)) + float(pdl.get("today", 0)),
"trx": float(pbb.get("trx", 0)) + float(bphtb.get("trx", 0)) + float(pdl.get("trx", 0)),
"daily": daily,
"dailyTrx": dailyTrx,
"dailyAcc": dailyAcc,
"dailyAccTrx": dailyAccTrx,
"ytd": float(pbb.get("ytd", 0)) + float(bphtb.get("ytd", 0)) + float(pdl.get("ytd", 0)),
"ytd": ytd,
"trxYtd": float(pbb.get("trxYtd", 0)) + float(bphtb.get("trxYtd", 0)) + float(pdl.get("trxYtd", 0)),
"ytdTarget": ytd_target,
"ytdPersen": round(ytd/ytd_target * 100, 2) if ytd_target > 0 else 0,
"pie": [("I", 100, '#16a75c'), ("II", 200, '#ffb900'),
("III", 300, '#133132'), ("IV", 200, '#123456'),
("V", 100, '#545355')],
......@@ -447,6 +571,7 @@ class Views(BaseView):
"monthlyTrx": monthlyTrx,
"monthlyAcc": monthlyAcc,
"monthlyAccTrx": monthlyAccTrx,
}
return resp
......@@ -492,6 +617,28 @@ class Views(BaseView):
"persen": kecamatan[kec]["persen"],
} for kec in kecamatan]
def get_grid_pajak(self, jenis):
target = self.get_targets(jenis)
if jenis == "pbb":
realisasi = self.get_pbb_data()["ytd"]
elif jenis=="bphtb":
realisasi = self.get_bphtb_data()["ytd"]
else:
realisasi = self.get_pad_data(jenis)["ytd"]
return {jenis: {"kode": jenis_pajak[jenis]["kode"].rjust(8, '0'),
"nama": jenis_pajak[jenis]["nama"],
"target": target,
"realisasi": realisasi,
"sisa": target - realisasi,
"persen": round(realisasi/target * 100,2) if target > 0 else 0}
}
@view_config(route_name='eis-pcpd-act', renderer='json')
def view_app_act(self):
tahun = self.ses['tahun']
......@@ -503,9 +650,25 @@ class Views(BaseView):
json_data['success'] = False
act = req.matchdict['act']
if act == 'grid':
rows = DBSession.query(Eis).filter(Eis.id == id)
if not rows:
return json_data
data = {}
data.update(self.get_grid_pajak("hotel"))
data.update(self.get_grid_pajak("resto"))
data.update(self.get_grid_pajak("hiburan"))
data.update(self.get_grid_pajak("parkir"))
data.update(self.get_grid_pajak("ppju"))
data.update(self.get_grid_pajak("reklame"))
data.update(self.get_grid_pajak("minerba"))
data.update(self.get_grid_pajak("atd"))
data.update(self.get_grid_pajak("pbb"))
data.update(self.get_grid_pajak("bphtb"))
data.update(self.get_grid_pajak("opsen"))
return [{"kode": data[d]["kode"],
"nama": data[d]["nama"],
"target": data[d]["target"],
"realisasi": data[d]["realisasi"],
"sisa": data[d]["sisa"],
"persen": data[d]["persen"]} for d in data]
elif act == 'pbb':
resp = self.get_pbb_data()
resp["tabel"] = self.get_pbb_area()
......
eispajak/views/templates/pbb.pt
......@@ -39,6 +39,10 @@
<div class="chart-container">
<h2 class="primary">
<b>Rp. <h2 class="odometer sub-odometer bold primary" id="ytd">0</h2></b>
<p>
Target Rp. <span class=" bold" id="ytdTarget">123</span>
<p>
Persentase <span class="odometer sub-odometer bold primary" id="ytdPersen">
</h2>
<h3 class="primary bold"><span id="trxYtd">0</span> Transaksi</h3>
</div>
......@@ -64,9 +68,9 @@
<div class="row">
<div class="col-md-2">
<select class="form-control rounded" id="rangeType">
<option value="1">Harian</option>
<option value="2">Mingguan</option>
<option value="3">Bulanan</option>
<option value="2">Mingguan</option>
<option value="1">Harian</option>
</select>
</div>
<hr>
......@@ -178,12 +182,12 @@
</thead>
<tbody>
<tr class="odd">
<td class="">32.08-010</td>
<td class="">CIPATUJAH</td>
<td class="right">63.185</td>
<td class="right">1.183.837.314</td>
<td class="right">42.681</td>
<td class="right">789.492.550</td>
<td class=""></td>
<td class=""></td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
</tr>
</tbody>
</table>
......@@ -219,7 +223,7 @@
// canvas.height = window.innerHeight / 2;
console.log(window.innerHeight);
console.log($("#panelRealisasi").height())
canvasBar.height = $("#panelRealisasi").height() + 125;
// canvasBar.height = $("#panelRealisasi").height() + 125;
canvasBar.parentNode.parentNode.parentNode.style.height = $("#panelRealisasi").height() + "px";
// const bar_data = {
// labels: [
......@@ -283,6 +287,7 @@
// }
// },
// responsive: true,
maintainAspectRatio: true,
plugins: {
legend: {
display: false,
......@@ -474,6 +479,8 @@
trx.innerHTML = parseInt(newData.trx).toLocaleString("id-ID");
odytd.update(newData.ytd);
trxYtd.innerHTML = parseInt(newData.trxYtd).toLocaleString("id-ID");
ytdTarget.innerHTML = parseInt(newData.ytdTarget).toLocaleString("id-ID");
ytdPersen.innerHTML = parseFloat(newData.ytdPersen).toFixed(2) + "%";
time.innerHTML = formatter.format(date);//newData.time;
time.style.fontWeight = 'bold';
......
eispajak/views/templates/pcpd.pt
......@@ -38,6 +38,10 @@
<div class="chart-container">
<h2 class="primary">
<b>Rp. <h2 class="odometer sub-odometer bold primary" id="ytd">0</h2></b>
<p>
Target Rp. <span class=" bold" id="ytdTarget">123</span>
<p>
Persentase <span class="odometer sub-odometer bold primary" id="ytdPersen">
</h2>
<h3 class="primary bold"><span id="trxYtd">1067</span> Transaksi</h3>
</div>
......@@ -63,9 +67,9 @@
<div class="row ">
<div class="col-md-2">
<select class="form-control rounded" id="rangeType">
<option value="1">Harian</option>
<option value="2">Mingguan</option>
<option value="3">Bulanan</option>
<option value="2">Mingguan</option>
<option value="1">Harian</option>
</select>
</div>
<hr>
......@@ -361,22 +365,22 @@
trx.innerHTML = parseInt(newData.trx).toLocaleString("id-ID");
odytd.update(newData.ytd);
trxYtd.innerHTML = parseInt(newData.trxYtd).toLocaleString("id-ID");
time.innerHTML = formatter.format(date);//newData.time;
ytdTarget.innerHTML = parseInt(newData.ytdTarget).toLocaleString("id-ID");
ytdPersen.innerHTML = parseFloat(newData.ytdPersen).toFixed(2) + "%";
time.innerHTML = formatter.format(date);
time.style.fontWeight = 'bold';
// removeData(pieChart);
addData(pieChart, newData.pie);
trendChart();
} else {
console.log("Request failed.");
}
setTimeout(function () {
console.log("timeout");
$().datarefresh();
}, 300000);
}).fail(function() {
}).fail(function () {
setTimeout(function () {
console.log("timeout");
$().datarefresh();
......
eispajak/views/templates/pcpd_pajak.pt 0 → 100644
<html metal:use-macro="load: eis-base.pt" tal:define="url request.route_url('eis-pcpd-act', act=module);">
<metal:css fill-slot="css_files">
<link rel="stylesheet" href="${home}/eis/static/css/odometer-theme-plaza.css">
<link rel="stylesheet" href="${home}/static/v3/plugin/datatables/1.10/media/css/dataTables.bootstrap.css">
<link href="${home}/eis/static/css/pcpd.css" rel="stylesheet">
</metal:css>
<style metal:fill-slot="styles">
</style>
<div metal:fill-slot="content">
<div class="row ">
<div class="col-md-2">
<img src="${home}/eis/static/pcpd-logo.png" class="img-responsive logo-pcpd" alt="PCPD Logo">
</div>
<div class="col-md-10">
<div class="panel panel-default text-center main-panel uppercase">
<div class="panel-body">
<h1 class="title-panel"><b>${title}</b></h1>
<div class="padding-top-sm">
<h5 id="time">Rab, 4 Jun 2025 - 14:11:05</h5>
</div>
<h4 class="odoometer-head">
<b>Rp.<h4 class="odometer bold" id="today"></h4></b>
</h4>
<h5 class="padding-top-sm"><b><span id="trx"></span> Transaksi</b></h5>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-money-transfer.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">
Total Realisasi s.d Hari Ini
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container">
<h2 class="primary">
<b>Realisasi Rp. <span class="odometer sub-odometer bold primary" id="ytd">0</span></b>
<p>
Target Rp. <span class=" bold" id="ytdTarget">123</span>
<p>
Persentase <span class="odometer sub-odometer bold primary" id="ytdPersen">
</h2>
<h3 class="primary bold"><span id="trxYtd">0</span> Transaksi</h3>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default hide">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-pie-chart.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Jumlah Transaksi
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center">
<canvas id="chartPie"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-statistics.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Target dan Realisasi per Pajak
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<table class="table table-bordered table-sm" id="table1">
<thead>
<tr>
<th class="align-middle text-center">Kode</th>
<th class="align-middle text-center">Uraian</th>
<th class="text-center">Target</th>
<th class="text-center">Realisasi</th>
<th class="text-center">Selisih</th>
<th class="text-center">%</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class=""></td>
<td class=""></td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<hr>
</div>
<div class="row ">
<div class="col-md-2">
<select class="form-control rounded" id="rangeType">
<option value="3">Bulanan</option>
<option value="2">Mingguan</option>
<option value="1">Harian</option>
</select>
</div>
<hr>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-gantt-chart.png" class="icon-rounded" alt="" align="left">
<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;">
<canvas id="chartRealisasi"></canvas>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-chart.png" class="icon-rounded" alt="" align="left">
<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;">
<canvas id="chartKumulatif" width="200" height="200"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-statistics.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren 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;">
<canvas id="chartRealisasiCnt"></canvas>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-line-chart-icon.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Transaksi Kumulatif
<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;">
<canvas id="chartKumulatifCnt" width="200" height="200"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<metal:js fill-slot="js_files">
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> -->
<script src="${home}/eis/static/js/chart.js"></script>
<script src="${home}/eis/static/js/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="${home}/eis/static/js/odometer.js"></script>
<script src="${home}/static/v3/plugin/datatables/1.10/media/js/jquery.dataTables.min.js"></script>
<script src="${home}/static/v3/plugin/datatables/1.10/media/js/jquery.dataTables.ext.js"></script>
</metal:js>
<script metal:fill-slot="scripts">
var pieChart;
var amtTrendChart;
var trxTrendChart;
var amtKumulatifChart;
var trxKumulatifChart;
var newData;
$(document).ready(function () {
var ctx = document.getElementById('chartPie').getContext('2d');
var canvas = document.getElementById('chartPie');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 3.8;
const pie_data = {
labels: [
'Pajak',
'Retribusi',
],
datasets: [{
data: [300, 100],
backgroundColor: [
'#16a75c', //'rgb(255, 99, 132)',
'#ffb900', // 'rgb(54, 162, 235)'
],
hoverOffset: 4
}]
};
pieChart = new Chart(ctx,
{
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: [{
label: 'Tren Realiasi',
data: [100, 50, 300, 250, 100, 150, 2000],
borderColor: '#16a75c',// 'rgb(75, 192, 192)',
backgroundColor: '#16a75c8a',
fill: true,
tension: 0.5
}]
};
amtTrendChart = new Chart(ctx, {
type: 'line',
data: realisasi_data,
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
grid: {
display: false,
drawBorder: false,
}
}
}
}
});
var transaksi_data = {
labels: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'H7',],
datasets: [{
label: 'Tren Transaksi',
data: [100, 50, 300, 250, 100, 150, 2000],
borderColor: '#16a75c',// 'rgb(75, 192, 192)',
backgroundColor: '#16a75c8a',
fill: true,
tension: 0.5
}]
};
var ctx = document.getElementById('chartRealisasiCnt').getContext('2d');
var canvas = document.getElementById('chartRealisasiCnt');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 3.38;
trxTrendChart = new Chart(ctx, {
type: 'line',
data: transaksi_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: 'Tren Kumulatif',
data: [100, 150, 400, 650, 900, 950, 1100],
borderColor: '#ffb900', //'rgb(75, 192, 192)',
backgroundColor: '#debd68ad',
fill: true,
tension: 0.5
}]
};
amtKumulatifChart = 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;
trxKumulatifChart = new Chart(ctx, {
type: 'line',
data: kumulatif_data,
options: {
responsive: true,
maintainAspectRatio: false,
}
});
$("#rangeType").change(function () {
trendChart();
});
$().datarefresh();
});
function addData(chart, data) {
labels = [];
aData = [];
backgroundColor = [];
data.forEach(element => {
labels.push(element[0]);
aData.push(element[1]);
if (element.length > 2)
backgroundColor.push(element[2]);
});
chart.data.labels.length = 0;
chart.data.datasets[0].data.length = 0;
if (backgroundColor.length != 0) {
chart.data.datasets[0].data.backgroundColor = 0;
chart.data.datasets[0].backgroundColor = backgroundColor;
}
chart.data.labels = labels;
chart.data.datasets[0].data = aData;
chart.update();
}
trendChart = function () {
if (rangeType.value == 1) {
amtTrendChartData = newData.daily;
trxTrendChartData = newData.dailyTrx;
amtKumulatifChartData = newData.dailyAcc;
trxKumulatifChartData = newData.dailyAccTrx;
}
else if (rangeType.value == 2) {
amtTrendChartData = newData.weekly;
trxTrendChartData = newData.weeklyTrx;
amtKumulatifChartData = newData.weeklyAcc;
trxKumulatifChartData = newData.weeklyAccTrx;
}
else {
amtTrendChartData = newData.monthly;
trxTrendChartData = newData.monthlyTrx;
amtKumulatifChartData = newData.monthlyAcc;
trxKumulatifChartData = newData.monthlyAccTrx;
}
addData(amtTrendChart, amtTrendChartData);
addData(trxTrendChart, trxTrendChartData);
addData(amtKumulatifChart, amtKumulatifChartData);
addData(trxKumulatifChart, trxKumulatifChartData);
}
const formatter = new Intl.DateTimeFormat('id-ID', { dateStyle: 'full', timeStyle: 'medium' });
var today_el = document.getElementById('today');
odtoday = new Odometer({
el: today_el,
value: 0,
format: '(.ddd)',
});
var ytd_el = document.getElementById('ytd');
odytd = new Odometer({
el: ytd_el,
value: 0,
format: '(.ddd)',
});
// var ytd_target = new Odometer({
// el: document.getElementById('ytd_target'),
// value: 0,
// format: '(.ddd)',
// });
var table = $('#table1').DataTable(
{
"destroy": true,
"paging": false,
"searching": false,
"info": false,
"autoWidth": false,
"order": [[0, 'asc']],
"columnDefs": [
{ className: 'text-center', width: "50px", targets: [0] },
{ className: 'text-left', targets: [1] },
{ className: 'text-right', width: "100px", targets: [2, 3, 4, 5] }
]
}
);
var tableRefresh = function () {
table.clear();
var url = "${url}".replace("/pajak/", "/grid/");
$.get(url, {}, function (data, status) {
if (status === "success") {
console.log(data);
data.forEach(function (row) {
console.log(row);
table.row.add([
row.kode,
row.nama,
row.target.toLocaleString("id-ID"),
row.realisasi.toLocaleString("id-ID"),
row.sisa.toLocaleString("id-ID"),
row.persen.toFixed(2)
]);
});
table.draw();
} else {
console.log("Request failed.");
table.draw();
}
}).fail(function () {
console.log("Request failed.");
table.draw();
});
}
$.fn.datarefresh = function () {
// console.log("data_refresh");
// console.log("${url}");
$.get("${url}", {}, function (data, status) {
if (status === "success") {
newData = data;
date = new Date(newData.time);
odtoday.update(newData.today);
trx.innerHTML = parseInt(newData.trx).toLocaleString("id-ID");
odytd.update(newData.ytd);
ytdTarget.innerHTML = parseInt(newData.ytdTarget).toLocaleString("id-ID");
ytdPersen.innerHTML = parseFloat(newData.ytdPersen).toFixed(2) + "%";
trxYtd.innerHTML = parseInt(newData.trxYtd).toLocaleString("id-ID");
time.innerHTML = formatter.format(date);//newData.time;
time.style.fontWeight = 'bold';
// removeData(pieChart);
addData(pieChart, newData.pie);
trendChart();
tableRefresh();
} else {
console.log("Request failed.");
}
setTimeout(function () {
console.log("timeout");
$().datarefresh();
}, 300000);
}).fail(function () {
setTimeout(function () {
console.log("timeout");
$().datarefresh();
}, 300000);
});
}
</script>
</html>
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!