@gravity-ui/charts 1.42.3 → 1.42.4

package/dist/esm/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/esm/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/esm/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/esm/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.42.3",
+  "version": "1.42.4",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -80,7 +80,6 @@
     "d3-interpolate": "^3.0.1",
     "d3-path": "^3.1.0",
     "d3-random": "^3.0.1",
-    "d3-sankey": "^0.12.3",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.2.0",
@@ -109,7 +108,6 @@
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/d3": "^7.4.3",
-    "@types/d3-sankey": "^0.12.4",
     "@types/d3-selection": "^3.0.11",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.12",