@gravity-ui/charts 1.42.2 → 1.42.4

package/dist/cjs/hooks/useShapes/sankey/sankey-layout.js

@@ -0,0 +1,362 @@
+// Derived from d3-sankey v0.12.3 (https://github.com/d3/d3-sankey)
+// Copyright 2015-2021 Mike Bostock — ISC License
+//
+// Changes:
+// - Ported to TypeScript with explicit generic types (SankeyComputedNode, SankeyComputedLink)
+// - sankeyLinkHorizontal() implemented via linkHorizontal() from d3-shape
+// - Removed unused alignment helpers (left, right, center); only justify is kept
+// - No d3-sankey dependency; uses d3-array and d3-shape (already project dependencies)
+import { max, min, sum } from 'd3-array';
+import { linkHorizontal } from 'd3-shape';
+function justify(node, n) {
+    return node.sourceLinks.length ? node.depth : n - 1;
+}
+function ascendingBreadth(a, b) {
+    return a.y0 - b.y0;
+}
+function ascendingSourceBreadth(a, b) {
+    return ascendingBreadth(a.source, b.source) || a.index - b.index;
+}
+function ascendingTargetBreadth(a, b) {
+    return ascendingBreadth(a.target, b.target) || a.index - b.index;
+}
+function nodeValue(d) {
+    return d.value;
+}
+function linkValue(d) {
+    return d.value;
+}
+export function sankey() {
+    let x0 = 0, y0 = 0, x1 = 1, y1 = 1;
+    let dx = 24; // nodeWidth
+    let dy = 8, py; // nodePadding
+    let getId = (_d, i) => i;
+    let align = justify;
+    let sort;
+    let linkSort;
+    let iterations = 6;
+    function generator(input) {
+        // Mutate input in-place (same as original d3-sankey): layout props are added
+        // directly to node/link objects so that source/target references stay consistent.
+        const graph = {
+            nodes: input.nodes,
+            links: input.links,
+        };
+        computeNodeLinks(graph);
+        computeNodeValues(graph);
+        computeNodeDepths(graph);
+        computeNodeHeights(graph);
+        computeNodeBreadths(graph);
+        computeLinkBreadths(graph);
+        return graph;
+    }
+    generator.nodeId = function (fn) {
+        getId = fn;
+        return generator;
+    };
+    generator.nodeAlign = function (fn) {
+        align = fn;
+        return generator;
+    };
+    generator.nodeSort = function (fn) {
+        sort = fn;
+        return generator;
+    };
+    generator.nodeWidth = function (value) {
+        dx = value;
+        return generator;
+    };
+    generator.nodePadding = function (value) {
+        dy = py = value;
+        return generator;
+    };
+    generator.linkSort = function (fn) {
+        linkSort = fn;
+        return generator;
+    };
+    generator.extent = function ([[left, top], [right, bottom]]) {
+        x0 = left;
+        y0 = top;
+        x1 = right;
+        y1 = bottom;
+        return generator;
+    };
+    generator.iterations = function (value) {
+        iterations = value;
+        return generator;
+    };
+    function computeNodeLinks(graph) {
+        for (const [i, node] of graph.nodes.entries()) {
+            node.index = i;
+            node.sourceLinks = [];
+            node.targetLinks = [];
+        }
+        const nodeById = new Map(graph.nodes.map((d, i) => [getId(d, i), d]));
+        for (const [i, link] of graph.links.entries()) {
+            link.index = i;
+            const unresolved = link;
+            if (typeof unresolved.source !== 'object') {
+                unresolved.source = findNode(nodeById, unresolved.source);
+            }
+            if (typeof unresolved.target !== 'object') {
+                unresolved.target = findNode(nodeById, unresolved.target);
+            }
+            link.source.sourceLinks.push(link);
+            link.target.targetLinks.push(link);
+        }
+        if (linkSort !== null && linkSort !== undefined) {
+            for (const { sourceLinks, targetLinks } of graph.nodes) {
+                sourceLinks.sort(linkSort);
+                targetLinks.sort(linkSort);
+            }
+        }
+    }
+    function computeNodeValues(graph) {
+        for (const node of graph.nodes) {
+            node.value =
+                node.fixedValue === undefined
+                    ? Math.max(sum(node.sourceLinks, linkValue), sum(node.targetLinks, linkValue))
+                    : node.fixedValue;
+        }
+    }
+    function computeNodeDepths(graph) {
+        const n = graph.nodes.length;
+        let current = new Set(graph.nodes);
+        let next = new Set();
+        let x = 0;
+        while (current.size) {
+            for (const node of current) {
+                node.depth = x;
+                for (const { target } of node.sourceLinks) {
+                    next.add(target);
+                }
+            }
+            if (++x > n)
+                throw new Error('circular link');
+            current = next;
+            next = new Set();
+        }
+    }
+    function computeNodeHeights(graph) {
+        const n = graph.nodes.length;
+        let current = new Set(graph.nodes);
+        let next = new Set();
+        let x = 0;
+        while (current.size) {
+            for (const node of current) {
+                node.height = x;
+                for (const { source } of node.targetLinks) {
+                    next.add(source);
+                }
+            }
+            if (++x > n)
+                throw new Error('circular link');
+            current = next;
+            next = new Set();
+        }
+    }
+    function computeNodeLayers(graph) {
+        var _a;
+        const x = ((_a = max(graph.nodes, (d) => d.depth)) !== null && _a !== void 0 ? _a : 0) + 1;
+        const kx = (x1 - x0 - dx) / (x - 1);
+        const columns = new Array(x);
+        for (const node of graph.nodes) {
+            const i = Math.max(0, Math.min(x - 1, Math.floor(align(node, x))));
+            node.layer = i;
+            node.x0 = x0 + i * kx;
+            node.x1 = node.x0 + dx;
+            if (columns[i])
+                columns[i].push(node);
+            else
+                columns[i] = [node];
+        }
+        if (sort) {
+            for (const column of columns) {
+                column.sort(sort);
+            }
+        }
+        return columns;
+    }
+    function initializeNodeBreadths(columns) {
+        var _a;
+        const ky = (_a = min(columns, (c) => (y1 - y0 - (c.length - 1) * py) / sum(c, nodeValue))) !== null && _a !== void 0 ? _a : 0;
+        for (const nodes of columns) {
+            let y = y0;
+            for (const node of nodes) {
+                node.y0 = y;
+                node.y1 = y + node.value * ky;
+                y = node.y1 + py;
+                for (const link of node.sourceLinks) {
+                    link.width = link.value * ky;
+                }
+            }
+            y = (y1 - y + py) / (nodes.length + 1);
+            for (let i = 0; i < nodes.length; ++i) {
+                const node = nodes[i];
+                node.y0 += y * (i + 1);
+                node.y1 += y * (i + 1);
+            }
+            reorderLinks(nodes);
+        }
+    }
+    function computeNodeBreadths(graph) {
+        var _a;
+        const columns = computeNodeLayers(graph);
+        py = Math.min(dy, (y1 - y0) / (((_a = max(columns, (c) => c.length)) !== null && _a !== void 0 ? _a : 1) - 1));
+        initializeNodeBreadths(columns);
+        for (let i = 0; i < iterations; ++i) {
+            const alpha = Math.pow(0.99, i);
+            const beta = Math.max(1 - alpha, (i + 1) / iterations);
+            relaxRightToLeft(columns, alpha, beta);
+            relaxLeftToRight(columns, alpha, beta);
+        }
+    }
+    function computeLinkBreadths(graph) {
+        for (const node of graph.nodes) {
+            let ly0 = node.y0;
+            let ly1 = ly0;
+            for (const link of node.sourceLinks) {
+                link.y0 = ly0 + link.width / 2;
+                ly0 += link.width;
+            }
+            for (const link of node.targetLinks) {
+                link.y1 = ly1 + link.width / 2;
+                ly1 += link.width;
+            }
+        }
+    }
+    function relaxLeftToRight(columns, alpha, beta) {
+        for (let i = 1, n = columns.length; i < n; ++i) {
+            const column = columns[i];
+            for (const target of column) {
+                let y = 0;
+                let w = 0;
+                for (const { source, value } of target.targetLinks) {
+                    const v = value * (target.layer - source.layer);
+                    y += targetTop(source, target) * v;
+                    w += v;
+                }
+                if (!(w > 0))
+                    continue;
+                const d = (y / w - target.y0) * alpha;
+                target.y0 += d;
+                target.y1 += d;
+                reorderNodeLinks(target);
+            }
+            if (sort === undefined)
+                column.sort(ascendingBreadth);
+            resolveCollisions(column, beta);
+        }
+    }
+    function relaxRightToLeft(columns, alpha, beta) {
+        for (let n = columns.length, i = n - 2; i >= 0; --i) {
+            const column = columns[i];
+            for (const source of column) {
+                let y = 0;
+                let w = 0;
+                for (const { target, value } of source.sourceLinks) {
+                    const v = value * (target.layer - source.layer);
+                    y += sourceTop(source, target) * v;
+                    w += v;
+                }
+                if (!(w > 0))
+                    continue;
+                const d = (y / w - source.y0) * alpha;
+                source.y0 += d;
+                source.y1 += d;
+                reorderNodeLinks(source);
+            }
+            if (sort === undefined)
+                column.sort(ascendingBreadth);
+            resolveCollisions(column, beta);
+        }
+    }
+    function resolveCollisions(nodes, alpha) {
+        const i = Math.floor(nodes.length / 2);
+        const subject = nodes[i];
+        resolveCollisionsBottomToTop(nodes, subject.y0 - py, i - 1, alpha);
+        resolveCollisionsTopToBottom(nodes, subject.y1 + py, i + 1, alpha);
+        resolveCollisionsBottomToTop(nodes, y1, nodes.length - 1, alpha);
+        resolveCollisionsTopToBottom(nodes, y0, 0, alpha);
+    }
+    function resolveCollisionsTopToBottom(nodes, y, i, alpha) {
+        for (; i < nodes.length; ++i) {
+            const node = nodes[i];
+            const d = (y - node.y0) * alpha;
+            if (d > 1e-6) {
+                node.y0 += d;
+                node.y1 += d;
+            }
+            y = node.y1 + py;
+        }
+    }
+    function resolveCollisionsBottomToTop(nodes, y, i, alpha) {
+        for (; i >= 0; --i) {
+            const node = nodes[i];
+            const d = (node.y1 - y) * alpha;
+            if (d > 1e-6) {
+                node.y0 -= d;
+                node.y1 -= d;
+            }
+            y = node.y0 - py;
+        }
+    }
+    function reorderNodeLinks(node) {
+        if (linkSort === undefined) {
+            for (const { source: { sourceLinks }, } of node.targetLinks) {
+                sourceLinks.sort(ascendingTargetBreadth);
+            }
+            for (const { target: { targetLinks }, } of node.sourceLinks) {
+                targetLinks.sort(ascendingSourceBreadth);
+            }
+        }
+    }
+    function reorderLinks(nodes) {
+        if (linkSort === undefined) {
+            for (const { sourceLinks, targetLinks } of nodes) {
+                sourceLinks.sort(ascendingTargetBreadth);
+                targetLinks.sort(ascendingSourceBreadth);
+            }
+        }
+    }
+    function targetTop(source, target) {
+        let y = source.y0 - ((source.sourceLinks.length - 1) * py) / 2;
+        for (const { target: node, width } of source.sourceLinks) {
+            if (node === target)
+                break;
+            y += width + py;
+        }
+        for (const { source: node, width } of target.targetLinks) {
+            if (node === source)
+                break;
+            y -= width;
+        }
+        return y;
+    }
+    function sourceTop(source, target) {
+        let y = target.y0 - ((target.targetLinks.length - 1) * py) / 2;
+        for (const { source: node, width } of target.targetLinks) {
+            if (node === source)
+                break;
+            y += width + py;
+        }
+        for (const { target: node, width } of source.sourceLinks) {
+            if (node === target)
+                break;
+            y -= width;
+        }
+        return y;
+    }
+    return generator;
+}
+export function sankeyLinkHorizontal() {
+    return linkHorizontal()
+        .source((d) => [d.source.x1, d.y0])
+        .target((d) => [d.target.x0, d.y1]);
+}
+function findNode(nodeById, id) {
+    const node = nodeById.get(id);
+    if (!node)
+        throw new Error('missing: ' + id);
+    return node;
+}

