Skip to content

aa.gusti / eis

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

Merge branch '2025.05' of https://git.opensipkd.com/aa.gusti/eis into 2025.05

2 parents 07898631 ff4cefbc
Expand all
Inline Side-by-side
Showing 7 changed files with 267 additions and 112 deletions
eispajak/static/css/odometer-theme-plaza.css 0 → 100644
.odometer.odometer-auto-theme, .odometer.odometer-theme-plaza {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
position: relative;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
position: relative;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-spacer {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-inner {
text-align: left;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-plaza .odometer-digit .odometer-ribbon {
display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-ribbon-inner {
display: block;
-webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-plaza .odometer-digit .odometer-value {
display: block;
-webkit-transform: translateZ(0);
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-plaza .odometer-digit .odometer-value.odometer-last-value {
position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-up .odometer-ribbon-inner {
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-ms-transition: -ms-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-down .odometer-ribbon-inner {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-ms-transition: -ms-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-plaza {
-moz-border-radius: 0.15em;
-webkit-border-radius: 0.15em;
border-radius: 0.15em;
background-color: #f0f8ff;
font-family: "Helvetica Neue", sans-serif;
font-weight: 100;
padding: 0 0.12em;
line-height: 1.2em;
font-size: 1.2em;
background-size: 16px 16px;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit {
-moz-border-radius: 0.1em;
-webkit-border-radius: 0.1em;
border-radius: 0.1em;
padding: 0 0.03em;
color: #648baf;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-inner {
left: 0.03em;
}
\ No newline at end of file \ No newline at end of file
eispajak/static/css/pcpd.css 0 → 100644
div.col-md-6 {
padding-left: 7px !important;
padding-right: 7px !important;
}
.main-panel {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
font-weight: bold;
--tw-bg-opacity: 1 !important;
background: #00D4FF;
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 0%, rgba(23, 115, 207, 1) 53%, rgba(0, 212, 255, 1) 100%);
border-radius: 10px;
}
.panel,
.panel-heading {
border-radius: 10px;
}
.primary {
color: #1976d2;
}
.bold {
font-weight: bold;
}
.panel-default>.panel-heading {
color: #333;
background-color: white;
border-color: white;
}
.icon-color {
color: transparent;
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: #03c5f8;
font-size: 22px;
}
.top-0 {
top: 68px !important;
}
.left-0 {
left: 8px !important;
}
.z-0 {
z-index: 0 !important;
}
.absolute {
position: absolute !important;
}
.bottom-0 {
bottom: 0 !important;
}
.right-0 {
right: 0 !important;
}
h1 {
font-size: 36px;
}
.main-panel .panel-body .odometer-formatting-mark {
color: #648baf;
}
.icon-rounded {
display: block;
vertical-align: middle;
max-width: 100%;
height: auto;
padding-right: 10px;
}
.rounded{
border-radius: 7px !important;
}
.uppercase {
text-transform: uppercase !important;
}
.odoometer-head {
font-size: 4.0em;
}
.sub-odometer {
font-size: 2.5em;
}
.padding-top-sm { padding-top: .5em; }
@media only screen and (max-width: 640px){
h1 {
font-size: 30px !important;
}
.odoometer-head {
font-size: 2.0em !important;
font-weight: bold !important;
}
.odoometer-sub {
font-size: 1.5em !important;
font-weight: bold !important;
}
}
\ No newline at end of file \ No newline at end of file
eispajak/static/js/chart.js 0 → 100644
This diff could not be displayed because it is too large.
eispajak/views/templates/eis-base.pt
...@@ -46,6 +46,7 @@ ...@@ -46,6 +46,7 @@
height: 44px; height: 44px;
width: auto; width: auto;
margin: 0; margin: 0;
margin-left: 10px;
} }
.project-context .title-page{ .project-context .title-page{
font-size: 19px; font-size: 19px;
......
eispajak/views/templates/pcpd.pt
<html metal:use-macro="load: eis-base.pt" tal:define="url request.route_url('eis-pcpd-act', act=module);"> <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"> <metal:css fill-slot="css_files">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/odometer@0.4.8/themes/odometer-theme-plaza.css"> <link rel="stylesheet" href="${home}/eis/static/css/odometer-theme-plaza.css">
<link href="${home}/eis/static/css/pcpd.css" rel="stylesheet">
</metal:css> </metal:css>
<style metal:fill-slot="styles"> <style metal:fill-slot="styles">
div.col-md-6 {
padding-left: 7px !important;
padding-right: 7px !important;
}
.main-panel {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
font-weight: bold;
--tw-bg-opacity: 1 !important;
background: #00D4FF;
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 0%, rgba(23, 115, 207, 1) 53%, rgba(0, 212, 255, 1) 100%);
border-radius: 10px;
}
.panel,
.panel-heading {
border-radius: 10px;
}
.primary {
color: #1976d2;
}
.bold {
font-weight: bold;
}
.panel-default>.panel-heading {
color: #333;
background-color: white;
border-color: white;
}
.icon-color {
color: transparent;
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: #03c5f8;
font-size: 22px;
}
.top-0 {
top: 68px !important;
}
.left-0 {
left: 8px !important;
}
.z-0 {
z-index: 0 !important;
}
.absolute {
position: absolute !important;
}
.bottom-0 {
bottom: 0 !important;
}
.right-0 {
right: 0 !important;
}
h1 {
font-size: 36px;
}
.main-panel .panel-body .odometer-formatting-mark {
color: #648baf;
}
.icon-rounded {
display: block;
vertical-align: middle;
max-width: 100%;
height: auto;
padding-right: 10px;
}
.rounded{
border-radius: 7px !important;
}
.uppercase {
text-transform: uppercase !important;
}
.padding-top-sm { padding-top: .5em; }
</style> </style>
<div metal:fill-slot="content"> <div metal:fill-slot="content">
...@@ -98,11 +12,11 @@ ...@@ -98,11 +12,11 @@
<div class="col-md-12"> <div class="col-md-12">
<div class="panel panel-default text-center main-panel uppercase"> <div class="panel panel-default text-center main-panel uppercase">
<div class="panel-body"> <div class="panel-body">
<h1><b>${title}</b></h1> <h1 class="title-panel"><b>${title}</b></h1>
<div class="padding-top-sm"> <div class="padding-top-sm">
<h5 id="time">Rab, 4 Jun 2025 - 14:11:05</h5> <h5 id="time">Rab, 4 Jun 2025 - 14:11:05</h5>
</div> </div>
<h4 style="font-size: 4.0em;"> <h4 class="odoometer-head">
<b>Rp.<h4 class="odometer bold" id="today"></h4></b> <b>Rp.<h4 class="odometer bold" id="today"></h4></b>
</h4> </h4>
<h5 class="padding-top-sm"><b><span id="trx"></span> Transaksi</b></h5> <h5 class="padding-top-sm"><b><span id="trx"></span> Transaksi</b></h5>
...@@ -123,7 +37,7 @@ ...@@ -123,7 +37,7 @@
<div class="panel-body"> <div class="panel-body">
<div class="chart-container"> <div class="chart-container">
<h2 class="primary"> <h2 class="primary">
<b>Rp. <h2 class="odometer bold primary" id="ytd" style="font-size: 2.5em;">0</h2></b> <b>Rp. <h2 class="odometer sub-odometer bold primary" id="ytd">0</h2></b>
</h2> </h2>
<h3 class="primary bold"><span id="trxYtd">1067</span> Transaksi</h3> <h3 class="primary bold"><span id="trxYtd">1067</span> Transaksi</h3>
</div> </div>
...@@ -175,14 +89,14 @@ ...@@ -175,14 +89,14 @@
<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">
<img src="${home}/eis/static/42x42-statistics.png" class="icon-rounded" alt="" align="left"> <img src="${home}/eis/static/42x42-chart.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Realiasi Transaksi <h5 class="text-left bold">Tren Realiasi Kumulatif (Rp)
<i class="fa fa-info-circle pull-right icon-color"></i> <i class="fa fa-info-circle pull-right icon-color"></i>
</h5> </h5>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class="chart-container text-center" style="position: relative;"> <div class="chart-container text-center" style="position: relative;">
<canvas id="chartRealisasiCnt"></canvas> <canvas id="chartKumulatif" width="200" height="200"></canvas>
</div> </div>
</div> </div>
</div> </div>
...@@ -192,14 +106,14 @@ ...@@ -192,14 +106,14 @@
<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">
<img src="${home}/eis/static/42x42-chart.png" class="icon-rounded" alt="" align="left"> <img src="${home}/eis/static/42x42-statistics.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Realiasi Kumulatif (Rp) <h5 class="text-left bold">Tren Transaksi
<i class="fa fa-info-circle pull-right icon-color"></i> <i class="fa fa-info-circle pull-right icon-color"></i>
</h5> </h5>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class="chart-container text-center" style="position: relative;"> <div class="chart-container text-center" style="position: relative;">
<canvas id="chartKumulatif" width="200" height="200"></canvas> <canvas id="chartRealisasiCnt"></canvas>
</div> </div>
</div> </div>
</div> </div>
...@@ -208,7 +122,7 @@ ...@@ -208,7 +122,7 @@
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<img src="${home}/eis/static/42x42-line-chart-icon.png" class="icon-rounded" alt="" align="left"> <img src="${home}/eis/static/42x42-line-chart-icon.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Realiasi Kumulatif Transaksi <h5 class="text-left bold">Tren Transaksi Kumulatif
<i class="fa fa-info-circle pull-right icon-color"></i> <i class="fa fa-info-circle pull-right icon-color"></i>
</h5> </h5>
</div> </div>
...@@ -223,10 +137,9 @@ ...@@ -223,10 +137,9 @@
</div> </div>
<metal:js fill-slot="js_files"> <metal:js fill-slot="js_files">
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> --> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="${home}/eis/static/js/chart.js"></script>
<script <script src="${home}/eis/static/js/chartjs-adapter-date-fns.bundle.min.js"></script>
src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script> <script src="${home}/eis/static/js/odometer.js"></script>
<script src="https://github.hubspot.com/odometer/odometer.js"></script>
</metal:js> </metal:js>
...@@ -272,7 +185,8 @@ ...@@ -272,7 +185,8 @@
} }
} }
} }
}); }
);
var ctx = document.getElementById('chartRealisasi').getContext('2d'); var ctx = document.getElementById('chartRealisasi').getContext('2d');
var canvas = document.getElementById('chartRealisasi'); var canvas = document.getElementById('chartRealisasi');
...@@ -306,14 +220,25 @@ ...@@ -306,14 +220,25 @@
} }
}); });
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 ctx = document.getElementById('chartRealisasiCnt').getContext('2d');
var canvas = document.getElementById('chartRealisasiCnt'); var canvas = document.getElementById('chartRealisasiCnt');
canvas.width = window.innerWidth; canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 3.38; canvas.height = window.innerHeight / 3.38;
trxTrendChart = new Chart(ctx, { trxTrendChart = new Chart(ctx, {
type: 'line', type: 'line',
data: realisasi_data, data: transaksi_data,
options: { options: {
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
...@@ -327,7 +252,7 @@ ...@@ -327,7 +252,7 @@
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', label: 'Tren Kumulatif',
data: [100, 150, 400, 650, 900, 950, 1100], data: [100, 150, 400, 650, 900, 950, 1100],
borderColor: '#ffb900', //'rgb(75, 192, 192)', borderColor: '#ffb900', //'rgb(75, 192, 192)',
backgroundColor: '#debd68ad', backgroundColor: '#debd68ad',
...@@ -363,6 +288,7 @@ ...@@ -363,6 +288,7 @@
}); });
$().datarefresh(); $().datarefresh();
}); });
function addData(chart, data) { function addData(chart, data) {
labels = []; labels = [];
aData = []; aData = [];
...@@ -410,6 +336,20 @@ ...@@ -410,6 +336,20 @@
addData(trxKumulatifChart, trxKumulatifChartData); addData(trxKumulatifChart, trxKumulatifChartData);
} }
const formatter = new Intl.DateTimeFormat('id-ID', { dateStyle: 'full', timeStyle: 'medium' }); 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)',
});
$.fn.datarefresh = function () { $.fn.datarefresh = function () {
console.log("data_refresh"); console.log("data_refresh");
console.log("${url}"); console.log("${url}");
...@@ -417,10 +357,10 @@ ...@@ -417,10 +357,10 @@
if (status === "success") { if (status === "success") {
newData = data; newData = data;
date = new Date(newData.time); date = new Date(newData.time);
today.innerHTML = newData.today; odtoday.update(newData.today);
trx.innerHTML = newData.trx; trx.innerHTML = parseInt(newData.trx).toLocaleString("id-ID");
ytd.innerHTML = newData.ytd; odytd.update(newData.ytd);
trxYtd.innerHTML = newData.trxYtd; trxYtd.innerHTML = parseInt(newData.trxYtd).toLocaleString("id-ID");
time.innerHTML = formatter.format(date);//newData.time; time.innerHTML = formatter.format(date);//newData.time;
time.style.fontWeight = 'bold'; time.style.fontWeight = 'bold';
...@@ -449,8 +389,6 @@ ...@@ -449,8 +389,6 @@
// $().get_series(); // $().get_series();
} }
</script> </script>
</html> </html>
\ No newline at end of file \ 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!