@grafana/ui package
A library containing the different design components of the Grafana ecosystem.
Classes
Enumerations
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) |
|
FieldLink({ link }) |
|
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() |
|
NodeGraph({ getLinks, dataFrames, nodeLimit }) |
|
RadioButtonGroup({ options, value, onChange, disabled, disabledOptions, size, className, 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, prismLanguages) |
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
Namespaces
Variables
Type Aliases