@grafana/ui | Grafana documentation

Important: This documentation is about an older version. It's relevant only to the release noted, many of the features and functions have been updated or replaced. Please view the current version.

Documentation

Grafana documentation

API Reference

@grafana/ui

Enterprise Open source

@grafana/ui package

A library containing the different design components of the Grafana ecosystem.

Classes

Class	Description
ansicolor	Represents an ANSI-escaped string.
BarGauge
BigValue
Cascader
ClickOutsideWrapper
ClipboardButton
CustomScrollbar	Wraps component into component from `react-custom-scrollbars`
ErrorBoundary
ErrorBoundaryAlert
Gauge
Graph
GraphSeriesToggler
JsonExplorer	JsonExplorerJsonExplorer allows you to render JSON objects in HTML with a collapsible navigation.
JSONFormatter
List
ModalsProvider
PieChart
Popover
PopoverController
Portal
QueryField	Renders an editor field. Pass initial value as initialQuery and listen to changes in props.onValueChanged. This component can only process strings. Internally it uses Slate Value. Implement props.onTypeahead to use suggestions, see PromQueryField.tsx as an example.
SelectValueEditor
SetInterval
StatsPicker
StringArrayEditor
TableInputCSV	Expects the container div to have size set and will fill it 100%
TagsInput
ToggleButtonGroup
UnitPicker
VizRepeater

Enumerations

Enumeration	Description
AxisSide
BarGaugeDisplayMode
BigValueColorMode
BigValueGraphMode
BigValueJustifyMode
BigValueTextMode	Options for how the value & title are to be displayed
CompletionItemKind
EventsWithValidation
LegacyInputStatus
LegendDisplayMode
PieChartType
TableCellDisplayMode

Functions

Function	Description
AsyncMultiSelect(props)
AsyncSelect(props)
BracesPlugin()
ButtonSelect({ placeholder, icon, variant, size, className, disabled, …selectProps })
calculateFontSize(text, width, height, lineHeight, maxSize)	*(BETA)*
ClearPlugin()
ClipboardPlugin()
convertOldAngularValueMapping(panel)	Convert the angular single stat mapping to new react style
EventsCanvas({ id, events, renderEventMarker, mapEventToXYCoords })
FadeTransition(props)
Form({ defaultValues, onSubmit, validateOnMount, validateFieldsOnMount, children, validateOn, maxWidth, …htmlProps })
getScrollbarWidth()
getTagColor(index)
getTagColorsFromName(name)	Returns tag badge background and border colors based on hashed tag name.
getTextColorForBackground(color)
IndentationPlugin()
measureText(text, fontSize)	*(BETA)*
MultiSelect(props)
NewlinePlugin()
RadioButtonGroup({ options, value, onChange, disabled, disabledOptions, size, fullWidth, })
renderOrCallToRender(itemToRender, props)	Given react node or function returns element accordingly
resetSelectStyles()
RunnerPlugin({ handler })
Segment({ options, value, onChange, Component, className, allowCustomValue, placeholder, …rest })
SegmentAsync({ value, onChange, loadOptions, Component, className, allowCustomValue, placeholder, …rest })
SegmentInput({ value: initialValue, onChange, Component, className, placeholder, autofocus, …rest })
SegmentSelect({ value, options, onChange, onClickOutside, width, noOptionsMessage, allowCustomValue, …rest })
Select(props)
SelectionShortcutsPlugin()
sharedSingleStatMigrationHandler(panel)
sharedSingleStatPanelChangedHandler(panel, prevPluginId, prevOptions)
SlatePrism(optsParam)	A Slate plugin to highlight code syntax.
SlideOutTransition(props)
stylesFactory(stylesCreator)	Creates memoized version of styles creator
SuggestionsPlugin({ onTypeahead, cleanText, onWillApplySuggestion, portalOrigin, })
TabbedContainer(props)
useStyles(getStyles)	Hook for using memoized styles with access to the theme.NOTE: For memoization to work, you need to ensure that the function you pass in doesn’t change, or only if it needs to. (i.e. declare your style creator outside of a function component or use `useCallback()`.)
useTheme()
ValuePicker({ label, icon, options, onChange, variant, size, isFullWidth, menuPlacement, })

