Docs: Add doc comments for PanelPlugin (#23896)

packages/grafana-data/src/types/panel.ts

@@ -12,87 +12,86 @@ import { OptionsEditorItem } from './OptionsUIRegistryBuilder';
 export type InterpolateFunction = (value: string, scopedVars?: ScopedVars, format?: string | Function) => string;
 export type InterpolateFunction = (value: string, scopedVars?: ScopedVars, format?: string | Function) => string;
 
 
 export interface PanelPluginMeta extends PluginMeta {
 export interface PanelPluginMeta extends PluginMeta {
+  /** Indicates that panel does not issue queries */
   skipDataQuery?: boolean;
   skipDataQuery?: boolean;
+  /** Indicates that panel should not be available in visualisation picker */
   hideFromList?: boolean;
   hideFromList?: boolean;
+  /** Sort order */
   sort: number;
   sort: number;
 }
 }
 
 
 export interface PanelData {
 export interface PanelData {
-  /**
-   * State of the data (loading, done, error, streaming)
-   */
+  /** State of the data (loading, done, error, streaming) */
   state: LoadingState;
   state: LoadingState;
 
 
-  /**
-   * Contains data frames with field overrides applied
-   */
+  /** Contains data frames with field overrides applied */
   series: DataFrame[];
   series: DataFrame[];
 
 
-  /**
-   * Request contains the queries and properties sent to the datasource
-   */
+  /** Request contains the queries and properties sent to the datasource */
   request?: DataQueryRequest;
   request?: DataQueryRequest;
 
 
-  /**
-   * Timing measurements
-   */
+  /** Timing measurements */
   timings?: DataQueryTimings;
   timings?: DataQueryTimings;
 
 
-  /**
-   * Any query errors
-   */
+  /** Any query errors */
   error?: DataQueryError;
   error?: DataQueryError;
 
 
-  /**
-   *  Contains the range from the request or a shifted time range if a request uses relative time
-   */
+  /** Contains the range from the request or a shifted time range if a request uses relative time */
   timeRange: TimeRange;
   timeRange: TimeRange;
 }
 }
 
 
 export interface PanelProps<T = any> {
 export interface PanelProps<T = any> {
-  id: number; // ID within the current dashboard
+  /** ID of the panel within the current dashboard */
+  id: number;
+  /** Result set of panel queries */
   data: PanelData;
   data: PanelData;
+  /** Time range of the current dashboard */
   timeRange: TimeRange;
   timeRange: TimeRange;
+  /** Time zone of the current dashboard */
   timeZone: TimeZone;
   timeZone: TimeZone;
+  /** Panel options */
   options: T;
   options: T;
+  /** Panel options change handler */
   onOptionsChange: (options: T) => void;
   onOptionsChange: (options: T) => void;
-  /** Panel fields configuration */
+  /** Field options configuration */
   fieldConfig: FieldConfigSource;
   fieldConfig: FieldConfigSource;
-  /** Enables panel field config manipulation */
+  /** Field config change handler */
   onFieldConfigChange: (config: FieldConfigSource) => void;
   onFieldConfigChange: (config: FieldConfigSource) => void;
-  renderCounter: number;
+  /** Indicathes whether or not panel should be rendered transparent */
   transparent: boolean;
   transparent: boolean;
+  /** Current width of the panel */
   width: number;
   width: number;
+  /** Current height of the panel */
   height: number;
   height: number;
+  /** Template variables interpolation function */
   replaceVariables: InterpolateFunction;
   replaceVariables: InterpolateFunction;
+  /** Time range change handler */
   onChangeTimeRange: (timeRange: AbsoluteTimeRange) => void;
   onChangeTimeRange: (timeRange: AbsoluteTimeRange) => void;
+  /** @internal */
+  renderCounter: number;
 }
 }
 
 
 export interface PanelEditorProps<T = any> {
 export interface PanelEditorProps<T = any> {
+  /** Panel options */
   options: T;
   options: T;
+  /** Panel options change handler */
   onOptionsChange: (
   onOptionsChange: (
     options: T,
     options: T,
     // callback can be used to run something right after update.
     // callback can be used to run something right after update.
     callback?: () => void
     callback?: () => void
   ) => void;
   ) => void;
+  /** Result set of panel queries */
   data: PanelData;
   data: PanelData;
-
-  /**
-   * Panel fields configuration - temporart solution
-   * TODO[FieldConfig]: Remove when we switch old editor to new
-   */
-  fieldConfig: FieldConfigSource;
-  /**
-   * Enables panel field config manipulation
-   * TODO[FieldConfig]: Remove when we switch old editor to new
-   */
-  onFieldConfigChange: (config: FieldConfigSource) => void;
 }
 }
 
 
 export interface PanelModel<TOptions = any> {
 export interface PanelModel<TOptions = any> {
+  /** ID of the panel within the current dashboard */
   id: number;
   id: number;
+  /** Panel options */
   options: TOptions;
   options: TOptions;
+  /** Field options configuration */
   fieldConfig: FieldConfigSource;
   fieldConfig: FieldConfigSource;
+  /** Version of the panel plugin */
   pluginVersion?: string;
   pluginVersion?: string;
   scopedVars?: ScopedVars;
   scopedVars?: ScopedVars;
 }
 }
@@ -160,6 +159,9 @@ export interface PanelOptionsEditorConfig<TOptions, TSettings = any, TValue = an
   showIf?: (currentConfig: TOptions) => boolean;
   showIf?: (currentConfig: TOptions) => boolean;
 }
 }
 
 
+/**
+ * @internal
+ */
 export interface PanelMenuItem {
 export interface PanelMenuItem {
   type?: 'submenu' | 'divider';
   type?: 'submenu' | 'divider';
   text?: string;
   text?: string;
@@ -170,6 +172,9 @@ export interface PanelMenuItem {
   subMenu?: PanelMenuItem[];
   subMenu?: PanelMenuItem[];
 }
 }
 
 
+/**
+ * @internal
+ */
 export interface AngularPanelMenuItem {
 export interface AngularPanelMenuItem {
   click: Function;
   click: Function;
   icon: string;
   icon: string;

public/app/features/dashboard/components/PanelEditor/PanelOptionsTab.tsx

@@ -74,13 +74,7 @@ export const PanelOptionsTab: FC<Props> = ({
   if (plugin.editor && panel && !plugin.optionEditors) {
   if (plugin.editor && panel && !plugin.optionEditors) {
     elements.push(
     elements.push(
       <OptionsGroup title="Display" id="legacy react editor" key="legacy react editor">
       <OptionsGroup title="Display" id="legacy react editor" key="legacy react editor">
-        <plugin.editor
-          data={data}
-          options={panel.getOptions()}
-          onOptionsChange={onPanelOptionsChanged}
-          fieldConfig={panel.getFieldConfig()}
-          onFieldConfigChange={onFieldConfigsChange}
-        />
+        <plugin.editor data={data} options={panel.getOptions()} onOptionsChange={onPanelOptionsChanged} />
       </OptionsGroup>
       </OptionsGroup>
     );
     );
   }
   }