Merge pull request #1877 from merico-dev/panel-loaded-event

feat(dashboard): add panel loaded event and refactor viz instance API

Author: ZeekoZhu

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "14.60.5",
+  "version": "14.60.6",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "14.60.5",
+  "version": "14.60.6",
   "license": "Apache-2.0",
   "repository": {
     "url": "https://github.com/merico-dev/table"

dashboard/src/components/plugins/viz-components/horizontal-bar-chart/viz-horizontal-bar-chart.tsx

@@ -56,12 +56,6 @@ function Chart({ conf, data, width, height, interactionManager, variables, onCha
   const echartsRef = React.useRef<EChartsInstance>();
   const onRenderFinishedRef = useLatest(onChartRenderFinished);
 
-  useEffect(() => {
-    setTimeout(() => {
-      onRenderFinishedRef.current?.(echartsRef.current?.getOption());
-    }, 100);
-  }, [option]);
-
   const onEvents = useMemo(() => {
     return {
       click: handleSeriesClick,
@@ -76,6 +70,12 @@ function Chart({ conf, data, width, height, interactionManager, variables, onCha
     return getOption(conf, data, variables);
   }, [conf, data]);
 
+  useEffect(() => {
+    setTimeout(() => {
+      onRenderFinishedRef.current?.(echartsRef.current?.getOption());
+    }, 100);
+  }, [option]);
+
   if (!width || !height) {
     return null;
   }

dashboard/src/components/plugins/viz-components/viz-instance-api.ts

@@ -1,5 +1,5 @@
-import { VizInstance } from '~/types/plugin';
 import { IPanelInfo } from '~/components/plugins';
+import { VizInstance } from '~/types/plugin';
 
 /**
  * Emit viz rendered event
@@ -20,8 +20,21 @@ export interface IVizRenderedPayload {
  * @param callback
  */
 export function onVizRendered(instance: VizInstance, callback: (data: unknown) => void) {
-  instance.messageChannels.getChannel('viz').on('rendered', callback);
+  const channel = instance.messageChannels.getChannel('viz');
+  channel.on('rendered', callback);
+  return () => {
+    channel.off('rendered', callback);
+  };
+}
+
+export function notifyPanelLoaded(instance: VizInstance, data: unknown) {
+  instance.messageChannels.getChannel('panel').emit('loaded', data);
+}
+
+export function onPanelLoaded(instance: VizInstance, callback: (data: unknown) => void) {
+  const channel = instance.messageChannels.getChannel('panel');
+  channel.on('loaded', callback);
   return () => {
-    instance.messageChannels.getChannel('viz').off('rendered', callback);
+    channel.off('loaded', callback);
   };
 }

dashboard/src/components/plugins/viz-manager/components.tsx

@@ -1,8 +1,10 @@
 import { omit } from 'lodash';
+import { useEffect } from 'react';
 import { VizConfigContext, VizContext, VizInstance, VizViewContext } from '~/types/plugin';
 import { ITemplateVariable } from '~/utils';
 import { JsonPluginStorage } from '../json-plugin-storage';
 import { IPanelInfo, IVizManager } from './types';
+import { notifyPanelLoaded } from '../viz-components/viz-instance-api';
 
 function createCommonContext(
   instance: VizInstance,
@@ -53,6 +55,9 @@ export const VizViewComponent = <T,>(props: IViewComponentProps<T>) => {
     ...createCommonContext(instance, data, vizManager, variables),
     viewport: { width: measure.w, height: measure.h },
   };
+  useEffect(() => {
+    notifyPanelLoaded(instance, data);
+  }, [data, instance]);
   const Comp = comp.viewRender;
   return <Comp context={context} instance={instance} {...omit(props, ['panel', 'vizManager', 'data'])} />;
 };

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "14.60.5",
+  "version": "14.60.6",
   "license": "Apache-2.0",
   "repository": {
     "url": "https://github.com/merico-dev/table"