Commit a65bd84f authored by Tomas Pettersson's avatar Tomas Pettersson 🏸

added example graph

parent 0566eaec
......@@ -24,6 +24,7 @@
<script src="../bower_components/uikit/js/components/notify.min.js"></script>
<script src="../bower_components/reqwest/reqwest.js"></script>
<script src="../bower_components/moment/moment.js"></script>
<script src="../bower_components/chart.js/dist/Chart.js"></script>
<script src="../src/stw-padmws-graph.js"></script>
<!-- endbower -->
......
.graph-modal {
font: 400 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.graph-modal .header-padding {
padding : 50px;
}
.graph-modal .chart-padding {
padding : 15px;
height : 400px;
}
\ No newline at end of file
......@@ -47,17 +47,61 @@ var Graph = (function () {
$(graphModal).appendTo('body');
var dialog = self.createDom('div', 'uk-modal-dialog uk-modal-dialog-blank', graphModal);
var close = self.createDom('button', 'uk-modal-close uk-close', dialog);
var mainDiv = self.createDom('div', 'uk-grid uk-flex-middle', dialog);
var chartDiv = self.createDom('div', 'uk-width-medium-1-2 uk-height-viewport', mainDiv);
var selectionDiv = self.createDom('div', 'uk-width-medium-1-2', mainDiv);
var header = self.createDom('h1', '', selectionDiv);
header.textContent = "Graph";
var radioDiv = self.createDom('div', 'uk-width-medium-1-3', selectionDiv);
var radioButtons = self.createDom('p', '', radioDiv);
radioButtons.textContent = "Radiobuttons go here";
var mainDiv = self.createDom('div', 'uk-grid uk-flex-top uk-height-viewport', dialog);
var selectionDiv = self.createDom('div', 'uk-width-1-1 header-padding', mainDiv);
var selectionForm = self.createDom('form', 'uk-form', selectionDiv);
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 chartDiv = self.createDom('div', 'uk-width-1-1', mainDiv);
self.chartCanvas = self.createDom('canvas', 'chart-padding', chartDiv);
$(selectionForm).submit(function (e) {
return false;
});
$('#' + id).on({
'show.uk.modal': function () {
console.log("Modal is visible.");
var myChart = new Chart(self.chartCanvas, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
responsive: true
}
});
}
});
};
......
{"version":3,"file":"stw-padmws-graph.js","sourceRoot":"","sources":["stw-padmws-graph.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
{"version":3,"file":"stw-padmws-graph.js","sourceRoot":"","sources":["stw-padmws-graph.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
......@@ -6,7 +6,7 @@
class Graph {
private container: HTMLElement;
private chartCanvas: HTMLCanvasElement;
private lang: string;
private langData: any;
......@@ -59,18 +59,66 @@ class Graph {
$(graphModal).appendTo('body');
var dialog = <HTMLDivElement>self.createDom('div', 'uk-modal-dialog uk-modal-dialog-blank', graphModal);
var close = <HTMLButtonElement>self.createDom('button', 'uk-modal-close uk-close', dialog);
var mainDiv = <HTMLDivElement>self.createDom('div', 'uk-grid uk-flex-middle', dialog);
var chartDiv = <HTMLDivElement>self.createDom('div', 'uk-width-medium-1-2 uk-height-viewport', mainDiv);
var selectionDiv = <HTMLDivElement>self.createDom('div', 'uk-width-medium-1-2', mainDiv);
var header = <HTMLDivElement>self.createDom('h1', '', selectionDiv);
header.textContent = "Graph";
var radioDiv = <HTMLDivElement>self.createDom('div', 'uk-width-medium-1-3', selectionDiv);
var radioButtons = <HTMLDivElement>self.createDom('p', '', radioDiv);
radioButtons.textContent = "Radiobuttons go here";
var mainDiv = <HTMLDivElement>self.createDom('div', 'uk-grid uk-flex-top uk-height-viewport', dialog);
var selectionDiv = <HTMLDivElement>self.createDom('div', 'uk-width-1-1 header-padding', mainDiv);
var selectionForm = <HTMLDivElement>self.createDom('form', 'uk-form', selectionDiv);
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 chartDiv = <HTMLDivElement>self.createDom('div', 'uk-width-1-1', mainDiv);
self.chartCanvas = <HTMLCanvasElement>self.createDom('canvas', 'chart-padding', chartDiv);
$(selectionForm).submit(function(e){
return false;
});
$('#'+id).on({
'show.uk.modal': function () {
console.log("Modal is visible.");
var myChart = new Chart(self.chartCanvas, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
responsive: true
}
});
}
});
}
......
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