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#
| 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 | |
| onVisibleRangeChanged | (visibleRange: GridRange) => void | |
| widgetState | TableWidgetState |
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#
| Property | Type | Description |
|---|---|---|
| areFilesVisible | boolean | |
| className | string | |
| ContentNodeIcon | FC<NodeIconProps<ContentNode<T>>> | |
| 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}/>CreateFolderModalProps#
| 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}/>DashboardProps#
| 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} onNewCalculationClicked={onNewCalculationClicked} serverKey={serverKey}/>DataModelTreeProps#
| 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<"with-hierarchy-folders">) => void | |
| onCubeSelected | (serverKey: string, cubeName: CubeName) => void | |
| onNewCalculationClicked | () => 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 {...}/>DataVisualizationContentEditorProps#
EditorProps<DataVisualizationWidgetState> & {
extraSection?: JSX.Element;
onTileMovedFromExtraSection?: (toSection: string, item: any, toPosition: number) => void;
}
DataVisualizationQueryEditor#
Displays an MdxEditor hooked to the selected widget.
<DataVisualizationQueryEditor {...}/>DefaultTableCell#
Displays a cell in a table. This behaviour can be overriden by passing a Cell prop to Table.
<DefaultTableCell {...}/>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#
| Property | Type | Description |
|---|---|---|
| error | Error | |
| resetErrorBoundary | () => void | |
| text | string |
FileExplorer#
Displays a file explorer allowing the user to navigate folders and choose a folder or a file.
<FileExplorer contentTree={contentTree} contentType={contentType} disabledPaths={disabledPaths} foldersAndFiles={foldersAndFiles} menuItems={menuItems} onFolderChanged={onFolderChanged} onSelectedIndicesChanged={onSelectedIndicesChanged} onSelectionChanged={onSelectionChanged} pathToFolder={pathToFolder} selectedIndices={selectedIndices} selectedItemIndex={selectedItemIndex} style={style}/>FileExplorerProps#
| Property | Type | Description |
|---|---|---|
| contentTree | ContentRecord | |
| contentType | ContentType | |
| disabledPaths | string[][] | |
| foldersAndFiles | { id: string; name?: string; isFolder: boolean; widgetKey?: string; }[] | |
| menuItems | ComponentType<AntMenuItemProps & ContentTreeMenuItemProps>[] | |
| onFolderChanged | (path: string[]) => void | |
| onSelectedIndicesChanged | (index: number | undefined, event: MouseEvent<unknown, unknown>) => void | |
| onSelectionChanged | (newSelectedItemIndex: number | undefined) => void | |
| pathToFolder | string[] | |
| selectedIndices | number[] | |
| selectedItemIndex | number | |
| style | CSSProperties |
FiltersEditor#
Displays a hierarchy tree and a filter wizard. Either stacked horizontally or vertically, depending on how wide the parent is.
<FiltersEditor {...}/>FiltersEditorProps#
- EditorProps<WidgetState> & EditorProps<WidgetState> & { queryType?: "drillthrough"
- "select"; }
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} className={className} isDisabled={isDisabled} searchValue={searchValue} path={path}/>HighlightedSearchResultProps#
| Property | Type | Description |
|---|---|---|
| caption | string | |
| className | string | |
| isDisabled | boolean | |
| searchValue | string | |
| 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 {...}/>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#
| 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 | |
| onVisibleRangeChanged | (visibleRange: GridRange) => void | |
| widgetState | TableWidgetState | |
| 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#
Deprecated
use MenuItemMoveFilesAndFolders instead.
Context menu item allowing users to move a file or folder into a folder on the Content Server.
<MenuItemMoveFileOrFolder {...}/>MenuItemMoveFileOrFolderProps#
AntMenuItemProps & ContentTreeMenuItemProps
MenuItemMoveFilesAndFolders#
Context menu item allowing users to move files and folders into a folder on the Content Server.
<MenuItemMoveFilesAndFolders {...}/>MenuItemMoveFilesAndFoldersProps#
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} isResizingDisabled={isResizingDisabled} minSize={minSize} onResizeEnd={onResizeEnd} secondChildStyle={secondChildStyle} size={size} style={style}/>ResizableProps#
| Property | Type | Description |
|---|---|---|
| children | [ReactNode, ReactNode] | |
| className | string | |
| direction | "column" | "row" | |
| dragHandleStyle | CSSProperties | |
| firstChildStyle | CSSProperties | |
| isResizingDisabled | boolean | |
| 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 canShare permission.
<SaveAsPopup contentTree={contentTree} contentType={contentType} defaultName={defaultName} isVisible={isVisible} onClose={onClose} onSubmit={onSubmit} pathToFolder={pathToFolder}/>SaveAsPopupProps#
| Property | Type | Description |
|---|---|---|
| contentTree | ContentRecord<DashboardMetaData | WidgetMetaData | FilterMetaData> | null | |
| contentType | ContentType | |
| defaultName | string | |
| 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}/>ShareFormProps#
| Property | Type | Description |
|---|---|---|
| onPermissionsChange | (permissions: Permission[]) => void | |
| permissions | Permission[] |
Table#
Displays a table. Features:
Virtualization.
Scroll (called back but not controlled, for performance reasons).
Frozen rows and columns (i.e. an optional top header, potentially spanning across several rows and an optional left header, potentially spanning across several columns).
Selection (called back but not controlled, for performance reasons).
Columns resizing.
<Table areFrozenColumnsIgnored={areFrozenColumnsIgnored} Cell={Cell} cells={cells} columnWidths={columnWidths} containerRef={containerRef} hiddenColumns={hiddenColumns} isTotal={isTotal} numberOfFrozenColumns={numberOfFrozenColumns} numberOfFrozenRows={numberOfFrozenRows} onColumnsResized={onColumnsResized} onColumnsShown={onColumnsShown} onFrozenColumnsIgnored={onFrozenColumnsIgnored} onKeyDown={onKeyDown} onKeyUp={onKeyUp} onScrolled={onScrolled} onSelectionChanged={onSelectionChanged} onVisibleRangeChanged={onVisibleRangeChanged} size={size} style={style}/>TableProps#
| Property | Type | Description |
|---|---|---|
| areFrozenColumnsIgnored | boolean | If the table is resized and becomes so thin that frozen columns would be larger than its total width, then they can be ignored so that the user can still scroll horizontally in order to see the columns to the right. This prop allows to control this behavior. |
| Cell | ComponentType<CellProps> | |
| cells | TableCell[][] | |
| columnWidths | { [columnIndex: number]: number; } | |
| containerRef | RefObject<HTMLDivElement> | |
| hiddenColumns | Set<number> | The indices of the hidden columns. |
| isTotal | (rowIndex: number) => boolean | |
| numberOfFrozenColumns | number | |
| numberOfFrozenRows | number | |
| onColumnsResized | (updatedColumnWidths: { [columnIndex: number]: number; }) => void | |
| onColumnsShown | (columnIndices: number[]) => void | Called back when the user clicks the double caret indicating the presence of hidden columns, in order to make them visible again. |
| onFrozenColumnsIgnored | (areFrozenColumnsIgnored: boolean) => void | |
| onKeyDown | (event: KeyboardEvent<HTMLDivElement>) => void | |
| onKeyUp | (event: KeyboardEvent<HTMLDivElement>) => void | |
| onScrolled | (newPosition: { scrollTop: number; scrollLeft: number; }) => void | |
| onSelectionChanged | (selection: SelectionRange[]) => void | |
| onVisibleRangeChanged | (visibleRange: GridRange) => void | Allows to subscribe to changes of visible row and column index ranges. onVisibleRangeChanged is typically called back when the user scrolls or resizes the table or a column. |
| size | "small" | "medium" | "large" | |
| style | CSSProperties |
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#
| Property | Type | Description |
|---|---|---|
| className | string | |
| inputCss | ObjectInterpolation<undefined> | |
| isPlaceholder | boolean | |
| isStrictlySized | boolean | |
| onChange | (newValue: string) => void | |
| tooltipValue | string | |
| value | string |
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} header={header} hoverStyle={hoverStyle} isFullyExpanded={isFullyExpanded} isLoading={isLoading} isSearchVisible={isSearchVisible} isSelectable={isSelectable} lineHeight={lineHeight} Node={Node} NodeIcon={NodeIcon} nodeStyle={nodeStyle} onClick={onClick} onExpandedPathsChange={onExpandedPathsChange} onFocusedIndexChanged={onFocusedIndexChanged} onNodeEditEnded={onNodeEditEnded} onSearchValueChanged={onSearchValueChanged} onSelectedPathsChange={onSelectedPathsChange} searchInputAction={searchInputAction} searchPlaceholder={searchPlaceholder} searchResults={searchResults} searchResultsDisplayShape={searchResultsDisplayShape} searchValue={searchValue} selectedPaths={selectedPaths} selectionStyle={selectionStyle} style={style} value={value} valueFilteredAccordingToSearch={valueFilteredAccordingToSearch}/>TreeProps#
| Property | Type | Description |
|---|---|---|
| areEmptyFoldersExpandable | boolean | |
| className | string | |
| ContextMenu | ComponentType<TreeContextMenuProps<NodeType>> | |
| defaultExpandedPaths | number[][] | |
| doesSelectionIncludeChildren | boolean | |
| doSearchResultsIncludeFolders | boolean | |
| expandedPaths | number[][] | |
| 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. |
| focusedIndex | number | |
| getDefaultCaption | (node?: NodeType) => string | |
| hasCheckbox | (node: NodeType) => boolean | |
| header | JSX.Element | A header allowing to add a title inbetween the search and the tree. |
| hoverStyle | CSSProperties | |
| isFullyExpanded | boolean | Whether all parent nodes in the tree are expanded. When true, the user is not allowed to collapse any node. |
| isLoading | boolean | |
| isSearchVisible | boolean | |
| isSelectable | boolean | |
| lineHeight | number | |
| Node | ComponentType<NodeProps> | |
| NodeIcon | ComponentType<NodeIconProps> | |
| nodeStyle | CSSProperties | |
| onClick | (node: NodeType, path: number[], event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLInputElement>) => void | |
| onExpandedPathsChange | (newExpandedPaths: number[][], expansionAction: ExpansionAction) => void | |
| onFocusedIndexChanged | (newFocusedIndex: number) => void | |
| onNodeEditEnded | (path: number[], caption: string) => void | |
| onSearchValueChanged | (newSearchValue: string) => void | |
| onSelectedPathsChange | (newSelectedPaths: number[][]) => void | |
| searchInputAction | ReactNode | |
| searchPlaceholder | string | |
| searchResults | NodeType[] | TreeObject<NodeType>[] | |
| searchResultsDisplayShape | "tree" | "list" | |
| searchValue | string | |
| selectedPaths | number[][] | |
| selectionStyle | CSSProperties | |
| style | CSSProperties | |
| value | TreeObject<NodeType>[] | |
| valueFilteredAccordingToSearch | TreeObject<NodeType>[] | If provided, it allows for a custom search mechanism, such as server-side search. If not provided, the tree component filters its props.value according to props.searchValue on the client-side. |
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#
| 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 dashboardState={dashboardState} onChange={onChange} pageKey={pageKey} queryId={queryId} widgetState={widgetState}/>WidgetErrorProps#
| Property | Type | Description |
|---|---|---|
| dashboardState | DashboardState | |
| onChange | (newState: WidgetState) => void | |
| pageKey | string | |
| queryId | string | |
| widgetState | WidgetState |
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#
| Property | Type | Description |
|---|---|---|
| onSelectedWidgetStateChanged | (newSelectedWidgetState: AWidgetState) => void | |
| selectedWidgetQueryId | string | |
| 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.mdx does not include a cube name and no widgetState.initialCubeName is not defined.
<withCube {...}/>Wizard#
Displays a wizard containing sections and draggable tiles. These tiles can represent various things, like levels, measures or filters for instance.
<Wizard canDrop={canDrop} className={className} dragItemTypes={dragItemTypes} onAddButtonClicked={onAddButtonClicked} onKeyDown={onKeyDown} onTileAdded={onTileAdded} onTileEdited={onTileEdited} onTileMoved={onTileMoved} onTileRemoved={onTileRemoved} onTileSaved={onTileSaved} placeholder={placeholder} popover={popover} popoverInnerHeight={popoverInnerHeight} popoverPosition={popoverPosition} sections={sections}/>WizardProps#
| Property | Type | Description |
|---|---|---|
| canDrop | (sectionName: string, item: { type: string; } & any, targetPosition: number) => boolean | |
| className | string | |
| dragItemTypes | string[] | |
| onAddButtonClicked | (sectionName: string) => void | |
| onKeyDown | (event: KeyboardEvent<HTMLDivElement>) => void | |
| onTileAdded | (sectionName: string, item: { type: string; } & any, position: number, options: WizardActionOptions) => void | |
| onTileEdited | (sectionName: string, position: number) => void | |
| onTileMoved | (toSection: string, item: { type: string; } & any, toPosition: number, options: WizardActionOptions) => void | |
| onTileRemoved | (sectionName: string, position: number, options: WizardActionOptions) => void | |
| onTileSaved | (sectionName: string, position: number) => void | |
| placeholder | string | Deprecated: use WizardSection.placeholder instead. The placeholder text displayed when a WizardSection is empty. |
| popover | ReactNode | |
| popoverInnerHeight | number | |
| popoverPosition | { tileIndex?: number; sectionName: string; } | null | |
| sections | { [sectionName: string]: WizardSection; } |