Skip to content

Fix 'method_lines' issue in src/views/graphicsView.js #124

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
NatalyMagluy wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Fix 'method_lines' issue in src/views/graphicsView.js #124

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
29038b7
Fix 'method_lines' issue in src/views/graphicsView.js
NatalyMagluy Oct 1, 2021
13d7a3a
remove local prettier changes
NatalyMagluy Oct 1, 2021
176f584
Merge branch 'qAIRa:master' into master
NatalyMagluy Oct 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
231 changes: 105 additions & 126 deletions src/views/graphicsView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,159 +5,139 @@ import { socket } from '../index.js';
import { addZero } from '../lib/helpers.js';
import { configuration } from '../lib/graphAssets.js';

const SENSORS = [
"temperature",
"pressure",
"humidity",
"CO",
"CO_ug_m3",
"H2S",
"H2S_ug_m3",
"NO2",
"NO2_ug_m3",
"O3",
"O3_ug_m3",
"SO2",
"SO2_ug_m3",
"PM1",
"PM10",
"PM25",
"spl",
"UV",
"UVA",
"UVB",
];

const createYAxisObject = () => ({
temperature: { value: [], name: "Temperature (C)" },
pressure: { value: [], name: "Pressure (hPa)" },
humidity: { value: [], name: "Humidity (%)" },
CO: { value: [], name: "CO (ppb)" },
CO_ug_m3: { value: [], name: "CO (ug/m3)" },
H2S: { value: [], name: "H2S (ppb)" },
H2S_ug_m3: { value: [], name: "H2S (ug/m3)" },
NO2: { value: [], name: "NO2 (ppb)" },
NO2_ug_m3: { value: [], name: "NO2 (ug/m3)" },
O3: { value: [], name: "O3 (ppb)" },
O3_ug_m3: { value: [], name: "O3 (ug/m3)" },
SO2: { value: [], name: "SO2 (ppb)" },
SO2_ug_m3: { value: [], name: "SO2 (ug/m3)" },
PM1: { value: [], name: "PM1 (ug/m3)" },
PM10: { value: [], name: "PM10 (ug/m3)" },
PM25: { value: [], name: "PM2,5 (ug/m3)" },
spl: { value: [], name: "Noise (dB)" },
UV: { value: [], name: "UV" },
UVA: { value: [], name: "UVA (mW/m2)" },
UVB: { value: [], name: "UVB (mW/m2)" },
});

const dateFormat = (timestamp) => {
const date = new Date(Date.parse(timestamp));
return `${addZero(date.getHours())}:${addZero(date.getMinutes())}:${addZero(date.getSeconds())}`;
};




const dateFormat = (timestamp)=>{
const date = new Date(Date.parse(timestamp));
return (
addZero(date.getHours()) +
':' +
addZero(date.getMinutes()) +
':' +
addZero(date.getSeconds())
);

}

const createSelectQhawaxOption = (name, comercial_name) => {
const option = document.createElement('option');
option.setAttribute('value', name);
option.innerText = `${name}: ${comercial_name}`;
return option;
};

const requestOptions = async(element) => {
await noParametersRequest('AllQhawaxInMap/')
.then(q=>q.forEach(async(qhawax) => {
const addOptions = element.querySelector('#selectQhawax');
const option = document.createElement('option');
option.setAttribute('value', qhawax.name);
option.innerText =qhawax.name + ': ' + qhawax.comercial_name;
await oneParameterRequest('qhawax_status/?name=',qhawax.name)
.then(s=>s=== 'ON' ? addOptions.appendChild(option) : false)
}))
const addOptions = element.querySelector('#selectQhawax');
await noParametersRequest('AllQhawaxInMap/')
.then( q=> q.forEach(async(qhawax) => {
await oneParameterRequest('qhawax_status/?name=',qhawax.name)
.then(s =>
s === 'ON' && addOptions.appendChild(
createSelectQhawaxOption(qhawax.name, qhawax.comercial_name)))
}));
};

const createChart = (charts, id) => {
const chart = document.createElement('div');
const br = document.createElement('br');
chart.setAttribute('id', id);
chart.setAttribute('class', 'container');
charts.appendChild(chart);
charts.appendChild(br);
}

