Improve punch-card on activity report

* Turn punch-card upside down to make Mon the first and Sun the last
* Cleanup the grid and axes names

Change-Id: I5a666b5fefb0baa312fed35685410113dac6b4a0

stackalytics/dashboard/reports.py

@@ -20,7 +20,6 @@ import operator
 import time
 
 import flask
-import six
 
 from stackalytics.dashboard import decorators
 from stackalytics.dashboard import helpers
@@ -205,18 +204,18 @@ def cores():
 
 def _get_punch_card_data(records):
     punch_card_raw = []  # matrix days x hours
-    for wday in six.moves.range(0, 7):
+    for wday in range(7):
         punch_card_raw.append([0] * 24)
     for record in records:
         tt = datetime.datetime.fromtimestamp(record.date).timetuple()
         punch_card_raw[tt.tm_wday][tt.tm_hour] += 1
 
     punch_card_data = []  # format for jqplot bubble renderer
-    for wday in six.moves.range(0, 7):
-        for hour in six.moves.range(0, 24):
+    for wday in range(7):
+        for hour in range(24):
             v = punch_card_raw[wday][hour]
             if v:
-                punch_card_data.append([hour, wday, v, v])
+                punch_card_data.append([hour, 6 - wday, v, v])  # upside down
 
     # add corner point, otherwise chart doesn't know the bounds
     if punch_card_raw[0][0] == 0:

stackalytics/dashboard/static/css/style.css

@@ -496,4 +496,10 @@ div.stackamenu li.current-menu-item a span {
     font-weight: bold;
     color: red;
     margin: 0.5em 0;
-}
+}
+
+#punch_card {
+    margin-top: 1em;
+    width: 99%;
+    height: 350px;
+}

stackalytics/dashboard/static/js/stackalytics-ui.js

@@ -220,22 +220,22 @@ function renderPunchCard(chart_id, chart_data) {
         },
         axes: {
             xaxis: {
-                label: 'Hour',
+                label: 'hour, UTC',
                 labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                 tickOptions: {
                     formatter: function (format, val) {
-                        if (val < 0 || val > 24) { return "" }
+                        if (val < 0 || val > 23) { return "" }
                         return val;
                     }
                 }
             },
             yaxis: {
-                label: 'Day of week',
+                label: 'day of week',
                 labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                 tickOptions: {
                     formatter: function (format, val) {
                         if (val < 0 || val > 6) { return "" }
-                        var labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+                        var labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].reverse();
                         return labels[val];
                     }
                 }

stackalytics/dashboard/templates/reports/company_activity.html

@@ -19,7 +19,7 @@
 
 {{ contribution_summary.show_contribution_summary(company=company_name) }}
 
-<div id="punch_card" style="width: 100%; height: 350px;"></div>
+<div id="punch_card"></div>
 
 {{ activity_log.show_activity_log(company=company_name, gravatar_size=64) }}
 

stackalytics/dashboard/templates/reports/user_activity.html

@@ -21,7 +21,7 @@
 {{ user_profile.show_user_profile(user_id=user.user_id) }}
 {{ contribution_summary.show_contribution_summary(user_id=user.user_id) }}
 
-<div id="punch_card" style="width: 100%; height: 350px;"></div>
+<div id="punch_card"></div>
 
 {{ activity_log.show_activity_log(user_id=user.user_id, show_user_gravatar=false, gravatar_size=64) }}