@fluentui/react-charting 5.23.14 → 5.23.16

package/lib/utilities/utilities.js

@@ -0,0 +1,1052 @@
+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, scaleBand as d3ScaleBand, scaleUtc as d3ScaleUtc, scaleTime as d3ScaleTime, } from 'd3-scale';
+import { select as d3Select, selectAll as d3SelectAll } from 'd3-selection';
+import { format as d3Format } from 'd3-format';
+import { timeFormat as d3TimeFormat, timeFormatLocale as d3TimeFormatLocale, utcFormat as d3UtcFormat, } 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, utcSecond as d3UtcSecond, utcMinute as d3UtcMinute, utcHour as d3UtcHour, utcDay as d3UtcDay, utcMonth as d3UtcMonth, utcWeek as d3UtcWeek, utcYear as d3UtcYear, } from 'd3-time';
+import { formatPrefix as d3FormatPrefix } from 'd3-format';
+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["HorizontalBarChartWithAxis"] = 6] = "HorizontalBarChartWithAxis";
+})(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, chartType, 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)
+        .tickFormat(function (domainValue, index) {
+        var xAxisValue = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
+        return convertToLocaleString(xAxisValue, culture);
+    });
+    if (chartType === ChartTypes.HorizontalBarChartWithAxis) {
+        xAxis.tickSizeInner(-(xAxisParams.containerHeight - xAxisParams.margins.top));
+    }
+    if (xAxisElement) {
+        d3Select(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
+    }
+    var tickValues = xAxisScale.ticks(xAxisCount).map(xAxis.tickFormat());
+    return { xScale: xAxisScale, tickValues: tickValues };
+}
+function multiFormat(date, locale, useUTC) {
+    var timeFormat = locale ? (useUTC ? locale.utcFormat : locale.format) : useUTC ? d3UtcFormat : d3TimeFormat;
+    var formatMillisecond = timeFormat('.%L');
+    var formatSecond = timeFormat(':%S');
+    var formatMinute = timeFormat('%I:%M');
+    var formatHour = timeFormat('%I %p');
+    var formatDay = timeFormat('%a %d');
+    var formatWeek = timeFormat('%b %d');
+    var formatMonth = timeFormat('%B');
+    var formatYear = timeFormat('%Y');
+    var timeSecond = useUTC ? d3UtcSecond : d3TimeSecond;
+    var timeMinute = useUTC ? d3UtcMinute : d3TimeMinute;
+    var timeHour = useUTC ? d3UtcHour : d3TimeHour;
+    var timeDay = useUTC ? d3UtcDay : d3TimeDay;
+    var timeMonth = useUTC ? d3UtcMonth : d3TimeMonth;
+    var timeWeek = useUTC ? d3UtcWeek : d3TimeWeek;
+    var timeYear = useUTC ? d3UtcYear : d3TimeYear;
+    return (timeSecond(date) < date
+        ? formatMillisecond
+        : timeMinute(date) < date
+            ? formatSecond
+            : timeHour(date) < date
+                ? formatMinute
+                : timeDay(date) < date
+                    ? formatHour
+                    : timeMonth(date) < date
+                        ? timeWeek(date) < date
+                            ? formatDay
+                            : formatWeek
+                        : timeYear(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, useUTC) {
+    var _a;
+    var domainNRangeValues = xAxisParams.domainNRangeValues, xAxisElement = xAxisParams.xAxisElement, _b = xAxisParams.tickPadding, tickPadding = _b === void 0 ? 6 : _b, _c = xAxisParams.xAxistickSize, xAxistickSize = _c === void 0 ? 6 : _c, _d = xAxisParams.xAxisCount, xAxisCount = _d === void 0 ? 6 : _d;
+    var xAxisScale = useUTC ? d3ScaleUtc() : d3ScaleTime();
+    xAxisScale
+        .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 = d3TimeFormatLocale(timeFormatLocale);
+        xAxis.tickFormat(function (domainValue, _index) {
+            return multiFormat(domainValue, locale_1, useUTC);
+        });
+    }
+    tickParams.tickValues ? xAxis.tickValues(tickParams.tickValues) : '';
+    if (culture === undefined) {
+        tickParams.tickFormat
+            ? xAxis.tickFormat(useUTC ? d3UtcFormat(tickParams.tickFormat) : d3TimeFormat(tickParams.tickFormat))
+            : '';
+    }
+    if (xAxisElement) {
+        d3Select(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
+    }
+    var tickValues = ((_a = tickParams.tickValues) !== null && _a !== void 0 ? _a : xAxisScale.ticks(xAxisCount)).map(function (val, idx) {
+        var tickFormat = xAxis.tickFormat();
+        // val is a Date object. So when the tick format is not set, format val as a string to calculate its width
+        return tickFormat ? tickFormat(val, idx) : multiFormat(val, undefined, useUTC);
+    });
+    return { xScale: xAxisScale, tickValues: tickValues };
+}
+/**
+ * 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');
+    }
+    var tickValues = dataset.map(xAxis.tickFormat());
+    return { xScale: xAxisScale, tickValues: tickValues };
+}
+/**
+ * This method used for creating data points for the y axis.
+ * @export
+ * @param {number} maxVal
+ * @param {number} minVal
+ * @param {number} splitInto
+ * @param {boolean} isIntegralDataset
+ * @returns {number[]}
+ */
+export function prepareDatapoints(maxVal, minVal, splitInto, isIntegralDataset) {
+    var val = isIntegralDataset
+        ? Math.ceil((maxVal - minVal) / splitInto)
+        : (maxVal - minVal) / splitInto >= 1
+            ? Math.ceil((maxVal - minVal) / splitInto)
+            : (maxVal - minVal) / splitInto;
+    var dataPointsArray = [minVal, minVal + val];
+    while (dataPointsArray[dataPointsArray.length - 1] < maxVal) {
+        dataPointsArray.push(dataPointsArray[dataPointsArray.length - 1] + val);
+    }
+    return dataPointsArray;
+}
+export function createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl) {
+    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, 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;
+    // 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 yAxisScale = d3ScaleLinear()
+        .domain([finalYmin, finalYmax])
+        .range([containerHeight - margins.bottom, margins.top]);
+    var axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
+    var yAxis = axis.tickPadding(tickPadding).ticks(yAxisTickCount);
+    yAxisTickFormat ? yAxis.tickFormat(yAxisTickFormat) : yAxis.tickFormat(d3Format('.2~s'));
+    yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
+    return yAxisScale;
+}
+export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDataset, useSecondaryYScale) {
+    if (useSecondaryYScale === void 0) { useSecondaryYScale = false; }
+    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, isIntegralDataset);
+    var yAxisScale = d3ScaleLinear()
+        .domain([finalYmin, domainValues[domainValues.length - 1]])
+        .range([containerHeight - margins.bottom, margins.top + (eventAnnotationProps ? eventLabelHeight : 0)]);
+    var axis = (!isRtl && useSecondaryYScale) || (isRtl && !useSecondaryYScale) ? 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 for Horizontal Bar Chart With Axis
+ * @param yAxisParams
+ * @param dataPoints
+ * @param isRtl
+ */
+export var createStringYAxisForHorizontalBarChartWithAxis = function (yAxisParams, dataPoints, isRtl, barWidth) {
+    var containerHeight = yAxisParams.containerHeight, _a = yAxisParams.tickPadding, tickPadding = _a === void 0 ? 12 : _a, margins = yAxisParams.margins, yAxisTickFormat = yAxisParams.yAxisTickFormat, yAxisElement = yAxisParams.yAxisElement;
+    var yAxisScale = d3ScaleBand()
+        .domain(dataPoints)
+        .range([containerHeight - margins.bottom - barWidth / 2, margins.top + barWidth / 2]);
+    var axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
+    var yAxis = axis.tickPadding(tickPadding).ticks(dataPoints);
+    if (yAxisTickFormat) {
+        yAxis.tickFormat(yAxisTickFormat);
+    }
+    yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text') : '';
+    return yAxisScale;
+};
+/**
+ * Creating String Y axis of the chart for other chart except Horizontal Bar Chart With Axis
+ * @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;
+};
+/**
+ * For area chart and line chart, while displaying stackCallout, Need to form a callout data object.
+ * This methos creates an object for those 2 charts.
+ * @param values
+ */
+export function calloutData(values) {
+    var combinedResult = [];
+    values.forEach(function (line) {
+        var elements = line.data
+            .filter(function (point) { return !point.hideCallout; })
+            .map(function (point) {
+            return __assign(__assign({}, point), { legend: line.legend, color: line.color, index: line.index });
+        });
+        combinedResult = combinedResult.concat(elements);
+    });
+    var xValToDataPoints = {};
+    combinedResult.forEach(function (ele) {
+        var xValue = ele.x instanceof Date ? ele.x.getTime() : ele.x;
+        if (xValue in xValToDataPoints) {
+            xValToDataPoints[xValue].push({
+                legend: ele.legend,
+                y: ele.y,
+                color: ele.color,
+                xAxisCalloutData: ele.xAxisCalloutData,
+                yAxisCalloutData: ele.yAxisCalloutData,
+                callOutAccessibilityData: ele.callOutAccessibilityData,
+                index: ele.index,
+            });
+        }
+        else {
+            xValToDataPoints[xValue] = [
+                {
+                    legend: ele.legend,
+                    y: ele.y,
+                    color: ele.color,
+                    xAxisCalloutData: ele.xAxisCalloutData,
+                    yAxisCalloutData: ele.yAxisCalloutData,
+                    callOutAccessibilityData: ele.callOutAccessibilityData,
+                    index: ele.index,
+                },
+            ];
+        }
+    });
+    var result = Object.keys(xValToDataPoints).map(function (xValue) {
+        return { x: Number(xValue), values: xValToDataPoints[xValue] };
+    });
+    return result;
+}
+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, true), [value], false);
+    }
+    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 = "".concat(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 used for wrapping of y axis labels (tick values).
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function createYAxisLabels(node, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+yAxis, noOfCharsToTruncate, truncateLabel, isRtl) {
+    if (node === null) {
+        return;
+    }
+    var axisNode = d3Select(node).call(yAxis);
+    axisNode.selectAll('.tick text').each(function () {
+        var text = d3Select(this);
+        var totalWord = text.text();
+        var truncatedWord = isRtl
+            ? "...".concat(text.text().slice(0, noOfCharsToTruncate))
+            : "".concat(text.text().slice(0, noOfCharsToTruncate), "...");
+        var totalWordLength = text.text().length;
+        var padding = truncateLabel ? 1.5 : 1; // ems
+        var y = text.attr('y');
+        var x = text.attr('x');
+        var dy = parseFloat(text.attr('dy'));
+        var dx = 0;
+        text
+            .text(null)
+            .append('tspan')
+            .attr('x', x)
+            .attr('y', y)
+            .attr('id', 'BaseSpan')
+            .attr('dy', dy + 'em')
+            .attr('data-', totalWord);
+        if (truncateLabel && totalWordLength > noOfCharsToTruncate) {
+            text
+                .append('tspan')
+                .attr('id', 'showDots')
+                .attr('x', isRtl ? 0 : x)
+                .attr('y', y)
+                .attr('dy', dy)
+                .attr('dx', padding + dx + 'em')
+                .text(truncatedWord);
+        }
+        else {
+            text
+                .attr('text-align', 'start')
+                .append('tspan')
+                .attr('id', 'LessLength')
+                .attr('x', isRtl ? 0 : x)
+                .attr('y', y)
+                .attr('dx', padding + dx + 'em')
+                .text(totalWord);
+        }
+    });
+}
+export var wrapContent = function (content, id, maxWidth) {
+    var textElement = d3Select("#".concat(id));
+    textElement.text(content);
+    if (!textElement.node()) {
+        return false;
+    }
+    var isOverflowing = false;
+    var textLength = textElement.node().getComputedTextLength();
+    while (textLength > maxWidth && content.length > 0) {
+        content = content.slice(0, -1);
+        textElement.text(content + '...');
+        isOverflowing = true;
+        textLength = textElement.node().getComputedTextLength();
+    }
+    return isOverflowing;
+};
+/**
+ * Calculates the width of the longest axis label in pixels
+ */
+export var calculateLongestLabelWidth = function (labels, query) {
+    if (query === void 0) { query = 'none'; }
+    var maxLabelWidth = 0;
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d');
+    if (ctx) {
+        var axisText = document.querySelector(query);
+        if (axisText) {
+            var styles = window.getComputedStyle(axisText, null);
+            var fontWeight = styles.getPropertyValue('font-weight');
+            var fontSize = styles.getPropertyValue('font-size');
+            var fontFamily = styles.getPropertyValue('font-family');
+            ctx.font = "".concat(fontWeight, " ").concat(fontSize, " ").concat(fontFamily);
+        }
+        else {
+            ctx.font = '600 10px "Segoe UI"';
+        }
+        labels.forEach(function (label) {
+            maxLabelWidth = Math.max(ctx.measureText(label.toString()).width, maxLabelWidth);
+        });
+    }
+    return maxLabelWidth;
+};
+/**
+ * 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)
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .on('mouseover', function (event, d) {
+            div.style('opacity', 0.9);
+            div
+                .text(originalDataArray[i])
+                .style('left', event.pageX + 'px')
+                .style('top', event.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 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 Domain and range values for Numeric X axis.
+ * This method calculates Horizontal Chart with Axis
+ * @export
+ * @param {ILineChartPoints[]} points
+ * @param {IMargins} margins
+ * @param {number} width
+ * @param {boolean} isRTL
+ * @returns {IDomainNRange}
+ */
+export function domainRangeOfNumericForHorizontalBarChartWithAxis(points, margins, containerWidth, isRTL, shiftX) {
+    var xMax = d3Max(points, function (point) { return point.x; });
+    var rMin = isRTL ? margins.left : margins.left + shiftX;
+    var rMax = isRTL ? containerWidth - margins.right - shiftX : containerWidth - margins.right;
+    return isRTL
+        ? { dStartValue: xMax, dEndValue: 0, rStartValue: rMin, rEndValue: rMax }
+        : { dStartValue: 0, dEndValue: xMax, rStartValue: rMin, rEndValue: rMax };
+}
+/**
+ * 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; });
+    var rMax = margins.left;
+    var rMin = width - margins.right;
+    return isRTL
+        ? { dStartValue: xMax, dEndValue: xMin, rStartValue: rMax, rEndValue: rMin }
+        : { dStartValue: xMin, dEndValue: xMax, rStartValue: rMax, rEndValue: rMin };
+}
+/**
+ * Calculates Domain and range values for Date X axis.
+ * This method calculates Bar chart.
+ * @export
+ * @param {IVerticalBarChartDataPoint[]} points
+ * @param {IMargins} margins
+ * @param {number} width
+ * @param {boolean} isRTL
+ * @param {Date[] | number[]} tickValues
+ * @returns {IDomainNRange}
+ */
+export function domainRangeOfDateForAreaLineVerticalBarChart(points, margins, width, isRTL, tickValues, chartType, barWidth) {
+    if (tickValues === void 0) { tickValues = []; }
+    var sDate;
+    var lDate;
+    if (chartType === ChartTypes.AreaChart || chartType === ChartTypes.LineChart) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        sDate = d3Min(points, function (point) {
+            return d3Min(point.data, function (item) {
+                return item.x;
+            });
+        });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        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
+        sDate = d3Min(__spreadArray(__spreadArray([], tickValues, true), [sDate], false));
+        lDate = d3Max(__spreadArray(__spreadArray([], tickValues, true), [lDate], false));
+    }
+    else {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        sDate = d3Min(points, function (point) { return point.x; });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        lDate = d3Max(points, function (point) { return point.x; });
+    }
+    var rStartValue = margins.left;
+    var rEndValue = width - margins.right;
+    return isRTL
+        ? { dStartValue: lDate, dEndValue: sDate, rStartValue: rStartValue, rEndValue: rEndValue }
+        : { dStartValue: sDate, dEndValue: lDate, rStartValue: rStartValue, rEndValue: rEndValue };
+}
+/**
+ * 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;
+    var rMax = containerWidth - margins.right;
+    return isRTL
+        ? { dStartValue: xMax, dEndValue: xMin, rStartValue: rMin, rEndValue: rMax }
+        : { dStartValue: xMin, dEndValue: xMax, rStartValue: rMin, rEndValue: rMax };
+}
+/**
+ * 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) {
+        if (point.lineData !== undefined) {
+            if (point.y > point.lineData.y) {
+                return point.y;
+            }
+            else {
+                return point.lineData.y;
+            }
+        }
+        else {
+            return point.y;
+        }
+    });
+    var yMin = d3Min(points, function (point) {
+        if (point.lineData !== undefined) {
+            if (point.y < point.lineData.y) {
+                return point.y;
+            }
+            else {
+                return point.lineData.y;
+            }
+        }
+        else {
+            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 findHBCWANumericMinMaxOfY(points, yAxisType) {
+    if (yAxisType !== undefined && yAxisType === YAxisType.NumericAxis) {
+        var yMax = d3Max(points, function (point) { return point.y; });
+        var yMin = d3Min(points, function (point) { return point.y; });
+        return { startValue: yMin, endValue: yMax };
+    }
+    return { startValue: 0, endValue: 0 };
+}
+/**
+ * @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, isXAxis) {
+    if (isXAxis) {
+        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 === undefined || data === null || Number.isNaN(data)) {
+        return data;
+    }
+    culture = culture || undefined;
+    if (typeof data === 'number') {
+        return data.toLocaleString(culture);
+    }
+    else if (typeof data === 'string' && !window.isNaN(Number(data))) {
+        var num = Number(data);
+        return num.toLocaleString(culture);
+    }
+    else if (data instanceof Date) {
+        return data.toLocaleDateString(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(".concat(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(".concat(xAxisTranslations[idx], ",").concat(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(".".concat(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-".concat(idx, "-").concat(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-".concat(idx, "-").concat(lineNumber))
+                    .attr('x', 0)
+                    .attr('y', y)
+                    .attr('dy', lineNumber++ * lineHeight + 'em')
+                    .text(word);
+            }
+        }
+        idx += 1;
+    });
+}
+export function formatValueWithSIPrefix(value) {
+    var specifier;
+    if (value < 1000) {
+        specifier = '.2~'; // upto 2 decimal places without insignificant trailing zeros
+    }
+    else {
+        specifier = '.1'; // upto 1 decimal place
+    }
+    return d3FormatPrefix(specifier, value)(value);
+}
+var DEFAULT_BAR_WIDTH = 16;
+var MIN_BAR_WIDTH = 1;
+export var getBarWidth = function (barWidthProp, maxBarWidthProp, adjustedValue) {
+    if (adjustedValue === void 0) { adjustedValue = DEFAULT_BAR_WIDTH; }
+    var barWidth;
+    if (typeof barWidthProp === 'number') {
+        barWidth = barWidthProp;
+    }
+    else if (barWidthProp === 'default' || typeof barWidthProp === 'undefined') {
+        barWidth = Math.min(adjustedValue, DEFAULT_BAR_WIDTH);
+    }
+    else {
+        barWidth = adjustedValue;
+    }
+    if (typeof maxBarWidthProp === 'number') {
+        barWidth = Math.min(barWidth, maxBarWidthProp);
+    }
+    barWidth = Math.max(barWidth, MIN_BAR_WIDTH);
+    return barWidth;
+};
+export var getScalePadding = function (prop, shorthandProp, defaultValue) {
+    if (defaultValue === void 0) { defaultValue = 0; }
+    var padding = typeof prop === 'number' ? prop : typeof shorthandProp === 'number' ? shorthandProp : defaultValue;
+    padding = Math.max(0, Math.min(padding, 1));
+    return padding;
+};
+export var isScalePaddingDefined = function (prop, shorthandProp) {
+    return typeof prop === 'number' || typeof shorthandProp === 'number';
+};
+export var formatDate = function (date, useUTC) {
+    var timeFormat = useUTC ? d3UtcFormat : d3TimeFormat;
+    return timeFormat('%-e %b %Y, %H:%M')(date) + (useUTC ? ' GMT' : '');
+};
+//# sourceMappingURL=utilities.js.map