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

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,7 +8,7 @@ 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 } from '@fluentui/chart-utilities';
 export const MIN_DOMAIN_MARGIN = 8;
 export const MIN_DONUT_RADIUS = 1;
 export var ChartTypes = /*#__PURE__*/ function(ChartTypes) {
@@ -63,9 +63,9 @@ function yAxisTickFormatterInternal(value, limitWidth = false) {
  * Create Numeric X axis
  * @export
  * @param {IXAxisParams} xAxisParams
- */ export function createNumericXAxis(xAxisParams, tickParams, chartType, culture) {
+ */ export function createNumericXAxis(xAxisParams, tickParams, chartType, culture, scaleType) {
     const { domainNRangeValues, showRoundOffXTickValues = false, xAxistickSize = 6, tickPadding = 10, xAxisCount, xAxisElement, hideTickOverlap, calcMaxLabelWidth } = xAxisParams;
-    const xAxisScale = d3ScaleLinear().domain([
+    const xAxisScale = createNumericScale(scaleType).domain([
         domainNRangeValues.dStartValue,
         domainNRangeValues.dEndValue
     ]).range([
@@ -74,19 +74,19 @@ 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
@@ -502,7 +502,7 @@ export function createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl) {
     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
@@ -519,16 +519,38 @@ 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));
+    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 ? d3Select(yAxisElement).call(yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
     axisData.yAxisDomainValues = domainValues;
     return yAxisScale;
@@ -850,51 +872,14 @@ export function tooltipOfAxislabels(axistooltipProps) {
  * @param {number} width
  * @param {boolean} isRTL
  * @returns {IDomainNRange}
- */ export function domainRangeOfNumericForAreaChart(points, margins, width, isRTL) {
-    const isScatterPolar = isScatterPolarSeries(points);
-    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: isScatterPolar ? 1 : xMax,
-        dEndValue: isScatterPolar ? -1 : xMin,
-        rStartValue,
-        rEndValue
-    } : {
-        dStartValue: isScatterPolar ? -1 : xMin,
-        dEndValue: isScatterPolar ? 1 : 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) {
+ */ export function domainRangeOfNumericForAreaLineScatterCharts(points, margins, width, isRTL, scaleType, hasMarkersMode) {
     const isScatterPolar = isScatterPolarSeries(points);
-    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;
+    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 ? {
@@ -1032,22 +1017,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.
@@ -1065,6 +1043,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;
@@ -1080,59 +1063,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
@@ -1164,12 +1094,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);
+                }
             });
         }
     });
@@ -1617,3 +1549,74 @@ export const createMeasurementSpan = (text, className, parentElement)=>{
         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);
+};