Grafana custom panel plugin is a grafana plugin that allows you to render custom react components inside the Grafana dashboard.
Caution
Experimental plugin. USE AT YOUR OWN RISK.
Custom component allows you to render custom React component. Following is the sample custom component which renders a Button and Drawer components from @grafana/ui package inside your grafana panel.
(args) => {
const { Button, Drawer } = ui;
const [isOpen, setIsOpen] = React.useState(false);
return (
<>
<Button onClick={() => setIsOpen(true)}>Open drawer</Button>
{isOpen && (
<Drawer {...args} onClose={() => setIsOpen(false)} title="hello">
<>
<h2>This is a custom component</h2>
<p>Following is the sample data available to the panel</p>
<pre>
{JSON.stringify(
panelData.series && panelData.series.length > 0 ? panelData.series[0].fields[0].name : null
)}
</pre>
</>
</Drawer>
)}
</>
);
};Custom components will also have access to grafana libs such as @grafana/ui, @grafana/data and @grafana/runtime. They are passed to the underlying panel as ui, data and runtime. There is also panelData object available to the panel which holds the current panel data.