Interfaces

Interface	Description
BadgeProps
BigValueSparkline
CascaderOption
CompletionItem
CompletionItemGroup
ContextMenuGroup
ContextMenuItem
ContextMenuProps
FieldArrayApi
GraphCustomFieldConfig
GraphSeriesTogglerAPI
GraphTooltipOptions
LegendBasicOptions
LegendItem
LegendOptions
LegendRenderOptions
SingleStatBaseOptions
StyleProps
SuggestionsState
TabConfig
TableSortByFieldState
Themeable
Token
TypeaheadInput
TypeaheadOutput
ValidationEvents
ValidationRule
VizRepeaterRenderValueProps

Namespaces

Namespace	Description
DOMUtil
RadioButtonGroup
styleMixins

Variables

Variable	Description
Alert
AlphaNotice
AnnotationsEditorPlugin
Area
Axis
Badge
Button
ButtonCascader
CallToActionCard
Canvas
Chart
Checkbox
ClickPlugin
CodeEditor
CollapsableSection
Collapse
ColorPicker
colors
ConfirmButton
ConfirmModal
Container
ContextMenu
ContextMenuPlugin
ControlledCollapse
Counter
DataLinkInput
DataLinksContextMenu
DataLinksInlineEditor
DataSourceHttpSettings
defaultIntervals
DeleteButton
Drawer
EmptySearchResult
ErrorWithStack
FeatureInfoBox
Field
FieldArray
FieldConfigItemHeaderTitle
fieldMatchersUI
FieldSet
FieldValidationMessage
FileUpload
FilterPill
FullWidthButtonContainer
getAvailableIcons
getButtonStyles
getFormStyles
getLogRowStyles
getStandardFieldConfigs	Returns collection of common field config properties definitions
getStandardOptionEditors	Returns collection of standard option editors definitions
getTheme
GraphContextMenu
GraphLegend
GraphNG
graphTickFormatter
graphTimeFormat
GraphWithLegend
hasValidationEvent
HorizontalGroup
Icon
IconButton
InlineField
InlineFieldRow
InlineFormLabel
InlineLabel
Input
InputControl
Label
LegacyForms
Legend
LegendList
LegendPlugin
LegendTable
Line
LinkButton
linkModelToContextMenuItems	Delays creating links until we need to open the ContextMenu
LoadingPlaceholder
LogLabels
LogRows
makeFragment
makeValue
Marker
mockTheme
mockThemeContext	Enables theme context mocking
Modal
ModalHeader
ModalRoot
ModalsController
ModalTabContent
ModalTabsHeader
NumberValueEditor
Pagination
PanelOptionsGrid
PanelOptionsGroup
Point
RefreshPicker
regexValidation
Scale
SCHEMA
SelectionPlugin
selectThemeVariant
SeriesColorPicker
SeriesColorPickerPopover
SeriesColorPickerPopoverWithTheme
SeriesGeometry
SeriesIcon
Slider
sortedColors
Spinner
StringValueEditor
Switch
Tab
TabContent
Table
TabsBar
Tag
TagList
TextArea
ThemeContext
TimeOfDayPicker
TimeRangeInput
TimeRangePicker
TimeZonePicker
ToggleButton
Tooltip
TooltipContainer
TooltipPlugin
UPlotChart
usePlotConfigContext
usePlotContext
usePlotData
usePlotPluginContext
useRefreshAfterGraphRendered	Forces re-render of a component when uPlots’s draw hook is fired. This hook is usefull in scenarios when you want to reposition XYCanvas elements when i.e. plot size changes
validate
VerticalGroup
WithContextMenu
withTheme
XYCanvas	Renders absolutely positioned element on top of the uPlot’s plotting area (axes are not included!). Useful when you want to render some overlay with canvas-independent elements on top of the plot.
ZoomPlugin

Type Aliases

Type Alias	Description
AlertVariant
BadgeColor
ButtonProps
ButtonVariant
FormAPI
FormInputSize
IconName
IconSize
IconType
LegendPlacement
OnTagClick
PopoverContent
Renderable
RenderFunction