linse/seweb
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve graphics layout

Browse Source 
- '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
Download Patch File Download Diff File Expand all files Collapse all files

20
client/jsFiles/SEAWebClientGraphics.js
View File

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

24
influxdb.py
View File

@ -496,13 +496,16 @@ class InfluxDataGetter:
fields = [record.get_value() for record in records] fields = [record.get_value() for record in records]
for param in variable["params"].keys(): for param in variable["params"].keys():
if param+"_float" in fields: if param+"_float" in fields:
res.append({ curve = {
"name": variable["name"] if param == "value" else variable["name"]+"."+param, "name": variable["name"] if param == "value" else variable["name"]+"."+param,
"label": variable["label"] if param == "value" else variable["label"]+"."+param, "label": variable["label"] if param == "value" else variable["label"]+"."+param,
"cat": variable["params"][param]["cat"], "cat": variable["params"][param]["cat"],
"color": variable["params"][param]["color"], "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 return res
@ -521,16 +524,11 @@ class InfluxDataGetter:
groups = {} groups = {}
for available_variable in available_variables: for available_variable in available_variables:
key = available_variable["unit"] unit = available_variable.pop("unit")
if available_variable["cat"] != "*": key = available_variable.pop("cat").replace("*", unit)
key = available_variable["cat"]
if key not in groups.keys(): if key not in groups.keys():
groups[key] = {"tag":key, "unit":available_variable["unit"], "curves":[]} groups[key] = {"tag":key, "unit": unit, "curves":[]}
groups[key]["curves"].append({ groups[key]["curves"].append(available_variable)
"name":available_variable["name"],
"label":available_variable["label"],
"color":available_variable["color"],
})
return list(groups.values()) return list(groups.values())
@ -721,4 +719,4 @@ class InfluxDataGetter:
return seconds * 1000000000 return seconds * 1000000000
def _milliseconds_to_nanoseconds(self, milliseconds): def _milliseconds_to_nanoseconds(self, milliseconds):
return milliseconds * 1000000 return milliseconds * 1000000