@fluentui/react-charting 5.16.23 → 5.16.25

package/lib/utilities/utilities.js

@@ -0,0 +1,864 @@
+var _a;
+import { __assign, __spreadArray } from "tslib";
+import { axisRight as d3AxisRight, axisBottom as d3AxisBottom, axisLeft as d3AxisLeft } from 'd3-axis';
+import { max as d3Max, min as d3Min } from 'd3-array';
+import { scaleLinear as d3ScaleLinear, scaleTime as d3ScaleTime, scaleBand as d3ScaleBand } from 'd3-scale';
+import { select as d3Select, event as d3Event, selectAll as d3SelectAll } from 'd3-selection';
+import { format as d3Format } from 'd3-format';
+import * as d3TimeFormat from 'd3-time-format';
+import { timeSecond as d3TimeSecond, timeMinute as d3TimeMinute, timeHour as d3TimeHour, timeDay as d3TimeDay, timeMonth as d3TimeMonth, timeWeek as d3TimeWeek, timeYear as d3TimeYear, } from 'd3-time';
+export var ChartTypes;
+(function (ChartTypes) {
+    ChartTypes[ChartTypes["AreaChart"] = 0] = "AreaChart";
+    ChartTypes[ChartTypes["LineChart"] = 1] = "LineChart";
+    ChartTypes[ChartTypes["VerticalBarChart"] = 2] = "VerticalBarChart";
+    ChartTypes[ChartTypes["VerticalStackedBarChart"] = 3] = "VerticalStackedBarChart";
+    ChartTypes[ChartTypes["GroupedVerticalBarChart"] = 4] = "GroupedVerticalBarChart";
+    ChartTypes[ChartTypes["HeatMapChart"] = 5] = "HeatMapChart";
+})(ChartTypes || (ChartTypes = {}));
+export var XAxisTypes;
+(function (XAxisTypes) {
+    XAxisTypes[XAxisTypes["NumericAxis"] = 0] = "NumericAxis";
+    XAxisTypes[XAxisTypes["DateAxis"] = 1] = "DateAxis";
+    XAxisTypes[XAxisTypes["StringAxis"] = 2] = "StringAxis";
+})(XAxisTypes || (XAxisTypes = {}));
+export var YAxisType;
+(function (YAxisType) {
+    YAxisType[YAxisType["NumericAxis"] = 0] = "NumericAxis";
+    YAxisType[YAxisType["DateAxis"] = 1] = "DateAxis";
+    YAxisType[YAxisType["StringAxis"] = 2] = "StringAxis";
+})(YAxisType || (YAxisType = {}));
+/**
+ * Create Numeric X axis
+ * @export
+ * @param {IXAxisParams} xAxisParams
+ */
+export function createNumericXAxis(xAxisParams, culture) {
+    var domainNRangeValues = xAxisParams.domainNRangeValues, _a = xAxisParams.showRoundOffXTickValues, showRoundOffXTickValues = _a === void 0 ? false : _a, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, _c = xAxisParams.tickPadding, tickPadding = _c === void 0 ? 10 : _c, _d = xAxisParams.xAxisCount, xAxisCount = _d === void 0 ? 6 : _d, xAxisElement = xAxisParams.xAxisElement;
+    var xAxisScale = d3ScaleLinear()
+        .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
+        .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue]);
+    showRoundOffXTickValues && xAxisScale.nice();
+    var xAxis = d3AxisBottom(xAxisScale)
+        .tickSize(xAxistickSize)
+        .tickPadding(tickPadding)
+        .ticks(xAxisCount)
+        .tickSizeOuter(0)
+        .tickFormat(function (domainValue, index) {
+        var xAxisValue = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
+        return convertToLocaleString(xAxisValue, culture);
+    });
+    if (xAxisElement) {
+        d3Select(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
+    }
+    return xAxisScale;
+}
+function multiFormat(date, locale) {
+    var formatMillisecond = locale.format('.%L');
+    var formatSecond = locale.format(':%S');
+    var formatMinute = locale.format('%I:%M');
+    var formatHour = locale.format('%I %p');
+    var formatDay = locale.format('%a %d');
+    var formatWeek = locale.format('%b %d');
+    var formatMonth = locale.format('%B');
+    var formatYear = locale.format('%Y');
+    return (d3TimeSecond(date) < date
+        ? formatMillisecond
+        : d3TimeMinute(date) < date
+            ? formatSecond
+            : d3TimeHour(date) < date
+                ? formatMinute
+                : d3TimeDay(date) < date
+                    ? formatHour
+                    : d3TimeMonth(date) < date
+                        ? d3TimeWeek(date) < date
+                            ? formatDay
+                            : formatWeek
+                        : d3TimeYear(date) < date
+                            ? formatMonth
+                            : formatYear)(date);
+}
+/**
+ * Creating Date x axis of the Chart
+ * @export
+ * @param {IXAxisParams} xAxisParams
+ * @param {ITickParams} tickParams
+ */
+export function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLocale, customDateTimeFormatter) {
+    var domainNRangeValues = xAxisParams.domainNRangeValues, xAxisElement = xAxisParams.xAxisElement, _a = xAxisParams.tickPadding, tickPadding = _a === void 0 ? 6 : _a, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, _c = xAxisParams.xAxisCount, xAxisCount = _c === void 0 ? 6 : _c;
+    var xAxisScale = d3ScaleTime()
+        .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
+        .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue]);
+    var xAxis = d3AxisBottom(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).ticks(xAxisCount);
+    if (customDateTimeFormatter) {
+        xAxis.tickFormat(function (domainValue, _index) {
+            return customDateTimeFormatter(domainValue);
+        });
+    }
+    else if (culture && options) {
+        xAxis.tickFormat(function (domainValue, _index) {
+            return domainValue.toLocaleString(culture, options);
+        });
+    }
+    else if (timeFormatLocale) {
+        var locale_1 = d3TimeFormat.timeFormatLocale(timeFormatLocale);
+        xAxis.tickFormat(function (domainValue, _index) {
+            return multiFormat(domainValue, locale_1);
+        });
+    }
+    tickParams.tickValues ? xAxis.tickValues(tickParams.tickValues) : '';
+    if (culture === undefined) {
+        tickParams.tickFormat ? xAxis.tickFormat(d3TimeFormat.timeFormat(tickParams.tickFormat)) : '';
+    }
+    if (xAxisElement) {
+        d3Select(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
+    }
+    return xAxisScale;
+}
+/**
+ * Create String X axis
+ * Currently using for only Vetical stacked bar chart and grouped vertical bar chart
+ * @export
+ * @param {IXAxisParams} xAxisParams
+ * @param {ITickParams} tickParams
+ * @param {string[]} dataset
+ * @returns
+ */
+export function createStringXAxis(xAxisParams, tickParams, dataset, culture) {
+    var domainNRangeValues = xAxisParams.domainNRangeValues, _a = xAxisParams.xAxisCount, xAxisCount = _a === void 0 ? 6 : _a, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, _c = xAxisParams.tickPadding, tickPadding = _c === void 0 ? 10 : _c, _d = xAxisParams.xAxisPadding, xAxisPadding = _d === void 0 ? 0.1 : _d, xAxisInnerPadding = xAxisParams.xAxisInnerPadding, xAxisOuterPadding = xAxisParams.xAxisOuterPadding;
+    var xAxisScale = d3ScaleBand()
+        .domain(dataset)
+        .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue])
+        .paddingInner(typeof xAxisInnerPadding !== 'undefined' ? xAxisInnerPadding : xAxisPadding)
+        .paddingOuter(typeof xAxisOuterPadding !== 'undefined' ? xAxisOuterPadding : xAxisPadding);
+    var xAxis = d3AxisBottom(xAxisScale)
+        .tickSize(xAxistickSize)
+        .tickPadding(tickPadding)
+        .ticks(xAxisCount)
+        .tickFormat(function (x, index) {
+        return convertToLocaleString(dataset[index], culture);
+    });
+    if (xAxisParams.xAxisElement) {
+        d3Select(xAxisParams.xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
+    }
+    return xAxisScale;
+}
+/**
+ * This method used for creating data points for the y axis.
+ * @export
+ * @param {number} maxVal
+ * @param {number} minVal
+ * @param {number} splitInto
+ * @returns {number[]}
+ */
+export function prepareDatapoints(maxVal, minVal, splitInto) {
+    var val = Math.ceil((maxVal - minVal) / splitInto);
+    var dataPointsArray = [minVal, minVal + val];
+    while (dataPointsArray[dataPointsArray.length - 1] < maxVal) {
+        dataPointsArray.push(dataPointsArray[dataPointsArray.length - 1] + val);
+    }
+    return dataPointsArray;
+}
+/**
+ * Creating Numeric Y axis of the chart
+ * @export
+ * @param {IYAxisParams} yAxisParams
+ * @param {boolean} isRtl
+ */
+export function createYAxis(yAxisParams, isRtl, axisData) {
+    var _a = yAxisParams.yMinMaxValues, yMinMaxValues = _a === void 0 ? { startValue: 0, endValue: 0 } : _a, _b = yAxisParams.yAxisElement, yAxisElement = _b === void 0 ? null : _b, _c = yAxisParams.yMaxValue, yMaxValue = _c === void 0 ? 0 : _c, _d = yAxisParams.yMinValue, yMinValue = _d === void 0 ? 0 : _d, containerHeight = yAxisParams.containerHeight, containerWidth = yAxisParams.containerWidth, margins = yAxisParams.margins, _e = yAxisParams.tickPadding, tickPadding = _e === void 0 ? 12 : _e, _f = yAxisParams.maxOfYVal, maxOfYVal = _f === void 0 ? 0 : _f, yAxisTickFormat = yAxisParams.yAxisTickFormat, _g = yAxisParams.yAxisTickCount, yAxisTickCount = _g === void 0 ? 4 : _g, eventAnnotationProps = yAxisParams.eventAnnotationProps, eventLabelHeight = yAxisParams.eventLabelHeight;
+    // maxOfYVal coming from only area chart and Grouped vertical bar chart(Calculation done at base file)
+    var tempVal = maxOfYVal || yMinMaxValues.endValue;
+    var finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue;
+    var finalYmin = yMinMaxValues.startValue < yMinValue ? 0 : yMinValue;
+    var domainValues = prepareDatapoints(finalYmax, finalYmin, yAxisTickCount);
+    var yAxisScale = d3ScaleLinear()
+        .domain([finalYmin, domainValues[domainValues.length - 1]])
+        .range([containerHeight - margins.bottom, margins.top + (eventAnnotationProps ? eventLabelHeight : 0)]);
+    var axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
+    var yAxis = axis
+        .tickPadding(tickPadding)
+        .tickValues(domainValues)
+        .tickSizeInner(-(containerWidth - margins.left - margins.right));
+    yAxisTickFormat ? yAxis.tickFormat(yAxisTickFormat) : yAxis.tickFormat(d3Format('.2~s'));
+    yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
+    axisData.yAxisDomainValues = domainValues;
+    return yAxisScale;
+}
+/**
+ * Creating String Y axis of the chart
+ * @param yAxisParams
+ * @param dataPoints
+ * @param isRtl
+ */
+export var createStringYAxis = function (yAxisParams, dataPoints, isRtl) {
+    var containerHeight = yAxisParams.containerHeight, _a = yAxisParams.tickPadding, tickPadding = _a === void 0 ? 12 : _a, margins = yAxisParams.margins, yAxisTickFormat = yAxisParams.yAxisTickFormat, yAxisElement = yAxisParams.yAxisElement, _b = yAxisParams.yAxisPadding, yAxisPadding = _b === void 0 ? 0 : _b;
+    var yAxisScale = d3ScaleBand()
+        .domain(dataPoints)
+        .range([containerHeight - margins.bottom, margins.top])
+        .padding(yAxisPadding);
+    var axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
+    var yAxis = axis.tickPadding(tickPadding).tickValues(dataPoints).tickSize(0);
+    if (yAxisTickFormat) {
+        yAxis.tickFormat(yAxisTickFormat);
+    }
+    yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text') : '';
+    return yAxisScale;
+};
+export function calloutData(values) {
+    var combinedResult = [];
+    values.forEach(function (element) {
+        var elements = element.data
+            .filter(function (ele) { return !ele.hideCallout; })
+            .map(function (ele) {
+            return __assign(__assign({ legend: element.legend }, ele), { color: element.color, index: element.index });
+        });
+        combinedResult = combinedResult.concat(elements);
+    });
+    var result = [];
+    combinedResult.forEach(function (e1, index) {
+        e1.x = e1.x instanceof Date ? e1.x.getTime() : e1.x;
+        var filteredValues = [
+            {
+                legend: e1.legend,
+                y: e1.y,
+                color: e1.color,
+                yAxisCalloutData: e1.yAxisCalloutData,
+                callOutAccessibilityData: e1.callOutAccessibilityData,
+                index: e1.index,
+            },
+        ];
+        combinedResult.slice(index + 1).forEach(function (e2) {
+            e2.x = e2.x instanceof Date ? e2.x.getTime() : e2.x;
+            if (e1.x === e2.x) {
+                filteredValues.push({
+                    legend: e2.legend,
+                    y: e2.y,
+                    color: e2.color,
+                    yAxisCalloutData: e2.yAxisCalloutData,
+                    callOutAccessibilityData: e2.callOutAccessibilityData,
+                    index: e2.index,
+                });
+            }
+        });
+        result.push({ x: e1.x, values: filteredValues });
+    });
+    return getUnique(result, 'x');
+}
+export function getUnique(arr, comp) {
+    var unique = arr
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .map(function (e) { return e[comp]; })
+        // store the keys of the unique objects
+        .map(function (e, i, final) { return final.indexOf(e) === i && i; })
+        // eliminate the dead keys & store unique objects
+        .filter(function (e) { return arr[e]; })
+        .map(function (e) { return arr[e]; });
+    return unique;
+}
+/**
+ * This function takes two paramerter
+ * 1. an array of strings
+ * 2. a string value
+ * if the value is not present in the given array then it will return the new
+ * array by appending the value to the present arrray.
+ *
+ * if the value is already present in  the given array then it will return the new
+ * array by deleteing the value from the the array
+ * @param array
+ * @param value
+ */
+export function silceOrAppendToArray(array, value) {
+    var pos = array.indexOf(value);
+    if (pos === -1) {
+        return __spreadArray(__spreadArray([], array), [value]);
+    }
+    else {
+        return array.slice(0, pos).concat(array.slice(pos + 1));
+    }
+}
+/**
+ * This method used for wrapping of x axis labels (tick values).
+ * It breaks down given text value by space separated and calculates the total height needed to display all the words.
+ * That value = removal value. This value needs to be remove from total svg height, svg will shrink and
+ * total text will be displayed.
+ * @export
+ * @param {IWrapLabelProps} wrapLabelProps
+ * @returns
+ */
+export function createWrapOfXLabels(wrapLabelProps) {
+    var node = wrapLabelProps.node, xAxis = wrapLabelProps.xAxis, noOfCharsToTruncate = wrapLabelProps.noOfCharsToTruncate, showXAxisLablesTooltip = wrapLabelProps.showXAxisLablesTooltip;
+    if (node === null) {
+        return;
+    }
+    var axisNode = d3Select(node).call(xAxis);
+    var removeVal = 0;
+    var width = 10;
+    var arr = [];
+    axisNode.selectAll('.tick text').each(function () {
+        var text = d3Select(this);
+        var totalWord = text.text();
+        var truncatedWord = text.text().slice(0, noOfCharsToTruncate) + "...";
+        var totalWordLength = text.text().length;
+        var words = text.text().split(/\s+/).reverse();
+        arr.push(words.length);
+        var word = '';
+        var line = [];
+        var lineNumber = 0;
+        var lineHeight = 1.1; // ems
+        var y = text.attr('y');
+        var dy = parseFloat(text.attr('dy'));
+        var tspan = text
+            .text(null)
+            .append('tspan')
+            .attr('x', 0)
+            .attr('y', y)
+            .attr('id', 'BaseSpan')
+            .attr('dy', dy + 'em')
+            .attr('data-', totalWord);
+        if (showXAxisLablesTooltip && totalWordLength > noOfCharsToTruncate) {
+            tspan = text
+                .append('tspan')
+                .attr('id', 'showDots')
+                .attr('x', 0)
+                .attr('y', y)
+                .attr('dy', ++lineNumber * lineHeight + dy + 'em')
+                .text(truncatedWord);
+        }
+        else if (showXAxisLablesTooltip && totalWordLength <= noOfCharsToTruncate) {
+            tspan = text
+                .append('tspan')
+                .attr('id', 'LessLength')
+                .attr('x', 0)
+                .attr('y', y)
+                .attr('dy', ++lineNumber * lineHeight + dy + 'em')
+                .text(totalWord);
+        }
+        else {
+            while ((word = words.pop())) {
+                line.push(word);
+                tspan.text(line.join(' '));
+                if (tspan.node().getComputedTextLength() > width && line.length > 1) {
+                    line.pop();
+                    tspan.text(line.join(' '));
+                    line = [word];
+                    tspan = text
+                        .append('tspan')
+                        .attr('id', 'WordBreakId')
+                        .attr('x', 0)
+                        .attr('y', y)
+                        .attr('dy', ++lineNumber * lineHeight + dy + 'em')
+                        .text(word);
+                }
+            }
+            var maxDigit = Math.max.apply(Math, arr);
+            var maxHeight_1 = 12; // intial value to render corretly first time
+            axisNode.selectAll('text').each(function () {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var outerHTMLElement = document.getElementById('WordBreakId');
+                var BoxCordinates = outerHTMLElement && outerHTMLElement.getBoundingClientRect();
+                var boxHeight = BoxCordinates && BoxCordinates.height;
+                if (boxHeight > maxHeight_1) {
+                    maxHeight_1 = boxHeight;
+                }
+            });
+            // If we take directly maxDigit * maxheight, then it will show more height between x axis tick values and bottom.
+            // To avoid this, reducing maxDigit value by removing some digit based on legth of word.
+            var removeDigit = 4;
+            if (maxDigit <= 2) {
+                removeDigit = 1;
+            }
+            else if (maxDigit > 2 && maxDigit <= 6) {
+                removeDigit = 2;
+            }
+            else if (maxDigit > 6 && maxDigit <= 9) {
+                removeDigit = 3;
+            }
+            removeVal = (maxDigit - removeDigit) * maxHeight_1;
+        }
+    });
+    return removeVal > 0 ? removeVal : 0;
+}
+/**
+ * This method displays a tooltip to the x axis lables(tick values)
+ * when prop 'showXAxisLablesTooltip' enables to the respected chart.
+ * On hover of the truncated word(at x axis labels tick), a tooltip will be appeared.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function tooltipOfXAxislabels(xAxistooltipProps) {
+    var tooltipCls = xAxistooltipProps.tooltipCls, xAxis = xAxistooltipProps.xAxis, id = xAxistooltipProps.id;
+    if (xAxis === null) {
+        return null;
+    }
+    var div = d3Select('body').append('div').attr('id', id).attr('class', tooltipCls).style('opacity', 0);
+    var aa = xAxis.selectAll('#BaseSpan')._groups[0];
+    var baseSpanLength = aa && Object.keys(aa).length;
+    var originalDataArray = [];
+    for (var i = 0; i < baseSpanLength; i++) {
+        var originalData = aa[i].dataset && Object.values(aa[i].dataset)[0];
+        originalDataArray.push(originalData);
+    }
+    var tickObject = xAxis.selectAll('.tick')._groups[0];
+    var tickObjectLength = tickObject && Object.keys(tickObject).length;
+    var _loop_1 = function (i) {
+        var d1 = tickObject[i];
+        d3Select(d1)
+            .on('mouseover', function (d) {
+            div.style('opacity', 0.9);
+            div
+                .html(originalDataArray[i])
+                .style('left', d3Event.pageX + 'px')
+                .style('top', d3Event.pageY - 28 + 'px');
+        })
+            .on('mouseout', function (d) {
+            div.style('opacity', 0);
+        });
+    };
+    for (var i = 0; i < tickObjectLength; i++) {
+        _loop_1(i);
+    }
+}
+/**
+ * Find the axis type of line chart and area chart from given data
+ * @param points
+ */
+export function getXAxisType(points) {
+    var isXAxisDateType = false;
+    if (points && points.length > 0) {
+        points.forEach(function (chartData) {
+            if (chartData.data.length > 0) {
+                isXAxisDateType = chartData.data[0].x instanceof Date;
+                return;
+            }
+        });
+    }
+    return isXAxisDateType;
+}
+/**
+ * Calculates Domain and range values for Date X axis.
+ * This method calculates Area chart and line chart.
+ * @export
+ * @param {ILineChartPoints[]} points
+ * @param {IMargins} margins
+ * @param {number} width
+ * @param {boolean} isRTL
+ * @param {Date[] | number[]} tickValues
+ * @returns {IDomainNRange}
+ */
+export function domainRangeOfDateForAreaChart(points, margins, width, isRTL, tickValues) {
+    if (tickValues === void 0) { tickValues = []; }
+    var sDate = d3Min(points, function (point) {
+        return d3Min(point.data, function (item) {
+            return item.x;
+        });
+    });
+    var lDate = d3Max(points, function (point) {
+        return d3Max(point.data, function (item) {
+            return item.x;
+        });
+    });
+    // Need to draw graph with given small and large date (Which Involves customization of date axis tick values)
+    // That may be Either from given graph data or from prop 'tickValues' date values.
+    // So, Finding smallest and largest dates
+    var smallestDate = d3Min(__spreadArray(__spreadArray([], tickValues), [sDate]));
+    var largestDate = d3Max(__spreadArray(__spreadArray([], tickValues), [lDate]));
+    var rStartValue = margins.left;
+    var rEndValue = width - margins.right;
+    return isRTL
+        ? { dStartValue: largestDate, dEndValue: smallestDate, rStartValue: rStartValue, rEndValue: rEndValue }
+        : { dStartValue: smallestDate, dEndValue: largestDate, rStartValue: rStartValue, rEndValue: rEndValue };
+}
+/**
+ * Calculates Domain and range values for Numeric X axis.
+ * This method calculates Area cart and line chart.
+ * @export
+ * @param {ILineChartPoints[]} points
+ * @param {IMargins} margins
+ * @param {number} width
+ * @param {boolean} isRTL
+ * @returns {IDomainNRange}
+ */
+export function domainRangeOfNumericForAreaChart(points, margins, width, isRTL) {
+    var xMin = d3Min(points, function (point) {
+        return d3Min(point.data, function (item) { return item.x; });
+    });
+    var xMax = d3Max(points, function (point) {
+        return d3Max(point.data, function (item) {
+            return item.x;
+        });
+    });
+    var rStartValue = margins.left;
+    var rEndValue = width - margins.right;
+    return isRTL
+        ? { dStartValue: xMax, dEndValue: xMin, rStartValue: rStartValue, rEndValue: rEndValue }
+        : { dStartValue: xMin, dEndValue: xMax, rStartValue: rStartValue, rEndValue: rEndValue };
+}
+/**
+ * Calculates Range values of x Axis string axis
+ * For String axis, we need to give domain values (Not start and end array values)
+ * So sending 0 as domain values. Domain will be handled at creation of string axis
+ * For charts stacked bar chart, grouped vertical bar chart, HeatMapChart and Vertical bar chart
+ * @export
+ * @param {IMargins} margins
+ * @param {number} width
+ * @param {boolean} isRTL
+ * @returns {IDomainNRange}
+ */
+export function domainRangeOfXStringAxis(margins, width, isRTL) {
+    var rMin = margins.left;
+    var rMax = width - margins.right;
+    return isRTL
+        ? { dStartValue: 0, dEndValue: 0, rStartValue: rMax, rEndValue: rMin }
+        : { dStartValue: 0, dEndValue: 0, rStartValue: rMin, rEndValue: rMax };
+}
+/**
+ * Calculate domain and range values to the Vertical stacked bar chart - For Numeric axis
+ * @export
+ * @param {IDataPoint[]} points
+ * @param {IMargins} margins
+ * @param {number} width
+ * @param {boolean} isRTL
+ * @param {number} barWidth
+ * @returns {IDomainNRange}
+ */
+export function domainRangeOfVSBCNumeric(points, margins, width, isRTL, barWidth) {
+    var xMin = d3Min(points, function (point) { return point.x; });
+    var xMax = d3Max(points, function (point) { return point.x; });
+    // barWidth / 2 - for to get tick middle of the bar
+    var rMax = margins.left + barWidth / 2;
+    var rMin = width - margins.right - barWidth / 2;
+    return isRTL
+        ? { dStartValue: xMax, dEndValue: xMin, rStartValue: rMax, rEndValue: rMin }
+        : { dStartValue: xMin, dEndValue: xMax, rStartValue: rMax, rEndValue: rMin };
+}
+/**
+ * Calculate domain and range values to the Vertical bar chart - For Numeric axis
+ * @export
+ * @param {IDataPoint[]} points
+ * @param {IMargins} margins
+ * @param {number} containerWidth
+ * @param {boolean} isRTL
+ * @param {number} barWidth
+ * @returns {IDomainNRange}
+ */
+export function domainRageOfVerticalNumeric(points, margins, containerWidth, isRTL, barWidth) {
+    var xMax = d3Max(points, function (point) { return point.x; });
+    var xMin = d3Min(points, function (point) { return point.x; });
+    var rMin = margins.left + barWidth / 2;
+    var rMax = containerWidth - margins.right - barWidth / 2;
+    return isRTL
+        ? { dStartValue: xMax, dEndValue: xMin, rStartValue: rMin, rEndValue: rMax }
+        : { dStartValue: xMin, dEndValue: xMax, rStartValue: rMin, rEndValue: rMax };
+}
+/**
+ * For creating X axis, need to calculate x axis domain and range values from given points.
+ * This may vary based on chart type and type of x axis
+ * So, this method will define which method need to call based on chart type and axis type.
+ * @export
+ * @param {*} points
+ * @param {IMargins} margins
+ * @param {number} width
+ * @param {ChartTypes} chartType
+ * @param {boolean} isRTL
+ * @param {XAxisTypes} xAxisType
+ * @param {number} [barWidth]
+ * @returns {IDomainNRange}
+ */
+export function getDomainNRangeValues(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues) {
+    var domainNRangeValue;
+    if (xAxisType === XAxisTypes.NumericAxis) {
+        switch (chartType) {
+            case ChartTypes.AreaChart:
+            case ChartTypes.LineChart:
+                domainNRangeValue = domainRangeOfNumericForAreaChart(points, margins, width, isRTL);
+                break;
+            case ChartTypes.VerticalStackedBarChart:
+                domainNRangeValue = domainRangeOfVSBCNumeric(points, margins, width, isRTL, barWidth);
+                break;
+            case ChartTypes.VerticalBarChart:
+                domainNRangeValue = domainRageOfVerticalNumeric(points, margins, width, isRTL, barWidth);
+                break;
+            default:
+                domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };
+        }
+    }
+    else if (xAxisType === XAxisTypes.DateAxis) {
+        switch (chartType) {
+            case ChartTypes.AreaChart:
+            case ChartTypes.LineChart:
+                domainNRangeValue = domainRangeOfDateForAreaChart(points, margins, width, isRTL, tickValues);
+                break;
+            default:
+                domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };
+        }
+    }
+    else {
+        // String Axis type
+        switch (chartType) {
+            case ChartTypes.VerticalStackedBarChart:
+            case ChartTypes.GroupedVerticalBarChart:
+            case ChartTypes.VerticalBarChart:
+            case ChartTypes.HeatMapChart:
+                domainNRangeValue = domainRangeOfXStringAxis(margins, width, isRTL);
+                break;
+            default:
+                domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };
+        }
+    }
+    return domainNRangeValue;
+}
+/**
+ * Calculating start and ending values of the Area chart and LineChart
+ * @export
+ * @param {ILineChartPoints[]} points
+ * @returns {{ startValue: number; endValue: number }}
+ */
+export function findNumericMinMaxOfY(points) {
+    var yMax = d3Max(points, function (point) {
+        return d3Max(point.data, function (item) { return item.y; });
+    });
+    var yMin = d3Min(points, function (point) {
+        return d3Min(point.data, function (item) { return item.y; });
+    });
+    return {
+        startValue: yMin,
+        endValue: yMax,
+    };
+}
+/**
+ * Find the minimum and maximum values of the vertical stacked bar chart y axis data point. Used for create y axis.
+ * @export
+ * @param {IDataPoint[]} dataset
+ * @returns {{ startValue: number; endValue: number }}
+ */
+export function findVSBCNumericMinMaxOfY(dataset) {
+    var yMax = d3Max(dataset, function (point) { return point.y; });
+    var yMin = d3Min(dataset, function (point) { return point.y; });
+    return { startValue: yMin, endValue: yMax };
+}
+/**
+ * Fins the min and max values of the vertical bar chart y axis data point.
+ * @export
+ * @param {IVerticalBarChartDataPoint[]} points
+ * @returns {{ startValue: number; endValue: number }}
+ */
+export function findVerticalNumericMinMaxOfY(points) {
+    var yMax = d3Max(points, function (point) { return point.y; });
+    var yMin = d3Min(points, function (point) { return point.y; });
+    return { startValue: yMin, endValue: yMax };
+}
+/**
+ * For creating Y axis, need to calculate y axis domain values from given points. This may vary based on chart type.
+ * So, this method will define which method need to call based on chart type to find out min and max values(For Domain).
+ * For grouped vertical bar chart, Calculating yMax value in the base file and sending as MaxOfYVal to cartesian.
+ * @export
+ * @param {*} points
+ * @param {ChartTypes} chartType
+ * @returns {{ startValue: number; endValue: number }}
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function getMinMaxOfYAxis(points, chartType) {
+    var minMaxValues;
+    switch (chartType) {
+        case ChartTypes.AreaChart:
+        case ChartTypes.LineChart:
+            minMaxValues = findNumericMinMaxOfY(points);
+            break;
+        case ChartTypes.VerticalStackedBarChart:
+            minMaxValues = findVSBCNumericMinMaxOfY(points);
+            break;
+        case ChartTypes.VerticalBarChart:
+            minMaxValues = findVerticalNumericMinMaxOfY(points);
+            break;
+        default:
+            minMaxValues = { startValue: 0, endValue: 0 };
+    }
+    return minMaxValues;
+}
+/**
+ * @param p string or number or Date
+ *
+ * This function takes the single data point of the x-aixs
+ * and decides what is the x-axis
+ */
+export var getTypeOfAxis = function (p, isXAsix) {
+    if (isXAsix) {
+        switch (typeof p) {
+            case 'string':
+                return XAxisTypes.StringAxis;
+            case 'number':
+                return XAxisTypes.NumericAxis;
+            default:
+                return XAxisTypes.DateAxis;
+        }
+    }
+    else {
+        switch (typeof p) {
+            case 'string':
+                return YAxisType.StringAxis;
+            case 'number':
+                return YAxisType.NumericAxis;
+            default:
+                return YAxisType.DateAxis;
+        }
+    }
+};
+/**
+ * we need to make sure that if we add any property to this, then
+ * we need to also add that in  pointTypes below and vise-versa
+ */
+export var Points;
+(function (Points) {
+    Points[Points["circle"] = 0] = "circle";
+    Points[Points["square"] = 1] = "square";
+    Points[Points["triangle"] = 2] = "triangle";
+    Points[Points["diamond"] = 3] = "diamond";
+    Points[Points["pyramid"] = 4] = "pyramid";
+    Points[Points["hexagon"] = 5] = "hexagon";
+    Points[Points["pentagon"] = 6] = "pentagon";
+    Points[Points["octagon"] = 7] = "octagon";
+})(Points || (Points = {}));
+export var CustomPoints;
+(function (CustomPoints) {
+    CustomPoints[CustomPoints["dottedLine"] = 0] = "dottedLine";
+})(CustomPoints || (CustomPoints = {}));
+/**
+ * we need to make sure that if we add any property to this, then
+ * we need to also add that in enum Point and vise-versa
+ */
+export var pointTypes = (_a = {},
+    _a[Points.circle] = {
+        widthRatio: 1,
+    },
+    _a[Points.square] = {
+        widthRatio: 1,
+    },
+    _a[Points.triangle] = {
+        widthRatio: 1,
+    },
+    _a[Points.diamond] = {
+        widthRatio: 1,
+    },
+    _a[Points.pyramid] = {
+        widthRatio: 1,
+    },
+    _a[Points.hexagon] = {
+        widthRatio: 2,
+    },
+    _a[Points.pentagon] = {
+        widthRatio: 1.168,
+    },
+    _a[Points.octagon] = {
+        widthRatio: 2.414,
+    },
+    _a);
+/**
+ * @param accessibleData accessible data
+ * @param role string to define role of tag
+ * @param isDataFocusable boolean
+ * function returns the accessibility data object
+ */
+export var getAccessibleDataObject = function (accessibleData, role, isDataFocusable) {
+    if (role === void 0) { role = 'text'; }
+    if (isDataFocusable === void 0) { isDataFocusable = true; }
+    accessibleData = accessibleData !== null && accessibleData !== void 0 ? accessibleData : {};
+    return {
+        role: role,
+        'data-is-focusable': isDataFocusable,
+        'aria-label': accessibleData.ariaLabel,
+        'aria-labelledby': accessibleData.ariaLabelledBy,
+        'aria-describedby': accessibleData.ariaDescribedBy,
+    };
+};
+export var convertToLocaleString = function (data, culture) {
+    if (!data) {
+        return data;
+    }
+    culture = culture || undefined;
+    if (typeof data === 'number') {
+        return data.toLocaleString(culture);
+    }
+    if (typeof data === 'string' && !window.isNaN(Number(data))) {
+        var num = Number(data);
+        return num.toLocaleString(culture);
+    }
+    return data;
+};
+export function rotateXAxisLabels(rotateLabelProps) {
+    var node = rotateLabelProps.node, xAxis = rotateLabelProps.xAxis;
+    if (node === null || xAxis === null) {
+        return;
+    }
+    var maxHeight = 0;
+    var xAxisTranslations = [];
+    d3Select(node)
+        .call(xAxis)
+        .selectAll('.tick')
+        .each(function () {
+        var translateValue = this.getAttribute('transform');
+        if ((translateValue === null || translateValue === void 0 ? void 0 : translateValue.indexOf('rotate')) === -1) {
+            var translatePair = translateValue
+                .substring(translateValue.indexOf('(') + 1, translateValue.indexOf(')'))
+                .split(',');
+            if (translatePair.length === 2) {
+                xAxisTranslations.push(translatePair[0]);
+                this.setAttribute('transform', "translate(" + translatePair[0] + ",0)rotate(-45)");
+            }
+        }
+        var BoxCordinates = this.getBoundingClientRect();
+        var boxHeight = BoxCordinates && BoxCordinates.height;
+        if (boxHeight > maxHeight) {
+            maxHeight = boxHeight;
+        }
+    });
+    var idx = 0;
+    d3Select(node)
+        .call(xAxis)
+        .selectAll('.tick')
+        .each(function () {
+        if (xAxisTranslations.length > idx) {
+            this.setAttribute('transform', "translate(" + xAxisTranslations[idx] + "," + maxHeight / 2 + ")rotate(-45)"); // Translate y by max height/2
+            idx += 1;
+        }
+    });
+    return Math.floor(maxHeight / 1.414); // Compute maxHeight/tanInverse(45) to get the vertical height of labels.
+}
+export function wrapTextInsideDonut(selectorClass, maxWidth) {
+    var idx = 0;
+    d3SelectAll("." + selectorClass).each(function () {
+        var text = d3Select(this);
+        var words = text.text().split(/\s+/).reverse();
+        var word = '';
+        var line = [];
+        var lineNumber = 0;
+        var lineHeight = 1.1; // ems
+        var y = text.attr('y');
+        var tspan = text
+            .text(null)
+            .append('tspan')
+            .attr('id', "WordBreakId-" + idx + "-" + lineNumber)
+            .attr('x', 0)
+            .attr('y', y)
+            .attr('dy', lineNumber++ * lineHeight + 'em');
+        while ((word = words.pop())) {
+            line.push(word);
+            tspan.text(line.join(' ') + ' ');
+            if (tspan.node().getComputedTextLength() > maxWidth && line.length > 1) {
+                line.pop();
+                tspan.text(line.join(' ') + ' ');
+                line = [word];
+                tspan = text
+                    .append('tspan')
+                    .attr('id', "WordBreakId-" + idx + "-" + lineNumber)
+                    .attr('x', 0)
+                    .attr('y', y)
+                    .attr('dy', lineNumber++ * lineHeight + 'em')
+                    .text(word);
+            }
+        }
+        idx += 1;
+    });
+}
+//# sourceMappingURL=utilities.js.map