diff --git a/light9/web/stats-line.js b/light9/web/stats-line.js
new file mode 100644
--- /dev/null
+++ b/light9/web/stats-line.js
@@ -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`
${col} | `;
+ };
+ const td = (col) => {
+ const cell = d[col];
+ return html`${drawLevel(cell, path.concat(col))}`;
+ };
+ return html`
+
+
+ ${cols.map(th)}
+
+
+ ${cols.map(td)}
+
+
`;
+ };
+ const tdWrap = (content) => {
+ return html`
${content} | `;
+ }
+ 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`
`;
+ };
+ return tdWrap(table({
+ average: rounding(d.average, 3),
+ recents: html`
${d.recents.map(bar)}
`
+ }, path));
+
+ };
+ const pmf = (d, path) => {
+ return tdWrap(table({
+ count: d.count,
+ 'values [ms]': html`
+
mean=${rounding(d.mean*1000, 3)}
+
sd=${rounding(d.stddev*1000, 3)}
+
99=${rounding(d['99percentile']*1000, 3)}
+ `
+ }, path));
+ };
+ const drawLevel = (d, path) => {
+ if (typeof d === 'object') {
+ if (d instanceof TemplateResult) {
+ return html`
${d} | `;
+ } 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`
${d} | `;
+ }
+ };
+ return table(this.stats || {}, []);
+ }
+}
+customElements.define('stats-line', StatsLine);
diff --git a/light9/web/stats_test.html b/light9/web/stats_test.html
new file mode 100644
--- /dev/null
+++ b/light9/web/stats_test.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
stats_test page
+
+
+
+
+
diff --git a/makefile b/makefile
--- a/makefile
+++ b/makefile
@@ -34,6 +34,8 @@ npm:
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
diff --git a/package.json b/package.json
--- a/package.json
+++ b/package.json
@@ -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": {