npm - @fluentui/react-charting - Versions diffs - 5.14.37 → 5.14.38 - Mend

@fluentui/react-charting 5.14.37 → 5.14.38

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 (121) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiStackedBarChart.base.js","sourceRoot":"../src/","sources":["components/StackedBarChart/MultiStackedBarChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport { ILegend, Legends } from '../Legends/index';\nimport {\n IAccessibilityProps,\n IChartDataPoint,\n IChartProps,\n IMultiStackedBarChartProps,\n IMultiStackedBarChartStyles,\n IMultiStackedBarChartStyleProps,\n} from './index';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';\nimport { TooltipHost, TooltipOverflowMode } from '@fluentui/react';\n\nconst getClassNames = classNamesFunction<IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles>();\n\nexport interface IRefArrayData {\n legendText?: string;\n refElement?: SVGGElement;\n}\n\nexport interface IMultiStackedBarChartState {\n isCalloutVisible: boolean;\n refArray: IRefArrayData[];\n selectedLegend: string;\n activeLegend: string;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n refSelected: any;\n dataForHoverCard: number;\n color: string;\n xCalloutValue?: string;\n yCalloutValue?: string;\n dataPointCalloutProps?: IChartDataPoint;\n callOutAccessibilityData?: IAccessibilityProps;\n calloutLegend: string;\n}\n\nexport class MultiStackedBarChartBase extends React.Component<IMultiStackedBarChartProps, IMultiStackedBarChartState> {\n public static defaultProps: Partial<IMultiStackedBarChartProps> = {\n barHeight: 12,\n hideRatio: [],\n hideDenominator: [],\n };\n\n private _classNames: IProcessedStyleSet<IMultiStackedBarChartStyles>;\n private _calloutId: string;\n private _calloutAnchorPoint: IChartDataPoint \| null;\n\n public constructor(props: IMultiStackedBarChartProps) {\n super(props);\n this.state = {\n isCalloutVisible: false,\n refArray: [],\n selectedLegend: '',\n activeLegend: '',\n refSelected: null,\n dataForHoverCard: 0,\n color: '',\n xCalloutValue: '',\n yCalloutValue: '',\n calloutLegend: '',\n };\n this._onLeave = this._onLeave.bind(this);\n this._onBarLeave = this._onBarLeave.bind(this);\n this._calloutId = getId('callout');\n }\n\n public render(): JSX.Element {\n const { data, theme, culture } = this.props;\n this._adjustProps();\n const { palette } = theme!;\n const legends = this._getLegendData(data!, this.props.hideRatio!, palette);\n const { isCalloutVisible } = this.state;\n\n this._classNames = getClassNames(this.props.styles!, {\n legendColor: this.state.color,\n theme: theme!,\n });\n\n const legendName = this.state.xCalloutValue ? this.state.xCalloutValue : this.state.calloutLegend;\n const calloutYVal = this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard;\n\n const bars: JSX.Element[] = data!.map((singleChartData: IChartProps, index: number) => {\n const singleChartBars = this._createBarsAndLegends(\n singleChartData!,\n this.props.barHeight!,\n palette,\n this.props.hideRatio![index],\n this.props.hideDenominator![index],\n this.props.href,\n );\n return <div key={index}>{singleChartBars}</div>;\n });\n\n return (\n <div className={this._classNames.root} onMouseLeave={this._handleChartMouseLeave}>\n {bars}\n {!this.props.hideLegend && <div className={this._classNames.legendContainer}>{legends}</div>}\n <Callout\n gapSpace={15}\n isBeakVisible={false}\n target={this.state.refSelected}\n setInitialFocus={true}\n hidden={!(!this.props.hideTooltip && isCalloutVisible)}\n directionalHint={DirectionalHint.topAutoEdge}\n id={this._calloutId}\n onDismiss={this._closeCallout}\n preventDismissOnLostFocus={true}\n /** Keep the callout updated with details of focused/hovered bar /\n shouldUpdateWhenHidden={true}\n {...this.props.calloutProps!}\n {...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)}\n >\n <>\n {this.props.onRenderCalloutPerDataPoint ? (\n this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)\n ) : (\n <ChartHoverCard Legend={legendName} YValue={calloutYVal} color={this.state.color} culture={culture} />\n )}\n </>\n </Callout>\n </div>\n );\n }\n\n private _createBarsAndLegends(\n data: IChartProps,\n barHeight: number,\n palette: IPalette,\n hideRatio: boolean,\n hideDenominator: boolean,\n href?: string,\n ): JSX.Element {\n const { culture } = this.props;\n const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n // calculating starting point of each bar and it's range\n const startingPoint: number[] = [];\n const total = data.chartData!.reduce(\n (acc: number, point: IChartDataPoint) => acc + (point.data ? point.data : 0),\n 0,\n );\n\n let sumOfPercent = 0;\n data.chartData!.map((point: IChartDataPoint, index: number) => {\n const pointData = point.data ? point.data : 0;\n value = (pointData / total) 100 ? (pointData / total) * 100 : 0;\n if (value < 1 && value !== 0) {\n value = 1;\n } else if (value > 99 && value !== 100) {\n value = 99;\n }\n sumOfPercent += value;\n\n return sumOfPercent;\n });\n\n const scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1;\n\n let prevPosition = 0;\n let value = 0;\n\n const bars = data.chartData!.map((point: IChartDataPoint, index: number) => {\n const color: string = point.color\n ? point.color\n : point.placeHolder\n ? palette.neutralLight\n : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n const pointData = point.data ? point.data : 0;\n if (index > 0) {\n prevPosition += value;\n }\n value = (pointData / total) * 100 ? (pointData / total) * 100 : 0;\n if (value < 1 && value !== 0) {\n value = 1 / scalingRatio;\n } else if (value > 99 && value !== 100) {\n value = 99 / scalingRatio;\n } else {\n value = value / scalingRatio;\n }\n\n startingPoint.push(prevPosition);\n\n const styles = this.props.styles;\n const shouldHighlight = this._legendHighlighted(point.legend!) \|\| this._noLegendHighlighted() ? true : false;\n\n this._classNames = getClassNames(styles!, {\n theme: this.props.theme!,\n shouldHighlight: shouldHighlight,\n href: href,\n });\n\n return (\n <g\n key={index}\n className={point.placeHolder ? this._classNames.placeHolderOnHover : this._classNames.opacityChangeOnHover}\n ref={(e: SVGGElement) => {\n this._refCallback(e, point.legend!);\n }}\n data-is-focusable={!this.props.hideTooltip}\n onFocus={this._onBarFocus.bind(this, pointData, color, point)}\n onBlur={this._onBarLeave}\n role=\"img\"\n aria-label={this._getAriaLabel(point)}\n onMouseOver={point.placeHolder ? undefined : this._onBarHover.bind(this, pointData, color, point)}\n onMouseMove={point.placeHolder ? undefined : this._onBarHover.bind(this, pointData, color, point)}\n onMouseLeave={point.placeHolder ? undefined : this._onBarLeave}\n onClick={href ? (point.placeHolder ? undefined : this._redirectToUrl.bind(this, href)) : point.onClick}\n >\n <rect key={index} x={startingPoint[index] + '%'} y={0} width={value + '%'} height={barHeight} fill={color} />\n </g>\n );\n });\n if (data.chartData!.length === 0) {\n bars.push(\n <g key={0} className={this._classNames.noData} onClick={this._redirectToUrl.bind(this, href)}>\n <rect key={0} x={'0%'} y={0} width={'100%'} height={barHeight} fill={palette.neutralLight} />\n </g>,\n );\n }\n if (total === 0) {\n bars.push(\n <g key={'empty'} className={this._classNames.noData} onClick={this._redirectToUrl.bind(this, href)}>\n <rect key={0} x={'0%'} y={0} width={'100%'} height={barHeight} fill={palette.neutralLight} />\n </g>,\n );\n }\n const hideNumber = hideRatio === undefined ? false : hideRatio;\n const showRatio = !hideNumber && data!.chartData!.length === 2;\n const showNumber = !hideNumber && data!.chartData!.length === 1;\n const getChartData = () => convertToLocaleString(data!.chartData![0].data ? data!.chartData![0].data : 0, culture);\n return (\n <div className={this._classNames.singleChartRoot}>\n <FocusZone direction={FocusZoneDirection.horizontal}>\n <div className={this._classNames.chartTitle}>\n {data!.chartTitle && (\n <TooltipHost\n overflowMode={TooltipOverflowMode.Self}\n hostClassName={this._classNames.chartTitleLeft}\n content={data!.chartTitle}\n >\n <span {...getAccessibleDataObject(data!.chartTitleAccessibilityData)}>{data!.chartTitle}</span>\n </TooltipHost>\n )}\n {showRatio && (\n <div {...getAccessibleDataObject(data!.chartDataAccessibilityData)}>\n <span className={this._classNames.ratioNumerator}>{getChartData()}</span>\n {!hideDenominator && (\n <span className={this._classNames.ratioDenominator}>\n {' / ' + convertToLocaleString(total, culture)}\n </span>\n )}\n </div>\n )}\n {showNumber && (\n <div\n className={this._classNames.ratioNumerator}\n {...getAccessibleDataObject(data!.chartDataAccessibilityData)}\n >\n {getChartData()}\n </div>\n )}\n </div>\n </FocusZone>\n <FocusZone direction={FocusZoneDirection.horizontal}>\n <div>\n <svg className={this._classNames.chart} aria-label={data?.chartTitle}>\n {bars}\n </svg>\n </div>\n </FocusZone>\n </div>\n );\n }\n\n private _onBarFocus(pointData: number, color: string, point: IChartDataPoint): void {\n this.state.refArray.forEach((obj: IRefArrayData) => {\n if (obj.legendText === point.legend!) {\n this.setState({\n refSelected: obj.refElement,\n /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused /\n isCalloutVisible: this.state.selectedLegend === '' \|\| this.state.selectedLegend === point.legend!,\n calloutLegend: point.legend!,\n dataForHoverCard: pointData,\n color: color,\n xCalloutValue: point.xAxisCalloutData!,\n yCalloutValue: point.yAxisCalloutData!,\n dataPointCalloutProps: point,\n callOutAccessibilityData: point.callOutAccessibilityData!,\n });\n }\n });\n }\n\n private _refCallback(element: SVGGElement, legendTitle: string): void {\n this.state.refArray.push({ legendText: legendTitle, refElement: element });\n }\n\n private _adjustProps = (): void => {\n const { theme, className, styles, width, barHeight } = this.props;\n this._classNames = getClassNames(styles!, {\n legendColor: this.state.color,\n theme: theme!,\n width: width,\n className,\n barHeight: barHeight,\n });\n };\n\n private _onHover(legendTitle: string): void {\n this.setState({\n activeLegend: legendTitle,\n });\n }\n\n private _getLegendData = (data: IChartProps[], hideRatio: boolean[], palette: IPalette): JSX.Element => {\n const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n const actions: ILegend[] = [];\n data.forEach((singleChartData: IChartProps, index: number) => {\n const validChartData = singleChartData.chartData!.filter((_: IChartDataPoint) => !_.placeHolder);\n if (validChartData!.length < 3) {\n const hideNumber = hideRatio[index] === undefined ? false : hideRatio[index];\n if (hideNumber) {\n validChartData!.forEach((point: IChartDataPoint) => {\n const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() 4 + 1)];\n const checkSimilarLegends = actions.filter(\n (leg: ILegend) => leg.title === point.legend! && leg.color === color,\n );\n if (checkSimilarLegends!.length > 0) {\n return;\n }\n const legend: ILegend = {\n title: point.legend!,\n color: color,\n action: () => {\n this._onClick(point.legend!);\n },\n hoverAction: () => {\n this._handleChartMouseLeave();\n this._onHover(point.legend!);\n },\n onMouseOutAction: () => {\n this._onLeave();\n },\n };\n actions.push(legend);\n });\n }\n } else {\n validChartData!.forEach((point: IChartDataPoint) => {\n const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n const checkSimilarLegends = actions.filter(\n (leg: ILegend) => leg.title === point.legend! && leg.color === color,\n );\n if (checkSimilarLegends!.length > 0) {\n return;\n }\n const legend: ILegend = {\n title: point.legend!,\n color: color,\n action: () => {\n this._onClick(point.legend!);\n },\n hoverAction: () => {\n this._handleChartMouseLeave();\n this._onHover(point.legend!);\n },\n onMouseOutAction: () => {\n this._onLeave();\n },\n };\n actions.push(legend);\n });\n }\n });\n return (\n <Legends\n legends={actions}\n overflowProps={this.props.legendsOverflowProps}\n focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n overflowText={this.props.legendsOverflowText}\n {...this.props.legendProps}\n />\n );\n };\n\n private _onClick(legendTitle: string): void {\n if (this.state.selectedLegend === legendTitle) {\n this.setState({\n selectedLegend: '',\n });\n } else {\n this.setState({\n selectedLegend: legendTitle,\n });\n }\n }\n\n private _onLeave(): void {\n this.setState({\n activeLegend: '',\n });\n }\n\n private _onBarHover(\n pointData: number,\n color: string,\n point: IChartDataPoint,\n mouseEvent: React.MouseEvent<SVGPathElement>,\n ): void {\n mouseEvent.persist();\n\n if (this._calloutAnchorPoint !== point) {\n this._calloutAnchorPoint = point;\n this.setState({\n refSelected: mouseEvent,\n /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered /\n isCalloutVisible: this.state.selectedLegend === '' \|\| this.state.selectedLegend === point.legend!,\n calloutLegend: point.legend!,\n dataForHoverCard: pointData,\n color: color,\n xCalloutValue: point.xAxisCalloutData!,\n yCalloutValue: point.yAxisCalloutData!,\n dataPointCalloutProps: point,\n callOutAccessibilityData: point.callOutAccessibilityData!,\n });\n }\n }\n\n private _onBarLeave(): void {\n //\n }\n\n private _handleChartMouseLeave = () => {\n this._calloutAnchorPoint = null;\n this.setState({\n isCalloutVisible: false,\n });\n };\n\n private _redirectToUrl(href: string \| undefined): void {\n href ? (window.location.href = href) : '';\n }\n\n private _closeCallout = () => {\n this.setState({\n isCalloutVisible: false,\n });\n };\n\n /\n This function checks if the given legend is highlighted or not.\n * A legend can be highlighted in 2 ways:\n * 1. selection: if the user clicks on it\n * 2. hovering: if there is no selected legend and the user hovers over it\n /\n private _legendHighlighted = (legendTitle: string) => {\n return (\n this.state.selectedLegend === legendTitle \|\|\n (this.state.selectedLegend === '' && this.state.activeLegend === legendTitle)\n );\n };\n\n /\n This function checks if none of the legends is selected or hovered.\n */\n private _noLegendHighlighted = () => {\n return this.state.selectedLegend === '' && this.state.activeLegend === '';\n };\n\n private _getAriaLabel = (point: IChartDataPoint): string => {\n const legend = point.xAxisCalloutData \|\| point.legend;\n const yValue = point.yAxisCalloutData \|\| point.data \|\| 0;\n return point.callOutAccessibilityData?.ariaLabel \|\| (legend ? `${legend}, ` : '') + `${yValue}.`;\n };\n}\n"]}
1	+ {"version":3,"file":"MultiStackedBarChart.base.js","sourceRoot":"../src/","sources":["components/StackedBarChart/MultiStackedBarChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport { ILegend, Legends } from '../Legends/index';\nimport {\n IAccessibilityProps,\n IChartDataPoint,\n IChartProps,\n IMultiStackedBarChartProps,\n IMultiStackedBarChartStyles,\n IMultiStackedBarChartStyleProps,\n MultiStackedBarChartVariant,\n} from './index';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';\nimport { TooltipHost, TooltipOverflowMode } from '@fluentui/react';\nimport { formatPrefix as d3FormatPrefix } from 'd3-format';\n\nconst getClassNames = classNamesFunction<IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles>();\n\nexport interface IRefArrayData {\n legendText?: string;\n refElement?: SVGGElement;\n}\n\nexport interface IMultiStackedBarChartState {\n isCalloutVisible: boolean;\n refArray: IRefArrayData[];\n selectedLegend: string;\n activeLegend: string;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n refSelected: any;\n dataForHoverCard: number;\n color: string;\n xCalloutValue?: string;\n yCalloutValue?: string;\n dataPointCalloutProps?: IChartDataPoint;\n callOutAccessibilityData?: IAccessibilityProps;\n calloutLegend: string;\n}\n\nexport class MultiStackedBarChartBase extends React.Component<IMultiStackedBarChartProps, IMultiStackedBarChartState> {\n public static defaultProps: Partial<IMultiStackedBarChartProps> = {\n barHeight: 12,\n hideRatio: [],\n hideDenominator: [],\n };\n\n private _classNames: IProcessedStyleSet<IMultiStackedBarChartStyles>;\n private _calloutId: string;\n private _calloutAnchorPoint: IChartDataPoint \| null;\n private _longestBarTotalValue: number;\n private _isRTL: boolean = getRTL();\n\n public constructor(props: IMultiStackedBarChartProps) {\n super(props);\n this.state = {\n isCalloutVisible: false,\n refArray: [],\n selectedLegend: '',\n activeLegend: '',\n refSelected: null,\n dataForHoverCard: 0,\n color: '',\n xCalloutValue: '',\n yCalloutValue: '',\n calloutLegend: '',\n };\n this._onLeave = this._onLeave.bind(this);\n this._onBarLeave = this._onBarLeave.bind(this);\n this._calloutId = getId('callout');\n }\n\n public render(): JSX.Element {\n const { data, theme, culture } = this.props;\n this._adjustProps();\n const { palette } = theme!;\n const legends = this._getLegendData(data!, this.props.hideRatio!, palette);\n const { isCalloutVisible } = this.state;\n\n this._classNames = getClassNames(this.props.styles!, {\n legendColor: this.state.color,\n theme: theme!,\n variant: this.props.variant,\n hideLabels: this.props.hideLabels,\n });\n\n const legendName = this.state.xCalloutValue ? this.state.xCalloutValue : this.state.calloutLegend;\n const calloutYVal = this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard;\n\n this._longestBarTotalValue = this._computeLongestBarTotalValue();\n const bars: JSX.Element[] = data!.map((singleChartData: IChartProps, index: number) => {\n const singleChartBars = this._createBarsAndLegends(\n singleChartData!,\n this.props.barHeight!,\n palette,\n this.props.hideRatio![index],\n this.props.hideDenominator![index],\n this.props.href,\n );\n return <div key={index}>{singleChartBars}</div>;\n });\n\n return (\n <div className={this._classNames.root} onMouseLeave={this._handleChartMouseLeave}>\n {bars}\n {!this.props.hideLegend && <div className={this._classNames.legendContainer}>{legends}</div>}\n <Callout\n gapSpace={15}\n isBeakVisible={false}\n target={this.state.refSelected}\n setInitialFocus={true}\n hidden={!(!this.props.hideTooltip && isCalloutVisible)}\n directionalHint={DirectionalHint.topAutoEdge}\n id={this._calloutId}\n onDismiss={this._closeCallout}\n preventDismissOnLostFocus={true}\n /** Keep the callout updated with details of focused/hovered bar /\n shouldUpdateWhenHidden={true}\n {...this.props.calloutProps!}\n {...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)}\n >\n <>\n {this.props.onRenderCalloutPerDataPoint ? (\n this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)\n ) : (\n <ChartHoverCard Legend={legendName} YValue={calloutYVal} color={this.state.color} culture={culture} />\n )}\n </>\n </Callout>\n </div>\n );\n }\n\n private _createBarsAndLegends(\n data: IChartProps,\n barHeight: number,\n palette: IPalette,\n hideRatio: boolean,\n hideDenominator: boolean,\n href?: string,\n ): JSX.Element {\n const { culture } = this.props;\n const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n // calculating starting point of each bar and it's range\n const startingPoint: number[] = [];\n const barTotalValue = data.chartData!.reduce(\n (acc: number, point: IChartDataPoint) => acc + (point.data ? point.data : 0),\n 0,\n );\n const total =\n this.props.variant === MultiStackedBarChartVariant.AbsoluteScale ? this._longestBarTotalValue : barTotalValue;\n\n let sumOfPercent = 0;\n data.chartData!.map((point: IChartDataPoint, index: number) => {\n const pointData = point.data ? point.data : 0;\n value = (pointData / total) 100 ? (pointData / total) * 100 : 0;\n if (value < 1 && value !== 0) {\n value = 1;\n } else if (value > 99 && value !== 100) {\n value = 99;\n }\n sumOfPercent += value;\n\n return sumOfPercent;\n });\n\n // Include an imaginary placeholder bar with value equal to\n // the difference between longestBarTotalValue and barTotalValue\n // while calculating sumOfPercent to get correct scalingRatio for absolute-scale variant\n if (this.props.variant === MultiStackedBarChartVariant.AbsoluteScale) {\n let value = total === 0 ? 0 : ((total - barTotalValue) / total) * 100;\n if (value < 1 && value !== 0) {\n value = 1;\n } else if (value > 99 && value !== 100) {\n value = 99;\n }\n sumOfPercent += value;\n }\n\n const scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1;\n\n let prevPosition = 0;\n let value = 0;\n\n const bars = data.chartData!.map((point: IChartDataPoint, index: number) => {\n const color: string = point.color\n ? point.color\n : point.placeHolder\n ? palette.neutralLight\n : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n const pointData = point.data ? point.data : 0;\n if (index > 0) {\n prevPosition += value;\n }\n value = (pointData / total) * 100 ? (pointData / total) * 100 : 0;\n if (value < 1 && value !== 0) {\n value = 1 / scalingRatio;\n } else if (value > 99 && value !== 100) {\n value = 99 / scalingRatio;\n } else {\n value = value / scalingRatio;\n }\n\n startingPoint.push(prevPosition);\n\n const styles = this.props.styles;\n const shouldHighlight = this._legendHighlighted(point.legend!) \|\| this._noLegendHighlighted() ? true : false;\n\n this._classNames = getClassNames(styles!, {\n theme: this.props.theme!,\n shouldHighlight: shouldHighlight,\n href: href,\n variant: this.props.variant,\n hideLabels: this.props.hideLabels,\n });\n\n return (\n <g\n key={index}\n className={point.placeHolder ? this._classNames.placeHolderOnHover : this._classNames.opacityChangeOnHover}\n ref={(e: SVGGElement) => {\n this._refCallback(e, point.legend!);\n }}\n data-is-focusable={!this.props.hideTooltip}\n onFocus={this._onBarFocus.bind(this, pointData, color, point)}\n onBlur={this._onBarLeave}\n role=\"img\"\n aria-label={this._getAriaLabel(point)}\n onMouseOver={point.placeHolder ? undefined : this._onBarHover.bind(this, pointData, color, point)}\n onMouseMove={point.placeHolder ? undefined : this._onBarHover.bind(this, pointData, color, point)}\n onMouseLeave={point.placeHolder ? undefined : this._onBarLeave}\n onClick={href ? (point.placeHolder ? undefined : this._redirectToUrl.bind(this, href)) : point.onClick}\n >\n <rect\n key={index}\n x={`${this._isRTL ? 100 - startingPoint[index] - value : startingPoint[index]}%`}\n y={0}\n width={value + '%'}\n height={barHeight}\n fill={color}\n />\n </g>\n );\n });\n if (this.props.variant === MultiStackedBarChartVariant.AbsoluteScale) {\n if (!this.props.hideLabels) {\n bars.push(\n <text\n key=\"text\"\n x={`${\n this._isRTL\n ? 100 - (startingPoint[startingPoint.length - 1] \|\| 0) - value\n : (startingPoint[startingPoint.length - 1] \|\| 0) + value\n }%`}\n y={barHeight / 2}\n dominantBaseline=\"central\"\n transform={`translate(${this._isRTL ? -4 : 4})`}\n className={this._classNames.barLabel}\n data-is-focusable={true}\n aria-label={`Total: ${barTotalValue}`}\n role=\"img\"\n >\n {d3FormatPrefix(barTotalValue < 1000 ? '.2~' : '.1', barTotalValue)(barTotalValue)}\n </text>,\n );\n }\n } else {\n // Render placeholder bars only for part-to-whole variant\n if (data.chartData!.length === 0) {\n bars.push(\n <g key={0} className={this._classNames.noData} onClick={this._redirectToUrl.bind(this, href)}>\n <rect key={0} x={'0%'} y={0} width={'100%'} height={barHeight} fill={palette.neutralLight} />\n </g>,\n );\n }\n if (barTotalValue === 0) {\n bars.push(\n <g key={'empty'} className={this._classNames.noData} onClick={this._redirectToUrl.bind(this, href)}>\n <rect key={0} x={'0%'} y={0} width={'100%'} height={barHeight} fill={palette.neutralLight} />\n </g>,\n );\n }\n }\n const hideNumber = hideRatio === undefined ? false : hideRatio;\n\n // Hide right side text of chart title for absolute-scale variant\n const showRatio =\n this.props.variant !== MultiStackedBarChartVariant.AbsoluteScale && !hideNumber && data!.chartData!.length === 2;\n const showNumber =\n this.props.variant !== MultiStackedBarChartVariant.AbsoluteScale && !hideNumber && data!.chartData!.length === 1;\n\n const getChartData = () => convertToLocaleString(data!.chartData![0].data ? data!.chartData![0].data : 0, culture);\n return (\n <div className={this._classNames.singleChartRoot}>\n <FocusZone direction={FocusZoneDirection.horizontal}>\n <div className={this._classNames.chartTitle}>\n {data!.chartTitle && (\n <TooltipHost\n overflowMode={TooltipOverflowMode.Self}\n hostClassName={this._classNames.chartTitleLeft}\n content={data!.chartTitle}\n >\n <span {...getAccessibleDataObject(data!.chartTitleAccessibilityData)}>{data!.chartTitle}</span>\n </TooltipHost>\n )}\n {showRatio && (\n <div {...getAccessibleDataObject(data!.chartDataAccessibilityData)}>\n <span className={this._classNames.ratioNumerator}>{getChartData()}</span>\n {!hideDenominator && (\n <span className={this._classNames.ratioDenominator}>\n {' / ' + convertToLocaleString(barTotalValue, culture)}\n </span>\n )}\n </div>\n )}\n {showNumber && (\n <div\n className={this._classNames.ratioNumerator}\n {...getAccessibleDataObject(data!.chartDataAccessibilityData)}\n >\n {getChartData()}\n </div>\n )}\n </div>\n </FocusZone>\n <FocusZone direction={FocusZoneDirection.horizontal}>\n <div className={this._classNames.chartWrapper}>\n <svg className={this._classNames.chart} aria-label={data?.chartTitle}>\n {bars}\n </svg>\n </div>\n </FocusZone>\n </div>\n );\n }\n\n private _onBarFocus(pointData: number, color: string, point: IChartDataPoint): void {\n this.state.refArray.forEach((obj: IRefArrayData) => {\n if (obj.legendText === point.legend!) {\n this.setState({\n refSelected: obj.refElement,\n /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused /\n isCalloutVisible: this.state.selectedLegend === '' \|\| this.state.selectedLegend === point.legend!,\n calloutLegend: point.legend!,\n dataForHoverCard: pointData,\n color: color,\n xCalloutValue: point.xAxisCalloutData!,\n yCalloutValue: point.yAxisCalloutData!,\n dataPointCalloutProps: point,\n callOutAccessibilityData: point.callOutAccessibilityData!,\n });\n }\n });\n }\n\n private _refCallback(element: SVGGElement, legendTitle: string): void {\n this.state.refArray.push({ legendText: legendTitle, refElement: element });\n }\n\n private _adjustProps = (): void => {\n const { theme, className, styles, width, barHeight } = this.props;\n this._classNames = getClassNames(styles!, {\n legendColor: this.state.color,\n theme: theme!,\n width: width,\n className,\n barHeight: barHeight,\n });\n };\n\n private _onHover(legendTitle: string): void {\n this.setState({\n activeLegend: legendTitle,\n });\n }\n\n private _getLegendData = (data: IChartProps[], hideRatio: boolean[], palette: IPalette): JSX.Element => {\n const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n const actions: ILegend[] = [];\n data.forEach((singleChartData: IChartProps, index: number) => {\n const validChartData = singleChartData.chartData!.filter((_: IChartDataPoint) => !_.placeHolder);\n if (validChartData!.length < 3) {\n const hideNumber = hideRatio[index] === undefined ? false : hideRatio[index];\n if (hideNumber) {\n validChartData!.forEach((point: IChartDataPoint) => {\n const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() 4 + 1)];\n const checkSimilarLegends = actions.filter(\n (leg: ILegend) => leg.title === point.legend! && leg.color === color,\n );\n if (checkSimilarLegends!.length > 0) {\n return;\n }\n const legend: ILegend = {\n title: point.legend!,\n color: color,\n action: () => {\n this._onClick(point.legend!);\n },\n hoverAction: () => {\n this._handleChartMouseLeave();\n this._onHover(point.legend!);\n },\n onMouseOutAction: () => {\n this._onLeave();\n },\n };\n actions.push(legend);\n });\n }\n } else {\n validChartData!.forEach((point: IChartDataPoint) => {\n const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n const checkSimilarLegends = actions.filter(\n (leg: ILegend) => leg.title === point.legend! && leg.color === color,\n );\n if (checkSimilarLegends!.length > 0) {\n return;\n }\n const legend: ILegend = {\n title: point.legend!,\n color: color,\n action: () => {\n this._onClick(point.legend!);\n },\n hoverAction: () => {\n this._handleChartMouseLeave();\n this._onHover(point.legend!);\n },\n onMouseOutAction: () => {\n this._onLeave();\n },\n };\n actions.push(legend);\n });\n }\n });\n return (\n <Legends\n legends={actions}\n overflowProps={this.props.legendsOverflowProps}\n focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n overflowText={this.props.legendsOverflowText}\n {...this.props.legendProps}\n />\n );\n };\n\n private _onClick(legendTitle: string): void {\n if (this.state.selectedLegend === legendTitle) {\n this.setState({\n selectedLegend: '',\n });\n } else {\n this.setState({\n selectedLegend: legendTitle,\n });\n }\n }\n\n private _onLeave(): void {\n this.setState({\n activeLegend: '',\n });\n }\n\n private _onBarHover(\n pointData: number,\n color: string,\n point: IChartDataPoint,\n mouseEvent: React.MouseEvent<SVGPathElement>,\n ): void {\n mouseEvent.persist();\n\n if (this._calloutAnchorPoint !== point) {\n this._calloutAnchorPoint = point;\n this.setState({\n refSelected: mouseEvent,\n /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered /\n isCalloutVisible: this.state.selectedLegend === '' \|\| this.state.selectedLegend === point.legend!,\n calloutLegend: point.legend!,\n dataForHoverCard: pointData,\n color: color,\n xCalloutValue: point.xAxisCalloutData!,\n yCalloutValue: point.yAxisCalloutData!,\n dataPointCalloutProps: point,\n callOutAccessibilityData: point.callOutAccessibilityData!,\n });\n }\n }\n\n private _onBarLeave(): void {\n //\n }\n\n private _handleChartMouseLeave = () => {\n this._calloutAnchorPoint = null;\n this.setState({\n isCalloutVisible: false,\n });\n };\n\n private _redirectToUrl(href: string \| undefined): void {\n href ? (window.location.href = href) : '';\n }\n\n private _closeCallout = () => {\n this.setState({\n isCalloutVisible: false,\n });\n };\n\n /\n This function checks if the given legend is highlighted or not.\n * A legend can be highlighted in 2 ways:\n * 1. selection: if the user clicks on it\n * 2. hovering: if there is no selected legend and the user hovers over it\n /\n private _legendHighlighted = (legendTitle: string) => {\n return (\n this.state.selectedLegend === legendTitle \|\|\n (this.state.selectedLegend === '' && this.state.activeLegend === legendTitle)\n );\n };\n\n /\n This function checks if none of the legends is selected or hovered.\n */\n private _noLegendHighlighted = () => {\n return this.state.selectedLegend === '' && this.state.activeLegend === '';\n };\n\n private _getAriaLabel = (point: IChartDataPoint): string => {\n const legend = point.xAxisCalloutData \|\| point.legend;\n const yValue = point.yAxisCalloutData \|\| point.data \|\| 0;\n return point.callOutAccessibilityData?.ariaLabel \|\| (legend ? `${legend}, ` : '') + `${yValue}.`;\n };\n\n private _computeLongestBarTotalValue = () => {\n let longestBarTotalValue = 0;\n this.props.data!.forEach(({ chartData }) => {\n const barTotalValue = chartData!.reduce(\n (acc: number, point: IChartDataPoint) => acc + (point.data ? point.data : 0),\n 0,\n );\n longestBarTotalValue = Math.max(longestBarTotalValue, barTotalValue);\n });\n return longestBarTotalValue;\n };\n}\n"]}

package/lib-amd/components/StackedBarChart/MultiStackedBarChart.styles.js CHANGED Viewed

@@ -1,9 +1,9 @@
-define(["require", "exports", "tslib", "@fluentui/react/lib/Styling"], function (require, exports, tslib_1, Styling_1) {
+define(["require", "exports", "tslib", "./MultiStackedBarChart.types", "@fluentui/react/lib/Styling"], function (require, exports, tslib_1, MultiStackedBarChart_types_1, Styling_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.getMultiStackedBarChartStyles = void 0;
     var getMultiStackedBarChartStyles = function (props) {
-        var className = props.className, width = props.width, barHeight = props.barHeight, shouldHighlight = props.shouldHighlight, theme = props.theme, href = props.href;
+        var className = props.className, width = props.width, barHeight = props.barHeight, shouldHighlight = props.shouldHighlight, theme = props.theme, href = props.href, variant = props.variant, hideLabels = props.hideLabels;
         return {
             root: [
                 theme.fonts.medium,
@@ -22,6 +22,7 @@ define(["require", "exports", "tslib", "@fluentui/react/lib/Styling"], function
                 width: '100%',
                 height: barHeight ? barHeight : 12,
                 display: 'block',
+                overflow: 'visible',
             },
             chartTitle: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.small), { display: 'flex', justifyContent: 'space-between' }),
             chartTitleLeft: {
@@ -29,14 +30,14 @@ define(["require", "exports", "tslib", "@fluentui/react/lib/Styling"], function
                 overflow: 'hidden',
                 whiteSpace: 'nowrap',
                 display: 'block',
-                color: '#171717',
-                marginBottom: '5px',
+                color: theme.palette.neutralPrimary,
+                marginBottom: variant === MultiStackedBarChart_types_1.MultiStackedBarChartVariant.AbsoluteScale ? '4px' : '5px',
             },
             singleChartRoot: {
                 width: width ? width : '100%',
                 display: 'flex',
                 flexDirection: 'column',
-                marginBottom: '10px',
+                marginBottom: variant === MultiStackedBarChart_types_1.MultiStackedBarChartVariant.AbsoluteScale ? '16px' : '10px',
             },
             opacityChangeOnHover: {
                 opacity: shouldHighlight ? '' : '0.1',
@@ -77,6 +78,14 @@ define(["require", "exports", "tslib", "@fluentui/react/lib/Styling"], function
             noData: {
                 cursor: href ? 'pointer' : 'default',
             },
+            barLabel: {
+                fontSize: Styling_1.FontSizes.small,
+                fontWeight: Styling_1.FontWeights.semibold,
+                fill: theme.palette.neutralPrimary,
+            },
+            chartWrapper: {
+                paddingRight: variant === MultiStackedBarChart_types_1.MultiStackedBarChartVariant.AbsoluteScale && !hideLabels ? 40 : 0,
+            },
         };
     };
     exports.getMultiStackedBarChartStyles = getMultiStackedBarChartStyles;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiStackedBarChart.styles.js","sourceRoot":"../src/","sources":["components/StackedBarChart/MultiStackedBarChart.styles.ts"],"names":[],"mappings":";;;;~~IAGO~~,IAAM,6BAA6B,GAAG,UAAC,KAAsC;QAC1E,IAAA,SAAS,~~GAAqD~~,KAAK,~~UAA1D~~,EAAE,KAAK,~~GAA8C~~,KAAK,~~MAAnD~~,EAAE,SAAS,~~GAAmC~~,KAAK,~~UAAxC~~,EAAE,eAAe,~~GAAkB~~,KAAK,~~gBAAvB~~,EAAE,KAAK,~~GAAW~~,KAAK,~~MAAhB~~,EAAE,IAAI,GAAK,KAAK,~~KAAV~~,CAAW;~~QAC5E~~,OAAO;YACL,IAAI,EAAE;gBACJ,KAAK,CAAC,KAAK,CAAC,MAAM;gBAClB,oBAAoB;gBACpB;oBACE,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,QAAQ;oBACvB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;iBAC9B;gBACD,SAAS;aACV;YACD,KAAK,EAAE;gBACL,YAAY,EAAE,MAAM;aACrB;YACD,KAAK,EAAE;gBACL,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;gBAClC,OAAO,EAAE,OAAO;~~aACjB~~;YACD,UAAU,wCACL,KAAK,CAAC,KAAK,CAAC,KAAK,KACpB,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,eAAe,GAChC;YACD,cAAc,EAAE;gBACd,YAAY,EAAE,UAAU;gBACxB,QAAQ,EAAE,QAAQ;gBAClB,UAAU,EAAE,QAAQ;gBACpB,OAAO,EAAE,OAAO;gBAChB,KAAK,EAAE,~~SAAS~~;~~gBAChB~~,YAAY,EAAE,KAAK;~~aACpB~~;YACD,eAAe,EAAE;gBACf,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;gBAC7B,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,YAAY,EAAE,MAAM;~~aACrB~~;YACD,oBAAoB,EAAE;gBACpB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;gBACrC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;gBACpC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;gBAC3B,WAAW,EAAE,CAAC;gBACd,SAAS,EAAE;oBACT,SAAS,EAAE;wBACT,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;wBAC3B,WAAW,EAAE,KAAK;qBACnB;iBACF;aACF;YACD,cAAc,EAAE;gBACd,QAAQ,EAAE,mBAAS,CAAC,MAAM;gBAC1B,UAAU,EAAE,qBAAW,CAAC,QAAQ;gBAChC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aACpC;YACD,gBAAgB,EAAE;gBAChB,QAAQ,EAAE,mBAAS,CAAC,MAAM;gBAC1B,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aACpC;YACD,kBAAkB,EAAE;gBAClB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;gBACrC,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;gBAC3B,WAAW,EAAE,GAAG;gBAChB,SAAS,EAAE;oBACT,SAAS,EAAE;wBACT,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;wBAC3B,WAAW,EAAE,KAAK;qBACnB;iBACF;aACF;YACD,eAAe,EAAE;gBACf,MAAM,EAAE,iBAAiB;aAC1B;YACD,MAAM,EAAE;gBACN,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;aACrC;SACF,CAAC;IACJ,CAAC,CAAC;~~IAhFW~~,QAAA,6BAA6B,~~iCAgFxC~~","sourcesContent":["import { IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles } from './MultiStackedBarChart.types';\nimport { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';\n\nexport const getMultiStackedBarChartStyles = (props: IMultiStackedBarChartStyleProps): IMultiStackedBarChartStyles => {\n const { className, width, barHeight, shouldHighlight, theme, href } = props;\n return {\n root: [\n theme.fonts.medium,\n 'ms-StackedBarChart',\n {\n display: 'flex',\n flexDirection: 'column',\n width: width ? width : '100%',\n },\n className,\n ],\n items: {\n marginBottom: '11px',\n },\n chart: {\n width: '100%',\n height: barHeight ? barHeight : 12,\n display: 'block',\n },\n chartTitle: {\n ...theme.fonts.small,\n display: 'flex',\n justifyContent: 'space-between',\n },\n chartTitleLeft: {\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n display: 'block',\n color: ~~'#171717'~~,\n marginBottom: '5px',\n },\n singleChartRoot: {\n width: width ? width : '100%',\n display: 'flex',\n flexDirection: 'column',\n marginBottom: '10px',\n },\n opacityChangeOnHover: {\n opacity: shouldHighlight ? '' : '0.1',\n cursor: href ? 'pointer' : 'default',\n stroke: theme.palette.white,\n strokeWidth: 2,\n selectors: {\n '&:focus': {\n stroke: theme.palette.black,\n strokeWidth: '2px',\n },\n },\n },\n ratioNumerator: {\n fontSize: FontSizes.medium,\n fontWeight: FontWeights.semibold,\n color: theme.palette.neutralPrimary,\n },\n ratioDenominator: {\n fontSize: FontSizes.medium,\n color: theme.palette.neutralPrimary,\n },\n placeHolderOnHover: {\n opacity: shouldHighlight ? '' : '0.1',\n cursor: 'default',\n stroke: theme.palette.white,\n strokeWidth: '2',\n selectors: {\n '&:focus': {\n stroke: theme.palette.black,\n strokeWidth: '2px',\n },\n },\n },\n legendContainer: {\n margin: '5px 0px 0px 4px',\n },\n noData: {\n cursor: href ? 'pointer' : 'default',\n },\n };\n};\n"]}
1	+ {"version":3,"file":"MultiStackedBarChart.styles.js","sourceRoot":"../src/","sources":["components/StackedBarChart/MultiStackedBarChart.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n IMultiStackedBarChartStyleProps,\n IMultiStackedBarChartStyles,\n MultiStackedBarChartVariant,\n} from './MultiStackedBarChart.types';\nimport { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';\n\nexport const getMultiStackedBarChartStyles = (props: IMultiStackedBarChartStyleProps): IMultiStackedBarChartStyles => {\n const { className, width, barHeight, shouldHighlight, theme, href, variant, hideLabels } = props;\n return {\n root: [\n theme.fonts.medium,\n 'ms-StackedBarChart',\n {\n display: 'flex',\n flexDirection: 'column',\n width: width ? width : '100%',\n },\n className,\n ],\n items: {\n marginBottom: '11px',\n },\n chart: {\n width: '100%',\n height: barHeight ? barHeight : 12,\n display: 'block',\n overflow: 'visible',\n },\n chartTitle: {\n ...theme.fonts.small,\n display: 'flex',\n justifyContent: 'space-between',\n },\n chartTitleLeft: {\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n display: 'block',\n color: theme.palette.neutralPrimary,\n marginBottom: variant === MultiStackedBarChartVariant.AbsoluteScale ? '4px' : '5px',\n },\n singleChartRoot: {\n width: width ? width : '100%',\n display: 'flex',\n flexDirection: 'column',\n marginBottom: variant === MultiStackedBarChartVariant.AbsoluteScale ? '16px' : '10px',\n },\n opacityChangeOnHover: {\n opacity: shouldHighlight ? '' : '0.1',\n cursor: href ? 'pointer' : 'default',\n stroke: theme.palette.white,\n strokeWidth: 2,\n selectors: {\n '&:focus': {\n stroke: theme.palette.black,\n strokeWidth: '2px',\n },\n },\n },\n ratioNumerator: {\n fontSize: FontSizes.medium,\n fontWeight: FontWeights.semibold,\n color: theme.palette.neutralPrimary,\n },\n ratioDenominator: {\n fontSize: FontSizes.medium,\n color: theme.palette.neutralPrimary,\n },\n placeHolderOnHover: {\n opacity: shouldHighlight ? '' : '0.1',\n cursor: 'default',\n stroke: theme.palette.white,\n strokeWidth: '2',\n selectors: {\n '&:focus': {\n stroke: theme.palette.black,\n strokeWidth: '2px',\n },\n },\n },\n legendContainer: {\n margin: '5px 0px 0px 4px',\n },\n noData: {\n cursor: href ? 'pointer' : 'default',\n },\n barLabel: {\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n chartWrapper: {\n paddingRight: variant === MultiStackedBarChartVariant.AbsoluteScale && !hideLabels ? 40 : 0,\n },\n };\n};\n"]}

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

@@ -85,6 +85,16 @@ export interface IMultiStackedBarChartProps {
      * The prop used to define the culture to localized the numbers
      */
     culture?: string;
+    /**
+     * Prop to define the variant of MultiStackedBarChart to render
+     * @default MultiStackedBarChartVariant.PartToWhole
+     */
+    variant?: MultiStackedBarChartVariant;
+    /**
+     * Prop to hide the bar labels
+     * @default false
+     */
+    hideLabels?: boolean;
 }
 export interface IMultiStackedBarChartStyleProps {
     /**
@@ -115,6 +125,14 @@ export interface IMultiStackedBarChartStyleProps {
      * prop to check to decide cursor type
      */
     href?: string;
+    /**
+     * Prop to define the variant of MultiStackedBarChart to render
+     */
+    variant?: MultiStackedBarChartVariant;
+    /**
+     * Prop to hide the bar labels
+     */
+    hideLabels?: boolean;
 }
 export interface IMultiStackedBarChartStyles {
     /**
@@ -165,4 +183,16 @@ export interface IMultiStackedBarChartStyles {
      * Style for stacked bar chart with no data
      */
     noData: IStyle;
+    /**
+     * Style for the bar labels
+     */
+    barLabel: IStyle;
+    /**
+     * Style for the div containing the chart
+     */
+    chartWrapper: IStyle;
+}
+export declare enum MultiStackedBarChartVariant {
+    PartToWhole = "part-to-whole",
+    AbsoluteScale = "absolute-scale"
 }

package/lib-amd/components/StackedBarChart/MultiStackedBarChart.types.js CHANGED Viewed

@@ -1,5 +1,11 @@
 define(["require", "exports"], function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.MultiStackedBarChartVariant = void 0;
+    var MultiStackedBarChartVariant;
+    (function (MultiStackedBarChartVariant) {
+        MultiStackedBarChartVariant["PartToWhole"] = "part-to-whole";
+        MultiStackedBarChartVariant["AbsoluteScale"] = "absolute-scale";
+    })(MultiStackedBarChartVariant = exports.MultiStackedBarChartVariant || (exports.MultiStackedBarChartVariant = {}));
 });
 //# sourceMappingURL=MultiStackedBarChart.types.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiStackedBarChart.types.js","sourceRoot":"../src/","sources":["components/StackedBarChart/MultiStackedBarChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IChartProps, IChartDataPoint } from './index';\nimport { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps } from '@fluentui/react-focus';\nimport { ILegendsProps } from '../Legends/index';\n\nexport interface IMultiStackedBarChartProps {\n /*\n An array of chart data points for the multistacked bar chart\n /\n data?: IChartProps[];\n\n /\n Width of bar chart\n /\n width?: number;\n\n /\n Height of bar chart\n * @default 15\n /\n barHeight?: number;\n\n /\n Additional CSS class(es) to apply to the StackedBarChart.\n /\n className?: string;\n\n /\n Theme (provided through customization.)\n /\n theme?: ITheme;\n\n /\n This property tells whether to show ratio on top of stacked bar chart or not.\n * This property is applicable only if there are 1 or 2 datapoints.\n /\n hideRatio?: boolean[];\n\n /\n Do not show the legend at the bottom of chart\n \n @default false\n /\n hideLegend?: boolean;\n\n /\n Do not show tooltips in chart\n \n @default false\n /\n hideTooltip?: boolean;\n\n /\n Call to provide customized styling that will layer on top of the variant rules.\n /\n styles?: IStyleFunctionOrObject<IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles>;\n\n /\n Url that the data-viz needs to redirect to upon clicking on it\n /\n href?: string;\n\n /\n If this value is set to true the denominator will not be shown for the ratio above the chart\n * This prop is applicable only if hide ratio is false and there are exactly 2 datapoints.\n /\n hideDenominator?: boolean[];\n\n /\n overflow props for legend\n /\n legendsOverflowProps?: Partial<IOverflowSetProps>;\n\n /\n text for overflow legends string\n /\n legendsOverflowText?: string;\n\n /\n focus zone props in hover card for legends\n /\n focusZonePropsForLegendsInHoverCard?: IFocusZoneProps;\n\n /\n props for the legends in the chart\n /\n legendProps?: Partial<ILegendsProps>;\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\nexport interface IMultiStackedBarChartStyleProps {\n /\n Theme (provided through customization.)\n /\n theme: ITheme;\n\n /\n Additional CSS class(es) to apply to the StackedBarChart.\n /\n className?: string;\n\n /\n Width of the chart.\n /\n width?: number;\n\n /\n barHeight for each chart\n /\n barHeight?: number;\n\n /\n color of the datapoint legend\n /\n legendColor?: string;\n\n /\n prop to check if the chart is selcted or hovered upon to determine opacity\n /\n shouldHighlight?: boolean;\n\n /\n prop to check to decide cursor type\n /\n href?: string;\n}\n\nexport interface IMultiStackedBarChartStyles {\n /\n Styling for the root container\n /\n root: IStyle;\n\n /\n Styling for the root container of each chart in the multistacked bar chart\n /\n singleChartRoot: IStyle;\n\n /\n Styling for each item in the container\n /\n items: IStyle;\n\n /\n Styling for each svg in the multistacked bar chart\n /\n chart: IStyle;\n\n /\n Styling for chart title of the stacked bar chart\n /\n chartTitle: IStyle;\n\n /\n Style for left side text of the chart title\n /\n chartTitleLeft: IStyle;\n\n /\n Style to change the opacity of bars in dataviz when we hover on a single bar or legends\n /\n opacityChangeOnHover: IStyle;\n\n /\n Style for the chart ratio numerator\n /\n ratioNumerator: IStyle;\n\n /\n Style for the chart ratio denominator\n /\n ratioDenominator: IStyle;\n\n /\n Style to change the opacity of placeholder data point when we hover a single bar or legend\n /\n placeHolderOnHover: IStyle;\n\n /\n Style for the legends container\n /\n legendContainer: IStyle;\n\n /\n Style for stacked bar chart with no data\n */\n noData: IStyle;\n}\n"]}
1	+ {"version":3,"file":"MultiStackedBarChart.types.js","sourceRoot":"../src/","sources":["components/StackedBarChart/MultiStackedBarChart.types.ts"],"names":[],"mappings":";;;;IA8OA,IAAY,2BAGX;IAHD,WAAY,2BAA2B;QACrC,4DAA6B,CAAA;QAC7B,+DAAgC,CAAA;IAClC,CAAC,EAHW,2BAA2B,GAA3B,mCAA2B,KAA3B,mCAA2B,QAGtC","sourcesContent":["import { IChartProps, IChartDataPoint } from './index';\nimport { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps } from '@fluentui/react-focus';\nimport { ILegendsProps } from '../Legends/index';\n\nexport interface IMultiStackedBarChartProps {\n /*\n An array of chart data points for the multistacked bar chart\n /\n data?: IChartProps[];\n\n /\n Width of bar chart\n /\n width?: number;\n\n /\n Height of bar chart\n * @default 15\n /\n barHeight?: number;\n\n /\n Additional CSS class(es) to apply to the StackedBarChart.\n /\n className?: string;\n\n /\n Theme (provided through customization.)\n /\n theme?: ITheme;\n\n /\n This property tells whether to show ratio on top of stacked bar chart or not.\n * This property is applicable only if there are 1 or 2 datapoints.\n /\n hideRatio?: boolean[];\n\n /\n Do not show the legend at the bottom of chart\n \n @default false\n /\n hideLegend?: boolean;\n\n /\n Do not show tooltips in chart\n \n @default false\n /\n hideTooltip?: boolean;\n\n /\n Call to provide customized styling that will layer on top of the variant rules.\n /\n styles?: IStyleFunctionOrObject<IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles>;\n\n /\n Url that the data-viz needs to redirect to upon clicking on it\n /\n href?: string;\n\n /\n If this value is set to true the denominator will not be shown for the ratio above the chart\n * This prop is applicable only if hide ratio is false and there are exactly 2 datapoints.\n /\n hideDenominator?: boolean[];\n\n /\n overflow props for legend\n /\n legendsOverflowProps?: Partial<IOverflowSetProps>;\n\n /\n text for overflow legends string\n /\n legendsOverflowText?: string;\n\n /\n focus zone props in hover card for legends\n /\n focusZonePropsForLegendsInHoverCard?: IFocusZoneProps;\n\n /\n props for the legends in the chart\n /\n legendProps?: Partial<ILegendsProps>;\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 define the variant of MultiStackedBarChart to render\n * @default MultiStackedBarChartVariant.PartToWhole\n /\n variant?: MultiStackedBarChartVariant;\n\n /\n Prop to hide the bar labels\n * @default false\n /\n hideLabels?: boolean;\n}\n\nexport interface IMultiStackedBarChartStyleProps {\n /\n Theme (provided through customization.)\n /\n theme: ITheme;\n\n /\n Additional CSS class(es) to apply to the StackedBarChart.\n /\n className?: string;\n\n /\n Width of the chart.\n /\n width?: number;\n\n /\n barHeight for each chart\n /\n barHeight?: number;\n\n /\n color of the datapoint legend\n /\n legendColor?: string;\n\n /\n prop to check if the chart is selcted or hovered upon to determine opacity\n /\n shouldHighlight?: boolean;\n\n /\n prop to check to decide cursor type\n /\n href?: string;\n\n /\n Prop to define the variant of MultiStackedBarChart to render\n /\n variant?: MultiStackedBarChartVariant;\n\n /\n Prop to hide the bar labels\n /\n hideLabels?: boolean;\n}\n\nexport interface IMultiStackedBarChartStyles {\n /\n Styling for the root container\n /\n root: IStyle;\n\n /\n Styling for the root container of each chart in the multistacked bar chart\n /\n singleChartRoot: IStyle;\n\n /\n Styling for each item in the container\n /\n items: IStyle;\n\n /\n Styling for each svg in the multistacked bar chart\n /\n chart: IStyle;\n\n /\n Styling for chart title of the stacked bar chart\n /\n chartTitle: IStyle;\n\n /\n Style for left side text of the chart title\n /\n chartTitleLeft: IStyle;\n\n /\n Style to change the opacity of bars in dataviz when we hover on a single bar or legends\n /\n opacityChangeOnHover: IStyle;\n\n /\n Style for the chart ratio numerator\n /\n ratioNumerator: IStyle;\n\n /\n Style for the chart ratio denominator\n /\n ratioDenominator: IStyle;\n\n /\n Style to change the opacity of placeholder data point when we hover a single bar or legend\n /\n placeHolderOnHover: IStyle;\n\n /\n Style for the legends container\n /\n legendContainer: IStyle;\n\n /\n Style for stacked bar chart with no data\n /\n noData: IStyle;\n\n /\n Style for the bar labels\n /\n barLabel: IStyle;\n\n /\n Style for the div containing the chart\n */\n chartWrapper: IStyle;\n}\n\nexport enum MultiStackedBarChartVariant {\n PartToWhole = 'part-to-whole',\n AbsoluteScale = 'absolute-scale',\n}\n"]}

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

@@ -28,7 +28,7 @@ define(["require", "exports", "tslib", "@fluentui/react/lib/Styling"], function
                 overflow: 'hidden',
                 whiteSpace: 'nowrap',
                 display: 'block',
-                color: '#171717',
+                color: theme.palette.neutralPrimary,
                 marginBottom: '5px',
             },
             legendContainer: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StackedBarChart.styles.js","sourceRoot":"../src/","sources":["components/StackedBarChart/StackedBarChart.styles.ts"],"names":[],"mappings":";;;;IAGO,IAAM,SAAS,GAAG,UAAC,KAAiC;;QAEvD,IAAA,SAAS,GAWP,KAAK,UAXE,EACT,KAAK,GAUH,KAAK,MAVF,EACL,SAAS,GASP,KAAK,UATE,EACT,eAAe,GAQb,KAAK,gBARQ,EACf,KAAK,GAOH,KAAK,MAPF,EACL,IAAI,GAMF,KAAK,KANH,EACJ,cAAc,GAKZ,KAAK,eALO,EACd,cAAc,GAIZ,KAAK,eAJO,EACd,WAAW,GAGT,KAAK,YAHI,EACX,WAAW,GAET,KAAK,YAFI,EACX,YAAY,GACV,KAAK,aADK,CACJ;QACV,OAAO;YACL,IAAI,EAAE;gBACJ,KAAK,CAAC,KAAK,CAAC,MAAM;gBAClB,oBAAoB;gBACpB;oBACE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;oBAC7B,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,QAAQ;iBACxB;gBACD,SAAS;aACV;YACD,KAAK,EAAE;gBACL,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;gBAClC,OAAO,EAAE,OAAO;gBAChB,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;aAC7C;YACD,UAAU,wCACL,KAAK,CAAC,KAAK,CAAC,KAAK,KACpB,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,eAAe,GAChC;YACD,cAAc,EAAE;gBACd,YAAY,EAAE,UAAU;gBACxB,QAAQ,EAAE,QAAQ;gBAClB,UAAU,EAAE,QAAQ;gBACpB,OAAO,EAAE,OAAO;gBAChB,KAAK,EAAE,~~SAAS~~;~~gBAChB~~,YAAY,EAAE,KAAK;aACpB;YACD,eAAe,EAAE;gBACf,MAAM,EAAE,iBAAiB;aAC1B;YACD,oBAAoB,EAAE;gBACpB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;gBACrC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;gBACpC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;gBAC3B,WAAW,EAAE,CAAC;gBACd,SAAS,EAAE;oBACT,SAAS,EAAE;wBACT,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;wBAC3B,WAAW,EAAE,KAAK;qBACnB;iBACF;aACF;YACD,cAAc,EAAE;gBACd,QAAQ,EAAE,mBAAS,CAAC,MAAM;gBAC1B,UAAU,EAAE,qBAAW,CAAC,QAAQ;gBAChC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aACpC;YACD,gBAAgB,EAAE;gBAChB,QAAQ,EAAE,mBAAS,CAAC,MAAM;gBAC1B,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aACpC;YACD,kBAAkB,EAAE;gBAClB,QAAQ,EAAE,UAAU;gBACpB,MAAM,EAAE,KAAK;gBACb,SAAS,EAAE,MAAM;gBACjB,YAAY,EAAE,MAAM;aACrB;YACD,SAAS,EAAE;gBACT,QAAQ,EAAE,UAAU;gBACpB,IAAI,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU;gBAC3C,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,GAAG;gBACX,UAAU,EAAE,uBAAuB;gBACnC,WAAW,EAAE,uBAAuB;gBACpC,SAAS,EAAE,WAAW;gBACtB,cAAc,EAAE,cAAc;gBAC9B,YAAY,EAAE,KAAK;gBACnB,SAAS;oBACP,GAAC,8BAAoB,IAAG;wBACtB,MAAM,EAAE,KAAK;wBACb,MAAM,EAAE,KAAK;wBACb,KAAK,EAAE,KAAK;wBACZ,QAAQ,EAAE,gCAAgC;wBAC1C,eAAe,EAAE,+BAA6B,cAAc,UAAK,cAAc,MAAG;qBACzE;uBACZ;aACF;YACD,MAAM,EAAE;gBACN,QAAQ,EAAE,UAAU;gBACpB,IAAI,EAAE,OAAO,GAAG,WAAW,GAAG,UAAU;gBACxC,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,GAAG;gBACX,UAAU,EAAE,uBAAuB;gBACnC,WAAW,EAAE,uBAAuB;gBACpC,SAAS,EAAE,WAAW;gBACtB,cAAc,EAAE,WAAW;gBAC3B,YAAY,EAAE,KAAK;gBACnB,SAAS;oBACP,GAAC,8BAAoB,IAAG;wBACtB,MAAM,EAAE,KAAK;wBACb,MAAM,EAAE,KAAK;wBACb,KAAK,EAAE,KAAK;wBACZ,QAAQ,EAAE,gCAAgC;wBAC1C,eAAe,EAAE,+BAA6B,WAAW,UAAK,WAAW,MAAG;qBACnE;uBACZ;aACF;SACF,CAAC;IACJ,CAAC,CAAC;IAnHW,QAAA,SAAS,aAmHpB","sourcesContent":["import { IStackedBarChartStyleProps, IStackedBarChartStyles } from './StackedBarChart.types';\nimport { FontSizes, FontWeights, HighContrastSelector, IStyle } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: IStackedBarChartStyleProps): IStackedBarChartStyles => {\n const {\n className,\n width,\n barHeight,\n shouldHighlight,\n theme,\n href,\n benchmarkColor,\n benchmarkRatio,\n targetColor,\n targetRatio,\n showTriangle,\n } = props;\n return {\n root: [\n theme.fonts.medium,\n 'ms-StackedBarChart',\n {\n width: width ? width : '100%',\n display: 'flex',\n flexDirection: 'column',\n },\n className,\n ],\n chart: {\n width: '100%',\n height: barHeight ? barHeight : 12,\n display: 'block',\n marginBottom: showTriangle ? '16px' : '10px',\n },\n chartTitle: {\n ...theme.fonts.small,\n display: 'flex',\n justifyContent: 'space-between',\n },\n chartTitleLeft: {\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n display: 'block',\n color: ~~'#171717'~~,\n marginBottom: '5px',\n },\n legendContainer: {\n margin: '4px 0px 0px 4px',\n },\n opacityChangeOnHover: {\n opacity: shouldHighlight ? '' : '0.1',\n cursor: href ? 'pointer' : 'default',\n stroke: theme.palette.white,\n strokeWidth: 2,\n selectors: {\n '&:focus': {\n stroke: theme.palette.black,\n strokeWidth: '2px',\n },\n },\n },\n ratioNumerator: {\n fontSize: FontSizes.medium,\n fontWeight: FontWeights.semibold,\n color: theme.palette.neutralPrimary,\n },\n ratioDenominator: {\n fontSize: FontSizes.medium,\n color: theme.palette.neutralPrimary,\n },\n benchmarkContainer: {\n position: 'relative',\n height: '7px',\n marginTop: '-3px',\n marginBottom: '-1px',\n },\n benchmark: {\n position: 'absolute',\n left: 'calc(' + benchmarkRatio + '% - 4px)',\n width: '0',\n height: '0',\n borderLeft: '4px solid transparent',\n borderRight: '4px solid transparent',\n borderTop: '7px solid',\n borderTopColor: benchmarkColor,\n marginBottom: '4px',\n selectors: {\n [HighContrastSelector]: {\n border: '0px',\n height: '7px',\n width: '7px',\n clipPath: 'polygon(50% 100%, 0 0, 100% 0)',\n backgroundImage: `linear-gradient(to right, ${benchmarkColor}, ${benchmarkColor})`,\n } as IStyle,\n },\n },\n target: {\n position: 'absolute',\n left: 'calc(' + targetRatio + '% - 4px)',\n width: '0',\n height: '0',\n borderLeft: '4px solid transparent',\n borderRight: '4px solid transparent',\n borderTop: '7px solid',\n borderTopColor: targetColor,\n marginBottom: '4px',\n selectors: {\n [HighContrastSelector]: {\n border: '0px',\n height: '7px',\n width: '7px',\n clipPath: 'polygon(50% 100%, 0 0, 100% 0)',\n backgroundImage: `linear-gradient(to right, ${targetColor}, ${targetColor})`,\n } as IStyle,\n },\n },\n };\n};\n"]}
1	+ {"version":3,"file":"StackedBarChart.styles.js","sourceRoot":"../src/","sources":["components/StackedBarChart/StackedBarChart.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { IStackedBarChartStyleProps, IStackedBarChartStyles } from './StackedBarChart.types';\nimport { FontSizes, FontWeights, HighContrastSelector, IStyle } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: IStackedBarChartStyleProps): IStackedBarChartStyles => {\n const {\n className,\n width,\n barHeight,\n shouldHighlight,\n theme,\n href,\n benchmarkColor,\n benchmarkRatio,\n targetColor,\n targetRatio,\n showTriangle,\n } = props;\n return {\n root: [\n theme.fonts.medium,\n 'ms-StackedBarChart',\n {\n width: width ? width : '100%',\n display: 'flex',\n flexDirection: 'column',\n },\n className,\n ],\n chart: {\n width: '100%',\n height: barHeight ? barHeight : 12,\n display: 'block',\n marginBottom: showTriangle ? '16px' : '10px',\n },\n chartTitle: {\n ...theme.fonts.small,\n display: 'flex',\n justifyContent: 'space-between',\n },\n chartTitleLeft: {\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n display: 'block',\n color: theme.palette.neutralPrimary,\n marginBottom: '5px',\n },\n legendContainer: {\n margin: '4px 0px 0px 4px',\n },\n opacityChangeOnHover: {\n opacity: shouldHighlight ? '' : '0.1',\n cursor: href ? 'pointer' : 'default',\n stroke: theme.palette.white,\n strokeWidth: 2,\n selectors: {\n '&:focus': {\n stroke: theme.palette.black,\n strokeWidth: '2px',\n },\n },\n },\n ratioNumerator: {\n fontSize: FontSizes.medium,\n fontWeight: FontWeights.semibold,\n color: theme.palette.neutralPrimary,\n },\n ratioDenominator: {\n fontSize: FontSizes.medium,\n color: theme.palette.neutralPrimary,\n },\n benchmarkContainer: {\n position: 'relative',\n height: '7px',\n marginTop: '-3px',\n marginBottom: '-1px',\n },\n benchmark: {\n position: 'absolute',\n left: 'calc(' + benchmarkRatio + '% - 4px)',\n width: '0',\n height: '0',\n borderLeft: '4px solid transparent',\n borderRight: '4px solid transparent',\n borderTop: '7px solid',\n borderTopColor: benchmarkColor,\n marginBottom: '4px',\n selectors: {\n [HighContrastSelector]: {\n border: '0px',\n height: '7px',\n width: '7px',\n clipPath: 'polygon(50% 100%, 0 0, 100% 0)',\n backgroundImage: `linear-gradient(to right, ${benchmarkColor}, ${benchmarkColor})`,\n } as IStyle,\n },\n },\n target: {\n position: 'absolute',\n left: 'calc(' + targetRatio + '% - 4px)',\n width: '0',\n height: '0',\n borderLeft: '4px solid transparent',\n borderRight: '4px solid transparent',\n borderTop: '7px solid',\n borderTopColor: targetColor,\n marginBottom: '4px',\n selectors: {\n [HighContrastSelector]: {\n border: '0px',\n height: '7px',\n width: '7px',\n clipPath: 'polygon(50% 100%, 0 0, 100% 0)',\n backgroundImage: `linear-gradient(to right, ${targetColor}, ${targetColor})`,\n } as IStyle,\n },\n },\n };\n};\n"]}

package/lib-commonjs/components/DonutChart/Arc/Arc.d.ts CHANGED Viewed

@@ -7,14 +7,15 @@ export declare class Arc extends React.Component<IArcProps, IArcState> {
     static defaultProps: Partial<IArcProps>;
     state: {};
     private currentRef;
+    private _isRTL;
     static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): Partial<IArcState> | null;
     updateChart(newProps: IArcProps): void;
     render(): JSX.Element;
-    componentDidUpdate(): void;
     private _onFocus;
     private _hoverOn;
     private _hoverOff;
     private _onBlur;
     private _redirectToUrl;
     private _getAriaLabel;
+    private _renderArcLabel;
 }

package/lib-commonjs/components/DonutChart/Arc/Arc.js CHANGED Viewed

@@ -6,14 +6,14 @@ var React = require("react");
 var shape = require("d3-shape");
 var Utilities_1 = require("@fluentui/react/lib/Utilities");
 var Arc_styles_1 = require("./Arc.styles");
-var index_1 = require("../../../utilities/index");
-var TEXT_PADDING = 5;
+var d3_format_1 = require("d3-format");
 var Arc = /** @class */ (function (_super) {
     tslib_1.__extends(Arc, _super);
     function Arc() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = {};
         _this.currentRef = React.createRef();
+        _this._isRTL = Utilities_1.getRTL();
         _this._hoverOff = function () {
             _this.props.hoverLeaveCallback();
         };
@@ -27,6 +27,20 @@ var Arc = /** @class */ (function (_super) {
             var yValue = point.yAxisCalloutData || point.data || 0;
             return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || (legend ? legend + ", " : '') + (yValue + ".");
         };
+        _this._renderArcLabel = function (className) {
+            var _a = _this.props, arc = _a.arc, data = _a.data, innerRadius = _a.innerRadius, outerRadius = _a.outerRadius, showLabelsInPercent = _a.showLabelsInPercent, totalValue = _a.totalValue, hideLabels = _a.hideLabels;
+            if (hideLabels || Math.abs(data.endAngle - data.startAngle) < Math.PI / 12) {
+                return null;
+            }
+            var _b = arc.centroid(data), base = _b[0], perp = _b[1];
+            var hyp = Math.sqrt(base * base + perp * perp);
+            var labelRadius = Math.max(innerRadius, outerRadius) + 2;
+            var angle = (data.startAngle + data.endAngle) / 2;
+            var arcValue = data.value;
+            return (React.createElement("text", { x: (hyp === 0 ? 0 : base / hyp) * labelRadius, y: (hyp === 0 ? 0 : perp / hyp) * labelRadius, textAnchor: angle > Math.PI !== _this._isRTL ? 'end' : 'start', dominantBaseline: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto', className: className, "aria-hidden": true }, showLabelsInPercent
+                ? d3_format_1.format('.0%')(totalValue === 0 ? 0 : arcValue / totalValue)
+                : d3_format_1.formatPrefix(arcValue < 1000 ? '.2~' : '.1', arcValue)(arcValue)));
+        };
         return _this;
     }
     Arc.getDerivedStateFromProps = function (nextProps) {
@@ -50,17 +64,7 @@ var Arc = /** @class */ (function (_super) {
         return (React.createElement("g", { ref: this.currentRef },
             !!focusedArcId && focusedArcId === id && (React.createElement("path", { id: id + 'focusRing', d: arc(this.props.focusData), className: classNames.focusRing })),
             React.createElement("path", { id: id, d: arc(this.props.data), onFocus: this._onFocus.bind(this, this.props.data.data, id), className: classNames.root, "data-is-focusable": true, onMouseOver: this._hoverOn.bind(this, this.props.data.data), onMouseMove: this._hoverOn.bind(this, this.props.data.data), onMouseLeave: this._hoverOff, onBlur: this._onBlur, opacity: opacity, onClick: href ? this._redirectToUrl.bind(this, href) : (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.data.onClick, "aria-label": this._getAriaLabel(), role: "img" }),
-            React.createElement("text", { textAnchor: 'middle', className: classNames.insideDonutString, y: 5 }, this.props.valueInsideDonut)));
-    };
-    Arc.prototype.componentDidUpdate = function () {
-        var href = this.props.href;
-        var getClassNames = Utilities_1.classNamesFunction();
-        var classNames = getClassNames(Arc_styles_1.getStyles, {
-            color: this.props.color,
-            href: href,
-            theme: this.props.theme,
-        });
-        index_1.wrapTextInsideDonut(classNames.insideDonutString, this.props.innerRadius * 2 - TEXT_PADDING);
+            this._renderArcLabel(classNames.arcLabel)));
     };
     Arc.prototype._onFocus = function (data, id) {
         this.props.onFocusCallback(data, id, this.currentRef.current);

package/lib-commonjs/components/DonutChart/Arc/Arc.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Arc.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,gCAAkC;AAClC,~~2DAAmE~~;~~AACnE~~,2CAAyC;AAGzC,~~kDAA~~+D;AAM/~~D,IAAM,YAAY,GAAW,CAAC,CAAC~~;~~AAE/B;~~IAAyB,+BAAqC;IAA9D;QAAA,qEA+FC;~~QA1FQ~~,WAAK,GAAO,EAAE,CAAC;QAEd,gBAAU,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;~~QAsE~~/C,eAAS,GAAG;YAClB,KAAI,CAAC,KAAK,CAAC,kBAAmB,EAAE,CAAC;QACnC,CAAC,CAAC;QAEM,aAAO,GAAG;YAChB,KAAI,CAAC,KAAK,CAAC,cAAe,EAAE,CAAC;QAC/B,CAAC,CAAC;QAMM,mBAAa,GAAG;;YACtB,IAAM,KAAK,GAAG,KAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC;YACpC,IAAM,MAAM,GAAG,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,MAAM,CAAC;YACtD,IAAM,MAAM,GAAG,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;YACzD,OAAO,CAAA,MAAA,KAAK,CAAC,wBAAwB,0CAAE,SAAS,KAAI,CAAC,MAAM,CAAC,CAAC,CAAI,MAAM,OAAI,CAAC,CAAC,CAAC,EAAE,CAAC,IAAM,MAAM,MAAG,CAAA,CAAC;QACnG,CAAC,CAAC;;IACJ,CAAC;~~IAtFe~~,4BAAwB,GAAtC,UAAuC,SAA8B;QACnE,YAAY,CAAC,SAAS,CAAC,CAAC;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,yBAAW,GAAlB,UAAmB,QAAmB;QACpC,YAAY,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC;IAEM,oBAAM,GAAb;;QACQ,IAAA,KAA8B,IAAI,CAAC,KAAK,EAAtC,GAAG,SAAA,EAAE,IAAI,UAAA,EAAE,YAAY,kBAAe,CAAC;QAC/C,IAAM,aAAa,GAAG,8BAAkB,EAAyB,CAAC;QAClE,IAAM,UAAU,GAAG,aAAa,CAAC,sBAAS,EAAE;YAC1C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YACvB,IAAI,EAAE,IAAK;YACX,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM;SACzB,CAAC,CAAC;QACH,IAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAS,GAAG,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,MAAO,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QAChH,IAAM,OAAO,GACX,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QACjG,OAAO,CACL,2BAAG,GAAG,EAAE,IAAI,CAAC,UAAU;YACpB,CAAC,CAAC,YAAY,IAAI,YAAY,KAAK,EAAE,IAAI,CACxC,8BAAM,EAAE,EAAE,EAAE,GAAG,WAAW,EAAE,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,GAAI,CAC9F;YACD,8BACE,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EACvB,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,EAAE,EAAE,CAAC,EAC5D,SAAS,EAAE,UAAU,CAAC,IAAI,uBACP,IAAI,EACvB,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,EAC5D,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,EAC5D,YAAY,EAAE,IAAI,CAAC,SAAS,EAC5B,MAAM,EAAE,IAAI,CAAC,OAAO,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,0CAAE,IAAI,CAAC,OAAO,gBACxE,IAAI,CAAC,aAAa,EAAE,EAChC,IAAI,EAAC,KAAK,GACV;~~YACF~~,~~8BAAM~~,~~UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,~~CAAC,~~iBAAiB~~,~~EAAE,~~CAAC,~~EAAE~~,CAAC,~~IACtE~~,~~IAAI,~~CAAC,~~KAAK~~,~~CAAC,gBAAiB,CACxB,~~CACL,~~CACL,~~CAAC;IACJ,CAAC;IAEM,gCAAkB,GAAzB;QACU,IAAA,IAAI,GAAK,IAAI,CAAC,KAAK,KAAf,CAAgB;QAC5B,IAAM,aAAa,GAAG,8BAAkB,EAAyB,CAAC;QAClE,IAAM,UAAU,GAAG,aAAa,CAAC,sBAAS,EAAE;YAC1C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YACvB,IAAI,EAAE,IAAK;YACX,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM;SACzB,CAAC,CAAC;QAEH,2BAAmB,CAAC,UAAU,CAAC,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,WAAY,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC;IAChG,CAAC;IAEO,sBAAQ,GAAhB,UAAiB,IAAqB,EAAE,EAAU;QAChD,IAAI,CAAC,KAAK,CAAC,eAAgB,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACjE,CAAC;IAEO,sBAAQ,GAAhB,UAAiB,IAAqB,EAAE,UAA4C;QAClF,UAAU,CAAC,OAAO,EAAE,CAAC;QACrB,IAAI,CAAC,KAAK,CAAC,eAAgB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IAChD,CAAC;IAUO,4BAAc,GAAtB,UAAuB,IAAwB;QAC7C,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5C,CAAC;~~IAtFa~~,gBAAY,GAAuB;QAC/C,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE;KACjB,CAAC;~~IA4FJ~~,UAAC;CAAA,AA/FD,CAAyB,KAAK,CAAC,SAAS,GA+~~FvC~~;AA/FY,kBAAG;~~AAiGhB~~,SAAS,YAAY,CAAC,QAAmB;IACvC,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAC/C,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;AACjD,CAAC","sourcesContent":["import * as React from 'react';\nimport * as shape from 'd3-shape';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { IChartDataPoint } from '../index';\nimport { IArcProps, IArcStyles } from './index';\nimport { ~~wrapTextInsideDonut~~ } from '~~../../../utilities/index~~';\n\nexport interface IArcState {\n isCalloutVisible?: boolean;\n}\n\~~nconst TEXT_PADDING: number = 5;\n\~~nexport class Arc extends React.Component<IArcProps, IArcState> {\n public static defaultProps: Partial<IArcProps> = {\n arc: shape.arc(),\n };\n\n public state: {} = {};\n\n private currentRef = React.createRef<SVGPathElement>();\n\n public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): Partial<IArcState> \| null {\n _updateChart(nextProps);\n return null;\n }\n\n public updateChart(newProps: IArcProps): void {\n _updateChart(newProps);\n }\n\n public render(): JSX.Element {\n const { arc, href, focusedArcId } = this.props;\n const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n const classNames = getClassNames(getStyles, {\n color: this.props.color,\n href: href!,\n theme: this.props.theme!,\n });\n const id = this.props.uniqText! + this.props.data!.data.legend!.replace(/\\s+/, '') + this.props.data!.data.data;\n const opacity: number =\n this.props.activeArc === this.props.data!.data.legend \|\| this.props.activeArc === '' ? 1 : 0.1;\n return (\n <g ref={this.currentRef}>\n {!!focusedArcId && focusedArcId === id && (\n <path id={id + 'focusRing'} d={arc(this.props.focusData)} className={classNames.focusRing} />\n )}\n <path\n id={id}\n d={arc(this.props.data)}\n onFocus={this._onFocus.bind(this, this.props.data!.data, id)}\n className={classNames.root}\n data-is-focusable={true}\n onMouseOver={this._hoverOn.bind(this, this.props.data!.data)}\n onMouseMove={this._hoverOn.bind(this, this.props.data!.data)}\n onMouseLeave={this._hoverOff}\n onBlur={this._onBlur}\n opacity={opacity}\n onClick={href ? this._redirectToUrl.bind(this, href) : this.props.data?.data.onClick}\n aria-label={this._getAriaLabel()}\n role=\"img\"\n />\n ~~<text textAnchor=~~{~~'middle'} className={classNames.insideDonutString} y={5}>\n {~~this.~~props~~.~~valueInsideDonut!~~}\n ~~</text>\n~~ </g>\n );\n }\n\n public componentDidUpdate(): void {\n const { href } = this.props;\n const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n const classNames = getClassNames(getStyles, {\n color: this.props.color,\n href: href!,\n theme: this.props.theme!,\n });\n\n wrapTextInsideDonut(classNames.insideDonutString, this.props.innerRadius! * 2 - TEXT_PADDING);\n }\n\n private _onFocus(data: IChartDataPoint, id: string): void {\n this.props.onFocusCallback!(data, id, this.currentRef.current);\n }\n\n private _hoverOn(data: IChartDataPoint, mouseEvent: React.MouseEvent<SVGPathElement>): void {\n mouseEvent.persist();\n this.props.hoverOnCallback!(data, mouseEvent);\n }\n\n private _hoverOff = (): void => {\n this.props.hoverLeaveCallback!();\n };\n\n private _onBlur = (): void => {\n this.props.onBlurCallback!();\n };\n\n private _redirectToUrl(href: string \| undefined): void {\n href ? (window.location.href = href) : '';\n }\n\n private _getAriaLabel = (): string => {\n const point = this.props.data!.data;\n const legend = point.xAxisCalloutData \|\| point.legend;\n const yValue = point.yAxisCalloutData \|\| point.data \|\| 0;\n return point.callOutAccessibilityData?.ariaLabel \|\| (legend ? `${legend}, ` : '') + `${yValue}.`;\n };\n}\n\nfunction _updateChart(newProps: IArcProps): void {\n newProps.arc.innerRadius(newProps.innerRadius);\n newProps.arc.outerRadius(newProps.outerRadius);\n}\n"]}
1	+ {"version":3,"file":"Arc.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport * as shape from 'd3-shape';\nimport { classNamesFunction, getRTL } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { IChartDataPoint } from '../index';\nimport { IArcProps, IArcStyles } from './index';\nimport { format as d3Format, formatPrefix as d3FormatPrefix } from 'd3-format';\n\nexport interface IArcState {\n isCalloutVisible?: boolean;\n}\n\nexport class Arc extends React.Component<IArcProps, IArcState> {\n public static defaultProps: Partial<IArcProps> = {\n arc: shape.arc(),\n };\n\n public state: {} = {};\n\n private currentRef = React.createRef<SVGPathElement>();\n private _isRTL: boolean = getRTL();\n\n public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): Partial<IArcState> \| null {\n _updateChart(nextProps);\n return null;\n }\n\n public updateChart(newProps: IArcProps): void {\n _updateChart(newProps);\n }\n\n public render(): JSX.Element {\n const { arc, href, focusedArcId } = this.props;\n const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n const classNames = getClassNames(getStyles, {\n color: this.props.color,\n href: href!,\n theme: this.props.theme!,\n });\n const id = this.props.uniqText! + this.props.data!.data.legend!.replace(/\\s+/, '') + this.props.data!.data.data;\n const opacity: number =\n this.props.activeArc === this.props.data!.data.legend \|\| this.props.activeArc === '' ? 1 : 0.1;\n return (\n <g ref={this.currentRef}>\n {!!focusedArcId && focusedArcId === id && (\n <path id={id + 'focusRing'} d={arc(this.props.focusData)} className={classNames.focusRing} />\n )}\n <path\n id={id}\n d={arc(this.props.data)}\n onFocus={this._onFocus.bind(this, this.props.data!.data, id)}\n className={classNames.root}\n data-is-focusable={true}\n onMouseOver={this._hoverOn.bind(this, this.props.data!.data)}\n onMouseMove={this._hoverOn.bind(this, this.props.data!.data)}\n onMouseLeave={this._hoverOff}\n onBlur={this._onBlur}\n opacity={opacity}\n onClick={href ? this._redirectToUrl.bind(this, href) : this.props.data?.data.onClick}\n aria-label={this._getAriaLabel()}\n role=\"img\"\n />\n {this._renderArcLabel(classNames.arcLabel)}\n </g>\n );\n }\n\n private _onFocus(data: IChartDataPoint, id: string): void {\n this.props.onFocusCallback!(data, id, this.currentRef.current);\n }\n\n private _hoverOn(data: IChartDataPoint, mouseEvent: React.MouseEvent<SVGPathElement>): void {\n mouseEvent.persist();\n this.props.hoverOnCallback!(data, mouseEvent);\n }\n\n private _hoverOff = (): void => {\n this.props.hoverLeaveCallback!();\n };\n\n private _onBlur = (): void => {\n this.props.onBlurCallback!();\n };\n\n private _redirectToUrl(href: string \| undefined): void {\n href ? (window.location.href = href) : '';\n }\n\n private _getAriaLabel = (): string => {\n const point = this.props.data!.data;\n const legend = point.xAxisCalloutData \|\| point.legend;\n const yValue = point.yAxisCalloutData \|\| point.data \|\| 0;\n return point.callOutAccessibilityData?.ariaLabel \|\| (legend ? `${legend}, ` : '') + `${yValue}.`;\n };\n\n private _renderArcLabel = (className: string) => {\n const { arc, data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels } = this.props;\n\n if (hideLabels \|\| Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12) {\n return null;\n }\n\n const [base, perp] = arc.centroid(data);\n const hyp = Math.sqrt(base * base + perp * perp);\n const labelRadius = Math.max(innerRadius!, outerRadius!) + 2;\n const angle = (data!.startAngle + data!.endAngle) / 2;\n const arcValue = data!.value;\n\n return (\n <text\n x={(hyp === 0 ? 0 : base / hyp) * labelRadius}\n y={(hyp === 0 ? 0 : perp / hyp) * labelRadius}\n textAnchor={angle > Math.PI !== this._isRTL ? 'end' : 'start'}\n dominantBaseline={angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto'}\n className={className}\n aria-hidden={true}\n >\n {showLabelsInPercent\n ? d3Format('.0%')(totalValue! === 0 ? 0 : arcValue / totalValue!)\n : d3FormatPrefix(arcValue < 1000 ? '.2~' : '.1', arcValue)(arcValue)}\n </text>\n );\n };\n}\n\nfunction _updateChart(newProps: IArcProps): void {\n newProps.arc.innerRadius(newProps.innerRadius);\n newProps.arc.outerRadius(newProps.outerRadius);\n}\n"]}

package/lib-commonjs/components/DonutChart/Arc/Arc.styles.js CHANGED Viewed

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStyles = void 0;
 var Styling_1 = require("@fluentui/react/lib/Styling");
 var getStyles = function (props) {
-    var _a;
     var color = props.color, href = props.href, theme = props.theme;
     return {
         root: {
@@ -22,14 +21,10 @@ var getStyles = function (props) {
             strokeWidth: 4,
             fill: 'transparent',
         },
-        insideDonutString: {
-            fontSize: Styling_1.FontSizes.large,
-            fill: theme.semanticColors.bodyText,
-            selectors: (_a = {},
-                _a[Styling_1.HighContrastSelectorBlack] = {
-                    fill: 'rgb(179, 179, 179)',
-                },
-                _a),
+        arcLabel: {
+            fontSize: Styling_1.FontSizes.small,
+            fontWeight: Styling_1.FontWeights.semibold,
+            fill: theme.palette.neutralPrimary,
         },
     };
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Arc.styles.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.styles.ts"],"names":[],"mappings":";;;AACA,~~uDAAmG~~;~~AAE5F~~,IAAM,SAAS,GAAG,UAAC,KAAgB;;IAChC,IAAA,KAAK,GAAkB,KAAK,MAAvB,EAAE,IAAI,GAAY,KAAK,KAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IACrC,OAAO;QACL,IAAI,EAAE;YACJ,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YACpC,MAAM,EAAE,wBAAc,CAAC,KAAK;YAC5B,OAAO,EAAE,aAAa;YACtB,SAAS,EAAE;gBACT,oBAAoB,EAAE;oBACpB,MAAM,EAAE,GAAG;iBACZ;aACF;SACF;QACD,SAAS,EAAE;YACT,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW;YACxC,WAAW,EAAE,CAAC;YACd,IAAI,EAAE,aAAa;SACpB;QACD,~~iBAAiB~~,EAAE;~~YACjB~~,QAAQ,EAAE,mBAAS,CAAC,KAAK;YACzB,~~IAAI~~,EAAE,~~KAAK~~,CAAC,~~cAAc,CAAC,~~QAAQ;~~YACnC~~,~~SAAS;gBACP~~,~~GAAC~~,~~mCAAyB~~,~~IAAG;oBAC3B~~,~~IAAI~~,~~EAAE~~,~~oBAAoB~~;~~iBAC3B~~;~~mBACF;SACF;~~KACF,CAAC;AACJ,CAAC,CAAC;~~AA7BW~~,QAAA,SAAS,~~aA6BpB~~","sourcesContent":["import { IArcProps, IArcStyles } from './Arc.types';\nimport { DefaultPalette, FontSizes, ~~HighContrastSelectorBlack~~ } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: IArcProps): IArcStyles => {\n const { color, href, theme } = props;\n return {\n root: {\n fill: color,\n cursor: href ? 'pointer' : 'default',\n stroke: DefaultPalette.white,\n outline: 'transparent',\n selectors: {\n '::-moz-focus-inner': {\n border: '0',\n },\n },\n },\n focusRing: {\n stroke: theme.semanticColors.focusBorder,\n strokeWidth: 4,\n fill: 'transparent',\n },\n ~~insideDonutString~~: {\n fontSize: FontSizes.~~large~~,\n ~~fill~~: ~~theme~~.~~semanticColors.bodyText~~,\n ~~selectors: {\n [HighContrastSelectorBlack]: {\n~~ fill: ~~'rgb(179, 179, 179)'~~,\n ~~},\n },\n~~ },\n };\n};\n"]}
1	+ {"version":3,"file":"Arc.styles.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.styles.ts"],"names":[],"mappings":";;;AACA,uDAAqF;AAE9E,IAAM,SAAS,GAAG,UAAC,KAAgB;IAChC,IAAA,KAAK,GAAkB,KAAK,MAAvB,EAAE,IAAI,GAAY,KAAK,KAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IACrC,OAAO;QACL,IAAI,EAAE;YACJ,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YACpC,MAAM,EAAE,wBAAc,CAAC,KAAK;YAC5B,OAAO,EAAE,aAAa;YACtB,SAAS,EAAE;gBACT,oBAAoB,EAAE;oBACpB,MAAM,EAAE,GAAG;iBACZ;aACF;SACF;QACD,SAAS,EAAE;YACT,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW;YACxC,WAAW,EAAE,CAAC;YACd,IAAI,EAAE,aAAa;SACpB;QACD,QAAQ,EAAE;YACR,QAAQ,EAAE,mBAAS,CAAC,KAAK;YACzB,UAAU,EAAE,qBAAW,CAAC,QAAQ;YAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SACnC;KACF,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,SAAS,aAyBpB","sourcesContent":["import { IArcProps, IArcStyles } from './Arc.types';\nimport { DefaultPalette, FontSizes, FontWeights } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: IArcProps): IArcStyles => {\n const { color, href, theme } = props;\n return {\n root: {\n fill: color,\n cursor: href ? 'pointer' : 'default',\n stroke: DefaultPalette.white,\n outline: 'transparent',\n selectors: {\n '::-moz-focus-inner': {\n border: '0',\n },\n },\n },\n focusRing: {\n stroke: theme.semanticColors.focusBorder,\n strokeWidth: 4,\n fill: 'transparent',\n },\n arcLabel: {\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n };\n};\n"]}

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

@@ -69,6 +69,18 @@ export interface IArcProps {
      * props for inside donut value
      */
     valueInsideDonut?: string | number;
+    /**
+     * Prop to show the arc labels in percentage format
+     */
+    showLabelsInPercent?: boolean;
+    /**
+     * Prop used to define the sum of all arc values
+     */
+    totalValue?: number;
+    /**
+     * Prop to hide the arc labels
+     */
+    hideLabels?: boolean;
 }
 export interface IArcData {
     /**
@@ -101,12 +113,12 @@ export interface IArcStyles {
      * Style set for the card header component root
      */
     root: IStyle;
-    /**
-     * Style set for the inside donut string
-     */
-    insideDonutString: IStyle;
     /**
      * styles for the focus
      */
     focusRing: IStyle;
+    /**
+     * Style for the arc labels
+     */
+    arcLabel: IStyle;
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Arc.types.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IChartDataPoint } from '../index';\nexport interface IArcProps {\n /*\n Theme\n /\n theme: ITheme;\n /\n Data to render in the Arc.\n /\n data?: IArcData;\n\n /\n Data to render focused Arc\n /\n focusData?: IArcData;\n\n /\n id of the focused arc\n /\n focusedArcId?: string;\n /\n shape for Arc.\n /\n / eslint-disable @typescript-eslint/no-explicit-any /\n arc?: any;\n\n /\n innerRadius of the Arc.\n /\n innerRadius?: number;\n\n /\n outerRadius of the Arc.\n /\n outerRadius?: number;\n\n /\n Color for the Arc.\n /\n color: string;\n\n /\n Defines the function that is executed upon hovering over the legend\n /\n hoverOnCallback?: Function;\n\n /\n Defines the function that is executed upon hovering over the legend\n /\n onFocusCallback?: Function;\n\n /\n Defines the function that is executed upon hovering Leave the legend\n /\n onBlurCallback?: Function;\n\n /\n Defines the function that is executed upon hovering Leave the legend\n /\n hoverLeaveCallback?: Function;\n\n /\n Uniq string for chart\n /\n uniqText?: string;\n\n /\n string for callout id\n /\n calloutId?: string;\n\n /\n Active Arc for chart\n /\n activeArc?: string;\n\n /\n internal prop for href\n /\n href?: string;\n\n /\n props for inside donut value\n /\n valueInsideDonut?: string \| number;\n}\n\nexport interface IArcData {\n /\n Data to render in the chart for individual arc.\n /\n data: IChartDataPoint;\n /\n endAngle of the Arc\n /\n endAngle: number;\n /\n index of the Arc\n /\n index: number;\n /\n padAngle of the Arc\n /\n padAngle: number;\n /\n startAngle of the Arc\n /\n startAngle: number;\n /\n value of the Arc\n /\n value: number;\n}\n\nexport interface IArcStyles {\n /\n Style set for the card header component root\n /\n root: IStyle;\n\n /\n ~~Style~~ ~~set~~ for the ~~inside donut string~~\n /\n ~~insideDonutString~~: IStyle;\n\n /\n ~~styles~~ for the ~~focus~~\n */\n ~~focusRing~~: IStyle;\n}\n"]}
1	+ {"version":3,"file":"Arc.types.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IChartDataPoint } from '../index';\nexport interface IArcProps {\n /*\n Theme\n /\n theme: ITheme;\n /\n Data to render in the Arc.\n /\n data?: IArcData;\n\n /\n Data to render focused Arc\n /\n focusData?: IArcData;\n\n /\n id of the focused arc\n /\n focusedArcId?: string;\n /\n shape for Arc.\n /\n / eslint-disable @typescript-eslint/no-explicit-any /\n arc?: any;\n\n /\n innerRadius of the Arc.\n /\n innerRadius?: number;\n\n /\n outerRadius of the Arc.\n /\n outerRadius?: number;\n\n /\n Color for the Arc.\n /\n color: string;\n\n /\n Defines the function that is executed upon hovering over the legend\n /\n hoverOnCallback?: Function;\n\n /\n Defines the function that is executed upon hovering over the legend\n /\n onFocusCallback?: Function;\n\n /\n Defines the function that is executed upon hovering Leave the legend\n /\n onBlurCallback?: Function;\n\n /\n Defines the function that is executed upon hovering Leave the legend\n /\n hoverLeaveCallback?: Function;\n\n /\n Uniq string for chart\n /\n uniqText?: string;\n\n /\n string for callout id\n /\n calloutId?: string;\n\n /\n Active Arc for chart\n /\n activeArc?: string;\n\n /\n internal prop for href\n /\n href?: string;\n\n /\n props for inside donut value\n /\n valueInsideDonut?: string \| number;\n\n /\n Prop to show the arc labels in percentage format\n /\n showLabelsInPercent?: boolean;\n\n /\n Prop used to define the sum of all arc values\n /\n totalValue?: number;\n\n /\n Prop to hide the arc labels\n /\n hideLabels?: boolean;\n}\n\nexport interface IArcData {\n /\n Data to render in the chart for individual arc.\n /\n data: IChartDataPoint;\n /\n endAngle of the Arc\n /\n endAngle: number;\n /\n index of the Arc\n /\n index: number;\n /\n padAngle of the Arc\n /\n padAngle: number;\n /\n startAngle of the Arc\n /\n startAngle: number;\n /\n value of the Arc\n /\n value: number;\n}\n\nexport interface IArcStyles {\n /\n Style set for the card header component root\n /\n root: IStyle;\n\n /\n styles for the focus\n /\n focusRing: IStyle;\n\n /\n Style for the arc labels\n */\n arcLabel: IStyle;\n}\n"]}