@gravity-ui/charts 1.42.3 → 1.42.4

package/dist/esm/components/AxisY/prepare-axis-data.js

@@ -3,7 +3,7 @@ import { calculateCos, calculateSin, formatAxisTickLabel, getBandsPosition, getL
 import { prepareHtmlYAxisTitle, prepareSvgYAxisTitle } from './prepare-axis-title';
 import { getTickValues } from './utils';
 async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHeight, topOffset, }) {
-    var _a;
+    var _a, _b;
     const originalTextSize = await getTextSize(text);
     // Currently, a preliminary label calculation is used to build the chart - we cannot exceed it here.
     // Therefore, we rely on a pre-calculated number instead of the current maximum label width.
@@ -59,7 +59,9 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHei
             }
         }
         content.forEach((row) => {
+            var _a;
             row.y -= newLabelHeight / 2;
+            row.y += (_a = originalTextSize.hangingOffset) !== null && _a !== void 0 ? _a : 0;
         });
         size.width = newLabelWidth;
         size.height = newLabelHeight;
@@ -87,7 +89,8 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHei
             ? textSize.height / calculateSin(axis.labels.rotation)
             : textSize.height;
         const x = axis.position === 'left' ? -textSize.width : 0;
-        const y = Math.max(-topOffset - top, -actualTextHeight / 2);
+        const y = Math.max(-topOffset - top, -actualTextHeight / 2) +
+            ((_a = originalTextSize.hangingOffset) !== null && _a !== void 0 ? _a : 0);
         content.push({
             text: rowText,
             x,
@@ -98,7 +101,7 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHei
     const x = axis.position === 'left' ? left - axis.labels.margin : left + axis.labels.margin;
     const y = top;
     const svgLabel = {
-        title: content.length > 1 || ((_a = content[0]) === null || _a === void 0 ? void 0 : _a.text) !== text ? text : undefined,
+        title: content.length > 1 || ((_b = content[0]) === null || _b === void 0 ? void 0 : _b.text) !== text ? text : undefined,
         content: content,
         style: axis.labels.style,
         size: size,
@@ -109,7 +112,7 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHei
     return svgLabel;
 }
 export async function prepareYAxisData({ axis, split, scale, top: topOffset, width, height, series, }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const axisPlotTopPosition = ((_a = split === null || split === void 0 ? void 0 : split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
     const axisHeight = ((_b = split === null || split === void 0 ? void 0 : split.plots[axis.plotIndex]) === null || _b === void 0 ? void 0 : _b.height) || height;
     const domainX = axis.position === 'left' ? 0 : width;
@@ -212,23 +215,22 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
             axisLabelsWidth: labelsWidth,
         });
     const plotBands = [];
-    axis.plotBands.forEach((plotBand) => {
-        var _a, _b;
+    for (const plotBand of axis.plotBands) {
         const axisScale = scale;
         const { from, to } = getBandsPosition({
             band: plotBand,
             axisScale,
             axis: 'y',
         });
-        const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
+        const halfBandwidth = ((_e = (_d = axisScale.bandwidth) === null || _d === void 0 ? void 0 : _d.call(axisScale)) !== null && _e !== void 0 ? _e : 0) / 2;
         const startPos = halfBandwidth + Math.min(from, to);
         const endPos = Math.min(Math.abs(to - from), axisHeight - Math.min(from, to));
         const top = Math.max(0, startPos);
         const plotBandHeight = Math.min(endPos, axisHeight);
         if (plotBandHeight < 0) {
-            return;
+            continue;
         }
-        plotBands.push({
+        const plotBandItem = {
             layerPlacement: plotBand.layerPlacement,
             x: 0,
             y: axisPlotTopPosition + top,
@@ -236,17 +238,21 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
             height: plotBandHeight,
             color: plotBand.color,
             opacity: plotBand.opacity,
-            label: plotBand.label.text
-                ? {
-                    text: plotBand.label.text,
-                    style: plotBand.label.style,
-                    x: plotBand.label.padding,
-                    y: plotBand.label.padding,
-                    qa: plotBand.label.qa,
-                }
-                : null,
-        });
-    });
+            label: null,
+        };
+        if (plotBand.label.text) {
+            const getPlotLabelSize = getTextSizeFn({ style: plotBand.label.style });
+            const labelSize = await getPlotLabelSize(plotBand.label.text);
+            plotBandItem.label = {
+                text: plotBand.label.text,
+                style: plotBand.label.style,
+                x: plotBand.label.padding,
+                y: plotBand.label.padding + labelSize.hangingOffset,
+                qa: plotBand.label.qa,
+            };
+        }
+        plotBands.push(plotBandItem);
+    }
     const plotLines = [];
     for (let i = 0; i < axis.plotLines.length; i++) {
         const plotLine = axis.plotLines[i];
@@ -267,7 +273,7 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
                 text: plotLine.label.text,
                 style: plotLine.label.style,
                 x: plotLine.label.padding,
-                y: Math.max(0, plotLineValue - size.height - plotLine.label.padding),
+                y: Math.max(0, plotLineValue - size.height - plotLine.label.padding + size.hangingOffset),
                 qa: plotLine.label.qa,
             };
         }

package/dist/esm/components/AxisY/prepare-axis-title.js

@@ -11,7 +11,11 @@ export async function prepareSvgYAxisTitle({ axis, axisTop, axisHeight, axisWidt
     const titleContent = [];
     const titleMaxWidth = rotateAngle === 0 ? axis.title.maxWidth : sin * axisHeight;
     if (axis.title.maxRowCount > 1) {
-        titleContent.push(...(await getMultilineTitleContentRows({ axis, titleMaxWidth })));
+        const rows = await getMultilineTitleContentRows({ axis, titleMaxWidth });
+        rows.forEach((r) => {
+            r.y -= r.size.height;
+        });
+        titleContent.push(...rows);
     }
     else {
         const text = await getTextWithElipsis({
@@ -19,11 +23,12 @@ export async function prepareSvgYAxisTitle({ axis, axisTop, axisHeight, axisWidt
             maxWidth: titleMaxWidth,
             getTextWidth: async (s) => (await getTitleTextSize(s)).width,
         });
+        const titleSize = await getTitleTextSize(text);
         titleContent.push({
             text,
             x: 0,
-            y: 0,
-            size: await getTitleTextSize(text),
+            y: titleSize.hangingOffset - titleSize.height,
+            size: titleSize,
         });
     }
     const originalTextSize = titleContent.reduce((acc, item) => {

package/dist/esm/components/AxisY/styles.css

@@ -4,7 +4,7 @@
 .gcharts-y-axis__label {
   fill: var(--g-color-text-secondary);
   stroke: none;
-  dominant-baseline: text-after-edge;
+  dominant-baseline: text-bottom;
 }
 .gcharts-y-axis__tick {
   stroke: var(--gcharts-axis-tick-color);

package/dist/esm/components/ChartInner/index.js

@@ -20,7 +20,7 @@ import { useChartInnerHandlers } from './useChartInnerHandlers';
 import { useChartInnerProps } from './useChartInnerProps';
 import { useChartInnerState } from './useChartInnerState';
 import { useDefaultState } from './useDefaultState';
-import { getPreparedChart, getPreparedTitle, getPreparedTooltip, getResetZoomButtonStyle, useAsyncState, useDebouncedValue, } from './utils';
+import { getPreparedTooltip, getResetZoomButtonStyle, useAsyncState, useDebouncedValue, } from './utils';
 import './styles.css';
 const b = block('chart');
 const DEBOUNCED_VALUE_DELAY = 10;
@@ -36,16 +36,6 @@ export const ChartInner = (props) => {
     const rangeSliderRef = React.useRef(null);
     const dispatcher = React.useMemo(() => getDispatcher(), []);
     const clipPathId = useUniqId();
-    const preparedTitle = React.useMemo(() => {
-        return getPreparedTitle({ title: data.title });
-    }, [data.title]);
-    const preparedChart = React.useMemo(() => {
-        return getPreparedChart({
-            chart: data.chart,
-            seriesData: data.series.data,
-            preparedTitle,
-        });
-    }, [data.chart, data.series.data, preparedTitle]);
     const preparedTooltip = React.useMemo(() => {
         return getPreparedTooltip({
             tooltip: data.tooltip,
@@ -62,10 +52,9 @@ export const ChartInner = (props) => {
         preparedRangeSlider,
         tooltip: preparedTooltip,
     });
-    const { activeLegendItems, allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
+    const { activeLegendItems, allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, preparedTitle, preparedChart, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
-        htmlLayout, plotNode: plotRef.current, preparedChart,
-        rangeSliderState,
+        htmlLayout, plotNode: plotRef.current, rangeSliderState,
         updateZoomState,
         zoomState }));
     const prevWidth = usePrevious(width);
@@ -269,6 +258,7 @@ export const ChartInner = (props) => {
             shapes,
             React.createElement("g", { ref: plotAfterRef })),
         ((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) &&
+            preparedChart &&
             preparedLegend &&
             debouncedAllPreparedSeries &&
             preparedSeriesOptions && (React.createElement(RangeSlider, { activeLegendItems: activeLegendItems !== null && activeLegendItems !== void 0 ? activeLegendItems : [], boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis, legendConfig: legendConfig })),
@@ -281,7 +271,7 @@ export const ChartInner = (props) => {
         React.createElement("div", { className: b('html-layer'), ref: setHtmlLayout, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),
-        Object.keys(zoomState).length > 0 && preparedChart.zoom && (React.createElement(Button, { className: b('reset-zoom-button'), onClick: () => {
+        Object.keys(zoomState).length > 0 && (preparedChart === null || preparedChart === void 0 ? void 0 : preparedChart.zoom) && (React.createElement(Button, { className: b('reset-zoom-button'), onClick: () => {
                 var _a;
                 updateZoomState({});
                 (_a = rangeSliderRef.current) === null || _a === void 0 ? void 0 : _a.resetState();

package/dist/esm/components/ChartInner/useChartInnerProps.d.ts

@@ -9,7 +9,6 @@ type Props = ChartInnerProps & {
     dispatcher: Dispatch<object>;
     htmlLayout: HTMLElement | null;
     plotNode: SVGGElement | null;
-    preparedChart: PreparedChart;
     updateZoomState: (nextZoomState: Partial<ZoomState>) => void;
     zoomState: Partial<ZoomState>;
     rangeSliderState?: RangeSliderState;
@@ -25,6 +24,10 @@ export declare function useChartInnerProps(props: Props): {
     shapesData: ShapeData[];
     shapesReady: boolean;
     handleLegendItemClick: OnLegendItemClick;
+    preparedTitle: (import("../..").ChartTitle & {
+        height: number;
+    }) | undefined;
+    preparedChart: PreparedChart | undefined;
     allPreparedSeries?: PreparedSeries[] | undefined;
     legendConfig?: LegendConfig | undefined;
     legendItems?: LegendItem[][] | undefined;

package/dist/esm/components/ChartInner/useChartInnerProps.js

@@ -6,7 +6,7 @@ import { getPreparedOptions } from '../../core/series/prepare-options';
 import { getChartDimensions, getEffectiveXRange, getSortedSeriesData, getYAxisWidth, getZoomedSeriesData, isAxisRelatedSeries, } from '../../core/utils';
 import { createScales, getAxes, getPreparedSeries, getShapes, getSplit, getVisibleSeries, useZoom, } from '../../hooks';
 import { getActiveLegendItems, getAllLegendItems } from '../../hooks/useSeries/utils';
-import { getNormalizedXAxis, getNormalizedYAxis, recalculateYAxisLabelsWidth } from './utils';
+import { getNormalizedXAxis, getNormalizedYAxis, getPreparedChart, getPreparedTitle, recalculateYAxisLabelsWidth, } from './utils';
 import { hasAtLeastOneSeriesDataPerPlot } from './utils/common';
 const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: false,
@@ -37,8 +37,8 @@ function getBoundsOffsetLeft(args) {
     return chartMarginLeft + legendOffset + leftAxisWidth;
 }
 export function useChartInnerProps(props) {
-    var _a, _b, _c, _d, _e, _f;
-    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderState, width, updateZoomState, zoomState, } = props;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, rangeSliderState, width, updateZoomState, zoomState, } = props;
     const [selectedLegendItems, setSelectedLegendItems] = React.useState(null);
     const [chartState, setState] = React.useState(null);
     const prevStateValue = React.useRef(chartState);
@@ -50,6 +50,12 @@ export function useChartInnerProps(props) {
         (async function () {
             var _a, _b, _c;
             const chartDataChanged = !(previousChartData.current && isEqual(previousChartData.current, data));
+            const preparedTitle = await getPreparedTitle({ title: data.title });
+            const preparedChart = getPreparedChart({
+                chart: data.chart,
+                seriesData: data.series.data,
+                preparedTitle,
+            });
             const colors = (_a = data.colors) !== null && _a !== void 0 ? _a : DEFAULT_PALETTE;
             const normalizedSeriesData = getSortedSeriesData({
                 seriesData: data.series.data,
@@ -119,7 +125,7 @@ export function useChartInnerProps(props) {
             let yScale;
             let boundsWidth = 0;
             let boundsHeight = 0;
-            const calculateAxisBasedProps = () => {
+            const calculateAxisBasedProps = async () => {
                 const chartDimensions = getChartDimensions({
                     height,
                     margin: preparedChart.margin,
@@ -132,7 +138,11 @@ export function useChartInnerProps(props) {
                 });
                 boundsHeight = chartDimensions.boundsHeight;
                 boundsWidth = chartDimensions.boundsWidth;
-                preparedSplit = getSplit({ split: data.split, boundsHeight, chartWidth: width });
+                preparedSplit = await getSplit({
+                    split: data.split,
+                    boundsHeight,
+                    chartWidth: width,
+                });
                 if (preparedSeries.some(isAxisRelatedSeries)) {
                     ({ xScale, yScale } = createScales({
                         boundsWidth,
@@ -147,7 +157,7 @@ export function useChartInnerProps(props) {
                     }));
                 }
             };
-            calculateAxisBasedProps();
+            await calculateAxisBasedProps();
             const newYAxis = await recalculateYAxisLabelsWidth({
                 seriesData: preparedSeries,
                 yAxis,
@@ -155,7 +165,7 @@ export function useChartInnerProps(props) {
             });
             if (!isEqual(yAxis, newYAxis)) {
                 yAxis = newYAxis;
-                calculateAxisBasedProps();
+                await calculateAxisBasedProps();
             }
             const { shapes, shapesData } = await getShapes({
                 boundsWidth,
@@ -209,6 +219,8 @@ export function useChartInnerProps(props) {
                 yAxis,
                 yScale,
                 activeLegendItems,
+                preparedChart,
+                preparedTitle,
             };
             if (currentRunRef.current === currentRun) {
                 if (!isEqual(prevStateValue.current, newStateValue)) {
@@ -225,7 +237,6 @@ export function useChartInnerProps(props) {
         selectedLegendItems,
         zoomState,
         rangeSliderState,
-        preparedChart,
         dispatcher,
         htmlLayout,
         clipPathId,
@@ -277,15 +288,15 @@ export function useChartInnerProps(props) {
         plotContainerHeight: boundsHeight,
         plotContainerWidth: boundsWidth,
         preparedSplit: chartState === null || chartState === void 0 ? void 0 : chartState.preparedSplit,
-        preparedZoom: preparedChart.zoom,
+        preparedZoom: (_e = (_d = chartState === null || chartState === void 0 ? void 0 : chartState.preparedChart) === null || _d === void 0 ? void 0 : _d.zoom) !== null && _e !== void 0 ? _e : null,
         xAxis,
         xScale: chartState === null || chartState === void 0 ? void 0 : chartState.xScale,
         yAxis,
         yScale: chartState === null || chartState === void 0 ? void 0 : chartState.yScale,
     });
     // additional end
-    return Object.assign(Object.assign({}, chartState), { preparedSeries, boundsOffsetLeft: (_d = chartState === null || chartState === void 0 ? void 0 : chartState.boundsOffsetLeft) !== null && _d !== void 0 ? _d : 0, boundsOffsetTop: (_e = chartState === null || chartState === void 0 ? void 0 : chartState.boundsOffsetTop) !== null && _e !== void 0 ? _e : 0, boundsHeight,
+    return Object.assign(Object.assign({}, chartState), { preparedSeries, boundsOffsetLeft: (_f = chartState === null || chartState === void 0 ? void 0 : chartState.boundsOffsetLeft) !== null && _f !== void 0 ? _f : 0, boundsOffsetTop: (_g = chartState === null || chartState === void 0 ? void 0 : chartState.boundsOffsetTop) !== null && _g !== void 0 ? _g : 0, boundsHeight,
         boundsWidth,
         xAxis,
-        yAxis, shapesData: (_f = chartState === null || chartState === void 0 ? void 0 : chartState.shapesData) !== null && _f !== void 0 ? _f : [], shapesReady: Boolean(chartState), handleLegendItemClick });
+        yAxis, shapesData: (_h = chartState === null || chartState === void 0 ? void 0 : chartState.shapesData) !== null && _h !== void 0 ? _h : [], shapesReady: Boolean(chartState), handleLegendItemClick, preparedTitle: chartState === null || chartState === void 0 ? void 0 : chartState.preparedTitle, preparedChart: chartState === null || chartState === void 0 ? void 0 : chartState.preparedChart });
 }

package/dist/esm/components/ChartInner/utils/title.d.ts

@@ -2,4 +2,4 @@ import type { PreparedTitle } from '../../../hooks/types';
 import type { ChartData } from '../../../types';
 export declare const getPreparedTitle: ({ title, }: {
     title: ChartData["title"];
-}) => PreparedTitle | undefined;
+}) => Promise<PreparedTitle | undefined>;

package/dist/esm/components/ChartInner/utils/title.js

@@ -1,8 +1,8 @@
 import get from 'lodash/get';
-import { getHorizontalSvgTextHeight } from '../../../core/utils';
+import { getTextSizeFn } from '../../../core/utils';
 const DEFAULT_TITLE_FONT_SIZE = '15px';
 const TITLE_PADDINGS = 8 * 2;
-export const getPreparedTitle = ({ title, }) => {
+export const getPreparedTitle = async ({ title, }) => {
     var _a, _b, _c, _d, _e, _f;
     const titleText = get(title, 'text');
     const titleStyle = {
@@ -11,7 +11,7 @@ export const getPreparedTitle = ({ title, }) => {
         fontColor: (_f = (_e = title === null || title === void 0 ? void 0 : title.style) === null || _e === void 0 ? void 0 : _e.fontColor) !== null && _f !== void 0 ? _f : 'var(--g-color-text-primary)',
     };
     const titleHeight = titleText
-        ? getHorizontalSvgTextHeight({ text: titleText, style: titleStyle }) + TITLE_PADDINGS
+        ? (await getTextSizeFn({ style: titleStyle })(titleText)).height + TITLE_PADDINGS
         : 0;
     const preparedTitle = titleText
         ? { text: titleText, style: titleStyle, height: titleHeight, qa: title === null || title === void 0 ? void 0 : title.qa }

package/dist/esm/components/Legend/index.js

@@ -3,7 +3,7 @@ import { scaleLinear } from 'd3-scale';
 import { select } from 'd3-selection';
 import { symbol } from 'd3-shape';
 import { CONTINUOUS_LEGEND_SIZE } from '../../core/constants';
-import { createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol, getUniqId, } from '../../core/utils';
+import { createGradientRect, getContinuesColorFn, getSymbol, getTextSizeFn, getUniqId, } from '../../core/utils';
 import { axisBottom } from '../../core/utils/axis-generators';
 import { formatNumber } from '../../libs';
 import { block } from '../../utils';
@@ -116,15 +116,13 @@ function renderLegendSymbol(args) {
             }
             case 'symbol': {
                 const symbolAreaSize = Math.pow(d.symbol.width, 2);
-                const y = legendLineHeight / 2;
                 const bboxWidth = d.symbol.bboxWidth;
+                const translateX = x + bboxWidth / 2;
+                const translateY = legendLineHeight / 2;
                 element
                     .append('svg:path')
                     .attr('d', () => symbol(scatterSymbol, symbolAreaSize)())
-                    .attr('transform', () => {
-                    const translateX = x + bboxWidth / 2;
-                    return 'translate(' + translateX + ',' + y + ')';
-                })
+                    .attr('transform', 'translate(' + translateX + ',' + translateY + ')')
                     .attr('class', className)
                     .style('fill', color);
                 break;
@@ -234,6 +232,7 @@ export const Legend = (props) => {
                                 legendItem.symbol.bboxWidth +
                                 legendItem.symbol.padding);
                         })
+                            .attr('y', legend.hangingOffset)
                             .attr('height', legend.height)
                             .attr('class', function (d) {
                             const mods = { selected: d.visible, unselected: !d.visible };
@@ -364,10 +363,7 @@ export const Legend = (props) => {
             }
             const legendTitleClassname = b('title');
             if (legend.title.enable) {
-                const { maxWidth: titleWidth } = await getLabelsSize({
-                    labels: [legend.title.text],
-                    style: legend.title.style,
-                });
+                const { width: titleWidth } = await getTextSizeFn({ style: legend.title.style })(legend.title.text);
                 let dx = 0;
                 switch (legend.title.align) {
                     case 'center': {
@@ -390,10 +386,11 @@ export const Legend = (props) => {
                     .attr('class', legendTitleClassname)
                     .append('text')
                     .attr('dx', dx)
+                    .attr('y', legend.title.hangingOffset)
                     .attr('font-weight', (_f = legend.title.style.fontWeight) !== null && _f !== void 0 ? _f : null)
                     .attr('font-size', (_g = legend.title.style.fontSize) !== null && _g !== void 0 ? _g : null)
                     .attr('fill', (_h = legend.title.style.fontColor) !== null && _h !== void 0 ? _h : null)
-                    .style('dominant-baseline', 'text-before-edge')
+                    .style('dominant-baseline', 'hanging')
                     .html(legend.title.text);
             }
             else {

package/dist/esm/components/Legend/styles.css

@@ -19,7 +19,7 @@
 }
 .gcharts-legend__item-text {
   fill: var(--g-color-text-secondary);
-  dominant-baseline: text-before-edge;
+  dominant-baseline: hanging;
 }
 .gcharts-legend__item-text_unselected {
   fill: var(--g-color-text-hint);

package/dist/esm/components/utils/axis-title.js

@@ -31,7 +31,7 @@ export async function getMultilineTitleContentRows({ axis, titleMaxWidth, }) {
         titleContent.push({
             text: textRowContent,
             x: 0,
-            y: textRow.y,
+            y: textRow.y + textRowSize.hangingOffset,
             size: textRowSize,
         });
     }

package/dist/esm/core/axes/x-axis.js

@@ -1,5 +1,5 @@
 import get from 'lodash/get';
-import { TIME_UNITS, calculateCos, calculateNumericProperty, calculateSin, formatAxisTickLabel, getDefaultDateFormat, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../utils';
+import { TIME_UNITS, calculateCos, calculateNumericProperty, calculateSin, formatAxisTickLabel, getDefaultDateFormat, getHorizontalHtmlTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../utils';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, axisTickMarksDefaults, xAxisTitleDefaults, } from '../constants';
 import { createXScale } from '../scales/x-scale';
 import { getXAxisTickValues } from '../utils/axis/x-axis';
@@ -90,7 +90,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
     if (isLabelsEnabled) {
         labelsLineHeight = labelsHtml
             ? getHorizontalHtmlTextHeight({ text: 'Tmp', style: labelsStyle })
-            : getHorizontalSvgTextHeight({ text: 'Tmp', style: labelsStyle });
+            : (await getTextSizeFn({ style: labelsStyle })('Tmp')).height;
     }
     const shouldHideGrid = isAxisVisible === false || seriesData.some((s) => s.type === SERIES_TYPE.Heatmap);
     const preparedRangeSlider = getPreparedRangeSlider({ xAxis });

package/dist/esm/core/axes/y-axis.js

@@ -1,5 +1,5 @@
 import get from 'lodash/get';
-import { calculateNumericProperty, formatAxisTickLabel, getDefaultDateFormat, getDefaultMinYAxisValue, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, shouldSyncAxisWithPrimary, wrapText, } from '../utils';
+import { calculateNumericProperty, formatAxisTickLabel, getDefaultDateFormat, getDefaultMinYAxisValue, getHorizontalHtmlTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, shouldSyncAxisWithPrimary, wrapText, } from '../utils';
 import { getTickValues } from '../../components/AxisY/utils';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, axisTickMarksDefaults, yAxisTitleDefaults, } from '../constants';
 import { createYScale } from '../scales/y-scale';
@@ -68,7 +68,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
         const labelsHtml = get(axisItem, 'labels.html', false);
         const labelsLineHeight = labelsHtml
             ? getHorizontalHtmlTextHeight({ text: 'Tmp', style: labelsStyle })
-            : getHorizontalSvgTextHeight({ text: 'Tmp', style: labelsStyle });
+            : (await getTextSizeFn({ style: labelsStyle })('Tmp')).height;
         const titleText = isAxisVisible ? get(axisItem, 'title.text', '') : '';
         const titleStyle = Object.assign(Object.assign({}, yAxisTitleDefaults.style), get(axisItem, 'title.style'));
         const titleMaxRowsCount = get(axisItem, 'title.maxRowCount', yAxisTitleDefaults.maxRowCount);

package/dist/esm/core/layout/split.d.ts

@@ -10,8 +10,8 @@ export declare function getPlotHeight(args: {
     boundsHeight: number;
     gap: number;
 }): number;
-export declare function getSplit(args: UseSplitArgs): {
+export declare function getSplit(args: UseSplitArgs): Promise<{
     plots: PreparedPlot[];
     gap: number;
-};
+}>;
 export {};

package/dist/esm/core/layout/split.js

@@ -1,9 +1,9 @@
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
-import { calculateNumericProperty, getHorizontalSvgTextHeight } from '../utils';
+import { calculateNumericProperty, getTextSizeFn } from '../utils';
 const DEFAULT_TITLE_FONT_SIZE = '15px';
 const TITLE_TOP_BOTTOM_PADDING = 8;
-function preparePlotTitle(args) {
+async function preparePlotTitle(args) {
     const { title, plotIndex, plotHeight, chartWidth, gap } = args;
     const titleText = (title === null || title === void 0 ? void 0 : title.text) || '';
     const titleStyle = {
@@ -11,7 +11,7 @@ function preparePlotTitle(args) {
         fontWeight: get(title, 'style.fontWeight'),
     };
     const titleHeight = titleText
-        ? getHorizontalSvgTextHeight({ text: titleText, style: titleStyle }) +
+        ? (await getTextSizeFn({ style: titleStyle })(titleText)).height +
             TITLE_TOP_BOTTOM_PADDING * 2
         : 0;
     const top = plotIndex * (plotHeight + gap);
@@ -31,7 +31,7 @@ export function getPlotHeight(args) {
     }
     return boundsHeight;
 }
-export function getSplit(args) {
+export async function getSplit(args) {
     var _a, _b;
     const { split, boundsHeight, chartWidth } = args;
     const splitGap = (_a = calculateNumericProperty({ value: split === null || split === void 0 ? void 0 : split.gap, base: boundsHeight })) !== null && _a !== void 0 ? _a : 0;
@@ -40,22 +40,25 @@ export function getSplit(args) {
     if (isEmpty(plots)) {
         plots.push({});
     }
+    const items = [];
+    for (let index = 0; index < plots.length; index++) {
+        const p = plots[index];
+        const title = await preparePlotTitle({
+            title: p.title,
+            plotIndex: index,
+            gap: splitGap,
+            plotHeight,
+            chartWidth,
+        });
+        const top = index * (plotHeight + splitGap);
+        items.push({
+            top: top + title.height,
+            height: plotHeight - title.height,
+            title,
+        });
+    }
     return {
-        plots: plots.map((p, index) => {
-            const title = preparePlotTitle({
-                title: p.title,
-                plotIndex: index,
-                gap: splitGap,
-                plotHeight,
-                chartWidth,
-            });
-            const top = index * (plotHeight + splitGap);
-            return {
-                top: top + title.height,
-                height: plotHeight - title.height,
-                title,
-            };
-        }),
+        plots: items,
         gap: splitGap,
     };
 }

package/dist/esm/core/series/prepare-legend.js

@@ -12,23 +12,21 @@ export async function getPreparedLegend(args) {
     const defaultItemStyle = clone(legendDefaults.itemStyle);
     const itemStyle = get(legend, 'itemStyle');
     const computedItemStyle = merge(defaultItemStyle, itemStyle);
-    const { maxHeight: lineHeight, maxWidth: lineWidth } = await getLabelsSize({
-        labels: ['Tmp'],
-        style: computedItemStyle,
-    });
+    const { width: lineWidth, height: lineHeight, hangingOffset: itemHangingOffset, } = await getTextSizeFn({ style: computedItemStyle })('Tmp');
     const legendType = get(legend, 'type', 'discrete');
     const isTitleEnabled = Boolean((_a = legend === null || legend === void 0 ? void 0 : legend.title) === null || _a === void 0 ? void 0 : _a.text);
     const titleMargin = isTitleEnabled ? get(legend, 'title.margin', 4) : 0;
     const titleStyle = Object.assign({ fontSize: '12px', fontWeight: 'bold' }, get(legend, 'title.style'));
     const titleText = isTitleEnabled ? get(legend, 'title.text', '') : '';
-    const titleSize = await getLabelsSize({ labels: [titleText], style: titleStyle });
-    const titleHeight = isTitleEnabled ? titleSize.maxHeight : 0;
+    const titleTextSize = await getTextSizeFn({ style: titleStyle })(titleText);
+    const titleHeight = isTitleEnabled ? titleTextSize.height : 0;
+    const titleHangingOffset = titleTextSize.hangingOffset;
     const tickStyle = {
         fontSize: '12px',
     };
     const ticks = {
         labelsMargin: 4,
-        labelsLineHeight: (await getLabelsSize({ labels: ['Tmp'], style: tickStyle })).maxHeight,
+        labelsLineHeight: (await getTextSizeFn({ style: tickStyle })('Tmp')).height,
         style: tickStyle,
     };
     const colorScale = {
@@ -60,6 +58,7 @@ export async function getPreparedLegend(args) {
         verticalAlign: get(legend, 'verticalAlign', legendDefaults.verticalAlign),
         justifyContent: get(legend, 'justifyContent', legendDefaults.justifyContent),
         enabled,
+        hangingOffset: itemHangingOffset,
         height,
         itemDistance: get(legend, 'itemDistance', legendDefaults.itemDistance),
         itemStyle: computedItemStyle,
@@ -68,6 +67,7 @@ export async function getPreparedLegend(args) {
         type: legendType,
         title: {
             enable: isTitleEnabled,
+            hangingOffset: titleHangingOffset,
             text: titleText,
             margin: titleMargin,
             style: titleStyle,

package/dist/esm/core/series/types.d.ts

@@ -15,10 +15,12 @@ export type PreparedLegendSymbol = (RectLegendSymbol | PathLegendSymbol | Symbol
     bboxWidth: number;
 };
 export type PreparedLegend = Required<Omit<ChartLegend, 'title' | 'colorScale'>> & {
+    hangingOffset: number;
     height: number;
     lineHeight: number;
     title: {
         enable: boolean;
+        hangingOffset: number;
         text: string;
         margin: number;
         style: BaseTextStyle;