|
|
@ -1,6 +1,7 @@ |
|
|
|
function moreInfo() { |
|
|
|
function moreInfo() { |
|
|
|
return { |
|
|
|
return { |
|
|
|
entityGroup: selectedEntityGroup, |
|
|
|
lineChart: {}, |
|
|
|
|
|
|
|
entityGroup: Alpine.store('entity').entityGroup, |
|
|
|
entityId: selectedEntityId || Alpine.store('entity').id, |
|
|
|
entityId: selectedEntityId || Alpine.store('entity').id, |
|
|
|
dopen: false, |
|
|
|
dopen: false, |
|
|
|
copen: false, |
|
|
|
copen: false, |
|
|
@ -96,33 +97,131 @@ function moreInfo() { |
|
|
|
}).render(grid); |
|
|
|
}).render(grid); |
|
|
|
}, |
|
|
|
}, |
|
|
|
drawDataChart() { |
|
|
|
drawDataChart() { |
|
|
|
Alpine.store('loading', true); |
|
|
|
Alpine.store('entity').params.split(' ').forEach((param, idx) => { |
|
|
|
if (this.entityGroup != 'POSEIDON') |
|
|
|
this.addCheckbox(param, idx); |
|
|
|
return; |
|
|
|
}); |
|
|
|
|
|
|
|
console.debug('drawing poseidon chart...'); |
|
|
|
|
|
|
|
this.lineChart = {}; |
|
|
|
|
|
|
|
var ctx = document.getElementById('data-chart').getContext('2d'); |
|
|
|
|
|
|
|
// Alpine.store('loading', true);
|
|
|
|
|
|
|
|
// if (this.entityGroup != 'POSEIDON')
|
|
|
|
|
|
|
|
// return;
|
|
|
|
|
|
|
|
console.debug('fetching...'); |
|
|
|
|
|
|
|
console.debug(Alpine.store('entity').params); |
|
|
|
const url = `/data/external/POSEIDON/${Alpine.store('entity').tspr}_${Alpine.store('entity').type}_${Alpine.store('entity').pid}`; |
|
|
|
const url = `/data/external/POSEIDON/${Alpine.store('entity').tspr}_${Alpine.store('entity').type}_${Alpine.store('entity').pid}`; |
|
|
|
fetch(url) |
|
|
|
fetch(url) |
|
|
|
.then(res => res.json()) |
|
|
|
.then(res => res.json()) |
|
|
|
.then(data => { |
|
|
|
.then(data => { |
|
|
|
Alpine.store('loading', false); |
|
|
|
Alpine.store('loading', false); |
|
|
|
console.debug(data); |
|
|
|
console.debug("data poseidon: ", data); |
|
|
|
|
|
|
|
let chartData = []; |
|
|
|
|
|
|
|
for (var i = 0; i < data.length; i++) { |
|
|
|
|
|
|
|
var item = data[i]; |
|
|
|
|
|
|
|
chartData.push({ |
|
|
|
|
|
|
|
x: new Date(item.dt), |
|
|
|
|
|
|
|
y: item.val |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
const config = { |
|
|
|
this.lineChart = new Chart( |
|
|
|
|
|
|
|
ctx, |
|
|
|
|
|
|
|
{ |
|
|
|
type: 'line', |
|
|
|
type: 'line', |
|
|
|
data: data, |
|
|
|
data: { |
|
|
|
options: { |
|
|
|
labels: chartData.map(row => row.x), |
|
|
|
responsive: true, |
|
|
|
datasets: [ |
|
|
|
plugins: { |
|
|
|
{ |
|
|
|
legend: { |
|
|
|
label: 'PARAM', |
|
|
|
position: 'top', |
|
|
|
data: chartData.map(row => row.y) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
] |
|
|
|
}, |
|
|
|
}, |
|
|
|
title: { |
|
|
|
options: { |
|
|
|
display: true, |
|
|
|
scales: { |
|
|
|
text: 'Chart.js Line Chart' |
|
|
|
xAxes: [{ |
|
|
|
|
|
|
|
type: 'time', |
|
|
|
|
|
|
|
time: { |
|
|
|
|
|
|
|
unit: 'day' |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}] |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
addCheckbox(type, index) { |
|
|
|
|
|
|
|
var label = document.createElement('label'); |
|
|
|
|
|
|
|
var checkbox = document.createElement('input'); |
|
|
|
|
|
|
|
checkbox.type = 'checkbox'; |
|
|
|
|
|
|
|
checkbox.checked = (index === 0); |
|
|
|
|
|
|
|
checkbox.addEventListener('change', function() { |
|
|
|
|
|
|
|
this.lineChart.data.datasets[index].hidden = !checkbox.checked; |
|
|
|
|
|
|
|
this.lineChart.update(); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
label.appendChild(checkbox); |
|
|
|
|
|
|
|
label.appendChild(document.createTextNode(type)); |
|
|
|
|
|
|
|
document.getElementById('checkbox-container').appendChild(label); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}; |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function poseidonChart(data) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var typeGroups = {}; |
|
|
|
|
|
|
|
for (var i = 0; i < data.length; i++) { |
|
|
|
|
|
|
|
var item = data[i]; |
|
|
|
|
|
|
|
if (!typeGroups[item.type]) { |
|
|
|
|
|
|
|
typeGroups[item.type] = []; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
typeGroups[item.type].push({ |
|
|
|
|
|
|
|
x: item.date, |
|
|
|
|
|
|
|
y: item.value |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var datasets = []; |
|
|
|
|
|
|
|
var index = 0; |
|
|
|
|
|
|
|
for (var type in typeGroups) { |
|
|
|
|
|
|
|
datasets.push({ |
|
|
|
|
|
|
|
label: type, |
|
|
|
|
|
|
|
data: typeGroups[type], |
|
|
|
|
|
|
|
borderColor: getRandomColor(), |
|
|
|
|
|
|
|
fill: false, |
|
|
|
|
|
|
|
hidden: false |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
addCheckbox(type, index++); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var ctx = document.getElementById('myChart').getContext('2d'); |
|
|
|
|
|
|
|
var myChart = new Chart(ctx, { |
|
|
|
|
|
|
|
type: 'line', |
|
|
|
|
|
|
|
data: { |
|
|
|
|
|
|
|
datasets: datasets |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
options: { |
|
|
|
|
|
|
|
scales: { |
|
|
|
|
|
|
|
xAxes: [{ |
|
|
|
|
|
|
|
type: 'time', |
|
|
|
|
|
|
|
time: { |
|
|
|
|
|
|
|
unit: 'week' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}] |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
});} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function getRandomColor() { |
|
|
|
|
|
|
|
var letters = '0123456789ABCDEF'; |
|
|
|
|
|
|
|
var color = '#'; |
|
|
|
|
|
|
|
for (var i = 0; i < 6; i++) { |
|
|
|
|
|
|
|
color += letters[Math.floor(Math.random() * 16)]; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return color; |
|
|
|
|
|
|
|
} |
|
|
|