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

add bandscale to x-axis

Browse Source
This commit is contained in:
Danny van Kooten 2016-12-05 15:31:34 +01:00
parent e314d0971f
commit b40ef9f84c
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
assets/js/components/Graph.js
View File

@ -31,13 +31,14 @@ class Graph extends Component {
} }
refreshChart() { refreshChart() {
var w = 800, var padt = 20, padb = 40, padr = 40, padl = 40,
h = 300, h = 300,
padt = 20, padr = 20, padb = 60, padl = 30, w = document.getElementById('graph').parentNode.clientWidth - padl - padr,
x = d3.scaleBand().rangeRound([0, w - padl - padr]).padding(0.1), x = d3.scaleBand().range([0, w]).padding(0.2),
y = d3.scaleLinear().range([h, 0]), y = d3.scaleLinear().range([h, 0]),
yAxis = d3.axisLeft().scale(y).tickSize(-w + padl + padr), yAxis = d3.axisLeft().scale(y).tickSize(-w + padl + padr),
xAxis = d3.axisBottom().scale(x); xAxis = d3.axisBottom().scale(x),
xTick = Math.round(this.state.visitorData.length / 7);
var tip = d3.tip() var tip = d3.tip()
.attr('class', 'd3-tip') .attr('class', 'd3-tip')
@ -54,7 +55,7 @@ class Graph extends Component {
vis.call(tip); vis.call(tip);
var max = d3.max(this.state.visitorData, function(d) { return d.Count }); var max = d3.max(this.state.visitorData, function(d) { return d.Count });
x.domain(d3.range(this.state.visitorData.length)) x.domain(this.state.visitorData.map((d) => d.Label))
y.domain([0, max]) y.domain([0, max])
// axes // axes
@ -66,8 +67,8 @@ class Graph extends Component {
.attr("class", "x axis") .attr("class", "x axis")
.attr('transform', 'translate(0,' + h + ')') .attr('transform', 'translate(0,' + h + ')')
.call(xAxis) .call(xAxis)
.selectAll('.x.axis g') .selectAll('g')
.style('display', function (d, i) { return i % 3 != 0 ? 'none' : 'block' }); .style('display', (d, i) => i % xTick != 0 ? 'none' : 'block')
// bars // bars
var data = this.state.visitorData; var data = this.state.visitorData;
@ -75,7 +76,7 @@ class Graph extends Component {
.data(data) .data(data)
.enter().append('g') .enter().append('g')
.attr('class', 'bar') .attr('class', 'bar')
.attr('transform', function (d, i) { return "translate(" + x(i) + ", 0)" }); .attr('transform', function (d, i) { return "translate(" + x(d.Label) + ", 0)" });
bars.append('rect') bars.append('rect')
.attr('width', () => x.bandwidth() ) .attr('width', () => x.bandwidth() )