Plugins

The plugin concept is explained here.

Below is the list of all available plugin types and their built-in implementations.

action

Build an action offered to users in several places of the UI. For example in the title bar of a dock in a dashboard, or in context menus or other user event handlers. Most of its methods are optional but one, execute. The methods are given different payloads depending on the situation in which they are instantiated (see ActionSituation to have a list of the different situations).

Available action plugins

Key	Description
about	Displays the about popup. There is no requirement concerning its availability (it can be used anywhere).
activemonitor-messages	Display the ActiveMonitor Messages. It is displaying the number of unread messages in a badge.
add-server	Opens the Add Server popup
add-to-favorites	Adds a bookmark to the user's favorites.
add-widget	An action available with dashboards only, to display a popup to add widgets in a dashboard.
activemonitor-alerts	Display the ActiveMonitor Alerts. It is displaying the number of alerts in a badge.
chart-png-export	An action to export the chart as a png.
chart-show-data	An action to display the data of the chart as a table.
chart-tooltip-show	Display a tooltip for the chart widget.
clear-dock	Unload the current bookmark from the dock (or in other terms, clear the dock).
conditional-formatting	Open a popup to format the current measure.
copy-table	Copy to clipboard the underlying table. Only available if the underlying table is fully downloaded (i.e. not lazy loaded)
create-folder	Open a popup to create a folder under the selected node.
create-kpi	An action to open the kpi editor, with some contextual information if available.
debug-widget-state	Open a popup that displays the internal state of the widget.
delete-bookmark	Deletes a bookmark or a folder recursively. If the bookmark has been registered as user's favorite and the user has the right to edit that, it will also delete the favorite.
delete-calculated-measure	An action to delete the a persisted measure, disabled if the user does not have the permissions to delete it.
delete-kpi	An action to delete the kpi, disabled if the user does not have the permissions to delete it.
delete-pointvalues	Open a popup to notify a user before deleting the selected rows.
delete-server	Opens a popup to confirm the deletion of a server from the serversPool.
edit-bookmark	Opens a popup to edit a bookmark or a folder.
edit-calculated-measure	Open a popup to edit a calculated measure and modify the MDX of the widget.
edit-kpi	An action to open the kpi editor, with some contextual information if available.
edit-single-value	Open a popup to edit the current single value widget.
featured-values-tooltip-show	Display a tooltip for the featured values widget.
full-size	Display widgets in full screen.
hide-tooltip	An action to hide any tooltip that is displayed in ActiveUI.
load-bookmark	Loads a dashboard bookmark in a root container, opening a popup if several are available.
logout	Logs the current user out. There is no requirement concerning its availability (it can be used anywhere).
member-filter	Open a popup to filter on the current column
open-alert	Opens a popup with the details of an alert.
open-drillthrough	Opens a popup to choose where to display a drillthrough widget containing the result of the drillthrough on the given cell.
open-message	Opens a popup with the details of a message.
open-monitor	Opens a popup with the details of an alert.
pivot-table-toggle-grand-total	Show / Hide the grand total on rows
pivot-table-toggle-subtotals	Show / Hide the sub total on rows
publish-calculated-measure	Open a popup to publish a calculated measure, moving its definition from the widget’s MDX to the content server.
query-editor	Open a popup to edit the mdx and context values of the widget
redo	For a root widget, loads the next view
refresh-discovery	Expands a node of a tree, if it is expandable.
refresh-query	Refresh the current query associated with the widget. Only available on widgets with data sources using mdx.
remove-dock	An action to remove the widget from its parent dashboard. Only available when the widget is in a dashboard.
rename-server	Opens a popup to rename a server from the serversPool.
reset-to-default-view	Reset a root widget to its default view
save	Save the changes of the widget.
save-as	Save the current widget in a bookmark. It will display the bookmark popup.
separator	This is a fake action, it is used to separate items in context menus, but does not do anything on execute.
show-default-widgets	An action to restore the default built-in widgets in the dashboard.
sub-menu	This is a fake action, used to offer sub-menus in context menus.
tabular-clear-sort	Remove the sorting based on the context that received the click.
tabular-collapse-level	A tabular view action that allows to collapse the view on a given member.
tabular-column-difference	A tabular view action that allows to create a calculated measure that computes the difference between two selected columns.
tabular-edit-cell	Set the cell as edited in the tabular configuration.
tabular-edit-header	Set the header as edited in the tabular configuration.
tabular-expand-level	A tabular view action that allows to expand the view on a given member (opens a popup to choose the level on which to expand).
tabular-freeze-header	Freezes the column so that it is always visible in the table.
tabular-header-style	Opens a popup to customize the look of a header.
tabular-remove-header	Remove a column from the table. Just hide it if the column is needed for data integrity.
tabular-select-cell	Set the cell as selected in the tabular configuration.
tabular-select-column	Set the column as selected in the tabular configuration. Supports the multi-selection when the user uses the keys ctrl or shift while he clicks.
tabular-show-sparklines	This action is meant to be used on tabular headers. It adds the tree cell column configuration to the list of column groups of the tabular if it was not there, or removes it if it was already there.
tabular-show-tree-column	This action is meant to be used on tabular headers. It adds the tree cell column configuration to the list of column groups of the tabular if it was not there, or removes it if it was already there.
tabular-sort	Apply a sorting based on the context that received the click.
tabular-sparkline-add-colors	This action is meant to be used on tabular headers. It adds the tree cell column configuration to the list of column groups of the tabular if it was not there, or removes it if it was already there.
tabular-tooltip-show	Show a tooltip for the tabular view/pivot table widget.
toggle-dock-title-bar	Toggle the title bar of the widget.
toggle-filters	Toggle the filters area at the top of the widget. This is only available on widgets that use mdx.
toggle-text-editing	Toggle between editing and preview mode for the RichTextEditor container.
toggle-tree-node	Toggles the expansion of the node of a tree, if it is expandable.
toggle-wizard	Toggle the wizard. This is only available with the pivot table widget.
tree-tooltip-show	Show a tooltip for the tree widget, if the node contains information to display.
undo	For a root widget, loads the previous view
update-query-mode	Change the query update mode to the next mode of: - the mdx data sources of the widget, if no mode is defined - the modes array parameters, if it is defined Only available on widgets with data sources using mdx.
watch-measure	An action to start watching a measure in a table.
widget-csv-export	Open a popup to export the data of the widget into a csv file. Only available if the underlying table is fully downloaded (i.e. not lazy loaded).

Implement a custom action plugin

To implement a custom 'action' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'action': [
      {
        key: 'my-custom-action',
        // returns an object of type ActionImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            execute: /* function (event: AnyEvent, actionPayload: ActionPayload): void */,
            getBadge: /* function (actionPayload: ActionPayload): (string|number)= */,
            getCaption: /* function (actionPayload: ActionPayload): TranslationPayload= */,
            getIconSrcKey: /* function (actionPayload: ActionPayload): string= */,
            isAvailable: /* function (actionPayload: ActionPayload): boolean= */,
            isDisabled: /* function (actionPayload: ActionPayload): boolean= */,
            load: /* function (actionPayload: ActionPayload): void= */,
            unload: /* function (actionPayload: ActionPayload): void= */
          };
        },
      },
    ],
  },
});

authentication-holder

Exposes the authentication API that every part of ActiveUI requiring authentication can consume.

Available authentication-holder plugins

Key	Description
basic	Resend Basic authentication for each REST call and uses cookies for WebSockets. Do not store any credentials. Will be asked again on reload.
jwt	Uses JWT for REST and cookies for WebSockets.
keycloak	Uses Keycloak for REST and cookies for WebSockets.

Implement a custom authentication-holder plugin

To implement a custom 'authentication-holder' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'authentication-holder': [
      {
        key: 'my-custom-authentication-holder',
        // returns an object of type AuthenticationHolderImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            getRequestOptions: /* function (url: Url): Promise.<RequestOptions>= */,
            getSortedRoles: /* function (): SortedRoles */,
            getUsername: /* function (): Username? */,
            invalidate: /* function (usedParameters: RequestOptions): Promise.<void>= */,
            logout: /* function (keepLogin: boolean): Promise.<void> */
          };
        },
        // is an object of type AuthenticationHolderImplementationStaticProperties
        staticProperties: {
          isSingleSignOn: /* boolean= */
        }
      },
    ],
  },
});

