lenses · maxiplay · May 10, 2016
diff --git a/bower.json b/bower.json
@@ -1,18 +1,16 @@
 {
   "name": "lens-data-crossfilter",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "license": "MIT",
   "keywords": "lenses, polymer, web-components, crossfilter, crossfilter.js, d3, d3.js",
   "main": "lens-data-crossfilter.html",
   "dependencies": {
     "d3": "d3#>=3.4.11",
-    "polymer": "Polymer/polymer#~0.5.5",
-    "th-theme": "thelmanews/th-theme",
-    "lens-u-data-selector": "lenses/lens-u-data-selector",
-    "core-component-page" : "Polymer/core-component-page#^0.5.5"
+    "polymer": "Polymer/polymer#~1.0.0",
+    "iron-component-page" : "Polymer/iron-component-page#^1.1.6"
   },
   "devDependencies": {
-    "web-component-tester": "Polymer/web-component-tester#^2.2.6"
+    "web-component-tester": "Polymer/web-component-tester#^4.2.2"
   }
 }
 
diff --git a/demo.html b/demo.html
@@ -81,12 +81,7 @@
 
     </style>
 
-    <script>
-      // helper function to stringify objects, used below like {{outputs | json}}
-      PolymerExpressions.prototype.json = function(object) {
-        return JSON.stringify(object, undefined, 2);
-      };
-    </script>
+
   </head>
   <body unresolved>
 
@@ -96,35 +91,44 @@ <h1>lens-data-crossfilter</h1>
     <p>
       A '<a href="http://lenses.github.io/lenses-freeform/components/lenses-freeform/" target="_blank">lenses</a>'' component to visually crossfilter input. Source on <a href="https://github.com/lenses/lens-data-crossfilter" target="_blank">Github</a>
     </p>
-
-
-
 
-    <template id="auto-bind-demo" is="auto-binding">
+   <template is="dom-bind">
 
       <section>
         <label>Input:</label><span class="count">{{myinput.length}} records</span>
-        <pre id="input">{{myinput | json}}</pre>
+        <pre id="input">{{stringify(myinput)}}</pre>
       </section>
       <section class="component">
         <label>Component:</label>
         <lens-data-crossfilter id="component" input="{{myinput}}" output="{{myoutput}}"></lens-data-crossfilter>
       </section>
       <section>
         <label>Output:</label><span class="count">{{myoutput.length}} records</span>
-        <pre>{{myoutput | json}}</pre>
+        <pre>{{stringify(myoutput)}}</pre>
       </section>
 
       <script>
+      (function() {
+    	    var template = document.querySelector('template[is="dom-bind"]');
+
+    	    template.stringify = function(object) {
+    	      	  return JSON.stringify(object, undefined, 2);
+
+            };
+    	  })();
+
 
