pace-chart-lib 0.0.6 → 0.0.8

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

@@ -0,0 +1,569 @@
+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 { 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";
+import { logError } from "../../../../Services/ErrorLog";
+//#endregion
+const fileName = "OrganizationChart.tsx";
+const OrganizationChart = ({ data, legendEntries, chartId, formatOptions, legendSequence, }) => {
+    //#region Variables
+    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;

package/dist/components/Charts/ChartsWithoutAxis/OtherCharts/ProgressChart.d.ts

@@ -0,0 +1,3 @@
+import { IChartProps } from "../ChartsWithoutAxisTypes.types";
+declare const ProgressChart: React.FC<IChartProps>;
+export default ProgressChart;