Refactor heatmap to vue component (#5401)

go-gitea · Nov 27, 2018 · e09fe48 · e09fe48
1 parent c03a9b3
commit e09fe48
Show file tree

Hide file tree

Showing 18 changed files with 258 additions and 384 deletions.
diff --git a/custom/conf/app.ini.sample b/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

diff --git a/modules/setting/setting.go b/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

diff --git a/modules/templates/helper.go b/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")

diff --git a/public/css/index.css b/public/css/index.css
diff --git a/public/css/theme-arc-green.css b/public/css/theme-arc-green.css
diff --git a/public/js/index.js b/public/js/index.js
@@ -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);

diff --git a/public/less/_base.less b/public/less/_base.less
@@ -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;
+}
diff --git a/public/less/themes/arc-green.less b/public/less/themes/arc-green.less
@@ -818,3 +818,7 @@
  color: #9e9e9e;
  }
 }
+
+.heatmap-color-0 {
+ background-color: #2d303b;
+}
diff --git a/public/vendor/librejs.html b/public/vendor/librejs.html
@@ -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>

diff --git a/public/vendor/plugins/calendar-heatmap/calendar-heatmap.css b/public/vendor/plugins/calendar-heatmap/calendar-heatmap.css