@gravity-ui/chartkit 1.5.0 → 1.5.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.5.2](https://github.com/gravity-ui/chartkit/compare/v1.5.1...v1.5.2) (2022-12-20)
+
+
+### Bug Fixes
+
+* **Highcharts plugin:** add widget rendering time ([#109](https://github.com/gravity-ui/chartkit/issues/109)) ([0db5c73](https://github.com/gravity-ui/chartkit/commit/0db5c737e4de588decb6cc191fa624db8b2119b4))
+
+## [1.5.1](https://github.com/gravity-ui/chartkit/compare/v1.5.0...v1.5.1) (2022-12-20)
+
+
+### Bug Fixes
+
+* **Highcharts plugin:** add merging serie stack name if it already exists ([#107](https://github.com/gravity-ui/chartkit/issues/107)) ([fa73b55](https://github.com/gravity-ui/chartkit/commit/fa73b5554a491f20c109416d979e74c3b9d7e2c3))
+
 ## [1.5.0](https://github.com/gravity-ui/chartkit/compare/v1.4.3...v1.5.0) (2022-12-19)
 
 

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

@@ -564,6 +564,7 @@ export declare class HighchartsComponent extends React.PureComponent<Props, Stat
         callback?: undefined;
     } | null;
     state: State;
+    private id?;
     private chartComponent;
     componentDidMount(): void;
     componentDidUpdate(): void;
@@ -572,6 +573,7 @@ export declare class HighchartsComponent extends React.PureComponent<Props, Stat
     extendChartInstance: (chart: Chart) => void;
     getParams: () => StringParams;
     updateParams: (params: StringParams) => void;
+    private getId;
     private onLoad;
 }
 export {};

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

@@ -3,6 +3,7 @@ import Highcharts from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
 import get from 'lodash/get';
 import { settings } from '../../../../libs';
+import { markChartPerformance, getChartPerformanceDuration, getRandomCKId } from '../../../../utils';
 import { getGraph } from '../helpers/graph';
 import { initHighchartsModules } from '../helpers/init-highcharts-modules';
 import { withSplitPane } from './withSplitPane/withSplitPane';
@@ -91,8 +92,15 @@ export class HighchartsComponent extends React.PureComponent {
         if (isError) {
             return null;
         }
+        markChartPerformance(this.getId(true));
         return (React.createElement(Component, { key: Math.random(), options: options, highcharts: Highcharts, onSplitPaneMountCallback: this.state.callback || undefined, callback: this.extendChartInstance, constructorType: (options === null || options === void 0 ? void 0 : options.useHighStock) ? 'stockChart' : 'chart', containerProps: { className: 'chartkit-graph' }, ref: this.chartComponent }));
     }
+    getId(refresh = false) {
+        if (refresh) {
+            this.id = getRandomCKId();
+        }
+        return `${this.props.id}_${this.id}`;
+    }
     onLoad() {
         if (!this.state.isError && !this.props.splitTooltip) {
             const data = {
@@ -103,8 +111,9 @@ export class HighchartsComponent extends React.PureComponent {
             if (this.state.callback && data.widget) {
                 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);
         }

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

@@ -1471,7 +1471,7 @@ export function prepareConfig(data, options, isMobile, holidays) {
                     }
                 }, false);
                 if (serieHasIntersectionWithOthers && !hasPositiveValues && hasNegativeValues) {
-                    serie.stack = 'negative';
+                    serie.stack = serie.stack ? `${serie.stack}__negative` : 'negative';
                 }
             }
         });

package/build/utils/index.d.ts

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

package/build/utils/index.js

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

package/build/utils/performance.d.ts

@@ -0,0 +1,2 @@
+export declare const markChartPerformance: (name: string) => void;
+export declare const getChartPerformanceDuration: (name: string) => number | undefined;

package/build/utils/performance.js

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

package/package.json

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