Changeset d0fc76b in OpenWorkouts-current for ow/static

Timestamp:

Jan 25, 2019, 1:49:34 PM (5 years ago)

Author:

Segundo Fdez <segun.2@…>

Branches:

current, feature/docs, master

Children:

1fe89ea

Parents:

4dcf28d (diff), 26220ba (diff)
Note: this is a merge changeset, the changes displayed below correspond to the merge itself.
Use the (diff) links above to see all the changes relative to each parent.

Message:

Merge branch 'master' into feature/ui

Location:

ow/static

Files:

• ______css/__openworkouts.css (modified) (1 diff)
• js/ow.js (modified) (1 diff)

ow/static/______css/__openworkouts.css

@@ -12 +12 @@
     background-color: #eeeeee;
 }
+
+/* dashboard, weekly stats */
+
+span.week_totals_left {
+    padding-right: 5px;
+    border-right: 1px solid #e1e1e1;
+}
+
+span.week_totals_right {
+    padding-left: 5px;
+}
+
+.x-axis path, .x-axis line {
+    fill: none;
+    stroke: none;
+}
+
+.bar {
+    fill: #f8b5be;
+}
+
+.bar:hover {
+    fill: #ee4056;
+}
+
+.current {
+    fill: #ee4056;
+}
+
+text.label {
+    font-size: 0.6em;
+    text-anchor: middle;
+}

ow/static/js/ow.js

@@ -123 +123 @@
 
 };
+
+
+owjs.week_chart = function(spec) {
+
+    "use strict";
+
+    // parameters provided when creating an "instance" of the chart
+    var chart_selector = spec.chart_selector,
+        url = spec.url,
+        current_day_name = spec.current_day_name
+
+    // Helpers
+    function select_x_axis_label(d) {
+        /* Given a value, return the label associated with it */
+        return d3.select('.x-axis')
+            .selectAll('text')
+            .filter(function(x) { return x == d.name; });
+    }
+
+    // Methods
+    var render = function render() {
+        /*
+           Build a d3 bar chart, populated with data from the given url.
+         */
+        var chart = d3.select("svg"),
+            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 Number(d.distance);
+            })]);
+
+            g.append("g")
+                .attr('class', 'x-axis')
+                .attr("transform", "translate(0," + height + ")")
+                .call(d3.axisBottom(x))
+
+            g.selectAll(".bar")
+                .data(data)
+                .enter().append("rect")
+                .attr("class", function(d) {
+                    if (d.name == current_day_name){
+                        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(Number(d.distance));
+                })
+                .attr("width", x.bandwidth())
+                .attr("height", function (d) {
+                    return height - y(Number(d.distance));
+                })
+                .on('mouseover', function(d) {
+                    if (d.name != current_day_name){
+                        select_x_axis_label(d).attr('style', "font-weight: bold;");
+                    }
+                })
+                .on('mouseout', function(d) {
+                    if (d.name != current_day_name){
+                        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) {
+                    return y(Number(d.distance) + 5);
+                })
+                .text(function(d) {
+                    if (Number(d.distance) > 0) {
+                        return d.distance;
+                    }
+                });
+
+        });
+    };
+
+    var that = {}
+    that.render = render;
+    return that
+
+};