From b69bb08bf5a653695a2f4fb8b224924b42bc42c3 Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Fri, 5 May 2017 22:41:53 -0500 Subject: add tooltips to user contrib graph key --- app/assets/javascripts/users/calendar.js | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) (limited to 'app') diff --git a/app/assets/javascripts/users/calendar.js b/app/assets/javascripts/users/calendar.js index 754d448564f..32ffa2f0ac0 100644 --- a/app/assets/javascripts/users/calendar.js +++ b/app/assets/javascripts/users/calendar.js @@ -168,15 +168,23 @@ import d3 from 'd3'; }; Calendar.prototype.renderKey = function() { - var keyColors; - keyColors = ['#ededed', this.colorKey(0), this.colorKey(1), this.colorKey(2), this.colorKey(3)]; - return this.svg.append('g').attr('transform', "translate(18, " + (this.daySizeWithSpace * 8 + 16) + ")").selectAll('rect').data(keyColors).enter().append('rect').attr('width', this.daySize).attr('height', this.daySize).attr('x', (function(_this) { - return function(color, i) { - return _this.daySizeWithSpace * i; - }; - })(this)).attr('y', 0).attr('fill', function(color) { - return color; - }); + const keyValues = ['no contributions', '1-9 contributions', '10-19 contributions', '20-29 contributions', '30+ contributions']; + const keyColors = ['#ededed', this.colorKey(0), this.colorKey(1), this.colorKey(2), this.colorKey(3)]; + + this.svg.append('g') + .attr('transform', `translate(18, ${this.daySizeWithSpace * 8 + 16})`) + .selectAll('rect') + .data(keyColors) + .enter() + .append('rect') + .attr('width', this.daySize) + .attr('height', this.daySize) + .attr('x', (color, i) => this.daySizeWithSpace * i) + .attr('y', 0) + .attr('fill', color => color) + .attr('class', 'js-tooltip') + .attr('title', (color, i) => keyValues[i]) + .attr('data-container', 'body'); }; Calendar.prototype.initColor = function() { -- cgit v1.2.3