basic charting

backend/ghstats.py

@@ -63,7 +63,7 @@
         '*.ibm.com'
     ]
 }
-talisman=Talisman(app, content_security_policy=csp)
+#talisman=Talisman(app, content_security_policy=csp)
 
 # Read the configuration and possible environment variables
 # There are from local .env, provided through K8s secrets or
@@ -680,7 +680,7 @@ def collectStats():
 # Check for secret token
 # Return immediately, but perform processing in the background
 @app.route('/collectStats', methods=['POST'])
-@talisman(force_https=False)
+#@talisman(force_https=False)
 def eventCollectStats():
     mydata=request.json
     if mydata['token']==EVENT_TOKEN:
@@ -690,6 +690,42 @@ def eventCollectStats():
         return "no success",403
 
 
+# return the repository statistics for the web page, dynamically loaded
+@app.route('/data/repostats.json')
+@auth.oidc_auth('default')
+def generate_data_repostats_json():
+    values=[]
+    datasets=[]
+    if isTenant() or isTenantViewer() or isRepoViewer():
+        fetchStmt="""select r.rid, r.tdate, r.viewcount
+                     from repotraffic r, v_adminuserrepos v
+                     where r.rid=v.rid
+                     and v.email=?
+                     and r.tdate between (current date - 1 month) and (current date)
+                     order by r.rid, r.tdate asc"""
+
+        repoStmt="""select r.rid, r.rname from repos r, v_adminuserrepos v
+                    where r.rid=v.rid
+                    and v.email=?
+                    order by rid asc"""
+        result = db.engine.execute(fetchStmt,flask.session['id_token']['email'])
+        for row in result:
+            values.append({'x':row['tdate'].isoformat(),'y':row['viewcount'], 'id':row['rid']})
+
+        repos = db.engine.execute(repoStmt,flask.session['id_token']['email']).fetchall()
+        for row in repos:
+            rdict=[d for d in values if d['id'] == row['rid']]
+            datasets.append({'data': rdict, 'label': row['rname']})
+
+    return jsonify(labels=[], data=datasets)
+
+
+@app.route('/repos/linechart')
+@auth.oidc_auth('default')
+def linechart():
+    return render_template('chart.html')
+
+
 # Start the actual app
 # Get the PORT from environment
 port = os.getenv('PORT', '5000')

backend/templates/chart.html

@@ -0,0 +1,76 @@
+{% extends "layout.html" %}
+{% block title %}
+<title>Chart - GitHub Traffic Analytics</title>
+{% endblock %}
+
+{% block body %}
+<div class="container">
+    <div class="column is-full">
+      <p class="title">Chart: Month in review - Daily viewcounts</p>
+
+    <canvas id="chart" ></canvas>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_javascripts %}
+<script src="{{ url_for('static', filename='jquery-3.3.1.min.js')}}"></script>
+<script src="{{ url_for('static', filename='Chart.bundle.min.js')}}"></script>
+<script src="{{ url_for('static', filename='chartjs-plugin-colorschemes.min.js')}}"></script>
+
+
+<script>
+
+Chart.defaults.global.tooltipYPadding = 16;
+Chart.defaults.global.tooltipCornerRadius = 0;
+Chart.defaults.global.tooltipTitleFontStyle = "normal";
+Chart.defaults.global.scaleFontSize = 16;
+
+// get chart canvas
+var mychart = document.getElementById("chart").getContext("2d");
+
+// draw chart
+var LineChart = new Chart(mychart,
+                  {
+                    type: 'line', 
+                    data: { 
+                      labels: [],
+                      datasets : [{data:[]}],
+                    },
+                    options: {
+                      elements: { 
+                        line: {
+                          tension: 0,
+                          fill: false}},
+                      scales: {
+                        xAxes: [{
+                          type: 'time',
+                          time: {
+                            unit: 'day'
+                          }
+                        }]
+                      },
+                      plugins: {
+                        colorschemes: {
+                          scheme: 'brewer.Paired12'
+                        }
+                      }
+                    }
+                  });
+
+ajax_chart(LineChart);
+
+// function to update our chart
+function ajax_chart(chart, data) {
+    var data = data || {};
+
+    $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
+    $.getJSON($SCRIPT_ROOT+"/data/repostats.json", data).done(function(response) {
+        chart.data.labels = response.labels;
+        chart.data.datasets = response.data; 
+        chart.update(); 
+    });
+};
+
+</script>
+  {% endblock %}

backend/templates/layout.html

@@ -35,8 +35,11 @@
 	          <a class="navbar-item" href="/repos/stats">
 	            Daily Traffic
 	          </a>
-            <a class="navbar-item" href="/repos/statsweekly">
+              <a class="navbar-item" href="/repos/statsweekly">
 	            Weekly Traffic
+			  </a>
+			  <a class="navbar-item" href="/repos/linechart">
+	            Line Chart
 	          </a>
 	          <hr class="navbar-divider">
 	          <a class="navbar-item" href="/data/repostats.csv">