Changes in ow/static/js/ow.js [bd8eeb4:1fe89ea] in OpenWorkouts-current

File:

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

ow/static/js/ow.js

@@ -31 +31 @@
     var openstreetmap_attr = 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>';
 
-    // Some vars reused through the code
+    // Some constants reused through the code
     var map;
     var gpx;
@@ -147 +147 @@
            Build a d3 bar chart, populated with data from the given url.
          */
-        var chart = d3.select(chart_selector),
-            margin = {top: 20, right: 20, bottom: 30, left: 50},
+        var chart = d3.select("svg"),
+            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 +211 @@
                 })
                 .attr("y", function (d) {
-                    return y(Number(d.distance) + 5);
-                })
-                .text(function(d) {
-                    if (Number(d.distance) > 0) {
-                        return d.distance;
-                    }
-                });
-
-        });
-    };
-
-    var that = {}
-    that.render = render;
-    return that
-
-};
-
-
-owjs.year_chart = function(spec) {
-
-    "use strict";
-
-    // parameters provided when creating an "instance" of the chart
-    var chart_selector = spec.chart_selector,
-        filters_selector = spec.filters_selector,
-        url = spec.url,
-        current_month = spec.current_month,
-        y_axis_labels = spec.y_axis_labels;
-
-    // Helpers
-    function select_x_axis_label(d) {
-        /* Given a value, return the label associated with it */
-        return d3.select('.x-axis-b')
-            .selectAll('text')
-            .filter(function(x) { return x == d.name; });
-    };
-
-    function get_y_value(d, filter_by) {
-        return Number(d[filter_by]);
-    };
-
-    function get_y_axis_label(filter_by) {
-        return y_axis_labels[filter_by];
-    };
-
-    // 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) {
-        /*
-          Build a d3 bar chart, populated with data from the given url.
-        */
-        var chart = d3.select(chart_selector),
-            margin = {top: 20, right: 20, bottom: 30, left: 50},
-            width = +chart.attr("width") - margin.left - margin.right,
-            height = +chart.attr("height") - margin.top - margin.bottom,
-            g = chart.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"),
-            x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
-            y = d3.scaleLinear().rangeRound([height, 0]);
-
-        d3.json(url).then(function (data) {
-            x.domain(data.map(function (d) {
-                return d.name;
-            }));
-
-            y.domain([0, d3.max(data, function (d) {
-                return get_y_value(d, filter_by);
-            })]);
-
-            g.append("g")
-                .attr('class', 'x-axis-b')
-                .attr("transform", "translate(0," + height + ")")
-                .call(d3.axisBottom(x))
-
-            g.append("g")
-                .call(d3.axisLeft(y))
-                .append("text")
-                .attr("fill", "#000")
-                .attr("transform", "rotate(-90)")
-                .attr("y", 6)
-                .attr("dy", "0.71em")
-                .attr("text-anchor", "end")
-                .text(get_y_axis_label(filter_by));
-
-            g.selectAll(".bar")
-                .data(data)
-                .enter().append("rect")
-                .attr("class", function(d) {
-                    if (d.id == current_month){
-                        select_x_axis_label(d).attr('style', "font-weight: bold;");
-                        return 'bar current'
-                    }
-                    else {
-                        return 'bar'
-                    }
-                })
-                .attr("x", function (d) {
-                    return x(d.name);
-                })
-                .attr("y", function (d) {
-                    return y(get_y_value(d, filter_by));
-                })
-                .attr("width", x.bandwidth())
-                .attr("height", function (d) {
-                    return height - y(get_y_value(d, filter_by));
-                })
-                .on('mouseover', function(d) {
-                    if (d.id != current_month){
-                        select_x_axis_label(d).attr('style', "font-weight: bold;");
-                    }
-                })
-                .on('mouseout', function(d) {
-                    if (d.id != current_month){
-                        select_x_axis_label(d).attr('style', "font-weight: regular;");
-                    }
-                });
-
-            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
@@ -352 +217 @@
                       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);
-                })
+                    return y(d.distance + y.domain()[1] * 0.02);
+            })
                 .text(function(d) {
-                    var value = get_y_value(d, filter_by)
-                    if ( value > 0) {
-                        return value;
+                    if (Number(d.distance) > 0) {
+                        return d.distance;
                     }
                 });
@@ -367 +230 @@
 
     var that = {}
-    that.filters_setup = filters_setup;
     that.render = render;
     return that