pace-chart-lib 0.0.7 → 0.0.8

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

@@ -0,0 +1,420 @@
+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 { drawTotalValue } from "./PieFamilyCommonFunctions";
+import { logError } from "../../../../Services/ErrorLog";
+//#endregion
+const fileName = "PieChart.tsx";
+const PieChart = ({ data, formatOptions, chartId }) => {
+    const svgRef = useRef(); // Reference to the SVG element
+    const seriesData = generalizedChartData(data); // Data for the pie chart, expected to be in TSeries format
+    let chartFormatOptions; // Format options for the chart.
+    let height; // svg total height
+    let width; // 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 chartAreaTagG; // Group element for the chart area
+    let svg; // D3 selection of the SVG element
+    let pieChartData; //Data output by d3.pie function
+    let pieTotalValue; // Required for % calculations also appeding total to svg
+    let legendListWidth; // Width of the legend list
+    let outsideDataLabelFlag = false; // Flag to check if any data label is outside
+    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);
+        initPieChartData();
+        drawPieChart();
+        drawPieDataLabels();
+        drawTotalValue(chartFormatOptions, pieTotalValue, chartTitleHeight, svg, width, height);
+    };
+    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;
+        }
+        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 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", `${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. ", (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);
+                hideTooltipOnMouseOut();
+            });
+        }
+        catch (error) {
+            logError(fileName, "drawPieChart", 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;
+            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) % 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 drawPieDataLabels = () => {
+        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) => {
+                    let value = d.data.data[0].value.toString();
+                    if (d.data.data[0].value !== undefined) {
+                        value =
+                            chartFormatOptions.plotArea.dataLabelNumberFormat === ",.0%"
+                                ? (Math.abs(d.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, "drawPieDataLabels", 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 PieChart;

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

@@ -0,0 +1,10 @@
+/**
+ * Calculates the coordinates for displaying the total value in the chart.
+ * @param chartFormatOptions - The formatting options for the chart.
+ * @param totalValue - The total value to be displayed.
+ * @param chartTitleHeight - The height of the chart title.
+ * @param chartAreaTagG - The SVG group element for the chart area.
+ * @param innerWidth - The inner width of the chart area.
+ * @param innerHeight - The inner height of the chart area.
+ */
+export declare const drawTotalValue: (chartFormatOptions: any, totalValue: any, chartTitleHeight: any, chartAreaTagG: any, innerWidth: any, innerHeight: any) => void;

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

@@ -0,0 +1,106 @@
+import { logError } from "../../../../Services/ErrorLog";
+import { fontStyleOptions, staticTotalAlignment, staticTotalPosition } from "../../Core/Common.types";
+import { getNumberWithFormatFunction } from "../../Core/CommonFunctions";
+// import { getNumberWithFormatFunction } from "../../Core/CommonFunctions";
+const fileName = 'PieFamilyCommonFunctions.ts';
+/**
+ * Calculates the coordinates for displaying the total value in a chart.
+ * @param chartFormatOptions - The formatting options for the chart.
+ * @param chartTitleHeight - The height of the chart title.
+ * @param innerWidth - The inner width of the chart area.
+ * @param innerHeight - The inner height of the chart area.
+ * @returns
+ */
+const getTotalValueCords = (chartFormatOptions, chartTitleHeight, innerWidth, innerHeight) => {
+    try {
+        let position = chartFormatOptions.total.totalPosition;
+        let alignment = chartFormatOptions.total.totalAlignment;
+        let legendsPosition = chartFormatOptions.legends.legendPosition;
+        let legendsPositionConstant = 0;
+        switch (position) {
+            case staticTotalPosition.top:
+                legendsPositionConstant = legendsPosition == "Top" ? 35 : 0;
+                switch (alignment) {
+                    case staticTotalAlignment.start:
+                        return { x: 5, y: chartTitleHeight + legendsPositionConstant + 10 };
+                    case staticTotalAlignment.middle:
+                        return {
+                            x: innerWidth / 2,
+                            y: chartTitleHeight + legendsPositionConstant + 10,
+                        };
+                    case staticTotalAlignment.end:
+                        return {
+                            x: innerWidth - 20,
+                            y: chartTitleHeight + legendsPositionConstant + 10,
+                        };
+                }
+                break;
+            case staticTotalPosition.bottom:
+                legendsPositionConstant = legendsPosition == "Bottom" ? 30 : 0;
+                switch (alignment) {
+                    case staticTotalAlignment.start:
+                        return { x: 10, y: innerHeight - legendsPositionConstant - 10 };
+                    case staticTotalAlignment.middle:
+                        return {
+                            x: innerWidth / 2,
+                            y: innerHeight - legendsPositionConstant - 10,
+                        };
+                    case staticTotalAlignment.end:
+                        return {
+                            x: innerWidth - 20,
+                            y: innerHeight - legendsPositionConstant - 10,
+                        };
+                }
+                break;
+        }
+    }
+    catch (error) {
+        logError(fileName, 'getTotalValueCords', error);
+    }
+};
+/**
+ * Calculates the coordinates for displaying the total value in the chart.
+ * @param chartFormatOptions - The formatting options for the chart.
+ * @param totalValue - The total value to be displayed.
+ * @param chartTitleHeight - The height of the chart title.
+ * @param chartAreaTagG - The SVG group element for the chart area.
+ * @param innerWidth - The inner width of the chart area.
+ * @param innerHeight - The inner height of the chart area.
+ */
+export const drawTotalValue = (chartFormatOptions, totalValue, chartTitleHeight, chartAreaTagG, innerWidth, innerHeight) => {
+    try {
+        if (chartFormatOptions.total && chartFormatOptions.total.totalVisibility) {
+            let fontStyle = chartFormatOptions.total.totalFontStyle;
+            let alignment = chartFormatOptions.total.totalAlignment;
+            let formatedTotalValue = chartFormatOptions.total.totalNumberFormat === ",.0%" ||
+                chartFormatOptions.total.totalNumberFormat === "Percentage"
+                ? "100%"
+                : getNumberWithFormatFunction(chartFormatOptions.total.totalDisplayUnits, chartFormatOptions.total.totalNumberFormat, chartFormatOptions.total.totalDecimalPrecision)(totalValue);
+            let cords = getTotalValueCords(chartFormatOptions, chartTitleHeight, innerWidth, innerHeight);
+            chartAreaTagG
+                .append("g")
+                .attr("transform", `translate(${cords.x}, ${cords.y})`)
+                .style("user-select", "none")
+                .append("text")
+                .text(`Total : ${formatedTotalValue}`)
+                .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", alignment === staticTotalAlignment.start
+                ? "start"
+                : alignment === staticTotalAlignment.middle
+                    ? "middle"
+                    : alignment === staticTotalAlignment.end
+                        ? "end"
+                        : "");
+        }
+    }
+    catch (error) {
+        logError(fileName, 'drawTotalValue', error);
+    }
+};

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

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