improve graphics layout

- 'bevel' line style prohibits 'peaks' on locally noisy values
- fix option 'stepped' instead of 'steppedLine'
- set period to 0 for target parameters
- thinker lines, adjustable by a constant
This commit is contained in:
l_samenv
2024-09-27 10:54:27 +02:00
parent 7184d28047
commit e71cb74391
2 changed files with 22 additions and 22 deletions

View File

@ -1667,6 +1667,7 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
legend.style.display = 'none';
let margin = 10;
let linewidth = 3;
canvas.addEventListener('mouseover', function(e){
graphs.bringToFront(legend);
@ -1719,7 +1720,7 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
function addDataset(key, data, opts){
let dataset_index = chart.data.datasets.length;
chart.data.datasets.push({data: data, label: opts.label, key: key,
spanGaps: false, lineJoin: 'round', borderWidth: 2, steppedLine: opts.period == 0,
spanGaps: false, borderJoinStyle: 'bevel', borderWidth: linewidth, stepped: opts.period == 0,
borderColor: opts.color,fill: false, pointRadius: 0, tension:0, showLine: true});
let dataset = chart.data.datasets[dataset_index];
@ -1740,6 +1741,7 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
color.appendChild(colorline);
colorline.classList.add('colorline');
colorline.style.backgroundColor = dataset.borderColor;
colorline.style.height = linewidth + 'px';
dlabel.innerHTML = dataset.label;
//dlabel.addEventListener('click', function(evt){
@ -1767,13 +1769,13 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
for (ds of chart.data.datasets) {
ds.borderWidth = 1;
}
colorline.style.height = '2px';
dataset.borderWidth = 2;
colorline.style.height = linewidth + 'px';
dataset.borderWidth = linewidth;
dlabel.style.fontWeight = 700; // bold
} else {
if (dataset.borderWidth == 1) {
colorline.style.height = '2px';
dataset.borderWidth = 2;
colorline.style.height = linewidth + 'px';
dataset.borderWidth = linewidth;
} else {
colorline.style.height = '1px';
dataset.borderWidth = 1;
@ -1783,10 +1785,10 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
}
if (allDeselected) {
for (ds of chart.data.datasets) {
ds.borderWidth = 2;
ds.borderWidth = linewidth;
}
for (let k in legendlines) {
legendlines[k].style.height = '2px';
legendlines[k].style.height = linewidth + 'px';
}
}
}
@ -1925,10 +1927,10 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
linlog.innerHTML = "<strong>&#9746;</strong> log";
}
chart.options.scales.y.type = type;
chart.options.animation.duration = 800;
//chart.options.animation.duration = 800;
if (autoScaleFlag) graphs.autoScale(chart);
update();
setTimeout(function(){chart.options.animation.duration = 0;},850)
//setTimeout(function(){chart.options.animation.duration = 0;},850)
}
/**

View File

@ -496,13 +496,16 @@ class InfluxDataGetter:
fields = [record.get_value() for record in records]
for param in variable["params"].keys():
if param+"_float" in fields:
res.append({
curve = {
"name": variable["name"] if param == "value" else variable["name"]+"."+param,
"label": variable["label"] if param == "value" else variable["label"]+"."+param,
"cat": variable["params"][param]["cat"],
"color": variable["params"][param]["color"],
"unit": variable["params"][param]["unit"]
})
"unit": variable["params"][param]["unit"],
}
if param == 'target':
curve['period'] = 0
res.append(curve)
return res
@ -521,16 +524,11 @@ class InfluxDataGetter:
groups = {}
for available_variable in available_variables:
key = available_variable["unit"]
if available_variable["cat"] != "*":
key = available_variable["cat"]
unit = available_variable.pop("unit")
key = available_variable.pop("cat").replace("*", unit)
if key not in groups.keys():
groups[key] = {"tag":key, "unit":available_variable["unit"], "curves":[]}
groups[key]["curves"].append({
"name":available_variable["name"],
"label":available_variable["label"],
"color":available_variable["color"],
})
groups[key] = {"tag":key, "unit": unit, "curves":[]}
groups[key]["curves"].append(available_variable)
return list(groups.values())