@fluentui/react-charts 9.2.1 → 9.2.3

package/lib-commonjs/components/HeatMapChart/HeatMapChart.js

@@ -21,7 +21,13 @@ const _d3scale = require("d3-scale");
 const _d3format = require("d3-format");
 const _d3timeformat = require("d3-time-format");
 const _imageexportutils = require("../../utilities/image-export-utils");
-const HeatMapChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
+const HeatMapChart = /*#__PURE__*/ _react.forwardRef((props = {
+    xAxisCategoryOrder: 'default',
+    yAxisCategoryOrder: 'default',
+    data: [],
+    domainValuesForColorScale: [],
+    rangeValuesForColorScale: []
+}, forwardedRef)=>{
     const classes = (0, _useHeatMapChartStylesstyles.useHeatMapChartStyles)(props);
     const _stringXAxisDataPoints = _react.useRef([]);
     const _stringYAxisDataPoints = _react.useRef([]);
@@ -146,16 +152,16 @@ const HeatMapChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         return color === _reacttheme.tokens.colorNeutralForeground1 ? _reacttheme.tokens.colorNeutralBackground1 : _reacttheme.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;
@@ -164,9 +170,9 @@ 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 = _reacttheme.tokens.colorNeutralForeground1;
                     if ((_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) {
@@ -230,30 +236,30 @@ 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);
@@ -324,19 +330,13 @@ 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 === _index.XAxisTypes.DateAxis || _xAxisType.current === _index.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 === _index.XAxisTypes.DateAxis) {
                 return _getStringFormattedDate(xPoint, props.xAxisDateFormatString);
@@ -354,19 +354,13 @@ 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 === _index.YAxisType.DateAxis || _yAxisType.current === _index.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 === _index.YAxisType.DateAxis) {
                 return _getStringFormattedDate(yPoint, props.yAxisDateFormatString);
@@ -384,24 +378,24 @@ 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,
@@ -418,13 +412,13 @@ 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
@@ -436,21 +430,12 @@ 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 === _index.XAxisTypes.StringAxis) {
-                    return props.sortOrder === 'none' ? 0 : a.x.toLowerCase() > b.x.toLowerCase() ? 1 : -1;
-                } else if (_xAxisType.current === _index.XAxisTypes.DateAxis) {
-                    return a.x.getTime() - b.x.getTime();
-                } else if (_xAxisType.current === _index.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 === _index.XAxisTypes.DateAxis) {
                     datapoint.x = _getStringFormattedDate(datapoint.x, xAxisDateFormatString);
                 }
@@ -472,14 +457,14 @@ 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 === _index.YAxisType.DateAxis) {
                 yPoints[_getStringFormattedDate(yPoint, yAxisDateFormatString)] = yPoints[yPoint];
             } else if (_yAxisType.current === _index.YAxisType.NumericAxis) {
@@ -489,16 +474,16 @@ 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,
@@ -520,16 +505,16 @@ const HeatMapChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         return (0, _d3format.format)(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)=>{
@@ -549,6 +534,82 @@ 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 === _index.XAxisTypes.DateAxis || _xAxisType.current === _index.XAxisTypes.NumericAxis) {
+                    return +a - +b;
+                } else {
+                    return props.sortOrder === 'none' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1;
+                }
+            });
+        }
+        return (0, _index.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 === _index.YAxisType.DateAxis || _yAxisType.current === _index.YAxisType.NumericAxis) {
+                    return +a - +b;
+                } else {
+                    return props.sortOrder === 'none' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1;
+                }
+            });
+        }
+        return (0, _index.sortAxisCategories)(_mapCategoryToValues(true), props.yAxisCategoryOrder);
+    };
+    const _getOrderedXPoints = (xPoints)=>{
+        if (!_shouldOrderXAxisLabelsByCategoryOrder()) {
+            return xPoints.sort((a, b)=>{
+                if (_xAxisType.current === _index.XAxisTypes.StringAxis) {
+                    return props.sortOrder === 'none' ? 0 : a.x.toLowerCase() > b.x.toLowerCase() ? 1 : -1;
+                } else if (_xAxisType.current === _index.XAxisTypes.DateAxis) {
+                    return a.x.getTime() - b.x.getTime();
+                } else if (_xAxisType.current === _index.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 === _index.XAxisTypes.StringAxis && props.xAxisCategoryOrder !== 'default';
+    };
+    const _shouldOrderYAxisLabelsByCategoryOrder = ()=>{
+        return _yAxisType.current === _index.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;