pace-chart-lib 0.0.12 → 1.0.1

package/dist/Components1/Charts/ChartsWithAxis/ChartsWithAxisFunctions.js

@@ -1,2285 +0,0 @@
-import * as d3 from "d3";
-import { actualChartTypes } from "./ChartsWithAxisTypes.type";
-import { calculateMaxLegendWidth } from "../Core/CommonFunctions";
-const chartsWithDataTableArray = [
-    actualChartTypes.bar,
-    actualChartTypes.stackColumn,
-    actualChartTypes.stackColumn100,
-    actualChartTypes.line,
-    actualChartTypes.stackLine,
-    actualChartTypes.stackLine100,
-    actualChartTypes.area,
-    actualChartTypes.stackArea,
-    actualChartTypes.stackArea100,
-];
-const chartsWithoutPlotArea = [
-    actualChartTypes.pie,
-    actualChartTypes.pieOfPie,
-    actualChartTypes.sunburst,
-    actualChartTypes.pyramidChart,
-    actualChartTypes.organizationalChart,
-    actualChartTypes.vennDiagramChart,
-    actualChartTypes.progressChart,
-    actualChartTypes.maps,
-    actualChartTypes.wordCloud,
-    actualChartTypes.sankey,
-    actualChartTypes.speedometerChart,
-    actualChartTypes.radialBarChart,
-];
-export function getRandomColor() {
-    let letters = "0123456789ABCDEF";
-    let color = "#";
-    for (let i = 0; i < 6; i++) {
-        color += letters[Math.floor(Math.random() * 16)];
-    }
-    return { color };
-}
-export function calculateWidthHeightDynamically(content, fontSize, fontFamily, rotationDegree, fixedWidth) {
-    // Create a hidden div element
-    var div = document.createElement("div");
-    // Apply necessary styles to ensure accurate measurement
-    div.style.visibility = "hidden";
-    div.style.position = "absolute";
-    div.style.top = "-9999px";
-    div.style.left = "-9999px";
-    div.style.fontSize = fontSize == undefined ? "" : fontSize + "px";
-    div.style.fontFamily = fontFamily == undefined ? "" : fontFamily;
-    div.style.margin = "0";
-    // div.style.padding = '1px';
-    div.style.border = "none";
-    if (fixedWidth) {
-        div.style.width = fixedWidth + "px";
-        div.style.whiteSpace = "normal";
-        div.style.overflowWrap = "break-word";
-    }
-    else {
-        div.style.whiteSpace = "nowrap";
-    }
-    div.innerHTML = content;
-    document.body.appendChild(div);
-    var boundingRect = div.getBoundingClientRect();
-    var width = boundingRect.width;
-    var height = boundingRect.height;
-    if (rotationDegree) {
-        div.style.transform = `rotate(${rotationDegree}deg)`;
-        boundingRect = div.getBoundingClientRect();
-        div.remove();
-        return [width, height, boundingRect.width, boundingRect.height];
-    }
-    else {
-        div.remove();
-        return [boundingRect.width, boundingRect.height];
-    }
-}
-export function getYAxisLabel(formatOptions, maxLegendLength) {
-    let dataTableCondition = formatOptions.dataTableProperties &&
-        formatOptions.dataTableProperties.dataTable;
-    // &&
-    // chartsWithDataTableArray.includes(chartType);
-    let yAxisLabelLength = dataTableCondition
-        ? maxLegendLength * 7 < 50
-            ? 50
-            : maxLegendLength * 7 > 100
-                ? 100
-                : maxLegendLength * 7
-        : 0;
-    if (dataTableCondition && yAxisLabelLength < 30) {
-        yAxisLabelLength = 30;
-    }
-    return yAxisLabelLength;
-}
-export function marginCalculation(width, height, maxNumberForPrimaryAxis, YmaxLeft, formatOptions, legendList, dimensionList) {
-    try {
-        // min svg height/width final values are yet to decide.
-        let isDataTableDrawnWithAxis = formatOptions.dataTableProperties &&
-            formatOptions.dataTableProperties.dataTable &&
-            formatOptions.xAxisLabel.xAxisPosition == 0;
-        // &&
-        // chartsWithDataTableArray.includes(chartType);
-        let Width = width < 200 ? 200 : width;
-        let Height = height < 200 ? 200 : height;
-        let Margin = { top: 0, left: 0, right: 0, bottom: 0 };
-        let width15Percent = Width * 0.15 * 0.8;
-        let maxLegendWidth = calculateMaxLegendWidth(legendList, formatOptions);
-        let legendMargin = width15Percent < maxLegendWidth[0] + 10
-            ? width15Percent
-            : maxLegendWidth[0] + 10;
-        let maxLegend = d3.max(legendList, (legend) => legend.includes("~$~")
-            ? legend.split("~$~")[1].length
-            : legend.includes("-")
-                ? legend.slice(legend.indexOf("-") + 1).length
-                : legend.length);
-        // (xAxisObject.GroupBy == "NA" || xAxisObject.GroupBy == undefined)  ? parentReference.dataModifierService.setDateFormats(xAxisObject.Name.name, basestyle.xAxisLabel.xAxisNumberFormat,chartData.dimensionList.map(d=>[d]),xAxisObject.Name.dataSourceId).map(d=> d[0]): chartData.dimensionList;
-        let formatedDimesionList = dimensionList;
-        let maxDimension = formatedDimesionList
-            ? formatedDimesionList[0] + ""
-            : "";
-        let maxDimensionLength = maxDimension.length;
-        formatedDimesionList &&
-            formatedDimesionList.forEach((dim) => {
-                dim = dim + "";
-                let length = dim.trim()?.length || 0;
-                if (length > maxDimensionLength) {
-                    maxDimensionLength = length;
-                    maxDimension = dim.trim();
-                }
-            });
-        let dimensionHeightWidthArray = calculateWidthHeightDynamically(maxDimension, formatOptions.xAxisLabel.xAxisLabelFontSize, formatOptions.xAxisLabel.xAxisLabelFontFamily, formatOptions.xAxisLabel.xAxisLabelRotation);
-        let actualDimesionWidth = dimensionHeightWidthArray[0] + 5;
-        let maxDimensionWidth = dimensionHeightWidthArray[3] + 10;
-        let Xtitle = formatOptions.xAxisTitle.xAxisTitleVisibility
-            ? formatOptions.xAxisTitle.xAxisDynamicTitleText.length !== 0
-                ? calculateWidthHeightDynamically(formatOptions.xAxisTitle.xAxisTitleHTML, undefined, undefined)[1]
-                : calculateWidthHeightDynamically(formatOptions.xAxisTitle.xAxisTitleText, 13, "Helvetica")[1]
-            : isDataTableDrawnWithAxis
-                ? 5
-                : 0;
-        Xtitle = Xtitle > Height * 0.1 ? Height * 0.1 : Xtitle;
-        let Xlabel = isDataTableDrawnWithAxis
-            ? 0
-            : formatOptions.xAxisLabel.xAxisLabelVisibility
-                ? //  bubbleChart
-                    //   ? responsiveXaxisMarginForBubbleChart() * 1.2
-                    // :
-                    formatOptions.xAxisLabel.labelTextWrap
-                        ? maxDimensionWidth < Height * 0.15
-                            ? maxDimensionWidth
-                            : Height * 0.15
-                        : maxDimensionWidth
-                : 0;
-        let Ytitle = formatOptions.yAxisTitle.yAxisTitleVisibility
-            ? formatOptions.yAxisTitle.yAxisDynamicTitleText.length !== 0
-                ? calculateWidthHeightDynamically(formatOptions.yAxisTitle.yAxisTitleHTML, undefined, undefined)[1]
-                : calculateWidthHeightDynamically(formatOptions.yAxisTitle.yAxisTitleText, 13, "Helvetica")[1]
-            : 0;
-        Ytitle = Ytitle > Width * 0.1 ? Width * 0.1 : Ytitle;
-        let Ylabel = formatOptions.yAxisLabel.yAxisLabelVisibility
-            ? responsiveYaxisMargin(maxNumberForPrimaryAxis, YmaxLeft, formatOptions)
-            : getYAxisLabel(formatOptions, maxLegend);
-        let chartTitleHeight = formatOptions.chartTitle.chartTitleVisibility
-            ? formatOptions.chartTitle.dynamicTitleText.length !== 0
-                ? calculateWidthHeightDynamically(formatOptions.chartTitle.chartTitleHTML, undefined, undefined)[1]
-                : calculateWidthHeightDynamically(formatOptions.chartTitle.chartTitleText, 16, "Helvetica")[1]
-            : 0;
-        chartTitleHeight =
-            chartTitleHeight > Height * 0.1 ? Height * 0.1 : chartTitleHeight;
-        let legendPosition = formatOptions.legends.legendPosition;
-        let legendVisibility = formatOptions.legends.legendVisibility;
-        let stackDataForTotals = false;
-        let normalizedChart = false;
-        if (!legendVisibility)
-            legendPosition = "None";
-        // if (chartType == "Waterfall" && !stackDataForTotals)
-        //   legendPosition = "None";
-        switch (legendPosition) {
-            case "None":
-                // Margin.top = (formatOptions.type == "Waterfall") ? Ctitle + 10 : Ctitle + (normalizedChart ? 12 : 0);
-                Margin.top = chartTitleHeight + 5 + (normalizedChart ? 12 : 0);
-                Margin.bottom = Xtitle + Xlabel + 5;
-                Margin.right = 15;
-                Margin.left = Ytitle + Ylabel + 5;
-                break;
-            case "Top":
-                Margin.top = 40 + chartTitleHeight + (normalizedChart ? 12 : 0);
-                Margin.bottom = Xtitle + Xlabel + 5;
-                Margin.right = 15;
-                Margin.left = Ytitle + Ylabel + 5;
-                break;
-            case "Right":
-                Margin.right = legendMargin + 35;
-                Margin.top = chartTitleHeight + 5 + (normalizedChart ? 12 : 0);
-                Margin.bottom = Xtitle + Xlabel + 5;
-                Margin.left = Ytitle + Ylabel + 5;
-                break;
-            case "Bottom":
-                Margin.bottom = 40 + Xlabel + Xtitle;
-                Margin.top = chartTitleHeight + 5 + (normalizedChart ? 12 : 0);
-                Margin.right = 15;
-                Margin.left = Ytitle + Ylabel + 5;
-                break;
-            case "Left":
-                Margin.left = legendMargin + Ytitle + Ylabel + 33;
-                Margin.top = chartTitleHeight + 5 + (normalizedChart ? 12 : 0);
-                Margin.bottom = Xtitle + Xlabel + 5;
-                Margin.right = 15;
-        }
-        // Margin.top = Margin.top > 25 ? Margin.top : 25;
-        // Margin.bottom = Margin.bottom > 25 ? Margin.bottom : 25;
-        // formatOptions.footerNote &&
-        // formatOptions.footerNote.footerNoteVisibility &&
-        // (formatOptions.type == "StackColumn" || formatOptions.type == "Waterfall")
-        //   ? (Margin.bottom = Margin.bottom + 25)
-        //   : Margin.bottom;
-        if (formatOptions.xAxisLabel.xAxisPosition &&
-            formatOptions.xAxisLabel.xAxisPosition == 1) {
-            Margin.bottom = Margin.bottom - Xlabel;
-            Margin.top = Margin.top + Xlabel;
-        }
-        //Final Margin Adjustments for scrolling chart
-        if (!formatOptions.plotArea.fitChart) {
-            Margin.bottom += 10;
-            // Margin.right += 15;
-        }
-        let manualMarginArray = formatOptions.chartPadding.paddingArrayLTRB;
-        if (manualMarginArray) {
-            Margin.top += manualMarginArray[1];
-            Margin.bottom += manualMarginArray[3];
-            Margin.right += manualMarginArray[2];
-            Margin.left += manualMarginArray[0];
-        }
-        // if(formatOptions.dataTableProperties && formatOptions.dataTableProperties.dataTable && normalizedChart){
-        //   Margin.left = Margin.left + 35;
-        // }
-        let staticSvgInnerWidth = Width - Margin.left - Margin.right;
-        return {
-            Margin,
-            Ylabel,
-            Xlabel,
-            Ytitle,
-            Xtitle,
-            dimensionHeightWidthArray,
-            staticSvgInnerWidth,
-            chartTitleHeight,
-            legendMargin,
-        };
-    }
-    catch (error) {
-        // loggerService.logError(error, {
-        //   componentName: constructor.name,
-        //   functionName: "marginCalculation",
-        // });
-    }
-}
-export function initSvg(svgRef, width, height) {
-    //   initNewAddedPropertiesForOldReports();
-    return d3.select(svgRef).attr("viewBox", "0 0 " + width + " " + height);
-    //   if ((!formatOptions.plotArea.fitChart) && (chartsWithXScrollFlag || chartsWithYScrollFlag)) {
-    //     svg = d3
-    //       .select("#scaling-svg" + svgIndex)
-    //       .attr("viewBox", "0 0 " + Width + " " + Height)
-    //       .style("pointer-events", "none")
-    //       .style("position", "absolute")
-    //     let staticSvg = d3
-    //       .select("#scaling-svg" + svgIndex)     // a.node().parentElement.id
-    //     staticSvg.node().parentNode.id = "checkForNoDataImage" + svgIndex;
-    //     let parent = d3.select("#checkForNoDataImage" + svgIndex);
-    //     const body = parent
-    //       .append("div")
-    //       .attr("class", "floating-div" + svgIndex + " scrollbar-div")
-    //       .style("width", "100%")
-    //       .style("height", "100%")
-    //       .style("overflow-x", chartsWithYScrollFlag ? "hidden" : "scroll")
-    //       .style("overflow-y", chartsWithYScrollFlag ? "scroll" : "hidden")
-    //       .style("-webkit-overflow-scrolling", "touch");
-    //     if (chartsWithXScrollFlag) {
-    //       floatingSvg = body
-    //         .append("svg")
-    //         .attr("id", floatingSvgID + svgIndex)
-    //         .attr("viewBox", "0 0 " + (totalWidth) + " " + totalHeight)
-    //         .style("height", "calc(100% + 8px)")
-    //         // .style("height","100%")
-    //         .style("z-index", "11")
-    //         .style("background-color", formatOptions.chartArea.chartAreaColor)
-    //     } else if (chartsWithYScrollFlag) {
-    //       floatingSvg = body
-    //         .append("svg")
-    //         .attr("id", floatingSvgID + svgIndex)
-    //         .attr("viewBox", "0 0 " + (totalWidth + " " + totalHeight))
-    //         .style("width", "calc(100% + 10px)")
-    //         // .style("width", "100%" )
-    //         .style("z-index", "11")
-    //         .style("background-color", formatOptions.chartArea.chartAreaColor)
-    //     }
-    //   }
-    //   else {
-    //     svg
-    //       .style("position", "")
-    //     floatingSvg = svg;
-    //   }
-    //   chartType = formatOptions.type;
-}
-export function customYscaleLabelFormatting(formatOptions, YminLeft, YmaxLeft, YminRight, YmaxRight) {
-    //e.g
-    //   yAxisMinText: "1000", // custom max
-    // yAxisAutoText: "0", // custom min
-    // yAxisIntervalText: "300", // custom interval
-    let customYaxisIntervalValue = parseFloat(formatOptions.yAxisLabel.yAxisIntervalText);
-    let customYaxisMaxValue;
-    let customYaxisMinValue;
-    // let secondaryCustomYaxisIntervalValue =
-    //   formatOptions.SecondaryYAxisLabel.SecondaryYAxisIntervalText;
-    if (formatOptions.yAxisLabel.yAxisIntervalsVisibility) {
-        if (formatOptions.xAxisLabel.xAxisPosition == 2) {
-            formatOptions.xAxisLabel.xAxisPosition = 0;
-        }
-        customYaxisMinValue =
-            formatOptions.yAxisLabel.yAxisAutoText !== ""
-                ? parseFloat(formatOptions.yAxisLabel.yAxisAutoText)
-                : undefined;
-        let maxValue = formatOptions.yAxisLabel.yAxisMinText;
-        customYaxisMaxValue = maxValue.length > 0 ? parseFloat(maxValue) : YmaxLeft;
-        customYaxisMaxValue ? (YmaxLeft = customYaxisMaxValue) : null;
-        parseFloat(formatOptions.yAxisLabel.yAxisIntervalText) < YmaxLeft
-            ? (customYaxisIntervalValue = parseFloat(formatOptions.yAxisLabel.yAxisIntervalText))
-            : "";
-    }
-    else {
-        customYaxisMaxValue = undefined;
-        customYaxisMinValue = undefined;
-        customYaxisIntervalValue = undefined;
-    }
-    // if (formatOptions.SecondaryYAxisLabel.SecondaryYAxisIntervalsVisibility) {
-    //   if (
-    //     parseFloat(formatOptions.SecondaryYAxisLabel.SecondaryYAxisAutoText) <
-    //     YmaxRight
-    //   ) {
-    //     secondaryCustomYaxisMinValue = parseFloat(
-    //       formatOptions.SecondaryYAxisLabel.SecondaryYAxisAutoText
-    //     );
-    //   }
-    //   secondaryCustomYaxisMaxValue =
-    //     formatOptions.SecondaryYAxisLabel.SecondaryYAxisMinText &&
-    //     formatOptions.SecondaryYAxisLabel.SecondaryYAxisMinText !== ""
-    //       ? parseFloat(formatOptions.SecondaryYAxisLabel.SecondaryYAxisMinText)
-    //       : YmaxRight;
-    //   secondaryCustomYaxisIntervalValue =
-    //     formatOptions.SecondaryYAxisLabel.SecondaryYAxisIntervalText !== ""
-    //       ? parseFloat(formatOptions.SecondaryYAxisLabel.SecondaryYAxisIntervalText)
-    //       : undefined;
-    // } else {
-    //   secondaryCustomYaxisMaxValue = undefined;
-    //   secondaryCustomYaxisMinValue = undefined;
-    //   secondaryCustomYaxisIntervalValue = undefined;
-    // }
-    let yMinLength = YminLeft
-        ? getNumberWithFormat(formatOptions.yAxisLabel.yAxisDisplayUnits, formatOptions.yAxisLabel.yAxisNumberFormat, formatOptions.yAxisLabel.yAxisLabelDecimalPrecision ?? 2)(YminLeft).toString().length
-        : 0;
-    let yMaxLength = YmaxLeft
-        ? getNumberWithFormat(formatOptions.yAxisLabel.yAxisDisplayUnits, formatOptions.yAxisLabel.yAxisNumberFormat, formatOptions.yAxisLabel.yAxisLabelDecimalPrecision ?? 2)(YmaxLeft).toString().length
-        : 0;
-    // let secondaryYMinLength = YminRight
-    //   ? getFormatedValueForSecondaryYAxis(YminRight).toString().length
-    //   : 0;
-    // let secondaryYMaxLength = YmaxRight
-    //   ? getFormatedValueForSecondaryYAxis(YmaxRight).toString().length
-    //   : 0;
-    let customYaxisMaxValueLength = customYaxisMaxValue
-        ? getNumberWithFormat(formatOptions.yAxisLabel.yAxisDisplayUnits, formatOptions.yAxisLabel.yAxisNumberFormat, formatOptions.yAxisLabel.yAxisLabelDecimalPrecision ?? 2)(customYaxisMaxValue).toString().length
-        : 0;
-    let customYaxisMinValueLength = customYaxisMinValue
-        ? getNumberWithFormat(formatOptions.yAxisLabel.yAxisDisplayUnits, formatOptions.yAxisLabel.yAxisNumberFormat, formatOptions.yAxisLabel.yAxisLabelDecimalPrecision ?? 2)(customYaxisMinValue).toString().length
-        : 0;
-    // let secondaryCustomYaxisMaxValueLength = secondaryCustomYaxisMaxValue
-    //   ? getFormatedValueFoissrSecondaryYAxis(
-    //       secondaryCustomYaxisMaxValue
-    //     ).toString().length
-    //   : 0;
-    // let secondaryCustomYaxisMinValueLength = secondaryCustomYaxisMinValue
-    //   ? getFormatedValueForSecondaryYAxis(
-    //       secondaryCustomYaxisMinValue
-    //     ).toString().length
-    //   : 0;
-    // primary scale : Margin adjustments
-    let maxNumberForPrimaryAxis = yMinLength < yMaxLength ? YmaxLeft : YminLeft;
-    if (customYaxisMinValue) {
-        let tempLength = customYaxisMinValueLength < yMaxLength ? YmaxLeft : customYaxisMinValue;
-        maxNumberForPrimaryAxis =
-            maxNumberForPrimaryAxis < tempLength
-                ? tempLength
-                : maxNumberForPrimaryAxis;
-    }
-    if (customYaxisMaxValue) {
-        let tempLength = customYaxisMaxValueLength > yMinLength ? customYaxisMaxValue : YminLeft;
-        maxNumberForPrimaryAxis =
-            maxNumberForPrimaryAxis < tempLength
-                ? tempLength
-                : maxNumberForPrimaryAxis;
-    }
-    if (customYaxisMaxValue && customYaxisMinValue) {
-        maxNumberForPrimaryAxis =
-            customYaxisMaxValueLength > customYaxisMinValueLength
-                ? customYaxisMaxValue
-                : customYaxisMinValue;
-    }
-    let maxNumberForSecondaryAxis;
-    // secondary scale : Margin adjustments
-    //  maxNumberForSecondaryAxis =
-    //   secondaryYMinLength < secondaryYMaxLength ? YmaxRight : YminRight;
-    // if (secondaryCustomYaxisMinValue) {
-    //   let tempLength =
-    //     secondaryCustomYaxisMinValueLength < secondaryYMaxLength
-    //       ? YmaxRight
-    //       : secondaryCustomYaxisMinValue;
-    //   maxNumberForSecondaryAxis =
-    //     maxNumberForSecondaryAxis < tempLength
-    //       ? tempLength
-    //       : maxNumberForSecondaryAxis;
-    // }
-    // if (secondaryCustomYaxisMaxValue) {
-    //   let tempLength =
-    //     secondaryCustomYaxisMaxValueLength > secondaryYMaxLength
-    //       ? secondaryCustomYaxisMaxValue
-    //       : YmaxRight;
-    //   maxNumberForSecondaryAxis =
-    //     maxNumberForSecondaryAxis < tempLength
-    //       ? tempLength
-    //       : maxNumberForSecondaryAxis;
-    // }
-    // if (secondaryCustomYaxisMaxValue && secondaryCustomYaxisMinValue) {
-    //   maxNumberForSecondaryAxis =
-    //     secondaryCustomYaxisMaxValueLength > secondaryCustomYaxisMinValueLength
-    //       ? secondaryCustomYaxisMaxValue
-    //       : secondaryCustomYaxisMinValue;
-    // }
-    return {
-        maxNumberForPrimaryAxis,
-        maxNumberForSecondaryAxis,
-    };
-}
-export function getYaxisLabelList(dataMin, dataMax, axisLengthPx, labelWidthPx = 80) {
-    const dataRange = dataMax - dataMin;
-    if (dataRange === 0) {
-        return [dataMin];
-    }
-    const maxLabels = Math.max(2, Math.floor(axisLengthPx / labelWidthPx));
-    const rawInterval = dataRange / maxLabels;
-    const magnitude = Math.pow(10, Math.floor(Math.log10(rawInterval)));
-    const niceNumbers = [1, 1.5, 2, 2.5, 5, 10];
-    let interval = null;
-    for (const n of niceNumbers) {
-        const candidate = n * magnitude;
-        if (Math.ceil(dataRange / candidate) <= maxLabels) {
-            interval = candidate;
-            break;
-        }
-    }
-    if (interval === null) {
-        interval = niceNumbers[niceNumbers.length - 1] * magnitude;
-    }
-    const minLabel = Math.floor(dataMin / interval) * interval;
-    const maxLabel = Math.ceil(dataMax / interval) * interval;
-    const labels = [];
-    let current = minLabel;
-    while (current <= maxLabel + 1e-8) {
-        labels.push(parseFloat(current.toFixed(10)));
-        current += interval;
-    }
-    return labels;
-}
-export function getNumberWithFormat(displayUnits, numberFormat, decimalPrescision) {
-    try {
-        let Unit;
-        let displayUnitsPostFix = "";
-        let decimalValues = decimalPrescision;
-        let formatter;
-        return function (d) {
-            if (displayUnits != "None") {
-                displayUnits == "Thousands"
-                    ? ((Unit = 1000), (displayUnitsPostFix = "K"))
-                    : null;
-                displayUnits == "Millions"
-                    ? ((Unit = 1000000), (displayUnitsPostFix = "M"))
-                    : null;
-                displayUnits == "Billions"
-                    ? ((Unit = 1000000000), (displayUnitsPostFix = "B"))
-                    : null;
-                d = d / Unit;
-            }
-            // if (self.tornadoChart) {
-            //   if (d < 0) d = -d;
-            // }
-            switch (numberFormat) {
-                case ",.0%":
-                    formatter = `.${decimalValues}%`;
-                    return d3.format(formatter)(d);
-                    break;
-                case "":
-                    formatter = `.${decimalValues}f`;
-                    return d3.format(formatter)(d) + displayUnitsPostFix;
-                    break;
-                case ".2n":
-                    formatter = `.${decimalValues == 0 ? 1 : (parseFloat(decimalValues) + 1).toString()}n`;
-                    return d3.format(formatter)(d) + displayUnitsPostFix;
-                    break;
-                case ".2$":
-                    formatter = `,.${decimalValues}f`;
-                    return "$" + d3.format(formatter)(d) + displayUnitsPostFix;
-                    break;
-                case ".2c":
-                    formatter = `,.${decimalValues}f`;
-                    return "C$" + d3.format(formatter)(d) + displayUnitsPostFix;
-                    break;
-                case ".2ē":
-                    formatter = `,.${decimalValues}f`;
-                    return "€" + d3.format(formatter)(d) + displayUnitsPostFix;
-                    break;
-                case ".2ch":
-                    formatter = `,.${decimalValues}f`;
-                    return "CHF" + d3.format(formatter)(d) + displayUnitsPostFix;
-                    break;
-                case ".2£":
-                    formatter = `,.${decimalValues}f`;
-                    return "£" + d3.format(formatter)(d) + displayUnitsPostFix;
-                    break;
-                case ".2₹":
-                    formatter = `,.${decimalValues}f`;
-                    return "₹" + d3.format(formatter)(d) + displayUnitsPostFix;
-                    break;
-                case ",":
-                    formatter = `,.${decimalValues}f`;
-                    return d3.format(formatter)(d) + displayUnitsPostFix;
-                    break;
-                default:
-                    formatter = `.${2}f`;
-                    return d3.format(formatter)(d) + displayUnitsPostFix;
-            }
-        };
-    }
-    catch (error) {
-        // loggerService.logError(error, {
-        //   componentName: constructor.name,
-        //   functionName: "getNumberWithFormat",
-        // });
-    }
-}
-export function responsiveYaxisMargin(maxNumberForPrimaryAxis, yMaxLeft, formatOptions) {
-    try {
-        // if (barChart) {
-        //   let dimensionticklist = [];
-        //   DimensionList.forEach((d) => dimensionticklist.push(d.length));
-        //   xmaxticksize = d3.max(dimensionticklist);
-        //   return xmaxticksize * formatOptions.yAxisLabel.yAxisLabelFontSize;
-        // } else
-        {
-            let YmaxNumber;
-            let normalizedChart = false;
-            let YmaxNumberWidth;
-            if (formatOptions.yAxisLabel.yAxisDisplayUnits != "None") {
-                YmaxNumber = getNumberWithFormat(formatOptions.yAxisLabel.yAxisDisplayUnits, formatOptions.yAxisLabel.yAxisNumberFormat, formatOptions.yAxisLabel.yAxisLabelDecimalPrecision ?? 2)(Math.floor(maxNumberForPrimaryAxis) || Math.floor(yMaxLeft)).toString();
-                YmaxNumberWidth = calculateWidthHeightDynamically(YmaxNumber, formatOptions.yAxisLabel.yAxisLabelFontSize, formatOptions.yAxisLabel.yAxisLabelFontFamily)[0];
-                return YmaxNumberWidth < 30 ? 30 : YmaxNumberWidth + 5;
-            }
-            else {
-                try {
-                    YmaxNumber = getNumberWithFormat(formatOptions.yAxisLabel.yAxisDisplayUnits, formatOptions.yAxisLabel.yAxisNumberFormat, formatOptions.yAxisLabel.yAxisLabelDecimalPrecision ?? 2)(Math.floor(maxNumberForPrimaryAxis) || Math.floor(yMaxLeft)).toString();
-                    normalizedChart ? (YmaxNumber = "-100%") : "";
-                    YmaxNumberWidth = calculateWidthHeightDynamically(YmaxNumber, formatOptions.yAxisLabel.yAxisLabelFontSize, formatOptions.yAxisLabel.yAxisLabelFontFamily)[0];
-                    return YmaxNumberWidth < 30 ? 30 : YmaxNumberWidth + 5;
-                }
-                catch (e) {
-                    // loggerService.logError(e, {
-                    //   componentName: constructor.name,
-                    //   functionName: "responsiveYaxisMargin(Innerloop)",
-                    // });
-                }
-            }
-        }
-    }
-    catch (error) {
-        // loggerService.logError(error, {
-        //   componentName: constructor.name,
-        //   functionName: "responsiveYaxisMargin",
-        // });
-    }
-}
-export function InitChartArea(svg, margin) {
-    try {
-        return svg
-            .append("g")
-            .attr("transform", `translate(${margin.left},${margin.top})`)
-            .attr("font-color", "#ccc");
-    }
-    catch (error) {
-        // this.loggerService.logError(error, {
-        //   componentName: this.constructor.name,
-        //   functionName: "InitChartArea",
-        // });
-    }
-}
-export function InitChartFloatingArea(formatOptions, margin, floatingSvg, gTag, chartsWithXScrollFlag, chartsWithYScrollFlag) {
-    try {
-        if (!formatOptions.plotArea.fitChart &&
-            (chartsWithXScrollFlag || chartsWithYScrollFlag)) {
-            return floatingSvg
-                .append("g")
-                .attr("transform", `translate(${margin.left},${margin.top})`)
-                .attr("font-color", "#ccc");
-        }
-        else {
-            return gTag;
-        }
-    }
-    catch (error) {
-        // this.loggerService.logError(error,{componentName :this.constructor.name,functionName :"InitChartFloatingArea"});
-    }
-}
-export function initBlackBox(g, formatOptions, dataTableHeight, innerWidth, innerHeight, chartType) {
-    try {
-        let uniqueID = crypto.randomUUID().toUpperCase();
-        g.append("defs")
-            .append("clipPath")
-            .attr("id", uniqueID)
-            .append("rect")
-            .attr("width", innerWidth)
-            .attr("height", dataTableHeight > 0 ? innerHeight - dataTableHeight : innerHeight);
-        g.append("rect")
-            .attr("width", innerWidth)
-            .attr("height", dataTableHeight > 0 ? innerHeight - dataTableHeight : innerHeight)
-            .attr("stroke", formatOptions.plotArea.plotAreaBorder &&
-            !chartsWithoutPlotArea.includes(chartType)
-            ? formatOptions.plotArea.plotAreaBorderColor
-            : "none")
-            .attr("stroke-width", formatOptions.plotArea.plotAreaBorderThickness)
-            .attr("fill", formatOptions.plotArea.plotAreaColor !== "#ffffff" &&
-            !chartsWithoutPlotArea.includes(chartType)
-            ? formatOptions.plotArea.plotAreaColor
-            : "none");
-        // this.setTextAnnotation();
-    }
-    catch (error) {
-        // this.loggerService.logError(error, {
-        //   componentName: this.constructor.name,
-        //   functionName: "initBlackBox",
-        // });
-    }
-}
-export function isVerticallyOverlapping(obj1, obj2) {
-    // Calculate the vertical bounds of the first object
-    const obj1Top = obj1.yPosition;
-    const obj1Bottom = obj1.yPosition + obj1.height;
-    // Calculate the vertical bounds of the second object
-    const obj2Top = obj2.yPosition;
-    const obj2Bottom = obj2.yPosition + obj2.height;
-    // Check for vertical overlap
-    const verticalOverlap = obj1Top < obj2Bottom && obj1Bottom > obj2Top;
-    return verticalOverlap;
-}
-// to get exact value of interval user enter, here we return the array of the intervals to be shown on y-axis scale
-export function responsiveYaxisLabel(Ymax, Ymin, innerWidth, innerHeight, formatOptions, chartJSON) {
-    try {
-        let customYaxisIntervalValue = parseFloat(formatOptions.yAxisLabel.yAxisIntervalText);
-        let customTickValue;
-        if (customYaxisIntervalValue &&
-            customYaxisIntervalValue !== 0 &&
-            customYaxisIntervalValue !== undefined) {
-            let minValue = chartJSON.customYaxisMinValue || chartJSON.customYaxisMinValue == 0
-                ? chartJSON.customYaxisMinValue
-                : Ymin;
-            let maxValue = chartJSON.customYaxisMaxValue || chartJSON.customYaxisMaxValue == 0
-                ? chartJSON.customYaxisMaxValue
-                : Ymax;
-            if (minValue < 0) {
-                customTickValue = Math.floor((maxValue - minValue) / customYaxisIntervalValue);
-            }
-            else {
-                customTickValue = Math.floor(maxValue / customYaxisIntervalValue);
-            }
-            let minRequiredTicks = 18;
-            chartJSON.customYaxisMaxValue || chartJSON.customYaxisMaxValue == 0
-                ? (Ymax = chartJSON.customYaxisMaxValue)
-                : "";
-            let yAxisLabelArray = [];
-            let tickvalue = chartJSON.customYaxisMinValue || chartJSON.customYaxisMinValue == 0
-                ? chartJSON.customYaxisMinValue
-                : Ymin < 0
-                    ? Math.round(Ymin)
-                    : 0;
-            yAxisLabelArray.push(tickvalue);
-            if (customTickValue > 100) {
-                let message = "Tick count cannot exceed more than 100.";
-                // openWarningBox(message); // we will add warning pop up later on
-                if (minValue < 0) {
-                    customYaxisIntervalValue = (maxValue - tickvalue) / 100;
-                }
-                else {
-                    customYaxisIntervalValue = maxValue / 100;
-                }
-            }
-            customTickValue = customTickValue < 100 ? customTickValue : 100;
-            if (customTickValue > minRequiredTicks) {
-                for (let interval = 0; interval < parseInt(customTickValue); interval++) {
-                    tickvalue += customYaxisIntervalValue;
-                    if (tickvalue.toFixed(5) <= Ymax) {
-                        yAxisLabelArray.push(tickvalue);
-                    }
-                    else
-                        break;
-                }
-            }
-            else {
-                for (let interval = 0; interval < minRequiredTicks; interval++) {
-                    tickvalue += customYaxisIntervalValue;
-                    if (tickvalue <= Ymax) {
-                        yAxisLabelArray.push(tickvalue);
-                    }
-                    else
-                        break;
-                }
-            }
-            return yAxisLabelArray;
-        }
-        else {
-            // Algorithm from aishwarya
-            let labelWidthPx = calculateWidthHeightDynamically(chartJSON.customYaxisMaxValue || chartJSON.yMaxLeft, formatOptions.yAxisLabel.yAxisLabelFontSize, formatOptions.yAxisLabel.yAxisLabelFontFamily, "0");
-            let labelList = getLabelsFromAlgo(chartJSON.customYaxisMinValue || chartJSON.yMinLeft, chartJSON.customYaxisMaxValue || chartJSON.yMaxLeft, innerHeight, labelWidthPx[0]);
-            return labelList;
-            // customTickValue = barChart
-            //   ? innerWidth / 50
-            //   : innerHeight / 30;
-        }
-    }
-    catch (e) {
-        // this.loggerService.logError(e, {
-        //   componentName: this.constructor.name,
-        //   functionName: "responsiveYaxisLabel",
-        // });
-    }
-}
-export function getLabelsFromAlgo(
-// ){
-// function getOptimalAxisLabels(
-dataMin, dataMax, axisLengthPx, labelWidthPx = 80) {
-    const dataRange = dataMax - dataMin;
-    if (dataRange === 0) {
-        return [dataMin];
-    }
-    const maxLabels = Math.max(2, Math.floor(axisLengthPx / labelWidthPx));
-    const rawInterval = dataRange / maxLabels;
-    const magnitude = Math.pow(10, Math.floor(Math.log10(rawInterval)));
-    const niceNumbers = [1, 1.5, 2, 2.5, 5, 10];
-    let interval = null;
-    for (const n of niceNumbers) {
-        const candidate = n * magnitude;
-        if (Math.ceil(dataRange / candidate) <= maxLabels) {
-            interval = candidate;
-            break;
-        }
-    }
-    if (interval === null) {
-        interval = niceNumbers[niceNumbers.length - 1] * magnitude;
-    }
-    const minLabel = Math.floor(dataMin / interval) * interval;
-    const maxLabel = Math.ceil(dataMax / interval) * interval;
-    const labels = [];
-    let current = minLabel;
-    while (current <= maxLabel + 1e-8) {
-        labels.push(parseFloat(current.toFixed(10))); // rounding like Python's round
-        current += interval;
-    }
-    return labels;
-}
-export function initYaxis(gTag, formatOptions, dataTableHeight, Ylabel, YaxisLeft, innerHeight) {
-    try {
-        let fontStyle = formatOptions.yAxisLabel.yAxisLabelFontStyle;
-        gTag
-            .append("rect")
-            .attr("transform", `translate(${-Ylabel},0)`)
-            .attr("height", dataTableHeight > 0 ? innerHeight - dataTableHeight : innerHeight)
-            .attr("width", Ylabel)
-            .attr("fill", formatOptions.yAxisLabel.yAxisLabelVisibility
-            ? formatOptions.yAxisLabel.yAxisBackgroundColor
-                ? formatOptions.yAxisLabel.yAxisBackgroundColor !== "#ffffff"
-                    ? formatOptions.yAxisLabel.yAxisBackgroundColor
-                    : "none"
-                : formatOptions.chartArea.chartAreaColor
-            : formatOptions.chartArea.chartAreaColor);
-        const YaxisG = gTag.append("g").call(YaxisLeft);
-        YaxisG.selectAll("line")
-            .style("shape-rendering", "crispEdges")
-            .attr("stroke", formatOptions.plotArea.gridLinesColor)
-            .attr("stroke-width", "0.05em")
-            .attr("stroke-opacity", formatOptions.plotArea.fitChart ? "1" : "0");
-        YaxisG.selectAll("text")
-            .style("fill", formatOptions.yAxisLabel.yAxisLabelColor !== "#ffffff"
-            ? formatOptions.yAxisLabel.yAxisLabelColor
-            : "none")
-            .style("user-select", "none")
-            .style("font-size", formatOptions.yAxisLabel.yAxisLabelFontSize)
-            .style("font-family", formatOptions.yAxisLabel.yAxisLabelFontFamily)
-            .style("font-style", formatOptions.yAxisLabel.yAxisLabelFontStyle)
-            .style("font-style", fontStyle.includes("Italic") ? "Italic" : "")
-            .style("text-decoration", fontStyle.includes("Underline") ? "Underline" : "")
-            .style("font-weight", fontStyle.includes("Bold") ? "Bold" : "")
-            .attr("visibility", formatOptions.yAxisLabel.yAxisLabelVisibility ? "visible" : "hidden");
-        YaxisG.select(".domain")
-            .style("shape-rendering", "crispEdges")
-            .style("stroke", formatOptions.yAxisLabel.yAxisColor)
-            .attr("stroke-width", formatOptions.yAxisLabel.yAxisWidth
-            ? formatOptions.yAxisLabel.yAxisWidth
-            : formatOptions.plotArea.plotAreaBorderThickness);
-        // if (
-        //   !formatOptions.plotArea.fitChart &&
-        //   (chartsWithXScrollFlag || chartsWithYScrollFlag)
-        // ) {
-        //   const YaxisG2 = floatinggTag.append("g").call(YaxisLeft);
-        //   YaxisG2.select(".domain").remove();
-        //   YaxisG2.selectAll("line")
-        //     .style("shape-rendering", "crispEdges")
-        //     .attr("stroke", formatOptions.plotArea.gridLinesColor)
-        //     .attr("stroke-width", "0.05em");
-        //   YaxisG2.selectAll("text").remove();
-        // }
-        return gTag;
-    }
-    catch (error) {
-        // loggerService.logError(error, {
-        //   componentName: this.constructor.name,
-        //   functionName: "initYaxis",
-        // });
-    }
-}
-export function responsiveXaxisLabel(dimenstionList, innerWidth) {
-    try {
-        let filteredDimensionList = [];
-        let tickCount = 
-        // this.barChart
-        //   ? this.innerHeight / 30 < this.DimenstionListLength
-        //     ? Math.round(this.innerHeight / 30)
-        //     : this.DimenstionListLength
-        //   :
-        innerWidth / 30 < dimenstionList.length
-            ? Math.round(innerWidth / 30)
-            : dimenstionList.length;
-        if (tickCount >= dimenstionList.length) {
-            filteredDimensionList = dimenstionList;
-            return filteredDimensionList;
-        }
-        let Scale = Math.round(dimenstionList.length / tickCount);
-        if (!((dimenstionList.length - 1) % Scale == 0)) {
-            if ((dimenstionList.length - 1) % (Scale + 1) == 0) {
-                Scale = Scale + 1;
-            }
-        }
-        filteredDimensionList.push(dimenstionList[0]);
-        let lastIndex;
-        for (let i = 1; i < dimenstionList.length - 1; i++) {
-            const index = i * Scale;
-            if (index > dimenstionList.length)
-                break;
-            else
-                filteredDimensionList.push(dimenstionList[index]);
-            lastIndex = index;
-        }
-        // to ensure that last dimension gets added in the list
-        if (!filteredDimensionList.includes(dimenstionList[dimenstionList.length - 1])) {
-            let last1Percent = lastIndex >=
-                Math.round(dimenstionList.length - dimenstionList.length * 0.02);
-            // if (last1Percent && barChart) {
-            //   filteredDimensionList.pop();
-            // }
-            filteredDimensionList.push(dimenstionList[dimenstionList.length - 1]);
-        }
-        return (filteredDimensionList = filteredDimensionList.filter((val) => val));
-    }
-    catch (error) {
-        // this.loggerService.logError(error, {
-        //   componentName: this.constructor.name,
-        //   functionName: "responsiveXaxisLabel",
-        // });
-    }
-}
-export function initXaxis(gTag, chartJSON, Xlabel, formatOptions, xAxisObj, dataTableHeight, YscaleLeft, Xaxis, dimensionHeightWidthArray, height, barWidth, dataType, innerWidth, innerHeight) {
-    try {
-        let responsiveDimList = responsiveXaxisLabel(chartJSON.dimensionList, innerWidth);
-        let xAxisObject = xAxisObj;
-        let formatedResponsiveDimList = [];
-        let actualDimesionWidth = dimensionHeightWidthArray[0] + 5;
-        let maxDimensionWidth = dimensionHeightWidthArray[3] + 10;
-        if (chartJSON.chartType != "Waterfall") {
-            formatedResponsiveDimList =
-                (xAxisObject.GroupBy == "NA" || xAxisObject.GroupBy == undefined) &&
-                    dataType === "DATE"
-                    ? setDateFormats(xAxisObject.Name.name, formatOptions.xAxisLabel.xAxisNumberFormat, responsiveDimList.map((d) => [d]), xAxisObject.dataSourceId).map((d) => d[0])
-                    : responsiveDimList;
-        }
-        else {
-            responsiveDimList.forEach((item) => {
-                formatedResponsiveDimList.push(chartJSON.formatedDimensionMap.get(item));
-            });
-        }
-        let isAreaTypeChartAndNotFitChart = !formatOptions.plotArea.fitChart &&
-            (chartJSON.chartType == "Area" ||
-                chartJSON.chartType == "StackArea" ||
-                chartJSON.chartType == "100StackArea");
-        gTag ? "" : (gTag = gTag);
-        let fontStyle = formatOptions.xAxisLabel.xAxisLabelFontStyle;
-        let Rotation = "rotate(" + -formatOptions.xAxisLabel.xAxisLabelRotation + ")";
-        if (formatOptions.dataTableProperties &&
-            formatOptions.dataTableProperties.dataTable &&
-            chartsWithDataTableArray.includes(chartJSON.chartType)) {
-            if (formatOptions.xAxisLabel.xAxisPosition != 1)
-                formatOptions.xAxisLabel.xAxisLabelVisibility = false;
-        }
-        let xaxisLabelPosition = formatOptions.xAxisLabel.xAxisPosition;
-        gTag
-            .append("rect")
-            .attr("transform", `translate(1,${xaxisLabelPosition === 0
-            ? dataTableHeight > 0
-                ? innerHeight - dataTableHeight
-                : innerHeight
-            : xaxisLabelPosition === 1
-                ? -Xlabel
-                : YscaleLeft(0)})`)
-            .attr("height", Xlabel)
-            .attr("width", innerWidth)
-            .attr("fill", formatOptions.xAxisLabel.xAxisLabelVisibility
-            ? formatOptions.xAxisLabel.xAxisBackgroundColor
-                ? formatOptions.xAxisLabel.xAxisBackgroundColor !== "#ffffff"
-                    ? formatOptions.xAxisLabel.xAxisBackgroundColor
-                    : "none"
-                : formatOptions.chartArea.chartAreaColor
-            : formatOptions.chartArea.chartAreaColor);
-        const XaxisG = gTag
-            .append("g")
-            .attr("transform", `translate(0,${xaxisLabelPosition === 0
-            ? dataTableHeight > 0
-                ? innerHeight - dataTableHeight
-                : innerHeight
-            : xaxisLabelPosition === 1
-                ? 0
-                : YscaleLeft(0)})`)
-            .call(Xaxis);
-        let dx = xaxisLabelPosition === 1 ? "5" : "0";
-        let width = formatOptions.xAxisLabel.labelTextWrap
-            ? maxDimensionWidth < height * 0.125
-                ? maxDimensionWidth
-                : height * 0.125
-            : formatOptions.xAxisLabel.xAxisLabelRotation == 0
-                ? barWidth
-                : actualDimesionWidth;
-        let foreignObject = XaxisG.selectAll("g")
-            .append("foreignObject")
-            .attr("class", "testingoverflowing")
-            .style("width", Math.round(width))
-            .style("height", "20px")
-            .attr("transform", (d, i) => `rotate(${xaxisLabelPosition === 1
-            ? -formatOptions.xAxisLabel.xAxisLabelRotation
-            : formatOptions.xAxisLabel.xAxisLabelRotation != 0
-                ? 180 - formatOptions.xAxisLabel.xAxisLabelRotation
-                : 0}) translate (${formatOptions.xAxisLabel.xAxisLabelRotation != 0
-            ? dx + `, -${i == 0 && isAreaTypeChartAndNotFitChart ? 15 : 5}`
-            : -width / 2 + " , " + (xaxisLabelPosition === 1 ? "-15" : "8")})`);
-        if (detectBrowserName() === "safari") {
-            foreignObject
-                .attr("width", formatOptions.xAxisLabel.labelTextWrap
-                ? maxDimensionWidth < height * 0.125
-                    ? maxDimensionWidth
-                    : height * 0.125
-                : Xlabel)
-                .attr("height", "20px");
-        }
-        foreignObject
-            .append("xhtml:h3")
-            .style("transform", detectBrowserName() === "safari"
-            ? ""
-            : xaxisLabelPosition === 1
-                ? ""
-                : formatOptions.xAxisLabel.xAxisLabelRotation != 0
-                    ? "rotate(180deg)"
-                    : "0")
-            .style("white-space", "pre")
-            .style("text-overflow", "ellipsis")
-            .style("text-align", formatOptions.xAxisLabel.xAxisLabelRotation != 0 ? "start" : "center")
-            .style("user-select", "none")
-            .style("margin", 0)
-            .style("padding", 0)
-            .style("overflow", "hidden")
-            .style("font-family", formatOptions.xAxisLabel.xAxisLabelFontFamily)
-            // .style("font-style", formatOptions.xAxisLabel.xAxisLabelFontStyle)
-            .style("color", formatOptions.xAxisLabel.xAxisLabelColor)
-            .style("font-size", formatOptions.xAxisLabel.xAxisLabelFontSize + "px")
-            .style("font-style", fontStyle.includes("Italic") ? "Italic" : "")
-            .style("text-decoration", fontStyle.includes("Underline") ? "Underline" : "")
-            .style("font-weight", fontStyle.includes("Bold") ? "Bold" : "")
-            .style("visibility", formatOptions.xAxisLabel.xAxisLabelVisibility ? "visible" : "hidden")
-            .attr("title", (d, i) => ("" + formatedResponsiveDimList[i]).trim())
-            .html((d, i) => ("" + formatedResponsiveDimList[i]).trim());
-        //default text elements are set to hidden
-        XaxisG.selectAll("text").style("visibility", formatOptions.xAxisLabel.xAxisLabelVisibility ? "hidden" : "hidden");
-        XaxisG.selectAll("line")
-            .style("stroke", formatOptions.plotArea.gridLinesColor)
-            .style("shape-rendering", "crispEdges")
-            .attr("visibility", formatOptions.xAxisLabel.xAxisLabelVisibility
-            ? "visible"
-            : formatOptions.plotArea.gridLinesVeritcal
-                ? "visible"
-                : "hidden");
-        XaxisG.select(".domain")
-            .style("stroke", formatOptions.xAxisLabel.xAxisColor)
-            .attr("stroke-width", formatOptions.xAxisLabel.xAxisWidth
-            ? formatOptions.xAxisLabel.xAxisWidth
-            : formatOptions.plotArea.plotAreaBorderThickness)
-            .style("shape-rendering", "crispEdges");
-        return gTag;
-    }
-    catch (error) {
-        // loggerService.logError(error, {
-        //   componentName: this.constructor.name,
-        //   functionName: "initXaxis",
-        // });
-    }
-}
-export function detectBrowserName() {
-    let browserName = "";
-    try {
-        const agent = window.navigator.userAgent.toLowerCase();
-        switch (true) {
-            case agent.indexOf("edge") > -1:
-                browserName = "edge";
-                break;
-            case agent.indexOf("opr") > -1 && !!window.opr:
-                browserName = "opera";
-                break;
-            case agent.indexOf("chrome") > -1 && !!window.chrome:
-                browserName = "chrome";
-                break;
-            case agent.indexOf("trident") > -1:
-                browserName = "ie";
-                break;
-            case agent.indexOf("firefox") > -1:
-                browserName = "firefox";
-                break;
-            case agent.indexOf("safari") > -1 || agent.indexOf("applewebkit") > -1:
-                browserName = "safari";
-                break;
-            default:
-                browserName = "other";
-                break;
-        }
-    }
-    catch (error) {
-        // Optionally log error if loggerService is available
-        // console.error(error);
-    }
-    finally {
-        return browserName;
-    }
-}
-export function setDateFormats(name, format, dimensionmarks, datasourceId) {
-    try {
-        let formatdim = [];
-        let daysArray = [
-            "01",
-            "02",
-            "03",
-            "04",
-            "05",
-            "06",
-            "07",
-            "08",
-            "09",
-            "10",
-            "11",
-            "12",
-            "13",
-            "14",
-            "15",
-            "16",
-            "17",
-            "18",
-            "19",
-            "20",
-            "21",
-            "22",
-            "23",
-            "24",
-            "25",
-            "26",
-            "27",
-            "28",
-            "29",
-            "30",
-            "31",
-        ];
-        if (this.ObjService.dateKeyMap[datasourceId] &&
-            this.ObjService.dateKeyMap[datasourceId].indexOf(name) != -1) {
-            if (format == "Month") {
-                var fix = [
-                    "January",
-                    "February",
-                    "March",
-                    "April",
-                    "May",
-                    "June",
-                    "July",
-                    "August",
-                    "September",
-                    "October",
-                    "November",
-                    "December",
-                ];
-                dimensionmarks.forEach((e) => {
-                    let { day, month, year } = this.getDateFromDimension(e[0]);
-                    if (fix[month]) {
-                        formatdim.push(fix[month]);
-                    }
-                    else {
-                        formatdim.push(e);
-                    }
-                });
-            }
-            else if (format == "Quarter") {
-                var fix = [
-                    "Quarter1",
-                    "Quarter1",
-                    "Quarter1",
-                    "Quarter2",
-                    "Quarter2",
-                    "Quarter2",
-                    "Quarter3",
-                    "Quarter3",
-                    "Quarter3",
-                    "Quarter4",
-                    "Quarter4",
-                    "Quarter4",
-                ];
-                dimensionmarks.forEach((e) => {
-                    let { day, month, year } = this.getDateFromDimension(e[0]);
-                    if (fix[month]) {
-                        formatdim.push(fix[month] + "-" + year);
-                    }
-                    else {
-                        formatdim.push(e);
-                    }
-                });
-            }
-            else if (format == "Year") {
-                dimensionmarks.forEach((e) => {
-                    let { day, month, year } = this.getDateFromDimension(e[0]);
-                    if (year) {
-                        formatdim.push(year);
-                    }
-                    else {
-                        formatdim.push(e);
-                    }
-                });
-            }
-            else if (format == "Default") {
-                var fix = [
-                    "Jan",
-                    "Feb",
-                    "Mar",
-                    "Apr",
-                    "May",
-                    "June",
-                    "July",
-                    "Aug",
-                    "Sept",
-                    "Oct",
-                    "Nov",
-                    "Dec",
-                ];
-                dimensionmarks.forEach((e) => {
-                    let { day, month, year } = this.getDateFromDimension(e[0]);
-                    if (daysArray[day] && fix[month] && year) {
-                        formatdim.push([daysArray[day] + "-" + fix[month] + "-" + year]);
-                    }
-                    else {
-                        formatdim.push(e);
-                    }
-                });
-            }
-            else if (format == "DD-MM-YYYY") {
-                var fix = [
-                    "01",
-                    "02",
-                    "03",
-                    "04",
-                    "05",
-                    "06",
-                    "07",
-                    "08",
-                    "09",
-                    "10",
-                    "11",
-                    "12",
-                ];
-                dimensionmarks.forEach((e) => {
-                    let { day, month, year } = this.getDateFromDimension(e[0]);
-                    if (daysArray[day] && fix[month] && year) {
-                        formatdim.push([daysArray[day] + "-" + fix[month] + "-" + year]);
-                    }
-                    else {
-                        formatdim.push(e);
-                    }
-                });
-            }
-            else if (format == "MM-DD-YYYY") {
-                var fix = [
-                    "01",
-                    "02",
-                    "03",
-                    "04",
-                    "05",
-                    "06",
-                    "07",
-                    "08",
-                    "09",
-                    "10",
-                    "11",
-                    "12",
-                ];
-                dimensionmarks.forEach((e) => {
-                    let { day, month, year } = this.getDateFromDimension(e[0]);
-                    if (daysArray[day] && fix[month] && year) {
-                        formatdim.push([fix[month] + "-" + daysArray[day] + "-" + year]);
-                    }
-                    else {
-                        formatdim.push(e);
-                    }
-                });
-            }
-            else if (format == "DD-MM") {
-                var fix = [
-                    "01",
-                    "02",
-                    "03",
-                    "04",
-                    "05",
-                    "06",
-                    "07",
-                    "08",
-                    "09",
-                    "10",
-                    "11",
-                    "12",
-                ];
-                dimensionmarks.forEach((e) => {
-                    let { day, month, year } = this.getDateFromDimension(e[0]);
-                    if (daysArray[day] && fix[month]) {
-                        formatdim.push([daysArray[day] + "-" + fix[month]]);
-                    }
-                    else {
-                        formatdim.push(e);
-                    }
-                });
-            }
-            else if (format == "YYYY-MM-DD") {
-                var fix = [
-                    "01",
-                    "02",
-                    "03",
-                    "04",
-                    "05",
-                    "06",
-                    "07",
-                    "08",
-                    "09",
-                    "10",
-                    "11",
-                    "12",
-                ];
-                dimensionmarks.forEach((e) => {
-                    let { day, month, year } = this.getDateFromDimension(e[0]);
-                    if (daysArray[day] && fix[month] && year) {
-                        formatdim.push([year + "-" + fix[month] + "-" + daysArray[day]]);
-                    }
-                    else {
-                        formatdim.push(e);
-                    }
-                });
-            }
-            else if (format == "YYYY-MM") {
-                var fix = [
-                    "01",
-                    "02",
-                    "03",
-                    "04",
-                    "05",
-                    "06",
-                    "07",
-                    "08",
-                    "09",
-                    "10",
-                    "11",
-                    "12",
-                ];
-                dimensionmarks.forEach((e) => {
-                    let { day, month, year } = this.getDateFromDimension(e[0]);
-                    if (fix[month] && year) {
-                        formatdim.push([year + "-" + fix[month]]);
-                    }
-                    else {
-                        formatdim.push(e);
-                    }
-                });
-            }
-            else if (format == "YYYY") {
-                var fix = [
-                    "01",
-                    "02",
-                    "03",
-                    "04",
-                    "05",
-                    "06",
-                    "07",
-                    "08",
-                    "09",
-                    "10",
-                    "11",
-                    "12",
-                ];
-                dimensionmarks.forEach((e) => {
-                    let { day, month, year } = this.getDateFromDimension(e[0]);
-                    if (year) {
-                        formatdim.push([year]);
-                    }
-                    else {
-                        formatdim.push(e);
-                    }
-                });
-            }
-            else if (format == "MM-YYYY") {
-                var fix = [
-                    "01",
-                    "02",
-                    "03",
-                    "04",
-                    "05",
-                    "06",
-                    "07",
-                    "08",
-                    "09",
-                    "10",
-                    "11",
-                    "12",
-                ];
-                dimensionmarks.forEach((e) => {
-                    let { day, month, year } = this.getDateFromDimension(e[0]);
-                    if (fix[month] && year) {
-                        formatdim.push([fix[month] + "-" + year]);
-                    }
-                    else {
-                        formatdim.push(e);
-                    }
-                });
-            }
-            else if (format == "MMM-YY") {
-                var fix = [
-                    "Jan",
-                    "Feb",
-                    "Mar",
-                    "Apr",
-                    "May",
-                    "Jun",
-                    "Jul",
-                    "Aug",
-                    "Sep",
-                    "Oct",
-                    "Nov",
-                    "Dec",
-                ];
-                dimensionmarks.forEach((e) => {
-                    let { day, month, year } = this.getDateFromDimension(e[0]);
-                    let modifiedyear = this.getYearInCorrectFormat(year);
-                    if (fix[month] && modifiedyear) {
-                        formatdim.push([fix[month] + "-" + modifiedyear]);
-                    }
-                    else {
-                        formatdim.push(e);
-                    }
-                });
-            }
-            else if (format == "YY-MMM") {
-                var fix = [
-                    "Jan",
-                    "Feb",
-                    "Mar",
-                    "Apr",
-                    "May",
-                    "Jun",
-                    "Jul",
-                    "Aug",
-                    "Sep",
-                    "Oct",
-                    "Nov",
-                    "Dec",
-                ];
-                dimensionmarks.forEach((e) => {
-                    let { day, month, year } = this.getDateFromDimension(e[0]);
-                    let modifiedyear = this.getYearInCorrectFormat(year);
-                    if (fix[month] && modifiedyear) {
-                        formatdim.push([modifiedyear + "-" + fix[month]]);
-                    }
-                    else {
-                        formatdim.push(e);
-                    }
-                });
-            }
-            else if (format == "MMMM-YY") {
-                var fix = [
-                    "January",
-                    "February",
-                    "March",
-                    "April",
-                    "May",
-                    "June",
-                    "July",
-                    "August",
-                    "September",
-                    "October",
-                    "November",
-                    "December",
-                ];
-                dimensionmarks.forEach((e) => {
-                    let { day, month, year } = this.getDateFromDimension(e[0]);
-                    let modifiedyear = this.getYearInCorrectFormat(year);
-                    if (fix[month] && modifiedyear) {
-                        formatdim.push([fix[month] + "-" + modifiedyear]);
-                    }
-                    else {
-                        formatdim.push(e);
-                    }
-                });
-            }
-            else if (format == "MMMM-YYYY") {
-                var fix = [
-                    "January",
-                    "February",
-                    "March",
-                    "April",
-                    "May",
-                    "June",
-                    "July",
-                    "August",
-                    "September",
-                    "October",
-                    "November",
-                    "December",
-                ];
-                dimensionmarks.forEach((e) => {
-                    let { day, month, year } = this.getDateFromDimension(e[0]);
-                    if (fix[month] && year) {
-                        formatdim.push([fix[month] + "-" + year]);
-                    }
-                    else {
-                        formatdim.push(e);
-                    }
-                });
-            }
-            else if (format == "DD-MMM") {
-                var fix = [
-                    "Jan",
-                    "Feb",
-                    "Mar",
-                    "Apr",
-                    "May",
-                    "Jun",
-                    "Jul",
-                    "Aug",
-                    "Sep",
-                    "Oct",
-                    "Nov",
-                    "Dec",
-                ];
-                dimensionmarks.forEach((e) => {
-                    let { day, month, year } = this.getDateFromDimension(e[0]);
-                    if (fix[month] && daysArray[day]) {
-                        formatdim.push([daysArray[day] + "-" + fix[month]]);
-                    }
-                    else {
-                        formatdim.push(e);
-                    }
-                });
-            }
-            else if (format == "DD-MMM-YY") {
-                var fix = [
-                    "Jan",
-                    "Feb",
-                    "Mar",
-                    "Apr",
-                    "May",
-                    "Jun",
-                    "Jul",
-                    "Aug",
-                    "Sep",
-                    "Oct",
-                    "Nov",
-                    "Dec",
-                ];
-                dimensionmarks.forEach((e) => {
-                    let { day, month, year } = this.getDateFromDimension(e[0]);
-                    let modifiedyear = this.getYearInCorrectFormat(year);
-                    if (fix[month] && daysArray[day] && modifiedyear) {
-                        formatdim.push([
-                            daysArray[day] + "-" + fix[month] + "-" + modifiedyear,
-                        ]);
-                    }
-                    else {
-                        formatdim.push(e);
-                    }
-                });
-            }
-            else if (format == "DD-MMM-YYYY") {
-                var fix = [
-                    "Jan",
-                    "Feb",
-                    "Mar",
-                    "Apr",
-                    "May",
-                    "Jun",
-                    "Jul",
-                    "Aug",
-                    "Sep",
-                    "Oct",
-                    "Nov",
-                    "Dec",
-                ];
-                dimensionmarks.forEach((e) => {
-                    let { day, month, year } = this.getDateFromDimension(e[0]);
-                    if (fix[month] && daysArray[day] && year) {
-                        formatdim.push([daysArray[day] + "-" + fix[month] + "-" + year]);
-                    }
-                    else {
-                        formatdim.push(e);
-                    }
-                });
-            }
-            else
-                return dimensionmarks;
-            return formatdim;
-        }
-        else {
-            return dimensionmarks;
-        }
-    }
-    catch (error) {
-        // this.loggerService.logError(error, {
-        //   componentName: this.constructor.name,
-        //   functionName: "setDateFormats",
-        // });
-    }
-}
-export function initScrollingSvgClippath(formatOptions, Margin, width) {
-    // if (!formatOptions.plotArea.fitChart) {
-    //   document.getElementById(`defs${svgIndex}`)?.remove();
-    //   g.append("defs")
-    //     .attr("id", `defs${svgIndex}`)
-    //     .append("clipPath")
-    //     .attr("id", `clipPath${svgIndex}`)
-    //     .append("rect")
-    //     .attr(
-    //       "width",
-    //       Width -
-    //         Margin.left -
-    //         Margin.right -
-    //         (!parentReference.fromPreviewWindow &&
-    //         !formatOptions.plotArea.fitChart
-    //           ? 4
-    //           : 0)
-    //     )
-    //     .attr(
-    //       "height",
-    //       Height -
-    //         Margin.top +
-    //         (formatOptions.legends.legendPosition == "Right" ? Xlabel : 0)
-    //     )
-    //     .attr(
-    //       "transform",
-    //       `translate(${Margin.left},${
-    //         formatOptions.xAxisLabel.xAxisPosition == 1 ||
-    //         formatOptions.xAxisLabel.xAxisPosition == 2
-    //           ? Margin.top - Xlabel
-    //           : Margin.top
-    //       })`
-    //     ); // Adjust these values as needed
-    //   // Position the clipPath relative to the SVG container
-    //   document
-    //     .querySelector(".floating-div" + svgIndex)
-    //     .addEventListener("scroll", updateClipPathPosition);
-    //   floatingSvg.attr("clip-path", `url(#clipPath${svgIndex})`);
-    // }
-}
-export function drawSeriesLabels(formatOptions, floatingTagG, seriesLabels) {
-    if (formatOptions.seriesLabel.seriesLabelVisibility) {
-        let fontStyle = formatOptions.seriesLabel.seriesLabelFontStyle;
-        const groups = floatingTagG
-            .selectAll(".seriesLabels")
-            .data(seriesLabels)
-            .enter()
-            .filter((d) => d.isVisible)
-            .append("g")
-            .attr("class", "seriesLabels")
-            .attr("transform", (d) => `translate(${d.xPosition}, ${d.yPosition})`);
-        groups
-            .append("foreignObject")
-            .attr("width", (d) => d.width)
-            .attr("height", (d) => d.height)
-            .append("xhtml:div")
-            .style("display", "flex")
-            .style("align-items", "center")
-            .style("justify-content", "center")
-            .style("width", "100%")
-            .style("height", "100%")
-            .append("xhtml:div")
-            .style("width", "fit-content")
-            .style("height", "100%")
-            .style("padding-left", "5px")
-            .style("padding-right", "5px")
-            .style("border-radius", "4px")
-            .style("background-color", formatOptions.seriesLabel.seriesLabelBackgroundColor)
-            .style("font-size", formatOptions.seriesLabel.seriesLabelFontSize + "px")
-            .style("font-family", formatOptions.seriesLabel.seriesLabelFontFamily)
-            .style("font-style", fontStyle.includes("Italic") ? "italic" : "")
-            .style("text-decoration", fontStyle.includes("Underline") ? "underline" : "")
-            .style("font-weight", fontStyle.includes("Bold") ? "bold" : "")
-            .style("color", "black")
-            .text((d) => d.seriesValue);
-    }
-}
-export function setXaxistitle(formatOptions, barChart, svg, Margin, Xlabel, height, Xtitle, chartType, Ylabel, staticSvgInnerWidth, innerHeight) {
-    try {
-        let xAxisLabelPosition = formatOptions.xAxisLabel.xAxisPosition;
-        let chartsWithXScrollFlag = true;
-        let chartsWithYScrollFlag = false;
-        let object = svg
-            .append("foreignObject")
-            .attr("visibility", barChart
-            ? formatOptions.yAxisTitle.yAxisTitleVisibility
-                ? "visible"
-                : "hidden"
-            : formatOptions.xAxisTitle.xAxisTitleVisibility
-                ? "visible"
-                : "hidden")
-            .attr("transform", !formatOptions.plotArea.fitChart && chartsWithXScrollFlag
-            ? `translate(${Margin.left},${Margin.top +
-                innerHeight +
-                (formatOptions?.xAxisLabel?.xAxisPosition == 1 ? 0 : Xlabel)})`
-            : !formatOptions.plotArea.fitChart && chartsWithYScrollFlag
-                ? `translate(${Margin.left},${height - Xtitle - 5})`
-                : `translate(${Margin.left},${Margin.top +
-                    innerHeight +
-                    (chartsWithXScrollFlag
-                        ? formatOptions?.xAxisLabel?.xAxisPosition == 1
-                            ? 0
-                            : Xlabel
-                        : chartType == actualChartTypes.tornadoChart
-                            ? Xlabel + 5
-                            : Ylabel + 5)})`
-        // `translate(${Margin.left},${Margin.top + innerHeight + (chartsWithXScrollFlag ? (formatOptions?.xAxisLabel?.xAxisPosition == "1" ? 0 : Xlabel) : (attributes.type == ActualChartTypes.TornadoChart) ? Xlabel + 5 : Ylabel + 5) })`
-        )
-            .attr("class", "xAxisTitle")
-            .attr("width", staticSvgInnerWidth)
-            .attr("height", Xtitle + "px")
-            .style("z-index", "9999");
-        if (formatOptions.xAxisTitle.xAxisDynamicTitleText.length !== 0) {
-            object
-                .append("xhtml:div")
-                .style("color", "rgba(119,119,119)")
-                .attr("title", formatOptions.xAxisTitle.xAxisTitleText)
-                .style("white-space", "pre")
-                .style("text-overflow", "ellipsis")
-                .html(formatOptions.xAxisTitle.xAxisTitleHTML
-                ? formatOptions.xAxisTitle.xAxisTitleHTML
-                : formatOptions.xAxisTitle.xAxisTitleText);
-        }
-        else {
-            object
-                .append("xhtml:h3")
-                .style("white-space", "pre")
-                .style("text-overflow", "ellipsis")
-                .style("user-select", "none")
-                .style("margin", 0)
-                .style("padding", 0)
-                .style("text-align", "center")
-                .style("overflow", "hidden")
-                .attr("class", "xAxisTitle")
-                .style("padding-top", "5px")
-                .style("text-anchor", "middle")
-                .style("color", "rgba(119,119,119)")
-                .style("font-size", "12px")
-                .style("font-size", formatOptions.xAxisTitle.xAxisTitleFontSize)
-                .style("font-family", formatOptions.xAxisTitle.xAxisTitleFontFamily)
-                .style("font-style", formatOptions.xAxisTitle.xAxisTitleFontStyle)
-                .attr("title", formatOptions.xAxisTitle.xAxisTitleText !== "~$~Dimension"
-                ? formatOptions.xAxisTitle.xAxisTitleText
-                : "")
-                .html(formatOptions.xAxisTitle.xAxisTitleText !== "~$~Dimension"
-                ? formatOptions.xAxisTitle.xAxisTitleText
-                : "");
-        }
-        return svg;
-    }
-    catch (error) {
-        // loggerService.logError(error, {
-        //   componentName: constructor.name,
-        //   functionName: "setXaxistitle",
-        // });
-    }
-}
-export function Yaxistitle(innerHeight, formatOptions, dataTableHeight, barChart, svg, Margin, Ytitle, Ylabel) {
-    try {
-        let currentInnerHeight = dataTableHeight > 0
-            ? innerHeight - dataTableHeight
-            : innerHeight
-                ? innerHeight
-                : innerHeight;
-        let object = svg
-            .append("foreignObject")
-            .attr("visibility", barChart
-            ? formatOptions.xAxisTitle.xAxisTitleVisibility
-                ? "visible"
-                : "hidden"
-            : formatOptions.yAxisTitle.yAxisTitleVisibility
-                ? "visible"
-                : "hidden")
-            .attr("x", `-${Margin.top + currentInnerHeight}`)
-            .attr("y", Margin.left - Ytitle - Ylabel + 5)
-            .attr("class", "yAxisTitle")
-            .attr("transform", "rotate(-90)")
-            .attr("width", currentInnerHeight)
-            .attr("height", Ytitle + "px");
-        if (formatOptions.yAxisTitle.yAxisDynamicTitleText.length !== 0) {
-            object
-                .append("xhtml:div")
-                .style("color", "rgba(119,119,119)")
-                .attr("title", formatOptions.yAxisTitle.yAxisTitleText)
-                .style("white-space", "pre")
-                .style("text-overflow", "ellipsis")
-                .html(formatOptions.yAxisTitle.yAxisTitleHTML
-                ? formatOptions.yAxisTitle.yAxisTitleHTML
-                : formatOptions.yAxisTitle.yAxisTitleText);
-        }
-        else {
-            object
-                .append("xhtml:h3")
-                .style("white-space", "pre")
-                .style("text-overflow", "ellipsis")
-                .style("user-select", "none")
-                .style("margin", 0)
-                .style("padding", 0)
-                .style("text-align", "center")
-                .style("overflow", "hidden")
-                .attr("class", "xAxisTitle")
-                // .style("padding-top", "5px")
-                .style("text-anchor", "middle")
-                .style("color", "rgba(119,119,119)")
-                .style("font-size", "12px")
-                .style("font-size", formatOptions.yAxisTitle.yAxisTitleFontSize)
-                .style("font-family", formatOptions.yAxisTitle.yAxisTitleFontFamily)
-                .style("font-style", formatOptions.yAxisTitle.yAxisTitleFontStyle)
-                .attr("title", formatOptions.yAxisTitle.yAxisTitleText)
-                .html(formatOptions.yAxisTitle.yAxisTitleText);
-        }
-        return svg;
-    }
-    catch (error) {
-        // loggerService.logError(error, {
-        //   componentName: constructor.name,
-        //   functionName: "Yaxistitle",
-        // });
-    }
-}
-export function setChartTitle(svg, formatOptions, width, chartTitleHeight) {
-    let object = svg
-        .append("foreignObject")
-        .attr("visibility", formatOptions.chartTitle.chartTitleVisibility ? "visible" : "hidden")
-        .attr("transform", `translate(2,2)`)
-        .attr("class", "chartTitle")
-        .attr("width", width)
-        .attr("height", chartTitleHeight + "px");
-    // if (formatOptions.chartTitle.chartTitleVisibility) {
-    // let chartTitleStyle = formatOptions.chartTitle;
-    if (formatOptions.chartTitle.dynamicTitleText.length !== 0) {
-        object
-            .append("xhtml:div")
-            .style("color", "rgba(119,119,119)")
-            .attr("title", formatOptions.chartTitle.chartTitleText)
-            .style("white-space", "pre")
-            .style("text-overflow", "ellipsis")
-            .html(formatOptions.chartTitle.chartTitleHTML
-            ? formatOptions.chartTitle.chartTitleHTML
-            : formatOptions.chartTitle.chartTitleText);
-    }
-    else {
-        object
-            .append("xhtml:div")
-            .style("white-space", "pre")
-            .style("user-select", "none")
-            .style("text-overflow", "ellipsis")
-            .style("overflow", "hidden")
-            .attr("class", "chartTiltle")
-            .attr("id", "chartTitleId")
-            .style("text-anchor", "start")
-            .style("color", "rgba(119,119,119)")
-            .style("font-size", "16px")
-            .style("font-family", formatOptions.chartTitle.chartTitleFontFamily)
-            .attr("title", formatOptions.chartTitle.chartTitleText)
-            .html(formatOptions.chartTitle.chartTitleText);
-    }
-}
-//This function is to set the Chart Area Background Color and Chart Bordor.
-export function initSvgBox(svg, formatOptions, widgetId, chartsWithXScrollFlag, chartsWithYScrollFlag) {
-    try {
-        let fixedSVG = document.getElementById(widgetId);
-        let floatingDiv = document.getElementById(`checkForNoDataImage${widgetId}`);
-        let svgDomBunny;
-        if (!formatOptions.plotArea.fitChart &&
-            (chartsWithXScrollFlag || chartsWithYScrollFlag)) {
-            svgDomBunny = floatingDiv;
-            //removing properties of fixed svg
-            fixedSVG ? (fixedSVG.style.backgroundColor = "") : "";
-            fixedSVG ? (fixedSVG.style.border = "") : "";
-        }
-        else {
-            svgDomBunny = fixedSVG;
-            floatingDiv ? (floatingDiv.style.backgroundColor = "") : "";
-            floatingDiv ? (floatingDiv.style.border = "") : "";
-        }
-        let style = formatOptions.chartArea.chartAreaBorderStyle;
-        let isBorderEnable = formatOptions.chartArea.chartAreaBorder;
-        let borderColor = formatOptions.chartArea.chartAreaBorderColor;
-        let borderWidth = formatOptions.chartArea.chartAreaBorderThickness + "px";
-        let borderStyle = style == 1 ? "solid" : style == 2 ? "dashed" : "dotted";
-        if (svgDomBunny) {
-            if (formatOptions) {
-                svgDomBunny.style.backgroundColor =
-                    formatOptions.chartArea.chartAreaColor;
-                svgDomBunny.style.border =
-                    svgDomBunny && isBorderEnable
-                        ? `${borderWidth} ${borderStyle} ${borderColor}`
-                        : "";
-            }
-            else {
-                svgDomBunny.style.backgroundColor = "#F7F7F7";
-            }
-        }
-        return svg;
-        // this.setTextAnnotation(); // to be added later
-    }
-    catch (error) {
-        // this.loggerService.logError(error, {
-        //   componentName: this.constructor.name,
-        //   functionName: "initSvgBox",
-        // });
-    }
-}
-export function lineAnnotations(chartData, Xscale, YscaleLeft, YscaleRight, Margin, d3Annotation, labelExcludeList, individualLabelColor, oldAnnotationList, formatOptions, chartType) {
-    try {
-        let annotationType = formatOptions.annotation.annotationType ?? "1";
-        if (formatOptions.annotation.annotationVisibility) {
-            let Disable = [annotationType == "1" ? "connector" : ""];
-            const self = this;
-            let labelData = [];
-            let makeAnnotations = d3Annotation.annotation();
-            let connector = formatOptions.annotation.connectorType;
-            let labelType = formatOptions.annotation.annotationVisibility;
-            let fontStyle = formatOptions.annotation.annotationFontStyle;
-            let connectorType = formatOptions.annotation.connectorType
-                ? formatOptions.annotation.connectorType.toLowerCase()
-                : "None";
-            oldAnnotationList = conditionallyResetOldAnnotations(oldAnnotationList, formatOptions, chartType);
-            let AnnotationsList = [];
-            let finalAnnotationList = [];
-            if (oldAnnotationList.length != 0) {
-                oldAnnotationList.forEach((d) => {
-                    d.dx = (d.dx * this.Width) / d.width;
-                    d.dy = (d.dy * this.Height) / d.height;
-                    d.width = this.Width;
-                    d.height = this.Height;
-                });
-            }
-            switch (labelType) {
-                case 2:
-                    chartData.forEach((d) => labelData.push({
-                        Dimension: d.data[0].dimension,
-                        Measure: d.data[0].value,
-                        Legend: d.data[0].legend,
-                        LabelPosition: d.properties.dataLabelPosition,
-                        Labelcolor: d.properties.labelColor,
-                        Axis: d.properties.axis,
-                    }));
-                    break;
-                case 3:
-                    chartData.forEach((d) => labelData.push({
-                        Dimension: d.data[d.data.length - 1].dimension,
-                        Measure: d.data[d.data.length - 1].value,
-                        Legend: d.data[d.data.length - 1].legend,
-                        LabelPosition: d.properties.dataLabelPosition,
-                        Labelcolor: d.properties.labelColor,
-                        Axis: d.properties.axis,
-                    }));
-                    break;
-                case 4:
-                    chartData.forEach((d) => labelData.push({
-                        Dimension: d.data[0].dimension,
-                        Measure: d.data[0].value,
-                        Legend: d.data[0].legend,
-                        LabelPosition: d.properties.dataLabelPosition,
-                        Labelcolor: d.properties.labelColor,
-                        Axis: d.properties.axis,
-                    }));
-                    chartData.forEach((d) => labelData.push({
-                        Dimension: d.data[d.data.length - 1].dimension,
-                        Measure: d.data[d.data.length - 1].value,
-                        Legend: d.data[d.data.length - 1].legend,
-                        LabelPosition: d.properties.dataLabelPosition,
-                        Labelcolor: d.properties.labelColor,
-                        Axis: d.properties.axis,
-                    }));
-                    break;
-                case 1:
-                    for (let i = 0; i < chartData[0].data.length; i++) {
-                        chartData.forEach((d) => labelData.push({
-                            Dimension: d.data[i].dimension,
-                            Measure: d.data[i].value,
-                            Legend: d.data[i].legend,
-                            LabelPosition: d.properties.dataLabelPosition,
-                            Labelcolor: d.properties.labelColor,
-                            Axis: d.properties.axis,
-                        }));
-                    }
-                    break;
-                case 5:
-                    labelData;
-                    break;
-                case 6:
-                    chartData.forEach((d) => {
-                        let annotationVisibility = d.properties.individualAnnotationVisibility;
-                        switch (annotationVisibility) {
-                            case 1:
-                                for (let i = 0; i < chartData[0].data.length; i++) {
-                                    // labelData.push(d.Data[i]);
-                                    labelData.push({
-                                        Dimension: d.data[i].dimension,
-                                        Measure: d.data[i].value,
-                                        Legend: d.data[i].legend,
-                                        LabelPosition: d.properties.dataLabelPosition,
-                                        Labelcolor: d.properties.labelColor,
-                                        Axis: d.properties.axis,
-                                    });
-                                }
-                                break;
-                            case 2:
-                                labelData;
-                                break;
-                            case 3:
-                                // labelData.push(d.Data[0]);
-                                labelData.push({
-                                    Dimension: d.data[0].dimension,
-                                    Measure: d.data[0].value,
-                                    Legend: d.data[0].legend,
-                                    LabelPosition: d.properties.dataLabelPosition,
-                                    Labelcolor: d.properties.labelColor,
-                                    Axis: d.properties.axis,
-                                });
-                                break;
-                            case 4:
-                                // labelData.push(d.Data[chartData[0].Data.length - 1]);
-                                labelData.push({
-                                    Dimension: d.data[d.data.length - 1].dimension,
-                                    Measure: d.data[d.data.length - 1].value,
-                                    Legend: d.data[d.data.length - 1].legend,
-                                    LabelPosition: d.properties.dataLabelPosition,
-                                    Labelcolor: d.properties.labelColor,
-                                    Axis: d.properties.axis,
-                                });
-                                break;
-                            case 5:
-                                // labelData.push(d.Data[0]);
-                                // labelData.push(d.Data[chartData[0].Data.length - 1]);
-                                labelData.push({
-                                    Dimension: d.data[0].dimension,
-                                    Measure: d.data[0].value,
-                                    Legend: d.data[0].legend,
-                                    LabelPosition: d.properties.dataLabelPosition,
-                                    Labelcolor: d.properties.labelColor,
-                                    Axis: d.properties.axis,
-                                });
-                                labelData.push({
-                                    Dimension: d.data[d.data.length - 1].dimension,
-                                    Measure: d.data[d.data.length - 1].value,
-                                    Legend: d.data[d.data.length - 1].legend,
-                                    LabelPosition: d.properties.dataLabelPosition,
-                                    Labelcolor: d.properties.labelColor,
-                                    Axis: d.properties.axis,
-                                });
-                                break;
-                        }
-                    });
-                    break;
-            }
-            let maxValue = 0;
-            labelData.forEach((d, i) => {
-                if (maxValue < d.Measure) {
-                    maxValue = d.Measure;
-                }
-            });
-            let minValue = maxValue * 0.1;
-            labelData.forEach((d, i) => {
-                let singleAnnotation = {
-                    note: {
-                        label: d.Measure >= 1000000000 &&
-                            formatOptions.annotation.annotationNumberFormat === ".2s"
-                            ? Math.round(d.Measure / 1000000000) + "B"
-                            : this.tooltipNumberFormat(d.Measure, formatOptions.annotation.annotationDecimalPrecision, formatOptions.annotation.annotationNumberFormat, formatOptions.annotation.annotationDisplayUnits ||
-                                formatOptions.plotArea.plotAreaDisplayUnits),
-                        align: "middle",
-                    },
-                    data: {
-                        x: d.Dimension,
-                        y: { measure: d.Measure, axis: d.Axis },
-                        position: parseInt(d.LabelPosition),
-                        currentLegend: d.Legend.replaceAll(" ", "-"),
-                        isVisible: true,
-                    },
-                    dx: 0,
-                    dy: 0,
-                    connector: {
-                        end: connectorType,
-                        curve: this.connecterCurve[formatOptions.annotation.ConnectorCurve],
-                    },
-                    disable: Disable,
-                    subject: {
-                        height: 15,
-                        width: 15,
-                    },
-                    color: d.Labelcolor,
-                    type: this.annotationTypeforCharts(d3Annotation, annotationType),
-                    height: this.Height,
-                    width: this.Width,
-                };
-                this.finalLegendseries.includes(d.Legend) &&
-                    this.responsiveXaxisLabel().includes(d.Dimension) &&
-                    !labelExcludeList.includes(d.Legend) &&
-                    (d.Axis == "Primary"
-                        ? YscaleLeft(d.Measure) <= this.innerHeight &&
-                            YscaleLeft(d.Measure) >= 0
-                        : YscaleRight(d.Measure) <= this.innerHeight &&
-                            YscaleRight(d.Measure) >= 0)
-                    ? AnnotationsList.push(singleAnnotation)
-                    : null;
-            });
-            AnnotationsList = AnnotationsList.filter((d) => d.data.y.measure != 0);
-            oldAnnotationList =
-                oldAnnotationList.length == 0 ? AnnotationsList : oldAnnotationList;
-            AnnotationsList.forEach((newAnnotation) => {
-                let newLegend = newAnnotation.data.x + "-" + newAnnotation.data.y.measure;
-                if (oldAnnotationList.length != 0) {
-                    oldAnnotationList.forEach((oldAnnotation) => {
-                        let oldLegend = oldAnnotation.data.x + "-" + oldAnnotation.data.y.measure;
-                        if (newLegend == oldLegend) {
-                            newAnnotation.dx = oldAnnotation.dx;
-                            newAnnotation.dy = oldAnnotation.dy;
-                            newAnnotation.data.isVisible =
-                                oldAnnotation.data.isVisible ?? true;
-                            newAnnotation.connector.points = oldAnnotation.connector.points;
-                            if (formatOptions.annotation.annotationType == 5 &&
-                                newAnnotation.dx == 0 &&
-                                newAnnotation.dy == 0) {
-                                newAnnotation.connector["points"] = [
-                                    [0, 0],
-                                    [0, 0],
-                                ];
-                            }
-                        }
-                    });
-                }
-                finalAnnotationList.push(newAnnotation);
-            });
-            makeAnnotations
-                .editMode(formatOptions.annotation.annotationDraggable &&
-                !(self.attributes.fromReportBuilder == undefined &&
-                    this.svgIndex != undefined))
-                .accessors({
-                x: function (d) {
-                    return Xscale(d.x);
-                },
-                y: function (d) {
-                    if (d.y.axis == "Primary") {
-                        return self.dataLabelsPosition(d.y.measure, d.position, YscaleLeft, minValue, d.prevValue, "Line");
-                    }
-                    else {
-                        return self.dataLabelsPosition(d.y.measure, d.position, YscaleRight, minValue, d.prevValue, "Line");
-                    }
-                    // return YscaleLeft(d.y) + Margin.top;
-                },
-            })
-                .on("dragend", function (annotation) {
-                if (!annotation.data.isVisible) {
-                    annotation.data.isVisible = true;
-                    oldAnnotationList.forEach((d) => {
-                        if (d.data.x == annotation.data.x &&
-                            d.data.y.measure == annotation.data.y.measure) {
-                            annotations
-                                .selectAll(".annotation-note-label")
-                                .filter((d) => d.data.x == annotation.data.x &&
-                                d.data.y.measure == annotation.data.y.measure)
-                                .attr("display", "block");
-                            d.data.isVisible = true;
-                        }
-                    });
-                }
-                oldAnnotationList.forEach((d) => {
-                    if (d.data.x == annotation.data.x &&
-                        d.data.y.measure == annotation.data.y.measure) {
-                        d.dx = (annotation._dx * self.Width) / d.width;
-                        d.dy = (annotation._dy * self.Height) / d.height;
-                        d.connector["points"] = annotation.connector.points;
-                    }
-                });
-                if (self.attributes.Id) {
-                    let index = self.parentReference.objService.Charts.findIndex((d) => d.Id == self.attributes.Id);
-                    self.parentReference.objService.Charts[index].SourceData.ChartStyle.Style.plotArea.dataLabelsCoordinates =
-                        oldAnnotationList;
-                }
-                else {
-                    self.parentReference.objService.tempAnnotationArray =
-                        oldAnnotationList;
-                }
-                annotations
-                    .selectAll(".connector")
-                    .attr("hoverId", (d) => d.data.currentLegend)
-                    .style("stroke", self.basestyle.annotation.connectorColor || "#ccc")
-                    .attr("stroke-dasharray", self.connectedStyle[self.basestyle.annotation.connectorStyle]);
-                annotations
-                    .selectAll(`.connector-${connectorType}`)
-                    .attr("fill", self.basestyle.annotation.connectorColor || "#ccc")
-                    .style("stroke", self.basestyle.annotation.connectorColor || "#ccc");
-                annotations
-                    .selectAll(".note-line")
-                    .attr("hoverId", (d) => d.data.currentLegend)
-                    .style("stroke", self.basestyle.annotation.connectorColor || "#ccc")
-                    .attr("stroke-dasharray", self.connectedStyle[self.basestyle.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");
-            })
-                .on("noteclick", function (annotation) {
-                if (self.basestyle.annotation.annotationDraggable &&
-                    !(self.attributes.fromReportBuilder == undefined &&
-                        self.svgIndex != undefined)) {
-                    annotation.data.isVisible = false;
-                    oldAnnotationList.forEach((d) => {
-                        if (d.data.x == annotation.data.x &&
-                            d.data.y.measure == annotation.data.y.measure) {
-                            annotations
-                                .selectAll(".annotation-note-label")
-                                .filter((d) => d.data.x == annotation.data.x &&
-                                d.data.y.measure == annotation.data.y.measure)
-                                .attr("display", "none");
-                            d.data.isVisible = false;
-                        }
-                    });
-                    if (self.attributes.Id) {
-                        let index = self.parentReference.objService.Charts.findIndex((d) => d.Id == self.attributes.Id);
-                        self.parentReference.objService.Charts[index].SourceData.ChartStyle.Style.plotArea.dataLabelsCoordinates =
-                            oldAnnotationList;
-                    }
-                    else {
-                        self.parentReference.objService.tempAnnotationArray =
-                            oldAnnotationList;
-                    }
-                    annotations
-                        .selectAll(".annotation-note-label")
-                        .filter((d) => d.data && !d.data.isVisible)
-                        .style("display", "none");
-                }
-            })
-                .accessorsInverse({
-                x: (d) => Xscale.invert(d.x),
-                y: (d) => YscaleLeft.invert(d.y),
-            })
-                .notePadding(0)
-                .annotations(finalAnnotationList);
-            let annotations = this.floatingSvg
-                .append("g")
-                .attr("class", "annotation-group parentGroup")
-                .attr("transform", `translate(${this.Margin.left},${this.Margin.top})`)
-                .style("fill", formatOptions.annotation.annotationColor)
-                .style("font-family", formatOptions.annotation.annotationFontFamily)
-                .style("font-size", formatOptions.annotation.annotationFontSize)
-                .style("font-style", fontStyle.includes("Italic") ? "Italic" : "")
-                .style("text-decoration", fontStyle.includes("Underline") ? "Underline" : "")
-                .style("font-weight", fontStyle.includes("Bold") ? "Bold" : "")
-                .call(makeAnnotations);
-            annotations.selectAll("rect").style("visibility", "hidden");
-            annotations.selectAll(".annotation-subject").remove();
-            annotations
-                .selectAll(".connector")
-                .style("stroke", formatOptions.annotation.connectorColor || "#ccc")
-                .attr("stroke-dasharray", this.connectedStyle[formatOptions.annotation.connectorStyle]);
-            annotations
-                .selectAll(`.connector-${connectorType}`)
-                .attr("fill", formatOptions.annotation.connectorColor || "#ccc")
-                .style("stroke", formatOptions.annotation.connectorColor || "#ccc");
-            annotations
-                .selectAll(".note-line")
-                .style("stroke", formatOptions.annotation.connectorColor || "#ccc")
-                .attr("stroke-dasharray", this.connectedStyle[formatOptions.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");
-            formatOptions.annotation.annotationType == 1 &&
-                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("text")
-                .append("text")
-                .style("fill", formatOptions.annotation.annotationColor !== "#ffffff"
-                ? formatOptions.annotation.annotationColor
-                : "none");
-            annotations
-                .selectAll("tspan")
-                .attr("hoverId", (d) => d.data.currentLegend)
-                .style("visibility", (d) => parseFloat(d.data.y.measure) == 0 &&
-                formatOptions.annotation.annotationHideZeroValues
-                ? "hidden"
-                : "visible");
-            if (this.parentReference.objService &&
-                this.parentReference.objService.tempAnnotationArray) {
-                this.parentReference.objService.tempAnnotationArray =
-                    finalAnnotationList;
-            }
-        }
-    }
-    catch (error) {
-        // this.loggerService.logError(error, {
-        //   componentName: this.constructor.name,
-        //   functionName: "lineAnnotations",
-        // });
-    }
-}
-const conditionallyResetOldAnnotations = (oldAnnotationList, formatOptions, chartType) => {
-    try {
-        let path = [
-            actualChartTypes.pie,
-            actualChartTypes.sunburst,
-        ].includes(chartType)
-            ? "plotArea"
-            : "annotation";
-        const isDraggable = formatOptions[path].annotationDraggable;
-        // const measureInfo =
-        //   this.parentReference.objService.dataSourceDimensionUniqueValueMap?.[
-        //     "PublicFields"
-        //   ]?.["[Measure Names]"]?.[0];
-        const isMeasureReplaced = false; //measureInfo?.isMeasureReplaced;
-        oldAnnotationList =
-            isDraggable && !isMeasureReplaced ? oldAnnotationList ?? [] : [];
-        return oldAnnotationList;
-    }
-    catch (error) {
-        // this.loggerService.logError(error, {
-        //   componentName: this.constructor.name,
-        //   functionName: "conditionallyResetOldAnnotations",
-        // });
-    }
-};