@gravity-ui/charts 1.42.2 → 1.42.4

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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;

package/dist/cjs/core/utils/axis-generators/bottom.js

@@ -2,7 +2,7 @@ import { path } from 'd3-path';
 import { select } from 'd3-selection';
 import { getAxisItems, getXAxisOffset, getXTickPosition } from '../axis/common';
 import { calculateCos, calculateSin } from '../math';
-import { getLabelsSize, setEllipsisForOverflowText } from '../text';
+import { getTextSizeFn, setEllipsisForOverflowText } from '../text';
 const AXIS_BOTTOM_HTML_LABELS_DATA_ATTR = 'data-axis-bottom-html-labels';
 function addDomain(selection, options) {
     const { size, color } = options;
@@ -32,7 +32,7 @@ function appendSvgLabels(args) {
         return 'middle';
     })
         .style('transform', transform)
-        .style('dominant-baseline', 'text-after-edge');
+        .attr('dominant-baseline', 'hanging');
     const labels = ticksSelection.selectAll('.tick text');
     // FIXME: handle rotated overlapping labels (with a smarter approach)
     if (ticks.rotation) {
@@ -153,10 +153,8 @@ export async function axisBottom(args) {
     const offset = getXAxisOffset();
     const position = getXTickPosition({ scale, offset });
     const values = getAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
-    const labelHeight = (await getLabelsSize({
-        labels: values.map(labelFormat),
-        style: labelsStyle,
-    })).maxHeight;
+    const getTextSize = getTextSizeFn({ style: labelsStyle });
+    const labelSize = await getTextSize('Tmp');
     return function (selection) {
         var _a, _b, _c;
         selection.selectAll('.tick, .domain').remove();
@@ -165,16 +163,8 @@ export async function axisBottom(args) {
         const x = (rect === null || rect === void 0 ? void 0 : rect.x) || 0;
         const right = x + domain.size;
         const top = -((_c = (_b = tickItems === null || tickItems === void 0 ? void 0 : tickItems[0]) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : 0);
-        const translateY = labelHeight + labelsMargin - top;
-        let transform = `translate(0, ${translateY}px)`;
-        if (rotation) {
-            const labelsOffsetTop = labelHeight * calculateCos(rotation) + labelsMargin - top;
-            let labelsOffsetLeft = calculateSin(rotation) * labelHeight;
-            if (Math.abs(rotation) % 360 === 90) {
-                labelsOffsetLeft += ((rotation > 0 ? -1 : 1) * labelHeight) / 2;
-            }
-            transform = `translate(${-labelsOffsetLeft}px, ${labelsOffsetTop}px) rotate(${rotation}deg)`;
-        }
+        const translateY = labelsMargin - top + labelSize.hangingOffset;
+        const transform = `translate(0, ${translateY}px)`;
         const tickPath = path();
         tickItems === null || tickItems === void 0 ? void 0 : tickItems.forEach(([start, end]) => {
             tickPath.moveTo(0, start);

package/dist/cjs/core/utils/common.d.ts

@@ -16,10 +16,6 @@ export declare const getHorizontalHtmlTextHeight: (args: {
     text: string;
     style?: Partial<BaseTextStyle>;
 }) => number;
-export declare const getHorizontalSvgTextHeight: (args: {
-    text: string;
-    style?: Partial<BaseTextStyle>;
-}) => number;
 export declare const getDataCategoryValue: (args: {
     axisDirection: AxisDirection;
     categories: string[];

package/dist/cjs/core/utils/common.js

@@ -155,19 +155,6 @@ export const getHorizontalHtmlTextHeight = (args) => {
     container.remove();
     return height;
 };
-export const getHorizontalSvgTextHeight = (args) => {
-    var _a;
-    const { text, style } = args;
-    const container = select(document.body).append('svg');
-    const textSelection = container.append('text').text(text);
-    const fontSize = get(style, 'fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE);
-    if (fontSize) {
-        textSelection.style('font-size', fontSize).style('dominant-baseline', 'text-after-edge');
-    }
-    const height = ((_a = textSelection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
-    container.remove();
-    return height;
-};
 const extractCategoryValue = (args) => {
     const { axisDirection, categories, data } = args;
     const dataCategory = get(data, axisDirection);

package/dist/cjs/core/utils/labels.d.ts

@@ -11,6 +11,7 @@ export declare function getSvgLabelConstraintedPosition(args: {
     width: number;
     x: number;
     y: number;
+    hangingOffset: number;
 }): {
     x: number;
     y: number;

package/dist/cjs/core/utils/labels.js

@@ -43,20 +43,20 @@ export function filterOverlappingLabels(labels) {
     return result;
 }
 export function getSvgLabelConstraintedPosition(args) {
-    const { boundsHeight, boundsWidth, height, width, x, y } = args;
+    const { boundsHeight, boundsWidth, height, width, x, y, hangingOffset } = args;
     let resultX = x;
-    let resultY = y;
+    let resultY = y - height / 2 + hangingOffset;
     if (x < 0) {
         resultX = 0;
     }
     if (x + width > boundsWidth) {
         resultX = boundsWidth - width;
     }
-    if (y - height < 0) {
+    if (resultY < 0) {
         resultY = 0;
     }
-    if (y > boundsHeight) {
-        resultY = boundsHeight;
+    if (resultY + height > boundsHeight) {
+        resultY = boundsHeight - height + hangingOffset;
     }
     return { x: resultX, y: resultY };
 }

package/dist/cjs/core/utils/text.d.ts

@@ -27,6 +27,7 @@ export declare function getTextSizeFn({ style }: {
 }): (str: string) => Promise<{
     width: number;
     height: number;
+    hangingOffset: number;
 }>;
 export declare function getTextWithElipsis({ text: originalText, getTextWidth, maxWidth, }: {
     text: string;

package/dist/cjs/core/utils/text.js

@@ -194,9 +194,13 @@ export function getTextSizeFn({ style }) {
         await document.fonts.ready;
         context.font = `${(_a = style === null || style === void 0 ? void 0 : style.fontWeight) !== null && _a !== void 0 ? _a : defaultFontWeight} ${(_b = style === null || style === void 0 ? void 0 : style.fontSize) !== null && _b !== void 0 ? _b : defaultFontSize} ${defaultFontFamily}`;
         const textMetric = context.measureText(unescapeHtml(str));
+        // we calculate hanging based on an approximate algorithm from chromium
+        // https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/canvas/text_metrics.cc;l=32;drc=7cf6ac3dd6dca800fbc0d28e80a7732d4ea90340?q=member_hanging_&ss=chromium%2Fchromium%2Fsrc
+        // it would be possible to use native, but the browsers are not working in harmony right now
         return {
             width: textMetric.width,
             height: textMetric.fontBoundingBoxDescent + textMetric.fontBoundingBoxAscent,
+            hangingOffset: textMetric.fontBoundingBoxAscent * 0.2,
         };
     };
 }

package/dist/cjs/hooks/useShapes/area/prepare-data.js

@@ -60,7 +60,7 @@ async function prepareDataLabels({ series, points, xMax, yAxisTop, isOutsideBoun
         else {
             const labelSize = await getTextSize(text);
             const x = Math.min(xMax - labelSize.width, Math.max(0, point.x - labelSize.width / 2));
-            const y = Math.max(yAxisTop, point.y - series.dataLabels.padding - labelSize.height);
+            const y = Math.max(yAxisTop, point.y - series.dataLabels.padding - labelSize.height + labelSize.hangingOffset);
             svgLabels.push({
                 text,
                 x,

package/dist/cjs/hooks/useShapes/bar-y/prepare-data.js

@@ -171,7 +171,7 @@ export async function prepareBarYData(args) {
                     map.set(dataLabels.style, getTextSizeFn({ style: dataLabels.style }));
                 }
                 const getTextSize = map.get(dataLabels.style);
-                const { width, height } = await getTextSize(content);
+                const { width, height, hangingOffset } = await getTextSize(content);
                 const x = dataLabels.inside
                     ? prepared.x + prepared.width / 2 - width / 2
                     : prepared.x + prepared.width + dataLabels.padding;
@@ -181,7 +181,8 @@ export async function prepareBarYData(args) {
                     height,
                     width,
                     x,
-                    y: y + height / 2,
+                    y,
+                    hangingOffset,
                 });
                 labels.push({
                     size: { width, height },

package/dist/cjs/hooks/useShapes/funnel/prepare-data.js

@@ -62,7 +62,10 @@ export async function prepareFunnelData(args) {
             }
             svgLabels.push({
                 x,
-                y: getSegmentY(index) + itemHeight / 2 - labelSize.height / 2,
+                y: getSegmentY(index) +
+                    itemHeight / 2 -
+                    labelSize.height / 2 +
+                    labelSize.hangingOffset,
                 text: labelContent,
                 style: s.dataLabels.style,
                 size: labelSize,

package/dist/cjs/hooks/useShapes/heatmap/prepare-data.js

@@ -82,7 +82,7 @@ export async function prepareHeatmapData({ series, xAxis, xScale, yAxis, yScale,
                     if (text) {
                         svgDataLabels.push({
                             x: item.x + item.width / 2 - size.width / 2,
-                            y: item.y + item.height / 2 - size.height / 2,
+                            y: item.y + item.height / 2 - size.height / 2 + size.hangingOffset,
                             text,
                             style: series.dataLabels.style,
                         });

package/dist/cjs/hooks/useShapes/line/prepare-data.js

@@ -68,7 +68,10 @@ export const prepareLineData = async (args) => {
                         const text = getFormattedValue(Object.assign({ value: labelValue }, s.dataLabels));
                         const labelSize = await getTextSize(text);
                         const style = s.dataLabels.style;
-                        const y = Math.max(yAxisTop, point.y - s.dataLabels.padding - labelSize.height);
+                        const y = Math.max(yAxisTop, point.y -
+                            s.dataLabels.padding -
+                            labelSize.height +
+                            labelSize.hangingOffset);
                         const x = Math.min(xMax - labelSize.width, Math.max(0, point.x - labelSize.width / 2));
                         const labelData = {
                             text,

package/dist/cjs/hooks/useShapes/pie/prepare-data.js

@@ -95,6 +95,7 @@ export function preparePieData(args) {
             const text = getFormattedValue(Object.assign({ value: (_a = d.data.label) !== null && _a !== void 0 ? _a : d.data.value }, d.dataLabels));
             let labelWidth = 0;
             let labelHeight = 0;
+            let labelHangingOffset = 0;
             if (dataLabels.html) {
                 const size = await getLabelsSize({
                     labels: [text],
@@ -108,10 +109,11 @@ export function preparePieData(args) {
                 const size = await getTextSize(text);
                 labelWidth = size.width;
                 labelHeight = size.height;
+                labelHangingOffset = size.hangingOffset;
             }
             const label = {
                 text,
-                size: { width: labelWidth, height: labelHeight },
+                size: { width: labelWidth, height: labelHeight, hangingOffset: labelHangingOffset },
             };
             acc[d.id] = label;
         }
@@ -165,11 +167,16 @@ export function preparePieData(args) {
              * @returns {[number, number]} A tuple [x, y] relative to the pie center.
              */
             const getLabelPosition = (angle) => {
+                var _a;
                 let [x, y] = labelArcGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
                 if (shouldUseHtml) {
                     x = x < 0 ? x - labelWidth : x;
+                    y = y < 0 ? y - labelHeight : y;
+                }
+                else {
+                    const hangingOffset = (_a = labelSize === null || labelSize === void 0 ? void 0 : labelSize.hangingOffset) !== null && _a !== void 0 ? _a : 0;
+                    y = y < 0 ? y - labelHeight + hangingOffset : y + hangingOffset;
                 }
-                y = y < 0 ? y - labelHeight : y;
                 return [x, y];
             };
             const getConnectorPoints = (angle) => {

package/dist/cjs/hooks/useShapes/radar/prepare-data.js

@@ -1,7 +1,7 @@
 import { range } from 'd3-array';
 import { scaleLinear } from 'd3-scale';
 import { curveLinearClosed, line } from 'd3-shape';
-import { getLabelsSize } from '../../../core/utils';
+import { getLabelsSize, getTextSizeFn } from '../../../core/utils';
 import { getFormattedValue } from '../../../core/utils/format';
 export async function prepareRadarData(args) {
     const { series: preparedSeries, boundsWidth, boundsHeight } = args;
@@ -116,18 +116,28 @@ export async function prepareRadarData(args) {
             const shouldUseHtml = dataLabels.html;
             data.labels = await Promise.all(categories.map(async (category, index) => {
                 const text = getFormattedValue(Object.assign({ value: category.key }, dataLabels));
-                const labelSize = await getLabelsSize({ labels: [text], style });
                 const angle = index * angleStep - Math.PI / 2;
                 // Position label slightly outside the point
                 const labelRadius = data.radius + 10;
                 let x = center[0] + Math.cos(angle) * labelRadius;
                 let y = center[1] + Math.sin(angle) * labelRadius;
+                let labelWidth = 0;
+                let labelHeight = 0;
                 if (shouldUseHtml) {
-                    x = x < center[0] ? x - labelSize.maxWidth : x;
-                    y = y - labelSize.maxHeight;
+                    const labelSize = await getLabelsSize({ labels: [text], style });
+                    labelWidth = labelSize.maxWidth;
+                    labelHeight = labelSize.maxHeight;
+                    x = x < center[0] ? x - labelWidth : x;
+                    y = y - labelHeight;
                 }
                 else {
-                    y = y < center[1] ? y - labelSize.maxHeight : y;
+                    const labelSize = await getTextSizeFn({ style })(text);
+                    labelWidth = labelSize.width;
+                    labelHeight = labelSize.height;
+                    y =
+                        y < center[1]
+                            ? y - labelHeight + labelSize.hangingOffset
+                            : y + labelSize.hangingOffset;
                 }
                 x = Math.max(-boundsWidth / 2, x);
                 return {
@@ -135,8 +145,8 @@ export async function prepareRadarData(args) {
                     x,
                     y,
                     style,
-                    size: { width: labelSize.maxWidth, height: labelSize.maxHeight },
-                    maxWidth: labelSize.maxWidth,
+                    size: { width: labelWidth, height: labelHeight },
+                    maxWidth: labelWidth,
                     textAnchor: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'end' : 'start',
                     series: { id: series.id },
                 };

package/dist/cjs/hooks/useShapes/sankey/prepare-data.js

@@ -1,5 +1,5 @@
-import { sankey, sankeyLinkHorizontal } from 'd3-sankey';
 import { getFormattedValue } from '../../../core/utils/format';
+import { sankey, sankeyLinkHorizontal } from './sankey-layout';
 export function prepareSankeyData(args) {
     const { series, width, height } = args;
     const htmlElements = [];

package/dist/cjs/hooks/useShapes/sankey/sankey-layout.d.ts

@@ -0,0 +1,49 @@
+type SankeyLayoutNodeProps = {
+    index: number;
+    depth: number;
+    height: number;
+    layer: number;
+    value: number;
+    fixedValue?: number;
+    x0: number;
+    x1: number;
+    y0: number;
+    y1: number;
+};
+type SankeyLayoutLinkProps = {
+    index: number;
+    value: number;
+    width: number;
+    y0: number;
+    y1: number;
+};
+export type SankeyComputedNode<N, L> = N & SankeyLayoutNodeProps & {
+    sourceLinks: SankeyComputedLink<N, L>[];
+    targetLinks: SankeyComputedLink<N, L>[];
+};
+export type SankeyComputedLink<N, L> = L & SankeyLayoutLinkProps & {
+    source: SankeyComputedNode<N, L>;
+    target: SankeyComputedNode<N, L>;
+};
+export type SankeyGraph<N, L> = {
+    nodes: SankeyComputedNode<N, L>[];
+    links: SankeyComputedLink<N, L>[];
+};
+type AlignFn<N, L> = (node: SankeyComputedNode<N, L>, n: number) => number;
+type SortFn<T> = (a: T, b: T) => number;
+export declare function sankey<N, L>(): {
+    (input: {
+        nodes: N[];
+        links: L[];
+    }): SankeyGraph<N, L>;
+    nodeId(fn: (d: N, i: number) => string | number): /*elided*/ any;
+    nodeAlign(fn: AlignFn<N, L>): /*elided*/ any;
+    nodeSort(fn: SortFn<SankeyComputedNode<N, L>> | undefined): /*elided*/ any;
+    nodeWidth(value: number): /*elided*/ any;
+    nodePadding(value: number): /*elided*/ any;
+    linkSort(fn: SortFn<SankeyComputedLink<N, L>> | undefined): /*elided*/ any;
+    extent([[left, top], [right, bottom]]: [[number, number], [number, number]]): /*elided*/ any;
+    iterations(value: number): /*elided*/ any;
+};
+export declare function sankeyLinkHorizontal<N, L>(): import("d3-shape").Link<any, SankeyComputedLink<N, L>, [number, number]>;
+export {};