caption-producer

Produces captions based on the provided headers.

Available caption-producer plugins

Key	Description
columnMerge	A caption producer that merges headers together, separated with a '/', like 'Desk / Currency'
firstColumn	This caption producer keeps the caption as it is in the first column of the group.
expiry	This caption producer is useful when the expiry column groups several expiries together (when the groupByKpi flag is true on the kpiExpiryColumnsSelector), because it displays 'kpiName Expiry'. It relies on the fact that the captions of the members that are crossjoined are displayed directly in the cell.
mdxHeaderCaption	A caption producer relying on an MDX dataSource, useful for producing synthetic headers when grouping columns.
simple	This caption producer simply returns the caption defined in the caption parameter, or the translated version of a caption defined in the locales files via the captionData and captionPath parameters.

Implement a custom caption-producer plugin

To implement a custom 'caption-producer' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'caption-producer': [
      {
        key: 'my-custom-caption-producer',
        // returns an object of type HeaderCaptionProducerImplementationProperties
        createProperties(parameters,activeUI) {
          return /* (GetCaptionProperty|GetCaptionsProperty) */
        },
      },
    ],
  },
});

cell-editor

A cell editor that can be added in a table.

Available cell-editor plugins

There are no exposed implementations of the cell-editor plugin.

Implement a custom cell-editor plugin

To implement a custom 'cell-editor' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'cell-editor': [
      {
        key: 'my-custom-cell-editor',
        // returns an object of type CellEditorImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            isEditable: /* function (rowIndex: number, columnKey: string, data: Table, dataSource: DataSource, columnProps: TabularColumnProps): boolean */,
            renderEditor: /* function (: {colKey: number, columnProps: TabularColumnProps, rowIdx: number}): React.Element.<*> */
          };
        },
      },
    ],
  },
});

cell-factory

Performs a manipulation on the columns of a table, for example to render several columns as one.

Available cell-factory plugins

Key	Description
expiry	Renders a progress bar instead of the start and expiry columns of a KPI.
kpi-status	Renders the customized cell of the status of a KPI status.
lookup	Renders an editable cell when the column displays a lookup.
relative-time	Renders an cell displaying the time relatively.
sparkline-dynamic-color	Renders the underlying columns as sparklines, using some of the columns for the color range of the sparklines.
sparkline-no-color	Renders the underlying columns as sparklines.
treeCells	Renders the underlying columns as a tree.

Implement a custom cell-factory plugin

To implement a custom 'cell-factory' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'cell-factory': [
      {
        key: 'my-custom-cell-factory',
        // returns an object of type CellFactoryImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            getColumnProps: /* function (columnProps: TabularColumnProps, columnInstance: *): *= */,
            getRowHeight: /* function (rowIndex: number, minRowHeight: number, columnProps: TabularColumnProps): number= */,
            hasCustomRowHeight: /* function (): boolean= */,
            renderCell: /* function (: {colKey: number, columnProps: TabularColumnProps, rowIdx: number}): React.Element.<*> */,
            replaceCells: /* function (): boolean= */,
            getDefaultOptions: /* function (): *= */
          };
        },
      },
    ],
  },
});

cell-renderer

Change the rendering of cells in a table.

Available cell-renderer plugins

Key	Description
caption-renderer	Render the caption contained in the cell.

Implement a custom cell-renderer plugin

To implement a custom 'cell-renderer' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'cell-renderer': [
      {
        key: 'my-custom-cell-renderer',
        // returns an object of type CellRendererImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            getCellStyle: /* function (rowIndex: number, columnProps: TabularColumnProps): {}= */,
            isAvailable: /* function (: {colKey: number, columnProps: TabularColumnProps, rowIdx: number}): boolean= */,
            renderCell: /* function (: {colKey: number, columnProps: TabularColumnProps, onCellRef: function (: HTMLElement?): {}, rowIdx: number}): React.Element.<*> */
          };
        },
      },
    ],
  },
});

chart-element-styler

Merges the ouput style on top of the current style.

Available chart-element-styler plugins

