@fluentui/react-charting 5.24.39 → 5.25.0

package/lib/utilities/utilities.js

@@ -72,13 +72,16 @@ export function defaultYAxisTickFormatter(value) {
  * @param {IXAxisParams} xAxisParams
  */
 export function createNumericXAxis(xAxisParams, tickParams, chartType, culture, scaleType) {
-    var domainNRangeValues = xAxisParams.domainNRangeValues, _a = xAxisParams.showRoundOffXTickValues, showRoundOffXTickValues = _a === void 0 ? true : _a, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, _c = xAxisParams.tickPadding, tickPadding = _c === void 0 ? 10 : _c, xAxisCount = xAxisParams.xAxisCount, xAxisElement = xAxisParams.xAxisElement, hideTickOverlap = xAxisParams.hideTickOverlap, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth, tickStep = xAxisParams.tickStep, tick0 = xAxisParams.tick0;
+    var domainNRangeValues = xAxisParams.domainNRangeValues, _a = xAxisParams.showRoundOffXTickValues, showRoundOffXTickValues = _a === void 0 ? true : _a, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, _c = xAxisParams.tickPadding, tickPadding = _c === void 0 ? 10 : _c, xAxisCount = xAxisParams.xAxisCount, xAxisElement = xAxisParams.xAxisElement, hideTickOverlap = xAxisParams.hideTickOverlap, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth, tickStep = xAxisParams.tickStep, tick0 = xAxisParams.tick0, tickText = xAxisParams.tickText;
     var xAxisScale = createNumericScale(scaleType)
         .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
         .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue]);
     showRoundOffXTickValues && xAxisScale.nice();
     var tickCount = xAxisCount !== null && xAxisCount !== void 0 ? xAxisCount : 6;
     var tickFormat = function (domainValue, _index, defaultFormat) {
+        if (tickParams.tickValues && tickText && typeof tickText[_index] !== 'undefined') {
+            return tickText[_index];
+        }
         if (tickParams.tickFormat) {
             return d3Format(tickParams.tickFormat)(domainValue);
         }
@@ -217,7 +220,7 @@ function isPowerOf10(num) {
  * @param {ITickParams} tickParams
  */
 export function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLocale, customDateTimeFormatter, useUTC, chartType) {
-    var domainNRangeValues = xAxisParams.domainNRangeValues, xAxisElement = xAxisParams.xAxisElement, _a = xAxisParams.tickPadding, tickPadding = _a === void 0 ? 6 : _a, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, xAxisCount = xAxisParams.xAxisCount, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth, tickStep = xAxisParams.tickStep, tick0 = xAxisParams.tick0;
+    var domainNRangeValues = xAxisParams.domainNRangeValues, xAxisElement = xAxisParams.xAxisElement, _a = xAxisParams.tickPadding, tickPadding = _a === void 0 ? 6 : _a, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, xAxisCount = xAxisParams.xAxisCount, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth, tickStep = xAxisParams.tickStep, tick0 = xAxisParams.tick0, tickText = xAxisParams.tickText;
     var xAxisScale = useUTC ? d3ScaleUtc() : d3ScaleTime();
     xAxisScale
         .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
@@ -239,6 +242,9 @@ export function createDateXAxis(xAxisParams, tickParams, culture, options, timeF
     var formatOptions = options !== null && options !== void 0 ? options : getMultiLevelDateTimeFormatOptions(lowestFormatLevel, highestFormatLevel);
     var formatFn = getMultiLevelD3DateFormatter(lowestFormatLevel, highestFormatLevel, locale, useUTC);
     var tickFormat = function (domainValue, _index) {
+        if (tickParams.tickValues && tickText && typeof tickText[_index] !== 'undefined') {
+            return tickText[_index];
+        }
         if (customDateTimeFormatter) {
             return customDateTimeFormatter(domainValue);
         }
@@ -294,13 +300,19 @@ export function createDateXAxis(xAxisParams, tickParams, culture, options, timeF
  */
 export function createStringXAxis(xAxisParams, tickParams, dataset, culture) {
     var _a;
-    var domainNRangeValues = xAxisParams.domainNRangeValues, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, _c = xAxisParams.tickPadding, tickPadding = _c === void 0 ? 10 : _c, _d = xAxisParams.xAxisPadding, xAxisPadding = _d === void 0 ? 0.1 : _d, xAxisInnerPadding = xAxisParams.xAxisInnerPadding, xAxisOuterPadding = xAxisParams.xAxisOuterPadding, containerWidth = xAxisParams.containerWidth, hideTickOverlap = xAxisParams.hideTickOverlap, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth;
+    var domainNRangeValues = xAxisParams.domainNRangeValues, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, _c = xAxisParams.tickPadding, tickPadding = _c === void 0 ? 10 : _c, _d = xAxisParams.xAxisPadding, xAxisPadding = _d === void 0 ? 0.1 : _d, xAxisInnerPadding = xAxisParams.xAxisInnerPadding, xAxisOuterPadding = xAxisParams.xAxisOuterPadding, containerWidth = xAxisParams.containerWidth, hideTickOverlap = xAxisParams.hideTickOverlap, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth, tickText = xAxisParams.tickText;
     var xAxisScale = d3ScaleBand()
         .domain(dataset)
         .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue])
         .paddingInner(typeof xAxisInnerPadding !== 'undefined' ? xAxisInnerPadding : xAxisPadding)
         .paddingOuter(typeof xAxisOuterPadding !== 'undefined' ? xAxisOuterPadding : xAxisPadding);
     var tickValues = (_a = tickParams.tickValues) !== null && _a !== void 0 ? _a : dataset;
+    var tickFormat = function (domainValue, _index) {
+        if (tickParams.tickValues && tickText && typeof tickText[_index] !== 'undefined') {
+            return tickText[_index];
+        }
+        return domainValue;
+    };
     if (hideTickOverlap) {
         var nonOverlappingTickValues = [];
         // Here, we need the width of each individual label to detect overlaps,
@@ -329,7 +341,11 @@ export function createStringXAxis(xAxisParams, tickParams, dataset, culture) {
         nonOverlappingTickValues = nonOverlappingTickValues.reverse();
         tickValues = nonOverlappingTickValues;
     }
-    var xAxis = d3AxisBottom(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).tickValues(tickValues);
+    var xAxis = d3AxisBottom(xAxisScale)
+        .tickSize(xAxistickSize)
+        .tickPadding(tickPadding)
+        .tickValues(tickValues)
+        .tickFormat(tickFormat);
     if (xAxisParams.xAxisElement) {
         d3Select(xAxisParams.xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
     }
@@ -397,7 +413,7 @@ export function prepareDatapoints(maxVal, minVal, splitInto, isIntegralDataset,
     return dataPointsArray;
 }
 export function createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl) {
-    var _a = yAxisParams.yMinMaxValues, yMinMaxValues = _a === void 0 ? { startValue: 0, endValue: 0 } : _a, _b = yAxisParams.yAxisElement, yAxisElement = _b === void 0 ? null : _b, _c = yAxisParams.yMaxValue, yMaxValue = _c === void 0 ? 0 : _c, _d = yAxisParams.yMinValue, yMinValue = _d === void 0 ? 0 : _d, containerHeight = yAxisParams.containerHeight, margins = yAxisParams.margins, _e = yAxisParams.tickPadding, tickPadding = _e === void 0 ? 12 : _e, _f = yAxisParams.maxOfYVal, maxOfYVal = _f === void 0 ? 0 : _f, yAxisTickFormat = yAxisParams.yAxisTickFormat, _g = yAxisParams.yAxisTickCount, yAxisTickCount = _g === void 0 ? 4 : _g, tickValues = yAxisParams.tickValues, tickStep = yAxisParams.tickStep, tick0 = yAxisParams.tick0;
+    var _a = yAxisParams.yMinMaxValues, yMinMaxValues = _a === void 0 ? { startValue: 0, endValue: 0 } : _a, _b = yAxisParams.yAxisElement, yAxisElement = _b === void 0 ? null : _b, _c = yAxisParams.yMaxValue, yMaxValue = _c === void 0 ? 0 : _c, _d = yAxisParams.yMinValue, yMinValue = _d === void 0 ? 0 : _d, containerHeight = yAxisParams.containerHeight, margins = yAxisParams.margins, _e = yAxisParams.tickPadding, tickPadding = _e === void 0 ? 12 : _e, _f = yAxisParams.maxOfYVal, maxOfYVal = _f === void 0 ? 0 : _f, yAxisTickFormat = yAxisParams.yAxisTickFormat, _g = yAxisParams.yAxisTickCount, yAxisTickCount = _g === void 0 ? 4 : _g, tickValues = yAxisParams.tickValues, tickStep = yAxisParams.tickStep, tick0 = yAxisParams.tick0, tickText = yAxisParams.tickText;
     // maxOfYVal coming from horizontal bar chart with axis (Calculation done at base file)
     var tempVal = maxOfYVal || yMinMaxValues.endValue;
     var finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue;
@@ -407,7 +423,20 @@ export function createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl) {
         .range([containerHeight - margins.bottom, margins.top]);
     var axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
     var yAxis = axis.tickPadding(tickPadding).ticks(yAxisTickCount);
-    yAxisTickFormat ? yAxis.tickFormat(yAxisTickFormat) : yAxis.tickFormat(defaultYAxisTickFormatter);
+    var tickFormat = function (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);
+        }
+        var value = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
+        return defaultYAxisTickFormatter(value);
+    };
+    yAxis.tickFormat(tickFormat);
     var customTickValues;
     if (tickValues) {
         customTickValues = tickValues;
@@ -425,7 +454,7 @@ export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDatas
     if (useSecondaryYScale === void 0) { useSecondaryYScale = false; }
     if (supportNegativeData === void 0) { supportNegativeData = false; }
     if (roundedTicks === void 0) { roundedTicks = false; }
-    var _a = yAxisParams.yMinMaxValues, yMinMaxValues = _a === void 0 ? { startValue: 0, endValue: 0 } : _a, _b = yAxisParams.yAxisElement, yAxisElement = _b === void 0 ? null : _b, _c = yAxisParams.yMaxValue, yMaxValue = _c === void 0 ? 0 : _c, _d = yAxisParams.yMinValue, yMinValue = _d === void 0 ? 0 : _d, containerHeight = yAxisParams.containerHeight, containerWidth = yAxisParams.containerWidth, margins = yAxisParams.margins, _e = yAxisParams.tickPadding, tickPadding = _e === void 0 ? 12 : _e, _f = yAxisParams.maxOfYVal, maxOfYVal = _f === void 0 ? 0 : _f, yAxisTickFormat = yAxisParams.yAxisTickFormat, _g = yAxisParams.yAxisTickCount, yAxisTickCount = _g === void 0 ? 4 : _g, eventAnnotationProps = yAxisParams.eventAnnotationProps, eventLabelHeight = yAxisParams.eventLabelHeight, tickValues = yAxisParams.tickValues, tickStep = yAxisParams.tickStep, tick0 = yAxisParams.tick0;
+    var _a = yAxisParams.yMinMaxValues, yMinMaxValues = _a === void 0 ? { startValue: 0, endValue: 0 } : _a, _b = yAxisParams.yAxisElement, yAxisElement = _b === void 0 ? null : _b, _c = yAxisParams.yMaxValue, yMaxValue = _c === void 0 ? 0 : _c, _d = yAxisParams.yMinValue, yMinValue = _d === void 0 ? 0 : _d, containerHeight = yAxisParams.containerHeight, containerWidth = yAxisParams.containerWidth, margins = yAxisParams.margins, _e = yAxisParams.tickPadding, tickPadding = _e === void 0 ? 12 : _e, _f = yAxisParams.maxOfYVal, maxOfYVal = _f === void 0 ? 0 : _f, yAxisTickFormat = yAxisParams.yAxisTickFormat, _g = yAxisParams.yAxisTickCount, yAxisTickCount = _g === void 0 ? 4 : _g, eventAnnotationProps = yAxisParams.eventAnnotationProps, eventLabelHeight = yAxisParams.eventLabelHeight, tickValues = yAxisParams.tickValues, tickStep = yAxisParams.tickStep, tick0 = yAxisParams.tick0, tickText = yAxisParams.tickText;
     // maxOfYVal coming from only area chart and Grouped vertical bar chart(Calculation done at base file)
     var tempVal = maxOfYVal || yMinMaxValues.endValue || 0;
     var finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue;
@@ -473,12 +502,19 @@ export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDatas
         }
     }
     var tickFormat = function (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);
+        }
         var 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(function (v, i) { return tickFormat(v, i, yAxisScale.tickFormat(yAxisTickCount)); });
+    yAxis.tickFormat(function (v, i) { return tickFormat(v, i, yAxisScale.tickFormat(yAxisTickCount)); });
     yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
     return yAxisScale;
 }
@@ -489,7 +525,8 @@ export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDatas
  * @param isRtl
  */
 export var createStringYAxisForHorizontalBarChartWithAxis = function (yAxisParams, dataPoints, isRtl, barWidth) {
-    var containerHeight = yAxisParams.containerHeight, _a = yAxisParams.tickPadding, tickPadding = _a === void 0 ? 12 : _a, margins = yAxisParams.margins, yAxisTickFormat = yAxisParams.yAxisTickFormat, yAxisElement = yAxisParams.yAxisElement, yAxisPadding = yAxisParams.yAxisPadding;
+    var _a;
+    var containerHeight = yAxisParams.containerHeight, _b = yAxisParams.tickPadding, tickPadding = _b === void 0 ? 12 : _b, margins = yAxisParams.margins, yAxisTickFormat = yAxisParams.yAxisTickFormat, yAxisElement = yAxisParams.yAxisElement, yAxisPadding = yAxisParams.yAxisPadding, tickValues = yAxisParams.tickValues, tickText = yAxisParams.tickText;
     var yAxisPaddingValue = yAxisPadding !== null && yAxisPadding !== void 0 ? yAxisPadding : 0.5;
     yAxisPaddingValue = yAxisPaddingValue === 1 ? 0.99 : yAxisPaddingValue;
     var yAxisScale = d3ScaleBand()
@@ -497,10 +534,17 @@ export var createStringYAxisForHorizontalBarChartWithAxis = function (yAxisParam
         .range([containerHeight - margins.bottom, margins.top])
         .padding(yAxisPaddingValue);
     var axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
-    var yAxis = axis.tickPadding(tickPadding).ticks(dataPoints);
-    if (yAxisTickFormat) {
-        yAxis.tickFormat(yAxisTickFormat);
-    }
+    var customTickValues = (_a = tickValues) !== null && _a !== void 0 ? _a : dataPoints;
+    var tickFormat = function (domainValue, _index) {
+        if (tickValues && tickText && typeof tickText[_index] !== 'undefined') {
+            return tickText[_index];
+        }
+        if (typeof yAxisTickFormat === 'function') {
+            return yAxisTickFormat(domainValue, _index);
+        }
+        return domainValue;
+    };
+    var yAxis = axis.tickPadding(tickPadding).tickValues(customTickValues).tickFormat(tickFormat);
     yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text') : '';
     return yAxisScale;
 };
@@ -511,7 +555,8 @@ export var createStringYAxisForHorizontalBarChartWithAxis = function (yAxisParam
  * @param isRtl
  */
 export var createStringYAxis = function (yAxisParams, dataPoints, isRtl, barWidth, chartType) {
-    var containerHeight = yAxisParams.containerHeight, _a = yAxisParams.tickPadding, tickPadding = _a === void 0 ? 12 : _a, margins = yAxisParams.margins, yAxisTickFormat = yAxisParams.yAxisTickFormat, yAxisElement = yAxisParams.yAxisElement, _b = yAxisParams.yAxisPadding, yAxisPadding = _b === void 0 ? 0 : _b, containerWidth = yAxisParams.containerWidth;
+    var _a;
+    var containerHeight = yAxisParams.containerHeight, _b = yAxisParams.tickPadding, tickPadding = _b === void 0 ? 12 : _b, margins = yAxisParams.margins, yAxisTickFormat = yAxisParams.yAxisTickFormat, yAxisElement = yAxisParams.yAxisElement, _c = yAxisParams.yAxisPadding, yAxisPadding = _c === void 0 ? 0 : _c, containerWidth = yAxisParams.containerWidth, tickValues = yAxisParams.tickValues, tickText = yAxisParams.tickText;
     var yAxisScale = d3ScaleBand()
         .domain(dataPoints)
         .range([containerHeight - margins.bottom, margins.top])
@@ -520,13 +565,20 @@ export var createStringYAxis = function (yAxisParams, dataPoints, isRtl, barWidt
         yAxisScale.paddingInner(1).paddingOuter(0);
     }
     var axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
-    var yAxis = axis.tickPadding(tickPadding).tickValues(dataPoints).tickSize(0);
+    var customTickValues = (_a = tickValues) !== null && _a !== void 0 ? _a : dataPoints;
+    var tickFormat = function (domainValue, _index) {
+        if (tickValues && tickText && typeof tickText[_index] !== 'undefined') {
+            return tickText[_index];
+        }
+        if (typeof yAxisTickFormat === 'function') {
+            return yAxisTickFormat(domainValue, _index);
+        }
+        return domainValue;
+    };
+    var yAxis = axis.tickPadding(tickPadding).tickValues(customTickValues).tickFormat(tickFormat).tickSize(0);
     if (chartType === ChartTypes.VerticalStackedBarChart) {
         axis.tickSizeInner(-(containerWidth - margins.left - margins.right));
     }
-    if (yAxisTickFormat) {
-        yAxis.tickFormat(yAxisTickFormat);
-    }
     yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text') : '';
     return yAxisScale;
 };