fin-hypergrid
Advanced tools
#*** NOTICE - PLEASE READ ***
Hypergrid is in the midst of a major refactoring. This is scheduled to be merged into Master Branch by no later than the end of April.
If you are evaluating Hypergrid, please use the big-refactor branch. We anticipate this branch to have a new version [v0.2.x] available by March 18th.
With these changes, we will be updating the documentation over the coming weeks. Thank you for your patience.
#Hypergrid by OpenFin
#Hypergrid
The Hypergrid control is a [Google polymer](https://www.polymer-project.org/) [web component](http://webcomponents.org/presentations/), canvas based open source general purpose grid. The purpose of this project is to address the Finance/Big Data community's desire for a high performance, unlimited row data-grid. At the moment, it is in a beta stage and still has ongoing work to be completed. These include bug-fixes/features/automated testing/etc. Please try it out and let us know what you think.
See the jsdocs page for api documentation.
Watch the Pivotal Labs presentation recorded on Jan 13th 2015.
Use the Hypergrid Openfin Installer to install an openfin startup link and see the demo running on your desktop. You can also see a few demos..
The design makes no assumptions about the data you wish to view which allows for external data sources as well as external manipulation and analytics. Manipulations such as sorting, aggregation, and grouping can be achieved using external best of breed high-performant real time tools designed for such purposes. Several grid behavior examples are provided including a Kx Q Kdb+ example.
If you just want to see Hypergrid working you can run the Hypergrid Openfin Installer or just go to the demo.
The following instructions and project structure is based on the google polymer team best practices for developement of polymer/web-components applications and elements. It is further documented here.
The only file that is necessary to deploy the hypergrid is the webcomponent html file, fin-hypergrid.min.html which is a vulcanized conglomeration of all code and dependencies required by fin-hypergrid. This file must be imported according to the webcomponents specification. If you are targeting non webcomponent compliant browsers you will also need the webcomponents.js polyfill found within the polymer project. An example of this is found here. The webcomponents.js file is not necessary if your target platform is a webcomponents compatible browser. As chrome is currently the only one, we suggest you include this polyfil.
git clone https://github.com/openfin/fin-hypergrid.gitcd fin-hypergrid(sudo) npm installbower installgrunt serve, after which your browser should automatically openBy far the most common behavior to use will be the JSON behavior. If you're not sure which one to start with, select this one.
To populate the json behavior with data simply provide hypergrid with an array of same shaped objects.
var myJSONBehavior = document.querySelector('#myHypergrid').behavior;
myJSONBehavior.setData([
{
first_name:'moe',
last_name: 'stooge',
birth_date: '1920-01-01'
},
{
first_name:'larry',
last_name: 'stooge',
birth_date: '1922-05-05'
},
{
first_name:'curly',
last_name: 'stooge',
birth_date: '1924-03-07'
},
]);
There are several ways to specify fields and headers with hypergrid.
myJSONBehavior.setData(myData);
myJSONBehavior.setHeaders(['header one','header two','header three','header four']);
myJSONBehavior.setFields(['one','two','three','four']);
myJSONBehavior.setData(myData);
myJSONBehavior.setColumns([
{
title: 'First Name',
field: 'first_name',
},
{
title: 'Last Name',
field: 'last_name',
},
{
title: 'Birth Date',
field: 'birth_date',
}
]);
adding totals rows just under the column headers with Hypergrid is extremely simple. Call setTopTotals function on the JSON behavior and pass in an array of arrays of the content you want displayed.
var totals =
[['','1st',251,'XXXX-XX-XX','1 of 50','1 of 50','T/F','$$$$$','£££££']];
myJSONBehavior.setTopTotals(totals);
//update the totals and see the change
totals[0][2] = 300;
myJSONBehavior.changed();
Hypergrid allows you to snapshot the user configured state and then reapply it later(memento pattern) this includes.
to do this
var state = myGrid.getState();myGrid.setState(state); with the previous state object to return
the above table will produce the below state object
{
"columnIndexes":[8,7,1,3,2,4,6], //column order
"fixedColumnIndexes":[0], //fixed columns order
"hiddenColumns":[5,0], //hidden column indexes
"columnWidths":[66,50,51,81,73,96,78,74,60], //
"fixedColumnWidths":[53], //
"rowHeights":{"1":46,"3":51,"5":51,"7":50}, //
"fixedRowHeights":{}, //
"sorted":[0,0,0,0,0,0,0,1,0] //1 ascending, 2 descending
}
state objects can be created programmatically or by hand and applied. This is how you may pre configure your grid properties.
It's really easy to see your data updates manifest in the hypergrid with the JSON behavior. You don't need to call setData again.
var myData = [
{
first_name:'moe',
last_name: 'stooge',
birth_date: '1920-01-01'
},
{
first_name:'larry',
last_name: 'stooge',
birth_date: '1922-05-05'
},
{
first_name:'curly',
last_name: 'stooge',
birth_date: '1924-03-07'
},
];
var myJSONBehavior = document.querySelector('#myHypergrid').behavior;
myJSONBehavior.setData(myData);
//update my data
myData[0].first_name = 'Groucho';
myData[0].last_name = 'Marx';
//tell the behavior it's underlying data has changed
myJSONBehavior.changed();
//call this insted of 'changed()' if you have sorts that you want reapplied
//myJSONBehavior.dataModified();
Hypergrid supports clickable link cells, to achieve this you need to...
jsonGrid.addFinEventListener('fin-cell-click', function(e){
var cell = e.detail.cell;
if (cell.x !== 0) {
return;
}
alert('fin-cell-click at (' + cell.x + ', ' + cell.y + ')');
});
jsonModel.getCursorAt = function(x,y) {
if (x === 0) {
return 'pointer'
} else {
return null;
}
};
cellProvider.getCell = function(config) {
var renderer = cellProvider.cellCache.simpleCellRenderer;
config.halign = 'left';
var x = config.x;
if (x === 0) {
renderer = cellProvider.cellCache.linkCellRenderer;
} else if (x === 2) {
...
...
...
see the 'Last Name' column of the JSON tab in the main example;
Hypergrid supports arbitrary numbers of fixed columns. Simply call the setFixedColumnCount() function on YOUR behavior object. An example of this can be found on the JSON tab.
var jsonGrid = document.querySelector('#json-example');
var jsonModel = jsonGrid.behavior;
jsonModel.setFixedColumnCount(1);
Cell renderers are easy to create and the default method for generating highly customized dynamic cell content. They live in an object called a cellProvider which is provided by YOUR behavior object.
There are four areas that have distinct cell renderering override capabilities.
These areas coorespond to four functions on a CellProvider found in YOUR behavior object.
getCell: function(config) {
var cell = this.cellCache.simpleCellRenderer;
cell.config = config;
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;
cell.config = config;
return cell;
},
//return the cellRenderer instance for renderering fixed row cells
getFixedRowCell: function(config) {
var cell = this.cellCache.simpleCellRenderer;
cell.config = config;
return cell;
},
Creating a cell renderer and using it is very easy, ie:
var jsonModel = jsonGrid.behavior;
//get the cell cellProvider for altering cell renderers
var cellProvider = jsonModel.getCellProvider();
//replace the main area's getCell functon
cellProvider.getCell = function(config) {
var renderer = cellProvider.cellCache.simpleCellRenderer;
config.halign = 'left';
var x = config.x;
//setting properties for an entire row, just use modulo operator
if (y % 3 === 0) {
//change the background color to green on every 3rd row
config.bgColor = '#00ff00';
} else if ((y - 1) % 3 === 0) {
//change the background color to blue and foreground to white just below every 3rd row
config.bgColor = '#0000ff';
config.fgColor = '#ffffff';
}
if (x === 0) {
renderer = cellProvider.cellCache.linkCellRenderer;
} else if (x === 2) {
config.halign = 'center';
} else if (x === 3) {
config.halign = 'center';
} else if (x === 6) {
config.halign = 'center';
} else if (x === 7) {
var travel = 60 + Math.round(config.value*150/100000);
var bcolor = travel.toString(16);
config.halign = 'right';
config.bgColor = '#00' + bcolor + '00';
config.fgColor = '#FFFFFF';
config.value = accounting.formatMoney(config.value);
} else if (x === 8) {
var travel = 105 + Math.round(config.value*150/1000);
var bcolor = travel.toString(16);
config.halign = 'right';
config.bgColor = '#' + bcolor+ '0000';
config.fgColor = '#FFFFFF';
config.value = accounting.formatMoney(config.value, "€", 2, ".", ",");
}
renderer.config = config;
return renderer;
};
##The cell renderer config object
The config object bound to 'this' on a custom cell renderer has a lot of data that can be used or overridden.
| property | values/examles | description |
|---|---|---|
| bgColor | 'white' | the background color for this cell, leave blank to have the default color |
| bgSelColor | "rgb(244, 214, 79)" | the background color for this cell if it is selected |
| columnId | "myColumnName" | the column header label/id |
| fgColor | "rgb(0, 0, 0)" | the foreground color of the current cell |
| fgSelColor | "rgb(0, 0, 0)" | the foreground color of the current cell if it is selected |
| font | "12px Tahoma, Geneva, sans-serif" | the font for the current cell |
| getTextHeight(font) | this.config.getTextHeight(this.config.font) | a function that efficiently computes the height for a font |
| getTextWidth(gc, string) | this.config.getTextWidth(gc, 'any string') | this function efficiently computes the width for any string |
| halign | "center" "left" "right" | the horizontal alignment for the current cell |
| hoffset | integer | left side of the cell padding for the current cell |
| isColumnHovered | true/false | is the pointer over the column of the current cell |
| isRowHovered | true/false | is the pointer over the the row of the current cell |
| isSelected | true/false | is the current cell selected |
| minWidth | 0 | do not modify, this is used by hypergrid for the auto column width feature |
| properties | Object | the hypergrid properties (for convenience) |
| row | Object | with a json object, this is the underlying row object |
| value | anything | this is the value to renderer for the current cell |
| voffset | integer | top side of the cell padding for the current cell |
| x | integer | the x model coordinate |
| y | integer | the y model coordinate |
You can autosize a column to best fit size by double clicking on the column header, or automagically always set all columns by setting the property columnAutosizing to true.
Hypergrid comes with several default cell editors you can easily select, and the ability to create your own. The javascript code for the cell editors is found here.
You can easily create your own cell editors by subclassing any of the existing cell editors and registering your cell editor with Hypergrid.
<link rel="import" href="../fin-hypergrid/html/cell-editors/fin-hypergrid-cell-editor-simple.html">
<polymer-element name="my-number-cell-editor" extends="fin-hypergrid-cell-editor-simple">
<template>
<input id="editor" type="number">
</template>
<script>
Polymer({
alias: 'numberfield',
selectAll: function() {
var lastCharPlusOne = this.getEditorValue().length;
this.input.setSelectionRange(0, lastCharPlusOne);
}
});
</script>
</polymer-element>
myHypergrid.initializeCellEditor('my-number-cell-editor');
var editorTypes = ['choice','numberfield','spinner','date','choice','numberfield','choice','textfield','numberfield'];
myBehavior.getCellEditorAt = function(x, y) {
var type = editorTypes[x];
var cellEditor = this.grid.createCellEditor(type); // previously: this.grid.cellEditors[type];
return cellEditor;
};
Many of the hypergrid default values and properties can be set through property overriding functions
addGlobalProperties and addProperties. The current list is.
| property | values/examles | description |
|---|---|---|
| font | 13px Tahoma, Geneva, sans-serif, italic, bold | the default font for main table area |
| color | rgb(25, 25, 25) | the main foreground color |
| backgroundColor | rgb(241, 241, 241) | the main background color |
| foregroundSelColor | rgb(25, 25, 25) | foreground selection Color |
| backgroundSelColor | rgb(183, 219, 255), | background selection color |
| topLeftFont | 14px Tahoma, Geneva, sans-serif | top left area font |
| topLeftColor | rgb(25, 25, 25) | top left area foreground color |
| topLeftBackgroundColor | rgb(223, 227, 232) | top left area background color |
| topLeftFGSelColor | rgb(25, 25, 25) | top left area foreground selection color |
| topLeftBGSelColor | rgb(255, 220, 97), | top left area background selection color |
| fixedColumnFont | 14px Tahoma, Geneva, sans-serif | fixed column area default font |
| fixedColumnColor | rgb(25, 25, 25) | fixed column area foreground color |
| fixedColumnBackgroundColor | rgb(223, 227, 232) | fixed column area background color |
| fixedColumnFGSelColor | rgb(25, 25, 25) | fixed column area foreground selection color |
| fixedColumnBGSelColor | rgb(255, 220, 97), | fixed column area background selection color |
| fixedRowFont | 14px Tahoma, Geneva, sans-serif | fixed row area font |
| fixedRowColor | rgb(25, 25, 25) | fixed row area foreground color |
| fixedRowBackgroundColor | rgb(223, 227, 232) | fixed row area background color |
| fixedRowFGSelColor | rgb(25, 25, 25) | fixed row area foreground selection color |
| fixedRowBGSelColor | rgb(255, 220, 97), | fixed row area background selection color |
| backgroundColor2 | rgb(201, 201, 201) | secondary background color |
| lineColor | rgb(199, 199, 199) | grid lines color |
| voffset | 0 | offset from top of all text |
| editorActivationKeys | ['esc','alt','a','b','c'] | what keys open and close the column editor |
| scrollbarHoverOver | visible/hidden | shadow class name on hover over |
| scrollbarHoverOff | visible/hidden | shadow class name on hover off |
| scrollingEnabled | true/false | enable/disable scrolling |
| fixedRowAlign | left/center/right | fixed row area text alignment |
| fixedColAlign | left/center/right | fixed column area text alignment |
| cellPadding | 5 | left and right padding around text inside the cells |
| gridLinesH | true/false | draw the horizontal grid lines |
| gridLinesV | true/false | draw the vertical grid lines |
| defaultRowHeight | 20 | the default row height in pixels |
| defaultFixedRowHeight | 20 | the default row height in pixels of the fixed row area |
| defaultColumnWidth | 100 | the default column width |
| defaultFixedColumnWidth | 100 | the default column width of the fixed column area |
| repaintIntervalRate | 15 | how often the canvas checks the repaint flag, set 0 to never check |
| repaintImmediately | false | cause painting to happen immediately within the same micro task, if true repaintIntervalRate should be set to 0 |
| useBitBlit | false/true | enable or disable double buffering |
| useHiDPI | true/false | make use of hi dpi displays (defaults to true) |
| columnAutosizing | true/false | enable column autosizing |
var lnfOverrides = {
font: '13px Tahoma, Geneva, sans-serif',
color: '#ffffff',
backgroundColor: '#505050',
foregroundSelColor: 'rgb(25, 25, 25)',
backgroundSelColor: 'rgb(183, 219, 255)',
topLeftFont: '14px Tahoma, Geneva, sans-serif',
topLeftColor: 'rgb(25, 25, 25)',
topLeftBackgroundColor: 'rgb(223, 227, 232)',
topLeftFGSelColor: 'rgb(25, 25, 25)',
topLeftBGSelColor: 'rgb(255, 220, 97)',
fixedColumnFont: '14px Tahoma, Geneva, sans-serif',
fixedColumnColor: 'rgb(25, 25, 25)',
fixedColumnBackgroundColor: 'rgb(223, 227, 232)',
fixedColumnFGSelColor: 'rgb(25, 25, 25)',
fixedColumnBGSelColor: 'rgb(255, 220, 97)',
fixedRowFont: '11px Tahoma, Geneva, sans-serif',
fixedRowColor: '#ffffff',
fixedRowBackgroundColor: '#303030',
fixedRowFGSelColor: 'rgb(25, 25, 25)',
fixedRowBGSelColor: 'rgb(255, 220, 97)',
backgroundColor2: '#303030',
lineColor: '#707070',
voffset: 0,
editorActivationKeys: ['esc', 'alt'],
scrollbarHoverOver: 'visible',
scrollbarHoverOff: 'visible',
scrollingEnabled: true,
defaultRowHeight: 20,
defaultFixedRowHeight: 20,
defaultColumnWidth: 100,
defaultFixedColumnWidth: 100,
columnAutosizing: true
};
var table = document.querySelector('#myHypergrid');
//to apply to a specific table
table.addProperties(lnfOverrides);
//to apply for all tables
//table.addGlobalProperties(lnfOverrides);
You can listen to various events that occur within the Hypergrid. Take note in order to attach listeners you must call 'addFinEventListener' on the grid. Each event has a detail object with various bits of information about the event. Please contact us if there are more events you need and we'll be happy to put them in. When the X and Y values reported by the accompanying event object are negative this means the user has clicked int the fixed areas.
| event | description |
|---|---|
| fin-before-cell-edit | this is fired just before a cell edit occurs |
| fin-after-cell-edit | this is fired just after a cell edit occurs |
| fin-selection-changed | this is fired whenever the selection changes |
| fin-scroll-x | this is fired on any scroll in the horizontal dimension |
| fin-scroll-y | this is fired on any scroll in the vertical dimension |
| fin-grid-rendered | this is fired after a repaint occurs |
| fin-click | this is fired on cell click |
| fin-double-click | this is fired on double click |
| fin-cell-enter | this is fired when the mouse enters a new cell, |
| fin-keydown | this is fired on a keydown event |
| fin-keyup | this is fired on a keyup event |
var jsonModel = document.querySelection('#json-grid');
jsonModel.addFinEventListener('fin-cell-click', function(event) {
console.log('fin-cell-click', event.detail);
});
Hypergrid has a column picker that allows you to drag and drop columns for configuring which are visible. You can also reorder the columns here.
press alt/option to open the column picker, you can press alt/option or esc to close it
There is an example integration between the Hypergrid and Microsoft Excel over the OpenFin InterApplicationBus. The example only works when running Hypergrid in the OpenFin Runtime, which is installed from the Hypergrid Openfin Installer.
Keep in mind the Excel integration is NOT a Hypergrid specific feature but is a feature that allows any OpenFin application to communicate with Excel via the InterApplicationBus.
Assumptions
Steps to Excel-Hypergrid Integration Demo
The excel-integration demo consists of an OpenFin app, and a C# XLL plugin built using the Excel-DNA infrastructure. The Excel-DNA infrastructure provides a C++ XLL plugin which exposes the Excel Object Model to C# dll's and code which can be configured using a manifest file (.dna). Here are the steps to setting up the integration demo...
Because so many folks have been asking for an example of JSON with Excel, we've provided a bare bones example that should help you out understanding how it all works. Here is the link for the installer. The example uses the same FinDesktopAddin-packed and hypergrid.xls file from the above Hypergrid Excel Integration above. The html for the example is here.
To enable excel messaging for your behavior, embed the fin-hypergrid-excel tag inside your grid tag
<fin-hypergrid>
<fin-hypergrid-behavior-default></fin-hypergrid-behavior-default>
<fin-hypergrid-excel
publish="onSelect",
subscribe="onExcelChange"
interval="500"
logging=false>
</fin-hypergrid-excel>
</fin-hypergrid>
All the attributes listed above default to the values listed above. These properties can be described as follows...
| attribute | values/examles | description |
|---|---|---|
| publish | any valid javascript identifier onSelect onJSONSelect | this is the topic used to publish the cell data messages to the InterApplicationBus . This value MUST be the same as the second argument in the Excel addin function =FinDesktopSync("hypergrid-demo","onSelect",""). |
| subscribe | any valid javascript identifier onExcelChange onJSONExcelChange | this is the topic used to subscribe to cell data messages from the InterApplicationBus . This should be left to the default of "onExcelChange" unless you want to push the cell data to other InterApplicationBus endpoints. |
| interval | integer value in milliseconds 500 1000 | millisecond interval to publish the cell data messages to the InterApplicationBus |
| logging | Boolean value true false | enable or disable logging of messages and errors to the console |
https://exceldna.codeplex.com/documentation
This Hypertree + Hypergrid example allows you to define a on the fly custom drill down hierarchy while supporting grouping, aggregations, and sorting in realtime. The current example demonstrates 20MM updates/second. The default aggregations available are sum, min, max, first, last, average, weighted average, mean, and standard deviation. Press options/alt to drag and drop define the visible columns and the drill down hierarchy.
q bigtable.q, q sorttable.q, or install and run the extremely powerfull Hypertree server found in Stevan Apters github area.
#Hypergrid example for displaying RDBMS data
This is an example usage of the hypergrid control looking at the +1MM row postrgres db example from the greenplum getting started tutorial.
For this example to work you'll need to
feel free to connect this example to any other db that any-db supports (MS SQL, MySQL, Postgres, and SQLite3). Make sure to npm install the proper any-db-***** interface and edit the config.js file.
Hypergrid utilizes a custom scrollbar component so as to not be limited to tables of 33MM pixels in width or height. In addition to the custom scrollbar, The OpenFin hypergrid utilizes row and column cell scrolling, not pixel scrolling. This has many benefits that become apparent over time.
-- done --
provide column names in cell provider row object in the config alternative column picker cell update event vetoable, before and after filter row under header autopersist layouts visual queue for nested sort
json behavior enhancements cell.config.row is the underling object of the row cell.config.columnId is the current columnId
jsonBehavior.getRow(y); //returns row object
hypergrid.getVisibleRows(); //returns indexes of visible rows hypergrid.getVisibleColumns(); //returns indexes of visible columns
fin-after-cell-edit event has newValue, oldValue in the event now fin-before-cell-edit event can veto the edit with event.preventDefault();
double click event with row object
sorting double click column selection single click
summary functions summary row at bottom
example of adding a column
line numbers with row indicator clicking selects row select cells selects the row make frozen colums appear as normal columns
save data as csv configurable tab/enter excel style cell editing
double click event
reasonable default cell editors based on datatype make example using rgb in custom cell renderers
theme coloring is broken single click cell editing
tooltips
enum filtering by checkbox
cell click events should have the unformatted cell value initialize celleditor is missing clear out drop down cell editor dummy data fixed row height different to header, click events segregated also
FAQs
Canvas-based high-performance grid
The npm package fin-hypergrid receives a total of 57 weekly downloads. As such, fin-hypergrid popularity was classified as not popular.
We found that fin-hypergrid demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.