pace-chart-lib 1.0.2 → 1.0.4

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

@@ -1,570 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-//#region imports
-import * as d3 from "d3";
-import { OrgChart } from "d3-org-chart";
-import { useEffect, useRef } from "react";
-import { logError } from "../../../../Services/ErrorLog";
-import { fontStyleOptions, } from "../../Core/Common.types";
-import { convertStringToNumber, drawChartTitle, firstFunctionBeforeRender, getNumberWithFormatFunction, initSvg, marginCalculationsForChartsWithoutLegends } from "../../Core/CommonFunctions";
-import { chartMargins } from "../../Core/DefaultProperties.types";
-import { connectorStyle, orgChartDirection, orgChartLineType, orgChartNodeType, } from "../ChartsWithoutAxisTypes.types";
-//#endregion
-const fileName = "OrganizationChart.tsx";
-const OrganizationChart = ({ data, formatOptions, legendEntries, legendSequence, }) => {
-    //#region Variables
-    const chartId = crypto.randomUUID();
-    const svgRef = useRef(); // Reference to the SVG element
-    const floatingSvgRef = useRef(); // Reference to the SVG element
-    let chartFormatOptions; // Format options for the chart
-    let width; // svg total width
-    let height; // svg total height
-    let chartTitleHeight = 40; // Height of the chart title
-    let margins = chartMargins; // Margins for the chart
-    let svg; // SVG element for the chart
-    let idIndexMap = new Map(); // Map to store the index of each id in the data
-    let indexMapForStyleObject = new Map(); // Map to store the index and UID for styling purposes
-    let chartDirection = orgChartDirection.left; // Direction of the chart layout, default is left
-    let chartData = [];
-    let scrollWidth = 0;
-    let scrollHeight = 0;
-    //#endregion
-    useEffect(() => {
-        drawChart();
-    }, [chartId, data, formatOptions]);
-    const drawChart = () => {
-        ({ chartFormatOptions, svg, width, height } = firstFunctionBeforeRender(svgRef, formatOptions));
-        ({ margins, chartTitleHeight, innerHeight, innerWidth } =
-            marginCalculationsForChartsWithoutLegends(chartFormatOptions, height, width));
-        initSvg(svgRef, width, height, chartFormatOptions); // Initialize SVG with width, height and background color
-        drawChartTitle(svgRef, chartTitleHeight, width, chartFormatOptions);
-        dataPreparation();
-        scrollWidthHeightCalculation();
-        drawOrganizationChart(chartData);
-    };
-    const dataPreparation = () => {
-        try {
-            chartDirection =
-                chartFormatOptions.plotArea.chartDirection || orgChartDirection.left;
-            var sum = 0;
-            var absoluteSum = 0;
-            data.forEach((item) => {
-                sum = sum + item.value;
-                absoluteSum = absoluteSum + item.absoluteValue;
-            });
-            var newObj = {
-                id: 0,
-                children: data,
-                value: sum, // Total value of all children
-                absoluteValue: absoluteSum,
-                nodeLabel: "",
-                UID: "",
-            };
-            let tempData = getFlattenedData(newObj).filter((data) => data.value !== null);
-            createIdIndexMap(tempData); // Create a map of id to index for quick access
-            generateUID(tempData); // Generate unique IDs for each node based on its parent
-            chartData = addStyleObjectToChartData(tempData);
-        }
-        catch (error) {
-            logError(fileName, "dataPreparation", error);
-        }
-    };
-    const scrollWidthHeightCalculation = () => {
-        try {
-            if (chartFormatOptions.plotArea.fitChart) {
-                scrollHeight = height;
-                scrollWidth = width;
-                floatingSvgRef.current.style.width = `calc(100% - 10px)`;
-                floatingSvgRef.current.style.height = `calc(100% - 10px)`;
-            }
-            else {
-                scrollWidth = 0;
-                chartData.forEach((node) => {
-                    if (node.label == legendSequence[legendSequence.length - 1]) {
-                        scrollWidth += calculateNodeWidth(node, false);
-                    }
-                });
-                scrollHeight =
-                    (legendSequence.length + 1) *
-                        convertStringToNumber(chartFormatOptions.nodes.nodeHeight) *
-                        10 +
-                        (legendSequence.length + 1) * 70;
-                floatingSvgRef.current.style.width = `${scrollWidth}px`;
-                floatingSvgRef.current.style.height = `${scrollHeight}px`;
-                d3.select(floatingSvgRef.current)
-                    .append("defs")
-                    .attr("id", `defs${chartId}`)
-                    .append("clipPath")
-                    .attr("id", `clipPath${chartId}`)
-                    .append("rect")
-                    .attr("width", width - margins.left - margins.right)
-                    .attr("height", height - margins.top - margins.bottom - 15)
-                    .attr("transform", `translate(${margins.left},${margins.top})`); // Adjust these values as needed
-                // Position the clipPath relative to the SVG container
-                document
-                    .querySelector("#floating-div" + chartId)
-                    .addEventListener("scroll", updateClipPathPosition);
-                d3.select(floatingSvgRef.current).attr("clip-path", `url(#clipPath${chartId})`);
-                function updateClipPathPosition() {
-                    let self = this;
-                    var scrollLeft = self.scrollLeft;
-                    var scrollTop = self.scrollTop;
-                    d3.select(`#clipPath${chartId}`)
-                        .select("rect")
-                        .attr("x", scrollLeft)
-                        .attr("y", scrollTop);
-                }
-            }
-        }
-        catch (error) {
-            logError(fileName, "scrollWidthHeightCalculation", error);
-        }
-    };
-    const generateUID = (data) => {
-        try {
-            data.forEach((nodeObject, i) => {
-                if (nodeObject.id != 0) {
-                    let parentUID = data[idIndexMap.get(nodeObject.parentId)].UID;
-                    parentUID === ""
-                        ? (nodeObject.UID = nodeObject.nodeLabel)
-                        : (nodeObject.UID = parentUID + "-" + nodeObject.nodeLabel);
-                    indexMapForStyleObject.set(nodeObject.UID, i); //Maintaining map of index and UID
-                }
-            });
-        }
-        catch (error) {
-            logError(fileName, "generateUID", error);
-        }
-    };
-    const addStyleObjectToChartData = (data) => {
-        try {
-            data[0] = { ...data[0], styleObject: legendEntries[0] };
-            legendEntries.forEach((styleObject) => {
-                if (styleObject === legendEntries[0])
-                    return;
-                let dataIndex = indexMapForStyleObject.get(styleObject.name);
-                let obj = data[dataIndex];
-                data[dataIndex] = { ...obj, styleObject: styleObject };
-            });
-            return data;
-        }
-        catch (error) {
-            logError(fileName, "addStyleObjectToChartData", error);
-        }
-    };
-    const createIdIndexMap = (data) => {
-        try {
-            data.forEach((object, i) => {
-                idIndexMap.set(object.id, i);
-            });
-        }
-        catch (error) {
-            logError(fileName, "createIdIndexMap", error);
-        }
-    };
-    const getFlattenedData = (dataHierarchy) => {
-        try {
-            const descendants = d3.hierarchy(dataHierarchy).descendants();
-            descendants.forEach((d, i) => {
-                d.id = d.id || "id" + i;
-            });
-            return descendants.map((d, i) => {
-                const copy = { ...d.data };
-                delete copy.children;
-                if (d.parent) {
-                    copy.parentValue = d.parent.data.value || 0;
-                }
-                return { ...copy, ...{ parentId: d.parent?.data?.id } };
-            });
-        }
-        catch (error) {
-            logError(fileName, "getFlattenedData", error);
-        }
-    };
-    const drawOrganizationChart = (chartData) => {
-        try {
-            let lineType = chartFormatOptions.connector.lineType || "straight";
-            let nodeType = chartFormatOptions.nodes.nodeType || orgChartNodeType.rectangle;
-            let connectorVisibility = parseInt(chartFormatOptions.connector.connectorLineThickness);
-            let organizationalChart = new OrgChart();
-            organizationalChart
-                .container(`#floating-${chartId}`)
-                .svgWidth(scrollWidth)
-                .svgHeight(scrollHeight)
-                .nodeHeight((d) => calculateNodeHeight(d))
-                .nodeWidth((d) => calculateNodeWidth(d, true))
-                .layout(chartDirection)
-                .diagonal((s, t, m, offsets = { sy: 0 }) => {
-                if (chartDirection == "top" ||
-                    chartDirection == "bottom" ||
-                    !chartDirection) {
-                    switch (lineType) {
-                        case orgChartLineType.curve:
-                            return `M ${s.x} ${s.y} C ${(s.x + t.x) / 2} ${s.y}, ${(s.x + t.x) / 2} ${t.y}, ${t.x} ${t.y}`;
-                        case orgChartLineType.elbow:
-                            return `M ${s.x} ${s.y} H ${s.x} V ${t.y} H ${t.x}`;
-                        case orgChartLineType.diagonal:
-                            return `M ${s.x} ${s.y} L ${(s.x + t.x) / 2} ${s.y} L ${(s.x + t.x) / 2} ${t.y} L ${t.x} ${t.y}`;
-                        case orgChartLineType.s_curve:
-                            const midY = (s.y + t.y) / 2;
-                            return `M ${s.x},${s.y} C ${s.x},${midY} ${t.x},${midY} ${t.x},${t.y}`;
-                        case orgChartLineType.arc:
-                            const dx = t.x - s.x;
-                            const dy = t.y - s.y;
-                            const dr = Math.sqrt(dx * dx + dy * dy);
-                            return `M ${s.x},${s.y} A ${dr},${dr} 0 0,1 ${t.x},${t.y}`;
-                        case orgChartLineType.reverse_elbow:
-                            if (chartDirection == orgChartDirection.bottom)
-                                return `M ${s.x} ${s.y} V ${s.y - 20} H ${t.x} V ${t.y}`;
-                            else if (chartDirection == orgChartDirection.top)
-                                return `M ${s.x} ${s.y} V ${s.y + 20} H ${t.x} V ${t.y}`;
-                        case orgChartLineType.zigzag:
-                            if (chartDirection == orgChartDirection.top) {
-                                const mid = (s.y + t.y) / 2;
-                                return `M ${s.x},${s.y} L ${s.x},${mid - 10} L ${t.x},${mid + 10} L ${t.x},${t.y}`;
-                            }
-                            else if (chartDirection == orgChartDirection.bottom) {
-                                const midY = (s.y + t.y) / 2;
-                                return `
-                      M ${s.x},${s.y}
-                      L ${s.x},${midY + 10}
-                      L ${t.x},${midY - 10}
-                      L ${t.x},${t.y}
-                    `;
-                            }
-                        default:
-                            if (chartDirection == orgChartDirection.bottom) {
-                                return `M ${s.x} ${s.y} V ${s.y + 25} H ${t.x} V ${t.y}`;
-                            }
-                            else if (chartDirection == "top") {
-                                return `M ${s.x} ${s.y} V ${s.y - 25} H ${t.x} V ${t.y}`;
-                            }
-                    }
-                }
-            })
-                .hdiagonal((s, t, m, offsets = { sx: 0 }) => {
-                if (chartDirection === orgChartDirection.left ||
-                    chartDirection === orgChartDirection.right) {
-                    switch (lineType) {
-                        case orgChartLineType.curve:
-                            return `M ${s.x} ${s.y} C ${(s.x + t.x) / 2} ${s.y}, ${(s.x + t.x) / 2} ${t.y}, ${t.x} ${t.y}`;
-                        case orgChartLineType.elbow:
-                            if (chartDirection == orgChartDirection.left)
-                                return `M ${s.x} ${s.y} H ${s.x - 50} V ${t.y} H ${t.x}`;
-                            else if (chartDirection == orgChartDirection.right) {
-                                return `M ${s.x} ${s.y} H ${s.x + 50} V ${t.y} H ${t.x}`;
-                            }
-                        case orgChartLineType.diagonal:
-                            return `M ${s.x} ${s.y} L ${(s.x + t.x) / 2} ${s.y} L ${(s.x + t.x) / 2} ${t.y} L ${t.x} ${t.y}`;
-                        case orgChartLineType.s_curve:
-                            const midX = (s.x + t.x) / 2;
-                            return `M ${s.x},${s.y} C ${midX},${s.y} ${midX},${t.y} ${t.x},${t.y}`;
-                        case orgChartLineType.arc:
-                            if (chartDirection == orgChartDirection.left) {
-                                const dx = t.x - s.x;
-                                const dy = t.y - s.y;
-                                const dr = Math.sqrt(dx * dx + dy * dy);
-                                return `M ${s.x},${s.y} A ${dr},${dr} 0 0,1 ${t.x},${t.y}`;
-                            }
-                            else if (chartDirection == orgChartDirection.right) {
-                                const dxRight = s.x - t.x; // Inverse the dx for right orientation
-                                const dyRight = t.y - s.y;
-                                const drRight = Math.sqrt(dxRight * dxRight + dyRight * dyRight);
-                                return `M ${s.x},${s.y} A ${drRight},${drRight} 0 0,0 ${t.x},${t.y}`;
-                            }
-                        case "reverse-elbow":
-                            if (chartDirection == orgChartDirection.left)
-                                return `M ${s.x} ${s.y} H ${s.x + 60} V ${t.y} H ${t.x}`;
-                            else if (chartDirection == orgChartDirection.right)
-                                return `M ${s.x} ${s.y} H ${s.x - 60} V ${t.y} H ${t.x}`;
-                        case "zigzag":
-                            if (chartDirection == orgChartDirection.left) {
-                                const midX = (s.x + t.x) / 2;
-                                return `
-                        M ${s.x},${s.y}
-                        L ${midX - 10},${s.y}
-                        L ${midX + 10},${t.y}
-                        L ${t.x},${t.y}
-                      `;
-                            }
-                            else {
-                                const midX = (s.x + t.x) / 2;
-                                return `
-                          M ${s.x},${s.y}
-                          L ${midX + 10},${s.y}
-                          L ${midX - 10},${t.y}
-                          L ${t.x},${t.y}
-                        `;
-                            }
-                        default:
-                            if (chartDirection == orgChartDirection.left)
-                                return `M ${s.x} ${s.y} H ${s.x - 25} V ${t.y} H ${t.x}`;
-                            else
-                                return `M ${s.x} ${s.y} H ${s.x + 25} V ${t.y} H ${t.x}`;
-                    }
-                }
-                else {
-                    return `M ${s.x} ${s.y} L ${t.x} ${t.y}`; // fallback for vertical
-                }
-            })
-                .linkUpdate(function (d) {
-                try {
-                    if (connectorVisibility) {
-                        const markerType = chartFormatOptions.plotArea.connectorType || "arrow";
-                        const isValidMarker = ["arrow", "diamond", "dot"].includes(markerType) &&
-                            chartFormatOptions.connector.lineType !== "reverse-elbow";
-                        d3.select(this)
-                            .attr("stroke-width", chartFormatOptions.connector.connectorLineThickness)
-                            .attr("stroke-dasharray", chartFormatOptions.connector.connectorStyle ===
-                            connectorStyle.solid
-                            ? 0
-                            : chartFormatOptions.connector.connectorStyle ===
-                                connectorStyle.dotted
-                                ? 1
-                                : 4)
-                            .style("stroke", chartFormatOptions.connector.connectorLineColor)
-                            .attr("marker-start", isValidMarker ? `url(#${markerType})` : null)
-                            .attr("marker-end", null); // always null to avoid showing marker at parent
-                    }
-                    else {
-                        d3.select(this)
-                            .attr("stroke-width", 0)
-                            .attr("marker-start", null)
-                            .attr("marker-end", null);
-                    }
-                }
-                catch (error) {
-                    logError(fileName, "drawOrganizationChart.linkUpdate", error);
-                }
-            })
-                .nodeContent((d, i) => {
-                try {
-                    let borderRadius = `${d.data.styleObject.borderRadius}px`;
-                    let transform = "";
-                    let innerWrapperStart = "";
-                    let innerWrapperEnd = "";
-                    let clipPath = "";
-                    let shapeStyle = "";
-                    switch (nodeType) {
-                        case orgChartNodeType.rounded:
-                            borderRadius = "10px";
-                            break;
-                        case orgChartNodeType.pill:
-                            borderRadius = "999px";
-                            break;
-                        case orgChartNodeType.extra_rounded:
-                            borderRadius = "20px";
-                            break;
-                        case orgChartNodeType.squircle:
-                            borderRadius = "25%";
-                            break;
-                        default:
-                            borderRadius = "1px";
-                            break;
-                    }
-                    shapeStyle = `
-                  border-width: ${d.data.styleObject.borderWidth}px 
-                  border-style:${chartFormatOptions.nodes.nodesBorderVisibility
-                        ? d.data.styleObject.borderStyle
-                        : "none"} 
-                  border-color:${d.data.styleObject.borderColor};
-                  border-radius: ${borderRadius};
-                `;
-                    return `<div hoverId="${d.data.label}" style="
-                  border-width: ${d.data.styleObject.borderWidth}px;
-                  border-style:${chartFormatOptions.nodes.nodesBorderVisibility
-                        ? d.data.styleObject.borderStyle
-                        : "none"} ;
-                  border-color:${d.data.styleObject.borderColor};
-                  border-radius: ${borderRadius};
-                  width: ${d.width}px; 
-                  height: ${d.height}px; 
-                  padding: 5px;
-                  display: flex;
-                  flex-direction: column;
-                  justify-content: center;
-                  align-items: center;
-                  text-align: center;
-                  background-color: ${d.data.styleObject.backgroundColor
-                        ? d.data.styleObject.backgroundColor
-                        : d.data.styleObject.Color};
-                  z-index: 99;
-                  transform: ${transform};
-                  transition: unset;">
-                  
-                  ${innerWrapperStart}
-            
-                  <div style="font-family:${d.data.styleObject.labelFont};
-                    color:${d.data.styleObject.labelFontColor};
-                    font-size:${d.data.styleObject.labelFontSize}px;
-                    font-weight:${d.data.styleObject.labelFontStyle.includes(fontStyleOptions.bold)
-                        ? "Bolder"
-                        : "normal"};
-                    font-style:${d.data.styleObject.labelFontStyle.includes(fontStyleOptions.italic)
-                        ? fontStyleOptions.italic
-                        : "normal"};
-                    text-decoration:${d.data.styleObject.labelFontStyle.includes(fontStyleOptions.underline)
-                        ? fontStyleOptions.underline
-                        : "none"};
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    max-width: ${d.width}px;
-                    padding: 5px;">
-                    ${i === 0
-                        ? d.data.styleObject.alias
-                        : chartFormatOptions.nodes.nodesLabelVisibility
-                            ? `${d.data.label} : ${getLabelText(d.data.styleObject.alias)}`
-                            : `${getLabelText(d.data.styleObject.alias)}`}
-                  </div>
-            
-                  <div style="font-family:${d.data.styleObject.valueFont}; 
-                    color:${d.data.styleObject.valueFontColor};
-                    font-weight:${d.data.styleObject.valueFontStyle.includes(fontStyleOptions.bold)
-                        ? "Bolder"
-                        : "normal"};
-                    font-style:${d.data.styleObject.valueFontStyle.includes(fontStyleOptions.italic)
-                        ? fontStyleOptions.italic
-                        : "normal"};
-                    text-decoration:${d.data.styleObject.valueFontStyle.includes(fontStyleOptions.underline)
-                        ? fontStyleOptions.underline
-                        : "none"};
-                    font-size:${d.data.styleObject.valueFontSize}px;">
-                    ${chartFormatOptions.nodes.dataLabelNumberFormat == ",.0%"
-                        ? d.data.parentValue
-                            ? Math.round((d.data.value / d.data.parentValue) * 100) + "%"
-                            : Math.round((d.data.value / d.data.value) * 100) +
-                                "%"
-                        : getNumberWithFormatFunction(chartFormatOptions.nodes.nodesDisplayUnits, chartFormatOptions.nodes.dataLabelNumberFormat, chartFormatOptions.nodes.dataLabelDecimalPrecision)(d.data.value)}
-                    <br>
-                    ${chartFormatOptions.nodes.percentageVisibility
-                        ? +d.data.parentValue
-                            ? Math.round((d.data.value / d.data.parentValue) * 100) + "%"
-                            : Math.round((d.data.value / d.data.value) * 100) +
-                                "%"
-                        : ""}
-                  </div>
-            
-                  ${innerWrapperEnd}
-                </div>`;
-                }
-                catch (error) {
-                    logError(fileName, "drawOrganizationChart.nodeContent", error);
-                    return "";
-                }
-            })
-                .buttonContent(({ node, state }) => {
-                try {
-                    if (connectorVisibility) {
-                        return `
-                <div 
-                  style="
-                    color: black;
-                    height: 10px;
-                    width: 10px;
-                    padding: 0;
-                    font-size: 10px;
-                    margin: auto;
-                    background-color: white;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    border-radius: 50%;
-                    border: 1px solid ${node.data.styleObject.borderColor};
-                    position: relative;
-                  "> 
-                  <span style="font-size: 10px; position: relative; align-items: center; top:-0.15px">
-                    ${node.children ? `-` : `+`}
-                  </span>
-                  ${!node.children
-                            ? `<span style="
-                            position: absolute;
-                            bottom: -8px;
-                            font-size: 7px;
-                            font-weight: bold;
-                          ">${node.data._directSubordinates}</span>`
-                            : ""}
-                </div>`;
-                    }
-                }
-                catch (error) {
-                    logError(fileName, "drawOrganizationChart.buttonContent", error);
-                    return "";
-                }
-            })
-                .childrenMargin((d) => 50)
-                .siblingsMargin((d) => 20)
-                .neighbourMargin((n1, n2) => 20)
-                .duration(0)
-                .setActiveNodeCentered(false)
-                .data(chartData)
-                .compact(false)
-                .expandAll()
-                .fit(false)
-                .render();
-        }
-        catch (error) {
-            logError(fileName, "drawOrganizationChart", error);
-        }
-    };
-    const calculateNodeHeight = (d) => {
-        try {
-            let height;
-            if (d.data.styleObject) {
-                chartFormatOptions.nodes.percentageVisibility
-                    ? (height = d.data.styleObject.nodeHeight * 10 + 10)
-                    : (height = d.data.styleObject.nodeHeight * 10);
-                return height;
-            }
-        }
-        catch (error) {
-            logError(fileName, "calculateNodeHeight", error);
-        }
-    };
-    const calculateNodeWidth = (d, throughOrgData) => {
-        try {
-            let data = {};
-            throughOrgData ? (data = d.data) : (data = d);
-            let width;
-            let staticAddition;
-            chartFormatOptions.nodes.nodesLabelVisibility
-                ? (staticAddition = 50)
-                : (staticAddition = 20);
-            if (data.styleObject) {
-                if (chartFormatOptions.nodes.nodesLabelOverflow) {
-                    data.id == 0
-                        ? (width = data.styleObject.nodeWidth * 10 + 50)
-                        : (width = data.styleObject.nodeWidth * 10);
-                }
-                else {
-                    width =
-                        staticAddition +
-                            getLabelText(data.styleObject.alias).length * 10 +
-                            data.styleObject.labelFontSize * 5;
-                }
-                return width;
-            }
-        }
-        catch (error) {
-            logError(fileName, "calculateNodeWidth", error);
-        }
-    };
-    const getLabelText = (name) => {
-        try {
-            let parts = name.split("-");
-            let lastValue = parts[parts.length - 1];
-            return lastValue;
-        }
-        catch (error) {
-            logError(fileName, "getLabelText", error);
-        }
-    };
-    return (_jsxs("div", { style: { width: "100%", height: "100%", position: "relative" }, children: [_jsx("svg", { id: chartId, className: "chartSVG", style: { width: "100%", height: "100%" }, ref: svgRef }), _jsx("div", { id: `floating-div${chartId}`, className: "floatingDiv", style: {
-                    position: "absolute",
-                    left: 0,
-                    top: 0,
-                    width: "100%",
-                    height: "100%",
-                    overflow: "auto",
-                }, children: _jsx("svg", { id: `floating-${chartId}`, className: "chartSVG", ref: floatingSvgRef }) })] }));
-};
-export default OrganizationChart;