coerce limit input value to Number, add number controls Fixes #45

(c) Copyright IBM Corp. 2016

Author: peller

urth-viz-explorer.html

@@ -104,7 +104,6 @@
                 <urth-core-dataframe
                     ref$="{{ref}}"
                     value="{{df}}"
-                    limit="{{limit}}"
                     row-as-object="true"
                     on-rows-changed="_rowsChanged"
                     on-columns-changed="_selectDefaults"
@@ -129,7 +128,7 @@
                         <paper-item name="circle">Scatter Chart</paper-item>
                     </paper-listbox>
                 </paper-dropdown-menu>
-                <paper-input label="Limit" value="{{limit}}"></paper-input>
+                <paper-input label="Limit" type="number" value="{{limit}}"></paper-input>
             </paper-card-collapse>
 
             <!-- select viz properties -->
@@ -478,7 +477,15 @@
                     Polymer.dom(this).appendChild(this.$$('urth-viz-query'));
 
                     // Call ready() directly to bind to new DOM document
-                    this.querySelector('urth-core-dataframe').ready();
+                    var dataframe = this.querySelector('urth-core-dataframe');
+                    dataframe.ready();
+
+                    dataframe.limit = this.limit;
+
+                    // Bind limit to dataframe, but coerce to Number
+                    this.addEventListener('limit-changed', function(event) {
+                        dataframe.limit = +event.detail.value;
+                    });
                 });
             } else {
                 // If no dataframe instance is specified with `ref`, look instead for a provided child dataframe
@@ -491,16 +498,18 @@
                     // and set up properties and events
                     dataframe.rowAsObject = true;
                     dataframe.limit = this.limit;
-                    this.addEventListener('limit-changed', function(event) {
-                        dataframe.limit = event.detail.value;
-                    });
                     dataframe.addEventListener('value-changed', this._dataChanged.bind(this));
                     dataframe.addEventListener('columns-changed', function (event) {
                         this.async(this._selectDefaults.bind(this, event));
                     }.bind(this));
                     dataframe.addEventListener('rows-changed', function(event) {
                         this.async(this._rowsChanged.bind(this, event));
                     }.bind(this));
+
+                    // Bind limit to dataframe, but coerce to Number
+                    this.addEventListener('limit-changed', function(event) {
+                        dataframe.limit = +event.detail.value;
+                    });
                 }
             }
         }