@fluentui/react-charts 0.0.0-nightly-20250722-0406.1 → 0.0.0-nightly-20250723-0406.1

package/CHANGELOG.md

@@ -1,28 +1,28 @@
 # Change Log - @fluentui/react-charts
 
-This log was last generated on Tue, 22 Jul 2025 04:20:41 GMT and should not be manually modified.
+This log was last generated on Wed, 23 Jul 2025 04:21:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20250722-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20250722-0406.1)
+## [0.0.0-nightly-20250723-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20250723-0406.1)
 
-Tue, 22 Jul 2025 04:20:41 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.1.9..@fluentui/react-charts_v0.0.0-nightly-20250722-0406.1)
+Wed, 23 Jul 2025 04:21:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.1.9..@fluentui/react-charts_v0.0.0-nightly-20250723-0406.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-button to v0.0.0-nightly-20250722-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/275174a14180bfd4a1dd09f3bea05d8805bb3532) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250722-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/275174a14180bfd4a1dd09f3bea05d8805bb3532) by beachball)
-- Bump @fluentui/react-overflow to v0.0.0-nightly-20250722-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/275174a14180bfd4a1dd09f3bea05d8805bb3532) by beachball)
-- Bump @fluentui/react-popover to v0.0.0-nightly-20250722-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/275174a14180bfd4a1dd09f3bea05d8805bb3532) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250722-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/275174a14180bfd4a1dd09f3bea05d8805bb3532) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20250722-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/275174a14180bfd4a1dd09f3bea05d8805bb3532) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20250722-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/275174a14180bfd4a1dd09f3bea05d8805bb3532) by beachball)
-- Bump @fluentui/react-tooltip to v0.0.0-nightly-20250722-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/275174a14180bfd4a1dd09f3bea05d8805bb3532) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20250722-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/275174a14180bfd4a1dd09f3bea05d8805bb3532) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20250722-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/275174a14180bfd4a1dd09f3bea05d8805bb3532) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250722-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/275174a14180bfd4a1dd09f3bea05d8805bb3532) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly-20250723-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/efd51751d1469295d225869c94ed3a3937ad219a) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250723-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/efd51751d1469295d225869c94ed3a3937ad219a) by beachball)
+- Bump @fluentui/react-overflow to v0.0.0-nightly-20250723-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/efd51751d1469295d225869c94ed3a3937ad219a) by beachball)
+- Bump @fluentui/react-popover to v0.0.0-nightly-20250723-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/efd51751d1469295d225869c94ed3a3937ad219a) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250723-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/efd51751d1469295d225869c94ed3a3937ad219a) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20250723-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/efd51751d1469295d225869c94ed3a3937ad219a) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20250723-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/efd51751d1469295d225869c94ed3a3937ad219a) by beachball)
+- Bump @fluentui/react-tooltip to v0.0.0-nightly-20250723-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/efd51751d1469295d225869c94ed3a3937ad219a) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20250723-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/efd51751d1469295d225869c94ed3a3937ad219a) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20250723-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/efd51751d1469295d225869c94ed3a3937ad219a) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250723-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/efd51751d1469295d225869c94ed3a3937ad219a) by beachball)
 
 ## [9.1.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.1.9)
 

package/dist/index.d.ts

@@ -967,6 +967,135 @@ export declare interface ExtendedSegment extends GaugeChartSegment {
     end: number;
 }
 
+export declare const FunnelChart: React_2.FunctionComponent<FunnelChartProps>;
+
+/**
+ * Data point for funnel chart
+ * {@docCategory FunnelChart}
+ */
+export declare interface FunnelChartDataPoint {
+    /**
+     * Stage name or identifier
+     */
+    stage: string | number;
+    /**
+     * Sub-values for stacked funnel charts
+     * Each sub-value represents a category within the stage
+     */
+    subValues?: Array<{
+        category: string;
+        value: number;
+        color: string;
+    }>;
+    /**
+     * Value for the stage (used for non-stacked funnel charts)
+     */
+    value?: number;
+    /**
+     * Color for the stage (used for non-stacked funnel charts)
+     */
+    color?: string;
+}
+
+/**
+ * Funnel Chart component props
+ * {@docCategory FunnelChart}
+ */
+export declare interface FunnelChartProps {
+    /**
+     * Data points for the funnel chart
+     */
+    data: FunnelChartDataPoint[];
+    /**
+     * Title for the chart
+     */
+    chartTitle?: string;
+    /**
+     * Width of the chart
+     */
+    width?: number;
+    /**
+     * Height of the chart
+     */
+    height?: number;
+    /**
+     * Decides whether to show/hide legends
+     * @defaultvalue false
+     */
+    hideLegend?: boolean;
+    /**
+     * Props for the legends in the chart
+     */
+    legendProps?: Partial<LegendsProps>;
+    /**
+     * Props for the callout in the chart
+     */
+    calloutProps?: ChartPopoverProps;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules
+     */
+    styles?: FunnelChartStyles;
+    /**
+     * Defines the culture to localize the numbers and dates
+     */
+    culture?: string;
+    /**
+     * Reference to the chart component
+     */
+    componentRef?: React_2.RefObject<any>;
+    /**
+     * Additional CSS class(es) to apply to the chart
+     */
+    className?: string;
+    /**
+     * Orientation of the funnel chart
+     * @defaultvalue 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+
+/**
+ * Funnel Chart style properties
+ * {@docCategory FunnelChart}
+ */
+export declare interface FunnelChartStyleProps {
+    /**
+     * Additional CSS class(es) to apply to the chart
+     */
+    className?: string;
+    /**
+     * Width of the chart
+     */
+    chartWidth: number;
+    /**
+     * Height of the chart
+     */
+    chartHeight: number;
+}
+
+/**
+ * Funnel Chart styles
+ * {@docCategory FunnelChart}
+ */
+export declare interface FunnelChartStyles {
+    /**
+     * Styles for the root element
+     */
+    root?: string;
+    /**
+     * Styles for the chart
+     */
+    chart?: string;
+    /**
+     * Styles for text elements
+     */
+    text?: string;
+    /**
+     * Styles for the callout root element
+     */
+    calloutContentRoot?: string;
+}
+
 export declare const GaugeChart: React_2.FunctionComponent<GaugeChartProps>;
 
 /**
@@ -1192,6 +1321,10 @@ export declare const getColorContrast: (c1: string, c2: string) => number;
 
 export declare const getColorFromToken: (token: string, isDarkTheme?: boolean) => string;
 
+export declare function getContrastTextColor(backgroundColor: string, isDarkTheme?: boolean): string;
+
+export declare const getInvertedTextColor: (color: string, isDarkTheme?: boolean) => string;
+
 export declare const getNextColor: (index: number, offset?: number, isDarkTheme?: boolean) => string;
 
 export declare const getSegmentLabel: (segment: ExtendedSegment, minValue: number, maxValue: number, variant?: GaugeChartVariant, isAriaLabel?: boolean) => string;

package/lib/FunnelChart.js

@@ -0,0 +1 @@
+export * from './components/FunnelChart/index';

package/lib/FunnelChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FunnelChart.ts"],"sourcesContent":["export * from './components/FunnelChart/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,iCAAiC"}

package/lib/components/FunnelChart/FunnelChart.js

@@ -0,0 +1,391 @@
+import * as React from 'react';
+import { useId } from '@fluentui/react-utilities';
+import { useRtl } from '../../utilities/index';
+import { Legends } from '../Legends/index';
+import { useFocusableGroup } from '@fluentui/react-tabster';
+import { ChartPopover } from '../CommonComponents/ChartPopover';
+import { formatToLocaleString } from '@fluentui/chart-utilities';
+import { getContrastTextColor } from '../../utilities/colors';
+import { useFunnelChartStyles } from './useFunnelChartStyles.styles';
+import { getHorizontalFunnelSegmentGeometry, getVerticalFunnelSegmentGeometry, getSegmentTextProps, getStackedHorizontalFunnelSegmentGeometry, getStackedVerticalFunnelSegmentGeometry } from './funnelGeometry';
+export const FunnelChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    var _props_legendProps;
+    const _emptyChartId = useId('_FunnelChart_empty');
+    const isRTL = useRtl();
+    const [hoveredStage, setHoveredStage] = React.useState(null);
+    const [calloutData, setCalloutData] = React.useState(null);
+    const [selectedLegends, setSelectedLegends] = React.useState([]);
+    const [clickPosition, setClickPosition] = React.useState({
+        x: 0,
+        y: 0
+    });
+    const [isPopoverOpen, setPopoverOpen] = React.useState(false);
+    const chartContainerRef = React.useRef(null);
+    const isStacked = isStackedFunnelData(props.data);
+    React.useEffect(()=>{
+        var _props_legendProps;
+        if ((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) {
+            setSelectedLegends(props.legendProps.selectedLegends);
+        }
+    }, [
+        (_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends
+    ]);
+    function _handleHover(data, mouseEvent) {
+        mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.persist();
+        updatePosition(mouseEvent.clientX, mouseEvent.clientY);
+        setCalloutData(data);
+        setPopoverOpen(true);
+    }
+    function _handleFocus(data, focusEvent) {
+        focusEvent === null || focusEvent === void 0 ? void 0 : focusEvent.persist();
+        let x = 0;
+        let y = 0;
+        const targetRect = focusEvent.target.getBoundingClientRect();
+        x = targetRect.left + targetRect.width / 2;
+        y = targetRect.top + targetRect.height / 2;
+        updatePosition(x, y);
+        setCalloutData(data);
+        setPopoverOpen(true);
+    }
+    function _handleStackedHover(stage, subValue, mouseEvent) {
+        mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.persist();
+        updatePosition(mouseEvent.clientX, mouseEvent.clientY);
+        setCalloutData({
+            stage,
+            value: subValue.value,
+            color: subValue.color,
+            category: subValue.category
+        });
+        setPopoverOpen(true);
+    }
+    function _handleStackedFocus(stage, subValue, focusEvent) {
+        focusEvent === null || focusEvent === void 0 ? void 0 : focusEvent.persist();
+        let x = 0;
+        let y = 0;
+        const targetRect = focusEvent.target.getBoundingClientRect();
+        x = targetRect.left + targetRect.width / 2;
+        y = targetRect.top + targetRect.height / 2;
+        updatePosition(x, y);
+        setCalloutData({
+            stage,
+            value: subValue.value,
+            color: subValue.color,
+            category: subValue.category
+        });
+        setPopoverOpen(true);
+    }
+    function _handleMouseOut() {
+        setHoveredStage(null);
+        setPopoverOpen(false);
+        setCalloutData(null);
+    }
+    function _onLegendSelectionChange(legendsSelected, event, currentLegend) {
+        var _props_legendProps, _props_legendProps1;
+        if ((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.canSelectMultipleLegends) {
+            setSelectedLegends(legendsSelected);
+        } else {
+            setSelectedLegends(legendsSelected.slice(-1));
+        }
+        if ((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.onChange) {
+            props.legendProps.onChange(legendsSelected, event, currentLegend);
+        }
+    }
+    const _onLegendSelectionChangeCallback = React.useCallback(_onLegendSelectionChange, [
+        props.legendProps
+    ]);
+    function getHighlightedLegend() {
+        return selectedLegends.length > 0 ? selectedLegends : hoveredStage ? [
+            hoveredStage
+        ] : [];
+    }
+    function legendHighlighted(legend) {
+        return getHighlightedLegend().includes(legend);
+    }
+    function noLegendHighlighted() {
+        return getHighlightedLegend().length === 0;
+    }
+    function _getEventHandlerProps(data, opacity) {
+        if ('subValue' in data) {
+            return {
+                culture: props.culture,
+                onMouseOver: opacity == 1 ? (event)=>_handleStackedHover(data.stage, data.subValue, event) : undefined,
+                onMouseMove: opacity == 1 ? (event)=>_handleStackedHover(data.stage, data.subValue, event) : undefined,
+                onFocus: (event)=>_handleStackedFocus(data.stage, data.subValue, event),
+                onBlur: ()=>_handleMouseOut(),
+                onMouseOut: ()=>_handleMouseOut()
+            };
+        } else {
+            return {
+                culture: props.culture,
+                onMouseOver: opacity == 1 ? (event)=>_handleHover(data, event) : undefined,
+                onMouseMove: opacity == 1 ? (event)=>_handleHover(data, event) : undefined,
+                onFocus: (event)=>_handleFocus(data, event),
+                onBlur: ()=>_handleMouseOut(),
+                onMouseOut: ()=>_handleMouseOut()
+            };
+        }
+    }
+    function _renderSegmentText({ show, x, y, value, textColor }) {
+        if (!show) {
+            return null;
+        }
+        const textElement = /*#__PURE__*/ React.createElement("text", {
+            x: isRTL ? funnelWidth - x : x,
+            y: y,
+            textAnchor: "middle",
+            alignmentBaseline: "middle",
+            fill: textColor
+        }, formatToLocaleString(value.toString(), props.culture));
+        if (isRTL) {
+            return /*#__PURE__*/ React.createElement("g", {
+                transform: `scale(-1,1) translate(${-funnelWidth},0)`
+            }, textElement);
+        }
+        return textElement;
+    }
+    function _renderFunnelSegment({ key, pathD, fill, opacity, textProps, data, tabIndex }) {
+        const eventHandlers = _getEventHandlerProps(data, opacity);
+        const textColor = getContrastTextColor(fill);
+        return /*#__PURE__*/ React.createElement("g", {
+            key: key
+        }, /*#__PURE__*/ React.createElement("path", {
+            d: pathD,
+            fill: fill,
+            opacity: opacity,
+            ...eventHandlers,
+            tabIndex: tabIndex
+        }), textProps && /*#__PURE__*/ React.createElement("g", eventHandlers, _renderSegmentText({
+            ...textProps,
+            textColor
+        })));
+    }
+    function _createFunnel(containerHeight, containerWidth) {
+        const { data } = props;
+        const funnelWidth = containerWidth;
+        const funnelHeight = containerHeight * 0.8;
+        return data.map((d, i)=>{
+            const geometryProps = props.orientation === 'vertical' ? getVerticalFunnelSegmentGeometry({
+                d,
+                i,
+                data,
+                funnelWidth,
+                funnelHeight,
+                isRTL
+            }) : getHorizontalFunnelSegmentGeometry({
+                d,
+                i,
+                data,
+                funnelWidth,
+                funnelHeight,
+                isRTL
+            });
+            const { pathD, textX, textY, availableWidth } = geometryProps;
+            const minTextWidth = 16;
+            const eventHandlerProps = _getEventHandlerProps(d);
+            const textProps = getSegmentTextProps({
+                availableWidth,
+                minTextWidth,
+                textX,
+                textY,
+                value: d.value,
+                ...eventHandlerProps
+            });
+            return _renderFunnelSegment({
+                key: i,
+                pathD,
+                fill: d.color,
+                opacity: legendHighlighted(d.stage) || noLegendHighlighted() ? 1 : 0.1,
+                textProps,
+                data: d,
+                tabIndex: legendHighlighted(d.stage) || noLegendHighlighted() ? 0 : undefined
+            });
+        });
+    }
+    function isStackedFunnelData(data) {
+        return Array.isArray(data) && data.every((stage)=>Array.isArray(stage.subValues));
+    }
+    function _renderStackedSegment(stage, subValue, stageIndex, subValueIndex, geometryParams) {
+        // Ensure stages have subValues for geometry functions
+        const stagesWithSubValues = geometryParams.stages.map((s)=>({
+                ...s,
+                subValues: s.subValues || []
+            }));
+        const geom = props.orientation === 'vertical' ? getStackedVerticalFunnelSegmentGeometry({
+            ...geometryParams,
+            stages: stagesWithSubValues,
+            i: stageIndex,
+            k: subValueIndex
+        }) : getStackedHorizontalFunnelSegmentGeometry({
+            ...geometryParams,
+            stages: stagesWithSubValues,
+            i: stageIndex,
+            k: subValueIndex
+        });
+        const minTextWidth = 16;
+        const eventHandlerProps = _getEventHandlerProps({
+            stage: stage.stage,
+            subValue
+        });
+        const textProps = getSegmentTextProps({
+            availableWidth: geom.availableWidth,
+            minTextWidth,
+            textX: geom.textX,
+            textY: geom.textY,
+            value: subValue.value,
+            ...eventHandlerProps
+        });
+        return _renderFunnelSegment({
+            key: `${stageIndex}-${subValueIndex}`,
+            pathD: geom.pathD,
+            fill: subValue.color,
+            opacity: isStackedFunnelData(props.data) && legendHighlighted(subValue.category) || noLegendHighlighted() ? 1 : 0.1,
+            textProps,
+            data: {
+                stage: stage.stage,
+                subValue
+            },
+            tabIndex: legendHighlighted(subValue.category) || noLegendHighlighted() ? 0 : undefined
+        });
+    }
+    function _createStackedFunnel(containerHeight, containerWidth) {
+        const { data } = props;
+        const stages = data;
+        const totals = stages.map((s)=>{
+            var _s_subValues;
+            var _s_subValues_reduce;
+            return (_s_subValues_reduce = s === null || s === void 0 ? void 0 : (_s_subValues = s.subValues) === null || _s_subValues === void 0 ? void 0 : _s_subValues.reduce((sum, subValue)=>sum + subValue.value, 0)) !== null && _s_subValues_reduce !== void 0 ? _s_subValues_reduce : 0;
+        });
+        const maxTotal = Math.max(...totals);
+        const funnelWidth = containerWidth;
+        const funnelHeight = containerHeight * 0.8;
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        const paths = [];
+        const geometryParams = {
+            stages,
+            totals,
+            maxTotal,
+            funnelWidth,
+            funnelHeight,
+            isRTL
+        };
+        for(let i = 0; i < stages.length; i++){
+            const cur = stages[i];
+            var _cur_subValues;
+            for(let k = 0; k < ((_cur_subValues = cur.subValues) !== null && _cur_subValues !== void 0 ? _cur_subValues : []).length; k++){
+                var _cur_subValues1;
+                const v = (_cur_subValues1 = cur.subValues) === null || _cur_subValues1 === void 0 ? void 0 : _cur_subValues1[k];
+                if (!v) {
+                    continue;
+                }
+                paths.push(_renderStackedSegment(cur, v, i, k, geometryParams));
+            }
+        }
+        return paths;
+    }
+    function _renderLegends() {
+        if (props.hideLegend) {
+            return /*#__PURE__*/ React.createElement(React.Fragment, null);
+        }
+        let legends;
+        if (isStacked) {
+            // Collect unique categories and their color
+            const categoryMap = {};
+            props.data.forEach((stage)=>{
+                (stage.subValues || []).forEach((sub)=>{
+                    if (!(sub.category in categoryMap)) {
+                        categoryMap[sub.category] = sub.color;
+                    }
+                });
+            });
+            legends = Object.entries(categoryMap).map(([category, color])=>({
+                    title: category,
+                    color,
+                    hoverAction: ()=>setHoveredStage(category),
+                    onMouseOutAction: ()=>setHoveredStage(null)
+                }));
+        } else {
+            legends = props.data.map((d)=>({
+                    title: d.stage,
+                    color: d.color,
+                    hoverAction: ()=>setHoveredStage(d.stage),
+                    onMouseOutAction: ()=>setHoveredStage(null)
+                }));
+        }
+        return /*#__PURE__*/ React.createElement("div", {
+            style: {
+                display: 'flex',
+                justifyContent: 'center'
+            }
+        }, /*#__PURE__*/ React.createElement(Legends, {
+            legends: legends,
+            centerLegends: true,
+            onChange: _onLegendSelectionChangeCallback,
+            ...props.legendProps
+        }));
+    }
+    function _isChartEmpty() {
+        return !(props.data && props.data.length > 0);
+    }
+    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);
+        }
+    }
+    const classes = useFunnelChartStyles(props);
+    const calloutProps = {
+        ...props.calloutProps,
+        color: calloutData === null || calloutData === void 0 ? void 0 : calloutData.color,
+        hoverXValue: calloutData === null || calloutData === void 0 ? void 0 : calloutData.stage,
+        YValue: calloutData === null || calloutData === void 0 ? void 0 : calloutData.value
+    };
+    const width = props.width || 350;
+    const height = props.height || 500;
+    const funnelMarginTop = 40;
+    const funnelWidth = width * 0.8;
+    const funnelOffsetX = (width - funnelWidth) / 2;
+    const focusAttributes = useFocusableGroup();
+    var _props_culture;
+    return !_isChartEmpty() ? /*#__PURE__*/ React.createElement("div", {
+        ref: chartContainerRef,
+        className: classes.root,
+        ...focusAttributes
+    }, /*#__PURE__*/ React.createElement("svg", {
+        width: width,
+        height: height,
+        className: classes.chart,
+        role: 'img',
+        "aria-label": props.chartTitle
+    }, /*#__PURE__*/ React.createElement("g", {
+        transform: isRTL ? `translate(${funnelOffsetX + funnelWidth}, ${funnelMarginTop}) scale(-1,1)` : `translate(${funnelOffsetX}, ${funnelMarginTop})`
+    }, isStacked ? _createStackedFunnel(height - funnelMarginTop, funnelWidth) : _createFunnel(height - funnelMarginTop, funnelWidth))), isPopoverOpen && /*#__PURE__*/ React.createElement(ChartPopover, {
+        ...props.calloutProps,
+        XValue: calloutProps === null || calloutProps === void 0 ? void 0 : calloutProps.hoverXValue,
+        yCalloutValue: calloutProps === null || calloutProps === void 0 ? void 0 : calloutProps.YValue,
+        culture: (_props_culture = props.culture) !== null && _props_culture !== void 0 ? _props_culture : 'en-us',
+        clickPosition: clickPosition,
+        isPopoverOpen: isPopoverOpen,
+        color: calloutProps === null || calloutProps === void 0 ? void 0 : calloutProps.color,
+        isCartesian: false
+    }), _renderLegends()) : /*#__PURE__*/ React.createElement("div", {
+        id: _emptyChartId,
+        role: 'alert',
+        style: {
+            opacity: '0'
+        },
+        "aria-label": 'Graph has no data to display'
+    });
+});
+FunnelChart.displayName = 'FunnelChart';
+// eslint-disable-next-line @typescript-eslint/no-deprecated
+FunnelChart.defaultProps = {
+    orientation: 'vertical'
+};

