@gravity-ui/chartkit 5.10.0 → 5.10.2

package/build/plugins/highcharts/renderer/components/HighchartsComponent.d.ts

@@ -574,5 +574,6 @@ export declare class HighchartsComponent extends React.PureComponent<Props, Stat
     updateParams: (params: StringParams) => void;
     private getId;
     private onLoad;
+    private needRenderCallback;
 }
 export {};

package/build/plugins/highcharts/renderer/components/HighchartsComponent.js

@@ -103,12 +103,7 @@ export class HighchartsComponent extends React.PureComponent {
         });
     }
     componentDidUpdate() {
-        var _a, _b;
-        const needRenderCallback = this.props.onRender && !this.state.isError && !this.props.splitTooltip;
-        if (needRenderCallback) {
-            (_b = (_a = this.props).onRender) === null || _b === void 0 ? void 0 : _b.call(_a, {
-                renderTime: getChartPerformanceDuration(this.getId()),
-            });
+        if (this.needRenderCallback()) {
             const widget = this.chartComponent.current ? this.chartComponent.current.chart : null;
             if (this.state.callback && widget) {
                 this.state.callback(widget);
@@ -124,7 +119,7 @@ export class HighchartsComponent extends React.PureComponent {
             return null;
         }
         markChartPerformance(this.getId(true));
-        return (React.createElement(Component, { key: Math.random(), options: options, highcharts: Highcharts, onSplitPaneMountCallback: this.state.callback || undefined, onSplitPaneOrientationChange: this.props.onSplitPaneOrientationChange, paneSplitOrientation: this.props.paneSplitOrientation, callback: this.extendChartInstance, constructorType: (options === null || options === void 0 ? void 0 : options.useHighStock) ? 'stockChart' : 'chart', containerProps: { className: 'chartkit-graph' }, ref: this.chartComponent }));
+        return (React.createElement(Component, { key: Math.random(), options: options, highcharts: Highcharts, onSplitPaneMountCallback: this.state.callback || undefined, onSplitPaneOrientationChange: this.props.onSplitPaneOrientationChange, paneSplitOrientation: this.props.paneSplitOrientation, callback: this.extendChartInstance, constructorType: (options === null || options === void 0 ? void 0 : options.useHighStock) ? 'stockChart' : 'chart', containerProps: { className: 'chartkit-graph' }, ref: this.chartComponent, onRender: this.needRenderCallback() && this.props.onRender }));
     }
     getId(refresh = false) {
         if (refresh) {
@@ -149,6 +144,11 @@ export class HighchartsComponent extends React.PureComponent {
             window.requestAnimationFrame(this.reflow);
         }
     }
+    needRenderCallback() {
+        const { splitTooltip, onRender } = this.props;
+        const { isError } = this.state;
+        return !splitTooltip && onRender && !isError;
+    }
 }
 HighchartsComponent.defaultProps = {
     hoistConfigError: true,

package/build/plugins/highcharts/renderer/components/HighchartsReact.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import Highcharts from 'highcharts';
+import type { ChartKitProps } from '../../../../types';
 interface HighchartsReactRefObject {
     chart: Highcharts.Chart | null | undefined;
     container: React.RefObject<HTMLDivElement | undefined>;
@@ -13,6 +14,7 @@ interface HighchartsReactProps {
     highcharts?: typeof Highcharts;
     options: Highcharts.Options;
     callback?: Highcharts.ChartCallbackFunction;
+    onRender?: ChartKitProps<any>['onRender'];
 }
 export declare const HighchartsReact: React.ForwardRefExoticComponent<React.PropsWithoutRef<HighchartsReactProps> & React.RefAttributes<HighchartsReactRefObject>>;
 export default HighchartsReact;

package/build/plugins/highcharts/renderer/components/HighchartsReact.js

@@ -1,9 +1,15 @@
 /* eslint no-console: ["error", { allow: ["warn", "error"]}] */
 import React from 'react';
+import afterFrame from 'afterframe';
+import { measurePerformance } from '../../../../utils';
+import { useElementSize } from './useElementSize';
 const useIsomorphicLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 export const HighchartsReact = React.memo(React.forwardRef(function HighchartsReact(props, ref) {
+    const { onRender } = props;
     const containerRef = React.useRef(null);
     const chartRef = React.useRef();
+    const { width, height } = useElementSize(containerRef);
+    const performanceMeasure = React.useRef(measurePerformance());
     useIsomorphicLayoutEffect(() => {
         function createChart() {
             const { highcharts: HighchartsComponent } = props;
@@ -47,6 +53,21 @@ export const HighchartsReact = React.memo(React.forwardRef(function HighchartsRe
         },
         container: containerRef,
     }), []);
+    React.useLayoutEffect(() => {
+        if (width && height) {
+            if (!performanceMeasure.current) {
+                performanceMeasure.current = measurePerformance();
+            }
+            afterFrame(() => {
+                var _a;
+                const renderTime = (_a = performanceMeasure.current) === null || _a === void 0 ? void 0 : _a.end();
+                if (typeof renderTime === 'number') {
+                    onRender === null || onRender === void 0 ? void 0 : onRender({ renderTime });
+                }
+                performanceMeasure.current = null;
+            });
+        }
+    }, [width, height, onRender]);
     return React.createElement("div", Object.assign({}, props.containerProps, { ref: containerRef }));
 }));
 HighchartsReact.displayName = 'HighchartsReact';

package/build/plugins/highcharts/renderer/components/useElementSize.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface UseElementSizeResult {
+    width: number;
+    height: number;
+}
+export declare function useElementSize<T extends HTMLElement = HTMLDivElement>(ref: React.MutableRefObject<T | null> | null, key?: string): UseElementSizeResult;

package/build/plugins/highcharts/renderer/components/useElementSize.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import debounce from 'lodash/debounce';
+import round from 'lodash/round';
+const RESIZE_DEBOUNCE = 200;
+const ROUND_PRESICION = 2;
+export function useElementSize(ref, 
+// can be used, when it is needed to force reassign observer to element
+// in order to get correct measures. might be related to below
+// https://github.com/WICG/resize-observer/issues/65
+key) {
+    const [size, setSize] = React.useState({
+        width: 0,
+        height: 0,
+    });
+    React.useLayoutEffect(() => {
+        if (!(ref === null || ref === void 0 ? void 0 : ref.current)) {
+            return undefined;
+        }
+        const handleResize = (entries) => {
+            if (!Array.isArray(entries)) {
+                return;
+            }
+            const entry = entries[0];
+            if (entry && entry.borderBoxSize) {
+                const borderBoxSize = entry.borderBoxSize[0]
+                    ? entry.borderBoxSize[0]
+                    : entry.borderBoxSize;
+                // ...but old versions of Firefox treat it as a single item
+                // https://github.com/mdn/dom-examples/blob/main/resize-observer/resize-observer-text.html#L88
+                setSize({
+                    width: round(borderBoxSize.inlineSize, ROUND_PRESICION),
+                    height: round(borderBoxSize.blockSize, ROUND_PRESICION),
+                });
+            }
+            else if (entry) {
+                const target = entry.target;
+                setSize({
+                    width: round(target.offsetWidth, ROUND_PRESICION),
+                    height: round(target.offsetHeight, ROUND_PRESICION),
+                });
+            }
+        };
+        const observer = new ResizeObserver(debounce(handleResize, RESIZE_DEBOUNCE));
+        observer.observe(ref.current);
+        return () => {
+            observer.disconnect();
+        };
+    }, [ref, key]);
+    return size;
+}

package/build/plugins/highcharts/renderer/helpers/config/config.js

@@ -423,7 +423,10 @@ function getTooltip(tooltip, options, comments, holidays) {
             unsafe: Boolean(options.unsafe),
         };
         if (typeof options.manageTooltipConfig === 'function') {
-            json = callManageTooltipConfig(options, json, chart);
+            // manageTooltipConfig could accidently break json variable
+            // and because of it we create new object as an argument
+            const updatedJSON = callManageTooltipConfig(options, Object.assign({}, json), chart);
+            merge(json, updatedJSON);
         }
         const usersPointFormat = get(options.highcharts, 'tooltip.pointFormat');
         if (tooltipOptions.pointFormatter || usersPointFormat) {
@@ -640,7 +643,10 @@ function getTooltip(tooltip, options, comments, holidays) {
     delete json.pre_lines;
     if (json.lines && json.lines.length > 0) {
         if (typeof options.manageTooltipConfig === 'function') {
-            json = callManageTooltipConfig(options, json, chart);
+            // manageTooltipConfig could accidently break json variable
+            // and because of it we create new object as an argument
+            const updatedJSON = callManageTooltipConfig(options, Object.assign({}, json), chart);
+            merge(json, updatedJSON);
         }
         let hiddenRowsSum = 0;
         let maxChartKitPrecision = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "5.10.0",
+  "version": "5.10.2",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",