npm - @fluentui/react-charting - Versions diffs - 5.25.5 → 5.25.6 - Mend

@fluentui/react-charting 5.25.5 → 5.25.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (344) hide show

package/lib-amd/components/DonutChart/DonutChart.base.d.ts CHANGED Viewed

@@ -38,6 +38,7 @@ export declare class DonutChartBase extends React.Component<IDonutChartProps, ID
     get chartContainer(): HTMLElement | null;
     toImage: (opts?: IImageExportOptions) => Promise<string>;
     private _closeCallout;
+    private _getTitleHeight;
     private _elevateToMinimums;
     private _setViewBox;
     private _createLegends;

package/lib-amd/components/DonutChart/DonutChart.base.js CHANGED Viewed

@@ -121,9 +121,10 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
         };
         DonutChartBase.prototype.componentDidMount = function () {
             if (this._rootElem) {
+                var titleHeight = this._getTitleHeight();
                 this.setState({
                     _width: this._rootElem.offsetWidth,
-                    _height: this._rootElem.offsetHeight - LEGEND_CONTAINER_HEIGHT,
+                    _height: this._rootElem.offsetHeight - LEGEND_CONTAINER_HEIGHT - titleHeight,
                 });
             }
         };
@@ -147,6 +148,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             var legendBars = this._createLegends(points.filter(function (d) { return d.data >= 0; }));
             var donutMarginHorizontal = this.props.hideLabels ? 0 : 80;
             var donutMarginVertical = this.props.hideLabels ? 0 : 40;
+            var titleHeight = this._getTitleHeight();
             var outerRadius = Math.min(this.state._width - donutMarginHorizontal, this.state._height - donutMarginVertical) / 2;
             var chartData = this._elevateToMinimums(points);
             var valueInsideDonut = this.props.innerRadius > index_3.MIN_DONUT_RADIUS
@@ -158,11 +160,13 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 this.props.xAxisAnnotation && (React.createElement("text", { className: this._classNames.axisAnnotation, x: this.state._width / 2, y: this.state._height - 10, textAnchor: "middle" }, this.props.xAxisAnnotation)),
                 React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal, handleTabKey: react_focus_1.FocusZoneTabbableElements.all, className: this._classNames.chartWrapper },
                     React.createElement("svg", { className: this._classNames.chart, "aria-label": data === null || data === void 0 ? void 0 : data.chartTitle, ref: function (node) { return _this._setViewBox(node); }, width: this.state._width, height: this.state._height },
-                        React.createElement(index_2.Pie, { width: this.state._width, height: this.state._height, outerRadius: outerRadius, innerRadius: this.props.innerRadius, data: chartData, enableGradient: this.props.enableGradient, roundCorners: this.props.roundCorners, onFocusCallback: this._focusCallback, hoverOnCallback: this._hoverCallback, hoverLeaveCallback: this._hoverLeave, uniqText: this._uniqText, onBlurCallback: this._onBlur, activeArc: this._getHighlightedLegend(), focusedArcId: this.state.focusedArcId || '', href: this.props.href, calloutId: this._calloutId, valueInsideDonut: this._toLocaleString(valueInsideDonut), theme: this.props.theme, showLabelsInPercent: this.props.showLabelsInPercent, hideLabels: this.props.hideLabels }))),
+                        !hideLegend && (data === null || data === void 0 ? void 0 : data.chartTitle) && (React.createElement(index_3.ChartTitle, { title: data.chartTitle, x: this.state._width / 2, maxWidth: this.state._width - 20, className: this._classNames.chartTitle, titleStyles: this.props.titleStyles, tooltipClassName: this._classNames.svgTooltip })),
+                        React.createElement("g", { transform: "translate(0, ".concat(titleHeight, ")") },
+                            React.createElement(index_2.Pie, { width: this.state._width, height: this.state._height, outerRadius: outerRadius, innerRadius: this.props.innerRadius, data: chartData, enableGradient: this.props.enableGradient, roundCorners: this.props.roundCorners, onFocusCallback: this._focusCallback, hoverOnCallback: this._hoverCallback, hoverLeaveCallback: this._hoverLeave, uniqText: this._uniqText, onBlurCallback: this._onBlur, activeArc: this._getHighlightedLegend(), focusedArcId: this.state.focusedArcId || '', href: this.props.href, calloutId: this._calloutId, valueInsideDonut: this._toLocaleString(valueInsideDonut), theme: this.props.theme, showLabelsInPercent: this.props.showLabelsInPercent, hideLabels: this.props.hideLabels })))),
                 React.createElement(Callout_1.Callout, tslib_1.__assign({ target: this._currentHoverElement, alignTargetEdge: true, isBeakVisible: false, directionalHint: Callout_1.DirectionalHint.topAutoEdge, gapSpace: 15, hidden: !(!this.props.hideTooltip && this.state.showHover), id: this._calloutId, onDismiss: this._closeCallout, preventDismissOnLostFocus: true,
                     /** Keep the callout updated with details of focused/hovered arc */
                     shouldUpdateWhenHidden: true }, this.props.calloutProps, (0, index_3.getAccessibleDataObject)(this.state.callOutAccessibilityData, 'text', false)), this.props.onRenderCalloutPerDataPoint ? (this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)) : (React.createElement(index_1.ChartHoverCard, { Legend: this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.value, color: this.state.color, culture: this.props.culture }))),
