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

re-use some more unchanging variables when changing chart data

Browse Source
This commit is contained in:
Danny 2018-06-05 12:33:16 +02:00
parent 20bb0e40cc
commit 30749cf7af
1 changed files with 36 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,15 +8,32 @@ import * as d3 from 'd3';
import 'd3-transition';
d3.tip = require('d3-tip');
function padZero(s) {
return s < 10 ? "0" + s : s;
}
const formatDay = d3.timeFormat("%e"),
formatMonth = d3.timeFormat("%b"),
formatMonthDay = d3.timeFormat("%b %e"),
formatYear = d3.timeFormat("%Y");
const t = d3.transition().duration(500).ease(d3.easeQuadOut);
// tooltip
const tip = d3.tip().attr('class', 'd3-tip').html((d) => (`
<div class="tip-heading">${d.Date.toLocaleDateString()}</div>
<div class="tip-content">
<div class="tip-pageviews">
<div class="tip-number">${d.Pageviews}</div>
<div class="tip-metric">Pageviews</div>
</div>
<div class="tip-visitors">
<div class="tip-number">${d.Visitors}</div>
<div class="tip-metric">Visitors</div>
</div>
</div>
`));
function padZero(s) {
return s < 10 ? "0" + s : s;
}
function timeFormatPicker(n) {
return function(d, i) {
if(d.getDate() === 1) {
@ -71,6 +88,8 @@ function prepareData(startUnix, endUnix, data) {
return newData;
}
class Chart extends Component {
constructor(props) {
super(props)
@ -104,11 +123,15 @@ class Chart extends Component {
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + padding.left + ', '+padding.top+')')
this.x = d3.scaleBand().range([0, this.innerWidth]).padding(0.1)
this.y = d3.scaleLinear().range([this.innerHeight, 0])
this.ctx.call(tip)
}
@bind
redrawChart() {
var data = this.state.data;
const data = this.state.data;
this.base.parentNode.style.display = data.length <= 1 ? 'none' : '';
if(data.length <= 1) {
return;
@ -118,32 +141,27 @@ class Chart extends Component {
this.prepareChart()
}
let graph = this.ctx;
let innerWidth = this.innerWidth
let innerHeight = this.innerHeight
// empty previous graph
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);
// axes
let x = d3.scaleBand().range([0, innerWidth]).padding(0.1).domain(data.map((d) => d.Date))
let y = d3.scaleLinear().range([innerHeight, 0]).domain([0, (max*1.1)])
let x = this.x.domain(data.map((d) => d.Date))
let y = this.y.domain([0, (max*1.1)])
let yAxis = d3.axisLeft().scale(y).ticks(3).tickSize(-innerWidth)
let xAxis = d3.axisBottom().scale(x).tickFormat(timeFormatPicker(data.length))
// empty previous graph
graph.selectAll('*').remove()
// add axes
let yTicks = graph.append("g")
.attr("class", "y axis")
.call(yAxis);
let xTicks = graph.append("g")
.attr("class", "x axis")
.attr('transform', 'translate(0,' + innerHeight + ')')
.call(xAxis)
// hide all "day" ticks if we're watching more than 100 days of data
xTicks.selectAll('g').style('display', (d, i) => {
if(data.length > 100 && d.getDate() > 1 ) {
@ -153,22 +171,7 @@ class Chart extends Component {
return '';
})
// tooltip
const tip = d3.tip().attr('class', 'd3-tip').html((d) => (`
<div class="tip-heading">${d.Date.toLocaleDateString()}</div>
<div class="tip-content">
<div class="tip-pageviews">
<div class="tip-number">${d.Pageviews}</div>
<div class="tip-metric">Pageviews</div>
</div>
<div class="tip-visitors">
<div class="tip-number">${d.Visitors}</div>
<div class="tip-metric">Visitors</div>
</div>
</div>
`));
graph.call(tip)
// add data for each day
let days = graph.selectAll('g.day').data(data).enter()
.append('g')
.attr('class', 'day')