diff --git a/README.md b/README.md index 482785431..fae124d0a 100644 --- a/README.md +++ b/README.md @@ -4,14 +4,13 @@ -### Current Release (1.2.0 - 26 October 2016) +### Current Release (1.2.1 - 27 October 2016) The current version 1.0 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 ` - - - - - -
- - diff --git a/demo/computed-column.html b/demo/computed-column.html new file mode 100644 index 000000000..5cd5cc38f --- /dev/null +++ b/demo/computed-column.html @@ -0,0 +1,49 @@ + + + + Hypergrid Computed Values Demo + + + + + + + + + + + +

Computed Column

+
+ + + + + + + + + + + +
Note the following differences between computed columns vs. computed cells:
Computed ColumnComputed Cell
A single function reference in the calculator column property is used to compute the values for all the cells in the column.Each computed cell has a calculator function in place of its value. The grid displays the value returned by the calculator.
There can also be a cell value, which the calculator can reference and operate on in addition to the other columns' value and any other variables in it's closure.The cell value is a reference to a calculator function. There is no cell value per se; the calculator therefore can only operate on the values of the other columns' values and other variables in it's closure.
+ + diff --git a/demo/group-view.html b/demo/group-view.html deleted file mode 100644 index 3f34fe145..000000000 --- a/demo/group-view.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - Hypergrid Groupview Demo - - - - - - - - - - - Groupview -
- - diff --git a/demo/index.html b/demo/index.html index 57754f859..56fbceb66 100644 --- a/demo/index.html +++ b/demo/index.html @@ -14,7 +14,7 @@ - + diff --git a/demo/js/calculated-column.js b/demo/js/calculated-column.js deleted file mode 100644 index 781fd0254..000000000 --- a/demo/js/calculated-column.js +++ /dev/null @@ -1,45 +0,0 @@ -/* eslint-env browser */ -/* globals fin */ - -'use strict'; - -var grid; - -window.onload = function() { - var Hypergrid = fin.Hypergrid; - grid = new Hypergrid('div#example'); - - grid.setData([ - { value: 3 }, - { value: 4 }, - { value: -4 }, - { value: 5 } - ]); - - grid.behavior.dataModel.getFields().push('squared'); //TODO: Needs to get fixed. get fields returns a copy of the fields array from schema - grid.behavior.dataModel.getHeaders().push('squared'); //TODO: See above - grid.behavior.dataModel.getCalculators().push(square); //TODO: See above - - // recreate to include new column - grid.behavior.createColumns(); - - // force type of new column to 'number' because current auto-detect does not know about calculated columns - grid.behavior.setColumnProperties(1, { type: 'number' }); - - // grid.installPlugins([ - // Hypergrid.Hyperfilter, // object API instantiation; `$$CLASS_NAME` defined so ref saved in `grid.plugins.hyperfilter` - // Hypergrid.Hypersorter // object API instantiation to grid.plugins; no `name` or `$$CLASS_NAME` defined so no ref saved - // ]); - // - // grid.filter = grid.plugins.hyperfilter.create(); - // grid.sorter = grid.plugins.hypersorter - // - // grid.setState({ showFilterRow: true }); - - grid.repaint(); - - function square(dataRow, columnName) { - return dataRow.value * dataRow.value; - } -}; - diff --git a/demo/js/computed-column.js b/demo/js/computed-column.js new file mode 100644 index 000000000..61c00d03e --- /dev/null +++ b/demo/js/computed-column.js @@ -0,0 +1,54 @@ +/* eslint-env browser */ +/* globals fin */ + +'use strict'; + +var grid; + +window.onload = function() { + var Hypergrid = fin.Hypergrid; + + grid = new Hypergrid('div#example', { + plugins: [ + Hypergrid.Hyperfilter, + [Hypergrid.Hypersorter, {Column: fin.Hypergrid.behaviors.Column}] + ], + pipeline: [ + window.datasaur.filter, + window.fin.Hypergrid.analytics.DataSourceSorterComposite + ], + data: [ + { value: 3 }, + { value: 4 }, + { value: -4 }, + { value: 5 } + ] + }); + + grid.behavior.dataModel.schema.push({ + name: 'squared', + calculator: square + }); + + // recreate to include new column + grid.behavior.createColumns(); + + grid.filter = grid.plugins.hyperfilter.create(); + grid.sorter = grid.plugins.hypersorter; + + // force type of new column to 'number' because current auto-detect does not know about calculated columns + grid.behavior.getColumn(1).type = 'number'; + + grid.installPlugins([ + window.datasaur.filter + ]); + + grid.setState({ showFilterRow: true }); + + grid.repaint(); + + function square(dataRow, columnName) { + return dataRow.value * dataRow.value; + } +}; + diff --git a/demo/js/demo.js b/demo/js/demo.js index b27e2d776..c58617ac3 100644 --- a/demo/js/demo.js +++ b/demo/js/demo.js @@ -24,7 +24,7 @@ window.onload = function() { { name: 'none', type: 'radio', checked: true, setter: function() {} }, { name: 'treeview', type: 'radio', checked: false, setter: toggleTreeview }, { name: 'aggregates', type: 'radio', checked: false, setter: toggleAggregates }, - { name: 'grouping', type: 'radio', checked: false, setter: toggleGrouping} + Hypergrid.GroupView && { name: 'grouping', type: 'radio', checked: false, setter: toggleGrouping} ] }, { label: 'Column header rows', @@ -1000,8 +1000,7 @@ window.onload = function() { grid.setState(state); - var headerDataModel = behavior.getSubgrid('header'); - grid.setRowHeight(0, 40, headerDataModel); + grid.setRowHeight(0, 40, behavior.subgrids.header); // decorate "Height" cell in 17th row var rowIndex = 17 - 1; @@ -1124,7 +1123,7 @@ window.onload = function() { grid.takeFocus(); // turn on grouping as per checkbox default setting (see toggleProps[]) - if (document.querySelector('#grouping').checked) { + if (Hypergrid.GroupView && document.querySelector('#grouping').checked) { grid.setGroups(groups); } @@ -1183,6 +1182,10 @@ window.onload = function() { container.appendChild(choices); ctrlGroup.ctrls.forEach(function(ctrl) { + if (!ctrl) { + return; + } + var referenceElement, type = ctrl.type || 'checkbox', tooltip = 'Property name: ' + ctrl.name; diff --git a/demo/js/group-view.js b/demo/js/group-view.js deleted file mode 100644 index 1d9b7ee29..000000000 --- a/demo/js/group-view.js +++ /dev/null @@ -1,46 +0,0 @@ -/* eslint-env browser */ -/* globals fin */ - -'use strict'; - -var grid; - -window.onload = function() { - var Hypergrid = fin.Hypergrid, - options = { - includeSorter: true, - includeFilter: true, - groups: [5, 0, 1] // alternatively this could be supplied in the setGroups call - }; - - grid = new Hypergrid('div#example'); - grid.setData(window.people1); - - grid.installPlugins([ - Hypergrid.drillDown, // simple API install (plain object with `install` method) but no `name` defined so no ref is saved - Hypergrid.Hyperfilter, // object API instantiation; `$$CLASS_NAME` defined so ref saved in `grid.plugins.hyperfilter` - [Hypergrid.Hypersorter, {Column: fin.Hypergrid.behaviors.Column}], // object API instantiation to grid.plugins; no `name` or `$$CLASS_NAME` defined so no ref saved - [Hypergrid.GroupView, options] // object API instantiation with one arg; `$$CLASS_NAME` defined so ref saved in `grid.plugins.groupView` - ]); - - grid.sorter = grid.plugins.hypersorter; - grid.filter = grid.plugins.hyperfilter.create(); - - // show filter row as per `options` - grid.setState({ - // columnAutosizing: false, - showFilterRow: options.includeFilter && grid.filter.prop('columnFilters') - }); - - document.querySelector('input[type=checkbox]').onclick = function() { - if (this.checked) { - // turn group view ON using options.groups - // Alternatively, you can supply a group list override as a parameter here. - grid.plugins.groupView.setGroups(); - } else { - // turn group view OFF - grid.plugins.groupView.setGroups([]); - } - }; -}; - diff --git a/package.json b/package.json index 73ba9a5f8..757c3c2d2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fin-hypergrid", - "version": "1.2.0", + "version": "1.2.1", "description": "Canvas-based high-performance spreadsheet", "repository": { "type": "git", diff --git a/src/Hypergrid.js b/src/Hypergrid.js index 6219108bf..ba4f09f90 100644 --- a/src/Hypergrid.js +++ b/src/Hypergrid.js @@ -158,9 +158,6 @@ var Hypergrid = Base.extend('Hypergrid', { getRenderer: function() { return this.deprecated('getRenderer()', 'renderer', '1.1.0'); }, - getHeaderColumnCount: function() { - throw new this.HypergridError('getHeaderColumnCount deprecated as of v1.1.0. The naming of this function, analogous to getHeaderRowCount, implied it returned the number of columns to the left of the data area. In fact, it returned the x coordinate of the first data column, which was (and still is) always 0. There is no replacement; use 0 instead.'); - }, /** * diff --git a/src/behaviors/Behavior.js b/src/behaviors/Behavior.js index 65b21f6cd..f9128c0f6 100644 --- a/src/behaviors/Behavior.js +++ b/src/behaviors/Behavior.js @@ -8,9 +8,9 @@ var Point = require('rectangular').Point; var Base = require('../Base'); var Column = require('./Column'); var cellEventFactory = require('./../lib/cellEventFactory'); -var HeaderRow = require('../dataModels/HeaderRow'); -var FilterRow = require('../dataModels/FilterRow'); -var SummaryRow = require('../dataModels/SummaryRow'); +var HeaderSubgrid = require('../dataModels/HeaderSubgrid'); +var FilterSubgrid = require('../dataModels/FilterSubgrid'); +var SummarySubgrid = require('../dataModels/SummarySubgrid'); var dialogs = require('../dialogs'); var noExportProperties = [ @@ -108,54 +108,19 @@ var Behavior = Base.extend('Behavior', { // recreate `CellEvent` class so it can set up its internal `grid`, `behavior`, and `dataModel` convenience properties this.CellEvent = cellEventFactory(this.grid); - this.setSubgrids(options.subgrids || [ - new HeaderRow(this.grid), - new FilterRow(this.grid), - new SummaryRow(this.grid, { name: 'topTotals' }), - this.dataModel, - new SummaryRow(this.grid, { name: 'bottomTotals' }) - ]); - this.dataUpdates = {}; //for overriding with edit values; this.scrollPositionX = this.scrollPositionY = 0; this.clearColumns(); this.clearState(); this.createColumns(); - }, - /** - * Replaces the subgrid list and clears the subgrid dictionary. - * @param {DataModel[]} ubgrids - * @memberOf Behavior.prototype - */ - setSubgrids: function(subgrids) { - this.subgrids = subgrids; - this.subgridDict = {}; - }, - - /** - * @summary Lookup a subgrid in the subgrid list. - * @desc You can get a subgrid reference by index or by property value. - * - * If both args omitted, returns `this.dataModel` if it's in the subgrid list. (The works because `this.dataModel` has neither a `name` nor a `type` property.) - * @param {number|string} [index] - One of: - * * **number** and `key` omitted - Index of the subgrid in the subgrid list. If `key` is provided, treated the same as a string. - * * **string** - The value to match the property against. - * @param {string} [key] - Name of property to match string value to. If omitted, will match against first of: - * * `name` property, when defined - * * `type` property, when `name` property undefined - * @returns {DataModel|undefined} If the sought after subgrid is not in the subgrid list return value is `undefined`. - */ - getSubgrid: function(index, key) { - var result; - if (!key && typeof index === 'number') { - result = this.subgrids[index]; - } else if (!(result = this.subgridDict[index])) { - result = this.subgridDict[index] = this.subgrids.find(function(subgrid) { - return index === (key ? subgrid[key] : subgrid.name || subgrid.type); - }); - } - return result; + this.subgrids = options.subgrids || [ + HeaderSubgrid, + FilterSubgrid, + [SummarySubgrid, { name: 'topTotals' }], + this.dataModel, + [SummarySubgrid, { name: 'bottomTotals' }] + ]; }, get renderedColumnCount() { @@ -1163,22 +1128,6 @@ var Behavior = Base.extend('Behavior', { return result; }, - /** - * @memberOf Behavior.prototype - * @return {number} The number of fixed rows. - */ - getHeaderColumnCount: function() { - throw new this.HypergridError('getHeaderColumnCount() deprecated as of v1.1.0. The naming of this function, analogous to getHeaderColumnCount, implied it returned the number of columns to the left of the data area. In fact, it returned the x coordinate of the first data column, which was (and still is) always 0. There is no replacement; use 0 instead.'); - }, - - /** - * @memberOf Behavior.prototype - * @param {number} The number of fixed rows. - */ - setHeaderColumnCount: function(numberOfHeaderColumns) { - throw new this.HypergridError('setHeaderColumnCount() deprecated as of v1.1.0. The naming of this function implied the abililty to set the number of columns to the left of the data area. In fact, it set the value returned by getHeaderColumnCount which was always expected to be 0. There is no replacement.'); - }, - /** * @memberOf Behavior.prototype * @desc a dnd column has just been dropped, we've been notified @@ -1448,24 +1397,56 @@ var Behavior = Base.extend('Behavior', { /** * An array where each element represents a subgrid to be rendered in the hypergrid. - * The list will always include at least one "data" subgrid, typically {@link Behavior#dataModel|dataModel}. + * + * The list should always include at least one "data" subgrid, typically {@link Behavior#dataModel|dataModel}. * It may also include zero or more other types of subgrids such as header, filter, and summary subgrids. * - * ### totals-toolkit + * This object also serves as a dictionary of selected subgrids by name (i.e., for those subgrids that have a defined property `name`). * - * When the totals-toolkit is loaded, this object also serves as a hash of selected subgrids by name (i.e., for those subgrids that have a defined property `name`). + * The setter: + * * "Enlivens" any constructors + * * Reconstructs the dictionary + * * Calls {@link Behavior#shapeChanged|shpaeChanged()}. * * @type {DataModel[]} * @memberOf Behavior.prototype */ set subgrids(subgrids) { - this._subgrids = subgrids; + this._subgrids = subgrids = subgrids.map(enlivenSubgrids, this); + + subgrids.forEach(function(subgrid) { + subgrids[subgrid.name || subgrid.type || 'data'] = subgrid; + }); + + this.shapeChanged(); }, get subgrids() { return this._subgrids; } }); +/** + * + * @param {DataModel|Array|function|undefined|null} [subgridSpec] - One of: + * * `DataModel` - Mapped to self (passed through as is). + * * `Array` - Mapped to newly instantiated data model: First element is assumed to be a `DataModel` constructor to be called with `new` keyword and `this.grid` as first arg and remaining elements as additional args. + * * function - Mapped to newly instantiated data model: A `DataModel` constructor to be called with `new` keyword and `this.grid` as only arg. + * * Falsy value - Mapped to the behavior's data model (`this.dataModel`). + * @returns {DataModel} + */ +function enlivenSubgrids(dataModel) { + if (!dataModel) { + dataModel = this.dataModel; + } else if (dataModel instanceof Array && dataModel.length) { + var Constructor = dataModel[0], + args = dataModel.slice(1); + dataModel = new (Function.prototype.bind.apply(Constructor, [null, this.grid].concat(args))); + } else if (typeof dataModel === 'function') { + dataModel = new dataModel(this.grid); // eslint-disable-line new-cap + } + return dataModel; +} + /** * @memberOf Behavior.prototype */ diff --git a/src/behaviors/JSON.js b/src/behaviors/JSON.js index 9eb672701..a4fa826ad 100644 --- a/src/behaviors/JSON.js +++ b/src/behaviors/JSON.js @@ -53,7 +53,7 @@ var JSON = Behavior.extend('behaviors.JSON', { this.addColumn({ index: index, header: columnSchema.header, - calculator: columnSchema.calculators + calculator: columnSchema.calculator }); this.columnEnum[this.columnEnumKey(columnSchema.name)] = index; // todo: move columnEnum code from core to demo diff --git a/src/dataModels/FilterRow.js b/src/dataModels/FilterSubgrid.js similarity index 100% rename from src/dataModels/FilterRow.js rename to src/dataModels/FilterSubgrid.js diff --git a/src/dataModels/HeaderRow.js b/src/dataModels/HeaderSubgrid.js similarity index 100% rename from src/dataModels/HeaderRow.js rename to src/dataModels/HeaderSubgrid.js diff --git a/src/dataModels/JSON.js b/src/dataModels/JSON.js index f135c5ee3..5d6e54db1 100644 --- a/src/dataModels/JSON.js +++ b/src/dataModels/JSON.js @@ -198,8 +198,7 @@ var JSON = DataModel.extend('dataModels.JSON', { * @returns {string[]} */ getHeaders: function() { - console.warn('getHeaders() has been deprecated as of v1.2.0. It will be removed in a future release. Header strings are now found in dataSource.schema[*].header.'); - return this.dataSource && this.dataSource.getHeaders(); + return getSchemaPropArr.call(this, 'header', 'getHeaders'); }, /** @@ -223,8 +222,7 @@ var JSON = DataModel.extend('dataModels.JSON', { * @returns {string[]} */ getFields: function() { - console.warn('getFields() has been deprecated as of v1.2.0. It will be removed in a future release. Field names are now found in dataSource.schema[*].name.'); - return this.dataSource.getFields(); + return getSchemaPropArr.call(this, 'name', 'getFields'); }, /** @@ -232,8 +230,7 @@ var JSON = DataModel.extend('dataModels.JSON', { * @returns {string[]} */ getCalculators: function() { - console.warn('getCalculators() has been deprecated as of v1.2.0. It will be removed in a future release. Calculator functions are now found in dataSource.schema[*].calculator.'); - return this.dataSource.getProperty('calculators'); + return getSchemaPropArr.call(this, 'calculator', 'getCalculators'); }, /** @@ -391,7 +388,7 @@ var JSON = DataModel.extend('dataModels.JSON', { if (!this.hasOwnProperty('pipelineSchemaStash')) { this.pipelineSchemaStash = []; } - // disable eslint no-fallthrough + // disable eslint no-fallthrough case 'default': case undefined: stash = this.pipelineSchemaStash; @@ -827,6 +824,23 @@ function propPrep(dataModel, columnIndex, propName, value) { return this.properties(properties); } +var warned = {}; +/** + * @private + * @param {string} propName + * @this DataSourceOrigin# + * @returns {*[]} + */ +function getSchemaPropArr(propName, deprecatedMethodName) { + if (!warned[deprecatedMethodName]) { + console.warn(deprecatedMethodName + '() has been deprecated as of v1.2.0 and will be removed in a future release. Constructs like ' + deprecatedMethodName + '()[i] should be changed to schema[i]. (This deprecated method now returns a new array derived from schema.)'); + warned[deprecatedMethodName] = true; + } + return this.schema.map(function(columnSchema) { + return columnSchema[propName]; + }, this); +} + /** * @deprecated * @memberOf dataModels.JSON.prototype diff --git a/src/dataModels/SummaryRow.js b/src/dataModels/SummarySubgrid.js similarity index 93% rename from src/dataModels/SummaryRow.js rename to src/dataModels/SummarySubgrid.js index 978b8fbe8..8943302ab 100644 --- a/src/dataModels/SummaryRow.js +++ b/src/dataModels/SummarySubgrid.js @@ -19,7 +19,7 @@ SummaryRow.prototype = { type: 'summary', getRowCount: function() { - return this.data && this.data.length || 0; + return this.getData().length; }, getData: function() { diff --git a/src/dataModels/index.js b/src/dataModels/index.js index e037307a9..21e76b052 100644 --- a/src/dataModels/index.js +++ b/src/dataModels/index.js @@ -2,5 +2,8 @@ module.exports = { DataModel: require('./DataModel'), // abstract base class - JSON: require('./JSON') + JSON: require('./JSON'), + HeaderSubgrid: require('./HeaderSubgrid'), + FilterSubgrid: require('./FilterSubgrid'), + SummarySubgrid: require('./SummarySubgrid') }; diff --git a/src/dataSources/DataSourceOrigin.js b/src/dataSources/DataSourceOrigin.js index 096957b9b..daf849b49 100644 --- a/src/dataSources/DataSourceOrigin.js +++ b/src/dataSources/DataSourceOrigin.js @@ -258,7 +258,7 @@ var DataSourceOrigin = DataSourceBase.extend('DataSourceOrigin', { * @returns {number[]} */ getFields: function() { - return getSchemaPropArr.call(this, 'name', 'getFields'); + return this.schema.map(function(columnSchema) { return columnSchema.name; }); }, /** @@ -266,7 +266,7 @@ var DataSourceOrigin = DataSourceBase.extend('DataSourceOrigin', { * @returns {string[]} */ getHeaders: function() { - return getSchemaPropArr.call(this, 'header', 'getHeaders'); + return this.schema.map(function(columnSchema) { return columnSchema.header; }); }, /** @@ -339,22 +339,4 @@ function computeFieldNames(object) { }); } - -var warnings = {}; -/** - * @private - * @param {string} propName - * @this DataSourceOrigin# - * @returns {*[]} - */ -function getSchemaPropArr(propName, deprecatedMethodName) { - if (!warnings[deprecatedMethodName]) { - console.warn('The array returned by dataSource.' + deprecatedMethodName + '() is now a copy. As of v1.2.0, constructs like .' + deprecatedMethodName + '()[i] should be changed to .schema[i].' + propName + '.'); - warnings[deprecatedMethodName] = true; - } - return this.schema.map(function(columnSchema) { - return columnSchema[propName]; - }, this); -} - module.exports = DataSourceOrigin; diff --git a/src/lib/Renderer.js b/src/lib/Renderer.js index 3b6687763..397f360df 100644 --- a/src/lib/Renderer.js +++ b/src/lib/Renderer.js @@ -932,14 +932,16 @@ var Renderer = Base.extend('Renderer', { isHeaderRow = cellEvent.isHeaderRow, isFilterRow = cellEvent.isFilterRow, - cellProperties = isGridRow && !isRowHandleOrHierarchyColumn && behavior.getCellOwnProperties(cellEvent), + cellProperties = behavior.getCellOwnProperties(cellEvent), baseProperties, + nonGridCellProps, config = this.config; if (cellProperties && cellProperties.applyCellProperties) { this.c = undefined; config = undefined; baseProperties = cellProperties; + nonGridCellProps = !isGridRow; } else if (!config || c !== this.c) { this.c = c; config = undefined; @@ -1043,7 +1045,7 @@ var Renderer = Base.extend('Renderer', { var cellRenderer = behavior.getCellRenderer(config, cellEvent); // Overwrite possibly mutated cell properties, if requested to do so by `getCell` override - if (config.reapplyCellProperties) { + if (config.reapplyCellProperties || nonGridCellProps) { _(config).extendOwn(cellProperties); }