tweeks to hierarchy column renderering

abc91199 · Feb 6, 2015 · 6411c3d · 6411c3d
1 parent 977fd0e
commit 6411c3d
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 39 deletions.
diff --git a/behaviors/fin-hypergrid-behavior-q.html b/behaviors/fin-hypergrid-behavior-q.html
@@ -125,6 +125,9 @@
         //<br>TODO: refactor: don't store this value in an local member, store it in the message ONLY.
         //<br>TODO: refactor: num should be dynamic
         setScrollPositionY: function(y) {
+            if (this.scrollPositionY === y) {
+                return;
+            };
             this.scrollPositionY = y;
             if (!this.isConnected()) {
                 return;

diff --git a/behaviors/fin-hypergrid-behavior-qtree.html b/behaviors/fin-hypergrid-behavior-qtree.html
@@ -42,6 +42,15 @@
         d: 'simpleCellRenderer'
     };
 
+    var typeFormatMap = {
+        J: function(v) { return v; },
+        j: function(v) { return v; },
+        s: function(v) { return v; },
+        t: function(v) { return v; },
+        f: function(v) { return v.toFixed(4); },
+        d: function(v) { return v; }
+    };
+
     //sort states are also the visual queues in the column headers
     //* '' no sort
     //* ^ sort ascending
@@ -63,6 +72,7 @@
     };
 
     Polymer({ /* jslint ignore:line */
+
         ready: function() {
             this.block = {
                 N: 0,
@@ -71,7 +81,10 @@
                 S: {
                     cols: [],
                     rows: []
-                }
+                },
+                Z_:[{
+                    h_:['']
+                }]
             };
             this.readyInit();
             this.sorted = {};
@@ -85,7 +98,16 @@
         //override this function on your GridBehavior to have custom cell renderering
         //<br>see [QGridBehavior.createCellProvider()](QGridBehavior.html) for an example
         createCellProvider: function() {
+            var self = this;
             var provider = document.createElement('fin-hypergrid-cell-provider');
+            provider.getCell = function(config) {
+                var cell = provider.cellCache.simpleCellRenderer;
+                var colId = self.block.H[config.x];
+                var type = self.block.Q[colId];
+                var formatter = typeFormatMap[type] || function(v) { return v; };
+                config.value = formatter(config.value);
+                return cell;
+            };
             provider.getFixedColumnCell = function(config) {
             var cell = provider.cellCache.treeCellRenderer;
                 cell.config = config;
@@ -96,31 +118,36 @@
                 label.config = config;
                 if (config.y === 1)
                     {
-                        config.font = config.properties.font;
+                        //config.font = config.properties.font;
                         config.fgColor = config.fgSelColor = config.properties.color;
                         config.bgColor = config.bgSelColor = config.properties.backgroundColor2;
+                        var colId = self.block.H[config.x];
+                        var type = self.block.Q[colId];
+                        var formatter = typeFormatMap[type] || function(v) { return v; };
+                        config.value = formatter(config.value[0]);
                     }
+                config.value = config.value || '';
                 return label;
             };
             var topLeftPainter = {
                 paint: function(gc, x, y, width, height) {
                     //we know we are 1/2 height x 2 rows
                     //so offset height
                     var val = this.config.value;
-                    gc.font = this.config.properties.font;
+                    gc.font = this.config.font;
                     gc.fillStyle = this.config.properties['topLeftColor'];
                     gc.textAlign = 'left';
                     gc.textBaseline = 'middle';
 
                     //approxiamte line height is a 'W'
                     var size = gc.measureText('W');
-                    var textHeight = size.width;
-                    var hoffset = Math.ceil(textHeight / 2);
+                    var textHeight = size.width * 1.4;
+                    var hoffset = Math.ceil(textHeight / 1.8);
 
                     if (val) {
                         for (var i = 0; i < val.length; i++)
                         {
-                            gc.fillText(val[i], 5, hoffset + (i*textHeight));
+                            gc.fillText(val[i], 6, hoffset + (i*textHeight));
                         }
                     }
                     gc.stroke();
@@ -166,7 +193,12 @@
 
         getTopLeftValue: function(/* x, y */) {
             var sortIndicator = this.getSortIndicator('h_');
-            var clone = this.block.G.slice(0);
+            // var clone = this.block.G.slice(0);
+            // if (clone.length === 0) {
+            //     return clone;
+            // }
+            var hValue = this.block.Z_[0].h_[0];
+            var clone = ['Hierarchy', hValue];
             clone[0] = clone[0] + ' ' + sortIndicator;
             return clone;
         },
@@ -175,18 +207,14 @@
         //<br>take note of the usage of the scrollPositionY value in translating our in-memory data page
         getValue: function(x, y) {
             var col = this.getColumnId(x);
-            //x = this.translateColumnIndex(x);
-            // var override = this.values['p_' + (x + 1) + '_' + y];
-            // if (override) {
-            //     return override;
-            // }
-
             var normalized = Math.floor(y - this.scrollPositionY);
             if (this.block) {
-                return this.block.Z[1][col][normalized];
-            } else {
-                return '';
+                var val = this.block.Z[1][col][normalized];
+                if (val) {
+                    return val;
+                }
             }
+            return '';
         },
 
         //empty out our page of local data, this function is used when we lose connectivity
@@ -210,6 +238,9 @@
         //<br>TODO: refactor: don't store this value in an local member, store it in the message ONLY.
         //<br>TODO: refactor: num should be dynamic
         setScrollPositionY: function(y) {
+            if (this.scrollPositionY === y) {
+                return;
+            }
             this.scrollPositionY = y;
             if (!this.isConnected()) {
                 return;
@@ -265,7 +296,7 @@
             var blob = this.block.Z_[1];
             var transY = Math.max(0, y - this.scrollPositionY);
             var data = blob.h_[transY];
-            var indent = blob.l_[transY] * indentPixels;
+            var indent = 5 + (blob.l_[transY] - 1) * indentPixels;
             var icon = '';
             if (!blob.e_[transY]) {
                 icon = blob.o_[transY] ? '[--] ' : '[+] ';
@@ -389,6 +420,7 @@
                 }
                 console.log('connecting...');
                 this.ws.onopen = function() {
+                    self.setFixedColumnWidth(0, 160);
                     var startY = this.scrollPositionY || 0;
                     var stopY = startY + 60;
                     self.ws.send(JSON.stringify({

diff --git a/demo.html b/demo.html
@@ -207,7 +207,7 @@ <h3>To point this example to your data</h3>
 
         <div vertical layout>
           <div class="description">
-            <h3>fin-hypergrid-behavior-qtree</h3> This element is a custom Polymer web component that demonstrates a more complex interface to Q/KDB+ by kx systems.  In order for this to work you need to run the provided <a href="https://github.com/openfin/fin-hypergrid/blob/master/q/d.q">d.q script</a> found in the q directory of this project.  This example shows the powerful dynamic analytic capabilities of an external data engine.  This example Q script was based on <a href="http://archive.vector.org.uk/art10500340">code and a paper</a> written by <a href="http://http://www.nsl.com/">Stevan Apter.</a>
+            <h3>fin-hypergrid-behavior-qtree</h3> This element is a custom Polymer web component that demonstrates a more complex interface to Q/KDB+ by kx systems.  In order for this to work you need to run the provided <a href="https://github.com/openfin/fin-hypergrid/blob/master/q/u.q">u.q script</a> found in the q directory of this project, u.q will load in <a href="https://github.com/openfin/fin-hypergrid/blob/master/q/t.q">t.q</a> and <a href="https://github.com/openfin/fin-hypergrid/blob/master/q/d.q">d.q</a>, so they are required as well.  This example shows the powerful dynamic analytic capabilities of an external data engine.  This example Q script was based on <a href="http://archive.vector.org.uk/art10500340">code and a paper</a> written by <a href="http://http://www.nsl.com/">Stevan Apter.</a>
           </div>
           <br>
           <core-splitter direction="up"></core-splitter>

diff --git a/fin-hypergrid-renderer.html b/fin-hypergrid-renderer.html
@@ -44,7 +44,7 @@
         theme.foregroundSelColor =  'rgb(25, 25, 25)';
         theme.backgroundSelColor =  'rgb(183, 219, 255)';
 
-        theme.topLeftFont = '13px Tahoma, Geneva, sans-serif';
+        theme.topLeftFont = '14px Tahoma, Geneva, sans-serif';
         theme.topLeftColor = 'rgb(25, 25, 25)';
         theme.topLeftBackgroundColor = 'rgb(223, 227, 232)';
         theme.topLeftFGSelColor =  'rgb(255, 220, 97)';

diff --git a/fin-hypergrid.min.html b/fin-hypergrid.min.html
diff --git a/q/d.q b/q/d.q
@@ -25,3 +25,4 @@ T:([tradeId:til n]
 
 G:`sector`trader`strategy
 A[`price]:(avg;`price)
+A[`tradeId]:(.tt.nul;`tradeId)
diff --git a/q/t.q b/q/t.q
@@ -8,13 +8,13 @@
 cons:{[t;g;p;a;s;h]cons_[csub[t]g,h;g;p;a;s]h}
 
 cons_:{[t;g;p;a;s;h]
- d:dat[t;g;p;rollups[t;g]a]h;
+ d:dat[t;g;p;rollups[t;g]a]h,`s_;
  d:1!(0!d)tsort[d]s;
- z:get d;z_:ctl[d;g]p;
- (z;z_)}
+ z:get d;z_:ctl[z;d;g]p;
+ (delete s_ from z;z_)}
 
 / column subset
-csub:{[t;f]?[t;();0b;f!f]}
+csub:{[t;f]![?[t;();0b;f!f];();0b;(1#`s_)!1#1]}
 
 / block of rows
 rows:{[r;v]take[v]. r`start`end}
@@ -29,9 +29,12 @@ sdat:{[t;g;a;p]root[t;g;a]block[t;g;a]/p}
 pdat:{[t;g;a;p]root[t;g;a],raze block[t;g;a;()]peach p}
 
 / control table
-ctl:{[t;g;p]
- c:([]n_:key[t]`n_;l_:level t;e_:isleaf[t]g;o_:isopen[t]p);
- update p_:.tt.parent n_,h_:e_{$[x;`;last y]}'n_ from c}
+ctl:{[z;t;g;p]
+ c:([]s_:z`s_;n_:key[t]`n_;l_:level t;e_:isleaf[t]g;o_:isopen[t]p);
+ update p_:.tt.parent n_,h_:.tt.hierarchy'[e_;n_;s_]from c}
+
+/ construct h_
+hierarchy:{`$string[$[x;`;last y]],"[",string[z],"]"}
 
 / predicates
 isopen:{[t;p](0!p)[`v](get each key[p]`n)?key[t]`n_}
@@ -98,17 +101,17 @@ msort:{[t;c;o;i]i{x y z x}/[til count i;o;flip[t i]c]}
 / mesh nest of paths
 pmesh:{i:1+x?-1_first y;(i#x),y,i _ x}
 
-/ first if 1=count else null (for syms, non-summable nums)
+/ first if 1=count else null
 nul:{first$[1=count distinct x,();x;0#x]}
 
-/ count
-cnt:{`$"N=[",string[count x],"]"}
+/ first if 1=count else (first
+fpo:{`$string[first x],$[1=count distinct x;"";"+"]}
 
 / type -> rollup
-A:" bgxhijefcspmdznuvt"!(cnt;all;cnt;cnt;sum;sum;sum;sum;sum;nul;cnt;max;max;max;max;max;max;max;max)
+A:" bgxhijefcspmdznuvt"!(null;any;null;null;sum;sum;sum;sum;sum;nul;fpo;max;max;max;max;max;max;max;max)
 
 / default rollups
-rollups:{[t;g;a]@[@[a;k;:;A[lower qtype[t]k],'k:cols[t]except g,key a];g;:;nul,'g]}
+rollups:{[t;g;a]@[@[a;k;:;A[lower qtype[t]k],'k:cols[t]except g,key a];`s_,g;:;enlist[(sum;`s_)],nul,'g]}
 
 / cast <- type
 qtype:{exec c!t from meta x}
@@ -117,13 +120,15 @@ qtype:{exec c!t from meta x}
 
 // websocket communications
 
+WS:0Ni
+
 $[.z.K<3.3;
-  [.z.pc:{[w]if[w=WS;WS::0]};
-   .z.po:{[w]WS::.z.w;.js.set()!()}];
-  [.z.wc:{[w]if[w=WS;WS::0]};
+  [.z.pc:{[w]if[w=WS;WS::0Ni]};
+   .z.po:{WS::.z.w;.js.set()!()}];
+  [.z.wc:{[w]if[w=WS;WS::0Ni]};
    .z.wo:{WS::.z.w;.js.set()!()}]];
 
-.z.ws:{.js.snd .js.exe .js.sym .j.k x}
+.z.ws:{t:.z.z;.js.snd .js.exe .js.sym a:.j.k x;.js.log[t]a}
 
 / entry points
 
@@ -135,13 +140,15 @@ $[.z.K<3.3;
 
 / utilities
 
+.js.log:{0N!(.js.elt x;y);}
 .js.snd:{neg[WS].j.j x}
+.js.elt:{`time$"z"$.z.z-x}
 .js.sym:{$[(t:abs type x)in 0 99h;.z.s each x;10=t;`$x;x]}
 .js.exe:{.js[x`fn]x}
-.js.upd:{.js.snd .js.set()!()}
+.js.upd:{if[not null WS;t:.z.z;.js.snd .js.set()!();.js.log[t]`upd]}
 .js.set:{`Z`Z_ set'.tt.cons[T;G;P;A;S]H;.js.ret x}
 .js.sub:{[z]flip each(1#z;.tt.rows[R]1_z)}
-.js.obj:{`Z`Z_`G`G_`H`H_`Q`S`R`N!(.js.sub Z;.js.sub Z_;G;where["S"=q]except G;H;cols[T]except H;q:.tt.qtype T;`cols`sorts!(key S;get S);R;count Z)}
+.js.obj:{`Z`Z_`G`G_`H`H_`Q`S`R`N!(.js.sub Z;.js.sub Z_;G;where["S"=q]except G;H;cols[T]except G,H;q:.tt.qtype T;`cols`sorts!(key S;get S);R;count Z)}
 .js.ret:{x,.js.obj[]}
 
 // globals
@@ -150,7 +157,7 @@ $[.z.K<3.3;
 G:0#`
 
 / visible order
-H::cols[T]except G,keys T
+H::cols[T]except G
 
 / rollups
 A:()!()

diff --git a/q/u.q b/q/u.q
@@ -0,0 +1,17 @@
+\l d.q
+\t 1000
+
+\d .t
+
+add:{.z.z+x*1%86400}
+S:()
+T:0#0Nz
+A:{[t;s]@[`.t;`T`S;{(x#y),(enlist z),x _ y}[1+T bin t+1%86400];(t;s)];}
+.z.ts:{while[not .z.z<first .t.T,.z.z+40000;.t.E:first .t.S;@[`.t;`T`S;1 _];.t.z::.z.z;.t.Z::.z.Z;value .t.E]}
+
+\d .
+
+upd:{update price:price+-.5+count[T]?1.,quantity:quantity+-5+count[T]?10 from`T;.js.upd[];.t.A[.t.add 5](.z.s;::);}
+upd[]
+
+1
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,3 +25,4 @@ T:([tradeId:til n]

		G:`sector`trader`strategy
		A[`price]:(avg;`price)
		A[`tradeId]:(.tt.nul;`tradeId)