Mercurial > code > home > repos > light9

--- a/light9/web/index.html	Sun Jun 02 11:37:48 2019 +0000
+++ b/light9/web/index.html	Sun Jun 02 11:38:31 2019 +0000
@@ -8,9 +8,14 @@
     <link rel="import" href="/lib/polymer/polymer.html">
   </head>
   <body>
+      <script type="module"  src="stats-line.js"></script>
+
+
+
     <dom-module id="service-button-row">
       <template>
         <style>
+         :host { padding-bottom: 10px;  }
          a {
              color: #7d7dec;
          }
@@ -29,13 +34,25 @@
          }
          .window {
          }
+         .serviceGrid > td {
+             border: 5px solid red;
+             display: inline-block;
+         }
+         :host > div { display: inline-block; vertical-align: top; }
+         :host > div:nth-child(2) { width: 9em; }
+         :host > div:nth-child(3) { width: 5em; }
+         :host > div:nth-child(4) { width: 3em; }
+         :host > div:nth-child(5) { width: 50px; }
+
         </style>
-        <div>
-          <span class="left"><a class="big" href="{{name}}/">{{name}}</a></span>
-          <span class="window"><button on-click="click">window</button></span>
-          <span><a href="{{name}}/stats/">stats</a></span>
-          <span id="stats"></span>
-        </div>
+
+
+          <div class="left"><a class="big" href="{{name}}/">{{name}}</a></div>
+          <div class="window"><button on-click="click">window</button></div>
+          <div><a href="{{name}}/stats/">stats</a></div>
+          <div id="stats"><stats-line name="{{name}}"></div>
+
+
       </template>
       <script>
        HTMLImports.whenReady(function () {
@@ -44,10 +61,13 @@
                properties: {
                    name: String,
                },
+             ready: function() {
+             },
                click: function() {
                    window.open(this.name + '/', '_blank',
                                'scrollbars=1,resizable=1,titlebar=0,location=0');
-               }
+               },
+
            });
        });
       </script>
@@ -55,8 +75,7 @@

     <h1>light9 home page</h1>

-    <div style="float: left">
-      <service-button-row name="."></service-button-row>
+    <div style="display: grid">
       <service-button-row name="rdfdb"></service-button-row>
       <hr>
       <service-button-row name="ascoltami"></service-button-row>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/web/stats-line.js	Sun Jun 02 11:38:31 2019 +0000
