Components

CellSetTable

Displays a table representing a CellSet.

<CellSetTable

Cell={Cell}

containerStyle={containerStyle}

data={data}

isRowHeaderTree={isRowHeaderTree}

onChange={onChange}

onScroll={onScroll}

onSelectionChange={onSelectionChange}

widgetState={widgetState}

/>

Property	Type	Description
Cell	ForwardRefExoticComponent<CellSetTableCellProps & RefAttributes<HTMLDivElement>>
containerStyle	CSSProperties
data	CellSet
isRowHeaderTree	boolean
onChange	(updatedWidgetState: TableWidgetState) => void
onScroll	(newPosition: {    scrollTop: number;    scrollLeft: number; }) => void
onSelectionChange	(newSelection: CellSetSelection) => void
widgetState	TableWidgetState

ContentTree

Displays a tree of saved widgets or dashboards

<ContentTree

areFilesVisible={areFilesVisible}

className={className}

ContextMenu={ContextMenu}

doesSelectionIncludeChildren={doesSelectionIncludeChildren}

getDefaultCaption={getDefaultCaption}

getDragItem={getDragItem}

hoverStyle={hoverStyle}

isSearchVisible={isSearchVisible}

isSelectable={isSelectable}

lineHeight={lineHeight}

nodeStyle={nodeStyle}

onClick={onClick}

rootNodeCaption={rootNodeCaption}

searchPlaceholder={searchPlaceholder}

selectedPaths={selectedPaths}

selectionStyle={selectionStyle}

structure={structure}

/>

Property	Type	Description
areFilesVisible	boolean
className	string
ContextMenu	ComponentType<TreeContextMenuProps<ContentNode<T>>>
doesSelectionIncludeChildren	boolean
getDefaultCaption	(node?: ContentNode<T>) => string
getDragItem	(id: string, metaData: T) => void
hoverStyle	CSSProperties
isSearchVisible	boolean
isSelectable	boolean
lineHeight	number
nodeStyle	CSSProperties
onClick	(node: ContentNode<T>, path: number[]) => void
rootNodeCaption	string
searchPlaceholder	string
selectedPaths	number[][]
selectionStyle	CSSProperties
structure	ContentRecord<T>

CreateFolderModal

Displays a modal allowing users to create a folder on the Content Server.

<CreateFolderModal

contentType={contentType}

isVisible={isVisible}

onCancel={onCancel}

onSubmit={onSubmit}

parentFolder={parentFolder}

pathToParentFolder={pathToParentFolder}

title={title}

/>

Property	Type	Description
contentType	ContentType
isVisible	boolean
onCancel	() => void
onSubmit	() => void
parentFolder	ContentEntry<AMetaData> | null
pathToParentFolder	string[]
title	string

Dashboard

Renders multiple resizable and draggable data exploration widgets.

<Dashboard

isDeferred={isDeferred}

onIsDeferredChange={onIsDeferredChange}

/>

Property	Type	Description
isDeferred	boolean
onIsDeferredChange	(newState: boolean) => void

DataModelTree

Displays the tree of measures and dimensions contained in a cube.

<DataModelTree

className={className}

cubeName={cubeName}

disabledKpiProperties={disabledKpiProperties}

disabledLevels={disabledLevels}

disabledMeasures={disabledMeasures}

mdx={mdx}

onClick={onClick}

onCubeSelected={onCubeSelected}

serverKey={serverKey}

/>

Property	Type	Description
className	string
cubeName	CubeName	If cubeName is omitted, the data model tree shows the content of all cubes
disabledKpiProperties	KpiProperty[]
disabledLevels	LevelCoordinates[]
disabledMeasures	MeasureName[]
mdx	MdxSelect	If provided, mdx controls which cube options are disabled.
onClick	(node: DataModelNode) => void
onCubeSelected	(serverKey: string, cubeName: CubeName) => void
serverKey	string

DataVisualizationContentEditor

Displays a data model tree and a wizard, allowing to add levels and measures to the select widget's attributes.

<DataVisualizationContentEditor

{...}

/>

DrillthroughTable

Displays the result of an MdxDrillthrough query in a table.

<DrillthroughTable

{...}

/>

FileExplorer

Displays a file explorer allowing the user to navigate folders and choose a folder or a file.

<FileExplorer

contentTree={contentTree}

contentType={contentType}

foldersAndFiles={foldersAndFiles}

menuItems={menuItems}

onFolderChanged={onFolderChanged}

onSelectionChanged={onSelectionChanged}

pathToFolder={pathToFolder}

