fix(Highcharts plugin): add widget rendering time (#109)

* fix(Highcharts plugin): add widget rendering time

* fix(Highcharts plugin): remove performance warn

src/plugins/highcharts/renderer/components/HighchartsComponent.tsx

@@ -4,6 +4,7 @@ import HighchartsReact from 'highcharts-react-official';
 import get from 'lodash/get';
 import type {ChartKitProps} from '../../../../types';
 import {settings} from '../../../../libs';
+import {markChartPerformance, getChartPerformanceDuration, getRandomCKId} from '../../../../utils';
 import type {HighchartsWidgetData, StringParams} from '../../types';
 import {getGraph} from '../helpers/graph';
 import {initHighchartsModules} from '../helpers/init-highcharts-modules';
@@ -92,6 +93,8 @@ export class HighchartsComponent extends React.PureComponent<Props, State> {
         isError: false,
     };
 
+    private id?: string;
+
     private chartComponent = React.createRef<{
         chart: Highcharts.Chart;
         container: React.RefObject<HTMLDivElement>;
@@ -113,6 +116,8 @@ export class HighchartsComponent extends React.PureComponent<Props, State> {
             return null;
         }
 
+        markChartPerformance(this.getId(true));
+
         return (
             <Component
                 key={Math.random()}
@@ -152,6 +157,13 @@ export class HighchartsComponent extends React.PureComponent<Props, State> {
         }
     };
 
+    private getId(refresh = false) {
+        if (refresh) {
+            this.id = getRandomCKId();
+        }
+        return `${this.props.id}_${this.id}`;
+    }
+
     private onLoad() {
         if (!this.state.isError && !this.props.splitTooltip) {
             const data = {
@@ -164,8 +176,10 @@ export class HighchartsComponent extends React.PureComponent<Props, State> {
                 this.state.callback(data.widget);
             }
 
+            const widgetRendering = getChartPerformanceDuration(this.getId());
+
             if (this.props.onLoad) {
-                this.props.onLoad({widget: data.widget});
+                this.props.onLoad({widget: data.widget, widgetRendering});
             }
 
             window.requestAnimationFrame(this.reflow);

src/utils/index.ts

@@ -1,2 +1,3 @@
 export {getRandomCKId} from './common';
 export {typedMemo} from './react';
+export {getChartPerformanceDuration, markChartPerformance} from './performance';

src/utils/performance.ts

@@ -0,0 +1,17 @@
+export const markChartPerformance = (name: string) => {
+    window.performance.mark(`${name}-mark`);
+};
+
+export const getChartPerformanceDuration = (name: string) => {
+    const measureName = `${name}-measure`;
+
+    window.performance.measure(measureName, `${name}-mark`);
+
+    const entry = window.performance.getEntriesByName(measureName)[0];
+
+    if (entry) {
+        return entry.duration;
+    }
+
+    return undefined;
+};