@gravity-ui/charts 1.42.3 → 1.43.0

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/hooks/useTooltip/index.d.ts

@@ -1,5 +1,5 @@
 import type { Dispatch } from 'd3-dispatch';
-import type { AxisPlotBand, AxisPlotLine, PointPosition, TooltipDataChunk } from '../../types';
+import type { AxisPlotBand, AxisPlotLine, AxisPlotShape, PointPosition, TooltipDataChunk } from '../../types';
 import type { PreparedTooltip } from '../types';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 type Args = {
@@ -10,8 +10,9 @@ type Args = {
 };
 export declare const useTooltip: ({ dispatcher, tooltip, xAxis, yAxis }: Args) => {
     hovered: TooltipDataChunk[] | undefined;
-    hoveredPlotLines: AxisPlotLine[] | undefined;
     hoveredPlotBands: AxisPlotBand[] | undefined;
+    hoveredPlotLines: AxisPlotLine[] | undefined;
+    hoveredPlotShapes: AxisPlotShape[] | undefined;
     pointerPosition: PointPosition | undefined;
 };
 export {};

package/dist/cjs/hooks/useTooltip/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import isEqual from 'lodash/isEqual';
 import { getSortedHovered } from '../../components/Tooltip/DefaultTooltipContent/utils';
 export const useTooltip = ({ dispatcher, tooltip, xAxis, yAxis }) => {
-    const [{ hovered, hoveredPlotLines, hoveredPlotBands, pointerPosition }, setTooltipState] = React.useState({});
+    const [{ hovered, hoveredPlotBands, hoveredPlotLines, hoveredPlotShapes, pointerPosition }, setTooltipState,] = React.useState({});
     const prevHovered = React.useRef(hovered);
     React.useEffect(() => {
         if (tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled) {
@@ -17,8 +17,9 @@ export const useTooltip = ({ dispatcher, tooltip, xAxis, yAxis }) => {
                 const isHoveredChanged = !isEqual(prevHovered.current, sortedHovered);
                 const newTooltipState = {
                     hovered: isHoveredChanged ? sortedHovered : prevHovered.current,
-                    hoveredPlotLines: nextHoveredPlots === null || nextHoveredPlots === void 0 ? void 0 : nextHoveredPlots.lines,
                     hoveredPlotBands: nextHoveredPlots === null || nextHoveredPlots === void 0 ? void 0 : nextHoveredPlots.bands,
+                    hoveredPlotLines: nextHoveredPlots === null || nextHoveredPlots === void 0 ? void 0 : nextHoveredPlots.lines,
+                    hoveredPlotShapes: nextHoveredPlots === null || nextHoveredPlots === void 0 ? void 0 : nextHoveredPlots.shapes,
                     pointerPosition: nextPointerPosition,
                 };
                 if (isHoveredChanged) {
@@ -35,8 +36,9 @@ export const useTooltip = ({ dispatcher, tooltip, xAxis, yAxis }) => {
     }, [dispatcher, tooltip, xAxis, yAxis]);
     return {
         hovered,
-        hoveredPlotLines,
         hoveredPlotBands,
+        hoveredPlotLines,
+        hoveredPlotShapes,
         pointerPosition,
     };
 };

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

@@ -23,6 +23,7 @@ export const AxisX = (props) => {
         const plotDataAttr = 'data-plot-x';
         const plotBandDataAttr = `data-plot-x-band-${preparedAxisData.id}`;
         const plotLineDataAttr = `data-plot-x-line-${preparedAxisData.id}`;
+        const plotShapeDataAttr = `data-plot-x-shape-${preparedAxisData.id}`;
         if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
             plotBeforeContainer = select(plotBeforeRef.current);
         }
@@ -45,7 +46,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 +99,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 +135,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 +177,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);
@@ -186,14 +187,40 @@ export const AxisX = (props) => {
             setPlotLines(plotBeforeContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'before'));
             setPlotLines(plotAfterContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'after'));
         }
+        if (preparedAxisData.plotShapes.length > 0) {
+            const setPlotShapes = (plotContainer, plotShapes) => {
+                if (!plotContainer || !plotShapes.length) {
+                    return;
+                }
+                plotContainer
+                    .selectAll(`[${plotShapeDataAttr}]`)
+                    .remove()
+                    .data(plotShapes)
+                    .join('g')
+                    .attr(plotDataAttr, 1)
+                    .attr(plotShapeDataAttr, 1)
+                    .attr('transform', (d) => `translate(${d.x}, ${d.y})`)
+                    .attr('opacity', (d) => d.opacity)
+                    .html((d) => d.renderer({
+                    x: d.x,
+                    y: 0,
+                    plotHeight: d.plotHeight,
+                    plotWidth: d.plotWidth,
+                }));
+            };
+            setPlotShapes(plotBeforeContainer, preparedAxisData.plotShapes.filter((item) => item.layerPlacement === 'before'));
+            setPlotShapes(plotAfterContainer, preparedAxisData.plotShapes.filter((item) => item.layerPlacement === 'after'));
+        }
         return () => {
             if (plotBeforeContainer) {
                 plotBeforeContainer.selectAll(`[${plotBandDataAttr}]`).remove();
                 plotBeforeContainer.selectAll(`[${plotLineDataAttr}]`).remove();
+                plotBeforeContainer.selectAll(`[${plotShapeDataAttr}]`).remove();
             }
             if (plotAfterContainer) {
                 plotAfterContainer.selectAll(`[${plotBandDataAttr}]`).remove();
                 plotAfterContainer.selectAll(`[${plotLineDataAttr}]`).remove();
+                plotAfterContainer.selectAll(`[${plotShapeDataAttr}]`).remove();
             }
         };
     }, [lineGenerator, plotAfterRef, plotBeforeRef, preparedAxisData]);