@fluentui/react-charts 0.0.0-nightly-20250825-0406.1 → 0.0.0-nightly-20250826-2140.1

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, sortAxisCategories } from '../../utilities/index';
+import { ChartTypes, getAccessibleDataObject, getColorContrast, getTypeOfAxis, resolveCSSVariables, XAxisTypes, YAxisType, createNumericYAxis, domainRangeOfXStringAxis, createStringYAxis, useRtl } from '../../utilities/index';
 import { formatToLocaleString } from '@fluentui/chart-utilities';
 import { CartesianChart } from '../CommonComponents/index';
 import { useId } from '@fluentui/react-utilities';
@@ -10,13 +10,7 @@ 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 = {
-    xAxisCategoryOrder: 'default',
-    yAxisCategoryOrder: 'default',
-    data: [],
-    domainValuesForColorScale: [],
-    rangeValuesForColorScale: []
-}, forwardedRef)=>{
+export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     const classes = useHeatMapChartStyles(props);
     const _stringXAxisDataPoints = React.useRef([]);
     const _stringYAxisDataPoints = React.useRef([]);
@@ -141,16 +135,16 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props = {
         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;
@@ -159,9 +153,9 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props = {
                 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) {
@@ -225,30 +219,30 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props = {
         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);
@@ -319,13 +313,19 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props = {
         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 = _getOrderedXAxisLabels(points);
+        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;
+            }
+        });
         xAxisPoints = unFormattedXAxisDataPoints.map((xPoint)=>{
             if (_xAxisType.current === XAxisTypes.DateAxis) {
                 return _getStringFormattedDate(xPoint, props.xAxisDateFormatString);
@@ -343,13 +343,19 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props = {
         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 = _getOrderedYAxisLabels(points);
+        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;
+            }
+        });
         yAxisPoints = unFormattedYAxisDataPoints.map((yPoint)=>{
             if (_yAxisType.current === YAxisType.DateAxis) {
                 return _getStringFormattedDate(yPoint, props.yAxisDateFormatString);
@@ -367,24 +373,24 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props = {
         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,
@@ -401,13 +407,13 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props = {
             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
@@ -419,12 +425,21 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props = {
             }
         });
         /**
-         * 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)=>{
+       * 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)=>{
                 if (_xAxisType.current === XAxisTypes.DateAxis) {
                     datapoint.x = _getStringFormattedDate(datapoint.x, xAxisDateFormatString);
                 }
@@ -446,14 +461,14 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props = {
             });
         });
         /**
-         * 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  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 (_yAxisType.current === YAxisType.DateAxis) {
                 yPoints[_getStringFormattedDate(yPoint, yAxisDateFormatString)] = yPoints[yPoint];
             } else if (_yAxisType.current === YAxisType.NumericAxis) {
@@ -463,16 +478,16 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props = {
             }
         });
         /**
-         * 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,
@@ -494,16 +509,16 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props = {
         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)=>{
@@ -523,82 +538,6 @@ export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props = {
         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;