@finos/perspective-viewer
    Preparing search index...

    Interface IPerspectiveViewerPlugin

    The IPerspectiveViewerPlugin interface defines the necessary API for a <perspective-viewer> plugin, which also must be an HTMLElement via the Custom Elements API or otherwise. Rather than implement this API from scratch however, the simplest way is to inherit from <perspective-viewer-plugin>, which implements IPerspectiveViewerPlugin with non-offensive default implementations, where only the draw() and name() methods need be overridden to get started with a simple plugin.

    Note that plugins are frozen once a <perspective-viewer> has been instantiated, so generally new plugin code must be executed at the module level (if packaged as a library), or during application init to ensure global availability of a plugin.

    const BasePlugin = customElements.get("perspective-viewer-plugin");
    class MyPlugin extends BasePlugin {
        get name() {
            return "My Plugin";
        }
        async draw(view) {
            const count = await view.num_rows();
            this.innerHTML = `View has ${count} rows`;
        }
    }

    customElements.define("my-plugin", MyPlugin);
    const Viewer = customElements.get("perspective-viewer");
    Viewer.registerPlugin("my-plugin");
    interface IPerspectiveViewerPlugin {
        can_render_column_styles?: (view_type: string, group: string) => boolean;
        column_style_config?: (view_type: string, group: string) => any;
        get config_column_names(): undefined | string[];
        get min_config_columns(): undefined | number;
        get name(): string;
        get priority(): undefined | number;
        get select_mode(): undefined | string;
        clear(): Promise<void>;
        delete(): Promise<void>;
        draw(view: View): Promise<void>;
        resize(): Promise<void>;
        restore(config: any): Promise<void>;
        restyle(): Promise<void>;
        save(): Promise<any>;
        update(view: View): Promise<void>;
    }

    Implemented by

    Index

    Properties

    can_render_column_styles? column_style_config?

    Accessors

    config_column_names min_config_columns name priority select_mode

    Methods

    clear delete draw resize restore restyle save update

    Properties

    can_render_column_styles?: (view_type: string, group: string) => boolean

    Given a column's grouping (determined by indexing it in plugin.config_column_names) and its view type, determines whether or not to render column styles in the settings sidebar. Implementing this function and column_style_config allows the plugin to interface with the viewer's column configuration API.

    column_style_config?: (view_type: string, group: string) => any

    Determines which column configuration controls are populated in the viewer. Corresponds to the data the plugin will recieve on save. Implementing this function and can_render_column_styles allows the plugin to interface with the viewer's column configuration API.

    Accessors

    • get config_column_names(): undefined | string[]

      The named column labels, if desired. Named columns behave differently in drag/drop mode than unnamed columns, having replace/swap behavior rather than insert. If provided, the length of config_column_names must be >= min_config_columns, as this is assumed by the drag/drop logic.

      Returns undefined | string[]

    • get min_config_columns(): undefined | number

      The minimum number of columns required for this plugin to operate. This mostly affects drag/drop and column remove button behavior, preventing the use from applying configs which violate this min.

      While this option can technically be undefined (as in the case of @finos/perspective-viewer-datagrid), doing so currently has nearly identical behavior to 1.

      Returns undefined | number

    • get name(): string

      The name for this plugin, which is used as both it's unique key for use as a parameter for the plugin field of a ViewerConfig, and as the display name for this plugin in the <perspective-viewer> UI.

      Returns string

    • get priority(): undefined | number

      The load priority of the plugin. If the plugin shares priority with another, the first to load has a higher priority.

      A larger number has a higher priority.

      The plugin with the highest priority will be loaded by default by the Perspective viewer. If you would like to instead begin with a lower priority plugin, choose it explicitly with a HTMLPerspectiveViewerPluginElement.restore call.

      Returns undefined | number

    • get select_mode(): undefined | string

      Select mode determines how column add/remove buttons behave for this plugin. "select" mode exclusively selects the added column, removing other columns. "toggle" mode toggles the column on or off (dependent on column state), leaving existing columns alone.

      Returns undefined | string

    Methods

    • Clear this plugin, though it is up to the discretion of the plugin author to determine what this means. Defaults to resetting this element's innerHTML, so be sure to override if you want custom behavior.

      Returns Promise<void>

      async clear(): Promise<void> {
          this.innerHTML = "";
      }

    • Render this plugin using the provided View. While there is no provision to cancel a render in progress per se, calling a method on a View which has been deleted will throw an exception.

      Parameters

      • view: View

      Returns Promise<void>

      async draw(view: perspective.View): Promise<void> {
          const csv = await view.to_csv();
          this.innerHTML = `<pre>${csv}</pre>`;
      }

    • Notify the plugin that the style environment has changed. Useful for plugins which read CSS styles via window.getComputedStyle().

      Returns Promise<void>

    • Save this plugin's state to a JSON-serializable value. While this value can be anything, it should work reciprocally with restore() to return this plugin's renderer to the same state, though potentially with a different View.

      save() should be used for user-persistent settings that are data-agnostic, so the user can have persistent view during refresh or reload. For example, @finos/perspective-viewer-d3fc uses plugin_config to remember the user-repositionable legend coordinates.

      Returns Promise<any>

    • Draw under the assumption that the ViewConfig has not changed since the previous call to draw(), but the underlying data has. Defaults to dispatch to draw().

      Parameters

      • view: View

      Returns Promise<void>

      async update(view: perspective.View): Promise<void> {
          return this.draw(view);
      }

    Settings

    Member Visibility

    On This Page

    Properties
    Accessors
    Methods