@gravity-ui/chartkit 5.9.0 → 5.10.1

package/build/plugins/d3/renderer/components/AxisX.d.ts

@@ -7,5 +7,13 @@ type Props = {
     scale: ChartScale;
     split: PreparedSplit;
 };
+export declare function getTitlePosition(args: {
+    axis: PreparedAxis;
+    width: number;
+    rowCount: number;
+}): {
+    x: number;
+    y: number;
+};
 export declare const AxisX: React.NamedExoticComponent<Props>;
 export {};

package/build/plugins/d3/renderer/components/AxisX.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { select } from 'd3';
 import { block } from '../../../../utils/cn';
-import { formatAxisTickLabel, getClosestPointsRange, getMaxTickCount, getScaleTicks, getTicksCount, setEllipsisForOverflowText, } from '../utils';
+import { formatAxisTickLabel, getAxisTitleRows, getClosestPointsRange, getMaxTickCount, getScaleTicks, getTicksCount, handleOverflowingText, } from '../utils';
 import { axisBottom } from '../utils/axis-generators';
 const b = block('d3-axis');
 function getLabelFormatter({ axis, scale }) {
@@ -18,6 +18,29 @@ function getLabelFormatter({ axis, scale }) {
         });
     };
 }
+export function getTitlePosition(args) {
+    const { axis, width, rowCount } = args;
+    if (rowCount < 1) {
+        return { x: 0, y: 0 };
+    }
+    let x;
+    const y = axis.title.height / rowCount + axis.title.margin + axis.labels.height + axis.labels.margin;
+    switch (axis.title.align) {
+        case 'left': {
+            x = axis.title.width / 2;
+            break;
+        }
+        case 'right': {
+            x = width - axis.title.width / 2;
+            break;
+        }
+        case 'center': {
+            x = width / 2;
+            break;
+        }
+    }
+    return { x, y };
+}
 export const AxisX = React.memo(function AxisX(props) {
     const { axis, width, height: totalHeight, scale, split } = props;
     const ref = React.useRef(null);
@@ -58,16 +81,27 @@ export const AxisX = React.memo(function AxisX(props) {
         svgElement.call(xAxisGenerator).attr('class', b());
         // add an axis header if necessary
         if (axis.title.text) {
-            const y = axis.title.height + axis.title.margin + axis.labels.height + axis.labels.margin;
+            const titleRows = getAxisTitleRows({ axis, textMaxWidth: width });
             svgElement
                 .append('text')
                 .attr('class', b('title'))
-                .attr('text-anchor', 'middle')
-                .attr('x', width / 2)
-                .attr('y', y)
+                .attr('transform', () => {
+                const { x, y } = getTitlePosition({ axis, width, rowCount: titleRows.length });
+                return `translate(${x}, ${y})`;
+            })
                 .attr('font-size', axis.title.style.fontSize)
-                .text(axis.title.text)
-                .call(setEllipsisForOverflowText, width);
+                .attr('text-anchor', 'middle')
+                .selectAll('tspan')
+                .data(titleRows)
+                .join('tspan')
+                .attr('x', 0)
+                .attr('y', (d) => d.y)
+                .text((d) => d.text)
+                .each((_d, index, nodes) => {
+                if (index === axis.title.maxRowCount - 1) {
+                    handleOverflowingText(nodes[index], width);
+                }
+            });
         }
     }, [axis, width, totalHeight, scale, split]);
     return React.createElement("g", { ref: ref });

package/build/plugins/d3/renderer/components/AxisY.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { axisLeft, axisRight, line, select } from 'd3';
 import { block } from '../../../../utils/cn';
-import { calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getClosestPointsRange, getScaleTicks, getTicksCount, parseTransformStyle, setEllipsisForOverflowText, setEllipsisForOverflowTexts, } from '../utils';
+import { calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getClosestPointsRange, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../utils';
 const b = block('d3-axis');
 function transformLabel(args) {
     const { node, axis } = args;
@@ -51,6 +51,33 @@ function getAxisGenerator(args) {
     }
     return axisGenerator;
 }
+function getTitlePosition(args) {
+    const { axis, axisHeight, rowCount } = args;
+    if (rowCount < 1) {
+        return { x: 0, y: 0 };
+    }
+    const x = -(axis.title.height -
+        axis.title.height / rowCount +
+        axis.title.margin +
+        axis.labels.margin +
+        axis.labels.width);
+    let y;
+    switch (axis.title.align) {
+        case 'left': {
+            y = axisHeight - axis.title.width / 2;
+            break;
+        }
+        case 'right': {
+            y = axis.title.width / 2;
+            break;
+        }
+        case 'center': {
+            y = axisHeight / 2;
+            break;
+        }
+    }
+    return { x, y };
+}
 export const AxisY = (props) => {
     const { axes, width, height: totalHeight, scale, split } = props;
     const height = getAxisHeight({ split, boundsHeight: totalHeight });
@@ -144,13 +171,28 @@ export const AxisY = (props) => {
             .append('text')
             .attr('class', b('title'))
             .attr('text-anchor', 'middle')
-            .attr('dy', (d) => -(d.title.margin + d.labels.margin + d.labels.width))
-            .attr('dx', (d) => (d.position === 'left' ? -height / 2 : height / 2))
             .attr('font-size', (d) => d.title.style.fontSize)
-            .attr('transform', (d) => (d.position === 'left' ? 'rotate(-90)' : 'rotate(90)'))
-            .text((d) => d.title.text)
-            .each((_d, index, node) => {
-            return setEllipsisForOverflowText(select(node[index]), height);
+            .attr('transform', (d) => {
+            const titleRows = wrapText({
+                text: d.title.text,
+                style: d.title.style,
+                width: height,
+            });
+            const rowCount = Math.min(titleRows.length, d.title.maxRowCount);
+            const { x, y } = getTitlePosition({ axis: d, axisHeight: height, rowCount });
+            const angle = d.position === 'left' ? -90 : 90;
+            return `translate(${x}, ${y}) rotate(${angle})`;
+        })
+            .selectAll('tspan')
+            .data((d) => getAxisTitleRows({ axis: d, textMaxWidth: height }))
+            .join('tspan')
+            .attr('x', 0)
+            .attr('y', (d) => d.y)
+            .text((d) => d.text)
+            .each((_d, index, nodes) => {
+            if (index === nodes.length - 1) {
+                handleOverflowingText(nodes[index], height);
+            }
         });
     }, [axes, width, height, scale, split]);
     return React.createElement("g", { ref: ref, className: b('container') });

package/build/plugins/d3/renderer/components/Chart.js

@@ -32,7 +32,8 @@ export const Chart = (props) => {
     const yAxis = React.useMemo(() => getPreparedYAxis({
         series: data.series.data,
         yAxis: data.yAxis,
-    }), [data]);
+        height,
+    }), [data, height]);
     const { legendItems, legendConfig, preparedSeries, preparedSeriesOptions, preparedLegend, handleLegendItemClick, } = useSeries({
         chartWidth: width,
         chartHeight: height,

package/build/plugins/d3/renderer/components/styles.css

@@ -20,6 +20,10 @@
   fill: var(--g-color-text-secondary);
 }
 
+.chartkit-d3-axis__title tspan {
+  alignment-baseline: after-edge;
+}
+
 .chartkit-d3-legend__item {
   cursor: pointer;
   user-select: none;

package/build/plugins/d3/renderer/constants/defaults/axis.d.ts

@@ -1,16 +1,14 @@
-import { ChartKitWidgetAxisType } from '../../../../../types';
+import type { BaseTextStyle, ChartKitWidgetAxis, ChartKitWidgetAxisType } from '../../../../../types';
 export declare const axisLabelsDefaults: {
     margin: number;
     padding: number;
     fontSize: number;
     maxWidth: number;
 };
-export declare const xAxisTitleDefaults: {
-    margin: number;
-    fontSize: string;
-};
-export declare const yAxisTitleDefaults: {
-    margin: number;
-    fontSize: string;
+type AxisTitleDefaults = Required<ChartKitWidgetAxis['title']> & {
+    style: BaseTextStyle;
 };
+export declare const xAxisTitleDefaults: AxisTitleDefaults;
+export declare const yAxisTitleDefaults: AxisTitleDefaults;
 export declare const DEFAULT_AXIS_TYPE: ChartKitWidgetAxisType;
+export {};

package/build/plugins/d3/renderer/constants/defaults/axis.js

@@ -5,7 +5,13 @@ export const axisLabelsDefaults = {
     maxWidth: 80,
 };
 const axisTitleDefaults = {
-    fontSize: '14px',
+    text: '',
+    margin: 0,
+    style: {
+        fontSize: '14px',
+    },
+    align: 'center',
+    maxRowCount: 1,
 };
 export const xAxisTitleDefaults = Object.assign(Object.assign({}, axisTitleDefaults), { margin: 4 });
 export const yAxisTitleDefaults = Object.assign(Object.assign({}, axisTitleDefaults), { margin: 8 });

package/build/plugins/d3/renderer/hooks/useChartOptions/types.d.ts

@@ -1,4 +1,4 @@
-import type { BaseTextStyle, ChartKitWidgetAxis, ChartKitWidgetAxisLabels, ChartKitWidgetAxisType, ChartKitWidgetData, ChartMargin } from '../../../../../types';
+import type { BaseTextStyle, ChartKitWidgetAxis, ChartKitWidgetAxisLabels, ChartKitWidgetAxisTitleAlignment, ChartKitWidgetAxisType, ChartKitWidgetData, ChartMargin } from '../../../../../types';
 type PreparedAxisLabels = Omit<ChartKitWidgetAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartKitWidgetAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation'>> & {
     style: BaseTextStyle;
     rotation: number;
@@ -15,9 +15,12 @@ export type PreparedAxis = Omit<ChartKitWidgetAxis, 'type' | 'labels'> & {
     labels: PreparedAxisLabels;
     title: {
         height: number;
+        width: number;
         text: string;
         margin: number;
         style: BaseTextStyle;
+        align: ChartKitWidgetAxisTitleAlignment;
+        maxRowCount: number;
     };
     min?: number;
     grid: {

package/build/plugins/d3/renderer/hooks/useChartOptions/x-axis.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
-import { CHART_SERIES_WITH_VOLUME_ON_X_AXIS, calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, } from '../../utils';
+import { CHART_SERIES_WITH_VOLUME_ON_X_AXIS, calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 function getLabelSettings({ axis, series, width, autoRotation = true, }) {
     const scale = createXScale(axis, series, width);
@@ -50,9 +50,17 @@ function getAxisMin(axis, series) {
 export const getPreparedXAxis = ({ xAxis, series, width, }) => {
     var _a;
     const titleText = get(xAxis, 'title.text', '');
-    const titleStyle = {
-        fontSize: get(xAxis, 'title.style.fontSize', xAxisTitleDefaults.fontSize),
-    };
+    const titleStyle = Object.assign(Object.assign({}, xAxisTitleDefaults.style), get(xAxis, 'title.style'));
+    const titleMaxRowsCount = get(xAxis, 'title.maxRowCount', xAxisTitleDefaults.maxRowCount);
+    const estimatedTitleRows = wrapText({
+        text: titleText,
+        style: titleStyle,
+        width,
+    }).slice(0, titleMaxRowsCount);
+    const titleSize = getLabelsSize({
+        labels: [titleText],
+        style: titleStyle,
+    });
     const labelsStyle = {
         fontSize: get(xAxis, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE),
     };
@@ -78,9 +86,10 @@ export const getPreparedXAxis = ({ xAxis, series, width, }) => {
             text: titleText,
             style: titleStyle,
             margin: get(xAxis, 'title.margin', xAxisTitleDefaults.margin),
-            height: titleText
-                ? getHorisontalSvgTextHeight({ text: titleText, style: titleStyle })
-                : 0,
+            height: titleSize.maxHeight * estimatedTitleRows.length,
+            width: titleSize.maxWidth,
+            align: get(xAxis, 'title.align', xAxisTitleDefaults.align),
+            maxRowCount: get(xAxis, 'title.maxRowCount', xAxisTitleDefaults.maxRowCount),
         },
         min: getAxisMin(xAxis, series),
         maxPadding: get(xAxis, 'maxPadding', 0.01),

package/build/plugins/d3/renderer/hooks/useChartOptions/y-axis.d.ts

@@ -1,6 +1,7 @@
 import type { ChartKitWidgetSeries, ChartKitWidgetYAxis } from '../../../../../types';
 import type { PreparedAxis } from './types';
-export declare const getPreparedYAxis: ({ series, yAxis, }: {
+export declare const getPreparedYAxis: ({ series, yAxis, height, }: {
     series: ChartKitWidgetSeries[];
     yAxis: ChartKitWidgetYAxis[] | undefined;
+    height: number;
 }) => PreparedAxis[];

package/build/plugins/d3/renderer/hooks/useChartOptions/y-axis.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
-import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, } from '../../utils';
+import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 const getAxisLabelMaxWidth = (args) => {
     const { axis, series } = args;
@@ -41,7 +41,7 @@ function getAxisMin(axis, series) {
     }
     return min;
 }
-export const getPreparedYAxis = ({ series, yAxis, }) => {
+export const getPreparedYAxis = ({ series, yAxis, height, }) => {
     const axisByPlot = [];
     const axisItems = yAxis || [{}];
     return axisItems.map((axisItem) => {
@@ -57,9 +57,14 @@ export const getPreparedYAxis = ({ series, yAxis, }) => {
             fontSize: get(axisItem, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE),
         };
         const titleText = get(axisItem, 'title.text', '');
-        const titleStyle = {
-            fontSize: get(axisItem, 'title.style.fontSize', yAxisTitleDefaults.fontSize),
-        };
+        const titleStyle = Object.assign(Object.assign({}, yAxisTitleDefaults.style), get(axisItem, 'title.style'));
+        const titleMaxRowsCount = get(axisItem, 'title.maxRowCount', yAxisTitleDefaults.maxRowCount);
+        const estimatedTitleRows = wrapText({
+            text: titleText,
+            style: titleStyle,
+            width: height,
+        }).slice(0, titleMaxRowsCount);
+        const titleSize = getLabelsSize({ labels: [titleText], style: titleStyle });
         const axisType = get(axisItem, 'type', DEFAULT_AXIS_TYPE);
         const preparedAxis = {
             type: axisType,
@@ -87,9 +92,10 @@ export const getPreparedYAxis = ({ series, yAxis, }) => {
                 text: titleText,
                 margin: get(axisItem, 'title.margin', yAxisTitleDefaults.margin),
                 style: titleStyle,
-                height: titleText
-                    ? getHorisontalSvgTextHeight({ text: titleText, style: titleStyle })
-                    : 0,
+                width: titleSize.maxWidth,
+                height: titleSize.maxHeight * estimatedTitleRows.length,
+                align: get(axisItem, 'title.align', yAxisTitleDefaults.align),
+                maxRowCount: titleMaxRowsCount,
             },
             min: getAxisMin(axisItem, series),
             maxPadding: get(axisItem, 'maxPadding', 0.05),

package/build/plugins/d3/renderer/utils/axis.d.ts

@@ -1,5 +1,6 @@
 import type { AxisDomain, AxisScale, ScaleBand } from 'd3';
 import type { PreparedAxis, PreparedSplit } from '../hooks';
+import type { TextRow } from './text';
 export declare function getTicksCount({ axis, range }: {
     axis: PreparedAxis;
     range: number;
@@ -24,3 +25,7 @@ export declare function getAxisHeight(args: {
     split: PreparedSplit;
     boundsHeight: number;
 }): number;
+export declare function getAxisTitleRows(args: {
+    axis: PreparedAxis;
+    textMaxWidth: number;
+}): TextRow[];

package/build/plugins/d3/renderer/utils/axis.js

@@ -1,3 +1,4 @@
+import { wrapText } from './text';
 export function getTicksCount({ axis, range }) {
     let ticksCount;
     if (axis.ticks.pixelInterval) {
@@ -48,3 +49,23 @@ export function getAxisHeight(args) {
     }
     return boundsHeight;
 }
+export function getAxisTitleRows(args) {
+    const { axis, textMaxWidth } = args;
+    if (axis.title.maxRowCount < 1) {
+        return [];
+    }
+    const textRows = wrapText({
+        text: axis.title.text,
+        style: axis.title.style,
+        width: textMaxWidth,
+    });
+    return textRows.reduce((acc, row, index) => {
+        if (index < axis.title.maxRowCount) {
+            acc.push(row);
+        }
+        else {
+            acc[axis.title.maxRowCount - 1].text += row.text;
+        }
+        return acc;
+    }, []);
+}

package/build/plugins/d3/renderer/utils/text.d.ts

@@ -1,5 +1,6 @@
 import type { Selection } from 'd3';
 import { BaseTextStyle } from '../../../../types';
+export declare function handleOverflowingText(tSpan: SVGTSpanElement | null, maxWidth: number): void;
 export declare function setEllipsisForOverflowText<T>(selection: Selection<SVGTextElement, T, null, unknown>, maxWidth: number): void;
 export declare function setEllipsisForOverflowTexts<T>(selection: Selection<SVGTextElement, T, any, unknown>, maxWidth: ((datum: T) => number) | number): void;
 export declare function hasOverlappingLabels({ width, labels, padding, style, }: {
@@ -16,3 +17,12 @@ export declare function getLabelsSize({ labels, style, rotation, }: {
     maxHeight: number;
     maxWidth: number;
 };
+export type TextRow = {
+    text: string;
+    y: number;
+};
+export declare function wrapText(args: {
+    text: string;
+    style?: BaseTextStyle;
+    width: number;
+}): TextRow[];

package/build/plugins/d3/renderer/utils/text.js

@@ -1,15 +1,32 @@
 import { select } from 'd3-selection';
-export function setEllipsisForOverflowText(selection, maxWidth) {
-    var _a, _b, _c, _d;
-    let text = selection.text();
-    selection.text(null).append('title').text(text);
-    const tSpan = selection.append('tspan').text(text).style('alignment-baseline', 'inherit');
-    let textLength = ((_b = (_a = tSpan.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || 0;
+export function handleOverflowingText(tSpan, maxWidth) {
+    var _a, _b, _c;
+    if (!tSpan) {
+        return;
+    }
+    const svg = tSpan.closest('svg');
+    if (!svg) {
+        return;
+    }
+    const textNode = tSpan.closest('text');
+    const angle = ((_a = Array.from((textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal) || []).find((item) => item.angle)) === null || _a === void 0 ? void 0 : _a.angle) || 0;
+    const revertRotation = svg.createSVGTransform();
+    revertRotation.setRotate(-angle, 0, 0);
+    textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal.appendItem(revertRotation);
+    let text = tSpan.textContent || '';
+    let textLength = ((_b = tSpan.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || 0;
     while (textLength > maxWidth && text.length > 1) {
         text = text.slice(0, -1);
-        tSpan.text(text + '…');
-        textLength = ((_d = (_c = tSpan.node()) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.width) || 0;
+        tSpan.textContent = text + '…';
+        textLength = ((_c = tSpan.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.width) || 0;
     }
+    textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal.removeItem((textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal.length) - 1);
+}
+export function setEllipsisForOverflowText(selection, maxWidth) {
+    const text = selection.text();
+    selection.text(null).append('title').text(text);
+    const tSpan = selection.append('tspan').text(text).style('alignment-baseline', 'inherit');
+    handleOverflowingText(tSpan.node(), maxWidth);
 }
 export function setEllipsisForOverflowTexts(selection, maxWidth) {
     selection.each(function (datum) {
@@ -48,6 +65,9 @@ function renderLabels(selection, { labels, style = {}, attrs = {}, }) {
 }
 export function getLabelsSize({ labels, style, rotation, }) {
     var _a;
+    if (!labels.filter(Boolean).length) {
+        return { maxHeight: 0, maxWidth: 0 };
+    }
     const container = select(document.body)
         .append('div')
         .attr('class', 'chartkit chartkit-theme_common');
@@ -62,3 +82,36 @@ export function getLabelsSize({ labels, style, rotation, }) {
     container.remove();
     return { maxHeight: height, maxWidth: width };
 }
+export function wrapText(args) {
+    const { text, style, width } = args;
+    const height = getLabelsSize({
+        labels: [text],
+        style: style,
+    }).maxHeight;
+    // @ts-ignore
+    const segmenter = new Intl.Segmenter([], { granularity: 'word' });
+    const segments = Array.from(segmenter.segment(text));
+    return segments.reduce((acc, s) => {
+        const item = s;
+        if (!acc.length) {
+            acc.push({
+                text: '',
+                y: acc.length * height,
+            });
+        }
+        let lastRow = acc[acc.length - 1];
+        if (item.isWordLike &&
+            getLabelsSize({
+                labels: [lastRow.text + item.segment],
+                style,
+            }).maxWidth > width) {
+            lastRow = {
+                text: '',
+                y: acc.length * height,
+            };
+            acc.push(lastRow);
+        }
+        lastRow.text += item.segment;
+        return acc;
+    }, []);
+}

package/build/plugins/highcharts/renderer/HighchartsWidget.d.ts

@@ -15,6 +15,8 @@ declare const HighchartsWidget: React.ForwardRefExoticComponent<{
     hoistConfigError?: boolean | undefined;
     nonBodyScroll?: boolean | undefined;
     splitTooltip?: boolean | undefined;
+    paneSplitOrientation?: import("react-split-pane").Split | undefined;
+    onSplitPaneOrientationChange?: ((orientation: import("react-split-pane").Split) => void) | undefined;
     onChange?: ((data: {
         type: "PARAMS_CHANGED";
         data: {

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, 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/StyledSplitPane/StyledSplitPane.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Split, SplitPaneProps } from 'react-split-pane';
+import { SplitPaneProps } from 'react-split-pane';
 import './StyledSplitPane.css';
-export type PaneSplit = Split;
 type Props = SplitPaneProps & {
     paneOneRender: () => React.ReactNode;
     paneTwoRender: () => React.ReactNode;

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/components/withSplitPane/withSplitPane.d.ts

@@ -1,11 +1,18 @@
 import React from 'react';
 import type { Highcharts } from '../../../types';
 import './WithSplitPane.css';
+declare enum PaneSplits {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
 export declare const withSplitPane: <ComposedComponentProps extends {}>(ComposedComponent: React.ComponentType<ComposedComponentProps>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<ComposedComponentProps & {
     onPaneChange?: (() => void) | undefined;
     onSplitPaneMountCallback?: ((chart: Highcharts.Chart) => void) | undefined;
+    paneSplitOrientation?: PaneSplits | undefined;
+    onSplitPaneOrientationChange?: ((orientation?: PaneSplits) => void) | undefined;
 } & {
     current: any;
     forwardedRef: React.Ref<ComposedComponentProps>;
     callback?: Highcharts.ChartCallbackFunction | undefined;
 }> & React.RefAttributes<ComposedComponentProps>>;
+export {};

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

@@ -79,9 +79,10 @@ export const withSplitPane = (ComposedComponent) => {
             this.state = {
                 paneSize: undefined,
                 maxPaneSize: undefined,
-                paneSplit: window.innerWidth > window.innerHeight
-                    ? PaneSplits.VERTICAL
-                    : PaneSplits.HORIZONTAL,
+                paneSplit: this.props.paneSplitOrientation ||
+                    (window.innerWidth > window.innerHeight
+                        ? PaneSplits.VERTICAL
+                        : PaneSplits.HORIZONTAL),
                 componentKey: getRandomCKId(),
             };
             this.tooltipContainerRef = React.createRef();
@@ -136,15 +137,16 @@ export const withSplitPane = (ComposedComponent) => {
             };
             this.handleOrientationChange = () => {
                 const handleResizeAfterOrientationChange = () => {
+                    var _a, _b;
                     const deviceWidth = window.innerWidth;
                     const deviceHeight = window.innerHeight;
+                    const aspectRatioOrientation = deviceWidth > deviceHeight ? PaneSplits.VERTICAL : PaneSplits.HORIZONTAL;
                     this.setState({
-                        paneSplit: deviceWidth > deviceHeight
-                            ? PaneSplits.VERTICAL
-                            : PaneSplits.HORIZONTAL,
+                        paneSplit: this.props.paneSplitOrientation || aspectRatioOrientation,
                     }, () => {
                         this.setInitialState(true);
                     });
+                    (_b = (_a = this.props).onSplitPaneOrientationChange) === null || _b === void 0 ? void 0 : _b.call(_a, aspectRatioOrientation);
                     window.removeEventListener('resize', handleResizeAfterOrientationChange);
                 };
                 window.addEventListener('resize', handleResizeAfterOrientationChange);

package/build/types/widget-data/axis.d.ts

@@ -1,6 +1,7 @@
 import type { FormatNumberOptions } from '../../plugins/shared';
 import type { BaseTextStyle } from './base';
 export type ChartKitWidgetAxisType = 'category' | 'datetime' | 'linear' | 'logarithmic';
+export type ChartKitWidgetAxisTitleAlignment = 'left' | 'center' | 'right';
 export type ChartKitWidgetAxisLabels = {
     /** Enable or disable the axis labels. */
     enabled?: boolean;
@@ -37,11 +38,18 @@ export type ChartKitWidgetAxis = {
     lineColor?: string;
     title?: {
         text?: string;
+        /** CSS styles for the title */
+        style?: Partial<BaseTextStyle>;
         /** The pixel distance between the axis labels or line and the title.
          *
          * Defaults to 4 for horizontal axes, 8 for vertical.
          * */
         margin?: number;
+        /** Alignment of the title. */
+        align?: ChartKitWidgetAxisTitleAlignment;
+        /** Allows limiting of the contents of a title block to the specified number of lines.
+         *  Defaults to 1. */
+        maxRowCount?: number;
     };
     /** The minimum value of the axis. If undefined the min value is automatically calculate. */
     min?: number;

package/build/types/widget.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { Split } from 'react-split-pane';
 import type { Highcharts, HighchartsWidgetData, StringParams } from '../plugins/highcharts/types';
 import type { IndicatorWidgetData } from '../plugins/indicator/types';
 import type { CustomTooltipProps, Yagr, YagrWidgetData } from '../plugins/yagr/types';
@@ -20,6 +21,8 @@ export interface ChartKitWidget {
         hoistConfigError?: boolean;
         nonBodyScroll?: boolean;
         splitTooltip?: boolean;
+        paneSplitOrientation?: Split;
+        onSplitPaneOrientationChange?: (orientation: Split) => void;
         onChange?: (data: {
             type: 'PARAMS_CHANGED';
             data: {

package/package.json

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