Refactor heatmap to vue component (#5401)

Author: lafriks

custom/conf/app.ini.sample

@@ -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

modules/setting/setting.go

@@ -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

modules/templates/helper.go

@@ -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")

public/css/index.css

@@ -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);

public/css/theme-arc-green.css

@@ -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;
+}

public/js/index.js

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

public/less/_base.less

@@ -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>