@fluentui/react-charts 9.3.2 → 9.3.4

package/lib/utilities/utilities.js

@@ -66,7 +66,7 @@ function yAxisTickFormatterInternal(value, limitWidth = false) {
  * @export
  * @param {IXAxisParams} xAxisParams
  */ export function createNumericXAxis(xAxisParams, tickParams, chartType, culture, scaleType, _useRtl) {
-    const { domainNRangeValues, showRoundOffXTickValues = false, xAxistickSize = 6, tickPadding = 10, xAxisCount, xAxisElement, hideTickOverlap, calcMaxLabelWidth, tickStep, tick0 } = xAxisParams;
+    const { domainNRangeValues, showRoundOffXTickValues = false, xAxistickSize = 6, tickPadding = 10, xAxisCount, xAxisElement, hideTickOverlap, calcMaxLabelWidth, tickStep, tick0, tickText } = xAxisParams;
     const xAxisScale = createNumericScale(scaleType).domain([
         domainNRangeValues.dStartValue,
         domainNRangeValues.dEndValue
@@ -77,6 +77,9 @@ function yAxisTickFormatterInternal(value, limitWidth = false) {
     showRoundOffXTickValues && xAxisScale.nice();
     let tickCount = xAxisCount !== null && xAxisCount !== void 0 ? xAxisCount : 6;
     const tickFormat = (domainValue, _index, defaultFormat)=>{
+        if (tickParams.tickValues && tickText && typeof tickText[_index] !== 'undefined') {
+            return tickText[_index];
+        }
         if (tickParams.tickFormat) {
             return d3Format(tickParams.tickFormat)(domainValue);
         }
@@ -303,7 +306,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, tickStep, tick0 } = xAxisParams;
+    const { domainNRangeValues, xAxisElement, tickPadding = 6, xAxistickSize = 6, xAxisCount, calcMaxLabelWidth, tickStep, tick0, tickText } = xAxisParams;
     const isUtcSet = useUTC === true || useUTC === 'utc';
     const xAxisScale = isUtcSet ? d3ScaleUtc() : d3ScaleTime();
     xAxisScale.domain([
@@ -329,6 +332,9 @@ export function getDateFormatLevel(date, useUTC) {
     const formatOptions = options !== null && options !== void 0 ? options : getMultiLevelDateTimeFormatOptions(lowestFormatLevel, highestFormatLevel);
     const formatFn = getMultiLevelD3DateFormatter(lowestFormatLevel, highestFormatLevel, locale, isUtcSet);
     const tickFormat = (domainValue, _index)=>{
+        if (tickParams.tickValues && tickText && typeof tickText[_index] !== 'undefined') {
+            return tickText[_index];
+        }
         if (customDateTimeFormatter) {
             return customDateTimeFormatter(domainValue);
         }
@@ -381,7 +387,7 @@ export function getDateFormatLevel(date, useUTC) {
  * @param {string[]} dataset
  * @returns
  */ export function createStringXAxis(xAxisParams, tickParams, dataset, culture, _useRtl) {
-    const { domainNRangeValues, xAxistickSize = 6, tickPadding = 10, xAxisPadding = 0.1, xAxisInnerPadding, xAxisOuterPadding, containerWidth, hideTickOverlap, calcMaxLabelWidth } = xAxisParams;
+    const { domainNRangeValues, xAxistickSize = 6, tickPadding = 10, xAxisPadding = 0.1, xAxisInnerPadding, xAxisOuterPadding, containerWidth, hideTickOverlap, calcMaxLabelWidth, tickText } = xAxisParams;
     const xAxisScale = d3ScaleBand().domain(dataset).range([
         domainNRangeValues.rStartValue,
         domainNRangeValues.rEndValue
@@ -389,7 +395,10 @@ export function getDateFormatLevel(date, useUTC) {
     var _tickParams_tickValues;
     let tickValues = (_tickParams_tickValues = tickParams.tickValues) !== null && _tickParams_tickValues !== void 0 ? _tickParams_tickValues : dataset;
     const tickFormat = (domainValue, _index)=>{
-        return formatToLocaleString(domainValue, culture);
+        if (tickParams.tickValues && tickText && typeof tickText[_index] !== 'undefined') {
+            return tickText[_index];
+        }
+        return domainValue;
     };
     if (hideTickOverlap) {
         let nonOverlappingTickValues = [];
@@ -498,7 +507,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, tickValues, tickStep, tick0 } = yAxisParams;
+    }, yAxisElement = null, yMaxValue = 0, yMinValue = 0, containerHeight, margins, tickPadding = 12, maxOfYVal = 0, yAxisTickFormat, yAxisTickCount = 4, tickValues, tickStep, tick0, tickText } = 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;
@@ -512,7 +521,20 @@ 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);
+    const tickFormat = (domainValue, index)=>{
+        if (tickValues && tickText && typeof tickText[index] !== 'undefined') {
+            return tickText[index];
+        }
+        if (typeof yAxisTickFormat === 'function') {
+            return yAxisTickFormat(domainValue, index);
+        }
+        if (typeof yAxisTickFormat === 'string') {
+            return d3Format(yAxisTickFormat)(domainValue);
+        }
+        const value = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
+        return defaultYAxisTickFormatter(value);
+    };
+    yAxis.tickFormat(tickFormat);
     let customTickValues;
     if (tickValues) {
         customTickValues = tickValues;
@@ -529,7 +551,7 @@ export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDatas
     const { yMinMaxValues = {
         startValue: 0,
         endValue: 0
-    }, yAxisElement = null, yMaxValue = 0, yMinValue = 0, containerHeight, containerWidth, margins, tickPadding = 12, maxOfYVal = 0, yAxisTickFormat, yAxisTickCount = 4, eventAnnotationProps, eventLabelHeight, tickValues, tickStep, tick0 } = yAxisParams;
+    }, yAxisElement = null, yMaxValue = 0, yMinValue = 0, containerHeight, containerWidth, margins, tickPadding = 12, maxOfYVal = 0, yAxisTickFormat, yAxisTickCount = 4, eventAnnotationProps, eventLabelHeight, tickValues, tickStep, tick0, tickText } = 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;
@@ -584,10 +606,19 @@ export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDatas
         }
     }
     const tickFormat = (domainValue, index, defaultFormat)=>{
+        if (tickValues && tickText && typeof tickText[index] !== 'undefined') {
+            return tickText[index];
+        }
+        if (typeof yAxisTickFormat === 'function') {
+            return yAxisTickFormat(domainValue, index);
+        }
+        if (typeof yAxisTickFormat === 'string') {
+            return d3Format(yAxisTickFormat)(domainValue);
+        }
         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)));
+    yAxis.tickFormat((v, i)=>tickFormat(v, i, yAxisScale.tickFormat(yAxisTickCount)));
     yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text').attr('aria-hidden', 'true').style('direction', 'ltr').style('unicode-bidi', 'isolate').style('text-anchor', !useSecondaryYScale && (_useRtl ? 'start' : 'end')) : '';
     return yAxisScale;
 }
@@ -597,7 +628,7 @@ export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDatas
  * @param dataPoints
  * @param isRtl
  */ export const createStringYAxisForHorizontalBarChartWithAxis = (yAxisParams, dataPoints, isRtl, barWidth)=>{
-    const { containerHeight, tickPadding = 12, margins, yAxisTickFormat, yAxisElement, yAxisPadding } = yAxisParams;
+    const { containerHeight, tickPadding = 12, margins, yAxisTickFormat, yAxisElement, yAxisPadding, tickValues, tickText } = yAxisParams;
     let yAxisPaddingValue = yAxisPadding !== null && yAxisPadding !== void 0 ? yAxisPadding : 0.5;
     yAxisPaddingValue = yAxisPaddingValue === 1 ? 0.99 : yAxisPaddingValue;
     const yAxisScale = d3ScaleBand().domain(dataPoints).range([
@@ -605,10 +636,17 @@ export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDatas
         margins.top
     ]).padding(yAxisPaddingValue);
     const axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
-    const yAxis = axis.tickPadding(tickPadding).ticks(dataPoints);
-    if (yAxisTickFormat) {
-        yAxis.tickFormat(yAxisTickFormat);
-    }
+    const customTickValues = tickValues !== null && tickValues !== void 0 ? tickValues : dataPoints;
+    const tickFormat = (domainValue, _index)=>{
+        if (tickValues && tickText && typeof tickText[_index] !== 'undefined') {
+            return tickText[_index];
+        }
+        if (typeof yAxisTickFormat === 'function') {
+            return yAxisTickFormat(domainValue, _index);
+        }
+        return domainValue;
+    };
+    const yAxis = axis.tickPadding(tickPadding).tickValues(customTickValues).tickFormat(tickFormat);
     yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text') : '';
     return yAxisScale;
 };
@@ -618,7 +656,7 @@ export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDatas
  * @param dataPoints
  * @param isRtl
  */ export const createStringYAxis = (yAxisParams, dataPoints, isRtl, barWidth, chartType)=>{
-    const { containerHeight, tickPadding = 12, margins, yAxisTickFormat, yAxisElement, yAxisPadding = 0, containerWidth } = yAxisParams;
+    const { containerHeight, tickPadding = 12, margins, yAxisTickFormat, yAxisElement, yAxisPadding = 0, containerWidth, tickValues, tickText } = yAxisParams;
     const yAxisScale = d3ScaleBand().domain(dataPoints).range([
         containerHeight - margins.bottom,
         margins.top
@@ -627,13 +665,20 @@ export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDatas
         yAxisScale.paddingInner(1).paddingOuter(0);
     }
     const axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
-    const yAxis = axis.tickPadding(tickPadding).tickValues(dataPoints).tickSize(0);
+    const customTickValues = tickValues !== null && tickValues !== void 0 ? tickValues : dataPoints;
+    const tickFormat = (domainValue, _index)=>{
+        if (tickValues && tickText && typeof tickText[_index] !== 'undefined') {
+            return tickText[_index];
+        }
+        if (typeof yAxisTickFormat === 'function') {
+            return yAxisTickFormat(domainValue, _index);
+        }
+        return domainValue;
+    };
+    const yAxis = axis.tickPadding(tickPadding).tickValues(customTickValues).tickFormat(tickFormat).tickSize(0);
     if (chartType === 3) {
         axis.tickSizeInner(-(containerWidth - margins.left - margins.right));
     }
-    if (yAxisTickFormat) {
-        yAxis.tickFormat(yAxisTickFormat);
-    }
     yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text') : '';
     return yAxisScale;
 };
@@ -684,14 +729,7 @@ export function calloutData(values) {
             ];
         }
     });
-    const result = Object.keys(xValToDataPoints).map((xValue)=>{
-        const originalXValue = isNaN(Number(xValue)) ? xValue : Number(xValue);
-        return {
-            x: originalXValue,
-            values: xValToDataPoints[xValue]
-        };
-    });
-    return result;
+    return xValToDataPoints;
 }
 export function getUnique(arr, comp) {
     const unique = arr// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1761,3 +1799,16 @@ const generateDateTicks = (tickStep, tick0, scaleDomain, useUTC)=>{
     const exp = Math.pow(base, precision);
     return Math.round(value * exp) / exp;
 }
+export const findCalloutPoints = (calloutPointsByX, x)=>{
+    if (x === null) {
+        return undefined;
+    }
+    const key = x instanceof Date ? x.getTime() : x;
+    if (!calloutPointsByX[key]) {
+        return undefined;
+    }
+    return {
+        x,
+        values: calloutPointsByX[key]
+    };
+};