grafana/docs/sources/packages_api/data/panelplugin.md

+++

-----------------------------------------------------------------------

Do not edit this file. It is automatically generated by API Documenter.

-----------------------------------------------------------------------

title = "PanelPlugin" keywords = ["grafana","documentation","sdk","@grafana/data"] type = "docs" +++

PanelPlugin class

Signature

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

Import

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

Constructors

Constructor	Modifiers	Description
constructor(panel)		Constructs a new instance of the PanelPlugin class

Properties

Property	Modifiers	Type	Description
angularPanelCtrl		any	Legacy angular ctrl. If this exists it will be used instead of the panel
defaults		{} | null
editor		ComponentClass<PanelEditorProps<TOptions>>
fieldConfigDefaults		FieldConfigSource<TFieldConfigOptions>
fieldConfigRegistry		FieldConfigOptionsRegistry
noPadding		boolean
onPanelMigration		PanelMigrationHandler<TOptions>
onPanelTypeChanged		PanelTypeChangedHandler<TOptions>
optionEditors		PanelOptionEditorsRegistry | undefined
panel		ComponentType<PanelProps<TOptions>> | null

Methods

Method	Modifiers	Description
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 specyfing which standard field config options panel should use and defining default values

constructor(panel)

Constructs a new instance of the PanelPlugin class

Signature

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

Parameters

Parameter	Type	Description
panel	ComponentType<PanelProps<TOptions>> | null

angularPanelCtrl property

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

Signature

angularPanelCtrl?: any;

defaults property

Signature

get defaults(): {} | null;

editor property

Signature

editor?: ComponentClass<PanelEditorProps<TOptions>>;

fieldConfigDefaults property

Signature

get fieldConfigDefaults(): FieldConfigSource<TFieldConfigOptions>;

fieldConfigRegistry property

Signature

get fieldConfigRegistry(): FieldConfigOptionsRegistry;

noPadding property

Signature

noPadding?: boolean;

onPanelMigration property

Signature

onPanelMigration?: PanelMigrationHandler<TOptions>;

onPanelTypeChanged property

Signature

onPanelTypeChanged?: PanelTypeChangedHandler<TOptions>;

optionEditors property

Signature

get optionEditors(): PanelOptionEditorsRegistry | undefined;

panel property

Signature

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

setDefaults method

Signature

setDefaults(defaults: TOptions): this;

Parameters

Parameter	Type	Description
defaults	TOptions

Returns:

this

setEditor method

Signature

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

Parameters

Parameter	Type	Description
editor	ComponentClass<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

setMigrationHandler(handler: PanelMigrationHandler): this;

Parameters

Parameter	Type	Description
handler	PanelMigrationHandler

Returns:

this

setNoPadding method

Signature

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

setPanelChangeHandler(handler: PanelTypeChangedHandler): this;

Parameters

Parameter	Type	Description
handler	PanelTypeChangedHandler

Returns:

this

setPanelOptions method

Enables panel options editor creation

Signature

setPanelOptions(builder: (builder: PanelOptionsEditorBuilder<TOptions>) => void): this;

Parameters

Parameter	Type	Description
builder	(builder: PanelOptionsEditorBuilder<TOptions>) => void

Returns:

this

Example

import { ShapePanel } from './ShapePanel';

interface ShapePanelOptions {}

export const plugin = new PanelPlugin<ShapePanelOptions>(ShapePanel)
  .setPanelOptions(builder => {
    builder
      .addSelect({
        id: 'shape',
        name: 'Shape',
        description: 'Select shape to render'
        settings: {
          options: [
            {value: 'circle', label: 'Circle' },
            {value: 'square', label: 'Square },
            {value: 'triangle', label: 'Triangle }
           ]
        },
      })
  })

useFieldConfig method

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

Signature

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

Parameters

Parameter	Type	Description
config	SetFieldConfigOptionsArgs<TFieldConfigOptions>

Returns:

this

Example

import { ShapePanel } from './ShapePanel';

interface ShapePanelOptions {}

// when plugin should use all standard options
export const plugin = new PanelPlugin<ShapePanelOptions>(ShapePanel)
 .useFieldConfig();

// when plugin should only display specific standard options
// note, that options will be displayed in the order they are provided
export const plugin = new PanelPlugin<ShapePanelOptions>(ShapePanel)
 .useFieldConfig({
   standardOptions: [FieldConfigProperty.Min, FieldConfigProperty.Max]
  });

// when standard option's default value needs to be provided
export const plugin = new PanelPlugin<ShapePanelOptions>(ShapePanel)
 .useFieldConfig({
   standardOptions: [FieldConfigProperty.Min, FieldConfigProperty.Max],
   standardOptionsDefaults: {
     [FieldConfigProperty.Min]: 20,
     [FieldConfigProperty.Max]: 100
   }
 });

// when custom field config options needs to be provided
export const plugin = new PanelPlugin<ShapePanelOptions>(ShapePanel)
 .useFieldConfig({
   useCustomConfig: builder => {
     builder
      .addNumberInput({
        id: 'shapeBorderWidth',
        name: 'Border width',
        description: 'Border width of the shape',
        settings: {
          min: 1,
          max: 5,
        },
      })
      .addSelect({
        id: 'displayMode',
        name: 'Display mode',
        description: 'How the shape shout be rendered'
        settings: {
        options: [{value: 'fill', label: 'Fill' }, {value: 'transparent', label: 'Transparent }]
      },
    })
  },
 });