Get contribution data from api & styling

models/user_heatmap.go

@@ -6,8 +6,8 @@ import (
 )
 
 type UserHeatmapData struct {
- Timestamp util.TimeStamp `json:"date"`
- Contributions int64 `json:"count"`
+ Timestamp util.TimeStamp `json:"timestamp"`
+ Contributions int64 `json:"contributions"`
 }
 
 func GetUserHeatmapDataByUser(user *User) (hdata []*UserHeatmapData, err error) {

public/less/_user.less

@@ -59,7 +59,11 @@
  margin-top: 25px;
  }
 
- #cal-heatmap{
+ #loading-heatmap{
+ margin-bottom: 1em;
+ }
+
+ #user-heatmap{
  width: 107%; // Fixes newest contributions not showing
 
  svg:not(:root) {

public/vendor/plugins/calendar-heatmap/calendar-heatmap.js

@@ -20,7 +20,7 @@ function calendarHeatmap() {
  var tooltipUnit = 'contribution';
  var legendEnabled = true;
  var onClick = null;
- var weekStart = 0; //0 for Sunday, 1 for Monday
+ 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'],

templates/base/footer.tmpl

@@ -54,29 +54,21 @@
  <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">
- var chartRawData = [
- {"date":1531766422,"count":3},
- {"date":1532422453,"count":1},
- {"date":1538577294,"count":3},
- {"date":1539803278,"count":5},
- {"date":1539852016,"count":4},
- {"date":1540036193,"count":1}
- ];
-
- var chartData = [];
- for (var i = 0; i < chartRawData.length; i++) {
- chartData[i] = {date: new Date(chartRawData[i].date * 1000), count: chartRawData[i].count};
- }
+ $.get( '{{AppSubUrl}}/api/v1/users/{{.Owner.Name}}/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};
+ }
 
- console.log(chartRawData);
- console.log(chartData);
+ $('#loading-heatmap').removeClass('active');
 
- var heatmap = calendarHeatmap()
- .data(chartData)
- .selector('#cal-heatmap')
- .colorRange(['#f4f4f4', '#267b57'])
- .tooltipEnabled(true);
- heatmap();
+ var heatmap = calendarHeatmap()
+ .data(chartData)
+ .selector('#user-heatmap')
+ .colorRange(['#f4f4f4', '#459928'])
+ .tooltipEnabled(true);
+ heatmap();
+ });
  </script>
 {{end}}
 {{if .RequireTribute}}

templates/user/profile.tmpl

@@ -95,7 +95,8 @@
  </div>
 
  {{if eq .TabName "activity"}}
- <div id="cal-heatmap"></div>
+ <div class="ui active centered inline indeterminate text loader" id="loading-heatmap">Loading Heatmap...</div>
+ <div id="user-heatmap"></div>
  <div class="feeds">
  {{template "user/dashboard/feeds" .}}
  </div>