@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