@@ -0,0 +1,151 @@
+import { LitElement, TemplateResult, html, css } from '/node_modules/lit-element/lit-element.js';
+import { rounding }  from '/node_modules/significant-rounding/index.js';
+
+class StatsLine extends LitElement {
+
+    static get properties() {
+        return {
+            name: {
+                type: String,
+                reflect: true,
+
+            },
+            stats: Object // to be refreshed with ws
+        };
+    }
+
+    updated(changedProperties) {
+        changedProperties.forEach((oldValue, propName) => {
+            if (propName == 'name') {
+                const reload = () => {
+                    fetch(this.name + '/stats/?format=json').then((resp) => {
+                        if (resp.ok) {
+                    resp.json().then((msg) => {
+
+                        this.stats = msg;
+                    setTimeout(reload, 1000);
+                    });
+                        }
+                });
+                }
+                reload();
+            }
+        });
+    }
+
+    static get styles() {
+        return css`
+        :host {
+            border: 2px solid #46a79f;
+        }
+        table {
+            border-collapse: collapse;
+            background: #000;
+            color: #ccc;
+            font-family: sans-serif;
+        }
+        th, td {
+            outline: 1px solid #000;
+        }
+        th {
+            padding: 2px 4px;
+            background: #2f2f2f;
+        }
+        td {
+            padding: 0;
+            vertical-align: top;
+            text-align: center;
+        }
+        td.val {
+            padding: 2px 4px;
+            background: #3b5651;
+        }
+        .recents {
+            display: flex;
+            align-items: flex-end;
+            height: 30px;
+        }
+        .recents > div {
+            width: 3px;
+            background: red;
+            border-right: 1px solid black;
+        }
+        .bigInt {
+            min-width: 6em;
+        }
+        `;
+    }
+
+    render() {
+        const table = (d, path) => {
+
+            const cols = Object.keys(d);
+            cols.sort();
+            const th = (col) =>  {
+                return html`<th>${col}</th>`;
+            };
+            const td = (col)  => {
+                const cell = d[col];
+                return html`${drawLevel(cell, path.concat(col))}`;
+            };
+            return html`
+             <table>
+               <tr>
+                 ${cols.map(th)}
+               </tr>
+                 <tr>
+                   ${cols.map(td)}
+                 </tr>
+             </table>`;
+        };
+        const tdWrap = (content) => {
+            return html`<td>${content}</td>`;
+        }
+        const recents = (d, path) => {
+            const hi = Math.max.apply(null, d.recents);
+            const scl = 30 / hi;
+
+            const bar = (y) => {
+                let color;
+                if (y < hi * .85) {
+                    color="#6a6aff";
+                } else {
+                    color="#d09e4c";
+                }
+                return html`<div class="bar" style="height: ${y * scl}px; background: ${color};"></div>`;
+            };
+            return tdWrap(table({
+                average: rounding(d.average, 3),
+                recents: html`<div class="recents">${d.recents.map(bar)}</div>`
+            }, path));
+
+        };
+        const pmf = (d, path) => {
+            return tdWrap(table({
+                count: d.count,
+                'values [ms]': html`
+                   <div>mean=${rounding(d.mean*1000, 3)}</div>
+                   <div>sd=${rounding(d.stddev*1000, 3)}</div>
+                   <div>99=${rounding(d['99percentile']*1000, 3)}</div>
+                 `
+            }, path));
+        };
+        const drawLevel = (d, path) => {
+            if (typeof d === 'object') {
+                if (d instanceof TemplateResult) {
+                    return html`<td class="val">${d}</td>`;
+                } else if (d.count !== undefined && d.min !== undefined) {
+                    return pmf(d, path);
+                } else if (d.average !== undefined && d.recents !== undefined) {
+                    return recents(d, path);
+                } else {
+                    return tdWrap(table(d, path));
+                }
+            } else {
+                return html`<td class="val bigInt">${d}</td>`;
+            }
+        };
+        return table(this.stats || {}, []);
+    }
+}
+customElements.define('stats-line', StatsLine);
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/web/stats_test.html	Sun Jun 02 11:38:31 2019 +0000
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
+  </head>
+  <body>
+    <script type="module"  src="stats-line.js"></script>
+
+    <h1>stats_test page</h1>
+
+    <stats-line name="collector"></stats-line>
+
+  </body>
+</html>
--- a/makefile	Sun Jun 02 11:37:48 2019 +0000
+++ b/makefile	Sun Jun 02 11:38:31 2019 +0000
@@ -34,6 +34,8 @@
 	npm install
 	(cd node_modules/n3; nodejs ../browserify/bin/cmd.js --standalone N3 --require n3 -o n3-browser.js)
 	node_modules/browserify/bin/cmd.js light9/web/lib/debug/src/browser.js -o light9/web/lib/debug/debug-build.js --standalone debug
+	perl -pi -e "s,'lit-html,'/node_modules/lit-html,; s,lit-html',lit-html/lit-html.js'," node_modules/lit-element/lit-element.js
+	perl -pi -e 's/module.exports = rounding/export { rounding }/' node_modules/significant-rounding/index.js

 bin/ascoltami2: gst_packages link_to_sys_packages
--- a/package.json	Sun Jun 02 11:37:48 2019 +0000
+++ b/package.json	Sun Jun 02 11:38:31 2019 +0000
@@ -9,7 +9,7 @@
     "test": "test"
   },
   "dependencies": {
-    "@webcomponents/shadycss": "^1.1.3",
+    "@webcomponents/shadycss": "^1.3.1",
     "@webcomponents/webcomponentsjs": "^1.2.0",
     "bower": "^1.8.4",
     "browserify": "^16.2.3",
@@ -17,9 +17,13 @@
     "coffeelint": "^2.1.0",
     "coffeescript": "^2.3.0",
     "d3": "^5.1.0",
+    "esmify": "^2.1.1",
+    "lit-element": "^2.1.0",
+    "lit-html": "^1.1.0",
     "mocha": "^2.5.3",
     "n3": "^1.0.0-alpha",
     "pixi.js": "^4.7.3",
+    "significant-rounding": "^2.0.0",
     "tinycolor2": "^1.4.1"
   },
   "devDependencies": {