Socket
Socket
Sign inDemoInstall

fin-hypergrid

Package Overview
Dependencies
Maintainers
2
Versions
43
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

fin-hypergrid - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

add-ons/drill-down.js
add-ons/tree-view.js

9

package.json
{
"name": "fin-hypergrid",
"version": "1.0.6",
"version": "1.0.7",
"description": "Canvas-based high-performance spreadsheet",

@@ -20,7 +20,7 @@ "repository": {

"automat": "1.2.0",
"extend-me": "2.2.2",
"filter-tree": "0.3.32",
"extend-me": "2.2.4",
"filter-tree": "0.3.33",
"finbars": "1.5.1",
"fincanvas": "1.2.1",
"hyper-analytics": "0.11.0",
"hyper-analytics": "0.11.4",
"list-dragon": "1.3.3",

@@ -52,2 +52,3 @@ "lru-cache": "2.7.0",

"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-uglify": "^1.5.1",

@@ -54,0 +55,0 @@ "gulp-util": "^3.0.7",

52

README.md

@@ -5,9 +5,9 @@ **fin-hypergrid** is an ultra-fast HTML5 grid presentation layer, achieving its speed by rendering (in a canvas tag) only the currently visible portion of your (virtual) grid, thus avoiding the latency and life-cycle issues of building, walking, and maintaining a complex DOM structure.

### Release 1.0.6 (23 June 2016)
### Current Release (1.0.7 - 18 July 2016)
This version replaces last year's [prototype version](https://github.com/openfin/fin-hypergrid/tree/polymer-prototype), which was built around Polymer. It is now completely "de-polymerized" and is being made available as:
The current version replaces last year's [prototype version](https://github.com/openfin/fin-hypergrid/tree/polymer-prototype), which was built around Polymer. It is now completely "de-polymerized" and is being made available as:
* An [npm module](https://www.npmjs.com/package/fin-hypergrid) for use with browserify.
* A single JavaScript file [fin-hypergrid.js](https://openfin.github.io/fin-hypergrid/build/fin-hypergrid.js) you can reference in a `<script>` tag.
_For a list of changes since the previous version, 1.0.3 (27 May 2016), click [here](version-history.md)._
_For a complete list of changes, see the [version history](version-history.md)._

@@ -37,3 +37,3 @@ ### Demos

* Events for all UI manipulations including mouse, keyboard, and programmatic UI changes
* Tree-view (drill-downs) presentation for pre-aggregated local data
* Tree-view (drill-downs) presentation for locally grouped, nested, or aggregated data

@@ -47,4 +47,43 @@ ##### Future development

* We are currently working on expanding the API to enable application developers to easily provide their own functionality
* Hypergrid will have no opinion on how the underlying data should be pivoted, but will remain capable of presenting pivoted data
* Hypergrid will have no opinion on how the underlying data should be pivoted, but will remain capable of presenting pivoted data
* The current filtering and analytics modules will become separate npm modules/JavaScript files that can be forked and further developed
### Integrating
[This](https://openfin.github.io/fin-hypergrid/example.js) is a basic example that embeds fin-hypergrid:
```html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<div id="fin-grid"></div>
<script src="https://openfin.github.io/fin-hypergrid/build/fin-hypergrid.js"></script>
<script>
var data = [
{ symbol: 'APPL', name: 'Apple Inc.', prevclose: 93.13 },
{ symbol: 'MSFT', name: 'Microsoft Corporation', prevclose: 51.91 },
{ symbol: 'TSLA', name: 'Tesla Motors Inc.', prevclose: 196.40 },
{ symbol: 'IBM', name: 'International Business Machines Corp', prevclose: 155.35 }
];
var grid = new fin.Hypergrid('#fin-grid', { data: data })
grid.addProperties({
showRowNumbers: false,
showFilterRow: false
});
</script>
</body>
</html>
```
Will look like:
<img src="images/README/simple.png">
### Documentation

@@ -60,3 +99,2 @@

Hypergrid global configurations can be found [here](http://openfin.github.io/fin-hypergrid/doc/module-defaults.html)
Use it for modifying various hypergrid features and property defaults
Hypergrid global configurations can be found [here](http://openfin.github.io/fin-hypergrid/doc/module-defaults.html). Use it for modifying various hypergrid features and property defaults.

19

src/behaviors/Behavior.js

@@ -135,12 +135,12 @@ /* eslint-env browser */

getVisibleColumn: function() {
this.deprecated('getVisibleColumn(x)', 'getActiveColumn(x)', '1.0.6', arguments);
return this.deprecated('getVisibleColumn(x)', 'getActiveColumn(x)', '1.0.6', arguments);
},
getVisibleColumnName: function() {
this.deprecated('getVisibleColumnName(x)', 'getActiveColumn(x).name', '1.0.6', arguments);
return this.deprecated('getVisibleColumnName(x)', 'getActiveColumn(x).name', '1.0.6', arguments);
},
getColumnId: function() {
this.deprecated('getColumnId(x)', 'getActiveColumn(x).header', '1.0.6', arguments);
return this.deprecated('getColumnId(x)', 'getActiveColumn(x).header', '1.0.6', arguments);
},
getHeader: function() {
this.deprecated('getHeader(x)', 'getActiveColumn(x).header', '1.0.6', arguments);
return this.deprecated('getHeader(x)', 'getActiveColumn(x).header', '1.0.6', arguments);
},

@@ -503,6 +503,6 @@

getCellRenderer: function(config, x, y) {
return this.getActiveColumn(x).getCellRenderer(config, y);
return this.getActiveColumn(x).getCellRenderer(config, x, y);
},
getCellProvider: function(name) {
this.deprecated('getCellProvider()', 'grid.cellRenderers', '1.0.6', arguments);
return this.deprecated('getCellProvider()', 'grid.cellRenderers', '1.0.6', arguments);
},

@@ -1311,3 +1311,3 @@ createCellProvider: function(name) {

getColumnCount: function() {
this.deprecated('getColumnCount()', 'getActiveColumnCount()', '1.0.6', arguments);
return this.deprecated('getColumnCount()', 'getActiveColumnCount()', '1.0.6', arguments);
},

@@ -1506,7 +1506,2 @@

setRelation: function(options) {
this.dataModel.setRelation(options);
this.shapeChanged();
},
getRowContextFunction: function(selectedRows) {

@@ -1513,0 +1508,0 @@ return function() {

28

src/behaviors/Column.js

@@ -97,7 +97,14 @@ /* eslint-env browser */

set header(value) {
this._header = value;
this.dataModel.getHeaders()[this.index] = value;
/**
* @summary Get or set the text of the column's header.
* @desc The _header_ is the label at the top of the column.
*
* Setting the value here updates the header in both this column object as well as the `fields` (aka, header) array in the underlying data source.
*
* The new text will appear on the next repaint.
* @type {string}
*/
set header(headerText) {
this.dataModel.getHeaders()[this.index] = this._header = headerText;
},
get header() {

@@ -128,6 +135,15 @@ return this._header;

getCellRenderer: function(config, y) {
config.x = this.index;
getCellRenderer: function(config, x, y) {
config.untranslatedX = x;
config.y = y;
config.x = this.index;
config.normalizedY = y - this.behavior.getHeaderRowCount();
// Legacy config.x and config.y were confusing because the x was translated while the y was not.
// These have been deprecated and are currently implemented as getters with deprecation warnings.
// Rather than defining these getters here on every cell render, they are defined once in Behavior.prototype.getDefaultState.
//config.x = this.index;
//config.y = y;
var declaredRendererName =

@@ -134,0 +150,0 @@ this.getCellProperties(y).renderer ||

31

src/behaviors/JSON.js

@@ -13,2 +13,3 @@ 'use strict';

* @constructor
* @extends Behavior
*/

@@ -207,30 +208,2 @@ var JSON = Local.extend('behaviors.JSON', {

getRowSelectionMatrix: function(selectedRows) {
return this.dataModel.getRowSelectionMatrix(selectedRows);
},
getColumnSelectionMatrix: function(selectedColumns) {
return this.dataModel.getColumnSelectionMatrix(selectedColumns);
},
getSelectionMatrix: function(selections) {
return this.dataModel.getSelectionMatrix(selections);
},
getRowSelection: function() {
var selectedRows = this.getSelectedRows();
return this.dataModel.getRowSelection(selectedRows);
},
getColumnSelection: function() {
var selectedColumns = this.getSelectedColumns();
return this.dataModel.getColumnSelection(selectedColumns);
},
getSelection: function() {
var selections = this.getSelections();
return this.dataModel.getSelection(selections);
},
getGroups: function() {

@@ -250,3 +223,3 @@ return this.dataModel.getGroups();

getVisibleColumns: function() {
this.deprecated('getVisibleColumns()', 'getActiveColumns()', '1.0.6', arguments);
return this.deprecated('getVisibleColumns()', 'getActiveColumns()', '1.0.6', arguments);
},

@@ -253,0 +226,0 @@

1

src/behaviors/Local.js

@@ -14,2 +14,3 @@ 'use strict';

* @constructor
* @extends Behavior
*/

@@ -16,0 +17,0 @@ var Local = Behavior.extend('Local', {

1

src/behaviors/Null.js

@@ -10,2 +10,3 @@ 'use strict';

* @constructor
* @extends Behavior
*/

@@ -12,0 +13,0 @@ var Null = Behavior.extend('Null', {

1

src/behaviors/Remote.js

@@ -14,2 +14,3 @@ 'use strict';

* @constructor
* @extends Behavior
*/

@@ -16,0 +17,0 @@ var Remote = Behavior.extend('Remote', {

2

src/cellEditors/CellEditor.js

@@ -161,3 +161,3 @@ /* eslint-env browser */

beginEditAt: function(Constructor, name) {
this.deprecated('beginEditAt(point)', 'beginEditing()', '1.0.6');
return this.deprecated('beginEditAt(point)', 'beginEditing()', '1.0.6');
},

@@ -164,0 +164,0 @@

1

src/cellEditors/Color.js

@@ -9,2 +9,3 @@ 'use strict';

* @constructor
* @extends CellEditor
*/

@@ -11,0 +12,0 @@ var Color = CellEditor.extend('Color', {

1

src/cellEditors/Combo.js

@@ -7,2 +7,3 @@ 'use strict';

* @constructor
* @extends CellEditor
*/

@@ -9,0 +10,0 @@ var Combo = CellEditor.extend('Combo', {

1

src/cellEditors/ComboBox.js

@@ -30,2 +30,3 @@ // ComboBox.js - A combo-box is a combination of a text-box and a drop-down.

* @constructor
* @extends Textfield
*/

@@ -32,0 +33,0 @@ var ComboBox = Textfield.extend('ComboBox', {

1

src/cellEditors/Date.js

@@ -27,2 +27,3 @@ /* eslint-env browser */

* @constructor
* @extends CellEditor
*/

@@ -29,0 +30,0 @@ var Date = CellEditor.extend('Date', {

1

src/cellEditors/FilterBox.js

@@ -25,2 +25,3 @@ /* eslint-env browser */

* @constructor
* @extends ComboBox
*/

@@ -27,0 +28,0 @@ var FilterBox = ComboBox.extend('FilterBox', {

1

src/cellEditors/Number.js

@@ -8,2 +8,3 @@ 'use strict';

* @constructor
* @extends Textfield
*/

@@ -10,0 +11,0 @@ var Number = Textfield.extend('Number', {

1

src/cellEditors/Slider.js

@@ -7,2 +7,3 @@ 'use strict';

* @constructor
* @extends CellEditor
*/

@@ -9,0 +10,0 @@ var Slider = CellEditor.extend('Slider', {

1

src/cellEditors/Spinner.js

@@ -7,2 +7,3 @@ 'use strict';

* @constructor
* @extends CellEditor
*/

@@ -9,0 +10,0 @@ var Spinner = CellEditor.extend('Spinner', {

1

src/cellEditors/Textfield.js

@@ -11,2 +11,3 @@ 'use strict';

* @constructor
* @extends CellEditor
*/

@@ -13,0 +14,0 @@ var Textfield = CellEditor.extend('Textfield', {

11

src/cellRenderers/Button.js

@@ -7,2 +7,3 @@ 'use strict';

* @constructor
* @extends CellRenderer
*/

@@ -14,6 +15,8 @@ var Button = CellRenderer.extend('Button', {

* @param {CanvasGraphicsContext} gc
* @param {number} config.x - the x screen coordinate of my origin
* @param {number} config.y - the y screen coordinate of my origin
* @param {number} config.bounds.width - the width I'm allowed to draw within
* @param {number} config.bounds.height - the height I'm allowed to draw within
* @param {object} config
* @param {Rectangle} config.bounds - The clipping rect of the cell to be rendered.
* @param {number} config.x - the "translated" index into the `behavior.allColumns` array
* @param {number} config.normalizedY - the vertical grid coordinate normalized to first data row
* @param {number} config.untranslatedX - the horizontal grid coordinate measured from first data column
* @param {number} config.y - the vertical grid coordinate measured from top header row
*/

@@ -20,0 +23,0 @@ paint: function(gc, config) {

12

src/cellRenderers/CellRenderer.js

@@ -16,5 +16,7 @@ 'use strict';

* @param {object} config
* @param {Rectangle} config.bounds - The bounding rect of the cell to be rendered.
* @param config.x - The cell column position
* @param config.y - The cell row position
* @param {Rectangle} config.bounds - The clipping rect of the cell to be rendered.
* @param {number} config.x - the "translated" index into the `behavior.allColumns` array
* @param {number} config.normalizedY - the vertical grid coordinate normalized to first data row
* @param {number} config.untranslatedX - the horizontal grid coordinate measured from first data column
* @param {number} config.y - the vertical grid coordinate measured from top header row
* @memberOf CellRenderer.prototype

@@ -27,4 +29,4 @@ */

* @param {CanvasGraphicsContext} gc
* @param {number} x - the x screen coordinate of my origin
* @param {number} y - the y screen coordinate of my origin
* @param {number} x - the x grid coordinate of my origin
* @param {number} y - the y grid coordinate of my origin
* @param {number} width - the width I'm allowed to draw within

@@ -31,0 +33,0 @@ * @param {number} height - the height I'm allowed to draw within

9

src/cellRenderers/ErrorCell.js

@@ -7,2 +7,3 @@ 'use strict';

* @constructor
* @extends CellRenderer
*/

@@ -29,5 +30,7 @@ var ErrorCell = CellRenderer.extend('ErrorCell', {

* @param {object} config
* @param {Rectangle} config.bounds - The bounding rect of the cell to be rendered.
* @param config.x - The cell column position
* @param config.y - The cell row position
* @param {Rectangle} config.bounds - The clipping rect of the cell to be rendered.
* @param {number} config.x - the "translated" index into the `behavior.allColumns` array
* @param {number} config.normalizedY - the vertical grid coordinate normalized to first data row
* @param {number} config.untranslatedX - the horizontal grid coordinate measured from first data column
* @param {number} config.y - the vertical grid coordinate measured from top header row
* @memberOf ErrorCell.prototype

@@ -34,0 +37,0 @@ */

9

src/cellRenderers/LastSelection.js

@@ -7,2 +7,3 @@ 'use strict';

* @constructor
* @extends CellRenderer
*/

@@ -15,5 +16,7 @@ var LastSelection = CellRenderer.extend('LastSelection', {

* @param {object} config
* @param {Rectangle} config.bounds - The bounding rect of the cell to be rendered.
* @param config.x - The cell column position
* @param config.y - The cell row position
* @param {Rectangle} config.bounds - The clipping rect of the cell to be rendered.
* @param {number} config.x - the "translated" index into the `behavior.allColumns` array
* @param {number} config.normalizedY - the vertical grid coordinate normalized to first data row
* @param {number} config.untranslatedX - the horizontal grid coordinate measured from first data column
* @param {number} config.y - the vertical grid coordinate measured from top header row
* @memberOf LastSelection.prototype

@@ -20,0 +23,0 @@ */

20

src/cellRenderers/SimpleCell.js

@@ -7,2 +7,3 @@ 'use strict';

* @constructor
* @extends CellRenderer
*/

@@ -16,5 +17,7 @@ var SimpleCell = CellRenderer.extend('SimpleCell', {

* @param {object} config
* @param {Rectangle} config.bounds - The bounding rect of the cell to be rendered.
* @param config.x - The cell column position
* @param config.y - The cell row position
* @param {Rectangle} config.bounds - The clipping rect of the cell to be rendered.
* @param {number} config.x - the "translated" index into the `behavior.allColumns` array
* @param {number} config.normalizedY - the vertical grid coordinate normalized to first data row
* @param {number} config.untranslatedX - the horizontal grid coordinate measured from first data column
* @param {number} config.y - the vertical grid coordinate measured from top header row
* @memberOf SimpleCell.prototype

@@ -156,3 +159,3 @@ */

* @param {object} config
* @param {Rectangle} config.bounds - The bounding rect of the cell to be rendered.
* @param {Rectangle} config.bounds - The clipping rect of the cell to be rendered.
* @param {*} val - The text to render in the cell.

@@ -197,2 +200,3 @@ * @memberOf SimpleCell.prototype

gc.save(); // define a clipping region for cell
gc.beginPath();
gc.rect(x, y, width, height);

@@ -214,3 +218,3 @@ gc.clip();

* @param {object} config
* @param {Rectangle} config.bounds - The bounding rect of the cell to be rendered.
* @param {Rectangle} config.bounds - The clipping rect of the cell to be rendered.
* @param {*} val - The text to render in the cell.

@@ -366,4 +370,6 @@ * @memberOf SimpleCell.prototype

function valOrFunc(vf, config) {
var result = (typeof vf)[0] === 'f' ? vf(config) : vf;
return result || result === 0 ? result : '';
var result = config.isGridColumn && config.isGridRow && (typeof vf)[0] === 'f'
? vf(config.dataRow, config.columnName)
: vf;
return result || result === 0 || result === false ? result : '';
}

@@ -370,0 +376,0 @@

9

src/cellRenderers/SliderCell.js

@@ -7,2 +7,3 @@ 'use strict';

* @constructor
* @extends CellRenderer
*/

@@ -14,5 +15,7 @@ var Slider = CellRenderer.extend('Slider', {

* @param {object} config
* @param {Rectangle} config.bounds - The bounding rect of the cell to be rendered.
* @param config.x - The cell column position
* @param config.y - The cell row position
* @param {Rectangle} config.bounds - The clipping rect of the cell to be rendered.
* @param {number} config.x - the "translated" index into the `behavior.allColumns` array
* @param {number} config.normalizedY - the vertical grid coordinate normalized to first data row
* @param {number} config.untranslatedX - the horizontal grid coordinate measured from first data column
* @param {number} config.y - the vertical grid coordinate measured from top header row
* @memberOf Slider.prototype

@@ -19,0 +22,0 @@ * @desc Emerson's paint function for a slider button. currently the user cannot interact with it

9

src/cellRenderers/SparkBar.js

@@ -7,2 +7,3 @@ 'use strict';

* @constructor
* @extends CellRenderer
*/

@@ -15,5 +16,7 @@ var SparkBar = CellRenderer.extend('SparkBar', {

* @param {object} config
* @param {Rectangle} config.bounds - The bounding rect of the cell to be rendered.
* @param config.x - The cell column position
* @param config.y - The cell row position
* @param {Rectangle} config.bounds - The clipping rect of the cell to be rendered.
* @param {number} config.x - the "translated" index into the `behavior.allColumns` array
* @param {number} config.normalizedY - the vertical grid coordinate normalized to first data row
* @param {number} config.untranslatedX - the horizontal grid coordinate measured from first data column
* @param {number} config.y - the vertical grid coordinate measured from top header row
* @memberOf SparkBar.prototype

@@ -20,0 +23,0 @@ */

9

src/cellRenderers/SparkLine.js

@@ -7,2 +7,3 @@ 'use strict';

* @constructor
* @extends CellRenderer
*/

@@ -15,5 +16,7 @@ var SparkLine = CellRenderer.extend('SparkLine', {

* @param {object} config
* @param {Rectangle} config.bounds - The bounding rect of the cell to be rendered.
* @param config.x - The cell column position
* @param config.y - The cell row position
* @param {Rectangle} config.bounds - The clipping rect of the cell to be rendered.
* @param {number} config.x - the "translated" index into the `behavior.allColumns` array
* @param {number} config.normalizedY - the vertical grid coordinate normalized to first data row
* @param {number} config.untranslatedX - the horizontal grid coordinate measured from first data column
* @param {number} config.y - the vertical grid coordinate measured from top header row
* @memberOf SparkLine.prototype

@@ -20,0 +23,0 @@ */

9

src/cellRenderers/TreeCell.js

@@ -7,2 +7,3 @@ 'use strict';

* @constructor
* @extends CellRenderer
*/

@@ -13,6 +14,6 @@ var TreeCell = CellRenderer.extend('TreeCell', {

* @desc A simple implementation of a tree cell renderer for use mainly with the qtree.
* @param {object} config
* @param {Rectangle} config.bounds - The bounding rect of the cell to be rendered.
* @param config.x - The cell column position
* @param config.y - The cell row position
* @param {number} config.x - the "translated" index into the `behavior.allColumns` array
* @param {number} config.normalizedY - the vertical grid coordinate normalized to first data row
* @param {number} config.untranslatedX - the horizontal grid coordinate measured from first data column
* @param {number} config.y - the vertical grid coordinate measured from top header row
* @memberOf TreeCell.prototype

@@ -19,0 +20,0 @@ */

1

src/dataModels/Default.js

@@ -7,2 +7,3 @@ 'use strict';

* @constructor
* @extends DataModel
*/

@@ -9,0 +10,0 @@ var Default = DataModel.extend('Default', {

1

src/dataModels/InMemory.js

@@ -7,2 +7,3 @@ 'use strict';

* @constructor
* @extends DataModel
*/

@@ -9,0 +10,0 @@ var InMemory = DataModel.extend('InMemory', {

282

src/dataModels/JSON.js

@@ -51,2 +51,3 @@ 'use strict';

* @constructor
* @extends DataModel
*/

@@ -79,7 +80,12 @@ var JSON = DataModel.extend('dataModels.JSON', {

/**
* @param {number} [columnIndex] If given, also checks that the column clicked is the tree column.
* @returns {boolean}
* @memberOf dataModels.JSON.prototype
* @returns {boolean}
*/
hasAggregates: function() {
return this.sources.aggregator.hasAggregates();
hasAggregates: function(event) {
var result = this.sources.aggregator.hasAggregates();
if (result && event) {
result = event.gridCell.x === 0;
}
return result;
},

@@ -96,3 +102,3 @@

getDataSource: function() {
return this.dataSource;
return this.deprecated('getDataSource()', 'dataSource', '1.0.7');
},

@@ -109,3 +115,3 @@

getFilteredData: function() {
var ds = this.getDataSource();
var ds = this.dataSource;
var count = ds.getRowCount();

@@ -143,3 +149,3 @@ var result = new Array(count);

// }
value = this.getDataSource().getValue(x, y - headerRowCount);
value = this.dataSource.getValue(x, y - headerRowCount);
}

@@ -150,3 +156,3 @@ return value;

getDataIndex: function(y) {
return this.getDataSource().getDataIndex(y - this.grid.getHeaderRowCount());
return this.dataSource.getDataIndex(y - this.grid.getHeaderRowCount());
},

@@ -206,3 +212,3 @@

} else {
this.getDataSource().setValue(x, y - headerRowCount, value);
this.dataSource.setValue(x, y - headerRowCount, value);
}

@@ -270,3 +276,3 @@ this.changed();

getRowCount: function() {
var count = this.getDataSource().getRowCount();
var count = this.dataSource.getRowCount();
count += this.grid.getHeaderRowCount();

@@ -289,3 +295,3 @@ return count;

setHeaders: function(headers) {
this.getDataSource().setHeaders(headers);
this.dataSource.setHeaders(headers);
},

@@ -298,3 +304,3 @@

setFields: function(fields) {
this.getDataSource().setFields(fields);
this.dataSource.setFields(fields);
},

@@ -307,3 +313,3 @@

getFields: function() {
return this.getDataSource().getFields();
return this.dataSource.getFields();
},

@@ -323,3 +329,3 @@

{ type: 'JSDataSource' },
{ type: 'DataSourceAggregator' },
{ type: 'DataSourceAggregator', test: 'hasAggregates' },
{ type: 'DataSourceGlobalFilter' },

@@ -332,7 +338,7 @@ { type: 'DataSourceSorterComposite' },

* @summary Instantiates the data source pipeline.
* @desc Each new layer is created using the supplied constructor and a reference to the previous data source in the pipeline. A reference to each new layer is added to `this` dataModel as a property using the layer's `name`.
* @desc Each new pipe is created using the supplied constructor and a reference to the previous data source in the pipeline. A reference to each new pipe is added to `this` dataModel as a property using the pipe's `name`.
*
* The first layer must have a `@@CLASS_NAME` of `'DataSource'`. Hence, the start of the pipeline is `this.source`. The last layer is assigned the synonym `this.dataSource`.
* The first pipe must have a `@@CLASS_NAME` of `'DataSource'`. Hence, the start of the pipeline is `this.source`. The last pipe is assigned the synonym `this.dataSource`.
*
* Branches are created when a layer specifies a name in `parent`.
* Branches are created when a pipe specifies a name in `parent`.
* @param {object[]} dataSource - Array of uniform objects containing the grid data.

@@ -344,14 +350,14 @@ * @memberOf dataModels.JSON.prototype

this.pipeline.forEach(function(sources, layer, index) {
var DataSource = analytics[layer.type];
this.pipeline.forEach(function(sources, pipe, index) {
var DataSource = analytics[pipe.type];
layer.name = layer.name || getDataSourceName(layer.type);
pipe.name = pipe.name || getDataSourceName(pipe.type);
if (index === 0 && layer.name !== 'source') {
if (index === 0 && pipe.name !== 'source') {
throw 'Expected pipeline to begin with source.';
}
if (layer.parent) {
if (pipe.parent) {
this.dataSource = this.dataSource || dataSource; // tip of main trunk on first diversion
dataSource = sources[getDataSourceName(layer.parent)];
dataSource = sources[getDataSourceName(pipe.parent)];
if (!dataSource) {

@@ -362,9 +368,10 @@ throw 'Parent data source not in pipeline.';

dataSource = layer.options === undefined
dataSource = pipe.options === undefined
? new DataSource(dataSource)
: new DataSource(dataSource, layer.options);
: new DataSource(dataSource, pipe.options);
sources[layer.name] = dataSource;
sources[pipe.name] = dataSource;
}.bind(this, this.sources));
this.source = this.sources.source;
this.dataSource = this.dataSource || dataSource; // tip of main trunk if never branched

@@ -376,20 +383,26 @@

/**
* Add a layer to the data source pipeline.
* @param {dataSourcePipelineObject} newLayer - The new pipeline layer.
* @param {string} [referenceLayer] - Name of an existing pipeline layer after which the new layer will be added. If not found (such as `null`), inserts at beginning. If `undefined` or omitted, adds to end.
* Add a pipe to the data source pipeline.
* @desc No-op if already added.
* @param {dataSourcePipelineObject} newPipe - The new pipeline pipe.
* @param {string} [referencePipe] - One of:
* * Name of an existing pipeline pipe after which the new pipe will be added. If `null`, inserts at beginning. If not found (or `undefined` or omitted), adds to end.
* @memberOf dataModels.JSON.prototype
*/
addPipe: function(newLayer, referenceLayer) {
var layerIndex;
if (referenceLayer !== undefined) {
referenceLayer = this.pipeline.find(function(layer, index) {
var found = layer.type === referenceLayer;
layerIndex = index;
return found;
});
addPipe: function(newPipe, referencePipe) {
var referenceIndex,
added = this.pipeline.find(function(pipe) { return pipe.type === newPipe.type; });
if (!added) {
if (referencePipe === null) {
referenceIndex = 0; // add to beginning
} else if (
!this.pipeline.find(function(pipe, index) {
referenceIndex = index + 1; // add after found pipe
return pipe.type === referencePipe;
})
) {
referenceIndex = this.pipeline.length; // not found: add to end
}
this.pipeline.splice(referenceIndex, 0, newPipe);
}
if (referenceLayer === undefined) {
layerIndex = this.pipeline.length;
}
this.pipeline.splice(layerIndex + 1, 0, newLayer);
},

@@ -410,3 +423,3 @@

getTopTotals: function() {
return this.hasAggregates() ? this.getDataSource().getGrandTotals() : this.topTotals;
return this.hasAggregates() ? this.dataSource.getGrandTotals() : this.topTotals;
},

@@ -427,3 +440,3 @@

getBottomTotals: function() {
return this.hasAggregates() ? this.getDataSource().getGrandTotals() : this.bottomTotals;
return this.hasAggregates() ? this.dataSource.getGrandTotals() : this.bottomTotals;
},

@@ -492,3 +505,3 @@

getVisibleColumns: function() {
this.deprecated('getVisibleColumns()', 'getActiveColumns()', '1.0.6', arguments);
return this.deprecated('getVisibleColumns()', 'getActiveColumns()', '1.0.6', arguments);
},

@@ -533,7 +546,2 @@

setRelation: function(options) {
this.sources.treeview.setRelation(options);
this.applyAnalytics();
},
/**

@@ -545,6 +553,6 @@ * @memberOf dataModels.JSON.prototype

this.pipeline.forEach(function(sources, layer) {
var dataSource = sources[layer.name];
this.pipeline.forEach(function(sources, pipe) {
var dataSource = sources[pipe.name];
switch (layer.type) {
switch (pipe.type) {
case 'DataSourceAggregator':

@@ -560,6 +568,3 @@ if (dontApplyAggregator) {

}
dataSource.clearSorts();
(this.getPrivateState().sorts || []).forEach(function(sort) {
dataSource.sortOn(Math.abs(sort) - 1, Math.sign(sort));
});
dataSource.setSorts(this.getPrivateState().sorts);
break;

@@ -591,7 +596,12 @@ }

*/
unSortColumn: function(colIndex, deferred) {
colIndex++; //hack to get around 0 index
var already = this.getColumnSortState(colIndex);
if (already > -1) {
this.removeColumnSortState(colIndex, already);
unSortColumn: function(columnIndex, deferred) {
var state = this.getPrivateState(),
sorts = state.sorts = state.sorts || [],
sortPosition;
if (sorts.find(function(sortSpec, index) {
sortPosition = index;
return sortSpec.columnIndex === columnIndex;
})) {
sorts.splice(sortPosition, 1);
if (!deferred) {

@@ -607,4 +617,3 @@ this.applyAnalytics(true);

getSortedColumnIndexes: function() {
var state = this.getPrivateState();
return state.sorts && state.sorts.slice() || [];
return (this.getPrivateState().sorts || []).slice();
},

@@ -617,23 +626,23 @@

*/
incrementSortState: function(colIndex, keys) {
colIndex++; //hack to get around 0 index
var state = this.getPrivateState();
var hasCTRL = keys.indexOf('CTRL') > -1;
state.sorts = state.sorts || [];
var already = this.getColumnSortState(colIndex);
if (already > -1) {
if (state.sorts[already] > 0) {
state.sorts[already] = -1 * state.sorts[already]; //descending
} else {
this.removeColumnSortState(colIndex, already);
}
} else if (hasCTRL || state.sorts.length === 0) {
state.sorts.unshift(colIndex);
} else {
state.sorts.length = 0;
state.sorts.unshift(colIndex);
incrementSortState: function(columnIndex, keys) {
var state = this.getPrivateState(),
sorts = state.sorts = state.sorts || [],
sortPosition,
sortSpec = sorts.find(function(spec, index) {
sortPosition = index;
return spec.columnIndex === columnIndex;
});
if (!sortSpec) { // was unsorted
if (keys.indexOf('CTRL') < 0) { sorts.length = 0; }
sorts.unshift({ columnIndex: columnIndex, direction: 1 }); // so make ascending
} else if (sortSpec.direction > 0) { // was ascending
sortSpec.direction = -1; // so make descending
} else { // was descending
sorts.splice(sortPosition, 1); // so make unsorted
}
//Minor improvement, but this check can happen earlier and terminate earlier
if (state.sorts.length > 3) {
state.sorts.length = 3;
//Minor improvement, but this check can happe n earlier and terminate earlier
if (sorts.length > 3) {
sorts.length = 3;
}

@@ -644,72 +653,66 @@ },

* @memberOf dataModels.JSON.prototype
* @param {number} colIndex
* @returns {number}
* @param index
* @param returnAsString
* @returns {*}
*/
getColumnSortState: function(colIndex) {
//assumption is that colIndex has been hacked to get around 0
var already,
state = this.getPrivateState();
getSortImageForColumn: function(columnIndex) {
var sorts = this.getPrivateState().sorts || [],
sortPosition,
sortSpec = sorts.find(function(spec, index) {
sortPosition = index;
return spec.columnIndex === columnIndex;
}),
result = null;
state.sorts = state.sorts || [];
if (sortSpec) {
var rank = sorts.length - sortPosition,
arrow = sortSpec.direction > 0 ? UPWARDS_BLACK_ARROW : DOWNWARDS_BLACK_ARROW;
result = rank + arrow + ' ';
}
//Check data columns
already = state.sorts.indexOf(colIndex);
//Check columns with negative indices. Meta columns??
if (already === -1) {
already = state.sorts.indexOf(-1 * colIndex);
}
return already;
return result;
},
/**
* @memberOf dataModels.JSON.prototype
* @param {number} colIndex
* @param {number} sortPosition
*/
removeColumnSortState: function(colIndex, sortPosition) {
//assumption is that colIndex has been hacked to get around 0
var state = this.getPrivateState();
state.sorts = state.sorts || [];
state.sorts.splice(sortPosition, 1);
isDrillDown: function(event) {
return this.pipeline.find(function(pipe) {
var test = pipe.test,
type = typeof test;
test = type === 'function' && pipe.test ||
type === 'string' && this[pipe.test];
return test && test.call(this, event);
}.bind(this));
},
/**
* @param cell
* @param event
* @memberOf dataModels.JSON.prototype
* @param index
* @param returnAsString
* @returns {*}
*/
getSortImageForColumn: function(index) {
index++;
var up = true;
var sorts = this.getPrivateState().sorts;
if (!sorts) {
return null;
cellClicked: function(cell, event) {
if (this.isDrillDown(event)) {
var y = event.gridCell.y - this.grid.getHeaderRowCount();
this.toggleRow(y);
}
var position = sorts.indexOf(index);
if (position < 0) {
position = sorts.indexOf(-1 * index);
up = false;
}
if (position < 0) {
return null;
}
var rank = sorts.length - position;
var arrow = up ? UPWARDS_BLACK_ARROW : DOWNWARDS_BLACK_ARROW;
return rank + arrow + ' ';
},
/**
* @memberOf dataModels.JSON.prototypedrilldown
* @param cell
* @param event
* @summary Toggle the drill-down control of a the specified row.
* @desc Operates only on the following rows:
* * Expandable rows - Rows with a drill-down control.
* * Revealed rows - Rows not hidden inside of collapsed drill-downs.
* @param y - Revealed row number. (This is not the row ID.)
* @param {boolean} [expand] - One of:
* * `true` - Expand row.
* * `false` - Collapse row.
* * `undefined` (or omitted) - Toggle state of row.
* @returns {boolean|undefined} If any rows expanded or collapsed; `undefined` means row had no drill-down control.
* @memberOf dataModels.JSON.prototype
*/
cellClicked: function(cell, event) {
if (
this.sources.treeview && event.dataCell.x === this.sources.treeview.treeColumnIndex ||
this.hasAggregates() && event.gridCell.x === 0
) {
var expandable = this.getDataSource().click(event.gridCell.y - this.grid.getHeaderRowCount());
if (expandable) {
toggleRow: function(y, expand) {
var changed;
if (this.isDrillDown()) {
changed = this.dataSource.click(y, expand);
if (changed) {
this.applyAnalytics(true);

@@ -719,2 +722,3 @@ this.changed();

}
return changed;
},

@@ -733,3 +737,3 @@

}
return this.getDataSource().getRow(y - headerRowCount);
return this.dataSource.getRow(y - headerRowCount);
},

@@ -783,3 +787,3 @@

}
return this.getDataSource().getValue(index, y);
return this.dataSource.getValue(index, y);
},

@@ -786,0 +790,0 @@

1

src/dialogs/ColumnPicker.js

@@ -12,2 +12,3 @@ /* eslint-env browser */

* @constructor
* @extends Dialog
*/

@@ -14,0 +15,0 @@ var ColumnPicker = Dialog.extend('ColumnPicker', {

1

src/dialogs/ManageFilters.js

@@ -36,2 +36,3 @@ /* eslint-env browser */

* @constructor
* @extends Dialog
*/

@@ -38,0 +39,0 @@ var ManageFilters = Dialog.extend('ManageFilters', {

1

src/features/CellClick.js

@@ -7,2 +7,3 @@ 'use strict';

* @constructor
* @extends Feature
*/

@@ -9,0 +10,0 @@ var CellClick = Feature.extend('CellClick', {

1

src/features/CellEditing.js

@@ -8,2 +8,3 @@ 'use strict';

* @constructor
* @extends Feature
*/

@@ -10,0 +11,0 @@ var CellEditing = Feature.extend('CellEditing', {

1

src/features/CellSelection.js

@@ -7,2 +7,3 @@ 'use strict';

* @constructor
* @extends Feature
*/

@@ -9,0 +10,0 @@ var CellSelection = Feature.extend('CellSelection', {

1

src/features/ColumnAutosizing.js

@@ -7,2 +7,3 @@ 'use strict';

* @constructor
* @extends Feature
*/

@@ -9,0 +10,0 @@ var ColumnAutosizing = Feature.extend('ColumnAutosizing', {

1

src/features/ColumnMoving.js

@@ -19,2 +19,3 @@ /* eslint-env browser */

* @constructor
* @extends Feature
*/

@@ -21,0 +22,0 @@ var ColumnMoving = Feature.extend('ColumnMoving', {

1

src/features/ColumnPicker.js

@@ -10,2 +10,3 @@ /* eslint-env browser */

* @constructor
* @extends Feature
*/

@@ -12,0 +13,0 @@ var ColumnPicker = Feature.extend('ColumnPicker', {

1

src/features/ColumnResizing.js

@@ -7,2 +7,3 @@ 'use strict';

* @constructor
* @extends Feature
*/

@@ -9,0 +10,0 @@ var ColumnResizing = Feature.extend('ColumnResizing', {

1

src/features/ColumnSelection.js

@@ -16,2 +16,3 @@ 'use strict';

* @constructor
* @extends Feature
*/

@@ -18,0 +19,0 @@ var ColumnSelection = Feature.extend('ColumnSelection', {

1

src/features/ColumnSorting.js

@@ -7,2 +7,3 @@ 'use strict';

* @constructor
* @extends Feature
*/

@@ -9,0 +10,0 @@ var ColumnSorting = Feature.extend('ColumnSorting', {

2

src/features/Feature.js

@@ -6,4 +6,4 @@ 'use strict';

/**
* Instances of features are connected to one another to make a chain of responsibility for handling all the input to the hypergrid.
* @constructor
* @desc instances of features are connected to one another to make a chain of responsibility for handling all the input to the hypergrid.
*/

@@ -10,0 +10,0 @@ var Feature = Base.extend('Feature', {

1

src/features/RowResizing.js

@@ -7,2 +7,3 @@ 'use strict';

* @constructor
* @extends ColumnResizing
*/

@@ -9,0 +10,0 @@ var RowResizing = ColumnResizing.extend('RowResizing', {

55

src/jsdoc/tutorials/cell-editors.md
A cell editor is an input control superimposed on the grid.
### API
For detailed functional descriptions of overrideable methods, see {@link CellEditor}.
### Usage

@@ -42,3 +46,3 @@

Notes:
1. See {@link DataModel#getCellEditorAt|getCellEditorAt) for parameter details.
1. See {@link DataModel#getCellEditorAt|getCellEditorAt} for parameter details.
2. The method override above pertains to this grid instance. To affect all instances, override the prototype's definition.

@@ -73,9 +77,12 @@ 3. The ellipsis (...) in the sample code above selects a specific cell (or column). Otherwise the assignment would affect all cells in the grid which is usually not what we want to do.

All cell editors (textual or graphical) create their DOM node from a template. This template typically comes from the cell editor's prototype. We will learn more about creating custom cell editors later on. For now, just consider this template of a hypothetical cell editor called `Checkbox`:
All cell editors (textual or graphical) create their DOM node from a template, typically defined on the cell editor object's prototype. We will learn more about creating custom cell editors later on. For now, just consider the following template of a hypothetical cell editor called `Checkbox`:
```javascript
Checkbox.prototype.template = '<input type="checkbox" {{checked}}>';
var Checkbox = CellEditor.extend('Checkbox', {
template: '<input type="checkbox" {{chkattr}}>'
};
grid.cellEditors.add(Checkbox);
```
`{{checked}}` is a {@link https://mustache.github.io|Mustache} variable which loads the cell editor's state. It can be defined on the instantiation `options` object at grid render time:
A word about {@link https://mustache.github.io|mustache} data merge variables. These are useful for decorating the cell editor's markup with state. For example, `{{chkattr}}` in the above is such a variable, intended as a placeholder for a `checked` attribute in the `<input>` tag. Mustache variables are defined on the instantiation `options` object at grid render time:

@@ -85,3 +92,3 @@ ```javascript

if (columnIndex === behavior.columnEnum.CITIZEN ) {
options.checked = this.getValue(columnIndex, rowIndex) ? 'checked="checked"' : '';
options.chkattr = this.getValue(columnIndex, rowIndex) ? 'checked="checked"' : '';
}

@@ -99,14 +106,25 @@

A slightly different approach puts the logic in the cell editor prototype itself (rather than the `getCellEditorAt` override), where it arguably better belongs, by defining a getter:
A better approach puts the logic on the cell editor object in a `chkattr` getter:
```javascript
Object.defineProperty(Checkbox.prototype, "checked", {
get: function () {
return this.initialValue ? 'checked="checked"' : '';
}
});
grid.cellEditors.add(CellEditor.extend('Checkbox', {
template: '<input type="checkbox" {{chkattr}}>',
getEditorValue: function() {
return this.input.checked;
},
//setEditorValue: function(value) {
// this.input.checked = value;
//},
chkattr: {
get: function() {
return this.initialValue ? 'checked="checked"' : '';
}
}
}));
```
Note that while `options` _could_ be used to set the cell editor's instance properties in general, it is generally cleaner to create a custom cell editor with your overrides. See _Create a custom cell editor_ below for more information.
Custom cell editors are generally easy to create. The above example is more complicated than usual because it uses a `defineProperty` {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty|accessor descriptor}, necessary to define a getter. (You cannot use getter/setter literal syntax here as you can in a true prototype object.) See _Create a custom cell editor_ below for more information.
Tip: Best practice is to define custom cell editors when feasible rather than using the `options` instantiation parameter to override instance members.
#### Object access

@@ -159,4 +177,4 @@

Custom cell editor development falls into two broad classes:
* General (graphical) editors &mdash; extend from `CellEditor`
* Text editors &mdash; extend from {@link Textfield} (which extends from `CellEditor`)
* General (graphical) editors &mdash; extend from {@link CellEditor}
* Text editors &mdash; extend from {@link Textfield} (which itself extends from `CellEditor`)

@@ -320,3 +338,3 @@ Development of **text-based cell editors** is relatively simple because they consist of a single `<input>` element and use localizers (formatters/de-formatters) to do the heavy lifting.

_NOTE: In practice, a CSS class is preferred over in-line styles. Regardless, always preserve the mustache variables, include `{{style}}`._
_NOTE: In practice, a CSS class is preferred over in-line styles. Regardless, always preserve the mustache variables, including `{{style}}` as shown._

@@ -504,7 +522,2 @@ Because this cell editor includes a text box, we continue to extend from `Textfield`:

One thing to keep in mind about these is that while the dimensions of the container element are automatically constrained to those of the cell, the child GUI elements can nonetheless be rendered by the browser _outside_ the div. This is useful when your GUI cannot all fit inside the cell boundaries. Just make sure the {@link https://developer.mozilla.org/en-US/docs/Web/CSS/overflow|overflow} CSS property is set to `visible` (which is the default).
### API
For detailed functional descriptions of overrideable methods, see {@link CellEditor}.
One thing to keep in mind about these is that while the dimensions of the container element are automatically constrained to those of the cell, the child GUI elements can nonetheless be rendered by the browser _outside_ the div. This is useful when your GUI cannot all fit inside the cell boundaries. Just make sure the {@link https://developer.mozilla.org/en-US/docs/Web/CSS/overflow|overflow} CSS property is set to `visible` (which is the default).

223

src/jsdoc/tutorials/cell-renderer.md

@@ -57,11 +57,11 @@ This document describes the Cell Renderer interface. This information is useful to the application developer to better understand what cell renderers are, how to use them, and how they may be customized.

Cell Renderer | Description
------------- | -----------
`simpleCell` | Is the normal cell renderer operation which accommodates for images/fonts/text.They will be centered vertical and be placed on horizontally aligned left, right or middle
`emptyCell` | Paints a blank cell. Provided with the base CellRenderer class
`treeCell` | Paints a tree cell that accommodates nested data
`errorCell` | Renderer for *any* cell considered to be in an error state
`button` | Paints a button dependent on mousedown state
`lastSeletion` | Renderer for painting a selection rectangle on top of cells
`linkCellRenderer` | Simple Cell with the link option set. Paint text in a cell that is underline
`sparklineCell` | Paints an implementation of https://en.wikipedia.org/wiki/Sparkline. Requires a list of values to be useful.
:.------------ | :----------
`simpleCell` | Is the normal cell renderer operation which accommodates for images/fonts/text.They will be centered vertical and be placed on horizontally aligned left, right or middle.
`emptyCell` | Paints a blank cell. Provided with the base CellRenderer class.
`treeCell` | Paints a tree cell that accommodates nested data.
`errorCell` | Renderer for *any* cell considered to be in an error state.
`button` | Paints a button dependent on mousedown state.
`lastSeletion` | Renderer for painting a selection rectangle on top of cells.
`linkCellRenderer` | Simple Cell with the link option set. Paint text in a cell that is underline.
`sparklineCell` | Paints an implementation of https://en.wikipedia.org/wiki/Sparkline. Requires an array of values to be useful.
`sparkbarCell` | A tiny bar chart. Requires a list of values to be useful.

@@ -72,124 +72,60 @@

`yourGrid.behavior.dataModel.getCell` method is called when HyperGrid will check which renderer to provide the selected *data* cell.
For programmatic cell renderer association, you can override it, keep in mind that `getCell` needs to always return a CellRenderer.
The following examples refer to a `grid` object:
It is recommended to first set a default, such as `simpleCell`, to be returned if not otherwise overridden by your custom logic.
```javascript
var grid = new Hypergrid(...);
```
You can optionally set additional properties on config which includes internal properties about the cell in question. This will get passed to your renderer paint function later.
`grid.behavior.dataModel.getCell` method is called by HyperGrid to resolve the renderer for each data cell. It is called with a `config` object (see below) and `declaredRendererName`, which the proposed cell renderer name (from the cell's render properties). As you can see from the default implementation, the return value of this method is one of the renderer singletons (from ./src/dataModels/DataModel.js):
```javascript
yourGrid.behavior.dataModel.getCell = function(config, rendererName) {
//A renderer should always be provided that has a paint function
//rendererName defaults to 'SimpleCell'
DataModel.prototype.getCell = function(config, declaredRendererName) {
return this.grid.cellRenderers.get(declaredRendererName);
};
```
var x = config.x;
var y = config.y;
var IMG = 'Your IMAGE';
var styleRowsFromData = true;
config.halign = 'left';
For a programmatic cell renderer association, simply reassign `rendererName` in your method override (in your main program):
switch (y) {
case 5:
case 0:
case 1:
config.backgroundColor = '#e8ffe8';
config.font = 'italic x-small verdana';
config.color = '#070';
break;
case 2:
case 3:
case 4:
config.backgroundColor = 'white';
config.font = 'normal small garamond';
break;
```javascript
grid.behavior.dataModel.getCell = function(config, declaredRendererName) {
if (...) { // some condition based on config
declaredRendererName = 'myRegisteredRenderer'; // case-insensitive
}
return this.grid.cellRenderers.get(declaredRendererName);
};
```
//Render conditionally based on column position of cell
switch (x) {
case 1:
case 2:
case 3:
case 8:
//we are a dropdown, lets provide a visual queue
config.value = [null, config.value, upDownIMG];
}
For useful example of `getCell` overrides, search for "getCell" in the demo folder.
switch (x) {
case 3:
//Turn Simple Cell into a link
config.link = true;
break;
The grid-wide default renderer name as defined in ./src/defaults.js is `SimpleCell` (which you can of course override).
case 4:
config.halign = 'center';
rendererName = 'TreeCell';
break;
In your `getCell` override, you can optionally set additional arbitrary properties on `config` which will be passed along to the renderer's paint function later.
case 5:
config.halign = 'right';
break;
`getCell` is called with a `config` object which is created from (_i.e.,_ whose prototype is) the column's "state" object (its _render properties,_ as documented {@link module:defaults|here}), with the following additional stateful properties providing information about the cell:
case 6:
travel = 60 + Math.round(config.value * 150 / 100000);
config.backgroundColor = '#00' + travel.toString(16) + '00';
config.color = '#FFFFFF';
config.halign = 'right';
rendererName = 'SparkBar';
break;
case 7:
travel = 105 + Math.round(config.value * 150 / 1000);
config.backgroundColor = '#' + travel.toString(16) + '0000';
config.color = '#FFFFFF';
config.halign = 'right';
break;
}
return grid.getCellRenderer(rendererName);
```
`getCell` is called with the rendererName and the config object providing stateful information about the cell:
Parameter | Description
------------------------------ | :---:
`backgroundColor` | Color of the background
`backgroundSelectionColor` | Color of the background when its selected
`bounds` | The region which the renderer's paint function should confine itself to
`buttonCells` | Array of cells that are buttons
`color` | Font Color
`Defaults` | Based on whether its a Header, Filter or tree cell. The appropriate fields will be loaded from [defaults.js](http://openfin.github.io/fin-hypergrid/doc/module-defaults.html)
`font` | Font
`foregroundSelectionColor` | Color of foreground when its selected
`foregroundSelectionFont` | Color of the font when selected
`formatValue` | Allow a localization of data
`getTextHeight` | Function. Returns height of text
`getTextWidth` | Function. Returns width of text
`halign` | Whether to horizontally align 'left', 'right', or 'center'
`isCellHovered` | If the cell is hovered by mouse
`isCellSelected` | If the cell was selected specifically
`isColumnHovered` | If the column the cell is is in is hovered
`isColumnSelected` | If the column the cell is in is selected
`isGridColumn` | If its a header Column
`isGridRow` | If its a header row
`isInCurrentSelectionRectangle` | If the cell is in the current selection matrix
`isRowHovered` | If the row the cell is is in is hovered
`isRowSelected` | If the row the cell is is in is selected
`isUserDataArea` | If the cell holds actual user data
`mouseDown` | If the mouse is down on the cell
`preferredWidth` | Minimum recommended width for the cell's containing column
`untranslatedX` |
`untranslatedY` |
`value` | an untyped field that represents contextual information for the cell to present. I.e. for a text cell value you may used this represent stringified data
`x` | The _absolute_ column index.
`y` | The row index.
:----------------------------- | :---
`bounds` | The clipping rect of the cell to be rendered; the region to which the renderer's paint function should confine itself.
`bounds.height` | Paint region height in canvas pixels.
`bounds.width` | Paint region width in canvas pixels.
`bounds.x` | Paint region horizontal pixel coordinate from canvas origin (top left).
`bounds.y` | Paint region vertical pixel coordinate from canvas origin (top left).
`halign` | Whether to horizontally align 'left', 'right', or 'center'.
`isCellHovered` | If the cell is hovered by mouse.
`isCellSelected` | If the cell was selected specifically.
`isColumnHovered` | If the column the cell is in is hovered.
`isColumnSelected` | If the column the cell is in is selected.
`isGridColumn` | If the cell is in a column that is part of the data region (as opposed to column and row headers). Always `true`.
`isGridColumn` | If the cell is in a row that is part of the data region (as opposed to column and row headers). Always `true`.
`isInCurrentSelectionRectangle` | If the cell is in the last selected cell region.
`isRowHovered` | If the row the cell is in is hovered.
`isRowSelected` | If the row the cell is in is selected.
`isSelected` | The cell is currently selected (included in one of the current selection models).
`isUserDataArea` | If the cell holds actual user data.
`value` | an untyped field that represents contextual information for the cell to present. I.e. for a text cell value you may used this represent stringified data.
`untranslatedX` | The horizontal grid coordinate measured from first data column. That is, the column's index into the list of columns currently active in the grid, `grid.behavior.columns[]`. This list is a subset of of the full list (`grid.behavior.allColumns[]`) because (a) "hidden" columns are excluded and (b) remaining columns are ordered. The order of the columns in this list can be re-ordered at any time programmatically or via the UI by dragging columns around.
`y` | The vertical grid coordinate measured from top header row.he grid row index, including the header rows. Because the number of header rows can vary, the first data row index also varies.
`x` | The "translated" index into the `behavior.allColumns` array. That is, The column's index into the full column list, `grid.behavior.allColumns[]` (and the data source's `fields[]` array upon which it is based).
`normalizedY` | The vertical grid coordinate normalized to first data row. For the first data row, this value is always 0. Excludes the header rows.
__________________
+This _absolute_ column index is the column's index into the full column list (both `grid.behavior.allColumns[]` and the data source's `fields[]` array upon which it is based). By comparison, the _active_ column index refers to the list of columns current active in the grid (`grid.behavior.columns[]`), representing the position of the column in the grid. This list is a subset of of the full list because "hidden" columns are excluded and the remaining columns can be re-ordered at any time via the UI or programmatically.
### Note about the LastSelection renderer

@@ -200,3 +136,3 @@

Parameter | Description
------------------------------ | :---:
:----------------------------- | :---
`selectionRegionOutlineColor` | Borders of selected cells

@@ -206,13 +142,12 @@ `selectionRegionOverlayColor` | Color of selected cells

### Creating your own renderer
You can create your own renderer by extending [CellRenderer Base Class](http://openfin.github.io/fin-hypergrid/doc/CellRenderer.html)
and overriding the `paint` method that expects a `2D graphics context` and a config object (described above).
You would then need to register your new cell renderer on the grid with `YourGrid.registerCellRenderer`
You can create your own renderer by extending from the [CellRenderer](http://openfin.github.io/fin-hypergrid/doc/CellRenderer.html) base class and overriding the `paint` method that expects `gc` (2D graphics context) object and a `config` object (described above).
Register your new cell renderer on the grid with `grid.cellRenderers.add`. This allows it to be referenced by name (in the cell's `renderer` render property).
#### Here's an example use the Star Rating as the inspiration
[Reference](https://openclipart.org/image/2400px/svg_to_png/117079/5-Star-Rating-System-20110205103828.png)
"Star ratings" look something like [this](https://openclipart.org/image/2400px/svg_to_png/117079/5-Star-Rating-System-20110205103828.png).
```javascript
/*

@@ -327,3 +262,3 @@ Define your rendering logic

//Extend HyperGrid's base Renderer
var sparkStarRatingRenderer = YourGrid.cellRendererBase.extend({
var sparkStarRatingRenderer = grid.cellRendererBase.extend({
paint: paintSparkRating

@@ -333,20 +268,20 @@ });

//Register your renderer
YourGrid.registerCellRenderer(sparkStarRatingRenderer, "Starry");
grid.registerCellRenderer(sparkStarRatingRenderer, "Starry");
// Using your new render
yourGrid.behavior.dataModel.getCell = function(config, rendererName) {
//Retrieve the Singleton
var starryRenderer = grid.getCellRenderer('Starry');
idxOfStarColumn = 5;
if (config.x === idxOfStarColumn){
config.domain= 100; // default is 100
config.sizeFactor = 0.65; // default is 0.65; size of stars as fraction of height of cell
config.darkenFactor = 0.75; // default is 0.75; star stroke color as fraction of star fill color
config.color = 'gold'; // default is 'gold'; star fill color
return starry;
}
return starryRenderer;
grid.behavior.dataModel.getCell = function(config, rendererName) {
//Retrieve the Singleton
var starryRenderer = this.grid.cellRenderers.get('Starry');
idxOfStarColumn = 5;
if (config.x === idxOfStarColumn){
config.domain= 100; // default is 100
config.sizeFactor = 0.65; // default is 0.65; size of stars as fraction of height of cell
config.darkenFactor = 0.75; // default is 0.75; star stroke color as fraction of star fill color
config.color = 'gold'; // default is 'gold'; star fill color
return starry;
}
return starryRenderer;
};

@@ -359,3 +294,3 @@ ```

Note that HyperGrid...
- is lazy in regards to rendering. It relies on explicit calls to `YourGrid.repaint()` (sometimes made on your behalf), to request a redraw of the canvas.
- is lazy in regards to rendering. It relies on explicit calls to `grid.repaint()` (sometimes made on your behalf), to request a redraw of the canvas.
- throttles multiple calls to `repaint` to 60 FPS.

@@ -371,3 +306,3 @@ - every re-render is a complete re-render; there is no partial re-rendering.

```javascript
YourGrid.addEventListener('fin-grid-rendered', function(e) {
grid.addEventListener('fin-grid-rendered', function(e) {
//Do something

@@ -393,3 +328,3 @@ });

```javascript
yourGrid.behavior.getCursorAt = function(x,y) {
grid.behavior.getCursorAt = function(x,y) {
if (x === 0) {

@@ -404,5 +339,5 @@ return 'pointer'

```javascript
yourGrid.behavior.dataModel.getCell = function(config, renderName) {
grid.behavior.dataModel.getCell = function(config, renderName) {
config.link = true;
var defaultRenderer = grid.getCellRenderer(rendererName);
var defaultRenderer = this.grid.cellRenderers.get(rendererName);
config.halign = 'left';

@@ -409,0 +344,0 @@ var x = config.x;

2

src/lib/deprecated.js

@@ -44,3 +44,3 @@ 'use strict';

var memberType = regexIsMethod.test(dotProps) ? 'method' : 'property';
var warning = 'The .' + methodName + '() method is deprecated as of v' + since +
var warning = 'The .' + methodName + ' method is deprecated as of v' + since +
' in favor of the .' + chain.join('.') + ' ' + memberType + '.' +

@@ -47,0 +47,0 @@ ' (Will be removed in a future release.)';

4

src/lib/Localization.js

@@ -49,2 +49,3 @@ /* eslint-env browser */

* @constructor
* @extends Formatter
* @tutorial localization

@@ -170,2 +171,3 @@ */

* @constructor
* @extends Formatter
*/

@@ -397,3 +399,3 @@ var DateFormatter = Formatter.extend('DateFormatter', {

set: function(name) {
this.deprecated('set(name, localizer)', 'add(name, localizer)', '1.0.6', arguments);
return this.deprecated('set(name, localizer)', 'add(name, localizer)', '1.0.6', arguments);
},

@@ -400,0 +402,0 @@

13

src/lib/Renderer.js

@@ -1024,2 +1024,7 @@ /* eslint-env browser */

} else {
// set dataRow and columnName used by valOrFunc (needed when func)
var column = behavior.getActiveColumn(c);
cellProperties.dataRow = grid.getRow(r);
cellProperties.columnName = column.name;
cellProperties.value = grid.getValue(c, r);

@@ -1045,12 +1050,8 @@ cellProperties.halign = grid.getColumnAlignment(c);

cellProperties.x = c;
cellProperties.y = r;
var cell = behavior.getCellRenderer(cellProperties, c, r);
behavior.cellPropertiesPrePaintNotification(cellProperties);
var cell = behavior.getCellRenderer(cellProperties, c, r);
var column = behavior.getActiveColumn(c);
//declarative cell properties
if (isGridRow) {
if (isGridRow && isGridColumn) {
var overrides = behavior.getCellProperties(column.index, r);

@@ -1057,0 +1058,0 @@ _(cellProperties).extendOwn(overrides);

version-history.md
images/images.js

Sorry, the diff of this file is too big to display

src/Hypergrid.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc