From f99bc919b6d0b79df71ba40e53b4310a675cd4d9 Mon Sep 17 00:00:00 2001
From: almossawi <almossawi@gmail.com>
Date: Thu, 15 May 2014 12:21:32 -0700
Subject: [PATCH] Fix issue #46

---
 css/metrics-graphics.css |   2 +-
 data/some_currency.json  | 402 +++++++++++++++++++++++++++++++++++++++
 index.html               |   2 +
 js/main.js               |  34 +++-
 js/metrics-graphics.js   |  13 +-
 5 files changed, 437 insertions(+), 16 deletions(-)
 create mode 100644 data/some_currency.json

diff --git a/css/metrics-graphics.css b/css/metrics-graphics.css
index b7324ab4c5..c37db45ca9 100644
--- a/css/metrics-graphics.css
+++ b/css/metrics-graphics.css
@@ -128,7 +128,7 @@ circle {
 
 h2.chart_title {
     cursor: pointer;
-    font-weight: 400;
+    font-size: 22px;
 }
 
 h2.chart_title .fa {
diff --git a/data/some_currency.json b/data/some_currency.json
new file mode 100644
index 0000000000..f84a3ff9c1
--- /dev/null
+++ b/data/some_currency.json
@@ -0,0 +1,402 @@
+[
+    {
+        "date": "2014-02-01", 
+        "value": 15000000
+    }, 
+    {
+        "date": "2014-02-02", 
+        "value": 16487625
+    }, 
+    {
+        "date": "2014-02-03", 
+        "value": 17097434
+    }, 
+    {
+        "date": "2014-02-04", 
+        "value": 17694420
+    }, 
+    {
+        "date": "2014-02-05", 
+        "value": 17014381
+    }, 
+    {
+        "date": "2014-02-06", 
+        "value": 15578984
+    }, 
+    {
+        "date": "2014-02-07", 
+        "value": 14718953
+    }, 
+    {
+        "date": "2014-02-08", 
+        "value": 15020669
+    }, 
+    {
+        "date": "2014-02-09", 
+        "value": 13889722
+    }, 
+    {
+        "date": "2014-02-10", 
+        "value": 13979897
+    }, 
+    {
+        "date": "2014-02-11", 
+        "value": 14595566
+    }, 
+    {
+        "date": "2014-02-12", 
+        "value": 14123256
+    }, 
+    {
+        "date": "2014-02-13", 
+        "value": 14083675
+    }, 
+    {
+        "date": "2014-02-14", 
+        "value": 15068426
+    }, 
+    {
+        "date": "2014-02-15", 
+        "value": 15368056
+    }, 
+    {
+        "date": "2014-02-16", 
+        "value": 15277054
+    }, 
+    {
+        "date": "2014-02-17", 
+        "value": 14376243
+    }, 
+    {
+        "date": "2014-02-18", 
+        "value": 13058892
+    }, 
+    {
+        "date": "2014-02-19", 
+        "value": 12367653
+    }, 
+    {
+        "date": "2014-02-20", 
+        "value": 13184423
+    }, 
+    {
+        "date": "2014-02-21", 
+        "value": 14367203
+    }, 
+    {
+        "date": "2014-02-22", 
+        "value": 14656447
+    }, 
+    {
+        "date": "2014-02-23", 
+        "value": 14724526
+    }, 
+    {
+        "date": "2014-02-24", 
+        "value": 14938129
+    }, 
+    {
+        "date": "2014-02-25", 
+        "value": 14205617
+    }, 
+    {
+        "date": "2014-02-26", 
+        "value": 14596607
+    }, 
+    {
+        "date": "2014-02-27", 
+        "value": 13982597
+    }, 
+    {
+        "date": "2014-02-28", 
+        "value": 15107034
+    }, 
+    {
+        "date": "2014-03-01", 
+        "value": 13646739
+    }, 
+    {
+        "date": "2014-03-02", 
+        "value": 14214763
+    }, 
+    {
+        "date": "2014-03-03", 
+        "value": 14952136
+    }, 
+    {
+        "date": "2014-03-04", 
+        "value": 14643933
+    }, 
+    {
+        "date": "2014-03-05", 
+        "value": 13611435
+    }, 
+    {
+        "date": "2014-03-06", 
+        "value": 12569788
+    }, 
+    {
+        "date": "2014-03-07", 
+        "value": 11344469
+    }, 
+    {
+        "date": "2014-03-08", 
+        "value": 12687132
+    }, 
+    {
+        "date": "2014-03-09", 
+        "value": 11831144
+    }, 
+    {
+        "date": "2014-03-10", 
+        "value": 10480837
+    }, 
+    {
+        "date": "2014-03-11", 
+        "value": 9051161
+    }, 
+    {
+        "date": "2014-03-12", 
+        "value": 9964784
+    }, 
+    {
+        "date": "2014-03-13", 
+        "value": 11035006
+    }, 
+    {
+        "date": "2014-03-14", 
+        "value": 10081289
+    }, 
+    {
+        "date": "2014-03-15", 
+        "value": 9793897
+    }, 
+    {
+        "date": "2014-03-16", 
+        "value": 9177447
+    }, 
+    {
+        "date": "2014-03-17", 
+        "value": 8035348
+    }, 
+    {
+        "date": "2014-03-18", 
+        "value": 6770242
+    }, 
+    {
+        "date": "2014-03-19", 
+        "value": 7272077
+    }, 
+    {
+        "date": "2014-03-20", 
+        "value": 8216348
+    }, 
+    {
+        "date": "2014-03-21", 
+        "value": 8576584
+    }, 
+    {
+        "date": "2014-03-22", 
+        "value": 9421060
+    }, 
+    {
+        "date": "2014-03-23", 
+        "value": 10872288
+    }, 
+    {
+        "date": "2014-03-24", 
+        "value": 9537996
+    }, 
+    {
+        "date": "2014-03-25", 
+        "value": 9560363
+    }, 
+    {
+        "date": "2014-03-26", 
+        "value": 8182813
+    }, 
+    {
+        "date": "2014-03-27", 
+        "value": 9068173
+    }, 
+    {
+        "date": "2014-03-28", 
+        "value": 10390251
+    }, 
+    {
+        "date": "2014-03-29", 
+        "value": 9714081
+    }, 
+    {
+        "date": "2014-03-30", 
+        "value": 9994670
+    }, 
+    {
+        "date": "2014-03-31", 
+        "value": 9317878
+    }, 
+    {
+        "date": "2014-04-01", 
+        "value": 8209077
+    }, 
+    {
+        "date": "2014-04-02", 
+        "value": 9230830
+    }, 
+    {
+        "date": "2014-04-03", 
+        "value": 8978342
+    }, 
+    {
+        "date": "2014-04-04", 
+        "value": 8361854
+    }, 
+    {
+        "date": "2014-04-05", 
+        "value": 9345999
+    }, 
+    {
+        "date": "2014-04-06", 
+        "value": 7965407
+    }, 
+    {
+        "date": "2014-04-07", 
+        "value": 8909276
+    }, 
+    {
+        "date": "2014-04-08", 
+        "value": 8935489
+    }, 
+    {
+        "date": "2014-04-09", 
+        "value": 8634997
+    }, 
+    {
+        "date": "2014-04-10", 
+        "value": 8795592
+    }, 
+    {
+        "date": "2014-04-11", 
+        "value": 7513086
+    }, 
+    {
+        "date": "2014-04-12", 
+        "value": 8408561
+    }, 
+    {
+        "date": "2014-04-13", 
+        "value": 7780649
+    }, 
+    {
+        "date": "2014-04-14", 
+        "value": 7524281
+    }, 
+    {
+        "date": "2014-04-15", 
+        "value": 8498062
+    }, 
+    {
+        "date": "2014-04-16", 
+        "value": 7922453
+    }, 
+    {
+        "date": "2014-04-17", 
+        "value": 9304312
+    }, 
+    {
+        "date": "2014-04-18", 
+        "value": 8199457
+    }, 
+    {
+        "date": "2014-04-19", 
+        "value": 8926136
+    }, 
+    {
+        "date": "2014-04-20", 
+        "value": 7558184
+    }, 
+    {
+        "date": "2014-04-21", 
+        "value": 6417511
+    }, 
+    {
+        "date": "2014-04-22", 
+        "value": 5748831
+    }, 
+    {
+        "date": "2014-04-23", 
+        "value": 6503022
+    }, 
+    {
+        "date": "2014-04-24", 
+        "value": 6429606
+    }, 
+    {
+        "date": "2014-04-25", 
+        "value": 5057410
+    }, 
+    {
+        "date": "2014-04-26", 
+        "value": 5924669
+    }, 
+    {
+        "date": "2014-04-27", 
+        "value": 4728239
+    }, 
+    {
+        "date": "2014-04-28", 
+        "value": 3918540
+    }, 
+    {
+        "date": "2014-04-29", 
+        "value": 2821473
+    }, 
+    {
+        "date": "2014-04-30", 
+        "value": 1995781
+    }, 
+    {
+        "date": "2014-05-01", 
+        "value": 1123626
+    }, 
+    {
+        "date": "2014-05-02", 
+        "value": 516067
+    }, 
+    {
+        "date": "2014-05-03", 
+        "value": 816831
+    }, 
+    {
+        "date": "2014-05-04", 
+        "value": 816831
+    }, 
+    {
+        "date": "2014-05-05", 
+        "value": 816831
+    }, 
+    {
+        "date": "2014-05-06", 
+        "value": 1103818
+    }, 
+    {
+        "date": "2014-05-07", 
+        "value": 958188
+    }, 
+    {
+        "date": "2014-05-08", 
+        "value": 592995
+    }, 
+    {
+        "date": "2014-05-09", 
+        "value": 856066
+    }, 
+    {
+        "date": "2014-05-10", 
+        "value": 1766761
+    }, 
+    {
+        "date": "2014-05-11", 
+        "value": 1330557
+    }
+]
\ No newline at end of file
diff --git a/index.html b/index.html
index 73314f26bd..63246163f9 100644
--- a/index.html
+++ b/index.html
@@ -48,6 +48,8 @@ <h1>Metrics Graphics</h1>
                 <div id='fake_users1'></div>
                 <div id='fake_users2'></div>
                 <div id='glorious_chart' class='missing'></div>
+                <div id='percentage'></div>
+                <div id='currency'></div>
             </div>
             <div id='trunk'>
 
diff --git a/js/main.js b/js/main.js
index ae62ea6b50..4c2d670d05 100644
--- a/js/main.js
+++ b/js/main.js
@@ -25,7 +25,6 @@ $(document).ready(function() {
 
     assignEventListeners();
     
-    //sample chart 1
     d3.json('data/fake_users1.json', function(data) {
         var fff = d3.time.format('%Y-%m-%d');
         for(var i=0;i<data.length;i++) {
@@ -49,7 +48,6 @@ $(document).ready(function() {
         })
     })
         
-    //sample chart 2
     d3.json('data/fake_users2.json', function(data) {
         for(var i=0;i<data.length;i++) {
             data[i] = convert_dates(data[i]);
@@ -70,11 +68,9 @@ $(document).ready(function() {
 
     //sample chart 3
     d3.json('data/some_percentage.json', function(data) {
-        // for (var i=0;i<data.length;i++) {
-        //         data[i] = convert_dates(data[i]);
-        //     };
-        // })
-        data = convert_dates(data);
+        for(var i=0;i<data.length;i++) {
+            data[i] = convert_dates(data[i]);
+        };
 
         var markers = [{
             'date': new Date('2014-02-01'),
@@ -86,12 +82,11 @@ $(document).ready(function() {
             
         moz_chart({
             title: "Some Percentages",
-            description: "Here is an example with the area turned off, and using the percentage format instead.",
+            description: "Here is an example that shows percentages.",
             data: data,
             width: torso.width,
             height: torso.height,
             right: torso.right,
-            area: false,
             markers: markers,
             format: 'percentage',
             target: 'div#percentage',
@@ -100,7 +95,22 @@ $(document).ready(function() {
         });
     })
     
-    //sample chart 4           
+    d3.json('data/some_currency.json', function(data) {
+        data = convert_dates(data);    
+        moz_chart({
+            title: "Some Currency",
+            description: "Here is an example that uses custom units for currency.",
+            data: data,
+            width: torso.width,
+            height: torso.height,
+            right: torso.right,
+            target: 'div#currency',
+            x_accessor: 'date',
+            yax_units: '$',
+            y_accessor: 'value'
+        });
+    })
+    
     moz_chart({
         title: "Glorious Chart",
         chart_type: 'missing-data',
@@ -114,6 +124,7 @@ $(document).ready(function() {
     // lower section
     d3.json('data/brief-1.json', function(data) {
         data = convert_dates(data);
+        
         moz_chart({
             title: "Linked Charts",
             description: "The two charts in this section are linked together. A rollover in one causes a rollover in the other. We are still working out how to make the exact same changes in each, but for now the rollovers merely trigger the rect.",
@@ -127,6 +138,7 @@ $(document).ready(function() {
             x_accessor: 'date',
             y_accessor: 'value'
         });
+        
         moz_chart({
             title: "Small Text Inferred By Size",
             description: "If the args.width - args.left - args.right is smaller than the args.small_width_threshold (and the flip for the height) then the text size automatically scales to be slightly smaller.",
@@ -145,6 +157,7 @@ $(document).ready(function() {
     
     d3.json('data/brief-2.json', function(data) {
         data = convert_dates(data);
+        
         moz_chart({
             title: "area=false",
             description: "Small check to see that area: false works how we'd expect it.",
@@ -159,6 +172,7 @@ $(document).ready(function() {
             x_accessor: 'date',
             y_accessor: 'value'
         });
+        
         moz_chart({
             title: "small_text=true",
             description: "by adding small_text:true to the args list, we can force the use of smaller axis text regardless of the width or height",
diff --git a/js/metrics-graphics.js b/js/metrics-graphics.js
index cd15a3b67d..54b962cb5d 100644
--- a/js/metrics-graphics.js
+++ b/js/metrics-graphics.js
@@ -27,7 +27,7 @@ function merge_with_defaults(obj){
       }
     });
     return obj;
-  };
+};
 
 
 var charts = {};
@@ -64,14 +64,17 @@ function moz_chart() {
         max_x: null,
         max_y: null,
         inflator: 10/9, // for setting y axis max 
-        xax_count: 8,
+        xax_count: 6,
         yax_tick: 5,
         yax_count: 5,
         decimal: false,
         buffer: 8,
         format: 'count',
         target: '#viz',
-        xax_date_format: function(d) {
+        xax_units: '',
+        yax_units: '',
+        xax_format: function(d) {
+            //assume date by default, user can pass in custom function
             var df = d3.time.format('%b %d');
             return df(d);
         }
@@ -176,7 +179,7 @@ function xAxis(args) {
                 .attr('dy', '.50em')
                 .attr('text-anchor', 'middle')
                 .text(function(d) {
-                    return args.xax_date_format(d);
+                    return args.xax_format(d);
                 })
         
     //are we adding years to x-axis
@@ -257,7 +260,7 @@ function yAxis(args) {
     if (args.format == 'count') {
         yax_format = function(f) {
             var pf = d3.formatPrefix(f);
-            return pf.scale(f) + pf.symbol;
+            return args.yax_units + pf.scale(f) + pf.symbol;
         };
     }
     else {