diff options
| author | Filipa Lacerda <filipa@gitlab.com> | 2017-05-06 10:52:18 +0000 |
|---|---|---|
| committer | Filipa Lacerda <filipa@gitlab.com> | 2017-05-06 10:52:18 +0000 |
| commit | 8e6c4829d6539e80a28e2027ceb78d0a03d5d316 (patch) | |
| tree | 039297429b4180a5498db162b4dcfc0d9c7dce40 | |
| parent | 56fb7823f9740d4595d90dcb224180c950a27048 (diff) | |
| parent | 22bd020028a9e7cadafce01705dcd189cf14f945 (diff) | |
| download | gitlab-ce-8e6c4829d6539e80a28e2027ceb78d0a03d5d316.tar.gz | |
Merge branch '23751-add-contribution-graph-key-tooltips' into 'master'
Add tooltips to user contribution graph key
Closes #23751
See merge request !11138
| -rw-r--r-- | app/assets/javascripts/users/calendar.js | 26 | ||||
| -rw-r--r-- | changelogs/unreleased/23751-add-contribution-graph-key-tooltips.yml | 4 |
2 files changed, 21 insertions, 9 deletions
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() { diff --git a/changelogs/unreleased/23751-add-contribution-graph-key-tooltips.yml b/changelogs/unreleased/23751-add-contribution-graph-key-tooltips.yml new file mode 100644 index 00000000000..7c4c6fb46a0 --- /dev/null +++ b/changelogs/unreleased/23751-add-contribution-graph-key-tooltips.yml @@ -0,0 +1,4 @@ +--- +title: Add tooltips to user contribution graph key +merge_request: 11138 +author: |