-                !hideLegend && React.createElement("div", { className: this._classNames.legendContainer }, legendBars))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
+                !hideLegend && (React.createElement("div", { className: this._classNames.legendContainer, style: { marginTop: titleHeight } }, legendBars)))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
         };
         Object.defineProperty(DonutChartBase.prototype, "chartContainer", {
             get: function () {
@@ -171,6 +175,14 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             enumerable: false,
             configurable: true
         });
+        DonutChartBase.prototype._getTitleHeight = function () {
+            var _a, _b;
+            var data = this.props.data;
+            return (data === null || data === void 0 ? void 0 : data.chartTitle)
+                ? Math.max((typeof ((_b = (_a = this.props.titleStyles) === null || _a === void 0 ? void 0 : _a.titleFont) === null || _b === void 0 ? void 0 : _b.size) === 'number' ? this.props.titleStyles.titleFont.size : 13) +
+                    index_3.CHART_TITLE_PADDING, 36)
+                : 0;
+        };
         DonutChartBase.prototype._elevateToMinimums = function (data) {
             var sumOfData = 0;
             var minPercent = 0.01;

package/lib-amd/components/DonutChart/DonutChart.base.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DonutChart.base.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities';\nimport { ScaleOrdinal } from 'd3-scale';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';\nimport { IAccessibilityProps, ChartHoverCard, ILegend, Legends } from '../../index';\nimport { Pie } from './Pie/index';\nimport { IChartDataPoint, IDonutChartProps, IDonutChartStyleProps, IDonutChartStyles } from './index';\nimport {\n getAccessibleDataObject,\n getColorFromToken,\n getNextColor,\n getNextGradient,\n areArraysEqual,\n MIN_DONUT_RADIUS,\n} from '../../utilities/index';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { IChart, IImageExportOptions } from '../../types/index';\nimport { exportChartsAsImage } from '../../utilities/image-export-utils';\nimport { ILegendContainer } from '../Legends/index';\nimport type { JSXElement } from '@fluentui/utilities';\n\nconst getClassNames = classNamesFunction<IDonutChartStyleProps, IDonutChartStyles>();\nconst LEGEND_CONTAINER_HEIGHT = 40;\n\nexport interface IDonutChartState {\n showHover?: boolean;\n value?: string \| undefined;\n legend?: string \| undefined;\n _width?: number \| undefined;\n _height?: number \| undefined;\n activeLegend?: string;\n color?: string \| undefined;\n xCalloutValue?: string;\n yCalloutValue?: string;\n focusedArcId?: string;\n dataPointCalloutProps?: IChartDataPoint;\n callOutAccessibilityData?: IAccessibilityProps;\n selectedLegends: string[];\n}\n\nexport class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> implements IChart {\n public static defaultProps: Partial<IDonutChartProps> = {\n innerRadius: 0,\n hideLabels: true,\n };\n public _colors: ScaleOrdinal<string, {}>;\n private _classNames: IProcessedStyleSet<IDonutChartStyles>;\n private _rootElem: HTMLElement \| null;\n private _uniqText: string;\n /* eslint-disable @typescript-eslint/no-explicit-any /\n private _currentHoverElement: any;\n private _calloutId: string;\n private _calloutAnchorPoint: IChartDataPoint \| null;\n private _emptyChartId: string \| null;\n private _legendsRef: React.RefObject<ILegendContainer \| null>;\n\n public static getDerivedStateFromProps(\n nextProps: Readonly<IDonutChartProps>,\n prevState: Readonly<IDonutChartState>,\n ): Partial<IDonutChartState> \| null {\n let widthState: { _width: number } \| undefined;\n if (nextProps.width && nextProps.width !== prevState._width) {\n widthState = { _width: nextProps.width };\n }\n\n let heightState: { _height: number } \| undefined;\n if (nextProps.height && nextProps.height !== prevState._height) {\n heightState = { _height: nextProps.height - LEGEND_CONTAINER_HEIGHT };\n }\n\n return { ...widthState, ...heightState };\n }\n\n constructor(props: IDonutChartProps) {\n super(props);\n\n initializeComponentRef(this);\n\n this.state = {\n showHover: false,\n value: '',\n legend: '',\n _width: this.props.width \|\| 200,\n _height: this.props.height \|\| 200,\n activeLegend: undefined,\n color: '',\n xCalloutValue: '',\n yCalloutValue: '',\n focusedArcId: '',\n selectedLegends: props.legendProps?.selectedLegends \|\| [],\n };\n this._hoverCallback = this._hoverCallback.bind(this);\n this._focusCallback = this._focusCallback.bind(this);\n this._hoverLeave = this._hoverLeave.bind(this);\n this._calloutId = getId('callout');\n this._uniqText = getId('_Pie_');\n this._emptyChartId = getId('_DonutChart_empty');\n this._legendsRef = React.createRef();\n }\n\n public componentDidMount(): void {\n if (this._rootElem) {\n this.setState({\n _width: this._rootElem.offsetWidth,\n _height: this._rootElem.offsetHeight - LEGEND_CONTAINER_HEIGHT,\n });\n }\n }\n\n public componentDidUpdate(prevProps: IDonutChartProps): void {\n if (!areArraysEqual(prevProps.legendProps?.selectedLegends, this.props.legendProps?.selectedLegends)) {\n this.setState({\n selectedLegends: this.props.legendProps?.selectedLegends \|\| [],\n });\n }\n }\n\n public render(): JSXElement {\n const { data, hideLegend = false } = this.props;\n const points = this._addDefaultColors(data?.chartData);\n\n this._classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n color: this.state.color!,\n className: this.props.className!,\n });\n\n const legendBars = this._createLegends(points.filter(d => d.data! >= 0));\n const donutMarginHorizontal = this.props.hideLabels ? 0 : 80;\n const donutMarginVertical = this.props.hideLabels ? 0 : 40;\n const outerRadius =\n Math.min(this.state._width! - donutMarginHorizontal, this.state._height! - donutMarginVertical) / 2;\n const chartData = this._elevateToMinimums(points);\n const valueInsideDonut =\n this.props.innerRadius! > MIN_DONUT_RADIUS\n ? this._valueInsideDonut(this.props.valueInsideDonut!, chartData!)\n : '';\n return !this._isChartEmpty() ? (\n <div\n className={this._classNames.root}\n ref={(rootElem: HTMLElement \| null) => {\n this._rootElem = rootElem;\n }}\n onMouseLeave={this._handleChartMouseLeave}\n >\n {this.props.xAxisAnnotation && (\n <text\n className={this._classNames.axisAnnotation}\n x={this.state._width! / 2}\n y={this.state._height! - 10}\n textAnchor=\"middle\"\n >\n {this.props.xAxisAnnotation}\n </text>\n )}\n <FocusZone\n direction={FocusZoneDirection.horizontal}\n handleTabKey={FocusZoneTabbableElements.all}\n className={this._classNames.chartWrapper}\n >\n <svg\n className={this._classNames.chart}\n aria-label={data?.chartTitle}\n ref={(node: SVGElement \| null) => this._setViewBox(node)}\n width={this.state._width}\n height={this.state._height}\n >\n <Pie\n width={this.state._width!}\n height={this.state._height!}\n outerRadius={outerRadius}\n innerRadius={this.props.innerRadius!}\n data={chartData!}\n enableGradient={this.props.enableGradient}\n roundCorners={this.props.roundCorners}\n onFocusCallback={this._focusCallback}\n hoverOnCallback={this._hoverCallback}\n hoverLeaveCallback={this._hoverLeave}\n uniqText={this._uniqText}\n onBlurCallback={this._onBlur}\n activeArc={this._getHighlightedLegend()}\n focusedArcId={this.state.focusedArcId \|\| ''}\n href={this.props.href!}\n calloutId={this._calloutId}\n valueInsideDonut={this._toLocaleString(valueInsideDonut)}\n theme={this.props.theme!}\n showLabelsInPercent={this.props.showLabelsInPercent}\n hideLabels={this.props.hideLabels}\n />\n </svg>\n </FocusZone>\n <Callout\n target={this._currentHoverElement}\n alignTargetEdge={true}\n isBeakVisible={false}\n directionalHint={DirectionalHint.topAutoEdge}\n gapSpace={15}\n hidden={!(!this.props.hideTooltip && this.state.showHover)}\n id={this._calloutId}\n onDismiss={this._closeCallout}\n preventDismissOnLostFocus={true}\n /* Keep the callout updated with details of focused/hovered arc /\n shouldUpdateWhenHidden={true}\n {...this.props.calloutProps!}\n {...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)}\n >\n {this.props.onRenderCalloutPerDataPoint ? (\n this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps!)\n ) : (\n <ChartHoverCard\n Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend}\n YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.value}\n color={this.state.color}\n culture={this.props.culture}\n />\n )}\n </Callout>\n {!hideLegend && <div className={this._classNames.legendContainer}>{legendBars}</div>}\n </div>\n ) : (\n <div\n id={this._emptyChartId!}\n role={'alert'}\n style={{ opacity: '0' }}\n aria-label={'Graph has no data to display'}\n />\n );\n }\n\n public get chartContainer(): HTMLElement \| null {\n return this._rootElem;\n }\n\n public toImage = (opts?: IImageExportOptions): Promise<string> => {\n return exportChartsAsImage(\n [{ container: this._rootElem }],\n this.props.hideLegend ? undefined : this._legendsRef.current?.toSVG,\n getRTL(),\n opts,\n );\n };\n\n private _closeCallout = () => {\n this.setState({\n showHover: false,\n });\n };\n\n private _elevateToMinimums(data: IChartDataPoint[]) {\n let sumOfData = 0;\n const minPercent = 0.01;\n const elevatedData: IChartDataPoint[] = [];\n data.forEach(item => {\n sumOfData += item.data!;\n });\n data.forEach(item => {\n elevatedData.push(\n minPercent sumOfData > item.data! && item.data! > 0\n ? {\n ...item,\n data: minPercent * sumOfData,\n yAxisCalloutData:\n item.yAxisCalloutData === undefined ? item.data!.toLocaleString() : item.yAxisCalloutData,\n }\n : item,\n );\n });\n return elevatedData;\n }\n private _setViewBox(node: SVGElement \| null): void {\n if (node === null) {\n return;\n }\n\n const widthVal = node.parentElement ? node.parentElement.clientWidth : this.state._width;\n\n const heightVal =\n node.parentElement && node.parentElement?.offsetHeight > this.state._height!\n ? node.parentElement?.offsetHeight\n : this.state._height;\n const viewbox = `0 0 ${widthVal!} ${heightVal!}`;\n node.setAttribute('viewBox', viewbox);\n }\n\n private _createLegends(chartData: IChartDataPoint[]): JSXElement {\n if (this.props.order === 'sorted') {\n chartData.sort((a: IChartDataPoint, b: IChartDataPoint) => {\n return b.data! - a.data!;\n });\n }\n const legendDataItems = chartData.map((point: IChartDataPoint, index: number) => {\n const color: string = this.props.enableGradient\n ? point.gradient?.[0] \|\| getNextGradient(index, 0, this.props.theme?.isInverted)[0]\n : point.color!;\n\n // mapping data to the format Legends component needs\n const legend: ILegend = {\n title: point.legend!,\n color,\n hoverAction: () => {\n this._handleChartMouseLeave();\n this.setState({ activeLegend: point.legend! });\n },\n onMouseOutAction: () => {\n this.setState({ activeLegend: undefined });\n },\n };\n return legend;\n });\n\n const legends = (\n <Legends\n legends={legendDataItems}\n centerLegends\n overflowProps={this.props.legendsOverflowProps}\n focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n overflowText={this.props.legendsOverflowText}\n {...this.props.legendProps}\n // eslint-disable-next-line react/jsx-no-bind\n onChange={this._onLegendSelectionChange.bind(this)}\n ref={this._legendsRef}\n />\n );\n return legends;\n }\n\n private _onLegendSelectionChange(\n selectedLegends: string[],\n event: React.MouseEvent<HTMLButtonElement>,\n currentLegend?: ILegend,\n ): void {\n if (this.props.legendProps && this.props.legendProps?.canSelectMultipleLegends) {\n this.setState({ selectedLegends });\n } else {\n this.setState({ selectedLegends: selectedLegends.slice(-1) });\n }\n if (this.props.legendProps?.onChange) {\n this.props.legendProps.onChange(selectedLegends, event, currentLegend);\n }\n }\n\n private _focusCallback = (data: IChartDataPoint, id: string, element: SVGPathElement): void => {\n this._currentHoverElement = element;\n this.setState({\n /** Show the callout if highlighted arc is focused and Hide it if unhighlighted arc is focused /\n showHover: this._noLegendsHighlighted() \|\| this._isLegendHighlighted(data.legend),\n value: data.data!.toString(),\n legend: data.legend,\n color: data.color!,\n xCalloutValue: data.xAxisCalloutData!,\n yCalloutValue: data.yAxisCalloutData!,\n focusedArcId: id,\n dataPointCalloutProps: data,\n callOutAccessibilityData: data.callOutAccessibilityData!,\n });\n };\n\n private _hoverCallback = (data: IChartDataPoint, e: React.MouseEvent<SVGPathElement>): void => {\n if (this._calloutAnchorPoint !== data) {\n this._calloutAnchorPoint = data;\n this._currentHoverElement = e;\n let color: string = data.color!;\n\n if (this.props.enableGradient) {\n const pointIndex = Math.max(this.props.data?.chartData?.findIndex(item => item.legend === data.legend) \|\| 0, 0);\n color = data.gradient?.[0] \|\| getNextGradient(pointIndex, 0, this.props.theme?.isInverted)[0];\n }\n\n this.setState({\n /* Show the callout if highlighted arc is hovered and Hide it if unhighlighted arc is hovered /\n showHover: this._noLegendsHighlighted() \|\| this._isLegendHighlighted(data.legend),\n value: data.data!.toString(),\n legend: data.legend,\n color,\n xCalloutValue: data.xAxisCalloutData!,\n yCalloutValue: data.yAxisCalloutData!,\n dataPointCalloutProps: data,\n callOutAccessibilityData: data.callOutAccessibilityData!,\n });\n }\n };\n private _onBlur = (): void => {\n this.setState({ focusedArcId: '' });\n };\n\n private _hoverLeave(): void {\n //\n }\n\n private _handleChartMouseLeave = () => {\n this._calloutAnchorPoint = null;\n this.setState({ showHover: false });\n };\n\n private _valueInsideDonut(valueInsideDonut: string \| number \| undefined, data: IChartDataPoint[]) {\n const highlightedLegends = this._getHighlightedLegend();\n if (valueInsideDonut !== undefined && (highlightedLegends.length === 1 \|\| this.state.showHover)) {\n const pointValue = data.find(point => this._isLegendHighlighted(point.legend));\n return pointValue\n ? pointValue.yAxisCalloutData\n ? pointValue.yAxisCalloutData\n : pointValue.data!\n : valueInsideDonut;\n } else if (highlightedLegends.length > 0) {\n let totalValue = 0;\n data.forEach(point => {\n if (highlightedLegends.includes(point.legend!)) {\n totalValue += point.data!;\n }\n });\n return totalValue;\n } else {\n return valueInsideDonut;\n }\n }\n\n private _toLocaleString(data: string \| number \| undefined) {\n const localeString = formatToLocaleString(data, this.props.culture, this.props.useUTC);\n if (!localeString) {\n return data;\n }\n return localeString?.toString();\n }\n\n /\n This function returns\n * the selected legend if there is one\n * or the hovered legend if none of the legends is selected.\n */\n private _getHighlightedLegend() {\n return this.state.selectedLegends.length > 0\n ? this.state.selectedLegends\n : this.state.activeLegend\n ? [this.state.activeLegend]\n : [];\n }\n\n private _isLegendHighlighted = (legend: string \| undefined): boolean => {\n return this._getHighlightedLegend().includes(legend!);\n };\n\n private _noLegendsHighlighted = (): boolean => {\n return this._getHighlightedLegend().length === 0;\n };\n\n private _isChartEmpty(): boolean {\n return !(\n this.props.data &&\n this.props.data.chartData &&\n this.props.data.chartData!.filter((d: IChartDataPoint) => d.data! > 0).length > 0\n );\n }\n\n private _addDefaultColors = (donutChartDataPoint?: IChartDataPoint[]): IChartDataPoint[] => {\n return donutChartDataPoint\n ? donutChartDataPoint.map((item, index) => {\n let color: string;\n // isInverted property is applicable to v8 themes only\n if (typeof item.color === 'undefined') {\n color = getNextColor(index, 0, this.props.theme?.isInverted);\n } else {\n color = getColorFromToken(item.color, this.props.theme?.isInverted);\n }\n\n return { ...item, color };\n })\n : [];\n };\n}\n"]}
1	+ {"version":3,"file":"DonutChart.base.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities';\nimport { ScaleOrdinal } from 'd3-scale';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';\nimport { IAccessibilityProps, ChartHoverCard, ILegend, Legends } from '../../index';\nimport { Pie } from './Pie/index';\nimport { IChartDataPoint, IDonutChartProps, IDonutChartStyleProps, IDonutChartStyles } from './index';\nimport {\n getAccessibleDataObject,\n getColorFromToken,\n getNextColor,\n getNextGradient,\n areArraysEqual,\n MIN_DONUT_RADIUS,\n ChartTitle,\n CHART_TITLE_PADDING,\n} from '../../utilities/index';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { IChart, IImageExportOptions } from '../../types/index';\nimport { exportChartsAsImage } from '../../utilities/image-export-utils';\nimport { ILegendContainer } from '../Legends/index';\nimport type { JSXElement } from '@fluentui/utilities';\n\nconst getClassNames = classNamesFunction<IDonutChartStyleProps, IDonutChartStyles>();\nconst LEGEND_CONTAINER_HEIGHT = 40;\n\nexport interface IDonutChartState {\n showHover?: boolean;\n value?: string \| undefined;\n legend?: string \| undefined;\n _width?: number \| undefined;\n _height?: number \| undefined;\n activeLegend?: string;\n color?: string \| undefined;\n xCalloutValue?: string;\n yCalloutValue?: string;\n focusedArcId?: string;\n dataPointCalloutProps?: IChartDataPoint;\n callOutAccessibilityData?: IAccessibilityProps;\n selectedLegends: string[];\n}\n\nexport class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> implements IChart {\n public static defaultProps: Partial<IDonutChartProps> = {\n innerRadius: 0,\n hideLabels: true,\n };\n public _colors: ScaleOrdinal<string, {}>;\n private _classNames: IProcessedStyleSet<IDonutChartStyles>;\n private _rootElem: HTMLElement \| null;\n private _uniqText: string;\n /* eslint-disable @typescript-eslint/no-explicit-any /\n private _currentHoverElement: any;\n private _calloutId: string;\n private _calloutAnchorPoint: IChartDataPoint \| null;\n private _emptyChartId: string \| null;\n private _legendsRef: React.RefObject<ILegendContainer \| null>;\n\n public static getDerivedStateFromProps(\n nextProps: Readonly<IDonutChartProps>,\n prevState: Readonly<IDonutChartState>,\n ): Partial<IDonutChartState> \| null {\n let widthState: { _width: number } \| undefined;\n if (nextProps.width && nextProps.width !== prevState._width) {\n widthState = { _width: nextProps.width };\n }\n\n let heightState: { _height: number } \| undefined;\n if (nextProps.height && nextProps.height !== prevState._height) {\n heightState = { _height: nextProps.height - LEGEND_CONTAINER_HEIGHT };\n }\n\n return { ...widthState, ...heightState };\n }\n\n constructor(props: IDonutChartProps) {\n super(props);\n\n initializeComponentRef(this);\n\n this.state = {\n showHover: false,\n value: '',\n legend: '',\n _width: this.props.width \|\| 200,\n _height: this.props.height \|\| 200,\n activeLegend: undefined,\n color: '',\n xCalloutValue: '',\n yCalloutValue: '',\n focusedArcId: '',\n selectedLegends: props.legendProps?.selectedLegends \|\| [],\n };\n this._hoverCallback = this._hoverCallback.bind(this);\n this._focusCallback = this._focusCallback.bind(this);\n this._hoverLeave = this._hoverLeave.bind(this);\n this._calloutId = getId('callout');\n this._uniqText = getId('_Pie_');\n this._emptyChartId = getId('_DonutChart_empty');\n this._legendsRef = React.createRef();\n }\n\n public componentDidMount(): void {\n if (this._rootElem) {\n const titleHeight = this._getTitleHeight();\n this.setState({\n _width: this._rootElem.offsetWidth,\n _height: this._rootElem.offsetHeight - LEGEND_CONTAINER_HEIGHT - titleHeight,\n });\n }\n }\n\n public componentDidUpdate(prevProps: IDonutChartProps): void {\n if (!areArraysEqual(prevProps.legendProps?.selectedLegends, this.props.legendProps?.selectedLegends)) {\n this.setState({\n selectedLegends: this.props.legendProps?.selectedLegends \|\| [],\n });\n }\n }\n\n public render(): JSXElement {\n const { data, hideLegend = false } = this.props;\n const points = this._addDefaultColors(data?.chartData);\n\n this._classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n color: this.state.color!,\n className: this.props.className!,\n });\n\n const legendBars = this._createLegends(points.filter(d => d.data! >= 0));\n const donutMarginHorizontal = this.props.hideLabels ? 0 : 80;\n const donutMarginVertical = this.props.hideLabels ? 0 : 40;\n const titleHeight = this._getTitleHeight();\n const outerRadius =\n Math.min(this.state._width! - donutMarginHorizontal, this.state._height! - donutMarginVertical) / 2;\n const chartData = this._elevateToMinimums(points);\n const valueInsideDonut =\n this.props.innerRadius! > MIN_DONUT_RADIUS\n ? this._valueInsideDonut(this.props.valueInsideDonut!, chartData!)\n : '';\n return !this._isChartEmpty() ? (\n <div\n className={this._classNames.root}\n ref={(rootElem: HTMLElement \| null) => {\n this._rootElem = rootElem;\n }}\n onMouseLeave={this._handleChartMouseLeave}\n >\n {this.props.xAxisAnnotation && (\n <text\n className={this._classNames.axisAnnotation}\n x={this.state._width! / 2}\n y={this.state._height! - 10}\n textAnchor=\"middle\"\n >\n {this.props.xAxisAnnotation}\n </text>\n )}\n <FocusZone\n direction={FocusZoneDirection.horizontal}\n handleTabKey={FocusZoneTabbableElements.all}\n className={this._classNames.chartWrapper}\n >\n <svg\n className={this._classNames.chart}\n aria-label={data?.chartTitle}\n ref={(node: SVGElement \| null) => this._setViewBox(node)}\n width={this.state._width}\n height={this.state._height!}\n >\n {!hideLegend && data?.chartTitle && (\n <ChartTitle\n title={data.chartTitle}\n x={this.state._width! / 2}\n maxWidth={this.state._width! - 20}\n className={this._classNames.chartTitle}\n titleStyles={this.props.titleStyles}\n tooltipClassName={this._classNames.svgTooltip}\n />\n )}\n <g transform={`translate(0, ${titleHeight})`}>\n <Pie\n width={this.state._width!}\n height={this.state._height!}\n outerRadius={outerRadius}\n innerRadius={this.props.innerRadius!}\n data={chartData!}\n enableGradient={this.props.enableGradient}\n roundCorners={this.props.roundCorners}\n onFocusCallback={this._focusCallback}\n hoverOnCallback={this._hoverCallback}\n hoverLeaveCallback={this._hoverLeave}\n uniqText={this._uniqText}\n onBlurCallback={this._onBlur}\n activeArc={this._getHighlightedLegend()}\n focusedArcId={this.state.focusedArcId \|\| ''}\n href={this.props.href!}\n calloutId={this._calloutId}\n valueInsideDonut={this._toLocaleString(valueInsideDonut)}\n theme={this.props.theme!}\n showLabelsInPercent={this.props.showLabelsInPercent}\n hideLabels={this.props.hideLabels}\n />\n </g>\n </svg>\n </FocusZone>\n <Callout\n target={this._currentHoverElement}\n alignTargetEdge={true}\n isBeakVisible={false}\n directionalHint={DirectionalHint.topAutoEdge}\n gapSpace={15}\n hidden={!(!this.props.hideTooltip && this.state.showHover)}\n id={this._calloutId}\n onDismiss={this._closeCallout}\n preventDismissOnLostFocus={true}\n /* Keep the callout updated with details of focused/hovered arc /\n shouldUpdateWhenHidden={true}\n {...this.props.calloutProps!}\n {...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)}\n >\n {this.props.onRenderCalloutPerDataPoint ? (\n this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps!)\n ) : (\n <ChartHoverCard\n Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend}\n YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.value}\n color={this.state.color}\n culture={this.props.culture}\n />\n )}\n </Callout>\n {!hideLegend && (\n <div className={this._classNames.legendContainer} style={{ marginTop: titleHeight }}>\n {legendBars}\n </div>\n )}\n </div>\n ) : (\n <div\n id={this._emptyChartId!}\n role={'alert'}\n style={{ opacity: '0' }}\n aria-label={'Graph has no data to display'}\n />\n );\n }\n\n public get chartContainer(): HTMLElement \| null {\n return this._rootElem;\n }\n\n public toImage = (opts?: IImageExportOptions): Promise<string> => {\n return exportChartsAsImage(\n [{ container: this._rootElem }],\n this.props.hideLegend ? undefined : this._legendsRef.current?.toSVG,\n getRTL(),\n opts,\n );\n };\n\n private _closeCallout = () => {\n this.setState({\n showHover: false,\n });\n };\n\n private _getTitleHeight(): number {\n const { data } = this.props;\n return data?.chartTitle\n ? Math.max(\n (typeof this.props.titleStyles?.titleFont?.size === 'number' ? this.props.titleStyles.titleFont.size : 13) +\n CHART_TITLE_PADDING,\n 36,\n )\n : 0;\n }\n\n private _elevateToMinimums(data: IChartDataPoint[]) {\n let sumOfData = 0;\n const minPercent = 0.01;\n const elevatedData: IChartDataPoint[] = [];\n data.forEach(item => {\n sumOfData += item.data!;\n });\n data.forEach(item => {\n elevatedData.push(\n minPercent sumOfData > item.data! && item.data! > 0\n ? {\n ...item,\n data: minPercent * sumOfData,\n yAxisCalloutData:\n item.yAxisCalloutData === undefined ? item.data!.toLocaleString() : item.yAxisCalloutData,\n }\n : item,\n );\n });\n return elevatedData;\n }\n private _setViewBox(node: SVGElement \| null): void {\n if (node === null) {\n return;\n }\n\n const widthVal = node.parentElement ? node.parentElement.clientWidth : this.state._width;\n\n const heightVal =\n node.parentElement && node.parentElement?.offsetHeight > this.state._height!\n ? node.parentElement?.offsetHeight\n : this.state._height;\n const viewbox = `0 0 ${widthVal!} ${heightVal!}`;\n node.setAttribute('viewBox', viewbox);\n }\n\n private _createLegends(chartData: IChartDataPoint[]): JSXElement {\n if (this.props.order === 'sorted') {\n chartData.sort((a: IChartDataPoint, b: IChartDataPoint) => {\n return b.data! - a.data!;\n });\n }\n const legendDataItems = chartData.map((point: IChartDataPoint, index: number) => {\n const color: string = this.props.enableGradient\n ? point.gradient?.[0] \|\| getNextGradient(index, 0, this.props.theme?.isInverted)[0]\n : point.color!;\n\n // mapping data to the format Legends component needs\n const legend: ILegend = {\n title: point.legend!,\n color,\n hoverAction: () => {\n this._handleChartMouseLeave();\n this.setState({ activeLegend: point.legend! });\n },\n onMouseOutAction: () => {\n this.setState({ activeLegend: undefined });\n },\n };\n return legend;\n });\n\n const legends = (\n <Legends\n legends={legendDataItems}\n centerLegends\n overflowProps={this.props.legendsOverflowProps}\n focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n overflowText={this.props.legendsOverflowText}\n {...this.props.legendProps}\n // eslint-disable-next-line react/jsx-no-bind\n onChange={this._onLegendSelectionChange.bind(this)}\n ref={this._legendsRef}\n />\n );\n return legends;\n }\n\n private _onLegendSelectionChange(\n selectedLegends: string[],\n event: React.MouseEvent<HTMLButtonElement>,\n currentLegend?: ILegend,\n ): void {\n if (this.props.legendProps && this.props.legendProps?.canSelectMultipleLegends) {\n this.setState({ selectedLegends });\n } else {\n this.setState({ selectedLegends: selectedLegends.slice(-1) });\n }\n if (this.props.legendProps?.onChange) {\n this.props.legendProps.onChange(selectedLegends, event, currentLegend);\n }\n }\n\n private _focusCallback = (data: IChartDataPoint, id: string, element: SVGPathElement): void => {\n this._currentHoverElement = element;\n this.setState({\n /** Show the callout if highlighted arc is focused and Hide it if unhighlighted arc is focused /\n showHover: this._noLegendsHighlighted() \|\| this._isLegendHighlighted(data.legend),\n value: data.data!.toString(),\n legend: data.legend,\n color: data.color!,\n xCalloutValue: data.xAxisCalloutData!,\n yCalloutValue: data.yAxisCalloutData!,\n focusedArcId: id,\n dataPointCalloutProps: data,\n callOutAccessibilityData: data.callOutAccessibilityData!,\n });\n };\n\n private _hoverCallback = (data: IChartDataPoint, e: React.MouseEvent<SVGPathElement>): void => {\n if (this._calloutAnchorPoint !== data) {\n this._calloutAnchorPoint = data;\n this._currentHoverElement = e;\n let color: string = data.color!;\n\n if (this.props.enableGradient) {\n const pointIndex = Math.max(this.props.data?.chartData?.findIndex(item => item.legend === data.legend) \|\| 0, 0);\n color = data.gradient?.[0] \|\| getNextGradient(pointIndex, 0, this.props.theme?.isInverted)[0];\n }\n\n this.setState({\n /* Show the callout if highlighted arc is hovered and Hide it if unhighlighted arc is hovered /\n showHover: this._noLegendsHighlighted() \|\| this._isLegendHighlighted(data.legend),\n value: data.data!.toString(),\n legend: data.legend,\n color,\n xCalloutValue: data.xAxisCalloutData!,\n yCalloutValue: data.yAxisCalloutData!,\n dataPointCalloutProps: data,\n callOutAccessibilityData: data.callOutAccessibilityData!,\n });\n }\n };\n private _onBlur = (): void => {\n this.setState({ focusedArcId: '' });\n };\n\n private _hoverLeave(): void {\n //\n }\n\n private _handleChartMouseLeave = () => {\n this._calloutAnchorPoint = null;\n this.setState({ showHover: false });\n };\n\n private _valueInsideDonut(valueInsideDonut: string \| number \| undefined, data: IChartDataPoint[]) {\n const highlightedLegends = this._getHighlightedLegend();\n if (valueInsideDonut !== undefined && (highlightedLegends.length === 1 \|\| this.state.showHover)) {\n const pointValue = data.find(point => this._isLegendHighlighted(point.legend));\n return pointValue\n ? pointValue.yAxisCalloutData\n ? pointValue.yAxisCalloutData\n : pointValue.data!\n : valueInsideDonut;\n } else if (highlightedLegends.length > 0) {\n let totalValue = 0;\n data.forEach(point => {\n if (highlightedLegends.includes(point.legend!)) {\n totalValue += point.data!;\n }\n });\n return totalValue;\n } else {\n return valueInsideDonut;\n }\n }\n\n private _toLocaleString(data: string \| number \| undefined) {\n const localeString = formatToLocaleString(data, this.props.culture, this.props.useUTC);\n if (!localeString) {\n return data;\n }\n return localeString?.toString();\n }\n\n /\n This function returns\n * the selected legend if there is one\n * or the hovered legend if none of the legends is selected.\n */\n private _getHighlightedLegend() {\n return this.state.selectedLegends.length > 0\n ? this.state.selectedLegends\n : this.state.activeLegend\n ? [this.state.activeLegend]\n : [];\n }\n\n private _isLegendHighlighted = (legend: string \| undefined): boolean => {\n return this._getHighlightedLegend().includes(legend!);\n };\n\n private _noLegendsHighlighted = (): boolean => {\n return this._getHighlightedLegend().length === 0;\n };\n\n private _isChartEmpty(): boolean {\n return !(\n this.props.data &&\n this.props.data.chartData &&\n this.props.data.chartData!.filter((d: IChartDataPoint) => d.data! > 0).length > 0\n );\n }\n\n private _addDefaultColors = (donutChartDataPoint?: IChartDataPoint[]): IChartDataPoint[] => {\n return donutChartDataPoint\n ? donutChartDataPoint.map((item, index) => {\n let color: string;\n // isInverted property is applicable to v8 themes only\n if (typeof item.color === 'undefined') {\n color = getNextColor(index, 0, this.props.theme?.isInverted);\n } else {\n color = getColorFromToken(item.color, this.props.theme?.isInverted);\n }\n\n return { ...item, color };\n })\n : [];\n };\n}\n"]}

package/lib-amd/components/DonutChart/DonutChart.styles.js CHANGED Viewed

@@ -27,7 +27,9 @@ define(["require", "exports", "../../utilities/index"], function (require, expor
                 paddingTop: '16px',
                 width: '100%',
             },
+            chartTitle: (0, index_1.getChartTitleStyle)(theme),
             axisAnnotation: (0, index_1.getAxisTitleStyle)(theme, theme.fonts.small),
+            svgTooltip: (0, index_1.getSvgTooltipStyle)(theme),
         };
     };
     exports.getStyles = getStyles;

package/lib-amd/components/DonutChart/DonutChart.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DonutChart.styles.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.styles.ts"],"names":[],"mappings":";;;;IAGO,IAAM,SAAS,GAAG,UAAC,KAA4B;QAC5C,IAAA,SAAS,GAAY,KAAK,UAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QACnC,OAAO;YACL,IAAI,EAAE;gBACJ,KAAK,CAAC,KAAK,CAAC,MAAM;gBAClB,eAAe;gBACf;oBACE,UAAU,EAAE,QAAQ;oBACpB,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,QAAQ;oBACvB,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;iBACf;gBACD,SAAS;aACV;YACD,KAAK,EAAE;gBACL,SAAS,EAAE,aAAa;gBACxB,QAAQ,EAAE,SAAS;gBACnB,eAAe,EAAE,QAAQ;gBACzB,OAAO,EAAE,OAAO;aACjB;YACD,eAAe,EAAE;gBACf,UAAU,EAAE,MAAM;gBAClB,KAAK,EAAE,MAAM;aACd;YACD,cAAc,EAAE,IAAA,yBAAiB,EAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;~~SAC5D~~,CAAC;IACJ,CAAC,CAAC;~~IA3BW~~,QAAA,SAAS,~~aA2BpB~~","sourcesContent":["import { IDonutChartStyleProps, IDonutChartStyles } from './DonutChart.types';\nimport { getAxisTitleStyle } from '../../utilities/index';\n\nexport const getStyles = (props: IDonutChartStyleProps): IDonutChartStyles => {\n const { className, theme } = props;\n return {\n root: [\n theme.fonts.medium,\n 'ms-DonutChart',\n {\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n height: '100%',\n },\n className,\n ],\n chart: {\n boxSizing: 'content-box',\n overflow: 'visible',\n alignmentAdjust: 'center',\n display: 'block',\n },\n legendContainer: {\n paddingTop: '16px',\n width: '100%',\n },\n axisAnnotation: getAxisTitleStyle(theme, theme.fonts.small),\n };\n};\n"]}
1	+ {"version":3,"file":"DonutChart.styles.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.styles.ts"],"names":[],"mappings":";;;;IAGO,IAAM,SAAS,GAAG,UAAC,KAA4B;QAC5C,IAAA,SAAS,GAAY,KAAK,UAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QACnC,OAAO;YACL,IAAI,EAAE;gBACJ,KAAK,CAAC,KAAK,CAAC,MAAM;gBAClB,eAAe;gBACf;oBACE,UAAU,EAAE,QAAQ;oBACpB,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,QAAQ;oBACvB,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;iBACf;gBACD,SAAS;aACV;YACD,KAAK,EAAE;gBACL,SAAS,EAAE,aAAa;gBACxB,QAAQ,EAAE,SAAS;gBACnB,eAAe,EAAE,QAAQ;gBACzB,OAAO,EAAE,OAAO;aACjB;YACD,eAAe,EAAE;gBACf,UAAU,EAAE,MAAM;gBAClB,KAAK,EAAE,MAAM;aACd;YACD,UAAU,EAAE,IAAA,0BAAkB,EAAC,KAAK,CAAC;YACrC,cAAc,EAAE,IAAA,yBAAiB,EAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;YAC3D,UAAU,EAAE,IAAA,0BAAkB,EAAC,KAAK,CAAC;SACtC,CAAC;IACJ,CAAC,CAAC;IA7BW,QAAA,SAAS,aA6BpB","sourcesContent":["import { IDonutChartStyleProps, IDonutChartStyles } from './DonutChart.types';\nimport { getAxisTitleStyle, getChartTitleStyle, getSvgTooltipStyle } from '../../utilities/index';\n\nexport const getStyles = (props: IDonutChartStyleProps): IDonutChartStyles => {\n const { className, theme } = props;\n return {\n root: [\n theme.fonts.medium,\n 'ms-DonutChart',\n {\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n height: '100%',\n },\n className,\n ],\n chart: {\n boxSizing: 'content-box',\n overflow: 'visible',\n alignmentAdjust: 'center',\n display: 'block',\n },\n legendContainer: {\n paddingTop: '16px',\n width: '100%',\n },\n chartTitle: getChartTitleStyle(theme),\n axisAnnotation: getAxisTitleStyle(theme, theme.fonts.small),\n svgTooltip: getSvgTooltipStyle(theme),\n };\n};\n"]}

package/lib-amd/components/DonutChart/DonutChart.types.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '@fluentui/r
 import { ICartesianChartProps, ICartesianChartStyleProps } from '../CommonComponents/index';
 import { ICalloutProps } from '@fluentui/react/lib/Callout';
 import { IChartProps, IChartDataPoint, IChart } from './index';
+import type { ITitleStyles } from '../../utilities/Common.styles';
 export interface IDonutChart {
 }
 /**
@@ -10,6 +11,10 @@ export interface IDonutChart {
  * {@docCategory DonutChart}
  */
 export interface IDonutChartProps extends ICartesianChartProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: ITitleStyles;
     /**
      * Data to render in the chart.
      */
@@ -94,6 +99,10 @@ export interface IDonutChartStyles {
      * Style for the legend container.
      */
     legendContainer: IStyle;
+    /**
+     * Style for the chart title.
+     */
+    chartTitle?: IStyle;
     /**
      * styles for axis annotation
      */
@@ -102,4 +111,8 @@ export interface IDonutChartStyles {
      * Styles for the chart wrapper div
      */
     chartWrapper?: IStyle;
+    /**
+     * Style for SVG tooltip text
+     */
+    svgTooltip?: IStyle;
 }

package/lib-amd/components/DonutChart/DonutChart.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DonutChart.types.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ICartesianChartProps, ICartesianChartStyleProps } from '../CommonComponents/index';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IChartProps, IChartDataPoint, IChart } from './index';\n\nexport interface IDonutChart {}\n\n/*\n Donut Chart properties.\n * {@docCategory DonutChart}\n /\nexport interface IDonutChartProps extends ICartesianChartProps {\n /\n Data to render in the chart.\n /\n data?: IChartProps;\n\n /\n inner radius for donut size\n /\n innerRadius?: number;\n\n /\n Call to provide customized styling that will layer on top of the variant rules.\n /\n styles?: IStyleFunctionOrObject<IDonutChartStyleProps, IDonutChartStyles>;\n\n /\n props for inside donut value\n /\n valueInsideDonut?: string \| number;\n\n /\n Define a custom callout renderer for a data point\n /\n onRenderCalloutPerDataPoint?: IRenderFunction<IChartDataPoint>;\n\n /\n props for the callout in the chart\n /\n calloutProps?: Partial<ICalloutProps>;\n\n /\n The prop used to define the culture to localized the numbers\n /\n culture?: string;\n\n /\n Prop to show the arc labels in percentage format\n * @default false\n /\n showLabelsInPercent?: boolean;\n\n /\n Prop to hide the arc labels\n * @default true\n /\n hideLabels?: boolean;\n\n /\n Prop to enable the gradient in the chart\n * @default false\n /\n enableGradient?: boolean;\n\n /\n Prop to enable the round corners in the chart\n * @default false\n /\n roundCorners?: boolean;\n\n /\n Optional callback to access the IChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n /\n componentRef?: IRefObject<IChart>;\n\n /\n Rendering order of the legend\n * @default 'default'\n * 'default' - as per data provided\n * 'sorted' - in descending order of value\n /\n order?: 'default' \| 'sorted';\n}\n\n/\n Donut Chart style properties\n * {@docCategory DonutChart}\n /\nexport interface IDonutChartStyleProps extends ICartesianChartStyleProps {}\n\n/\n Donut Chart styles\n * {@docCategory DonutChart}\n /\nexport interface IDonutChartStyles {\n /\n Style for the root element.\n /\n root?: IStyle;\n\n /\n Style for the chart.\n /\n chart?: IStyle;\n /\n Style for the legend container.\n /\n legendContainer: IStyle;\n\n /\n styles for axis annotation\n /\n axisAnnotation?: IStyle;\n\n /\n Styles for the chart wrapper div\n */\n chartWrapper?: IStyle;\n}\n"]}
1	+ {"version":3,"file":"DonutChart.types.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ICartesianChartProps, ICartesianChartStyleProps } from '../CommonComponents/index';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IChartProps, IChartDataPoint, IChart } from './index';\nimport type { ITitleStyles } from '../../utilities/Common.styles';\n\nexport interface IDonutChart {}\n\n/*\n Donut Chart properties.\n * {@docCategory DonutChart}\n /\nexport interface IDonutChartProps extends ICartesianChartProps {\n /\n Title styles configuration for the chart title\n /\n titleStyles?: ITitleStyles;\n\n /\n Data to render in the chart.\n /\n data?: IChartProps;\n\n /\n inner radius for donut size\n /\n innerRadius?: number;\n\n /\n Call to provide customized styling that will layer on top of the variant rules.\n /\n styles?: IStyleFunctionOrObject<IDonutChartStyleProps, IDonutChartStyles>;\n\n /\n props for inside donut value\n /\n valueInsideDonut?: string \| number;\n\n /\n Define a custom callout renderer for a data point\n /\n onRenderCalloutPerDataPoint?: IRenderFunction<IChartDataPoint>;\n\n /\n props for the callout in the chart\n /\n calloutProps?: Partial<ICalloutProps>;\n\n /\n The prop used to define the culture to localized the numbers\n /\n culture?: string;\n\n /\n Prop to show the arc labels in percentage format\n * @default false\n /\n showLabelsInPercent?: boolean;\n\n /\n Prop to hide the arc labels\n * @default true\n /\n hideLabels?: boolean;\n\n /\n Prop to enable the gradient in the chart\n * @default false\n /\n enableGradient?: boolean;\n\n /\n Prop to enable the round corners in the chart\n * @default false\n /\n roundCorners?: boolean;\n\n /\n Optional callback to access the IChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n /\n componentRef?: IRefObject<IChart>;\n\n /\n Rendering order of the legend\n * @default 'default'\n * 'default' - as per data provided\n * 'sorted' - in descending order of value\n /\n order?: 'default' \| 'sorted';\n}\n\n/\n Donut Chart style properties\n * {@docCategory DonutChart}\n /\nexport interface IDonutChartStyleProps extends ICartesianChartStyleProps {}\n\n/\n Donut Chart styles\n * {@docCategory DonutChart}\n /\nexport interface IDonutChartStyles {\n /\n Style for the root element.\n /\n root?: IStyle;\n\n /\n Style for the chart.\n /\n chart?: IStyle;\n /\n Style for the legend container.\n /\n legendContainer: IStyle;\n\n /\n Style for the chart title.\n /\n chartTitle?: IStyle;\n\n /\n styles for axis annotation\n /\n axisAnnotation?: IStyle;\n\n /\n Styles for the chart wrapper div\n /\n chartWrapper?: IStyle;\n\n /\n Style for SVG tooltip text\n */\n svgTooltip?: IStyle;\n}\n"]}

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

