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.

Author: tyage

cmsranking/static/Overview.js

@@ -126,21 +126,40 @@ var Overview = new function () {
 
 
     self.update_rank_axis = function () {
-        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}",
+        var d = Raphael.format("M {1},{3} L {1},{4} M {0},{3} L {2},{3} M {0},{4} L {2},{4}",
                                self.width - self.PAD_R - 4,
                                self.width - self.PAD_R,
                                self.width - self.PAD_R + 4,
                                self.PAD_T,
-                               self.PAD_T + (self.height - self.PAD_T - self.PAD_B) / 12,
-                               self.PAD_T + (self.height - self.PAD_T - self.PAD_B) / 4,
-                               self.PAD_T + (self.height - self.PAD_T - self.PAD_B) / 2,
                                self.height - self.PAD_B);
 
+        var ranks = [
+            { color: "#ffd700", ratio: 1/12 },
+            { color: "#c0c0c0", ratio: 2/12 },
+            { color: "#cd7f32", ratio: 3/12 },
+            { color: "#000000", ratio: 6/12 }
+        ];
+        var stops = [];
+        var base = 0;
+        for (var i = 0; i < ranks.length; i++) {
+            stops.push(ranks[i].color + ":" + (base + (ranks[i].ratio / 3)) * 100);
+            stops.push(ranks[i].color + ":" + (base + (ranks[i].ratio / 3 * 2)) * 100);
+            base += ranks[i].ratio;
+        }
+        stops = stops.join("-");
+
         if (self.rank_axis) {
             self.rank_axis.attr("path", d);
         } else {
-            self.rank_axis = self.paper.path(d).attr(
-                {"fill": "none", "stroke": "#b8b8b8", "stroke-width": 3, "stroke-linecap": "round"});
+            // Since raphael does not support gradients for stroke, we set the fill attr to it,
+            // then move the value to stroke.
+            self.rank_axis = self.paper.path(d).attr({
+                "fill": "270-" + stops,
+                "stroke-width": 3,
+                "stroke-linecap": "round"
+            });
+            self.rank_axis.node.setAttribute("stroke", self.rank_axis.node.getAttribute("fill"));
+            self.rank_axis.node.setAttribute("fill", "none");
         }
     };