c-ctrl/infoscreens
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use heatmap color for user list

Browse source
This commit is contained in:
Henri Bergius 2017-12-04 19:53:58 +01:00
parent e3486ddcc3
commit d89d2ffc7b
2 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
elements/userlist.js
View file

@ -1,4 +1,5 @@
import { withComponent, props } from 'skatejs'; import { withComponent, props } from 'skatejs';
import interpolate from 'color-interpolate';
const Component = withComponent(); const Component = withComponent();
class UserList extends Component { class UserList extends Component {
@ -71,11 +72,13 @@ class UserList extends Component {
render({ data }) { render({ data }) {
const el = document.createElement('div'); const el = document.createElement('div');
const colormap = interpolate(['blue', 'green', 'yellow', 'red']);
const colorIndex = Math.min(data.length / 22, 22);
el.className = 'terminal'; el.className = 'terminal';
el.innerHTML = ` el.innerHTML = `
<div class="deco"><span class="prompt">user@c-beam&gt;</span> #who</div> <div class="deco"><span class="prompt">user@c-beam&gt;</span> #who</div>
<div><span class="output">${data.join(', ')}</span></div> <div><span class="output" style="color: ${colormap(colorIndex)}">${data.join(', ')}</span></div>
<div>total: <span class="output">${data.length}</span></div> <div>total: <span class="output" style="color: ${colormap(colorIndex)}">${data.length}</span></div>
<div class="deco"><span class="prompt">user@c-beam&gt;</span> <blink>_</blink></div> <div class="deco"><span class="prompt">user@c-beam&gt;</span> <blink>_</blink></div>
`; `;
if (data.join(', ').length > 100) { if (data.join(', ').length > 100) {

1
package.json
View file

@ -13,6 +13,7 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@webcomponents/webcomponentsjs": "^1.0.19", "@webcomponents/webcomponentsjs": "^1.0.19",
"color-interpolate": "^1.0.2",
"d3": "^4.12.0", "d3": "^4.12.0",
"dateformat": "^3.0.2", "dateformat": "^3.0.2",
"msgflo-browser": "^0.2.0", "msgflo-browser": "^0.2.0",