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

do not render hidden x-axes ticks. create svg elements in separate threads whenever possible

Browse Source
This commit is contained in:
Danny 2018-06-06 10:05:44 +02:00
parent 0d8e1d2588
commit a8a80cba4a
1 changed files with 35 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -150,49 +150,57 @@ class Chart extends Component {
let yAxis = d3.axisLeft().scale(y).ticks(3).tickSize(-innerWidth) let yAxis = d3.axisLeft().scale(y).ticks(3).tickSize(-innerWidth)
let xAxis = d3.axisBottom().scale(x).tickFormat(timeFormatPicker(data.length)) let xAxis = d3.axisBottom().scale(x).tickFormat(timeFormatPicker(data.length))
// hide all "day" ticks if we're watching more than 100 days of data
if(data.length > 100) {
xAxis.tickValues(data.filter(d => d.Date.getDate() === 1).map(d => d.Date))
}
// empty previous graph // empty previous graph
graph.selectAll('*').remove() graph.selectAll('*').remove()
// add axes // add axes
let yTicks = graph.append("g") requestAnimationFrame(() => {
let yTicks = graph.append("g")
.attr("class", "y axis") .attr("class", "y axis")
.call(yAxis); .call(yAxis);
let xTicks = graph.append("g")
let xTicks = graph.append("g")
.attr("class", "x axis") .attr("class", "x axis")
.attr('transform', 'translate(0,' + innerHeight + ')') .attr('transform', 'translate(0,' + innerHeight + ')')
.call(xAxis) .call(xAxis)
})
// hide all "day" ticks if we're watching more than 100 days of data
if(data.length > 100) {
xTicks.selectAll('g').filter(d => d.getDate() > 1).remove()
}
// add data for each day that we have something to show for // add data for each day that we have something to show for
let days = graph.selectAll('g.day').data(data.filter(d => d.Pageviews > 0 || d.Visitors > 0)).enter() let days = graph.selectAll('g.day').data(data.filter(d => d.Pageviews > 0 || d.Visitors > 0)).enter()
.append('g') .append('g')
.attr('class', 'day') .attr('class', 'day')
.attr('transform', function (d, i) { return "translate(" + x(d.Date) + ", 0)" }) .attr('transform', function (d, i) { return "translate(" + x(d.Date) + ", 0)" })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
let pageviews = days.append('rect') requestAnimationFrame(() => {
.attr('class', 'bar-pageviews') let pageviews = days.append('rect')
.attr('width', x.bandwidth() * 0.5) .attr('class', 'bar-pageviews')
.attr("y", innerHeight) .attr('width', x.bandwidth() * 0.5)
.attr("height", 0) .attr("y", innerHeight)
.transition(t) .attr("height", 0)
.attr('y', d => y(d.Pageviews)) .transition(t)
.attr('height', (d) => innerHeight - y(d.Pageviews)) .attr('y', d => y(d.Pageviews))
.attr('height', (d) => innerHeight - y(d.Pageviews))
})
let visitors = days.append('rect') requestAnimationFrame(() => {
.attr('class', 'bar-visitors') let visitors = days.append('rect')
.attr('width', x.bandwidth() * 0.5) .attr('class', 'bar-visitors')
.attr("y", innerHeight) .attr('width', x.bandwidth() * 0.5)
.attr("height", 0) .attr("y", innerHeight)
.attr('transform', function (d, i) { return "translate(" + ( 0.5 * x.bandwidth() ) + ", 0)" }) .attr("height", 0)
.transition(t) .attr('transform', function (d, i) { return "translate(" + ( 0.5 * x.bandwidth() ) + ", 0)" })
.attr('height', (d) => (innerHeight - y(d.Visitors)) ) .transition(t)
.attr('y', (d) => y(d.Visitors)) .attr('height', (d) => (innerHeight - y(d.Visitors)) )
.attr('y', (d) => y(d.Visitors))
})
// add event listeners for tooltips
days.on('mouseover', tip.show).on('mouseout', tip.hide)
} }
@bind @bind