Plugins

The plugin concept is explained here.

The list of all available plugin types and their built-in implementations is shown below:

action

Build an action offered to users in several places of the UI. @remarks

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.
bookmark-state-editor	Open a popup to edit the bookmark corresponding to the target node.
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.
chart-sort	An action to sort charts.
chart-remove-sort	An action to remove sort on charts.
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-cells	Copy the table's selected cells to the clipboard.
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.
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.
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.
home	Reset a root widget to its default view
load-bookmark	If bookmark is a dashboard, loads it in a root container, opening a popup if several are available. If it is a widget bookmark, adds widget to active dashboard.
logout	Logs the current user out. There is no requirement concerning its availability (it can be used anywhere).
make-home-page	Sets a bookmark to be the home page.
member-filter	Open a popup to filter on the current column
move-bookmark	Opens a popup to move a bookmark or a folder.
new-dashboard	Reset the root widget to a new dashboard.
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.
open-widget-to-modify	Loads a saved widget bookmark in a root container, opening a popup if several are available.
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-bookmark	Opens a popup to rename a bookmark or a folder.
rename-server	Opens a popup to rename a server from the serversPool.
reset-dashboard	An action available with dashboards only, to reset a dashboard to its last persisted state. The ActionResult resolved by this action will contain the api of the reloaded bookmark.
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.
share	Displays a popup that allows to edit the permissions of a saved bookmark, and to get a shareable URL for it.
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-collapse-entire-field	An action that allows collapsing down to a given level
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-expand-entire-field	An action that allows expansion of all cells at a given level
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	Removes a set of columns from a table.
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 available on the pivot table widget, and the chart 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.
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).
widget-state-editor	Open a popup to edit the bookmark corresponding to the widget.

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: (event: React.SyntheticEvent, actionPayload: ActionPayload) => void | Promise<ActionResult>;
            getBadge?: (actionPayload: ActionPayload) => string | number;
            getCaption?: (actionPayload: ActionPayload) => TranslationPayload;
            getIconSrcKey?: (actionPayload: ActionPayload) => string;
            isAvailable?: (actionPayload: ActionPayload) => boolean;
            isDisabled?: (actionPayload: ActionPayload) => boolean;
            load?: (actionPayload: ActionPayload) => void | (() => void);
            unload?: (actionPayload: ActionPayload) => void;
          };
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

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.
jwt	Uses JWT for REST and cookies for WebSockets.
keycloak	Uses Keycloak for REST and cookies for WebSocket.

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: (url?: Url) => Promise<RequestInit>;
            getSortedRoles: () => SortedRoles;
            getUsername: () => Username | null | undefined;
            invalidate?: (usedParameters: RequestInit) => Promise<void>;
            logout: (keepLogin?: boolean) => Promise<void>;
          };
        },
        // is an object of type AuthenticationHolderImplementationStaticProperties
        staticProperties: {
          isSingleSignOn?: boolean;
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

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.
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 /* HeaderCaptionProducerImplementationProperties = GetCaptionProperty | GetCaptionsProperty; */
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

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: (rowIndex: number, columnKey: string, data: Table, dataSource: DataSource, columnProps: TabularColumnProps) => boolean;
            renderEditor: (a: {
                    colKey: string;
                    columnProps: TabularColumnProps;
                    rowIdx: number;
                }) => React.ReactElement<any>;
          };
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

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?: (columnProps: TabularColumnProps, columnInstance: any) => any;
            getDefaultOptions?: () => any;
            getRowHeight?: (rowIndex: number, minRowHeight: number, columnProps: TabularColumnProps) => number;
            hasCustomRowHeight?: () => boolean;
            renderCell: (a: {
                    colKey: string;
                    columnProps: TabularColumnProps;
                    rowIdx: number;
                }) => ReactElement<any>;
            replaceCells?: () => boolean;
          };
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

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?: (rowIndex: number, columnProps: TabularColumnProps) => {};
            isAvailable?: (a: {
                    colKey: string;
                    columnProps: TabularColumnProps;
                    rowIdx: number;
                }) => boolean;
            renderCell: (a: {
                    colKey: string;
                    columnProps: TabularColumnProps;
                    onCellRef: (a: HTMLElement | null | undefined) => {};
                    rowIdx: number;
                }) => React.ReactElement<any>;
          };
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

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: (tuple: TableTuple, headers: TableHeaders, currentStyle: CSSObject, layerApi: WidgetApi, chartType: PluginKey) => CSSObject;
          };
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

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.

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: () => OverlayCustomizableParameter[];
            getDescription: () => React.ReactElement<any>;
            render: (renderOverlayPayload: RenderOverlayPayload) => void;
          };
        },
        // is an object of type ChartOverlayImplementationStaticProperties
        staticProperties: {
          canDisplay: (canOverlayDisplayPayload: CanOverlayDisplayPayload) => boolean;
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

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?: (selection: ChartSelection, layerApi: WidgetApi, widgetApi: WidgetApi) => void;
            transform?: (selection: ChartSelection, layerApi: WidgetApi, widgetApi: WidgetApi) => ChartSelection;
          };
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

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.
simplified	Automatically format a date based on how much details the date contains.

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: (d3: D3Api, translator: Translator) => Formatter[];
          };
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

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.

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: (headers: TableHeader[], hiddenColumnsNames: string[], dataSource: DataSource) => {
                    key: string;
                    selection: TableHeader[];
                }[];
          };
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

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: (h1: SortableTabularHeader, h2: SortableTabularHeader) => number;
          };
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

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 /* ContainerImplementationProperties = ReactContainerImplementationProperties | CoreContainerImplementationProperties; */
        },
        // is an object of type ContainerImplementationStaticProperties
        staticProperties: /* ContainerImplementationStaticProperties = ReactContainerImplementationStaticProperties | CoreContainerImplementationStaticProperties; */
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

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: (value: string | number, caption: string) => string;
          };
        },
        // is an object of type FormatterImplementationStaticProperties
        staticProperties: /* FormatterImplementationStaticProperties = ChooseableFormatterImplementationStaticProperties | NotChooseableFormatterImplementationStaticProperties; */
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

