PanelPlugin class

Signature

  1. export declare class PanelPlugin<TOptions = any, TFieldConfigOptions extends object = any> extends GrafanaPlugin<PanelPluginMeta>

Import

  1. import { PanelPlugin } from '@grafana/data';

Constructors

ConstructorModifiersDescription
constructor(panel)Constructs a new instance of the PanelPlugin class

Properties

PropertyModifiersTypeDescription
angularPanelCtrlanyLegacy angular ctrl. If this exists it will be used instead of the panel
dataSupportPanelPluginDataSupport
defaults{}
editorComponentClass<PanelEditorProps<TOptions>>
fieldConfigDefaultsFieldConfigSource<TFieldConfigOptions>
fieldConfigRegistryFieldConfigOptionsRegistry
noPaddingboolean
onPanelMigrationPanelMigrationHandler<TOptions>
onPanelTypeChangedPanelTypeChangedHandler<TOptions>
panelComponentType<PanelProps<TOptions>> | null

Methods

MethodModifiersDescription
setDataSupport(support)Tells Grafana if the plugin should subscribe to annotation and alertState results.
setDefaults(defaults)
setEditor(editor)
setMigrationHandler(handler)This function is called before the panel first loads if the current version is different than the version that was saved.This is a good place to support any changes to the options model
setNoPadding()
setPanelChangeHandler(handler)This function is called when the visualization was changed. This passes in the panel model for previous visualisation options inspection and panel model updates.This is useful for supporting PanelModel API updates when changing between Angular and React panels.
setPanelOptions(builder)Enables panel options editor creation
useFieldConfig(config)Allows specifying which standard field config options panel should use and defining default values

constructor(panel)

Constructs a new instance of the PanelPlugin class

Signature

  1. constructor(panel: ComponentType<PanelProps<TOptions>> | null);

Parameters

ParameterTypeDescription
panelComponentType<PanelProps<TOptions>> | null

angularPanelCtrl property

Legacy angular ctrl. If this exists it will be used instead of the panel

Signature

  1. angularPanelCtrl?: any;

dataSupport property

Signature

  1. dataSupport: PanelPluginDataSupport;

defaults property

Signature

  1. get defaults(): {};

editor property

Signature

  1. editor?: ComponentClass<PanelEditorProps<TOptions>>;

fieldConfigDefaults property

Signature

  1. get fieldConfigDefaults(): FieldConfigSource<TFieldConfigOptions>;

fieldConfigRegistry property

Signature

  1. get fieldConfigRegistry(): FieldConfigOptionsRegistry;

noPadding property

Signature

  1. noPadding?: boolean;

onPanelMigration property

Signature

  1. onPanelMigration?: PanelMigrationHandler<TOptions>;

onPanelTypeChanged property

Signature

  1. onPanelTypeChanged?: PanelTypeChangedHandler<TOptions>;

panel property

Signature

  1. panel: ComponentType<PanelProps<TOptions>> | null;

setDataSupport method

Tells Grafana if the plugin should subscribe to annotation and alertState results.

Signature

  1. setDataSupport(support: Partial<PanelPluginDataSupport>): this;

Parameters

ParameterTypeDescription
supportPartial<PanelPluginDataSupport>

Returns:

this

Example

  1. import { ShapePanel } from './ShapePanel';
  2. interface ShapePanelOptions {}
  3. export const plugin = new PanelPlugin<ShapePanelOptions>(ShapePanel)
  4. .useFieldConfig({})
  5. ...
  6. ...
  7. .setDataSupport({
  8. annotations: true,
  9. alertStates: true,
  10. });

setDefaults method

Signature

  1. setDefaults(defaults: TOptions): this;

Parameters

ParameterTypeDescription
defaultsTOptions

Returns:

this

setEditor method

Signature

  1. setEditor(editor: ComponentClass<PanelEditorProps<TOptions>>): this;

Parameters

