## perspective-viewer Module for `` custom element. There are no exports from this module, however importing it has a side effect: the [module:perspective_viewer~PerspectiveViewer](module:perspective_viewer~PerspectiveViewer) class is registered as a custom element, after which it can be used as a standard DOM element. The documentation in this module defines the instance structure of a `` DOM object instantiated typically, through HTML or any relevent DOM method e.g. `document.createElement("perspective-viewer")` or `document.getElementsByTagName("perspective-viewer")`. * [perspective-viewer](#module_perspective-viewer) * [~PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) ⇐ HTMLElement * [new PerspectiveViewer()](#new_module_perspective-viewer..PerspectiveViewer_new) * [.sort](#module_perspective-viewer..PerspectiveViewer+sort) : [ 'array' ].<string> * [.columns](#module_perspective-viewer..PerspectiveViewer+columns) * [.computed-columns](#module_perspective-viewer..PerspectiveViewer+computed-columns) * [.aggregates](#module_perspective-viewer..PerspectiveViewer+aggregates) * [.filters](#module_perspective-viewer..PerspectiveViewer+filters) : array * [.plugin](#module_perspective-viewer..PerspectiveViewer+plugin) : string * [.column-pivots](#module_perspective-viewer..PerspectiveViewer+column-pivots) : [ 'Array' ].<String> * [.row-pivots](#module_perspective-viewer..PerspectiveViewer+row-pivots) : [ 'array' ].<string> * [.editable](#module_perspective-viewer..PerspectiveViewer+editable) : boolean * [.worker](#module_perspective-viewer..PerspectiveViewer+worker) * [.table](#module_perspective-viewer..PerspectiveViewer+table) * [.view](#module_perspective-viewer..PerspectiveViewer+view) * [.load(data)](#module_perspective-viewer..PerspectiveViewer+load) ⇒ [ 'Promise' ].<void> * [.update(data)](#module_perspective-viewer..PerspectiveViewer+update) * [.notifyResize()](#module_perspective-viewer..PerspectiveViewer+notifyResize) * [.clone(widget)](#module_perspective-viewer..PerspectiveViewer+clone) * [.delete(delete_table)](#module_perspective-viewer..PerspectiveViewer+delete) ⇒ [ 'Promise' ].<boolean> * [.restyleElement()](#module_perspective-viewer..PerspectiveViewer+restyleElement) * [.save()](#module_perspective-viewer..PerspectiveViewer+save) ⇒ object * [.restore(config)](#module_perspective-viewer..PerspectiveViewer+restore) ⇒ [ 'Promise' ].<void> * [.flush()](#module_perspective-viewer..PerspectiveViewer+flush) ⇒ [ 'Promise' ].<void> * [.clear()](#module_perspective-viewer..PerspectiveViewer+clear) * [.replace()](#module_perspective-viewer..PerspectiveViewer+replace) * [.reset()](#module_perspective-viewer..PerspectiveViewer+reset) * [.copy()](#module_perspective-viewer..PerspectiveViewer+copy) * [.toggleConfig()](#module_perspective-viewer..PerspectiveViewer+toggleConfig) * * * ### perspective-viewer~PerspectiveViewer ⇐ HTMLElement **Kind**: inner class of [perspective-viewer](#module_perspective-viewer) **Extends**: HTMLElement * [~PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) ⇐ HTMLElement * [new PerspectiveViewer()](#new_module_perspective-viewer..PerspectiveViewer_new) * [.sort](#module_perspective-viewer..PerspectiveViewer+sort) : [ 'array' ].<string> * [.columns](#module_perspective-viewer..PerspectiveViewer+columns) * [.computed-columns](#module_perspective-viewer..PerspectiveViewer+computed-columns) * [.aggregates](#module_perspective-viewer..PerspectiveViewer+aggregates) * [.filters](#module_perspective-viewer..PerspectiveViewer+filters) : array * [.plugin](#module_perspective-viewer..PerspectiveViewer+plugin) : string * [.column-pivots](#module_perspective-viewer..PerspectiveViewer+column-pivots) : [ 'Array' ].<String> * [.row-pivots](#module_perspective-viewer..PerspectiveViewer+row-pivots) : [ 'array' ].<string> * [.editable](#module_perspective-viewer..PerspectiveViewer+editable) : boolean * [.worker](#module_perspective-viewer..PerspectiveViewer+worker) * [.table](#module_perspective-viewer..PerspectiveViewer+table) * [.view](#module_perspective-viewer..PerspectiveViewer+view) * [.load(data)](#module_perspective-viewer..PerspectiveViewer+load) ⇒ [ 'Promise' ].<void> * [.update(data)](#module_perspective-viewer..PerspectiveViewer+update) * [.notifyResize()](#module_perspective-viewer..PerspectiveViewer+notifyResize) * [.clone(widget)](#module_perspective-viewer..PerspectiveViewer+clone) * [.delete(delete_table)](#module_perspective-viewer..PerspectiveViewer+delete) ⇒ [ 'Promise' ].<boolean> * [.restyleElement()](#module_perspective-viewer..PerspectiveViewer+restyleElement) * [.save()](#module_perspective-viewer..PerspectiveViewer+save) ⇒ object * [.restore(config)](#module_perspective-viewer..PerspectiveViewer+restore) ⇒ [ 'Promise' ].<void> * [.flush()](#module_perspective-viewer..PerspectiveViewer+flush) ⇒ [ 'Promise' ].<void> * [.clear()](#module_perspective-viewer..PerspectiveViewer+clear) * [.replace()](#module_perspective-viewer..PerspectiveViewer+replace) * [.reset()](#module_perspective-viewer..PerspectiveViewer+reset) * [.copy()](#module_perspective-viewer..PerspectiveViewer+copy) * [.toggleConfig()](#module_perspective-viewer..PerspectiveViewer+toggleConfig) * * * #### new PerspectiveViewer() HTMLElement class for `` custom element. This class is not exported, so this constructor cannot be invoked in the typical manner; instead, instances of the class are created through the Custom Elements DOM API. Properties of an instance of this class, such as [module:perspective_viewer~PerspectiveViewer#columns](module:perspective_viewer~PerspectiveViewer#columns), are reflected on the DOM element as Attributes, and should be accessed as such - e.g. `instance.setAttribute("columns", JSON.stringify(["a", "b"]))`. **Example** ```js // Create a new `` const elem = document.createElement("perspective-viewer"); elem.setAttribute("columns", JSON.stringify(["a", "b"])); document.body.appendChild(elem); ``` * * * #### perspectiveViewer.sort : [ 'array' ].<string> Sets this `perspective.table.view`'s `sort` property, an array of column names. **Kind**: instance property of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) **Emits**: PerspectiveViewer#event:perspective-config-update **Example** *(via Javascript DOM)* ```js let elem = document.getElementById('my_viewer'); elem.setAttribute('sort', JSON.stringify([["x","desc"])); ``` **Example** *(via HTML)* ```js ``` * * * #### perspectiveViewer.columns The set of visible columns. **Kind**: instance property of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) **Emits**: PerspectiveViewer#event:perspective-config-update **Params** - columns array - An array of strings, the names of visible columns. **Example** *(via Javascript DOM)* ```js let elem = document.getElementById('my_viewer'); elem.setAttribute('columns', JSON.stringify(["x", "y'"])); ``` **Example** *(via HTML)* ```js ``` * * * #### perspectiveViewer.computed-columns The set of visible columns. **Kind**: instance property of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) **Emits**: PerspectiveViewer#event:perspective-config-update **Params** - computed-columns array - An array of computed column objects **Example** *(via Javascript DOM)* ```js let elem = document.getElementById('my_viewer'); elem.setAttribute('computed-columns', JSON.stringify([{name: "x+y", func: "add", inputs: ["x", "y"]}])); ``` **Example** *(via HTML)* ```js ``` * * * #### perspectiveViewer.aggregates The set of column aggregate configurations. **Kind**: instance property of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) **Emits**: PerspectiveViewer#event:perspective-config-update **Params** - aggregates object - A dictionary whose keys are column names, and values are valid aggregations. The `aggergates` attribute works as an override; in lieu of a key for a column supplied by the developers, a default will be selected and reflected to the attribute based on the column's type. See [perspective/src/js/defaults.js](perspective/src/js/defaults.js) **Example** *(via Javascript DOM)* ```js let elem = document.getElementById('my_viewer'); elem.setAttribute('aggregates', JSON.stringify({x: "distinct count"})); ``` **Example** *(via HTML)* ```js ``` * * * #### perspectiveViewer.filters : array The set of column filter configurations. **Kind**: instance property of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) **Emits**: PerspectiveViewer#event:perspective-config-update **Example** *(via Javascript DOM)* ```js let filters = [ ["x", "<", 3], ["y", "contains", "abc"] ]; let elem = document.getElementById('my_viewer'); elem.setAttribute('filters', JSON.stringify(filters)); ``` **Example** *(via HTML)* ```js ``` * * * #### perspectiveViewer.plugin : string Sets the currently selected plugin, via its `name` field. **Kind**: instance property of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) **Emits**: PerspectiveViewer#event:perspective-config-update * * * #### perspectiveViewer.column-pivots : [ 'Array' ].<String> Sets this `perspective.table.view`'s `column_pivots` property. **Kind**: instance property of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) **Emits**: PerspectiveViewer#event:perspective-config-update * * * #### perspectiveViewer.row-pivots : [ 'array' ].<string> Sets this `perspective.table.view`'s `row_pivots` property. **Kind**: instance property of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) **Emits**: PerspectiveViewer#event:perspective-config-update * * * #### perspectiveViewer.editable : boolean Determines whether this viewer is editable or not (though it is ultimately up to the plugin as to whether editing is implemented). **Kind**: instance property of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) **Emits**: PerspectiveViewer#event:perspective-config-update * * * #### perspectiveViewer.worker This element's `perspective` worker instance. This property is not reflected as an HTML attribute, and is readonly; it can be effectively set however by calling the `load() method with a `perspective.table` instance from the preferred worker. **Kind**: instance property of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) **Read only**: true **Example** ```js let elem = document.getElementById('my_viewer'); let table = elem.worker.table([{x:1, y:2}]); elem.load(table); ``` * * * #### perspectiveViewer.table This element's `perspective.table` instance. **Kind**: instance property of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) **Read only**: true * * * #### perspectiveViewer.view This element's `perspective.table.view` instance. The instance itself will change after every `PerspectiveViewer#perspective-config-update` event. **Kind**: instance property of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) **Read only**: true * * * #### perspectiveViewer.load(data) ⇒ [ 'Promise' ].<void> Load data. If `load` or `update` have already been called on this element, its internal `perspective.table` will also be deleted. **Kind**: instance method of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) **Returns**: [ 'Promise' ].<void> - A promise which resolves once the data is loaded and a `perspective.view` has been created. **Emits**: module:perspective\_viewer~PerspectiveViewer#perspective-click PerspectiveViewer#event:perspective-view-update **Params** - data any - The data to load. Works with the same input types supported by `perspective.table`. **Example** *(Load JSON)* ```js const my_viewer = document.getElementById('#my_viewer'); my_viewer.load([ {x: 1, y: 'a'}, {x: 2, y: 'b'} ]); ``` **Example** *(Load CSV)* ```js const my_viewer = document.getElementById('#my_viewer'); my_viewer.load("x,y\n1,a\n2,b"); ``` **Example** *(Load perspective.table)* ```js const my_viewer = document.getElementById('#my_viewer'); const tbl = perspective.table("x,y\n1,a\n2,b"); my_viewer.load(tbl); ``` * * * #### perspectiveViewer.update(data) Updates this element's `perspective.table` with new data. **Kind**: instance method of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) **Emits**: PerspectiveViewer#event:perspective-view-update **Params** - data any - The data to load. Works with the same input types supported by `perspective.table.update`. **Example** ```js const my_viewer = document.getElementById('#my_viewer'); my_viewer.update([ {x: 1, y: 'a'}, {x: 2, y: 'b'} ]); ``` * * * #### perspectiveViewer.notifyResize() Determine whether to reflow the viewer and redraw. **Kind**: instance method of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) * * * #### perspectiveViewer.clone(widget) Duplicate an existing ``, including data and view settings. The underlying `perspective.table` will be shared between both elements **Kind**: instance method of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) **Params** - widget any - A `` instance to clone. * * * #### perspectiveViewer.delete(delete_table) ⇒ [ 'Promise' ].<boolean> Deletes this element's data and clears it's internal state (but not its user state). This (or the underlying `perspective.table`'s equivalent method) must be called in order for its memory to be reclaimed. **Kind**: instance method of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) **Returns**: [ 'Promise' ].<boolean> - Whether or not this call resulted in the underlying `perspective.table` actually being deleted. **Params** - delete_table boolean = true - Should a delete call also be made to the underlying `table()`. * * * #### perspectiveViewer.restyleElement() Restyles the elements and to pick up any style changes **Kind**: instance method of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) * * * #### perspectiveViewer.save() ⇒ object Serialize this element's attribute/interaction state. **Kind**: instance method of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) **Returns**: object - a serialized element. * * * #### perspectiveViewer.restore(config) ⇒ [ 'Promise' ].<void> Restore this element to a state as generated by a reciprocal call to `save` or `serialize`. **Kind**: instance method of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) **Returns**: [ 'Promise' ].<void> - A promise which resolves when the changes have been applied. **Params** - config object | string - returned by `save` or `serialize`. * * * #### perspectiveViewer.flush() ⇒ [ 'Promise' ].<void> Flush any pending attribute modifications to this element. **Kind**: instance method of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) **Returns**: [ 'Promise' ].<void> - A promise which resolves when the current attribute state has been applied. * * * #### perspectiveViewer.clear() Clears the rows in the current [table](table). **Kind**: instance method of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) * * * #### perspectiveViewer.replace() Replaces all rows in the current [table](table). **Kind**: instance method of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) * * * #### perspectiveViewer.reset() Reset's this element's view state and attributes to default. Does not delete this element's `perspective.table` or otherwise modify the data state. **Kind**: instance method of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) * * * #### perspectiveViewer.copy() Copies this element's view data (as a CSV) to the clipboard. This method must be called from an event handler, subject to the browser's restrictions on clipboard access. See [https://www.w3.org/TR/clipboard-apis/#allow-read-clipboard](https://www.w3.org/TR/clipboard-apis/#allow-read-clipboard). **Kind**: instance method of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) * * * #### perspectiveViewer.toggleConfig() Opens/closes the element's config menu. **Kind**: instance method of [PerspectiveViewer](#module_perspective-viewer..PerspectiveViewer) * * *