package/dist/cjs/hooks/useShapes/styles.css

@@ -3,7 +3,7 @@
 .gcharts-radar__label,
 .gcharts-heatmap__label,
 .gcharts-funnel__label {
-  dominant-baseline: text-before-edge;
+  dominant-baseline: hanging;
 }
 
 .gcharts-scatter__point {
@@ -17,7 +17,7 @@
   font-size: 11px;
   font-weight: bold;
   fill: var(--g-color-text-complementary);
-  dominant-baseline: text-before-edge;
+  dominant-baseline: hanging;
 }
 
 .gcharts-bar-x__label {
@@ -28,14 +28,14 @@
 .gcharts-bar-y__label {
   user-select: none;
   fill: var(--g-color-text-complementary);
-  dominant-baseline: text-after-edge;
+  dominant-baseline: hanging;
 }
 
 .gcharts-treemap__label {
   user-select: none;
   pointer-events: none;
   fill: var(--g-color-text-complementary);
-  dominant-baseline: text-before-edge;
+  dominant-baseline: hanging;
 }
 
 .gcharts-waterfall__connector {

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

@@ -22,6 +22,7 @@ async function getLabels(args) {
             const label = getFormattedValue(Object.assign({ value: text }, args.options));
             let labelMaxHeight = 0;
             let labelMaxWidth = 0;
+            let hangingOffset = 0;
             if (html) {
                 const size = (_a = (await getLabelsSize({
                     labels: [label],
@@ -35,9 +36,10 @@ async function getLabels(args) {
                 const size = await getTextSize(label);
                 labelMaxHeight = size.height;
                 labelMaxWidth = size.width;
+                hangingOffset = size.hangingOffset;
             }
             let x = left;
-            const y = prevLabelsHeight + d.y0 + padding;
+            const y = prevLabelsHeight + d.y0 + padding + hangingOffset;
             const labelWidth = Math.min(labelMaxWidth, spaceWidth);
             const labelHeight = Math.min(labelMaxHeight, availableSpaceHeight);
             if (!labelWidth || y > d.y1) {

package/dist/cjs/types/chart-ui.d.ts

@@ -7,6 +7,7 @@ export interface LabelData {
     size: {
         width: number;
         height: number;
+        hangingOffset?: number;
     };
     textAnchor: 'start' | 'end' | 'middle';
     series: {

package/dist/esm/components/AxisX/AxisX.js

@@ -45,7 +45,7 @@ export const AxisX = (props) => {
                 .html((d) => d.text)
                 .attr('x', (d) => d.x)
                 .attr('y', (d) => d.y)
-                .attr('dominant-baseline', 'text-before-edge')
+                .attr('dominant-baseline', 'hanging')
                 .attr('text-anchor', 'start');
         }
         if (preparedAxisData.domain) {
@@ -98,7 +98,7 @@ export const AxisX = (props) => {
                     .attr('y', (d) => d.y)
                     .attr('text-anchor', 'start')
                     .attr('class', labelClassName)
-                    .style('dominant-baseline', 'text-before-edge')
+                    .style('dominant-baseline', 'hanging')
                     .style('font-size', label.style.fontSize)
                     .style('fill', (_a = label.style.fontColor) !== null && _a !== void 0 ? _a : '');
             }
@@ -134,7 +134,7 @@ export const AxisX = (props) => {
                             .style('fill', (_a = label.style.fontColor) !== null && _a !== void 0 ? _a : '')
                             .style('font-size', label.style.fontSize)
                             .style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
-                            .style('dominant-baseline', 'text-before-edge')
+                            .style('dominant-baseline', 'hanging')
                             .style('text-anchor', 'start')
                             .attr('transform', `translate(${label.x}, ${label.y}) rotate(${label.rotate})`)
                             .attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null);
@@ -176,7 +176,7 @@ export const AxisX = (props) => {
                             .style('fill', (_a = label.style.fontColor) !== null && _a !== void 0 ? _a : '')
                             .style('font-size', label.style.fontSize)
                             .style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
-                            .style('dominant-baseline', 'text-before-edge')
+                            .style('dominant-baseline', 'hanging')
                             .style('text-anchor', 'start')
                             .attr('transform', `translate(${label.x}, ${label.y}) rotate(${label.rotate})`)
                             .attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null);

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

@@ -1,5 +1,5 @@
 import { getUniqId } from '@gravity-ui/uikit';
-import { calculateSin, formatAxisTickLabel, getBandsPosition, getLabelsSize, getMinSpaceBetween, getTextSizeFn, getTextWithElipsis, } from '../../core/utils';
+import { calculateCos, calculateSin, formatAxisTickLabel, getBandsPosition, getLabelsSize, getMinSpaceBetween, getTextSizeFn, getTextWithElipsis, } from '../../core/utils';
 import { getXAxisTickValues } from '../../core/utils/axis/x-axis';
 import { getMultilineTitleContentRows } from '../utils/axis-title';
 async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWidth, axisWidth, boundsOffsetLeft, boundsOffsetRight, }) {
@@ -56,7 +56,9 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWid
         x = left + actualTextWidth / 2 - xOffset;
     }
     const yOffset = rotation <= 0 ? textSize.width * calculateSin(a) : 0;
-    const y = top + yOffset + axis.labels.margin;
+    const hOffset = textSize.hangingOffset;
+    const y = top + yOffset + axis.labels.margin + hOffset * calculateCos(rotation);
+    x -= hOffset * calculateSin(rotation);
     const svgLabel = {
         title: ((_a = content[0]) === null || _a === void 0 ? void 0 : _a.text) === text ? undefined : text,
         content,
@@ -69,7 +71,7 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWid
     return svgLabel;
 }
 export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, height, scale, series, split, yAxis, }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const xAxisItems = [];
     const splitPlots = (_a = split === null || split === void 0 ? void 0 : split.plots) !== null && _a !== void 0 ? _a : [];
     for (let plotIndex = 0; plotIndex < splitPlots.length; plotIndex++) {
@@ -201,7 +203,8 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
             const titleContent = [];
             const titleMaxWidth = axisWidth;
             if (axis.title.maxRowCount > 1) {
-                titleContent.push(...(await getMultilineTitleContentRows({ axis, titleMaxWidth })));
+                const rows = await getMultilineTitleContentRows({ axis, titleMaxWidth });
+                titleContent.push(...rows);
             }
             else {
                 const text = await getTextWithElipsis({
@@ -209,11 +212,12 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
                     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,
+                    size: titleSize,
                 });
             }
             const titleTextSize = titleContent.reduce((acc, item) => {
@@ -258,14 +262,14 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
             const halfBandwidth = ((_f = (_e = axisScale.bandwidth) === null || _e === void 0 ? void 0 : _e.call(axisScale)) !== null && _f !== void 0 ? _f : 0) / 2;
             const startPos = halfBandwidth + Math.min(from, to);
             const endPos = Math.min(Math.abs(to - from), axisWidth - Math.min(from, to));
-            const getPlotLabelSize = getTextSizeFn({ style: plotBand.label.style });
-            const labelSize = plotBand.label.text
-                ? await getPlotLabelSize(plotBand.label.text)
-                : null;
             const plotBandWidth = Math.min(endPos, axisWidth);
             if (plotBandWidth < 0) {
                 continue;
             }
+            const getPlotLabelSize = getTextSizeFn({ style: plotBand.label.style });
+            const labelSize = plotBand.label.text
+                ? await getPlotLabelSize(plotBand.label.text)
+                : null;
             plotBands.push({
                 layerPlacement: plotBand.layerPlacement,
                 x: Math.max(0, startPos),
@@ -278,8 +282,8 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
                     ? {
                         text: plotBand.label.text,
                         style: plotBand.label.style,
-                        x: plotBand.label.padding,
-                        y: plotBand.label.padding + ((_g = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _g !== void 0 ? _g : 0),
+                        x: plotBand.label.padding + ((_g = labelSize === null || labelSize === void 0 ? void 0 : labelSize.hangingOffset) !== null && _g !== void 0 ? _g : 0),
+                        y: plotBand.label.padding + ((_h = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _h !== void 0 ? _h : 0),
                         rotate: -90,
                         qa: plotBand.label.qa,
                     }
@@ -305,7 +309,7 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
                 label = {
                     text: plotLine.label.text,
                     style: plotLine.label.style,
-                    x: plotLineValue - plotLine.label.padding - size.height,
+                    x: plotLineValue - plotLine.label.padding - size.height + size.hangingOffset,
                     y: plotLine.label.padding + size.width,
                     rotate: -90,
                     qa: plotLine.label.qa,

package/dist/esm/components/AxisY/AxisY.js

@@ -50,7 +50,7 @@ export const AxisY = (props) => {
                 .html((d) => d.text)
                 .attr('x', (d) => d.x)
                 .attr('y', (d) => d.y)
-                .attr('dominant-baseline', 'text-after-edge')
+                .attr('dominant-baseline', 'hanging')
                 .attr('text-anchor', 'start');
         }
         if (preparedAxisData.domain) {
@@ -103,7 +103,7 @@ export const AxisY = (props) => {
                     .attr('y', (d) => d.y)
                     .attr('text-anchor', 'start')
                     .attr('class', labelClassName)
-                    .style('dominant-baseline', 'text-before-edge')
+                    .style('dominant-baseline', 'hanging')
                     .style('font-size', label.style.fontSize)
                     .style('fill', (_a = label.style.fontColor) !== null && _a !== void 0 ? _a : '');
             }
@@ -139,7 +139,7 @@ export const AxisY = (props) => {
                             .style('fill', (_a = label.style.fontColor) !== null && _a !== void 0 ? _a : '')
                             .style('font-size', label.style.fontSize)
                             .style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
-                            .style('dominant-baseline', 'text-before-edge')
+                            .style('dominant-baseline', 'hanging')
                             .attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null)
                             .attr('x', label.x)
                             .attr('y', label.y);
@@ -181,7 +181,7 @@ export const AxisY = (props) => {
                             .style('fill', (_a = label.style.fontColor) !== null && _a !== void 0 ? _a : '')
                             .style('font-size', label.style.fontSize)
                             .style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
-                            .style('dominant-baseline', 'text-before-edge')
+                            .style('dominant-baseline', 'hanging')
                             .attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null)
                             .attr('x', label.x)
                             .attr('y', label.y);