Changes in ow/static/js/ow.js [5cf5787:688fb7d] in OpenWorkouts-current

File:

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

ow/static/js/ow.js

@@ -35 +35 @@
     var gpx;
     var elevation;
-    var ow_charts;
 
     var create_map = function create_map(latitude, longitude, zoom) {
@@ -52 +51 @@
            This has to be called *after* create_map and *before* load_gpx.
         */
+
         elevation = L.control.elevation({
             position: "bottomright",
-            theme: "steelblue-theme", //default: lime-theme
-            width: 600,
-            height: 125,
-            margins: {
-                top: 10,
-                right: 20,
-                bottom: 30,
-                left: 50
-            },
+            theme: "openworkouts-theme",
             useHeightIndicator: true, //if false a marker is drawn at map position
-            interpolation: "linear", //see https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-area_interpolate
-            hoverNumber: {
-                decimalsX: 3, //decimals on distance (always in km)
-                decimalsY: 0, //deciamls on height (always in m)
-                formatter: undefined //custom formatter function may be injected
-            },
-            xTicks: undefined, //number of ticks in x axis, calculated by default according to width
-            yTicks: undefined, //number of ticks on y axis, calculated by default according to height
-            collapsed: false    //collapsed mode, show chart on click or mouseover
-        });
-
-        var ele_container = elevation.addTo(map);
-        /* document.getElementById('ow-analysis').appendChild(
-            ele_container._container); */
+            interpolation: d3.curveLinear,
+            elevationDiv: "#elevation",
+            detachedView: true,
+            responsiveView: true,
+            gpxOptions: {
+                async: true,
+                marker_options: {
+                    startIconUrl: null,
+                    endIconUrl: null,
+                    shadowUrl: null,
+                },
+                polyline_options: {
+                    color: '#EE4056',
+                    opacity: 0.75,
+                    weight: 5,
+                    lineCap: 'round'
+                },
+            },
+        });
+        elevation.loadGPX(map, gpx_url);
+        // var ele_container = elevation.addTo(map);
     };
 
@@ -92 +91 @@
                 shadowUrl: shadow,
             },
+            polyline_options: {
+                color: '#EE4056',
+                opacity: 0.75,
+                weight: 5,
+                lineCap: 'round'
+            },
         });
 
@@ -101 +106 @@
             gpx.on("addline",function(e){
                 elevation.addData(e.line);
-                // ow_charts.addData(e.line);
             });
         };
@@ -109 +113 @@
 
     var render = function render() {
-        // create the map, add elevation, load gpx
+        // create the map, add elevation, load gpx (only if needed, as the
+        // elevation plugin already loads the gpx data)
         create_map(latitude, longitude, zoom);
         if (elevation) {
             add_elevation_chart();
         }
-        // add_ow_charts();
-        load_gpx(gpx_url);
+        else {
+            load_gpx(gpx_url);
+        }
     };
 
@@ -148 +154 @@
          */
         var chart = d3.select(chart_selector),
-            margin = {top: 20, right: 20, bottom: 30, left: 50},
+            margin = {top: 17, right: 0, bottom: 20, left: 0},
+
             width = +chart.attr("width") - margin.left - margin.right,
             height = +chart.attr("height") - margin.top - margin.bottom,
@@ -211 +218 @@
                 })
                 .attr("y", function (d) {
-                    return y(Number(d.distance) + 5);
-                })
+                    /*
+                      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 max = y.domain()[1];
+                    return y(d.distance + y.domain()[1] * 0.02);
+            })
                 .text(function(d) {
                     if (Number(d.distance) > 0) {