pace-chart-lib 1.0.1 → 1.0.3

package/dist/components/Charts/ChartsWithoutAxis/PieFamily/PieofPieChart.js

@@ -1,507 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-//#region imports
-import * as d3 from "d3";
-import { useEffect, useRef } from "react";
-import { fontStyleOptions, } from "../../Core/Common.types";
-import { convertStringToNumber, drawChartTitle, findStringWithLongestLength, firstFunctionBeforeRender, getNumberWithFormatFunction, hideTooltipOnMouseOut, initChartArea, initLegendListWithTotalValueAllowance, initSvg, marginCalculationsForChartsWithoutAxis, preCalculateTextDimensions, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
-import { chartMargins, } from "../../Core/DefaultProperties.types";
-import { drawTotalValue } from "./PieFamilyCommonFunctions";
-import { logError } from "../../../../Services/ErrorLog";
-//#endregion
-const fileName = "PieofPieChart.tsx";
-const PieofPie = ({ data, formatOptions, chartId, legendProperties, }) => {
-    // #region variables
-    const svgRef = useRef(); // Reference to the SVG element
-    let chartFormatOptions; // Chart format options with defaults
-    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 innerHeight; // Height of the chart excluding margins
-    let innerWidth; // Width of the chart excluding margins
-    let chartAreaTagG; // Main chart area group
-    let svg; // Main SVG element
-    let pieOfPieData;
-    let radius; // Radius of the parent pie chart
-    let childRadius; // Radius of the parent pie chart
-    let parentPieTotalValue; // Total value of the parent pie chart
-    let expandedArcName = undefined; // Name of the expanded arc, if any
-    let parentPieX; // X position of the parent pie chart
-    let parentPieY; // Y position of the parent pie chart
-    let childPieX; // X position of the child pie chart
-    let childPieY; // Y position of the child pie chart
-    let maxLegendDimensions = [0, 0]; // to calculate margins [width, height]
-    let legendListWidth; // to calculate margins [width, height]
-    let plotArea; // Default plot area options
-    // #endregion
-    // #region useEffect
-    useEffect(() => {
-        drawChart();
-    }, [formatOptions]);
-    // #endregion
-    const drawChart = () => {
-        ({ chartFormatOptions, svg, width, height } = firstFunctionBeforeRender(svgRef, formatOptions));
-        ({ plotArea } = chartFormatOptions);
-        calculateMaxPossibleWidth();
-        ({ margins, innerHeight, innerWidth, legendListWidth, chartTitleHeight } =
-            marginCalculationsForChartsWithoutAxis(chartFormatOptions, width, height, maxLegendDimensions, margins));
-        calculatePieRadius();
-        initSvg(svgRef, width, height, chartFormatOptions); // Initialize SVG with width, height and background color
-        chartAreaTagG = initChartArea(svg, margins);
-        drawChartTitle(svgRef, chartTitleHeight, width, chartFormatOptions);
-        initChartData();
-        drawPieChart();
-        drawParentPieDataLabels();
-        drawTotalValue(chartFormatOptions, parentPieTotalValue, chartTitleHeight, svg, width, height);
-        initLegendList();
-    };
-    const calculateMaxPossibleWidth = () => {
-        try {
-            let legendDims = preCalculateTextDimensions(findStringWithLongestLength(legendProperties, "name"), convertStringToNumber(chartFormatOptions.legends.legendFontSize), chartFormatOptions.legends.legendFontFamily);
-            maxLegendDimensions = [legendDims.width, legendDims.height];
-        }
-        catch (error) {
-            logError(fileName, "calculateMaxPossibleWidth", error);
-        }
-    };
-    const calculatePieRadius = () => {
-        try {
-            radius = Math.min(innerHeight * 0.4, innerWidth * 0.4);
-            childRadius = chartFormatOptions.pieofPie.pieOfPieRadius;
-        }
-        catch (error) {
-            logError(fileName, "calculatePieRadius", error);
-        }
-    };
-    const initChartData = () => {
-        try {
-            let legendMap = new Map();
-            legendProperties.forEach((legend) => {
-                legendMap.set(legend.name, legend);
-            });
-            parentPieTotalValue = 0;
-            data.forEach((dataParentObj) => {
-                dataParentObj["properties"] = legendMap.get(dataParentObj.legend);
-                parentPieTotalValue += dataParentObj.data[0].value;
-                if (dataParentObj.children) {
-                    dataParentObj.children.forEach((child) => (child["properties"] = legendMap.get(child.legend)));
-                }
-            });
-            const pie = d3.pie().value((d) => d.data[0].value);
-            let pieData = pie(data);
-            pieOfPieData = pieData.map((d, i) => ({
-                ...d,
-                x0: d.startAngle,
-                x1: d.endAngle,
-                y0: 0,
-                y1: radius,
-                depth: 2, // Set depth to 2 to simulate hierarchical level for consistent arc rendering (e.g., in sunburst or partition layouts)
-            }));
-        }
-        catch (error) {
-            logError(fileName, "initChartData", error);
-        }
-    };
-    const drawPieChart = () => {
-        try {
-            const arc = d3
-                .arc()
-                .innerRadius(0)
-                .outerRadius(radius);
-            const arcOver = d3
-                .arc()
-                .innerRadius(0)
-                .outerRadius(radius + 10);
-            chartAreaTagG
-                .append("g")
-                .attr("class", "parentGroup")
-                .attr("fill-opacity", chartFormatOptions.plotArea.opacity)
-                .attr("transform", `${getParentPiePosition()}`)
-                .selectAll("path")
-                .data(pieOfPieData)
-                .enter()
-                .append("path")
-                .attr("class", (d) => "path " + d.data.legend)
-                .attr("hoverId", (d) => d.data.legend.replace(/ /g, "-"))
-                .attr("fill", (d) => d.data.properties.color !== "#ffffff"
-                ? d.data.properties.color
-                : "none")
-                .attr("d", (d) => arc(d))
-                .on("mouseover.arc", function (d) {
-                d3.select(this).transition().duration(100).attr("d", arcOver);
-            })
-                .on("mousemove.text", (d) => {
-                showTooltipOnMouseMove([
-                    {
-                        key: chartFormatOptions.yAxisTitle.yAxisTitleText,
-                        value: chartFormatOptions.toolTip.toolTipNumberFormat == ",.0%"
-                            ? (Math.abs(d.currentTarget.__data__.data.data[0].value /
-                                parentPieTotalValue) * 100).toFixed(convertStringToNumber(chartFormatOptions.toolTip.toolTipDecimalPrecision) ?? 0) + "%"
-                            : getNumberWithFormatFunction("None", chartFormatOptions.toolTip.toolTipNumberFormat, chartFormatOptions.toolTip.toolTipDecimalPrecision)(d.currentTarget.__data__.data.data[0].value),
-                    },
-                    { key: "Legend", value: d.currentTarget.__data__.data.legend },
-                ], chartFormatOptions);
-            })
-                .on("mouseout.text", () => {
-                hideTooltipOnMouseOut();
-            })
-                .on("mouseout.arc", function (d) {
-                d3.select(this).transition().duration(100).attr("d", arc);
-                hideTooltipOnMouseOut();
-            })
-                .on("click", (event, data) => {
-                try {
-                    let currentArcData = data;
-                    if (currentArcData.data.children &&
-                        currentArcData.data.children.length > 1) {
-                        chartAreaTagG.selectAll(".childGroup").remove();
-                        chartAreaTagG.selectAll(".childLabels").remove();
-                        chartAreaTagG.selectAll("line").remove();
-                        expandedArcName = currentArcData.data.legend;
-                        let rotate = 90 - ((data.x0 + data.x1) / 2 / Math.PI) * 180;
-                        drawChildPie(currentArcData.data.children, rotate, data);
-                    }
-                }
-                catch (error) {
-                    logError(fileName, "drawPieChart_onClick", error);
-                }
-            });
-        }
-        catch (error) {
-            logError(fileName, "drawPieChart", error);
-        }
-    };
-    const drawChildPie = (childData, rotate, parentArc) => {
-        try {
-            // Code to rotate parent pie
-            chartAreaTagG
-                .select(".parentGroup")
-                .transition()
-                .attr("transform", `${getParentPiePosition()} rotate(${rotate})`)
-                .duration(1000);
-            chartAreaTagG
-                .selectAll(".parentLabels")
-                .transition()
-                .attr("transform", `${getParentPiePosition()} rotate(${rotate})`)
-                .duration(1000);
-            //end
-            const childPie = d3.pie().value((d) => d.data[0].value);
-            let childPieData = childPie(childData).map((d, i) => ({
-                ...d,
-                x0: d.startAngle,
-                x1: d.endAngle,
-                y0: 0,
-                y1: childRadius,
-                depth: 2, // Set depth to 2 to simulate hierarchical level for consistent arc rendering (e.g., in sunburst or partition layouts)
-            }));
-            const arc = d3
-                .arc()
-                .innerRadius(0)
-                .outerRadius(childRadius);
-            const arcOver = d3
-                .arc()
-                .innerRadius(0)
-                .outerRadius(childRadius + 10);
-            chartAreaTagG
-                .append("g")
-                .attr("class", "childGroup")
-                .attr("fill-opacity", chartFormatOptions.plotArea.opacity)
-                .attr("transform", `${getChildPiePosition()}`)
-                .selectAll("path")
-                .data(childPieData)
-                .enter()
-                .append("path")
-                .attr("class", (d) => "path " + d.data.legend)
-                .attr("hoverId", (d) => d.data.legend.replace(/ /g, "-"))
-                .attr("fill", (d) => d.data.properties.color !== "#ffffff"
-                ? d.data.properties.color
-                : "none")
-                .attr("d", (d) => arc(d))
-                .on("mouseover.arc", function (d) {
-                d3.select(this).transition().duration(100).attr("d", arcOver);
-            })
-                .on("mousemove.text", (d) => {
-                showTooltipOnMouseMove([
-                    {
-                        key: chartFormatOptions.yAxisTitle.yAxisTitleText,
-                        value: chartFormatOptions.toolTip.toolTipNumberFormat == ",.0%"
-                            ? (Math.abs(d.currentTarget.__data__.data.data[0].value /
-                                parentPieTotalValue) * 100).toFixed(convertStringToNumber(chartFormatOptions.toolTip.toolTipDecimalPrecision)) + "%"
-                            : getNumberWithFormatFunction("None", chartFormatOptions.toolTip.toolTipNumberFormat, chartFormatOptions.toolTip.toolTipDecimalPrecision)(d.currentTarget.__data__.data.data[0].value),
-                    },
-                    { key: "Legend", value: d.currentTarget.__data__.data.legend },
-                ], chartFormatOptions);
-            })
-                .on("mouseout.text", () => {
-                hideTooltipOnMouseOut();
-            })
-                .on("mouseout.arc", function (d) {
-                d3.select(this).transition().duration(100).attr("d", arc);
-                hideTooltipOnMouseOut();
-            });
-            drawChildPieDataLabels(childPieData);
-            drawLines(parentArc, childData);
-        }
-        catch (error) {
-            logError(fileName, "drawChildPie", error);
-        }
-    };
-    const getParentPiePosition = () => {
-        try {
-            parentPieX = expandedArcName ? (3 * innerWidth) / 8 : innerWidth / 2;
-            parentPieY = innerHeight / 2;
-            return `translate(${parentPieX},${parentPieY})`;
-        }
-        catch (error) {
-            logError(fileName, "getParentPiePosition", error);
-        }
-    };
-    const getChildPiePosition = () => {
-        try {
-            childPieX = (3 * innerWidth) / 4;
-            childPieY = innerHeight / 2;
-            return `translate(${childPieX},${childPieY})`;
-        }
-        catch (error) {
-            logError(fileName, "getChildPiePosition", error);
-        }
-    };
-    const getDataLabelTransformString = (d, radius) => {
-        try {
-            const midAngle = (d.startAngle + d.endAngle) / 2;
-            const x = Math.cos(midAngle - Math.PI / 2) * (radius * 0.65);
-            const y = Math.sin(midAngle - Math.PI / 2) * (radius * 0.65);
-            let rotate = (midAngle * 180) / Math.PI - 90;
-            return `translate(${x},${y}) rotate(${rotate})`;
-        }
-        catch (error) {
-            logError(fileName, "getDataLabelTransformString", error);
-        }
-    };
-    const drawParentPieDataLabels = () => {
-        try {
-            if (chartFormatOptions.plotArea.dataLabels) {
-                // Code for inside data labels
-                chartAreaTagG
-                    .append("g")
-                    .attr("class", "parentLabels parentGroup")
-                    .attr("transform", `${getParentPiePosition()}`)
-                    .attr("pointer-events", "none")
-                    .attr("text-anchor", "middle")
-                    .selectAll("text")
-                    .data(pieOfPieData)
-                    .enter()
-                    .append("text")
-                    .attr("hoverId", (d) => d.data.legend.replace(/ /g, "-"))
-                    .attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11)
-                    .attr("fill", (d) => d.data.properties?.labelFontColor ?? "#000000")
-                    .attr("font-style", (d) => d.data.properties?.labelFontStyle?.includes(fontStyleOptions.italic)
-                    ? fontStyleOptions.italic
-                    : "")
-                    .attr("text-decoration", (d) => d.data.properties?.labelFontStyle?.includes(fontStyleOptions.underline)
-                    ? fontStyleOptions.underline
-                    : "")
-                    .attr("font-weight", (d) => d.data.properties?.labelFontStyle?.includes(fontStyleOptions.bold)
-                    ? fontStyleOptions.bold
-                    : "")
-                    .attr("font-family", (d) => d.data.properties?.labelFont ?? "Helvetica")
-                    .attr("transform", (d) => getDataLabelTransformString(d, radius))
-                    .attr("dy", "-0.35em")
-                    .attr("text-anchor", "middle")
-                    .attr("alignment-baseline", "middle")
-                    .text((d) => {
-                    const { plotArea } = chartFormatOptions;
-                    if (plotArea.dataLabelName) {
-                        return d.data.legend;
-                    }
-                    return "";
-                });
-                chartAreaTagG
-                    .append("g")
-                    .attr("class", "parentLabels parentGroup")
-                    .attr("transform", `${getParentPiePosition()}`)
-                    .attr("pointer-events", "none")
-                    .attr("text-anchor", "middle")
-                    .selectAll("text")
-                    .data(pieOfPieData)
-                    .enter()
-                    .append("text")
-                    .attr("hoverId", (d) => d.data.legend.replace(/ /g, "-"))
-                    .attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11)
-                    .attr("fill", (d) => d.data.properties?.valueFontColor ?? "#000000")
-                    .attr("font-style", (d) => d.data.properties?.valueFontStyle?.includes(fontStyleOptions.italic)
-                    ? fontStyleOptions.italic
-                    : "")
-                    .attr("text-decoration", (d) => d.data.properties?.valueFontStyle?.includes(fontStyleOptions.underline)
-                    ? fontStyleOptions.underline
-                    : "")
-                    .attr("font-weight", (d) => d.data.properties?.valueFontStyle?.includes(fontStyleOptions.bold)
-                    ? fontStyleOptions.bold
-                    : "300")
-                    .attr("font-family", (d) => d.data.properties?.valueFont ?? "Helvetica")
-                    .attr("transform", (d) => getDataLabelTransformString(d, radius))
-                    .attr("text-anchor", "middle")
-                    .attr("alignment-baseline", "middle")
-                    .attr("dy", "1.00em")
-                    .text((d) => {
-                    if (chartFormatOptions.plotArea.dataLabelValue) {
-                        const dataValue = d.data.data[0].value;
-                        if (chartFormatOptions.plotArea.dataLabelName &&
-                            chartFormatOptions.plotArea.dataLabelValue &&
-                            dataValue !== undefined) {
-                            if (chartFormatOptions.plotArea.dataLabelNumberFormat === ",.0%") {
-                                return ((Math.abs(dataValue / parentPieTotalValue) * 100).toFixed(convertStringToNumber(chartFormatOptions.plotArea.dataLabelDecimalPrecision) ?? 0) + "%");
-                            }
-                            else {
-                                return getNumberWithFormatFunction(chartFormatOptions.plotArea.plotAreaDisplayUnits, chartFormatOptions.plotArea.dataLabelNumberFormat, chartFormatOptions.plotArea.dataLabelDecimalPrecision)(dataValue);
-                            }
-                        }
-                        return dataValue;
-                    }
-                });
-            }
-        }
-        catch (error) {
-            logError(fileName, "drawParentPieDataLabels", error);
-        }
-    };
-    const drawChildPieDataLabels = (childData) => {
-        try {
-            if (chartFormatOptions.plotArea.dataLabels) {
-                // Code for inside data labels
-                chartAreaTagG
-                    .append("g")
-                    .attr("class", "childLabels parentGroup")
-                    .attr("transform", `${getChildPiePosition()}`)
-                    .attr("pointer-events", "none")
-                    .attr("text-anchor", "middle")
-                    .selectAll("text")
-                    .data(childData)
-                    .enter()
-                    .append("text")
-                    .attr("hoverId", (d) => d.data.legend.replace(/ /g, "-"))
-                    .attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11)
-                    .attr("fill", (d) => d.data.properties?.labelFontColor ?? "#000000")
-                    .attr("font-style", (d) => d.data.properties?.labelFontStyle?.includes(fontStyleOptions.italic)
-                    ? fontStyleOptions.italic
-                    : "")
-                    .attr("text-decoration", (d) => d.data.properties?.labelFontStyle?.includes(fontStyleOptions.underline)
-                    ? fontStyleOptions.underline
-                    : "")
-                    .attr("font-weight", (d) => d.data.properties?.labelFontStyle?.includes(fontStyleOptions.bold)
-                    ? fontStyleOptions.bold
-                    : "")
-                    .attr("font-family", (d) => d.data.properties?.labelFont ?? "Helvetica")
-                    .attr("transform", (d) => getDataLabelTransformString(d, childRadius))
-                    .attr("dy", "-0.35em")
-                    .attr("text-anchor", "middle")
-                    .attr("alignment-baseline", "middle")
-                    .text((d) => {
-                    const { plotArea } = chartFormatOptions;
-                    if (plotArea.dataLabelName) {
-                        return d.data.legend;
-                    }
-                    return "";
-                });
-                chartAreaTagG
-                    .append("g")
-                    .attr("class", "childLabels parentGroup")
-                    .attr("transform", `${getChildPiePosition()}`)
-                    .attr("pointer-events", "none")
-                    .attr("text-anchor", "middle")
-                    .selectAll("text")
-                    .data(childData)
-                    .enter()
-                    .append("text")
-                    .attr("hoverId", (d) => d.data.legend.replace(/ /g, "-"))
-                    .attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11)
-                    .attr("fill", (d) => d.data.properties?.valueFontColor ?? "#000000")
-                    .attr("font-style", (d) => d.data.properties?.valueFontStyle?.includes(fontStyleOptions.italic)
-                    ? fontStyleOptions.italic
-                    : "")
-                    .attr("text-decoration", (d) => d.data.properties?.valueFontStyle?.includes(fontStyleOptions.underline)
-                    ? fontStyleOptions.underline
-                    : "")
-                    .attr("font-weight", (d) => d.data.properties?.valueFontStyle?.includes(fontStyleOptions.bold)
-                    ? fontStyleOptions.bold
-                    : "300")
-                    .attr("font-family", (d) => d.data.properties?.valueFont ?? "Helvetica")
-                    .attr("transform", (d) => getDataLabelTransformString(d, childRadius))
-                    .attr("text-anchor", "middle")
-                    .attr("alignment-baseline", "middle")
-                    .attr("dy", "1.00em")
-                    .text((d) => {
-                    if (chartFormatOptions.plotArea.dataLabelValue) {
-                        const dataValue = d.data.data[0].value;
-                        if (chartFormatOptions.plotArea.dataLabelName &&
-                            chartFormatOptions.plotArea.dataLabelValue &&
-                            dataValue !== undefined) {
-                            if (chartFormatOptions.plotArea.dataLabelNumberFormat === ",.0%") {
-                                return ((Math.abs(dataValue / parentPieTotalValue) * 100).toFixed(convertStringToNumber(chartFormatOptions.plotArea.dataLabelDecimalPrecision) ?? 0) + "%");
-                            }
-                            else {
-                                return getNumberWithFormatFunction(chartFormatOptions.plotArea.plotAreaDisplayUnits, chartFormatOptions.plotArea.dataLabelNumberFormat, chartFormatOptions.plotArea.dataLabelDecimalPrecision)(dataValue);
-                            }
-                        }
-                        return dataValue;
-                    }
-                });
-            }
-        }
-        catch (error) {
-            logError(fileName, "drawChildPieDataLabels", error);
-        }
-    };
-    const drawLines = (angleData, chartData) => {
-        try {
-            let arcAngle = Math.abs(angleData.x0 - angleData.x1) / 2;
-            let radius = angleData.y1;
-            let y = radius * Math.sin(arcAngle);
-            let x = y / Math.tan(arcAngle);
-            chartAreaTagG
-                .append("line")
-                .transition()
-                .style("stroke", chartFormatOptions.pieofPie.pieOfPieLineColor)
-                .style("stroke-width", chartFormatOptions.pieofPie.pieOfPieLineWidth)
-                .style("stroke-dasharray", "3, 3")
-                .attr("opacity", 0.5)
-                .attr("x1", parentPieX + x) // x position of the first end of the line
-                .attr("y1", parentPieY - y) // y position of the first end of the line
-                .attr("x2", childPieX) // x position of the second end of the line
-                .attr("y2", childPieY - childRadius) //childPiechildRadius
-                .duration(1000);
-            chartAreaTagG
-                .append("line")
-                .transition()
-                .style("stroke", chartFormatOptions.pieofPie.pieOfPieLineColor)
-                .style("stroke-width", chartFormatOptions.pieofPie.pieOfPieLineWidth)
-                .style("stroke-dasharray", "3, 3")
-                .attr("opacity", 0.5)
-                .attr("x1", parentPieX + x) // x position of the first end of the line
-                .attr("y1", parentPieY + y) // y position of the first end of the line
-                .attr("x2", childPieX) // x position of the second end of the line
-                .attr("y2", childPieY + childRadius) //childPieRadius
-                .duration(1000);
-        }
-        catch (error) {
-            logError(fileName, "drawLines", error);
-        }
-    };
-    const initLegendList = () => {
-        try {
-            let seriesData = legendProperties.map((individualLegend) => {
-                return {
-                    legend: individualLegend.name,
-                    properties: individualLegend,
-                    data: [],
-                };
-            });
-            initLegendListWithTotalValueAllowance(chartFormatOptions, svg, seriesData, width, height, legendListWidth, chartTitleHeight, chartId, margins);
-        }
-        catch (error) {
-            logError(fileName, "initLegendList", error);
-        }
-    };
-    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 PieofPie;