closes speced#54 - provided args.decimals to control float issues, wi…

…th default 2
shikhar-scs · May 20, 2014 · b7f9fa3 · b7f9fa3
1 parent e92482c
commit b7f9fa3
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 37 deletions.
diff --git a/index.html b/index.html
@@ -84,6 +84,20 @@ <h2 class='trunk-title'>Small Charts</h2>
                     </div>
                 </div>
 
+                <div class='row trunk-section'>
+                    <div class='col-lg-4'>
+                        <h2 class='trunk-title'>Rollover Number Formatting</h2>
+                        <p>We can change the precision if the axis data type is a float.</p>
+                    </div>
+                    <div class='col-lg-7'>
+                        <div class='row'>
+                            <div class='col-lg-6 gr' id='precision1'></div>
+                            <div class='col-lg-6 gr' id='precision2'></div>
+                        </div>
+                        <div class='col-lg-1'></div>
+                    </div>
+                </div>
+
             </div>
         </div>
     </div>

diff --git a/js/main.js b/js/main.js
@@ -107,6 +107,21 @@ $(document).ready(function() {
             x_accessor: 'date',
             y_accessor: 'value'
         });
+        moz_chart({
+                title: "Changing Precision 2",
+                description: "Here we set decimals: 0 for percentages.",
+                data: data,
+                decimals: 0,
+                format: 'Percentage',
+                width: trunk.width,
+                height: trunk.height,
+                right: trunk.right,
+                small_text: true,
+                xax_count: 4,
+                target: 'div#precision2',
+                x_accessor: 'date',
+                y_accessor: 'value'
+            });
     })
 
     d3.json('data/some_currency.json', function(data) {
@@ -224,8 +239,28 @@ $(document).ready(function() {
             y_accessor: 'value'
         });
     });
+    d3.json('data/float.json', function(data) {
+        data = convert_dates(data);
+
+        moz_chart({
+                title: "Changing Precision 1",
+                description: "Here we set decimals: 3 to get 3 decimals in the rollover for percentages.",
+                data: data,
+                decimals: 3,
+                width: trunk.width,
+                height: trunk.height,
+                right: trunk.right,
+                small_text: true,
+                xax_count: 4,
+                target: 'div#precision1',
+                x_accessor: 'date',
+                y_accessor: 'value'
+            });
+    });
 })
 
+
+
 function assignEventListeners() {
     $('#dark-css').click(function () {
         $('.missing')

diff --git a/js/metrics-graphics.js b/js/metrics-graphics.js
@@ -36,51 +36,51 @@ function moz_chart() {
     var moz = {};
     moz.defaults = {};
     moz.defaults.all = {
-        area: true,
-        bottom: 30,
-        buffer: 8,
-        chart_type: 'line',
-        data: [],
-        decimal: false,
-        format: 'count',
-        height: 220,
-        inflator: 10/9, // for setting y axis max
-        left: 50,
-        linked: false,
-        list: false,
-        markers: null, // sets the marker lines
+        top: 40,                      // the size of the top margin
+        bottom: 30,                   // the size of the bottom margin
+        right: 10,                    // size of the right margin
+        left: 50,                     // size of the left margin
+        buffer: 8,                    // the buffer between the actual chart area and the margins
+        width: 350,                   // the width of the entire graphic
+        height: 220,                  // the height of the entire graphic
+        small_height_threshold: 120,  // the height threshold for when smaller text appears
+        small_width_threshold: 160,   // the width  threshold for when smaller text appears
+        small_text: false,            // coerces small text regardless of graphic size
+        xax_count: 6,                 // number of x axis ticks
+        xax_tick: 5,                  // x axis tick length
+        yax_count: 5,                 // number of y axis ticks
+        yax_tick: 5,                  // y axis tick length
+        x_extended_ticks: false,      // extends x axis ticks across chart - useful for tall charts
+        y_extended_ticks: false,      // extends y axis ticks across chart - useful for long charts
         max_x: null,
         max_y: null,
         min_x: null,
         min_y: null,
-        right: 10,
-        scalefns: {},
-        scales: {},
-        show_years: true,
-        small_height_threshold: 120,
-        small_text: false,
-        small_width_threshold: 160,
-        target: '#viz',
-        time_series: true,
-        top: 40,
-        width: 350, 
         x_accessor: 'date',
-        xax_count: 6,
+        xax_units: '',
+        x_label: '',
+        y_accessor: 'value',
+        y_label: '',
+        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);
         },
-        xax_tick: 5,
-        xax_units: '',
-        x_extended_ticks: false,
-        x_label: '',
-        y_accessor: 'value',
-        y_extended_ticks: false,
-        y_label: '',
-        yax_count: 5,
-        yax_tick: 5,
-        yax_units: ''
+
+        area: true,
+        chart_type: 'line',   
+        data: [],
+        decimals: 2,                  // the number of decimals in any rollover
+        format: 'count',
+        inflator: 10/9,               // for setting y axis max
+        linked: false,                // links together all other graphs with linked:true, so rollovers in one trigger rollovers in the others
+        list: false,
+        markers: null,                // sets the marker lines
+        scalefns: {},
+        scales: {},
+        show_years: true,
+        target: '#viz'
     }
 
     var args = arguments[0];
@@ -619,14 +619,16 @@ charts.line = function(args) {
 
             if (args.format == 'count') {
                 var num = function(d_) {
+                    var is_float = d_ % 1 != 0;
                     var n = d3.format("0,000");
-                    d_ = args.decimal ? d3.round(d_, 2) : d3.round(d_);
+                    d_ = is_float ? d3.round(d_, args.decimals) : d_;
                     return n(d_);
                 }
             }
             else {
                 var num = function(d_) {
-                    var n = d3.format('%');
+                    var fmt_string = (args.decimals ? '.' + args.decimals : '' ) + '%';
+                    var n = d3.format(fmt_string);
                     return n(d_);
                 }
             }