infoscreens/elements/heatmap.js
2017-11-30 21:50:33 +01:00

92 lines
2.2 KiB
JavaScript

import { withComponent, props } from 'skatejs';
import { Timeseries } from '../lib/timeseries';
import injectCss from '../lib/plotly-shadowdom';
const Component = withComponent();
class Heatmap extends Component {
static props = {
timeseries: props.string,
days: props.number,
interpolate: props.boolean,
accumulate: props.boolean,
data: props.array,
width: props.number,
height: props.number,
};
connected() {
if (!this.timeseries) {
return;
}
const daySlots = this.days || 7;
this.ts = new Timeseries(this.timeseries, new Date(), daySlots);
this.ts.getData({
interpolate: this.interpolate,
accumulate: this.accumulate,
usePreviousValue: false,
})
.then((values) => {
this.data = values;
});
}
renderer(renderRoot, render) {
const root = renderRoot;
while (root.firstChild) {
root.removeChild(root.firstChild);
}
root.appendChild(render());
injectCss(root);
}
render({ data, ts, width, height }) {
const el = document.createElement('div');
if (!data || !data.length || !ts) {
// No data yet
return el;
}
const graphWidth = Math.floor((window.innerWidth / 100) * (width || 40));
const graphHeight = Math.floor((window.innerHeight / 100) * (height || 50));
const graphData = [{
x: ts.getSlotLabels(),
y: ts.getDayLabels(),
z: data,
type: 'heatmap',
colorscale: [
['0.0', 'rgb(0, 0, 0)'],
['0.9', 'rgb(255, 0, 0)'],
['1.0', 'rgb(128, 0, 0)'],
],
showlegend: false,
showscale: false,
}];
const layout = {
autosize: false,
width: graphWidth,
height: graphHeight,
yaxis: {
autorange: 'reversed',
tickfont: {
family: 'Source Code Pro',
},
},
xaxis: {
type: 'category',
tickfont: {
family: 'Source Code Pro',
},
},
paper_bgcolor: 'transparent',
margin: {
r: 0,
t: 0,
b: 0,
},
};
Plotly.newPlot(el, graphData, layout, {
staticPlot: true,
});
return el;
}
}
customElements.define('cbase-heatmap', Heatmap);