@fluentui/react-charts 9.1.2 → 9.1.4

package/lib/utilities/utilities.js

@@ -9,6 +9,7 @@ import { curveLinear as d3CurveLinear, curveNatural as d3CurveNatural, curveStep
 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';
+export const MIN_DOMAIN_MARGIN = 8;
 export var ChartTypes;
 (function(ChartTypes) {
     ChartTypes[ChartTypes["AreaChart"] = 0] = "AreaChart";
@@ -487,10 +488,10 @@ export function createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl, axi
         startValue: 0,
         endValue: 0
     }, yAxisElement = null, yMaxValue = 0, yMinValue = 0, containerHeight, margins, tickPadding = 12, maxOfYVal = 0, yAxisTickFormat, yAxisTickCount = 4 } = yAxisParams;
-    // maxOfYVal coming from only area chart and Grouped vertical bar chart(Calculation done at base file)
+    // maxOfYVal coming from horizontal bar chart with axis (Calculation done at base file)
     const tempVal = maxOfYVal || yMinMaxValues.endValue;
     const finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue;
-    const finalYmin = yMinMaxValues.startValue < yMinValue ? 0 : yMinValue;
+    const finalYmin = yMinMaxValues.startValue < yMinValue ? Math.min(0, yMinMaxValues.startValue) : yMinValue;
     const yAxisScale = d3ScaleLinear().domain([
         finalYmin,
         finalYmax
@@ -510,9 +511,9 @@ export function createNumericYAxisForOtherCharts(yAxisParams, isRtl, axisData, i
         endValue: 0
     }, yAxisElement = null, yMaxValue = 0, yMinValue = 0, containerHeight, containerWidth, margins, tickPadding = 12, maxOfYVal = 0, yAxisTickFormat, yAxisTickCount = 4, eventAnnotationProps, eventLabelHeight } = yAxisParams;
     // maxOfYVal coming from only area chart and Grouped vertical bar chart(Calculation done at base file)
-    const tempVal = maxOfYVal || yMinMaxValues.endValue;
+    const tempVal = maxOfYVal || yMinMaxValues.endValue || 0;
     const finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue;
-    const finalYmin = Math.min(yMinMaxValues.startValue, yMinValue || 0);
+    const finalYmin = Math.min(yMinMaxValues.startValue || 0, yMinValue || 0);
     const domainValues = prepareDatapoints(finalYmax, finalYmin, yAxisTickCount, isIntegralDataset, roundedTicks);
     let yMin = finalYmin;
     let yMax = domainValues[domainValues.length - 1];
@@ -549,11 +550,13 @@ export const createStringYAxis = (yAxisParams, dataPoints, isRtl, chartType, bar
  * @param dataPoints
  * @param isRtl
  */ export const createStringYAxisForHorizontalBarChartWithAxis = (yAxisParams, dataPoints, isRtl, barWidth, culture)=>{
-    const { containerHeight, tickPadding = 12, margins, yAxisTickFormat, yAxisElement } = yAxisParams;
+    const { containerHeight, tickPadding = 12, margins, yAxisTickFormat, yAxisElement, yAxisPadding } = yAxisParams;
+    let yAxisPaddingValue = yAxisPadding !== null && yAxisPadding !== void 0 ? yAxisPadding : 0.5;
+    yAxisPaddingValue = yAxisPaddingValue === 1 ? 0.99 : yAxisPaddingValue;
     const yAxisScale = d3ScaleBand().domain(dataPoints).range([
-        containerHeight - margins.bottom - barWidth / 2,
-        margins.top + barWidth / 2
-    ]);
+        containerHeight - margins.bottom,
+        margins.top
+    ]).padding(yAxisPaddingValue);
     const axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
     const yAxis = axis.tickPadding(tickPadding).ticks(dataPoints);
     if (yAxisTickFormat) {
@@ -917,6 +920,41 @@ export function tooltipOfXAxislabels(xAxistooltipProps) {
         rEndValue
     };
 }
+/**
+ * Groups HorizontalBarChart With Axis data based on YValue
+ * Used for stacked case
+ * @param {IHorizontalBarChartWithAxisDataPoint[]} chartData
+ * @returns {IHorizontalBarChartWithAxisDataPoint[][]}
+ */ export function groupChartDataByYValue(chartData) {
+    const map = {};
+    chartData.forEach((dataPoint)=>{
+        const key = dataPoint.y;
+        if (!map[key]) {
+            map[key] = [];
+        }
+        map[key].push(dataPoint);
+    });
+    return Object.values(map);
+}
+/**
+ * Calculates maximum domain values for Numeric x axis for both positive and negative values
+ * works for Horizontal Bar Chart With axis
+ * @param {HorizontalBarChartWithAxisDataPoint[][]} stackedChartData
+ * @returns {number}
+ */ export function computeLongestBars(stackedChartData, X_ORIGIN) {
+    let longestPositiveBar = 0;
+    let longestNegativeBar = 0;
+    stackedChartData.forEach((group)=>{
+        const positiveBarTotal = group.reduce((acc, point)=>acc + (point.x > 0 ? point.x : 0), X_ORIGIN);
+        const negativeBarTotal = group.reduce((acc, point)=>acc + (point.x < 0 ? point.x : 0), X_ORIGIN);
+        longestPositiveBar = Math.max(longestPositiveBar, positiveBarTotal);
+        longestNegativeBar = Math.min(longestNegativeBar, negativeBarTotal);
+    });
+    return {
+        longestPositiveBar,
+        longestNegativeBar
+    };
+}
 /**
  * Calculates Domain and range values for Numeric X axis.
  * This method calculates Horizontal Chart with Axis
@@ -926,17 +964,19 @@ export function tooltipOfXAxislabels(xAxistooltipProps) {
  * @param {number} width
  * @param {boolean} isRTL
  * @returns {IDomainNRange}
- */ export function domainRangeOfNumericForHorizontalBarChartWithAxis(points, margins, containerWidth, isRTL, shiftX) {
-    const xMax = d3Max(points, (point)=>point.x);
+ */ export function domainRangeOfNumericForHorizontalBarChartWithAxis(points, margins, containerWidth, isRTL, shiftX, X_ORIGIN) {
+    const longestBars = computeLongestBars(groupChartDataByYValue(points), X_ORIGIN);
+    const xMax = longestBars.longestPositiveBar;
+    const xMin = longestBars.longestNegativeBar;
     const rMin = isRTL ? margins.left : margins.left + shiftX;
     const rMax = isRTL ? containerWidth - margins.right - shiftX : containerWidth - margins.right;
     return isRTL ? {
         dStartValue: xMax,
-        dEndValue: 0,
+        dEndValue: Math.min(xMin, X_ORIGIN),
         rStartValue: rMin,
         rEndValue: rMax
     } : {
-        dStartValue: 0,
+        dStartValue: Math.min(xMin, X_ORIGIN),
         dEndValue: xMax,
         rStartValue: rMin,
         rEndValue: rMax
@@ -1144,7 +1184,7 @@ export function tooltipOfXAxislabels(xAxistooltipProps) {
  * @param {number} [barWidth]
  * @returns {IDomainNRange}
  */ export function getDomainNRangeValues(// eslint-disable-next-line @typescript-eslint/no-explicit-any
-points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
+points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX, X_ORIGIN) {
     let domainNRangeValue;
     if (xAxisType === 0) {
         switch(chartType){
@@ -1159,7 +1199,7 @@ points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shift
                 domainNRangeValue = domainRageOfVerticalNumeric(points, margins, width, isRTL, barWidth);
                 break;
             case 6:
-                domainNRangeValue = domainRangeOfNumericForHorizontalBarChartWithAxis(points, margins, width, isRTL, shiftX);
+                domainNRangeValue = domainRangeOfNumericForHorizontalBarChartWithAxis(points, margins, width, isRTL, shiftX, X_ORIGIN);
                 break;
             case 7:
                 domainNRangeValue = domainRangeOfNumericForScatterChart(points, margins, width, isRTL);
@@ -1217,16 +1257,18 @@ points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shift
  * @export
  * @param {LineChartPoints[]} points
  * @returns {{ startValue: number; endValue: number }}
- */ export function findNumericMinMaxOfY(points) {
-    const yMax = d3Max(points, (point)=>{
-        return d3Max(point.data, (item)=>item.y);
-    });
-    const yMin = d3Min(points, (point)=>{
-        return d3Min(point.data, (item)=>item.y);
+ */ export function findNumericMinMaxOfY(points, yAxisType, useSecondaryYScale) {
+    const values = [];
+    points.forEach((point)=>{
+        if (!useSecondaryYScale === !point.useSecondaryYScale) {
+            point.data.forEach((data)=>{
+                values.push(data.y);
+            });
+        }
     });
     return {
-        startValue: yMin,
-        endValue: yMax
+        startValue: d3Min(values),
+        endValue: d3Max(values)
     };
 }
 /**
@@ -1247,32 +1289,21 @@ points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shift
  * @export
  * @param {VerticalBarChartDataPoint[]} points
  * @returns {{ startValue: number; endValue: number }}
- */ export function findVerticalNumericMinMaxOfY(points) {
-    const yMax = d3Max(points, (point)=>{
-        if (point.lineData !== undefined) {
-            if (point.y > point.lineData.y) {
-                return point.y;
-            } else {
-                return point.lineData.y;
-            }
-        } else {
-            return point.y;
+ */ export function findVerticalNumericMinMaxOfY(points, yAxisType, useSecondaryYScale) {
+    const values = [];
+    points.forEach((point)=>{
+        if (!useSecondaryYScale) {
+            values.push(point.y);
         }
-    });
-    const yMin = d3Min(points, (point)=>{
-        if (point.lineData !== undefined) {
-            if (point.y < point.lineData.y) {
-                return point.y;
-            } else {
-                return point.lineData.y;
+        if (typeof point.lineData !== 'undefined') {
+            if (!useSecondaryYScale === !point.lineData.useSecondaryYScale) {
+                values.push(point.lineData.y);
             }
-        } else {
-            return point.y;
         }
     });
     return {
-        startValue: yMin,
-        endValue: yMax
+        startValue: d3Min(values),
+        endValue: d3Max(values)
     };
 }
 /**
@@ -1304,19 +1335,19 @@ points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shift
  * @returns {{ startValue: number; endValue: number }}
  */ // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function getMinMaxOfYAxis(// eslint-disable-next-line @typescript-eslint/no-explicit-any
-points, chartType, yAxisType = 0) {
+points, chartType, yAxisType = 0, useSecondaryYScale) {
     let minMaxValues;
     switch(chartType){
         case 0:
         case 1:
         case 7:
-            minMaxValues = findNumericMinMaxOfY(points);
+            minMaxValues = findNumericMinMaxOfY(points, yAxisType, useSecondaryYScale);
             break;
         case 3:
             minMaxValues = findVSBCNumericMinMaxOfY(points);
             break;
         case 2:
-            minMaxValues = findVerticalNumericMinMaxOfY(points);
+            minMaxValues = findVerticalNumericMinMaxOfY(points, yAxisType, useSecondaryYScale);
             break;
         case 6:
             minMaxValues = findHBCWANumericMinMaxOfY(points, yAxisType);