ParameterTypeDescription
editorComponentClass<PanelEditorProps<TOptions>>

Returns:

this

setMigrationHandler method

This function is called before the panel first loads if the current version is different than the version that was saved.

This is a good place to support any changes to the options model

Signature

  1. setMigrationHandler(handler: PanelMigrationHandler<TOptions>): this;

Parameters

ParameterTypeDescription
handlerPanelMigrationHandler<TOptions>

Returns:

this

setNoPadding method

Signature

  1. setNoPadding(): this;

Returns:

this

setPanelChangeHandler method

This function is called when the visualization was changed. This passes in the panel model for previous visualisation options inspection and panel model updates.

This is useful for supporting PanelModel API updates when changing between Angular and React panels.

Signature

  1. setPanelChangeHandler(handler: PanelTypeChangedHandler): this;

Parameters

ParameterTypeDescription
handlerPanelTypeChangedHandler

Returns:

this

setPanelOptions method

Enables panel options editor creation

Signature

  1. setPanelOptions(builder: PanelOptionsSupplier<TOptions>): this;

Parameters

ParameterTypeDescription
builderPanelOptionsSupplier<TOptions>

Returns:

this

Example

  1. import { ShapePanel } from './ShapePanel';
  2. interface ShapePanelOptions {}
  3. export const plugin = new PanelPlugin<ShapePanelOptions>(ShapePanel)
  4. .setPanelOptions(builder => {
  5. builder
  6. .addSelect({
  7. id: 'shape',
  8. name: 'Shape',
  9. description: 'Select shape to render'
  10. settings: {
  11. options: [
  12. {value: 'circle', label: 'Circle' },
  13. {value: 'square', label: 'Square },
  14. {value: 'triangle', label: 'Triangle }
  15. ]
  16. },
  17. })
  18. })

useFieldConfig method

Allows specifying which standard field config options panel should use and defining default values

Signature

  1. useFieldConfig(config?: SetFieldConfigOptionsArgs<TFieldConfigOptions>): this;

Parameters

ParameterTypeDescription
configSetFieldConfigOptionsArgs<TFieldConfigOptions>

Returns:

this

Example

  1. import { ShapePanel } from './ShapePanel';
  2. interface ShapePanelOptions {}
  3. // when plugin should use all standard options
  4. export const plugin = new PanelPlugin<ShapePanelOptions>(ShapePanel)
  5. .useFieldConfig();
  6. // when plugin should only display specific standard options
  7. // note, that options will be displayed in the order they are provided
  8. export const plugin = new PanelPlugin<ShapePanelOptions>(ShapePanel)
  9. .useFieldConfig({
  10. standardOptions: [FieldConfigProperty.Min, FieldConfigProperty.Max]
  11. });
  12. // when standard option's default value needs to be provided
  13. export const plugin = new PanelPlugin<ShapePanelOptions>(ShapePanel)
  14. .useFieldConfig({
  15. standardOptions: [FieldConfigProperty.Min, FieldConfigProperty.Max],
  16. standardOptionsDefaults: {
  17. [FieldConfigProperty.Min]: 20,
  18. [FieldConfigProperty.Max]: 100
  19. }
  20. });
  21. // when custom field config options needs to be provided
  22. export const plugin = new PanelPlugin<ShapePanelOptions>(ShapePanel)
  23. .useFieldConfig({
  24. useCustomConfig: builder => {
  25. builder
  26. .addNumberInput({
  27. id: 'shapeBorderWidth',
  28. name: 'Border width',
  29. description: 'Border width of the shape',
  30. settings: {
  31. min: 1,
  32. max: 5,
  33. },
  34. })
  35. .addSelect({
  36. id: 'displayMode',
  37. name: 'Display mode',
  38. description: 'How the shape shout be rendered'
  39. settings: {
  40. options: [{value: 'fill', label: 'Fill' }, {value: 'transparent', label: 'Transparent }]
  41. },
  42. })
  43. },
  44. });