pace-chart-lib 0.0.7 → 0.0.9

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

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