pace-chart-lib 0.0.6 → 0.0.8

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

@@ -0,0 +1,476 @@
+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);
+    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;
+            data.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(data);
+            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;

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

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