Public Plugins

How plugins works #

To setup settings, follow instructions here.

List of Public ActiveUI Plugins #

• action: Build an action offered to users in several places of the UI.
• authentication-holder: Exposes the authentication API that every part of ActiveUI requiring authentication can consume.
• caption-producer: Produces captions based on the provided headers.
• cell-editor: A cell editor that can be added in a table.
• cell-renderer: Change the rendering of cells in a table.
• chart-overlay: Display an overlay over a chart.
• chart-time-formatter: Format date/time members on chart axis.
• comparator: Customizes the order in which tabular view and pivot table columns are displayed.
• formatter: Formats the caption.
• html-renderer: Responsible for converting plain text to HTML.
• logger: A plugin to handle logging side-effect.
• 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.
• numeric-scale-profile: A plugin used when computing numerical scales, in order to customize the mapping of a value on a scale.
• ordinal-color-scale: Provide a set of colors given a set of values.
• popup: Create a popup, to be used in the UI.
• row-action: Renders a row action, displayed at the end of each row (by default) in a table widget.
• row-style: Customizes the style of all the cells in a row.
• theme: Customizes the colors used by ActiveUI components.

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.
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-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-calculated-measure	Open a popup to create a calculated measure and add it to the MDX of the widget.
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-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-dashboard	An action available with dashboards only, to display a popup to add widgets in a dashboard.
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.
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).
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.
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 core widgets in the dashboard.
single-value-tooltip-show	Display a tooltip for the single value widget.
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-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-member-filter	Open a popup to filter on the current column
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:

activeUI.plugins.register({
  type: 'action,'
  key: 'my-custom-action',
  // returns an object of type ActionImplementationProperties
  createProperties(parameters) {
    return {
      execute: /* function (event: AnyEvent, actionPayload: ActionPayload): void */,
      getBadge: /* function (actionPayload: ActionPayload): (string|number)= */,
      getCaption: /* function (actionPayload: ActionPayload): TranslationPayload= */,
      getIconSrcKey: /* function (actionPayload: ActionPayload): string= */,
      getRightIconSrcKey: /* 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:

activeUI.plugins.register({
  type: 'authentication-holder,'
  key: 'my-custom-authentication-holder',
  // returns an object of type AuthenticationHolderImplementationProperties
  createProperties(parameters) {
    return {
      authenticate: /* function (): Promise.<*>= */,
      getRequestOptions: /* function (url: Url): Promise.<FetchInitParameters>= */,
      getSortedRoles: /* function (): SortedRoles? */,
      getUsername: /* function (): Username? */,
      invalidate: /* function (usedParameters: FetchInitParameters): 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 to produce 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:

activeUI.plugins.register({
  type: 'caption-producer,'
  key: 'my-custom-caption-producer',
  // returns an object of type HeaderCaptionProducerImplementationProperties
  createProperties(parameters) {
    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:

activeUI.plugins.register({
  type: 'cell-editor,'
  key: 'my-custom-cell-editor',
  // returns an object of type CellEditorImplementationProperties
  createProperties(parameters) {
    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-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:

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

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:

activeUI.plugins.register({
  type: 'chart-overlay,'
  key: 'my-custom-chart-overlay',
  // returns an object of type ChartOverlayImplementationProperties
  createProperties(parameters) {
    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-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:

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

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:

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

formatter #

Formats the caption

Available formatter plugins #

There are no exposed implementations of the formatter plugin.

Implement a custom formatter plugin #

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

Example:

activeUI.plugins.register({
  type: 'formatter,'
  key: 'my-custom-formatter',
  // returns an object of type FormatterImplementationProperties
  createProperties(parameters) {
    return {
      format: /* function (value: string, caption: string): string */
    };
  },
});

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:

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

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:

activeUI.plugins.register({
  type: '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-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:

activeUI.plugins.register({
  type: 'mdx-filter-selector,'
  key: 'my-custom-mdx-filter-selector',
  // returns an object of type MdxFilterSelectorImplementationProperties
  createProperties(parameters) {
    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:

activeUI.plugins.register({
  type: 'numeric-scale-profile,'
  key: 'my-custom-numeric-scale-profile',
  // returns an object of type NumericScaleProfileImplementationProperties
  createProperties(parameters) {
    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:

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

popup #

Create a popup, to be used in the UI.

Available popup plugins #

Key	Description
confirmation	A popup displaying a message, and asking for confirmation from the user

row-action #

Renders a row action, displayed at the end of each row (by default) 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:

activeUI.plugins.register({
  type: 'row-action,'
  key: 'my-custom-row-action',
  // returns an object of type RowActionImplementationProperties
  createProperties(parameters) {
    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:

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

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	Core dark theme.
explicit	Theme reading its properties from its parameters.
lean-dark-cerulean	Core lean dark theme.
lean-light-cerulean	Core lean light theme.
light-bluewood	Old light theme.
light-cerulean	Core light theme.

Implement a custom theme plugin #

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

Example:

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