charted - npm Package Compare versions

Comparing version 0.0.22 to 0.0.23

examples/simple/index.js

@@ -6,6 +6,6 @@ var _ = require('underscore'), Backbone = require('backbone');
    { key2: 45, key3: 311, time: now },
-   { key1: 4, key3: 193, time: now + 60000 },
+   { key1: 1.19, key3: 193, time: now + 60000 },
    { key1: 1, key2: 93, time: now + 105000 },
-   { key1: 8, key2: 12, key3: 204, time: now + 120000 },
-   { key1: 3, key2: 77, key3: 489, time: now - 50000 }
+   { key1: 1.02, key2: 12, key3: 204, time: now + 120000 },
+   { key1: 1.04, key2: 77, key3: 489, time: now - 50000 }
 ];
@@ -18,3 +18,3 @@
     x_axis_formatter: 'time',
-    multi_y: true
+    multi_y: false
 });
@@ -25,13 +25,16 @@
         key: 'key1',
-        color: 'green'
+        color: 'green',
+        visible: true
     });
     chart.plot({
         key: 'key2',
-        color: 'blue'
+        color: 'blue',
+        visible: false
     });
     chart.plot({
         key: 'key3',
-        color: 'red'
+        color: 'red',
+        visible: false
     });
     $('#trg').html(chart.view.render().el);
 });

lib/Plot.js

@@ -22,5 +22,7 @@ /**
         
-        upper: undefined
-        // Thie higher extremum (maximum) of this plot's values
+        upper: undefined,
+        // The higher extremum (maximum) of this plot's values
         
+        visible: true
+        // The visibility of this plot
     },
@@ -27,0 +29,0 @@

lib/Plots.js

@@ -31,9 +31,18 @@ /**
     updateExtrema: function() {
-        // console.log("updating extrema in plots");
-        
         // Get all keys to take into consideration
         // when calculating overall extrema
-        var keys = this.pluck('key');
+        // var keys = this.pluck('key');
+        var plots_to_use = this.filter(function(plot) {
+            return plot.get('visible');
+        });
+        
+        var keys = _.map(plots_to_use, function(plot) {
+            return plot.get('key');
+        });
 
         // Update this.y_extrema values.
+        if (!keys.length) {
+            this.y_extrema = { min: 0, max: 1 };
+            return;
+        }
         this.y_extrema = this.calcExtrema(keys, 0.1);
@@ -48,2 +57,3 @@
     calcExtrema: function(keys, paddingLeft, paddingRight) {
+        // debugger;
         // Check for single key specification
@@ -50,0 +60,0 @@ if (typeof keys === "string") keys = [keys];

lib/util.js

@@ -11,2 +11,57 @@ exports.convertToRange = function(value, lower, upper, newRange) {
     return element;
+}
+
+exports.createAxisLabel = function(number, real_interval) {
+    var mag, 
+        rounded, 
+        digits_over,
+        num_arr,
+        splice_start, 
+        splice_rmcount, 
+        abs_number = Math.abs(number), 
+        MAX_DIGITS = 5;
+    
+    var append = '';
+    var levels = [
+        [1000000000000000,'Q'],
+        [1000000000000,'T'],
+        [1000000000,'B'],
+        [1000000,'M'],
+        [1000,'K']
+    ];
+    
+    for (var i=0; i < levels.length; i++) {
+        var lowerBound = levels[i][0];
+        var abbr = levels[i][1];
+        
+        if (abs_number >= lowerBound) {
+            append = abbr;
+            number /= lowerBound;
+            real_interval /= lowerBound;
+            break;
+        }
+    };
+    
+    // Create magnitude factor
+    mag = Math.log(real_interval) / Math.log(10);
+    mag = Math.floor(mag);
+    mag = Math.pow( 10, mag*-1 );
+    mag *= 10;
+    
+    // Round number with magnitude, then cast as string
+    rounded = Math.round( number * mag ) / mag;
+    rounded = rounded + '';
+    
+    // Determine if too many digits are there
+    digits_over = rounded.replace(/[\.]/g,'').length - MAX_DIGITS;
+    
+    if (digits_over > 0) {
+        num_arr = rounded.split('');
+        splice_start = rounded.indexOf('.') + 1;
+        splice_rmcount = digits_over + 1;
+        num_arr.splice(splice_start, splice_rmcount, '…');
+        rounded = num_arr.join('');
+    }
+    
+    return rounded + append;
 }

lib/Viewport.js

@@ -121,4 +121,8 @@ /**
         var plot_memo = {};
+        
         // Store x-key
         var x_key = this.model.get('x_key');
+        
+        // Get the visible plots
+        var visible_plots = this.plots.filter(function(plot) { return plot.get('visible') });
         // Loop through the data
@@ -128,4 +132,4 @@ this.collection.each(function(point){
             var x_value = this.plots.toPixelX(point.get(x_key));
-            // For each plot, 
-            this.plots.each(function(plot){
+            // For each visible plot, 
+            _.each(visible_plots, function(plot){
                 // store key for this plot
@@ -132,0 +136,0 @@ var key = plot.get('key');

lib/YaxesView.js

@@ -16,3 +16,3 @@ /**
         this.setupSubviews();
-        this.listenTo(this.collection, 'add remove reset', function() {
+        this.listenTo(this.collection, 'add remove reset change:visible', function() {
             this.setupSubviews();
@@ -40,2 +40,5 @@ this.model.trigger('trigger_render');
                 
+                // Check for visibility
+                if (!plot.get('visible')) return;
+                
                 this.subview(plot.get('key')+'-yaxis', new YaxisView({
@@ -83,2 +86,6 @@ model: plot
         this.collection.each(function(plot){
+            
+            // Check for visibility
+            if (!plot.get('visible')) return;
+            
             // cache class name 
@@ -85,0 +92,0 @@ var className = plot.get('key')+'-yaxis';

lib/YaxisView.js

@@ -10,2 +10,3 @@ /**
 var bassview = require('bassview');
+var util = require('./util');
 var YaxisView = bassview.extend({
@@ -60,2 +61,3 @@
         var guide_interval = this.chart.getYGuideInterval();
+        var real_interval = this.getRealYInterval();
         
@@ -66,4 +68,6 @@ var markers = [];
             var pixel_y = i * guide_interval;
+            var actual_y = toActualY(pixel_y);
             markers.push({
-                label: this.createAxisLabel(toActualY(pixel_y)),
+                label: util.createAxisLabel(actual_y, real_interval),
+                actual: actual_y,
                 mark_class: 'top',
@@ -82,8 +86,10 @@ bottom: 'auto',
     
-    createAxisLabel: function(number) {
-        if (number < 1) return Math.round(number*10)/10;
-        else if (number > 1000000000) return (Math.round(number/10000000)/100)+'B';
-        else if (number > 1000000) return (Math.round(number/10000)/100)+'M';
-        else if (number > 1000) return (Math.round(number/100)/10)+'K';
-        return Math.round(number);
+    getRealYInterval: function() {
+        if (this.model) {
+            return this.model.get('upper') - this.model.get('lower');
+        }
+        else if (this.collection){
+            return this.collection.y_extrema.max - this.collection.y_extrema.min;
+        }
+        throw new Error('getRealYInterval expects that either a plot model or plots collection is available.');
     }
@@ -90,0 +96,0 @@

package.json

 {
   "name": "charted",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "description": "Charts an entire collection of data. Single or multiple y-axes. Support for 64-bit integers. Auto-resizing axes.",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

629508

increased by0.63%

Lines of code

18331

increased by0.58%

No dependency changes