[MediaWiki-commits] [Gerrit] Make the roller input easier to read - change (analytics/dashiki)

[Milimetric (Code Review)]

Milimetric has submitted this change and it was merged.

Change subject: Make the roller input easier to read
......................................................................


Make the roller input easier to read

Move it above the graph and add label to it.

Bug: T104261
Change-Id: I527aa21ca739ab60767a64a5e3b79065f53a8277
---
M src/components/visualizers/dygraphs-timeseries/bindings.js
M src/layouts/compare/01_styles.css
M src/layouts/metrics-by-project/01_styles.css
3 files changed, 27 insertions(+), 3 deletions(-)

Approvals:
  Milimetric: Verified; Looks good to me, approved



diff --git a/src/components/visualizers/dygraphs-timeseries/bindings.js 
b/src/components/visualizers/dygraphs-timeseries/bindings.js
index 0fe0dcb..3532e94 100644
--- a/src/components/visualizers/dygraphs-timeseries/bindings.js
+++ b/src/components/visualizers/dygraphs-timeseries/bindings.js
@@ -18,11 +18,12 @@
             $(element).append('<div class="resizable container graph"></div>');
         },
         update: function (element, valueAccessor) {
-            var val = ko.unwrap(valueAccessor()),
+            var $element = $(element),
+                val = ko.unwrap(valueAccessor()),
                 data = ko.unwrap(val.data),
                 annotations = ko.unwrap(val.annotations),
                 colors = val.colors,
-                graph = $(element).find('div.graph')[0];
+                graph = $element.find('div.graph')[0];
 
             if (data) {
                 var rows = data.rowData({convertToDate: true});
@@ -83,7 +84,10 @@
 
                 if (annotations) {
                     dygraphChart.ready(function () {
-                        var i = 0;
+                        var i = 0,
+                            $roller = $(dygraphChart.roller_),
+                            $rollerHolder = $('<span 
class="dygraph-roller">Averaging: </span>');
+
                         
dygraphChart.setAnnotations(annotations.rowData().map(function (a){
                             // find the closest date in the data that fits
                             var closestDate = null;
@@ -118,6 +122,11 @@
                                 text: a[1],
                             };
                         }));
+                        // move the roller to the top and add a label
+                        $rollerHolder.append($roller.detach()).append(' 
day(s)');
+                        // remove the previous roller if any
+                        $element.siblings('.dygraph-roller').remove();
+                        $rollerHolder.insertBefore($element);
                     });
                 }
             }
diff --git a/src/layouts/compare/01_styles.css 
b/src/layouts/compare/01_styles.css
index 60d4425..d499540 100644
--- a/src/layouts/compare/01_styles.css
+++ b/src/layouts/compare/01_styles.css
@@ -63,3 +63,10 @@
 
 /* dygraphs style fixes */
 div.dygraph-legend span b { display: inline-block; width: 80%; text-align: 
right; }
+/* !important because we want to override the inline style */
+.dygraph-roller input {
+    position: relative !important;
+    left: auto !important;
+    top: auto !important;
+    display: inline !important;
+}
diff --git a/src/layouts/metrics-by-project/01_styles.css 
b/src/layouts/metrics-by-project/01_styles.css
index fa1c56f..344da05 100644
--- a/src/layouts/metrics-by-project/01_styles.css
+++ b/src/layouts/metrics-by-project/01_styles.css
@@ -246,3 +246,11 @@
     z-index: 100;
 }
 /* End Twitter Typeahead stuff */
+
+/* !important because we want to override the inline style */
+.dygraph-roller input {
+    position: relative !important;
+    left: auto !important;
+    top: auto !important;
+    display: inline !important;
+} 

-- 
To view, visit https://gerrit.wikimedia.org/r/237636
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: I527aa21ca739ab60767a64a5e3b79065f53a8277
Gerrit-PatchSet: 3
Gerrit-Project: analytics/dashiki
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <bmansu...@wikimedia.org>
Gerrit-Reviewer: Milimetric <dandree...@wikimedia.org>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits