Skip to main content

Components

CellSetTable#

Displays a table representing a CellSet.

<CellSetTable    Cell={Cell}    containerStyle={containerStyle}    data={data}    isRowHeaderTree={isRowHeaderTree}    onChange={onChange}    onScroll={onScroll}    onSelectionChange={onSelectionChange}    onVisibleRangeChanged={onVisibleRangeChanged}    widgetState={widgetState}/>

CellSetTableProps#

PropertyTypeDescription
CellForwardRefExoticComponent<CellSetTableCellProps & RefAttributes<HTMLDivElement>>
containerStyleCSSProperties
dataCellSet
isRowHeaderTreeboolean
onChange(updatedWidgetState: TableWidgetState) => void
onScroll(newPosition: {
   scrollTop: number;
   scrollLeft: number;
}) => void
onSelectionChange(newSelection: CellSetSelection) => void
onVisibleRangeChanged(visibleRange: GridRange) => void
widgetStateTableWidgetState

CenteredTitle#

Displays a title, centered horizontally and vertically within its parent Component.

<CenteredTitle    {...}/>

ContentNodeIcon#

Displays the icon on the left of nodes in content trees. Represents a server, a folder or a file.

<ContentNodeIcon    {...}/>

ContentTree#

Displays a tree of saved widgets or dashboards

<ContentTree    areFilesVisible={areFilesVisible}    className={className}    ContentNodeIcon={ContentNodeIcon}    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}/>

ContentTreeProps#

PropertyTypeDescription
areFilesVisibleboolean
classNamestring
ContentNodeIconFC<NodeIconProps<ContentNode<T>>>
ContextMenuComponentType<TreeContextMenuProps<ContentNode<T>>>
doesSelectionIncludeChildrenboolean
getDefaultCaption(node?: ContentNode<T>) => string
getDragItem(id: string, metaData: T) => void
hoverStyleCSSProperties
isSearchVisibleboolean
isSelectableboolean
lineHeightnumber
nodeStyleCSSProperties
onClick(node: ContentNode<T>, path: number[]) => void
rootNodeCaptionstring
searchPlaceholderstring
selectedPathsnumber[][]
selectionStyleCSSProperties
structureContentRecord<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}/>

CreateFolderModalProps#

PropertyTypeDescription
contentTypeContentType
isVisibleboolean
onCancel() => void
onSubmit() => void
parentFolderContentEntry<AMetaData> | null
pathToParentFolderstring[]
titlestring

Dashboard#

Renders multiple resizable and draggable data exploration widgets.

<Dashboard    isDeferred={isDeferred}    onIsDeferredChange={onIsDeferredChange}/>

DashboardProps#

PropertyTypeDescription
isDeferredboolean
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}    onNewCalculationClicked={onNewCalculationClicked}    serverKey={serverKey}/>

DataModelTreeProps#

PropertyTypeDescription
classNamestring
cubeNameCubeNameIf cubeName is omitted, the data model tree shows the content of all cubes
disabledKpiPropertiesKpiProperty[]
disabledLevelsLevelCoordinates[]
disabledMeasuresMeasureName[]
mdxMdxSelectIf provided, mdx controls which cube options are disabled.
onClick(node: DataModelNode) => void
onCubeSelected(serverKey: string, cubeName: CubeName) => void
onNewCalculationClicked() => void
serverKeystring

DataVisualizationContentEditor#

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

<DataVisualizationContentEditor    {...}/>

DataVisualizationContentEditorProps#

EditorProps<DataVisualizationWidgetState> & {
   extraSection?: JSX.Element;
   onTileMovedFromExtraSection?: (toSection: string, item: any, toPosition: number) => void;
}

DataVisualizationQueryEditor#

Displays an MdxEditor hooked to the selected widget.

<DataVisualizationQueryEditor    {...}/>

DrillthroughTable#

Displays the result of an MdxDrillthrough query in a table.

<DrillthroughTable    {...}/>

DrillthroughTableProps#

WidgetWithQueryProps<DrillthroughTableWidgetState, DrillthroughResult, DrillthroughSelection>

ErrorMessage#

Displays an error message. The error text is taken from the text prop if defined, or from the message of the error prop otherwise. If the resetErrorBoundary prop is passed, a button to trigger it is displayed.

<ErrorMessage    error={error}    resetErrorBoundary={resetErrorBoundary}    text={text}/>

ErrorMessageProps#

PropertyTypeDescription
errorError
resetErrorBoundary() => void
textstring

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}/>

FileExplorerProps#

PropertyTypeDescription
contentTreeContentRecord
contentTypeContentType
foldersAndFiles{
   id: string;
   name?: string;
   isFolder: boolean;
}[]
menuItemsComponentType<AntMenuItemProps & ContentTreeMenuItemProps>[]
onFolderChanged(path: string[]) => void
onSelectionChanged(newSelectedItemIndex: number | undefined) => void
pathToFolderstring[]
selectedItemIndexnumber
styleCSSProperties

FiltersEditor#

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

<FiltersEditor    {...}/>

FiltersEditorProps#

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    caption={caption}    isDisabled={isDisabled}    searchValue={searchValue}    path={path}/>

HighlightedSearchResultProps#

PropertyTypeDescription
captionstring
isDisabledboolean
searchValuestring
pathstring

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    {...}/>

KpiComponentProps#

WidgetWithQueryProps<KpiWidgetState>

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    Cell={Cell}    containerStyle={containerStyle}    data={data}    isRowHeaderTree={isRowHeaderTree}    onChange={onChange}    onScroll={onScroll}    onSelectionChange={onSelectionChange}    onVisibleRangeChanged={onVisibleRangeChanged}    widgetState={widgetState}    onQueryRangesChanged={onQueryRangesChanged}/>

LazyLoadedCellSetTableProps#

PropertyTypeDescription
CellForwardRefExoticComponent<CellSetTableCellProps & RefAttributes<HTMLDivElement>>
containerStyleCSSProperties
dataCellSet
isRowHeaderTreeboolean
onChange(updatedWidgetState: TableWidgetState) => void
onScroll(newPosition: {
   scrollTop: number;
   scrollLeft: number;
}) => void
onSelectionChange(newSelection: CellSetSelection) => void
onVisibleRangeChanged(visibleRange: GridRange) => void
widgetStateTableWidgetState
onQueryRangesChanged(newRanges: {
   [axisId in AxisId]?: QueryRange;
}) => void

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    {...}/>

MenuItemCreateFolderProps#

AntMenuItemProps & ContentTreeMenuItemProps

MenuItemDeleteFile#

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

<MenuItemDeleteFile    {...}/>

MenuItemDeleteFileProps#

AntMenuItemProps & ContentTreeMenuItemProps

MenuItemDeleteFilesAndFolders#

Context menu item allowing users to delete several files and folders from the Content Server.

<MenuItemDeleteFilesAndFolders    {...}/>

MenuItemDeleteFolder#

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

<MenuItemDeleteFolder    {...}/>

MenuItemDeleteFolderProps#

AntMenuItemProps & ContentTreeMenuItemProps

MenuItemMoveFileOrFolder#

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

<MenuItemMoveFileOrFolder    {...}/>

MenuItemMoveFileOrFolderProps#

AntMenuItemProps & ContentTreeMenuItemProps

MenuItemRenameFolder#

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

<MenuItemRenameFolder    {...}/>

MenuItemRenameFolderProps#

AntMenuItemProps & ContentTreeMenuItemProps

PivotTable#

Displays a pivot table.

<PivotTable    {...}/>

PivotTableProps#

WidgetWithQueryProps<TableWidgetState> & {
   isRowHeaderTree?: boolean;
}

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    {...}/>

Plotly100StackedAreaChartProps#

WidgetWithQueryProps<PlotlyWidgetState>

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    {...}/>

Plotly100StackedBarChartProps#

WidgetWithQueryProps<PlotlyWidgetState>

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    {...}/>

Plotly100StackedColumnChartProps#

WidgetWithQueryProps<PlotlyWidgetState>

PlotlyAreaChart#

Displays a Plotly area chart.

<PlotlyAreaChart    {...}/>

PlotlyAreaChartProps#

WidgetWithQueryProps<PlotlyWidgetState>

PlotlyBulletChart#

Displays a Plotly bullet chart.

<PlotlyBulletChart    {...}/>

PlotlyBulletChartProps#

WidgetWithQueryProps<PlotlyWidgetState>

PlotlyClusteredBarChart#

Displays a Plotly clustered bar chart.

<PlotlyClusteredBarChart    {...}/>

PlotlyClusteredBarChartProps#

WidgetWithQueryProps<PlotlyWidgetState>

PlotlyClusteredColumnChart#

Displays a Plotly clustered column chart.

<PlotlyClusteredColumnChart    {...}/>

PlotlyClusteredColumnChartProps#

WidgetWithQueryProps<PlotlyWidgetState>

PlotlyComboChart#

Displays a Plotly "columns and lines" chart.

<PlotlyComboChart    {...}/>

PlotlyComboChartProps#

WidgetWithQueryProps<PlotlyWidgetState>

PlotlyDonutChart#

Displays a Plotly donut chart.

<PlotlyDonutChart    {...}/>

PlotlyDonutChartProps#

WidgetWithQueryProps<PlotlyWidgetState>

PlotlyGaugeChart#

Displays a Plotly gauge chart.

<PlotlyGaugeChart    {...}/>

PlotlyGaugeChartProps#

WidgetWithQueryProps<PlotlyWidgetState>

PlotlyLineChart#

Displays a Plotly line chart.

<PlotlyLineChart    {...}/>

PlotlyLineChartProps#

WidgetWithQueryProps<PlotlyWidgetState>

PlotlyPieChart#

Displays a Plotly pie chart.

<PlotlyPieChart    {...}/>

PlotlyPieChartProps#

WidgetWithQueryProps<PlotlyWidgetState>

PlotlyRadarChart#

Displays a Plotly radar chart.

<PlotlyRadarChart    {...}/>

PlotlyRadarChartProps#

WidgetWithQueryProps<PlotlyWidgetState>

PlotlyScatterPlot#

Displays a Plotly scatter plot.

<PlotlyScatterPlot    {...}/>

PlotlyScatterPlotProps#

WidgetWithQueryProps<PlotlyWidgetState>

PlotlyStackedAreaChart#

Displays a Plotly stacked area chart.

<PlotlyStackedAreaChart    {...}/>

PlotlyStackedAreaChartProps#

WidgetWithQueryProps<PlotlyWidgetState>

PlotlyStackedBarChart#

Displays a Plotly stacked bar chart.

<PlotlyStackedBarChart    {...}/>

PlotlyStackedBarChartProps#

WidgetWithQueryProps<PlotlyWidgetState>

PlotlyStackedColumnChart#

Displays a Plotly stacked column chart.

<PlotlyStackedColumnChart    {...}/>

PlotlyStackedColumnChartProps#

WidgetWithQueryProps<PlotlyWidgetState>

PlotlyTreeMap#

Displays a Plotly treemap.

<PlotlyTreeMap    {...}/>

PlotlyTreeMapProps#

WidgetWithQueryProps<PlotlyWidgetState>

PlotlyWaterfallChart#

Displays a Plotly waterfall chart.

<PlotlyWaterfallChart    {...}/>

PlotlyWaterfallChartProps#

WidgetWithQueryProps<PlotlyWidgetState>

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}/>

ResizableProps#

PropertyTypeDescription
children[ReactNode, ReactNode]
classNamestring
direction"column" | "row"
dragHandleStyleCSSProperties
firstChildStyleCSSProperties
minSizenumber
onResizeEnd(newSize: number) => void
secondChildStyleCSSProperties
sizenumber
styleCSSProperties

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}    defaultName={defaultName}    isVisible={isVisible}    onClose={onClose}    onSubmit={onSubmit}    pathToFolder={pathToFolder}/>

SaveAsPopupProps#

PropertyTypeDescription
contentTreeContentRecord<DashboardMetaData | WidgetMetaData | FilterMetaData> | null
contentTypeContentType
defaultNamestring
isVisibleboolean
onClose(event: MouseEvent) => void
onSubmit(name: string, pathToFolder: string[], permissions: Permission[]) => Promise<void>
pathToFolderstring[]

ShareForm#

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

<ShareForm    onPermissionsChange={onPermissionsChange}    permissions={permissions}/>

