@gravity-ui/chartkit 5.8.0 → 5.10.0

package/build/plugins/d3/examples/line/LogarithmicAxis.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const LineWithLogarithmicAxis: () => React.JSX.Element;

package/build/plugins/d3/examples/line/LogarithmicAxis.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Col, Container, Row, Text } from '@gravity-ui/uikit';
+import { randomNormal } from 'd3';
+import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
+export const LineWithLogarithmicAxis = () => {
+    const randomY = randomNormal(0, 100);
+    const widgetData = {
+        series: {
+            data: [
+                {
+                    type: 'line',
+                    name: 'Line series',
+                    data: new Array(25).fill(null).map((_, index) => ({
+                        x: index,
+                        y: Math.abs(randomY()),
+                    })),
+                },
+            ],
+        },
+    };
+    const lineWidgetData = Object.assign(Object.assign({}, widgetData), { title: { text: 'line' } });
+    const logarithmicWidgetData = Object.assign(Object.assign({}, widgetData), { title: { text: 'logarithmic' }, yAxis: [
+            {
+                type: 'logarithmic',
+            },
+        ] });
+    return (React.createElement(Container, { spaceRow: 5 },
+        React.createElement(Row, { space: 1 },
+            React.createElement(Text, { variant: "header-2" }, "logarithmic VS line")),
+        React.createElement(Row, { space: 3 },
+            React.createElement(Col, { s: 12, m: 6 },
+                React.createElement(ExampleWrapper, null,
+                    React.createElement(ChartKit, { type: "d3", data: lineWidgetData }))),
+            React.createElement(Col, { s: 12, m: 6 },
+                React.createElement(ExampleWrapper, null,
+                    React.createElement(ChartKit, { type: "d3", data: logarithmicWidgetData }))))));
+};

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/useAxisScales/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { extent, scaleBand, scaleLinear, scaleUtc } from 'd3';
+import { extent, scaleBand, scaleLinear, scaleLog, scaleUtc } from 'd3';
 import get from 'lodash/get';
 import { DEFAULT_AXIS_TYPE } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getAxisHeight, getDataCategoryValue, getDefaultMaxXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
@@ -24,7 +24,8 @@ export function createYScale(axis, series, boundsHeight) {
     const yCategories = get(axis, 'categories');
     const yTimestamps = get(axis, 'timestamps');
     switch (yType) {
-        case 'linear': {
+        case 'linear':
+        case 'logarithmic': {
             const domain = getDomainDataYBySeries(series);
             const range = [boundsHeight, boundsHeight * axis.maxPadding];
             if (isNumericalArrayData(domain)) {
@@ -34,7 +35,8 @@ export function createYScale(axis, series, boundsHeight) {
                 if (series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type))) {
                     yMaxValue = Math.max(yMaxValue, 0);
                 }
-                return scaleLinear().domain([yMinValue, yMaxValue]).range(range).nice();
+                const scaleFn = yType === 'logarithmic' ? scaleLog : scaleLinear;
+                return scaleFn().domain([yMinValue, yMaxValue]).range(range).nice();
             }
             break;
         }
@@ -94,13 +96,15 @@ export function createXScale(axis, series, boundsWidth) {
     const xAxisMinPadding = boundsWidth * maxPadding + calculateXAxisPadding(series);
     const xRange = [0, boundsWidth - xAxisMinPadding];
     switch (xType) {
-        case 'linear': {
+        case 'linear':
+        case 'logarithmic': {
             const domain = getDomainDataXBySeries(series);
             if (isNumericalArrayData(domain)) {
                 const [domainXMin, domainXMax] = extent(domain);
                 const xMinValue = typeof xMin === 'number' ? xMin : domainXMin;
                 const xMaxValue = typeof xMax === 'number' ? Math.max(xMax, domainXMax) : domainXMax;
-                return scaleLinear().domain([xMinValue, xMaxValue]).range(xRange).nice();
+                const scaleFn = xType === 'logarithmic' ? scaleLog : scaleLinear;
+                return scaleFn().domain([xMinValue, xMaxValue]).range(xRange).nice();
             }
             break;
         }

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, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
-import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, } from '../../utils';
+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, 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,10 +57,15 @@ 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 axisType = get(axisItem, 'type', 'linear');
+        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,
             labels: {
@@ -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.js

@@ -124,7 +124,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 }));
     }
     getId(refresh = false) {
         if (refresh) {

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/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/plugins/highcharts/renderer/helpers/config/config.js

@@ -379,9 +379,19 @@ function validateCellManipulationConfig(tooltipOptions, property, item) {
         item[property] = tooltipOptions[property];
     }
 }
+function getSeriesTypeFromTooltipContext() {
+    var _a, _b;
+    if (this.series) {
+        return this.series.type;
+    }
+    if (Array.isArray(this.points)) {
+        return (_b = (_a = this.points[0]) === null || _a === void 0 ? void 0 : _a.series) === null || _b === void 0 ? void 0 : _b.type;
+    }
+    return '';
+}
 function getTooltip(tooltip, options, comments, holidays) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const serieType = (this.series && this.series.type) || tooltip.chart.options.chart.type;
+    const serieType = getSeriesTypeFromTooltipContext.call(this) || tooltip.chart.options.chart.type;
     const chart = tooltip.chart;
     const xAxis = chart.xAxis[0];
     const isDatetimeXAxis = xAxis.options.type === 'datetime';

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';
+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.8.0",
+  "version": "5.10.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",