@fluentui/react-charts 9.2.1 → 9.2.3

package/lib/components/HeatMapChart/HeatMapChart.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChartTypes, getAccessibleDataObject, getColorContrast, getTypeOfAxis, resolveCSSVariables, XAxisTypes, YAxisType, createNumericYAxis, domainRangeOfXStringAxis, createStringYAxis, useRtl } from '../../utilities/index';
+import { ChartTypes, getAccessibleDataObject, getColorContrast, getTypeOfAxis, resolveCSSVariables, XAxisTypes, YAxisType, createNumericYAxis, domainRangeOfXStringAxis, createStringYAxis, useRtl, sortAxisCategories } from '../../utilities/index';
 import { formatToLocaleString } from '@fluentui/chart-utilities';
 import { CartesianChart } from '../CommonComponents/index';
 import { useId } from '@fluentui/react-utilities';
@@ -10,7 +10,13 @@ import { scaleLinear as d3ScaleLinear } from 'd3-scale';
 import { format as d3Format } from 'd3-format';
 import { timeFormat as d3TimeFormat } from 'd3-time-format';
 import { toImage } from '../../utilities/image-export-utils';
-export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props = {
+    xAxisCategoryOrder: 'default',
+    yAxisCategoryOrder: 'default',
+    data: [],
+    domainValuesForColorScale: [],
+    rangeValuesForColorScale: []
+}, forwardedRef)=>{
     const classes = useHeatMapChartStyles(props);
     const _stringXAxisDataPoints = React.useRef([]);
     const _stringYAxisDataPoints = React.useRef([]);
@@ -135,16 +141,16 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)
         return color === tokens.colorNeutralForeground1 ? tokens.colorNeutralBackground1 : tokens.colorNeutralForeground1;
     };
     /**
-   * This is the function which is responsible for
-   * drawing the rectangle in the graph and also
-   * attaching dom events to that rectangles
-   */ const _createRectangles = ()=>{
+     * This is the function which is responsible for
+     * drawing the rectangle in the graph and also
+     * attaching dom events to that rectangles
+     */ const _createRectangles = ()=>{
         const rectangles = [];
         const yAxisDataPoints = _stringYAxisDataPoints.current.slice().reverse();
         /**
-     * yAxisDataPoint is noting but the DataPoint
-     * which will be rendered on the y-axis
-     */ yAxisDataPoints.forEach((yAxisDataPoint)=>{
+       * yAxisDataPoint is noting but the DataPoint
+       * which will be rendered on the y-axis
+       */ yAxisDataPoints.forEach((yAxisDataPoint)=>{
             let index = 0;
             _stringXAxisDataPoints.current.forEach((xAxisDataPoint)=>{
                 var _dataSet_current_yAxisDataPoint_index, _dataSet_current_yAxisDataPoint_index1;
@@ -153,9 +159,9 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)
                 if (((_dataSet_current_yAxisDataPoint_index = _dataSet.current[yAxisDataPoint][index]) === null || _dataSet_current_yAxisDataPoint_index === void 0 ? void 0 : _dataSet_current_yAxisDataPoint_index.x) === xAxisDataPoint && typeof ((_dataSet_current_yAxisDataPoint_index1 = _dataSet.current[yAxisDataPoint][index]) === null || _dataSet_current_yAxisDataPoint_index1 === void 0 ? void 0 : _dataSet_current_yAxisDataPoint_index1.value) === 'number') {
                     var _cartesianChartRef_current;
                     /**
-           * dataPointObject is an object where it contains information on single
-           * data point such as x, y , value, rectText property of the rectangle
-           */ const dataPointObject = _dataSet.current[yAxisDataPoint][index];
+             * dataPointObject is an object where it contains information on single
+             * data point such as x, y , value, rectText property of the rectangle
+             */ const dataPointObject = _dataSet.current[yAxisDataPoint][index];
                     let styleRules = '';
                     let foregroundColor = tokens.colorNeutralForeground1;
                     if ((_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) {
@@ -219,30 +225,30 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)
         return rectangles;
     };
     /**
-   * when the legend is hovered we need to highlight
-   * all the rectangles which fall under that category
-   * and un-highlight the rest of them
-   * @param legendTitle
-   */ const _onLegendHover = (legendTitle)=>{
+     * when the legend is hovered we need to highlight
+     * all the rectangles which fall under that category
+     * and un-highlight the rest of them
+     * @param legendTitle
+     */ const _onLegendHover = (legendTitle)=>{
         setActiveLegend(legendTitle);
     };
     /**
-   * when the mouse is out from the legend , we need
-   * to show the graph in initial mode.
-   */ const _onLegendLeave = ()=>{
+     * when the mouse is out from the legend , we need
+     * to show the graph in initial mode.
+     */ const _onLegendLeave = ()=>{
         setActiveLegend('');
     };
     /**
-   * @param legendTitle
-   * when the legend is clicked we need to highlight
-   * all the rectangles which fall under that category
-   * and un highlight the rest of them
-   */ const _onLegendClick = (legendTitle)=>{
+     * @param legendTitle
+     * when the legend is clicked we need to highlight
+     * all the rectangles which fall under that category
+     * and un highlight the rest of them
+     */ const _onLegendClick = (legendTitle)=>{
         /**
-     * check if the legend is already selceted,
-     * if yes, un-select the legend, else
-     * set the selected legend state to legendTitle
-     */ if (selectedLegend === legendTitle) {
+       * check if the legend is already selceted,
+       * if yes, un-select the legend, else
+       * set the selected legend state to legendTitle
+       */ if (selectedLegend === legendTitle) {
             setSelectedLegend('');
         } else {
             setSelectedLegend(legendTitle);
@@ -313,19 +319,13 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)
         yAxisStringFormatter
     ]);
     /**
-   * This function will return the final sorted and formatted x-axis points
-   * which will be rendered on the x-axis
-   * @param points
-   * @returns x-axis points
-   */ const _getXAxisDataPoints = React.useCallback((points)=>{
+     * This function will return the final sorted and formatted x-axis points
+     * which will be rendered on the x-axis
+     * @param points
+     * @returns x-axis points
+     */ const _getXAxisDataPoints = React.useCallback((points)=>{
         let xAxisPoints = [];
-        const unFormattedXAxisDataPoints = Object.keys(points).sort((a, b)=>{
-            if (_xAxisType.current === XAxisTypes.DateAxis || _xAxisType.current === XAxisTypes.NumericAxis) {
-                return +a - +b;
-            } else {
-                return props.sortOrder === 'none' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1;
-            }
-        });
+        const unFormattedXAxisDataPoints = _getOrderedXAxisLabels(points);
         xAxisPoints = unFormattedXAxisDataPoints.map((xPoint)=>{
             if (_xAxisType.current === XAxisTypes.DateAxis) {
                 return _getStringFormattedDate(xPoint, props.xAxisDateFormatString);
@@ -343,19 +343,13 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)
         props.xAxisNumberFormatString
     ]);
     /**
-   * This function will return the final sorted and formatted y-axis points
-   * which will be rendered on the y-axis
-   * @param points
-   * @returns yaxis points
-   */ const _getYAxisDataPoints = React.useCallback((points)=>{
+     * This function will return the final sorted and formatted y-axis points
+     * which will be rendered on the y-axis
+     * @param points
+     * @returns yaxis points
+     */ const _getYAxisDataPoints = React.useCallback((points)=>{
         let yAxisPoints = [];
-        const unFormattedYAxisDataPoints = Object.keys(points).sort((a, b)=>{
-            if (_yAxisType.current === YAxisType.DateAxis || _yAxisType.current === YAxisType.NumericAxis) {
-                return +a - +b;
-            } else {
-                return props.sortOrder === 'none' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1;
-            }
-        });
+        const unFormattedYAxisDataPoints = _getOrderedYAxisLabels(points);
         yAxisPoints = unFormattedYAxisDataPoints.map((yPoint)=>{
             if (_yAxisType.current === YAxisType.DateAxis) {
                 return _getStringFormattedDate(yPoint, props.yAxisDateFormatString);
@@ -373,24 +367,24 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)
         props.yAxisNumberFormatString
     ]);
     /**
-   * This will create a new data set based on the prop
-   * @data
-   * We will be using This data set to contsruct our rectangles
-   * in the chart, we use this data set becuase, when we loop in this
-   * data and build the heat map, it will support accessibility as
-   * specified in the figma
-   */ const _createNewDataSet = React.useCallback((data, xAxisDateFormatString, xAxisNumberFormatString, yAxisDateFormatString, yAxisNumberFormatString)=>{
+     * This will create a new data set based on the prop
+     * @data
+     * We will be using This data set to contsruct our rectangles
+     * in the chart, we use this data set becuase, when we loop in this
+     * data and build the heat map, it will support accessibility as
+     * specified in the figma
+     */ const _createNewDataSet = React.useCallback((data, xAxisDateFormatString, xAxisNumberFormatString, yAxisDateFormatString, yAxisNumberFormatString)=>{
         /**
-       * please do not destructure any of the props here,
-       * instead send them as parameter to this functions so that
-       * this functions get called whenever the prop changes
-       */ const flattenData = [];
+         * please do not destructure any of the props here,
+         * instead send them as parameter to this functions so that
+         * this functions get called whenever the prop changes
+         */ const flattenData = [];
         /**
-       * below for each loop will store all the datapoints in the one array.
-       * basically it will flatten the nestesd array (data prop) into single array
-       * of object. where each object contains x, y, rectText , value and legend propety of single
-       * data point.
-       */ data.forEach((item)=>{
+         * below for each loop will store all the datapoints in the one array.
+         * basically it will flatten the nestesd array (data prop) into single array
+         * of object. where each object contains x, y, rectText , value and legend propety of single
+         * data point.
+         */ data.forEach((item)=>{
             item.data.forEach((point)=>{
                 flattenData.push({
                     ...point,
@@ -407,13 +401,13 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)
             uniqueXPoints[posX] = '1';
             uniqueYPoints[posY] = '1';
             /** we will check if the property(posY) is already there in object, if  Yes,
-         *  then we will append the item in the Array related to the pos, if not
-         *  then we will simply append the item in the new Array and
-         *  assign that array to the  property (posY) in the Object
-         *  and finally we will get the array of Objects associated to each
-         *  property (which is nothing but y data point) and object in the
-         *  array are noting but x data points associated to the property y
-         */ if (yPoints[posY]) {
+           *  then we will append the item in the Array related to the pos, if not
+           *  then we will simply append the item in the new Array and
+           *  assign that array to the  property (posY) in the Object
+           *  and finally we will get the array of Objects associated to each
+           *  property (which is nothing but y data point) and object in the
+           *  array are noting but x data points associated to the property y
+           */ if (yPoints[posY]) {
                 yPoints[posY] = [
                     ...yPoints[posY],
                     item
@@ -425,21 +419,12 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)
             }
         });
         /**
-       * we will now sort(ascending) the array's of y data point based on the x value
-       * sorting is important to achive the accessibility order of the
-       * rectangles and then format the x and y datapoints respectively
-       */ Object.keys(yPoints).forEach((item)=>{
-            yPoints[item].sort((a, b)=>{
-                if (_xAxisType.current === XAxisTypes.StringAxis) {
-                    return props.sortOrder === 'none' ? 0 : a.x.toLowerCase() > b.x.toLowerCase() ? 1 : -1;
-                } else if (_xAxisType.current === XAxisTypes.DateAxis) {
-                    return a.x.getTime() - b.x.getTime();
-                } else if (_xAxisType.current === XAxisTypes.NumericAxis) {
-                    return +a.x > +b.x ? 1 : -1;
-                } else {
-                    return a.x > b.x ? 1 : -1;
-                }
-            }).forEach((datapoint)=>{
+         * we will now sort(ascending) the array's of y data point based on the x value
+         * sorting is important to achive the accessibility order of the
+         * rectangles and then format the x and y datapoints respectively
+         */ Object.keys(yPoints).forEach((item)=>{
+            yPoints[item] = _getOrderedXPoints(yPoints[item]);
+            yPoints[item].forEach((datapoint)=>{
                 if (_xAxisType.current === XAxisTypes.DateAxis) {
                     datapoint.x = _getStringFormattedDate(datapoint.x, xAxisDateFormatString);
                 }
@@ -461,14 +446,14 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)
             });
         });
         /**
-       * if  y-axis data points are of type date or number or if we have string formatter,
-       * then we need to change data points  to their respective string
-       * format, becuase in the private variable this._stringYAxisDatapoints, points will be stored in
-       * string format. and in here `yPoint` are not so we need to change, so that
-       * function `this._createRectangles` should work perfetcly while looping, and  if we don't change
-       * then `this._createRectangles` will fail while looping, causing the error
-       * Cannot read property 'forEach' of undefined
-       */ Object.keys(yPoints).forEach((yPoint)=>{
+         * if  y-axis data points are of type date or number or if we have string formatter,
+         * then we need to change data points  to their respective string
+         * format, becuase in the private variable _stringYAxisDatapoints, points will be stored in
+         * string format. and in here `yPoint` are not so we need to change, so that
+         * function `_createRectangles` should work perfetcly while looping, and  if we don't change
+         * then `_createRectangles` will fail while looping, causing the error
+         * Cannot read property 'forEach' of undefined
+         */ Object.keys(yPoints).forEach((yPoint)=>{
             if (_yAxisType.current === YAxisType.DateAxis) {
                 yPoints[_getStringFormattedDate(yPoint, yAxisDateFormatString)] = yPoints[yPoint];
             } else if (_yAxisType.current === YAxisType.NumericAxis) {
@@ -478,16 +463,16 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)
             }
         });
         /**
-       * assigning new data set
-       */ const dataSet = yPoints;
+         * assigning new data set
+         */ const dataSet = yPoints;
         /**
-       * These are the Y axis data points which will get rendered in the
-       * Y axis in graph
-       */ const yAxisPoints = _getYAxisDataPoints(uniqueYPoints);
+         * These are the Y axis data points which will get rendered in the
+         * Y axis in graph
+         */ const yAxisPoints = _getYAxisDataPoints(uniqueYPoints);
         /**
-       * These are the x axis data points which will get rendered in the
-       * x axis in the graph
-       */ const xAxisPoints = _getXAxisDataPoints(uniqueXPoints);
+         * These are the x axis data points which will get rendered in the
+         * x axis in the graph
+         */ const xAxisPoints = _getXAxisDataPoints(uniqueXPoints);
         return {
             dataSet,
             yAxisPoints,
@@ -509,16 +494,16 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)
         return d3Format(formatString || '.2~s')(+point);
     };
     /**
-   * This function checks if the given legend is highlighted or not.
-   * A legend can be highlighted in 2 ways:
-   * 1. selection: if the user clicks on it
-   * 2. hovering: if there is no selected legend and the user hovers over it
-   */ const _legendHighlighted = (legendTitle)=>{
+     * This function checks if the given legend is highlighted or not.
+     * A legend can be highlighted in 2 ways:
+     * 1. selection: if the user clicks on it
+     * 2. hovering: if there is no selected legend and the user hovers over it
+     */ const _legendHighlighted = (legendTitle)=>{
         return selectedLegend === legendTitle || selectedLegend === '' && activeLegend === legendTitle;
     };
     /**
-   * This function checks if none of the legends is selected or hovered.
-   */ const _noLegendHighlighted = ()=>{
+     * This function checks if none of the legends is selected or hovered.
+     */ const _noLegendHighlighted = ()=>{
         return selectedLegend === '' && activeLegend === '';
     };
     const _getAriaLabel = (point)=>{
@@ -538,6 +523,82 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)
         const numDataPoints = props.data.reduce((acc, curr)=>acc + curr.data.length, 0);
         return (chartTitle ? `${chartTitle}. ` : '') + `Heat map chart with ${numDataPoints} data points. `;
     };
+    const _getOrderedXAxisLabels = (points)=>{
+        if (!_shouldOrderXAxisLabelsByCategoryOrder()) {
+            // Keep the original ordering logic as the default behavior to ensure backward compatibility
+            return Object.keys(points).sort((a, b)=>{
+                if (_xAxisType.current === XAxisTypes.DateAxis || _xAxisType.current === XAxisTypes.NumericAxis) {
+                    return +a - +b;
+                } else {
+                    return props.sortOrder === 'none' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1;
+                }
+            });
+        }
+        return sortAxisCategories(_mapCategoryToValues(), props.xAxisCategoryOrder);
+    };
+    const _getOrderedYAxisLabels = (points)=>{
+        if (!_shouldOrderYAxisLabelsByCategoryOrder()) {
+            // Keep the original ordering logic as the default behavior to ensure backward compatibility
+            return Object.keys(points).sort((a, b)=>{
+                if (_yAxisType.current === YAxisType.DateAxis || _yAxisType.current === YAxisType.NumericAxis) {
+                    return +a - +b;
+                } else {
+                    return props.sortOrder === 'none' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1;
+                }
+            });
+        }
+        return sortAxisCategories(_mapCategoryToValues(true), props.yAxisCategoryOrder);
+    };
+    const _getOrderedXPoints = (xPoints)=>{
+        if (!_shouldOrderXAxisLabelsByCategoryOrder()) {
+            return xPoints.sort((a, b)=>{
+                if (_xAxisType.current === XAxisTypes.StringAxis) {
+                    return props.sortOrder === 'none' ? 0 : a.x.toLowerCase() > b.x.toLowerCase() ? 1 : -1;
+                } else if (_xAxisType.current === XAxisTypes.DateAxis) {
+                    return a.x.getTime() - b.x.getTime();
+                } else if (_xAxisType.current === XAxisTypes.NumericAxis) {
+                    return +a.x > +b.x ? 1 : -1;
+                } else {
+                    return a.x > b.x ? 1 : -1;
+                }
+            });
+        }
+        const result = [];
+        const xValueToPoints = {};
+        xPoints.forEach((point)=>{
+            const xValue = point.x;
+            if (!xValueToPoints[xValue]) {
+                xValueToPoints[xValue] = [];
+            }
+            xValueToPoints[xValue].push(point);
+        });
+        const xAxisLabels = _getOrderedXAxisLabels({});
+        xAxisLabels.forEach((xValue)=>{
+            if (xValueToPoints[xValue]) {
+                result.push(...xValueToPoints[xValue]);
+            }
+        });
+        return result;
+    };
+    const _shouldOrderXAxisLabelsByCategoryOrder = ()=>{
+        return _xAxisType.current === XAxisTypes.StringAxis && props.xAxisCategoryOrder !== 'default';
+    };
+    const _shouldOrderYAxisLabelsByCategoryOrder = ()=>{
+        return _yAxisType.current === YAxisType.StringAxis && props.yAxisCategoryOrder !== 'default';
+    };
+    const _mapCategoryToValues = (isYAxis = false)=>{
+        const categoryToValues = {};
+        props.data.forEach((item)=>{
+            item.data.forEach((point)=>{
+                const category = isYAxis ? point.y : point.x;
+                if (!categoryToValues[category]) {
+                    categoryToValues[category] = [];
+                }
+                categoryToValues[category].push(point.value);
+            });
+        });
+        return categoryToValues;
+    };
     const updatePosition = (newX, newY)=>{
         const threshold = 1; // Set a threshold for movement
         const { x, y } = clickPosition;