package/lib/components/FunnelChart/FunnelChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FunnelChart.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useId } from '@fluentui/react-utilities';\nimport { useRtl } from '../../utilities/index';\nimport { FunnelChartDataPoint, FunnelChartProps } from './FunnelChart.types';\nimport { Legend, Legends } from '../Legends/index';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { getContrastTextColor } from '../../utilities/colors';\nimport { useFunnelChartStyles } from './useFunnelChartStyles.styles';\nimport {\n  getHorizontalFunnelSegmentGeometry,\n  getVerticalFunnelSegmentGeometry,\n  getSegmentTextProps,\n  getStackedHorizontalFunnelSegmentGeometry,\n  getStackedVerticalFunnelSegmentGeometry,\n} from './funnelGeometry';\nimport { ChartPopoverProps } from '../../index';\n\nexport const FunnelChart: React.FunctionComponent<FunnelChartProps> = React.forwardRef<\n  HTMLDivElement,\n  FunnelChartProps\n>((props, forwardedRef) => {\n  const _emptyChartId: string = useId('_FunnelChart_empty');\n  const isRTL = useRtl();\n\n  const [hoveredStage, setHoveredStage] = React.useState<string | null>(null);\n  const [calloutData, setCalloutData] = React.useState<FunnelChartDataPoint | null>(null);\n  const [selectedLegends, setSelectedLegends] = React.useState<string[]>([]);\n  const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n  const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n  const chartContainerRef = React.useRef<HTMLDivElement | null>(null);\n  const isStacked = isStackedFunnelData(props.data);\n\n  React.useEffect(() => {\n    if (props.legendProps?.selectedLegends) {\n      setSelectedLegends(props.legendProps.selectedLegends);\n    }\n  }, [props.legendProps?.selectedLegends]);\n\n  function _handleHover(data: FunnelChartDataPoint, mouseEvent: React.MouseEvent<SVGElement>) {\n    mouseEvent?.persist();\n    updatePosition(mouseEvent.clientX, mouseEvent.clientY);\n    setCalloutData(data);\n    setPopoverOpen(true);\n  }\n\n  function _handleFocus(data: FunnelChartDataPoint, focusEvent: React.FocusEvent<SVGPathElement>) {\n    focusEvent?.persist();\n    let x = 0;\n    let y = 0;\n    const targetRect = (focusEvent.target as SVGPathElement).getBoundingClientRect();\n    x = targetRect.left + targetRect.width / 2;\n    y = targetRect.top + targetRect.height / 2;\n\n    updatePosition(x, y);\n    setCalloutData(data);\n    setPopoverOpen(true);\n  }\n\n  function _handleStackedHover(\n    stage: string,\n    subValue: { category: string; value: number; color: string },\n    mouseEvent: React.MouseEvent<SVGElement>,\n  ) {\n    mouseEvent?.persist();\n    updatePosition(mouseEvent.clientX, mouseEvent.clientY);\n    setCalloutData({\n      stage,\n      value: subValue.value,\n      color: subValue.color,\n      category: subValue.category,\n    } as FunnelChartDataPoint);\n    setPopoverOpen(true);\n  }\n\n  function _handleStackedFocus(\n    stage: string,\n    subValue: { category: string; value: number; color: string },\n    focusEvent: React.FocusEvent<SVGPathElement>,\n  ) {\n    focusEvent?.persist();\n    let x = 0;\n    let y = 0;\n    const targetRect = (focusEvent.target as SVGPathElement).getBoundingClientRect();\n    x = targetRect.left + targetRect.width / 2;\n    y = targetRect.top + targetRect.height / 2;\n\n    updatePosition(x, y);\n    setCalloutData({\n      stage,\n      value: subValue.value,\n      color: subValue.color,\n      category: subValue.category,\n    } as FunnelChartDataPoint);\n    setPopoverOpen(true);\n  }\n\n  function _handleMouseOut() {\n    setHoveredStage(null);\n    setPopoverOpen(false);\n    setCalloutData(null);\n  }\n\n  function _onLegendSelectionChange(\n    legendsSelected: string[],\n    event: React.MouseEvent<HTMLButtonElement>,\n    currentLegend?: Legend,\n  ): void {\n    if (props.legendProps?.canSelectMultipleLegends) {\n      setSelectedLegends(legendsSelected);\n    } else {\n      setSelectedLegends(legendsSelected.slice(-1));\n    }\n\n    if (props.legendProps?.onChange) {\n      props.legendProps.onChange(legendsSelected, event, currentLegend);\n    }\n  }\n\n  const _onLegendSelectionChangeCallback = React.useCallback(_onLegendSelectionChange, [props.legendProps]);\n\n  function getHighlightedLegend(): string[] {\n    return selectedLegends.length > 0 ? selectedLegends : hoveredStage ? [hoveredStage] : [];\n  }\n\n  function legendHighlighted(legend: string): boolean {\n    return getHighlightedLegend().includes(legend);\n  }\n\n  function noLegendHighlighted(): boolean {\n    return getHighlightedLegend().length === 0;\n  }\n\n  function _getEventHandlerProps(\n    data: FunnelChartDataPoint | { stage: string; subValue: { category: string; value: number; color: string } },\n    opacity?: number,\n  ) {\n    if ('subValue' in data) {\n      return {\n        culture: props.culture,\n        onMouseOver:\n          opacity == 1\n            ? (event: React.MouseEvent<SVGElement>) => _handleStackedHover(data.stage, data.subValue, event)\n            : undefined,\n        onMouseMove:\n          opacity == 1\n            ? (event: React.MouseEvent<SVGElement>) => _handleStackedHover(data.stage, data.subValue, event)\n            : undefined,\n        onFocus: (event: React.FocusEvent<SVGPathElement>) => _handleStackedFocus(data.stage, data.subValue, event),\n        onBlur: () => _handleMouseOut(),\n        onMouseOut: () => _handleMouseOut(),\n      };\n    } else {\n      return {\n        culture: props.culture,\n        onMouseOver: opacity == 1 ? (event: React.MouseEvent<SVGElement>) => _handleHover(data, event) : undefined,\n        onMouseMove: opacity == 1 ? (event: React.MouseEvent<SVGElement>) => _handleHover(data, event) : undefined,\n        onFocus: (event: React.FocusEvent<SVGPathElement>) => _handleFocus(data, event),\n        onBlur: () => _handleMouseOut(),\n        onMouseOut: () => _handleMouseOut(),\n      };\n    }\n  }\n\n  function _renderSegmentText({\n    show,\n    x,\n    y,\n    value,\n    textColor,\n  }: {\n    show: boolean;\n    x: number;\n    y: number;\n    value: number;\n    textColor: string;\n  }) {\n    if (!show) {\n      return null;\n    }\n\n    const textElement = (\n      <text x={isRTL ? funnelWidth - x : x} y={y} textAnchor=\"middle\" alignmentBaseline=\"middle\" fill={textColor}>\n        {formatToLocaleString(value.toString(), props.culture) as React.ReactNode}\n      </text>\n    );\n\n    if (isRTL) {\n      return <g transform={`scale(-1,1) translate(${-funnelWidth},0)`}>{textElement}</g>;\n    }\n    return textElement;\n  }\n\n  function _renderFunnelSegment({\n    key,\n    pathD,\n    fill,\n    opacity,\n    textProps,\n    data,\n    tabIndex,\n  }: {\n    key: string | number;\n    pathD: string;\n    fill: string;\n    opacity: number;\n    textProps?: {\n      show: boolean;\n      x: number;\n      y: number;\n      value: number;\n    };\n    data: FunnelChartDataPoint | { stage: string; subValue: { category: string; value: number; color: string } };\n    tabIndex?: number;\n  }) {\n    const eventHandlers = _getEventHandlerProps(data, opacity);\n    const textColor = getContrastTextColor(fill);\n\n    return (\n      <g key={key}>\n        <path d={pathD} fill={fill} opacity={opacity} {...eventHandlers} tabIndex={tabIndex} />\n        {textProps && <g {...eventHandlers}>{_renderSegmentText({ ...textProps, textColor })}</g>}\n      </g>\n    );\n  }\n\n  function _createFunnel(\n    containerHeight: number,\n    containerWidth: number,\n  ): // eslint-disable-next-line @typescript-eslint/no-deprecated\n  JSX.Element[] {\n    const { data } = props;\n    const funnelWidth = containerWidth;\n    const funnelHeight = containerHeight * 0.8;\n\n    return data.map((d, i) => {\n      const geometryProps =\n        props.orientation === 'vertical'\n          ? getVerticalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL })\n          : getHorizontalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL });\n\n      const { pathD, textX, textY, availableWidth } = geometryProps;\n      const minTextWidth = 16;\n      const eventHandlerProps = _getEventHandlerProps(d);\n      const textProps = getSegmentTextProps({\n        availableWidth,\n        minTextWidth,\n        textX,\n        textY,\n        value: d.value!,\n        ...eventHandlerProps,\n      });\n\n      return _renderFunnelSegment({\n        key: i,\n        pathD,\n        fill: d.color!,\n        opacity: legendHighlighted(d.stage as string) || noLegendHighlighted() ? 1 : 0.1,\n        textProps,\n        data: d,\n        tabIndex: legendHighlighted(d.stage as string) || noLegendHighlighted() ? 0 : undefined,\n      });\n    });\n  }\n\n  function isStackedFunnelData(data: FunnelChartDataPoint[]): boolean {\n    return Array.isArray(data) && data.every(stage => Array.isArray(stage.subValues));\n  }\n\n  function _renderStackedSegment(\n    stage: FunnelChartDataPoint,\n    subValue: { value: number; color: string; category: string },\n    stageIndex: number,\n    subValueIndex: number,\n    geometryParams: {\n      stages: FunnelChartDataPoint[];\n      totals: number[];\n      maxTotal: number;\n      funnelWidth: number;\n      funnelHeight: number;\n      isRTL: boolean;\n    },\n  ): // eslint-disable-next-line @typescript-eslint/no-deprecated\n  JSX.Element {\n    // Ensure stages have subValues for geometry functions\n    const stagesWithSubValues = geometryParams.stages.map(s => ({\n      ...s,\n      subValues: s.subValues || [],\n    }));\n    const geom =\n      props.orientation === 'vertical'\n        ? getStackedVerticalFunnelSegmentGeometry({\n            ...geometryParams,\n            stages: stagesWithSubValues,\n            i: stageIndex,\n            k: subValueIndex,\n          })\n        : getStackedHorizontalFunnelSegmentGeometry({\n            ...geometryParams,\n            stages: stagesWithSubValues,\n            i: stageIndex,\n            k: subValueIndex,\n          });\n\n    const minTextWidth = 16;\n    const eventHandlerProps = _getEventHandlerProps({ stage: stage.stage as string, subValue });\n    const textProps = getSegmentTextProps({\n      availableWidth: geom.availableWidth,\n      minTextWidth,\n      textX: geom.textX,\n      textY: geom.textY,\n      value: subValue.value,\n      ...eventHandlerProps,\n    });\n\n    return _renderFunnelSegment({\n      key: `${stageIndex}-${subValueIndex}`,\n      pathD: geom.pathD,\n      fill: subValue.color,\n      opacity:\n        (isStackedFunnelData(props.data) && legendHighlighted(subValue.category)) || noLegendHighlighted() ? 1 : 0.1,\n      textProps,\n      data: { stage: stage.stage as string, subValue },\n      tabIndex: legendHighlighted(subValue.category) || noLegendHighlighted() ? 0 : undefined,\n    });\n  }\n\n  function _createStackedFunnel(\n    containerHeight: number,\n    containerWidth: number,\n  ): // eslint-disable-next-line @typescript-eslint/no-deprecated\n  JSX.Element[] {\n    const { data } = props;\n\n    const stages = data;\n    const totals = stages.map(s => s?.subValues?.reduce((sum, subValue) => sum + subValue.value, 0) ?? 0);\n    const maxTotal = Math.max(...totals);\n\n    const funnelWidth = containerWidth;\n    const funnelHeight = containerHeight * 0.8;\n\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const paths: JSX.Element[] = [];\n\n    const geometryParams = {\n      stages,\n      totals,\n      maxTotal,\n      funnelWidth,\n      funnelHeight,\n      isRTL,\n    };\n\n    for (let i = 0; i < stages.length; i++) {\n      const cur = stages[i];\n      for (let k = 0; k < (cur.subValues ?? []).length; k++) {\n        const v = cur.subValues?.[k];\n        if (!v) {\n          continue;\n        }\n        paths.push(_renderStackedSegment(cur, v, i, k, geometryParams));\n      }\n    }\n    return paths;\n  }\n\n  function _renderLegends(): // eslint-disable-next-line @typescript-eslint/no-deprecated\n  JSX.Element {\n    if (props.hideLegend) {\n      return <></>;\n    }\n    let legends: Legend[];\n\n    if (isStacked) {\n      // Collect unique categories and their color\n      const categoryMap: Record<string, string> = {};\n      props.data.forEach((stage: FunnelChartDataPoint) => {\n        (stage.subValues || []).forEach(sub => {\n          if (!(sub.category in categoryMap)) {\n            categoryMap[sub.category] = sub.color;\n          }\n        });\n      });\n      legends = Object.entries(categoryMap).map(([category, color]) => ({\n        title: category,\n        color,\n        hoverAction: () => setHoveredStage(category),\n        onMouseOutAction: () => setHoveredStage(null),\n      }));\n    } else {\n      legends = props.data.map((d: FunnelChartDataPoint) => ({\n        title: d.stage as string,\n        color: d.color!,\n        hoverAction: () => setHoveredStage(d.stage as string),\n        onMouseOutAction: () => setHoveredStage(null),\n      }));\n    }\n\n    return (\n      <div style={{ display: 'flex', justifyContent: 'center' }}>\n        <Legends\n          legends={legends}\n          centerLegends={true}\n          onChange={_onLegendSelectionChangeCallback}\n          {...props.legendProps}\n        />\n      </div>\n    );\n  }\n\n  function _isChartEmpty(): boolean {\n    return !(props.data && props.data.length > 0);\n  }\n\n  function updatePosition(newX: number, newY: number) {\n    const threshold = 1; // Set a threshold for movement\n    const { x, y } = clickPosition;\n    // Calculate the distance moved\n    const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));\n    // Update the position only if the distance moved is greater than the threshold\n    if (distance > threshold) {\n      setClickPosition({ x: newX, y: newY });\n      setPopoverOpen(true);\n    }\n  }\n\n  const classes = useFunnelChartStyles(props);\n\n  const calloutProps: ChartPopoverProps = {\n    ...props.calloutProps,\n    color: calloutData?.color,\n    hoverXValue: calloutData?.stage,\n    YValue: calloutData?.value,\n  };\n\n  const width = props.width || 350;\n  const height = props.height || 500;\n\n  const funnelMarginTop = 40;\n  const funnelWidth = width * 0.8;\n  const funnelOffsetX = (width - funnelWidth) / 2;\n  const focusAttributes = useFocusableGroup();\n\n  return !_isChartEmpty() ? (\n    <div ref={chartContainerRef} className={classes.root} {...focusAttributes}>\n      <svg width={width} height={height} className={classes.chart} role={'img'} aria-label={props.chartTitle}>\n        <g\n          transform={\n            isRTL\n              ? `translate(${funnelOffsetX + funnelWidth}, ${funnelMarginTop}) scale(-1,1)`\n              : `translate(${funnelOffsetX}, ${funnelMarginTop})`\n          }\n        >\n          {isStacked\n            ? _createStackedFunnel(height - funnelMarginTop, funnelWidth)\n            : _createFunnel(height - funnelMarginTop, funnelWidth)}\n        </g>\n      </svg>\n      {isPopoverOpen && (\n        <ChartPopover\n          {...props.calloutProps}\n          XValue={calloutProps?.hoverXValue as string}\n          yCalloutValue={calloutProps?.YValue as string}\n          culture={props.culture ?? 'en-us'}\n          clickPosition={clickPosition}\n          isPopoverOpen={isPopoverOpen}\n          color={calloutProps?.color}\n          isCartesian={false}\n        />\n      )}\n      {_renderLegends()}\n    </div>\n  ) : (\n    <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n  );\n});\nFunnelChart.displayName = 'FunnelChart';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nFunnelChart.defaultProps = {\n  orientation: 'vertical',\n};\n"],"names":["React","useId","useRtl","Legends","useFocusableGroup","ChartPopover","formatToLocaleString","getContrastTextColor","useFunnelChartStyles","getHorizontalFunnelSegmentGeometry","getVerticalFunnelSegmentGeometry","getSegmentTextProps","getStackedHorizontalFunnelSegmentGeometry","getStackedVerticalFunnelSegmentGeometry","FunnelChart","forwardRef","props","forwardedRef","_emptyChartId","isRTL","hoveredStage","setHoveredStage","useState","calloutData","setCalloutData","selectedLegends","setSelectedLegends","clickPosition","setClickPosition","x","y","isPopoverOpen","setPopoverOpen","chartContainerRef","useRef","isStacked","isStackedFunnelData","data","useEffect","legendProps","_handleHover","mouseEvent","persist","updatePosition","clientX","clientY","_handleFocus","focusEvent","targetRect","target","getBoundingClientRect","left","width","top","height","_handleStackedHover","stage","subValue","value","color","category","_handleStackedFocus","_handleMouseOut","_onLegendSelectionChange","legendsSelected","event","currentLegend","canSelectMultipleLegends","slice","onChange","_onLegendSelectionChangeCallback","useCallback","getHighlightedLegend","length","legendHighlighted","legend","includes","noLegendHighlighted","_getEventHandlerProps","opacity","culture","onMouseOver","undefined","onMouseMove","onFocus","onBlur","onMouseOut","_renderSegmentText","show","textColor","textElement","text","funnelWidth","textAnchor","alignmentBaseline","fill","toString","g","transform","_renderFunnelSegment","key","pathD","textProps","tabIndex","eventHandlers","path","d","_createFunnel","containerHeight","containerWidth","funnelHeight","map","i","geometryProps","orientation","textX","textY","availableWidth","minTextWidth","eventHandlerProps","Array","isArray","every","subValues","_renderStackedSegment","stageIndex","subValueIndex","geometryParams","stagesWithSubValues","stages","s","geom","k","_createStackedFunnel","totals","reduce","sum","maxTotal","Math","max","paths","cur","v","push","_renderLegends","hideLegend","legends","categoryMap","forEach","sub","Object","entries","title","hoverAction","onMouseOutAction","div","style","display","justifyContent","centerLegends","_isChartEmpty","newX","newY","threshold","distance","sqrt","pow","classes","calloutProps","hoverXValue","YValue","funnelMarginTop","funnelOffsetX","focusAttributes","ref","className","root","svg","chart","role","aria-label","chartTitle","XValue","yCalloutValue","isCartesian","id","displayName","defaultProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,4BAA4B;AAClD,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,SAAiBC,OAAO,QAAQ,mBAAmB;AACnD,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,YAAY,QAAQ,mCAAmC;AAChE,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,gCAAgC;AACrE,SACEC,kCAAkC,EAClCC,gCAAgC,EAChCC,mBAAmB,EACnBC,yCAAyC,EACzCC,uCAAuC,QAClC,mBAAmB;AAG1B,OAAO,MAAMC,4BAAyDd,MAAMe,UAAU,CAGpF,CAACC,OAAOC;QAgBJD;IAfJ,MAAME,gBAAwBjB,MAAM;IACpC,MAAMkB,QAAQjB;IAEd,MAAM,CAACkB,cAAcC,gBAAgB,GAAGrB,MAAMsB,QAAQ,CAAgB;IACtE,MAAM,CAACC,aAAaC,eAAe,GAAGxB,MAAMsB,QAAQ,CAA8B;IAClF,MAAM,CAACG,iBAAiBC,mBAAmB,GAAG1B,MAAMsB,QAAQ,CAAW,EAAE;IACzE,MAAM,CAACK,eAAeC,iBAAiB,GAAG5B,MAAMsB,QAAQ,CAAC;QAAEO,GAAG;QAAGC,GAAG;IAAE;IACtE,MAAM,CAACC,eAAeC,eAAe,GAAGhC,MAAMsB,QAAQ,CAAC;IACvD,MAAMW,oBAAoBjC,MAAMkC,MAAM,CAAwB;IAC9D,MAAMC,YAAYC,oBAAoBpB,MAAMqB,IAAI;IAEhDrC,MAAMsC,SAAS,CAAC;YACVtB;QAAJ,KAAIA,qBAAAA,MAAMuB,WAAW,cAAjBvB,yCAAAA,mBAAmBS,eAAe,EAAE;YACtCC,mBAAmBV,MAAMuB,WAAW,CAACd,eAAe;QACtD;IACF,GAAG;SAACT,qBAAAA,MAAMuB,WAAW,cAAjBvB,yCAAAA,mBAAmBS,eAAe;KAAC;IAEvC,SAASe,aAAaH,IAA0B,EAAEI,UAAwC;QACxFA,uBAAAA,iCAAAA,WAAYC,OAAO;QACnBC,eAAeF,WAAWG,OAAO,EAAEH,WAAWI,OAAO;QACrDrB,eAAea;QACfL,eAAe;IACjB;IAEA,SAASc,aAAaT,IAA0B,EAAEU,UAA4C;QAC5FA,uBAAAA,iCAAAA,WAAYL,OAAO;QACnB,IAAIb,IAAI;QACR,IAAIC,IAAI;QACR,MAAMkB,aAAa,AAACD,WAAWE,MAAM,CAAoBC,qBAAqB;QAC9ErB,IAAImB,WAAWG,IAAI,GAAGH,WAAWI,KAAK,GAAG;QACzCtB,IAAIkB,WAAWK,GAAG,GAAGL,WAAWM,MAAM,GAAG;QAEzCX,eAAed,GAAGC;QAClBN,eAAea;QACfL,eAAe;IACjB;IAEA,SAASuB,oBACPC,KAAa,EACbC,QAA4D,EAC5DhB,UAAwC;QAExCA,uBAAAA,iCAAAA,WAAYC,OAAO;QACnBC,eAAeF,WAAWG,OAAO,EAAEH,WAAWI,OAAO;QACrDrB,eAAe;YACbgC;YACAE,OAAOD,SAASC,KAAK;YACrBC,OAAOF,SAASE,KAAK;YACrBC,UAAUH,SAASG,QAAQ;QAC7B;QACA5B,eAAe;IACjB;IAEA,SAAS6B,oBACPL,KAAa,EACbC,QAA4D,EAC5DV,UAA4C;QAE5CA,uBAAAA,iCAAAA,WAAYL,OAAO;QACnB,IAAIb,IAAI;QACR,IAAIC,IAAI;QACR,MAAMkB,aAAa,AAACD,WAAWE,MAAM,CAAoBC,qBAAqB;QAC9ErB,IAAImB,WAAWG,IAAI,GAAGH,WAAWI,KAAK,GAAG;QACzCtB,IAAIkB,WAAWK,GAAG,GAAGL,WAAWM,MAAM,GAAG;QAEzCX,eAAed,GAAGC;QAClBN,eAAe;YACbgC;YACAE,OAAOD,SAASC,KAAK;YACrBC,OAAOF,SAASE,KAAK;YACrBC,UAAUH,SAASG,QAAQ;QAC7B;QACA5B,eAAe;IACjB;IAEA,SAAS8B;QACPzC,gBAAgB;QAChBW,eAAe;QACfR,eAAe;IACjB;IAEA,SAASuC,yBACPC,eAAyB,EACzBC,KAA0C,EAC1CC,aAAsB;YAElBlD,oBAMAA;QANJ,KAAIA,qBAAAA,MAAMuB,WAAW,cAAjBvB,yCAAAA,mBAAmBmD,wBAAwB,EAAE;YAC/CzC,mBAAmBsC;QACrB,OAAO;YACLtC,mBAAmBsC,gBAAgBI,KAAK,CAAC,CAAC;QAC5C;QAEA,KAAIpD,sBAAAA,MAAMuB,WAAW,cAAjBvB,0CAAAA,oBAAmBqD,QAAQ,EAAE;YAC/BrD,MAAMuB,WAAW,CAAC8B,QAAQ,CAACL,iBAAiBC,OAAOC;QACrD;IACF;IAEA,MAAMI,mCAAmCtE,MAAMuE,WAAW,CAACR,0BAA0B;QAAC/C,MAAMuB,WAAW;KAAC;IAExG,SAASiC;QACP,OAAO/C,gBAAgBgD,MAAM,GAAG,IAAIhD,kBAAkBL,eAAe;YAACA;SAAa,GAAG,EAAE;IAC1F;IAEA,SAASsD,kBAAkBC,MAAc;QACvC,OAAOH,uBAAuBI,QAAQ,CAACD;IACzC;IAEA,SAASE;QACP,OAAOL,uBAAuBC,MAAM,KAAK;IAC3C;IAEA,SAASK,sBACPzC,IAA4G,EAC5G0C,OAAgB;QAEhB,IAAI,cAAc1C,MAAM;YACtB,OAAO;gBACL2C,SAAShE,MAAMgE,OAAO;gBACtBC,aACEF,WAAW,IACP,CAACd,QAAwCV,oBAAoBlB,KAAKmB,KAAK,EAAEnB,KAAKoB,QAAQ,EAAEQ,SACxFiB;gBACNC,aACEJ,WAAW,IACP,CAACd,QAAwCV,oBAAoBlB,KAAKmB,KAAK,EAAEnB,KAAKoB,QAAQ,EAAEQ,SACxFiB;gBACNE,SAAS,CAACnB,QAA4CJ,oBAAoBxB,KAAKmB,KAAK,EAAEnB,KAAKoB,QAAQ,EAAEQ;gBACrGoB,QAAQ,IAAMvB;gBACdwB,YAAY,IAAMxB;YACpB;QACF,OAAO;YACL,OAAO;gBACLkB,SAAShE,MAAMgE,OAAO;gBACtBC,aAAaF,WAAW,IAAI,CAACd,QAAwCzB,aAAaH,MAAM4B,SAASiB;gBACjGC,aAAaJ,WAAW,IAAI,CAACd,QAAwCzB,aAAaH,MAAM4B,SAASiB;gBACjGE,SAAS,CAACnB,QAA4CnB,aAAaT,MAAM4B;gBACzEoB,QAAQ,IAAMvB;gBACdwB,YAAY,IAAMxB;YACpB;QACF;IACF;IAEA,SAASyB,mBAAmB,EAC1BC,IAAI,EACJ3D,CAAC,EACDC,CAAC,EACD4B,KAAK,EACL+B,SAAS,EAOV;QACC,IAAI,CAACD,MAAM;YACT,OAAO;QACT;QAEA,MAAME,4BACJ,oBAACC;YAAK9D,GAAGV,QAAQyE,cAAc/D,IAAIA;YAAGC,GAAGA;YAAG+D,YAAW;YAASC,mBAAkB;YAASC,MAAMN;WAC9FnF,qBAAqBoD,MAAMsC,QAAQ,IAAIhF,MAAMgE,OAAO;QAIzD,IAAI7D,OAAO;YACT,qBAAO,oBAAC8E;gBAAEC,WAAW,CAAC,sBAAsB,EAAE,CAACN,YAAY,GAAG,CAAC;eAAGF;QACpE;QACA,OAAOA;IACT;IAEA,SAASS,qBAAqB,EAC5BC,GAAG,EACHC,KAAK,EACLN,IAAI,EACJhB,OAAO,EACPuB,SAAS,EACTjE,IAAI,EACJkE,QAAQ,EAcT;QACC,MAAMC,gBAAgB1B,sBAAsBzC,MAAM0C;QAClD,MAAMU,YAAYlF,qBAAqBwF;QAEvC,qBACE,oBAACE;YAAEG,KAAKA;yBACN,oBAACK;YAAKC,GAAGL;YAAON,MAAMA;YAAMhB,SAASA;YAAU,GAAGyB,aAAa;YAAED,UAAUA;YAC1ED,2BAAa,oBAACL,KAAMO,eAAgBjB,mBAAmB;YAAE,GAAGe,SAAS;YAAEb;QAAU;IAGxF;IAEA,SAASkB,cACPC,eAAuB,EACvBC,cAAsB;QAGtB,MAAM,EAAExE,IAAI,EAAE,GAAGrB;QACjB,MAAM4E,cAAciB;QACpB,MAAMC,eAAeF,kBAAkB;QAEvC,OAAOvE,KAAK0E,GAAG,CAAC,CAACL,GAAGM;YAClB,MAAMC,gBACJjG,MAAMkG,WAAW,KAAK,aAClBxG,iCAAiC;gBAAEgG;gBAAGM;gBAAG3E;gBAAMuD;gBAAakB;gBAAc3F;YAAM,KAChFV,mCAAmC;gBAAEiG;gBAAGM;gBAAG3E;gBAAMuD;gBAAakB;gBAAc3F;YAAM;YAExF,MAAM,EAAEkF,KAAK,EAAEc,KAAK,EAAEC,KAAK,EAAEC,cAAc,EAAE,GAAGJ;YAChD,MAAMK,eAAe;YACrB,MAAMC,oBAAoBzC,sBAAsB4B;YAChD,MAAMJ,YAAY3F,oBAAoB;gBACpC0G;gBACAC;gBACAH;gBACAC;gBACA1D,OAAOgD,EAAEhD,KAAK;gBACd,GAAG6D,iBAAiB;YACtB;YAEA,OAAOpB,qBAAqB;gBAC1BC,KAAKY;gBACLX;gBACAN,MAAMW,EAAE/C,KAAK;gBACboB,SAASL,kBAAkBgC,EAAElD,KAAK,KAAeqB,wBAAwB,IAAI;gBAC7EyB;gBACAjE,MAAMqE;gBACNH,UAAU7B,kBAAkBgC,EAAElD,KAAK,KAAeqB,wBAAwB,IAAIK;YAChF;QACF;IACF;IAEA,SAAS9C,oBAAoBC,IAA4B;QACvD,OAAOmF,MAAMC,OAAO,CAACpF,SAASA,KAAKqF,KAAK,CAAClE,CAAAA,QAASgE,MAAMC,OAAO,CAACjE,MAAMmE,SAAS;IACjF;IAEA,SAASC,sBACPpE,KAA2B,EAC3BC,QAA4D,EAC5DoE,UAAkB,EAClBC,aAAqB,EACrBC,cAOC;QAGD,sDAAsD;QACtD,MAAMC,sBAAsBD,eAAeE,MAAM,CAAClB,GAAG,CAACmB,CAAAA,IAAM,CAAA;gBAC1D,GAAGA,CAAC;gBACJP,WAAWO,EAAEP,SAAS,IAAI,EAAE;YAC9B,CAAA;QACA,MAAMQ,OACJnH,MAAMkG,WAAW,KAAK,aAClBrG,wCAAwC;YACtC,GAAGkH,cAAc;YACjBE,QAAQD;YACRhB,GAAGa;YACHO,GAAGN;QACL,KACAlH,0CAA0C;YACxC,GAAGmH,cAAc;YACjBE,QAAQD;YACRhB,GAAGa;YACHO,GAAGN;QACL;QAEN,MAAMR,eAAe;QACrB,MAAMC,oBAAoBzC,sBAAsB;YAAEtB,OAAOA,MAAMA,KAAK;YAAYC;QAAS;QACzF,MAAM6C,YAAY3F,oBAAoB;YACpC0G,gBAAgBc,KAAKd,cAAc;YACnCC;YACAH,OAAOgB,KAAKhB,KAAK;YACjBC,OAAOe,KAAKf,KAAK;YACjB1D,OAAOD,SAASC,KAAK;YACrB,GAAG6D,iBAAiB;QACtB;QAEA,OAAOpB,qBAAqB;YAC1BC,KAAK,CAAC,EAAEyB,WAAW,CAAC,EAAEC,cAAc,CAAC;YACrCzB,OAAO8B,KAAK9B,KAAK;YACjBN,MAAMtC,SAASE,KAAK;YACpBoB,SACE,AAAC3C,oBAAoBpB,MAAMqB,IAAI,KAAKqC,kBAAkBjB,SAASG,QAAQ,KAAMiB,wBAAwB,IAAI;YAC3GyB;YACAjE,MAAM;gBAAEmB,OAAOA,MAAMA,KAAK;gBAAYC;YAAS;YAC/C8C,UAAU7B,kBAAkBjB,SAASG,QAAQ,KAAKiB,wBAAwB,IAAIK;QAChF;IACF;IAEA,SAASmD,qBACPzB,eAAuB,EACvBC,cAAsB;QAGtB,MAAM,EAAExE,IAAI,EAAE,GAAGrB;QAEjB,MAAMiH,SAAS5F;QACf,MAAMiG,SAASL,OAAOlB,GAAG,CAACmB,CAAAA;gBAAKA;gBAAAA;mBAAAA,CAAAA,sBAAAA,cAAAA,yBAAAA,eAAAA,EAAGP,SAAS,cAAZO,mCAAAA,aAAcK,MAAM,CAAC,CAACC,KAAK/E,WAAa+E,MAAM/E,SAASC,KAAK,EAAE,gBAA9DwE,iCAAAA,sBAAoE;QAAA;QACnG,MAAMO,WAAWC,KAAKC,GAAG,IAAIL;QAE7B,MAAM1C,cAAciB;QACpB,MAAMC,eAAeF,kBAAkB;QAEvC,4DAA4D;QAC5D,MAAMgC,QAAuB,EAAE;QAE/B,MAAMb,iBAAiB;YACrBE;YACAK;YACAG;YACA7C;YACAkB;YACA3F;QACF;QAEA,IAAK,IAAI6F,IAAI,GAAGA,IAAIiB,OAAOxD,MAAM,EAAEuC,IAAK;YACtC,MAAM6B,MAAMZ,MAAM,CAACjB,EAAE;gBACA6B;YAArB,IAAK,IAAIT,IAAI,GAAGA,IAAI,AAACS,CAAAA,CAAAA,iBAAAA,IAAIlB,SAAS,cAAbkB,4BAAAA,iBAAiB,EAAE,AAAD,EAAGpE,MAAM,EAAE2D,IAAK;oBAC3CS;gBAAV,MAAMC,KAAID,kBAAAA,IAAIlB,SAAS,cAAbkB,sCAAAA,eAAe,CAACT,EAAE;gBAC5B,IAAI,CAACU,GAAG;oBACN;gBACF;gBACAF,MAAMG,IAAI,CAACnB,sBAAsBiB,KAAKC,GAAG9B,GAAGoB,GAAGL;YACjD;QACF;QACA,OAAOa;IACT;IAEA,SAASI;QAEP,IAAIhI,MAAMiI,UAAU,EAAE;YACpB,qBAAO;QACT;QACA,IAAIC;QAEJ,IAAI/G,WAAW;YACb,4CAA4C;YAC5C,MAAMgH,cAAsC,CAAC;YAC7CnI,MAAMqB,IAAI,CAAC+G,OAAO,CAAC,CAAC5F;gBACjBA,CAAAA,MAAMmE,SAAS,IAAI,EAAE,AAAD,EAAGyB,OAAO,CAACC,CAAAA;oBAC9B,IAAI,CAAEA,CAAAA,IAAIzF,QAAQ,IAAIuF,WAAU,GAAI;wBAClCA,WAAW,CAACE,IAAIzF,QAAQ,CAAC,GAAGyF,IAAI1F,KAAK;oBACvC;gBACF;YACF;YACAuF,UAAUI,OAAOC,OAAO,CAACJ,aAAapC,GAAG,CAAC,CAAC,CAACnD,UAAUD,MAAM,GAAM,CAAA;oBAChE6F,OAAO5F;oBACPD;oBACA8F,aAAa,IAAMpI,gBAAgBuC;oBACnC8F,kBAAkB,IAAMrI,gBAAgB;gBAC1C,CAAA;QACF,OAAO;YACL6H,UAAUlI,MAAMqB,IAAI,CAAC0E,GAAG,CAAC,CAACL,IAA6B,CAAA;oBACrD8C,OAAO9C,EAAElD,KAAK;oBACdG,OAAO+C,EAAE/C,KAAK;oBACd8F,aAAa,IAAMpI,gBAAgBqF,EAAElD,KAAK;oBAC1CkG,kBAAkB,IAAMrI,gBAAgB;gBAC1C,CAAA;QACF;QAEA,qBACE,oBAACsI;YAAIC,OAAO;gBAAEC,SAAS;gBAAQC,gBAAgB;YAAS;yBACtD,oBAAC3J;YACC+I,SAASA;YACTa,eAAe;YACf1F,UAAUC;YACT,GAAGtD,MAAMuB,WAAW;;IAI7B;IAEA,SAASyH;QACP,OAAO,CAAEhJ,CAAAA,MAAMqB,IAAI,IAAIrB,MAAMqB,IAAI,CAACoC,MAAM,GAAG,CAAA;IAC7C;IAEA,SAAS9B,eAAesH,IAAY,EAAEC,IAAY;QAChD,MAAMC,YAAY,GAAG,+BAA+B;QACpD,MAAM,EAAEtI,CAAC,EAAEC,CAAC,EAAE,GAAGH;QACjB,+BAA+B;QAC/B,MAAMyI,WAAW1B,KAAK2B,IAAI,CAAC3B,KAAK4B,GAAG,CAACL,OAAOpI,GAAG,KAAK6G,KAAK4B,GAAG,CAACJ,OAAOpI,GAAG;QACtE,+EAA+E;QAC/E,IAAIsI,WAAWD,WAAW;YACxBvI,iBAAiB;gBAAEC,GAAGoI;gBAAMnI,GAAGoI;YAAK;YACpClI,eAAe;QACjB;IACF;IAEA,MAAMuI,UAAU/J,qBAAqBQ;IAErC,MAAMwJ,eAAkC;QACtC,GAAGxJ,MAAMwJ,YAAY;QACrB7G,KAAK,EAAEpC,wBAAAA,kCAAAA,YAAaoC,KAAK;QACzB8G,WAAW,EAAElJ,wBAAAA,kCAAAA,YAAaiC,KAAK;QAC/BkH,MAAM,EAAEnJ,wBAAAA,kCAAAA,YAAamC,KAAK;IAC5B;IAEA,MAAMN,QAAQpC,MAAMoC,KAAK,IAAI;IAC7B,MAAME,SAAStC,MAAMsC,MAAM,IAAI;IAE/B,MAAMqH,kBAAkB;IACxB,MAAM/E,cAAcxC,QAAQ;IAC5B,MAAMwH,gBAAgB,AAACxH,CAAAA,QAAQwC,WAAU,IAAK;IAC9C,MAAMiF,kBAAkBzK;QAsBPY;IApBjB,OAAO,CAACgJ,gCACN,oBAACL;QAAImB,KAAK7I;QAAmB8I,WAAWR,QAAQS,IAAI;QAAG,GAAGH,eAAe;qBACvE,oBAACI;QAAI7H,OAAOA;QAAOE,QAAQA;QAAQyH,WAAWR,QAAQW,KAAK;QAAEC,MAAM;QAAOC,cAAYpK,MAAMqK,UAAU;qBACpG,oBAACpF;QACCC,WACE/E,QACI,CAAC,UAAU,EAAEyJ,gBAAgBhF,YAAY,EAAE,EAAE+E,gBAAgB,aAAa,CAAC,GAC3E,CAAC,UAAU,EAAEC,cAAc,EAAE,EAAED,gBAAgB,CAAC,CAAC;OAGtDxI,YACGkG,qBAAqB/E,SAASqH,iBAAiB/E,eAC/Ce,cAAcrD,SAASqH,iBAAiB/E,gBAG/C7D,+BACC,oBAAC1B;QACE,GAAGW,MAAMwJ,YAAY;QACtBc,MAAM,EAAEd,yBAAAA,mCAAAA,aAAcC,WAAW;QACjCc,aAAa,EAAEf,yBAAAA,mCAAAA,aAAcE,MAAM;QACnC1F,SAAShE,CAAAA,iBAAAA,MAAMgE,OAAO,cAAbhE,4BAAAA,iBAAiB;QAC1BW,eAAeA;QACfI,eAAeA;QACf4B,KAAK,EAAE6G,yBAAAA,mCAAAA,aAAc7G,KAAK;QAC1B6H,aAAa;QAGhBxC,kCAGH,oBAACW;QAAI8B,IAAIvK;QAAeiK,MAAM;QAASvB,OAAO;YAAE7E,SAAS;QAAI;QAAGqG,cAAY;;AAEhF,GAAG;AACHtK,YAAY4K,WAAW,GAAG;AAC1B,4DAA4D;AAC5D5K,YAAY6K,YAAY,GAAG;IACzBzE,aAAa;AACf"}

package/lib/components/FunnelChart/FunnelChart.types.js

@@ -0,0 +1 @@
+import * as React from 'react';