@fluentui/react-charts 1.2.0 → 9.0.0

package/lib/utilities/utilities.js

@@ -0,0 +1,1215 @@
+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';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+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, tickParams, chartType, culture) {
+    const { domainNRangeValues, showRoundOffXTickValues = false, xAxistickSize = 6, tickPadding = 10, xAxisCount, xAxisElement, hideTickOverlap } = xAxisParams;
+    const xAxisScale = d3ScaleLinear().domain([
+        domainNRangeValues.dStartValue,
+        domainNRangeValues.dEndValue
+    ]).range([
+        domainNRangeValues.rStartValue,
+        domainNRangeValues.rEndValue
+    ]);
+    showRoundOffXTickValues && xAxisScale.nice();
+    let tickCount = xAxisCount !== null && xAxisCount !== void 0 ? xAxisCount : 6;
+    const tickFormat = (domainValue, _index)=>{
+        if (tickParams.tickFormat) {
+            return d3Format(tickParams.tickFormat)(domainValue);
+        }
+        const xAxisValue = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
+        return convertToLocaleString(xAxisValue, culture);
+    };
+    if (hideTickOverlap && typeof xAxisCount === 'undefined') {
+        const longestLabelWidth = calculateLongestLabelWidth(xAxisScale.ticks().map(tickFormat), '.fui-cart__xAxis text') + 20;
+        const [start, end] = xAxisScale.range();
+        tickCount = Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth));
+    }
+    const xAxis = d3AxisBottom(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).ticks(tickCount).tickFormat(tickFormat);
+    if (chartType === 6) {
+        xAxis.tickSizeInner(-(xAxisParams.containerHeight - xAxisParams.margins.top));
+    }
+    if (tickParams.tickValues) {
+        xAxis.tickValues(tickParams.tickValues);
+    }
+    if (xAxisElement) {
+        d3Select(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
+    }
+    var _tickParams_tickValues;
+    const tickValues = ((_tickParams_tickValues = tickParams.tickValues) !== null && _tickParams_tickValues !== void 0 ? _tickParams_tickValues : xAxisScale.ticks(tickCount)).map(xAxis.tickFormat());
+    return {
+        xScale: xAxisScale,
+        tickValues
+    };
+}
+function multiFormat(date, locale, useUTC) {
+    const timeFormat = locale ? useUTC ? locale.utcFormat : locale.format : useUTC ? d3UtcFormat : d3TimeFormat;
+    const formatMillisecond = timeFormat('.%L');
+    const formatSecond = timeFormat(':%S');
+    const formatMinute = timeFormat('%I:%M');
+    const formatHour = timeFormat('%I %p');
+    const formatDay = timeFormat('%a %d');
+    const formatWeek = timeFormat('%b %d');
+    const formatMonth = timeFormat('%B');
+    const formatYear = timeFormat('%Y');
+    const timeSecond = useUTC ? d3UtcSecond : d3TimeSecond;
+    const timeMinute = useUTC ? d3UtcMinute : d3TimeMinute;
+    const timeHour = useUTC ? d3UtcHour : d3TimeHour;
+    const timeDay = useUTC ? d3UtcDay : d3TimeDay;
+    const timeMonth = useUTC ? d3UtcMonth : d3TimeMonth;
+    const timeWeek = useUTC ? d3UtcWeek : d3TimeWeek;
+    const 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) {
+    const { domainNRangeValues, xAxisElement, tickPadding = 6, xAxistickSize = 6, xAxisCount, hideTickOverlap } = xAxisParams;
+    const xAxisScale = useUTC ? d3ScaleUtc() : d3ScaleTime();
+    xAxisScale.domain([
+        domainNRangeValues.dStartValue,
+        domainNRangeValues.dEndValue
+    ]).range([
+        domainNRangeValues.rStartValue,
+        domainNRangeValues.rEndValue
+    ]);
+    let tickCount = xAxisCount !== null && xAxisCount !== void 0 ? xAxisCount : 6;
+    const tickFormat = (domainValue, _index)=>{
+        if (customDateTimeFormatter) {
+            return customDateTimeFormatter(domainValue);
+        }
+        if (culture && options) {
+            return domainValue.toLocaleString(culture, options);
+        }
+        if (timeFormatLocale) {
+            const locale = d3TimeFormatLocale(timeFormatLocale);
+            return multiFormat(domainValue, locale, useUTC);
+        }
+        if (culture === undefined && tickParams.tickFormat) {
+            if (useUTC) {
+                return d3UtcFormat(tickParams.tickFormat)(domainValue);
+            } else {
+                return d3TimeFormat(tickParams.tickFormat)(domainValue);
+            }
+        }
+        return multiFormat(domainValue, undefined, useUTC);
+    };
+    if (hideTickOverlap && typeof xAxisCount === 'undefined') {
+        const longestLabelWidth = calculateLongestLabelWidth(xAxisScale.ticks().map(tickFormat), '.fui-cart__xAxis text') + 40;
+        const [start, end] = xAxisScale.range();
+        tickCount = Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth));
+    }
+    const xAxis = d3AxisBottom(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).ticks(tickCount).tickFormat(tickFormat);
+    tickParams.tickValues ? xAxis.tickValues(tickParams.tickValues) : '';
+    if (xAxisElement) {
+        d3Select(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
+    }
+    var _tickParams_tickValues;
+    const tickValues = ((_tickParams_tickValues = tickParams.tickValues) !== null && _tickParams_tickValues !== void 0 ? _tickParams_tickValues : xAxisScale.ticks(tickCount)).map(xAxis.tickFormat());
+    return {
+        xScale: xAxisScale,
+        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) {
+    const { domainNRangeValues, xAxistickSize = 6, tickPadding = 10, xAxisPadding = 0.1, xAxisInnerPadding, xAxisOuterPadding, containerWidth, hideTickOverlap } = xAxisParams;
+    const xAxisScale = d3ScaleBand().domain(dataset).range([
+        domainNRangeValues.rStartValue,
+        domainNRangeValues.rEndValue
+    ]).paddingInner(typeof xAxisInnerPadding !== 'undefined' ? xAxisInnerPadding : xAxisPadding).paddingOuter(typeof xAxisOuterPadding !== 'undefined' ? xAxisOuterPadding : xAxisPadding);
+    var _tickParams_tickValues;
+    let tickValues = (_tickParams_tickValues = tickParams.tickValues) !== null && _tickParams_tickValues !== void 0 ? _tickParams_tickValues : dataset;
+    const tickFormat = (domainValue, _index)=>{
+        return convertToLocaleString(domainValue, culture);
+    };
+    if (hideTickOverlap) {
+        let nonOverlappingTickValues = [];
+        const tickSizes = tickValues.map((value, index)=>calculateLongestLabelWidth([
+                tickFormat(value, index)
+            ], '.fui-cart__xAxis text'));
+        // for LTR
+        let start = 0;
+        let end = containerWidth;
+        let sign = 1;
+        const range = xAxisScale.range();
+        if (range[1] - range[0] < 0) {
+            // for RTL
+            start = containerWidth;
+            end = 0;
+            sign = -1;
+        }
+        for(let i = tickValues.length - 1; i >= 0; i--){
+            const tickPosition = xAxisScale(tickValues[i]);
+            if (sign * (tickPosition - sign * tickSizes[i] / 2 - start) >= 0 && sign * (tickPosition + sign * tickSizes[i] / 2 - end) <= 0) {
+                nonOverlappingTickValues.push(tickValues[i]);
+                end = tickPosition - sign * (tickSizes[i] / 2 + 10);
+            }
+        }
+        nonOverlappingTickValues = nonOverlappingTickValues.reverse();
+        tickValues = nonOverlappingTickValues;
+    }
+    const xAxis = d3AxisBottom(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).tickValues(tickValues).tickFormat(tickFormat);
+    if (xAxisParams.xAxisElement) {
+        d3Select(xAxisParams.xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
+    }
+    return {
+        xScale: xAxisScale,
+        tickValues: tickValues.map(xAxis.tickFormat())
+    };
+}
+export function useRtl() {
+    const { dir } = useFluent(); // "dir" returns "ltr" or "rtl"
+    return dir === 'rtl';
+}
+/**
+ * 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) {
+    const val = isIntegralDataset ? Math.ceil((maxVal - minVal) / splitInto) : (maxVal - minVal) / splitInto >= 1 ? Math.ceil((maxVal - minVal) / splitInto) : (maxVal - minVal) / splitInto;
+    const 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, chartType, barWidth, isIntegralDataset, useSecondaryYScale = false) {
+    switch(chartType){
+        case 6:
+            return createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl, axisData, barWidth);
+        default:
+            return createYAxisForOtherCharts(yAxisParams, isRtl, axisData, isIntegralDataset, useSecondaryYScale);
+    }
+}
+export function createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl, axisData, barWidth) {
+    const { yMinMaxValues = {
+        startValue: 0,
+        endValue: 0
+    }, yAxisElement = null, yMaxValue = 0, yMinValue = 0, containerHeight, margins, tickPadding = 12, maxOfYVal = 0, yAxisTickFormat, yAxisTickCount = 4 } = yAxisParams;
+    // maxOfYVal coming from only area chart and Grouped vertical bar chart(Calculation done at base file)
+    const tempVal = maxOfYVal || yMinMaxValues.endValue;
+    const finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue;
+    const finalYmin = yMinMaxValues.startValue < yMinValue ? 0 : yMinValue;
+    const yAxisScale = d3ScaleLinear().domain([
+        finalYmin,
+        finalYmax
+    ]).range([
+        containerHeight - margins.bottom,
+        margins.top
+    ]);
+    const axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
+    const yAxis = axis.tickPadding(tickPadding).ticks(yAxisTickCount);
+    yAxisTickFormat ? yAxis.tickFormat(yAxisTickFormat) : yAxis.tickFormat(d3Format('.2~s'));
+    yAxisElement ? d3Select(yAxisElement).call((g)=>yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
+    return yAxisScale;
+}
+export function createYAxisForOtherCharts(yAxisParams, isRtl, axisData, isIntegralDataset, useSecondaryYScale = false) {
+    const { yMinMaxValues = {
+        startValue: 0,
+        endValue: 0
+    }, yAxisElement = null, yMaxValue = 0, yMinValue = 0, containerHeight, containerWidth, margins, tickPadding = 12, maxOfYVal = 0, yAxisTickFormat, yAxisTickCount = 4, eventAnnotationProps, eventLabelHeight } = yAxisParams;
+    // maxOfYVal coming from only area chart and Grouped vertical bar chart(Calculation done at base file)
+    const tempVal = maxOfYVal || yMinMaxValues.endValue;
+    const finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue;
+    const finalYmin = yMinMaxValues.startValue < yMinValue ? 0 : yMinValue;
+    const domainValues = prepareDatapoints(finalYmax, finalYmin, yAxisTickCount, isIntegralDataset);
+    const yAxisScale = d3ScaleLinear().domain([
+        finalYmin,
+        domainValues[domainValues.length - 1]
+    ]).range([
+        containerHeight - margins.bottom,
+        margins.top + (eventAnnotationProps ? eventLabelHeight : 0)
+    ]);
+    const axis = !isRtl && useSecondaryYScale || isRtl && !useSecondaryYScale ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
+    const 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;
+}
+export const createStringYAxis = (yAxisParams, dataPoints, isRtl, chartType, barWidth, culture)=>{
+    switch(chartType){
+        case 6:
+            return createStringYAxisForHorizontalBarChartWithAxis(yAxisParams, dataPoints, isRtl, barWidth, culture);
+        default:
+            return createStringYAxisForOtherCharts(yAxisParams, dataPoints, isRtl);
+    }
+};
+/**
+ * Creating String Y axis of the chart for Horizontal Bar Chart With Axis
+ * @param yAxisParams
+ * @param dataPoints
+ * @param isRtl
+ */ export const createStringYAxisForHorizontalBarChartWithAxis = (yAxisParams, dataPoints, isRtl, barWidth, culture)=>{
+    const { containerHeight, tickPadding = 12, margins, yAxisTickFormat, yAxisElement } = yAxisParams;
+    const yAxisScale = d3ScaleBand().domain(dataPoints).range([
+        containerHeight - margins.bottom - barWidth / 2,
+        margins.top + barWidth / 2
+    ]);
+    const axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
+    const yAxis = axis.tickPadding(tickPadding).ticks(dataPoints);
+    if (yAxisTickFormat) {
+        yAxis.tickFormat(yAxisTickFormat);
+    }
+    yAxisElement ? d3Select(yAxisElement).call((g)=>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 const createStringYAxisForOtherCharts = (yAxisParams, dataPoints, isRtl)=>{
+    const { containerHeight, tickPadding = 12, margins, yAxisTickFormat, yAxisElement, yAxisPadding = 0 } = yAxisParams;
+    const yAxisScale = d3ScaleBand().domain(dataPoints).range([
+        containerHeight - margins.bottom,
+        margins.top
+    ]).padding(yAxisPadding);
+    const axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
+    const yAxis = axis.tickPadding(tickPadding).tickValues(dataPoints).tickSize(0);
+    if (yAxisTickFormat) {
+        yAxis.tickFormat(yAxisTickFormat);
+    }
+    yAxisElement ? d3Select(yAxisElement).call((g)=>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) {
+    let combinedResult = [];
+    values.forEach((line)=>{
+        const elements = line.data.filter((point)=>!point.hideCallout).map((point)=>{
+            return {
+                ...point,
+                legend: line.legend,
+                color: line.color,
+                index: line.index
+            };
+        });
+        combinedResult = combinedResult.concat(elements);
+    });
+    const xValToDataPoints = {};
+    combinedResult.forEach((ele)=>{
+        const 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
+                }
+            ];
+        }
+    });
+    const result = Object.keys(xValToDataPoints).map((xValue)=>{
+        return {
+            x: Number(xValue),
+            values: xValToDataPoints[xValue]
+        };
+    });
+    return result;
+}
+export function getUnique(arr, comp) {
+    const unique = arr// eslint-disable-next-line @typescript-eslint/no-explicit-any
+    .map((e)=>e[comp])// store the keys of the unique objects
+    .map((e, i, final)=>final.indexOf(e) === i && i)// eliminate the dead keys & store unique objects
+    .filter((e)=>arr[e]).map((e)=>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) {
+    const pos = array.indexOf(value);
+    if (pos === -1) {
+        return [
+            ...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) {
+    const { node, xAxis, noOfCharsToTruncate, showXAxisLablesTooltip } = wrapLabelProps;
+    if (node === null) {
+        return;
+    }
+    const axisNode = d3Select(node).call((g)=>xAxis);
+    let removeVal = 0;
+    const width = 10;
+    const arr = [];
+    axisNode.selectAll('.tick text').each(function() {
+        const text = d3Select(this);
+        const totalWord = text.text();
+        const truncatedWord = `${text.text().slice(0, noOfCharsToTruncate)}...`;
+        const totalWordLength = text.text().length;
+        const words = text.text().split(/\s+/).reverse();
+        arr.push(words.length);
+        let word = '';
+        let line = [];
+        let lineNumber = 0;
+        const lineHeight = 1.1; // ems
+        const y = text.attr('y');
+        const dy = parseFloat(text.attr('dy'));
+        let 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);
+                }
+            }
+            const maxDigit = Math.max(...arr);
+            let maxHeight = 12; // intial value to render corretly first time
+            axisNode.selectAll('text').each(()=>{
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const outerHTMLElement = document.getElementById('WordBreakId');
+                const BoxCordinates = outerHTMLElement && outerHTMLElement.getBoundingClientRect();
+                const boxHeight = BoxCordinates && BoxCordinates.height;
+                if (boxHeight > maxHeight) {
+                    maxHeight = 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.
+            let 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;
+        }
+    });
+    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, xValue, isRtl) {
+    if (node === null) {
+        return;
+    }
+    const axisNode = d3Select(node).call(yAxis);
+    axisNode.selectAll('.tick text').each(function() {
+        const text = d3Select(this);
+        const totalWord = text.text();
+        const truncatedWord = isRtl ? `...${text.text().slice(0, noOfCharsToTruncate)}` : `${text.text().slice(0, noOfCharsToTruncate)}...`;
+        const totalWordLength = text.text().length;
+        const padding = truncateLabel ? 1.5 : 1; // ems
+        const y = text.attr('y');
+        const x = text.attr('x');
+        const dy = parseFloat(text.attr('dy'));
+        const 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 const wrapContent = (content, id, maxWidth)=>{
+    const textElement = d3Select(`#${id}`);
+    textElement.text(content);
+    if (!textElement.node()) {
+        return false;
+    }
+    let isOverflowing = false;
+    let 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 const calculateLongestLabelWidth = (labels, query = 'none')=>{
+    let maxLabelWidth = 0;
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+        const axisText = document.querySelector(query);
+        if (axisText) {
+            const styles = window.getComputedStyle(axisText, null);
+            const fontWeight = styles.getPropertyValue('font-weight');
+            const fontSize = styles.getPropertyValue('font-size');
+            const fontFamily = styles.getPropertyValue('font-family');
+            ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;
+        } else {
+            ctx.font = '600 10px "Segoe UI"';
+        }
+        labels.forEach((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) {
+    const { tooltipCls, xAxis, id } = xAxistooltipProps;
+    if (xAxis === null) {
+        return null;
+    }
+    const div = d3Select('body').append('div').attr('id', id).attr('class', tooltipCls).style('opacity', 0);
+    const aa = xAxis.selectAll('#BaseSpan')._groups[0];
+    const baseSpanLength = aa && Object.keys(aa).length;
+    const originalDataArray = [];
+    for(let i = 0; i < baseSpanLength; i++){
+        const originalData = aa[i].dataset && Object.values(aa[i].dataset)[0];
+        originalDataArray.push(originalData);
+    }
+    const tickObject = xAxis.selectAll('.tick')._groups[0];
+    const tickObjectLength = tickObject && Object.keys(tickObject).length;
+    for(let i = 0; i < tickObjectLength; i++){
+        const d1 = tickObject[i];
+        d3Select(d1)// eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .on('mouseover', (event, d)=>{
+            div.style('opacity', 0.9);
+            div.html(originalDataArray[i]).style('left', event.pageX + 'px').style('top', event.pageY - 28 + 'px');
+        }).on('mouseout', (d)=>{
+            div.style('opacity', 0);
+        });
+    }
+}
+/**
+ * Find the axis type of line chart and area chart from given data
+ * @param points
+ */ export function getXAxisType(points) {
+    let isXAxisDateType = false;
+    if (points && points.length > 0) {
+        points.forEach((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 {LineChartPoints[]} points
+ * @param {IMargins} margins
+ * @param {number} width
+ * @param {boolean} isRTL
+ * @returns {IDomainNRange}
+ */ export function domainRangeOfNumericForAreaChart(points, margins, width, isRTL) {
+    const xMin = d3Min(points, (point)=>{
+        return d3Min(point.data, (item)=>item.x);
+    });
+    const xMax = d3Max(points, (point)=>{
+        return d3Max(point.data, (item)=>{
+            return item.x;
+        });
+    });
+    const rStartValue = margins.left;
+    const rEndValue = width - margins.right;
+    return isRTL ? {
+        dStartValue: xMax,
+        dEndValue: xMin,
+        rStartValue,
+        rEndValue
+    } : {
+        dStartValue: xMin,
+        dEndValue: xMax,
+        rStartValue,
+        rEndValue
+    };
+}
+/**
+ * Calculates Domain and range values for Numeric X axis.
+ * This method calculates Horizontal Chart with Axis
+ * @export
+ * @param {LineChartPoints[]} points
+ * @param {IMargins} margins
+ * @param {number} width
+ * @param {boolean} isRTL
+ * @returns {IDomainNRange}
+ */ export function domainRangeOfNumericForHorizontalBarChartWithAxis(points, margins, containerWidth, isRTL, shiftX) {
+    const xMax = d3Max(points, (point)=>point.x);
+    const rMin = isRTL ? margins.left : margins.left + shiftX;
+    const 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) {
+    const rMin = margins.left;
+    const 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 {DataPoint[]} points
+ * @param {IMargins} margins
+ * @param {number} width
+ * @param {boolean} isRTL
+ * @param {number} barWidth
+ * @returns {IDomainNRange}
+ */ export function domainRangeOfVSBCNumeric(points, margins, width, isRTL, barWidth) {
+    const xMin = d3Min(points, (point)=>point.x);
+    const xMax = d3Max(points, (point)=>point.x);
+    const rMax = margins.left;
+    const 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 {VerticalBarChartDataPoint[]} 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) {
+    let sDate;
+    let lDate;
+    if (chartType === 0 || chartType === 1) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        sDate = d3Min(points, (point)=>{
+            return d3Min(point.data, (item)=>{
+                return item.x;
+            });
+        });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        lDate = d3Max(points, (point)=>{
+            return d3Max(point.data, (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([
+            ...tickValues,
+            sDate
+        ]);
+        lDate = d3Max([
+            ...tickValues,
+            lDate
+        ]);
+    } else {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        sDate = d3Min(points, (point)=>point.x);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        lDate = d3Max(points, (point)=>point.x);
+    }
+    const rStartValue = margins.left;
+    const rEndValue = width - margins.right;
+    return isRTL ? {
+        dStartValue: lDate,
+        dEndValue: sDate,
+        rStartValue,
+        rEndValue
+    } : {
+        dStartValue: sDate,
+        dEndValue: lDate,
+        rStartValue,
+        rEndValue
+    };
+}
+/**
+ * Calculate domain and range values to the Vertical bar chart - For Numeric axis
+ * @export
+ * @param {DataPoint[]} points
+ * @param {IMargins} margins
+ * @param {number} containerWidth
+ * @param {boolean} isRTL
+ * @param {number} barWidth
+ * @returns {IDomainNRange}
+ */ export function domainRageOfVerticalNumeric(points, margins, containerWidth, isRTL, barWidth) {
+    const xMax = d3Max(points, (point)=>point.x);
+    const xMin = d3Min(points, (point)=>point.x);
+    const rMin = margins.left;
+    const rMax = containerWidth - margins.right;
+    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, shiftX) {
+    let domainNRangeValue;
+    if (xAxisType === 0) {
+        switch(chartType){
+            case 0:
+            case 1:
+                domainNRangeValue = domainRangeOfNumericForAreaChart(points, margins, width, isRTL);
+                break;
+            case 3:
+                domainNRangeValue = domainRangeOfVSBCNumeric(points, margins, width, isRTL, barWidth);
+                break;
+            case 2:
+                domainNRangeValue = domainRageOfVerticalNumeric(points, margins, width, isRTL, barWidth);
+                break;
+            case 6:
+                domainNRangeValue = domainRangeOfNumericForHorizontalBarChartWithAxis(points, margins, width, isRTL, shiftX);
+                break;
+            default:
+                domainNRangeValue = {
+                    dStartValue: 0,
+                    dEndValue: 0,
+                    rStartValue: 0,
+                    rEndValue: 0
+                };
+        }
+    } else if (xAxisType === 1) {
+        switch(chartType){
+            case 0:
+            case 1:
+            case 2:
+            case 3:
+                domainNRangeValue = domainRangeOfDateForAreaLineVerticalBarChart(points, margins, width, isRTL, tickValues, chartType, barWidth);
+                break;
+            default:
+                domainNRangeValue = {
+                    dStartValue: 0,
+                    dEndValue: 0,
+                    rStartValue: 0,
+                    rEndValue: 0
+                };
+        }
+    } else {
+        // String Axis type
+        switch(chartType){
+            case 3:
+            case 4:
+            case 2:
+            case 5:
+                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 {LineChartPoints[]} points
+ * @returns {{ startValue: number; endValue: number }}
+ */ export function findNumericMinMaxOfY(points) {
+    const yMax = d3Max(points, (point)=>{
+        return d3Max(point.data, (item)=>item.y);
+    });
+    const yMin = d3Min(points, (point)=>{
+        return d3Min(point.data, (item)=>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 {DataPoint[]} dataset
+ * @returns {{ startValue: number; endValue: number }}
+ */ export function findVSBCNumericMinMaxOfY(dataset) {
+    const yMax = d3Max(dataset, (point)=>point.y);
+    const yMin = d3Min(dataset, (point)=>point.y);
+    return {
+        startValue: yMin,
+        endValue: yMax
+    };
+}
+/**
+ * Fins the min and max values of the vertical bar chart y axis data point.
+ * @export
+ * @param {VerticalBarChartDataPoint[]} points
+ * @returns {{ startValue: number; endValue: number }}
+ */ export function findVerticalNumericMinMaxOfY(points) {
+    const yMax = d3Max(points, (point)=>{
+        if (point.lineData !== undefined) {
+            if (point.y > point.lineData.y) {
+                return point.y;
+            } else {
+                return point.lineData.y;
+            }
+        } else {
+            return point.y;
+        }
+    });
+    const yMin = d3Min(points, (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 {VerticalBarChartDataPoint[]} points
+ * @returns {{ startValue: number; endValue: number }}
+ */ export function findHBCWANumericMinMaxOfY(points, yAxisType) {
+    if (yAxisType !== undefined && yAxisType === 0) {
+        const yMax = d3Max(points, (point)=>point.y);
+        const yMin = d3Min(points, (point)=>point.y);
+        return {
+            startValue: yMin,
+            endValue: yMax
+        };
+    }
+    return {
+        startValue: 0,
+        endValue: 0
+    };
+}
+/**
+ * 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(// eslint-disable-next-line @typescript-eslint/no-explicit-any
+points, chartType, yAxisType = 0) {
+    let minMaxValues;
+    switch(chartType){
+        case 0:
+        case 1:
+            minMaxValues = findNumericMinMaxOfY(points);
+            break;
+        case 3:
+            minMaxValues = findVSBCNumericMinMaxOfY(points);
+            break;
+        case 2:
+            minMaxValues = findVerticalNumericMinMaxOfY(points);
+            break;
+        case 6:
+            minMaxValues = findHBCWANumericMinMaxOfY(points, yAxisType);
+            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 const getTypeOfAxis = (p, isXAxis)=>{
+    if (isXAxis) {
+        switch(typeof p){
+            case 'string':
+                return 2;
+            case 'number':
+                return 0;
+            default:
+                return 1;
+        }
+    } else {
+        switch(typeof p){
+            case 'string':
+                return 2;
+            case 'number':
+                return 0;
+            default:
+                return 1;
+        }
+    }
+};
+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 const pointTypes = {
+    [0]: {
+        widthRatio: 1
+    },
+    [1]: {
+        widthRatio: 1
+    },
+    [2]: {
+        widthRatio: 1
+    },
+    [3]: {
+        widthRatio: 1
+    },
+    [4]: {
+        widthRatio: 1
+    },
+    [5]: {
+        widthRatio: 2
+    },
+    [6]: {
+        widthRatio: 1.168
+    },
+    [7]: {
+        widthRatio: 2.414
+    }
+};
+/**
+ * @param accessibleData accessible data
+ * @param role string to define role of tag
+ * @param isDataFocusable boolean
+ * function returns the accessibility data object
+ */ export const getAccessibleDataObject = (accessibleData, role = 'text', isDataFocusable = true)=>{
+    accessibleData = accessibleData !== null && accessibleData !== void 0 ? accessibleData : {};
+    return {
+        role,
+        'data-is-focusable': isDataFocusable,
+        'aria-label': accessibleData.ariaLabel,
+        'aria-labelledby': accessibleData.ariaLabelledBy,
+        'aria-describedby': accessibleData.ariaDescribedBy
+    };
+};
+export const convertToLocaleString = (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' && !isNaN(Number(data))) {
+        const num = Number(data);
+        return num.toLocaleString(culture);
+    } else if (data instanceof Date) {
+        return data.toLocaleDateString(culture);
+    }
+    return data;
+};
+export function rotateXAxisLabels(rotateLabelProps) {
+    const { node, xAxis } = rotateLabelProps;
+    if (node === null || xAxis === null) {
+        return;
+    }
+    let maxHeight = 0;
+    const xAxisTranslations = [];
+    d3Select(node).call(xAxis).selectAll('.tick').each(function() {
+        const translateValue = this.getAttribute('transform');
+        if ((translateValue === null || translateValue === void 0 ? void 0 : translateValue.indexOf('rotate')) === -1) {
+            const 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)`);
+            }
+        }
+        const BoxCordinates = this.getBoundingClientRect();
+        const boxHeight = BoxCordinates && BoxCordinates.height;
+        if (boxHeight > maxHeight) {
+            maxHeight = boxHeight;
+        }
+    });
+    let 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) {
+    let idx = 0;
+    d3SelectAll(`.${selectorClass}`).each(function() {
+        const text = d3Select(this);
+        const words = text.text().split(/\s+/).reverse();
+        let word = '';
+        let line = [];
+        let lineNumber = 0;
+        const lineHeight = 1.1; // ems
+        const y = text.attr('y');
+        let 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;
+    });
+}
+export function formatValueWithSIPrefix(value) {
+    let 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);
+}
+const DEFAULT_BAR_WIDTH = 16;
+const MIN_BAR_WIDTH = 1;
+export const getBarWidth = (barWidthProp, maxBarWidthProp, adjustedValue = DEFAULT_BAR_WIDTH)=>{
+    let 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 const getScalePadding = (prop, shorthandProp, defaultValue = 0)=>{
+    let padding = typeof prop === 'number' ? prop : typeof shorthandProp === 'number' ? shorthandProp : defaultValue;
+    padding = Math.max(0, Math.min(padding, 1));
+    return padding;
+};
+export const isScalePaddingDefined = (prop, shorthandProp)=>{
+    return typeof prop === 'number' || typeof shorthandProp === 'number';
+};
+/**
+ * Helper to find the index of an item within an array, using a callback to
+ * determine the match.
+ *
+ * @public
+ * @param array - Array to search.
+ * @param cb - Callback which returns true on matches.
+ * @param fromIndex - Optional index to start from (defaults to 0)
+ */ export function findIndex(array, cb, fromIndex = 0) {
+    let index = -1;
+    for(let i = fromIndex; array && i < array.length; i++){
+        if (cb(array[i], i)) {
+            index = i;
+            break;
+        }
+    }
+    return index;
+}
+/**
+ * Helper to find the first item within an array that satisfies the callback.
+ * @param array - Array to search
+ * @param cb - Callback which returns true on matches
+ */ export function find(array, cb) {
+    let index = findIndex(array, cb);
+    if (index < 0) {
+        return undefined;
+    }
+    return array[index];
+}
+export const HighContrastSelector = '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';
+export const HighContrastSelectorWhite = // eslint-disable-next-line @fluentui/max-len
+'@media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light)';
+export const HighContrastSelectorBlack = // eslint-disable-next-line @fluentui/max-len
+'@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)';
+export const formatDate = (date, useUTC)=>{
+    const timeFormat = useUTC ? d3UtcFormat : d3TimeFormat;
+    return timeFormat('%-e %b %Y, %H:%M')(date) + (useUTC ? ' GMT' : '');
+};
+const cssVarRegExp = /var\((--[a-zA-Z0-9\-]+)\)/g;
+export function resolveCSSVariables(chartContainer, styleRules) {
+    const containerStyles = getComputedStyle(chartContainer);
+    return styleRules.replace(cssVarRegExp, (match, group1)=>{
+        return containerStyles.getPropertyValue(group1);
+    });
+}