hierarchy column sorting

abc91199 · Feb 5, 2015 · d49ffb8 · d49ffb8
1 parent 469f3c8
commit d49ffb8
Show file tree

Hide file tree

Showing 11 changed files with 246 additions and 124 deletions.
diff --git a/behaviors/fin-hypergrid-behavior-default.html b/behaviors/fin-hypergrid-behavior-default.html
@@ -132,6 +132,10 @@
             return provider;
         },
 
+        getTopLeftValue: function(/* x, y */) {
+            return '';
+        },
+
         //provide the data at the x,y coordinate in the grid
         //<br>this function should be overridden by you
         getValue: function(x, y) {
@@ -321,6 +325,11 @@
             return 'center';
         },
 
+        //answers the default alignment for the topleft area of the grid
+        //<br>TODO:provide uniform mechanism for the fixed areas like this
+        getTopLeftAlignment: function( /* x, y */ ) {
+            return 'center';
+        },
         //answers the default col alignment for the fixed column data area of the grid
         //<br>TODO:provide uniform mechanism for the fixed areas like this
         getFixedColumnAlignment: function( /* x */ ) {
@@ -333,6 +342,12 @@
         getFixedRowAlignment: function( /* x, y */ ) {
             return this.constants.fixedRowAlign;
         },
+        //this is called by OFGrid when top left area is clicked
+        //<br>see DefaultGridBehavior.delegateClick() below
+        //<br>this is where we can hook in external data manipulation
+        topLeftClicked: function(grid, mouse) {
+            console.log('top Left clicked: ' + mouse.gridCell.x, mouse);
+        },
         //this is called by OFGrid when a fixed row cell is clicked
         //<br>see DefaultGridBehavior.delegateClick() below
         //<br>this is where we can hook in external data manipulation such as linking,

diff --git a/behaviors/fin-hypergrid-behavior-qtree.html b/behaviors/fin-hypergrid-behavior-qtree.html
@@ -66,7 +66,12 @@
         ready: function() {
             this.block = {
                 N: 0,
-                H: []
+                H: [],
+                G: [],
+                S: {
+                    cols: [],
+                    rows: []
+                }
             };
             this.readyInit();
             this.sorted = {};
@@ -91,12 +96,43 @@
                 label.config = config;
                 if (config.y === 1)
                     {
-                        //make it look like a normal main area cell
                         config.font = config.properties.font;
                         config.fgColor = config.fgSelColor = config.properties.color;
-                        config.bgColor = config.bgSelColor = config.properties.backgroundColor;
-                        //config.fgSelColor = config.properties.foregroundSelColor;
-                        //config.bgSelColor = config.properties.backgroundSelColor;
+                        config.bgColor = config.bgSelColor = config.properties.backgroundColor2;
+                    }
+                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.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);
+
+                    if (val) {
+                        for (var i = 0; i < val.length; i++)
+                        {
+                            gc.fillText(val[i], 5, hoffset + (i*textHeight));
+                        }
+                    }
+                    gc.stroke();
+                }
+            }
+            provider.getTopLeftCell = function(config) {
+            var label = provider.cellCache.emptyCellRenderer;
+                label.config = config;
+                if (config.y === 0)
+                    {
+                        topLeftPainter.config = config;
+                        return topLeftPainter;
                     }
                 return label;
             };
@@ -128,6 +164,13 @@
             this.scrolled = false;
         },
 
+        getTopLeftValue: function(/* x, y */) {
+            var sortIndicator = this.getSortIndicator('h_');
+            var clone = this.block.G.slice(0);
+            clone[0] = clone[0] + ' ' + sortIndicator;
+            return clone;
+        },
+
         //for now we use the hacky override implementation to save data, in the future we'll have a more elaborate protocol with Q to do real validation and setting of data.
         //<br>take note of the usage of the scrollPositionY value in translating our in-memory data page
         getValue: function(x, y) {
@@ -244,9 +287,16 @@
             this.toggleSort(this.scrollPositionX + mouse.gridCell.x - this.getFixedColumnCount());
         },
 
+        //hierarchy area clicked on lets sort there
+        topLeftClicked: function(grid, mouse) {
+            this._toggleSort('h_');
+        },
         //first ask q if this is a sortable instance, then send a message to Q to sort our data set
         toggleSort: function(columnIndex) {
             var colId = this.getColumnId(columnIndex);
+            this._toggleSort(colId);
+        },
+        _toggleSort: function(colId) {
             if (!this.getCanSort()) {
                 return;
             }
@@ -282,27 +332,8 @@
                 sorts: sortBlob.sorts
             };
 
