Commit 928cf1c4 authored by Tomas Pettersson's avatar Tomas Pettersson 🏸

labels update

parent 69849fa3
......@@ -54,12 +54,58 @@ var Graph = (function () {
var selectionFieldset = self.createDom('fieldset', '', selectionForm);
var selectionLegend = self.createDom('legend', '', selectionFieldset);
selectionLegend.textContent = "Graph";
var oilcubicButton = self.createDom('button', 'uk-button', selectionFieldset);
oilcubicButton.textContent = "Oil m3";
var oilpercentageButton = self.createDom('button', 'uk-button', selectionFieldset);
oilpercentageButton.textContent = "Oil %";
var cubicmeterButton = self.createDom('button', 'uk-button uk-margin-right', selectionFieldset);
cubicmeterButton.textContent = "Oil m3";
var percentageButton = self.createDom('button', 'uk-button uk-margin-right', selectionFieldset);
percentageButton.textContent = "Oil %";
var cstButton = self.createDom('button', 'uk-button uk-margin-right', selectionFieldset);
cstButton.textContent = "Viscosity";
var degreeButton = self.createDom('button', 'uk-button uk-margin-right', selectionFieldset);
degreeButton.textContent = "Wind/Current Direction";
var kilopercubicmeterButton = self.createDom('button', 'uk-button uk-margin-right', selectionFieldset);
kilopercubicmeterButton.textContent = "Density";
var knotButton = self.createDom('button', 'uk-button uk-margin-right', selectionFieldset);
knotButton.textContent = "Current speed";
var meterpersecondButton = self.createDom('button', 'uk-button uk-margin-right', selectionFieldset);
meterpersecondButton.textContent = "Wind speed";
var chartDiv = self.createDom('div', 'uk-width-1-1', mainDiv);
self.chartCanvas = self.createDom('canvas', 'chart-padding', chartDiv);
var datasets = {};
cubicmeterButton.onclick = function (evt) {
self.chart.data.datasets = datasets['cubicmeter'];
self.chart.options.scales.yAxes[0].scaleLabel.labelString = "Cubic meters (m3)";
self.chart.update();
};
percentageButton.onclick = function (evt) {
self.chart.data.datasets = datasets['percentage'];
self.chart.options.scales.yAxes[0].scaleLabel.labelString = "Percentage (%)";
self.chart.update();
};
cstButton.onclick = function (evt) {
self.chart.data.datasets = datasets['cst'];
self.chart.options.scales.yAxes[0].scaleLabel.labelString = "cSt";
self.chart.update();
};
degreeButton.onclick = function (evt) {
self.chart.data.datasets = datasets['degree'];
self.chart.options.scales.yAxes[0].scaleLabel.labelString = "Degrees";
self.chart.update();
};
kilopercubicmeterButton.onclick = function (evt) {
self.chart.data.datasets = datasets['kilopercubicmeter'];
self.chart.options.scales.yAxes[0].scaleLabel.labelString = "kg/m3";
self.chart.update();
};
knotButton.onclick = function (evt) {
self.chart.data.datasets = datasets['knot'];
self.chart.options.scales.yAxes[0].scaleLabel.labelString = "knots";
self.chart.update();
};
meterpersecondButton.onclick = function (evt) {
self.chart.data.datasets = datasets['meterpersecond'];
self.chart.options.scales.yAxes[0].scaleLabel.labelString = "m/s";
self.chart.update();
};
$(selectionForm).submit(function (e) {
return false;
});
......@@ -120,7 +166,7 @@ var Graph = (function () {
function addData(dataset, datearray, dataarray) {
for (var i = 0; i < dataarray.length; i++) {
dataset.data.push({
x: datearray.datetime[i],
x: moment.utc(datearray.datetime[i]).format('YYYY-MM-DD HH:mm'),
y: dataarray[i]
});
}
......@@ -133,21 +179,6 @@ var Graph = (function () {
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',
......@@ -186,33 +217,33 @@ var Graph = (function () {
}
if (jsondata.cst) {
datasets['cst'] = [
configItem('Viscosity', chartColors.blue)
configItem('Viscosity (cSt)', 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)
configItem('Current direction (degrees towards)', chartColors.blue),
configItem('Wind direction (degrees from)', chartColors.red)
];
addData(datasets['degree'][0], jsondata.millisecond, jsondata.degree.current);
addData(datasets['degree'][0], jsondata.millisecond, jsondata.degree.wind);
addData(datasets['degree'][1], jsondata.millisecond, jsondata.degree.wind);
}
if (jsondata.kilopercubicmeter) {
datasets['kilopercubicmeter'] = [
configItem('Density', chartColors.blue)
configItem('Density (kg/m3)', chartColors.blue)
];
addData(datasets['kilopercubicmeter'][0], jsondata.millisecond, jsondata.kilopercubicmeter.density);
}
if (jsondata.knot) {
datasets['knot'] = [
configItem('Current (knot)', chartColors.blue)
configItem('Current speed (knots)', chartColors.blue)
];
addData(datasets['knot'][0], jsondata.millisecond, jsondata.knot.current);
}
if (jsondata.meterpersecond) {
datasets['meterpersecond'] = [
configItem('Wind (m/s)', chartColors.blue)
configItem('Wind speed (m/s)', chartColors.blue)
];
addData(datasets['meterpersecond'][0], jsondata.millisecond, jsondata.meterpersecond.wind);
}
......
This diff is collapsed.
......@@ -68,13 +68,60 @@ class Graph {
var selectionFieldset = <HTMLDivElement>self.createDom('fieldset', '', selectionForm);
var selectionLegend = <HTMLDivElement>self.createDom('legend', '', selectionFieldset);
selectionLegend.textContent = "Graph";
var oilcubicButton = <HTMLDivElement>self.createDom('button', 'uk-button', selectionFieldset);
oilcubicButton.textContent = "Oil m3";
var oilpercentageButton = <HTMLDivElement>self.createDom('button', 'uk-button', selectionFieldset);
oilpercentageButton.textContent = "Oil %";
var cubicmeterButton = <HTMLDivElement>self.createDom('button', 'uk-button uk-margin-right', selectionFieldset);
cubicmeterButton.textContent = "Oil m3";
var percentageButton = <HTMLDivElement>self.createDom('button', 'uk-button uk-margin-right', selectionFieldset);
percentageButton.textContent = "Oil %";
var cstButton = <HTMLDivElement>self.createDom('button', 'uk-button uk-margin-right', selectionFieldset);
cstButton.textContent = "Viscosity";
var degreeButton = <HTMLDivElement>self.createDom('button', 'uk-button uk-margin-right', selectionFieldset);
degreeButton.textContent = "Wind/Current Direction";
var kilopercubicmeterButton = <HTMLDivElement>self.createDom('button', 'uk-button uk-margin-right', selectionFieldset);
kilopercubicmeterButton.textContent = "Density";
var knotButton = <HTMLDivElement>self.createDom('button', 'uk-button uk-margin-right', selectionFieldset);
knotButton.textContent = "Current speed";
var meterpersecondButton = <HTMLDivElement>self.createDom('button', 'uk-button uk-margin-right', selectionFieldset);
meterpersecondButton.textContent = "Wind speed";
var chartDiv = <HTMLDivElement>self.createDom('div', 'uk-width-1-1', mainDiv);
self.chartCanvas = <HTMLCanvasElement>self.createDom('canvas', 'chart-padding', chartDiv);
var datasets = {};
cubicmeterButton.onclick = function(evt){
self.chart.data.datasets = datasets['cubicmeter'];
self.chart.options.scales.yAxes[0].scaleLabel.labelString = "Cubic meters (m3)";
self.chart.update();
};
percentageButton.onclick = function(evt){
self.chart.data.datasets = datasets['percentage'];
self.chart.options.scales.yAxes[0].scaleLabel.labelString = "Percentage (%)";
self.chart.update();
};
cstButton.onclick = function(evt){
self.chart.data.datasets = datasets['cst'];
self.chart.options.scales.yAxes[0].scaleLabel.labelString = "cSt";
self.chart.update();
};
degreeButton.onclick = function(evt){
self.chart.data.datasets = datasets['degree'];
self.chart.options.scales.yAxes[0].scaleLabel.labelString = "Degrees";
self.chart.update();
};
kilopercubicmeterButton.onclick = function(evt){
self.chart.data.datasets = datasets['kilopercubicmeter'];
self.chart.options.scales.yAxes[0].scaleLabel.labelString = "kg/m3";
self.chart.update();
};
knotButton.onclick = function(evt){
self.chart.data.datasets = datasets['knot'];
self.chart.options.scales.yAxes[0].scaleLabel.labelString = "knots";
self.chart.update();
};
meterpersecondButton.onclick = function(evt){
self.chart.data.datasets = datasets['meterpersecond'];
self.chart.options.scales.yAxes[0].scaleLabel.labelString = "m/s";
self.chart.update();
};
$(selectionForm).submit(function (e) {
......@@ -97,13 +144,7 @@ class Graph {
self.chart = new Chart(self.chartCanvas, {
type: 'line',
data: {
datasets: [
// configItem('Dispersed oil',chartColors.red),
// configItem('Oil on Seabed',chartColors.orange),
// configItem('Oil on shore',chartColors.yellow),
// configItem('Oil at surface',chartColors.green),
// configItem('Oil volume',chartColors.blue)
]
datasets: []
},
options: {
legend: {
......@@ -146,7 +187,7 @@ class Graph {
function addData(dataset, datearray, dataarray) {
for (var i = 0; i < dataarray.length; i++) {
dataset.data.push({
x: datearray.datetime[i],
x: moment.utc(datearray.datetime[i]).format('YYYY-MM-DD HH:mm'),
y: dataarray[i]
});
}
......@@ -160,24 +201,6 @@ class Graph {
}
}
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',
......@@ -216,33 +239,33 @@ class Graph {
}
if (jsondata.cst) {
datasets['cst'] = [
configItem('Viscosity', chartColors.blue)
configItem('Viscosity (cSt)', 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)
configItem('Current direction (degrees towards)', chartColors.blue),
configItem('Wind direction (degrees from)', chartColors.red)
]
addData(datasets['degree'][0], jsondata.millisecond, jsondata.degree.current);
addData(datasets['degree'][0], jsondata.millisecond, jsondata.degree.wind);
addData(datasets['degree'][1], jsondata.millisecond, jsondata.degree.wind);
}
if (jsondata.kilopercubicmeter) {
datasets['kilopercubicmeter'] =[
configItem('Density', chartColors.blue)
configItem('Density (kg/m3)', chartColors.blue)
]
addData(datasets['kilopercubicmeter'][0], jsondata.millisecond, jsondata.kilopercubicmeter.density);
}
if (jsondata.knot) {
datasets['knot'] = [
configItem('Current (knot)', chartColors.blue)
configItem('Current speed (knots)', chartColors.blue)
]
addData(datasets['knot'][0], jsondata.millisecond, jsondata.knot.current);
}
if (jsondata.meterpersecond) {
datasets['meterpersecond'] = [
configItem('Wind (m/s)', chartColors.blue)
configItem('Wind speed (m/s)', chartColors.blue)
]
addData(datasets['meterpersecond'][0], jsondata.millisecond, jsondata.meterpersecond.wind);
}
......
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