Lauris BH
6 years ago
committed by
Jonas Franz
Jonas Franz
18 changed files with 258 additions and 384 deletions
Split View
Diff Options
-
+0 -2custom/conf/app.ini.sample
-
+0 -2modules/setting/setting.go
-
+0 -3modules/templates/helper.go
-
+1 -1public/css/index.css
-
+1 -1public/css/theme-arc-green.css
-
+90 -0public/js/index.js
-
+24 -0public/less/_base.less
-
+4 -0public/less/themes/arc-green.less
-
+3 -8public/vendor/librejs.html
-
+0 -27public/vendor/plugins/calendar-heatmap/calendar-heatmap.css
-
+0 -311public/vendor/plugins/calendar-heatmap/calendar-heatmap.js
-
+0 -2public/vendor/plugins/d3/d3.v4.min.js
-
+1 -0public/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.browser.js
-
+112 -0public/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.css
-
+7 -22templates/base/footer.tmpl
-
+1 -1templates/base/head.tmpl
-
+7 -2templates/user/dashboard/dashboard.tmpl
-
+7 -2templates/user/profile.tmpl
+ 0
- 2
custom/conf/app.ini.sample
View File
+ 0
- 2
modules/setting/setting.go
View File
+ 0
- 3
modules/templates/helper.go
View File
+ 1
- 1
public/css/index.css
File diff suppressed because it is too large
View File
+ 1
- 1
public/css/theme-arc-green.css
File diff suppressed because it is too large
View File
+ 90
- 0
public/js/index.js
View File
+ 24
- 0
public/less/_base.less
View File
+ 4
- 0
public/less/themes/arc-green.less
View File
+ 3
- 8
public/vendor/librejs.html
View File
+ 0
- 27
public/vendor/plugins/calendar-heatmap/calendar-heatmap.css
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; | |||
| } | |||
+ 0
- 311
public/vendor/plugins/calendar-heatmap/calendar-heatmap.js
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 */ | |||
+ 0
- 2
public/vendor/plugins/d3/d3.v4.min.js
File diff suppressed because it is too large
View File
+ 1
- 0
public/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.browser.js
File diff suppressed because it is too large
View File
+ 112
- 0
public/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.css
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; | |||
| } | |||