pace-chart-lib 0.0.7 → 0.0.8

package/dist/components/Charts/ChartsWithoutAxis/ChartsWithoutAxisFunctions.js

@@ -0,0 +1,815 @@
+import { calculateWidthHeightDynamically, getLabelsFromAlgo } from "../ChartsWithAxis/ChartsWithAxisFunctions";
+import { fontStyleOptions, staticLegendPosition } from "../Core/Common.types";
+import { convertStringToNumber, getNumberWithFormatFunction, preCalculateTextDimensions } from "../Core/CommonFunctions";
+const fileName = "ChartsWithoutAxisFunctions.ts";
+/**
+ * Calculates margins for Bubble and Scatter charts based on various parameters.
+ * @param width // Width of the chart container.
+ * @param height // Height of the chart container.
+ * @param maxMeasure // Maximum measure value.
+ * @param formatOptions // Formatting options for the chart.
+ * @param maxDimension // Maximum dimension value.
+ * @param maxLegendDimensions // Maximum dimensions for the legend.
+ * @returns /** An object containing calculated margins and other related dimensions.
+ */
+export function marginCalculationForBubbleScatter(width, height, maxMeasure, formatOptions, maxDimension, maxLegendDimensions) {
+    try {
+        // chartsWithDataTableArray.includes(chartType);
+        let margins = { top: 0, left: 0, right: 0, bottom: 0 };
+        let width15Percent = width * 0.15 * 0.8;
+        let maxLegendWidth = maxLegendDimensions[0];
+        let legendMargin = width15Percent < maxLegendWidth + 10
+            ? width15Percent
+            : maxLegendWidth + 10;
+        // (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 totalHeight = formatOptions.plotArea.numberOfBubbles ? 20 : 0;
+        let dimensionHeightWidth = preCalculateTextDimensions(getNumberWithFormatFunction(formatOptions.xAxisLabel.xAxisDisplayUnits, formatOptions.xAxisLabel.xAxisNumberFormat, formatOptions.xAxisLabel.xAxisLabelDecimalPrecision ?? "2")(maxDimension).toString(), convertStringToNumber(formatOptions.xAxisLabel.xAxisLabelFontSize), formatOptions.xAxisLabel.xAxisLabelFontFamily, formatOptions.xAxisLabel.xAxisLabelRotation);
+        let maxDimensionWidth = dimensionHeightWidth.width + 10;
+        let xTitle = formatOptions.xAxisTitle.xAxisTitleVisibility
+            ? formatOptions.xAxisTitle.xAxisDynamicTitleText.length !== 0
+                ? preCalculateTextDimensions(formatOptions.xAxisTitle.xAxisTitleHTML, undefined, undefined).height
+                : preCalculateTextDimensions(formatOptions.xAxisTitle.xAxisTitleText, 13, "Helvetica").height
+            : 0;
+        xTitle = xTitle > height * 0.1 ? height * 0.1 : xTitle;
+        let xLabel = formatOptions.xAxisLabel.xAxisLabelVisibility
+            ? maxDimensionWidth
+            : 0;
+        let yTitle = formatOptions.yAxisTitle.yAxisTitleVisibility
+            ? formatOptions.yAxisTitle.yAxisDynamicTitleText.length !== 0
+                ? preCalculateTextDimensions(formatOptions.yAxisTitle.yAxisTitleHTML, undefined, undefined).height
+                : preCalculateTextDimensions(formatOptions.yAxisTitle.yAxisTitleText, 13, "Helvetica").height
+            : 0;
+        yTitle = yTitle > width * 0.1 ? width * 0.1 : yTitle;
+        let yLabel = formatOptions.yAxisLabel.yAxisLabelVisibility
+            ? preCalculateTextDimensions(getNumberWithFormatFunction(formatOptions.yAxisLabel.yAxisDisplayUnits, formatOptions.yAxisLabel.yAxisNumberFormat, formatOptions.yAxisLabel.yAxisLabelDecimalPrecision ?? "2")(maxMeasure).toString(), convertStringToNumber(formatOptions.yAxisLabel.yAxisLabelFontSize), formatOptions.yAxisLabel.yAxisLabelFontFamily, formatOptions.yAxisLabel.yAxisLabelRotation).width + 10
+            : 0;
+        let chartTitleHeight = formatOptions.chartTitle.chartTitleVisibility
+            ? formatOptions.chartTitle.dynamicTitleText.length !== 0
+                ? preCalculateTextDimensions(formatOptions.chartTitle.chartTitleHTML, undefined, undefined).height
+                : preCalculateTextDimensions(formatOptions.chartTitle.chartTitleText, 16, "Helvetica").height
+            : 0;
+        chartTitleHeight =
+            chartTitleHeight > height * 0.1 ? height * 0.1 : chartTitleHeight;
+        let legendPosition = formatOptions.legends.legendPosition;
+        let legendVisibility = formatOptions.legends.legendVisibility;
+        let stackDataForTotals = false;
+        if (!legendVisibility)
+            legendPosition = "None";
+        // if (chartType == "Waterfall" && !stackDataForTotals)
+        //   legendPosition = "None";
+        switch (legendPosition) {
+            case staticLegendPosition.none:
+                // margin.top = (formatOptions.type == "Waterfall") ? Ctitle + 10 : Ctitle + (normalizedChart ? 12 : 0);
+                margins.top = chartTitleHeight + 5;
+                margins.bottom = xTitle + xLabel + 5 + totalHeight;
+                margins.right =
+                    15;
+                margins.left = yTitle + yLabel + 5;
+                break;
+            case staticLegendPosition.top:
+                margins.top = 40 + chartTitleHeight;
+                margins.bottom = xTitle + xLabel + 5 + totalHeight;
+                ;
+                margins.right =
+                    15;
+                margins.left = yTitle + yLabel + 5;
+                break;
+            case staticLegendPosition.right:
+                margins.right = legendMargin + 35;
+                margins.top = chartTitleHeight + 5;
+                margins.bottom = xTitle + xLabel + 5 + totalHeight;
+                ;
+                margins.left = yTitle + yLabel + 5;
+                break;
+            case staticLegendPosition.bottom:
+                margins.bottom = 40 + xLabel + xTitle + totalHeight;
+                ;
+                margins.top = chartTitleHeight + 5;
+                margins.right = 15;
+                margins.left = yTitle + yLabel + 5;
+                break;
+            case staticLegendPosition.left:
+                margins.left = legendMargin + yTitle + yLabel + 33;
+                margins.top = chartTitleHeight + 5;
+                margins.bottom = xTitle + xLabel + 5 + totalHeight;
+                ;
+                margins.right = 15;
+        }
+        if (formatOptions.xAxisLabel.xAxisPosition &&
+            formatOptions.xAxisLabel.xAxisPosition == "1") {
+            margins.bottom = margins.bottom - xLabel;
+            margins.top = margins.top + xLabel;
+        }
+        let manualMarginArray = formatOptions.chartPadding.paddingArrayLTRB;
+        if (manualMarginArray) {
+            margins.top += manualMarginArray[1];
+            margins.bottom += manualMarginArray[3];
+            margins.right += manualMarginArray[2];
+            margins.left += manualMarginArray[0];
+        }
+        let innerHeight = height - margins.top - margins.bottom;
+        let innerWidth = width - margins.left - margins.right;
+        return {
+            margins,
+            yLabel,
+            xLabel,
+            yTitle,
+            xTitle,
+            chartTitleHeight,
+            legendMargin,
+            innerHeight,
+            innerWidth,
+        };
+    }
+    catch (error) {
+        logError(fileName, "marginCalculationForBubbleScatter", error);
+    }
+}
+export function customYscaleLabelFormatting(formatOptions, YminLeft, YmaxLeft) {
+    try {
+        let customYaxisIntervalValue = parseFloat(formatOptions.yAxisLabel.yAxisIntervalText);
+        let customYaxisMaxValue = parseFloat(formatOptions.yAxisLabel.yAxisMaxText);
+        let customYaxisMinValue = parseFloat(formatOptions.yAxisLabel.yAxisMinText);
+        if (formatOptions.yAxisLabel.yAxisIntervalsVisibility) {
+            // if (formatOptions.xAxisLabel.xAxisPosition == "2") {
+            //     formatOptions.xAxisLabel.xAxisPosition = "0";
+            // }
+            customYaxisMinValue =
+                formatOptions.yAxisLabel.yAxisMinText !== ""
+                    ? parseFloat(formatOptions.yAxisLabel.yAxisMinText)
+                    : YminLeft;
+            let maxValue = formatOptions.yAxisLabel.yAxisMaxText;
+            customYaxisMaxValue = maxValue.length > 0 ? parseFloat(maxValue) : YmaxLeft;
+            customYaxisMaxValue ? (YmaxLeft = customYaxisMaxValue) : null;
+        }
+        else {
+            customYaxisMaxValue = YmaxLeft;
+            customYaxisMinValue = YminLeft;
+            customYaxisIntervalValue = undefined;
+        }
+        let yMinLength = YminLeft
+            ? getNumberWithFormatFunction(formatOptions.yAxisLabel.yAxisDisplayUnits, formatOptions.yAxisLabel.yAxisNumberFormat, formatOptions.yAxisLabel.yAxisLabelDecimalPrecision ?? "2")(YminLeft).toString().length
+            : 0;
+        let yMaxLength = YmaxLeft
+            ? getNumberWithFormatFunction(formatOptions.yAxisLabel.yAxisDisplayUnits, formatOptions.yAxisLabel.yAxisNumberFormat, formatOptions.yAxisLabel.yAxisLabelDecimalPrecision ?? "2")(YmaxLeft).toString().length
+            : 0;
+        let customYaxisMaxValueLength = customYaxisMaxValue
+            ? getNumberWithFormatFunction(formatOptions.yAxisLabel.yAxisDisplayUnits, formatOptions.yAxisLabel.yAxisNumberFormat, formatOptions.yAxisLabel.yAxisLabelDecimalPrecision ?? "2")(customYaxisMaxValue).toString().length
+            : 0;
+        let customYaxisMinValueLength = customYaxisMinValue
+            ? getNumberWithFormatFunction(formatOptions.yAxisLabel.yAxisDisplayUnits, formatOptions.yAxisLabel.yAxisNumberFormat, formatOptions.yAxisLabel.yAxisLabelDecimalPrecision ?? "2")(customYaxisMinValue).toString().length
+            : 0;
+        // primary scale : margin adjustments
+        let longestMeasure = yMinLength < yMaxLength ? YmaxLeft : YminLeft;
+        if (customYaxisMinValue) {
+            let tempLength = customYaxisMinValueLength < yMaxLength ? YmaxLeft : customYaxisMinValue;
+            longestMeasure =
+                longestMeasure < tempLength
+                    ? tempLength
+                    : longestMeasure;
+        }
+        if (customYaxisMaxValue) {
+            let tempLength = customYaxisMaxValueLength > yMinLength ? customYaxisMaxValue : YminLeft;
+            longestMeasure =
+                longestMeasure < tempLength
+                    ? tempLength
+                    : longestMeasure;
+        }
+        if (customYaxisMaxValue && customYaxisMinValue) {
+            longestMeasure =
+                customYaxisMaxValueLength > customYaxisMinValueLength
+                    ? customYaxisMaxValue
+                    : customYaxisMinValue;
+        }
+        return { longestMeasure, customYaxisIntervalValue, customYaxisMaxValue, customYaxisMinValue };
+    }
+    catch (error) {
+        logError(fileName, "customYscaleLabelFormatting", error);
+    }
+}
+export function customXscaleLabelFormatting(formatOptions, xMinLeft, xMaxLeft) {
+    try {
+        let customXaxisIntervalValue = parseFloat(formatOptions.xAxisLabel.xAxisIntervalText);
+        let customXaxisMaxValue = parseFloat(formatOptions.xAxisLabel.xAxisMaxText);
+        let customXaxisMinValue = parseFloat(formatOptions.xAxisLabel.xAxisMinText);
+        if (formatOptions.xAxisLabel.xAxisIntervalsVisibility) {
+            // if (formatOptions.xAxisLabel.xAxisPosition == "2") {
+            //     formatOptions.xAxisLabel.xAxisPosition = "0";
+            // }
+            customXaxisMinValue =
+                formatOptions.xAxisLabel.xAxisMinText !== ""
+                    ? parseFloat(formatOptions.xAxisLabel.xAxisMinText)
+                    : xMinLeft;
+            let maxValue = formatOptions.xAxisLabel.xAxisMaxText.toString();
+            customXaxisMaxValue = maxValue.length > 0 ? parseFloat(maxValue) : xMaxLeft;
+            customXaxisMaxValue ? (xMaxLeft = customXaxisMaxValue) : null;
+        }
+        else {
+            customXaxisMaxValue = xMaxLeft;
+            customXaxisMinValue = xMinLeft;
+            customXaxisIntervalValue = undefined;
+        }
+        let yMinLength = xMinLeft
+            ? getNumberWithFormatFunction(formatOptions.xAxisLabel.xAxisDisplayUnits, formatOptions.xAxisLabel.xAxisNumberFormat, formatOptions.xAxisLabel.xAxisLabelDecimalPrecision ?? "2")(xMinLeft).toString().length
+            : 0;
+        let yMaxLength = xMaxLeft
+            ? getNumberWithFormatFunction(formatOptions.xAxisLabel.xAxisDisplayUnits, formatOptions.xAxisLabel.xAxisNumberFormat, formatOptions.xAxisLabel.xAxisLabelDecimalPrecision ?? "2")(xMaxLeft).toString().length
+            : 0;
+        let customXaxisMaxValueLength = customXaxisMaxValue
+            ? getNumberWithFormatFunction(formatOptions.xAxisLabel.xAxisDisplayUnits, formatOptions.xAxisLabel.xAxisNumberFormat, formatOptions.xAxisLabel.xAxisLabelDecimalPrecision ?? "2")(customXaxisMaxValue).toString().length
+            : 0;
+        let customXaxisMinValueLength = customXaxisMinValue
+            ? getNumberWithFormatFunction(formatOptions.xAxisLabel.xAxisDisplayUnits, formatOptions.xAxisLabel.xAxisNumberFormat, formatOptions.xAxisLabel.xAxisLabelDecimalPrecision ?? "2")(customXaxisMinValue).toString().length
+            : 0;
+        // primary scale : margin adjustments
+        let longestDimension = yMinLength < yMaxLength ? xMaxLeft : xMinLeft;
+        if (customXaxisMinValue) {
+            let tempLength = customXaxisMinValueLength < yMaxLength ? xMaxLeft : customXaxisMinValue;
+            longestDimension =
+                longestDimension < tempLength
+                    ? tempLength
+                    : longestDimension;
+        }
+        if (customXaxisMaxValue) {
+            let tempLength = customXaxisMaxValueLength > yMinLength ? customXaxisMaxValue : xMinLeft;
+            longestDimension =
+                longestDimension < tempLength
+                    ? tempLength
+                    : longestDimension;
+        }
+        if (customXaxisMaxValue && customXaxisMinValue) {
+            longestDimension =
+                customXaxisMaxValueLength > customXaxisMinValueLength
+                    ? customXaxisMaxValue
+                    : customXaxisMinValue;
+        }
+        return { longestDimension, customXaxisIntervalValue, customXaxisMaxValue, customXaxisMinValue };
+    }
+    catch (error) {
+        logError(fileName, "customXscaleLabelFormatting", error);
+    }
+}
+/**
+ * Sets the X-axis title on the SVG chart, adjusting visibility, positioning, and styling based on format options and chart type.
+ *
+ * @param {TDefaultChartFormatOptionsType} formatOptions - Chart format options including axis title settings and visibility.
+ * @param {boolean} barChart - Flag indicating if the chart is a bar chart.
+ * @param {any} svg - D3 selection of the SVG element where the X-axis title will be appended.
+ * @param {TMargin} margin - Margin object containing top, left, right, and bottom margins.
+ * @param {number} xLabel - Height offset for the X-axis label.
+ * @param {number} height - Total height of the SVG/chart container.
+ * @param {number} xTitle - Height allocated for the X-axis title element.
+ * @param {string} chartType - The type of chart (e.g., "bar", "line", etc.).
+ * @param {number} yLabel - Y-axis label offset (used for positioning in some cases).
+ * @param {number} innerWidth - Inner width of the static SVG container.
+ * @param {number} innerHeight - Height of the inner chart area (excluding margins).
+ *
+ * @returns {any} The modified SVG selection with the appended X-axis title element.
+ */
+export function setXaxistitle(formatOptions, barChart, svg, margin, xLabel, height, xTitle, chartType, yLabel, innerWidth, 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 == "tornado"
+                            ? 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", innerWidth)
+            .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
+                : "");
+        }
+    }
+    catch (error) {
+        logError(fileName, "setXaxistitle", error);
+    }
+}
+/**
+ * Adds a Y-axis title to the SVG chart, handling visibility, positioning, rotation, and styling based on format options.
+ *
+ * @param {number} innerHeight - The height of the inner chart area (excluding margins).
+ * @param {TDefaultChartFormatOptionsType} formatOptions - Chart formatting options, including Y-axis title settings.
+ * @param {number} dataTableHeight - Height of any data table below the chart, used to adjust positioning.
+ * @param {boolean} barChart - Whether the chart is a bar chart.
+ * @param {any} svg - D3 selection of the SVG element where the Y-axis title will be appended.
+ * @param {TMargin} margin - Margins around the chart.
+ * @param {number} yTitle - Height allocated for the Y-axis title element.
+ * @param {number} yLabel - Offset for the Y-axis label, used for positioning.
+ *
+ * @returns {any} The SVG selection with the appended Y-axis title.
+ */
+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) {
+        logError(fileName, "yAxistitle", error);
+    }
+}
+/**
+* Generates an array of Y-axis labels based on provided min, max values,
+* chart dimensions, format options, and optional custom min/max values.
+*
+* @param {number} Ymax - The maximum Y value from data or chart.
+* @param {number} Ymin - The minimum Y value from data or chart.
+* @param {number} innerHeight - The inner height of the chart area in pixels.
+* @param {TDefaultChartFormatOptionsType} formatOptions - Configuration options for formatting the axis labels.
+* @param {TChartJSON} chartJSON - Chart metadata including Y axis min/max values.
+* @param {number} customYaxisMinValue - Optional custom minimum Y-axis value.
+* @param {number} customYaxisMaxValue - Optional custom maximum Y-axis value.
+*
+* @returns {{ yAxisLabelArray: number[], customTickValue?: number }} Object containing the array of Y-axis labels and optionally the computed custom tick count.
+*/
+// 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, innerHeight, formatOptions, customYaxisMinValue, customYaxisMaxValue) {
+    try {
+        let customYaxisIntervalValue = parseFloat(formatOptions.yAxisLabel.yAxisIntervalText);
+        let yAxisLabelArray = [];
+        let customTickValue;
+        if (customYaxisIntervalValue &&
+            customYaxisIntervalValue !== 0 &&
+            customYaxisIntervalValue !== undefined) {
+            let minValue = customYaxisMinValue || customYaxisMinValue == 0
+                ? customYaxisMinValue
+                : Ymin;
+            let maxValue = customYaxisMaxValue || customYaxisMaxValue == 0
+                ? customYaxisMaxValue
+                : Ymax;
+            if (minValue < 0) {
+                customTickValue = Math.floor((maxValue - minValue) / customYaxisIntervalValue);
+            }
+            else {
+                customTickValue = Math.floor(maxValue / customYaxisIntervalValue);
+            }
+            let minRequiredTicks = 18;
+            customYaxisMaxValue || customYaxisMaxValue == 0
+                ? (Ymax = customYaxisMaxValue)
+                : "";
+            let tickvalue = customYaxisMinValue || customYaxisMinValue == 0
+                ? 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 (parseFloat(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;
+                }
+            }
+        }
+        else {
+            // // Algorithm from aishwarya
+            // let labelWidthPx = calculateWidthHeightDynamically(
+            //     (customYaxisMaxValue || chartJSON.yMaxLeft).toString(),
+            //     formatOptions.yAxisLabel.yAxisLabelFontSize,
+            //     formatOptions.yAxisLabel.yAxisLabelFontFamily,
+            //     0
+            // );
+            // yAxisLabelArray = getLabelsFromAlgo(
+            //     customYaxisMinValue || chartJSON.yMinLeft,
+            //     customYaxisMaxValue || chartJSON.yMaxLeft,
+            //     innerHeight,
+            //     labelWidthPx[0]
+            // );
+            customTickValue =
+                innerHeight / 30;
+        }
+        return { yAxisLabelArray, customTickValue };
+    }
+    catch (e) {
+        logError(fileName, "responsiveYaxisLabel", e);
+    }
+}
+export function responsiveXaxisLabelForNumericValue(xMax, xMin, innerWidth, formatOptions, customXaxisMinValue, customXaxisMaxValue, innerHeight, barChart) {
+    try {
+        let customXaxisIntervalValue = parseFloat(formatOptions.xAxisLabel.xAxisIntervalText);
+        let xAxisLabelArray = [];
+        let customTickValue;
+        if (customXaxisIntervalValue &&
+            customXaxisIntervalValue !== 0 &&
+            customXaxisIntervalValue !== undefined) {
+            let minValue = customXaxisMinValue || customXaxisMinValue == 0
+                ? customXaxisMinValue
+                : xMin;
+            let maxValue = customXaxisMaxValue || customXaxisMaxValue == 0
+                ? customXaxisMaxValue
+                : xMax;
+            if (minValue < 0) {
+                customTickValue = Math.floor((maxValue - minValue) / customXaxisIntervalValue);
+            }
+            else {
+                customTickValue = Math.floor(maxValue / customXaxisIntervalValue);
+            }
+            let minRequiredTicks = 18;
+            customXaxisMaxValue || customXaxisMaxValue == 0
+                ? (xMax = customXaxisMaxValue)
+                : "";
+            let tickvalue = customXaxisMinValue || customXaxisMinValue == 0
+                ? customXaxisMinValue
+                : xMin < 0
+                    ? Math.round(xMin)
+                    : 0;
+            xAxisLabelArray.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) {
+                    customXaxisIntervalValue = (maxValue - tickvalue) / 100;
+                }
+                else {
+                    customXaxisIntervalValue = maxValue / 100;
+                }
+            }
+            customTickValue = customTickValue < 100 ? customTickValue : 100;
+            if (customTickValue > minRequiredTicks) {
+                for (let interval = 0; interval < parseInt(customTickValue); interval++) {
+                    tickvalue += customXaxisIntervalValue;
+                    if (parseFloat(tickvalue.toFixed(5)) <= xMax) {
+                        xAxisLabelArray.push(tickvalue);
+                    }
+                    else
+                        break;
+                }
+            }
+            else {
+                for (let interval = 0; interval < minRequiredTicks; interval++) {
+                    tickvalue += customXaxisIntervalValue;
+                    if (tickvalue <= xMax) {
+                        xAxisLabelArray.push(tickvalue);
+                    }
+                    else
+                        break;
+                }
+            }
+        }
+        else {
+            // Algorithm from aishwarya
+            let labelWidthPx = calculateWidthHeightDynamically((customXaxisMaxValue || xMax).toString(), formatOptions.xAxisLabel.xAxisLabelFontSize, formatOptions.xAxisLabel.xAxisLabelFontFamily, 0);
+            xAxisLabelArray = getLabelsFromAlgo(customXaxisMinValue || xMin, customXaxisMaxValue || xMax, barChart ? innerHeight : innerWidth, labelWidthPx[0]);
+            customTickValue =
+                innerWidth / 30;
+        }
+        return { xAxisLabelArray, customTickValue };
+    }
+    catch (e) {
+        logError(fileName, "responsiveXaxisLabel", e);
+    }
+}
+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(fontStyleOptions.italic) ? fontStyleOptions.italic : "")
+            .style("text-decoration", fontStyle.includes(fontStyleOptions.underline) ? fontStyleOptions.underline : "")
+            .style("font-weight", fontStyle.includes(fontStyleOptions.bold) ? fontStyleOptions.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);
+    }
+    catch (error) {
+        logError(fileName, "initYaxis", error);
+    }
+}
+export function initXaxis(gTag, formatOptions, dataTableHeight, xLabel, xAxis, innerHeight, innerWidth, margins, yScale) {
+    try {
+        let fontStyle = formatOptions.xAxisLabel.xAxisLabelFontStyle;
+        let xaxisLabelPosition = formatOptions.xAxisLabel.xAxisPosition;
+        let labelRotation = formatOptions.xAxisLabel.xAxisLabelRotation;
+        labelRotation = parseInt(labelRotation);
+        // gTag
+        //     .append("rect")
+        //     .attr("transform", `translate(0,${innerHeight})`)
+        //     .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 yAxisG = gTag.append("g")
+        //     .attr(
+        //         "transform",
+        //         `translate(0,${xaxisLabelPosition === "0"
+        //             ? innerHeight
+        //             : xaxisLabelPosition === "1"
+        //                 ? 0
+        //                 : yScale(0)
+        //         })`
+        //     )
+        //     .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.xAxisLabel.xAxisLabelColor !== "#ffffff"
+        //             ? formatOptions.xAxisLabel.xAxisLabelColor
+        //             : "none"
+        //     )
+        //     .style("user-select", "none")
+        //     .style("font-size", formatOptions.xAxisLabel.xAxisLabelFontSize)
+        //     .style("font-family", formatOptions.xAxisLabel.xAxisLabelFontFamily)
+        //     .style("font-style", formatOptions.xAxisLabel.xAxisLabelFontStyle)
+        //     .style("font-style", fontStyle.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : "")
+        //     .style(
+        //         "text-decoration",
+        //         fontStyle.includes(fontStyleOptions.underline) ? fontStyleOptions.underline : ""
+        //     )
+        //     .style("font-weight", fontStyle.includes(fontStyleOptions.bold) ? fontStyleOptions.bold : "")
+        //     .attr(
+        //         "visibility",
+        //         formatOptions.xAxisLabel.xAxisLabelVisibility ? "visible" : "hidden"
+        //     );
+        // yAxisG.select(".domain")
+        //     .style("shape-rendering", "crispEdges")
+        //     .style("stroke", formatOptions.xAxisLabel.xAxisColor)
+        //     .attr(
+        //         "stroke-width",
+        //         formatOptions.xAxisLabel.xAxisWidth
+        //             ? formatOptions.xAxisLabel.xAxisWidth
+        //             : formatOptions.plotArea.plotAreaBorderThickness
+        //     );
+        gTag
+            .append("rect")
+            .attr("transform", `translate(1,${xaxisLabelPosition === "0"
+            ? dataTableHeight > 0
+                ? innerHeight - dataTableHeight
+                : innerHeight
+            : xaxisLabelPosition === "1"
+                ? -xLabel
+                : yScale(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"
+            ? innerHeight
+            : xaxisLabelPosition === "1"
+                ? 0
+                : yScale(0)})`)
+            .call(xAxis);
+        let dx = xaxisLabelPosition === "1" ? "5" : "0";
+        let foreignObject = XaxisG.selectAll("g")
+            .append("foreignObject")
+            .attr("class", "testingoverflowing")
+            .style("width", Math.round(xLabel))
+            .style("height", "20px")
+            .attr("transform", (d, i) => `rotate(${xaxisLabelPosition === "1"
+            ? -labelRotation
+            : labelRotation != 0
+                ? 180 - labelRotation
+                : 0}) translate (${labelRotation != 0
+            ? dx + `, -5`
+            : -xLabel / 2 + " , " + (xaxisLabelPosition === "1" ? "-15" : "8")})`);
+        foreignObject
+            .append("xhtml:h3")
+            .style("transform", xaxisLabelPosition === "1"
+            ? ""
+            : labelRotation != 0
+                ? "rotate(180deg)"
+                : "0")
+            .style("white-space", "pre")
+            .style("text-overflow", "ellipsis")
+            .style("text-align", labelRotation != 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(fontStyleOptions.italic) ? fontStyleOptions.italic : "")
+            .style("text-decoration", fontStyle.includes(fontStyleOptions.underline) ? fontStyleOptions.underline : "")
+            .style("font-weight", fontStyle.includes(fontStyleOptions.bold) ? fontStyleOptions.bold : "")
+            .style("visibility", formatOptions.xAxisLabel.xAxisLabelVisibility ? "visible" : "hidden")
+            .attr("title", (d, i) => getNumberWithFormatFunction(formatOptions.xAxisLabel.xAxisDisplayUnits, formatOptions.xAxisLabel.xAxisNumberFormat, formatOptions.xAxisLabel.xAxisLabelDecimalPrecision)(d))
+            .html((d, i) => getNumberWithFormatFunction(formatOptions.xAxisLabel.xAxisDisplayUnits, formatOptions.xAxisLabel.xAxisNumberFormat, formatOptions.xAxisLabel.xAxisLabelDecimalPrecision)(d));
+        //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.gridLinesVertical
+                ? "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");
+    }
+    catch (error) {
+        logError(fileName, "initXaxis", error);
+    }
+}
+export const setnumberOfBubbles = (svg, legendPosition, chartFormatOptions, height, width, margins, innnerHeight, xTitleHeight, XLabelHeight, bubbleCount) => {
+    try {
+        if (chartFormatOptions.plotArea.numberOfBubbles) {
+            let currentInnerHeight = legendPosition == "Bottom" ? height - 55 : height - 25;
+            let object = svg
+                .append("foreignObject")
+                .attr("transform", `translate(${margins.left},${currentInnerHeight})`)
+                //.attr("class", "chartTitle")
+                .attr("width", width)
+                .attr("height", "20px");
+            object
+                .append("xhtml:div")
+                .style("white-space", "pre")
+                .style("color", "#000000")
+                .style("font-size", "12px ")
+                .style("text-overflow", "ellipsis")
+                .html((chartFormatOptions.plotArea.totalAlias ? chartFormatOptions.plotArea.totalAliasText : `Total count : `) + (bubbleCount));
+        }
+    }
+    catch (error) {
+        logError(fileName, "setnumberOfBubbles", error);
+    }
+};
+// Dummy logError function for demonstration (should be implemented elsewhere)
+function logError(fileName, functionName, error) {
+    console.error(`[${fileName}] [${functionName}]`, error);
+}