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

Cleaner element lifecycle

Browse source
This commit is contained in:
Henri Bergius 2017-11-30 16:09:18 +01:00
parent 34b2c08e2d
commit fa228c0d4b
2 changed files with 58 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
elements/heatmap.js
View file

@ -9,9 +9,22 @@ class Heatmap extends Component {
days: props.number,
interpolate: props.boolean,
accumulate: props.boolean,
data: props.array,
};
connected() {
this.enableFetch = true;
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;
@ -19,25 +32,16 @@ class Heatmap extends Component {
root.appendChild(render());
}
render({ timeseries, interpolate, accumulate, days }) {
let daySlots = days;
if (!daySlots) {
daySlots = 7;
}
render({ data, ts }) {
const el = document.createElement('div');
if (!this.enableFetch) {
// Not yet connected
if (!data || !data.length || !ts) {
// No data yet
return el;
}
if (this.ts) {
// We're re-rendering, cancel previous
this.ts.canceled = true;
}
const ts = new Timeseries(timeseries, new Date(), daySlots);
const data = [{
const graphData = [{
x: ts.getSlotLabels(),
y: ts.getDayLabels(),
z: ts.prepareSlots(),
z: data,
type: 'heatmap',
colorscale: [
['0.0', 'rgb(0, 0, 0)'],
@ -67,21 +71,9 @@ class Heatmap extends Component {
b: 0,
},
};
this.ts = ts;
ts.getData({
interpolate,
accumulate,
})
.then((values) => {
if (ts.canceled) {
el.innerHTML = '';
return;
}
data[0].z = values;
Plotly.newPlot(el, data, layout, {
staticPlot: true,
});
});
Plotly.newPlot(el, graphData, layout, {
staticPlot: true,
});
return el;
}
}

80
elements/polar.js
View file

@ -10,10 +10,23 @@ class Polar extends Component {
interpolate: props.boolean,
accumulate: props.boolean,
percentage: props.boolean,
data: props.array,
};
connected() {
this.enableFetch = true;
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) {
@ -22,21 +35,12 @@ class Polar extends Component {
root.appendChild(render());
}
render({ timeseries, interpolate, accumulate, percentage, days }) {
let daySlots = days;
if (!daySlots) {
daySlots = 7;
}
render({ percentage, data, ts }) {
const el = document.createElement('div');
if (!this.enableFetch) {
// Not yet connected
if (!data || !data.length || !ts) {
// No data yet
return el;
}
if (this.ts) {
// We're re-rendering, cancel previous
this.ts.canceled = true;
}
const ts = new Timeseries(timeseries, new Date(), daySlots);
const layout = {
orientation: 270,
direction: 'clockwise',
@ -64,10 +68,10 @@ class Polar extends Component {
b: 0,
},
};
let data = [];
let graphData = [];
const dayLabels = ts.getDayLabels();
ts.prepareSlots().forEach((day, dayIdx) => {
data.push({
graphData.push({
r: day,
t: ts.getSlotLabels(),
name: dayLabels[dayIdx],
@ -79,37 +83,25 @@ class Polar extends Component {
showlegend: false,
});
});
this.ts = ts;
ts.getData({
interpolate,
accumulate,
usePreviousValue: false,
})
.then((values) => {
if (ts.canceled) {
el.innerHTML = '';
return;
}
if (percentage) {
data = data.slice(0);
const result = ts.getSlotLabels().map(() => 0);
values.forEach((day) => {
day.forEach((val, idx) => {
result[idx] += val;
});
});
data[0].r = result.map(r => (r / ts.days) * 100);
} else {
values.forEach((day, dayIdx) => {
day.forEach((val, idx) => {
data[dayIdx].r[idx] = val;
});
});
}
Plotly.newPlot(el, data, layout, {
staticPlot: true,
if (percentage) {
graphData = graphData.slice(0);
const result = ts.getSlotLabels().map(() => 0);
data.forEach((day) => {
day.forEach((val, idx) => {
result[idx] += val;
});
});
graphData[0].r = result.map(r => (r / ts.days) * 100);
} else {
data.forEach((day, dayIdx) => {
day.forEach((val, idx) => {
graphData[dayIdx].r[idx] = val;
});
});
}
Plotly.newPlot(el, graphData, layout, {
staticPlot: true,
});
return el;
}
}