Converts cards to use ChartsJS, gauge off started.
This commit is contained in:
Patrick McDonagh
@@ -128,6 +128,9 @@ def main(global_config, **settings):
|
||||
config.add_route('values_time', '/values/time/{time}')
|
||||
config.add_route('json_values_time', '/json/values/time/{time}')
|
||||
|
||||
config.add_route('gaugeoff_all', '/gaugeoff')
|
||||
config.add_route('json_gaugeoff_all', '/json/gaugeoff')
|
||||
|
||||
# JSON-ONLY ROUTES
|
||||
config.add_route('json_lastcard', "/json/lastcard")
|
||||
config.add_route('json_valuesbetween_wparams', "/json/values/between/{startdt}/{enddt}")
|
||||
|
||||
@@ -1,139 +0,0 @@
|
||||
function d3_card_chart(all_position, margin) {
|
||||
var width = 640,
|
||||
height = 480,
|
||||
xlabel = "Position (in.)",
|
||||
ylabel = "Load (lbs.)" ;
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(datasets) {
|
||||
//
|
||||
// Create the plot.
|
||||
//
|
||||
|
||||
var innerwidth = width - margin.left - margin.right;
|
||||
var innerheight = height - margin.top - margin.bottom ;
|
||||
|
||||
var x_scale = d3.scale.linear()
|
||||
.range([0, innerwidth])
|
||||
// .domain([ d3.min(datasets, function(d) { return d3.min(d.x) ; }),
|
||||
// d3.max(datasets, function(d) { return d3.max(d.x); }) ]) ;
|
||||
.domain([ d3.min(all_position) - 10,
|
||||
d3.max(all_position) + 10 ]) ;
|
||||
|
||||
var y_scale = d3.scale.linear()
|
||||
.range([innerheight, 0])
|
||||
.domain([ d3.min(datasets, function(d) { return d3.min(d.y); }) - 1000,
|
||||
d3.max(datasets, function(d) { return d3.max(d.y); }) + 1000 ]) ;
|
||||
|
||||
var color_scale = d3.scale.category10()
|
||||
.domain(d3.range(datasets.length)) ;
|
||||
|
||||
var x_axis = d3.svg.axis()
|
||||
.scale(x_scale)
|
||||
.orient("bottom") ;
|
||||
|
||||
var y_axis = d3.svg.axis()
|
||||
.scale(y_scale)
|
||||
.orient("left") ;
|
||||
|
||||
var x_grid = d3.svg.axis()
|
||||
.scale(x_scale)
|
||||
.orient("bottom")
|
||||
.tickSize(-innerheight)
|
||||
.tickFormat("") ;
|
||||
|
||||
var y_grid = d3.svg.axis()
|
||||
.scale(y_scale)
|
||||
.orient("left")
|
||||
.tickSize(-innerwidth)
|
||||
.tickFormat("") ;
|
||||
|
||||
var draw_line = d3.svg.line()
|
||||
.interpolate("basis")
|
||||
.x(function(d) { return x_scale(d[0]); })
|
||||
.y(function(d) { return y_scale(d[1]); }) ;
|
||||
|
||||
var svg = d3.select(this)
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") ;
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "x grid")
|
||||
.attr("transform", "translate(0," + innerheight + ")")
|
||||
.call(x_grid) ;
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "y grid")
|
||||
.call(y_grid) ;
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + innerheight + ")")
|
||||
.call(x_axis)
|
||||
.append("text")
|
||||
.attr("dy", "-.71em")
|
||||
.attr("x", innerwidth)
|
||||
.style("text-anchor", "end")
|
||||
.text(xlabel) ;
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "y axis")
|
||||
.call(y_axis)
|
||||
.append("text")
|
||||
.attr("transform", "rotate(-90)")
|
||||
.attr("y", 6)
|
||||
.attr("dy", "0.71em")
|
||||
.style("text-anchor", "end")
|
||||
.text(ylabel) ;
|
||||
|
||||
var data_lines = svg.selectAll(".d3_xy_chart_line")
|
||||
.data(datasets.map(function(d) {return d3.zip(d.x, d.y);}))
|
||||
.enter().append("g")
|
||||
.attr("class", "d3_xy_chart_line") ;
|
||||
|
||||
data_lines.append("path")
|
||||
.attr("class", "line")
|
||||
.attr("d", function(d) {return draw_line(d); })
|
||||
.attr("stroke", function(_, i) {return color_scale(i);}) ;
|
||||
|
||||
data_lines.append("text")
|
||||
.datum(function(d, i) { return {name: datasets[i].label, final: d[d.length-1]}; })
|
||||
.attr("transform", function(d) {
|
||||
return ( "translate(" + x_scale(d.final[0]) + "," +
|
||||
y_scale(d.final[1]) + ")" ) ; })
|
||||
.attr("x", 3)
|
||||
.attr("dy", ".35em")
|
||||
.attr("fill", function(_, i) { return color_scale(i); })
|
||||
.text(function(d) { return d.name; }) ;
|
||||
|
||||
}) ;
|
||||
}
|
||||
|
||||
chart.width = function(value) {
|
||||
if (!arguments.length) return width;
|
||||
width = value;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(value) {
|
||||
if (!arguments.length) return height;
|
||||
height = value;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xlabel = function(value) {
|
||||
if(!arguments.length) return xlabel ;
|
||||
xlabel = value ;
|
||||
return chart ;
|
||||
} ;
|
||||
|
||||
chart.ylabel = function(value) {
|
||||
if(!arguments.length) return ylabel ;
|
||||
ylabel = value ;
|
||||
return chart ;
|
||||
} ;
|
||||
|
||||
return chart;
|
||||
}
|
||||
179
www/pocwww/pocwww/static/graphs.js
Normal file
179
www/pocwww/pocwww/static/graphs.js
Normal file
@@ -0,0 +1,179 @@
|
||||
function drawCards(data){
|
||||
var simple_color_scale = ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#a65628", "#f781bf"];
|
||||
var color_scale = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99','#b15928'];
|
||||
var graph_data = [] ;
|
||||
var json_data = data.card;
|
||||
var surf = document.getElementById("surfacecard");
|
||||
var down = document.getElementById("downholecard");
|
||||
|
||||
var surfaceCardData = [{
|
||||
label: 'Surface Card',
|
||||
fill: false,
|
||||
data: [],
|
||||
lineTension: 0.05,
|
||||
borderColor: color_scale[2],
|
||||
pointRadius: 2
|
||||
}];
|
||||
|
||||
var downholeCardData = [{
|
||||
label: 'Downhole Card',
|
||||
fill: false,
|
||||
data: [],
|
||||
lineTension: 0.05,
|
||||
borderColor: color_scale[1],
|
||||
pointRadius: 2
|
||||
}];
|
||||
|
||||
for (var i = 0; i < json_data['surface_position'].length; i++){
|
||||
surfaceCardData[0].data.push({
|
||||
x: json_data['surface_position'][i],
|
||||
y: json_data['surface_load'][i]
|
||||
});
|
||||
}
|
||||
|
||||
for (var i = 0; i < json_data['downhole_position'].length; i++){
|
||||
downholeCardData[0].data.push({
|
||||
x: json_data['downhole_position'][i],
|
||||
y: json_data['downhole_load'][i]
|
||||
});
|
||||
}
|
||||
|
||||
var surfaceChart = new Chart(surf, {
|
||||
type: 'line',
|
||||
responsive: true,
|
||||
data: {
|
||||
datasets: surfaceCardData
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
type: 'linear',
|
||||
position: 'bottom'
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var downholeChart = new Chart(down, {
|
||||
type: 'line',
|
||||
responsive: true,
|
||||
data: {
|
||||
datasets: downholeCardData
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
type: 'linear',
|
||||
position: 'bottom'
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function drawChart(data){
|
||||
var simple_color_scale = ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#a65628", "#f781bf"];
|
||||
var color_scale = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99','#b15928'];
|
||||
var graph_data = [] ;
|
||||
var json_data = data.values;
|
||||
var ctx = document.getElementById("valueChart");
|
||||
for (var i = 0; i < json_data.length; i++){
|
||||
var newObj = {
|
||||
label: json_data[i].tagname,
|
||||
fill: false,
|
||||
data: [],
|
||||
lineTension: 0.05,
|
||||
borderColor: color_scale[i % color_scale.length],
|
||||
pointRadius: 2
|
||||
}
|
||||
for(var j = 0; j < json_data[i].timestamps.length; j++){
|
||||
newObj.data.push({
|
||||
x: json_data[i].timestamps[j],
|
||||
y: json_data[i].currentValues[j]
|
||||
});
|
||||
}
|
||||
graph_data.push(newObj);
|
||||
}
|
||||
var scatterChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
responsive: true,
|
||||
data: {
|
||||
datasets: graph_data
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
type: 'time',
|
||||
position: 'bottom'
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
boxWidth: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function drawSlider(data){
|
||||
|
||||
var date_min = new Date(Date.parse(data.first_date));
|
||||
var date_max = new Date(Date.parse(data.last_date));
|
||||
console.log(data);
|
||||
|
||||
var min_val = date_min/1000;
|
||||
var max_val = date_max/1000;
|
||||
|
||||
var urlparts = decodeURIComponent(window.location).split("/").slice(3)
|
||||
var endD = new Date();
|
||||
var end = endD.toISOString().replace("T", " ");
|
||||
var dummyDate = new Date();
|
||||
var startD = new Date(dummyDate.setDate(endD.getDate() - 7));
|
||||
var start = startD.toISOString().replace("T", " ");
|
||||
|
||||
|
||||
var start_date = startD/1000;
|
||||
$('#slider-start').html(startD.toString());
|
||||
if(start_date < min_val){
|
||||
start_date = min_val;
|
||||
$('#slider-start').html(date_min.toString().replace("T", " "));
|
||||
}
|
||||
|
||||
var end_date = endD/1000;
|
||||
$('#slider-end').html(startD.toString());
|
||||
if(end_date > max_val){
|
||||
end_date = max_val;
|
||||
$('#slider-end').html(date_max.toString().replace("T", " "));
|
||||
}
|
||||
|
||||
$("#slider-range").slider({
|
||||
range: true,
|
||||
min: min_val,
|
||||
max: max_val,
|
||||
step: 10,
|
||||
values: [start_date, end_date],
|
||||
slide: function (e, ui) {
|
||||
var dt_cur_from = new Date(ui.values[0]*1000); //.format("yyyy-mm-dd hh:ii:ss");
|
||||
$('#slider-start').html(dt_cur_from.toString().replace("T", " "));
|
||||
|
||||
var dt_cur_to = new Date(ui.values[1]*1000); //.format("yyyy-mm-dd hh:ii:ss");
|
||||
$('#slider-end').html(dt_cur_to.toString().replace("T", " "));
|
||||
},
|
||||
stop: function(e, ui){
|
||||
var startD = new Date(ui.values[0]*1000);
|
||||
var endD = new Date(ui.values[1]*1000);
|
||||
$.ajax({
|
||||
dataType: 'json',
|
||||
url:"/json/values/between/" + startD.toISOString() + "/" + endD.toISOString(),
|
||||
success: drawChart
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1,137 +0,0 @@
|
||||
function d3_xy_chart(margin) {
|
||||
var width = 640,
|
||||
height = 480,
|
||||
xlabel = "Position (in.)",
|
||||
ylabel = "Load (lbs.)" ;
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(datasets) {
|
||||
//
|
||||
// Create the plot.
|
||||
//
|
||||
|
||||
var innerwidth = width - margin.left - margin.right;
|
||||
var innerheight = height - margin.top - margin.bottom ;
|
||||
|
||||
var x_scale = d3.scale.linear()
|
||||
.range([0, innerwidth])
|
||||
.domain([ d3.min(datasets, function(d) { return d3.min(d.x) ; }),
|
||||
d3.max(datasets, function(d) { return d3.max(d.x); }) ]) ;
|
||||
|
||||
var y_scale = d3.scale.linear()
|
||||
.range([innerheight, 0])
|
||||
.domain([ d3.min(datasets, function(d) { return d3.min(d.y); }) - 1000,
|
||||
d3.max(datasets, function(d) { return d3.max(d.y); }) + 1000 ]) ;
|
||||
|
||||
var color_scale = d3.scale.category10()
|
||||
.domain(d3.range(datasets.length)) ;
|
||||
|
||||
var x_axis = d3.svg.axis()
|
||||
.scale(x_scale)
|
||||
.orient("bottom") ;
|
||||
|
||||
var y_axis = d3.svg.axis()
|
||||
.scale(y_scale)
|
||||
.orient("left") ;
|
||||
|
||||
var x_grid = d3.svg.axis()
|
||||
.scale(x_scale)
|
||||
.orient("bottom")
|
||||
.tickSize(-innerheight)
|
||||
.tickFormat("") ;
|
||||
|
||||
var y_grid = d3.svg.axis()
|
||||
.scale(y_scale)
|
||||
.orient("left")
|
||||
.tickSize(-innerwidth)
|
||||
.tickFormat("") ;
|
||||
|
||||
var draw_line = d3.svg.line()
|
||||
.interpolate("basis")
|
||||
.x(function(d) { return x_scale(d[0]); })
|
||||
.y(function(d) { return y_scale(d[1]); }) ;
|
||||
|
||||
var svg = d3.select(this)
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") ;
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "x grid")
|
||||
.attr("transform", "translate(0," + innerheight + ")")
|
||||
.call(x_grid) ;
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "y grid")
|
||||
.call(y_grid) ;
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + innerheight + ")")
|
||||
.call(x_axis)
|
||||
.append("text")
|
||||
.attr("dy", "-.71em")
|
||||
.attr("x", innerwidth)
|
||||
.style("text-anchor", "end")
|
||||
.text(xlabel) ;
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "y axis")
|
||||
.call(y_axis)
|
||||
.append("text")
|
||||
.attr("transform", "rotate(-90)")
|
||||
.attr("y", 6)
|
||||
.attr("dy", "0.71em")
|
||||
.style("text-anchor", "end")
|
||||
.text(ylabel) ;
|
||||
|
||||
var data_lines = svg.selectAll(".d3_xy_chart_line")
|
||||
.data(datasets.map(function(d) {return d3.zip(d.x, d.y);}))
|
||||
.enter().append("g")
|
||||
.attr("class", "d3_xy_chart_line") ;
|
||||
|
||||
data_lines.append("path")
|
||||
.attr("class", "line")
|
||||
.attr("d", function(d) {return draw_line(d); })
|
||||
.attr("stroke", function(_, i) {return color_scale(i);}) ;
|
||||
|
||||
data_lines.append("text")
|
||||
.datum(function(d, i) { return {name: datasets[i].label, final: d[d.length-1]}; })
|
||||
.attr("transform", function(d) {
|
||||
return ( "translate(" + x_scale(d.final[0]) + "," +
|
||||
y_scale(d.final[1]) + ")" ) ; })
|
||||
.attr("x", 3)
|
||||
.attr("dy", ".35em")
|
||||
.attr("fill", function(_, i) { return color_scale(i); })
|
||||
.text(function(d) { return d.name; }) ;
|
||||
|
||||
}) ;
|
||||
}
|
||||
|
||||
chart.width = function(value) {
|
||||
if (!arguments.length) return width;
|
||||
width = value;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(value) {
|
||||
if (!arguments.length) return height;
|
||||
height = value;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xlabel = function(value) {
|
||||
if(!arguments.length) return xlabel ;
|
||||
xlabel = value ;
|
||||
return chart ;
|
||||
} ;
|
||||
|
||||
chart.ylabel = function(value) {
|
||||
if(!arguments.length) return ylabel ;
|
||||
ylabel = value ;
|
||||
return chart ;
|
||||
} ;
|
||||
|
||||
return chart;
|
||||
}
|
||||
@@ -23,6 +23,15 @@ body {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.allcaps{
|
||||
text-transform: uppercase;
|
||||
/*font-size: 14px;*/
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Global add-ons
|
||||
|
||||
@@ -29,3 +29,12 @@
|
||||
</table>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
||||
{% block card_dates %}
|
||||
<h3>Card Dates</h3>
|
||||
<ul class="nav nav-sidebar">
|
||||
{% for d in datelist %}
|
||||
<li><a href="/cards/{{d.date}}">{{d.date}} <span class="badge">{{d.count}}</span></a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endblock card_dates %}
|
||||
|
||||
@@ -3,38 +3,22 @@
|
||||
{% block content %}
|
||||
|
||||
<div class="content">
|
||||
<a href="/cards/{{date}}/{{datepage}}"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> BACK</a>
|
||||
<h1>{{card.timestamp | datetime('long')}}</h1>
|
||||
|
||||
<canvas id="surfacecard" height="120"></canvas>
|
||||
<canvas id="downholecard" height="120"></canvas>
|
||||
|
||||
<div class="surfacecard card"></div>
|
||||
<div class="downholecard card"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="{{request.static_url('pocwww:static/cards.js')}}"></script>
|
||||
<script>
|
||||
var margin = {top: 20, right: 80, bottom: 30, left: 250};
|
||||
var surface_data = [ { label: "Surface Card",
|
||||
x: {{card.surface_position}},
|
||||
y: {{card.surface_load}} } ] ;
|
||||
var downhole_data = [
|
||||
{ label: "Downhole Card",
|
||||
x: {{card.downhole_position}},
|
||||
y: {{card.downhole_load}} } ] ;
|
||||
|
||||
var all_position =surface_data[0]['x'].concat(downhole_data[0]['x'])
|
||||
|
||||
var xy_chart = d3_card_chart(all_position, margin)
|
||||
.width(960)
|
||||
.height(500)
|
||||
.xlabel("Position")
|
||||
.ylabel("Load") ;
|
||||
var surfSvg = d3.select(".surfacecard").append("svg")
|
||||
.datum(surface_data)
|
||||
.call(xy_chart) ;
|
||||
|
||||
var downSvg = d3.select(".downholecard").append("svg")
|
||||
.datum(downhole_data)
|
||||
.call(xy_chart) ;
|
||||
var urlparts = decodeURIComponent(window.location).split("/").slice(3)
|
||||
var cardID = parseInt(urlparts[2]);
|
||||
|
||||
$.ajax({
|
||||
dataType: 'json',
|
||||
url:"/json/card/view/" + cardID,
|
||||
success: drawCards
|
||||
});
|
||||
</script>
|
||||
{% endblock content %}
|
||||
|
||||
@@ -1,98 +1,76 @@
|
||||
{% extends "layout.jinja2" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="content">
|
||||
<h1>Henry Pump POC</h1>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h2>Latest Tag Values</h2>
|
||||
{% if tag_values|length > 0 %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<div class="content">
|
||||
<h1>Henry Pump POC</h1>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h2>Latest Tag Values</h2>
|
||||
{% if tag_values|length > 0 %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th></th>
|
||||
<th>Value</th>
|
||||
<th>Timestamp</th>
|
||||
<!-- <th>Max</th>
|
||||
<th>Min</th>
|
||||
<th>Average</th>
|
||||
<th>Total</th> -->
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
{% for t in tag_values %}
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th></th>
|
||||
<th>Value</th>
|
||||
<th>Timestamp</th>
|
||||
<!-- <th>Max</th>
|
||||
<th>Min</th>
|
||||
<th>Average</th>
|
||||
<th>Total</th> -->
|
||||
<td><a href="/values/tag/{{t._id}}">{{t._id}}</a></td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-default" title="{{t._id}}" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="right" data-content="Max: {{t.max | round(3)}}<br \>
|
||||
Min: {{t.min | round(3)}}<br \>
|
||||
Average: {{t.average | round(3)}}<br \>
|
||||
Total: {{t.total | round(3)}}">
|
||||
Details
|
||||
</button>
|
||||
</td>
|
||||
<td>{{t.value | round(3)}}</td>
|
||||
<td>{{t.timestamp | datetime('medium')}}</td>
|
||||
<!-- <td>{{t.max | round(3)}}</td>
|
||||
<td>{{t.min | round(3)}}</td>
|
||||
<td>{{t.average | round(3)}}</td>
|
||||
<td>{{t.total | round(3)}}</td> -->
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
{% for t in tag_values %}
|
||||
<tr>
|
||||
<td><a href="/values/tag/{{t._id}}">{{t._id}}</a></td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-default" title="{{t._id}}" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="right" data-content="Max: {{t.max | round(3)}}<br \>
|
||||
Min: {{t.min | round(3)}}<br \>
|
||||
Average: {{t.average | round(3)}}<br \>
|
||||
Total: {{t.total | round(3)}}">
|
||||
Details
|
||||
</button>
|
||||
</td>
|
||||
<td>{{t.value | round(3)}}</td>
|
||||
<td>{{t.timestamp | datetime('medium')}}</td>
|
||||
<!-- <td>{{t.max | round(3)}}</td>
|
||||
<td>{{t.min | round(3)}}</td>
|
||||
<td>{{t.average | round(3)}}</td>
|
||||
<td>{{t.total | round(3)}}</td> -->
|
||||
</tr>
|
||||
{% endfor %}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<h3>No tag values yet...</h3>
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h2>Latest Card</h2>
|
||||
{% if latest_card|length > 0 %}
|
||||
<h3>{{latest_card.timestamp | datetime('long')}}</h1>
|
||||
<div class="surfacecard card"></div>
|
||||
<div class="downholecard card"></div>
|
||||
{% else %}
|
||||
<h3>No card data yet...</h3>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
<h3>No tag values yet...</h3>
|
||||
{% endif %}
|
||||
|
||||
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h2>Latest Card</h2>
|
||||
{% if card is defined %}
|
||||
<h3>{{card.timestamp | datetime('long')}}</h1>
|
||||
<canvas id="surfacecard" height="140"></canvas>
|
||||
<canvas id="downholecard" height="140"></canvas>
|
||||
{% else %}
|
||||
<h3>No card data yet...</h3>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="{{request.static_url('pocwww:static/cards.js')}}"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
$('[data-toggle="popover"]').popover({html: true})
|
||||
})
|
||||
var margin = {top: 20, right: 10, bottom: 20, left: 40};
|
||||
var surface_data = [ { label: "Surface Card",
|
||||
x: {{latest_card.surface_position}},
|
||||
y: {{latest_card.surface_load}} } ] ;
|
||||
var downhole_data = [
|
||||
{ label: "Downhole Card",
|
||||
x: {{latest_card.downhole_position}},
|
||||
y: {{latest_card.downhole_load}} } ] ;
|
||||
<script>
|
||||
$.ajax({
|
||||
dataType: 'json',
|
||||
url:"/json",
|
||||
success: drawCards
|
||||
});
|
||||
|
||||
var all_position =surface_data[0]['x'].concat(downhole_data[0]['x'])
|
||||
|
||||
var xy_chart = d3_card_chart(all_position, margin)
|
||||
.width($(".surfacecard").width())
|
||||
.height(400)
|
||||
.xlabel("Position")
|
||||
.ylabel("Load") ;
|
||||
var surfSvg = d3.select(".surfacecard").append("svg")
|
||||
.datum(surface_data)
|
||||
.call(xy_chart) ;
|
||||
|
||||
var downSvg = d3.select(".downholecard").append("svg")
|
||||
.datum(downhole_data)
|
||||
.call(xy_chart) ;
|
||||
|
||||
</script>
|
||||
</script>
|
||||
{% endblock content %}
|
||||
|
||||
44
www/pocwww/pocwww/templates/gaugeoff_all.jinja2
Normal file
44
www/pocwww/pocwww/templates/gaugeoff_all.jinja2
Normal file
@@ -0,0 +1,44 @@
|
||||
{% extends "layout.jinja2" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="content">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<h2>Gauge Off Data</h2>
|
||||
{% if data is defined %}
|
||||
|
||||
{% for d in data %}
|
||||
<h3 class="allcaps">{{d.date|date('long')}}</h3>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Last</th>
|
||||
<th>Max</th>
|
||||
<th>Min</th>
|
||||
<th>Average</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for t in d.tags %}
|
||||
<tr>
|
||||
<td>{{t}}</td>
|
||||
<td>{{d['tags'][t].last | round(3)}}</td>
|
||||
<td>{{d['tags'][t].max | round(3)}}</td>
|
||||
<td>{{d['tags'][t].min | round(3)}}</td>
|
||||
<td>{{d['tags'][t].average | round(3)}}</td>
|
||||
<td>{{d['tags'][t].total | round(3)}}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="{{request.static_url('pocwww:static/graphs.js')}}"></script>
|
||||
{% endblock content %}
|
||||
@@ -31,6 +31,7 @@
|
||||
<script src="http://d3js.org/d3.v3.js"></script>
|
||||
<script src="{{request.static_url('pocwww:static/moment.min.js')}}"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
|
||||
<script type="text/javascript" src="{{request.static_url('pocwww:static/graphs.js')}}"></script>
|
||||
<!-- Latest compiled and minified JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
||||
|
||||
@@ -56,6 +57,10 @@
|
||||
</div>
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li {% if (navgroup == 'dashboard') %}class="visible-xs-inline active" {% else %} class="visible-xs-inline" {% endif %}><a href="/">Dashboard</a></li>
|
||||
<li {% if (navgroup == 'cards') %}class="visible-xs-inline active" {% else %} class="visible-xs-inline" {% endif %}><a href="/cards">Cards</a></li>
|
||||
<li {% if (navgroup == 'values') %}class="visible-xs-inline active" {% else %} class="visible-xs-inline" {% endif %}><a href="/values">Values</a></li>
|
||||
<li {% if (navgroup == 'gaugeoff') %}class="visible-xs-inline active" {% else %} class="visible-xs-inline" {% endif %}><a href="/gaugeoff">Gauge-Off</a></li>
|
||||
<li><a href="/configuration">Configuration</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -75,6 +80,13 @@
|
||||
<li><a href="/fluidshots">Fluid Shots</a></li>
|
||||
<li><a href="/welltests">Well Tests</a></li>
|
||||
</ul>
|
||||
|
||||
{% block card_dates %}
|
||||
{% endblock card_dates %}
|
||||
|
||||
{% block cards %}
|
||||
{% endblock cards %}
|
||||
|
||||
</div>
|
||||
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
|
||||
{% block content %}
|
||||
|
||||
@@ -60,109 +60,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="{{request.static_url('pocwww:static/linechart.js')}}"></script>
|
||||
<script>
|
||||
|
||||
function drawChart(data){
|
||||
var simple_color_scale = ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#a65628", "#f781bf"];
|
||||
var color_scale = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99','#b15928'];
|
||||
var graph_data = [] ;
|
||||
var json_data = data.values;
|
||||
var ctx = document.getElementById("valueChart");
|
||||
for (var i = 0; i < json_data.length; i++){
|
||||
var newObj = {
|
||||
label: json_data[i].tagname,
|
||||
fill: false,
|
||||
data: [],
|
||||
lineTension: 0.05,
|
||||
borderColor: color_scale[i % color_scale.length]
|
||||
}
|
||||
for(var j = 0; j < json_data[i].timestamps.length; j++){
|
||||
newObj.data.push({
|
||||
x: json_data[i].timestamps[j],
|
||||
y: json_data[i].currentValues[j]
|
||||
});
|
||||
}
|
||||
graph_data.push(newObj);
|
||||
}
|
||||
var scatterChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
responsive: true,
|
||||
data: {
|
||||
datasets: graph_data
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
type: 'time',
|
||||
position: 'bottom'
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
boxWidth: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function drawSlider(data){
|
||||
|
||||
var date_min = new Date(Date.parse(data.first_date));
|
||||
var date_max = new Date(Date.parse(data.last_date));
|
||||
console.log(data);
|
||||
|
||||
var min_val = date_min/1000;
|
||||
var max_val = date_max/1000;
|
||||
|
||||
var urlparts = decodeURIComponent(window.location).split("/").slice(3)
|
||||
var endD = new Date();
|
||||
var end = endD.toISOString().replace("T", " ");
|
||||
var dummyDate = new Date();
|
||||
var startD = new Date(dummyDate.setDate(endD.getDate() - 7));
|
||||
var start = startD.toISOString().replace("T", " ");
|
||||
|
||||
|
||||
var start_date = startD/1000;
|
||||
$('#slider-start').html(start);
|
||||
if(start_date < min_val){
|
||||
start_date = min_val;
|
||||
$('#slider-start').html(date_min.toISOString().replace("T", " "));
|
||||
}
|
||||
|
||||
var end_date = endD/1000;
|
||||
$('#slider-end').html(end);
|
||||
if(end_date > max_val){
|
||||
end_date = max_val;
|
||||
$('#slider-end').html(date_max.toISOString().replace("T", " "));
|
||||
}
|
||||
|
||||
$("#slider-range").slider({
|
||||
range: true,
|
||||
min: min_val,
|
||||
max: max_val,
|
||||
step: 10,
|
||||
values: [start_date, end_date],
|
||||
slide: function (e, ui) {
|
||||
var dt_cur_from = new Date(ui.values[0]*1000); //.format("yyyy-mm-dd hh:ii:ss");
|
||||
$('#slider-start').html(dt_cur_from.toISOString().replace("T", " "));
|
||||
|
||||
var dt_cur_to = new Date(ui.values[1]*1000); //.format("yyyy-mm-dd hh:ii:ss");
|
||||
$('#slider-end').html(dt_cur_to.toISOString().replace("T", " "));
|
||||
},
|
||||
stop: function(e, ui){
|
||||
var startD = new Date(ui.values[0]*1000);
|
||||
var endD = new Date(ui.values[1]*1000);
|
||||
$.ajax({
|
||||
dataType: 'json',
|
||||
url:"/json/values/between/" + startD.toISOString() + "/" + endD.toISOString(),
|
||||
success: drawChart
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var urlparts = decodeURIComponent(window.location).split("/").slice(3)
|
||||
var endD = new Date();
|
||||
var end = endD.toISOString();
|
||||
|
||||
@@ -55,3 +55,23 @@ def card_page(request):
|
||||
|
||||
cards = request.db['cards'].find({'timestamp': {'$lt': cards_date_end, '$gte': cards_date_start}}).sort("timestamp", -1).skip(num_per_page * (page_num - 1)).limit(num_per_page)
|
||||
return {'cards': list(cards), 'pagination': Pagination(page_num, num_per_page, num_cards), 'cards_date': cards_date_start.strftime("%Y-%m-%d"), 'navgroup': 'cards'}
|
||||
|
||||
|
||||
def get_all_dates_with_cards(request):
|
||||
datelist = []
|
||||
dateagg = request.db['cards'].aggregate([
|
||||
{"$group": {
|
||||
"_id": {"$concat": [
|
||||
{"$substr": [{"$year": "$timestamp"}, 0, 4]},
|
||||
"-",
|
||||
{"$substr": [{"$month": "$timestamp"}, 0, 2]},
|
||||
"-",
|
||||
{"$substr": [{"$dayOfMonth": "$timestamp"}, 0, 2]},
|
||||
]},
|
||||
"count": {"$sum": 1}
|
||||
}},
|
||||
{"$sort": {"_id": -1}}
|
||||
])
|
||||
for d in dateagg:
|
||||
datelist.append({'count': d['count'], 'date': datetime.strptime(d['_id'], "%Y-%m-%d").date()})
|
||||
return list(datelist)
|
||||
|
||||
@@ -6,29 +6,13 @@ from .view_helpers import *
|
||||
@view_config(route_name='home', renderer='templates/dashboard.jinja2')
|
||||
@view_config(route_name="json_snapshot", renderer="prettyjson")
|
||||
def my_view(request):
|
||||
return {'project': 'POC Web Interface', 'navgroup': 'dashboard', 'tag_values': get_lastest_tag_values(request), 'latest_card': get_latest_card(request)}
|
||||
return {'project': 'POC Web Interface', 'navgroup': 'dashboard', 'tag_values': get_lastest_tag_values(request), 'card': get_latest_card(request)}
|
||||
|
||||
|
||||
@view_config(route_name='cards', renderer='templates/datelist.jinja2')
|
||||
@view_config(route_name='json_cards', renderer='prettyjson')
|
||||
def cards(request):
|
||||
datelist = []
|
||||
dateagg = request.db['cards'].aggregate([
|
||||
{"$group": {
|
||||
"_id": {"$concat": [
|
||||
{"$substr": [{"$year": "$timestamp"}, 0, 4]},
|
||||
"-",
|
||||
{"$substr": [{"$month": "$timestamp"}, 0, 2]},
|
||||
"-",
|
||||
{"$substr": [{"$dayOfMonth": "$timestamp"}, 0, 2]},
|
||||
]},
|
||||
"count": {"$sum": 1}
|
||||
}},
|
||||
{"$sort": {"_id": -1}}
|
||||
])
|
||||
for d in dateagg:
|
||||
datelist.append({'count': d['count'], 'date': datetime.strptime(d['_id'], "%Y-%m-%d").date()})
|
||||
return {'datelist': list(datelist), 'navgroup': 'cards'}
|
||||
return {'datelist': get_all_dates_with_cards(request), 'navgroup': 'cards'}
|
||||
|
||||
|
||||
@view_config(route_name='cards_date', renderer='templates/cardlist.jinja2')
|
||||
@@ -36,7 +20,9 @@ def cards(request):
|
||||
@view_config(route_name='json_cards_date', renderer='prettyjson')
|
||||
@view_config(route_name='json_cards_page', renderer='prettyjson')
|
||||
def cards_page(request):
|
||||
return card_page(request)
|
||||
cp = card_page(request)
|
||||
cp['datelist'] = get_all_dates_with_cards(request)
|
||||
return cp
|
||||
|
||||
|
||||
@view_config(route_name='card_single', renderer='templates/cardsingle.jinja2')
|
||||
@@ -48,7 +34,15 @@ def card_single(request):
|
||||
except IndexError:
|
||||
pass
|
||||
|
||||
return {"card": card, 'navgroup': 'cards'}
|
||||
datepage_url = request.referrer.split("/")[3:]
|
||||
page_num = 1
|
||||
carddate = ""
|
||||
if len(datepage_url) > 2:
|
||||
page_num = int(datepage_url[2])
|
||||
if len(datepage_url) > 1:
|
||||
carddate = datepage_url[1]
|
||||
|
||||
return {"card": card, 'navgroup': 'cards', 'datelist': get_all_dates_with_cards(request), 'date': carddate, 'datepage': page_num}
|
||||
|
||||
|
||||
@view_config(route_name='values_all', renderer="templates/valuesall.jinja2")
|
||||
@@ -70,3 +64,47 @@ def values_tag(request):
|
||||
|
||||
tag_data = list(map(rem_id, single_tag))
|
||||
return {'navgroup': 'values', 'tag_values': tag_data, 'tagname': tagname}
|
||||
|
||||
|
||||
@view_config(route_name="gaugeoff_all", renderer="templates/gaugeoff_all.jinja2")
|
||||
@view_config(route_name="json_gaugeoff_all", renderer="prettyjson")
|
||||
def gaugeoff_all(request):
|
||||
gaugeoff_list = []
|
||||
dateagg = list(request.db['gaugeOff'].aggregate(
|
||||
[
|
||||
{
|
||||
'$project': {
|
||||
'yearMonthDay': {'$dateToString': {'format': "%Y-%m-%d", 'date': "$timestamp"}},
|
||||
'tagname': 1,
|
||||
'dailyTotal': 1,
|
||||
'dailyAverage': 1,
|
||||
'maxDailyValue': 1,
|
||||
'minDailyValue': 1,
|
||||
'currentValue': 1
|
||||
}
|
||||
},
|
||||
{
|
||||
'$group': {
|
||||
'_id': "$yearMonthDay",
|
||||
'tags': {'$push': {'name': "$tagname"}},
|
||||
'totals': {'$push': {'total': "$dailyTotal"}},
|
||||
'averages': {'$push': {'average': "$dailyAverage"}},
|
||||
'max': {'$push': {'max': "$maxDailyValue"}},
|
||||
'min': {'$push': {'min': "$minDailyValue"}},
|
||||
'last': {'$push': {'last': "$currentValue"}}
|
||||
}
|
||||
}
|
||||
]))
|
||||
for d in dateagg:
|
||||
newGO = {'date': datetime.strptime(d["_id"], '%Y-%m-%d'), 'tags': {}}
|
||||
for i in range(0, len(d['tags'])):
|
||||
newTagObj = {
|
||||
"max": d['max'][i]['max'],
|
||||
"min": d['min'][i]['min'],
|
||||
"last": d['last'][i]['last'],
|
||||
"total": d['totals'][i]['total'],
|
||||
"average": d['averages'][i]['average'],
|
||||
}
|
||||
newGO['tags'][d['tags'][i]['name']] = newTagObj
|
||||
gaugeoff_list.append(newGO)
|
||||
return {'navgroup': 'gaugeoff', 'data': gaugeoff_list}
|
||||
|
||||
Reference in New Issue
Block a user