pace-chart-lib 1.0.2 → 1.0.3

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

@@ -1,719 +0,0 @@
-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;