Make heatmap colors more visible

This commit is contained in:
Henri Bergius 2017-12-05 11:42:17 +01:00
parent 9962f54591
commit 3be3ef3287

View file

@ -72,13 +72,12 @@ 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 colormap = interpolate(['#3465a4', '#729fcf', '#8ae234', '#fce94f', '#ef2929']);
const colorIndex = Math.min(data.length / 22, 22); const colorAtIndex = (val) => colormap(Math.min(val / 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" style="color: ${colormap(colorIndex)}">${data.join(', ')}</span></div> <div><span class="output" style="color: ${colorAtIndex(data.length)}">${data.join(', ')}</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) {