pace-chart-lib 1.0.2 → 1.0.3

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

@@ -1,476 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Pending Task -> Custom Annotations on charts
-//#region imports
-import * as d3 from "d3";
-import { useEffect, useRef } from "react";
-import { fontStyleOptions, } from "../../Core/Common.types";
-import { calculateLegendsMaxPossibleWidth, convertStringToNumber, drawChartTitle, firstFunctionBeforeRender, generalizedChartData, getNumberWithFormatFunction, hideTooltipOnMouseOut, initChartArea, initLegendListWithTotalValueAllowance, initSvg, marginCalculationsForChartsWithoutAxis, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
-import { chartMargins } from "../../Core/DefaultProperties.types";
-import { connectorStyle } from "../ChartsWithoutAxisTypes.types";
-import { logError } from "../../../../Services/ErrorLog";
-//#endregion
-const fileName = "DonutChart.tsx";
-const DonutChart = ({ data, formatOptions, chartId, }) => {
-    const svgRef = useRef();
-    const seriesData = generalizedChartData(data.ChartData);
-    let chartFormatOptions;
-    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 maxLegendDimensions = [0, 0]; // to calculate margins [width, height]
-    let innerHeight; // Height of the chart excluding margins
-    let innerWidth; // Width of the chart excluding margins
-    let radius; // Radius of the pie chart
-    let innerRadius; // Inner radius of the pie chart
-    let legendListWidth; // Width of the legend list
-    let chartAreaTagG; // Group element for the chart area
-    let pieChartData; //Data output by d3.pie function
-    let pieTotalValue; // Required for % calculations also appeding total to svg
-    let outsideDataLabelFlag = false; // Flag to check if any data label is outside
-    let svg; // D3 selection of the SVG element
-    useEffect(() => {
-        drawChart();
-    }, [formatOptions]);
-    const drawChart = () => {
-        ({ chartFormatOptions, svg, width, height } = firstFunctionBeforeRender(svgRef, formatOptions));
-        loopOverSeriesData();
-        maxLegendDimensions = calculateLegendsMaxPossibleWidth(chartFormatOptions, seriesData);
-        ({ margins, innerHeight, innerWidth, legendListWidth, chartTitleHeight } =
-            marginCalculationsForChartsWithoutAxis(chartFormatOptions, width, height, maxLegendDimensions, margins));
-        defineChartRadius();
-        initSvg(svgRef, width, height, chartFormatOptions); // Initialize SVG with width, height and background color
-        chartAreaTagG = initChartArea(svg, margins);
-        drawChartTitle(svgRef, chartTitleHeight, width, chartFormatOptions);
-        initLegendListWithTotalValueAllowance(chartFormatOptions, svg, seriesData, width, height, legendListWidth, chartTitleHeight, chartId, margins, false);
-        initPieChartData();
-        drawDonutChart();
-        drawDonutDataLabels();
-        drawTotalValue();
-    };
-    const loopOverSeriesData = () => {
-        try {
-            pieTotalValue = 0;
-            seriesData.forEach((d) => {
-                d.properties.dataLabelPosition == "2"
-                    ? (outsideDataLabelFlag = true)
-                    : null;
-                pieTotalValue += d.data[0].value;
-            });
-        }
-        catch (error) {
-            logError(fileName, "loopOverSeriesData", error);
-        }
-    };
-    const defineChartRadius = () => {
-        try {
-            radius = Math.min(innerHeight * 0.4, innerWidth * 0.4);
-            outsideDataLabelFlag ? (radius = radius * 0.9) : null;
-            innerRadius = Math.min((convertStringToNumber(chartFormatOptions.plotArea.innerRadius) / 100) *
-                radius, radius);
-        }
-        catch (error) {
-            logError(fileName, "defineChartRadius", error);
-        }
-    };
-    const initPieChartData = () => {
-        try {
-            let rotationAngle = convertStringToNumber(chartFormatOptions.plotArea.rotation);
-            const pie = d3
-                ?.pie()
-                .value((d) => d.data[0].value)
-                .startAngle(((rotationAngle ?? 0) * (Math.PI / 180)) % 360)
-                .endAngle((((rotationAngle ?? 0) + 360) * (Math.PI / 180)) % 360);
-            let pieData = pie(seriesData);
-            pieChartData = 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, "initPieChartData", error);
-        }
-    };
-    const drawDonutChart = () => {
-        try {
-            const arc = d3
-                .arc()
-                .innerRadius(innerRadius) // Donut inner radius
-                .outerRadius(radius);
-            const arcOver = d3
-                .arc()
-                .innerRadius(innerRadius)
-                .outerRadius(radius + 10); // Slightly bigger on hover
-            chartAreaTagG
-                .append("g")
-                .attr("class", "parentGroup")
-                .attr("fill-opacity", chartFormatOptions.plotArea.opacity)
-                .attr("transform", `${getPiePosition()}`)
-                .selectAll("path")
-                .data(pieChartData)
-                .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 /
-                                pieTotalValue) * 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);
-            });
-        }
-        catch (error) {
-            logError(fileName, "drawDonutChart", error);
-        }
-    };
-    const getPiePosition = () => {
-        try {
-            return `translate(${innerWidth / 2},${innerHeight / 2})`;
-        }
-        catch (error) {
-            logError(fileName, "getPiePosition", error);
-            return "";
-        }
-    };
-    const getDataLabelTransformString = (d) => {
-        try {
-            const midAngle = (d.startAngle + d.endAngle) / 2;
-            // Adjust label radius (between innerRadius and outerRadius)
-            const labelRadius = (innerRadius + radius) / 2; // midpoint between inner and outer radius
-            const x = Math.cos(midAngle - Math.PI / 2) * labelRadius;
-            const y = Math.sin(midAngle - Math.PI / 2) * labelRadius;
-            // Optional rotation logic
-            let rotate = ((midAngle * 180) / Math.PI) % 360;
-            let angle = 0;
-            rotate > 180 && rotate < 360 ? (angle = 90) : (angle = -90);
-            rotate += angle;
-            return `translate(${x},${y}) rotate(${rotate})`;
-        }
-        catch (error) {
-            logError(fileName, "getDataLabelTransformString", error);
-            return "";
-        }
-    };
-    const drawDonutDataLabels = () => {
-        try {
-            if (chartFormatOptions.plotArea.dataLabels) {
-                // Code for inside data labels
-                chartAreaTagG
-                    .append("g")
-                    .attr("class", "parentGroup")
-                    .attr("transform", `${getPiePosition()}`)
-                    .attr("pointer-events", "none")
-                    .attr("text-anchor", "middle")
-                    .selectAll("text")
-                    .data(pieChartData.filter((d) => d.data.properties.dataLabelPosition == "1"))
-                    .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))
-                    .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", "parentGroup")
-                    .attr("transform", `${getPiePosition()}`)
-                    .attr("pointer-events", "none")
-                    .attr("text-anchor", "middle")
-                    .selectAll("text")
-                    .data(pieChartData.filter((d) => d.data.properties.dataLabelPosition == "1"))
-                    .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))
-                    .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 / pieTotalValue) * 100).toFixed(convertStringToNumber(chartFormatOptions.plotArea.dataLabelDecimalPrecision) ?? 0) + "%");
-                            }
-                            else {
-                                return getNumberWithFormatFunction(chartFormatOptions.plotArea.plotAreaDisplayUnits, chartFormatOptions.plotArea.dataLabelNumberFormat, chartFormatOptions.plotArea.dataLabelDecimalPrecision)(dataValue);
-                            }
-                        }
-                        return dataValue;
-                    }
-                })
-                    .append("tspan")
-                    .attr("x", 0)
-                    .attr("y", chartFormatOptions.plotArea.dataLabelValue
-                    ? chartFormatOptions.plotArea.dataLabelName
-                        ? "2.45em"
-                        : "0.1em"
-                    : null)
-                    .attr("font-weight", (d) => d.data.properties?.valueFontStyle?.includes(fontStyleOptions.bold)
-                    ? fontStyleOptions.bold
-                    : "300")
-                    .attr("fill-opacity", 0.5)
-                    .text((d) => {
-                    const dataValue = Math.abs(d.data.data[0].value);
-                    if (chartFormatOptions.plotArea.plotAreaAbsoluteValue &&
-                        dataValue !== undefined) {
-                        return d3.format(".2s")(dataValue);
-                    }
-                    return "";
-                });
-                // Code for outside data labels
-                let outerRadius = d3
-                    .arc()
-                    .startAngle((d) => d.x0)
-                    .endAngle((d) => d.x1)
-                    .innerRadius((d) => (d.depth > 1 ? d.y1 - 1 + radius / 7 : 0))
-                    .outerRadius((d) => (d.depth > 1 ? d.y1 - 1 + radius / 7 : 0));
-                let innerRadius = d3
-                    .arc()
-                    .startAngle((d) => d.x0)
-                    .endAngle((d) => d.x1)
-                    .innerRadius((d) => (d.depth > 2 ? d.y0 : 0))
-                    .outerRadius((d) => d.y1 + radius / 1.5);
-                chartAreaTagG
-                    .selectAll("polyline")
-                    .data(pieChartData.filter((d) => d.data.properties.dataLabelPosition == "2"))
-                    .join("polyline")
-                    .attr("transform", getPiePosition())
-                    .style("stroke", (d) => chartFormatOptions.connector.connectorColorOption == "Uniform"
-                    ? chartFormatOptions.connector.connectorUniformLineColor
-                    : d.data.properties.color)
-                    .style("fill", "none")
-                    .style("stroke-dasharray", chartFormatOptions.connector.connectorStyle === connectorStyle.solid
-                    ? 0
-                    : chartFormatOptions.connector.connectorStyle ===
-                        connectorStyle.dotted
-                        ? 1
-                        : 4)
-                    .style("stroke-width", chartFormatOptions.connector.connectorLineThickness)
-                    .attr("points", (d) => {
-                    const posA = innerRadius.centroid(d);
-                    const posB = outerRadius.centroid(d);
-                    let midangle = d.x0 + (d.x1 - d.x0) / 2;
-                    midangle = midangle % (2 * Math.PI);
-                    const xC = radius * 1.1 * (midangle < Math.PI ? 1 : -1);
-                    const yC = posB[1];
-                    return [posA, posB, [xC, yC]]
-                        .map((point) => point.join(",")) // convert to "x,y"
-                        .join(" "); // join as "x1,y1 x2,y2 x3,y3"
-                });
-                chartAreaTagG
-                    .append("g")
-                    .attr("transform", getPiePosition())
-                    .selectAll("foreignObject")
-                    .data(pieChartData.filter((d) => d.data.properties.dataLabelPosition == "2"))
-                    .join("foreignObject")
-                    .attr("width", 80)
-                    .attr("height", 60)
-                    .attr("x", (d) => {
-                    let midangle = d.x0 + (d.x1 - d.x0) / 2;
-                    midangle = midangle % (2 * Math.PI);
-                    const textWidth = 80;
-                    const xOffset = midangle < Math.PI ? 0 : -textWidth;
-                    return radius * 1.1 * (midangle < Math.PI ? 1 : -1) + xOffset;
-                })
-                    .attr("y", (d) => outerRadius.centroid(d)[1] - 30)
-                    .append("xhtml:div")
-                    .attr("hoverId", (d) => d.data.legend.replace(/ /g, "-"))
-                    .style("display", "flex")
-                    .style("flex-direction", "column")
-                    .style("justify-content", "center")
-                    .style("align-items", "center")
-                    .style("height", "60px")
-                    .html((d) => {
-                    try {
-                        let value = d.data.data[0].value.toString();
-                        if (d.data.data[0].value !== undefined) {
-                            value =
-                                chartFormatOptions.plotArea.dataLabelNumberFormat === ",.0%"
-                                    ? (Math.abs(d.data.data[0].value / pieTotalValue) * 100).toFixed(convertStringToNumber(chartFormatOptions.plotArea.dataLabelDecimalPrecision)) + "%"
-                                    : getNumberWithFormatFunction(chartFormatOptions.plotArea.plotAreaDisplayUnits, chartFormatOptions.plotArea.dataLabelNumberFormat, chartFormatOptions.plotArea.dataLabelDecimalPrecision)(d.data.data[0].value);
-                        }
-                        let htmlString = "";
-                        if (chartFormatOptions.plotArea.dataLabelName) {
-                            htmlString += `<span style="
-          font-size: ${d.data.properties.labelFontSize}px;
-          color: ${d.data.properties.labelFontColor};
-          font-style: ${d.data.properties.labelFontStyle.includes(fontStyleOptions.italic)
-                                ? fontStyleOptions.italic
-                                : ""};
-          text-decoration: ${d.data.properties.labelFontStyle.includes(fontStyleOptions.underline)
-                                ? fontStyleOptions.underline
-                                : ""};
-          font-weight: ${d.data.properties.labelFontStyle.includes(fontStyleOptions.bold)
-                                ? fontStyleOptions.bold
-                                : ""};
-          font-family: ${d.data.properties.labelFont};
-          display: block; white-space: nowrap; width:80px; overflow:hidden; text-overflow:ellipsis; text-align: center;">
-          ${d.data.legend}
-        </span>`;
-                        }
-                        if (chartFormatOptions.plotArea.dataLabelValue &&
-                            d.data.data[0].value !== undefined) {
-                            htmlString += `<span style="
-          font-size: ${d.data.properties.valueFontSize}px;
-          color: ${d.data.properties.valueFontColor};
-          font-style: ${d.data.properties.valueFontStyle.includes(fontStyleOptions.italic)
-                                ? fontStyleOptions.italic
-                                : ""};
-          text-decoration: ${d.data.properties.valueFontStyle.includes(fontStyleOptions.underline)
-                                ? fontStyleOptions.underline
-                                : ""};
-          font-weight: ${d.data.properties.valueFontStyle.includes(fontStyleOptions.bold)
-                                ? fontStyleOptions.bold
-                                : "300"};
-          font-family: ${d.data.properties.valueFont};
-          display: block;">
-          ${value}
-        </span>`;
-                        }
-                        if (chartFormatOptions.plotArea.plotAreaAbsoluteValue &&
-                            d.data[0].value !== undefined) {
-                            htmlString += `<span style="
-          font-size: ${d.data.properties.valueFontSize}px;
-          color: ${d.data.properties.valueFontColor};
-          font-style: ${d.data.properties.valueFontStyle.includes(fontStyleOptions.italic)
-                                ? fontStyleOptions.italic
-                                : ""};
-          text-decoration: ${d.data.properties.valueFontStyle.includes(fontStyleOptions.underline)
-                                ? fontStyleOptions.underline
-                                : ""};
-          font-weight: ${d.data.properties.valueFontStyle.includes(fontStyleOptions.bold)
-                                ? fontStyleOptions.bold
-                                : "300"};
-          font-family: ${d.data.properties.valueFont};
-          display: block;">
-          ${d3.format(".2s")(d.data[0].value)}
-        </span>`;
-                        }
-                        return htmlString;
-                    }
-                    catch (error) {
-                        logError(fileName, "drawDonutDataLabels", error);
-                        return "";
-                    }
-                });
-            }
-        }
-        catch (error) {
-            logError(fileName, "drawDonutDataLabels", error);
-        }
-    };
-    const drawTotalValue = () => {
-        try {
-            if (chartFormatOptions.total &&
-                chartFormatOptions.total.totalVisibility) {
-                let total = pieTotalValue;
-                let fontStyle = chartFormatOptions.total.totalFontStyle;
-                chartAreaTagG
-                    .append("g")
-                    .attr("transform", getPiePosition())
-                    .attr("pointer-events", "none")
-                    .attr("text-anchor", "middle")
-                    .append("text")
-                    .style("fill", chartFormatOptions.total.totalColor !== "#ffffff"
-                    ? chartFormatOptions.total.totalColor
-                    : "none")
-                    .style("font-family", chartFormatOptions.total.totalFontFamily)
-                    .style("font-size", chartFormatOptions.total.totalFontSize)
-                    .style("font-style", fontStyle.includes(fontStyleOptions.italic)
-                    ? fontStyleOptions.italic
-                    : "")
-                    .style("text-decoration", fontStyle.includes(fontStyleOptions.underline)
-                    ? fontStyleOptions.underline
-                    : "")
-                    .style("font-weight", fontStyle.includes(fontStyleOptions.bold)
-                    ? fontStyleOptions.bold
-                    : "")
-                    .attr("text-anchor", "middle")
-                    .attr("visibility", chartFormatOptions.plotArea.dataLabelValue ? "visible" : "hidden")
-                    .text(chartFormatOptions.total.editTotalText)
-                    .append("tspan")
-                    .attr("x", 0)
-                    .attr("y", "1.3em")
-                    .attr("font-weight", fontStyle.includes(fontStyleOptions.bold)
-                    ? fontStyleOptions.bold
-                    : 300)
-                    //  .attr("fill-opacity", 0.5)
-                    .text(chartFormatOptions.total.totalNumberFormat === ",.0%" ||
-                    chartFormatOptions.total.totalNumberFormat === "Percentage"
-                    ? "100%"
-                    : getNumberWithFormatFunction(chartFormatOptions.total.totalDisplayUnits, chartFormatOptions.total.totalNumberFormat, chartFormatOptions.total.totalDecimalPrecision)(total));
-            }
-        }
-        catch (error) {
-            logError(fileName, "drawTotalValue", error);
-        }
-    };
-    // return (
-    //   <div style={{ width: "100%", height: "100%" }}>
-    //     <svg
-    //       className="chartSVG"
-    //       style={{ width: "100%", height: "100%" }}
-    //       ref={svgRef}
-    //     ></svg>
-    //   </div>
-    // );
-    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 DonutChart;