@@ -1,19 +1,19 @@
-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) {
+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", "../../utilities/index", "./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, index_2, 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 (_a, forwardedRef) {
-        var _b;
-        var _c = _a.orientation, orientation = _c === void 0 ? 'vertical' : _c, props = tslib_1.__rest(_a, ["orientation"]);
+        var _b, _c, _d;
+        var _e = _a.orientation, orientation = _e === void 0 ? 'vertical' : _e, props = tslib_1.__rest(_a, ["orientation"]);
         var _tooltipId = (0, Utilities_1.getId)('FunnelChartTooltipId_');
         var _emptyChartId = (0, Utilities_1.getId)('_FunnelChart_empty');
         var isRTL = (0, Utilities_1.getRTL)();
-        var _d = React.useState(null), hoveredStage = _d[0], setHoveredStage = _d[1];
-        var _e = React.useState(false), isCalloutVisible = _e[0], setIsCalloutVisible = _e[1];
-        var _f = React.useState(null), calloutData = _f[0], setCalloutData = _f[1];
-        var _g = React.useState(null), refSelected = _g[0], setRefSelected = _g[1];
-        var _h = React.useState([]), selectedLegends = _h[0], setSelectedLegends = _h[1];
+        var _f = React.useState(null), hoveredStage = _f[0], setHoveredStage = _f[1];
+        var _g = React.useState(false), isCalloutVisible = _g[0], setIsCalloutVisible = _g[1];
+        var _h = React.useState(null), calloutData = _h[0], setCalloutData = _h[1];
+        var _j = React.useState(null), refSelected = _j[0], setRefSelected = _j[1];
+        var _k = React.useState([]), selectedLegends = _k[0], setSelectedLegends = _k[1];
         var chartContainerRef = React.useRef(null);
         var legendsRef = React.useRef(null);
         var isStacked = isStackedFunnelData(props.data);
@@ -265,12 +265,17 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             chartWidth: width,
             chartHeight: height,
         });