const createTraces = async (time, qhawax) => {
let trace={}
let chart={}
let layout={}
let traces = [];
const charts = document.getElementById('charts')
charts.innerHTML=''

let yAxis = {
temperature : {value:[],name: 'Temperature (C)'},
pressure : {value:[],name: 'Pressure (hPa)'},
humidity : {value:[],name: 'Humidity (%)'},
CO : {value:[],name: 'CO (ppb)'},
CO_ug_m3 : {value:[],name: 'CO (ug/m3)'},
H2S : {value:[],name: 'H2S (ppb)'},
H2S_ug_m3 : {value:[],name: 'H2S (ug/m3)'},
NO2 : {value:[],name: 'NO2 (ppb)'},
NO2_ug_m3 : {value:[],name: 'NO2 (ug/m3)'},
O3 : {value:[],name: 'O3 (ppb)'},
O3_ug_m3 : {value:[],name: 'O3 (ug/m3)'},
SO2 : {value:[],name: 'SO2 (ppb)'},
SO2_ug_m3 : {value:[],name: 'SO2 (ug/m3)'},
PM1 : {value:[],name: 'PM1 (ug/m3)'},
PM10 : {value:[],name: 'PM10 (ug/m3)'},
PM25 : {value:[],name: 'PM2,5 (ug/m3)'},
spl : {value:[],name: 'Noise (dB)'},
UV : {value:[],name: 'UV'},
UVA : {value:[],name: 'UVA (mW/m2)'},
UVB : {value:[],name: 'UVB (mW/m2)'},
}
let x = [];
await requestGraphicsData(qhawax, time)
.then(g=>g.forEach(d => {
x.push(dateFormat(d.timestamp_zone))
Object.entries(yAxis).forEach(([key, value]) => {
yAxis[key].value.push(d[key])
})

}))

const charts = document.getElementById('charts');
charts.innerHTML = '';

let yAxis = createYAxisObject();
let x = [];
await requestGraphicsData(qhawax, time)
.then(g => g.forEach(d => {
x.push(dateFormat(d.timestamp_zone));
Object.entries(yAxis).forEach(([key, value]) => {
yAxis[key].value.push(d[key]);
});
}));

Object.entries(yAxis).forEach(([key, value]) => {
const chart = document.createElement('div')
const br = document.createElement('br')
charts.appendChild(chart)
charts.appendChild(br)
chart.setAttribute('id',key)
chart.setAttribute('class','container')
})

Object.entries(yAxis).forEach(([key, value]) => {
traces=[
trace= {
y:yAxis[key].value,
x: x,
name: yAxis[key].name,
type: 'scatter',
},
chart= document.getElementById(key),
layout= { title: yAxis[key].name, showlegend: false },

]

Plotly.newPlot(traces[1], [traces[0]], traces[2], configuration);
})
return traces;
createChart(charts, key);
const trace = {
y: yAxis[key].value,
x: x,
name: yAxis[key].name,
type: 'scatter',
};
const chart = document.getElementById(key);
const layout = { title: yAxis[key].name, showlegend: false };
Plotly.newPlot(chart, [trace], layout, configuration);
});
};



const viewGraphics = () => {

const graphElem = document.createElement('div');
graphElem.setAttribute('class', 'container');
navBarQhawax(graphElem, chartView);


const graphBtn = graphElem.querySelector('#graphicBtn');

const selection = graphElem.querySelectorAll('select');
M.FormSelect.init(selection);

requestOptions(graphElem);
requestOptions(graphElem);

let selectedQhawax = '';
selection[0].onchange = () => { selectedQhawax = selection[0].value.toString();};
let selectedTime = Number;
selection[1].onchange = () => { selectedTime = selection[1].value;};
let selectedQhawax = '', selectedTime = Number;
selection[0].onchange = () => { selectedQhawax = selection[0].value.toString(); };
selection[1].onchange = () => { selectedTime = selection[1].value; };

const graphBtn = graphElem.querySelector('#graphicBtn');
graphBtn.addEventListener('click', () => {
createTraces(selectedTime, selectedQhawax);
let sensors=['temperature',
'pressure',
'humidity',
'CO',
'CO_ug_m3',
'H2S',
'H2S_ug_m3',
'NO2',
'NO2_ug_m3',
'O3',
'O3_ug_m3',
'SO2',
'SO2_ug_m3',
'PM1',
'PM10',
'PM25',
'spl',
'UV',
'UVA',
'UVB']
socket.on(`${selectedQhawax}_processed`, res => {
if (res.ID === selectedQhawax) {
let index=0;
sensors.forEach(s=>{
const chart = document.getElementById(s)
if(chart){
SENSORS.forEach(s => {
const chart = document.getElementById(s);
if (chart) {
Plotly.extendTraces(
chart,
{ y: [[res[s]]], x: [[dateFormat(res.timestamp_zone)]] },[0]);
index++;
{ y: [[res[s]]], x: [[dateFormat(res.timestamp_zone)]] },
[0]);
}

});
}
});
Expand All @@ -167,4 +147,3 @@ const viewGraphics = () => {
};

export { viewGraphics, dateFormat, requestOptions, createTraces};