serv/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-12-28 14:43:52 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

Refactor heatmap to vue component (#5401)

Browse source
This commit is contained in:
Lauris BH 2018-11-27 11:36:54 +02:00 committed by Jonas Franz
parent c03a9b3e42
commit e09fe48773
18 changed files with 258 additions and 384 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
custom/conf/app.ini.sample
View file

@ -85,8 +85,6 @@ MAX_DISPLAY_FILE_SIZE = 8388608
SHOW_USER_EMAIL = true
; Set the default theme for the Gitea install
DEFAULT_THEME = gitea
; Set the color range to use for heatmap (default to `['#f4f4f4', '#459928']` but can use `['#2d303b', '#80bb46']` with the theme `arc-green`)
HEATMAP_COLOR_RANGE = `['#f4f4f4', '#459928']`
[ui.admin]
; Number of users that are displayed on one page

2
modules/setting/setting.go
View file

@ -301,7 +301,6 @@ var (
MaxDisplayFileSize int64
ShowUserEmail bool
DefaultTheme string
HeatmapColorRange string
Admin struct {
UserPagingNum int
@ -328,7 +327,6 @@ var (
ThemeColorMetaTag: `#6cc644`,
MaxDisplayFileSize: 8388608,
DefaultTheme: `gitea`,
HeatmapColorRange: `['#f4f4f4', '#459928']`,
Admin: struct {
UserPagingNum int
RepoPagingNum int

3
modules/templates/helper.go
View file

@ -193,9 +193,6 @@ func NewFuncMap() []template.FuncMap {
"DefaultTheme": func() string {
return setting.UI.DefaultTheme
},
"HeatmapColorRange": func() string {
return setting.UI.HeatmapColorRange
},
"dict": func(values ...interface{}) (map[string]interface{}, error) {
if len(values) == 0 {
return nil, errors.New("invalid dict call")

2
public/css/index.css
View file

File diff suppressed because one or more lines are too long

2
public/css/theme-arc-green.css
View file

File diff suppressed because one or more lines are too long

90
public/js/index.js
View file

@ -2293,6 +2293,96 @@ function cancelStopwatch() {
$("#cancel_stopwatch_form").submit();
}
function initHeatmap(appElementId, heatmapUser, locale) {
var el = document.getElementById(appElementId);
if (!el) {
return;
}
locale = locale || {};
locale.contributions = locale.contributions || 'contributions';
locale.no_contributions = locale.no_contributions || 'No contributions';
var vueDelimeters = ['${', '}'];
Vue.component('activity-heatmap', {
delimiters: vueDelimeters,
props: {
user: {
type: String,
required: true
},
suburl: {
type: String,
required: true
},
locale: {
type: Object,
required: true
}
},
data: function () {
return {
isLoading: true,
colorRange: [],
endDate: null,
values: []
};
},
mounted: function() {
this.colorRange = [
this.getColor(0),
this.getColor(1),
this.getColor(2),
this.getColor(3),
this.getColor(4),
this.getColor(5)
];
console.log(this.colorRange);
this.endDate = new Date();
this.loadHeatmap(this.user);
},
methods: {
loadHeatmap: function(userName) {
var self = this;
$.get(this.suburl + '/api/v1/users/' + userName + '/heatmap', function(chartRawData) {
var chartData = [];
for (var i = 0; i < chartRawData.length; i++) {
chartData[i] = { date: new Date(chartRawData[i].timestamp * 1000), count: chartRawData[i].contributions };
}
self.values = chartData;
self.isLoading = false;
});
},
getColor: function(idx) {
var el = document.createElement('div');
el.className = 'heatmap-color-' + idx;
return getComputedStyle(el).backgroundColor;
}
},
template: '<div><div v-show="isLoading"><slot name="loading"></slot></div><calendar-heatmap v-show="!isLoading" :locale="locale" :no-data-text="locale.no_contributions" :tooltip-unit="locale.contributions" :end-date="endDate" :values="values" :range-color="colorRange" />'
});
new Vue({
delimiters: vueDelimeters,
el: el,
data: {
suburl: document.querySelector('meta[name=_suburl]').content,
heatmapUser: heatmapUser,
locale: locale
},
});
}
function initFilterBranchTagDropdown(selector) {
$(selector).each(function() {
var $dropdown = $(this);

24
public/less/_base.less
View file

@ -605,3 +605,27 @@ footer {
}
}
}
.heatmap-color-0 {
background-color: #f4f4f4;
}
.heatmap-color-1 {
background-color: #d7e5db;
}
.heatmap-color-2 {
background-color: #adc7ab;
}
.heatmap-color-3 {
background-color: #83a87b;
}
.heatmap-color-4 {
background-color: #598a4b;
}
.heatmap-color-5 {
background-color: #2f6b1b;
}

4
public/less/themes/arc-green.less
View file

@ -818,3 +818,7 @@
color: #9e9e9e;
}
}
.heatmap-color-0 {
background-color: #2d303b;
}

11
public/vendor/librejs.html vendored
View file

@ -136,14 +136,9 @@
<td><a href="https://github.com/swagger-api/swagger-ui/archive/v3.0.4.tar.gz">swagger-ui-v3.0.4.tar.gz</a></td>
</tr>
<tr>
<td><a href="./plugins/d3/">d3</a></td>
<td><a href="https://github.com/d3/d3/blob/master/LICENSE">BSD 3-Clause</a></td>
<td><a href="https://github.com/d3/d3/releases/download/v4.13.0/d3.zip">d3.zip</a></td>
</tr>
<tr>
<td><a href="./plugins/calendar-heatmap/">calendar-heatmap</a></td>
<td><a href="https://github.com/DKirwan/calendar-heatmap/blob/master/LICENSE">MIT</a></td>
<td><a href="https://github.com/DKirwan/calendar-heatmap/archive/master.zip">337b431.zip</a></td>
<td><a href="./plugins/vue-calendar-heatmap">vue-calendar-heatmap</a></td>
<td><a href="https://github.com/WildCodeSchool/vue-calendar-heatmap/blob/master/README.md">MIT</a></td>
<td><a href="https://github.com/WildCodeSchool/vue-calendar-heatmap/archive/master.zip">7f48b20.zip</a></td>
</tr>
<tr>
<td><a href="./plugins/moment/">moment.js</a></td>

27
public/vendor/plugins/calendar-heatmap/calendar-heatmap.css vendored
View file

@ -1,27 +0,0 @@
text.month-name,
text.calendar-heatmap-legend-text,
text.day-initial {
font-size: 10px;
fill: inherit;
font-family: Helvetica, arial, 'Open Sans', sans-serif;
}
rect.day-cell:hover {
stroke: #555555;
stroke-width: 1px;
}
.day-cell-tooltip {
position: absolute;
z-index: 9999;
padding: 5px 9px;
color: #bbbbbb;
font-size: 12px;
background: rgba(0, 0, 0, 0.85);
border-radius: 3px;
text-align: center;
}
.day-cell-tooltip > span {
font-family: Helvetica, arial, 'Open Sans', sans-serif
}
.calendar-heatmap {
box-sizing: initial;
}

311
public/vendor/plugins/calendar-heatmap/calendar-heatmap.js vendored
View file

@ -1,311 +0,0 @@
// https://github.com/DKirwan/calendar-heatmap
function calendarHeatmap() {
// defaults
var width = 750;
var height = 110;
var legendWidth = 150;
var selector = 'body';
var SQUARE_LENGTH = 11;
var SQUARE_PADDING = 2;
var MONTH_LABEL_PADDING = 6;
var now = moment().endOf('day').toDate();
var yearAgo = moment().startOf('day').subtract(1, 'year').toDate();
var startDate = null;
var counterMap= {};
var data = [];
var max = null;
var colorRange = ['#D8E6E7', '#218380'];
var tooltipEnabled = true;
var tooltipUnit = 'contribution';
var legendEnabled = true;
var onClick = null;
var weekStart = 1; //0 for Sunday, 1 for Monday
var locale = {
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
days: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
No: 'No',
on: 'on',
Less: 'Less',
More: 'More'
};
var v = Number(d3.version.split('.')[0]);
// setters and getters
chart.data = function (value) {
if (!arguments.length) { return data; }
data = value;
counterMap= {};
data.forEach(function (element, index) {
var key= moment(element.date).format( 'YYYY-MM-DD' );
var counter= counterMap[key] || 0;
counterMap[key]= counter + element.count;
});
return chart;
};
chart.max = function (value) {
if (!arguments.length) { return max; }
max = value;
return chart;
};
chart.selector = function (value) {
if (!arguments.length) { return selector; }
selector = value;
return chart;
};
chart.startDate = function (value) {
if (!arguments.length) { return startDate; }
yearAgo = value;
now = moment(value).endOf('day').add(1, 'year').toDate();
return chart;
};
chart.colorRange = function (value) {
if (!arguments.length) { return colorRange; }
colorRange = value;
return chart;
};
chart.tooltipEnabled = function (value) {
if (!arguments.length) { return tooltipEnabled; }
tooltipEnabled = value;
return chart;
};
chart.tooltipUnit = function (value) {
if (!arguments.length) { return tooltipUnit; }
tooltipUnit = value;
return chart;
};
chart.legendEnabled = function (value) {
if (!arguments.length) { return legendEnabled; }
legendEnabled = value;
return chart;
};
chart.onClick = function (value) {
if (!arguments.length) { return onClick(); }
onClick = value;
return chart;
};
chart.locale = function (value) {
if (!arguments.length) { return locale; }
locale = value;
return chart;
};
function chart() {
d3.select(chart.selector()).selectAll('svg.calendar-heatmap').remove(); // remove the existing chart, if it exists
var dateRange = ((d3.time && d3.time.days) || d3.timeDays)(yearAgo, now); // generates an array of date objects within the specified range
var monthRange = ((d3.time && d3.time.months) || d3.timeMonths)(moment(yearAgo).startOf('month').toDate(), now); // it ignores the first month if the 1st date is after the start of the month
var firstDate = moment(dateRange[0]);
if (chart.data().length == 0) {
max = 0;
} else if (max === null) {
max = d3.max(chart.data(), function (d) { return d.count; }); // max data value
}
// color range
var color = ((d3.scale && d3.scale.linear) || d3.scaleLinear)()
.range(chart.colorRange())
.domain([0, max]);
var tooltip;
var dayRects;
drawChart();
function drawChart() {
var svg = d3.select(chart.selector())
.style('position', 'relative')
.append('svg')
.attr('width', width)
.attr('class', 'calendar-heatmap')
.attr('height', height)
.style('padding', '36px');
dayRects = svg.selectAll('.day-cell')
.data(dateRange); // array of days for the last yr
var enterSelection = dayRects.enter().append('rect')
.attr('class', 'day-cell')
.attr('width', SQUARE_LENGTH)
.attr('height', SQUARE_LENGTH)
.attr('fill', function(d) { return color(countForDate(d)); })
.attr('x', function (d, i) {
var cellDate = moment(d);
var result = cellDate.week() - firstDate.week() + (firstDate.weeksInYear() * (cellDate.weekYear() - firstDate.weekYear()));
return result * (SQUARE_LENGTH + SQUARE_PADDING);
})
.attr('y', function (d, i) {
return MONTH_LABEL_PADDING + formatWeekday(d.getDay()) * (SQUARE_LENGTH + SQUARE_PADDING);
});
if (typeof onClick === 'function') {
(v === 3 ? enterSelection : enterSelection.merge(dayRects)).on('click', function(d) {
var count = countForDate(d);
onClick({ date: d, count: count});
});
}
if (chart.tooltipEnabled()) {
(v === 3 ? enterSelection : enterSelection.merge(dayRects)).on('mouseover', function(d, i) {
tooltip = d3.select(chart.selector())
.append('div')
.attr('class', 'day-cell-tooltip')
.html(tooltipHTMLForDate(d))
.style('left', function () { return Math.floor(i / 7) * SQUARE_LENGTH + 'px'; })
.style('top', function () {
return formatWeekday(d.getDay()) * (SQUARE_LENGTH + SQUARE_PADDING) + MONTH_LABEL_PADDING * 2 + 'px';
});
})
.on('mouseout', function (d, i) {
tooltip.remove();
});
}
if (chart.legendEnabled()) {
var colorRange = [color(0)];
for (var i = 3; i > 0; i--) {
colorRange.push(color(max / i));
}
var legendGroup = svg.append('g');
legendGroup.selectAll('.calendar-heatmap-legend')
.data(colorRange)
.enter()
.append('rect')
.attr('class', 'calendar-heatmap-legend')
.attr('width', SQUARE_LENGTH)
.attr('height', SQUARE_LENGTH)
.attr('x', function (d, i) { return (width - legendWidth) + (i + 1) * 13; })
.attr('y', height + SQUARE_PADDING)
.attr('fill', function (d) { return d; });
legendGroup.append('text')
.attr('class', 'calendar-heatmap-legend-text calendar-heatmap-legend-text-less')
.attr('x', width - legendWidth - 13)
.attr('y', height + SQUARE_LENGTH)
.text(locale.Less);
legendGroup.append('text')
.attr('class', 'calendar-heatmap-legend-text calendar-heatmap-legend-text-more')
.attr('x', (width - legendWidth + SQUARE_PADDING) + (colorRange.length + 1) * 13)
.attr('y', height + SQUARE_LENGTH)
.text(locale.More);
}
dayRects.exit().remove();
var monthLabels = svg.selectAll('.month')
.data(monthRange)
.enter().append('text')
.attr('class', 'month-name')
.text(function (d) {
return locale.months[d.getMonth()];
})
.attr('x', function (d, i) {
var matchIndex = 0;
dateRange.find(function (element, index) {
matchIndex = index;
return moment(d).isSame(element, 'month') && moment(d).isSame(element, 'year');
});
return Math.floor(matchIndex / 7) * (SQUARE_LENGTH + SQUARE_PADDING);
})
.attr('y', 0); // fix these to the top
locale.days.forEach(function (day, index) {
index = formatWeekday(index);
if (index % 2) {
svg.append('text')
.attr('class', 'day-initial')
.attr('transform', 'translate(-8,' + (SQUARE_LENGTH + SQUARE_PADDING) * (index + 1) + ')')
.style('text-anchor', 'middle')
.attr('dy', '2')
.text(day);
}
});
}
function pluralizedTooltipUnit (count) {
if ('string' === typeof tooltipUnit) {
return (tooltipUnit + (count === 1 ? '' : 's'));
}
for (var i in tooltipUnit) {
var _rule = tooltipUnit[i];
var _min = _rule.min;
var _max = _rule.max || _rule.min;
_max = _max === 'Infinity' ? Infinity : _max;
if (count >= _min && count <= _max) {
return _rule.unit;
}
}
}
function tooltipHTMLForDate(d) {
var dateStr = moment(d).format('ddd, MMM Do YYYY');
var count = countForDate(d);
return '<span><strong>' + (count ? count : locale.No) + ' ' + pluralizedTooltipUnit(count) + '</strong> ' + locale.on + ' ' + dateStr + '</span>';
}
function countForDate(d) {
var key= moment(d).format( 'YYYY-MM-DD' );
return counterMap[key] || 0;
}
function formatWeekday(weekDay) {
if (weekStart === 1) {
if (weekDay === 0) {
return 6;
} else {
return weekDay - 1;
}
}
return weekDay;
}
var daysOfChart = chart.data().map(function (day) {
return day.date.toDateString();
});
}
return chart;
}
// polyfill for Array.find() method
/* jshint ignore:start */
if (!Array.prototype.find) {
Array.prototype.find = function (predicate) {
if (this === null) {
throw new TypeError('Array.prototype.find called on null or undefined');
}
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
var list = Object(this);
var length = list.length >>> 0;
var thisArg = arguments[1];
var value;
for (var i = 0; i < length; i++) {
value = list[i];
if (predicate.call(thisArg, value, i, list)) {
return value;
}
}
return undefined;
};
}
/* jshint ignore:end */

2
public/vendor/plugins/d3/d3.v4.min.js vendored
View file

File diff suppressed because one or more lines are too long

1
public/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.browser.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

112
public/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.css vendored Normal file
View file

@ -0,0 +1,112 @@
svg.vch__wrapper[data-v-a9cfea66] {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 10px;
}
svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9cfea66] {
font-size: 10px;
}
svg.vch__wrapper .vch__days__labels__wrapper text.vch__day__label[data-v-a9cfea66],
svg.vch__wrapper .vch__legend__wrapper text[data-v-a9cfea66] {
font-size: 9px;
}
svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9cfea66],
svg.vch__wrapper .vch__days__labels__wrapper text.vch__day__label[data-v-a9cfea66],
svg.vch__wrapper .vch__legend__wrapper text[data-v-a9cfea66] {
fill: #767676;
}
svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover {
stroke: #555;
stroke-width: 1px;
}
svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:focus {
outline: none;
}
.vue-tooltip-theme.tooltip {
display: block !important;
z-index: 10000;
}
.vue-tooltip-theme.tooltip .tooltip-inner {
background: rgba(0, 0, 0, .7);
border-radius: 3px;
color: #ebedf0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 12px;
line-height: 16px;
padding: 14px 10px;
}
.vue-tooltip-theme.tooltip .tooltip-inner b {
color: white;
}
.vue-tooltip-theme.tooltip .tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: black;
z-index: 1;
}
.vue-tooltip-theme.tooltip[x-placement^="top"] {
margin-bottom: 5px;
}
.vue-tooltip-theme.tooltip[x-placement^="top"] .tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.vue-tooltip-theme.tooltip[x-placement^="bottom"] {
margin-top: 5px;
}
.vue-tooltip-theme.tooltip[x-placement^="bottom"] .tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.vue-tooltip-theme.tooltip[x-placement^="right"] {
margin-left: 5px;
}
.vue-tooltip-theme.tooltip[x-placement^="right"] .tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.vue-tooltip-theme.tooltip[x-placement^="left"] {
margin-right: 5px;
}
.vue-tooltip-theme.tooltip[x-placement^="left"] .tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.vue-tooltip-theme.tooltip[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
.vue-tooltip-theme.tooltip[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}

29
templates/base/footer.tmpl
View file

@ -49,28 +49,6 @@
<script src="https://www.google.com/recaptcha/api.js" async></script>
{{end}}
{{end}}
{{if .EnableHeatmap}}
<script src="{{AppSubUrl}}/vendor/plugins/moment/moment.min.js" charset="utf-8"></script>
<script src="{{AppSubUrl}}/vendor/plugins/d3/d3.v4.min.js" charset="utf-8"></script>
<script src="{{AppSubUrl}}/vendor/plugins/calendar-heatmap/calendar-heatmap.js" charset="utf-8"></script>
<script type="text/javascript">
$.get( '{{AppSubUrl}}/api/v1/users/{{.HeatmapUser}}/heatmap', function( chartRawData ) {
var chartData = [];
for (var i = 0; i < chartRawData.length; i++) {
chartData[i] = {date: new Date(chartRawData[i].timestamp * 1000), count: chartRawData[i].contributions};
}
$('#loading-heatmap').removeClass('active');
var heatmap = calendarHeatmap()
.data(chartData)
.selector('#user-heatmap')
.colorRange({{SafeJS HeatmapColorRange}})
.tooltipEnabled(true);
heatmap();
});
</script>
{{end}}
{{if .RequireTribute}}
<script src="{{AppSubUrl}}/vendor/plugins/tribute/tribute.min.js"></script>
@ -136,6 +114,13 @@
<!-- JavaScript -->
<script src="{{AppSubUrl}}/vendor/plugins/semantic/semantic.min.js"></script>
<script src="{{AppSubUrl}}/js/index.js?v={{MD5 AppVer}}"></script>
{{if .EnableHeatmap}}
<script src="{{AppSubUrl}}/vendor/plugins/moment/moment.min.js" charset="utf-8"></script>
<script src="{{AppSubUrl}}/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.browser.js" charset="utf-8"></script>
<script type="text/javascript">
initHeatmap('user-heatmap', '{{.HeatmapUser}}');
</script>
{{end}}
{{template "custom/footer" .}}
</body>
</html>

2
templates/base/head.tmpl
View file

@ -102,7 +102,7 @@
<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/dropzone/dropzone.css">
{{end}}
{{if .EnableHeatmap}}
<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/calendar-heatmap/calendar-heatmap.css">
<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.css">
{{end}}
<style class="list-search-style"></style>

7
templates/user/dashboard/dashboard.tmpl
View file

@ -6,8 +6,13 @@
<div class="ui mobile reversed stackable grid">
<div class="ten wide column">
{{if .EnableHeatmap}}
<div id="user-heatmap" style="padding-right: 40px">
<activity-heatmap :locale="locale" :suburl="suburl" :user="heatmapUser">
<div slot="loading">
<div class="ui active centered inline indeterminate text loader" id="loading-heatmap">{{.i18n.Tr "user.heatmap.loading"}}</div>
<div id="user-heatmap"></div>
</div>
</activity-heatmap>
</div>
<div class="ui divider"></div>
{{end}}
{{template "user/dashboard/feeds" .}}

7
templates/user/profile.tmpl
View file

@ -96,8 +96,13 @@
{{if eq .TabName "activity"}}
{{if .EnableHeatmap}}
<div id="user-heatmap" style="padding-right: 40px">
<activity-heatmap :locale="locale" :suburl="suburl" :user="heatmapUser">
<div slot="loading">
<div class="ui active centered inline indeterminate text loader" id="loading-heatmap">{{.i18n.Tr "user.heatmap.loading"}}</div>
<div id="user-heatmap"></div>
</div>
</activity-heatmap>
</div>
<div class="ui divider"></div>
{{end}}
<div class="feeds">