selectedItemIndex={selectedItemIndex}

style={style}

/>

Property	Type	Description
contentTree	ContentRecord
contentType	ContentType
foldersAndFiles	{    id: string;    name?: string;    isFolder: boolean; }[]
menuItems	ComponentType<AntMenuItemProps & ContentTreeMenuItemProps>[]
onFolderChanged	(path: string[]) => void
onSelectionChanged	(newSelectedItemIndex: number | undefined) => void
pathToFolder	string[]
selectedItemIndex	number
style	CSSProperties

FiltersEditor

Displays a data model tree and a filter wizard. Either stacked horizontally or vertically, depending on how wide the parent is.

<FiltersEditor

{...}

/>

FormRow

Displays a styled row with a label on the left and an input on the right, useful in a form.

<FormRow

{...}

/>

HighlightedSearchResult

Displays the label of a search result, highlighting the matched part of it.

<HighlightedSearchResult

isDisabled={isDisabled}

path={path}

/>

Property	Type	Description
isDisabled	boolean
path	string

KpiComponent

Displays one or several high level KPIs. Can optionally be used to display comparisons of KPIs, for instance across 2 dates or 2 scenarios.

<KpiComponent

{...}

/>

LazyLoadedCellSetTable

Displays a horizontally and vertically infinitely scrollable table. Requests a new range of cells from the server each time the user scrolls out of the currently loaded one. Useful for very large tables.

<LazyLoadedCellSetTable

onRangesChange={onRangesChange}

rangesConfiguration={rangesConfiguration}

/>

Property	Type	Description
onRangesChange	(newRanges: {    [axisId in AxisId]?: QueryRange; }) => void
rangesConfiguration	RangesConfiguration

LoadingBackground

The application loading background. It can be used as a placeholder while waiting for the asynchronous initialization of some React contexts for example.

<LoadingBackground

{...}

/>

MenuItemCreateFolder

Context menu item allowing users to create a folder on the Content Server.

<MenuItemCreateFolder

{...}

/>

MenuItemDeleteFile

Context menu item allowing users to delete a file from the Content Server.

<MenuItemDeleteFile

{...}

/>

MenuItemDeleteFolder

Context menu item allowing users to delete a folder from the Content Server.

<MenuItemDeleteFolder

{...}

/>

MenuItemMoveFileOrFolder

Context menu item allowing users to move a file or folder into a folder on the Content Server.

<MenuItemMoveFileOrFolder

{...}

/>

MenuItemRenameFolder

Context menu item allowing users to rename a folder on the Content Server.

<MenuItemRenameFolder

{...}

/>

PivotTable

Displays a pivot table.

<PivotTable

{...}

/>

Plotly100StackedAreaChart

Displays a Plotly stacked area chart, normalized in order to highlight the relative contribution of each series to each point on the X axis.

<Plotly100StackedAreaChart

{...}

/>

Plotly100StackedBarChart

Displays a Plotly stacked bar chart, normalized in order to highlight the relative contribution of each series to each point on the Y axis.

<Plotly100StackedBarChart

{...}

/>

Plotly100StackedColumnChart

Displays a Plotly stacked column chart, normalized in order to highlight the relative contribution of each series to each point on the X axis.

<Plotly100StackedColumnChart

{...}

/>

PlotlyAreaChart

Displays a Plotly area chart.

<PlotlyAreaChart

{...}

/>

PlotlyBulletChart

Displays a Plotly bullet chart.

<PlotlyBulletChart

{...}

/>

PlotlyClusteredBarChart

Displays a Plotly clustered bar chart.

<PlotlyClusteredBarChart

{...}

/>

PlotlyClusteredColumnChart

Displays a Plotly clustered column chart.

<PlotlyClusteredColumnChart

{...}

/>

PlotlyComboChart

Displays a Plotly "columns and lines" chart.

<PlotlyComboChart

{...}

/>

PlotlyDonutChart

Displays a Plotly donut chart.

<PlotlyDonutChart

{...}

/>

PlotlyGaugeChart

Displays a Plotly gauge chart.

<PlotlyGaugeChart

{...}

/>

PlotlyLineChart

Displays a Plotly line chart.

<PlotlyLineChart

{...}

/>

PlotlyPieChart

Displays a Plotly pie chart.

<PlotlyPieChart

{...}

/>

PlotlyRadarChart

Displays a Plotly radar chart.

<PlotlyRadarChart

{...}

/>

PlotlyScatterPlot

Displays a Plotly scatter plot.

<PlotlyScatterPlot

