Merge pull request #89 from cubedro/develop

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

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 {
@ -387,3 +380,7 @@ svg .axis text {
-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;
}

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")

View File

@ -25,33 +25,4 @@
moment.relativeTimeThreshold('d', 28); moment.relativeTimeThreshold('d', 28);
moment.relativeTimeThreshold('M', 12); 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); });
// });
})(); })();