Changeset 3ac70ca in OpenWorkouts-current for ow


Ignore:
Timestamp:
Mar 12, 2019, 9:29:22 PM (5 years ago)
Author:
Borja Lopez <borja@…>
Branches:
current
Children:
39dc0a6
Parents:
f2c9e20
Message:

(#7) Improved tooltip that shows per-day workout stats when hovering a day
on the calendar heatmap chart in the user profile page.

Location:
ow
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • ow/static/css/main.css

    rf2c9e20 r3ac70ca  
    15751575  stroke-width: 2;
    15761576}
     1577.calendar-heatmap-tooltip {
     1578  width: 20%;
     1579}
    15771580.verify-account-content {
    15781581  background-position: center;
  • ow/static/js/ow.js

    rf2c9e20 r3ac70ca  
    489489          the chart
    490490        */
     491
     492        // Hide the tooltip
     493        $('.js-calendar-heatmap-tooltip').hide()
     494
    491495        var chart = d3.select(chart_selector);
    492496
     
    541545                rows = calendar_rows(max_date);
    542546
     547            var find_day = function(day) {
     548                var found = data.find(function(d) {
     549                    return d.day == day;
     550                });
     551                return found;
     552            }
     553
    543554            // Build the svg image where the chart will be
    544555            var svg = chart.selectAll("svg")
     
    582593                .on("mouseover", function(d) {
    583594                    d3.select(this).classed('hover', true);
     595                    var day = find_day(d);
     596                    $('.js-ch-tooltip-date').html(titleFormat(new Date(d)));
     597                    if (day != undefined) {
     598                        $('.js-ch-tooltip-workouts').html(day.workouts);
     599                        $('.js-ch-tooltip-time').html(day.time_formatted);
     600                        $('.js-ch-tooltip-distance').html(day.distance_formatted);
     601                        $('.js-ch-tooltip-elevation').html(day.elevation_formatted);
     602                    }
     603                    else {
     604                        $('.js-ch-tooltip-workouts').html(' - ');
     605                        $('.js-ch-tooltip-time').html(' - ');
     606                        $('.js-ch-tooltip-distance').html(' - ');
     607                        $('.js-ch-tooltip-elevation').html(' - ');
     608                    }
     609                    $('.js-calendar-heatmap-tooltip').fadeIn('fast');
    584610                })
    585611                .on("mouseout", function(d) {
    586612                    d3.select(this).classed('hover', false);
     613                    $('.js-calendar-heatmap-tooltip').fadeOut('fast');
    587614                })
    588615                .datum(format);
     
    608635                });
    609636
    610             var find_day = function(day) {
    611                 var found = data.find(function(d) {
    612                     return d.day == day;
    613                 });
    614                 return found;
    615             }
    616 
    617637            var lookup = d3.nest()
    618638                .key(function(d) {
     
    655675                    // doSomething();
    656676                })
    657                 .select("title")
    658                 .text(function(d) {
    659                     // Update the title adding some more info
    660                     var day = find_day(d);
    661                     return titleFormat(new Date(d)) + ":  " + day.time_formatted; });
    662677        });
    663678
  • ow/static/less/pages/profile.less

    rf2c9e20 r3ac70ca  
    181181    }
    182182}
     183
     184.calendar-heatmap-tooltip {
     185        width: 20%;
     186}
  • ow/templates/profile.pt

    rf2c9e20 r3ac70ca  
    5353          <div class="calendar-heatmap js-calendar-heatmap">
    5454          </div>
     55          <div class="calendar-heatmap-tooltip js-calendar-heatmap-tooltip">
     56            <ul class="profile-data">
     57              <li>
     58                <span class="js-ch-tooltip-date"></span>
     59              </li>
     60              <li>
     61                <span><tal:t i18n:translate="">Workouts:</tal:t></span>
     62                <span class="js-ch-tooltip-workouts"></span>
     63              </li>
     64              <li>
     65                <span><tal:t i18n:translate="">Time:</tal:t></span>
     66                <span class="js-ch-tooltip-time"></span>
     67              </li>
     68              <li>
     69                <span><tal:t i18n:translate="">Distance:</tal:t></span>
     70                <span class="js-ch-tooltip-distance"></span>
     71              </li>
     72              <li>
     73                <span><tal:t i18n:translate="">Elevation:</tal:t></span>
     74                <span class="js-ch-tooltip-elevation"></span>
     75              </li>
     76            </ul>
     77          </div>
    5578        </div>
    5679
  • ow/views/user.py

    rf2c9e20 r3ac70ca  
    466466                'distance': 0,  # kilometers
    467467                'elevation': 0,  # meters
     468                'workouts': 0,
     469                'sports': {},
    468470            }
    469471        duration = getattr(workout, 'duration', None) or timedelta(0)
     
    473475        elevation = getattr(workout, 'uphill', None) or 0
    474476        stats[start]['elevation'] += int(elevation)
     477        stats[start]['workouts'] += 1
     478        if workout.sport not in stats[start]['sports'].keys():
     479            stats[start]['sports'][workout.sport] = 0
     480        stats[start]['sports'][workout.sport] += 1
    475481
    476482    json_stats = []
     
    484490            str(hms[1]).zfill(2), localizer.translate(_('min.'))
    485491        ])
     492        distance_formatted = str(round(stats[day]['distance'])) + ' km'
     493        elevation_formatted = str(round(stats[day]['elevation'])) + ' m'
    486494        json_stats.append({
    487495            'day': day,
     
    489497            'time_formatted': time_formatted,
    490498            'distance': stats[day]['distance'],
    491             'elevation': stats[day]['elevation']
     499            'distance_formatted': distance_formatted,
     500            'elevation': stats[day]['elevation'],
     501            'elevation_formatted': elevation_formatted,
     502            'workouts': stats[day]['workouts'],
     503            'sports': stats[day]['sports']
    492504        })
    493505
Note: See TracChangeset for help on using the changeset viewer.