From ca7da1f0124b3d3e46c1a172cea07480c9dc75c8 Mon Sep 17 00:00:00 2001 From: Patrick McDonagh Date: Tue, 21 Feb 2017 18:52:11 -0600 Subject: [PATCH] Converts cards to use ChartsJS, gauge off started. --- www/pocwww/pocwww/__init__.py | 3 + www/pocwww/pocwww/static/cards.js | 139 -------------- www/pocwww/pocwww/static/graphs.js | 179 ++++++++++++++++++ www/pocwww/pocwww/static/linechart.js | 137 -------------- www/pocwww/pocwww/static/theme.css | 9 + www/pocwww/pocwww/templates/cardlist.jinja2 | 9 + www/pocwww/pocwww/templates/cardsingle.jinja2 | 36 +--- www/pocwww/pocwww/templates/dashboard.jinja2 | 150 +++++++-------- .../pocwww/templates/gaugeoff_all.jinja2 | 44 +++++ www/pocwww/pocwww/templates/layout.jinja2 | 12 ++ www/pocwww/pocwww/templates/valuesall.jinja2 | 101 ---------- www/pocwww/pocwww/view_helpers.py | 20 ++ www/pocwww/pocwww/views.py | 78 ++++++-- 13 files changed, 408 insertions(+), 509 deletions(-) delete mode 100644 www/pocwww/pocwww/static/cards.js create mode 100644 www/pocwww/pocwww/static/graphs.js delete mode 100644 www/pocwww/pocwww/static/linechart.js create mode 100644 www/pocwww/pocwww/templates/gaugeoff_all.jinja2 diff --git a/www/pocwww/pocwww/__init__.py b/www/pocwww/pocwww/__init__.py index 019d116..cd44805 100644 --- a/www/pocwww/pocwww/__init__.py +++ b/www/pocwww/pocwww/__init__.py @@ -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}") diff --git a/www/pocwww/pocwww/static/cards.js b/www/pocwww/pocwww/static/cards.js deleted file mode 100644 index d98ddd5..0000000 --- a/www/pocwww/pocwww/static/cards.js +++ /dev/null @@ -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; -} diff --git a/www/pocwww/pocwww/static/graphs.js b/www/pocwww/pocwww/static/graphs.js new file mode 100644 index 0000000..0f230ce --- /dev/null +++ b/www/pocwww/pocwww/static/graphs.js @@ -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 + }); + } + }); +} diff --git a/www/pocwww/pocwww/static/linechart.js b/www/pocwww/pocwww/static/linechart.js deleted file mode 100644 index 4e473e1..0000000 --- a/www/pocwww/pocwww/static/linechart.js +++ /dev/null @@ -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; -} diff --git a/www/pocwww/pocwww/static/theme.css b/www/pocwww/pocwww/static/theme.css index ad1982c..f928621 100644 --- a/www/pocwww/pocwww/static/theme.css +++ b/www/pocwww/pocwww/static/theme.css @@ -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 diff --git a/www/pocwww/pocwww/templates/cardlist.jinja2 b/www/pocwww/pocwww/templates/cardlist.jinja2 index d89f77b..9c610eb 100644 --- a/www/pocwww/pocwww/templates/cardlist.jinja2 +++ b/www/pocwww/pocwww/templates/cardlist.jinja2 @@ -29,3 +29,12 @@ {% endblock content %} + +{% block card_dates %} +

Card Dates

+ +{% endblock card_dates %} diff --git a/www/pocwww/pocwww/templates/cardsingle.jinja2 b/www/pocwww/pocwww/templates/cardsingle.jinja2 index b6b7f07..355c90c 100644 --- a/www/pocwww/pocwww/templates/cardsingle.jinja2 +++ b/www/pocwww/pocwww/templates/cardsingle.jinja2 @@ -3,38 +3,22 @@ {% block content %}
+ BACK

{{card.timestamp | datetime('long')}}

+ + -
-
- {% endblock content %} diff --git a/www/pocwww/pocwww/templates/dashboard.jinja2 b/www/pocwww/pocwww/templates/dashboard.jinja2 index 81ae564..81cf890 100644 --- a/www/pocwww/pocwww/templates/dashboard.jinja2 +++ b/www/pocwww/pocwww/templates/dashboard.jinja2 @@ -1,98 +1,76 @@ {% extends "layout.jinja2" %} {% block content %} -
-

Henry Pump POC

-
-
-

Latest Tag Values

- {% if tag_values|length > 0 %} -
- - +
+

Henry Pump POC

+
+
+

Latest Tag Values

+ {% if tag_values|length > 0 %} +
+
+ + + + + + + + + + + + {% for t in tag_values %} - - - - - + + + + + - - - - {% for t in tag_values %} - - - - - - - - {% endfor %} - - -
NameValueTimestamp
NameValueTimestamp{{t._id}} + + {{t.value | round(3)}}{{t.timestamp | datetime('medium')}}
{{t._id}} - - {{t.value | round(3)}}{{t.timestamp | datetime('medium')}}
-
- {% else %} -

No tag values yet...

- {% endif %} - + {% endfor %} + +
-
-

Latest Card

- {% if latest_card|length > 0 %} -

{{latest_card.timestamp | datetime('long')}}

-
-
- {% else %} -

No card data yet...

- {% endif %} -
+ {% else %} +

No tag values yet...

+ {% endif %} + + +
+
+

Latest Card

+ {% if card is defined %} +

{{card.timestamp | datetime('long')}}

+ + + {% else %} +

No card data yet...

+ {% endif %}
+ - - + {% endblock content %} diff --git a/www/pocwww/pocwww/templates/gaugeoff_all.jinja2 b/www/pocwww/pocwww/templates/gaugeoff_all.jinja2 new file mode 100644 index 0000000..c961e34 --- /dev/null +++ b/www/pocwww/pocwww/templates/gaugeoff_all.jinja2 @@ -0,0 +1,44 @@ +{% extends "layout.jinja2" %} + +{% block content %} +
+
+
+

Gauge Off Data

+ {% if data is defined %} + + {% for d in data %} +

{{d.date|date('long')}}

+
+ + + + + + + + + + + + + {% for t in d.tags %} + + + + + + + + + {% endfor %} + +
NameLastMaxMinAverageTotal
{{t}}{{d['tags'][t].last | round(3)}}{{d['tags'][t].max | round(3)}}{{d['tags'][t].min | round(3)}}{{d['tags'][t].average | round(3)}}{{d['tags'][t].total | round(3)}}
+
+ {% endfor %} + {% endif %} +
+
+
+ +{% endblock content %} diff --git a/www/pocwww/pocwww/templates/layout.jinja2 b/www/pocwww/pocwww/templates/layout.jinja2 index ab1febc..1ea2406 100644 --- a/www/pocwww/pocwww/templates/layout.jinja2 +++ b/www/pocwww/pocwww/templates/layout.jinja2 @@ -31,6 +31,7 @@ + @@ -56,6 +57,10 @@ @@ -75,6 +80,13 @@
  • Fluid Shots
  • Well Tests
    • + + {% block card_dates %} + {% endblock card_dates %} + + {% block cards %} + {% endblock cards %} +
    {% block content %} diff --git a/www/pocwww/pocwww/templates/valuesall.jinja2 b/www/pocwww/pocwww/templates/valuesall.jinja2 index 306fb2a..501e730 100644 --- a/www/pocwww/pocwww/templates/valuesall.jinja2 +++ b/www/pocwww/pocwww/templates/valuesall.jinja2 @@ -60,109 +60,8 @@
    -