Develop panel plugin

We have created a candlestick1 panel in previous doc, in this doc, let's see some key points in it.

index.ts

First open index.ts in DATAV_ROOT/ui/src/views/dashboard/plugins/external/panel/candlestick1, you shoud see below content:

import { PanelPluginComponents } from "types/plugins/plugin";
import PanelComponent, { mockDataForTestDataDs } from "./Panel";
import PanelEditor from "./Editor";
import OverrideEditor, { OverrideRules, getOverrideTargets } from "./OverrideEditor";

const panelComponents: PanelPluginComponents = {
    panel: PanelComponent,
    editor: PanelEditor,
    overrideEditor: OverrideEditor,
    overrideRules: OverrideRules,
    getOverrideTargets: getOverrideTargets,
    mockDataForTestDataDs: mockDataForTestDataDs
}

export default  panelComponents

This file export all the api of candlestick1 plugin that Datav requires, including:

• panel: the main panel component, used for render this panel
• editor: when you open the panel editor, the options pane in the right is rendered with this

As show above, this options editor is rendered by our editor component, but you should notice that first three sections (Basic Setting, Built-in plugins, External plugins) are common settings, they are not defined in each plugins but in ui/src/views/dashboard/edit-panel/PanelSettings.tsx.

• overrideEditor: This defines the overrides items in the overrides editor for panel

The override editor skeleton is defined in ``ui/src/views/dashboard/edit-panel/PanelOverrides.tsx`

• overrideRules: defines the overrides rule names in the overrides editor for panel

• getOverrideTargets: defines the overrides target names in the overrides editor for panel

• mockDataForTestDataDs: provide mock data for TestData datasource, in most cases this should be SeriesData format, including our candlestick1 panel

Editor.tsx

Force panel to rebuild

Sometimes, change an option can not trigger the chart library which panel uses to re-render, so we need a way to rebuild the panel and chart library :

dispatch(PanelForceRebuildEvent + panel.id)

Some editior components

Datav has provide a lot of components for you to use in your own plugins, such as ThresholdEditor, some of them are placed in ui/src/views/dashboard/plugins/components, and others are defined at ui/src/components, you can search built-in panels for detail usage.

These components can also be used in OverrideEdtiro.