pace-chart-lib 1.0.2 → 1.0.4

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

@@ -1,420 +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 { 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.ChartData); // 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;
-            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;
-        }
-        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 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.js

@@ -1,106 +0,0 @@
-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);
-    }
-};