-            msg.sorts[colId] = 'a';
             this.ws.send(JSON.stringify(msg));
 
-            // columnIndex++;
-            // var current = this.sorted[columnIndex];
-            // var stateCount = this.sortStates.length;
-            // this.sorted = {}; //clear out other sorted for now, well add multicolumn sort later
-            // this.sorted[columnIndex] = (current + 1) % stateCount;
-            // var state = this.sortStates[this.sorted[columnIndex]];
-            // var message = {
-            //     cmd: 'sortTable',
-            //     data: {
-            //         table: 'trade',
-            //         sort: current === (stateCount - 1) ? '' : this.block.headers[columnIndex][0],
-            //         asc: state.indexOf('^') > 0,
-            //         abs: state.indexOf('|') > 0,
-            //         start: this.scrollPositionY,
-            //         num: 60
-            //     }
-            // };
-            // this.ws.send(JSON.stringify(message));
         },
         getFixedRowAlignment: function(x, y) {
             if (y > 0) {

diff --git a/demo.html b/demo.html
@@ -8,7 +8,7 @@
                 results = regex.exec(location.search);
             return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
         }
-        var theme = getParameterByName("theme") || "excel";
+        var theme = getParameterByName("theme") || "seven-seas";
         var fileref = document.createElement("link");
         fileref.setAttribute("rel", "stylesheet");
         fileref.setAttribute("type", "text/css");
@@ -119,7 +119,7 @@
             </paper-dropdown>
         </paper-menu-button>
 
-        <paper-tabs selected="0" flex>
+        <paper-tabs selected="4" flex>
             <paper-tab>In Memory</paper-tab>
             <paper-tab>Default</paper-tab>
             <paper-tab>JSON</paper-tab>
@@ -130,7 +130,7 @@
 
     </core-toolbar>
 
-  <core-pages selected="0">
+  <core-pages selected="4">
 
         <div vertical layout>
           <div class="description">
@@ -207,8 +207,9 @@ <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/t.q">t.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/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>
           </div>
+          <br>
           <core-splitter direction="up"></core-splitter>
           <div flex class="rel">
             <fin-hypergrid class="abs" id="qtree-example">

diff --git a/features/fin-hypergrid-feature-column-sorting.html b/features/fin-hypergrid-feature-column-sorting.html
@@ -20,9 +20,14 @@
 
         handleTap: function(grid, event) {
             var gridCell = event.gridCell;
-            if (gridCell.y < grid.getFixedRowCount()) {
+            var inFixedRowArea = gridCell.y < grid.getFixedRowCount();
+            var inFixedColumnArea = gridCell.x < grid.getFixedColumnCount();
+
+            if (inFixedRowArea && inFixedColumnArea) {
+                grid.topLeftClicked(event);
+            } else if (inFixedRowArea) {
                 grid.fixedRowClicked(event);
-            } else if (gridCell.x < grid.getFixedColumnCount()) {
+            } else if (inFixedColumnArea) {
                 grid.fixedColumnClicked(event);
             }
         },

diff --git a/fin-hypergrid-cell-provider.html b/fin-hypergrid-cell-provider.html
@@ -72,6 +72,13 @@
             return cell;
         },
 
+        //replace this function in on your instance of cellProvider
+        getTopLeftCell: function(config) {
+            var cell = this.cellCache.emptyCellRenderer;
+            cell.config = config;
+            return cell;
+        },
+
         //return the cellRenderer instance for renderering fixed col cells
         getFixedColumnCell: function(config) {
             var cell = this.cellCache.simpleCellRenderer;
@@ -231,6 +238,10 @@
 
         },
 
+        //do nothing
+        emptyCellRenderer: function(gc, x, y, width, height) {
+        },
+
         //default cellRenderers are initialized here.  you can augment the visible on your cellProvider instance: field ```myCellProviderInstance.cellCache.myCellRendererName = myCellRenderer```
         initializeCells: function() {
             this.cellCache.simpleCellRenderer = {
@@ -248,6 +259,9 @@
             this.cellCache.treeCellRenderer = {
                 paint: this.treeCellRenderer
             };
+            this.cellCache.emptyCellRenderer = {
+                paint: this.emptyCellRenderer
+            };
         },
 
     });