100 lines
3.4 KiB
JavaScript
100 lines
3.4 KiB
JavaScript
function showPieChart() {
|
|
const cb2ScRelOid = parseInt($("#sb-cb2ScRelOid").val(), 10);
|
|
|
|
if(cb2ScRelOid === null || cb2ScRelOid === undefined) {
|
|
showMessagePopup("Hilfeplanstatistik", "Es wurde kein Hilfeplan ausgewählt");
|
|
return;
|
|
}
|
|
|
|
const customerInfo = $("#selectedSupportConceptCustomerInfo").html();
|
|
const selectedSupportConceptInfo = $("#selectedSupportConceptInfo").html();
|
|
|
|
$("#statistics-header").html(`Hilfeplanstatistik: ${customerInfo} | ${selectedSupportConceptInfo}`);
|
|
getSupportConceptStatistics(cb2ScRelOid);
|
|
}
|
|
|
|
function getSupportConceptStatistics(cb2ScRRelOid) {
|
|
const url = getLoadStatisticsUrl();
|
|
|
|
$.get(url, { oid: cb2ScRRelOid }).done(function(jsonObject) {
|
|
try {
|
|
if(false === checkJson(jsonObject)) {
|
|
logWarning("getSupportConceptStatistics: Der zurückgegebene Wert ist kein gültiges JSON!");
|
|
hideSpinner();
|
|
return;
|
|
}
|
|
|
|
var scStatistics = parseJason(jsonObject);
|
|
|
|
$("#period-statistics-container").empty();
|
|
|
|
$.each(scStatistics.statisticPeriods, function(index, period) {
|
|
$.each(period.header2values, function(index, header2Values) {
|
|
$("#period-statistics-container").append(
|
|
`<div class="row"><div class="col text-secondary">${header2Values.header}</div><div class="col-auto">${header2Values.value}</div></div>`);
|
|
});
|
|
|
|
if(index < (scStatistics.statisticPeriods.length - 1)) {
|
|
$("#period-statistics-container").append("<hr/>");
|
|
}
|
|
});
|
|
|
|
if (scStatistics.showDiagram === true) {
|
|
drawPieChart((100 - scStatistics.percentage).toFixed(2),
|
|
scStatistics.percentage.toFixed(2),
|
|
"Frei (in %)",
|
|
"Verbraucht (in %)");
|
|
$("#statistic-canvas").show();
|
|
} else {
|
|
$("#statistic-canvas").hide();
|
|
}
|
|
} catch (error) {
|
|
showErrorPopup(error);
|
|
}
|
|
});
|
|
}
|
|
|
|
function drawPieChart(v1, v2, free, used) {
|
|
const data = [
|
|
{
|
|
value: v1,
|
|
color: "#00FF00",
|
|
highlight: "#99FF00",
|
|
label: free
|
|
},
|
|
{
|
|
value: v2,
|
|
color: "#F7464A",
|
|
highlight: "#FF5A5E",
|
|
label: used
|
|
}
|
|
];
|
|
|
|
const options = {
|
|
scaleShowLabelBackdrop: true,
|
|
scaleBackdropColor: "rgba(255,255,255,0.75)",
|
|
scaleBeginAtZero: true,
|
|
scaleBackdropPaddingY: 2,
|
|
scaleBackdropPaddingX: 2,
|
|
scaleShowLine: true,
|
|
segmentShowStroke: true,
|
|
segmentStrokeColor: "#fff",
|
|
segmentStrokeWidth: 1,
|
|
animationSteps: 1,
|
|
animationEasing: "easeOutBounce",
|
|
responsive: true,
|
|
animateRotate: false,
|
|
animateScale: false,
|
|
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\">" +
|
|
"<% for (var i=0; i<segments.length; i++){%>" +
|
|
"<li>" +
|
|
"<span style=\"background-color:<%=segments[i].fillColor%>\"></span>" +
|
|
"<%if(segments[i].label){%><%=segments[i].label%><%}%>" +
|
|
"</li><%}%>" +
|
|
"</ul>"
|
|
};
|
|
|
|
const context = $("#statistic-canvas").get(0).getContext("2d");
|
|
|
|
new Chart(context).Pie(data, options);
|
|
} |