perspective-viewer.md

Table of Contents

• registerPlugin
• View
  • sort
  • columns
  • computed-columns
  • aggregates
  • filters
  • view
  • view
  • column-pivots
  • row-pivots
  • message
  • worker
  • load
  • update
  • notifyResize
  • copy
  • delete
  • save
  • restore
  • reset
  • handleClipboardCopy
• View#perspective-config-update
• View#perspective-view-update

registerPlugin

Register a plugin with the component.

Parameters

• name string The logical unique name of the plugin. This will be used to set the component's view attribute.
• plugin object An object with this plugin's prototype. Valid keys are: name : The display name for this plugin. create (required) : The creation function - may return a Promise. delete : The deletion function. mode : The selection mode - may be "toggle" or "select".

View

Extends ViewPrivate

HTMLElement class for <perspective-viewer custom element.

sort

Sets this perspective.table.view's sort property, an array of column names.

Examples

via Javascript DOM

let elem = document.getElementById('my_viewer');
elem.setAttribute('sort', JSON.stringify([["x","desc"]));

via HTML

<perspective-viewer sort='[["x","desc"]]'></perspective-viewer>

columns

The set of visible columns.

Parameters

• columns array An array of strings, the names of visible columns.

Examples

via Javascript DOM

let elem = document.getElementById('my_viewer');
elem.setAttribute('columns', JSON.stringify(["x", "y'"]));

via HTML

<perspective-viewer columns='["x", "y"]'></perspective-viewer>

computed-columns

The set of visible columns.

Parameters

• computed-columns array An array of computed column objects

Examples

via Javascript DOM

let elem = document.getElementById('my_viewer');
elem.setAttribute('computed-columns', JSON.stringify([{name: "x+y", func: "add", inputs: ["x", "y"]}]));

via HTML

<perspective-viewer computed-columns="[{name:'x+y',func:'add',inputs:['x','y']}]""></perspective-viewer>

aggregates

The set of column aggregate configurations.

Parameters

• 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

Examples

via Javascript DOM

let elem = document.getElementById('my_viewer');
elem.setAttribute('aggregates', JSON.stringify({x: "distinct count"}));

via HTML

<perspective-viewer aggregates='{"x": "distinct count"}'></perspective-viewer>

filters

The set of column filter configurations.

Examples

via Javascript DOM

let filters = [
    ["x", "<", 3],
    ["y", "contains", "abc"]
];
let elem = document.getElementById('my_viewer');
elem.setAttribute('filters', JSON.stringify(filters));

via HTML

<perspective-viewer filters='[["x", "<", 3], ["y", "contains", "abc"]]'></perspective-viewer>

view

Sets the currently selected plugin, via its name field.

Parameters

• v

view

This element's perspective.table.view instance. The instance itself will change after every View#perspective-config-update event.

column-pivots

Sets this perspective.table.view's column_pivots property.

row-pivots

Sets this perspective.table.view's row_pivots property.

message

When set, hide the data visualization and display the message. Setting message does not clear the internal perspective.table, but it does render it hidden until the message is removed.

Parameters

• msg string The message. This can be HTML - it is not sanitized.

Examples

let elem = document.getElementById('my_viewer');
elem.setAttribute('message', '<h1>Loading</h1>');

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 aperspective.table` instance from the preferred worker.

Examples

let elem = document.getElementById('my_viewer');
let table = elem.worker.table([{x:1, y:2}]);
elem.load(table);

load

Load data. If load or update have already been called on this element, its internal perspective.table will also be deleted.

Parameters

• data any The data to load. Works with the same input types supported by perspective.table.
• options

Examples

Load JSON

const my_viewer = document.getElementById('#my_viewer');
my_viewer.load([
    {x: 1, y: 'a'},
    {x: 2, y: 'b'}
]);

Load CSV

const my_viewer = document.getElementById('#my_viewer');
my_viewer.load("x,y\n1,a\n2,b");

Load perspective.table

const my_viewer = document.getElementById('#my_viewer');
const tbl = perspective.table("x,y\n1,a\n2,b");
my_viewer.load(tbl);

Returns Promise<void> A promise which resolves once the data is loaded and a perspective.view has been created.

update

Updates this element's perspective.table with new data.

Parameters

• data any The data to load. Works with the same input types supported by perspective.table.update.

Examples

const my_viewer = document.getElementById('#my_viewer');
my_viewer.update([
    {x: 1, y: 'a'},
    {x: 2, y: 'b'}
]);

notifyResize

Determine whether to reflow the viewer and redraw.

copy

Duplicate an existing <perspective-element>, including data and view settings. The underlying perspective.table will be shared between both elements

Parameters

• widget any A <perspective-viewer> instance to copy.

delete

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.

Returns Promise<boolean> Whether or not this call resulted in the underlying perspective.table actually being deleted.

save

Serialize this element's attribute/interaction state.

Returns object a serialized element.

restore

Resotre this element to a state as generated by a reciprocal call to save.

Parameters

• x object returned by save.

Returns Promise<void> A promise which resolves when the changes have been applied.

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.

handleClipboardCopy

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.

Parameters

• options

View#perspective-config-update

perspective-config-update is fired whenever an configuration attribute has been modified, by the user or otherwise.

View#perspective-view-update

perspective-view-update is fired whenever underlying view's data has updated, including every invocation of load and update.