User action heatmap (#5131)

* Added basic heatmap data

* Added extra case for sqlite

* Built basic heatmap into user profile

* Get contribution data from api & styling

* Fixed lint & added extra group by statements for all database types

* generated swagger spec

* generated swagger spec

* generated swagger spec

* fixed swagger spec

* fmt

* Added tests

* Added setting to enable/disable user heatmap

* Added locale for loading text

* Removed UseTiDB

* Updated librejs & moment.js

* Fixed import order

* Fixed heatmap in postgresql

* Update docs/content/doc/advanced/config-cheat-sheet.en-us.md

Co-Authored-By: kolaente <konrad@kola-entertainments.de>

* Added copyright header

* Fixed a bug to show the heatmap for the actual user instead of the currently logged in

* Added integration test for heatmaps

* Added a heatmap on the dashboard

* Fixed timestamp parsing

* Hide heatmap on mobile

* optimized postgresql group by query

* Improved sqlite group by statement

templates/base/footer.tmpl

@@ -49,6 +49,28 @@
 		<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(['#f4f4f4', '#459928'])
+				.tooltipEnabled(true);
+			heatmap();
+		});
+	</script>
+{{end}}
 {{if .RequireTribute}}
 	<script src="{{AppSubUrl}}/vendor/plugins/tribute/tribute.min.js"></script>
 

templates/base/head.tmpl

@@ -100,6 +100,9 @@
 {{end}}
 {{if .RequireDropzone}}
 	<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">
 {{end}}
 	<style class="list-search-style"></style>
 

templates/swagger/v1_json.tmpl

@@ -5494,6 +5494,35 @@
         }
       }
     },
+    "/users/{username}/heatmap": {
+      "get": {
+        "produces": [
+          "application/json"
+        ],
+        "tags": [
+          "user"
+        ],
+        "summary": "Get a user's heatmap",
+        "operationId": "userGetHeatmapData",
+        "parameters": [
+          {
+            "type": "string",
+            "description": "username of user to get",
+            "name": "username",
+            "in": "path",
+            "required": true
+          }
+        ],
+        "responses": {
+          "200": {
+            "$ref": "#/responses/UserHeatmapData"
+          },
+          "404": {
+            "$ref": "#/responses/notFound"
+          }
+        }
+      }
+    },
     "/users/{username}/keys": {
       "get": {
         "produces": [
@@ -7666,6 +7695,12 @@
       },
       "x-go-package": "code.gitea.io/gitea/vendor/code.gitea.io/sdk/gitea"
     },
+    "TimeStamp": {
+      "description": "TimeStamp defines a timestamp",
+      "type": "integer",
+      "format": "int64",
+      "x-go-package": "code.gitea.io/gitea/modules/util"
+    },
     "TrackedTime": {
       "description": "TrackedTime worked time for an issue / pr",
       "type": "object",
@@ -7737,6 +7772,21 @@
       },
       "x-go-package": "code.gitea.io/gitea/vendor/code.gitea.io/sdk/gitea"
     },
+    "UserHeatmapData": {
+      "description": "UserHeatmapData represents the data needed to create a heatmap",
+      "type": "object",
+      "properties": {
+        "contributions": {
+          "type": "integer",
+          "format": "int64",
+          "x-go-name": "Contributions"
+        },
+        "timestamp": {
+          "$ref": "#/definitions/TimeStamp"
+        }
+      },
+      "x-go-package": "code.gitea.io/gitea/models"
+    },
     "WatchInfo": {
       "description": "WatchInfo represents an API watch status of one repository",
       "type": "object",
@@ -8083,6 +8133,15 @@
         "$ref": "#/definitions/User"
       }
     },
+    "UserHeatmapData": {
+      "description": "UserHeatmapData",
+      "schema": {
+        "type": "array",
+        "items": {
+          "$ref": "#/definitions/UserHeatmapData"
+        }
+      }
+    },
     "UserList": {
       "description": "UserList",
       "schema": {

templates/user/dashboard/dashboard.tmpl

@@ -5,6 +5,11 @@
 		{{template "base/alert" .}}
 		<div class="ui mobile reversed stackable grid">
 			<div class="ten wide column">
+				{{if .EnableHeatmap}}
+					<div class="ui active centered inline indeterminate text loader" id="loading-heatmap">{{.i18n.Tr "user.heatmap.loading"}}</div>
+					<div id="user-heatmap"></div>
+					<div class="ui divider"></div>
+				{{end}}
 				{{template "user/dashboard/feeds" .}}
 			</div>
 			<div id="app" class="six wide column">

templates/user/profile.tmpl

@@ -95,6 +95,11 @@
 				</div>
 
 				{{if eq .TabName "activity"}}
+					{{if .EnableHeatmap}}
+						<div class="ui active centered inline indeterminate text loader" id="loading-heatmap">{{.i18n.Tr "user.heatmap.loading"}}</div>
+						<div id="user-heatmap"></div>
+						<div class="ui divider"></div>
+					{{end}}
 					<div class="feeds">
 						{{template "user/dashboard/feeds" .}}
 					</div>