pace-chart-lib 0.0.7 → 0.0.8

package/dist/components/Charts/ChartsWithoutAxis/OtherCharts/SankeyChart.js

@@ -0,0 +1,719 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+//#region imports
+import * as d3 from "d3";
+import * as d3sankey from "d3-sankey";
+import { useEffect, useRef } from "react";
+import { fontStyleOptions, } from "../../Core/Common.types";
+import { convertStringToNumber, drawChartTitle, firstFunctionBeforeRender, getNumberWithFormatFunction, hideTooltipOnMouseOut, initChartArea, initSvg, marginCalculationsForChartsWithoutLegends, preCalculateTextDimensions, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
+import { chartMargins } from "../../Core/DefaultProperties.types";
+import { TSankeyDataLabelPostion, } from "../ChartsWithoutAxisTypes.types";
+import { logError } from "../../../../Services/ErrorLog";
+//#endregion
+const SankeyChart = ({ sankeyLinks, sankeyNodes, formatOptions, chartId, }) => {
+    //#region Variables
+    let renderCount = 0; // Counter to track the number of renders
+    const svgRef = useRef(); // Reference to the SVG element
+    let nodeEntries = sankeyNodes; // Data for the word cloud, expected to be an array of objects with properties
+    let chartFormatOptions; // Format options for the chart
+    let width; // svg total width
+    let height; // svg total height
+    let min = Number.MAX_VALUE; // svg total height
+    let max = Number.MIN_VALUE; // svg total height
+    let chartTitleHeight = 40; // Height of the chart title
+    let margins = chartMargins; // Margins for the chart
+    let innerHeight; // Height of the chart excluding margins
+    let innerWidth; // Width of the chart excluding margins
+    let chartAreaTagG; // Group element for the chart area
+    let svg; // SVG element for the chart
+    let scale; // Scale for the font size based on data values
+    let totalMeasureValue = 0;
+    let dataLabelPosition = TSankeyDataLabelPostion.left; // Default data label position
+    let maxNodeLabelWidth = 0; // Maximum width of the label
+    let isLabelWrapped = false; // Flag to check if label is wrapped
+    let layerWiseTotal = new Map();
+    let layerWisePercentage = new Map();
+    let nodesFillOpacity = 0.8; // Default fill opacity for nodes
+    let linksFillOpacity = 0.8; // Default fill opacity for links
+    let wrappedLabelMaxWidth = 0; // Maximum width for wrapped labels
+    //#endregion
+    useEffect(() => {
+        drawChart(); // Draw the chart when the component mounts
+    }, [formatOptions]);
+    const drawChart = () => {
+        ({ chartFormatOptions, svg, width, height } = firstFunctionBeforeRender(svgRef, formatOptions));
+        ({ margins, chartTitleHeight, innerHeight, innerWidth } =
+            marginCalculationsForChartsWithoutLegends(chartFormatOptions, height, width));
+        prepareDataForSankey();
+        initSvg(svgRef, width, height, chartFormatOptions); // Initialize SVG with width, height and background color
+        chartAreaTagG = initChartArea(svg, margins);
+        drawChartTitle(svgRef, chartTitleHeight, width, chartFormatOptions);
+        inittree();
+    };
+    const prepareDataForSankey = () => {
+        try {
+            nodesFillOpacity = convertStringToNumber(chartFormatOptions.nodes.nodesFillOpacity);
+            linksFillOpacity = convertStringToNumber(chartFormatOptions.links.linksFillOpacity);
+            sankeyNodes.forEach((d) => {
+                d["totalValue"] = 0;
+            });
+            sankeyNodes.forEach((d) => sankeyLinks.forEach((j) => (d.name == j.source || d.name == j.target) &&
+                (d["totalValue"] = (d["totalValue"] || 0) + j.value)));
+            (sankeyNodes = sankeyNodes.filter((d) => d["totalValue"] != 0)),
+                (sankeyLinks = sankeyLinks.filter((d) => d.value != 0));
+            let layersArray = assignNodeLayers(sankeyLinks);
+            let nodeLayerMap = new Map();
+            layersArray.forEach((layer) => {
+                layer.nodes.forEach((node) => {
+                    nodeLayerMap.set(node, layer.layer);
+                });
+            });
+            sankeyNodes.forEach((node) => {
+                let nodeLayerNumber = nodeLayerMap.get(node.name);
+                layerWiseTotal.set(nodeLayerNumber, (layerWiseTotal.get(nodeLayerNumber) || 0) + node.totalValue);
+            });
+            sankeyNodes.forEach((node) => {
+                layerWisePercentage.set(node.name, (node.totalValue / layerWiseTotal.get(nodeLayerMap.get(node.name))) *
+                    100);
+            });
+            calculateMaxNodeValueWidth(layersArray);
+        }
+        catch (error) {
+            logError("SankeyChart.tsx", "prepareDataForSankey", error);
+        }
+    };
+    const calculateMaxNodeValueWidth = (layersArray) => {
+        try {
+            isLabelWrapped = chartFormatOptions.nodes.nodesLabelWrap;
+            dataLabelPosition = chartFormatOptions.nodes.nodesLabelVisibility
+                ? chartFormatOptions.nodes.sankeyChartType
+                : "None";
+            let maxLabel = "";
+            let maxValue = 0;
+            sankeyNodes.forEach((node) => {
+                maxLabel = node.name.length > maxLabel.length ? node.name : maxLabel;
+                maxValue =
+                    node.totalValue.toString().length > maxValue.toString().length
+                        ? node.totalValue
+                        : maxValue;
+            });
+            let maxLabelWidth = preCalculateTextDimensions(maxLabel, convertStringToNumber(chartFormatOptions.nodes.nodesLabelFontSize), chartFormatOptions.nodes.nodesLabelFontFamily);
+            let maxValueWidth = preCalculateTextDimensions(getNumberWithFormatFunction(chartFormatOptions.nodes.nodesLabelDisplayUnits, chartFormatOptions.nodes.nodeLabelNumberFormat, chartFormatOptions.nodes.nodeLabelDecimalPrecision)(maxValue), convertStringToNumber(chartFormatOptions.nodes.nodesLabelFontSize), chartFormatOptions.nodes.nodesLabelFontFamily);
+            maxNodeLabelWidth =
+                Math.max(maxLabelWidth.width, maxValueWidth.width) + 6;
+            isLabelWrapped &&
+                (maxNodeLabelWidth = Math.min(innerWidth * 0.1, maxNodeLabelWidth));
+        }
+        catch (error) {
+            logError("SankeyChart.tsx", "calculateMaxNodeValueWidth", error);
+        }
+    };
+    const getsankey = (nodes, links) => {
+        try {
+            let Spacing = chartFormatOptions.nodes.spacing !== undefined
+                ? convertStringToNumber(chartFormatOptions.nodes.spacing) * 1.5
+                : 15;
+            let nodeWidth = chartFormatOptions.nodes.sankeyNodeWidth !== undefined
+                ? chartFormatOptions.nodes.sankeyNodeWidth
+                : 10;
+            let xAndYCoordinate = [];
+            let widthAndHeight = [];
+            switch (dataLabelPosition) {
+                case TSankeyDataLabelPostion.center:
+                    xAndYCoordinate = [1, 5];
+                    widthAndHeight = [innerWidth, innerHeight];
+                    break;
+                case TSankeyDataLabelPostion.right:
+                    xAndYCoordinate = [1, 5];
+                    widthAndHeight = [maxNodeLabelWidth, innerHeight];
+                    break;
+                case TSankeyDataLabelPostion.left:
+                    xAndYCoordinate = [maxNodeLabelWidth, 5];
+                    widthAndHeight = [innerWidth, innerHeight];
+                    break;
+                default:
+                    xAndYCoordinate = [1, 5];
+                    widthAndHeight = [innerWidth, innerHeight];
+                    break;
+            }
+            const sankey = d3sankey
+                .sankey()
+                .nodeId((d) => d.name)
+                .nodeAlign(d3sankey["sankeyJustify"])
+                .nodeWidth(nodeWidth)
+                .nodePadding(Spacing)
+                .extent([xAndYCoordinate, widthAndHeight])
+                .nodeSort(null);
+            return sankey({
+                nodes: nodes.map((d) => Object.assign({}, d)),
+                links: links.map((d) => Object.assign({}, d)),
+            });
+        }
+        catch (error) {
+            logError("SankeyChart.tsx", "getsankey", error);
+            return { nodes: [], links: [] };
+        }
+    };
+    const inittree = () => {
+        try {
+            // const color = d3.scaleOrdinal(d3.schemeCategory10);
+            let curviness = chartFormatOptions.nodes.curviness !== undefined
+                ? chartFormatOptions.nodes.curviness !== "0"
+                    ? chartFormatOptions.nodes.curviness
+                    : 0.1
+                : 0.5;
+            const { nodes, links } = getsankey(sankeyNodes, sankeyLinks);
+            function centerAlignNodesByLayer() {
+                try {
+                    const layers = {};
+                    // Group nodes by layer
+                    nodes.forEach((node) => {
+                        const x = node.x0;
+                        if (!layers[x])
+                            layers[x] = [];
+                        layers[x].push(node);
+                    });
+                    Object.keys(layers).forEach((layerX) => {
+                        const layer = layers[layerX];
+                        if (layer.length === 0)
+                            return;
+                        // Sort layer for predictable top-to-bottom order
+                        layer.sort((a, b) => a.y0 - b.y0);
+                        const topNode = layer[0];
+                        const bottomNode = layer[layer.length - 1];
+                        const topHeight = topNode.y1 - topNode.y0;
+                        const bottomHeight = bottomNode.y1 - bottomNode.y0;
+                        // Top-align the top node
+                        topNode.y0 = 0;
+                        topNode.y1 = topHeight;
+                        // Bottom-align the bottom node
+                        bottomNode.y1 = innerHeight;
+                        bottomNode.y0 = innerHeight - bottomHeight;
+                        // Adjust middle nodes
+                        if (layer.length > 2) {
+                            const middleNodes = layer.slice(1, layer.length - 1);
+                            const availableHeight = bottomNode.y0 - topNode.y1;
+                            const totalMiddleHeight = d3.sum(middleNodes, (d) => d.y1 - d.y0);
+                            const middleGap = (availableHeight - totalMiddleHeight) /
+                                (middleNodes.length + 1);
+                            let currentY = topNode.y1 + middleGap;
+                            middleNodes.forEach((node) => {
+                                const nodeHeight = node.y1 - node.y0;
+                                node.y0 = currentY;
+                                node.y1 = currentY + nodeHeight;
+                                currentY += nodeHeight + middleGap;
+                            });
+                        }
+                    });
+                }
+                catch (error) {
+                    logError("SankeyChart.tsx", "centerAlignNodesByLayer", error);
+                }
+            }
+            arrangeFlows();
+            centerAlignNodesByLayer();
+            arrangeFlows(); // Recompute flow offsets after repositioning
+            // Function to properly stack links within each node
+            function arrangeFlows() {
+                try {
+                    nodes.forEach((node) => {
+                        let sy = 0, ty = 0; // Track flow offsets
+                        // Assign positions to source links
+                        node.sourceLinks.forEach((link) => {
+                            link.sy = sy;
+                            sy += link.width; // Move next link below
+                        });
+                        // Assign positions to target links
+                        node.targetLinks.forEach((link) => {
+                            link.ty = ty;
+                            ty += link.width; // Move next link below
+                        });
+                    });
+                }
+                catch (error) {
+                    logError("SankeyChart.tsx", "arrangeFlows", error);
+                }
+            }
+            // Function to dynamically generate a curved link path based on curviness
+            function sankeyLinkCustom(curviness) {
+                return function (d) {
+                    try {
+                        const x0 = d.source.x1, y0 = d.source.y0 + d.sy + d.width / 2;
+                        const x1 = d.target.x0, y1 = d.target.y0 + d.ty + d.width / 2;
+                        const dx = x1 - x0;
+                        const cx1 = x0 + dx * curviness;
+                        const cx2 = x1 - dx * curviness;
+                        return `M${x0},${y0} C${cx1},${y0} ${cx2},${y1} ${x1},${y1}`;
+                    }
+                    catch (error) {
+                        logError("SankeyChart.tsx", "sankeyLinkCustom", error);
+                        return "";
+                    }
+                };
+            }
+            // Call function to arrange links properly before rendering
+            arrangeFlows();
+            const Nodes = chartAreaTagG
+                .append("g")
+                .selectAll("rect")
+                .data(nodes)
+                .enter()
+                .append("rect")
+                .style("fill-opacity", nodesFillOpacity)
+                .attr("id", (d) => "Node" + d.index)
+                .attr("class", "sankey-nodes")
+                .attr("stroke", chartFormatOptions.nodes.nodesBorderColor !== "#ffffff"
+                ? chartFormatOptions.nodes.nodesBorderColor
+                : "none")
+                .attr("stroke-width", chartFormatOptions.nodes.nodesBorderVisibility
+                ? chartFormatOptions.nodes.nodesBorderThickness
+                : 0)
+                .attr("x", (d) => d.x0)
+                .attr("y", (d) => d.y0)
+                .attr("height", (d) => d.y1 - d.y0)
+                .attr("width", (d) => d.x1 - d.x0)
+                .attr("fill", (d) => (d.color ? d.color : "#ffffff"))
+                .on("mousemove", function (event, d) {
+                try {
+                    if (chartFormatOptions.toolTip.toolTipVisibility) {
+                        showTooltipOnMouseMove([
+                            {
+                                key: d.name,
+                                value: chartFormatOptions.toolTip.toolTipNumberFormat == ",.0%"
+                                    ? layerWisePercentage.get(d.name) + "%"
+                                    : getNumberWithFormatFunction("None", chartFormatOptions.toolTip.toolTipNumberFormat, chartFormatOptions.toolTip.toolTipDecimalPrecision)(d.value),
+                            },
+                        ], chartFormatOptions);
+                    }
+                    // All Elements
+                    chartAreaTagG
+                        .selectAll(".sankey-nodes")
+                        .style("fill-opacity", 0.1)
+                        .style("stroke", "none");
+                    chartAreaTagG
+                        .selectAll(".sankey-nodes-texts")
+                        .style("opacity", "0");
+                    chartAreaTagG
+                        .selectAll(".sankey-links")
+                        .style("stroke-opacity", 0.1);
+                    // This Particular Node
+                    chartAreaTagG
+                        .select(`#Node${d.index}`)
+                        .style("stroke", chartFormatOptions.nodes.nodesBorderColor !== "#ffffff"
+                        ? chartFormatOptions.nodes.nodesBorderColor
+                        : "none")
+                        .style("fill-opacity", nodesFillOpacity)
+                        .style("cursor", "pointer");
+                    chartAreaTagG.select(`#Label${d.index}`).style("opacity", 1);
+                    // All Source Links
+                    d.sourceLinks.forEach((j) => {
+                        //Node
+                        chartAreaTagG
+                            .select(`#Node${j.target.index}`)
+                            .style("fill-opacity", nodesFillOpacity)
+                            .style("stroke", chartFormatOptions.nodes.nodesBorderColor !== "#ffffff"
+                            ? chartFormatOptions.nodes.nodesBorderColor
+                            : "none");
+                        //Link
+                        chartAreaTagG
+                            .select(`#Link${j.index}`)
+                            .style("stroke-opacity", linksFillOpacity);
+                        //Labels
+                        chartAreaTagG
+                            .select(`#Label${j.target.index}`)
+                            .style("opacity", 1);
+                    });
+                    // All Target Links
+                    d.targetLinks.forEach((j) => {
+                        //Node
+                        chartAreaTagG
+                            .select(`#Node${j.source.index}`)
+                            .style("fill-opacity", nodesFillOpacity)
+                            .style("stroke", chartFormatOptions.nodes.nodesBorderColor !== "#ffffff"
+                            ? chartFormatOptions.nodes.nodesBorderColor
+                            : "none");
+                        //Link
+                        chartAreaTagG
+                            .select(`#Link${j.index}`)
+                            .style("stroke-opacity", linksFillOpacity);
+                        //Label
+                        chartAreaTagG
+                            .select(`#Label${j.source.index}`)
+                            .style("opacity", 1);
+                    });
+                }
+                catch (error) {
+                    logError("SankeyChart.tsx", "Nodes.onMouseMove", error);
+                }
+            })
+                .on("mouseout", function (d) {
+                try {
+                    //Node
+                    chartAreaTagG
+                        .selectAll(".sankey-nodes")
+                        .style("fill-opacity", nodesFillOpacity)
+                        .style("stroke", chartFormatOptions.nodes.nodesBorderColor !== "#ffffff"
+                        ? chartFormatOptions.nodes.nodesBorderColor
+                        : "none");
+                    //Link
+                    chartAreaTagG
+                        .selectAll(".sankey-links")
+                        .style("stroke-opacity", linksFillOpacity);
+                    //Label
+                    chartAreaTagG
+                        .selectAll(".sankey-nodes-texts")
+                        .style("opacity", "1");
+                    // chartAreaTagG.select(this).style("cursor", "none");
+                    if (chartFormatOptions.toolTip.toolTipVisibility) {
+                        hideTooltipOnMouseOut();
+                    }
+                }
+                catch (error) {
+                    logError("SankeyChart.tsx", "Nodes.onMouseOut", error);
+                }
+            });
+            //LINKS
+            const link = chartAreaTagG
+                .append("g")
+                .attr("fill", "none")
+                .selectAll("g")
+                .data(links)
+                .enter()
+                .append("g")
+                .style("mix-blend-mode", "multiply");
+            link
+                .append("path")
+                .attr("class", "sankey-links")
+                .attr("stroke-opacity", linksFillOpacity)
+                .attr("id", (d) => "Link" + d.index)
+                .attr("d", sankeyLinkCustom(curviness))
+                .attr("stroke", (d) => chartFormatOptions.links.linksColor === "Source"
+                ? d.source.color
+                : d.target.color)
+                .attr("stroke-width", (d) => Math.max(1, d.width))
+                .on("mousemove", function (event, d) {
+                try {
+                    // All Elements
+                    chartAreaTagG
+                        .selectAll(".sankey-links")
+                        .style("stroke-opacity", 0.1);
+                    chartAreaTagG
+                        .selectAll(".sankey-nodes")
+                        .style("stroke", "none")
+                        .style("fill-opacity", 0.1);
+                    chartAreaTagG
+                        .selectAll(".sankey-nodes-texts")
+                        .style("opacity", "0");
+                    // This Particular Element
+                    chartAreaTagG
+                        .select(`#Link${d.index}`)
+                        .style("stroke-opacity", linksFillOpacity)
+                        .style("cursor", "pointer");
+                    // This Link's Nodes and Nodes Border
+                    chartAreaTagG
+                        .select(`#Node${d.target.index}`)
+                        .style("fill-opacity", nodesFillOpacity)
+                        .style("Stroke", chartFormatOptions.nodes.nodesBorderColor !== "#ffffff"
+                        ? chartFormatOptions.nodes.nodesBorderColor
+                        : "none");
+                    chartAreaTagG
+                        .select(`#Node${d.source.index}`)
+                        .style("fill-opacity", nodesFillOpacity)
+                        .style("Stroke", chartFormatOptions.nodes.nodesBorderColor !== "#ffffff"
+                        ? chartFormatOptions.nodes.nodesBorderColor
+                        : "none");
+                    // This Link's Node's Labdels
+                    chartAreaTagG.select(`#Label${d.target.index}`).style("opacity", 1);
+                    chartAreaTagG.select(`#Label${d.source.index}`).style("opacity", 1);
+                    if (chartFormatOptions.toolTip.toolTipVisibility) {
+                        showTooltipOnMouseMove([
+                            {
+                                key: d.source.name + "→" + d.target.name,
+                                value: getNumberWithFormatFunction("None", chartFormatOptions.toolTip.toolTipNumberFormat, chartFormatOptions.toolTip.toolTipDecimalPrecision)(d.value),
+                            },
+                        ], chartFormatOptions);
+                    }
+                }
+                catch (error) {
+                    logError("SankeyChart.tsx", "link.onMouseMove", error);
+                }
+            })
+                .on("mouseout", function (d) {
+                try {
+                    if (chartFormatOptions.toolTip.toolTipVisibility) {
+                        hideTooltipOnMouseOut();
+                    }
+                    // All Elements
+                    chartAreaTagG
+                        .selectAll(".sankey-nodes")
+                        .style("fill-opacity", nodesFillOpacity);
+                    chartAreaTagG
+                        .selectAll(".sankey-nodes")
+                        .style("stroke", chartFormatOptions.nodes.nodesBorderColor !== "#ffffff"
+                        ? chartFormatOptions.nodes.nodesBorderColor
+                        : "none");
+                    chartAreaTagG
+                        .selectAll(".sankey-links")
+                        .style("stroke-opacity", linksFillOpacity);
+                    chartAreaTagG
+                        .selectAll(".sankey-nodes-texts")
+                        .style("opacity", "1");
+                    // Ensure the node captures hover events
+                    d3.select(this).select("rect").style("pointer-events", "all");
+                    // This Particular Element
+                    d3.select(this).style("cursor", "none");
+                }
+                catch (error) {
+                    logError("SankeyChart.tsx", "link.onMouseOut", error);
+                }
+            });
+            // LABELS
+            if (chartFormatOptions.nodes.nodesLabelVisibility) {
+                try {
+                    const texts = chartAreaTagG
+                        .append("g")
+                        .attr("font-family", chartFormatOptions.nodes.nodesLabelFontFamily)
+                        .attr("font-size", chartFormatOptions.nodes.nodesLabelFontSize)
+                        .style("font-style", chartFormatOptions.nodes.nodesLabelFontStyle.includes(fontStyleOptions.italic)
+                        ? fontStyleOptions.italic
+                        : "")
+                        .style("text-decoration", chartFormatOptions.nodes.nodesLabelFontStyle.includes(fontStyleOptions.underline)
+                        ? fontStyleOptions.underline
+                        : "")
+                        .style("font-weight", chartFormatOptions.nodes.nodesLabelFontStyle.includes(fontStyleOptions.bold)
+                        ? fontStyleOptions.bold
+                        : "")
+                        .attr("display", chartFormatOptions.nodes.nodesLabelVisibility ? "visible" : "none")
+                        .selectAll("text")
+                        .data(nodes)
+                        .enter()
+                        .append("g")
+                        .attr("class", "sankey-nodes-texts")
+                        .attr("id", (d) => "Label" + d.index)
+                        .each(function (d) {
+                        try {
+                            if (chartFormatOptions.nodes.sankeyChartType !== "None") {
+                                const nodeWidth = chartFormatOptions.nodes.sankeyNodeWidth;
+                                const isInside = dataLabelPosition === TSankeyDataLabelPostion.center;
+                                // Append foreignObject for data label
+                                const div = d3
+                                    .select(this)
+                                    .append("foreignObject")
+                                    .attr("x", getXandYPositionOfLables(d)["x"])
+                                    .attr("y", getXandYPositionOfLables(d)["y"] - 16)
+                                    .attr("width", (d) => isInside ? nodeWidth : maxNodeLabelWidth) // Node width if inside, otherwise fixed width
+                                    .attr("height", 20);
+                                div
+                                    .append("xhtml:div")
+                                    .style("white-space", isInside ? "nowrap" : isLabelWrapped ? "nowrap" : "normal") // Wrap text only when Outside
+                                    .style("overflow", isInside
+                                    ? "hidden"
+                                    : isLabelWrapped
+                                        ? "hidden"
+                                        : "visible") // Full text visibility Outside
+                                    .style("text-overflow", isInside
+                                    ? "ellipsis"
+                                    : isLabelWrapped
+                                        ? "ellipsis"
+                                        : "clip")
+                                    .style("display", "block")
+                                    .style("max-width", (d) => isInside ? "100px" : maxNodeLabelWidth + "px") // Auto width for Outside mode
+                                    .style("padding", "0 3px")
+                                    .style("color", chartFormatOptions.nodes.nodesLabelColor)
+                                    .style("font-family", chartFormatOptions.nodes.nodesLabelFontFamily)
+                                    .style("font-size", chartFormatOptions.nodes.nodesLabelFontSize + "px")
+                                    .style("font-style", chartFormatOptions.nodes.nodesLabelFontStyle.includes(fontStyleOptions.italic)
+                                    ? fontStyleOptions.italic
+                                    : "")
+                                    .style("text-decoration", chartFormatOptions.nodes.nodesLabelFontStyle.includes(fontStyleOptions.underline)
+                                    ? fontStyleOptions.underline
+                                    : "")
+                                    .style("font-weight", chartFormatOptions.nodes.nodesLabelFontStyle.includes(fontStyleOptions.bold)
+                                    ? fontStyleOptions.bold
+                                    : "")
+                                    .style("text-align", chartFormatOptions.nodes.sankeyChartType === "Left"
+                                    ? "right"
+                                    : chartFormatOptions.nodes.sankeyChartType === "Center"
+                                        ? "center"
+                                        : "left")
+                                    .style("line-height", "20px")
+                                    .attr("title", (d) => {
+                                    if (layerWisePercentage.get(d.name) > 5) {
+                                        return d.alias ? d.alias : d.name;
+                                    }
+                                    return "";
+                                })
+                                    .text((d) => {
+                                    if (layerWisePercentage.get(d.name) > 5) {
+                                        return d.alias ? d.alias : d.name;
+                                    }
+                                    return "";
+                                });
+                                // Append foreignObject for data value
+                                const divValue = d3
+                                    .select(this)
+                                    .append("foreignObject")
+                                    .attr("x", getXandYPositionOfLables(d)["x"]) // Align X position properly
+                                    .attr("y", getXandYPositionOfLables(d)["y"]) // Keep value vertically aligned
+                                    .attr("width", (d) => isInside ? nodeWidth : maxNodeLabelWidth)
+                                    .attr("height", 20);
+                                divValue
+                                    .append("xhtml:div")
+                                    .style("white-space", isInside ? "nowrap" : isLabelWrapped ? "nowrap" : "normal") // Wrap text only when Outside
+                                    .style("overflow", isInside
+                                    ? "hidden"
+                                    : isLabelWrapped
+                                        ? "hidden"
+                                        : "visible") // Full text visibility Outside
+                                    .style("text-overflow", isInside
+                                    ? "ellipsis"
+                                    : isLabelWrapped
+                                        ? "ellipsis"
+                                        : "clip")
+                                    .style("display", "block")
+                                    .style("max-width", (d) => isInside ? "100px" : maxNodeLabelWidth + "px") // Auto width for Outside mode
+                                    .style("padding", "0 3px") // Auto width for Outside mode
+                                    .style("color", chartFormatOptions.nodes.nodesLabelColor)
+                                    .style("font-family", chartFormatOptions.nodes.nodesLabelFontFamily)
+                                    .style("font-size", chartFormatOptions.nodes.nodesLabelFontSize + "px")
+                                    .style("font-style", chartFormatOptions.nodes.nodesLabelFontStyle.includes(fontStyleOptions.italic)
+                                    ? fontStyleOptions.italic
+                                    : "")
+                                    .style("text-decoration", chartFormatOptions.nodes.nodesLabelFontStyle.includes(fontStyleOptions.underline)
+                                    ? fontStyleOptions.underline
+                                    : "")
+                                    .style("font-weight", chartFormatOptions.nodes.nodesLabelFontStyle.includes(fontStyleOptions.bold)
+                                    ? fontStyleOptions.bold
+                                    : "")
+                                    .style("text-align", chartFormatOptions.nodes.sankeyChartType === "Left"
+                                    ? "right"
+                                    : chartFormatOptions.nodes.sankeyChartType === "Center"
+                                        ? "center"
+                                        : "left") // Align value same as label
+                                    .style("line-height", "20px")
+                                    .attr("title", (d) => {
+                                    if (layerWisePercentage.get(d.name) > 5) {
+                                        return chartFormatOptions.nodes
+                                            .nodeLabelNumberFormat === ",.0%"
+                                            ? layerWisePercentage
+                                                .get(d.name)
+                                                .toFixed(parseFloat(chartFormatOptions.nodes
+                                                .nodeLabelDecimalPrecision)) + "%"
+                                            : getNumberWithFormatFunction(chartFormatOptions.nodes.nodesLabelDisplayUnits, chartFormatOptions.nodes.nodeLabelNumberFormat, chartFormatOptions.nodes.nodeLabelDecimalPrecision)(d.totalValue);
+                                    }
+                                    return "";
+                                })
+                                    .text((d) => {
+                                    if (layerWisePercentage.get(d.name) > 5) {
+                                        return chartFormatOptions.nodes
+                                            .nodeLabelNumberFormat === ",.0%"
+                                            ? layerWisePercentage
+                                                .get(d.name)
+                                                .toFixed(parseFloat(chartFormatOptions.nodes
+                                                .nodeLabelDecimalPrecision)) + "%"
+                                            : getNumberWithFormatFunction(chartFormatOptions.nodes.nodesLabelDisplayUnits, chartFormatOptions.nodes.nodeLabelNumberFormat, chartFormatOptions.nodes.nodeLabelDecimalPrecision)(d.totalValue);
+                                    }
+                                    return "";
+                                });
+                            }
+                        }
+                        catch (error) {
+                            logError("SankeyChart.tsx", "texts.each", error);
+                        }
+                    });
+                }
+                catch (error) {
+                    logError("SankeyChart.tsx", "inittree.texts", error);
+                }
+            }
+        }
+        catch (error) {
+            logError("SankeyChart.tsx", "inittree", error);
+        }
+    };
+    function assignNodeLayers(links) {
+        try {
+            const incoming = new Map(); // node -> Set of incoming sources
+            const outgoing = new Map(); // node -> Set of outgoing targets
+            const allNodes = new Set();
+            // Build graph
+            for (const { source, target } of links) {
+                allNodes.add(source);
+                allNodes.add(target);
+                if (!incoming.has(target))
+                    incoming.set(target, new Set());
+                if (!outgoing.has(source))
+                    outgoing.set(source, new Set());
+                incoming.get(target).add(source);
+                outgoing.get(source).add(target);
+            }
+            // Nodes with no incoming links => layer 0
+            const layerMap = new Map();
+            const queue = [];
+            for (const node of allNodes) {
+                if (!incoming.has(node)) {
+                    layerMap.set(node, 0);
+                    queue.push(node);
+                }
+            }
+            // BFS to assign layer numbers
+            while (queue.length > 0) {
+                const node = queue.shift();
+                const currentLayer = layerMap.get(node);
+                const targets = outgoing.get(node) || [];
+                for (const target of targets) {
+                    const nextLayer = currentLayer + 1;
+                    // Assign only if:
+                    // - not assigned yet
+                    // - or a higher layer number is found (take max)
+                    if (!layerMap.has(target) || layerMap.get(target) < nextLayer) {
+                        layerMap.set(target, nextLayer);
+                        queue.push(target);
+                    }
+                }
+            }
+            // Group nodes by layer
+            const layers = new Map(); // layer -> [nodes]
+            for (const [node, layer] of layerMap.entries()) {
+                if (!layers.has(layer))
+                    layers.set(layer, []);
+                layers.get(layer).push(node);
+            }
+            // Convert to sorted array of layers
+            const sortedLayers = [...layers.entries()]
+                .sort((a, b) => a[0] - b[0])
+                .map(([layer, nodes]) => ({ layer, nodes }));
+            return sortedLayers;
+        }
+        catch (error) {
+            logError("SankeyChart.tsx", "assignNodeLayers", error);
+            return [];
+        }
+    }
+    const getXandYPositionOfLables = (d) => {
+        try {
+            let returnObj = {};
+            const nodeWidth = Number(chartFormatOptions.nodes.sankeyNodeWidth);
+            const centerOffset = nodeWidth / 2;
+            switch (dataLabelPosition) {
+                case "Right":
+                    returnObj["x"] = d.x1 + 6;
+                    break;
+                default:
+                case "Left":
+                    returnObj["x"] = d.x0 - maxNodeLabelWidth;
+                    break;
+                case "Center":
+                    returnObj["x"] = d.x0 + centerOffset - nodeWidth / 2;
+                    break;
+            }
+            returnObj["y"] = (d.y1 + d.y0) / 2;
+            return returnObj;
+        }
+        catch (error) {
+            logError("SankeyChart.tsx", "getXandYPositionOfLables", error);
+            return { x: 0, y: 0 };
+        }
+    };
+    return (_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { id: "chartTooltipDiv" }), _jsx("svg", { className: "chartSVG", ref: svgRef, id: chartId, style: { width: "100%", height: "100%" } })] }));
+};
+export default SankeyChart;