-        // input data
         var input = new Object([{"HT":"73","WT":"200","AGE":"25","POS":"S"},{"HT":"72","WT":"204","AGE":"29","POS":"S"},{"HT":"77","WT":"308","AGE":"23","POS":"G"},{"HT":"76","WT":"263","AGE":"36","POS":"LB"},{"HT":"75","WT":"257","AGE":"26","POS":"LB"},{"HT":"73","WT":"215","AGE":"22","POS":"WR"},{"HT":"79","WT":"305","AGE":"25","POS":"T"},{"HT":"79","WT":"323","AGE":"24","POS":"T"},{"HT":"71","WT":"200","AGE":"33","POS":"S"},{"HT":"71","WT":"195","AGE":"26","POS":"CB"},{"HT":"70","WT":"195","AGE":"25","POS":"S"},{"HT":"75","WT":"260","AGE":"27","POS":"DE"},{"HT":"70","WT":"247","AGE":"23","POS":"FB"},{"HT":"74","WT":"215","AGE":"25","POS":"WR"},{"HT":"73","WT":"210","AGE":"23","POS":"CB"},{"HT":"75","WT":"215","AGE":"27","POS":"WR"},{"HT":"77","WT":"310","AGE":"30","POS":"T"},{"HT":"73","WT":"244","AGE":"31","POS":"LB"},{"HT":"73","WT":"220","AGE":"24","POS":"S"},{"HT":"70","WT":"186","AGE":"26","POS":"CB"},{"HT":"73","WT":"210","AGE":"26","POS":"S"},{"HT":"74","WT":"333","AGE":"23","POS":"DT"},{"HT":"73","WT":"196","AGE":"26","POS":"CB"},{"HT":"75","WT":"265","AGE":"24","POS":"TE"},{"HT":"78","WT":"270","AGE":"32","POS":"DE"},{"HT":"76","WT":"307","AGE":"25","POS":"G"},{"HT":"74","WT":"211","AGE":"22","POS":"WR"},{"HT":"73","WT":"210","AGE":"27","POS":"S"},{"HT":"74","WT":"215","AGE":"24","POS":"P"},{"HT":"73","WT":"200","AGE":"32","POS":"S"},{"HT":"75","WT":"295","AGE":"27","POS":"DE"},{"HT":"77","WT":"265","AGE":"22","POS":"TE"},{"HT":"71","WT":"195","AGE":"29","POS":"WR"},{"HT":"73","WT":"194","AGE":"23","POS":"CB"},{"HT":"72","WT":"207","AGE":"25","POS":"CB"},{"HT":"68","WT":"224","AGE":"24","POS":"RB"},{"HT":"78","WT":"230","AGE":"31","POS":"QB"},{"HT":"75","WT":"202","AGE":"26","POS":"P"},{"HT":"78","WT":"278","AGE":"25","POS":"DE"},{"HT":"68","WT":"173","AGE":"23","POS":"RB"},{"HT":"69","WT":"197","AGE":"27","POS":"CB"},{"HT":"77","WT":"304","AGE":"23","POS":"T"},{"HT":"75","WT":"234","AGE":"23","POS":"LB"},{"HT":"70","WT":"190","AGE":"28","POS":"CB"},{"HT":"76","WT":"305","AGE":"26","POS":"G"},{"HT":"72","WT":"234","AGE":"27","POS":"RB"},{"HT":"73","WT":"303","AGE":"26","POS":"DT"},{"HT":"75","WT":"252","AGE":"22","POS":"LB"},{"HT":"76","WT":"258","AGE":"27","POS":"TE"},{"HT":"74","WT":"312","AGE":"26","POS":"DT"},{"HT":"74","WT":"215","AGE":"30","POS":"WR"},{"HT":"68","WT":"176","AGE":"23","POS":"WR"},{"HT":"72","WT":"210","AGE":"31","POS":"WR"},{"HT":"71","WT":"200","AGE":"30","POS":"WR"},{"HT":"75","WT":"260","AGE":"28","POS":"DE"},{"HT":"75","WT":"255","AGE":"25","POS":"LB"},{"HT":"75","WT":"275","AGE":"29","POS":"DE"},{"HT":"75","WT":"267","AGE":"34","POS":"LB"},{"HT":"74","WT":"300","AGE":"33","POS":"DT"},{"HT":"72","WT":"200","AGE":"24","POS":"S"},{"HT":"75","WT":"288","AGE":"25","POS":"DE"},{"HT":"75","WT":"320","AGE":"23","POS":"T"},{"HT":"72","WT":"191","AGE":"27","POS":"K"},{"HT":"78","WT":"290","AGE":"30","POS":"DE"},{"HT":"74","WT":"325","AGE":"27","POS":"DE"},{"HT":"76","WT":"310","AGE":"23","POS":"T"},{"HT":"70","WT":"189","AGE":"26","POS":"WR"},{"HT":"74","WT":"197","AGE":"29","POS":"CB"},{"HT":"73","WT":"209","AGE":"27","POS":"S"},{"HT":"70","WT":"215","AGE":"24","POS":"RB"},{"HT":"74","WT":"185","AGE":"25","POS":"CB"},{"HT":"76","WT":"310","AGE":"30","POS":"T"},{"HT":"74","WT":"227","AGE":"24","POS":"QB"},{"HT":"77","WT":"326","AGE":"27","POS":"T"},{"HT":"78","WT":"321","AGE":"32","POS":"T"},{"HT":"79","WT":"364","AGE":"24","POS":"DT"},{"HT":"76","WT":"306","AGE":"26","POS":"C"},{"HT":"78","WT":"250","AGE":"29","POS":"TE"},{"HT":"77","WT":"255","AGE":"22","POS":"LB"},{"HT":"73","WT":"220","AGE":"24","POS":"LB"},{"HT":"74","WT":"213","AGE":"25","POS":"S"},{"HT":"73","WT":"229","AGE":"24","POS":"LB"},{"HT":"74","WT":"230","AGE":"25","POS":"LB"},{"HT":"76","WT":"264","AGE":"28","POS":"LB"},{"HT":"76","WT":"256","AGE":"24","POS":"DE"},{"HT":"71","WT":"225","AGE":"24","POS":"LB"},{"HT":"74","WT":"220","AGE":"31","POS":"RB"},{"HT":"76","WT":"258","AGE":"24","POS":"TE"},{"HT":"75","WT":"303","AGE":"25","POS":"T"},{"HT":"76","WT":"305","AGE":"28","POS":"G"},{"HT":"68","WT":"180","AGE":"25","POS":"WR"},{"HT":"72","WT":"232","AGE":"30","POS":"LB"},{"HT":"78","WT":"319","AGE":"29","POS":"T"},{"HT":"71","WT":"198","AGE":"22","POS":"WR"},{"HT":"77","WT":"340","AGE":"26","POS":"T"},{"HT":"71","WT":"229","AGE":"28","POS":"RB"},{"HT":"73","WT":"244","AGE":"23","POS":"RB"},{"HT":"73","WT":"250","AGE":"25","POS":"LB"},{"HT":"77","WT":"220","AGE":"24","POS":"WR"},{"HT":"70","WT":"175","AGE":"25","POS":"WR"},{"HT":"78","WT":"265","AGE":"28","POS":"TE"},{"HT":"76","WT":"274","AGE":"29","POS":"DE"},{"HT":"70","WT":"188","AGE":"25","POS":"CB"},{"HT":"72","WT":"185","AGE":"23","POS":"CB"},{"HT":"77","WT":"305","AGE":"32","POS":"G"},{"HT":"77","WT":"310","AGE":"28","POS":"G"},{"HT":"72","WT":"194","AGE":"23","POS":"S"},{"HT":"76","WT":"333","AGE":"29","POS":"G"},{"HT":"69","WT":"208","AGE":"24","POS":"RB"},{"HT":"72","WT":"211","AGE":"26","POS":"S"},{"HT":"75","WT":"210","AGE":"24","POS":"WR"},{"HT":"71","WT":"206","AGE":"30","POS":"S"},{"HT":"72","WT":"190","AGE":"24","POS":"CB"},{"HT":"75","WT":"255","AGE":"29","POS":"DE"},{"HT":"72","WT":"185","AGE":"27","POS":"CB"},{"HT":"77","WT":"320","AGE":"25","POS":"DT"},{"HT":"72","WT":"301","AGE":"24","POS":"NT"},{"HT":"76","WT":"305","AGE":"23","POS":"T"},{"HT":"75","WT":"220","AGE":"31","POS":"LB"},{"HT":"72","WT":"204","AGE":"30","POS":"CB"},{"HT":"69","WT":"198","AGE":"24","POS":"CB"},{"HT":"76","WT":"326","AGE":"31","POS":"G"},{"HT":"73","WT":"200","AGE":"25","POS":"S"},{"HT":"72","WT":"250","AGE":"28","POS":"RB"},{"HT":"74","WT":"222","AGE":"23","POS":"RB"},{"HT":"75","WT":"306","AGE":"22","POS":"C"},{"HT":"73","WT":"247","AGE":"24","POS":"FB"},{"HT":"71","WT":"220","AGE":"25","POS":"RB"},{"HT":"70","WT":"195","AGE":"26","POS":"S"},{"HT":"73","WT":"220","AGE":"34","POS":"WR"},{"HT":"77","WT":"310","AGE":"25","POS":"G"},{"HT":"77","WT":"325","AGE":"31","POS":"G"},{"HT":"71","WT":"248","AGE":"24","POS":"LB"},{"HT":"77","WT":"232","AGE":"23","POS":"QB"},{"HT":"72","WT":"208","AGE":"27","POS":"P"},{"HT":"73","WT":"246","AGE":"23","POS":"LB"},{"HT":"75","WT":"250","AGE":"25","POS":"TE"},{"HT":"73","WT":"205","AGE":"22","POS":"S"},{"HT":"72","WT":"191","AGE":"23","POS":"CB"},{"HT":"78","WT":"300","AGE":"23","POS":"C"},{"HT":"74","WT":"221","AGE":"30","POS":"WR"},{"HT":"76","WT":"288","AGE":"24","POS":"DE"},{"HT":"73","WT":"196","AGE":"30","POS":"CB"},{"HT":"75","WT":"310","AGE":"25","POS":"DT"},{"HT":"70","WT":"185","AGE":"24","POS":"CB"},{"HT":"74","WT":"218","AGE":"25","POS":"WR"},{"HT":"76","WT":"308","AGE":"27","POS":"T"},{"HT":"73","WT":"252","AGE":"22","POS":"LB"},{"HT":"76","WT":"224","AGE":"27","POS":"QB"},{"HT":"74","WT":"241","AGE":"25","POS":"LB"},{"HT":"70","WT":"217","AGE":"28","POS":"RB"},{"HT":"76","WT":"225","AGE":"37","POS":"QB"},{"HT":"77","WT":"241","AGE":"27","POS":"LB"},{"HT":"77","WT":"265","AGE":"25","POS":"DE"},{"HT":"72","WT":"210","AGE":"28","POS":"S"},{"HT":"71","WT":"197","AGE":"23","POS":"CB"},{"HT":"72","WT":"209","AGE":"36","POS":"QB"},{"HT":"77","WT":"230","AGE":"24","POS":"LS"},{"HT":"78","WT":"330","AGE":"27","POS":"T"},{"HT":"74","WT":"210","AGE":"22","POS":"QB"},{"HT":"73","WT":"244","AGE":"34","POS":"LB"},{"HT":"76","WT":"248","AGE":"25","POS":"LS"},{"HT":"73","WT":"252","AGE":"29","POS":"LB"},{"HT":"78","WT":"325","AGE":"23","POS":"T"},{"HT":"75","WT":"223","AGE":"26","POS":"WR"},{"HT":"70","WT":"197","AGE":"26","POS":"CB"},{"HT":"73","WT":"255","AGE":"28","POS":"TE"},{"HT":"77","WT":"326","AGE":"24","POS":"DT"},{"HT":"75","WT":"306","AGE":"22","POS":"DT"},{"HT":"75","WT":"259","AGE":"30","POS":"LB"},{"HT":"77","WT":"335","AGE":"25","POS":"G"},{"HT":"70","WT":"190","AGE":"26","POS":"CB"},{"HT":"71","WT":"200","AGE":"23","POS":"S"},{"HT":"70","WT":"186","AGE":"26","POS":"WR"},{"HT":"72","WT":"235","AGE":"24","POS":"LB"},{"HT":"72","WT":"220","AGE":"23","POS":"RB"},{"HT":"77","WT":"300","AGE":"27","POS":"T"},{"HT":"71","WT":"190","AGE":"28","POS":"CB"},{"HT":"70","WT":"207","AGE":"27","POS":"RB"},{"HT":"76","WT":"303","AGE":"29","POS":"T"},{"HT":"74","WT":"205","AGE":"25","POS":"WR"},{"HT":"71","WT":"179","AGE":"24","POS":"WR"},{"HT":"72","WT":"202","AGE":"35","POS":"K"},{"HT":"75","WT":"209","AGE":"23","POS":"WR"},{"HT":"77","WT":"214","AGE":"23","POS":"WR"},{"HT":"70","WT":"200","AGE":"26","POS":"WR"},{"HT":"71","WT":"180","AGE":"23","POS":"WR"},{"HT":"73","WT":"251","AGE":"22","POS":"LB"},{"HT":"73","WT":"223","AGE":"33","POS":"RB"},{"HT":"74","WT":"218","AGE":"26","POS":"S"},{"HT":"71","WT":"215","AGE":"27","POS":"S"},{"HT":"71","WT":"190","AGE":"30","POS":"CB"},{"HT":"71","WT":"190","AGE":"26","POS":"WR"},{"HT":"73","WT":"248","AGE":"25","POS":"LB"},{"HT":"76","WT":"221","AGE":"30","POS":"CB"},{"HT":"70","WT":"195","AGE":"26","POS":"WR"},{"HT":"74","WT":"217","AGE":"27","POS":"S"},{"HT":"76","WT":"265","AGE":"24","POS":"DE"},{"HT":"76","WT":"300","AGE":"27","POS":"DT"},{"HT":"78","WT":"310","AGE":"29","POS":"DE"},{"HT":"74","WT":"222","AGE":"26","POS":"WR"},{"HT":"76","WT":"211","AGE":"23","POS":"WR"},{"HT":"69","WT":"203","AGE":"39","POS":"K"},{"HT":"76","WT":"323","AGE":"30","POS":"DE"},{"HT":"73","WT":"208","AGE":"22","POS":"S"},{"HT":"78","WT":"255","AGE":"24","POS":"DE"},{"HT":"77","WT":"314","AGE":"25","POS":"T"},{"HT":"69","WT":"206","AGE":"25","POS":"K"},{"HT":"74","WT":"306","AGE":"31","POS":"NT"},{"HT":"73","WT":"248","AGE":"24","POS":"LB"},{"HT":"70","WT":"215","AGE":"24","POS":"RB"},{"HT":"71","WT":"185","AGE":"24","POS":"CB"},{"HT":"73","WT":"209","AGE":"26","POS":"S"},{"HT":"74","WT":"220","AGE":"26","POS":"LB"},{"HT":"70","WT":"188","AGE":"23","POS":"WR"},{"HT":"75","WT":"235","AGE":"23","POS":"TE"},{"HT":"72","WT":"200","AGE":"30","POS":"CB"},{"HT":"71","WT":"205","AGE":"25","POS":"S"},{"HT":"71","WT":"200","AGE":"27","POS":"S"},{"HT":"72","WT":"205","AGE":"29","POS":"RB"},{"HT":"77","WT":"315","AGE":"30","POS":"T"},{"HT":"75","WT":"210","AGE":"25","POS":"WR"},{"HT":"73","WT":"191","AGE":"27","POS":"CB"},{"HT":"70","WT":"188","AGE":"28","POS":"CB"},{"HT":"73","WT":"242","AGE":"26","POS":"LB"},{"HT":"71","WT":"190","AGE":"24","POS":"CB"},{"HT":"70","WT":"203","AGE":"28","POS":"S"},{"HT":"76","WT":"220","AGE":"25","POS":"WR"},{"HT":"73","WT":"210","AGE":"26","POS":"RB"},{"HT":"72","WT":"200","AGE":"29","POS":"WR"},{"HT":"77","WT":"249","AGE":"26","POS":"TE"},{"HT":"69","WT":"185","AGE":"24","POS":"WR"},{"HT":"80","WT":"300","AGE":"28","POS":"DE"},{"HT":"77","WT":"235","AGE":"33","POS":"QB"}]);
 
         //set the input
         component.input = input;
 
         component.selectedLabels = ['HT','AGE'];
         component.selectedRanges[0] = [70,74];
