@fluentui/react-charts 9.2.2 → 9.2.4

package/lib-commonjs/utilities/utilities.js

@@ -15,6 +15,9 @@ _export(exports, {
     CustomPoints: function() {
         return CustomPoints;
     },
+    DEFAULT_DATE_STRING: function() {
+        return DEFAULT_DATE_STRING;
+    },
     DEFAULT_WRAP_WIDTH: function() {
         return DEFAULT_WRAP_WIDTH;
     },
@@ -30,6 +33,9 @@ _export(exports, {
     MIN_DOMAIN_MARGIN: function() {
         return MIN_DOMAIN_MARGIN;
     },
+    MIN_DONUT_RADIUS: function() {
+        return MIN_DONUT_RADIUS;
+    },
     Points: function() {
         return Points;
     },
@@ -45,6 +51,9 @@ _export(exports, {
     calculateLongestLabelWidth: function() {
         return calculateLongestLabelWidth;
     },
+    calculatePrecision: function() {
+        return calculatePrecision;
+    },
     calloutData: function() {
         return calloutData;
     },
@@ -87,21 +96,15 @@ _export(exports, {
     defaultYAxisTickFormatter: function() {
         return defaultYAxisTickFormatter;
     },
-    domainRangeOfDateForAreaLineVerticalBarChart: function() {
-        return domainRangeOfDateForAreaLineVerticalBarChart;
+    domainRangeOfDateForAreaLineScatterVerticalBarCharts: function() {
+        return domainRangeOfDateForAreaLineScatterVerticalBarCharts;
     },
-    domainRangeOfDateForScatterChart: function() {
-        return domainRangeOfDateForScatterChart;
-    },
-    domainRangeOfNumericForAreaChart: function() {
-        return domainRangeOfNumericForAreaChart;
+    domainRangeOfNumericForAreaLineScatterCharts: function() {
+        return domainRangeOfNumericForAreaLineScatterCharts;
     },
     domainRangeOfNumericForHorizontalBarChartWithAxis: function() {
         return domainRangeOfNumericForHorizontalBarChartWithAxis;
     },
-    domainRangeOfNumericForScatterChart: function() {
-        return domainRangeOfNumericForScatterChart;
-    },
     domainRangeOfVSBCNumeric: function() {
         return domainRangeOfVSBCNumeric;
     },
@@ -135,6 +138,12 @@ _export(exports, {
     formatScientificLimitWidth: function() {
         return formatScientificLimitWidth;
     },
+    generateLinearTicks: function() {
+        return generateLinearTicks;
+    },
+    generateMonthlyTicks: function() {
+        return generateMonthlyTicks;
+    },
     getAccessibleDataObject: function() {
         return getAccessibleDataObject;
     },
@@ -147,9 +156,18 @@ _export(exports, {
     getDateFormatLevel: function() {
         return getDateFormatLevel;
     },
+    getDomainPaddingForMarkers: function() {
+        return getDomainPaddingForMarkers;
+    },
+    getRangeForScatterMarkerSize: function() {
+        return getRangeForScatterMarkerSize;
+    },
     getScalePadding: function() {
         return getScalePadding;
     },
+    getScatterXDomainExtent: function() {
+        return getScatterXDomainExtent;
+    },
     getSecureProps: function() {
         return getSecureProps;
     },
@@ -165,12 +183,27 @@ _export(exports, {
     groupChartDataByYValue: function() {
         return groupChartDataByYValue;
     },
+    isPlottable: function() {
+        return isPlottable;
+    },
     isScalePaddingDefined: function() {
         return isScalePaddingDefined;
     },
+    isScatterPolarSeries: function() {
+        return isScatterPolarSeries;
+    },
+    isTextMode: function() {
+        return isTextMode;
+    },
+    isValidDomainValue: function() {
+        return isValidDomainValue;
+    },
     pointTypes: function() {
         return pointTypes;
     },
+    precisionRound: function() {
+        return precisionRound;
+    },
     prepareDatapoints: function() {
         return prepareDatapoints;
     },
@@ -213,6 +246,8 @@ const _d3shape = require("d3-shape");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _chartutilities = require("@fluentui/chart-utilities");
 const MIN_DOMAIN_MARGIN = 8;
+const MIN_DONUT_RADIUS = 1;
+const DEFAULT_DATE_STRING = '2000-01-01';
 var ChartTypes = /*#__PURE__*/ function(ChartTypes) {
     ChartTypes[ChartTypes["AreaChart"] = 0] = "AreaChart";
     ChartTypes[ChartTypes["LineChart"] = 1] = "LineChart";
@@ -257,9 +292,9 @@ function yAxisTickFormatterInternal(value, limitWidth = false) {
 function defaultYAxisTickFormatter(value) {
     return yAxisTickFormatterInternal(value);
 }
-function createNumericXAxis(xAxisParams, tickParams, chartType, culture) {
-    const { domainNRangeValues, showRoundOffXTickValues = false, xAxistickSize = 6, tickPadding = 10, xAxisCount, xAxisElement, hideTickOverlap, calcMaxLabelWidth } = xAxisParams;
-    const xAxisScale = (0, _d3scale.scaleLinear)().domain([
+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([
@@ -268,33 +303,38 @@ function createNumericXAxis(xAxisParams, tickParams, chartType, culture) {
     ]);
     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 (0, _d3format.format)(tickParams.tickFormat)(domainValue);
         }
         const xAxisValue = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
-        return (0, _chartutilities.formatToLocaleString)(xAxisValue, culture);
+        return (defaultFormat === null || defaultFormat === void 0 ? void 0 : defaultFormat(xAxisValue)) === '' ? '' : (0, _chartutilities.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 = (0, _d3axis.axisBottom)(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).ticks(tickCount).tickFormat(tickFormat);
+    const xAxis = (0, _d3axis.axisBottom)(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) {
         (0, _d3selection.select)(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
@@ -485,7 +525,7 @@ function getDateFormatLevel(date, useUTC) {
     return (_matchedFormat_formatLevel = matchedFormat === null || matchedFormat === void 0 ? void 0 : matchedFormat.formatLevel) !== null && _matchedFormat_formatLevel !== void 0 ? _matchedFormat_formatLevel : 7;
 }
 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 ? (0, _d3scale.scaleUtc)() : (0, _d3scale.scaleTime)();
     xAxisScale.domain([
@@ -536,12 +576,19 @@ function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLo
     ].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) {
         (0, _d3selection.select)(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
@@ -657,7 +704,7 @@ 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;
@@ -672,14 +719,23 @@ function createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl) {
     const axis = isRtl ? (0, _d3axis.axisRight)(yAxisScale) : (0, _d3axis.axisLeft)(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 ? (0, _d3selection.select)(yAxisElement).call(yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
     return yAxisScale;
 }
-function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDataset, chartType, useSecondaryYScale = false, roundedTicks = false) {
+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;
@@ -692,18 +748,53 @@ function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDataset, cha
         yMin = yMin - yPadding;
         yMax = yMax + yPadding;
     }
-    const yAxisScale = (0, _d3scale.scaleLinear)().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 ? (0, _d3axis.axisRight)(yAxisScale) : (0, _d3axis.axisLeft)(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 ? (0, _d3selection.select)(yAxisElement).call(yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
-    axisData.yAxisDomainValues = domainValues;
     return yAxisScale;
 }
 const createStringYAxisForHorizontalBarChartWithAxis = (yAxisParams, dataPoints, isRtl, barWidth)=>{
@@ -722,14 +813,20 @@ const createStringYAxisForHorizontalBarChartWithAxis = (yAxisParams, dataPoints,
     yAxisElement ? (0, _d3selection.select)(yAxisElement).call(yAxis).selectAll('text') : '';
     return yAxisScale;
 };
-const createStringYAxis = (yAxisParams, dataPoints, isRtl)=>{
-    const { containerHeight, tickPadding = 12, margins, yAxisTickFormat, yAxisElement, yAxisPadding = 0 } = yAxisParams;
+const createStringYAxis = (yAxisParams, dataPoints, isRtl, barWidth, chartType)=>{
+    const { containerHeight, tickPadding = 12, margins, yAxisTickFormat, yAxisElement, yAxisPadding = 0, containerWidth } = yAxisParams;
     const yAxisScale = (0, _d3scale.scaleBand)().domain(dataPoints).range([
         containerHeight - margins.bottom,
         margins.top
     ]).padding(yAxisPadding);
+    if (chartType === 3) {
+        yAxisScale.paddingInner(1).paddingOuter(0);
+    }
     const axis = isRtl ? (0, _d3axis.axisRight)(yAxisScale) : (0, _d3axis.axisLeft)(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);
     }
@@ -750,6 +847,7 @@ function calloutData(values) {
         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) {
@@ -877,9 +975,9 @@ function createYAxisLabels(node, yAxis, noOfCharsToTruncate, truncateLabel, isRt
         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);
         }
     });
 }
@@ -926,7 +1024,7 @@ function tooltipOfAxislabels(axistooltipProps) {
         return null;
     }
     const div = (0, _d3selection.select)('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++){
@@ -958,51 +1056,24 @@ function getXAxisType(points) {
     }
     return isXAxisDateType;
 }
-function domainRangeOfNumericForAreaChart(points, margins, width, isRTL) {
-    const xMin = (0, _d3array.min)(points, (point)=>{
-        return (0, _d3array.min)(point.data, (item)=>item.x);
-    });
-    const xMax = (0, _d3array.max)(points, (point)=>{
-        return (0, _d3array.max)(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
-    };
-}
-function domainRangeOfNumericForScatterChart(points, margins, width, isRTL) {
-    let xMin = (0, _d3array.min)(points, (point)=>{
-        return (0, _d3array.min)(point.data, (item)=>item.x);
-    });
-    let xMax = (0, _d3array.max)(points, (point)=>{
-        return (0, _d3array.max)(point.data, (item)=>{
-            return item.x;
-        });
-    });
-    const xPadding = (xMax - xMin) * 0.1;
-    xMin = xMin - xPadding;
-    xMax = xMax + xPadding;
+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
     };
@@ -1082,22 +1153,15 @@ function domainRangeOfVSBCNumeric(points, margins, width, isRTL, barWidth) {
         rEndValue: rMin
     };
 }
-function domainRangeOfDateForAreaLineVerticalBarChart(points, margins, width, isRTL, tickValues = [], chartType, barWidth) {
+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 = (0, _d3array.min)(points, (point)=>{
-            return (0, _d3array.min)(point.data, (item)=>{
-                return item.x;
-            });
-        });
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        lDate = (0, _d3array.max)(points, (point)=>{
-            return (0, _d3array.max)(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.
@@ -1115,6 +1179,11 @@ function domainRangeOfDateForAreaLineVerticalBarChart(points, margins, width, is
         sDate = (0, _d3array.min)(points, (point)=>point.x);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         lDate = (0, _d3array.max)(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;
@@ -1130,50 +1199,6 @@ function domainRangeOfDateForAreaLineVerticalBarChart(points, margins, width, is
         rEndValue
     };
 }
-function domainRangeOfDateForScatterChart(points, margins, width, isRTL, tickValues = []) {
-    let sDate;
-    let lDate;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    sDate = (0, _d3array.min)(points, (point)=>{
-        return (0, _d3array.min)(point.data, (item)=>{
-            return item.x;
-        });
-    });
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    lDate = (0, _d3array.max)(points, (point)=>{
-        return (0, _d3array.max)(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 = (0, _d3array.min)([
-        ...tickValues,
-        sDate
-    ]);
-    lDate = (0, _d3array.max)([
-        ...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
-    };
-}
 function domainRangeOfVerticalNumeric(points, margins, containerWidth, isRTL, barWidth) {
     const xMax = (0, _d3array.max)(points, (point)=>point.x);
     const xMin = (0, _d3array.min)(points, (point)=>point.x);
@@ -1191,12 +1216,14 @@ function domainRangeOfVerticalNumeric(points, margins, containerWidth, isRTL, ba
         rEndValue: rMax
     };
 }
-function findNumericMinMaxOfY(points, yAxisType, useSecondaryYScale) {
+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);
+                }
             });
         }
     });
@@ -1574,3 +1601,176 @@ const createMeasurementSpan = (text, className, parentElement)=>{
     measurementSpan.textContent = `${text}`;
     return measurementSpan;
 };
+function isScatterPolarSeries(points) {
+    return points.some((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';
+    });
+}
+function isTextMode(points) {
+    return points.some((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 (0, _d3scale.scaleLog)();
+    } else {
+        return (0, _d3scale.scaleLinear)();
+    }
+};
+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
+    };
+};
+const isValidDomainValue = (value, scaleType)=>{
+    return typeof value !== 'number' || scaleType !== 'log' || value > 0;
+};
+const isPlottable = (x, y)=>{
+    return !(0, _chartutilities.isInvalidValue)(x) && !(0, _chartutilities.isInvalidValue)(y);
+};
+const getScatterXDomainExtent = (points, scaleType)=>{
+    const isValidDataPointForScale = (item)=>isValidDomainValue(item.x, scaleType);
+    const xMin = (0, _d3array.min)(points, (point)=>{
+        return (0, _d3array.min)(point.data.filter(isValidDataPointForScale), (item)=>item.x);
+    });
+    const xMax = (0, _d3array.max)(points, (point)=>{
+        return (0, _d3array.max)(point.data.filter(isValidDataPointForScale), (item)=>{
+            return item.x;
+        });
+    });
+    return [
+        xMin,
+        xMax
+    ];
+};
+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);
+};
+const generateLinearTicks = (tick0, tickStep, scaleDomain)=>{
+    const domainMin = (0, _d3array.min)(scaleDomain);
+    const domainMax = (0, _d3array.max)(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;
+};
+const generateMonthlyTicks = (tick0, tickStepInMonths, scaleDomain, useUTC)=>{
+    const domainMin = +(0, _d3array.min)(scaleDomain);
+    const domainMax = +(0, _d3array.max)(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 = (0, _chartutilities.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 = (0, _chartutilities.isNumber)(tickStep.slice(1)) ? Number(tickStep.slice(1)) : 0;
+        if (prefix === 'M' && num > 0 && num === Math.round(num)) {
+            return generateMonthlyTicks(refTick, num, scaleDomain, useUTC);
+        }
+    }
+};
+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;
+}
+function precisionRound(value, precision, base = 10) {
+    const exp = Math.pow(base, precision);
+    return Math.round(value * exp) / exp;
+}