Browse files

Adding a hicontrast option; generated more colors by default

added a new option 'hicontrast' which will skip some colors (this requires some additional colors be generated for graphs with more than 7 or so plots
when not sorting by metric value, reverse the order they will be displayed in (this causes the use case I have to correctly have the highest one on top in the legend)
  • Loading branch information...
1 parent 098a918 commit 7c2de90ec8ca2269122fd7552147b47a9929440b @djljr committed Mar 13, 2012
Showing with 105 additions and 41 deletions.
  1. +19 −4 app/css/high-contrast.scss
  2. +19 −12 app/js/graphene.coffee
  3. +52 −20 build/index.css
  4. +14 −4 build/index.js
  5. +1 −1 tools/gencolors.rb
View
23 app/css/high-contrast.scss
@@ -3,7 +3,7 @@
/*
* Generated high contrast colors. See tools/gencolors.rb
*/
-
+/*
.h-col-1{ stroke: hsl(0, 100%, 50%); fill: hsl(0, 100%, 50%);}
.h-col-2{ stroke: hsl(36, 100%, 50%); fill: hsl(36, 100%, 50%);}
.h-col-3{ stroke: hsl(72, 100%, 50%); fill: hsl(72, 100%, 50%);}
@@ -14,8 +14,23 @@
.h-col-8{ stroke: hsl(252, 100%, 50%); fill: hsl(252, 100%, 50%);}
.h-col-9{ stroke: hsl(288, 100%, 50%); fill: hsl(288, 100%, 50%);}
.h-col-10{ stroke: hsl(324, 100%, 50%); fill: hsl(324, 100%, 50%);}
+*/
-
+.h-col-1{ stroke: hsl(0, 100%, 50%); fill: hsl(0, 100%, 50%);}
+.h-col-2{ stroke: hsl(25, 100%, 50%); fill: hsl(25, 100%, 50%);}
+.h-col-3{ stroke: hsl(50, 100%, 50%); fill: hsl(50, 100%, 50%);}
+.h-col-4{ stroke: hsl(75, 100%, 50%); fill: hsl(75, 100%, 50%);}
+.h-col-5{ stroke: hsl(100, 100%, 50%); fill: hsl(100, 100%, 50%);}
+.h-col-6{ stroke: hsl(125, 100%, 50%); fill: hsl(125, 100%, 50%);}
+.h-col-7{ stroke: hsl(150, 100%, 50%); fill: hsl(150, 100%, 50%);}
+.h-col-8{ stroke: hsl(175, 100%, 50%); fill: hsl(175, 100%, 50%);}
+.h-col-9{ stroke: hsl(200, 100%, 50%); fill: hsl(200, 100%, 50%);}
+.h-col-10{ stroke: hsl(225, 100%, 50%); fill: hsl(225, 100%, 50%);}
+.h-col-11{ stroke: hsl(250, 100%, 50%); fill: hsl(250, 100%, 50%);}
+.h-col-12{ stroke: hsl(275, 100%, 50%); fill: hsl(275, 100%, 50%);}
+.h-col-13{ stroke: hsl(300, 100%, 50%); fill: hsl(300, 100%, 50%);}
+.h-col-14{ stroke: hsl(325, 100%, 50%); fill: hsl(325, 100%, 50%);}
+.h-col-15{ stroke: hsl(350, 100%, 50%); fill: hsl(350, 100%, 50%);}
@@ -127,13 +142,13 @@ text, tspan{
.gauge{
circle{
&.outer{
- fill: #101010;
+ fill: #151515;
stroke: #000;
stroke-width: 0.5px;
}
&.inner{
- fill: #050505;
+ fill: #111;
stroke: #000;
stroke-width: 2px;
}
View
31 app/js/graphene.coffee
@@ -109,7 +109,7 @@ class Graphene.DemoTimeSeries extends Backbone.Model
refresh: ()=>
# clone data - tricks d3/backbone refs
- @data = _.map @data, (d)->
+ @data = _.map @data, (d)->
d = _.clone(d)
d.points = _.map(d.points, (p)-> [p[0], p[1]])
d
@@ -154,7 +154,7 @@ class Graphene.TimeSeries extends Graphene.GraphiteModel
points: _.reject(dp.datapoints, (d)-> d[0] == null),
ymin: min,
ymax: max,
- label: dp.target
+ label: dp.target
}
data = _.reject data, (d)-> d == null
@set(data:data)
@@ -314,6 +314,7 @@ class Graphene.TimeSeriesView extends Backbone.View
@parent = @options.parent || '#parent'
@show = @options.show || {min: true, max: true, cur: true}
@start_color = @options.start_color || 0
+ @hicontrast = @options.hicontrast
@null_value = 0
@noarea = @options.noarea
@nosort = @options.nosort
@@ -385,15 +386,21 @@ class Graphene.TimeSeriesView extends Backbone.View
#
if not @nosort
order = if(@sort_labels == 'desc') then -1 else 1
-
data = _.sortBy(data, (d)-> order*d.ymax)
+ else
+ data.reverse()
#
# get raw data points (throw away all of the other blabber
#
points = _.map data, (d)-> d.points
start = @start_color
+ color_fn = (i) =>
+ if @hicontrast
+ @start_color + 2 * (i + 1)
+ else
+ @start_color + i + 1
if @firstrun
@firstrun = false
@@ -418,8 +425,8 @@ class Graphene.TimeSeriesView extends Backbone.View
# so enter() exit() semantics are invalid. We will append here, and later just replace (update).
# To see an idiomatic d3 handling, take a look at the legend fixture.
#
- vis.selectAll("path.line").data(points).enter().append('path').attr("d", line).attr('class', (d,i) -> 'line '+"h-col-#{start+i+1}")
- vis.selectAll("path.area").data(points).enter().append('path').attr("d", area).attr('class', (d,i) -> 'area '+"h-col-#{start+i+1}")
+ vis.selectAll("path.line").data(points).enter().append('path').attr("d", line).attr('class', (d,i) -> 'line '+"h-col-#{color_fn(i)}")
+ vis.selectAll("path.area").data(points).enter().append('path').attr("d", area).attr('class', (d,i) -> 'area '+"h-col-#{color_fn(i)}")
#
# Title + Legend
@@ -458,7 +465,7 @@ class Graphene.TimeSeriesView extends Backbone.View
litem_enters.append('svg:rect')
.attr('width', 5)
.attr('height', 5)
- .attr('class', (d,i) -> 'ts-color '+"h-col-#{start+i+1}")
+ .attr('class', (d,i) -> 'ts-color '+"h-col-#{color_fn(i)}")
litem_enters_text = litem_enters.append('svg:text')
.attr('dx', 10)
.attr('dy', 6)
@@ -497,20 +504,20 @@ class Graphene.TimeSeriesView extends Backbone.View
vis.selectAll("path.area")
.data(points)
.attr("transform", (d)-> "translate(" + x(d[1][1]) + ")")
- .attr("d", area)
- .transition()
+ .attr("d", area)
+ .transition()
.ease("linear")
- .duration(@animate_ms)
+ .duration(@animate_ms)
.attr("transform", (d) -> "translate(" + x(d[0][1]) + ")")
vis.selectAll("path.line")
.data(points)
.attr("transform", (d)-> "translate(" + x(d[1][1]) + ")")
- .attr("d", line)
- .transition()
+ .attr("d", line)
+ .transition()
.ease("linear")
- .duration(@animate_ms)
+ .duration(@animate_ms)
.attr("transform", (d) -> "translate(" + x(d[0][1]) + ")")
View
72 build/index.css
@@ -627,45 +627,77 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105,
/*
* Generated high contrast colors. See tools/gencolors.rb
*/
+/*
+.h-col-1{ stroke: hsl(0, 100%, 50%); fill: hsl(0, 100%, 50%);}
+.h-col-2{ stroke: hsl(36, 100%, 50%); fill: hsl(36, 100%, 50%);}
+.h-col-3{ stroke: hsl(72, 100%, 50%); fill: hsl(72, 100%, 50%);}
+.h-col-4{ stroke: hsl(108, 100%, 50%); fill: hsl(108, 100%, 50%);}
+.h-col-5{ stroke: hsl(144, 100%, 50%); fill: hsl(144, 100%, 50%);}
+.h-col-6{ stroke: hsl(180, 100%, 50%); fill: hsl(180, 100%, 50%);}
+.h-col-7{ stroke: hsl(216, 100%, 50%); fill: hsl(216, 100%, 50%);}
+.h-col-8{ stroke: hsl(252, 100%, 50%); fill: hsl(252, 100%, 50%);}
+.h-col-9{ stroke: hsl(288, 100%, 50%); fill: hsl(288, 100%, 50%);}
+.h-col-10{ stroke: hsl(324, 100%, 50%); fill: hsl(324, 100%, 50%);}
+*/
.h-col-1 {
stroke: red;
fill: red; }
.h-col-2 {
- stroke: #ff9900;
- fill: #ff9900; }
+ stroke: #ff6a00;
+ fill: #ff6a00; }
.h-col-3 {
- stroke: #ccff00;
- fill: #ccff00; }
+ stroke: #ffd500;
+ fill: #ffd500; }
.h-col-4 {
- stroke: #33ff00;
- fill: #33ff00; }
+ stroke: #bfff00;
+ fill: #bfff00; }
.h-col-5 {
- stroke: #00ff66;
- fill: #00ff66; }
+ stroke: #55ff00;
+ fill: #55ff00; }
.h-col-6 {
- stroke: aqua;
- fill: aqua; }
+ stroke: #00ff15;
+ fill: #00ff15; }
.h-col-7 {
- stroke: #0066ff;
- fill: #0066ff; }
+ stroke: #00ff80;
+ fill: #00ff80; }
.h-col-8 {
- stroke: #3300ff;
- fill: #3300ff; }
+ stroke: #00ffea;
+ fill: #00ffea; }
.h-col-9 {
- stroke: #cc00ff;
- fill: #cc00ff; }
+ stroke: #00aaff;
+ fill: #00aaff; }
.h-col-10 {
- stroke: #ff0099;
- fill: #ff0099; }
+ stroke: #0040ff;
+ fill: #0040ff; }
+
+.h-col-11 {
+ stroke: #2a00ff;
+ fill: #2a00ff; }
+
+.h-col-12 {
+ stroke: #9500ff;
+ fill: #9500ff; }
+
+.h-col-13 {
+ stroke: fuchsia;
+ fill: fuchsia; }
+
+.h-col-14 {
+ stroke: #ff0095;
+ fill: #ff0095; }
+
+.h-col-15 {
+ stroke: #ff002b;
+ fill: #ff002b; }
body {
background: #000;
@@ -748,11 +780,11 @@ text, tspan {
display: inline;
text-align: center; }
.ggview .gauge circle.outer {
- fill: #101010;
+ fill: #151515;
stroke: #000;
stroke-width: 0.5px; }
.ggview .gauge circle.inner {
- fill: #050505;
+ fill: #111;
stroke: #000;
stroke-width: 2px; }
.ggview .gauge circle.pointer-circle {
View
18 build/index.js
@@ -8252,6 +8252,7 @@ function Gauge(placeholderName, configuration)
cur: true
};
this.start_color = this.options.start_color || 0;
+ this.hicontrast = this.options.hicontrast;
this.null_value = 0;
this.noarea = this.options.noarea;
this.nosort = this.options.nosort;
@@ -8263,7 +8264,7 @@ function Gauge(placeholderName, configuration)
};
TimeSeriesView.prototype.render = function() {
- var area, data, dmax, dmin, dx, leg_items, line, litem_enters, litem_enters_text, logFormat, numberFormat, order, points, start, title, vis, x, xAxis, xtick_sz, y, yAxis,
+ var area, color_fn, data, dmax, dmin, dx, leg_items, line, litem_enters, litem_enters_text, logFormat, numberFormat, order, points, start, title, vis, x, xAxis, xtick_sz, y, yAxis,
_this = this;
console.log("rendering.");
data = this.model.get('data');
@@ -8321,20 +8322,29 @@ function Gauge(placeholderName, configuration)
data = _.sortBy(data, function(d) {
return order * d.ymax;
});
+ } else {
+ data.reverse();
}
points = _.map(data, function(d) {
return d.points;
});
start = this.start_color;
+ color_fn = function(i) {
+ if (_this.hicontrast) {
+ return _this.start_color + 2 * (i + 1);
+ } else {
+ return _this.start_color + i + 1;
+ }
+ };
if (this.firstrun) {
this.firstrun = false;
vis.append("svg:g").attr("class", "x axis").attr("transform", "translate(0," + this.height + ")").transition().duration(this.animate_ms).call(xAxis);
vis.append("svg:g").attr("class", "y axis").call(yAxis);
vis.selectAll("path.line").data(points).enter().append('path').attr("d", line).attr('class', function(d, i) {
- return 'line ' + ("h-col-" + (start + i + 1));
+ return 'line ' + ("h-col-" + (color_fn(i)));
});
vis.selectAll("path.area").data(points).enter().append('path').attr("d", area).attr('class', function(d, i) {
- return 'area ' + ("h-col-" + (start + i + 1));
+ return 'area ' + ("h-col-" + (color_fn(i)));
});
if (this.title) {
title = vis.append('svg:text').attr('class', 'title').attr('transform', "translate(0, -" + this.line_height + ")").text(this.title);
@@ -8349,7 +8359,7 @@ function Gauge(placeholderName, configuration)
return "translate(0, " + (i * _this.line_height) + ")";
}).attr('class', 'l');
litem_enters.append('svg:rect').attr('width', 5).attr('height', 5).attr('class', function(d, i) {
- return 'ts-color ' + ("h-col-" + (start + i + 1));
+ return 'ts-color ' + ("h-col-" + (color_fn(i)));
});
litem_enters_text = litem_enters.append('svg:text').attr('dx', 10).attr('dy', 6).attr('class', 'ts-text').text(function(d) {
return _this.label_formatter(d.label);
View
2 tools/gencolors.rb
@@ -15,7 +15,7 @@
# dashboard.
#
-NUM_COLORS = 10
+NUM_COLORS = 14
interval = 360/NUM_COLORS
i=0

0 comments on commit 7c2de90

Please sign in to comment.