- +

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": {

light9 home page

stats_test page