Skip to content

aa.gusti / eis

Go to a project
Commit 89f55923 by Eka Vivia Rizkiani (Solo)
Options

pembaruan gauge pada menu realisasi realtime

1 parent 7976e69e
Inline Side-by-side
Showing 1 changed file with 127 additions and 152 deletions
eispajak/views/templates/realtime_realisasi.pt
......@@ -137,18 +137,17 @@
</div>
<!-- Gauge Chart Section -->
<div class="col-md-4">
<div class="panel panel-default" id="gaugePanel" style="min-height: 500px;">
<div class="panel-heading" style="padding: 10px 15px;">
<h5 class="text-center bold" style="margin: 0;border:1px solid">REALISASI PAJAK DAERAH</h5>
<h3><b>Realisasi: Rp.<span id="gaugeRealisasi">0</span></b></h3>
<div class="panel panel-default" id="gaugePanel" style="min-height: 500px; background-color: rgba(139, 0, 0, 0.8);">
<div class="panel-heading" style="padding: 10px 15px; background-color: rgba(139, 0, 0, 0.9); border-bottom: 1px solid rgba(139, 0, 0, 1);">
<h5 class="text-center bold" style="margin: 0;border:1px solid; color: #FFFFFF;">REALISASI PAJAK DAERAH</h5>
<h3 style="color: #FFFFFF;"><b>Realisasi: Rp.<span id="gaugeRealisasi">0</span></b></h3>
</div>
<div class="panel-body" style="padding: 0; height: calc(85% - 50px); overflow: hidden; display: flex; flex-direction: column;">
<div id="chartContainer" style="flex: 1; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0;">
<canvas id="gaugeChart" width="50%" height="50%"></canvas>
<div class="panel-body" style="padding: 0; height: calc(85% - 50px); overflow: hidden; display: flex; flex-direction: column; background-color: rgba(139, 0, 0, 0.7);">
<div id="chart-container" style="flex:1; display:flex; align-items:center; justify-content:center; margin:0; padding:0; max-height:380px; min-height:350px; background-color:#2d2d2d; border-radius:8px;">
</div>
<h4 id="gaugePercentage" class="text-center" style="color: #333; font-size: 16px;">63.70%</h4>
<div class="text-left" style="padding: 10px; background: rgba(0,0,0,0.02); border-top: 1px solid #ddd;">
<h3><b>Target: Rp.<span id="gaugeTarget">3.679.068.431.493</span></b></h3>
<h4 id="gaugePercentage" class="text-center" style="color: #333; font-size: 16px; display: none;">40.99%</h4>
<div class="text-left" style="padding: 10px; background: rgba(139, 0, 0, 0.8); border-top: 1px solid rgba(139, 0, 0, 1);">
<h3 style="color: #FFFFFF;"><b>Target: Rp.<span id="gaugeTarget">3.679.068.431.493</span></b></h3>
</div>
</div>
</div>
......@@ -233,6 +232,9 @@
</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="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.widgets.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.candy.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>
......@@ -396,152 +398,137 @@
});
// Initialize Gauge Chart
setTimeout(function() {
initializeGauge();
setTimeout(function() {
tableRefresh();
}, 3000);
}, 1000);
$().datarefresh();
});
// Function to match gauge panel height with table panel
function matchPanelHeights() {
var tablePanel = document.querySelector('.col-md-8 .panel');
var gaugePanel = document.getElementById('gaugePanel');
if (tablePanel && gaugePanel) {
var tablePanelHeight = tablePanel.offsetHeight;
gaugePanel.style.height = tablePanelHeight + 'px';
// Function to initialize FusionCharts Gauge
function initializeGauge() {
const dataSource = {
chart: {
captionpadding: "0",
origw: "350",
origh: "350",
gaugeouterradius: "130",
gaugeinnerradius: "85",
gaugestartangle: "270",
gaugeendangle: "-45",
showvalue: "1",
valuefontsize: "36",
valuefontcolor: "#FFFFFF",
valuefontbold: "1",
majortmnumber: "8",
majortmthickness: "3",
majortmheight: "15",
majortmcolor: "#000000",
minortmheight: "8",
minortmthickness: "1",
minortmnumber: "1",
minortmcolor: "#000000",
showgaugeborder: "1",
gaugebordercolor: "#555555",
gaugeborderthickness: "2",
theme: "candy",
bgcolor: "#2d2d2d",
canvasbgcolor: "#2d2d2d",
gaugefillmix: "{dark-10},{light-10},{dark-10}",
gaugefillratio: "15,80,5",
showlicense: "0",
showlogo: "0",
creditlabel: "0"
},
colorrange: {
color: [
{ minvalue: "0", maxvalue: "75", code: "#888888" },
{ minvalue: "75", maxvalue: "150", code: "#EEEEEE" }
]
},
dials: {
dial: [
{
value: "40.99",
bgcolor: "#FF0000",
bordercolor: "#FF0000",
basewidth: "8",
topwidth: "1",
rearextension: "10"
}
]
},
annotations: {
groups: [
{
items: [
{
type: "text",
id: "unitText",
text: "mph",
x: "$gaugeCenterX",
y: "$gaugeCenterY + 50",
fontsize: "18",
color: "#FFFFFF",
font: "Arial",
bold: "1"
}
function initializeGauge() {
var canvas = document.getElementById('gaugeChart');
var ctx = canvas.getContext('2d');
var container = document.getElementById('chartContainer');
// Set canvas size to fill container
function resizeCanvas() {
var containerRect = container.getBoundingClientRect();
var size = Math.min(containerRect.width, containerRect.height);
canvas.width = containerRect.width;
canvas.height = size * 0.7; // Semi-circle height ratio
// Update gauge properties
if (gaugeChart) {
gaugeChart.centerX = canvas.width / 2;
gaugeChart.centerY = canvas.height - 20;
gaugeChart.radius = Math.min(canvas.width * 0.45, canvas.height * 0.65);
gaugeChart.draw();
]
}
]
}
};
// Match panel heights and resize canvas
matchPanelHeights();
setTimeout(resizeCanvas, 100); // Allow DOM to update
gaugeChart = {
canvas: canvas,
ctx: ctx,
centerX: canvas.width / 2,
centerY: canvas.height - 20,
radius: Math.min(canvas.width * 0.45, canvas.height * 0.65),
value: 63.70,
draw: function() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// Draw gauge background segments
this.drawSegments();
// Check if FusionCharts is loaded
if (typeof FusionCharts === 'undefined') {
return;
}
// Draw scale numbers
this.drawScale();
// Check if container exists
if (!document.getElementById('chart-container')) {
return;
}
// Draw needle
this.drawNeedle();
// Wait for FusionCharts to be ready
FusionCharts.ready(function() {
window.myGauge = new FusionCharts({
type: "angulargauge",
renderAt: "chart-container",
width: "350",
height: "350",
dataFormat: "json",
dataSource: dataSource,
events: {
"rendered": function(evtObj, argObj) {
},
drawSegments: function() {
var ctx = this.ctx;
var segments = [
{ start: 0, end: 40, color: '#ff0000' }, // Merah (0-40)
{ start: 40, end: 70, color: '#ffff00' }, // Kuning (40-70)
{ start: 70, end: 100, color: '#00ff00' } // Hijau (70-100)
];
segments.forEach(segment => {
var startAngle = Math.PI + (segment.start / 100) * Math.PI;
var endAngle = Math.PI + (segment.end / 100) * Math.PI;
ctx.beginPath();
ctx.moveTo(this.centerX, this.centerY); // mulai dari pusat gauge
ctx.arc(this.centerX, this.centerY, this.radius, startAngle, endAngle);
ctx.closePath();
ctx.fillStyle = segment.color;
ctx.fill(); // isi penuh
"renderComplete": function(evtObj, argObj) {
}
}
});
},
drawScale: function() {
var ctx = this.ctx;
ctx.fillStyle = '#000';
ctx.font = Math.max(10, this.radius * 0.08) + 'px Arial';
ctx.textAlign = 'center';
// Draw scale numbers (0, 10, 20, ..., 100)
for (var i = 0; i <= 100; i += 10) {
var angle = Math.PI + (i / 100) * Math.PI;
var labelRadius = this.radius + Math.max(20, this.radius * 0.15);
var x = this.centerX + Math.cos(angle) * labelRadius;
var y = this.centerY + Math.sin(angle) * labelRadius + 5;
ctx.fillText(i.toString(), x, y);
window.myGauge.render();
});
}
},
drawNeedle: function() {
var ctx = this.ctx;
var angle = Math.PI + (this.value / 100) * Math.PI;
ctx.save();
// Draw needle line
ctx.beginPath();
ctx.moveTo(this.centerX, this.centerY);
var needleLength = this.radius - Math.max(8, this.radius * 0.05);
var needleX = this.centerX + Math.cos(angle) * needleLength;
var needleY = this.centerY + Math.sin(angle) * needleLength;
ctx.lineTo(needleX, needleY);
ctx.strokeStyle = '#000';
ctx.lineWidth = Math.max(3, this.radius * 0.02);
ctx.lineCap = 'round';
ctx.stroke();
ctx.restore();
// Draw center circle
ctx.beginPath();
ctx.arc(this.centerX, this.centerY, Math.max(5, this.radius * 0.04), 0, 2 * Math.PI);
ctx.fillStyle = '#000';
ctx.fill();
},
function updateGauge(percentage, realisasi, target) {
if (window.myGauge && typeof window.myGauge.setDataForId === 'function') {
var gaugeValue = Math.min(100, Math.max(0, percentage));
update: function(value) {
this.value = Math.max(0, Math.min(100, value));
this.draw();
try {
window.myGauge.feedData("value=" + gaugeValue.toFixed(2));
} catch (e) {
window.myGauge.setDataForId("dial-0", gaugeValue.toFixed(2));
}
};
// Initial draw
gaugeChart.draw();
}
function updateGauge(percentage, realisasi, target) {
if (gaugeChart) {
gaugeChart.update(percentage);
}
document.getElementById('gaugePercentage').textContent = percentage.toFixed(2) + '%';
document.getElementById('gaugeRealisasi').textContent = parseInt(realisasi).toLocaleString('id-ID');
document.getElementById('gaugeTarget').textContent = parseInt(target).toLocaleString('id-ID');
}
}
function addData(chart, data) {
labels = [];
......@@ -633,13 +620,11 @@
var url = "${url}".replace("/pajak/", "/grid/");
$.get(url, {}, function (data, status) {
if (status === "success") {
console.log(data);
var sum_target = 0;
var sum_realisasi = 0;
var sum_sisa = 0;
var sum_persen = 0;
data.forEach(function (row) {
console.log(row);
table.row.add([
row.kode,
row.nama,
......@@ -656,30 +641,25 @@
$('#sum_target').html(sum_target.toLocaleString("id-ID"));
$('#sum_realisasi').html(sum_realisasi.toLocaleString("id-ID"));
$('#sum_sisa').html(sum_sisa.toLocaleString("id-ID"));
$('#sum_persen').html((sum_realisasi / sum_target * 100).toFixed(2));
// Update gauge with total values
var gaugePercentage = (sum_realisasi / sum_target * 100);
updateGauge(gaugePercentage, sum_realisasi, sum_target);
var actualPercentage = (sum_realisasi / sum_target * 100);
$('#sum_persen').html(actualPercentage.toFixed(2));
// Match panel heights after data load
matchPanelHeights();
if (sum_target > 0 && !isNaN(actualPercentage)) {
updateGauge(actualPercentage, sum_realisasi, sum_target);
} else {
updateGauge(40.99, 1508025096875, 3679068431493);
}
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;
......@@ -690,30 +670,25 @@
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.innerHTML = formatter.format(date);
time.style.fontWeight = 'bold';
// removeData(pieChart);
addData(pieChart, newData.pie);
trendChart();
tableRefresh();
setTimeout(function () {
console.log("timeout");
$().datarefresh();
}, 300000);
} else {
setTimeout(function () {
console.log("timeout");
$().datarefresh();
}, 60000);
console.log("Request failed.");
}
}).fail(function () {
setTimeout(function () {
console.log("timeout");
$().datarefresh();
}, 60000);
});
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!