Skip to content

Commit 8bdef59

Browse files
tyagestefano-maggiolo
authored andcommitted
Gradient instead of ticks for RWS's rank bar
Committer's note: this is a slightly edited version of the original commit by tyage@ for IOI2018. The differences are: - keep original division in 4th for score bar (instead of 6th); - avoid divisions for rank bar, instead of using 6th (we keep ticks at the very top and bottom mostly because otherwise raphael would not draw the gradient; - do not use ES6 constructs.
1 parent 770e770 commit 8bdef59

1 file changed

Lines changed: 25 additions & 6 deletions

File tree

cmsranking/static/Overview.js

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -126,21 +126,40 @@ var Overview = new function () {
126126

127127

128128
self.update_rank_axis = function () {
129-
var d = Raphael.format("M {1},{3} L {1},{7} M {0},{4} L {2},{4} M {0},{5} L {2},{5} M {0},{6} L {2},{6}",
129+
var d = Raphael.format("M {1},{3} L {1},{4} M {0},{3} L {2},{3} M {0},{4} L {2},{4}",
130130
self.width - self.PAD_R - 4,
131131
self.width - self.PAD_R,
132132
self.width - self.PAD_R + 4,
133133
self.PAD_T,
134-
self.PAD_T + (self.height - self.PAD_T - self.PAD_B) / 12,
135-
self.PAD_T + (self.height - self.PAD_T - self.PAD_B) / 4,
136-
self.PAD_T + (self.height - self.PAD_T - self.PAD_B) / 2,
137134
self.height - self.PAD_B);
138135

136+
var ranks = [
137+
{ color: "#ffd700", ratio: 1/12 },
138+
{ color: "#c0c0c0", ratio: 2/12 },
139+
{ color: "#cd7f32", ratio: 3/12 },
140+
{ color: "#000000", ratio: 6/12 }
141+
];
142+
var stops = [];
143+
var base = 0;
144+
for (var i = 0; i < ranks.length; i++) {
145+
stops.push(ranks[i].color + ":" + (base + (ranks[i].ratio / 3)) * 100);
146+
stops.push(ranks[i].color + ":" + (base + (ranks[i].ratio / 3 * 2)) * 100);
147+
base += ranks[i].ratio;
148+
}
149+
stops = stops.join("-");
150+
139151
if (self.rank_axis) {
140152
self.rank_axis.attr("path", d);
141153
} else {
142-
self.rank_axis = self.paper.path(d).attr(
143-
{"fill": "none", "stroke": "#b8b8b8", "stroke-width": 3, "stroke-linecap": "round"});
154+
// Since raphael does not support gradients for stroke, we set the fill attr to it,
155+
// then move the value to stroke.
156+
self.rank_axis = self.paper.path(d).attr({
157+
"fill": "270-" + stops,
158+
"stroke-width": 3,
159+
"stroke-linecap": "round"
160+
});
161+
self.rank_axis.node.setAttribute("stroke", self.rank_axis.node.getAttribute("fill"));
162+
self.rank_axis.node.setAttribute("fill", "none");
144163
}
145164
};
146165

0 commit comments

Comments
 (0)