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}
contextMenuItems={contextMenuItems}
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>>>
contextMenuItemsItemType[]
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
{...}
/>

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}
marginLeft={marginLeft}
mdx={mdx}
onCubeSelected={onCubeSelected}
serverKey={serverKey}
/>

DataModelTreeProps

PropertyTypeDescription
classNamestring
cubeNameCubeName
disabledKpiPropertiesKpiProperty[]
disabledLevelsLevelCoordinates[]
disabledMeasuresMeasureName[]
marginLeftnumber
mdxMdxSelectIf provided, mdx controls which cube options are disabled.
onCubeSelected(serverKey: string, cubeName: CubeName) => void
serverKeystring

DataVisualizationContentEditor

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

<DataVisualizationContentEditor
{...}
/>

DataVisualizationContentEditorProps

EditorProps<DataVisualizationWidgetState> & {
   extraSection?: JSX.Element;
   onTileMovedFromExtraSection?: (args: {
     dragItem: any;
     toPosition: TilePositionWithinWizard;
  }) => void;
}

DataVisualizationQueryEditor

Displays an MdxEditor hooked to the selected widget.

<DataVisualizationQueryEditor
{...}
/>

DefaultTableCell

Displays a cell in a table. This behavior can be overridden 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>

FiltersEditor

Displays a hierarchy 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>

KPIStatusTableCell

Displays a KPI Status cell in a table.

<KPIStatusTableCell
{...}
/>

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

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>

PlotlyColumnsAndLinesChart

Displays a Plotly "columns and lines" chart.

<PlotlyColumnsAndLinesChart
{...}
/>

PlotlyColumnsAndLinesChartProps

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

PropertyTypeDescription
children[ReactNode, ReactNode]
classNamestring
direction"column" | "row"
dragHandleStyleCSSProperties
firstChildStyleCSSProperties
isResizingDisabledboolean
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 canShare permission.

<SaveAsPopup
contentTree={contentTree}
contentType={contentType}
defaultName={defaultName}
isVisible={isVisible}
onClose={onClose}
onSubmit={onSubmit}
pathToParentFolder={pathToParentFolder}
/>

SaveAsPopupProps

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

ShareForm

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

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

ShareFormProps

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

Title

A component that wraps antd's Title and allows us to customize its style.

<Title
disabled={disabled}
level={level}
/>

TitleProps

PropertyTypeDescription
disabledboolean
level1 | 2 | 3 | 4 | 5

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
inputCssCSSObject
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}
contextMenuItems={contextMenuItems}
defaultExpandedPaths={defaultExpandedPaths}
doesSelectionIncludeChildren={doesSelectionIncludeChildren}
doSearchResultsIncludeFolders={doSearchResultsIncludeFolders}
expandedPaths={expandedPaths}
flatValue={flatValue}
focusedIndex={focusedIndex}
getDefaultCaption={getDefaultCaption}
hasCheckbox={hasCheckbox}
hoverStyle={hoverStyle}
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

PropertyTypeDescription
areEmptyFoldersExpandableboolean
classNamestring
contextMenuItemsItemType[]
defaultExpandedPathsnumber[][]
doesSelectionIncludeChildrenboolean
doSearchResultsIncludeFoldersboolean
expandedPathsnumber[][]
flatValueInternalNode<NodeType>[]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
isLoadingboolean
isSearchVisibleboolean
isSelectableboolean
lineHeightnumber
NodeComponentType<NodeProps<NodeType>>
NodeIconComponentType<NodeIconProps<NodeType>>
nodeStyleCSSProperties
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
searchInputActionReactNode
searchPlaceholderstring
searchResultsInternalNode<NodeType>[]
searchResultsDisplayShape"tree" | "list"
searchValuestring
selectedPathsnumber[][]
selectionStyleCSSProperties
styleCSSProperties
valueTreeObject<NodeType>[]
valueFilteredAccordingToSearchTreeObject<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

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