pace-chart-lib 0.0.7 → 0.0.8

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

@@ -0,0 +1,212 @@
+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
+    const seriesData = generalizedChartData(data); // 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 {
+            data = data.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.d.ts

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

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

@@ -0,0 +1,401 @@
+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();
+    const seriesData = generalizedChartData(data);
+    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 {
+            data = data.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(data, (d) => Math.abs(d.data[0].value));
+            stackHeightArray = [0];
+            data.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 {
+            data.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 = [];
+            data.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;

package/dist/components/Charts/ChartsWithoutAxis/OtherCharts/RadialBarChart.d.ts

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