@fluentui/react-charts 0.0.0-nightly-20250728-0406.1 → 0.0.0-nightly-20250730-0406.1

package/lib/components/FunnelChart/useFunnelChartStyles.styles.js

@@ -55,5 +55,4 @@ export const useFunnelChartStyles = props => {
     text: mergeClasses(funnelClassNames.text, baseStyles.text, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.text),
     calloutContentRoot: mergeClasses(baseStyles.calloutContentRoot, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.calloutContentRoot)
   };
-};
-//# sourceMappingURL=useFunnelChartStyles.styles.js.map
+};

package/lib/components/FunnelChart/useFunnelChartStyles.styles.raw.js

@@ -0,0 +1,51 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+/**
+ * @internal
+ */ export const funnelClassNames = {
+    root: 'fui-funnel__root',
+    chart: 'fui-funnel__chart',
+    text: 'fui-funnel__text',
+    calloutContentRoot: 'fui-funnel__callout-content-root'
+};
+/**
+ * Base Styles
+ */ const useStyles = makeStyles({
+    root: {
+        alignItems: 'center',
+        width: '100%',
+        height: '100%',
+        fontFamily: tokens.fontFamilyBase,
+        fontSize: tokens.fontSizeBase300,
+        fontWeight: tokens.fontWeightRegular,
+        position: 'relative'
+    },
+    chart: {
+        display: 'block',
+        width: '100%',
+        height: '100%'
+    },
+    text: {
+        pointerEvents: 'none',
+        fontWeight: tokens.fontWeightSemibold,
+        fill: tokens.colorNeutralForeground1,
+        fontFamily: tokens.fontFamilyBase,
+        fontSize: tokens.fontSizeBase300
+    },
+    calloutContentRoot: {
+        maxWidth: '238px'
+    }
+});
+/**
+ * Apply styling to the FunnelChart component
+ */ export const useFunnelChartStyles = (props)=>{
+    var _props_styles, _props_styles1, _props_styles2, _props_styles3;
+    const { className } = props;
+    const baseStyles = useStyles();
+    return {
+        root: mergeClasses(funnelClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
+        chart: mergeClasses(funnelClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),
+        text: mergeClasses(funnelClassNames.text, baseStyles.text, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.text),
+        calloutContentRoot: mergeClasses(baseStyles.calloutContentRoot, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.calloutContentRoot)
+    };
+};

package/lib/components/FunnelChart/useFunnelChartStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FunnelChart/useFunnelChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { FunnelChartProps, FunnelChartStyles } from './index';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @internal\n */\nexport const funnelClassNames: SlotClassNames<FunnelChartStyles> = {\n  root: 'fui-funnel__root',\n  chart: 'fui-funnel__chart',\n  text: 'fui-funnel__text',\n  calloutContentRoot: 'fui-funnel__callout-content-root',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    width: '100%',\n    height: '100%',\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightRegular,\n    position: 'relative',\n  },\n  chart: {\n    display: 'block',\n    width: '100%',\n    height: '100%',\n  },\n  text: {\n    pointerEvents: 'none',\n    fontWeight: tokens.fontWeightSemibold,\n    fill: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n  },\n  calloutContentRoot: {\n    maxWidth: '238px',\n  },\n});\n\n/**\n * Apply styling to the FunnelChart component\n */\nexport const useFunnelChartStyles = (props: FunnelChartProps): FunnelChartStyles => {\n  const { className } = props;\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(funnelClassNames.root, baseStyles.root, className, props.styles?.root),\n    chart: mergeClasses(funnelClassNames.chart, baseStyles.chart, props.styles?.chart),\n    text: mergeClasses(funnelClassNames.text, baseStyles.text, props.styles?.text),\n    calloutContentRoot: mergeClasses(baseStyles.calloutContentRoot, props.styles?.calloutContentRoot),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","funnelClassNames","root","chart","text","calloutContentRoot","useStyles","alignItems","width","height","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","fontWeight","fontWeightRegular","position","display","pointerEvents","fontWeightSemibold","fill","colorNeutralForeground1","maxWidth","useFunnelChartStyles","props","className","baseStyles","styles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C;;CAEC,GACD,OAAO,MAAMC,mBAAsD;IACjEC,MAAM;IACNC,OAAO;IACPC,MAAM;IACNC,oBAAoB;AACtB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYR,WAAW;IAC3BI,MAAM;QACJK,YAAY;QACZC,OAAO;QACPC,QAAQ;QACRC,YAAYV,OAAOW,cAAc;QACjCC,UAAUZ,OAAOa,eAAe;QAChCC,YAAYd,OAAOe,iBAAiB;QACpCC,UAAU;IACZ;IACAb,OAAO;QACLc,SAAS;QACTT,OAAO;QACPC,QAAQ;IACV;IACAL,MAAM;QACJc,eAAe;QACfJ,YAAYd,OAAOmB,kBAAkB;QACrCC,MAAMpB,OAAOqB,uBAAuB;QACpCX,YAAYV,OAAOW,cAAc;QACjCC,UAAUZ,OAAOa,eAAe;IAClC;IACAR,oBAAoB;QAClBiB,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC;QAKqCA,eACRA,gBACHA,gBACKA;IAPlE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,aAAapB;IAEnB,OAAO;QACLJ,MAAMH,aAAaE,iBAAiBC,IAAI,EAAEwB,WAAWxB,IAAI,EAAEuB,YAAWD,gBAAAA,MAAMG,MAAM,cAAZH,oCAAAA,cAActB,IAAI;QACxFC,OAAOJ,aAAaE,iBAAiBE,KAAK,EAAEuB,WAAWvB,KAAK,GAAEqB,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcrB,KAAK;QACjFC,MAAML,aAAaE,iBAAiBG,IAAI,EAAEsB,WAAWtB,IAAI,GAAEoB,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcpB,IAAI;QAC7EC,oBAAoBN,aAAa2B,WAAWrB,kBAAkB,GAAEmB,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcnB,kBAAkB;IAClG;AACF,EAAE"}

package/lib/components/GanttChart/GanttChart.js

@@ -0,0 +1,530 @@
+import * as React from 'react';
+import { max as d3Max, min as d3Min } from 'd3-array';
+import { useId } from '@fluentui/react-utilities';
+import { Legends } from '../Legends/index';
+import { CartesianChart } from '../CommonComponents/index';
+import { ChartPopover } from '../CommonComponents/ChartPopover';
+import { ChartTypes, YAxisType, XAxisTypes, getTypeOfAxis, getNextColor, findHBCWANumericMinMaxOfY, createYAxisForHorizontalBarChartWithAxis, createStringYAxisForHorizontalBarChartWithAxis, areArraysEqual, MIN_DOMAIN_MARGIN, sortAxisCategories, calculateAppropriateBarWidth, getColorFromToken, getScalePadding, getDateFormatLevel } from '../../utilities/index';
+import { formatDateToLocaleString, getMultiLevelDateTimeFormatOptions } from '@fluentui/chart-utilities';
+const DEFAULT_BAR_HEIGHT = 24;
+const MIN_BAR_HEIGHT = 1;
+export const GanttChart = /*#__PURE__*/ React.forwardRef(({ useUTC = true, yAxisCategoryOrder = 'default', maxBarHeight = 24, ...props }, forwardedRef)=>{
+    var _props_legendProps;
+    const _barHeight = React.useRef(DEFAULT_BAR_HEIGHT);
+    const _margins = React.useRef({});
+    const _calloutAnchorPoint = React.useRef(null);
+    const _emptyChartId = useId('Gantt_empty');
+    const _legendId = useId('gantt_legend');
+    const _legendMap = React.useRef({});
+    const _prevProps = React.useRef({});
+    const [calloutColor, setCalloutColor] = React.useState('');
+    const [hoveredLegend, setHoveredLegend] = React.useState('');
+    const [calloutLegend, setCalloutLegend] = React.useState('');
+    const [xCalloutValue, setXCalloutValue] = React.useState('');
+    const [yCalloutValue, setYCalloutValue] = React.useState('');
+    const [selectedLegends, setSelectedLegends] = React.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
+    const [calloutDataPoint, setCalloutDataPoint] = React.useState();
+    const [clickPosition, setClickPosition] = React.useState({
+        x: 0,
+        y: 0
+    });
+    const [isPopoverOpen, setPopoverOpen] = React.useState(false);
+    React.useEffect(()=>{
+        var _prevProps_current_legendProps, _props_legendProps;
+        if (!areArraysEqual((_prevProps_current_legendProps = _prevProps.current.legendProps) === null || _prevProps_current_legendProps === void 0 ? void 0 : _prevProps_current_legendProps.selectedLegends, (_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends)) {
+            var _props_legendProps1;
+            setSelectedLegends(((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.selectedLegends) || []);
+        }
+        _prevProps.current = props;
+    }, [
+        props
+    ]);
+    const _points = React.useMemo(()=>{
+        var _props_data;
+        _legendMap.current = {};
+        let colorIndex = 0;
+        var _props_data_map;
+        return (_props_data_map = (_props_data = props.data) === null || _props_data === void 0 ? void 0 : _props_data.map((point)=>{
+            const legend = `${point.legend}`;
+            if (!_legendMap.current[legend]) {
+                let startColor = point.color ? getColorFromToken(point.color) : getNextColor(colorIndex, 0);
+                let endColor = startColor;
+                if (props.enableGradient) {
+                    var _point_gradient, _point_gradient1;
+                    startColor = (_point_gradient = point.gradient) === null || _point_gradient === void 0 ? void 0 : _point_gradient[0];
+                    endColor = (_point_gradient1 = point.gradient) === null || _point_gradient1 === void 0 ? void 0 : _point_gradient1[1];
+                }
+                _legendMap.current[legend] = {
+                    id: `${_legendId}_${colorIndex}`,
+                    startColor,
+                    endColor
+                };
+                colorIndex += 1;
+            }
+            const { startColor, endColor } = _legendMap.current[legend];
+            return {
+                ...point,
+                color: startColor,
+                ...props.enableGradient ? {
+                    gradient: [
+                        startColor,
+                        endColor
+                    ]
+                } : {}
+            };
+        })) !== null && _props_data_map !== void 0 ? _props_data_map : [];
+    }, [
+        props.data,
+        props.enableGradient
+    ]);
+    const _xAxisType = React.useMemo(()=>{
+        if (_points.length > 0) {
+            return getTypeOfAxis(_points[0].x.start, true);
+        }
+        return XAxisTypes.DateAxis;
+    }, [
+        _points
+    ]);
+    const _yAxisType = React.useMemo(()=>{
+        if (_points.length > 0) {
+            return getTypeOfAxis(_points[0].y, false);
+        }
+        return YAxisType.StringAxis;
+    }, [
+        _points
+    ]);
+    const _yAxisPadding = React.useMemo(()=>{
+        return getScalePadding(props.yAxisPadding, undefined, 1 / 2);
+    }, [
+        props.yAxisPadding
+    ]);
+    const _dateFormatOptions = React.useMemo(()=>{
+        if (_xAxisType !== XAxisTypes.DateAxis) {
+            return undefined;
+        }
+        let lowestFormatLevel = 100;
+        let highestFormatLevel = -1;
+        _points.forEach((p)=>{
+            const startFormatLevel = getDateFormatLevel(p.x.start, useUTC);
+            const endFormatLevel = getDateFormatLevel(p.x.end, useUTC);
+            lowestFormatLevel = Math.min(lowestFormatLevel, startFormatLevel, endFormatLevel);
+            highestFormatLevel = Math.max(highestFormatLevel, startFormatLevel, endFormatLevel);
+        });
+        return getMultiLevelDateTimeFormatOptions(lowestFormatLevel, highestFormatLevel);
+    }, [
+        useUTC,
+        _points,
+        _xAxisType
+    ]);
+    const _mapYValueToXValues = React.useCallback(()=>{
+        const yValueToXValues = {};
+        _points.forEach((point)=>{
+            if (!yValueToXValues[point.y]) {
+                yValueToXValues[point.y] = [];
+            }
+            yValueToXValues[point.y].push(+point.x.end - +point.x.start);
+        });
+        return yValueToXValues;
+    }, [
+        _points
+    ]);
+    const _getOrderedYAxisLabels = React.useCallback(()=>{
+        const yValueToXValues = _mapYValueToXValues();
+        if (_yAxisType !== YAxisType.StringAxis) {
+            return Object.keys(yValueToXValues).sort((a, b)=>+a - +b);
+        }
+        if (yAxisCategoryOrder === 'default') {
+            return Object.keys(yValueToXValues).reverse();
+        }
+        return sortAxisCategories(yValueToXValues, yAxisCategoryOrder);
+    }, [
+        _mapYValueToXValues,
+        _yAxisType,
+        yAxisCategoryOrder
+    ]);
+    const _yAxisLabels = React.useMemo(()=>_getOrderedYAxisLabels(), [
+        _getOrderedYAxisLabels
+    ]);
+    const _getDomainNRangeValues = React.useCallback((points, margins, containerWidth, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX)=>{
+        const xValues = [];
+        points.forEach((point)=>{
+            xValues.push(point.x.start, point.x.end);
+        });
+        const xMin = d3Min(xValues) || 0;
+        const xMax = d3Max(xValues) || 0;
+        return {
+            dStartValue: isRTL ? xMax : xMin,
+            dEndValue: isRTL ? xMin : xMax,
+            rStartValue: margins.left + (isRTL ? 0 : shiftX),
+            rEndValue: containerWidth - margins.right - (isRTL ? shiftX : 0)
+        };
+    }, []);
+    const _getMargins = React.useCallback((margins)=>{
+        _margins.current = margins;
+    }, []);
+    const _getFormattedXValue = React.useCallback((point)=>{
+        let formattedStartX;
+        let formattedEndX;
+        if (_xAxisType === XAxisTypes.DateAxis) {
+            formattedStartX = formatDateToLocaleString(point.x.start, props.culture, useUTC, false, _dateFormatOptions);
+            formattedEndX = formatDateToLocaleString(point.x.end, props.culture, useUTC, false, _dateFormatOptions);
+        } else {
+            formattedStartX = point.x.start.toString();
+            formattedEndX = point.x.end.toString();
+        }
+        return `${formattedStartX} - ${formattedEndX}`;
+    }, [
+        props.culture,
+        useUTC,
+        _dateFormatOptions,
+        _xAxisType
+    ]);
+    const _getCustomizedCallout = React.useCallback(()=>{
+        const defaultRender = (point)=>{
+            return point ? /*#__PURE__*/ React.createElement(ChartPopover, {
+                isPopoverOpen: isPopoverOpen,
+                clickPosition: clickPosition,
+                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
+    ]);
+    const _getAriaLabel = React.useCallback((point)=>{
+        var _point_callOutAccessibilityData;
+        const xValue = point.xAxisCalloutData || _getFormattedXValue(point);
+        const yValue = point.yAxisCalloutData || point.y;
+        return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${yValue}. ` + (point.legend ? `${point.legend}, ` : '') + `${xValue}.`;
+    }, [
+        _getFormattedXValue
+    ]);
+    const _getHighlightedLegend = React.useCallback(()=>{
+        return selectedLegends.length > 0 ? selectedLegends : hoveredLegend ? [
+            hoveredLegend
+        ] : [];
+    }, [
+        hoveredLegend,
+        selectedLegends
+    ]);
+    /**
+     * 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 = React.useCallback((legend)=>{
+        return _getHighlightedLegend().includes(`${legend}`);
+    }, [
+        _getHighlightedLegend
+    ]);
+    /**
+     * This function checks if none of the legends is selected or hovered.
+     */ const _noLegendHighlighted = React.useCallback(()=>{
+        return _getHighlightedLegend().length === 0;
+    }, [
+        _getHighlightedLegend
+    ]);
+    const _showCallout = React.useCallback((target, point)=>{
+        if (!(_noLegendHighlighted() || _legendHighlighted(point.legend)) || _calloutAnchorPoint.current === point) {
+            return;
+        }
+        if ('clientX' in target && 'clientY' in target) {
+            updatePosition(target.clientX, target.clientY);
+        } else {
+            const rect = target.target.getBoundingClientRect();
+            updatePosition(rect.left, rect.top);
+        }
+        _calloutAnchorPoint.current = point;
+        setPopoverOpen(true);
+        setCalloutLegend(point.legend);
+        setCalloutColor(point.color);
+        setXCalloutValue(point.yAxisCalloutData || point.y.toString());
+        setYCalloutValue(point.xAxisCalloutData || _getFormattedXValue(point));
+        setCalloutDataPoint(point);
+    }, [
+        _getFormattedXValue,
+        _legendHighlighted,
+        _noLegendHighlighted
+    ]);
+    const _onBarFocus = React.useCallback((point, focusEvent)=>{
+        _showCallout(focusEvent, point);
+    }, [
+        _showCallout
+    ]);
+    const _onBarHover = React.useCallback((point, mouseEvent)=>{
+        _showCallout(mouseEvent, point);
+    }, [
+        _showCallout
+    ]);
+    const _onBarLeave = React.useCallback(()=>{
+    // do nothing
+    }, []);
+    const _handleChartMouseLeave = React.useCallback(()=>{
+        _calloutAnchorPoint.current = null;
+        setPopoverOpen(false);
+        setCalloutLegend('');
+        setCalloutColor('');
+        setXCalloutValue('');
+        setYCalloutValue('');
+        setCalloutDataPoint(undefined);
+    }, []);
+    const _getBarHeight = React.useCallback((adjustedValue)=>{
+        let 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
+    ]);
+    const _getOrderedDataPoints = React.useCallback(()=>{
+        const result = [];
+        const yValueToPoints = {};
+        _points.forEach((point)=>{
+            if (!yValueToPoints[point.y]) {
+                yValueToPoints[point.y] = [];
+            }
+            yValueToPoints[point.y].push(point);
+        });
+        for(let i = _yAxisLabels.length - 1; i >= 0; i--){
+            const yValue = _yAxisLabels[i];
+            if (yValueToPoints[yValue]) {
+                result.push(...yValueToPoints[yValue].sort((a, b)=>+a.x.start - +b.x.start));
+            }
+        }
+        return result;
+    }, [
+        _points,
+        _yAxisLabels
+    ]);
+    const _createBars = React.useCallback(({ xScale, yScalePrimary: yScale })=>{
+        const getGradientId = (legend)=>{
+            const legendId = _legendMap.current[`${legend}`].id;
+            return `${legendId}_gradient`;
+        };
+        const gradientDefs = [];
+        if (props.enableGradient) {
+            Object.keys(_legendMap.current).forEach((legend, index)=>{
+                const { startColor, endColor } = _legendMap.current[legend];
+                gradientDefs.push(/*#__PURE__*/ React.createElement("linearGradient", {
+                    key: index,
+                    id: getGradientId(legend)
+                }, /*#__PURE__*/ React.createElement("stop", {
+                    offset: "0",
+                    stopColor: startColor
+                }), /*#__PURE__*/ React.createElement("stop", {
+                    offset: "100%",
+                    stopColor: endColor
+                })));
+            });
+        }
+        let scaleBandwidth = 0;
+        if (_yAxisType === YAxisType.StringAxis) {
+            scaleBandwidth = yScale.bandwidth();
+            _barHeight.current = _getBarHeight(scaleBandwidth);
+        }
+        const points = _getOrderedDataPoints();
+        const bars = points.map((point, index)=>{
+            const rectStartX = xScale(point.x.start);
+            const rectEndX = xScale(point.x.end);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const rectY = yScale(point.y) + (scaleBandwidth - _barHeight.current) / 2;
+            const shouldHighlight = _noLegendHighlighted() || _legendHighlighted(point.legend);
+            return /*#__PURE__*/ 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(#${getGradientId(point.legend)})` : point.color,
+                opacity: shouldHighlight ? 1 : 0.1,
+                onClick: point.onClick,
+                onMouseOver: (event)=>_onBarHover(point, event),
+                onMouseLeave: _onBarLeave,
+                onFocus: (event)=>_onBarFocus(point, event),
+                onBlur: _onBarLeave,
+                tabIndex: shouldHighlight ? 0 : -1,
+                role: "img",
+                "aria-label": _getAriaLabel(point)
+            });
+        });
+        return /*#__PURE__*/ React.createElement("g", null, gradientDefs.length > 0 ? /*#__PURE__*/ React.createElement("defs", null, gradientDefs) : null, bars);
+    }, [
+        _getAriaLabel,
+        _getBarHeight,
+        _getOrderedDataPoints,
+        _legendHighlighted,
+        _noLegendHighlighted,
+        _onBarFocus,
+        _onBarHover,
+        _onBarLeave,
+        _yAxisType,
+        props.enableGradient,
+        props.roundCorners
+    ]);
+    const _onLegendHover = React.useCallback((legend)=>{
+        setHoveredLegend(legend);
+    }, []);
+    const _onLegendLeave = React.useCallback(()=>{
+        setHoveredLegend('');
+    }, []);
+    const _onLegendSelectionChange = React.useCallback((_selectedLegends, event, currentLegend)=>{
+        var _props_legendProps, _props_legendProps1;
+        if ((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.canSelectMultipleLegends) {
+            setSelectedLegends(_selectedLegends);
+        } else {
+            setSelectedLegends(_selectedLegends.slice(-1));
+        }
+        if ((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.onChange) {
+            props.legendProps.onChange(_selectedLegends, event, currentLegend);
+        }
+    }, [
+        props.legendProps
+    ]);
+    const _getLegendData = React.useCallback(()=>{
+        const actions = [];
+        Object.keys(_legendMap.current).forEach((legendTitle)=>{
+            const legend = {
+                title: legendTitle,
+                color: _legendMap.current[legendTitle].startColor,
+                hoverAction: ()=>{
+                    _handleChartMouseLeave();
+                    _onLegendHover(legendTitle);
+                },
+                onMouseOutAction: ()=>{
+                    _onLegendLeave();
+                }
+            };
+            actions.push(legend);
+        });
+        const legends = /*#__PURE__*/ React.createElement(Legends, {
+            legends: actions,
+            enabledWrapLines: props.enabledLegendsWrapLines,
+            overflowText: props.legendsOverflowText,
+            onChange: _onLegendSelectionChange,
+            ...props.legendProps
+        });
+        return legends;
+    }, [
+        _handleChartMouseLeave,
+        _onLegendHover,
+        _onLegendLeave,
+        _onLegendSelectionChange,
+        props.enabledLegendsWrapLines,
+        props.legendProps,
+        props.legendsOverflowText
+    ]);
+    const _getChartTitle = React.useCallback(()=>{
+        return (props.chartTitle ? `${props.chartTitle}. ` : '') + `Gantt chart with ${_points.length} data points. `;
+    }, [
+        _points.length,
+        props.chartTitle
+    ]);
+    const _isChartEmpty = React.useCallback(()=>{
+        return _points.length === 0;
+    }, [
+        _points.length
+    ]);
+    const _getYDomainMargins = React.useCallback((containerHeight)=>{
+        let domainMargin = MIN_DOMAIN_MARGIN;
+        const ySet = new Set();
+        _points.forEach((point)=>{
+            ySet.add(point.y);
+        });
+        const uniqueY = Array.from(ySet);
+        /** Total height available to render the bars */ const 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 {
+            ..._margins.current,
+            top: _margins.current.top + domainMargin,
+            bottom: _margins.current.bottom + domainMargin
+        };
+    }, [
+        _getBarHeight,
+        _points,
+        _yAxisPadding,
+        _yAxisType
+    ]);
+    function updatePosition(newX, newY) {
+        const threshold = 1; // Set a threshold for movement
+        const { x, y } = clickPosition;
+        // Calculate the distance moved
+        const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));
+        // Update the position only if the distance moved is greater than the threshold
+        if (distance > threshold) {
+            setClickPosition({
+                x: newX,
+                y: newY
+            });
+            setPopoverOpen(true);
+        }
+    }
+    if (!_isChartEmpty()) {
+        _barHeight.current = _getBarHeight(DEFAULT_BAR_HEIGHT);
+        const calloutProps = {
+            isPopoverOpen,
+            clickPosition,
+            color: calloutColor,
+            legend: calloutLegend,
+            XValue: xCalloutValue,
+            YValue: yCalloutValue,
+            ...props.calloutProps
+        };
+        const tickParams = {
+            tickValues: props.tickValues,
+            tickFormat: props.tickFormat
+        };
+        return /*#__PURE__*/ React.createElement(CartesianChart, {
+            ...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,
+            customizedCallout: _getCustomizedCallout(),
+            getmargins: _getMargins,
+            getYDomainMargins: _getYDomainMargins,
+            onChartMouseLeave: _handleChartMouseLeave,
+            useUTC: useUTC,
+            children: _createBars
+        });
+    } else {
+        return /*#__PURE__*/ React.createElement("div", {
+            id: _emptyChartId,
+            role: 'alert',
+            style: {
+                opacity: '0'
+            },
+            "aria-label": 'Graph has no data to display'
+        });
+    }
+});
+GanttChart.displayName = 'GanttChart';