Issue w3c#57 update to work with multi-line charts

index.html

@@ -100,7 +100,7 @@ <h2 class='trunk-title'>Modify Time Period</h2>
                         <p>We sometimes have the need to view data for just the past n days.</p>
                         <div class="btn-group btn-group-sm text-center modify-time-period-controls">
                             <button type="button" class="btn btn-default active" 
-                                data-time_period="91">Past 3 months</button>
+                                data-time_period="">All time</button>
                             <button type="button" class="btn btn-default" 
                                 data-time_period="61">Past 2 months</button>
                             <button type="button" class="btn btn-default" 

js/main.js

@@ -3,6 +3,7 @@
 $(document).ready(function() {
     //json data that we intend to update later on via on-screen controls
     var split_by_data;
+    var multi_line_data;
 
     var torso = {};
     torso.width = 375;
@@ -69,7 +70,7 @@ $(document).ready(function() {
             data[i] = convert_dates(data[i]);
         };
 
-        moz_chart({
+        multi_line_data = moz_chart({
             title:"Multi-line Chart",
             description: "This line chart contains multiple lines. We're still working out the style details.",
             data: data,
@@ -240,12 +241,12 @@ $(document).ready(function() {
     });
 
     d3.json('data/split_by.json', function(data) {
-        split_by_data = convert_dates(data);
+        data = convert_dates(data);
 
-        moz_chart({
+        split_by_data = moz_chart({
             title: "Downloads by Channel",
             description: "The chart is gracefully updated depending on the selected channel.",
-            data: split_by_data,
+            data: data,
             width: trunk.width * 2,
             height: trunk.height,
             right: trunk.right,
@@ -258,10 +259,11 @@ $(document).ready(function() {
         moz_chart({
             title: "Beta Downloads",
             description: "The chart is gracefully updated depending on the chosen time period.",
-            data: split_by_data,
+            data: data,
             width: trunk.width * 2,
             height: trunk.height,
             right: trunk.right,
+            show_years: false,
             xax_count: 4,
             target: 'div#modify_time_period',
             x_accessor: 'date',
@@ -427,8 +429,8 @@ $(document).ready(function() {
         $('.split-by-controls button').click(function() {
             var new_y_accessor = $(this).data('y_accessor');
 
-            $(this)
-                .addClass('active')
+            //change button state
+            $(this).addClass('active')
                 .siblings()
                 .removeClass('active');
 
@@ -448,41 +450,28 @@ $(document).ready(function() {
         })
 
         $('.modify-time-period-controls button').click(function() {
-            var past_n_days = $(this).data('time_period');
+            var past_n_days = $(this).data('time_period');            
+            var data = modify_time_period(split_by_data, past_n_days);
 
-            //splice time period
-            var split_by_data_spliced = d3.values($.extend({}, split_by_data));
-            var from = split_by_data_spliced.length - past_n_days;
-            split_by_data_spliced.splice(0,from);
-
-            $(this)
-                .addClass('active')
+            //change button state
+            $(this).addClass('active')
                 .siblings()
                 .removeClass('active');
 
             //update data    
             moz_chart({
                 title: "Beta Downloads",
                 description: "The chart is gracefully updated depending on the chosen time period.",
-                data: split_by_data_spliced,
+                data: data,
                 width: trunk.width * 2,
                 height: trunk.height,
                 right: trunk.right,
+                show_years: false,
                 xax_count: 4,
                 target: 'div#modify_time_period',
                 x_accessor: 'date',
                 y_accessor: 'beta'
             })
         })
     }
-})
-
-function convert_dates(data){
-    data = data.map(function(d){
-        var fff = d3.time.format('%Y-%m-%d');
-        d['date'] = fff.parse(d['date']);
-        return d;
-    });
-
-    return data;
-}
+})

js/metrics-graphics.js

@@ -107,6 +107,8 @@ function moz_chart() {
     else {
         charts.line(args).markers().mainPlot().rollover();
     }
+
+    return args.data;
 }
 
 function chart_title(args) {
@@ -926,3 +928,63 @@ charts.missing = function(args) {
     this.init(args);
     return this;
 }
+
+
+function modify_time_period(data, past_n_days) {
+    //splice time period
+    var data_spliced = clone(data);
+    if(past_n_days != '') {
+        for(var i=0; i<data_spliced.length; i++) {
+            var from = data_spliced[i].length - past_n_days;
+            data_spliced[i].splice(0,from);
+        }
+    }
+
+    return data_spliced;
+}
+
+
+function convert_dates(data){
+    data = data.map(function(d){
+        var fff = d3.time.format('%Y-%m-%d');
+        d['date'] = fff.parse(d['date']);
+        return d;
+    });
+
+    return data;
+}
+
+
+//deep copy
+//http://stackoverflow.com/questions/728360/most-elegant-way-to-clone-a-javascript-object
+function clone(obj) {
+    // Handle the 3 simple types, and null or undefined
+    if (null == obj || "object" != typeof obj) return obj;
+
+    // Handle Date
+    if (obj instanceof Date) {
+        var copy = new Date();
+        copy.setTime(obj.getTime());
+        return copy;
+    }
+
+    // Handle Array
+    if (obj instanceof Array) {
+        var copy = [];
+        for (var i = 0, len = obj.length; i < len; i++) {
+            copy[i] = clone(obj[i]);
+        }
+        return copy;
+    }
+
+    // Handle Object
+    if (obj instanceof Object) {
+        var copy = {};
+        for (var attr in obj) {
+            if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
+        }
+        return copy;
+    }
+
+    throw new Error("Unable to copy obj! Its type isn't supported.");
+}