pace-chart-lib 1.0.2 → 1.0.4

package/dist/components/Charts/Core/CommonFunctions.js

@@ -1,1782 +0,0 @@
-import * as d3 from "d3";
-import { calculateWidthHeightDynamically, getNumberWithFormat } from "../ChartsWithAxis/ChartsWithAxisFunctions";
-import { actualChartTypes } from "../ChartsWithAxis/ChartsWithAxisTypes.types";
-import { colorThemeTypes, fontStyleOptions, horizontalLegendAllignment, legendColorMode, staticLegendShape, staticLegendPosition, staticTotalAlignment, staticTotalPosition, verticalLegendAllignment } from "./Common.types";
-import { defaultChartFormatOptions } from "./DefaultProperties.types";
-import { logError } from "../../../Services/ErrorLog";
-const fileName = "CommonFunctions.ts";
-import { chartProperties } from "./DefaultChartDataProperties";
-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 const svgID = "scaling-svg-";
-export function getRandomColor() {
-    try {
-        let letters = "0123456789ABCDEF";
-        let color = "#";
-        for (let i = 0; i < 6; i++) {
-            color += letters[Math.floor(Math.random() * 16)];
-        }
-        return { color };
-    }
-    catch (error) {
-        logError(fileName, "getRandomColor", error);
-    }
-}
-/**
- * Draws chart legends in the specified position with optional scroll behavior,
- * using layout and format options defined in the configuration.
- *
- * @param {number} height - The total height of the chart container.
- * @param {any} svg - The SVG element where the chart and legends are rendered.
- * @param {number[]} maxLegendDimensions - Array with the maximum dimensions [width, height] of the legends.
- * @param {number} chartTitleHeight - Height occupied by the chart title (used to offset legends).
- * @param {number} width - The total width of the chart container.
- * @param {number} legendMargin - Margin to be applied around the legend area.
- * @param {TDefaultChartFormatOptionsType} formatOptions - Formatting options for the chart including legend settings.
- * @param {TSeries[]} seriesData - Array of data series to be represented in the legend.
- * @param {string} chartId - A unique identifier for the chart, used to bind legend elements.
- * @param {string} legendShape - A shape for chart legends.
- *
- * @return {void} - This function does not return anything. It updates the SVG by rendering legends.
- */
-export function drawLegends(height, svg, maxLegendDimensions, chartTitleHeight, width, legendMargin, formatOptions, seriesData, chartId, legendShape) {
-    try {
-        let position = formatOptions.legends.legendPosition;
-        let horizontalLegendAlignment = formatOptions.legends.legendAlignmentTopBottom;
-        let verticalLegendAlignment = formatOptions.legends.legendAlignment;
-        if (formatOptions.legends.legendVisibility) {
-            switch (position) {
-                case staticLegendPosition.none:
-                    break;
-                case staticLegendPosition.right:
-                    let heightRight = !formatOptions.plotArea.fitChart
-                        ? height - chartTitleHeight - 20
-                        : height - chartTitleHeight - 10;
-                    legendsWithScroll(svg, seriesData, width - maxLegendDimensions[0] - 30, chartTitleHeight + 5, legendMargin + 25, heightRight, position, verticalLegendAlignment, legendShape, formatOptions, chartId);
-                    break;
-                case staticLegendPosition.top:
-                    legendsWithScroll(svg, seriesData, 7, chartTitleHeight + 5, width - 10, 30, position, horizontalLegendAlignment, legendShape, formatOptions, chartId);
-                    break;
-                case staticLegendPosition.left:
-                    let heightLeft = !formatOptions.plotArea.fitChart
-                        ? height - chartTitleHeight - 20
-                        : height - chartTitleHeight - 10;
-                    legendsWithScroll(svg, seriesData, 7, chartTitleHeight + 5, legendMargin + 25, heightLeft, position, verticalLegendAlignment, legendShape, formatOptions, chartId);
-                    break;
-                case staticLegendPosition.bottom:
-                    legendsWithScroll(svg, seriesData, 7, height - 25, width - 10, 30, position, horizontalLegendAlignment, legendShape, formatOptions, chartId);
-                    break;
-            }
-        }
-    }
-    catch (error) {
-        logError(fileName, "drawLegends", error);
-    }
-}
-;
-/**
- * @param {string[]} list - Array of legend strings.
- * @param {TDefaultChartFormatOptionsType} formatOptions - Chart formatting options including legend font size and family.
- * @return {{width: number, height: number}} - The calculated width and height of the longest legend text.
- */
-export function calculateMaxLegendWidth(list, formatOptions) {
-    try {
-        let maxLength = 0;
-        let maxLegend = list[0];
-        list.forEach(legend => {
-            //legend.includes("-") ? legend.split("-")[1] :
-            let splitedLegend = legend.includes("~$~") ? legend.split("~$~")[1] : legend.includes("-") ? legend.slice(legend.indexOf("-") + 1) : legend;
-            let splitedLegendLength = splitedLegend.length;
-            if (maxLength < splitedLegendLength) {
-                maxLength = splitedLegendLength;
-                maxLegend = splitedLegend;
-            }
-        });
-        return calculateWidthHeightDynamically(maxLegend, formatOptions.legends.legendFontSize, formatOptions.legends.legendFontFamily);
-    }
-    catch (error) {
-        logError(fileName, "calculateMaxLegendWidth", error);
-    }
-}
-/**
- * Renders markers for line or area chart series on the provided D3 selection.
- * Binds marker shapes, sizes, colors, and handles visibility and interaction (tooltips).
- *
- * @param {d3.Selection<SVGGElement, unknown, null, undefined>} lines - The D3 selection (SVG group) where marker groups will be appended.
- * @param {TSeries[]} chartData - The data array representing chart series, each with data points and properties.
- * @param {string} type - The chart type (e.g., "CombiLine", "Area", "StackArea") affecting marker rendering logic.
- * @param {Function} xScale - D3 scale function for x-axis, used to position markers horizontally.
- * @param {Function} yScale - D3 scale function for y-axis, used to position markers vertically.
- * @param {Function} yScaleRight - D3 scale function for secodary y-axis, used to position markers vertically.
- * @param {Function} tooltipHandle - (Not used in current snippet but assumed) Function to manage tooltip display.
- * @param {TDefaultChartFormatOptionsType} formatOptions - Configuration object for chart formatting and visibility settings.
- * @param {TChartJSON} chartJSON - Object containing chart metadata, formatting info, and dimension mappings.
- * @param {number} secondaryCustomYaxisMaxValue - Maximum value for secondary Y axis scale, used for visibility logic.
- * @param {number} secondaryCustomYaxisMinValue - Minimum value for secondary Y axis scale, used for visibility logic.
- * @param {number} customYaxisMinValue - Minimum value for primary Y axis scale, used for visibility logic.
- * @param {number} customYaxisMaxValue - Maximum value for primary Y axis scale, used for visibility logic.
- * @param {boolean} isNormalizedChart - 100% chart type validation.
- *
- * @returns {void} This function does not return a value; it appends and updates SVG marker elements in the DOM.
- */
-export function lineMarkers(lines, chartData, type, xScale, yScale, yScaleRight, tooltipHandle, formatOptions, chartJSON, secondaryCustomYaxisMaxValue, secondaryCustomYaxisMinValue, customYaxisMinValue, customYaxisMaxValue, isNormalizedChart) {
-    try {
-        let hideZeroValues = formatOptions.plotArea.hideZeroValues;
-        formatOptions.plotArea.plotAreaHideLineAndMarkers === undefined ? formatOptions.plotArea.plotAreaHideLineAndMarkers = true : null;
-        chartData.forEach((d) => d.data.forEach((j) => {
-            j["markerShape"] = (type === "CombiLine" && !formatOptions.plotArea.plotAreaHideLineAndMarkers) ? "None" : d.properties.markerShape ? d.properties.markerShape : "Circle";
-            j["currentMeasure"] = d.properties.currentMeasure;
-        }));
-        chartData.forEach((d) => d.data.forEach((j) => (j["markerColor"] = d.properties.markerColor ? d.properties.markerColor : "Blue")));
-        chartData.forEach((d) => d.data.forEach((j) => (j["markerSize"] =
-            d.properties.markerShape != "None" && d.properties.markerSize && d.properties.markerShape != "None" ? type === "Area" ? formatOptions.plotArea.plotAreaHideLineAndMarkers ? d.properties.markerSize : 0 : d.properties.markerSize : 0)));
-        function Markershapes(Shape) {
-            return Shape == "Square"
-                ? d3.symbolSquare
-                : Shape == "Circle"
-                    ? d3.symbolCircle
-                    : Shape == "Cross"
-                        ? d3.symbolCross
-                        : Shape == "Triangle"
-                            ? d3.symbolTriangle
-                            : Shape == "Star"
-                                ? d3.symbolStar
-                                : Shape == "Diamond"
-                                    ? d3.symbolDiamond
-                                    : Shape == "Wye"
-                                        ? d3.symbolWye
-                                        : d3.symbolCircle;
-        }
-        // JOIN: bind parent marker groups
-        let markerGroups = lines.selectAll(".parentGroup")
-            .data(chartData, d => d.legend);
-        // EXIT old groups
-        // markerGroups.exit().remove();
-        // ENTER new groups
-        let markerGroupsEnter = markerGroups.enter()
-            .append("g")
-            .attr("class", "parentGroup")
-            .attr("hoverId", d => {
-            if (Array.isArray(d.legend) && d.legend.length > 0) {
-                return d.legend.includes("~$~")
-                    ? d.legend.split("~$~")[1].replace(/ /g, "-")
-                    : d.legend.replace(/ /g, "-");
-            }
-            else {
-                return d.legend.replace(/ /g, "-");
-            }
-        });
-        // MERGE all groups
-        let mergedMarkerGroups = markerGroupsEnter.merge(markerGroups);
-        // FOR EACH group: bind marker data and render path elements
-        mergedMarkerGroups.each(function (groupData) {
-            const group = d3.select(this);
-            // JOIN markers to path elements
-            let markers = group.selectAll("path")
-                .data(groupData.data);
-            // EXIT old paths
-            // markers.exit().remove();
-            // ENTER new paths
-            let markersEnter = markers.enter()
-                .append("path")
-                .attr("fill", d => d.markerColor);
-            // ENTER + UPDATE merged paths
-            markersEnter.merge(markers)
-                .attr("d", d => {
-                return d3.symbol()
-                    .type(Markershapes(d.markerShape))
-                    .size(d.markerSize * 50)();
-            })
-                .attr("visibility", d => {
-                const hideByX = !xScale(d.dimension) && xScale(d.dimension) !== 0;
-                const visible = formatOptions.marker.markerVisibility
-                    ? checkVisibleConditions(chartData, d, type, hideZeroValues, secondaryCustomYaxisMaxValue, secondaryCustomYaxisMinValue, customYaxisMinValue, customYaxisMaxValue)
-                        ? "hidden"
-                        : ([actualChartTypes.stackLine100, "CombiLine"].includes(type) ? "visible"
-                            : ([actualChartTypes.stackArea, actualChartTypes.area, "CombiArea", "CombiStackArea"].includes(type)
-                                ? (formatOptions.plotArea.plotAreaHideLineAndMarkers ? "visible" : "hidden")
-                                : "visible"))
-                    : (type === "CombiLine" ? "visible"
-                        : (["Area", "CombiArea"].includes(type)
-                            ? (formatOptions.plotArea.plotAreaHideLineAndMarkers ? "visible" : "hidden")
-                            : "hidden"));
-                return hideByX ? "hidden" : visible;
-            })
-                .attr("transform", d => {
-                let requiredYScale = d.axis == "Primary" ? yScale : yScaleRight;
-                const x = xScale(d.dimension);
-                const y = [actualChartTypes.stackArea100, actualChartTypes.stackArea, actualChartTypes.stackLine, actualChartTypes.stackLine100, "CombiStackArea"].includes(type)
-                    ? (d[1] > 0 ? requiredYScale(d[1]) : requiredYScale(d[0]))
-                    : requiredYScale(d.value);
-                return `translate(${x},${y})`;
-            })
-                .on("mousemove", (event, d) => {
-                showTooltipOnMouseMove([
-                    {
-                        key: formatOptions.xAxisTitle.xAxisTitleText,
-                        value: chartJSON.formattedDimensionListMap.get(Array.isArray(d.dimension) ? d.dimension[0] : d.dimension)
-                    },
-                    {
-                        key: formatOptions.yAxisTitle.yAxisTitleText || d.value,
-                        value: getNumberWithFormat(
-                        // (["combiStackArea", "StackArea", "StackLine"].includes(type) ? (d as TDataPoint).value : ["100StackLine"].includes(type) ? d[1] - d[0] : (d as TDataPoint).value),
-                        ([actualChartTypes.stackLine100, actualChartTypes.stackArea100, ""].includes(type) ? d[1] - d[0] : d.value), formatOptions.toolTip.toolTipDisplayUnits, formatOptions.toolTip.toolTipNumberFormat, formatOptions.toolTip.toolTipDecimalPrecision)
-                    },
-                    {
-                        key: "Legend",
-                        value: d.legend.includes("~$~") ? d.legend.split("~$~")[1] : d.legend
-                    },
-                    {
-                        key: "Calculated Tooltip",
-                        value: d.tooltip
-                    }
-                ], formatOptions, event);
-            })
-                .on("mouseout", () => {
-                hideTooltipOnMouseOut();
-            });
-        });
-    }
-    catch (error) {
-        logError(fileName, "lineMarkers", error);
-    }
-}
-/**
- * Determines whether a data point should be hidden based on visibility rules, axis scales, and zero value hiding.
- *
- * @param {TSeries[]} chartData - Array of chart series data, used to check axis property of the first series.
- * @param {any} d - Data point to check visibility for; expected to have properties like Measure, [0], and [1].
- * @param {string} type - Chart type string (e.g., "StackArea"), influences visibility logic for stacked charts.
- * @param {boolean} hideZeroValues - Flag indicating whether zero values should be hidden.
- * @param {number} secondaryCustomYaxisMaxValue - Maximum allowed value on secondary Y axis.
- * @param {number} secondaryCustomYaxisMinValue - Minimum allowed value on secondary Y axis.
- * @param {number} customYaxisMinValue - Minimum allowed value on primary Y axis.
- * @param {number} customYaxisMaxValue - Maximum allowed value on primary Y axis.
- *
- * @returns {boolean} True if the data point should be hidden based on the conditions; false otherwise.
- */
-const checkVisibleConditions = (chartData, d, type, hideZeroValues, secondaryCustomYaxisMaxValue, secondaryCustomYaxisMinValue, customYaxisMinValue, customYaxisMaxValue) => {
-    try {
-        if (chartData[0].properties.axis && chartData[0].properties.axis === "Secondary") {
-            return (hideZeroValues && d.Measure == 0) || d.Measure > secondaryCustomYaxisMaxValue || d.Measure < secondaryCustomYaxisMinValue;
-        }
-        else if (type.includes("Stack")) {
-            return (d.Measure > 0) ? ((hideZeroValues && d[1] == 0) || d[1] < customYaxisMinValue || d[1] > customYaxisMaxValue) : ((hideZeroValues && d[0] == 0) || d[0] < customYaxisMinValue || d[0] > customYaxisMaxValue);
-        }
-        else
-            return (hideZeroValues && d.Measure == 0) || d.Measure < customYaxisMinValue || d.Measure > customYaxisMaxValue;
-    }
-    catch (error) {
-        logError(fileName, "checkVisibleConditions", error);
-    }
-};
-/**
- * Attaches hover interactions to the area chart elements to show markers and tooltips
- * when the user moves the mouse over the chart.
- *
- * @param {TDefaultChartFormatOptionsType} formatOptions - Configuration options for chart appearance and tooltip formatting.
- * @param {any} areas - D3 selection representing the area paths of the chart.
- * @param {any} focus - D3 selection representing the group or element used for showing the focus marker and tooltip.
- * @param {string[]} filteredDimension - Array of dimension values representing the x-axis categories.
- * @param {any[]} lineData - Array of data series objects containing values, marker properties, and metadata.
- * @param {any} xScale - D3 scale function for the x-axis.
- * @param {any} yScaleLeft - D3 scale function for the left y-axis.
- * @param {string} chartType - The type of area chart (e.g., "stackArea", "stackArea100").
- *
- * @return {void} This function modifies the chart's behavior by adding interactivity but does not return a value.
- */
-export function onHoverMarkerForAreaChartFamily(formatOptions, areas, focus, filteredDimension, lineData, xScale, yScaleLeft, chartType) {
-    try {
-        if (!formatOptions.plotArea.plotAreaHideLineAndMarkers) {
-            areas
-                .on("mouseover", function () {
-                focus.style("display", null);
-            })
-                .on("mousemove", mousemove)
-                .on("mouseout", function () {
-                focus.style("display", "none");
-                hideTooltipOnMouseOut();
-                // 
-            });
-        }
-        // .on("mousemove", mouseout)
-        let demList = filteredDimension;
-        function mousemove(event) {
-            try {
-                let m = d3.pointer(event), lowDiff = 1e99, legendIndex, dimensionIndex = null;
-                for (let i = 0; i < demList.length; i++) {
-                    let diff = Math.abs(m[0] - xScale(demList[i]));
-                    if (diff < lowDiff) {
-                        lowDiff = diff;
-                        dimensionIndex = i;
-                    }
-                }
-                let mindiff = 1e99;
-                for (let k = 0; k < lineData.length; k++) {
-                    let diff1 = Math.abs(m[1] - yScaleLeft(lineData[k].data[dimensionIndex].value));
-                    if (diff1 < mindiff) {
-                        mindiff = diff1;
-                        legendIndex = k;
-                    }
-                }
-                focus
-                    .attr("transform", getCoordinates(lineData[legendIndex], dimensionIndex, xScale, yScaleLeft))
-                    .append("circle")
-                    .attr("r", lineData[legendIndex].properties.markerSize * 2.5)
-                    .attr("id", "tooltip")
-                    // .attr("id", lineData[0].AxisDataList[dimensionIndex].Dimension)
-                    .attr("fill", lineData[legendIndex].properties.markerColor)
-                    .text(showTooltipOnMouseMove([
-                    { key: formatOptions.xAxisTitle.xAxisTitleText, value: lineData[legendIndex].data[dimensionIndex].dimension },
-                    {
-                        key: lineData[legendIndex].properties.currentMeasure ? lineData[legendIndex].properties.currentMeasure : this.basestyle.YAxisTitle.YAxisTitleText,
-                        value: getNumberWithFormat((chartType === actualChartTypes.stackArea100) ? (legendIndex === 0 ? lineData[legendIndex].data[dimensionIndex].value : lineData[legendIndex].data[dimensionIndex].value - lineData[legendIndex - 1].data[dimensionIndex].value) : lineData[legendIndex].data[dimensionIndex].value, formatOptions.toolTip.toolTipDisplayUnits, formatOptions.toolTip.toolTipNumberFormat, formatOptions.toolTip.toolTipDecimalPrecision),
-                    },
-                    { key: "Legend", value: lineData[legendIndex].data[dimensionIndex].legend.includes("~$~") ? lineData[legendIndex].data[dimensionIndex].legend.split("~$~")[1] : lineData[legendIndex].data[dimensionIndex].legend },
-                    // { key: "Calculated Tooltip", value: lineData[legendIndex].data[dimensionIndex]. },
-                ], formatOptions));
-            }
-            catch (error) {
-                logError(fileName, "onHoverMarkerForAreaChartFamily.mousemove", error);
-            }
-        }
-    }
-    catch (error) {
-        logError(fileName, "onHoverMarkerForAreaChartFamily", error);
-    }
-}
-/**
- * Calculates the SVG `transform` attribute value to position a marker
- * at the correct (x, y) coordinate based on chart data and scales.
- *
- * @param {any} chartData - A single series object containing `data`, which holds dimension and value pairs.
- * @param {number} pos - Index in the `chartData.data` array to locate the specific data point.
- * @param {any} xScale - D3 scale function used to convert the dimension to an x-coordinate.
- * @param {any} yScaleLeft - D3 scale function used to convert the value to a y-coordinate.
- *
- * @return {string} A `translate(x, y)` string used for SVG positioning.
- */
-const getCoordinates = (chartData, pos, xScale, yScaleLeft) => {
-    try {
-        return `translate(${xScale(chartData.data[pos].dimension)},${yScaleLeft(chartData.data[pos].value)})`;
-    }
-    catch (error) {
-        logError(fileName, "getCoordinates", error);
-    }
-};
-/**
-* Function to calculate actual height, width of content primarily used for margin calculations
-* @returns { width: 0, height: 0, rotatedWidth: 0, rotatedHeight: 0 }
-*/
-export function preCalculateTextDimensions(content, fontSize, fontFamily, rotationDegree, fixedWidth) {
-    try {
-        const div = document.createElement('div');
-        Object.assign(div.style, {
-            position: 'absolute',
-            visibility: 'hidden',
-            top: '0',
-            left: '0',
-            margin: '0',
-            padding: '0',
-            border: 'none',
-            whiteSpace: 'nowrap',
-            overflowWrap: '',
-            transform: '',
-        });
-        document.body.appendChild(div);
-        div.style.transform = '';
-        div.style.width = '';
-        div.style.whiteSpace = 'nowrap';
-        div.style.overflowWrap = '';
-        if (fontSize != null)
-            div.style.fontSize = `${fontSize}px`;
-        if (fontFamily != null)
-            div.style.fontFamily = fontFamily;
-        if (fixedWidth != null) {
-            // to calculate height of content if width is restricted 
-            div.style.width = `${fixedWidth}px`;
-            div.style.whiteSpace = 'normal';
-            div.style.overflowWrap = 'break-word';
-        }
-        // Set text and measure
-        div.textContent = content;
-        const baseRect = div.getBoundingClientRect();
-        const w = baseRect.width, h = baseRect.height;
-        // Optional rotation
-        if (rotationDegree && rotationDegree !== 0) {
-            div.style.transform = `rotate(${rotationDegree}deg)`;
-            const rotRect = div.getBoundingClientRect();
-            div.remove();
-            return { width: w, height: h, rotatedWidth: rotRect.width, rotatedHeight: rotRect.height };
-        }
-        div.remove();
-        return { width: w, height: h, rotatedWidth: 0, rotatedHeight: 0 };
-    }
-    catch (error) {
-        logError(fileName, "preCalculateTextDimensions", error);
-    }
-}
-/**
-* adds non defined properties from `defaults` to `target` to avoid further checks for undefined values
-* @param defaults -> Object which contains default properties
-* @param target -> Object which may contain some undefined properties
-* @returns object with all properties from defaults
-*/
-export function addUndefinedDefaults(defaults, target) {
-    try {
-        if (typeof defaults !== 'object' || defaults === null) {
-            throw new TypeError('`defaults` must be a non-null object');
-        }
-        if (typeof target !== 'object' || target === null) {
-            throw new TypeError('`target` must be a non-null object');
-        }
-        Object.keys(defaults).forEach((key) => {
-            const defaultVal = defaults[key];
-            const targetHasKey = Object.prototype.hasOwnProperty.call(target, key);
-            const targetVal = target[key];
-            // If key is missing or explicitly undefined, adopt the default wholesale
-            if (!targetHasKey || targetVal === undefined) {
-                // Note: clone objects/arrays to avoid accidental shared references
-                target[key] = Array.isArray(defaultVal)
-                    ? [...defaultVal]
-                    : (typeof defaultVal === 'object' && defaultVal !== null)
-                        ? { ...defaultVal }
-                        : defaultVal;
-                return;
-            }
-            // Both have the key and both values are plain objects → recurse
-            const isDefaultPlainObj = isPlainObject(defaultVal);
-            const isTargetPlainObj = isPlainObject(targetVal);
-            if (isDefaultPlainObj && isTargetPlainObj) {
-                addUndefinedDefaults(defaultVal, targetVal);
-            }
-            // Otherwise: target already has a concrete (non-object) value → leave it
-        });
-        return target;
-    }
-    catch (error) {
-        logError(fileName, "addUndefinedDefaults", error);
-    }
-}
-/** Helper: is a value a plain (literal) object? */
-function isPlainObject(val) {
-    try {
-        return Object.prototype.toString.call(val) === '[object Object]';
-    }
-    catch (error) {
-        logError(fileName, "isPlainObject", error);
-    }
-}
-/**
- * Number formating function
- * @returns function which takes number as input and return formatted number
- */
-export function getNumberWithFormatFunction(displayUnits, numberFormat, decimalPrecision) {
-    try {
-        let Unit;
-        let displayUnitsPostFix = "";
-        let decimalValues = decimalPrecision;
-        let formatter;
-        return function (d) {
-            try {
-                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;
-                }
-                switch (numberFormat) {
-                    case ",.0%":
-                        formatter = `.${decimalValues}%`;
-                        return d3.format(formatter)(d);
-                    case "":
-                        formatter = `.${decimalValues}f`;
-                        return d3.format(formatter)(d) + displayUnitsPostFix;
-                    case ".2n":
-                        formatter = `.${decimalValues == 0 ? 1 : (parseFloat(decimalValues) + 1).toString()}n`;
-                        return d3.format(formatter)(d) + displayUnitsPostFix;
-                    case ".2$":
-                        formatter = `,.${decimalValues}f`;
-                        return "$" + d3.format(formatter)(d) + displayUnitsPostFix;
-                    case ".2c":
-                        formatter = `,.${decimalValues}f`;
-                        return "C$" + d3.format(formatter)(d) + displayUnitsPostFix;
-                    case ".2ē":
-                        formatter = `,.${decimalValues}f`;
-                        return "€" + d3.format(formatter)(d) + displayUnitsPostFix;
-                    case ".2ch":
-                        formatter = `,.${decimalValues}f`;
-                        return "CHF" + d3.format(formatter)(d) + displayUnitsPostFix;
-                    case ".2£":
-                        formatter = `,.${decimalValues}f`;
-                        return "£" + d3.format(formatter)(d) + displayUnitsPostFix;
-                    case ".2₹":
-                        formatter = `,.${decimalValues}f`;
-                        return "₹" + d3.format(formatter)(d) + displayUnitsPostFix;
-                    case ",":
-                        formatter = `,.${decimalValues}f`;
-                        return d3.format(formatter)(d) + displayUnitsPostFix;
-                    default:
-                        formatter = `.${2}f`;
-                        return d3.format(formatter)(d) + displayUnitsPostFix;
-                }
-            }
-            catch (error) {
-                logError(fileName, "getNumberWithFormatFunction.inner", error);
-            }
-        };
-    }
-    catch (error) {
-        logError(fileName, "getNumberWithFormatFunction", error);
-    }
-}
-/**
- * @param elements -> array of key value pair which should be added to tooltip one after another;
- * @param chartFormatOptions -> rightpane format options;
- * @param event -> optional mouse event to track mouse;
- */
-export function showTooltipOnMouseMove(elements, chartFormatOptions, event) {
-    try {
-        d3.selectAll(".chartTooltip").style("visibility", "hidden");
-        // Clear and create new tooltip container
-        let tooltip = d3
-            .select("#chartTooltipDiv")
-            .html("")
-            .append("div")
-            .attr("class", chartFormatOptions.toolTip.toolTipTheme == "Light"
-            ? "tooltipParentLight chartTooltip"
-            : "tooltipParentDark chartTooltip");
-        // Use passed event or fallback
-        const e = event || window.event;
-        const mouseX = e.pageX;
-        const mouseY = e.pageY;
-        // Build content
-        const tooltipElements = elements.reduce((p, c) => {
-            p += `<label class="tooltipLabel">${c.value ? c.key : ""}</label>
-                  <span class="tooltipValue">${c.value ? c.value : ""}</span>`;
-            return p;
-        }, ``);
-        tooltip.html(`<div class="arrow-placeholder"></div>
-             <div class="tooltipInner">${tooltipElements}</div>`);
-        // Get tooltip dimensions after it's in DOM
-        const tooltipNode = tooltip.node();
-        const tooltipWidth = tooltipNode.offsetWidth;
-        const tooltipHeight = tooltipNode.offsetHeight;
-        // Determine quadrant (screen is divided into 4 from center)
-        const halfWidth = window.innerWidth / 2;
-        const halfHeight = window.innerHeight / 2;
-        let left = 0;
-        let top = 0;
-        let arrow = "";
-        if (mouseX > halfWidth && mouseY < halfHeight) {
-            // Top-right
-            left = mouseX - tooltipWidth - 10;
-            top = mouseY - 10;
-            arrow = "right-top";
-        }
-        else if (mouseX < halfWidth && mouseY < halfHeight) {
-            // Top-left
-            left = mouseX + 20;
-            top = mouseY - 10;
-            arrow = "left-top";
-        }
-        else if (mouseX < halfWidth && mouseY >= halfHeight) {
-            // Bottom-left
-            left = mouseX + 20;
-            top = mouseY - tooltipHeight + 10;
-            arrow = "left-bottom";
-        }
-        else {
-            // Bottom-right
-            left = mouseX - tooltipWidth - 10;
-            top = mouseY - tooltipHeight + 10;
-            arrow = "right-bottom";
-        }
-        // Set final position
-        tooltip
-            .style("left", `${left}px`)
-            .style("top", `${top}px`)
-            .style("visibility", chartFormatOptions.toolTip.toolTipVisibility ? "visible" : "hidden");
-        // Update arrow direction
-        tooltip.select(".arrow-placeholder").attr("class", `arrow-${arrow}`);
-    }
-    catch (error) {
-        logError(fileName, "showTooltipOnMouseMove", error);
-    }
-}
-export function hideTooltipOnMouseOut() {
-    try {
-        d3
-            .select("#chartTooltipDiv")
-            .html("")
-            .style("visibility", "hidden");
-    }
-    catch (error) {
-        logError(fileName, "hideTooltipOnMouseOut", error);
-    }
-}
-/**
- * Adds chart title to svg
- * @param chartSvg -> svgRef from use ref hook;
- * @param chartTitleHeight -> height of chart title;
- * @param chartTitleWidth -> width of chart title;
- * @param chartFormatOptions -> rightpane format options;
- */
-export const drawChartTitle = (chartSvg, chartTitleHeight, chartTitleWidth, chartFormatOptions) => {
-    try {
-        let svg = d3.select(chartSvg.current);
-        let object = svg
-            .append("foreignObject")
-            .attr("visibility", chartFormatOptions.chartTitle.chartTitleVisibility
-            ? "visible"
-            : "hidden")
-            .attr("transform", `translate(2,2)`)
-            .attr("class", "chartTitle")
-            .attr("width", chartTitleWidth)
-            .attr("height", chartTitleHeight + "px");
-        // if text set from editor except default chart title
-        if (chartFormatOptions.chartTitle.dynamicTitleText.length !== 0) {
-            object
-                .append("xhtml:div")
-                .style("color", "rgba(119,119,119)")
-                .attr("title", chartFormatOptions.chartTitle.chartTitleText)
-                .style("white-space", "pre")
-                .style("text-overflow", "ellipsis")
-                .html(chartFormatOptions.chartTitle.chartTitleHTML
-                ? chartFormatOptions.chartTitle.chartTitleHTML
-                : chartFormatOptions.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", chartFormatOptions.chartTitle.chartTitleFontFamily)
-                .attr("title", chartFormatOptions.chartTitle.chartTitleText)
-                .html(chartFormatOptions.chartTitle.chartTitleText);
-        }
-    }
-    catch (error) {
-        logError(fileName, "drawChartTitle", error);
-    }
-};
-/**
- * Finds the longest string from an array of strings or an array of objects.
- * @param {Array<string | Object>} data -> The input array containing strings or objects.
- * @param {string} [key] -> (Optional) If the array contains objects, specify the key to extract string values.
- * @returns {string} The longest string found in the array.
- */
-export const findStringWithLongestLength = (data, key) => {
-    try {
-        return data.reduce((longest, item) => {
-            const currentValue = typeof item === "string"
-                ? item
-                : (key && typeof item === "object" && item[key]) || "";
-            return currentValue.length > longest.length ? currentValue : longest;
-        }, "");
-    }
-    catch (error) {
-        logError(fileName, "findStringWithLongestLength", error);
-    }
-};
-/**
- * Renders chart legends within an SVG element with scroll support when needed.
- * @param {SVGElement} svg - The D3 or SVG selection where the legends will be appended.
- * @param {TSeries[]} seriesData - Array of data series passed to chart as props.
- * @param {number} x - The x-coordinate for placing the legends container.
- * @param {number} y - The y-coordinate for placing the legends container.
- * @param {number} width - The width of the legend container.
- * @param {number} height - The height of the legend container.
- * @param {string} legendPosition - The position of the legend (e.g., 'top', 'bottom', 'left', 'right').
- * @param {string} alignment - Alignment of the legends within the container ('start', 'center', 'end', 'Top','Mid','Bottom').
- * @param {string} legendShape - Shape of the legend symbol (e.g., 'circle', 'rect', 'line', 'hollow circle').
- * @param {TDefaultChartFormatOptionsType} chartFormatOptions - Configuration object for formatting styles and settings.
- * @param {string} chartId - Unique ID for the chart, used to identify elements within the SVG.
- */
-export const legendsWithScroll = (svg, seriesData, x, y, width, height, legendPosition, alignment, legendShape, chartFormatOptions, chartId, isVennChart = false) => {
-    try {
-        if (chartFormatOptions.legends.legendVisibility) {
-            let justifyContent = "";
-            let flexDirection = "";
-            if (legendPosition == staticLegendPosition.left || legendPosition == staticLegendPosition.right) {
-                flexDirection = "column";
-                justifyContent =
-                    alignment == verticalLegendAllignment.top ? "start" : alignment == verticalLegendAllignment.middle ? "center" : "end";
-            }
-            else {
-                flexDirection = "row";
-                justifyContent =
-                    alignment == horizontalLegendAllignment.start
-                        ? "start"
-                        : alignment == horizontalLegendAllignment.middle
-                            ? "center"
-                            : "end";
-            }
-            let object = svg
-                .append("foreignObject")
-                .attr("x", x)
-                .attr("y", y)
-                .style("pointer-events", "auto")
-                .attr("width", width + "px")
-                .attr("height", height + "px")
-                .style("user-select", "none");
-            var div = object
-                .append("xhtml:div")
-                .attr("id", "legendObject" + chartId)
-                .attr("class", "legendsBoxWrapper")
-                .style("width", width + "px")
-                .style("display", "flex")
-                .style("height", height - 1 + "px")
-                .style("overflow", "auto")
-                .style("pointer-events", "auto")
-                .style("justify-content", justifyContent)
-                .style("flex-direction", flexDirection)
-                .style("outline-offset", '-' + chartFormatOptions.legends.legendBorderThickness + "px")
-                .style("outline", chartFormatOptions.legends.legendBorder
-                ? `${chartFormatOptions.legends.legendBorderThickness +
-                    "px" +
-                    " solid" +
-                    chartFormatOptions.legends.legendBorderColor}`
-                : "none")
-                .append("div")
-                // .style("width", "100%")
-                .attr("class", "scrollbar")
-                .style("display", "flex")
-                .style("justify-content", justifyContent)
-                .style("flex-direction", flexDirection)
-                .style("flex-wrap", "nowrap")
-                .style("padding-left", "3px");
-            if (legendPosition == staticLegendPosition.top || legendPosition == staticLegendPosition.bottom)
-                div.style("flex-direction", "row");
-            seriesData.forEach((d, i) => {
-                let innerdiv = div
-                    .append("div")
-                    .style("display", "inline-flex")
-                    .style("justify-content", "flex-start")
-                    .style("align-items", "center")
-                    .style("width", "fit-content")
-                    .style("margin", "3px 0px")
-                    .style("flex-wrap", "nowrap")
-                    .style("white-space", "nowrap")
-                    .on("mousemove", function (d) {
-                    if (chartFormatOptions.legends.onHoverEffect) {
-                        svg
-                            .selectAll(".parentGroup")
-                            .classed("highlight", false)
-                            .classed("unhighlight", true);
-                        svg
-                            .selectAll('[hoverId="' + this.textContent.replace(/ /g, "-") + '"]')
-                            .classed("highlight", true)
-                            .classed("unhighlight", false);
-                    }
-                })
-                    .on("mouseout", function (d) {
-                    if (chartFormatOptions.legends.onHoverEffect) {
-                        svg
-                            .selectAll(".parentGroup")
-                            .classed("highlight", false)
-                            .classed("unhighlight", false);
-                        svg
-                            .selectAll('[hoverId="' + this.textContent.replace(/ /g, "-") + '"]')
-                            .classed("highlight", false)
-                            .classed("unhighlight", false);
-                    }
-                });
-                if (legendPosition == staticLegendPosition.top || legendPosition == staticLegendPosition.bottom) {
-                    innerdiv.style("margin-right", isVennChart ? "0px" : "16px").style("white-space", "nowrap");
-                }
-                if (legendShape == staticLegendShape.circle) {
-                    getCircleShape(d, innerdiv);
-                }
-                else if (legendShape == staticLegendShape.circle) {
-                    getHollowCircleShape(d, innerdiv);
-                }
-                else if (legendShape == staticLegendShape.line) {
-                    getLineShape(d, innerdiv, chartFormatOptions);
-                }
-                else if (legendShape == staticLegendShape.areaWithLine) {
-                    getAreaShape(d, innerdiv, chartFormatOptions);
-                }
-                else if (legendShape == staticLegendShape.rectangle) {
-                    getReactShape(d, innerdiv);
-                }
-                let vennSaparator = (isVennChart && (legendPosition == staticLegendPosition.bottom || legendPosition == staticLegendPosition.top)) ? (i != seriesData.length - 1 ? ' |' : '') : '';
-                let legendColor = isVennChart ? chartFormatOptions.legends.legendSelectedUnicolor :
-                    (chartFormatOptions.legends.legendColorMode == legendColorMode.multiColor)
-                        ? d.properties.color
-                            ? d.properties.color
-                            : "#000000"
-                        : chartFormatOptions.legends.legendSelectedUnicolor;
-                innerdiv
-                    .append("div")
-                    .style("margin-left", "5px")
-                    .style("color", legendColor)
-                    .style("font-size", (!isVennChart ? d.properties.fontSize : chartFormatOptions.legends.legendFontSize) + "px")
-                    .style("font-family", !isVennChart ? d.properties.fontFamily : chartFormatOptions.legends.legendFontFamily)
-                    .style("font-style", () => {
-                    let style = !isVennChart ? d.properties.fontStyle : chartFormatOptions.legends.legendFontStyle;
-                    return style.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : "";
-                })
-                    .style("text-decoration", () => {
-                    let style = !isVennChart ? d.properties.fontStyle : chartFormatOptions.legends.legendFontStyle;
-                    return style.includes(fontStyleOptions.underline) ? fontStyleOptions.underline : "";
-                })
-                    .style("font-weight", () => {
-                    let style = !isVennChart ? d.properties.fontStyle : chartFormatOptions.legends.legendFontStyle;
-                    return style.includes(fontStyleOptions.bold) ? fontStyleOptions.bold : "";
-                })
-                    .style("white-space", "nowrap")
-                    .attr("title", !isVennChart ? d.properties.alias : d.legendDisplay + ' : ' + d.actualValue)
-                    .html(!isVennChart ? d.properties.alias : d.legendDisplay + ' : ' + d.actualValue + vennSaparator);
-            });
-        }
-    }
-    catch (error) {
-        logError(fileName, "legendsWithScroll", error);
-    }
-};
-// Functionality of legends without scroll bar but having buttons for scroll functionality 
-// On Hold, will resume after finishing with all charts
-// export const legendsWithScroll = (
-//     svg: any,
-//     seriesData: TSeries[],
-//     x: number,
-//     y: number,
-//     width: number,
-//     height: number,
-//     legendPosition: string,
-//     alignment: string,
-//     legendShape: string,
-//     chartFormatOptions: TDefaultChartFormatOptionsType,
-//     chartId: string
-// ) => {
-//     // 1. Flex and alignment logic
-//     let justifyContent = "";
-//     let flexDirection = "";
-//     if (legendPosition === "Left" || legendPosition === "Right") {
-//         flexDirection = "column";
-//         justifyContent =
-//             alignment === "Top" ? "flex-start" :
-//                 alignment === "Middle" ? "center" : "flex-end";
-//     } else {
-//         flexDirection = "row";
-//         justifyContent =
-//             alignment === "Start" ? "flex-start" :
-//                 alignment === "Middle" ? "center" : "flex-end";
-//     }
-//     // 2. Main container
-//     const foreignObject = svg
-//         .append("foreignObject")
-//         .attr("x", x)
-//         .attr("y", y)
-//         .attr("width", width)
-//         .attr("height", height)
-//         .style("pointer-events", "auto");
-//     // 3. Legend wrapper (for buttons and content)
-//     const legendWrapper = foreignObject
-//         .append("xhtml:div")
-//         .attr("id", "legendWrapper" + chartId)
-//         .style("position", "relative")
-//         .style("width", width + "px")
-//         .style("height", height + "px")
-//         .style("overflow", "hidden")
-//         .style("display", "flex")
-//         .style("align-items", "center")
-//         .style("justify-content", "center")
-//         .style("background", "transparent");
-//     // 4. Scrollable content area
-//     const content = legendWrapper
-//         .append("div")
-//         .attr("class", "legend-content")
-//         .style("display", "flex")
-//         .style("flex-direction", flexDirection)
-//         .style("justify-content", justifyContent)
-//         .style("align-items", "center")
-//         .style("height", flexDirection === "row" ? "100%" : "auto")
-//         .style("width", flexDirection === "row" ? "calc(100% - 40px)" : "100%")
-//         .style("overflow", "hidden")
-//         .style("scroll-behavior", "smooth")
-//         .style("margin", flexDirection === "row" ? "0 16px" : "30px 0");
-//     // 5. Add legend entries
-//     seriesData.forEach((d, i) => {
-//         const entry = content
-//             .append("div")
-//             .attr("class", "legend-entry")
-//             .style("display", "inline-flex")
-//             .style("align-items", "center")
-//             .style("margin", flexDirection === "row" ? "0 8px 0 0" : "0 0 8px 0")
-//             .style("white-space", "nowrap")
-//             .on("mousemove", function () {
-//                 if (chartFormatOptions.legends.onHoverEffect) {
-//                     svg.selectAll(".parentGroup")
-//                         .classed("highlight", false)
-//                         .classed("unhighlight", true);
-//                     svg.selectAll('[hoverId="' + d.legend.replace(/ /g, "-") + '"]')
-//                         .classed("highlight", true)
-//                         .classed("unhighlight", false);
-//                 }
-//             })
-//             .on("mouseout", function () {
-//                 if (chartFormatOptions.legends.onHoverEffect) {
-//                     svg.selectAll(".parentGroup")
-//                         .classed("highlight", false)
-//                         .classed("unhighlight", false);
-//                     svg.selectAll('[hoverId="' + d.legend.replace(/ /g, "-") + '"]')
-//                         .classed("highlight", false)
-//                         .classed("unhighlight", false);
-//                 }
-//             });
-//         // Add legend shape
-//         if (legendShape === staticLegendShape.circle) {
-//             getCircleShape(d, entry);
-//         } else if (legendShape === staticLegendShape.circle) {
-//             getHollowCircleShape(d, entry);
-//         } else if (legendShape === staticLegendShape.line) {
-//             getLineShape(d, entry);
-//         } else if (legendShape === staticLegendShape.areaWithLine) {
-//             getAreaShape(d, entry);
-//         } else if (legendShape === staticLegendShape.rectangle) {
-//             getReactShape(d, entry);
-//         }
-//         // Add legend text
-//         let legendColor =
-//             chartFormatOptions.legends.legendColorMode === 1
-//                 ? d.properties.Color || "#000000"
-//                 : chartFormatOptions.legends.legendSelectedUnicolor;
-//         entry.append("div")
-//             .style("margin-left", "5px")
-//             .style("color", legendColor)
-//             .style("font-size", d.properties.FontSize + "px")
-//             .style("font-family", d.properties.FontFamily)
-//             .style("font-style", d.properties.FontStyle.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : "")
-//             .style("text-decoration", d.properties.FontStyle.includes(fontStyleOptions.underline) ? fontStyleOptions.underline : "")
-//             .style("font-weight", d.properties.FontStyle.includes(fontStyleOptions.bold) ? fontStyleOptions.bold : "")
-//             .style("white-space", "nowrap")
-//             .attr("title", d.legend)
-//             .html(d.legend);
-//     });
-//     // 6. Add scroll buttons
-//     const btnStyle = `
-//         position: absolute;
-//         background: rgba(250,250,250,0.85);
-//         border: unset;
-//         border-radius: 3px;
-//         width: 15px;
-//         height: 22px;
-//         display: flex;
-//         align-items: center;
-//         justify-content: center;
-//         cursor: pointer;
-//         z-index: 10;
-//         font-size: 12px;
-//         box-shadow: 0 1px 4px rgba(0,0,0,0.08);
-//         opacity: 0.85;
-//         transition: opacity 0.2s;
-//         color: grey;
-//         outline: none;
-//         padding: unset;
-//     `;
-//     // Left/Top button
-//     const leftBtn = legendWrapper
-//         .append("button")
-//         .attr("type", "button")
-//         .attr("tabindex", -1)
-//         .attr("aria-label", flexDirection === "row" ? "Scroll left" : "Scroll up")
-//         .style("display", "none")
-//         .attr("style", btnStyle +
-//             (flexDirection === "row"
-//                 ? "left:1px;top:50%;transform:translateY(-50%);"
-//                 : "top:0;left:50%;transform:translateX(-50%);"))
-//         .text(flexDirection === "row" ? "◀" : "▲");
-//     // Right/Bottom button
-//     const rightBtn = legendWrapper
-//         .append("button")
-//         .attr("type", "button")
-//         .attr("tabindex", -1)
-//         .attr("aria-label", flexDirection === "row" ? "Scroll right" : "Scroll down")
-//         .style("display", "none")
-//         .attr("style", btnStyle +
-//             (flexDirection === "row"
-//                 ? "right:1px;top:50%;transform:translateY(-50%);"
-//                 : "bottom:0;left:50%;transform:translateX(-50%);"))
-//         .text(flexDirection === "row" ? "▶" : "▼");
-//     // 7. Scrolling logic
-//     function updateButtonVisibility() {
-//         if (flexDirection == "row") {
-//             if (content.node().clientWidth == content.node().scrollWidth) {
-//                 content.node().style.width = "100%";
-//                 content.node().style.margin = "10px 0";
-//                 leftBtn.remove();
-//                 rightBtn.remove();
-//             }
-//         }
-//     }
-//     function scrollContent(amount: number) {
-//         const node = content.node() as HTMLElement;
-//         if (!node) return;
-//         if (flexDirection === "row") {
-//             node.scrollBy({ left: amount, behavior: "smooth" });
-//         } else {
-//             node.scrollBy({ top: amount, behavior: "smooth" });
-//         }
-//     }
-//     leftBtn.on("click", () => scrollContent(flexDirection === "row" ? -100 : -50));
-//     rightBtn.on("click", () => scrollContent(flexDirection === "row" ? 100 : 50));
-//     // Mouse wheel scrolling
-//     content.on("wheel", function (event: any) {
-//         const node = this as HTMLElement;
-//         if (flexDirection === "row") {
-//             node.scrollLeft += event.deltaY;
-//         } else {
-//             node.scrollTop += event.deltaY;
-//         }
-//         event.preventDefault();
-//     });
-//     updateButtonVisibility();
-//     // Update buttons on scroll and resize
-//     // content.on("scroll", updateButtonVisibility);
-//     // setTimeout(updateButtonVisibility, 100); // Initial
-//     // Optional: update on window resize
-//     // window.addEventListener("resize", updateButtonVisibility);
-// };
-/**
- *
- * Appends a filled circle shape to the given legend container.
- * @param d - The data object containing legend properties (like color, size).
- * @param innerDiv - The D3 selection where the shape will be appended.
- */
-export function getCircleShape(d, innerDiv) {
-    try {
-        innerDiv
-            .append("div")
-            .style("height", "12px")
-            .style("width", "12px")
-            .style("border-radius", "50%")
-            .style("background", d.properties.color);
-    }
-    catch (error) {
-        logError(fileName, "getCircleShape", error);
-    }
-}
-/**
- * Appends a hollow (outlined) circle shape to the given legend container.
- * @param d - The data object containing legend properties.
- * @param innerDiv - The D3 selection where the shape will be appended.
- */
-export function getHollowCircleShape(d, innerDiv) {
-    try {
-        innerDiv
-            .append("div")
-            .style("height", "12px")
-            .style("width", "12px")
-            .style("border-radius", "50%")
-            .style("border", `3px solid ${d.properties.Color}`);
-    }
-    catch (error) {
-        logError(fileName, "getHollowCircleShape", error);
-    }
-}
-/**
- * @param {Object} d - Data object containing properties such as lineStyle, color, markerShape, and markerColor.
- * @param {Object} innerDiv - A D3 selection of a container element to append the line shape.
- * @param {TDefaultChartFormatOptionsType} formatOptions - Formatting options including marker visibility.
- * @return {void}
- */
-export function getLineShape(d, innerDiv, formatOptions) {
-    try {
-        let shape = innerDiv
-            .append("div")
-            .style("height", "2px")
-            .style("width", "20px")
-            .style("background", d.properties.lineStyle == "solid" ? d.properties.color : "transparent")
-            .style("position", "relative")
-            .style("border-top", d.properties.lineStyle == "None" ? "unset" : d.properties.lineStyle == "dotted" ? "2px dotted " + d.properties.color : "2px dashed " + d.properties.color);
-        if (formatOptions.marker.markerVisibility) {
-            switch (d.properties.markerShape.toLowerCase()) {
-                case "circle":
-                    shape
-                        .append("div")
-                        .append("svg")
-                        .style("position", "absolute")
-                        .style("left", "50%")
-                        .style("top", "50%")
-                        .attr("transform", "translate(-5,-6)")
-                        .attr("height", "10px")
-                        .attr("width", "10px")
-                        .append("circle")
-                        .attr("cx", "5")
-                        .attr("cy", "5")
-                        .attr("r", "4.5")
-                        .style("fill", d.properties.markerColor);
-                    break;
-                case "square":
-                    shape
-                        .append("div")
-                        .style("position", "absolute")
-                        .style("left", "50%")
-                        .style("top", "50%")
-                        .style("transform", "translate(-2px, -7px)")
-                        .style("height", "8px")
-                        .style("width", "8px")
-                        .style("top", "2px")
-                        .style("left", "9px")
-                        .style("background", d.properties.markerColor);
-                    break;
-                case "triangle":
-                    shape
-                        .append("div")
-                        .style("position", "absolute")
-                        .style("transform", "translate(5px, -6.5px)")
-                        .style("border-left", "6px solid transparent")
-                        .style("border-right", "6px solid transparent")
-                        .style("border-bottom", `10px solid ${d.properties.markerColor}`);
-                    break;
-                case "cross":
-                    shape
-                        .append("div")
-                        .style("position", "absolute")
-                        .style("left", "50%")
-                        .style("top", "50%")
-                        .style("transform", "translate(-5px, -3px)")
-                        .style("height", "4px")
-                        .style("width", "10px")
-                        .style("background", d.properties.markerColor)
-                        .append("div")
-                        .style("height", "10px")
-                        .style("width", "4px")
-                        .style("background", d.properties.markerColor)
-                        .style("position", "relative")
-                        .style("top", "-3px")
-                        .style("left", "3px");
-                    break;
-                case "diamond":
-                    shape
-                        .append("div")
-                        .style("height", "7px")
-                        .style("width", "7px")
-                        .style("background", d.properties.markerColor)
-                        .style("transform", "rotate(45deg)")
-                        .style("top", "-4px")
-                        .style("left", "7px")
-                        .style("position", "absolute");
-                    break;
-                case "star":
-                    shape
-                        .append("div")
-                        .style("border-left", "4px solid transparent")
-                        .style("border-right", "4px solid transparent")
-                        .style("border-bottom", `8px solid ${d.properties.markerColor}`)
-                        .style("position", "absolute")
-                        .style("top", "-6.5px")
-                        .style("left", "7px")
-                        .style("transform", "rotate(0deg)")
-                        .append("div")
-                        .style("border-left", "4px solid transparent")
-                        .style("border-right", "4px solid transparent")
-                        .style("border-top", `8px solid ${d.properties.markerColor}`)
-                        .style("position", "absolute")
-                        .style("top", "2px")
-                        .style("left", "-4px")
-                        .style("transform", "rotate(360deg)");
-                    break;
-                case "wye":
-                    shape
-                        .append("div")
-                        .style("height", "6.5px")
-                        .style("width", "3px")
-                        .style("background", d.properties.markerColor)
-                        .style("position", "absolute")
-                        .style("left", "10px")
-                        .style("top", "-3.5px")
-                        .append("div")
-                        .style("height", "5px")
-                        .style("width", "3px")
-                        .style("background", d.properties.markerColor)
-                        .style("transform", "rotate(-55deg)")
-                        .style("position", "relative")
-                        .style("top", "-2px")
-                        .style("left", "-2px")
-                        .append("div")
-                        .style("height", "5px")
-                        .style("width", "3px")
-                        .style("background", d.properties.markerColor)
-                        .style("transform", "rotate(108deg)")
-                        .style("position", "relative")
-                        .style("top", "3px")
-                        .style("left", "2px");
-                    break;
-                case "none":
-                    shape;
-                default:
-                    break;
-            }
-        }
-    }
-    catch (error) {
-        logError(fileName, "getLineShape", error);
-    }
-}
-/**
- * @param {Object} d - Data object containing color, markerShape array, and properties including markerColor.
- * @param {Object} innerDiv - A D3 selection of a container element to append the area shape.
- * @param {TDefaultChartFormatOptionsType} formatOptions - Formatting options including marker visibility.
- * @return {void}
- */
-export function getAreaShape(d, innerDiv, formatOptions) {
-    try {
-        let flexdiv = innerDiv
-            .append("div")
-            .style("height", "10px")
-            .style("width", "15px")
-            .style("background", d.properties.color)
-            .style("display", "flex")
-            .style("flex-direction", "column")
-            .style("border-radius", "1px");
-        if (formatOptions.marker.markerVisibility) {
-            switch (d.properties.markerShape.toLowerCase()) {
-                case "circle":
-                    flexdiv
-                        .append("div")
-                        .style("height", "20%")
-                        .style("width", "100%")
-                        .style("background", d.properties.color)
-                        .style("position", "relative")
-                        .append("svg")
-                        .style("position", "absolute")
-                        .style("left", "50%")
-                        .style("top", "50%")
-                        .attr("transform", "translate(-5,-5)")
-                        .attr("height", "10px")
-                        .attr("width", "10px")
-                        .append("circle")
-                        .attr("cx", "5")
-                        .attr("cy", "5")
-                        .attr("r", "2.5")
-                        .style("fill", d.properties.markerColor);
-                    break;
-                case "square":
-                    flexdiv
-                        .append("div")
-                        .style("height", "20%")
-                        .style("width", "100%")
-                        .style("background", d.properties.markerColor)
-                        .style("position", "relative")
-                        .append("div")
-                        .style("position", "absolute")
-                        .style("left", "50%")
-                        .style("top", "50%")
-                        .style("transform", "translate(-4px, -3.5px)")
-                        .style("height", "5px")
-                        .style("width", "5px")
-                        .style("top", "2px")
-                        .style("left", "9px")
-                        .style("background", d.properties.markerColor)
-                        .style("border-radius", "1px");
-                    break;
-                case "triangle":
-                    flexdiv
-                        .append("div")
-                        .style("height", "20%")
-                        .style("width", "100%")
-                        .style("background", d.properties.markerColor)
-                        .style("position", "relative")
-                        .append("div")
-                        .style("position", "absolute")
-                        .style("transform", "translate(5px, -3.5px)")
-                        .style("border-left", "3px solid transparent")
-                        .style("border-right", "3px solid transparent")
-                        .style("border-bottom", `7px solid ${d.properties.markerColor}`);
-                    break;
-                case "cross":
-                    flexdiv
-                        .append("div")
-                        .style("height", "20%")
-                        .style("width", "100%")
-                        .style("background", d.properties.markerColor)
-                        .style("position", "relative")
-                        .append("div")
-                        .style("position", "absolute")
-                        .style("left", "50%")
-                        .style("top", "50%")
-                        .style("transform", "translate(-3px, -2px)")
-                        .style("height", "4px")
-                        .style("width", "7px")
-                        .style("background", d.properties.markerColor)
-                        .append("div")
-                        .style("height", "6px")
-                        .style("width", "3px")
-                        .style("background", d.properties.markerColor)
-                        .style("position", "relative")
-                        .style("top", "-1px")
-                        .style("left", "2px");
-                    break;
-                case "diamond":
-                    flexdiv
-                        .append("div")
-                        .style("height", "20%")
-                        .style("width", "100%")
-                        .style("background", d.properties.markerColor)
-                        .style("position", "relative")
-                        .append("div")
-                        .style("height", "4px")
-                        .style("width", "4px")
-                        .style("background", d.properties.markerColor)
-                        .style("transform", "rotate(45deg)")
-                        .style("top", "-1px")
-                        .style("left", "5px")
-                        .style("position", "absolute");
-                    break;
-                case "star":
-                    flexdiv
-                        .append("div")
-                        .style("height", "20%")
-                        .style("width", "100%")
-                        .style("background", d.properties.markerColor)
-                        .style("position", "relative")
-                        .append("div")
-                        .style("border-left", "2.5px solid transparent")
-                        .style("border-right", "2.5px solid transparent")
-                        .style("border-bottom", `6px solid ${d.properties.markerColor}`)
-                        .style("position", "absolute")
-                        .style("top", "-3px")
-                        .style("left", "6px")
-                        .style("transform", "rotate(0deg)")
-                        .append("div")
-                        .style("border-left", "2.5px solid transparent")
-                        .style("border-right", "2.5px solid transparent")
-                        .style("border-top", `6px solid ${d.properties.markerColor}`)
-                        .style("position", "absolute")
-                        .style("top", "0.5px")
-                        .style("left", "-2px")
-                        .style("transform", "rotate(360deg)");
-                    break;
-                case "wye":
-                    flexdiv
-                        .append("div")
-                        .style("height", "20%")
-                        .style("width", "100%")
-                        .style("background", d.properties.markerColor)
-                        .style("position", "relative")
-                        .append("div")
-                        .style("height", "4.5px")
-                        .style("width", "2px")
-                        .style("background", d.properties.markerColor)
-                        .style("position", "absolute")
-                        .style("left", "6.5px")
-                        .style("top", "-0.5px")
-                        .append("div")
-                        .style("height", "3px")
-                        .style("width", "2px")
-                        .style("background", d.properties.markerColor)
-                        .style("transform", "rotate(-55deg)")
-                        .style("position", "relative")
-                        .style("top", "-2px")
-                        .style("left", "-2px")
-                        .append("div")
-                        .style("height", "3px")
-                        .style("width", "2px")
-                        .style("background", d.properties.markerColor)
-                        .style("transform", "rotate(108deg)")
-                        .style("position", "relative")
-                        .style("top", "3px")
-                        .style("left", "2px");
-                    break;
-                case "none":
-                    flexdiv
-                        .append("div")
-                        .style("height", "20%")
-                        .style("width", "100%")
-                        .style("background", d.properties.markerColor);
-                    break;
-                default:
-                    break;
-            }
-        }
-        flexdiv
-            .append("div")
-            .style("height", "20%")
-            .style("width", "100%")
-            .style("background", "white");
-        flexdiv
-            .append("div")
-            .style("height", "60%")
-            .style("width", "100%")
-            .style("background", d.properties.color)
-            .style("border-radius", "1px");
-    }
-    catch (error) {
-        logError(fileName, "getAreaShape", error);
-    }
-}
-/**
- * Appends a rectangle shape to the given legend container.
- * @param d - The data object that includes styling for the rectangle (like color, border).
- * @param innerDiv - The D3 selection where the shape will be inserted.
- */
-export function getReactShape(d, innerDiv) {
-    try {
-        innerDiv
-            .append("div")
-            .style("height", "10px")
-            .style("width", "15px")
-            .style("border-style", d)
-            .style("border-width", d)
-            .style("border-color", d)
-            .style("background", d.properties.color)
-            .style("border-radius", "1px");
-    }
-    catch (error) {
-        logError(fileName, "getReactShape", error);
-    }
-}
-export function drawAnnotations(oldAnnotationList, newAnnotationList, chartFormatOptions) {
-    try {
-        // Implementation here if needed
-    }
-    catch (error) {
-        logError(fileName, "drawAnnotations", error);
-    }
-}
-/**
- * Initializes the SVG element with the specified dimensions and chart format options.
- * @param svgRef - The reference to the SVG element.
- * @param width - The width of the SVG element.
- * @param height - The height of the SVG element.
- * @param chartFormatOptions - The format options for the chart, which may include properties like background color and border.
-*/
-export const initSvg = (svgRef, width, height, chartFormatOptions) => {
-    try {
-        let svgElement = svgRef.current;
-        svgElement.setAttribute("viewBox", `0 0 ${width} ${height}`);
-        const { chartAreaColor, chartAreaBorder } = chartFormatOptions.chartArea;
-        svgElement.style.backgroundColor = chartAreaColor;
-        const isBorderEnable = chartAreaBorder;
-        if (isBorderEnable) {
-            let borderColor = chartFormatOptions.chartArea.chartAreaBorderColor;
-            let borderWidth = chartFormatOptions.chartArea.chartAreaBorderThickness + "px";
-            let borderStyle = convertStringToNumber(chartFormatOptions.chartArea.chartAreaBorderStyle);
-            let border = borderStyle == 1 ? "solid" : borderStyle == 2 ? "dashed" : "dotted";
-            svgElement.style.outline = `${borderWidth} ${border} ${borderColor}`;
-            svgElement.style.outlineOffset = `-${borderWidth}`;
-        }
-        else {
-            svgElement.style.outline = `unset`;
-        }
-    }
-    catch (error) {
-        logError(fileName, "initSvg", error);
-    }
-};
-/**
- * Initializes the chart area within the SVG element, applying margins and setting a default font color.
- * @param svg - The D3 selection of the SVG element.
- * @param margins - The margins to apply to the chart area.
- * @return {d3.Selection<SVGGElement, any, any, any>} - The D3 selection of the chart area group element.
- */
-export const initChartArea = (svg, margins) => {
-    try {
-        return svg
-            .append("g")
-            .attr("transform", `translate(${margins.left},${margins.top})`)
-            .attr("font-color", "#ccc");
-    }
-    catch (error) {
-        logError(fileName, "initChartArea", error);
-    }
-};
-/**
-    * all common functions to do before draw chart .
-    * @param svgRef - The reference to the SVG element.
-    * @param formatOptions - The format options for the chart which may contains some undefined values.
-    * @returns { chartFormatOptions: TDefaultChartFormatOptionsType } - The chart format options with defaults applied.
-    * @returns { svg: d3.Selection<SVGSVGElement, any, any, any> } - The D3 selection of the SVG element.
-    *
-    *
- */
-export const firstFunctionBeforeRender = (svgRef, formatOptions) => {
-    try {
-        let svg = d3.select(svgRef.current);
-        svg.selectAll("*").remove();
-        let chartFormatOptions = addUndefinedDefaults(defaultChartFormatOptions, formatOptions);
-        let svgBounds = svgRef.current.getBoundingClientRect();
-        let width = svgBounds.width;
-        let height = svgBounds.height;
-        return { chartFormatOptions, svg, width, height };
-    }
-    catch (error) {
-        logError(fileName, "firstFunctionBeforeRender", error);
-    }
-};
-export const marginCalculationsForChartsWithoutAxis = (chartFormatOptions, width, height, maxLegendDimensions, margins, isVennChart = false) => {
-    try {
-        let legendPosition = chartFormatOptions.legends.legendPosition;
-        let width15Percent = width * 0.15 * 0.8;
-        let legendListWidth = isVennChart ? maxLegendDimensions[0] :
-            width15Percent < maxLegendDimensions[0] + 15
-                ? width15Percent
-                : maxLegendDimensions[0] + 15;
-        let chartTitleHeight = chartFormatOptions.chartTitle.chartTitleVisibility
-            ? chartFormatOptions.chartTitle.dynamicTitleText.length !== 0
-                ? preCalculateTextDimensions(chartFormatOptions.chartTitle.chartTitleHTML, undefined, undefined).height
-                : preCalculateTextDimensions(chartFormatOptions.chartTitle.chartTitleText, 16, "Helvetica").height
-            : 5;
-        switch (legendPosition) {
-            case staticLegendPosition.none:
-                margins.top = chartTitleHeight + 20;
-                margins.bottom = 50;
-                margins.right = 50;
-                margins.left = 50;
-                break;
-            case staticLegendPosition.top:
-                margins.top = chartTitleHeight + 50;
-                margins.bottom = 15;
-                margins.right = 15;
-                margins.left = 15;
-                break;
-            case staticLegendPosition.right:
-                margins.right = legendListWidth + 50;
-                margins.top = chartTitleHeight + 15;
-                margins.bottom = 15;
-                margins.left = 15;
-                break;
-            case staticLegendPosition.bottom:
-                margins.bottom = 45;
-                margins.top = chartTitleHeight + 15;
-                margins.right = 15;
-                margins.left = 15;
-                break;
-            case staticLegendPosition.left:
-                margins.left = legendListWidth + 50;
-                margins.top = chartTitleHeight + 15;
-                margins.bottom = 15;
-                margins.right = 15;
-        }
-        let innerHeight = height - margins.top - margins.bottom;
-        let innerWidth = width - margins.left - margins.right;
-        return { margins, innerHeight, innerWidth, legendListWidth, chartTitleHeight };
-    }
-    catch (error) {
-        logError(fileName, "marginCalculationsForChartsWithoutAxis", error);
-    }
-};
-/**
- * Initializes the legend list with total value allowance and appends to svg.
- * @param chartFormatOptions - The format options for the chart.
- * @param svg - The D3 selection of the SVG element.
- * @param seriesData - The data series to be displayed in the legend.
- * @param width - The width of the SVG element.
- * @param height - The height of the SVG element.
- * @param legendListWidth - The width allocated for the legend list.
- * @param chartTitleHeight - The height of the chart title.
- * @param chartId - The unique identifier for the chart.
- * @param margins - The margins for the chart area.
- */
-export const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesData, width, height, legendListWidth, chartTitleHeight, chartId, margins, shouldAllowTotalValueMargin = true) => {
-    try {
-        let position = chartFormatOptions.legends.legendPosition;
-        let totalPosition = chartFormatOptions.total.totalPosition;
-        let totalAlignment = chartFormatOptions.total.totalAlignment;
-        let shouldTotalValueAdjustment = chartFormatOptions.total.totalVisibility && shouldAllowTotalValueMargin;
-        let horizontalLegendAlignment = chartFormatOptions.legends.legendAlignmentTopBottom;
-        let verticalLegendAlignment = chartFormatOptions.legends.legendAlignment;
-        switch (position) {
-            case staticLegendPosition.none:
-                break;
-            case staticLegendPosition.right:
-                legendsWithScroll(svg, seriesData, width - legendListWidth - 25, chartTitleHeight +
-                    5 +
-                    (shouldTotalValueAdjustment
-                        ? totalPosition == staticTotalPosition.top && totalAlignment == staticTotalAlignment.end
-                            ? 10
-                            : 0
-                        : 0), legendListWidth + 15, height -
-                    chartTitleHeight -
-                    10 -
-                    (shouldTotalValueAdjustment
-                        ? totalPosition == staticTotalPosition.top && totalAlignment == staticTotalAlignment.end
-                            ? 10
-                            : totalPosition == staticTotalPosition.bottom && totalAlignment == staticTotalAlignment.start
-                                ? 20
-                                : 0
-                        : 0), position, verticalLegendAlignment, staticLegendShape.circle, chartFormatOptions, chartId);
-                break;
-            case staticLegendPosition.top:
-                legendsWithScroll(svg, seriesData, 5, chartTitleHeight + 5, width - 10, 30, position, horizontalLegendAlignment, staticLegendShape.circle, chartFormatOptions, chartId);
-                break;
-            case staticLegendPosition.left:
-                legendsWithScroll(svg, seriesData, 5, margins.top +
-                    (shouldTotalValueAdjustment
-                        ? totalPosition == staticTotalPosition.top && totalAlignment == staticTotalAlignment.start
-                            ? 10
-                            : 0
-                        : 0), legendListWidth + 15, height -
-                    chartTitleHeight -
-                    10 -
-                    (shouldTotalValueAdjustment
-                        ? totalPosition == staticTotalPosition.top && totalAlignment == staticTotalAlignment.start
-                            ? 10
-                            : totalPosition == staticTotalPosition.bottom && totalAlignment == staticTotalAlignment.start
-                                ? 20
-                                : 0
-                        : 0), position, verticalLegendAlignment, staticLegendShape.circle, chartFormatOptions, chartId);
-                break;
-            case staticLegendPosition.bottom:
-                legendsWithScroll(svg, seriesData, 5, height - 35, width - 10, 30, position, horizontalLegendAlignment, staticLegendShape.circle, chartFormatOptions, chartId);
-                break;
-        }
-    }
-    catch (error) {
-        logError(fileName, "initLegendListWithTotalValueAllowance", error);
-    }
-};
-/**
- * Calculates the maximum possible width and height for the legends based on the longest legend string.
- * @param chartFormatOptions - The format options for the chart.
- * @param seriesData - The data series to be displayed in the legend.
- * @returns The maximum possible width and height for the legends.
- */
-export const calculateLegendsMaxPossibleWidth = (chartFormatOptions, seriesData, key = "legend") => {
-    try {
-        let legendDims = preCalculateTextDimensions(findStringWithLongestLength(seriesData, key), convertStringToNumber(chartFormatOptions.legends.legendFontSize), chartFormatOptions.legends.legendFontFamily);
-        return [legendDims.width, legendDims.height];
-    }
-    catch (error) {
-        logError(fileName, "calculateLegendsMaxPossibleWidth", error);
-    }
-};
-/**
- * Calculates the margins and inner dimensions for the charts without legends.
- * @param chartFormatOptions - The format options for the chart.
- * @param height - The height of the chart area.
- * @param width - The width of the chart area.
- * @param shouldShowColorScale - Only allow treemap to show color scale.
- * @returns The calculated margins and inner dimensions for the chart.
- */
-export const marginCalculationsForChartsWithoutLegends = (chartFormatOptions, height, width, shouldShowColorScale = false) => {
-    try {
-        let chartTitleHeight = chartFormatOptions.chartTitle.chartTitleVisibility
-            ? chartFormatOptions.chartTitle.dynamicTitleText.length !== 0
-                ? preCalculateTextDimensions(chartFormatOptions.chartTitle.chartTitleHTML, undefined, undefined).height
-                : preCalculateTextDimensions(chartFormatOptions.chartTitle.chartTitleText, 16, "Helvetica").height
-            : 5;
-        let margins = {
-            top: chartFormatOptions.chartTitle.chartTitleVisibility
-                ? chartTitleHeight
-                : 10,
-            bottom: (shouldShowColorScale && chartFormatOptions.colorScale.showColor == colorThemeTypes.colorTheme) ? 40 : 10,
-            left: 10,
-            right: 10,
-        };
-        innerHeight = height - margins.top - margins.bottom;
-        innerWidth = width - margins.left - margins.right;
-        return { margins, chartTitleHeight, innerHeight, innerWidth };
-    }
-    catch (error) {
-        logError(fileName, "marginCalculationsForChartsWithoutLegends", error);
-    }
-};
-export const convertStringToNumber = (value) => {
-    try {
-        if (typeof value !== 'string') {
-            return value;
-        }
-        // Trim the string to remove whitespace
-        const trimmed = value.trim();
-        // Check for empty string
-        if (trimmed === '') {
-            return value;
-        }
-        // Try parsing
-        const num = parseFloat(trimmed);
-        // Check if it's a valid number
-        if (isNaN(num)) {
-            return value;
-        }
-        return num;
-    }
-    catch (error) {
-        logError(fileName, "convertStringToNumber", error);
-    }
-};
-export function generalizedChartData(chartData, dimensionList) {
-    try {
-        return chartData.map(item => {
-            // Ensure properties exist
-            let properties;
-            if (!item.properties) {
-                properties = {
-                    ...chartProperties,
-                    legend: item.legend,
-                    currentLegend: item.legend,
-                    alias: item.legend,
-                    name: item.legend
-                };
-            }
-            else {
-                properties = { ...chartProperties, ...item.properties };
-            }
-            // Normalize dimensions and clone points
-            const normalizedData = dimensionList
-                ? dimensionList.map(dim => {
-                    const found = item.data.find(d => d.dimension === dim);
-                    if (found) {
-                        // clone the point to make it extensible
-                        return { ...found };
-                    }
-                    else {
-                        // insert missing dimension with 0 value
-                        return {
-                            dimension: dim,
-                            legend: item.legend,
-                            value: 0
-                        };
-                    }
-                })
-                : item.data.map(d => ({ ...d }));
-            return {
-                ...item,
-                properties,
-                data: normalizedData
-            };
-        });
-    }
-    catch (error) {
-        logError(fileName, "generalizedChartData", error);
-    }
-}