jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fixup app charts an update to latest chart.js from npm

Browse Source
This commit is contained in:
Johannes Zellner
2022-10-11 18:31:03 +02:00
parent 303ddf02b5
commit edc7519a98
8 changed files with 87 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/views/app.js
View File

@@ -701,44 +701,65 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
// in minutes
var timePeriod = $scope.graphs.period * 60;
function fillGraph(canvasId, data, label, chartPropertyName, max) {
if (!data) return; // no data available yet
// keep in sync with graphs.js
var timeBucketSizeMinutes = timePeriod > (24 * 60) ? (6*60) : 5;
var steps = Math.floor(timePeriod/timeBucketSizeMinutes);
// fill holes with previous value
var cur = 0;
data.datapoints.forEach(function (d) {
if (d[0] === null) d[0] = cur;
else cur = d[0];
});
var labels = new Array(steps).fill(0);
labels = labels.map(function (v, index) {
var dateTime = new Date(Date.now() - ((timePeriod - (index * timeBucketSizeMinutes)) * 60 * 1000));
// translate the data from bytes to MB
var datapoints = data.datapoints.map(function (d) { return parseInt((d[0] / 1024 / 1024).toFixed(2)); });
if ($scope.graphs.period > 24) {
return dateTime.toLocaleDateString();
} else {
return dateTime.toLocaleTimeString();
}
});
// we calculate the labels based on timePeriod of chart / datapoints
var minuteSteps = timePeriod / datapoints.length;
var labels = datapoints.map(function (d, index) {
var dateTime = new Date(Date.now() - ((timePeriod - (index * minuteSteps)) * 60 * 1000));
var borderColors = [ '#2196F3', '#FF6384' ];
var backgroundColors = [ '#82C4F844', '#FF63844F' ];
if ($scope.graphs.period > 24) {
return dateTime.toLocaleDateString();
} else {
return dateTime.toLocaleTimeString();
}
function fillGraph(canvasId, contents, chartPropertyName, divisor, max) {
if (!contents || !contents[0]) return; // no data available yet
var datasets = [];
contents.forEach(function (content, index) {
// fill holes with previous value
var cur = 0;
content.data.datapoints.forEach(function (d) {
if (d[0] === null) d[0] = cur;
else cur = d[0];
});
var datapoints = Array(steps).map(function () { return '0'; });
// walk backwards and fill up the datapoints
content.data.datapoints.reverse().forEach(function (d, index) {
datapoints[datapoints.length-1-index] = (d[0] / divisor).toFixed(2);
// return parseInt((d[0] / divisor).toFixed(2));
});
datasets.push({
label: content.label,
backgroundColor: backgroundColors[index],
borderColor: borderColors[index],
borderWidth: 1,
radius: 0,
data: datapoints,
cubicInterpolationMode: 'monotone',
tension: 0.4
});
});
var graphData = {
labels: labels,
datasets: [{
label: label,
backgroundColor: '#82C4F844',
borderColor: '#2196F3',
borderWidth: 1,
radius: 0,
data: datapoints
}]
datasets: datasets
};
var options = {
responsive: true,
maintainAspectRatio: true,
aspectRatio: 2.5,
legend: {
@@ -748,21 +769,18 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
intersect: false
},
scales: {
xAxes: [{
ticks: {
autoSkipPadding: 20,
}
}],
yAxes: [{
ticks: {
min: 0,
max: max,
beginAtZero: true
}
}]
x: {
autoSkipPadding: 20,
},
y: {
min: 0,
beginAtZero: true
}
}
};
if (max) options.scales.y.max = max;
var ctx = $(canvasId).get(0).getContext('2d');
if ($scope.graphs[chartPropertyName]) $scope.graphs[chartPropertyName].destroy();
@@ -774,8 +792,10 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
var currentMemoryLimit = $scope.app.memoryLimit || $scope.app.manifest.memoryLimit || (256 * 1024 * 1024);
fillGraph('#graphsMemoryChart', result.memory, 'Memory', 'memoryChart', currentMemoryLimit / 1024 / 1024);
fillGraph('#graphsDiskChart', result.disk, 'Disk', 'diskChart', 1024 / 1024);
fillGraph('#graphsMemoryChart', [{ data: result.memory, label: 'Memory' }], 'memoryChart', 1024 * 1024, currentMemoryLimit / 1024 / 1024);
fillGraph('#graphsCpuChart', [{ data: result.cpu, label: 'CPU' }], 'cpuChart', 1, 100);
fillGraph('#graphsDiskChart', [{ data: result.blockRead, label: 'Read' }, { data: result.blockWrite, label: 'Write' }], 'diskChart', 1024 * 1024, null);
fillGraph('#graphsNetworkChart', [{ data: result.networkRead, label: 'Incoming' }, { data: result.networkWrite, label: 'Outgoing' }], 'networkChart', 1024 * 1024, null);
});
}
};