Changeset 3ac70ca in OpenWorkouts-current for ow/static/js/ow.js

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.

File:

• ow/static/js/ow.js (modified) (5 diffs)

ow/static/js/ow.js

@@ -489 +489 @@
           the chart
         */
+
+        // Hide the tooltip
+        $('.js-calendar-heatmap-tooltip').hide()
+
         var chart = d3.select(chart_selector);
 
@@ -541 +545 @@
                 rows = calendar_rows(max_date);
 
+            var find_day = function(day) {
+                var found = data.find(function(d) {
+                    return d.day == day;
+                });
+                return found;
+            }
+
             // Build the svg image where the chart will be
             var svg = chart.selectAll("svg")
@@ -582 +593 @@
                 .on("mouseover", function(d) {
                     d3.select(this).classed('hover', true);
+                    var day = find_day(d);
+                    $('.js-ch-tooltip-date').html(titleFormat(new Date(d)));
+                    if (day != undefined) {
+                        $('.js-ch-tooltip-workouts').html(day.workouts);
+                        $('.js-ch-tooltip-time').html(day.time_formatted);
+                        $('.js-ch-tooltip-distance').html(day.distance_formatted);
+                        $('.js-ch-tooltip-elevation').html(day.elevation_formatted);
+                    }
+                    else {
+                        $('.js-ch-tooltip-workouts').html(' - ');
+                        $('.js-ch-tooltip-time').html(' - ');
+                        $('.js-ch-tooltip-distance').html(' - ');
+                        $('.js-ch-tooltip-elevation').html(' - ');
+                    }
+                    $('.js-calendar-heatmap-tooltip').fadeIn('fast');
                 })
                 .on("mouseout", function(d) {
                     d3.select(this).classed('hover', false);
+                    $('.js-calendar-heatmap-tooltip').fadeOut('fast');
                 })
                 .datum(format);
@@ -608 +635 @@
                 });
 
-            var find_day = function(day) {
-                var found = data.find(function(d) {
-                    return d.day == day;
-                });
-                return found;
-            }
-
             var lookup = d3.nest()
                 .key(function(d) {
@@ -655 +675 @@
                     // doSomething();
                 })
-                .select("title")
-                .text(function(d) {
-                    // Update the title adding some more info
-                    var day = find_day(d);
-                    return titleFormat(new Date(d)) + ":  " + day.time_formatted; });
         });