pace-chart-lib 1.0.2 → 1.0.4

package/dist/components/Charts/ChartsWithoutAxis/OtherCharts/ProgressChart.js

@@ -1,212 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import { fontStyleOptions, } from "../../Core/Common.types";
-import { chartMargins } from "../../Core/DefaultProperties.types";
-import * as d3 from "d3";
-import { calculateLegendsMaxPossibleWidth, convertStringToNumber, drawChartTitle, firstFunctionBeforeRender, generalizedChartData, getNumberWithFormatFunction, hideTooltipOnMouseOut, initChartArea, initLegendListWithTotalValueAllowance, initSvg, marginCalculationsForChartsWithoutAxis, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
-import { drawTotalValue } from "../PieFamily/PieFamilyCommonFunctions";
-import { logError } from "../../../../Services/ErrorLog";
-const fileName = "ProgressChart.tsx";
-const ProgressChart = ({ data, formatOptions, chartId, }) => {
-    const svgRef = useRef(); // Reference to the SVG element
-    let seriesData = generalizedChartData(data.ChartData); // Data for the chart
-    let chartFormatOptions; // Chart format options
-    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 totalValue; // Total value of the progress chart
-    let chartAreaTagG; // Group element for the chart area
-    let svg; // D3 selection of the SVG element
-    let legendListWidth; // Width of the legend list
-    let radius; // Radius of the pie chart
-    let innerRadius; // Inner radius of the pie chart
-    useEffect(() => {
-        drawChart();
-    }, [formatOptions]);
-    const drawChart = () => {
-        // Skipped try-catch as per instruction
-        ({ chartFormatOptions, svg, width, height } = firstFunctionBeforeRender(svgRef, formatOptions));
-        maxLegendDimensions = calculateLegendsMaxPossibleWidth(chartFormatOptions, seriesData);
-        ({ margins, innerHeight, innerWidth, legendListWidth, chartTitleHeight } =
-            marginCalculationsForChartsWithoutAxis(chartFormatOptions, width, height, maxLegendDimensions, margins));
-        setRadiusAndInnerRadius();
-        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);
-        initProgressChartData();
-        drawProgressChart();
-        drawTotalValue(chartFormatOptions, totalValue, chartTitleHeight, svg, width, height);
-    };
-    const setRadiusAndInnerRadius = () => {
-        try {
-            radius = Math.min(innerHeight * 0.45, innerWidth * 0.45);
-            innerRadius = Math.min((convertStringToNumber(chartFormatOptions.plotArea.innerRadius) / 100) *
-                radius, radius);
-        }
-        catch (error) {
-            logError(fileName, "setRadiusAndInnerRadius", error);
-        }
-    };
-    const initProgressChartData = () => {
-        try {
-            seriesData = seriesData.sort((a, b) => b.data[0].value - a.data[0].value); // Sort data by value in descending order this will allow me to draw arcs in correct order
-            totalValue = data[0].data[0].value + data[1].data[0].value;
-        }
-        catch (error) {
-            logError(fileName, "initProgressChartData", error);
-        }
-    };
-    const drawProgressChart = () => {
-        try {
-            let maxValue = data[0].data[0].value;
-            let progressValue = data[1].data[0].value;
-            let completeAngle = Math.PI * 2; // 360 degrees in radians
-            let progressAngle = (progressValue / maxValue) * Math.PI * 2;
-            let valuefontStyle = chartFormatOptions.plotArea.dataLabelValueFontStyle;
-            const arc = d3
-                .arc()
-                .innerRadius(innerRadius)
-                .outerRadius(radius)
-                .startAngle(0)
-                .cornerRadius(convertStringToNumber(chartFormatOptions.plotArea.cornerRadius));
-            // Create a complete arc
-            chartAreaTagG
-                .append("path")
-                .attr("class", "secondary-circle")
-                .attr("fill", data[0].properties.color)
-                .attr("fill-opacity", chartFormatOptions.plotArea.opacityforProgressScale)
-                .attr("d", arc({ endAngle: completeAngle }))
-                .on("mousemove", (d) => {
-                try {
-                    showTooltipOnMouseMove([
-                        {
-                            key: data[0].properties.alias,
-                            value: chartFormatOptions.toolTip.toolTipNumberFormatProgress ==
-                                ",.0%"
-                                ? "100 %"
-                                : getNumberWithFormatFunction("None", chartFormatOptions.toolTip
-                                    .toolTipNumberFormatProgress, chartFormatOptions.toolTip.toolTipDecimalPrecision)(maxValue),
-                        },
-                    ], chartFormatOptions);
-                }
-                catch (error) {
-                    logError(fileName, "drawProgressChart.onMouseMove.secondary-circle", error);
-                }
-            })
-                .on("mouseout", () => {
-                try {
-                    hideTooltipOnMouseOut();
-                }
-                catch (error) {
-                    logError(fileName, "drawProgressChart.onMouseOut.secondary-circle", error);
-                }
-            })
-                .attr("transform", getTransformString());
-            // Create the progress arc
-            chartAreaTagG
-                .append("path")
-                .attr("class", "progress-circle")
-                .attr("fill", data[1].properties.color)
-                .attr("fill-opacity", chartFormatOptions.plotArea.opacityforProgressGoal)
-                .attr("d", arc({ endAngle: progressAngle }))
-                .on("mousemove", (d) => {
-                try {
-                    showTooltipOnMouseMove([
-                        {
-                            key: data[1].properties.alias,
-                            value: chartFormatOptions.toolTip.toolTipNumberFormatProgress ==
-                                ",.0%"
-                                ? Math.round((progressValue / maxValue) * 100) + "%"
-                                : getNumberWithFormatFunction("None", chartFormatOptions.toolTip.toolTipDecimalPrecision, chartFormatOptions.toolTip.toolTipNumberFormatProgress)(maxValue),
-                        },
-                        {
-                            key: data[0].properties.alias,
-                            value: chartFormatOptions.toolTip.toolTipNumberFormatProgress ==
-                                ",.0%"
-                                ? "100 %"
-                                : getNumberWithFormatFunction("None", chartFormatOptions.toolTip.toolTipDecimalPrecision, chartFormatOptions.toolTip.toolTipNumberFormatProgress)(progressValue),
-                        },
-                    ], chartFormatOptions);
-                }
-                catch (error) {
-                    logError(fileName, "drawProgressChart.onMouseMove.progress-circle", error);
-                }
-            })
-                .on("mouseout", () => {
-                try {
-                    hideTooltipOnMouseOut();
-                }
-                catch (error) {
-                    logError(fileName, "drawProgressChart.onMouseOut.progress-circle", error);
-                }
-            })
-                .attr("transform", "translate(" + innerWidth / 2 + "," + innerHeight / 2 + ")")
-                .transition()
-                .duration(1000)
-                .attrTween("d", function (d) {
-                try {
-                    const interpolate = d3.interpolate(0, progressAngle);
-                    return function (t) {
-                        try {
-                            return arc({ endAngle: interpolate(t) });
-                        }
-                        catch (error) {
-                            logError(fileName, "drawProgressChart.attrTween.inner", error);
-                            return "";
-                        }
-                    };
-                }
-                catch (error) {
-                    logError(fileName, "drawProgressChart.attrTween", error);
-                    return () => "";
-                }
-            });
-            // Add text to display progress value
-            chartAreaTagG
-                .append("text")
-                .attr("transform", getTransformString())
-                .attr("dy", "0.35em")
-                .attr("text-anchor", "middle")
-                .attr("visibility", chartFormatOptions.plotArea.dataLabels ? "visible" : "hidden")
-                .attr("fill", chartFormatOptions.plotArea.dataLabelValueColor !== "#ffffff"
-                ? chartFormatOptions.plotArea.dataLabelValueColor
-                : "none")
-                .attr("font-style", valuefontStyle.includes(fontStyleOptions.italic)
-                ? fontStyleOptions.italic
-                : "")
-                .attr("text-decoration", valuefontStyle.includes(fontStyleOptions.underline)
-                ? fontStyleOptions.underline
-                : "")
-                .attr("font-weight", valuefontStyle.includes(fontStyleOptions.bold)
-                ? fontStyleOptions.bold
-                : "")
-                .attr("font-family", chartFormatOptions.plotArea.dataLabelValueFontFamily)
-                .attr("font-size", chartFormatOptions.plotArea.dataLabelValueFontSize)
-                .text(() => {
-                return chartFormatOptions.plotArea.dataLabelNumberFormatProgress ==
-                    ",.0%"
-                    ? Math.round((progressValue / maxValue) * 100) + "%"
-                    : getNumberWithFormatFunction(chartFormatOptions.plotArea.dataLabelDecimalPrecision, chartFormatOptions.plotArea.dataLabelNumberFormatProgress, chartFormatOptions.plotArea.plotAreaDisplayUnits)(progressValue);
-            });
-        }
-        catch (error) {
-            logError(fileName, "drawProgressChart", error);
-        }
-    };
-    const getTransformString = () => {
-        try {
-            return "translate(" + innerWidth / 2 + "," + innerHeight / 2 + ")";
-        }
-        catch (error) {
-            logError(fileName, "getTransformString", error);
-            return "";
-        }
-    };
-    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 ProgressChart;

package/dist/components/Charts/ChartsWithoutAxis/OtherCharts/PyramidChart.js

@@ -1,401 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as d3 from "d3";
-import * as d3Annotation from "d3-svg-annotation";
-import { useEffect, useRef } from "react";
-import { AnnotationTypeMap, ConnectedStyle, ConnecterCurve, dataLabelPositionType, fontStyleOptions, staticDataLabelPositions, } from "../../Core/Common.types";
-import { calculateLegendsMaxPossibleWidth, convertStringToNumber, drawChartTitle, firstFunctionBeforeRender, generalizedChartData, getNumberWithFormatFunction, hideTooltipOnMouseOut, initLegendListWithTotalValueAllowance, initSvg, marginCalculationsForChartsWithoutAxis, showTooltipOnMouseMove, } from "../../Core/CommonFunctions";
-import { chartMargins } from "../../Core/DefaultProperties.types";
-import { logError } from "../../../../Services/ErrorLog";
-const fileName = "PyramidChart.tsx";
-const PyramidChart = ({ data, formatOptions, chartId, }) => {
-    const svgRef = useRef();
-    let seriesData = generalizedChartData(data.ChartData);
-    let chartFormatOptions;
-    let svg;
-    let width;
-    let height;
-    let chartTitleHeight = 40;
-    let margins = chartMargins;
-    let maxLegendDimensions = [0, 0];
-    let innerHeight;
-    let innerWidth;
-    let pyramidSide;
-    let pyramidHeight;
-    let stackHeightArray = [0];
-    let chartAreaTagG;
-    let pyramidTotalValue;
-    let legendListWidth;
-    let annotationsList;
-    useEffect(() => {
-        drawChart();
-    }, [formatOptions]);
-    const drawChart = () => {
-        ({ chartFormatOptions, svg, width, height } = firstFunctionBeforeRender(svgRef, formatOptions));
-        maxLegendDimensions = calculateLegendsMaxPossibleWidth(chartFormatOptions, seriesData);
-        ({ margins, innerHeight, innerWidth, legendListWidth, chartTitleHeight } =
-            marginCalculationsForChartsWithoutAxis(chartFormatOptions, width, height, maxLegendDimensions, margins));
-        initPyramidSideCalculations();
-        initSvg(svgRef, width, height, chartFormatOptions);
-        chartAreaTagG = initChartArea();
-        drawChartTitle(svgRef, chartTitleHeight, width, chartFormatOptions);
-        initLegendListWithTotalValueAllowance(chartFormatOptions, svg, seriesData, width, height, legendListWidth, chartTitleHeight, chartId, margins, false);
-        initPyramidData();
-        drawPyramidChart();
-        prepareNewAnnotationsList();
-        pyramidAnnotations([]);
-    };
-    const initPyramidSideCalculations = () => {
-        try {
-            pyramidSide = Math.min(innerHeight, innerWidth);
-            pyramidHeight = 0.866 * pyramidSide;
-        }
-        catch (error) {
-            logError(fileName, "initPyramidSideCalculations", error);
-        }
-    };
-    const initChartArea = () => {
-        try {
-            return svg
-                .append("g")
-                .attr("transform", `translate(${margins.left},${margins.top + (innerHeight - pyramidHeight) / 2})`);
-        }
-        catch (error) {
-            logError(fileName, "initChartArea", error);
-            return null;
-        }
-    };
-    const initPyramidData = () => {
-        try {
-            seriesData = seriesData.sort((a, b) => {
-                const firstValue = a.data[0].value;
-                const secondValue = b.data[0].value;
-                return !chartFormatOptions.plotArea.flipPyramid
-                    ? firstValue - secondValue
-                    : secondValue - firstValue;
-            });
-            pyramidTotalValue = d3.sum(seriesData, (d) => Math.abs(d.data[0].value));
-            stackHeightArray = [0];
-            seriesData.forEach((d, i) => {
-                const height = (Math.abs(d.data[0].value) / pyramidTotalValue) * pyramidHeight;
-                stackHeightArray.push(stackHeightArray[i] + height);
-            });
-        }
-        catch (error) {
-            logError(fileName, "initPyramidData", error);
-        }
-    };
-    const drawPyramidChart = () => {
-        try {
-            seriesData.forEach((d, i) => {
-                try {
-                    const yTop = stackHeightArray[i];
-                    const yBottom = stackHeightArray[i + 1];
-                    let inversionConstant = chartFormatOptions.plotArea.flipPyramid
-                        ? 1
-                        : 0;
-                    const topWidth = pyramidSide *
-                        (inversionConstant - stackHeightArray[i] / pyramidHeight);
-                    const bottomWidth = pyramidSide *
-                        (inversionConstant - stackHeightArray[i + 1] / pyramidHeight);
-                    const centerX = innerWidth / 2;
-                    const pyramidContainer = chartAreaTagG
-                        .append("g")
-                        .attr("id", "PyramidChart")
-                        .attr("class", "parentGroup");
-                    pyramidContainer
-                        .append("polygon")
-                        .attr("class", "segment")
-                        .attr("hoverId", d.legend)
-                        .attr("points", `
-                ${centerX - topWidth / 2},${yTop}
-                ${centerX + topWidth / 2},${yTop}
-                ${centerX + bottomWidth / 2},${yBottom}
-                ${centerX - bottomWidth / 2},${yBottom}
-              `)
-                        .attr("fill", d.properties.color || "#4cb2ff")
-                        .on("mousemove", function () {
-                        try {
-                            showTooltipOnMouseMove([
-                                {
-                                    key: d.legend,
-                                    value: chartFormatOptions.toolTip.toolTipNumberFormat == ",.0%"
-                                        ? d.data[0].value
-                                            ? (Math.abs(d.data[0].value / pyramidTotalValue) *
-                                                100).toFixed(convertStringToNumber(chartFormatOptions.toolTip
-                                                .toolTipDecimalPrecision)) + "%"
-                                            : ""
-                                        : getNumberWithFormatFunction("None", chartFormatOptions.toolTip.toolTipNumberFormat, chartFormatOptions.toolTip.toolTipDecimalPrecision)(d.data[0].value),
-                                },
-                            ], chartFormatOptions);
-                            d3.select(this)
-                                .style("opacity", 0.8)
-                                .style("stroke", chartFormatOptions.chartArea.chartAreaColor)
-                                .style("stroke-width", "3px");
-                        }
-                        catch (error) {
-                            logError(fileName, "drawPyramidChart.onMouseMove", error);
-                        }
-                    })
-                        .on("mouseout", function () {
-                        try {
-                            hideTooltipOnMouseOut();
-                            d3.select(this)
-                                .style("opacity", 1)
-                                .style("stroke", "unset")
-                                .style("stroke-width", "unset");
-                        }
-                        catch (error) {
-                            logError(fileName, "drawPyramidChart.onMouseOut", error);
-                        }
-                    });
-                }
-                catch (error) {
-                    logError(fileName, "drawPyramidChart.forEach", error);
-                }
-            });
-        }
-        catch (error) {
-            logError(fileName, "drawPyramidChart", error);
-        }
-    };
-    // Already has try/catch, just add logError in catch
-    const pyramidAnnotations = (oldAnnotationList) => {
-        try {
-            const self = this;
-            let AnnotationType = chartFormatOptions.annotation.annotationType ?? "1";
-            if (chartFormatOptions.annotation.annotationVisibility) {
-                let Disable = [AnnotationType == "1" ? "connector" : ""];
-                let makeAnnotations = d3Annotation.annotation();
-                let ConnectorType = chartFormatOptions.annotation.connectorType
-                    ? chartFormatOptions.annotation.connectorType.toLowerCase()
-                    : "None";
-                let AnnotationsList = annotationsList;
-                let finalAnnotationList = annotationsList;
-                makeAnnotations
-                    .editMode(chartFormatOptions.annotation.annotationDraggable)
-                    .accessors({
-                    x: function () {
-                        return innerWidth * 0.5;
-                    },
-                    y: function (d, i) {
-                        return d.y;
-                    },
-                })
-                    .on("dragend", function (annotation) {
-                    try {
-                        annotations
-                            .selectAll(".connector")
-                            .attr("hoverId", (d) => d.data.legend)
-                            .style("stroke", chartFormatOptions.annotation.connectorColor || "#ccc")
-                            .attr("stroke-dasharray", ConnectedStyle[chartFormatOptions.annotation.connectorStyle]);
-                        annotations
-                            .selectAll(`.connector-${ConnectorType}`)
-                            .attr("fill", chartFormatOptions.annotation.connectorColor || "#ccc")
-                            .style("stroke", chartFormatOptions.annotation.connectorColor || "#ccc");
-                        annotations
-                            .selectAll(".note-line")
-                            .attr("hoverId", (d) => d.data.currentLegend)
-                            .style("stroke", chartFormatOptions.annotation.connectorColor || "#ccc")
-                            .attr("stroke-dasharray", ConnectedStyle[chartFormatOptions.annotation.connectorStyle])
-                            .filter((d) => d._dx == 0 && d._dy == 0)
-                            .remove();
-                        annotations
-                            .selectAll(".annotation-note-label")
-                            .filter((d) => d.data && d.data.isVisible)
-                            .style("display", "block");
-                        annotations
-                            .selectAll(".annotation-note-title")
-                            .filter((d) => d.data && d.data.isVisible)
-                            .style("display", "block");
-                    }
-                    catch (error) {
-                        logError(fileName, "pyramidAnnotations.onDragEnd", error);
-                    }
-                })
-                    .notePadding(0)
-                    .annotations(finalAnnotationList);
-                let annotations = chartAreaTagG
-                    .append("g")
-                    .attr("class", "annotation-group parentGroup")
-                    .call(makeAnnotations);
-                annotations.selectAll("rect").style("visibility", "hidden");
-                annotations.selectAll(".annotation-subject").remove();
-                annotations
-                    .selectAll(".connector")
-                    .style("stroke", chartFormatOptions.annotation.connectorColor || "#ccc")
-                    .attr("stroke-dasharray", ConnectedStyle[chartFormatOptions.annotation.connectorStyle]);
-                annotations
-                    .selectAll(`.connector-${ConnectorType}`)
-                    .attr("fill", chartFormatOptions.annotation.connectorColor || "#ccc")
-                    .style("stroke", chartFormatOptions.annotation.connectorColor || "#ccc");
-                annotations
-                    .selectAll(".note-line")
-                    .style("stroke", chartFormatOptions.annotation.connectorColor || "#ccc")
-                    .attr("stroke-dasharray", ConnectedStyle[chartFormatOptions.annotation.connectorStyle])
-                    .filter((d) => d._dx == 0 && d._dy == 0)
-                    .remove();
-                annotations
-                    .selectAll(".connector-end")
-                    .filter((d) => d.connector.end == "dot" && d._dx == 0 && d._dy == 0)
-                    .remove();
-                annotations
-                    .selectAll(".annotation-note-label")
-                    .filter((d) => d.data && !d.data.isVisible)
-                    .style("display", "none");
-                annotations
-                    .selectAll(".annotation-note-title")
-                    .filter((d) => d.data && !d.data.isVisible)
-                    .style("display", "none");
-                chartFormatOptions.annotation.annotationType ==
-                    dataLabelPositionType.automatic &&
-                    annotations
-                        .selectAll(".annotation-note-content")
-                        .attr("transform", function () {
-                        const transform = d3.select(this).attr("transform");
-                        const translateValues = transform.match(/translate\(([^,]+),([^,]+)\)/);
-                        if (translateValues) {
-                            const currentX = parseFloat(translateValues[1]);
-                            return `translate(${currentX}, 0)`;
-                        }
-                    });
-                annotations
-                    .selectAll(".annotation-note-label")
-                    .attr("y", "15")
-                    .attr("text-anchor", "middle");
-                annotations
-                    .selectAll(".annotation-note-title")
-                    .attr("text-anchor", "middle");
-                annotations
-                    .selectAll(".annotation-note-content")
-                    .attr("transform", `translate(0,-28)`);
-                !chartFormatOptions.plotArea.dataLabelName &&
-                    annotations.selectAll("tspan").attr("dy", "0");
-                chartFormatOptions.plotArea.dataLabelName &&
-                    annotations
-                        .selectAll(".annotation-note-title")
-                        .attr("hoverId", (d) => d.data.legend)
-                        .style("font-size", (d) => d.data.labelFontSize)
-                        .attr("font-family", (d) => d.data.labelFontFamily)
-                        .style("font-style", (d) => d.data.labelFontStyle.includes(fontStyleOptions.italic)
-                        ? fontStyleOptions.italic
-                        : "")
-                        .style("text-decoration", (d) => d.data.labelFontStyle.includes(fontStyleOptions.underline)
-                        ? fontStyleOptions.underline
-                        : "")
-                        .style("font-weight", (d) => d.data.labelFontStyle.includes(fontStyleOptions.bold)
-                        ? fontStyleOptions.bold
-                        : "300")
-                        .style("fill", (d) => d.data.labelFontColor);
-                chartFormatOptions.plotArea.dataLabelValue &&
-                    annotations
-                        .selectAll(".annotation-note-label")
-                        .attr("hoverId", (d) => d.data.legend)
-                        .style("font-size", (d) => d.data.valueFontSize)
-                        .attr("font-family", (d) => d.data.valueFontFamily)
-                        .style("font-style", (d) => d.data.valueFontStyle.includes(fontStyleOptions.italic)
-                        ? fontStyleOptions.italic
-                        : "")
-                        .style("text-decoration", (d) => d.data.valueFontStyle.includes(fontStyleOptions.underline)
-                        ? fontStyleOptions.underline
-                        : "")
-                        .style("font-weight", (d) => d.data.valueFontStyle.includes(fontStyleOptions.bold)
-                        ? fontStyleOptions.bold
-                        : "300")
-                        .style("fill", (d) => d.data.valueFontColor);
-            }
-        }
-        catch (e) {
-            logError(fileName, "pyramidAnnotations", e);
-        }
-    };
-    const prepareNewAnnotationsList = () => {
-        try {
-            let annotationType = chartFormatOptions.annotation.annotationType ?? "1";
-            let connectorType = chartFormatOptions.annotation.connectorType
-                ? chartFormatOptions.annotation.connectorType.toLowerCase()
-                : "none";
-            annotationsList = [];
-            seriesData.forEach((d, i) => {
-                try {
-                    let singleAnnotation = {
-                        note: {
-                            title: chartFormatOptions.plotArea.dataLabelName
-                                ? d.properties.alias
-                                : "",
-                            label: chartFormatOptions.plotArea.dataLabelNumberFormat == ",.0%"
-                                ? (Math.abs(d.data[0].value / pyramidTotalValue) * 100).toFixed(convertStringToNumber(chartFormatOptions.plotArea.dataLabelDecimalPrecision)) + "%"
-                                : chartFormatOptions.plotArea.dataLabelValue
-                                    ? d.data[0].value >= 1000000000 &&
-                                        chartFormatOptions.annotation.annotationNumberFormat ===
-                                            ".2s"
-                                        ? Math.round(d.data[0].value / 1000000000) + "B"
-                                        : getNumberWithFormatFunction(chartFormatOptions.annotation.annotationDisplayUnits, chartFormatOptions.plotArea.dataLabelNumberFormat, chartFormatOptions.plotArea.dataLabelDecimalPrecision)(d.data[0].value)
-                                    : "",
-                            align: "middle",
-                        },
-                        data: {
-                            x: innerWidth / 2,
-                            y: getYCordinate(d, i, d.properties.dataLabelPosition),
-                            isVisible: true,
-                            dimension: d.legend,
-                            legend: d.legend,
-                            measure: d.data[0].value,
-                            labelFontFamily: d.properties.labelFont,
-                            labelFontSize: d.properties.labelFontSize,
-                            labelFontColor: d.properties.labelFontColor,
-                            labelFontStyle: d.properties.labelFontStyle,
-                            valueFontFamily: d.properties.valueFont,
-                            valueFontSize: d.properties.valueFontSize,
-                            valueFontColor: d.properties.valueFontColor,
-                            valueFontStyle: d.properties.valueFontStyle,
-                        },
-                        dx: 0,
-                        dy: 0,
-                        connector: {
-                            end: connectorType,
-                            curve: ConnecterCurve[chartFormatOptions.annotation.connectorCurve],
-                        },
-                        subject: {
-                            height: 15,
-                            width: 15,
-                        },
-                        type: AnnotationTypeMap[annotationType],
-                        color: chartFormatOptions.plotArea.dataLabelNameColor != "#000000"
-                            ? chartFormatOptions.plotArea.dataLabelNameColor
-                            : "#000000",
-                        height: width,
-                        width: width,
-                        index: i,
-                    };
-                    annotationsList.push(singleAnnotation);
-                }
-                catch (error) {
-                    logError(fileName, "prepareNewAnnotationsList.forEach", error);
-                }
-            });
-        }
-        catch (error) {
-            logError(fileName, "prepareNewAnnotationsList", error);
-        }
-    };
-    const getYCordinate = (d, i, labelPosition) => {
-        try {
-            switch (labelPosition) {
-                case staticDataLabelPositions.top:
-                    return stackHeightArray[i] + 30;
-                case staticDataLabelPositions.middle:
-                    return (stackHeightArray[i] + stackHeightArray[i + 1]) / 2 + 15;
-                case staticDataLabelPositions.bottom:
-                    return stackHeightArray[i + 1];
-                default:
-                    return stackHeightArray[i] + 30;
-            }
-        }
-        catch (error) {
-            logError(fileName, "getYCordinate", error);
-            return 0;
-        }
-    };
-    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 PyramidChart;