Changeset 5cf5787 in OpenWorkouts-current

Timestamp:

Feb 4, 2019, 12:37:35 PM (5 years ago)

Author:

borja <borja@…>

Branches:

current, feature/docs, master

Children:

3357e47

Parents:

63df989

Message:

Show weekly/monthly versions of the "last 12 months" workout stats chart

in the user profile page.

Location:

ow

Files:

• static/js/ow.js (modified) (6 diffs)
• templates/profile.pt (modified) (2 diffs)
• tests/views/test_user.py (modified) (2 diffs)
• views/user.py (modified) (3 diffs)

ow/static/js/ow.js

@@ -236 +236 @@
     var chart_selector = spec.chart_selector,
         filters_selector = spec.filters_selector,
-        url = spec.url,
+        switcher_selector = spec.switcher_selector,
+        urls = spec.urls,
         current_month = spec.current_month,
-        y_axis_labels = spec.y_axis_labels;
+        current_week = spec.current_week,
+        y_axis_labels = spec.y_axis_labels,
+        filter_by = spec.filter_by,
+        url = spec.url;
 
     // Helpers
@@ -256 +260 @@
     };
 
+    function get_name_for_x(d) {
+        if (d.week == undefined || d.week == 0) {
+            return d.name;
+        }
+        else {
+            return d.id.split('-')[2];
+        }
+    }
+
     // Methods
     var filters_setup = function filters_setup() {
         $(filters_selector).on('click', function(e) {
-            var filter_by = 'distance';
             e.preventDefault();
             filter_by = $(this).attr('class').split('-')[1]
             var chart = d3.select(chart_selector);
             chart.selectAll("*").remove();
-            render(filter_by);
-        });
-    };
-
-    var render = function render(filter_by) {
+            render(filter_by, url);
+        });
+    };
+
+    var switcher_setup = function switcher_setup() {
+        $(switcher_selector).on('click', function(e) {
+            e.preventDefault();
+            url = $(this).attr('class').split('-')[1]
+            var chart = d3.select(chart_selector);
+            chart.selectAll("*").remove();
+            render(filter_by, url);
+        });
+    };
+
+    var render = function render(filter_by, url) {
         /*
           Build a d3 bar chart, populated with data from the given url.
@@ -280 +302 @@
             y = d3.scaleLinear().rangeRound([height, 0]);
 
-        d3.json(url).then(function (data) {
+        d3.json(urls[url]).then(function (data) {
             x.domain(data.map(function (d) {
-                return d.name;
+                return get_name_for_x(d);
+                // return d.name;
             }));
 
@@ -308 +331 @@
                 .enter().append("rect")
                 .attr("class", function(d) {
-                    if (d.id == current_month){
+                    var sel_week = current_month + '-' + current_week;
+                    if (d.id == current_month || d.id == sel_week){
+                        /* Bar for the currently selected month or week */
                         select_x_axis_label(d).attr('style', "font-weight: bold;");
-                        return 'bar current'
+                        return 'bar current';
                     }
                     else {
-                        return 'bar'
+                        if (!current_week && d.id.indexOf(current_month) >=0 ) {
+                            /*
+                               User selected a month, then switched to weekly
+                               view, we do highlight all the bars for weeks in
+                               that month
+                            */
+                            select_x_axis_label(d).attr('style', "font-weight: bold;");
+                            return 'bar current';
+                        }
+                        else {
+                            /* Non-selected bar */
+                            return 'bar';
+                        }
+
                     }
                 })
                 .attr("x", function (d) {
-                    return x(d.name);
+                    return x(get_name_for_x(d));
                 })
                 .attr("y", function (d) {
@@ -340 +378 @@
                 });
 
-            g.selectAll(".text")
-                .data(data)
-                .enter()
-                .append("text")
-                .attr("class","label")
-                .attr("x", function (d) {
-                    return x(d.name) + x.bandwidth()/2;
-                })
-                .attr("y", function (d) {
-                    /*
-                      Get the value for the current bar, then get the maximum
-                      value to be displayed in the bar, which is used to
-                      calculate the proper position of the label for this bar,
-                      relatively to its height (1% above the bar)
-                     */
-                    var value = get_y_value(d, filter_by);
-                    var max = y.domain()[1];
-                    return y(value + y.domain()[1] * 0.01);
-                })
-                .text(function(d) {
-                    var value = get_y_value(d, filter_by)
-                    if ( value > 0) {
-                        return value;
-                    }
-                });
-
+            if (url == 'monthly') {
+                g.selectAll(".text")
+                    .data(data)
+                    .enter()
+                    .append("text")
+                    .attr("class","label")
+                    .attr("x", function (d) {
+                        return x(get_name_for_x(d)) + x.bandwidth()/2;
+                    })
+                    .attr("y", function (d) {
+                        /*
+                          Get the value for the current bar, then get the maximum
+                          value to be displayed in the bar, which is used to
+                          calculate the proper position of the label for this bar,
+                          relatively to its height (1% above the bar)
+                        */
+                        var value = get_y_value(d, filter_by);
+                        var max = y.domain()[1];
+                        return y(value + y.domain()[1] * 0.01);
+                    })
+                    .text(function(d) {
+                        var value = get_y_value(d, filter_by)
+                        if ( value > 0) {
+                            return value;
+                        }
+                    });
+            }
+
+            if (url == 'weekly') {
+                g.selectAll(".tick")
+                    .each(function (d, i) {
+                        /*
+                          Remove from the x-axis tickets those without letters
+                          on them (useful for the weekly chart)
+                        */
+                        if (d !== parseInt(d, 10)) {
+                            if(!d.match(/[a-z]/i)) {
+                                this.remove();
+                            }
+                        }
+                    });
+            }
         });
     };