html-renderer

Responsible for converting plain text to HTML.

Available html-renderer plugins

Key	Description
markdown	Uses the default preset of https://github.com/markdown-it/markdown-it to convert Markdown to HTML.
sanitized-html	Use https://github.com/punkave/sanitize-html to sanitize HTML.

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: () => ReactTranslationPayload;
            toHtml: (plainText: string) => string;
          };
        },
        // is an object of type HtmlRendererImplementationStaticProperties
        staticProperties: {
          getClassName?: () => string;
          getCssRules?: (palette: Palette) => CssRules;
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

icon

Renders an icon. The expected output is any React element. @remarks

For the list of available keys in the SDK, see the icons snippet in the showcase.

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: (palette: CorePalette, props: any) => React.ReactElement<any>;
          };
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

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: (data: LoggingData, a: {
        formatter: LoggingFormatter;
        tags: LoggingTags;
    }) => void;
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

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: (activeFilter: AugmentedActiveFilter) => boolean;
          };
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

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.
positive-or-negative	A binary profile, that returns either 1 or 0 for positive or negative values.

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: (value: number, domain: number[]) => number;
          };
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

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: (values: any[]) => Color[];
          };
        },
        // is an object of type OrdinalColorScaleImplementationStaticProperties
        staticProperties: {
          defaultParameters?: {};
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

reporter

Exports a report

Available reporter plugins

Key	Description
app-state	Exports the whole state of the application
console	Exports all info, warning and error logs logged through the ActiveUI logging framework.
environment	Exports information about the application's environment: server, browser, build...
error	Exports information related to the provided exception
screenshot	Exports a screenshot of the application. Does not work under Internet Explorer
stat	Exports performance statistics about the application

Implement a custom reporter plugin

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

Example:

createActiveUI({
  plugins: {
    'reporter': [
      {
        key: 'my-custom-reporter',
        // returns an object of type ReporterImplementationProperties
        createProperties(parameters, activeUI) {
          return {
            canReport: () => boolean;
            report: () => Promise<Report>;
          };
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

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?: (a: {
                    columnProps: TabularColumnProps;
                    index: number;
                    rowIndex: number;
                }) => string;
            getIconStyle?: (a: {
                    columnProps: TabularColumnProps;
                    index: number;
                    isDisabled: boolean;
                    rowIndex: number;
                }) => CSSObject;
            getIconTitle?: (a: {
                    columnProps: TabularColumnProps;
                    index: number;
                    rowIndex: number;
                }) => TranslationPayload | null | undefined;
            isDisabled?: (a: {
                    columnProps: TabularColumnProps;
                    index: number;
                    rowIndex: number;
                }) => boolean;
            onClick?: (e: React.SyntheticEvent, a: {
                    columnProps: TabularColumnProps;
                    index: number;
                    rowIndex: number;
                }) => void;
            render?: (index: number, rowIdx: number, columnProps: TabularColumnProps) => React.ReactElement<any> | null | undefined;
          };
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

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: (rowIndex: number, columnsProps: TabularColumnProps[]) => CSSObject | null | undefined;
          };
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

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?: (selection: TableSelection, api: TabularApi) => void;
            transform?: (selection: TableSelection, api: TabularApi) => TableSelection;
          };
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});

theme

Allows to define the main color of the theme, as well as if it is a dark theme.

Available theme plugins

Key	Description
dark-activeviam	A built-in dark theme.
explicit	Theme reading its properties from its parameters.
light-activeviam	A 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 /* ThemeImplementationProperties = UserThemeConfig; */
        },
        // is an object of type ThemeImplementationStaticProperties
        staticProperties: {
          selectable?: boolean;
        },
        // if your plugin accepts parameters, indicate how they should be serialized/deserialized
        parametersSerializationFn: (s13n: SerializationHelper) => [
          {name: 'myParam', sn: s13n.string}
        ]
      },
    ],
  },
});