@fluentui/react-charts 9.2.2 → 9.2.4

package/lib/utilities/utilities.js

@@ -1,6 +1,6 @@
 import { axisRight as d3AxisRight, axisBottom as d3AxisBottom, axisLeft as d3AxisLeft } from 'd3-axis';
 import { max as d3Max, min as d3Min, ticks as d3Ticks, nice as d3nice, sum as d3Sum, mean as d3Mean, median as d3Median } from 'd3-array';
-import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand, scaleUtc as d3ScaleUtc, scaleTime as d3ScaleTime } from 'd3-scale';
+import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand, scaleUtc as d3ScaleUtc, scaleTime as d3ScaleTime, scaleLog as d3ScaleLog } 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';
@@ -8,8 +8,10 @@ import { timeSecond as d3TimeSecond, timeMinute as d3TimeMinute, timeHour as d3T
 import { curveLinear as d3CurveLinear, curveNatural as d3CurveNatural, curveStep as d3CurveStep, curveStepAfter as d3CurveStepAfter, curveStepBefore as d3CurveStepBefore } from 'd3-shape';
 import { formatPrefix as d3FormatPrefix } from 'd3-format';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { formatDateToLocaleString, formatToLocaleString, getMultiLevelDateTimeFormatOptions } from '@fluentui/chart-utilities';
+import { formatDateToLocaleString, formatToLocaleString, getMultiLevelDateTimeFormatOptions, isInvalidValue, isNumber } from '@fluentui/chart-utilities';
 export const MIN_DOMAIN_MARGIN = 8;
+export const MIN_DONUT_RADIUS = 1;
+export const DEFAULT_DATE_STRING = '2000-01-01';
 export var ChartTypes = /*#__PURE__*/ function(ChartTypes) {
     ChartTypes[ChartTypes["AreaChart"] = 0] = "AreaChart";
     ChartTypes[ChartTypes["LineChart"] = 1] = "LineChart";
@@ -62,9 +64,9 @@ function yAxisTickFormatterInternal(value, limitWidth = false) {
  * 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, calcMaxLabelWidth } = xAxisParams;
-    const xAxisScale = d3ScaleLinear().domain([
+ */ export function createNumericXAxis(xAxisParams, tickParams, chartType, culture, scaleType) {
+    const { domainNRangeValues, showRoundOffXTickValues = false, xAxistickSize = 6, tickPadding = 10, xAxisCount, xAxisElement, hideTickOverlap, calcMaxLabelWidth, tickStep, tick0 } = xAxisParams;
+    const xAxisScale = createNumericScale(scaleType).domain([
         domainNRangeValues.dStartValue,
         domainNRangeValues.dEndValue
     ]).range([
@@ -73,33 +75,38 @@ function yAxisTickFormatterInternal(value, limitWidth = false) {
     ]);
     showRoundOffXTickValues && xAxisScale.nice();
     let tickCount = xAxisCount !== null && xAxisCount !== void 0 ? xAxisCount : 6;
-    const tickFormat = (domainValue, _index)=>{
+    const tickFormat = (domainValue, _index, defaultFormat)=>{
         if (tickParams.tickFormat) {
             return d3Format(tickParams.tickFormat)(domainValue);
         }
         const xAxisValue = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
-        return formatToLocaleString(xAxisValue, culture);
+        return (defaultFormat === null || defaultFormat === void 0 ? void 0 : defaultFormat(xAxisValue)) === '' ? '' : formatToLocaleString(xAxisValue, culture);
     };
     if (hideTickOverlap && typeof xAxisCount === 'undefined') {
-        const longestLabelWidth = calcMaxLabelWidth(xAxisScale.ticks().map(tickFormat)) + 20;
+        const longestLabelWidth = calcMaxLabelWidth(xAxisScale.ticks().map((v, i)=>tickFormat(v, i))) + 20;
         const [start, end] = xAxisScale.range();
         tickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
     }
-    const xAxis = d3AxisBottom(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).ticks(tickCount).tickFormat(tickFormat);
+    const xAxis = d3AxisBottom(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).ticks(tickCount).tickFormat((v, i)=>tickFormat(v, i, xAxisScale.tickFormat(tickCount)));
     if ([
         6,
         8
     ].includes(chartType)) {
         xAxis.tickSizeInner(-(xAxisParams.containerHeight - xAxisParams.margins.top));
     }
+    let customTickValues;
     if (tickParams.tickValues) {
-        xAxis.tickValues(tickParams.tickValues);
+        customTickValues = tickParams.tickValues;
+    } else if (tickStep) {
+        customTickValues = generateNumericTicks(scaleType, tickStep, tick0, xAxisScale.domain());
+    }
+    if (customTickValues) {
+        xAxis.tickValues(customTickValues);
     }
     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());
+    const tickValues = (customTickValues !== null && customTickValues !== void 0 ? customTickValues : xAxisScale.ticks(tickCount)).map(xAxis.tickFormat());
     return {
         xScale: xAxisScale,
         tickValues
@@ -295,7 +302,7 @@ export function getDateFormatLevel(date, useUTC) {
  * @param {IXAxisParams} xAxisParams
  * @param {ITickParams} tickParams
  */ export function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLocale, customDateTimeFormatter, useUTC, chartType) {
-    const { domainNRangeValues, xAxisElement, tickPadding = 6, xAxistickSize = 6, xAxisCount, calcMaxLabelWidth } = xAxisParams;
+    const { domainNRangeValues, xAxisElement, tickPadding = 6, xAxistickSize = 6, xAxisCount, calcMaxLabelWidth, tickStep, tick0 } = xAxisParams;
     const isUtcSet = useUTC === true || useUTC === 'utc';
     const xAxisScale = isUtcSet ? d3ScaleUtc() : d3ScaleTime();
     xAxisScale.domain([
@@ -346,12 +353,19 @@ export function getDateFormatLevel(date, useUTC) {
     ].includes(chartType)) {
         xAxis.tickSizeInner(-(xAxisParams.containerHeight - xAxisParams.margins.top));
     }
-    tickParams.tickValues ? xAxis.tickValues(tickParams.tickValues) : '';
+    let customTickValues;
+    if (tickParams.tickValues) {
+        customTickValues = tickParams.tickValues;
+    } else if (tickStep) {
+        customTickValues = generateDateTicks(tickStep, tick0, xAxisScale.domain(), useUTC);
+    }
+    if (customTickValues) {
+        xAxis.tickValues(customTickValues);
+    }
     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());
+    const tickValues = (customTickValues !== null && customTickValues !== void 0 ? customTickValues : xAxisScale.ticks(tickCount)).map(xAxis.tickFormat());
     return {
         xScale: xAxisScale,
         tickValues
@@ -483,7 +497,7 @@ export function createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl) {
     const { yMinMaxValues = {
         startValue: 0,
         endValue: 0
-    }, yAxisElement = null, yMaxValue = 0, yMinValue = 0, containerHeight, margins, tickPadding = 12, maxOfYVal = 0, yAxisTickFormat, yAxisTickCount = 4 } = yAxisParams;
+    }, yAxisElement = null, yMaxValue = 0, yMinValue = 0, containerHeight, margins, tickPadding = 12, maxOfYVal = 0, yAxisTickFormat, yAxisTickCount = 4, tickValues, tickStep, tick0 } = yAxisParams;
     // maxOfYVal coming from horizontal bar chart with axis (Calculation done at base file)
     const tempVal = maxOfYVal || yMinMaxValues.endValue;
     const finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue;
@@ -498,14 +512,23 @@ export function createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl) {
     const axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
     const yAxis = axis.tickPadding(tickPadding).ticks(yAxisTickCount);
     yAxisTickFormat ? yAxis.tickFormat(yAxisTickFormat) : yAxis.tickFormat(defaultYAxisTickFormatter);
+    let customTickValues;
+    if (tickValues) {
+        customTickValues = tickValues;
+    } else if (tickStep) {
+        customTickValues = generateNumericTicks(undefined, tickStep, tick0, yAxisScale.domain());
+    }
+    if (customTickValues) {
+        yAxis.tickValues(customTickValues);
+    }
     yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
     return yAxisScale;
 }
-export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDataset, chartType, useSecondaryYScale = false, roundedTicks = false) {
+export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDataset, chartType, useSecondaryYScale = false, roundedTicks = false, scaleType) {
     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;
+    }, yAxisElement = null, yMaxValue = 0, yMinValue = 0, containerHeight, containerWidth, margins, tickPadding = 12, maxOfYVal = 0, yAxisTickFormat, yAxisTickCount = 4, eventAnnotationProps, eventLabelHeight, tickValues, tickStep, tick0 } = yAxisParams;
     // maxOfYVal coming from only area chart and Grouped vertical bar chart(Calculation done at base file)
     const tempVal = maxOfYVal || yMinMaxValues.endValue || 0;
     const finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue;
@@ -518,18 +541,53 @@ export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDatas
         yMin = yMin - yPadding;
         yMax = yMax + yPadding;
     }
-    const yAxisScale = d3ScaleLinear().domain([
+    let scaleDomain = [
         domainValues[0],
-        yMax
-    ]).range([
+        domainValues[domainValues.length - 1]
+    ];
+    if (scaleType === 'log') {
+        let domainStart = yMinMaxValues.startValue;
+        let domainEnd = yMinMaxValues.endValue;
+        if (yMinValue > 0) {
+            domainStart = Math.min(domainStart, yMinValue);
+        }
+        if (yMaxValue > 0) {
+            domainEnd = Math.max(domainEnd, yMaxValue);
+        }
+        scaleDomain = [
+            domainStart,
+            domainEnd
+        ];
+    }
+    const yAxisScale = createNumericScale(scaleType).domain(scaleDomain).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(defaultYAxisTickFormatter);
+    const yAxis = axis.tickPadding(tickPadding).tickSizeInner(-(containerWidth - margins.left - margins.right));
+    let customTickValues;
+    if (tickValues) {
+        customTickValues = tickValues;
+    } else if (tickStep) {
+        customTickValues = generateNumericTicks(scaleType, tickStep, tick0, yAxisScale.domain());
+    }
+    if (customTickValues) {
+        yAxis.tickValues(customTickValues);
+        axisData.yAxisDomainValues = customTickValues;
+    } else {
+        if (scaleType === 'log') {
+            axisData.yAxisDomainValues = yAxisScale.ticks();
+        } else {
+            yAxis.tickValues(domainValues);
+            axisData.yAxisDomainValues = domainValues;
+        }
+    }
+    const tickFormat = (domainValue, index, defaultFormat)=>{
+        const value = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
+        return (defaultFormat === null || defaultFormat === void 0 ? void 0 : defaultFormat(value)) === '' ? '' : defaultYAxisTickFormatter(value);
+    };
+    yAxisTickFormat ? yAxis.tickFormat(yAxisTickFormat) : yAxis.tickFormat((v, i)=>tickFormat(v, i, yAxisScale.tickFormat(yAxisTickCount)));
     yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
-    axisData.yAxisDomainValues = domainValues;
     return yAxisScale;
 }
 /**
@@ -558,14 +616,20 @@ export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDatas
  * @param yAxisParams
  * @param dataPoints
  * @param isRtl
- */ export const createStringYAxis = (yAxisParams, dataPoints, isRtl)=>{
-    const { containerHeight, tickPadding = 12, margins, yAxisTickFormat, yAxisElement, yAxisPadding = 0 } = yAxisParams;
+ */ export const createStringYAxis = (yAxisParams, dataPoints, isRtl, barWidth, chartType)=>{
+    const { containerHeight, tickPadding = 12, margins, yAxisTickFormat, yAxisElement, yAxisPadding = 0, containerWidth } = yAxisParams;
     const yAxisScale = d3ScaleBand().domain(dataPoints).range([
         containerHeight - margins.bottom,
         margins.top
     ]).padding(yAxisPadding);
+    if (chartType === 3) {
+        yAxisScale.paddingInner(1).paddingOuter(0);
+    }
     const axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
     const yAxis = axis.tickPadding(tickPadding).tickValues(dataPoints).tickSize(0);
+    if (chartType === 3) {
+        axis.tickSizeInner(-(containerWidth - margins.left - margins.right));
+    }
     if (yAxisTickFormat) {
         yAxis.tickFormat(yAxisTickFormat);
     }
@@ -576,7 +640,9 @@ export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDatas
  * 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) {
+ */ // changing the type to any as it is used by multiple charts with different data types
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function calloutData(values) {
     let combinedResult = [];
     values.forEach((line)=>{
         const elements = line.data.filter((point)=>!point.hideCallout).map((point)=>{
@@ -590,6 +656,7 @@ export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDatas
         combinedResult = combinedResult.concat(elements);
     });
     const xValToDataPoints = {};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     combinedResult.forEach((ele)=>{
         const xValue = ele.x instanceof Date ? ele.x.getTime() : ele.x;
         if (xValue in xValToDataPoints) {
@@ -740,9 +807,9 @@ yAxis, noOfCharsToTruncate, truncateLabel, isRtl) {
         const uid = tickIndex++;
         text.text(null).append('tspan').attr('x', x).attr('y', y).attr('id', `BaseSpan-${uid}`).attr('dy', dy + 'em').attr('data-', totalWord);
         if (truncateLabel && totalWordLength > noOfCharsToTruncate) {
-            text.append('tspan').attr('id', `showDots-${uid}`).attr('x', isRtl ? 0 : x).attr('y', y).attr('dy', dy).attr('dx', padding + dx + 'em').text(truncatedWord);
+            text.append('tspan').attr('id', `showDots-${uid}`).attr('x', x).attr('y', y).attr('dy', dy + 'em').attr('dx', padding + dx + 'em').text(truncatedWord);
         } else {
-            text.attr('text-align', 'start').append('tspan').attr('id', `LessLength-${uid}`).attr('x', isRtl ? 0 : x).attr('y', y).attr('dx', padding + dx + 'em').text(totalWord);
+            text.append('tspan').attr('id', `LessLength-${uid}`).attr('x', x).attr('y', y).attr('dx', padding + dx + 'em').text(totalWord);
         }
     });
 }
@@ -796,7 +863,7 @@ export function tooltipOfAxislabels(axistooltipProps) {
         return null;
     }
     const div = d3Select('body').append('div').attr('id', id).attr('class', tooltipCls).style('opacity', 0);
-    const aa = axis.selectAll('#BaseSpan')._groups[0];
+    const aa = axis.selectAll('[id^="BaseSpan-"]')._groups[0];
     const baseSpanLength = aa && Object.keys(aa).length;
     const originalDataArray = [];
     for(let i = 0; i < baseSpanLength; i++){
@@ -840,59 +907,24 @@ export function tooltipOfAxislabels(axistooltipProps) {
  * @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 for scatter chart.
- * @export
- * @param {LineChartPoints[]} points
- * @param {IMargins} margins
- * @param {number} width
- * @param {boolean} isRTL
- * @returns {IDomainNRange}
- */ export function domainRangeOfNumericForScatterChart(points, margins, width, isRTL) {
-    let xMin = d3Min(points, (point)=>{
-        return d3Min(point.data, (item)=>item.x);
-    });
-    let xMax = d3Max(points, (point)=>{
-        return d3Max(point.data, (item)=>{
-            return item.x;
-        });
-    });
-    const xPadding = (xMax - xMin) * 0.1;
-    xMin = xMin - xPadding;
-    xMax = xMax + xPadding;
+ */ export function domainRangeOfNumericForAreaLineScatterCharts(points, margins, width, isRTL, scaleType, hasMarkersMode) {
+    const isScatterPolar = isScatterPolarSeries(points);
+    let [xMin, xMax] = getScatterXDomainExtent(points, scaleType);
+    if (hasMarkersMode) {
+        const xPadding = getDomainPaddingForMarkers(xMin, xMax, scaleType);
+        xMin = xMin - xPadding.start;
+        xMax = xMax + xPadding.end;
+    }
     const rStartValue = margins.left;
     const rEndValue = width - margins.right;
     return isRTL ? {
-        dStartValue: xMax,
-        dEndValue: xMin,
+        dStartValue: isScatterPolar ? 1 : xMax,
+        dEndValue: isScatterPolar ? -1 : xMin,
         rStartValue,
         rEndValue
     } : {
-        dStartValue: xMin,
-        dEndValue: xMax,
+        dStartValue: isScatterPolar ? -1 : xMin,
+        dEndValue: isScatterPolar ? 1 : xMax,
         rStartValue,
         rEndValue
     };
@@ -1020,22 +1052,15 @@ export function tooltipOfAxislabels(axistooltipProps) {
  * @param {boolean} isRTL
  * @param {Date[] | number[]} tickValues
  * @returns {IDomainNRange}
- */ export function domainRangeOfDateForAreaLineVerticalBarChart(points, margins, width, isRTL, tickValues = [], chartType, barWidth) {
+ */ export function domainRangeOfDateForAreaLineScatterVerticalBarCharts(points, margins, width, isRTL, tickValues = [], chartType, barWidth, hasMarkersMode) {
     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;
-            });
-        });
+    if ([
+        0,
+        1,
+        7
+    ].includes(chartType)) {
+        [sDate, lDate] = getScatterXDomainExtent(points);
         // 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.
@@ -1053,6 +1078,11 @@ export function tooltipOfAxislabels(axistooltipProps) {
         sDate = d3Min(points, (point)=>point.x);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         lDate = d3Max(points, (point)=>point.x);
+        if (hasMarkersMode || chartType === 7) {
+            const xPadding = getDomainPaddingForMarkers(sDate.getTime(), lDate.getTime());
+            sDate = new Date(sDate.getTime() - xPadding.start);
+            lDate = new Date(lDate.getTime() + xPadding.end);
+        }
     }
     const rStartValue = margins.left;
     const rEndValue = width - margins.right;
@@ -1068,59 +1098,6 @@ export function tooltipOfAxislabels(axistooltipProps) {
         rEndValue
     };
 }
-/**
- * Calculates Domain and range values for Date X axis for scatter chart.
- * @export
- * @param {LineChartPoints[]} points
- * @param {IMargins} margins
- * @param {number} width
- * @param {boolean} isRTL
- * @param {Date[] | number[]} tickValues
- * @returns {IDomainNRange}
- */ export function domainRangeOfDateForScatterChart(points, margins, width, isRTL, tickValues = []) {
-    let sDate;
-    let lDate;
-    // 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;
-        });
-    });
-    const xPadding = (lDate.getTime() - sDate.getTime()) * 0.1;
-    sDate = new Date(sDate.getTime() - xPadding);
-    lDate = new Date(lDate.getTime() + xPadding);
-    // 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
-    ]);
-    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
@@ -1152,12 +1129,14 @@ export function tooltipOfAxislabels(axistooltipProps) {
  * @export
  * @param {LineChartPoints[]} points
  * @returns {{ startValue: number; endValue: number }}
- */ export function findNumericMinMaxOfY(points, yAxisType, useSecondaryYScale) {
+ */ export function findNumericMinMaxOfY(points, yAxisType, useSecondaryYScale, scaleType) {
     const values = [];
     points.forEach((point)=>{
         if (!useSecondaryYScale === !point.useSecondaryYScale) {
             point.data.forEach((data)=>{
-                values.push(data.y);
+                if (isValidDomainValue(data.y, scaleType)) {
+                    values.push(data.y);
+                }
             });
         }
     });
@@ -1583,3 +1562,201 @@ export const createMeasurementSpan = (text, className, parentElement)=>{
     measurementSpan.textContent = `${text}`;
     return measurementSpan;
 };
+/**
+ * Utility function to check if an array of points is scatterpolar
+ * @param points - Array of chart points
+ * @returns true if any point has lineOptions.mode as 'scatterpolar'
+ */ export function isScatterPolarSeries(points) {
+    return points.some(// eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (item)=>{
+        var _item_lineOptions;
+        return typeof ((_item_lineOptions = item.lineOptions) === null || _item_lineOptions === void 0 ? void 0 : _item_lineOptions.mode) === 'string' && item.lineOptions.mode === 'scatterpolar';
+    });
+}
+/**
+ * Utility function to check if an array of points contains mode as 'text' only
+ * @param points - Array of chart points
+ * @returns true if any point has lineOptions.mode as 'text'
+ */ export function isTextMode(points) {
+    return points.some(// eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (item)=>{
+        var _item_lineOptions;
+        return typeof ((_item_lineOptions = item.lineOptions) === null || _item_lineOptions === void 0 ? void 0 : _item_lineOptions.mode) === 'string' && item.lineOptions.mode === 'text';
+    });
+}
+// TODO: Refactor to encapsulate the complete numeric scale creation logic here, including setting domain and range.
+const createNumericScale = (scaleType)=>{
+    if (scaleType === 'log') {
+        return d3ScaleLog();
+    } else {
+        return d3ScaleLinear();
+    }
+};
+export const getDomainPaddingForMarkers = (minVal, maxVal, scaleType)=>{
+    if (scaleType === 'log') {
+        return {
+            start: minVal * 0.5,
+            end: maxVal
+        };
+    }
+    const defaultPadding = (maxVal - minVal) * 0.1;
+    return {
+        start: defaultPadding,
+        end: defaultPadding
+    };
+};
+/**
+ * Determines whether a value is valid for inclusion in the scale domain.
+ * For log scales, ensures the value is strictly positive to prevent undefined scale behavior.
+ */ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const isValidDomainValue = (value, scaleType)=>{
+    return typeof value !== 'number' || scaleType !== 'log' || value > 0;
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const isPlottable = (x, y)=>{
+    return !isInvalidValue(x) && !isInvalidValue(y);
+};
+export const getScatterXDomainExtent = (points, scaleType)=>{
+    const isValidDataPointForScale = (item)=>isValidDomainValue(item.x, scaleType);
+    const xMin = d3Min(points, (point)=>{
+        return d3Min(point.data.filter(isValidDataPointForScale), (item)=>item.x);
+    });
+    const xMax = d3Max(points, (point)=>{
+        return d3Max(point.data.filter(isValidDataPointForScale), (item)=>{
+            return item.x;
+        });
+    });
+    return [
+        xMin,
+        xMax
+    ];
+};
+export const getRangeForScatterMarkerSize = ({ data, xScale, yScalePrimary, yScaleSecondary, useSecondaryYScale, xScaleType, yScaleType: primaryYScaleType, secondaryYScaleType })=>{
+    // Note: This function is executed after the scale is created, so the actual padding can be
+    // obtained by calculating the difference between the respective minimums or maximums of the
+    // scale domain and the data. However, doing so often causes the marker size to scale up
+    // unnecessarily when the scale uses a wider domain than required (due to the use of D3's nice
+    // function or our own tick value calculations).
+    // A better approach could be to treat the marker size as a fixed pixel value and adjust the
+    // scale domain with sufficient padding to accommodate the maximum marker size—instead of doing
+    // it the other way around (i.e., adjusting the scale domain first with padding and then scaling
+    // the markers to fit inside the plot area).
+    const [xMin, xMax] = getScatterXDomainExtent(data, xScaleType);
+    const xPadding = getDomainPaddingForMarkers(+xMin, +xMax, xScaleType);
+    const scaleXMin = xMin instanceof Date ? new Date(+xMin - xPadding.start) : xMin - xPadding.start;
+    const scaleXMax = xMax instanceof Date ? new Date(+xMax + xPadding.end) : xMax + xPadding.end;
+    const extraXPixels = Math.min(Math.abs(xScale(xMin) - xScale(scaleXMin)), Math.abs(xScale(scaleXMax) - xScale(xMax)));
+    const yScaleType = useSecondaryYScale ? secondaryYScaleType : primaryYScaleType;
+    const { startValue: yMin, endValue: yMax } = findNumericMinMaxOfY(data, undefined, useSecondaryYScale, yScaleType);
+    const yPadding = getDomainPaddingForMarkers(yMin, yMax, yScaleType);
+    const scaleYMin = yMin - yPadding.start;
+    const scaleYMax = yMax + yPadding.end;
+    const yScale = useSecondaryYScale ? yScaleSecondary : yScalePrimary;
+    const extraYPixels = Math.min(Math.abs(yScale(scaleYMin) - yScale(yMin)), Math.abs(yScale(yMax) - yScale(scaleYMax)));
+    return Math.min(extraXPixels, extraYPixels);
+};
+export const generateLinearTicks = (tick0, tickStep, scaleDomain)=>{
+    const domainMin = d3Min(scaleDomain);
+    const domainMax = d3Max(scaleDomain);
+    const precision = Math.max(calculatePrecision(tick0), calculatePrecision(tickStep));
+    const start = Math.ceil(precisionRound((domainMin - tick0) / tickStep, precision));
+    const end = Math.floor(precisionRound((domainMax - tick0) / tickStep, precision));
+    const ticks = [];
+    for(let i = start; i <= end; i++){
+        ticks.push(precisionRound(tick0 + i * tickStep, precision));
+    }
+    return ticks;
+};
+export const generateMonthlyTicks = (tick0, tickStepInMonths, scaleDomain, useUTC)=>{
+    const domainMin = +d3Min(scaleDomain);
+    const domainMax = +d3Max(scaleDomain);
+    const getMonth = (d)=>useUTC ? d.getUTCMonth() : d.getMonth();
+    const setMonth = (d, month)=>useUTC ? new Date(d.setUTCMonth(month)) : new Date(d.setMonth(month));
+    // Find the earliest tick <= domainMin
+    let start = 0;
+    for(let firstTick = new Date(+tick0); +firstTick > domainMin;){
+        firstTick = setMonth(firstTick, getMonth(firstTick) - tickStepInMonths);
+        start -= tickStepInMonths;
+    }
+    const baseMonth = getMonth(tick0);
+    const ticks = [];
+    // Generate ticks forward until domainMax
+    for(let i = start;; i += tickStepInMonths){
+        let tickDate = setMonth(new Date(+tick0), baseMonth + i);
+        // Handle month rollover (e.g., Jan 31 + 1 month → Mar 3 instead of Feb)
+        if (getMonth(tickDate) !== ((baseMonth + i) % 12 + 12) % 12) {
+            tickDate = useUTC ? new Date(tickDate.setUTCDate(0)) : new Date(tickDate.setDate(0));
+        }
+        if (+tickDate > domainMax) {
+            break;
+        }
+        if (+tickDate >= domainMin) {
+            ticks.push(tickDate);
+        }
+    }
+    return ticks;
+};
+const generateNumericTicks = (scaleType, tickStep, tick0, scaleDomain)=>{
+    const refTick = typeof tick0 === 'number' ? tick0 : 0;
+    if (scaleType === 'log') {
+        if (typeof tickStep === 'number' && tickStep > 0) {
+            return generateLinearTicks(refTick, tickStep, scaleDomain.map((d)=>Math.log10(d))).map((t)=>Math.pow(10, t));
+        }
+        if (typeof tickStep === 'string') {
+            const prefix = tickStep[0];
+            const num = isNumber(tickStep.slice(1)) ? Number(tickStep.slice(1)) : 0;
+            if (prefix === 'L' && num > 0) {
+                return generateLinearTicks(refTick, num, scaleDomain);
+            }
+        }
+        return;
+    }
+    if (typeof tickStep === 'number' && tickStep > 0) {
+        return generateLinearTicks(refTick, tickStep, scaleDomain);
+    }
+};
+const generateDateTicks = (tickStep, tick0, scaleDomain, useUTC)=>{
+    const refTick = tick0 instanceof Date ? tick0 : new Date(DEFAULT_DATE_STRING);
+    if (typeof tickStep === 'number' && tickStep > 0) {
+        return generateLinearTicks(+refTick, tickStep, scaleDomain.map((d)=>+d)).map((t)=>new Date(t));
+    }
+    if (typeof tickStep === 'string') {
+        const prefix = tickStep[0];
+        const num = isNumber(tickStep.slice(1)) ? Number(tickStep.slice(1)) : 0;
+        if (prefix === 'M' && num > 0 && num === Math.round(num)) {
+            return generateMonthlyTicks(refTick, num, scaleDomain, useUTC);
+        }
+    }
+};
+/**
+ * Calculates a number's precision based on the number of trailing
+ * zeros if the number does not have a decimal indicated by a negative
+ * precision. Otherwise, it calculates the number of digits after
+ * the decimal point indicated by a positive precision.
+ * @param value - the value to determine the precision of
+ */ export function calculatePrecision(value) {
+    /**
+   * Group 1:
+   * [1-9]([0]+$) matches trailing zeros
+   * Group 2:
+   * \.([0-9]*) matches all digits after a decimal point.
+   */ const groups = /[1-9]([0]+$)|\.([0-9]*)/.exec(String(value));
+    if (!groups) {
+        return 0;
+    }
+    if (groups[1]) {
+        return -groups[1].length;
+    }
+    if (groups[2]) {
+        return groups[2].length;
+    }
+    return 0;
+}
+/**
+ * Rounds a number to a certain level of precision. Accepts negative precision.
+ * @param value - The value that is being rounded.
+ * @param precision - The number of decimal places to round the number to
+ */ export function precisionRound(value, precision, base = 10) {
+    const exp = Math.pow(base, precision);
+    return Math.round(value * exp) / exp;
+}