+
+
+
+
 
 
       </script>

diff --git a/index.html b/index.html
@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="../webcomponentsjs/webcomponents.js"></script>
     <link rel="import" href="../polymer/polymer.html">
-    <link rel="import" href="../core-component-page/core-component-page.html">
+    <link rel="import" href="../iron-component-page/iron-component-page.html">
   </head>
   <body unresolved>
-    <core-component-page></core-component-page>
+    <iron-component-page></iron-component-page>
   </body>
 </html>
diff --git a/lens-data-crossfilter-style.html b/lens-data-crossfilter-style.html
@@ -0,0 +1,94 @@
+<style is="custom-style">
+
+
+:host {
+  display: inline-block;
+  color: black;
+  width: 300px;
+  /*height: 300px;*/
+}
+
+.selector {
+  min-height: 10px;
+  display: inline-block;
+  max-height: 123px;
+  overflow-y: scroll; 
+}
+
+.selector .col {
+  padding: 1px;
+  border: 1px solid #EEE;
+}
+.selector .core-selected {
+  background-color: #ccc;
+
+}
+.label {
+  display: block;
+  color: #2fa3af;
+}
+
+input.col-name {
+  width: 8em !important;
+}
+
+
+
+.chart {
+  display: inline-block;
+  height: 151px;
+  margin-bottom: 20px;
+}
+
+.reset {
+  padding-left: 1em;
+  font-size: smaller;
+  color: #ccc;
+}
+
+.background.bar {
+  fill: #ccc;
+}
+
+.foreground.bar {
+  fill: steelblue;
+}
+
+.axis path, .axis line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+
+.axis text {
+  font: 10px sans-serif;
+}
+
+.brush rect.extent {
+  fill: steelblue;
+  fill-opacity: .125;
+}
+
+.brush .resize path {
+  fill: #eee;
+  stroke: #666;
+}
+
+.noselect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+
+aside {
+  position: absolute;
+  left: 740px;
+  font-size: smaller;
+  width: 220px;
+}
+
+</style>