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 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
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.

  • 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

Clone this wiki locally