Key	Description
selection-highlight	A styler that highlights selected chart elements.

Implement a custom chart-element-styler plugin

To implement a custom 'chart-element-styler' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'chart-element-styler': [
      {
        key: 'my-custom-chart-element-styler',
        // returns an object of type ChartElementStylerImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            getStyle: /* Function */
          };
        },
      },
    ],
  },
});

chart-overlay

Display an overlay over a chart.

Available chart-overlay plugins

Key	Description
constant	An overlay that displays a line of constant value. Only available on charts with an x and y axis, and with y being a numerical axis.
linear	An overlay displaying a line following the equation y = mx + b. Only available on charts with an x and y axis, and with y being a numerical axis.
regression	An overlay displaying a line following a regression of a given type, calculated from the values of the measure being used for the y axis. Only available on charts having a x and y axis, and with y being numerical and x being a continuous axis (numerical or time). Different types of regressions are available through the type parameter.

Implement a custom chart-overlay plugin

To implement a custom 'chart-overlay' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'chart-overlay': [
      {
        key: 'my-custom-chart-overlay',
        // returns an object of type ChartOverlayImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            getCustomizableParameters: /* function (): Array.<OverlayCustomizableParameter> */,
            getDescription: /* function (): React.Element.<*> */,
            render: /* function (renderOverlayPayload: RenderOverlayPayload): void */
          };
        },
        // is an object of type ChartOverlayImplementationStaticProperties
        staticProperties: {
          canDisplay: /* function (canOverlayDisplayPayload: CanOverlayDisplayPayload): boolean */
        }
      },
    ],
  },
});

chart-selection-handler

Lets projects interact with the core chart selection.

Available chart-selection-handler plugins

Key	Description
default	Default chart selection mechanism

Implement a custom chart-selection-handler plugin

To implement a custom 'chart-selection-handler' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'chart-selection-handler': [
      {
        key: 'my-custom-chart-selection-handler',
        // returns an object of type ChartSelectionHandlerImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            onChange: /* function (selection: ChartSelection, layerApi: WidgetApi, widgetApi: WidgetApi): void= */,
            transform: /* function (selection: ChartSelection, layerApi: WidgetApi, widgetApi: WidgetApi): ChartSelection= */
          };
        },
      },
    ],
  },
});

chart-time-formatter

Format date/time members on chart axis

Available chart-time-formatter plugins

Key	Description
default	Automatically format a date based on how much details the date contains. If the date contains milliseconds, the date will be formatted in milliseconds. If the date contains seconds, the date will be formatted in seconds. If the date contains minutes, the date will be formatted in minutes. If the date contains hours, the date will be formatted in hours. If the date contains days, the date will be formatted in days. If the date contains months, the date will be formatted in month. Otherwise the date will be formatted in years.
simplified	Automatically format a date based on how much details the date contains. If the date contains milliseconds, the date will be formatted in 'minutes:seconds.milliseconds' format. If the date contains seconds, the date will be formatted in 'hours:minutes:seconds' format. If the date contains minutes, the date will be formatted in 'years/month/day hours:minutes:seconds' format. If the date contains hours, the date will be formatted in 'years/month/day hours:minutes' format. Otherwise the date will be formatted in 'years/month/day' format.

Implement a custom chart-time-formatter plugin

To implement a custom 'chart-time-formatter' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'chart-time-formatter': [
      {
        key: 'my-custom-chart-time-formatter',
        // returns an object of type ChartTimeFormatterImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            getFormatters: /* function (d3: D3Api, translator: Translator): Array.<Formatter> */
          };
        },
      },
    ],
  },
});

column-selector

A column selector, used for grouping table columns.

Available column-selector plugins

Key	Description
kpi-expiry	Groups together the start and expiry columns of a kpi
kpi-goal	Selects the columns that are the goal of a kpi.
kpi-status	Groups together the status columns of a kpi.
lookup	Selects the columns that correspond to a formula lookup("...").
manual	Creates one group of columns, according to the selection provided.
member	Creates a group of columns containing all the levels representing members (as opposed to measures).
numeric	Creates a group of columns containing all the levels presenting measures (as opposed to members).
regexp	Creates a group of columns based on a regexp ran on the column header value. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions for regexp documentation.