-        var funnelMarginTop = 40;
+        var titleHeight = props.chartTitle
+            ? Math.max((typeof ((_d = (_c = props.titleStyles) === null || _c === void 0 ? void 0 : _c.titleFont) === null || _d === void 0 ? void 0 : _d.size) === 'number' ? props.titleStyles.titleFont.size : 13) +
+                index_2.CHART_TITLE_PADDING, 40)
+            : 40;
+        var funnelMarginTop = titleHeight;
         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 },
+                    !props.hideLegend && props.chartTitle && (React.createElement(index_2.ChartTitle, { title: props.chartTitle, x: width / 2, maxWidth: width - 20, className: classNames.chartTitle, titleStyles: props.titleStyles, tooltipClassName: classNames.svgTooltip })),
                     React.createElement("g", { transform: isRTL
                             ? "translate(".concat(funnelOffsetX + funnelWidth, ", ").concat(funnelMarginTop, ") scale(-1,1)")
                             : "translate(".concat(funnelOffsetX, ", ").concat(funnelMarginTop, ")") }, isStacked

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

	@@ -1 +1 @@
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 { exportChartsAsImage } from '../../utilities/image-export-utils';\nimport { getContrastTextColor } from '../../utilities/utilities';\nimport {\n getHorizontalFunnelSegmentGeometry,\n getVerticalFunnelSegmentGeometry,\n getSegmentTextProps,\n getStackedHorizontalFunnelSegmentGeometry,\n getStackedVerticalFunnelSegmentGeometry,\n} from './funnelGeometry';\nimport type { JSXElement } from '@fluentui/utilities';\n\nconst getClassNames = classNamesFunction<IFunnelChartStyleProps, IFunnelChartStyles>();\n\nexport const FunnelChartBase: React.FunctionComponent<IFunnelChartProps> = React.forwardRef<\n HTMLDivElement,\n IFunnelChartProps\n>(({ orientation = 'vertical', ...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 exportChartsAsImage(\n [{ container: chartContainerRef.current }],\n props.hideLegend ? undefined : legendsRef.current?.toSVG,\n getRTL(),\n opts,\n );\n },\n }),\n [props.hideLegend],\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 _handleFocus(data: IFunnelChartDataPoint, focusEvent: React.FocusEvent<SVGPathElement>) {\n focusEvent?.persist();\n setCalloutData(data);\n setIsCalloutVisible(true);\n setRefSelected(focusEvent.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 _handleStackedFocus(\n stage: string,\n subValue: { category: string; value: number; color: string },\n focusEvent: React.FocusEvent<SVGPathElement>,\n ) {\n focusEvent?.persist();\n setCalloutData({\n stage,\n value: subValue.value,\n color: subValue.color,\n category: subValue.category,\n } as IFunnelChartDataPoint);\n setIsCalloutVisible(true);\n setRefSelected(focusEvent.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 opacity?: number,\n ) {\n if ('subValue' in data) {\n return {\n culture: props.culture,\n onMouseOver:\n opacity === 1\n ? (event: React.MouseEvent<SVGElement>) => _handleStackedHover(data.stage, data.subValue, event)\n : undefined,\n onMouseMove:\n opacity === 1\n ? (event: React.MouseEvent<SVGElement>) => _handleStackedHover(data.stage, data.subValue, event)\n : undefined,\n onFocus: (event: React.FocusEvent<SVGPathElement>) => _handleStackedFocus(data.stage, data.subValue, event),\n onBlur: () => _handleMouseOut(),\n onMouseOut: () => _handleMouseOut(),\n };\n } else {\n return {\n culture: props.culture,\n onMouseOver: opacity === 1 ? (event: React.MouseEvent<SVGElement>) => _handleHover(data, event) : undefined,\n onMouseMove: opacity === 1 ? (event: React.MouseEvent<SVGElement>) => _handleHover(data, event) : undefined,\n onFocus: (event: React.FocusEvent<SVGPathElement>) => _handleFocus(data, event),\n onBlur: () => _handleMouseOut(),\n onMouseOut: () => _handleMouseOut(),\n };\n }\n }\n\n function _renderSegmentText({\n show,\n x,\n y,\n value,\n textColor,\n }: {\n show: boolean;\n x: number;\n y: number;\n value: number;\n textColor: string;\n }) {\n if (!show) {\n return null;\n }\n\n const textElement = (\n <text x={isRTL ? funnelWidth - x : x} y={y} textAnchor=\"middle\" alignmentBaseline=\"middle\" fill={textColor}>\n {formatToLocaleString(value.toString(), props.culture) as React.ReactNode}\n </text>\n );\n\n if (isRTL) {\n return <g transform={`scale(-1,1) translate(${-funnelWidth},0)`}>{textElement}</g>;\n }\n return textElement;\n }\n\n function _renderFunnelSegment({\n key,\n pathD,\n fill,\n opacity,\n textProps,\n data,\n isFocusable,\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 isFocusable?: boolean;\n }) {\n const eventHandlers = _getEventHandlerProps(data, opacity);\n const textColor = getContrastTextColor(fill, props.theme!);\n\n return (\n <g key={key}>\n <path d={pathD} fill={fill} opacity={opacity} {...eventHandlers} data-is-focusable={isFocusable} />\n {textProps && <g {...eventHandlers}>{_renderSegmentText({ ...textProps, textColor })}</g>}\n </g>\n );\n }\n\n function _createFunnel(containerHeight: number, containerWidth: number): JSXElement[] {\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 orientation === 'vertical'\n ? getVerticalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL })\n : getHorizontalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL });\n\n const { pathD, textX, textY, availableWidth } = geometryProps;\n const minTextWidth = 16;\n const eventHandlerProps = _getEventHandlerProps(d);\n const textProps = getSegmentTextProps({\n availableWidth,\n minTextWidth,\n textX,\n textY,\n value: d.value!,\n ...eventHandlerProps,\n });\n\n return _renderFunnelSegment({\n key: i,\n pathD,\n fill: d.color!,\n opacity: legendHighlighted(d.stage as string) \|\| noLegendHighlighted() ? 1 : 0.1,\n textProps,\n data: d,\n isFocusable: legendHighlighted(d.stage as string) \|\| noLegendHighlighted() ? true : false,\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 ): JSXElement {\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 orientation === 'vertical'\n ? getStackedVerticalFunnelSegmentGeometry({\n ...geometryParams,\n stages: stagesWithSubValues,\n i: stageIndex,\n k: subValueIndex,\n })\n : getStackedHorizontalFunnelSegmentGeometry({\n ...geometryParams,\n stages: stagesWithSubValues,\n i: stageIndex,\n k: subValueIndex,\n });\n\n const minTextWidth = 16;\n const eventHandlerProps = _getEventHandlerProps({ stage: stage.stage as string, subValue });\n const textProps = getSegmentTextProps({\n availableWidth: geom.availableWidth,\n minTextWidth,\n textX: geom.textX,\n textY: geom.textY,\n value: subValue.value,\n ...eventHandlerProps,\n });\n\n return _renderFunnelSegment({\n key: `${stageIndex}-${subValueIndex}`,\n pathD: geom.pathD,\n fill: subValue.color,\n opacity:\n (isStackedFunnelData(props.data) && legendHighlighted(subValue.category)) \|\| noLegendHighlighted() ? 1 : 0.1,\n textProps,\n data: { stage: stage.stage as string, subValue },\n isFocusable:\n (isStackedFunnelData(props.data) && legendHighlighted(subValue.category)) \|\| noLegendHighlighted()\n ? true\n : false,\n });\n }\n\n function _createStackedFunnel(containerHeight: number, containerWidth: number): JSXElement[] {\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 const paths: JSXElement[] = [];\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(): JSXElement {\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"]}
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 { exportChartsAsImage } from '../../utilities/image-export-utils';\nimport { getContrastTextColor } from '../../utilities/utilities';\nimport { ChartTitle, CHART_TITLE_PADDING } from '../../utilities/index';\nimport {\n getHorizontalFunnelSegmentGeometry,\n getVerticalFunnelSegmentGeometry,\n getSegmentTextProps,\n getStackedHorizontalFunnelSegmentGeometry,\n getStackedVerticalFunnelSegmentGeometry,\n} from './funnelGeometry';\nimport type { JSXElement } from '@fluentui/utilities';\n\nconst getClassNames = classNamesFunction<IFunnelChartStyleProps, IFunnelChartStyles>();\n\nexport const FunnelChartBase: React.FunctionComponent<IFunnelChartProps> = React.forwardRef<\n HTMLDivElement,\n IFunnelChartProps\n>(({ orientation = 'vertical', ...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 exportChartsAsImage(\n [{ container: chartContainerRef.current }],\n props.hideLegend ? undefined : legendsRef.current?.toSVG,\n getRTL(),\n opts,\n );\n },\n }),\n [props.hideLegend],\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 _handleFocus(data: IFunnelChartDataPoint, focusEvent: React.FocusEvent<SVGPathElement>) {\n focusEvent?.persist();\n setCalloutData(data);\n setIsCalloutVisible(true);\n setRefSelected(focusEvent.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 _handleStackedFocus(\n stage: string,\n subValue: { category: string; value: number; color: string },\n focusEvent: React.FocusEvent<SVGPathElement>,\n ) {\n focusEvent?.persist();\n setCalloutData({\n stage,\n value: subValue.value,\n color: subValue.color,\n category: subValue.category,\n } as IFunnelChartDataPoint);\n setIsCalloutVisible(true);\n setRefSelected(focusEvent.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 opacity?: number,\n ) {\n if ('subValue' in data) {\n return {\n culture: props.culture,\n onMouseOver:\n opacity === 1\n ? (event: React.MouseEvent<SVGElement>) => _handleStackedHover(data.stage, data.subValue, event)\n : undefined,\n onMouseMove:\n opacity === 1\n ? (event: React.MouseEvent<SVGElement>) => _handleStackedHover(data.stage, data.subValue, event)\n : undefined,\n onFocus: (event: React.FocusEvent<SVGPathElement>) => _handleStackedFocus(data.stage, data.subValue, event),\n onBlur: () => _handleMouseOut(),\n onMouseOut: () => _handleMouseOut(),\n };\n } else {\n return {\n culture: props.culture,\n onMouseOver: opacity === 1 ? (event: React.MouseEvent<SVGElement>) => _handleHover(data, event) : undefined,\n onMouseMove: opacity === 1 ? (event: React.MouseEvent<SVGElement>) => _handleHover(data, event) : undefined,\n onFocus: (event: React.FocusEvent<SVGPathElement>) => _handleFocus(data, event),\n onBlur: () => _handleMouseOut(),\n onMouseOut: () => _handleMouseOut(),\n };\n }\n }\n\n function _renderSegmentText({\n show,\n x,\n y,\n value,\n textColor,\n }: {\n show: boolean;\n x: number;\n y: number;\n value: number;\n textColor: string;\n }) {\n if (!show) {\n return null;\n }\n\n const textElement = (\n <text x={isRTL ? funnelWidth - x : x} y={y} textAnchor=\"middle\" alignmentBaseline=\"middle\" fill={textColor}>\n {formatToLocaleString(value.toString(), props.culture) as React.ReactNode}\n </text>\n );\n\n if (isRTL) {\n return <g transform={`scale(-1,1) translate(${-funnelWidth},0)`}>{textElement}</g>;\n }\n return textElement;\n }\n\n function _renderFunnelSegment({\n key,\n pathD,\n fill,\n opacity,\n textProps,\n data,\n isFocusable,\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 isFocusable?: boolean;\n }) {\n const eventHandlers = _getEventHandlerProps(data, opacity);\n const textColor = getContrastTextColor(fill, props.theme!);\n\n return (\n <g key={key}>\n <path d={pathD} fill={fill} opacity={opacity} {...eventHandlers} data-is-focusable={isFocusable} />\n {textProps && <g {...eventHandlers}>{_renderSegmentText({ ...textProps, textColor })}</g>}\n </g>\n );\n }\n\n function _createFunnel(containerHeight: number, containerWidth: number): JSXElement[] {\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 orientation === 'vertical'\n ? getVerticalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL })\n : getHorizontalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL });\n\n const { pathD, textX, textY, availableWidth } = geometryProps;\n const minTextWidth = 16;\n const eventHandlerProps = _getEventHandlerProps(d);\n const textProps = getSegmentTextProps({\n availableWidth,\n minTextWidth,\n textX,\n textY,\n value: d.value!,\n ...eventHandlerProps,\n });\n\n return _renderFunnelSegment({\n key: i,\n pathD,\n fill: d.color!,\n opacity: legendHighlighted(d.stage as string) \|\| noLegendHighlighted() ? 1 : 0.1,\n textProps,\n data: d,\n isFocusable: legendHighlighted(d.stage as string) \|\| noLegendHighlighted() ? true : false,\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 ): JSXElement {\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 orientation === 'vertical'\n ? getStackedVerticalFunnelSegmentGeometry({\n ...geometryParams,\n stages: stagesWithSubValues,\n i: stageIndex,\n k: subValueIndex,\n })\n : getStackedHorizontalFunnelSegmentGeometry({\n ...geometryParams,\n stages: stagesWithSubValues,\n i: stageIndex,\n k: subValueIndex,\n });\n\n const minTextWidth = 16;\n const eventHandlerProps = _getEventHandlerProps({ stage: stage.stage as string, subValue });\n const textProps = getSegmentTextProps({\n availableWidth: geom.availableWidth,\n minTextWidth,\n textX: geom.textX,\n textY: geom.textY,\n value: subValue.value,\n ...eventHandlerProps,\n });\n\n return _renderFunnelSegment({\n key: `${stageIndex}-${subValueIndex}`,\n pathD: geom.pathD,\n fill: subValue.color,\n opacity:\n (isStackedFunnelData(props.data) && legendHighlighted(subValue.category)) \|\| noLegendHighlighted() ? 1 : 0.1,\n textProps,\n data: { stage: stage.stage as string, subValue },\n isFocusable:\n (isStackedFunnelData(props.data) && legendHighlighted(subValue.category)) \|\| noLegendHighlighted()\n ? true\n : false,\n });\n }\n\n function _createStackedFunnel(containerHeight: number, containerWidth: number): JSXElement[] {\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 const paths: JSXElement[] = [];\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(): JSXElement {\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 titleHeight = props.chartTitle\n ? Math.max(\n (typeof props.titleStyles?.titleFont?.size === 'number' ? props.titleStyles.titleFont.size : 13) +\n CHART_TITLE_PADDING,\n 40,\n )\n : 40;\n const funnelMarginTop = titleHeight;\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 {!props.hideLegend && props.chartTitle && (\n <ChartTitle\n title={props.chartTitle}\n x={width / 2}\n maxWidth={width - 20}\n className={classNames.chartTitle}\n titleStyles={props.titleStyles}\n tooltipClassName={classNames.svgTooltip}\n />\n )}\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"]}

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

@@ -1,4 +1,4 @@
-define(["require", "exports", "@fluentui/react/lib/Styling"], function (require, exports, Styling_1) {
+define(["require", "exports", "@fluentui/react/lib/Styling", "../../utilities/Common.styles"], function (require, exports, Styling_1, Common_styles_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.getFunnelChartStyles = void 0;
@@ -21,6 +21,7 @@ define(["require", "exports", "@fluentui/react/lib/Styling"], function (require,
                 width: chartWidth,
                 height: chartHeight,
             },
+            chartTitle: (0, Common_styles_1.getChartTitleStyle)(theme),
             text: [
                 theme.fonts.medium,
                 {
@@ -29,6 +30,7 @@ define(["require", "exports", "@fluentui/react/lib/Styling"], function (require,
                     fill: theme.palette.neutralPrimary,
                 },
             ],
+            svgTooltip: (0, Common_styles_1.getSvgTooltipStyle)(theme),
             subComponentStyles: {
                 calloutStyles: {
                     root: {

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

	@@ -1 +1 @@
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"]}
1	+ {"version":3,"file":"FunnelChart.styles.js","sourceRoot":"../src/","sources":["components/FunnelChart/FunnelChart.styles.ts"],"names":[],"mappings":";;;;IAIO,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,UAAU,EAAE,IAAA,kCAAkB,EAAC,KAAK,CAAC;YACrC,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,UAAU,EAAE,IAAA,kCAAkB,EAAC,KAAK,CAAC;YACrC,kBAAkB,EAAE;gBAClB,aAAa,EAAE;oBACb,IAAI,EAAE;wBACJ,QAAQ,EAAE,OAAO;qBAClB;iBACF;aACF;SACF,CAAC;IACJ,CAAC,CAAC;IArCW,QAAA,oBAAoB,wBAqC/B","sourcesContent":["import { FontWeights } from '@fluentui/react/lib/Styling';\nimport { IFunnelChartStyleProps, IFunnelChartStyles } from './FunnelChart.types';\nimport { getChartTitleStyle, getSvgTooltipStyle } from '../../utilities/Common.styles';\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 chartTitle: getChartTitleStyle(theme),\n text: [\n theme.fonts.medium,\n {\n pointerEvents: 'none',\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n ],\n svgTooltip: getSvgTooltipStyle(theme),\n subComponentStyles: {\n calloutStyles: {\n root: {\n maxWidth: '238px',\n },\n },\n },\n };\n};\n"]}

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

@@ -4,6 +4,7 @@ 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';
+import { ITitleStyles } from '../../utilities/Common.styles';
 /**
  * Data point for funnel chart
  * {@docCategory FunnelChart}
@@ -36,6 +37,10 @@ export interface IFunnelChartDataPoint {
  * {@docCategory FunnelChart}
  */
 export interface IFunnelChartProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: ITitleStyles;
     /**
      * Data points for the funnel chart
      */
@@ -126,10 +131,18 @@ export interface IFunnelChartStyles {
      * Styles for the chart
      */
     chart?: IStyle;
+    /**
+     * Style for the chart title.
+     */
+    chartTitle?: IStyle;
     /**
      * Styles for text elements
      */
     text?: IStyle;
+    /**
+     * Style for SVG tooltip text
+     */
+    svgTooltip?: IStyle;
     /**
      * Styles for sub-components
      */

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

	@@ -1 +1 @@
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"]}
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';\nimport { ITitleStyles } from '../../utilities/Common.styles';\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 Title styles configuration for the chart title\n /\n titleStyles?: ITitleStyles;\n\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 Style for the chart title.\n /\n chartTitle?: IStyle;\n\n /\n Styles for text elements\n /\n text?: IStyle;\n\n /\n Style for SVG tooltip text\n /\n svgTooltip?: IStyle;\n\n /\n Styles for sub-components\n */\n subComponentStyles: {\n calloutStyles: IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles>;\n };\n}\n"]}