feat: add panelAddon plugin

dashboard/src/components/panel/panel-render/panel-render-base.tsx

@@ -33,6 +33,7 @@ export const PanelRenderBase = observer(({ panel, panelStyle, dropdownContent }:
     >
       <Box
         className={`panel-root ${panel.title.show ? 'panel-root--show-title' : ''}`}
+        id={`panel-root-${panel.id}`}
         ref={ref}
         p={0}
         sx={{

dashboard/src/components/panel/panel-render/viz/viz.tsx

@@ -1,15 +1,19 @@
 import { useElementSize } from '@mantine/hooks';
 import { get } from 'lodash';
+import { createPortal } from 'react-dom';
 
 import { Box } from '@mantine/core';
 import { observer } from 'mobx-react-lite';
 import { ReactNode, useContext } from 'react';
 import { useConfigVizInstanceService } from '~/components/panel/use-config-viz-instance-service';
-import { ServiceLocatorProvider } from '~/components/plugins/service/service-locator/use-service-locator';
+import {
+  ServiceLocatorProvider,
+  useServiceLocator,
+} from '~/components/plugins/service/service-locator/use-service-locator';
 import { WidthAndHeight } from '~/components/plugins/viz-manager/components';
 import { ErrorBoundary } from '~/utils';
 import { useRenderPanelContext } from '../../../../contexts';
-import { IViewPanelInfo, PluginContext } from '../../../plugins';
+import { IViewPanelInfo, PluginContext, tokens } from '../../../plugins';
 import { PluginVizViewComponent } from '../../plugin-adaptor';
 import './viz.css';
 
@@ -40,6 +44,7 @@ function usePluginViz(data: TPanelData, measure: WidthAndHeight): ReactNode | nu
           variables={variables}
           vizManager={vizManager}
         />
+        <PanelVizAddons panelId={panel.id} />
       </ServiceLocatorProvider>
     );
   } catch (e) {
@@ -64,3 +69,14 @@ export const Viz = observer(function _Viz({ data }: IViz) {
     </div>
   );
 });
+
+export const PanelVizAddons = ({ panelId }: { panelId: string }) => {
+  const sl = useServiceLocator();
+  const instance = sl.getRequired(tokens.instanceScope.vizInstance);
+  const addonManager = sl.getRequired(tokens.panelAddonManager);
+  const panelRoot = document.getElementById(`panel-root-${panelId}`);
+  if (!panelRoot) {
+    return null;
+  }
+  return createPortal(<>{addonManager.createPanelAddonNode({ viz: instance })}</>, panelRoot, 'addon');
+};

dashboard/src/components/plugins/panel-addon/index.ts

@@ -0,0 +1 @@
+export * from './panel-addon-manager';

dashboard/src/components/plugins/panel-addon/panel-addon-manager.tsx

@@ -0,0 +1,16 @@
+import { IPanelAddon, IPanelAddonRenderProps, IPluginManager } from '~/types/plugin';
+import React from 'react';
+
+export class PanelAddonManager {
+  constructor(private pluginManager: IPluginManager) {}
+
+  createPanelAddonNode(props: IPanelAddonRenderProps) {
+    const addons = this.pluginManager.installedPlugins
+      .flatMap((it) => it.manifest.panelAddon)
+      .filter((it) => !!it) as IPanelAddon[];
+    const nodes = addons.map((addon) => {
+      return React.createElement(addon.addonRender, { ...props, key: addon.name });
+    });
+    return <>{nodes}</>;
+  }
+}

dashboard/src/components/plugins/plugin-context.tsx

@@ -2,6 +2,7 @@ import { createContext } from 'react';
 import { Blue, Green, Orange, Red, RedGreen, YellowBlue } from '~/components/plugins/colors';
 import { InstanceMigrator } from '~/components/plugins/instance-migrator';
 import { token } from '~/components/plugins/service/service-locator';
+import { PanelAddonManager } from '~/components/plugins/panel-addon';
 
 import { PanelModelInstance } from '~/dashboard-editor/model/panels';
 import {
@@ -39,12 +40,12 @@ import { HorizontalBarChartVizComponent } from './viz-components/horizontal-bar-
 import { MericoEstimationChartVizComponent } from './viz-components/merico-estimation-chart';
 import { MericoStatsVizComponent } from './viz-components/merico-stats';
 import { MericoHeatmapVizComponent } from './viz-components/merico-heatmap';
-import _ from 'lodash';
 
 export interface IPluginContextProps {
   pluginManager: IPluginManager;
   vizManager: VizManager;
   colorManager: IColorManager;
+  panelAddonManager: PanelAddonManager;
 }
 
 const basicColors = [
@@ -170,6 +171,7 @@ export const tokens = {
   pluginManager: token<IPluginManager>('pluginManager'),
   vizManager: token<VizManager>('vizManager'),
   colorManager: token<IColorManager>('colorManager'),
+  panelAddonManager: token<PanelAddonManager>('panelAddonManager'),
   instanceScope: {
     panelModel: token<PanelModelInstance>('panelModel'),
     vizInstance: token<VizInstance>('vizInstance'),
@@ -189,7 +191,8 @@ export const createPluginContext = (): IPluginContextProps => {
   }
   const vizManager = new VizManager(pluginManager);
   const colorManager = new ColorManager(pluginManager);
-  return { pluginManager, vizManager, colorManager };
+  const panelAddonManager = new PanelAddonManager(pluginManager);
+  return { pluginManager, vizManager, colorManager, panelAddonManager };
 };
 
 export const PluginContext = createContext<IPluginContextProps>(createPluginContext());

dashboard/src/components/plugins/service/use-top-level-services.ts

@@ -7,6 +7,7 @@ export function useTopLevelServices(pluginContext: IPluginContextProps) {
     return services
       .provideValue(tokens.pluginManager, pluginContext.pluginManager)
       .provideValue(tokens.vizManager, pluginContext.vizManager)
+      .provideValue(tokens.panelAddonManager, pluginContext.panelAddonManager)
       .provideValue(tokens.colorManager, pluginContext.colorManager);
   }, []);
 }

dashboard/src/components/plugins/viz-components/cartesian/viz-cartesian-chart.tsx

@@ -2,6 +2,7 @@ import type { EChartsInstance } from 'echarts-for-react';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import * as echarts from 'echarts/core';
 import _, { defaults } from 'lodash';
+import { useLatest } from 'ahooks';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useStorageData } from '~/components/plugins/hooks';
@@ -33,13 +34,15 @@ function Chart({
   height,
   interactionManager,
   variables,
+  onChartRenderFinished,
 }: {
   conf: ICartesianChartConf;
   data: TPanelData;
   width: number;
   height: number;
   interactionManager: IVizInteractionManager;
   variables: ITemplateVariable[];
+  onChartRenderFinished: (chartOptions: unknown) => void;
 }) {
   const rowDataMap = useRowDataMap(data, conf.x_axis_data_key);
 
@@ -60,13 +63,18 @@ function Chart({
   }, [conf, data]);
 
   const echartsRef = React.useRef<EChartsInstance>();
+  const onRenderFinishedRef = useLatest(onChartRenderFinished);
+  const handleEChartsFinished = useCallback(() => {
+    onRenderFinishedRef.current(echartsRef.current?.getOption());
+  }, []);
   const onEvents = useMemo(() => {
     return {
       click: handleSeriesClick,
+      finished: handleEChartsFinished,
     };
   }, [handleSeriesClick]);
 
-  const onChartReady = (echartsInstance: EChartsInstance) => {
+  const handleChartReady = (echartsInstance: EChartsInstance) => {
     echartsRef.current = echartsInstance;
     updateRegressionLinesColor(echartsInstance);
   };
@@ -85,7 +93,7 @@ function Chart({
       option={option}
       style={{ width, height }}
       onEvents={onEvents}
-      onChartReady={onChartReady}
+      onChartReady={handleChartReady}
       notMerge
       theme="merico-light"
     />
@@ -109,11 +117,16 @@ export const VizCartesianChart = observer(({ context, instance }: VizViewProps)
   const finalHeight = Math.max(0, getBoxContentHeight(height) - topStatsHeight - bottomStatsHeight);
   const finalWidth = getBoxContentWidth(width);
 
+  function handleChartRenderFinished(chartOptions: unknown) {
+    instance.messageChannels.getChannel('viz').emit('rendered', chartOptions);
+  }
+
   return (
     <DefaultVizBox width={width} height={height}>
       <StatsAroundViz onHeightChange={setTopStatsHeight} value={conf.stats.top} context={context} />
 
       <Chart
+        onChartRenderFinished={handleChartRenderFinished}
         variables={variables}
         width={finalWidth}
         height={finalHeight}

dashboard/src/index.ts

@@ -1,4 +1,6 @@
 import { ButtonProps } from '@mantine/core';
+import './init-dayjs';
+import './i18n'; // NOTE: keep it align with global.d.ts
 
 export const getVersion = () =>
   import('../package.json').then(({ version }) => {
@@ -16,9 +18,6 @@ export * from './model';
 export * from './api-caller/request';
 export type { AnyObject } from './types/utils';
 
-import './init-dayjs';
-import './i18n';
-
 // NOTE: keep it align with global.d.ts
 export interface IDashboardConfig {
   basename: string;
@@ -29,3 +28,6 @@ export interface IDashboardConfig {
   monacoPath: string;
   searchButtonProps: ButtonProps;
 }
+
+export { pluginManager } from './components/plugins';
+export { type IPanelAddon, type IPanelAddonRenderProps } from './types/plugin';

dashboard/src/types/plugin/index.ts

@@ -105,6 +105,7 @@ export type TranslationPatch = {
   lang: 'en' | 'zh';
   resources: Record<string, any>;
 }[];
+
 export interface VizComponent {
   name: string;
   displayName?: string;
@@ -130,9 +131,19 @@ export interface IConfigMigrator extends IPanelScopeConfigMigrator {
   migrate(ctx: IConfigMigrationContext): Promise<void>;
 }
 
+export interface IPanelAddonRenderProps {
+  viz: VizInstance;
+}
+
+export interface IPanelAddon {
+  name: string;
+  addonRender: React.ComponentType<IPanelAddonRenderProps>;
+}
+
 export interface IPluginManifest {
   viz: VizComponent[];
   color: IColorPaletteItem[];
+  panelAddon?: IPanelAddon[];
 }
 
 export interface IDashboardPlugin {
@@ -208,7 +219,9 @@ export interface IVizTriggerManager {
   retrieveTrigger(id: string): Promise<ITrigger | undefined>;
 
   watchTriggerSnapshotList(callback: (triggerList: ITriggerSnapshot<AnyObject>[]) => void): () => void;
+
   needMigration(): Promise<boolean>;
+
   runMigration(): Promise<void>;
 }
 
@@ -242,6 +255,7 @@ export interface IVizOperationManager {
   retrieveTrigger(operationId: string): Promise<IDashboardOperation | undefined>;
 
   runMigration(): Promise<void>;
+
   needMigration(): Promise<boolean>;
 }