pace-chart-lib 0.0.6 → 0.0.8

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

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

package/dist/components/Charts/ChartsWithoutAxis/PieFamily/TreemapChart.d.ts

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