[fix] update data in heatmap, prepare only if need to

This commit is contained in:
Prateeksha Singh 2018-03-31 01:16:59 +05:30
parent b040f31de7
commit fee00250ef
12 changed files with 46 additions and 31 deletions

View File

@ -1287,7 +1287,7 @@ class BaseChart {
if(init) { if(init) {
this.data = this.realData; this.data = this.realData;
setTimeout(() => {this.update();}, this.initTimeout); setTimeout(() => {this.update(this.data);}, this.initTimeout);
} }
if(!onlyWidthChange) { if(!onlyWidthChange) {
@ -1302,7 +1302,10 @@ class BaseChart {
this.width = this.baseWidth - (this.leftMargin + this.rightMargin); this.width = this.baseWidth - (this.leftMargin + this.rightMargin);
} }
update(data=this.data) { update(data) {
if(!data) {
console.error('No data to update.');
}
this.data = this.prepareData(data); this.data = this.prepareData(data);
this.calc(); // builds state this.calc(); // builds state
this.render(); this.render();
@ -2456,16 +2459,16 @@ class Heatmap extends BaseChart {
data.start.setFullYear( data.start.getFullYear() - 1 ); data.start.setFullYear( data.start.getFullYear() - 1 );
} }
if(!data.end) { data.end = new Date(); } if(!data.end) { data.end = new Date(); }
data.dataPoints = data.dataPoints || {}; data.dataPoints = data.dataPoints || {};
let points = {}; if(parseInt(Object.keys(data.dataPoints)[0]) > 100000) {
Object.keys(data.dataPoints).forEach(timestampSec$$1 => { let points = {};
let date = new Date(timestampSec$$1 * NO_OF_MILLIS); Object.keys(data.dataPoints).forEach(timestampSec$$1 => {
points[getDdMmYyyy(date)] = data.dataPoints[timestampSec$$1]; let date = new Date(timestampSec$$1 * NO_OF_MILLIS);
}); points[getDdMmYyyy(date)] = data.dataPoints[timestampSec$$1];
});
data.dataPoints = points; data.dataPoints = points;
}
return data; return data;
} }
@ -2482,7 +2485,10 @@ class Heatmap extends BaseChart {
Object.values(this.data.dataPoints), HEATMAP_DISTRIBUTION_SIZE); Object.values(this.data.dataPoints), HEATMAP_DISTRIBUTION_SIZE);
} }
update(data=this.data) { update(data) {
if(!data) {
console.error('No data to update.');
}
this.data = this.prepareData(data); this.data = this.prepareData(data);
this.draw(); this.draw();
this.bindTooltip(); this.bindTooltip();

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -270,7 +270,7 @@ let heatmap = new Chart("#chart-heatmap", {
colors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'] colors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c']
}); });
console.log(heatmapData, heatmap); console.log('heatmapData', Object.assign({}, heatmapData), heatmap);
Array.prototype.slice.call( Array.prototype.slice.call(
document.querySelectorAll('.heatmap-mode-buttons button') document.querySelectorAll('.heatmap-mode-buttons button')

View File

@ -88,6 +88,7 @@ var SEC_IN_DAY = 86400;
var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
// https://stackoverflow.com/a/11252167/6495043
function clone(date) { function clone(date) {
@ -253,6 +254,8 @@ var heatmapData = {
end: end end: end
}; };
// ================================================================================
var c1 = document.querySelector("#chart-composite-1"); var c1 = document.querySelector("#chart-composite-1");
var c2 = document.querySelector("#chart-composite-2"); var c2 = document.querySelector("#chart-composite-2");
@ -509,7 +512,7 @@ var heatmap = new Chart("#chart-heatmap", {
colors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'] colors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c']
}); });
console.log(heatmapData, heatmap); console.log('heatmapData', Object.assign({}, heatmapData), heatmap);
Array.prototype.slice.call(document.querySelectorAll('.heatmap-mode-buttons button')).map(function (el) { Array.prototype.slice.call(document.querySelectorAll('.heatmap-mode-buttons button')).map(function (el) {
el.addEventListener('click', function (e) { el.addEventListener('click', function (e) {

File diff suppressed because one or more lines are too long

View File

@ -123,7 +123,7 @@ export default class BaseChart {
if(init) { if(init) {
this.data = this.realData; this.data = this.realData;
setTimeout(() => {this.update();}, this.initTimeout); setTimeout(() => {this.update(this.data);}, this.initTimeout);
} }
if(!onlyWidthChange) { if(!onlyWidthChange) {
@ -138,7 +138,10 @@ export default class BaseChart {
this.width = this.baseWidth - (this.leftMargin + this.rightMargin); this.width = this.baseWidth - (this.leftMargin + this.rightMargin);
} }
update(data=this.data) { update(data) {
if(!data) {
console.error('No data to update.');
}
this.data = this.prepareData(data); this.data = this.prepareData(data);
this.calc(); // builds state this.calc(); // builds state
this.render(); this.render();

View File

@ -50,16 +50,16 @@ export default class Heatmap extends BaseChart {
data.start.setFullYear( data.start.getFullYear() - 1 ); data.start.setFullYear( data.start.getFullYear() - 1 );
} }
if(!data.end) { data.end = new Date(); } if(!data.end) { data.end = new Date(); }
data.dataPoints = data.dataPoints || {}; data.dataPoints = data.dataPoints || {};
let points = {}; if(parseInt(Object.keys(data.dataPoints)[0]) > 100000) {
Object.keys(data.dataPoints).forEach(timestampSec => { let points = {};
let date = new Date(timestampSec * NO_OF_MILLIS); Object.keys(data.dataPoints).forEach(timestampSec => {
points[getDdMmYyyy(date)] = data.dataPoints[timestampSec]; let date = new Date(timestampSec * NO_OF_MILLIS);
}); points[getDdMmYyyy(date)] = data.dataPoints[timestampSec];
});
data.dataPoints = points; data.dataPoints = points;
}
return data; return data;
} }
@ -76,7 +76,10 @@ export default class Heatmap extends BaseChart {
Object.values(this.data.dataPoints), HEATMAP_DISTRIBUTION_SIZE); Object.values(this.data.dataPoints), HEATMAP_DISTRIBUTION_SIZE);
} }
update(data=this.data) { update(data) {
if(!data) {
console.error('No data to update.');
}
this.data = this.prepareData(data); this.data = this.prepareData(data);
this.draw(); this.draw();
this.bindTooltip(); this.bindTooltip();