@@ -371 +425 @@
     var that = {}
     that.filters_setup = filters_setup;
+    that.switcher_setup = switcher_setup;
     that.render = render;
     return that

ow/templates/profile.pt

@@ -72 +72 @@
           <a href="#" class="js-time" i18n:translate="">time</a>
           <a href="#" class="js-elevation" i18n:translate="">elevation</a>
+        </div>
+        <div class="switcher js-switcher">
+          <a href="#" class="js-weekly" i18n:translate="">weekly</a>
+          <a href="#" class="js-monthly" i18n:translate="">monthly</a>
         </div>
       </div>
@@ -154 +158 @@
          chart_selector: 'div.js-month-stats svg',
          filters_selector: 'div.js-month-stats div.js-filters a',
-         url: "${request.resource_url(context, 'yearly')}",
+         switcher_selector: 'div.js-month-stats div.js-switcher a',
+         urls: {"monthly": "${request.resource_url(context, 'monthly')}",
+                "weekly": "${request.resource_url(context, 'weekly')}"},
          current_month: "${current_month}",
+         current_week: "${current_week}",
          y_axis_labels: y_axis_labels,
+         filter_by: "distance",
+         url: "${'monthly' if current_week is None else 'weekly'}",
      });
-     year_chart.render("distance");
+     year_chart.render("distance", "${'monthly' if current_week is None else 'weekly'}");
      year_chart.filters_setup();
+     year_chart.switcher_setup();
     </script>
 

ow/tests/views/test_user.py

@@ -269 +269 @@
         # profile page for the current day (no workouts avalable)
         response = user_views.profile(john, request)
-        assert len(response.keys()) == 2
+        assert len(response.keys()) == 3
         current_month = datetime.now(timezone.utc).strftime('%Y-%m')
         assert response['current_month'] == current_month
+        assert response['current_week'] is None
         assert response['workouts'] == []
         # profile page for a previous date, that has workouts
@@ -277 +278 @@
         request.GET['month'] = 8
         response = user_views.profile(john, request)
-        assert len(response.keys()) == 2
+        assert len(response.keys()) == 3
         assert response['current_month'] == '2015-08'
+        assert response['current_week'] is None
+        assert response['workouts'] == john.workouts(2015, 8)
+        # same, passing a week, first on a week without workouts
+        request.GET['year'] = 2015
+        request.GET['month'] = 8
+        request.GET['week'] = 25
+        response = user_views.profile(john, request)
+        assert len(response.keys()) == 3
+        assert response['current_month'] == '2015-08'
+        assert response['current_week'] is 25
+        assert response['workouts'] == []
+        # now in a week with workoutss
+        request.GET['year'] = 2015
+        request.GET['month'] = 8
+        request.GET['week'] = 26
+        response = user_views.profile(john, request)
+        assert len(response.keys()) == 3
+        assert response['current_month'] == '2015-08'
+        assert response['current_week'] is 26
         assert response['workouts'] == john.workouts(2015, 8)
 

ow/views/user.py

@@ -168 +168 @@
     year = int(request.GET.get('year', now.year))
     month = int(request.GET.get('month', now.month))
+    week = request.GET.get('week', None)
     return {
-        'workouts': context.workouts(year, month),
+        'workouts': context.workouts(year, month, week),
         'current_month': '{year}-{month}'.format(
-            year=str(year), month=str(month).zfill(2))
+            year=str(year), month=str(month).zfill(2)),
+        'current_week': week
     }
 
@@ -262 +264 @@
     context=User,
     permission='view',
-    name='yearly')
+    name='monthly')
 def last_months_stats(context, request):
     """
@@ -294 +296 @@
                     charset='utf-8',
                     body=json.dumps(json_stats))
+
+
+@view_config(
+    context=User,
+    permission='view',
+    name='weekly')
+def last_weeks_stats(context, request):
+    """
+    Return a json-encoded stream with statistics for the last 12-months, but
+    in a per-week basis
+    """
+    stats = context.weekly_year_stats
+    # this sets which month is 2 times in the stats, once this year, once
+    # the previous year. We will show it a bit different in the UI (showing
+    # the year too to prevent confusion)
+    repeated_month = datetime.now(timezone.utc).date().month
+    json_stats = []
+    for week in stats:
+        hms = timedelta_to_hms(stats[week]['time'])
+        name = month_name[week[1]][:3]
+        if week[1] == repeated_month:
+            name += ' ' + str(week[0])
+        week_stats = {
+            'id': '-'.join(
+                [str(week[0]), str(week[1]).zfill(2), str(week[2])]),
+            'week': str(week[3]),  # the number of week in the current month
+            'name': name,
+            'time': str(hms[0]).zfill(2),
+            'distance': int(round(stats[week]['distance'])),
+            'elevation': int(stats[week]['elevation']),
+            'workouts': stats[week]['workouts'],
+            'url': request.resource_url(
+                context, 'profile',
+                query={'year': str(week[0]),
+                       'month': str(week[1]),
+                       'week': str(week[2])},
+                anchor='workouts')
+        }
+        json_stats.append(week_stats)
+    return Response(content_type='application/json',
+                    charset='utf-8',
+                    body=json.dumps(json_stats))