Skip to content

GitLab

S
stw-padmws-graph
Commit 69849fa3 authored by Tomas Pettersson's avatar Tomas Pettersson 🏸
Browse files
Options

updated structure

parent a176996e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 226 additions and 108 deletions
src/stw-padmws-graph.js
View file @ 69849fa3
......@@ -65,6 +65,7 @@ var Graph = (function () {
});
var chartColors = {
red: 'rgb(255, 99, 132)',
black: 'rgb(0, 0, 0)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
......@@ -74,35 +75,10 @@ var Graph = (function () {
};
$('#' + targetid).on({
'show.uk.modal': function () {
var timeFormat = 'YYYY-MM-DD HH:mm';
self.chart = new Chart(self.chartCanvas, {
type: 'line',
data: {
datasets: [{
fill: false,
borderColor: chartColors.red,
label: 'Dispersed oil'
},
{
fill: false,
borderColor: chartColors.orange,
label: 'Oil on Seabed'
},
{
fill: false,
borderColor: chartColors.yellow,
label: 'Oil on shore'
},
{
fill: false,
borderColor: chartColors.green,
label: 'Oil at surface'
},
{
fill: false,
borderColor: chartColors.blue,
label: 'Oil volume'
}]
datasets: []
},
options: {
legend: {
......@@ -135,7 +111,7 @@ var Graph = (function () {
display: true,
scaleLabel: {
display: true,
labelString: 'm3'
labelString: 'Cubic meters (m3)'
}
}]
}
......@@ -144,11 +120,34 @@ var Graph = (function () {
function addData(dataset, datearray, dataarray) {
for (var i = 0; i < dataarray.length; i++) {
dataset.data.push({
x: moment.utc(datearray.datetime[i]).format(timeFormat),
x: datearray.datetime[i],
y: dataarray[i]
});
}
}
function configItem(label, color) {
return {
fill: false,
borderColor: color,
label: label,
data: []
};
}
var datasets = {
'meterpersecond': [
configItem('Wind (m/s)', chartColors.blue)
]
};
oilcubicButton.onclick = function (evt) {
self.chart.data.datasets = datasets['cubicmeter'];
self.chart.options.scales.yAxes[0].scaleLabel.labelString = "Cubic meters (m3)";
self.chart.update();
};
oilpercentageButton.onclick = function (evt) {
self.chart.data.datasets = datasets['percentage'];
self.chart.options.scales.yAxes[0].scaleLabel.labelString = "Percentage (%)";
self.chart.update();
};
reqwest({
url: "/demo/graph/" + self.id,
method: 'get',
......@@ -156,12 +155,68 @@ var Graph = (function () {
success: function (jsondata) {
console.log(jsondata);
if (jsondata.cubicmeter) {
addData(self.chart.data.datasets[0], jsondata.millisecond, jsondata.cubicmeter.dispersed);
addData(self.chart.data.datasets[1], jsondata.millisecond, jsondata.cubicmeter.seabed);
addData(self.chart.data.datasets[2], jsondata.millisecond, jsondata.cubicmeter.shore);
addData(self.chart.data.datasets[3], jsondata.millisecond, jsondata.cubicmeter.surface);
addData(self.chart.data.datasets[4], jsondata.millisecond, jsondata.cubicmeter.volume);
datasets['cubicmeter'] = [
configItem('Oil volume', chartColors.blue),
configItem('Oil on shore', chartColors.red),
configItem('Oil on seabed', chartColors.yellow),
configItem('Oil at surface', chartColors.black),
configItem('Dispersed oil', chartColors.orange)
];
addData(datasets['cubicmeter'][0], jsondata.millisecond, jsondata.cubicmeter.volume);
addData(datasets['cubicmeter'][1], jsondata.millisecond, jsondata.cubicmeter.shore);
addData(datasets['cubicmeter'][2], jsondata.millisecond, jsondata.cubicmeter.seabed);
addData(datasets['cubicmeter'][3], jsondata.millisecond, jsondata.cubicmeter.surface);
addData(datasets['cubicmeter'][4], jsondata.millisecond, jsondata.cubicmeter.dispersed);
}
if (jsondata.percentage) {
datasets['percentage'] = [
configItem('Evaporated oil', chartColors.blue),
configItem('Oil on shore', chartColors.red),
configItem('Oil on seabed', chartColors.yellow),
configItem('Oil at surface', chartColors.black),
configItem('Dispersed oil', chartColors.orange),
configItem('Water content', chartColors.purple)
];
addData(datasets['percentage'][0], jsondata.millisecond, jsondata.percentage.evaporated);
addData(datasets['percentage'][1], jsondata.millisecond, jsondata.percentage.shore);
addData(datasets['percentage'][2], jsondata.millisecond, jsondata.percentage.seabed);
addData(datasets['percentage'][3], jsondata.millisecond, jsondata.percentage.surface);
addData(datasets['percentage'][4], jsondata.millisecond, jsondata.percentage.dispersed);
addData(datasets['percentage'][5], jsondata.millisecond, jsondata.percentage.watercontent);
}
if (jsondata.cst) {
datasets['cst'] = [
configItem('Viscosity', chartColors.blue)
];
addData(datasets['cst'][0], jsondata.millisecond, jsondata.cst.viscosity);
}
if (jsondata.degree) {
datasets['degree'] = [
configItem('Current (degree)', chartColors.blue),
configItem('Wind (degree)', chartColors.red)
];
addData(datasets['degree'][0], jsondata.millisecond, jsondata.degree.current);
addData(datasets['degree'][0], jsondata.millisecond, jsondata.degree.wind);
}
if (jsondata.kilopercubicmeter) {
datasets['kilopercubicmeter'] = [
configItem('Density', chartColors.blue)
];
addData(datasets['kilopercubicmeter'][0], jsondata.millisecond, jsondata.kilopercubicmeter.density);
}
if (jsondata.knot) {
datasets['knot'] = [
configItem('Current (knot)', chartColors.blue)
];
addData(datasets['knot'][0], jsondata.millisecond, jsondata.knot.current);
}
if (jsondata.meterpersecond) {
datasets['meterpersecond'] = [
configItem('Wind (m/s)', chartColors.blue)
];
addData(datasets['meterpersecond'][0], jsondata.millisecond, jsondata.meterpersecond.wind);
}
self.chart.data.datasets = datasets['cubicmeter'];
self.chart.update();
}
});
......
src/stw-padmws-graph.js.map
View file @ 69849fa3
This diff is collapsed.
src/stw-padmws-graph.ts
View file @ 69849fa3
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment