@fluentui/react-charting 5.24.9 → 5.24.11

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

@@ -0,0 +1,266 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';
+import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
+import { Legends } from '../Legends/index';
+import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
+import { ChartHoverCard } from '../../utilities/ChartHoverCard/ChartHoverCard';
+import { formatToLocaleString } from '@fluentui/chart-utilities';
+import { toImage as convertToImage } from '../../utilities/image-export-utils';
+import { getContrastTextColor } from '../../utilities/utilities';
+import { getHorizontalFunnelSegmentGeometry, getVerticalFunnelSegmentGeometry, getSegmentTextProps, getStackedHorizontalFunnelSegmentGeometry, getStackedVerticalFunnelSegmentGeometry, } from './funnelGeometry';
+var getClassNames = classNamesFunction();
+export var FunnelChartBase = React.forwardRef(function (props, forwardedRef) {
+    var _a;
+    var _tooltipId = getId('FunnelChartTooltipId_');
+    var _emptyChartId = getId('_FunnelChart_empty');
+    var isRTL = 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 convertToImage(chartContainerRef.current, (_a = legendsRef.current) === null || _a === void 0 ? void 0 : _a.toSVG, 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 }, 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 = getContrastTextColor(fill, props.theme);
+        return (React.createElement("g", { key: key },
+            React.createElement("path", __assign({ d: pathD, fill: fill, opacity: opacity }, eventHandlers)),
+            textProps && React.createElement("g", __assign({}, eventHandlers), _renderSegmentText(__assign(__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'
+                ? getHorizontalFunnelSegmentGeometry({ d: d, i: i, data: data, funnelWidth: funnelWidth, funnelHeight: funnelHeight, isRTL: isRTL })
+                : 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 = getSegmentTextProps(__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 (__assign(__assign({}, s), { subValues: s.subValues || [] })); });
+        var geom = props.orientation === 'horizontal'
+            ? getStackedHorizontalFunnelSegmentGeometry(__assign(__assign({}, geometryParams), { stages: stagesWithSubValues, i: stageIndex, k: subValueIndex }))
+            : getStackedVerticalFunnelSegmentGeometry(__assign(__assign({}, geometryParams), { stages: stagesWithSubValues, i: stageIndex, k: subValueIndex }));
+        var minTextWidth = 16;
+        var eventHandlerProps = _getEventHandlerProps({ stage: stage.stage, subValue: subValue });
+        var textProps = getSegmentTextProps(__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(Legends, __assign({ ref: legendsRef, legends: legends, centerLegends: true, onChange: _onLegendSelectionChangeCallback }, props.legendProps))));
+    }
+    function _isChartEmpty() {
+        return !(props.data && props.data.length > 0);
+    }
+    var calloutProps = __assign({ isCalloutVisible: isCalloutVisible, directionalHint: 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(FocusZone, { direction: 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, __assign({}, calloutProps),
+                    React.createElement(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' }));
+});
+FunnelChartBase.displayName = 'FunnelChart';
+// eslint-disable-next-line @typescript-eslint/no-deprecated
+FunnelChartBase.defaultProps = {
+    orientation: 'horizontal',
+};
+//# sourceMappingURL=FunnelChart.base.js.map

package/lib/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/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/components/FunnelChart/FunnelChart.js

@@ -0,0 +1,9 @@
+import { styled } from '@fluentui/react';
+import { FunnelChartBase } from './FunnelChart.base';
+import { getFunnelChartStyles } from './FunnelChart.styles';
+/**
+ * Funnelchart component.
+ * {@docCategory FunnelChart}
+ */
+export var FunnelChart = styled(FunnelChartBase, getFunnelChartStyles);
+//# sourceMappingURL=FunnelChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FunnelChart.js","sourceRoot":"../src/","sources":["components/FunnelChart/FunnelChart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAG5D;;;GAGG;AACH,MAAM,CAAC,IAAM,WAAW,GAA+C,MAAM,CAI3E,eAAe,EAAE,oBAAoB,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/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/components/FunnelChart/FunnelChart.styles.js

@@ -0,0 +1,38 @@
+import { FontWeights } from '@fluentui/react/lib/Styling';
+export 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: FontWeights.semibold,
+                fill: theme.palette.neutralPrimary,
+            },
+        ],
+        subComponentStyles: {
+            calloutStyles: {
+                root: {
+                    maxWidth: '238px',
+                },
+            },
+        },
+    };
+};
+//# sourceMappingURL=FunnelChart.styles.js.map

package/lib/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":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAG1D,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAAC,KAA6B;IACxD,IAAA,KAAK,GAAyC,KAAK,MAA9C,EAAE,SAAS,GAA8B,KAAK,UAAnC,EAAE,UAAU,GAAkB,KAAK,WAAvB,EAAE,WAAW,GAAK,KAAK,YAAV,CAAW;IAC5D,OAAO;QACL,yEAAyE;QACzE,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB,gBAAgB;YAChB;gBACE,UAAU,EAAE,QAAQ;gBACpB,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;aACf;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE,UAAU;YACjB,MAAM,EAAE,WAAW;SACpB;QACD,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB;gBACE,aAAa,EAAE,MAAM;gBACrB,UAAU,EAAE,WAAW,CAAC,QAAQ;gBAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aACnC;SACF;QACD,kBAAkB,EAAE;YAClB,aAAa,EAAE;gBACb,IAAI,EAAE;oBACJ,QAAQ,EAAE,OAAO;iBAClB;aACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC","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/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/components/FunnelChart/FunnelChart.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=FunnelChart.types.js.map

package/lib/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/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 {};