grassrootseconomics/ethstats-server
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #89 from cubedro/develop

Browse Source 
Code cleanup & propagation histogram styling
This commit is contained in:
Marian OANCΞA 2015-04-23 21:24:38 +03:00
commit ac60ab3a4b
3 changed files with 19 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
public/css/style.css
View File

@ -336,35 +336,28 @@ svg {
}
svg .bars .bar {
fill: #10a0de;
opacity: 0.8;
opacity: 1;
shape-rendering: auto;
}
svg .bars .handle {
fill: #10a0de;
opacity: 0;
}
svg .bars .highlight {
fill: #fff;
opacity: 0;
}
svg .bars g:hover .bar {
svg .bars g:hover .highlight {
opacity: 1;
}
svg .line {
fill: none;
stroke: #ff0000;
opacity: 0.8;
stroke-width: 2px;
shape-rendering: auto;
}
svg .bar .a {
fill: #aec7e8;
stroke-width: 1.3px;
shape-rendering: geometric-precision;
-webkit-svg-shadow: 0 0 7px #fff;
}
svg .bar text {
@ -386,4 +379,8 @@ svg .axis text {
font-weight: 700;
-webkit-font-smoothing: subpixel-antialiased;
-moz-font-smoothing: subpixel-antialiased;
}
svg .y.axis .tick:first-child text {
opacity: 0;
}

14
public/js/directives.js
View File

@ -98,6 +98,10 @@ angular.module('netStatsApp.directives', []).
.range([height, 0])
.interpolate(d3.interpolateRound);
var color = d3.scale.linear()
.domain([1000, 3000, 7000, 10000, 20000])
.range(["#7bcc3a", "#FFD162", "#ff8a00", "#F74B4B", "#CC0000"]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
@ -112,7 +116,7 @@ angular.module('netStatsApp.directives', []).
var line = d3.svg.line()
.x(function(d) { return x(d.x + d.dx/2) - 1; })
.y(function(d) { return y(d.y); })
.y(function(d) { return y(d.y) - 2; })
.interpolate('basis');
var tip = d3.tip()
@ -156,13 +160,13 @@ angular.module('netStatsApp.directives', []).
.call(yAxis);
var bar = svg.insert("g", ".axis")
var bar = svg.append("g")
.attr("class", "bars")
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d) { return "translate(" + x(d.x) + ",0)"; })
.on('mouseover', function(d) { tip.show(d, d3.select(this).select('.bar')[0][0]); })
.on('mouseover', function(d) { tip.show(d, d3.select(this).select('.bar').node()); })
.on('mouseout', tip.hide);
bar.insert("rect")
@ -176,16 +180,18 @@ angular.module('netStatsApp.directives', []).
.attr("y", function(d) { return y(d.y); })
.attr("rx", 1.2)
.attr("ry", 1.2)
.attr("fill", function(d) { return color(d.x); })
.attr("width", x(data[0].dx + data[0].x) - x(data[0].x) - 1)
.attr("height", function(d) { return height - y(d.y) + 1; });
bar.insert("rect")
.attr("class", "highlight")
.attr("y", function(d) { return y(d.y); })
.attr("fill", function(d) { return d3.rgb(color(d.x)).brighter(.7).toString(); })
.attr("rx", 1)
.attr("ry", 1)
.attr("width", x(data[0].dx + data[0].x) - x(data[0].x) - 1)
.attr("height", function(d) { return height - y(d.y); });
.attr("height", function(d) { return height - y(d.y) + 1; });
svg.append("path")
.attr("class", "line")

29
public/js/script.js
View File

@ -25,33 +25,4 @@
moment.relativeTimeThreshold('d', 28);
moment.relativeTimeThreshold('M', 12);
// var bar = svg.insert("g", ".axis")
// .attr("class", "bar")
// .selectAll("g")
// .data(histogram)
// .enter().append("g")
// .attr("transform", function(d) { return "translate(" + x(d.x) + ",0)"; });
// bar.append("rect")
// .attr("class", "b")
// .attr("x", 1)
// .attr("y", function(d) { return y(d.b); })
// .attr("width", x(histogram[0].dx) - 1)
// .attr("height", function(d) { return height - y(d.b); });
// bar.append("rect")
// .attr("class", "a")
// .attr("x", 1)
// .attr("y", function(d) { return y(d.y); })
// .attr("width", x(histogram[0].dx) - 1)
// .attr("height", function(d) { return height - y(d.a); });
// bar.filter(function(d) { return d.y / n >= .0095; }).append("text")
// .attr("dy", ".015em")
// .attr("transform", function(d) { return "translate(" + x(histogram[0].dx) / 2 + "," + (y(1000) + 6) + ")rotate(-90)"; })
// // .attr("transform", function(d) { return "translate(" + x(histogram[0].dx) / 2 + "," + (y(d.y) + 6) + ")rotate(-90)"; })
// .text(function(d) { return formatPercent(d.y / n); });
// });
})();