Add support for graph

git-svn-id: https://redmine.imt-atlantique.fr/svn/xaal/code/Python/trunk@2187 b32b6428-25c9-4566-ad07-03861ab6144f

apps/dashboard/xaal/dashboard/app.py

@@ -8,7 +8,7 @@ from gevent.pywsgi import WSGIServer
 from geventwebsocket.handler import WebSocketHandler
 
 
-from .pages import default_pages
+from .pages import default_pages,warp10
 from .core import xaal_core
 from .core import sio 
 
@@ -32,6 +32,7 @@ def run():
     TEMPLATE_PATH.append(root)
 
     xaal_core.setup()
+    warp10.setup()
     # debug disable template cache & enable error reporting
     debug(True)
     bottle_app = default_app()

apps/dashboard/xaal/dashboard/pages/warp10.py

+from xaal.lib import tools
+from .default import view,route
+from .default import xaal_core as xaal
+
+
+from bottle import get,response
+import logging
+import ujson
+import requests
+
+TOKEN=None
+URL=None
+CLASS = None
+
+
+DAILY_REQ = """ [ $TOKEN '%s' { 'devid' '%s'  } NOW 25 h ] FETCH """
+
+bindings = {'thermometer.basic' : 'temperature',
+            'barometer.basic'   : 'pression',
+            'hygrometer.basic'  : 'humidity',
+            }
+
+logger = logging.getLogger(__name__)
+
+def setup():
+    global TOKEN,URL,CLASS
+    cfg = tools.load_cfg(xaal.PACKAGE_NAME).get('config',None)
+    if cfg:
+        TOKEN = cfg.get('warp10_token',None)
+        URL = cfg.get('warp10_url',None)
+        CLASS = cfg.get('warp10_class',None)
+        logger.warning("%s %s" % (URL,CLASS))
+
+def init_req():
+    return """'%s' 'TOKEN' STORE\n""" % (TOKEN)
+
+
+def query(req):
+    r = requests.post(URL,req)
+    print(r)
+    return r.text
+    
+
+def to_chartjs(data):
+    r = []
+    for tuple_ in data:
+        date = round(tuple_[0] / 1000)
+        value = tuple_[1]
+        #r.append({"x": date, "y":value })
+        r.append((date,value))
+    return r
+
+@get('/warp10/daily/<addr>')
+def daily(addr):
+    global CLASS
+    response.headers['Content-Type'] = 'application/json'
+    res = {}
+    dev=xaal.monitor.devices.get_with_addr(addr)
+    if dev:
+        req = init_req()
+        devtype = dev.devtype
+        var = bindings.get(devtype,None)
+        if not var:
+            return '{}'
+        class_ = '%s.%s.%s' % (CLASS,devtype,var)
+        tmp = DAILY_REQ % (class_,addr)
+        req = init_req() + tmp
+        data=query(req)
+        
+        res = ujson.loads(data)[0][0]['v']
+    return ujson.dumps(to_chartjs(res))
+
+
+@route('/warp10/graph/<addr>')
+@view('graph.mako')
+def graph(addr):
+    r = {"title" : "Warp10 daily","addr":addr}
+    return r

apps/dashboard/xaal/dashboard/templates/graph.mako

+<%inherit file="base.mako"/>
+    
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.0"></script>
+
+
+
+
+
+<br/>
+<div class="content">
+    <div id="data">Data for ${addr}</div>
+    <canvas id="chart" height=150></canvas>
+</div>
+
+
+
+<script>
+
+//================ JS tools ====================================================
+// dumbs functions to mimic jQuery selectors
+var _ = function ( elem ) {
+  return document.querySelector( elem );
+}
+
+var __ = function ( elem ) {
+  return document.querySelectorAll( elem );
+}
+
+
+function update(data) {
+    //console.log(data);
+    //_('#data').innerHTML = "<pre>" + data +"</pre>";
+    clearData(chart);
+    addData(chart,data);
+}
+
+function clearData(chart) {
+  if (chart.hasOwnProperty('datasets')) {
+    chart.datasets.forEach((dataset) => {
+      dataset.data = [];
+    })
+  }
+  chart.data.labels=[];  
+  chart.update();
+}
+
+function load(addr) {
+  var getUrl = window.location;
+  var url = getUrl.protocol + "//" + getUrl.host + "/warp10/daily/"+addr;
+  console.log(url);
+  fetch(url)
+    .then(response => response.json())
+    .then(data => update(data))
+    .catch(err => console.log(err))
+}
+
+
+
+function addData(chart, data) {
+  data.forEach((kv) => {
+    chart.data.labels.push(kv[0]);
+    chart.data.datasets[0].data.push(kv[1]);
+    }
+  );
+  //chart.data.labels.push(label);
+  //chart.data.datasets.forEach((dataset) => {
+  //    dataset.data.push(data);
+  //});
+  chart.update();
+  chart.render();
+}
+
+
+
+var config = {
+  type: 'line',
+  data: {
+    datasets: [{
+      label: "Warp10 data",
+      borderColor: "#00bbd7",
+      pointRadius: 1,
+      borderWidth: 2,
+    }]
+  },
+
+  options: {
+    scales: {
+      xAxes: [{
+        type: 'time',
+        time: {
+        parser: 'X'
+        }
+      }],
+    },
+  }
+};
+
+
+var ctx = document.getElementById("chart").getContext("2d");
+chart=new Chart(ctx, config);
+//load("b4cec9fa-7513-4d87-bfc1-ee1107176cf0");
+
+
+function refresh() {
+  console.log('Loading datas');
+  //load('2f31c922-01b2-4097-bfae-5753dde2cd42');
+  load('${addr}');
+  //load('7965f9be-92af-11e8-80cd-408d5c18c801');
+}
+
+
+refresh();
+/*
+setInterval(() => { 
+  refresh();
+  },1000 * 60);
+*/
+
+</script>