Components

CellSetTable

Displays a table representing a CellSet.

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

CellSetTableProps

Property	Type	Description
Cell	ForwardRefExoticComponent<PropsWithRef<CellSetTableCellProps>>
containerStyle	CSSProperties
data	CellSet
hideRedundantTotals	boolean
isRowHeaderTree	boolean
onChange	(updatedWidgetState: TableWidgetState) => void
onRowsActioned	(tuples: Tuple[]) => void
onScroll	(newPosition: {    scrollTop: number;    scrollLeft: number; }) => void
onSelectionChange	(newSelection: CellSetSelection, newLowLevelSelection: AnchoredRange2D[]) => void
onVisibleRangeChanged	(visibleRange: Range2D) => void
widgetState	TableWidgetState

CenteredTitle

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

<CenteredTitle
	{...}
/>

Collapsible

A component that wraps a collapsible component, allowing to toggle between collapsed and expanded.

<Collapsible
	{...}
/>

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}
  expandTrigger={expandTrigger}
  getDefaultCaption={getDefaultCaption}
  getDragItem={getDragItem}
  hoverStyle={hoverStyle}
  isSearchVisible={isSearchVisible}
  isSelectable={isSelectable}
  lineHeight={lineHeight}
  nodeStyle={nodeStyle}
  onClick={onClick}
  searchPlaceholder={searchPlaceholder}
  selectedPaths={selectedPaths}
  selectionStyle={selectionStyle}
  structure={structure}
/>

ContentTreeProps

Property	Type	Description
areFilesVisible	boolean
className	string
ContentNodeIcon	FC<NodeIconProps<ContentNode<T>>>
contextMenuItems	ItemType[]
doesSelectionIncludeChildren	boolean
expandTrigger	TreeProps["expandTrigger"]	Whether folder nodes can be opened by clicking on their full name, or only on the caret on their left. By default, they can be opened only by clicking on the caret on their left.
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
searchPlaceholder	string
selectedPaths	number[][]
selectionStyle	CSSProperties
structure	ContentRecord<T>

CreateFolderModal

Displays a modal to create a folder.

<CreateFolderModal
	{...}
/>

Dashboard

Renders multiple resizable and draggable data exploration widgets.

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

DashboardProps

Property	Type	Description
isBrandSignatureVisible	boolean	If not false, *By ActiveViam* will be visible in the bottom right corner of the dashboard.
isDeferred	boolean
onIsDeferredChange	(newState: boolean) => void

DataModelTree

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

<DataModelTree
  cubeName={cubeName}
  mdx={mdx}
  serverKey={serverKey}
  className={className}
  disabledKpiProperties={disabledKpiProperties}
  disabledLevels={disabledLevels}
  disabledMeasures={disabledMeasures}
  marginLeft={marginLeft}
  measureGroupName={measureGroupName}
  onCubeSelected={onCubeSelected}
  onMeasureGroupSelected={onMeasureGroupSelected}
  searchInputRef={searchInputRef}
  selectedLeafKey={selectedLeafKey}
/>

DataModelTreeProps

Property	Type	Description
cubeName	CubeName
mdx	MdxSelect | MdxDrillthrough	If provided, mdx controls which cube options are disabled.
serverKey	string
className	string
disabledKpiProperties	KpiProperty[]
disabledLevels	LevelCoordinates[]
disabledMeasures	MeasureName[]
marginLeft	number
measureGroupName	string
onCubeSelected	(serverKey: string, cubeName: CubeName) => void
onMeasureGroupSelected	(measureGroupName?: string) => void
searchInputRef	{    current: InputRef | null; }
selectedLeafKey	string

DataVisualizationBehaviorEditor

Allows the user to choose a template dashboard page, allowing to perform investigations on data points from the selected widget, thanks to the pluginMenuItemInvestigate.

<DataVisualizationBehaviorEditor
	{...}
/>

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, Tuple[], AnchoredRange2D[]>

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

Deprecated

Use Ant Design's Form and Form.Item components instead.

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}
  captionStyle={captionStyle}
  path={path}
  pathStyle={pathStyle}
/>

HighlightedSearchResultProps

Property	Type	Description
caption	string
className	string
isDisabled	boolean
searchValue	string
captionStyle	CSSObject
path	string
pathStyle	CSSObject

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, CellSet, CellSetSelection, Tuple[], AnchoredRange2D[]> & {
   hideRedundantTotals?: boolean;
   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<PlotlyPieWidgetState>

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<PlotlyPieWidgetState>

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}
  onResized={onResized}
  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
onResized	(newSize: number) => void
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}
  pathToParentFolder={pathToParentFolder}
/>

SaveAsPopupProps

Property	Type	Description
contentTree	ContentRecord<AMetaData> | null
contentType	ContentType
defaultName	string
isVisible	boolean
onClose	(event: MouseEvent) => void
onSubmit	(name: string, pathToParentFolder: ServerPath, permissions: Permission[]) => Promise<void>
pathToParentFolder	ServerPath

ShareForm

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

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

ShareFormProps

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

Title

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

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

TitleProps

Property	Type	Description
disabled	boolean
level	1 | 2 | 3 | 4 | 5 | 6

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	CSSObject
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}
  autoFocusSearchInput={autoFocusSearchInput}
  className={className}
  contextMenuItems={contextMenuItems}
  defaultExpandedPaths={defaultExpandedPaths}
  doesSelectionIncludeChildren={doesSelectionIncludeChildren}
  doSearchResultsIncludeFolders={doSearchResultsIncludeFolders}
  expandedPaths={expandedPaths}
  expandTrigger={expandTrigger}
  flatValue={flatValue}
  focusedIndex={focusedIndex}
  getDefaultCaption={getDefaultCaption}
  hasCheckbox={hasCheckbox}
  hoverStyle={hoverStyle}
  isFullyExpanded={isFullyExpanded}
  isLoading={isLoading}
  isSearchLoading={isSearchLoading}
  isSearchVisible={isSearchVisible}
  isSelectable={isSelectable}
  lineHeight={lineHeight}
  Node={Node}
  NodeIcon={NodeIcon}
  nodeStyle={nodeStyle}
  onClick={onClick}
  onExpandedPathsChange={onExpandedPathsChange}
  onFocusedIndexChanged={onFocusedIndexChanged}
  onNodeEditEnded={onNodeEditEnded}
  onSearchValueChanged={onSearchValueChanged}
  onSelectedPathsChange={onSelectedPathsChange}
  overscanCount={overscanCount}
  searchInputAction={searchInputAction}
  searchInputRef={searchInputRef}
  searchPlaceholder={searchPlaceholder}
  searchResults={searchResults}
  searchResultsDisplayShape={searchResultsDisplayShape}
  searchValue={searchValue}
  selectedPaths={selectedPaths}
  selectionMode={selectionMode}
  selectionStyle={selectionStyle}
  style={style}
  value={value}
/>

TreeProps

Property	Type	Description
areEmptyFoldersExpandable	boolean
autoFocusSearchInput	boolean
className	string
contextMenuItems	ItemType[]
defaultExpandedPaths	number[][]
doesSelectionIncludeChildren	boolean
doSearchResultsIncludeFolders	boolean
expandedPaths	number[][]
expandTrigger	"caret" | "full-node" | ((node: NodeType) => "caret" | "full-node")	Whether folder nodes can be opened by clicking on their full name, or only on the caret on their left. By default, they can be opened only by clicking on the caret on their left.
flatValue	InternalNode<NodeType>[]	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
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
isSearchLoading	boolean
isSearchVisible	boolean
isSelectable	boolean
lineHeight	number
Node	ComponentType<NodeProps<NodeType>>
NodeIcon	ComponentType<NodeIconProps<NodeType>>
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
overscanCount	number
searchInputAction	ReactNode
searchInputRef	Ref<InputRef>
searchPlaceholder	string
searchResults	InternalNode<NodeType>[]
searchResultsDisplayShape	"tree" | "list"
searchValue	string
selectedPaths	number[][]
selectionMode	"single" | "multiple"
selectionStyle	CSSProperties
style	CSSProperties
value	TreeObject<NodeType>[]

Widget

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

<Widget
  isDeferred={isDeferred}
  isSelected={isSelected}
  onChange={onChange}
  onLoaded={onLoaded}
  onSelectionChange={onSelectionChange}
  queryId={queryId}
  style={style}
  widgetState={widgetState}
/>

WidgetProps

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