{...}

/>

PlotlyStackedAreaChart

Displays a Plotly stacked area chart.

<PlotlyStackedAreaChart

{...}

/>

PlotlyStackedBarChart

Displays a Plotly stacked bar chart.

<PlotlyStackedBarChart

{...}

/>

PlotlyStackedColumnChart

Displays a Plotly stacked column chart.

<PlotlyStackedColumnChart

{...}

/>

PlotlyTreeMap

Displays a Plotly treemap.

<PlotlyTreeMap

{...}

/>

PlotlyWaterfallChart

Displays a Plotly waterfall chart.

<PlotlyWaterfallChart

{...}

/>

Resizable

Accepts two children. Displays them next to each other. The first one is resizable.

<Resizable

children={children}

className={className}

direction={direction}

dragHandleStyle={dragHandleStyle}

firstChildStyle={firstChildStyle}

minSize={minSize}

onResizeEnd={onResizeEnd}

secondChildStyle={secondChildStyle}

size={size}

style={style}

/>

Property	Type	Description
children	[ReactNode, ReactNode]
className	string
direction	"column" | "row"
dragHandleStyle	CSSProperties
firstChildStyle	CSSProperties
minSize	number
onResizeEnd	(newSize: number) => void
secondChildStyle	CSSProperties
size	number
style	CSSProperties

SaveAsPopup

A popup which allows a user to save a dashboard, widget or filter as a new content file. The user must choose a folder and name for the file and can also share it with other users if he has the ROLE_SHARE role.

<SaveAsPopup

contentTree={contentTree}

contentType={contentType}

isVisible={isVisible}

onClose={onClose}

onSubmit={onSubmit}

pathToFolder={pathToFolder}

/>

Property	Type	Description
contentTree	ContentRecord<DashboardMetaData | WidgetMetaData | FilterMetaData> | null
contentType	ContentType
isVisible	boolean
onClose	(event: MouseEvent) => void
onSubmit	(name: string, pathToFolder: string[], permissions: Permission[]) => Promise<void>
pathToFolder	string[]

ShareForm

A form to allow sharing dashboards, widgets and filters between users.

<ShareForm

onPermissionsChange={onPermissionsChange}

permissions={permissions}

/>

Property	Type	Description
onPermissionsChange	(permissions: Permission[]) => void
permissions	Permission[]

TitleInput

Displays an editable title. Used for dashboard and widget names.

<TitleInput

className={className}

inputCss={inputCss}

isPlaceholder={isPlaceholder}

isStrictlySized={isStrictlySized}

onChange={onChange}

tooltipValue={tooltipValue}

value={value}

/>

Property	Type	Description
className	string
inputCss	ObjectInterpolation<undefined>
isPlaceholder	boolean
isStrictlySized	boolean
onChange	(newValue: string) => void
tooltipValue	string
value	string

Widget

Displays the WidgetPlugin identified by the given widgetKey in the PluginRegistry provided by the closest PluginsProvider.

<Widget

isDeferred={isDeferred}

onChange={onChange}

onLoaded={onLoaded}

onSelectionChange={onSelectionChange}

queryId={queryId}

style={style}

widgetState={widgetState}

/>

Property	Type	Description
isDeferred	boolean
onChange	(newState: WidgetState) => void
onLoaded	() => void
onSelectionChange	(newSelection: SelectionType) => void
queryId	string
style	CSSProperties
widgetState	WidgetState

WidgetError

Displays a message specific to the caught error. If the error is unknown, defaults to showing the error message with a Retry button.

<WidgetError

onChange={onChange}

widgetState={widgetState}

/>

Property	Type	Description
onChange	(newState: AWidgetState) => void
widgetState	AWidgetState

WidgetsRibbon

Displays each available WidgetPlugin. Allows to add it to a dashboard by dragging it. Allows to switch the type of a data visualization widget already present in the dashboard by clicking the icon corresponding to the target type.

<WidgetsRibbon

onSelectedWidgetStateChanged={onSelectedWidgetStateChanged}

selectedWidgetState={selectedWidgetState}

/>

Property	Type	Description
onSelectedWidgetStateChanged	(newSelectedWidgetState: AWidgetState) => void
selectedWidgetState	AWidgetState

withCube

HOC providing a cube to its child, or displaying a placeholder if the cube is not accessible yet. Defaults serverKey to the key of the first provided server, when props.widgetState.serverKey is not defined. Defaults cube to the first cube of the target server, when props.widgetState.query does not include a cube name.

<withCube

{...}

/>