ShareFormProps#

PropertyTypeDescription
onPermissionsChange(permissions: Permission[]) => void
permissionsPermission[]

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}/>

TitleInputProps#

PropertyTypeDescription
classNamestring
inputCssObjectInterpolation<undefined>
isPlaceholderboolean
isStrictlySizedboolean
onChange(newValue: string) => void
tooltipValuestring
valuestring

Tree#

Renders nested structures such as saved dashboards or data model trees.

<Tree    areEmptyFoldersExpandable={areEmptyFoldersExpandable}    className={className}    ContextMenu={ContextMenu}    defaultExpandedPaths={defaultExpandedPaths}    doesSelectionIncludeChildren={doesSelectionIncludeChildren}    doSearchResultsIncludeFolders={doSearchResultsIncludeFolders}    expandedPaths={expandedPaths}    flatValue={flatValue}    focusedIndex={focusedIndex}    getDefaultCaption={getDefaultCaption}    hasCheckbox={hasCheckbox}    hoverStyle={hoverStyle}    isSearchVisible={isSearchVisible}    isSelectable={isSelectable}    lineHeight={lineHeight}    Node={Node}    NodeIcon={NodeIcon}    nodeStyle={nodeStyle}    onClick={onClick}    onExpandedPathsChange={onExpandedPathsChange}    onFocusedIndexChanged={onFocusedIndexChanged}    onNodeEditEnded={onNodeEditEnded}    onSearchValueChanged={onSearchValueChanged}    onSelectedPathsChange={onSelectedPathsChange}    searchPlaceholder={searchPlaceholder}    searchResults={searchResults}    searchValue={searchValue}    selectedPaths={selectedPaths}    selectionStyle={selectionStyle}    style={style}    value={value}/>

TreeProps#

PropertyTypeDescription
areEmptyFoldersExpandableboolean
classNamestring
ContextMenuComponentType<TreeContextMenuProps<NodeType>>
defaultExpandedPathsnumber[][]
doesSelectionIncludeChildrenboolean
doSearchResultsIncludeFoldersboolean
expandedPathsnumber[][]
flatValue(NodeType & {
   path: number[];
   parentNames: string;
})[]
flatValue is useful when searchValue is controlled. In this case, it is needed by the Tree's parent in order to compute searchResults.
focusedIndexnumber
getDefaultCaption(node?: NodeType) => string
hasCheckbox(node: NodeType) => boolean
hoverStyleCSSProperties
isSearchVisibleboolean
isSelectableboolean
lineHeightnumber
NodeComponentType<NodeProps>
NodeIconComponentType<NodeIconProps>
nodeStyleCSSProperties
onClick(node: NodeType, path: number[], event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLInputElement>) => void
onExpandedPathsChange(newExpandedPaths: number[][]) => void
onFocusedIndexChanged(newFocusedIndex: number) => void
onNodeEditEnded(path: number[], caption: string) => void
onSearchValueChanged(newSearchValue: string) => void
onSelectedPathsChange(newSelectedPaths: number[][]) => void
searchPlaceholderstring
searchResultsNodeType[]
searchValuestring
selectedPathsnumber[][]
selectionStyleCSSProperties
styleCSSProperties
valueTreeObject<NodeType>[]

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}/>

WidgetProps#

PropertyTypeDescription
isDeferredboolean
onChange(newState: WidgetState) => void
onLoaded() => void
onSelectionChange(newSelection: SelectionType) => void
queryIdstring
styleCSSProperties
widgetStateWidgetState

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    dashboardState={dashboardState}    onChange={onChange}    pageKey={pageKey}    widgetState={widgetState}/>

WidgetErrorProps#

PropertyTypeDescription
dashboardStateDashboardState
onChange(newState: WidgetState) => void
pageKeystring
widgetStateWidgetState

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}    selectedWidgetQueryId={selectedWidgetQueryId}    selectedWidgetState={selectedWidgetState}/>

WidgetsRibbonProps#

PropertyTypeDescription
onSelectedWidgetStateChanged(newSelectedWidgetState: AWidgetState) => void
selectedWidgetQueryIdstring
selectedWidgetStateAWidgetState

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    {...}/>