status-im/fathom
2
0
Fork 0
mirror of https://github.com/status-im/fathom.git synced 2025-03-01 03:20:27 +00:00
Code Issues Projects Releases Wiki Activity

improve chart performance by re-using canvas

Browse Source
This commit is contained in:
Danny 2018-06-04 15:11:56 +02:00
parent 13a1222f54
commit dd7a26241a
2 changed files with 39 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
assets/src/js/components/Chart.js vendored
View File

@ -28,7 +28,7 @@ function timeFormatPicker(n) {
} else if(n < 32) {
return formatDay(d);
}
return '';
}
}
@ -41,21 +41,24 @@ function prepareData(startUnix, endUnix, data) {
let datamap = [];
let newData = [];
// create keyed array for quick date access
data.forEach((d) => {
// create keyed array for quick date access
let length = data.length;
let d, dateParts, date, key;
for(var i=0;i<length;i++) {
d = data[i];
// replace date with actual date object & store in datamap
let dateParts = d.Date.split('T')[0].split('-');
let date = new Date(dateParts[0], dateParts[1]-1, dateParts[2], 0, 0, 0)
let key = date.getFullYear() + "-" + padZero(date.getMonth() + 1) + "-" + padZero(date.getDate());
dateParts = d.Date.split('T')[0].split('-');
date = new Date(dateParts[0], dateParts[1]-1, dateParts[2], 0, 0, 0)
key = date.getFullYear() + "-" + padZero(date.getMonth() + 1) + "-" + padZero(date.getDate());
d.Date = date;
datamap[key] = d;
});
}
// make sure we have values for each date
let currentDate = startDate;
while(currentDate < endDate) {
let key = currentDate.getFullYear() + "-" + padZero(currentDate.getMonth() + 1) + "-" + padZero(currentDate.getDate());
let data = datamap[key] ? datamap[key] : {
key = currentDate.getFullYear() + "-" + padZero(currentDate.getMonth() + 1) + "-" + padZero(currentDate.getDate());
data = datamap[key] ? datamap[key] : {
"Pageviews": 0,
"Visitors": 0,
"Date": new Date(currentDate),
@ -65,12 +68,9 @@ function prepareData(startUnix, endUnix, data) {
currentDate.setDate(currentDate.getDate() + 1);
}
return newData;
}
class Chart extends Component {
constructor(props) {
super(props)
@ -89,6 +89,23 @@ class Chart extends Component {
this.fetchData(newProps.before, newProps.after);
}
@bind
prepareChart() {
let padding = { top: 12, right: 12, bottom: 24, left: 40 };
let height = 240;
let width = this.base.clientWidth;
this.innerWidth = width - padding.left - padding.right;
this.innerHeight = height - padding.top - padding.bottom;
this.ctx = d3.select(this.base)
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + padding.left + ', '+padding.top+')')
}
@bind
redrawChart() {
var data = this.state.data;
@ -97,24 +114,17 @@ class Chart extends Component {
return;
}
let padding = { top: 12, right: 12, bottom: 24, left: 40 };
let height = 240;
let width = this.base.clientWidth;
let innerWidth = width - padding.left - padding.right;
let innerHeight = height - padding.top - padding.bottom;
if( ! this.ctx ) {
this.prepareChart()
}
let innerWidth = this.innerWidth
let innerHeight = this.innerHeight
// empty previous graph
if( this.previousGraph ) {
this.previousGraph.selectAll('*').remove();
}
let graph = this.previousGraph = d3.select(this.base)
graph
.append('svg').attr('width', width)
.attr('height', height)
.append('g').attr('transform', 'translate(' + padding.left + ', '+padding.top+')');
graph = graph.select('g')
this.ctx.selectAll('*').remove()
let graph = this.ctx;
const t = d3.transition().duration(500).ease(d3.easeQuadOut);
const max = d3.max(data, (d) => d.Pageviews);

5
assets/src/sass/chart.scss
View File

@ -4,9 +4,8 @@
}
#chart {
height: 100%;
svg{ height: 100%; }
height: 240px;
* { box-sizing: content-box; }
}