System: Health: add "stacked" option and some curly braces.

This commit is contained in:
Ad Schellevis 2025-01-30 20:06:30 +01:00
parent 6f464fc064
commit ef97ce785f
2 changed files with 28 additions and 10 deletions

View File

@ -98,10 +98,16 @@ POSSIBILITY OF SUCH DAMAGE.
$('#detail-select').change(async function() {
$('#spinner').show();
var selectedValue = $(this).val();
await healthGraph.update(null, selectedValue);
await healthGraph.update(null, $(this).val());
$('#spinner').hide();
});
$("#stacked-select").change(async function() {
$('#spinner').show();
await healthGraph.update(null, null, $(this).is(':checked'));
$('#spinner').hide();
});
}).catch((err) => {
$('#info-disabled').show();
$('#main').hide();
@ -160,7 +166,7 @@ POSSIBILITY OF SUCH DAMAGE.
<select id="health-subcategory-select" class="selectpicker" data-width="200px" data-live-search="true" data-container="body"></select>
</div>
<div class="label-select-pair ">
<div class="label-select-pair">
<label for="detail-select"><b>{{ lang._('Granularity') }}</b></label>
<select id="detail-select" class="selectpicker" data-width="200px">
<option value="0">{{ lang._('Default (%d minute)') | format('1') }}</option>
@ -170,6 +176,11 @@ POSSIBILITY OF SUCH DAMAGE.
</select>
</div>
<div class="label-select-pair" style="height: 55px">
<label for="stacked-select"><b>{{ lang._('Stacked') }}</b></label>
<input id="stacked-select" type="checkbox"/>
</div>
<button id="export" class="btn btn-default" data-toggle="tooltip" data-original-title="{{ lang._('Export current selection as CSV')}}" style="align-self: flex-end;">
<span class="fa fa-cloud-download"></span>
</button>

View File

@ -35,6 +35,7 @@ class HealthGraph {
this.currentSystem = null;
this.currentDetailLevel = 0;
this.currentStacked = false;
}
async initialize() {
@ -54,17 +55,22 @@ class HealthGraph {
return this.rrdList;
}
async update(system = null, detailLevel = null) {
if (system === null)
async update(system = null, detailLevel = null, stacked = null) {
if (system === null) {
system = this.currentSystem;
else
} else {
this.currentSystem = system;
if (detailLevel === null)
}
if (detailLevel === null) {
detailLevel = this.currentDetailLevel;
else
} else {
this.currentDetailLevel = detailLevel;
}
if (stacked === null) {
stacked = this.currentStacked;
} else {
this.currentStacked = stacked;
}
const data = await this._fetchData();
const formatted = this._formatData(data.set);
@ -73,6 +79,7 @@ class HealthGraph {
this.chart.data.datasets = formatted;
this.chart.options.scales.y.title.text = data['y-axis_label'];
this.chart.options.scales.y.stacked = stacked;
this.chart.options.plugins.title.text = data['title'];
this.chart.options.plugins.zoom.limits.x.minRange = this._getMinRange(stepSize * 1000);
this.chart.update();