@fluentui/react-charts 0.0.0-nightly-20250827-0407.1 → 0.0.0-nightly-20250829-0406.1

package/lib-commonjs/utilities/utilities.js

@@ -90,21 +90,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;
     },
@@ -150,9 +144,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;
     },
@@ -168,6 +171,9 @@ _export(exports, {
     groupChartDataByYValue: function() {
         return groupChartDataByYValue;
     },
+    isPlottable: function() {
+        return isPlottable;
+    },
     isScalePaddingDefined: function() {
         return isScalePaddingDefined;
     },
@@ -177,6 +183,9 @@ _export(exports, {
     isTextMode: function() {
         return isTextMode;
     },
+    isValidDomainValue: function() {
+        return isValidDomainValue;
+    },
     pointTypes: function() {
         return pointTypes;
     },
@@ -267,9 +276,9 @@ function yAxisTickFormatterInternal(value, limitWidth = false) {
 function defaultYAxisTickFormatter(value) {
     return yAxisTickFormatterInternal(value);
 }
-function createNumericXAxis(xAxisParams, tickParams, chartType, culture) {
+function createNumericXAxis(xAxisParams, tickParams, chartType, culture, scaleType) {
     const { domainNRangeValues, showRoundOffXTickValues = false, xAxistickSize = 6, tickPadding = 10, xAxisCount, xAxisElement, hideTickOverlap, calcMaxLabelWidth } = xAxisParams;
-    const xAxisScale = (0, _d3scale.scaleLinear)().domain([
+    const xAxisScale = createNumericScale(scaleType).domain([
         domainNRangeValues.dStartValue,
         domainNRangeValues.dEndValue
     ]).range([
@@ -278,19 +287,19 @@ 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
@@ -685,7 +694,7 @@ function createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl) {
     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
@@ -702,16 +711,38 @@ 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));
+    if (scaleType !== 'log') {
+        yAxis.tickValues(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;
@@ -975,43 +1006,14 @@ function getXAxisType(points) {
     }
     return isXAxisDateType;
 }
-function domainRangeOfNumericForAreaChart(points, margins, width, isRTL) {
+function domainRangeOfNumericForAreaLineScatterCharts(points, margins, width, isRTL, scaleType, hasMarkersMode) {
     const isScatterPolar = isScatterPolarSeries(points);
-    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: isScatterPolar ? 1 : xMax,
-        dEndValue: isScatterPolar ? -1 : xMin,
-        rStartValue,
-        rEndValue
-    } : {
-        dStartValue: isScatterPolar ? -1 : xMin,
-        dEndValue: isScatterPolar ? 1 : xMax,
-        rStartValue,
-        rEndValue
-    };
-}
-function domainRangeOfNumericForScatterChart(points, margins, width, isRTL) {
-    const isScatterPolar = isScatterPolarSeries(points);
-    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;
+    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 ? {
@@ -1101,22 +1103,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.
@@ -1134,6 +1129,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;
@@ -1149,50 +1149,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);
@@ -1210,12 +1166,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);
+                }
             });
         }
     });
@@ -1605,3 +1563,69 @@ function isTextMode(points) {
         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);
+};