@fluentui/react-charting 5.24.14 → 5.24.16

package/lib/components/GanttChart/GanttChart.base.js

@@ -7,39 +7,35 @@ import { CartesianChart } from '../CommonComponents/index';
 import { ChartHoverCard, ChartTypes, YAxisType, XAxisTypes, getTypeOfAxis, getNextColor, findHBCWANumericMinMaxOfY, createYAxisForHorizontalBarChartWithAxis, createStringYAxisForHorizontalBarChartWithAxis, getNextGradient, areArraysEqual, MIN_DOMAIN_MARGIN, sortAxisCategories, calculateAppropriateBarWidth, getColorFromToken, getScalePadding, getDateFormatLevel, } from '../../utilities/index';
 import { toImage } from '../../utilities/image-export-utils';
 import { formatDateToLocaleString, getMultiLevelDateTimeFormatOptions } from '@fluentui/chart-utilities';
+var DEFAULT_BAR_HEIGHT = 24;
+var MIN_BAR_HEIGHT = 1;
 export var GanttChartBase = React.forwardRef(function (_a, forwardedRef) {
     var _b, _c;
-    var _d = _a.useUTC, useUTC = _d === void 0 ? true : _d, _e = _a.yAxisCategoryOrder, yAxisCategoryOrder = _e === void 0 ? 'default' : _e, props = __rest(_a, ["useUTC", "yAxisCategoryOrder"]);
-    var _barHeight = React.useRef(0);
+    var _d = _a.useUTC, useUTC = _d === void 0 ? true : _d, _e = _a.yAxisCategoryOrder, yAxisCategoryOrder = _e === void 0 ? 'default' : _e, _f = _a.maxBarHeight, maxBarHeight = _f === void 0 ? 24 : _f, props = __rest(_a, ["useUTC", "yAxisCategoryOrder", "maxBarHeight"]);
+    var _barHeight = React.useRef(DEFAULT_BAR_HEIGHT);
     var _calloutId = React.useRef(getId('callout'));
-    var margins = React.useRef({});
-    var _bars = React.useRef([]);
-    var _xAxisType = React.useRef(XAxisTypes.DateAxis);
-    var _yAxisType = React.useRef(YAxisType.StringAxis);
+    var _margins = React.useRef({});
     var _calloutAnchorPoint = React.useRef(null);
     var _cartesianChartRef = React.useRef(null);
     var _legendsRef = React.useRef(null);
-    var _domainMargin = React.useRef(MIN_DOMAIN_MARGIN);
-    var _yAxisPadding = React.useRef(0);
     var _emptyChartId = React.useRef(getId('Gantt_empty'));
-    var _legendColorMap = React.useRef({});
-    var _gradientId = React.useRef(getId('Gantt_gradient'));
-    var prevProps = React.useRef({});
-    var _f = React.useState(''), calloutColor = _f[0], setCalloutColor = _f[1];
-    var _g = React.useState(false), isCalloutVisible = _g[0], setCalloutVisible = _g[1];
-    var _h = React.useState(''), hoveredLegend = _h[0], setHoveredLegend = _h[1];
-    var _j = React.useState(null), calloutTarget = _j[0], setCalloutTarget = _j[1];
-    var _k = React.useState(''), calloutLegend = _k[0], setCalloutLegend = _k[1];
-    var _l = React.useState(''), xCalloutValue = _l[0], setXCalloutValue = _l[1];
-    var _m = React.useState(''), yCalloutValue = _m[0], setYCalloutValue = _m[1];
-    var _o = React.useState(((_b = props.legendProps) === null || _b === void 0 ? void 0 : _b.selectedLegends) || []), selectedLegends = _o[0], setSelectedLegends = _o[1];
-    var _p = React.useState(), dataPointCalloutProps = _p[0], setDataPointCalloutProps = _p[1];
+    var _legendMap = React.useRef({});
+    var _prevProps = React.useRef({});
+    var _g = React.useState(''), calloutColor = _g[0], setCalloutColor = _g[1];
+    var _h = React.useState(false), isCalloutVisible = _h[0], setCalloutVisible = _h[1];
+    var _j = React.useState(''), hoveredLegend = _j[0], setHoveredLegend = _j[1];
+    var _k = React.useState(null), calloutTarget = _k[0], setCalloutTarget = _k[1];
+    var _l = React.useState(''), calloutLegend = _l[0], setCalloutLegend = _l[1];
+    var _m = React.useState(''), xCalloutValue = _m[0], setXCalloutValue = _m[1];
+    var _o = React.useState(''), yCalloutValue = _o[0], setYCalloutValue = _o[1];
+    var _p = React.useState(((_b = props.legendProps) === null || _b === void 0 ? void 0 : _b.selectedLegends) || []), selectedLegends = _p[0], setSelectedLegends = _p[1];
+    var _q = React.useState(), calloutDataPoint = _q[0], setCalloutDataPoint = _q[1];
     React.useEffect(function () {
         var _a, _b, _c;
-        if (!areArraysEqual((_a = prevProps.current.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends, (_b = props.legendProps) === null || _b === void 0 ? void 0 : _b.selectedLegends)) {
+        if (!areArraysEqual((_a = _prevProps.current.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends, (_b = props.legendProps) === null || _b === void 0 ? void 0 : _b.selectedLegends)) {
             setSelectedLegends(((_c = props.legendProps) === null || _c === void 0 ? void 0 : _c.selectedLegends) || []);
         }
-        prevProps.current = props;
+        _prevProps.current = props;
     }, [props]);
     React.useImperativeHandle(props.componentRef, function () {
         var _a, _b;
@@ -53,29 +49,45 @@ export var GanttChartBase = React.forwardRef(function (_a, forwardedRef) {
     }, []);
     var _points = React.useMemo(function () {
         var _a, _b;
-        _legendColorMap.current = {};
+        _legendMap.current = {};
         var colorIndex = 0;
         return ((_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a.map(function (point) {
             var _a, _b, _c, _d, _e;
             var legend = "".concat(point.legend);
-            if (!_legendColorMap.current[legend]) {
-                var startColor = point.color
+            if (!_legendMap.current[legend]) {
+                var startColor_1 = point.color
                     ? getColorFromToken(point.color, (_a = props.theme) === null || _a === void 0 ? void 0 : _a.isInverted)
                     : getNextColor(colorIndex, 0, (_b = props.theme) === null || _b === void 0 ? void 0 : _b.isInverted);
-                var endColor = startColor;
+                var endColor_1 = startColor_1;
                 if (props.enableGradient) {
                     var nextGradient = getNextGradient(colorIndex, 0, (_c = props.theme) === null || _c === void 0 ? void 0 : _c.isInverted);
-                    startColor = ((_d = point.gradient) === null || _d === void 0 ? void 0 : _d[0]) || nextGradient[0];
-                    endColor = ((_e = point.gradient) === null || _e === void 0 ? void 0 : _e[1]) || nextGradient[1];
+                    startColor_1 = ((_d = point.gradient) === null || _d === void 0 ? void 0 : _d[0]) || nextGradient[0];
+                    endColor_1 = ((_e = point.gradient) === null || _e === void 0 ? void 0 : _e[1]) || nextGradient[1];
                 }
-                _legendColorMap.current[legend] = [startColor, endColor];
+                _legendMap.current[legend] = { id: getId('legend'), startColor: startColor_1, endColor: endColor_1 };
                 colorIndex += 1;
             }
-            return __assign(__assign(__assign({}, point), { color: _legendColorMap.current[legend][0] }), (props.enableGradient ? { gradient: _legendColorMap.current[legend] } : {}));
+            var _f = _legendMap.current[legend], startColor = _f.startColor, endColor = _f.endColor;
+            return __assign(__assign(__assign({}, point), { color: startColor }), (props.enableGradient ? { gradient: [startColor, endColor] } : {}));
         })) !== null && _b !== void 0 ? _b : []);
     }, [props.data, (_c = props.theme) === null || _c === void 0 ? void 0 : _c.isInverted, props.enableGradient]);
+    var _xAxisType = React.useMemo(function () {
+        if (_points.length > 0) {
+            return getTypeOfAxis(_points[0].x.start, true);
+        }
+        return XAxisTypes.DateAxis;
+    }, [_points]);
+    var _yAxisType = React.useMemo(function () {
+        if (_points.length > 0) {
+            return getTypeOfAxis(_points[0].y, false);
+        }
+        return YAxisType.StringAxis;
+    }, [_points]);
+    var _yAxisPadding = React.useMemo(function () {
+        return getScalePadding(props.yAxisPadding, undefined, 1 / 2);
+    }, [props.yAxisPadding]);
     var _dateFormatOptions = React.useMemo(function () {
-        if (_xAxisType.current !== XAxisTypes.DateAxis) {
+        if (_xAxisType !== XAxisTypes.DateAxis) {
             return undefined;
         }
         var lowestFormatLevel = 100;
@@ -87,8 +99,29 @@ export var GanttChartBase = React.forwardRef(function (_a, forwardedRef) {
             highestFormatLevel = Math.max(highestFormatLevel, startFormatLevel, endFormatLevel);
         });
         return getMultiLevelDateTimeFormatOptions(lowestFormatLevel, highestFormatLevel);
-    }, [useUTC, _points]);
-    var _getDomainNRangeValues = React.useCallback(function (points, _margins, containerWidth, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
+    }, [useUTC, _points, _xAxisType]);
+    var _mapYValueToXValues = React.useCallback(function () {
+        var yValueToXValues = {};
+        _points.forEach(function (point) {
+            if (!yValueToXValues[point.y]) {
+                yValueToXValues[point.y] = [];
+            }
+            yValueToXValues[point.y].push(+point.x.end - +point.x.start);
+        });
+        return yValueToXValues;
+    }, [_points]);
+    var _getOrderedYAxisLabels = React.useCallback(function () {
+        var yValueToXValues = _mapYValueToXValues();
+        if (_yAxisType !== YAxisType.StringAxis) {
+            return Object.keys(yValueToXValues).sort(function (a, b) { return +a - +b; });
+        }
+        if (yAxisCategoryOrder === 'default') {
+            return Object.keys(yValueToXValues).reverse();
+        }
+        return sortAxisCategories(yValueToXValues, yAxisCategoryOrder);
+    }, [_mapYValueToXValues, _yAxisType, yAxisCategoryOrder]);
+    var _yAxisLabels = React.useMemo(function () { return _getOrderedYAxisLabels(); }, [_getOrderedYAxisLabels]);
+    var _getDomainNRangeValues = React.useCallback(function (points, margins, containerWidth, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
         var xValues = [];
         points.forEach(function (point) {
             xValues.push(point.x.start, point.x.end);
@@ -98,36 +131,17 @@ export var GanttChartBase = React.forwardRef(function (_a, forwardedRef) {
         return {
             dStartValue: isRTL ? xMax : xMin,
             dEndValue: isRTL ? xMin : xMax,
-            rStartValue: _margins.left + (isRTL ? 0 : shiftX),
-            rEndValue: containerWidth - _margins.right - (isRTL ? shiftX : 0),
+            rStartValue: margins.left + (isRTL ? 0 : shiftX),
+            rEndValue: containerWidth - margins.right - (isRTL ? shiftX : 0),
         };
     }, []);
-    var _adjustProps = function () {
-        _barHeight.current = Math.max(props.barHeight || 24, 1);
-        if (props.data && props.data.length > 0) {
-            _xAxisType.current = getTypeOfAxis(props.data[0].x.start, true);
-            _yAxisType.current = getTypeOfAxis(props.data[0].y, false);
-        }
-        _yAxisPadding.current = getScalePadding(props.yAxisPadding, undefined, 1 / 2);
-    };
-    var _getMargins = React.useCallback(function (_margins) {
-        margins.current = _margins;
+    var _getMargins = React.useCallback(function (margins) {
+        _margins.current = margins;
     }, []);
-    var _renderContentForOnlyBars = function (point) {
-        return (React.createElement(ChartHoverCard, { XValue: point.yAxisCalloutData || point.y.toString(), Legend: point.legend, YValue: point.xAxisCalloutData || _getFormattedXValue(point), color: point.color, culture: props.culture }));
-    };
-    var _renderCallout = function (point) {
-        return point ? _renderContentForOnlyBars(point) : null;
-    };
-    var _getCustomizedCallout = function () {
-        return props.onRenderCalloutPerDataPoint
-            ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps, _renderCallout)
-            : null;
-    };
     var _getFormattedXValue = React.useCallback(function (point) {
         var formattedStartX;
         var formattedEndX;
-        if (_xAxisType.current === XAxisTypes.DateAxis) {
+        if (_xAxisType === XAxisTypes.DateAxis) {
             formattedStartX = formatDateToLocaleString(point.x.start, props.culture, useUTC, false, _dateFormatOptions);
             formattedEndX = formatDateToLocaleString(point.x.end, props.culture, useUTC, false, _dateFormatOptions);
         }
@@ -136,12 +150,22 @@ export var GanttChartBase = React.forwardRef(function (_a, forwardedRef) {
             formattedEndX = point.x.end.toString();
         }
         return "".concat(formattedStartX, " - ").concat(formattedEndX);
-    }, [props.culture, useUTC, _dateFormatOptions]);
+    }, [props.culture, useUTC, _dateFormatOptions, _xAxisType]);
+    var _getCustomizedCallout = React.useCallback(function () {
+        var defaultRender = function (point) {
+            return point ? (React.createElement(ChartHoverCard, { XValue: point.yAxisCalloutData || point.y.toString(), Legend: point.legend, YValue: point.xAxisCalloutData || _getFormattedXValue(point), color: point.color, culture: props.culture })) : null;
+        };
+        return props.onRenderCalloutPerDataPoint
+            ? props.onRenderCalloutPerDataPoint(calloutDataPoint, defaultRender)
+            : null;
+        //eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [_getFormattedXValue, calloutDataPoint, props.culture, props.onRenderCalloutPerDataPoint]);
     var _getAriaLabel = React.useCallback(function (point) {
         var _a;
         var xValue = point.xAxisCalloutData || _getFormattedXValue(point);
         var yValue = point.yAxisCalloutData || point.y;
-        return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || "".concat(yValue, ". ") + "".concat(xValue, ".");
+        return (((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) ||
+            "".concat(yValue, ". ") + (point.legend ? "".concat(point.legend, ", ") : '') + "".concat(xValue, "."));
     }, [_getFormattedXValue]);
     var _getHighlightedLegend = React.useCallback(function () {
         return selectedLegends.length > 0 ? selectedLegends : hoveredLegend ? [hoveredLegend] : [];
@@ -172,7 +196,7 @@ export var GanttChartBase = React.forwardRef(function (_a, forwardedRef) {
         setCalloutColor(point.color);
         setXCalloutValue(point.yAxisCalloutData || point.y.toString());
         setYCalloutValue(point.xAxisCalloutData || _getFormattedXValue(point));
-        setDataPointCalloutProps(point);
+        setCalloutDataPoint(point);
     }, [_getFormattedXValue, _legendHighlighted, _noLegendHighlighted]);
     var _onBarFocus = React.useCallback(function (point, focusEvent) {
         _showCallout(focusEvent.currentTarget, point);
@@ -180,46 +204,9 @@ export var GanttChartBase = React.forwardRef(function (_a, forwardedRef) {
     var _onBarHover = React.useCallback(function (point, mouseEvent) {
         _showCallout(mouseEvent.currentTarget, point);
     }, [_showCallout]);
-    var _createBars = React.useCallback(function (xScale, yScale) {
-        var bars = _points.map(function (point, index) {
-            var shouldHighlight = _noLegendHighlighted() || _legendHighlighted(point.legend);
-            var startColor = point.color;
-            var endColor = startColor;
-            if (props.enableGradient) {
-                startColor = point.gradient[0];
-                endColor = point.gradient[1];
-            }
-            var gradientId = "".concat(_gradientId.current, "_").concat(index);
-            var startX = xScale(point.x.start);
-            var endX = xScale(point.x.end);
-            var y = (_yAxisType.current === YAxisType.StringAxis
-                ? yScale(point.y) + yScale.bandwidth() / 2
-                : yScale(point.y)) -
-                _barHeight.current / 2;
-            return (React.createElement(React.Fragment, { key: index },
-                props.enableGradient && (React.createElement("defs", null,
-                    React.createElement("linearGradient", { id: gradientId },
-                        React.createElement("stop", { offset: "0", stopColor: startColor }),
-                        React.createElement("stop", { offset: "100%", stopColor: endColor })))),
-                React.createElement("rect", { x: Math.min(startX, endX), y: y, width: Math.abs(endX - startX), height: _barHeight.current, rx: props.roundCorners ? 3 : 0, fill: props.enableGradient ? "url(#".concat(gradientId, ")") : startColor, opacity: shouldHighlight ? 1 : 0.1, onClick: point.onClick, onMouseOver: function (event) { return _onBarHover(point, event); }, onMouseLeave: _onBarLeave, onFocus: function (event) { return _onBarFocus(point, event); }, onBlur: _onBarLeave, "data-is-focusable": shouldHighlight, role: "img", "aria-label": _getAriaLabel(point) })));
-        });
-        return bars;
-    }, [
-        _getAriaLabel,
-        _legendHighlighted,
-        _noLegendHighlighted,
-        _onBarFocus,
-        _onBarHover,
-        props.enableGradient,
-        props.roundCorners,
-        _points,
-    ]);
-    var _getGraphData = React.useCallback(function (xScale, yScale, containerHeight, containerWidth, xAxisElement, yAxisElement) {
-        return (_bars.current = _createBars(xScale, yScale));
-    }, [_createBars]);
-    var _onBarLeave = function () {
+    var _onBarLeave = React.useCallback(function () {
         // do nothing
-    };
+    }, []);
     var _handleChartMouseLeave = React.useCallback(function () {
         _calloutAnchorPoint.current = null;
         setCalloutTarget(null);
@@ -228,23 +215,111 @@ export var GanttChartBase = React.forwardRef(function (_a, forwardedRef) {
         setCalloutColor('');
         setXCalloutValue('');
         setYCalloutValue('');
-        setDataPointCalloutProps(undefined);
+        setCalloutDataPoint(undefined);
     }, []);
-    var _closeCallout = function () {
+    var _closeCallout = React.useCallback(function () {
         setCalloutVisible(false);
-    };
-    var _onLegendHover = function (legend) {
+    }, []);
+    var _getBarHeight = React.useCallback(function (adjustedValue) {
+        var barHeight;
+        if (typeof props.barHeight === 'number') {
+            barHeight = props.barHeight;
+        }
+        else {
+            barHeight = adjustedValue;
+        }
+        if (typeof maxBarHeight === 'number') {
+            barHeight = Math.min(barHeight, maxBarHeight);
+        }
+        barHeight = Math.max(barHeight, MIN_BAR_HEIGHT);
+        return barHeight;
+    }, [maxBarHeight, props.barHeight]);
+    var _getOrderedDataPoints = React.useCallback(function () {
+        var result = [];
+        var yValueToPoints = {};
+        _points.forEach(function (point) {
+            if (!yValueToPoints[point.y]) {
+                yValueToPoints[point.y] = [];
+            }
+            yValueToPoints[point.y].push(point);
+        });
+        for (var i = _yAxisLabels.length - 1; i >= 0; i--) {
+            var yValue = _yAxisLabels[i];
+            if (yValueToPoints[yValue]) {
+                result.push.apply(result, yValueToPoints[yValue].sort(function (a, b) { return +a.x.start - +b.x.start; }));
+            }
+        }
+        return result;
+    }, [_points, _yAxisLabels]);
+    var _createBars = React.useCallback(function (_a) {
+        var xScale = _a.xScale, yScale = _a.yScalePrimary;
+        var getGradientId = function (legend) {
+            var legendId = _legendMap.current["".concat(legend)].id;
+            return "".concat(legendId, "_gradient");
+        };
+        var gradientDefs = [];
+        if (props.enableGradient) {
+            Object.keys(_legendMap.current).forEach(function (legend, index) {
+                var _a = _legendMap.current[legend], startColor = _a.startColor, endColor = _a.endColor;
+                gradientDefs.push(React.createElement("linearGradient", { key: index, id: getGradientId(legend) },
+                    React.createElement("stop", { offset: "0", stopColor: startColor }),
+                    React.createElement("stop", { offset: "100%", stopColor: endColor })));
+            });
+        }
+        var scaleBandwidth = 0;
+        if (_yAxisType === YAxisType.StringAxis) {
+            scaleBandwidth = yScale.bandwidth();
+            _barHeight.current = _getBarHeight(scaleBandwidth);
+        }
+        var points = _getOrderedDataPoints();
+        var bars = points.map(function (point, index) {
+            var rectStartX = xScale(point.x.start);
+            var rectEndX = xScale(point.x.end);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var rectY = yScale(point.y) + (scaleBandwidth - _barHeight.current) / 2;
+            var shouldHighlight = _noLegendHighlighted() || _legendHighlighted(point.legend);
+            return (React.createElement("rect", { key: index, x: Math.min(rectStartX, rectEndX), y: rectY, width: Math.abs(rectEndX - rectStartX), height: _barHeight.current, rx: props.roundCorners ? 3 : 0, fill: props.enableGradient ? "url(#".concat(getGradientId(point.legend), ")") : point.color, opacity: shouldHighlight ? 1 : 0.1, onClick: point.onClick, onMouseOver: function (event) { return _onBarHover(point, event); }, onMouseLeave: _onBarLeave, onFocus: function (event) { return _onBarFocus(point, event); }, onBlur: _onBarLeave, "data-is-focusable": shouldHighlight, role: "img", "aria-label": _getAriaLabel(point) }));
+        });
+        return (React.createElement("g", null,
+            gradientDefs.length > 0 ? React.createElement("defs", null, gradientDefs) : null,
+            bars));
+    }, [
+        _getAriaLabel,
+        _getBarHeight,
+        _getOrderedDataPoints,
+        _legendHighlighted,
+        _noLegendHighlighted,
+        _onBarFocus,
+        _onBarHover,
+        _onBarLeave,
+        _yAxisType,
+        props.enableGradient,
+        props.roundCorners,
+    ]);
+    var _onLegendHover = React.useCallback(function (legend) {
         setHoveredLegend(legend);
-    };
-    var _onLegendLeave = function () {
+    }, []);
+    var _onLegendLeave = React.useCallback(function () {
         setHoveredLegend('');
-    };
-    var _getLegendData = function () {
+    }, []);
+    var _onLegendSelectionChange = React.useCallback(function (_selectedLegends, event, currentLegend) {
+        var _a, _b;
+        if ((_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.canSelectMultipleLegends) {
+            setSelectedLegends(_selectedLegends);
+        }
+        else {
+            setSelectedLegends(_selectedLegends.slice(-1));
+        }
+        if ((_b = props.legendProps) === null || _b === void 0 ? void 0 : _b.onChange) {
+            props.legendProps.onChange(_selectedLegends, event, currentLegend);
+        }
+    }, [props.legendProps]);
+    var _getLegendData = React.useCallback(function () {
         var actions = [];
-        Object.keys(_legendColorMap.current).forEach(function (legendTitle) {
+        Object.keys(_legendMap.current).forEach(function (legendTitle) {
             var legend = {
                 title: legendTitle,
-                color: _legendColorMap.current[legendTitle][0],
+                color: _legendMap.current[legendTitle].startColor,
                 hoverAction: function () {
                     _handleChartMouseLeave();
                     _onLegendHover(legendTitle);
@@ -257,69 +332,46 @@ export var GanttChartBase = React.forwardRef(function (_a, forwardedRef) {
         });
         var legends = (React.createElement(Legends, __assign({ legends: actions, enabledWrapLines: props.enabledLegendsWrapLines, overflowProps: props.legendsOverflowProps, focusZonePropsInHoverCard: props.focusZonePropsForLegendsInHoverCard, overflowText: props.legendsOverflowText, onChange: _onLegendSelectionChange, ref: _legendsRef }, props.legendProps)));
         return legends;
-    };
-    var _onLegendSelectionChange = function (_selectedLegends, event, currentLegend) {
-        var _a, _b;
-        if ((_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.canSelectMultipleLegends) {
-            setSelectedLegends(_selectedLegends);
-        }
-        else {
-            setSelectedLegends(_selectedLegends.slice(-1));
-        }
-        if ((_b = props.legendProps) === null || _b === void 0 ? void 0 : _b.onChange) {
-            props.legendProps.onChange(_selectedLegends, event, currentLegend);
-        }
-    };
-    var _getChartTitle = function () {
-        var chartTitle = props.chartTitle;
-        return (chartTitle ? "".concat(chartTitle, ". ") : '') + "Gantt chart with ".concat(_points.length, " bars. ");
-    };
-    var _isChartEmpty = function () {
-        return !(props.data && props.data.length > 0);
-    };
+    }, [
+        _handleChartMouseLeave,
+        _onLegendHover,
+        _onLegendLeave,
+        _onLegendSelectionChange,
+        props.enabledLegendsWrapLines,
+        props.focusZonePropsForLegendsInHoverCard,
+        props.legendProps,
+        props.legendsOverflowProps,
+        props.legendsOverflowText,
+    ]);
+    var _getChartTitle = React.useCallback(function () {
+        return (props.chartTitle ? "".concat(props.chartTitle, ". ") : '') + "Gantt chart with ".concat(_points.length, " data points. ");
+    }, [_points.length, props.chartTitle]);
+    var _isChartEmpty = React.useCallback(function () {
+        return _points.length === 0;
+    }, [_points.length]);
     var _getYDomainMargins = React.useCallback(function (containerHeight) {
-        _domainMargin.current = MIN_DOMAIN_MARGIN;
+        var domainMargin = MIN_DOMAIN_MARGIN;
         var ySet = new Set();
         _points.forEach(function (point) {
             ySet.add(point.y);
         });
         var uniqueY = Array.from(ySet);
         /** Total height available to render the bars */
-        var totalHeight = containerHeight - (margins.current.top + MIN_DOMAIN_MARGIN) - (margins.current.bottom + MIN_DOMAIN_MARGIN);
-        if (_yAxisType.current !== YAxisType.StringAxis) {
-            _barHeight.current = Math.max(props.barHeight ||
-                calculateAppropriateBarWidth(uniqueY, totalHeight, _yAxisPadding.current), 1);
-            _domainMargin.current += _barHeight.current / 2;
+        var totalHeight = containerHeight - (_margins.current.top + MIN_DOMAIN_MARGIN) - (_margins.current.bottom + MIN_DOMAIN_MARGIN);
+        if (_yAxisType !== YAxisType.StringAxis) {
+            _barHeight.current = _getBarHeight(calculateAppropriateBarWidth(uniqueY, totalHeight, _yAxisPadding));
+            domainMargin += _barHeight.current / 2;
         }
-        return __assign(__assign({}, margins.current), { top: margins.current.top + _domainMargin.current, bottom: margins.current.bottom + _domainMargin.current });
-    }, [props.barHeight, _points]);
-    var _getOrderedYAxisLabels = function () {
-        return sortAxisCategories(_mapCategoryToValues(), yAxisCategoryOrder);
-    };
-    var _mapCategoryToValues = function () {
-        var categoryToValues = {};
-        _points.forEach(function (point) {
-            if (!categoryToValues[point.y]) {
-                categoryToValues[point.y] = [];
-            }
-            // FIXME
-            // categoryToValues[point.y].push(point.x.end - point.x.start);
-        });
-        return categoryToValues;
-    };
-    var _renderBars = React.useCallback(function () {
-        return React.createElement("g", null, _bars.current);
-    }, []);
+        return __assign(__assign({}, _margins.current), { top: _margins.current.top + domainMargin, bottom: _margins.current.bottom + domainMargin });
+    }, [_getBarHeight, _points, _yAxisPadding, _yAxisType]);
     if (!_isChartEmpty()) {
-        _adjustProps();
-        var yAxisLabels = _getOrderedYAxisLabels();
-        var legendBars = _getLegendData();
+        _barHeight.current = _getBarHeight(DEFAULT_BAR_HEIGHT);
         var calloutProps = __assign({ isCalloutVisible: isCalloutVisible, directionalHint: DirectionalHint.topAutoEdge, id: "toolTip".concat(_calloutId.current), target: calloutTarget, isBeakVisible: false, gapSpace: 15, color: calloutColor, legend: calloutLegend, XValue: xCalloutValue, YValue: yCalloutValue, onDismiss: _closeCallout, preventDismissOnLostFocus: true }, props.calloutProps);
         var tickParams = {
             tickValues: props.tickValues,
             tickFormat: props.tickFormat,
         };
-        return (React.createElement(CartesianChart, __assign({}, props, { yAxisPadding: _yAxisPadding.current, chartTitle: _getChartTitle(), points: _points, chartType: ChartTypes.GanttChart, xAxisType: _xAxisType.current, yAxisType: _yAxisType.current, stringDatasetForYAxisDomain: yAxisLabels, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, createYAxis: createYAxisForHorizontalBarChartWithAxis, getDomainNRangeValues: _getDomainNRangeValues, createStringYAxis: createStringYAxisForHorizontalBarChartWithAxis, getMinMaxOfYAxis: findHBCWANumericMinMaxOfY, focusZoneDirection: FocusZoneDirection.vertical, customizedCallout: _getCustomizedCallout(), getmargins: _getMargins, getYDomainMargins: _getYDomainMargins, getGraphData: _getGraphData, onChartMouseLeave: _handleChartMouseLeave, ref: _cartesianChartRef, useUTC: useUTC, children: _renderBars })));
+        return (React.createElement(CartesianChart, __assign({}, props, { yAxisPadding: _yAxisPadding, chartTitle: _getChartTitle(), points: _points, chartType: ChartTypes.GanttChart, xAxisType: _xAxisType, yAxisType: _yAxisType, stringDatasetForYAxisDomain: _yAxisLabels, calloutProps: calloutProps, tickParams: tickParams, legendBars: _getLegendData(), createYAxis: createYAxisForHorizontalBarChartWithAxis, getDomainNRangeValues: _getDomainNRangeValues, createStringYAxis: createStringYAxisForHorizontalBarChartWithAxis, getMinMaxOfYAxis: findHBCWANumericMinMaxOfY, focusZoneDirection: FocusZoneDirection.bidirectional, customizedCallout: _getCustomizedCallout(), getmargins: _getMargins, getYDomainMargins: _getYDomainMargins, onChartMouseLeave: _handleChartMouseLeave, ref: _cartesianChartRef, useUTC: useUTC, children: _createBars })));
     }
     else {
         return (React.createElement("div", { id: _emptyChartId.current, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));