Drawing cards is working

src/main/java/com/henrypump/poc/Database.java

@@ -27,7 +27,7 @@ public class Database {
     private MongoDatabase database;
 
     Database(){
-        mongoClient = new MongoClient("10.20.155.202");
+        mongoClient = new MongoClient();
         database = mongoClient.getDatabase(pocDatabase);
     }
 

www/pocwww/development.ini

@@ -18,8 +18,8 @@ pyramid.includes =
 # '127.0.0.1' and '::1'.
 # debugtoolbar.hosts = 127.0.0.1 ::1
 
-# mongo_uri = mongodb://localhost:27017/poc
-mongo_uri = mongodb://10.20.155.202:27017/poc
+mongo_uri = mongodb://localhost:27017/poc
+# mongo_uri = mongodb://10.20.155.202:27017/poc
 
 
 ###

www/pocwww/pocwww/__init__.py

@@ -1,4 +1,5 @@
 from pyramid.config import Configurator
+from datetime import datetime
 
 try:
     # for python 2
@@ -10,11 +11,47 @@ except ImportError:
 from pymongo import MongoClient
 
 
+def format_datetime(inpDate, format='medium'):
+    if format == 'long':
+        format = "%A, %B %d %Y at %I:%M:%S %p"
+    elif format == 'medium':
+        format = "%a, %b %d %Y %I:%M:%S %p"
+    elif format == 'short':
+        format = "%m/%d/%Y %I:%M:%S %p"
+    return inpDate.strftime(format)
+
+
+def format_dateString(inpDate, format='medium'):
+    iDate = datetime.strptime(inpDate, '%Y-%m-%d')
+    if format == 'long':
+        format = "%A, %B %d %Y"
+    elif format == 'medium':
+        format = "%a, %b %d %Y"
+    elif format == 'short':
+        format = "%m/%d/%Y"
+    return iDate.strftime(format)
+
+
+def format_date(inpDate, format='medium'):
+    if format == 'long':
+        format = "%A, %B %d %Y"
+    elif format == 'medium':
+        format = "%a, %b %d %Y"
+    elif format == 'short':
+        format = "%m/%d/%Y"
+    return inpDate.strftime(format)
+
+
 def main(global_config, **settings):
     """ This function returns a Pyramid WSGI application.
     """
     config = Configurator(settings=settings)
     config.include('pyramid_jinja2')
+    config.commit()  # this is needed or you will get None back on the next line
+    jinja2_env = config.get_jinja2_environment()
+    jinja2_env.filters['datetime'] = format_datetime
+    jinja2_env.filters['date'] = format_date
+    jinja2_env.filters['datestring'] = format_dateString
 
     db_url = urlparse(settings['mongo_uri'])
     config.registry.db = MongoClient(

www/pocwww/pocwww/static/theme.css

@@ -119,3 +119,30 @@ body {
   display: inline-block;
   border-radius: 50%;
 }
+
+.card {
+  font: 10px sans-serif;
+}
+
+.axis path,
+.axis line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+
+.grid path,
+.grid line {
+  fill: none;
+  stroke: rgba(0, 0, 0, 0.25);
+  shape-rendering: crispEdges;
+}
+
+.x.axis path {
+  display: none;
+}
+
+.line {
+  fill: none;
+  stroke-width: 2.5px;
+}

www/pocwww/pocwww/templates/cardlist.jinja2

@@ -5,7 +5,7 @@
 
 {% block content %}
 <div class="content">
-    <h1>Card Data Page {{page_num}} / {{total_pages}}</h1>
+    <h1>Cards for {{cards_date | datestring('long')}}</h1>
 
     <div style="text-center">
         {{render_pagination(pagination, "/cards/" + cards_date)}}
@@ -22,7 +22,7 @@
             {%  for card in cards %}
                 <tr>
                     <td>{{card.strokeNumber}}</td>
-                    <td><a href="/card/view/{{card.strokeNumber}}">{{card.timestamp}}</a></td>
+                    <td><a href="/card/view/{{card.strokeNumber}}">{{card.timestamp | datetime('long')}}</a></td>
                 </tr>
             {% endfor %}
         </tbody>

www/pocwww/pocwww/templates/cardsingle.jinja2

@@ -1,11 +1,174 @@
 {% extends "layout.jinja2" %}
 
 {% block content %}
+
 <div class="content">
-  <pre>{{card.timestamp}}</pre>
-  <pre>{{card.surface_position}}</pre>
-  <pre>{{card.surface_load}}</pre>
-  <pre>{{card.downhole_position}}</pre>
-  <pre>{{card.downhole_load}}</pre>
+    <h1>{{card.timestamp | date}}</h1>
+
+
+    <div class="surfacecard card"></div>
+    <div class="downholecard card"></div>
 </div>
+
+<script src="http://d3js.org/d3.v3.js"></script>
+<script>
+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 xy_chart = d3_xy_chart()
+    .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) ;
+
+function d3_xy_chart() {
+    var width = 640,
+        height = 480,
+        xlabel = "Position (in.)",
+        ylabel = "Load (lbs.)" ;
+
+    function chart(selection) {
+        selection.each(function(datasets) {
+            //
+            // Create the plot.
+            //
+            var margin = {top: 20, right: 80, bottom: 30, left: 250},
+                innerwidth = width - margin.left - margin.right,
+                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); }),
+                          d3.max(datasets, function(d) { return d3.max(d.y); }) ]) ;
+
+            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;
+}
+
+</script>
 {% endblock content %}

www/pocwww/pocwww/templates/dashboard.jinja2

@@ -0,0 +1,8 @@
+{% extends "layout.jinja2" %}
+
+{% block content %}
+<div class="content well">
+    <h1>Henry Pump POC</h1>
+    
+</div>
+{% endblock content %}

www/pocwww/pocwww/templates/datelist.jinja2

@@ -13,7 +13,7 @@
       <tbody>
           {%  for day in datelist %}
           <tr>
-                <td><a href="/cards/{{day.date}}">{{day.date}}</a></td>
+                <td><a href="/cards/{{day.date}}">{{day.date | date('long')}}</a></td>
                 <td>{{day.count}} cards</td>
           </tr>
           {% endfor %}

www/pocwww/pocwww/templates/mytemplate.jinja2

@@ -1,8 +0,0 @@
-{% extends "layout.jinja2" %}
-
-{% block content %}
-<div class="content">
-  <h1><span class="font-semi-bold">Pyramid</span> <span class="smaller">Starter project</span></h1>
-  <p class="lead">Welcome to <span class="font-normal">POC Web Interface</span>, a&nbsp;Pyramid application generated&nbsp;by<br><span class="font-normal">Cookiecutter</span>.</p>
-</div>
-{% endblock content %}

www/pocwww/pocwww/views.py

@@ -39,9 +39,9 @@ class Pagination(object):
                 last = num
 
 
-@view_config(route_name='home', renderer='templates/mytemplate.jinja2')
+@view_config(route_name='home', renderer='templates/dashboard.jinja2')
 def my_view(request):
-    return {'project': 'POC Web Interface', 'navgroup':'dashboard'}
+    return {'project': 'POC Web Interface', 'navgroup': 'dashboard'}
 
 
 def card_page(request):