@fluentui/react-charting 5.24.9 → 5.24.11

package/lib-amd/components/FunnelChart/FunnelChart.base.js

@@ -0,0 +1,260 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities", "@fluentui/react-focus", "../Legends/index", "@fluentui/react/lib/Callout", "../../utilities/ChartHoverCard/ChartHoverCard", "@fluentui/chart-utilities", "../../utilities/image-export-utils", "../../utilities/utilities", "./funnelGeometry"], function (require, exports, tslib_1, React, Utilities_1, react_focus_1, index_1, Callout_1, ChartHoverCard_1, chart_utilities_1, image_export_utils_1, utilities_1, funnelGeometry_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.FunnelChartBase = void 0;
+    var getClassNames = (0, Utilities_1.classNamesFunction)();
+    exports.FunnelChartBase = React.forwardRef(function (props, forwardedRef) {
+        var _a;
+        var _tooltipId = (0, Utilities_1.getId)('FunnelChartTooltipId_');
+        var _emptyChartId = (0, Utilities_1.getId)('_FunnelChart_empty');
+        var isRTL = (0, Utilities_1.getRTL)();
+        var _b = React.useState(null), hoveredStage = _b[0], setHoveredStage = _b[1];
+        var _c = React.useState(false), isCalloutVisible = _c[0], setIsCalloutVisible = _c[1];
+        var _d = React.useState(null), calloutData = _d[0], setCalloutData = _d[1];
+        var _e = React.useState(null), refSelected = _e[0], setRefSelected = _e[1];
+        var _f = React.useState([]), selectedLegends = _f[0], setSelectedLegends = _f[1];
+        var chartContainerRef = React.useRef(null);
+        var legendsRef = React.useRef(null);
+        var isStacked = isStackedFunnelData(props.data);
+        React.useEffect(function () {
+            var _a;
+            if ((_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends) {
+                setSelectedLegends(props.legendProps.selectedLegends);
+            }
+        }, [(_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends]);
+        React.useImperativeHandle(props.componentRef, function () { return ({
+            chartContainer: chartContainerRef !== null && chartContainerRef !== void 0 ? chartContainerRef : null,
+            toImage: function (opts) {
+                var _a;
+                return (0, image_export_utils_1.toImage)(chartContainerRef.current, (_a = legendsRef.current) === null || _a === void 0 ? void 0 : _a.toSVG, (0, Utilities_1.getRTL)(), opts);
+            },
+        }); }, []);
+        function _handleHover(data, mouseEvent) {
+            mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.persist();
+            setHoveredStage(data.stage);
+            setCalloutData(data);
+            setIsCalloutVisible(true);
+            setRefSelected(mouseEvent.currentTarget);
+        }
+        function _handleStackedHover(stage, subValue, mouseEvent) {
+            mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.persist();
+            setHoveredStage(subValue.category);
+            setCalloutData({
+                stage: stage,
+                value: subValue.value,
+                color: subValue.color,
+                category: subValue.category,
+            });
+            setIsCalloutVisible(true);
+            setRefSelected(mouseEvent.currentTarget);
+        }
+        function _handleMouseOut() {
+            setHoveredStage(null);
+            setIsCalloutVisible(false);
+            setCalloutData(null);
+            setRefSelected(null);
+        }
+        function _onLegendSelectionChange(legendsSelected, event, currentLegend) {
+            var _a, _b;
+            if ((_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.canSelectMultipleLegends) {
+                setSelectedLegends(legendsSelected);
+            }
+            else {
+                setSelectedLegends(legendsSelected.slice(-1));
+            }
+            if ((_b = props.legendProps) === null || _b === void 0 ? void 0 : _b.onChange) {
+                props.legendProps.onChange(legendsSelected, event, currentLegend);
+            }
+        }
+        var _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) {
+            if ('subValue' in data) {
+                return {
+                    culture: props.culture,
+                    onMouseOver: function (event) { return _handleStackedHover(data.stage, data.subValue, event); },
+                    onMouseMove: function (event) { return _handleStackedHover(data.stage, data.subValue, event); },
+                    onMouseOut: function () { return _handleMouseOut(); },
+                };
+            }
+            else {
+                return {
+                    culture: props.culture,
+                    onMouseOver: function (event) { return _handleHover(data, event); },
+                    onMouseMove: function (event) { return _handleHover(data, event); },
+                    onMouseOut: function () { return _handleMouseOut(); },
+                };
+            }
+        }
+        function _renderSegmentText(_a) {
+            var show = _a.show, x = _a.x, y = _a.y, value = _a.value, textColor = _a.textColor;
+            if (!show) {
+                return null;
+            }
+            var textElement = (React.createElement("text", { x: isRTL ? funnelWidth - x : x, y: y, textAnchor: "middle", alignmentBaseline: "middle", fill: textColor }, (0, chart_utilities_1.formatToLocaleString)(value.toString(), props.culture)));
+            if (isRTL) {
+                return React.createElement("g", { transform: "scale(-1,1) translate(".concat(-funnelWidth, ",0)") }, textElement);
+            }
+            return textElement;
+        }
+        function _renderFunnelSegment(_a) {
+            var key = _a.key, pathD = _a.pathD, fill = _a.fill, opacity = _a.opacity, textProps = _a.textProps, data = _a.data;
+            var eventHandlers = _getEventHandlerProps(data);
+            var textColor = (0, utilities_1.getContrastTextColor)(fill, props.theme);
+            return (React.createElement("g", { key: key },
+                React.createElement("path", tslib_1.__assign({ d: pathD, fill: fill, opacity: opacity }, eventHandlers)),
+                textProps && React.createElement("g", tslib_1.__assign({}, eventHandlers), _renderSegmentText(tslib_1.__assign(tslib_1.__assign({}, textProps), { textColor: textColor })))));
+        }
+        function _createFunnel(containerHeight, containerWidth) {
+            var data = props.data;
+            var funnelWidth = containerWidth;
+            var funnelHeight = containerHeight * 0.8;
+            return data.map(function (d, i) {
+                var geometryProps = props.orientation === 'horizontal'
+                    ? (0, funnelGeometry_1.getHorizontalFunnelSegmentGeometry)({ d: d, i: i, data: data, funnelWidth: funnelWidth, funnelHeight: funnelHeight, isRTL: isRTL })
+                    : (0, funnelGeometry_1.getVerticalFunnelSegmentGeometry)({ d: d, i: i, data: data, funnelWidth: funnelWidth, funnelHeight: funnelHeight, isRTL: isRTL });
+                var pathD = geometryProps.pathD, textX = geometryProps.textX, textY = geometryProps.textY, availableWidth = geometryProps.availableWidth;
+                var minTextWidth = 16;
+                var eventHandlerProps = _getEventHandlerProps(d);
+                var textProps = (0, funnelGeometry_1.getSegmentTextProps)(tslib_1.__assign({ availableWidth: availableWidth, minTextWidth: minTextWidth, textX: textX, textY: textY, value: d.value }, eventHandlerProps));
+                return _renderFunnelSegment({
+                    key: i,
+                    pathD: pathD,
+                    fill: d.color,
+                    opacity: legendHighlighted(d.stage) || noLegendHighlighted() ? 1 : 0.1,
+                    textProps: textProps,
+                    data: d,
+                });
+            });
+        }
+        function isStackedFunnelData(data) {
+            return Array.isArray(data) && data.every(function (stage) { return Array.isArray(stage.subValues); });
+        }
+        function _renderStackedSegment(stage, subValue, stageIndex, subValueIndex, geometryParams) {
+            // Ensure stages have subValues for geometry functions
+            var stagesWithSubValues = geometryParams.stages.map(function (s) { return (tslib_1.__assign(tslib_1.__assign({}, s), { subValues: s.subValues || [] })); });
+            var geom = props.orientation === 'horizontal'
+                ? (0, funnelGeometry_1.getStackedHorizontalFunnelSegmentGeometry)(tslib_1.__assign(tslib_1.__assign({}, geometryParams), { stages: stagesWithSubValues, i: stageIndex, k: subValueIndex }))
+                : (0, funnelGeometry_1.getStackedVerticalFunnelSegmentGeometry)(tslib_1.__assign(tslib_1.__assign({}, geometryParams), { stages: stagesWithSubValues, i: stageIndex, k: subValueIndex }));
+            var minTextWidth = 16;
+            var eventHandlerProps = _getEventHandlerProps({ stage: stage.stage, subValue: subValue });
+            var textProps = (0, funnelGeometry_1.getSegmentTextProps)(tslib_1.__assign({ availableWidth: geom.availableWidth, minTextWidth: minTextWidth, textX: geom.textX, textY: geom.textY, value: subValue.value }, eventHandlerProps));
+            return _renderFunnelSegment({
+                key: "".concat(stageIndex, "-").concat(subValueIndex),
+                pathD: geom.pathD,
+                fill: subValue.color,
+                opacity: (isStackedFunnelData(props.data) && legendHighlighted(subValue.category)) || noLegendHighlighted() ? 1 : 0.1,
+                textProps: textProps,
+                data: { stage: stage.stage, subValue: subValue },
+            });
+        }
+        function _createStackedFunnel(containerHeight, containerWidth) {
+            var _a, _b;
+            var data = props.data;
+            var stages = data;
+            var totals = stages.map(function (s) { var _a, _b; return (_b = (_a = s === null || s === void 0 ? void 0 : s.subValues) === null || _a === void 0 ? void 0 : _a.reduce(function (sum, subValue) { return sum + subValue.value; }, 0)) !== null && _b !== void 0 ? _b : 0; });
+            var maxTotal = Math.max.apply(Math, totals);
+            var funnelWidth = containerWidth;
+            var funnelHeight = containerHeight * 0.8;
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            var paths = [];
+            var geometryParams = {
+                stages: stages,
+                totals: totals,
+                maxTotal: maxTotal,
+                funnelWidth: funnelWidth,
+                funnelHeight: funnelHeight,
+                isRTL: isRTL,
+            };
+            for (var i = 0; i < stages.length; i++) {
+                var cur = stages[i];
+                for (var k = 0; k < ((_a = cur.subValues) !== null && _a !== void 0 ? _a : []).length; k++) {
+                    var v = (_b = cur.subValues) === null || _b === void 0 ? void 0 : _b[k];
+                    if (!v) {
+                        continue;
+                    }
+                    paths.push(_renderStackedSegment(cur, v, i, k, geometryParams));
+                }
+            }
+            return paths;
+        }
+        function _renderLegends() {
+            if (props.hideLegend) {
+                return React.createElement(React.Fragment, null);
+            }
+            var legends;
+            if (isStacked) {
+                // Collect unique categories and their color
+                var categoryMap_1 = {};
+                props.data.forEach(function (stage) {
+                    (stage.subValues || []).forEach(function (sub) {
+                        if (!(sub.category in categoryMap_1)) {
+                            categoryMap_1[sub.category] = sub.color;
+                        }
+                    });
+                });
+                legends = Object.entries(categoryMap_1).map(function (_a) {
+                    var category = _a[0], color = _a[1];
+                    return ({
+                        title: category,
+                        color: color,
+                        hoverAction: function () { return setHoveredStage(category); },
+                        onMouseOutAction: function () { return setHoveredStage(null); },
+                    });
+                });
+            }
+            else {
+                legends = props.data.map(function (d) { return ({
+                    title: d.stage,
+                    color: d.color,
+                    hoverAction: function () { return setHoveredStage(d.stage); },
+                    onMouseOutAction: function () { return setHoveredStage(null); },
+                }); });
+            }
+            return (React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } },
+                React.createElement(index_1.Legends, tslib_1.__assign({ ref: legendsRef, legends: legends, centerLegends: true, onChange: _onLegendSelectionChangeCallback }, props.legendProps))));
+        }
+        function _isChartEmpty() {
+            return !(props.data && props.data.length > 0);
+        }
+        var calloutProps = tslib_1.__assign({ isCalloutVisible: isCalloutVisible, directionalHint: Callout_1.DirectionalHint.topAutoEdge, id: "toolTip".concat(_tooltipId), target: refSelected, color: calloutData === null || calloutData === void 0 ? void 0 : calloutData.color, XValue: calloutData === null || calloutData === void 0 ? void 0 : calloutData.stage, YValue: calloutData === null || calloutData === void 0 ? void 0 : calloutData.value, isBeakVisible: false, gapSpace: 15, onDismiss: function () {
+                setIsCalloutVisible(false);
+            }, preventDismissOnLostFocus: true }, props.calloutProps);
+        var width = props.width || 350;
+        var height = props.height || 500;
+        var classNames = getClassNames(props.styles, {
+            theme: props.theme,
+            className: props.className,
+            chartWidth: width,
+            chartHeight: height,
+        });
+        var funnelMarginTop = 40;
+        var funnelWidth = width * 0.8;
+        var funnelOffsetX = (width - funnelWidth) / 2;
+        return !_isChartEmpty() ? (React.createElement("div", { ref: chartContainerRef, className: classNames.root },
+            React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal },
+                React.createElement("svg", { width: width, height: height, className: classNames.chart, role: 'img', "aria-label": props.chartTitle },
+                    React.createElement("g", { transform: isRTL
+                            ? "translate(".concat(funnelOffsetX + funnelWidth, ", ").concat(funnelMarginTop, ") scale(-1,1)")
+                            : "translate(".concat(funnelOffsetX, ", ").concat(funnelMarginTop, ")") }, isStacked
+                        ? _createStackedFunnel(height - funnelMarginTop, funnelWidth)
+                        : _createFunnel(height - funnelMarginTop, funnelWidth)),
+                    isCalloutVisible && (React.createElement(Callout_1.Callout, tslib_1.__assign({}, calloutProps),
+                        React.createElement(ChartHoverCard_1.ChartHoverCard, { XValue: calloutProps === null || calloutProps === void 0 ? void 0 : calloutProps.XValue, YValue: calloutProps === null || calloutProps === void 0 ? void 0 : calloutProps.YValue, color: calloutProps === null || calloutProps === void 0 ? void 0 : calloutProps.color }))))),
+            _renderLegends())) : (React.createElement("div", { id: _emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
+    });
+    exports.FunnelChartBase.displayName = 'FunnelChart';
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    exports.FunnelChartBase.defaultProps = {
+        orientation: 'horizontal',
+    };
+});
+//# sourceMappingURL=FunnelChart.base.js.map

package/lib-amd/components/FunnelChart/FunnelChart.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FunnelChart.base.js","sourceRoot":"../src/","sources":["components/FunnelChart/FunnelChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport {\n  IFunnelChartDataPoint,\n  IFunnelChartProps,\n  IFunnelChartStyleProps,\n  IFunnelChartStyles,\n} from './FunnelChart.types';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ILegend, ILegendContainer, Legends } from '../Legends/index';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { ChartHoverCard } from '../../utilities/ChartHoverCard/ChartHoverCard';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { IImageExportOptions } from '../../types/index';\nimport { toImage as convertToImage } from '../../utilities/image-export-utils';\nimport { getContrastTextColor } from '../../utilities/utilities';\nimport {\n  getHorizontalFunnelSegmentGeometry,\n  getVerticalFunnelSegmentGeometry,\n  getSegmentTextProps,\n  getStackedHorizontalFunnelSegmentGeometry,\n  getStackedVerticalFunnelSegmentGeometry,\n} from './funnelGeometry';\n\nconst getClassNames = classNamesFunction<IFunnelChartStyleProps, IFunnelChartStyles>();\n\nexport const FunnelChartBase: React.FunctionComponent<IFunnelChartProps> = React.forwardRef<\n  HTMLDivElement,\n  IFunnelChartProps\n>((props, forwardedRef) => {\n  const _tooltipId: string = getId('FunnelChartTooltipId_');\n  const _emptyChartId: string = getId('_FunnelChart_empty');\n  const isRTL = getRTL();\n\n  const [hoveredStage, setHoveredStage] = React.useState<string | null>(null);\n  const [isCalloutVisible, setIsCalloutVisible] = React.useState(false);\n  const [calloutData, setCalloutData] = React.useState<IFunnelChartDataPoint | null>(null);\n  const [refSelected, setRefSelected] = React.useState<SVGElement | null>(null);\n  const [selectedLegends, setSelectedLegends] = React.useState<string[]>([]);\n  const chartContainerRef = React.useRef<HTMLDivElement | null>(null);\n  const legendsRef = React.useRef<ILegendContainer | 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  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      chartContainer: chartContainerRef ?? null,\n      toImage: (opts?: IImageExportOptions): Promise<string> => {\n        return convertToImage(chartContainerRef.current, legendsRef.current?.toSVG, getRTL(), opts);\n      },\n    }),\n    [],\n  );\n\n  function _handleHover(data: IFunnelChartDataPoint, mouseEvent: React.MouseEvent<SVGElement>) {\n    mouseEvent?.persist();\n    setHoveredStage(data.stage as string);\n    setCalloutData(data);\n    setIsCalloutVisible(true);\n    setRefSelected(mouseEvent.currentTarget);\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    setHoveredStage(subValue.category);\n    setCalloutData({\n      stage,\n      value: subValue.value,\n      color: subValue.color,\n      category: subValue.category,\n    } as IFunnelChartDataPoint);\n    setIsCalloutVisible(true);\n    setRefSelected(mouseEvent.currentTarget);\n  }\n\n  function _handleMouseOut() {\n    setHoveredStage(null);\n    setIsCalloutVisible(false);\n    setCalloutData(null);\n    setRefSelected(null);\n  }\n\n  function _onLegendSelectionChange(\n    legendsSelected: string[],\n    event: React.MouseEvent<HTMLButtonElement>,\n    currentLegend?: ILegend,\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: IFunnelChartDataPoint | { stage: string; subValue: { category: string; value: number; color: string } },\n  ) {\n    if ('subValue' in data) {\n      return {\n        culture: props.culture,\n        onMouseOver: (event: React.MouseEvent<SVGElement>) => _handleStackedHover(data.stage, data.subValue, event),\n        onMouseMove: (event: React.MouseEvent<SVGElement>) => _handleStackedHover(data.stage, data.subValue, event),\n        onMouseOut: () => _handleMouseOut(),\n      };\n    } else {\n      return {\n        culture: props.culture,\n        onMouseOver: (event: React.MouseEvent<SVGElement>) => _handleHover(data, event),\n        onMouseMove: (event: React.MouseEvent<SVGElement>) => _handleHover(data, event),\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  }: {\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: IFunnelChartDataPoint | { stage: string; subValue: { category: string; value: number; color: string } };\n  }) {\n    const eventHandlers = _getEventHandlerProps(data);\n    const textColor = getContrastTextColor(fill, props.theme!);\n\n    return (\n      <g key={key}>\n        <path d={pathD} fill={fill} opacity={opacity} {...eventHandlers} />\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 === 'horizontal'\n          ? getHorizontalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL })\n          : getVerticalFunnelSegmentGeometry({ 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      });\n    });\n  }\n\n  function isStackedFunnelData(data: IFunnelChartDataPoint[]): boolean {\n    return Array.isArray(data) && data.every(stage => Array.isArray(stage.subValues));\n  }\n\n  function _renderStackedSegment(\n    stage: IFunnelChartDataPoint,\n    subValue: { value: number; color: string; category: string },\n    stageIndex: number,\n    subValueIndex: number,\n    geometryParams: {\n      stages: IFunnelChartDataPoint[];\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\n    const geom =\n      props.orientation === 'horizontal'\n        ? getStackedHorizontalFunnelSegmentGeometry({\n            ...geometryParams,\n            stages: stagesWithSubValues,\n            i: stageIndex,\n            k: subValueIndex,\n          })\n        : getStackedVerticalFunnelSegmentGeometry({\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    });\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: ILegend[];\n\n    if (isStacked) {\n      // Collect unique categories and their color\n      const categoryMap: Record<string, string> = {};\n      props.data.forEach((stage: IFunnelChartDataPoint) => {\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: IFunnelChartDataPoint) => ({\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          ref={legendsRef}\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  const calloutProps = {\n    isCalloutVisible,\n    directionalHint: DirectionalHint.topAutoEdge,\n    id: `toolTip${_tooltipId}`,\n    target: refSelected,\n    color: calloutData?.color,\n    XValue: calloutData?.stage,\n    YValue: calloutData?.value,\n    isBeakVisible: false,\n    gapSpace: 15,\n    onDismiss: () => {\n      setIsCalloutVisible(false);\n    },\n    preventDismissOnLostFocus: true,\n    ...props.calloutProps,\n  };\n\n  const width = props.width || 350;\n  const height = props.height || 500;\n  const classNames = getClassNames(props.styles!, {\n    theme: props.theme!,\n    className: props.className,\n    chartWidth: width,\n    chartHeight: height,\n  });\n\n  const funnelMarginTop = 40;\n  const funnelWidth = width * 0.8;\n  const funnelOffsetX = (width - funnelWidth) / 2;\n\n  return !_isChartEmpty() ? (\n    <div ref={chartContainerRef} className={classNames.root}>\n      <FocusZone direction={FocusZoneDirection.horizontal}>\n        <svg width={width} height={height} className={classNames.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          {isCalloutVisible && (\n            <Callout {...calloutProps}>\n              <ChartHoverCard\n                XValue={calloutProps?.XValue as string}\n                YValue={calloutProps?.YValue}\n                color={calloutProps?.color}\n              />\n            </Callout>\n          )}\n        </svg>\n      </FocusZone>\n      {_renderLegends()}\n    </div>\n  ) : (\n    <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n  );\n});\nFunnelChartBase.displayName = 'FunnelChart';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nFunnelChartBase.defaultProps = {\n  orientation: 'horizontal',\n};\n"]}

package/lib-amd/components/FunnelChart/FunnelChart.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { IFunnelChartProps } from './FunnelChart.types';
+/**
+ * Funnelchart component.
+ * {@docCategory FunnelChart}
+ */
+export declare const FunnelChart: React.FunctionComponent<IFunnelChartProps>;

package/lib-amd/components/FunnelChart/FunnelChart.js

@@ -0,0 +1,11 @@
+define(["require", "exports", "@fluentui/react", "./FunnelChart.base", "./FunnelChart.styles"], function (require, exports, react_1, FunnelChart_base_1, FunnelChart_styles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.FunnelChart = void 0;
+    /**
+     * Funnelchart component.
+     * {@docCategory FunnelChart}
+     */
+    exports.FunnelChart = (0, react_1.styled)(FunnelChart_base_1.FunnelChartBase, FunnelChart_styles_1.getFunnelChartStyles);
+});
+//# sourceMappingURL=FunnelChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FunnelChart.js","sourceRoot":"../src/","sources":["components/FunnelChart/FunnelChart.tsx"],"names":[],"mappings":";;;;IAMA;;;OAGG;IACU,QAAA,WAAW,GAA+C,IAAA,cAAM,EAI3E,kCAAe,EAAE,yCAAoB,CAAC,CAAC","sourcesContent":["import { styled } from '@fluentui/react';\nimport * as React from 'react';\nimport { FunnelChartBase } from './FunnelChart.base';\nimport { getFunnelChartStyles } from './FunnelChart.styles';\nimport { IFunnelChartProps, IFunnelChartStyleProps, IFunnelChartStyles } from './FunnelChart.types';\n\n/**\n * Funnelchart component.\n * {@docCategory FunnelChart}\n */\nexport const FunnelChart: React.FunctionComponent<IFunnelChartProps> = styled<\n  IFunnelChartProps,\n  IFunnelChartStyleProps,\n  IFunnelChartStyles\n>(FunnelChartBase, getFunnelChartStyles);\n"]}

package/lib-amd/components/FunnelChart/FunnelChart.styles.d.ts

@@ -0,0 +1,2 @@
+import { IFunnelChartStyleProps, IFunnelChartStyles } from './FunnelChart.types';
+export declare const getFunnelChartStyles: (props: IFunnelChartStyleProps) => IFunnelChartStyles;

package/lib-amd/components/FunnelChart/FunnelChart.styles.js

@@ -0,0 +1,43 @@
+define(["require", "exports", "@fluentui/react/lib/Styling"], function (require, exports, Styling_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getFunnelChartStyles = void 0;
+    var getFunnelChartStyles = function (props) {
+        var theme = props.theme, className = props.className, chartWidth = props.chartWidth, chartHeight = props.chartHeight;
+        return {
+            // root: { minHeight: '200px', minWidth: '200px', position: 'relative' },
+            root: [
+                theme.fonts.medium,
+                'ms-FunnelChart',
+                {
+                    alignItems: 'center',
+                    width: '100%',
+                    height: '100%',
+                },
+                className,
+            ],
+            chart: {
+                display: 'block',
+                width: chartWidth,
+                height: chartHeight,
+            },
+            text: [
+                theme.fonts.medium,
+                {
+                    pointerEvents: 'none',
+                    fontWeight: Styling_1.FontWeights.semibold,
+                    fill: theme.palette.neutralPrimary,
+                },
+            ],
+            subComponentStyles: {
+                calloutStyles: {
+                    root: {
+                        maxWidth: '238px',
+                    },
+                },
+            },
+        };
+    };
+    exports.getFunnelChartStyles = getFunnelChartStyles;
+});
+//# sourceMappingURL=FunnelChart.styles.js.map

package/lib-amd/components/FunnelChart/FunnelChart.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FunnelChart.styles.js","sourceRoot":"../src/","sources":["components/FunnelChart/FunnelChart.styles.ts"],"names":[],"mappings":";;;;IAGO,IAAM,oBAAoB,GAAG,UAAC,KAA6B;QACxD,IAAA,KAAK,GAAyC,KAAK,MAA9C,EAAE,SAAS,GAA8B,KAAK,UAAnC,EAAE,UAAU,GAAkB,KAAK,WAAvB,EAAE,WAAW,GAAK,KAAK,YAAV,CAAW;QAC5D,OAAO;YACL,yEAAyE;YACzE,IAAI,EAAE;gBACJ,KAAK,CAAC,KAAK,CAAC,MAAM;gBAClB,gBAAgB;gBAChB;oBACE,UAAU,EAAE,QAAQ;oBACpB,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;iBACf;gBACD,SAAS;aACV;YACD,KAAK,EAAE;gBACL,OAAO,EAAE,OAAO;gBAChB,KAAK,EAAE,UAAU;gBACjB,MAAM,EAAE,WAAW;aACpB;YACD,IAAI,EAAE;gBACJ,KAAK,CAAC,KAAK,CAAC,MAAM;gBAClB;oBACE,aAAa,EAAE,MAAM;oBACrB,UAAU,EAAE,qBAAW,CAAC,QAAQ;oBAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;iBACnC;aACF;YACD,kBAAkB,EAAE;gBAClB,aAAa,EAAE;oBACb,IAAI,EAAE;wBACJ,QAAQ,EAAE,OAAO;qBAClB;iBACF;aACF;SACF,CAAC;IACJ,CAAC,CAAC;IAnCW,QAAA,oBAAoB,wBAmC/B","sourcesContent":["import { FontWeights } from '@fluentui/react/lib/Styling';\nimport { IFunnelChartStyleProps, IFunnelChartStyles } from './FunnelChart.types';\n\nexport const getFunnelChartStyles = (props: IFunnelChartStyleProps): IFunnelChartStyles => {\n  const { theme, className, chartWidth, chartHeight } = props;\n  return {\n    // root: { minHeight: '200px', minWidth: '200px', position: 'relative' },\n    root: [\n      theme.fonts.medium,\n      'ms-FunnelChart',\n      {\n        alignItems: 'center',\n        width: '100%',\n        height: '100%',\n      },\n      className,\n    ],\n    chart: {\n      display: 'block',\n      width: chartWidth,\n      height: chartHeight,\n    },\n    text: [\n      theme.fonts.medium,\n      {\n        pointerEvents: 'none',\n        fontWeight: FontWeights.semibold,\n        fill: theme.palette.neutralPrimary,\n      },\n    ],\n    subComponentStyles: {\n      calloutStyles: {\n        root: {\n          maxWidth: '238px',\n        },\n      },\n    },\n  };\n};\n"]}

package/lib-amd/components/FunnelChart/FunnelChart.types.d.ts

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
+import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import { ICalloutContentStyleProps, ICalloutContentStyles } from '@fluentui/react/lib/Callout';
+import { ILegendsProps } from '../Legends/index';
+import { ICalloutProps } from '@fluentui/react/lib/Callout';
+/**
+ * Data point for funnel chart
+ * {@docCategory FunnelChart}
+ */
+export interface IFunnelChartDataPoint {
+    /**
+     * 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 interface IFunnelChartProps {
+    /**
+     * Data points for the funnel chart
+     */
+    data: IFunnelChartDataPoint[];
+    /**
+     * 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<ILegendsProps>;
+    /**
+     * Props for the callout in the chart
+     */
+    calloutProps?: Partial<ICalloutProps>;
+    /**
+     * Theme (provided through customization)
+     */
+    theme?: ITheme;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules
+     */
+    styles?: IStyleFunctionOrObject<IFunnelChartStyleProps, IFunnelChartStyles>;
+    /**
+     * Defines the culture to localize the numbers and dates
+     */
+    culture?: string;
+    /**
+     * Reference to the chart component
+     */
+    componentRef?: React.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 interface IFunnelChartStyleProps {
+    /**
+     * Theme (provided through customization)
+     */
+    theme: ITheme;
+    /**
+     * 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 interface IFunnelChartStyles {
+    /**
+     * Styles for the root element
+     */
+    root?: IStyle;
+    /**
+     * Styles for the chart
+     */
+    chart?: IStyle;
+    /**
+     * Styles for text elements
+     */
+    text?: IStyle;
+    /**
+     * Styles for sub-components
+     */
+    subComponentStyles: {
+        calloutStyles: IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles>;
+    };
+}

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

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=FunnelChart.types.js.map

package/lib-amd/components/FunnelChart/FunnelChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FunnelChart.types.js","sourceRoot":"../src/","sources":["components/FunnelChart/FunnelChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ICalloutContentStyleProps, ICalloutContentStyles } from '@fluentui/react/lib/Callout';\nimport { ILegendsProps } from '../Legends/index';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\n\n/**\n * Data point for funnel chart\n * {@docCategory FunnelChart}\n */\nexport interface IFunnelChartDataPoint {\n  /**\n   * Stage name or identifier\n   */\n  stage: string | number;\n  /**\n   * Sub-values for stacked funnel charts\n   * Each sub-value represents a category within the stage\n   */\n  subValues?: Array<{ category: string; value: number; color: string }>;\n  /**\n   * Value for the stage (used for non-stacked funnel charts)\n   */\n  value?: number;\n  /**\n   * Color for the stage (used for non-stacked funnel charts)\n   */\n  color?: string;\n}\n\n/**\n * Funnel Chart component props\n * {@docCategory FunnelChart}\n */\nexport interface IFunnelChartProps {\n  /**\n   * Data points for the funnel chart\n   */\n  data: IFunnelChartDataPoint[];\n  /**\n   * Title for the chart\n   */\n  chartTitle?: string;\n  /**\n   * Width of the chart\n   */\n  width?: number;\n\n  /**\n   * Height of the chart\n   */\n  height?: number;\n\n  /**\n   * Decides whether to show/hide legends\n   * @defaultvalue false\n   */\n  hideLegend?: boolean;\n\n  /**\n   * Props for the legends in the chart\n   */\n  legendProps?: Partial<ILegendsProps>;\n\n  /**\n   * Props for the callout in the chart\n   */\n  calloutProps?: Partial<ICalloutProps>;\n\n  /**\n   * Theme (provided through customization)\n   */\n  theme?: ITheme;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules\n   */\n  styles?: IStyleFunctionOrObject<IFunnelChartStyleProps, IFunnelChartStyles>;\n\n  /**\n   * Defines the culture to localize the numbers and dates\n   */\n  culture?: string;\n\n  /**\n   * Reference to the chart component\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  componentRef?: React.RefObject<any>;\n\n  /**\n   * Additional CSS class(es) to apply to the chart\n   */\n  className?: string;\n\n  /**\n   * Orientation of the funnel chart\n   * @defaultvalue 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n}\n\n/**\n * Funnel Chart style properties\n * {@docCategory FunnelChart}\n */\nexport interface IFunnelChartStyleProps {\n  /**\n   * Theme (provided through customization)\n   */\n  theme: ITheme;\n  /**\n   * Additional CSS class(es) to apply to the chart\n   */\n  className?: string;\n  /**\n   * Width of the chart\n   */\n  chartWidth: number;\n  /**\n   * Height of the chart\n   */\n  chartHeight: number;\n}\n\n/**\n * Funnel Chart styles\n * {@docCategory FunnelChart}\n */\nexport interface IFunnelChartStyles {\n  /**\n   * Styles for the root element\n   */\n  root?: IStyle;\n\n  /**\n   * Styles for the chart\n   */\n  chart?: IStyle;\n\n  /**\n   * Styles for text elements\n   */\n  text?: IStyle;\n\n  /**\n   * Styles for sub-components\n   */\n  subComponentStyles: {\n    calloutStyles: IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles>;\n  };\n}\n"]}

package/lib-amd/components/FunnelChart/funnelGeometry.d.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { IFunnelChartDataPoint } from './FunnelChart.types';
+export interface IFunnelSegmentGeometry {
+    pathD: string;
+    textX: number;
+    textY: number;
+    availableWidth: number;
+}
+export interface IStackedFunnelSegmentGeometry {
+    pathD: string;
+    textX: number;
+    textY: number;
+    availableWidth: number;
+}
+interface ISubValue {
+    category: string;
+    value: number;
+    color: string;
+}
+interface IStage {
+    subValues: ISubValue[];
+}
+export declare function getHorizontalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL, }: {
+    d: IFunnelChartDataPoint;
+    i: number;
+    data: IFunnelChartDataPoint[];
+    funnelWidth: number;
+    funnelHeight: number;
+    isRTL: boolean;
+}): IFunnelSegmentGeometry;
+export declare function getVerticalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL, }: {
+    d: IFunnelChartDataPoint;
+    i: number;
+    data: IFunnelChartDataPoint[];
+    funnelWidth: number;
+    funnelHeight: number;
+    isRTL: boolean;
+}): IFunnelSegmentGeometry;
+export declare function getStackedHorizontalFunnelSegmentGeometry({ i, k, stages, totals, maxTotal, funnelWidth, funnelHeight, }: {
+    i: number;
+    k: number;
+    stages: IStage[];
+    totals: number[];
+    maxTotal: number;
+    funnelWidth: number;
+    funnelHeight: number;
+}): IStackedFunnelSegmentGeometry;
+export declare function getStackedVerticalFunnelSegmentGeometry({ i, k, stages, totals, maxTotal, funnelWidth, funnelHeight, }: {
+    i: number;
+    k: number;
+    stages: IStage[];
+    totals: number[];
+    maxTotal: number;
+    funnelWidth: number;
+    funnelHeight: number;
+}): IStackedFunnelSegmentGeometry;
+export declare function getSegmentTextProps({ availableWidth, minTextWidth, textX, textY, value, culture, onMouseOver, onMouseMove, onMouseOut, }: {
+    availableWidth: number;
+    minTextWidth?: number;
+    textX: number;
+    textY: number;
+    value: number;
+    culture: string | undefined;
+    onMouseOver: (event: React.MouseEvent<SVGElement>) => void;
+    onMouseMove: (event: React.MouseEvent<SVGElement>) => void;
+    onMouseOut: () => void;
+}): {
+    show: boolean;
+    x: number;
+    y: number;
+    value: number;
+    culture: string | undefined;
+    onMouseOver: (event: React.MouseEvent<SVGElement>) => void;
+    onMouseMove: (event: React.MouseEvent<SVGElement>) => void;
+    onMouseOut: () => void;
+};
+export {};