Implement a custom column-selector plugin

To implement a custom 'column-selector' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'column-selector': [
      {
        key: 'my-custom-column-selector',
        // returns an object of type ColumnsSelectorImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            select: /* function (headers: Array.<TableHeader>, hiddenColumnsNames: Array.<string>, dataSource: DataSource): Array.<{key: string, selection: Array.<TableHeader>}> */
          };
        },
      },
    ],
  },
});

comparator

Customizes the order in which tabular view and pivot table columns are displayed.

Available comparator plugins

Key	Description
alphabetical	Sorts headers alphabetically.
explicit	Sorts headers in the same order as a given list.
original	Keeps the headers in the same order than in the data table.
reverse	Sorts the headers in the reverse order than in the data table.

Implement a custom comparator plugin

To implement a custom 'comparator' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'comparator': [
      {
        key: 'my-custom-comparator',
        // returns an object of type HeaderComparatorImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            compare: /* function (h1: SortableTabularHeader, h2: SortableTabularHeader): number */
          };
        },
      },
    ],
  },
});

container

Projects should only use ReactContainerImplementationProperties.

Available container plugins

There are no exposed implementations of the container plugin.

Implement a custom container plugin

To implement a custom 'container' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'container': [
      {
        key: 'my-custom-container',
        // returns an object of type ContainerImplementationProperties
        createProperties(parameters,activeUI) {
          return /* (ReactContainerImplementationProperties|CoreContainerImplementationProperties) */
        },
        // is an object of type ContainerImplementationStaticProperties
        staticProperties: /* (ReactContainerImplementationStaticProperties|CoreContainerImplementationStaticProperties) */
      },
    ],
  },
});

formatter

Formats a caption into a specific format incorporating the user's locale.

Available formatter plugins

Key	Description
billions	Formats axis tick labels into k/M/B notation. e.g. 1000 -> 1k
currency	Formats axis tick labels into currency. e.g. 1000 -> $1,000.00
millions	Formats axis tick labels into k/M/B notation. e.g. 1000 -> 1k
percentage	Formats axis tick labels into a percentage format. e.g. .1 -> 10%
raw	Formats axis tick labels to show just the numerical value without any group separation or other decoration 1,000,000 -> 1000000
scientific	Formats axis tick labels into scientific notation. e.g. 1000 -> 1e+3%
thousands	Formats axis tick labels into k/M/B notation. e.g. 1000 -> 1k

Implement a custom formatter plugin

To implement a custom 'formatter' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'formatter': [
      {
        key: 'my-custom-formatter',
        // returns an object of type FormatterImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            format: /* function (value: (string|number), caption: string): string */
          };
        },
        // is an object of type FormatterImplementationStaticProperties
        staticProperties: /* (ChooseableFormatterImplementationStaticProperties|NotChooseableFormatterImplementationStaticProperties) */
      },
    ],
  },
});

html-renderer

Responsible for converting plain text to HTML.

Available html-renderer plugins

Key	Description
markdown	Use the default preset of https://github.com/markdown-it/markdown-it to convert Markdown to HTML. The linkify and typographer options are enabled.
sanitized-html	Use https://github.com/punkave/sanitize-html to sanitize HTML. Allows the img tag on top of the default allowed ones.

Implement a custom html-renderer plugin

To implement a custom 'html-renderer' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'html-renderer': [
      {
        key: 'my-custom-html-renderer',
        // returns an object of type HtmlRendererImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            getPlaceholder: /* function (): ReactTranslationPayload */,
            toHtml: /* function (plainText: string): string */
          };
        },
        // is an object of type HtmlRendererImplementationStaticProperties
        staticProperties: {
          getCssRules: /* function (palette: FullPalette): {}= */
        }
      },
    ],
  },
});

icon

Renders an icon. The expected output is any React element. For the list of available keys in the SDK, see the theme page of the Showcase application.

Available icon plugins

There are no exposed implementations of the icon plugin.

Implement a custom icon plugin

To implement a custom 'icon' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'icon': [
      {
        key: 'my-custom-icon',
        // returns an object of type IconImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            render: /* function (palette: CorePalette, props: *): React.Element.<*> */
          };
        },
      },
    ],
  },
});

