Skip to content

Develop panel plugin

Sunface edited this page Sep 26, 2023 · 8 revisions

We have created a candlestick1 panel in previous doc, in this doc, let's add some tiny features to it.

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 canclestick1 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
image

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.

Clone this wiki locally