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

block propagation chart styling

This commit is contained in:
cubedro 2015-04-23 21:24:01 +03:00
parent 00560c1a50
commit 9539cc1416
2 changed files with 19 additions and 16 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 { svg .bars .bar {
fill: #10a0de; opacity: 1;
opacity: 0.8;
shape-rendering: auto; shape-rendering: auto;
} }
svg .bars .handle { svg .bars .handle {
fill: #10a0de;
opacity: 0; opacity: 0;
} }
svg .bars .highlight { svg .bars .highlight {
fill: #fff;
opacity: 0; opacity: 0;
} }
svg .bars g:hover .bar { svg .bars g:hover .highlight {
opacity: 1; opacity: 1;
} }
svg .line { svg .line {
fill: none; fill: none;
stroke: #ff0000; stroke: #ff0000;
opacity: 0.8; stroke-width: 1.3px;
stroke-width: 2px; shape-rendering: geometric-precision;
shape-rendering: auto; -webkit-svg-shadow: 0 0 7px #fff;
}
svg .bar .a {
fill: #aec7e8;
} }
svg .bar text { svg .bar text {
@ -386,4 +379,8 @@ svg .axis text {
font-weight: 700; font-weight: 700;
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;
-moz-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]) .range([height, 0])
.interpolate(d3.interpolateRound); .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() var xAxis = d3.svg.axis()
.scale(x) .scale(x)
.orient("bottom") .orient("bottom")
@ -112,7 +116,7 @@ angular.module('netStatsApp.directives', []).
var line = d3.svg.line() var line = d3.svg.line()
.x(function(d) { return x(d.x + d.dx/2) - 1; }) .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'); .interpolate('basis');
var tip = d3.tip() var tip = d3.tip()
@ -156,13 +160,13 @@ angular.module('netStatsApp.directives', []).
.call(yAxis); .call(yAxis);
var bar = svg.insert("g", ".axis") var bar = svg.append("g")
.attr("class", "bars") .attr("class", "bars")
.selectAll("g") .selectAll("g")
.data(data) .data(data)
.enter().append("g") .enter().append("g")
.attr("transform", function(d) { return "translate(" + x(d.x) + ",0)"; }) .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); .on('mouseout', tip.hide);
bar.insert("rect") bar.insert("rect")
@ -176,16 +180,18 @@ angular.module('netStatsApp.directives', []).
.attr("y", function(d) { return y(d.y); }) .attr("y", function(d) { return y(d.y); })
.attr("rx", 1.2) .attr("rx", 1.2)
.attr("ry", 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("width", x(data[0].dx + data[0].x) - x(data[0].x) - 1)
.attr("height", function(d) { return height - y(d.y) + 1; }); .attr("height", function(d) { return height - y(d.y) + 1; });
bar.insert("rect") bar.insert("rect")
.attr("class", "highlight") .attr("class", "highlight")
.attr("y", function(d) { return y(d.y); }) .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("rx", 1)
.attr("ry", 1) .attr("ry", 1)
.attr("width", x(data[0].dx + data[0].x) - x(data[0].x) - 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") svg.append("path")
.attr("class", "line") .attr("class", "line")