logger

A plugin to handle logging side-effect. It is called for every logging request in activeUI

Available logger plugins

Key	Description
debug	A logger that logs everything, and adds timestamp and the caller to each message.
errors	A logger that only logs errors.
noop	A logger that does not log anything. This is to be used CAREFULLY, because it does not even log errors.
verbose	A logger that logs everything.
warnings	A logger that only logs warnings and errors.

Implement a custom logger plugin

To implement a custom 'logger' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'logger': [
      {
        key: 'my-custom-logger',
        // is an object of type LoggerImplementationStaticProperties
        staticProperties: {
          handle: /* function (data: LoggingData, : {formatter: LoggingFormatter, tags: LoggingTags}): void */
        }
      },
    ],
  },
});

mdx-filter-selector

MdxFilterSelector are used to retrieve one or more filters matching a specific set of conditions in order to manipulate it: read, write, remove...

Available mdx-filter-selector plugins

Key	Description
all	Matches any filter
except-filters-key	Filters out the specified filters on top of using a key
hierarchy	Matches filters with the provided hierarchy
hierarchy-greater-index	Matches filters with the provided hierarchy and an index greater than the one provided
hierarchy-key	Matches filters with the provided key and hierarchy
hierarchy-key-index	Matches filters with the provided key, index and hierarchy
hierarchy-key-value	Matches filters with the provided key, filter value and hierarchy
key	Matches non server filters with the provided key
user	Matches non server filters with the provided key

Implement a custom mdx-filter-selector plugin

To implement a custom 'mdx-filter-selector' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'mdx-filter-selector': [
      {
        key: 'my-custom-mdx-filter-selector',
        // returns an object of type MdxFilterSelectorImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            matches: /* function (activeFilter: AugmentedActiveFilter.<*>): boolean */
          };
        },
      },
    ],
  },
});

numeric-scale-profile

A plugin used when computing numerical scales, in order to customize the mapping of a value on a scale.

Available numeric-scale-profile plugins

Key	Description
linear	A linear profile, that returns the percentage of the value between the domain min and max.
linear-piecewise	A profile linear in 2 pieces, centered around middle.

Implement a custom numeric-scale-profile plugin

To implement a custom 'numeric-scale-profile' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'numeric-scale-profile': [
      {
        key: 'my-custom-numeric-scale-profile',
        // returns an object of type NumericScaleProfileImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            scale: /* function (value: number, domain: Array.<number>): number */
          };
        },
      },
    ],
  },
});

ordinal-color-scale

Provide a set of colors given a set of values. Can be used to associate a particular color to a particular value

Available ordinal-color-scale plugins

Key	Description
activeviam	Color scale of size 10 created by ActiveViam with the following colors: turquoise blue, wisteria, cream can, celery, cinnabar, el salva, neon carrot, cabaret, governor bay, nepal
black-white	Color scale of size 2: black and white
d3-10	Color scale of size 10 provided by D3. See https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory10
d3-20	Color scale of size 20 provided by D3. See https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20
d3-20b	Color scale of size 20 provided by D3. See https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20b
d3-20c	Color scale of size 20 provided by D3. See https://github.com/d3/d3-scale/blob/master/README.md#schemeCategory20c
explicit	Create a custom color scale that explicitly list all colors. Fallback to text color if no parameters are provided.
google-chart	Color scale of size 5 following Google Chart/ActivePivot Live 3 color scheme. It contains the following colors: mariner, tia maria, orange peel, la palma, flirt. See https://developers.google.com/chart/
mono-accent	Color scale of size 1 based on the current theme accent color
mono-text	Color scale of size 1 based on the current theme text color
optimized	Color scale of size 9 inspired from http://www.mulinblog.com/a-color-palette-optimized-for-data-visualization/
theme-3	Color scale of size 3 based on the current theme: text, accent and alternate colors

Implement a custom ordinal-color-scale plugin

To implement a custom 'ordinal-color-scale' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'ordinal-color-scale': [
      {
        key: 'my-custom-ordinal-color-scale',
        // returns an object of type OrdinalColorScaleImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            compute: /* function (values: Array.<*>): Array.<Color> */
          };
        },
        // is an object of type OrdinalColorScaleImplementationStaticProperties
        staticProperties: {
          defaultParameters: /* {}= */
        }
      },
    ],
  },
});

row-action

Renders a row action, displayed by default at the end of each row in a table widget.

Available row-action plugins

There are no exposed implementations of the row-action plugin.

Implement a custom row-action plugin

To implement a custom 'row-action' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'row-action': [
      {
        key: 'my-custom-row-action',
        // returns an object of type RowActionImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            getIconKey: /* function (: {columnProps: TabularColumnProps, index: number, rowIndex: number}): string= */,
            getIconStyle: /* function (: {columnProps: TabularColumnProps, index: number, isDisabled: boolean, rowIndex: number}): Style= */,
            isDisabled: /* function (: {columnProps: TabularColumnProps, index: number, rowIndex: number}): boolean= */,
            onClick: /* function (e: AnyEvent, : {columnProps: TabularColumnProps, index: number, rowIndex: number}): void= */,
            render: /* function (index: number, rowIdx: number, columnProps: TabularColumnProps): React.Element.<*>?= */,
            getIconTitle: /* function (: {columnProps: TabularColumnProps, index: number, rowIndex: number}): TranslationPayload?= */
          };
        },
      },
    ],
  },
});

row-style

Customizes the style of all the cells in a row.

Available row-style plugins

Key	Description
bold-total	Uses bold font if the row corresponds to a parent aggregate.
color-alternate	Uses the tabularAlternatingRowColor as a background on even-indexed rows.

Implement a custom row-style plugin

To implement a custom 'row-style' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'row-style': [
      {
        key: 'my-custom-row-style',
        // returns an object of type RowStyleImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            getRowStyle: /* function (rowIndex: number, columnsProps: Array.<TabularColumnProps>): Style? */
          };
        },
      },
    ],
  },
});

single-value

Select the coordinates of the cell to read from in the table.

Available single-value plugins

Key	Description
default	Reads from the cell {row: 0, column: 0}.

Implement a custom single-value plugin

To implement a custom 'single-value' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'single-value': [
      {
        key: 'my-custom-single-value',
        // returns an object of type SingleValueCoordinatesImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            getCellCoordinates: /* function (data: Table): {column: number, row: number} */
          };
        },
      },
    ],
  },
});

table-selection-handler

Lets projects interact with the core tabular selection.

Available table-selection-handler plugins

Key	Description
default	Default Tabular selection mechanism
empty	Handler that always returns an empty selection

Implement a custom table-selection-handler plugin

To implement a custom 'table-selection-handler' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'table-selection-handler': [
      {
        key: 'my-custom-table-selection-handler',
        // returns an object of type TableSelectionHandlerImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            onChange: /* function (selection: TableSelection, api: WidgetApi): void= */,
            transform: /* function (selection: TableSelection, api: WidgetApi): TableSelection= */
          };
        },
      },
    ],
  },
});

theme

Customizes the colors used by ActiveUI components. If "fromTheme" is given, all the colors are optionals, otherwise, the palette need to have at least the colors of the CorePalette. All the colors defined in FullPalette can be given to override the default derivation behaviour when creating the full theme.

Available theme plugins

Key	Description
dark-cerulean	Built-in dark theme.
explicit	Theme reading its properties from its parameters.
lean-dark-cerulean	Built-in lean dark theme.
lean-light-cerulean	Built-in lean light theme.
light-bluewood	Old light theme.
light-cerulean	Built-in light theme.

Implement a custom theme plugin

To implement a custom 'theme' plugin, please refer to properties and static properties documentations.

Example:

createActiveUI({
  plugins: {
    'theme': [
      {
        key: 'my-custom-theme',
        // returns an object of type ThemeImplementationProperties
        createProperties(parameters,activeUI) {
          return /* ({palette: CorePalette}|{fromTheme: SerializedPlugin, palette: {}}) */
        },
        // is an object of type ThemeImplementationStaticProperties
        staticProperties: {
          selectable: /* boolean= */
        }
      },
    ],
  },
});