npm - @fluentui/react-charting - Versions diffs - 5.17.2 → 5.17.4 - Mend

@fluentui/react-charting 5.17.2 → 5.17.4

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HorizontalBarChart.base.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/HorizontalBarChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, find, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport {\n IAccessibilityProps,\n IChartProps,\n IHorizontalBarChartProps,\n IHorizontalBarChartStyleProps,\n IHorizontalBarChartStyles,\n IChartDataPoint,\n IRefArrayData,\n HorizontalBarChartVariant,\n} from './index';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { formatPrefix as d3FormatPrefix } from 'd3-format';\nimport { FocusableTooltipText } from '../../utilities/FocusableTooltipText';\n\nconst getClassNames = classNamesFunction<IHorizontalBarChartStyleProps, IHorizontalBarChartStyles>();\n\nexport interface IHorizontalBarChartState {\n isCalloutVisible: boolean;\n refSelected: SVGGElement \| null \| undefined;\n color: string;\n hoverValue: string \| number \| Date \| null;\n lineColor: string;\n legend: string \| null;\n xCalloutValue?: string;\n yCalloutValue?: string;\n barCalloutProps?: IChartDataPoint;\n callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport class HorizontalBarChartBase extends React.Component<IHorizontalBarChartProps, IHorizontalBarChartState> {\n private _barHeight: number;\n private _classNames: IProcessedStyleSet<IHorizontalBarChartStyles>;\n private _uniqLineText: string;\n private _calloutId: string;\n private _refArray: IRefArrayData[];\n private _calloutAnchorPoint: IChartDataPoint \| null;\n private _isRTL: boolean = getRTL();\n private _emptyChartId: string;\n\n constructor(props: IHorizontalBarChartProps) {\n super(props);\n this.state = {\n isCalloutVisible: false,\n hoverValue: '',\n lineColor: '',\n legend: '',\n refSelected: null,\n // eslint-disable-next-line react/no-unused-state\n color: '',\n xCalloutValue: '',\n yCalloutValue: '',\n };\n this._refArray = [];\n this._uniqLineText = '_HorizontalLine_' + Math.random().toString(36).substring(7);\n this._hoverOff = this._hoverOff.bind(this);\n this._calloutId = getId('callout');\n this._emptyChartId = getId('_HBC_empty');\n }\n\n public render(): JSX.Element {\n const { data, theme } = this.props;\n this._adjustProps();\n const { palette } = theme!;\n let datapoint: number \| undefined = 0;\n return !this._isChartEmpty() ? (\n <div className={this._classNames.root} onMouseLeave={this._handleChartMouseLeave}>\n {data!.map((points: IChartProps, index: number) => {\n if (points.chartData && points.chartData![0] && points.chartData![0].horizontalBarChartdata!.x) {\n datapoint = points.chartData![0].horizontalBarChartdata!.x;\n } else {\n datapoint = 0;\n }\n points.chartData![1] = {\n legend: '',\n horizontalBarChartdata: {\n x: points.chartData![0].horizontalBarChartdata!.y - datapoint!,\n y: points.chartData![0].horizontalBarChartdata!.y,\n },\n color: palette.neutralLight,\n };\n\n // Hide right side text of chart title for absolute-scale variant\n const chartDataText =\n this.props.variant === HorizontalBarChartVariant.AbsoluteScale ? null : this._getChartDataText(points!);\n const bars = this._createBars(points!, palette);\n const keyVal = this._uniqLineText + '_' + index;\n const classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n width: this.props.width,\n showTriangle: !!points!.chartData![0].data,\n variant: this.props.variant,\n });\n\n return (\n <div key={index}>\n <div className={classNames.items}>\n <FocusZone direction={FocusZoneDirection.horizontal}>\n <div className={this._classNames.chartTitle}>\n {points!.chartTitle && (\n <FocusableTooltipText\n className={this._classNames.chartTitleLeft}\n content={points!.chartTitle}\n accessibilityData={points!.chartTitleAccessibilityData}\n />\n )}\n {chartDataText}\n </div>\n </FocusZone>\n {points!.chartData![0].data && this._createBenchmark(points!)}\n <FocusZone direction={FocusZoneDirection.horizontal} className={this._classNames.chartWrapper}>\n <svg className={this._classNames.chart} aria-label={points!.chartTitle}>\n <g\n id={keyVal}\n key={keyVal}\n ref={(e: SVGGElement) => {\n this._refCallback(e, points!.chartData![0].legend);\n }}\n // NOTE: points.chartData![0] contains current data value\n onClick={() => {\n const p = points!.chartData![0];\n if (p && p.onClick) {\n p.onClick();\n }\n }}\n >\n {bars}\n </g>\n </svg>\n </FocusZone>\n </div>\n </div>\n );\n })}\n <Callout\n target={this.state.refSelected}\n coverTarget={true}\n isBeakVisible={false}\n gapSpace={30}\n hidden={!(!this.props.hideTooltip && this.state.isCalloutVisible)}\n directionalHint={DirectionalHint.topAutoEdge}\n id={this._calloutId}\n onDismiss={this._closeCallout}\n preventDismissOnLostFocus={true}\n {...this.props.calloutProps!}\n {...getAccessibleDataObject(this.state.callOutAccessibilityData)}\n >\n <>\n {this.props.onRenderCalloutPerHorizontalBar ? (\n this.props.onRenderCalloutPerHorizontalBar(this.state.barCalloutProps)\n ) : (\n <ChartHoverCard\n Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend!}\n YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.hoverValue!}\n color={this.state.lineColor}\n culture={this.props.culture}\n />\n )}\n </>\n </Callout>\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 private _refCallback(element: SVGGElement, legendTitle: string \| undefined): void {\n this._refArray.push({ index: legendTitle, refElement: element });\n }\n\n private _hoverOn(hoverValue: string \| number \| Date \| null, point: IChartDataPoint): void {\n if ((!this.state.isCalloutVisible \|\| this.state.legend !== point.legend!) && this._calloutAnchorPoint !== point) {\n const currentHoveredElement = find(\n this._refArray,\n (currentElement: IRefArrayData) => currentElement.index === point.legend,\n );\n this._calloutAnchorPoint = point;\n this.setState({\n isCalloutVisible: true,\n hoverValue: hoverValue,\n lineColor: point.color!,\n legend: point.legend!,\n refSelected: currentHoveredElement!.refElement,\n xCalloutValue: point.xAxisCalloutData!,\n yCalloutValue: point.yAxisCalloutData!,\n barCalloutProps: point,\n callOutAccessibilityData: point.callOutAccessibilityData,\n });\n }\n }\n\n private _hoverOff(): void {\n /*/\n }\n\n private _handleChartMouseLeave = () => {\n this._calloutAnchorPoint = null;\n if (this.state.isCalloutVisible) {\n this.setState({\n isCalloutVisible: false,\n hoverValue: '',\n refSelected: null,\n lineColor: '',\n legend: '',\n });\n }\n };\n\n private _adjustProps = (): void => {\n this._barHeight = this.props.barHeight \|\| 12;\n this._classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n width: this.props.width,\n className: this.props.className,\n barHeight: this._barHeight,\n color: this.state.lineColor,\n variant: this.props.variant,\n hideLabels: this.props.hideLabels,\n });\n };\n\n private _getChartDataText = (data: IChartProps) => {\n return this.props.barChartCustomData ? (\n <div role=\"text\">{this.props.barChartCustomData(data)}</div>\n ) : (\n this._getDefaultTextData(data)\n );\n };\n\n private _getDefaultTextData(data: IChartProps): JSX.Element {\n const { culture } = this.props;\n const chartDataMode = this.props.chartDataMode \|\| 'default';\n const chartData: IChartDataPoint = data!.chartData![0];\n const x = chartData.horizontalBarChartdata!.x;\n const y = chartData.horizontalBarChartdata!.y;\n\n const accessibilityData = getAccessibleDataObject(data.chartDataAccessibilityData!, 'text', false);\n switch (chartDataMode) {\n case 'default':\n return (\n <div className={this._classNames.chartTitleRight} {...accessibilityData}>\n {convertToLocaleString(x, culture)}\n </div>\n );\n case 'fraction':\n return (\n <div {...accessibilityData}>\n <span className={this._classNames.chartTitleRight}>{convertToLocaleString(x, culture)}</span>\n <span className={this._classNames.chartDataTextDenominator}>\n {' / ' + convertToLocaleString(y, culture)}\n </span>\n </div>\n );\n case 'percentage':\n const dataRatioPercentage = `${convertToLocaleString(Math.round((x / y) 100), culture)}%`;\n return (\n <div className={this._classNames.chartTitleRight} {...accessibilityData}>\n {dataRatioPercentage}\n </div>\n );\n }\n }\n\n private _createBenchmark(data: IChartProps): JSX.Element {\n const totalData = data.chartData![0].horizontalBarChartdata!.y;\n const benchmarkData = data.chartData![0].data;\n const benchmarkRatio = Math.round(((benchmarkData ? benchmarkData : 0) / totalData) * 100);\n\n const benchmarkStyles = {\n left: 'calc(' + benchmarkRatio + '% - 4px)',\n };\n\n return (\n <div className={this._classNames.benchmarkContainer}>\n <div className={this._classNames.triangle} style={benchmarkStyles} />\n </div>\n );\n }\n\n private _createBars(data: IChartProps, palette: IPalette): JSX.Element[] {\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) =>\n acc + (point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0),\n 0,\n );\n let prevPosition = 0;\n let value = 0;\n\n let sumOfPercent = 0;\n data.chartData!.map((point: IChartDataPoint, index: number) => {\n const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;\n value = (pointData / total) * 100;\n if (value < 0) {\n value = 0;\n } else if (value < 1 && value !== 0) {\n value = 1;\n }\n sumOfPercent += value;\n\n return sumOfPercent;\n });\n\n const scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1;\n\n const bars = data.chartData!.map((point: IChartDataPoint, index: number) => {\n const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;\n if (index > 0) {\n prevPosition += value;\n }\n value = (pointData / total) * 100;\n if (value < 0) {\n value = 0;\n } else if (value < 1 && value !== 0) {\n value = 1 / scalingRatio;\n } else {\n value = value / scalingRatio;\n }\n startingPoint.push(prevPosition);\n\n const xValue = point.horizontalBarChartdata!.x;\n const placeholderIndex = 1;\n\n // Render bar label instead of placeholder bar for absolute-scale variant\n if (index === placeholderIndex && this.props.variant === HorizontalBarChartVariant.AbsoluteScale) {\n if (this.props.hideLabels) {\n return <text key={index} />;\n }\n\n const barValue = data.chartData![0].horizontalBarChartdata!.x;\n\n return (\n <text\n key={index}\n x={`${this._isRTL ? 100 - startingPoint[index] : startingPoint[index]}%`}\n y={this._barHeight / 2}\n dominantBaseline=\"central\"\n transform={`translate(${this._isRTL ? -4 : 4})`}\n className={this._classNames.barLabel}\n aria-hidden={true}\n >\n {d3FormatPrefix(barValue < 1000 ? '.2~' : '.1', barValue)(barValue)}\n </text>\n );\n }\n\n return (\n <rect\n key={index}\n x={`${this._isRTL ? 100 - startingPoint[index] - value : startingPoint[index]}%`}\n y={0}\n data-is-focusable={point.legend !== '' ? true : false}\n width={value + '%'}\n height={this._barHeight}\n fill={color}\n onMouseOver={point.legend !== '' ? this._hoverOn.bind(this, xValue, point) : undefined}\n onFocus={point.legend !== '' ? this._hoverOn.bind(this, xValue, point) : undefined}\n role=\"img\"\n aria-label={this._getAriaLabel(point)}\n onBlur={this._hoverOff}\n onMouseLeave={this._hoverOff}\n className={this._classNames.barWrapper}\n />\n );\n });\n return bars;\n }\n\n private _closeCallout = () => {\n this.setState({\n isCalloutVisible: false,\n });\n };\n\n private _getAriaLabel = (point: IChartDataPoint): string => {\n const legend = point.xAxisCalloutData \|\| point.legend;\n const yValue =\n point.yAxisCalloutData \|\|\n (point.horizontalBarChartdata ? `${point.horizontalBarChartdata.x}/${point.horizontalBarChartdata.y}` : 0);\n return point.callOutAccessibilityData?.ariaLabel \|\| (legend ? `${legend}, ` : '') + `${yValue}.`;\n };\n\n private _isChartEmpty(): boolean {\n return !(this.props.data && this.props.data.length > 0);\n }\n}\n"]}
1	+ {"version":3,"file":"HorizontalBarChart.base.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/HorizontalBarChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, find, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport {\n IAccessibilityProps,\n IChartProps,\n IHorizontalBarChartProps,\n IHorizontalBarChartStyleProps,\n IHorizontalBarChartStyles,\n IChartDataPoint,\n IRefArrayData,\n HorizontalBarChartVariant,\n} from './index';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { formatPrefix as d3FormatPrefix } from 'd3-format';\nimport { FocusableTooltipText } from '../../utilities/FocusableTooltipText';\n\nconst getClassNames = classNamesFunction<IHorizontalBarChartStyleProps, IHorizontalBarChartStyles>();\n\nexport interface IHorizontalBarChartState {\n isCalloutVisible: boolean;\n refSelected: SVGGElement \| null \| undefined;\n color: string;\n hoverValue: string \| number \| Date \| null;\n lineColor: string;\n legend: string \| null;\n xCalloutValue?: string;\n yCalloutValue?: string;\n barCalloutProps?: IChartDataPoint;\n callOutAccessibilityData?: IAccessibilityProps;\n barSpacingInPercent: number;\n}\n\nexport class HorizontalBarChartBase extends React.Component<IHorizontalBarChartProps, IHorizontalBarChartState> {\n private _barHeight: number;\n private _classNames: IProcessedStyleSet<IHorizontalBarChartStyles>;\n private _uniqLineText: string;\n private _calloutId: string;\n private _refArray: IRefArrayData[];\n private _calloutAnchorPoint: IChartDataPoint \| null;\n private _isRTL: boolean = getRTL();\n private barChartSvgRef: React.RefObject<SVGSVGElement>;\n private _emptyChartId: string;\n\n constructor(props: IHorizontalBarChartProps) {\n super(props);\n this.state = {\n isCalloutVisible: false,\n hoverValue: '',\n lineColor: '',\n legend: '',\n refSelected: null,\n // eslint-disable-next-line react/no-unused-state\n color: '',\n xCalloutValue: '',\n yCalloutValue: '',\n barSpacingInPercent: 0,\n };\n this._refArray = [];\n this._uniqLineText = '_HorizontalLine_' + Math.random().toString(36).substring(7);\n this._hoverOff = this._hoverOff.bind(this);\n this._calloutId = getId('callout');\n this._emptyChartId = getId('_HBC_empty');\n this.barChartSvgRef = React.createRef<SVGSVGElement>();\n }\n\n public componentDidMount(): void {\n const svgWidth = this.barChartSvgRef.current?.getBoundingClientRect().width \|\| 0;\n const MARGIN_WIDTH_IN_PX = 3;\n if (svgWidth) {\n const currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;\n this.setState({ barSpacingInPercent: currentBarSpacing });\n }\n }\n\n public render(): JSX.Element {\n const { data, theme } = this.props;\n this._adjustProps();\n const { palette } = theme!;\n let datapoint: number \| undefined = 0;\n return !this._isChartEmpty() ? (\n <div className={this._classNames.root} onMouseLeave={this._handleChartMouseLeave}>\n {data!.map((points: IChartProps, index: number) => {\n if (points.chartData && points.chartData![0] && points.chartData![0].horizontalBarChartdata!.x) {\n datapoint = points.chartData![0].horizontalBarChartdata!.x;\n } else {\n datapoint = 0;\n }\n points.chartData![1] = {\n legend: '',\n horizontalBarChartdata: {\n x: points.chartData![0].horizontalBarChartdata!.y - datapoint!,\n y: points.chartData![0].horizontalBarChartdata!.y,\n },\n color: palette.neutralLight,\n };\n\n // Hide right side text of chart title for absolute-scale variant\n const chartDataText =\n this.props.variant === HorizontalBarChartVariant.AbsoluteScale ? null : this._getChartDataText(points!);\n const bars = this._createBars(points!, palette);\n const keyVal = this._uniqLineText + '_' + index;\n const classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n width: this.props.width,\n showTriangle: !!points!.chartData![0].data,\n variant: this.props.variant,\n });\n\n return (\n <div key={index}>\n <div className={classNames.items}>\n <FocusZone direction={FocusZoneDirection.horizontal}>\n <div className={this._classNames.chartTitle}>\n {points!.chartTitle && (\n <FocusableTooltipText\n className={this._classNames.chartTitleLeft}\n content={points!.chartTitle}\n accessibilityData={points!.chartTitleAccessibilityData}\n />\n )}\n {chartDataText}\n </div>\n </FocusZone>\n {points!.chartData![0].data && this._createBenchmark(points!)}\n <FocusZone direction={FocusZoneDirection.horizontal} className={this._classNames.chartWrapper}>\n <svg ref={this.barChartSvgRef} className={this._classNames.chart} aria-label={points!.chartTitle}>\n <g\n id={keyVal}\n key={keyVal}\n ref={(e: SVGGElement) => {\n this._refCallback(e, points!.chartData![0].legend);\n }}\n // NOTE: points.chartData![0] contains current data value\n onClick={() => {\n const p = points!.chartData![0];\n if (p && p.onClick) {\n p.onClick();\n }\n }}\n >\n {bars}\n </g>\n </svg>\n </FocusZone>\n </div>\n </div>\n );\n })}\n <Callout\n target={this.state.refSelected}\n coverTarget={true}\n isBeakVisible={false}\n gapSpace={30}\n hidden={!(!this.props.hideTooltip && this.state.isCalloutVisible)}\n directionalHint={DirectionalHint.topAutoEdge}\n id={this._calloutId}\n onDismiss={this._closeCallout}\n preventDismissOnLostFocus={true}\n {...this.props.calloutProps!}\n {...getAccessibleDataObject(this.state.callOutAccessibilityData)}\n >\n <>\n {this.props.onRenderCalloutPerHorizontalBar ? (\n this.props.onRenderCalloutPerHorizontalBar(this.state.barCalloutProps)\n ) : (\n <ChartHoverCard\n Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend!}\n YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.hoverValue!}\n color={this.state.lineColor}\n culture={this.props.culture}\n />\n )}\n </>\n </Callout>\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 private _refCallback(element: SVGGElement, legendTitle: string \| undefined): void {\n this._refArray.push({ index: legendTitle, refElement: element });\n }\n\n private _hoverOn(hoverValue: string \| number \| Date \| null, point: IChartDataPoint): void {\n if ((!this.state.isCalloutVisible \|\| this.state.legend !== point.legend!) && this._calloutAnchorPoint !== point) {\n const currentHoveredElement = find(\n this._refArray,\n (currentElement: IRefArrayData) => currentElement.index === point.legend,\n );\n this._calloutAnchorPoint = point;\n this.setState({\n isCalloutVisible: true,\n hoverValue: hoverValue,\n lineColor: point.color!,\n legend: point.legend!,\n refSelected: currentHoveredElement!.refElement,\n xCalloutValue: point.xAxisCalloutData!,\n yCalloutValue: point.yAxisCalloutData!,\n barCalloutProps: point,\n callOutAccessibilityData: point.callOutAccessibilityData,\n });\n }\n }\n\n private _hoverOff(): void {\n /*/\n }\n\n private _handleChartMouseLeave = () => {\n this._calloutAnchorPoint = null;\n if (this.state.isCalloutVisible) {\n this.setState({\n isCalloutVisible: false,\n hoverValue: '',\n refSelected: null,\n lineColor: '',\n legend: '',\n });\n }\n };\n\n private _adjustProps = (): void => {\n this._barHeight = this.props.barHeight \|\| 12;\n this._classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n width: this.props.width,\n className: this.props.className,\n barHeight: this._barHeight,\n color: this.state.lineColor,\n variant: this.props.variant,\n hideLabels: this.props.hideLabels,\n });\n };\n\n private _getChartDataText = (data: IChartProps) => {\n return this.props.barChartCustomData ? (\n <div role=\"text\">{this.props.barChartCustomData(data)}</div>\n ) : (\n this._getDefaultTextData(data)\n );\n };\n\n private _getDefaultTextData(data: IChartProps): JSX.Element {\n const { culture } = this.props;\n const chartDataMode = this.props.chartDataMode \|\| 'default';\n const chartData: IChartDataPoint = data!.chartData![0];\n const x = chartData.horizontalBarChartdata!.x;\n const y = chartData.horizontalBarChartdata!.y;\n\n const accessibilityData = getAccessibleDataObject(data.chartDataAccessibilityData!, 'text', false);\n switch (chartDataMode) {\n case 'default':\n return (\n <div className={this._classNames.chartTitleRight} {...accessibilityData}>\n {convertToLocaleString(x, culture)}\n </div>\n );\n case 'fraction':\n return (\n <div {...accessibilityData}>\n <span className={this._classNames.chartTitleRight}>{convertToLocaleString(x, culture)}</span>\n <span className={this._classNames.chartDataTextDenominator}>\n {' / ' + convertToLocaleString(y, culture)}\n </span>\n </div>\n );\n case 'percentage':\n const dataRatioPercentage = `${convertToLocaleString(Math.round((x / y) 100), culture)}%`;\n return (\n <div className={this._classNames.chartTitleRight} {...accessibilityData}>\n {dataRatioPercentage}\n </div>\n );\n }\n }\n\n private _createBenchmark(data: IChartProps): JSX.Element {\n const totalData = data.chartData![0].horizontalBarChartdata!.y;\n const benchmarkData = data.chartData![0].data;\n const benchmarkRatio = Math.round(((benchmarkData ? benchmarkData : 0) / totalData) * 100);\n\n const benchmarkStyles = {\n left: 'calc(' + benchmarkRatio + '% - 4px)',\n };\n\n return (\n <div className={this._classNames.benchmarkContainer}>\n <div className={this._classNames.triangle} style={benchmarkStyles} />\n </div>\n );\n }\n\n /*\n This functions returns an array of <rect> elements, which form the bars\n * For each bar an x value, and a width needs to be specified\n * The computations are done based on percentages\n * Extra margin is also provided, in the x value to provide some spacing in between the bars\n /\n\n private _createBars(data: IChartProps, palette: IPalette): JSX.Element[] {\n const noOfBars =\n data.chartData?.reduce((count: number, point: IChartDataPoint) => (count += (point.data \|\| 0) > 0 ? 1 : 0), 0) \|\|\n 1;\n const totalMarginPercent = this.state.barSpacingInPercent (noOfBars - 1);\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) =>\n acc + (point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0),\n 0,\n );\n let prevPosition = 0;\n let value = 0;\n\n let sumOfPercent = 0;\n data.chartData!.map((point: IChartDataPoint, index: number) => {\n const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;\n value = (pointData / total) * 100;\n if (value < 0) {\n value = 0;\n } else if (value < 1 && value !== 0) {\n value = 1;\n }\n sumOfPercent += value;\n\n return sumOfPercent;\n });\n\n /*\n The %age of the space occupied by the margin needs to subtracted\n * while computing the scaling ratio, since the margins are not being\n * scaled down, only the data is being scaled down from a higher percentage to lower percentage\n * Eg: 95% of the space is taken by the bars, 5% by the margins\n * Now if the sumOfPercent is 120% -> This needs to be scaled down to 95%, not 100%\n * since that's only space available to the bars\n /\n const scalingRatio = sumOfPercent !== 0 ? (sumOfPercent - totalMarginPercent) / 100 : 1;\n\n const bars = data.chartData!.map((point: IChartDataPoint, index: number) => {\n const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() 4 + 1)];\n const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;\n if (index > 0) {\n prevPosition += value;\n }\n value = (pointData / total) * 100;\n if (value < 0) {\n value = 0;\n } else if (value < 1 && value !== 0) {\n value = 1 / scalingRatio;\n } else {\n value = value / scalingRatio;\n }\n startingPoint.push(prevPosition);\n\n const xValue = point.horizontalBarChartdata!.x;\n const placeholderIndex = 1;\n\n // Render bar label instead of placeholder bar for absolute-scale variant\n if (index === placeholderIndex && this.props.variant === HorizontalBarChartVariant.AbsoluteScale) {\n if (this.props.hideLabels) {\n return <text key={index} />;\n }\n\n const barValue = data.chartData![0].horizontalBarChartdata!.x;\n\n return (\n <text\n key={index}\n x={`${this._isRTL ? 100 - startingPoint[index] : startingPoint[index]}%`}\n y={this._barHeight / 2}\n dominantBaseline=\"central\"\n transform={`translate(${this._isRTL ? -4 : 4})`}\n className={this._classNames.barLabel}\n aria-hidden={true}\n >\n {d3FormatPrefix(barValue < 1000 ? '.2~' : '.1', barValue)(barValue)}\n </text>\n );\n }\n\n return (\n <rect\n key={index}\n x={`${\n this._isRTL\n ? 100 - startingPoint[index] - value - index * this.state.barSpacingInPercent\n : startingPoint[index] + index * this.state.barSpacingInPercent\n }%`}\n y={0}\n data-is-focusable={point.legend !== '' ? true : false}\n width={value + '%'}\n height={this._barHeight}\n fill={color}\n onMouseOver={point.legend !== '' ? this._hoverOn.bind(this, xValue, point) : undefined}\n onFocus={point.legend !== '' ? this._hoverOn.bind(this, xValue, point) : undefined}\n role=\"img\"\n aria-label={this._getAriaLabel(point)}\n onBlur={this._hoverOff}\n onMouseLeave={this._hoverOff}\n className={this._classNames.barWrapper}\n />\n );\n });\n return bars;\n }\n\n private _closeCallout = () => {\n this.setState({\n isCalloutVisible: false,\n });\n };\n\n private _getAriaLabel = (point: IChartDataPoint): string => {\n const legend = point.xAxisCalloutData \|\| point.legend;\n const yValue =\n point.yAxisCalloutData \|\|\n (point.horizontalBarChartdata ? `${point.horizontalBarChartdata.x}/${point.horizontalBarChartdata.y}` : 0);\n return point.callOutAccessibilityData?.ariaLabel \|\| (legend ? `${legend}, ` : '') + `${yValue}.`;\n };\n\n private _isChartEmpty(): boolean {\n return !(this.props.data && this.props.data.length > 0);\n }\n}\n"]}

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

@@ -23,10 +23,7 @@ define(["require", "exports", "tslib", "@fluentui/react/lib/Styling", "./Horizon
                 display: 'block',
                 overflow: 'visible',
             },
-            barWrapper: {
-                stroke: theme.palette.white,
-                strokeWidth: 2,
-            },
+            barWrapper: {},
             chartTitle: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.small), { display: 'flex', justifyContent: 'space-between' }),
             chartTitleLeft: {
                 textOverflow: 'ellipsis',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HorizontalBarChart.styles.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/HorizontalBarChart.styles.ts"],"names":[],"mappings":";;;;IAOO,IAAM,2BAA2B,GAAG,UAAC,KAAoC;QACtE,IAAA,SAAS,GAAiE,KAAK,UAAtE,EAAE,KAAK,GAA0D,KAAK,MAA/D,EAAE,KAAK,GAAmD,KAAK,MAAxD,EAAE,SAAS,GAAwC,KAAK,UAA7C,EAAE,YAAY,GAA0B,KAAK,aAA/B,EAAE,OAAO,GAAiB,KAAK,QAAtB,EAAE,UAAU,GAAK,KAAK,WAAV,CAAW;QAChF,IAAA,OAAO,GAAK,KAAM,QAAX,CAAY;QAE3B,OAAO;YACL,IAAI,EAAE;gBACJ;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,YAAY,IAAI,OAAO,KAAK,oDAAyB,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;aACpG;YACD,KAAK,EAAE;gBACL,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;gBAClC,OAAO,EAAE,OAAO;gBAChB,QAAQ,EAAE,SAAS;aACpB;YACD,UAAU,EAAE~~;gBACV~~,~~MAAM,~~EAAE~~,KAAK,CAAC,OAAO,CAAC,KAAK~~;~~gBAC3B~~,~~WAAW,EAAE,CAAC;aACf;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,KAAK,CAAC,OAAO,CAAC,cAAc;gBACnC,YAAY,EAAE,OAAO,KAAK,oDAAyB,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;aAClF;YACD,eAAe,EAAE;gBACf,QAAQ,EAAE,mBAAS,CAAC,MAAM;gBAC1B,UAAU,EAAE,qBAAW,CAAC,QAAQ;gBAChC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aACpC;YACD,wBAAwB,EAAE;gBACxB,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,QAAQ,EAAE;gBACR,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,GAAG;gBACX,UAAU,EAAE,uBAAuB;gBACnC,WAAW,EAAE,uBAAuB;gBACpC,SAAS,EAAE,WAAW;gBACtB,cAAc,EAAE,OAAO,CAAC,IAAI;gBAC5B,YAAY,EAAE,KAAK;gBACnB,QAAQ,EAAE,UAAU;aACrB;YACD,QAAQ,wCACH,KAAK,CAAC,KAAK,CAAC,KAAK,KACpB,UAAU,EAAE,qBAAW,CAAC,QAAQ,EAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,GACnC;YACD,YAAY,EAAE;gBACZ,YAAY,EAAE,OAAO,KAAK,oDAAyB,CAAC,aAAa,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;aAC1F;SACF,CAAC;IACJ,CAAC,CAAC;~~IAzEW~~,QAAA,2BAA2B,+~~BAyEtC~~","sourcesContent":["import { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';\nimport {\n HorizontalBarChartVariant,\n IHorizontalBarChartStyleProps,\n IHorizontalBarChartStyles,\n} from './HorizontalBarChart.types';\n\nexport const getHorizontalBarChartStyles = (props: IHorizontalBarChartStyleProps): IHorizontalBarChartStyles => {\n const { className, theme, width, barHeight, showTriangle, variant, hideLabels } = props;\n const { palette } = theme!;\n\n return {\n root: [\n {\n display: 'flex',\n flexDirection: 'column',\n width: width ? width : '100%',\n },\n className,\n ],\n items: {\n marginBottom: showTriangle \|\| variant === HorizontalBarChartVariant.AbsoluteScale ? '16px' : '10px',\n },\n chart: {\n width: '100%',\n height: barHeight ? barHeight : 12,\n display: 'block',\n overflow: 'visible',\n },\n barWrapper: {~~\n stroke: theme.palette.white,\n strokeWidth: 2,\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 === HorizontalBarChartVariant.AbsoluteScale ? '4px' : '5px',\n },\n chartTitleRight: {\n fontSize: FontSizes.medium,\n fontWeight: FontWeights.semibold,\n color: theme.palette.neutralPrimary,\n },\n chartDataTextDenominator: {\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 triangle: {\n width: '0',\n height: '0',\n borderLeft: '4px solid transparent',\n borderRight: '4px solid transparent',\n borderTop: '7px solid',\n borderTopColor: palette.blue,\n marginBottom: '4px',\n position: 'absolute',\n },\n barLabel: {\n ...theme.fonts.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n chartWrapper: {\n paddingRight: variant === HorizontalBarChartVariant.AbsoluteScale && !hideLabels ? 40 : 0,\n },\n };\n};\n"]}
1	+ {"version":3,"file":"HorizontalBarChart.styles.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/HorizontalBarChart.styles.ts"],"names":[],"mappings":";;;;IAOO,IAAM,2BAA2B,GAAG,UAAC,KAAoC;QACtE,IAAA,SAAS,GAAiE,KAAK,UAAtE,EAAE,KAAK,GAA0D,KAAK,MAA/D,EAAE,KAAK,GAAmD,KAAK,MAAxD,EAAE,SAAS,GAAwC,KAAK,UAA7C,EAAE,YAAY,GAA0B,KAAK,aAA/B,EAAE,OAAO,GAAiB,KAAK,QAAtB,EAAE,UAAU,GAAK,KAAK,WAAV,CAAW;QAChF,IAAA,OAAO,GAAK,KAAM,QAAX,CAAY;QAE3B,OAAO;YACL,IAAI,EAAE;gBACJ;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,YAAY,IAAI,OAAO,KAAK,oDAAyB,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;aACpG;YACD,KAAK,EAAE;gBACL,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;gBAClC,OAAO,EAAE,OAAO;gBAChB,QAAQ,EAAE,SAAS;aACpB;YACD,UAAU,EAAE,EAAE;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,KAAK,CAAC,OAAO,CAAC,cAAc;gBACnC,YAAY,EAAE,OAAO,KAAK,oDAAyB,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;aAClF;YACD,eAAe,EAAE;gBACf,QAAQ,EAAE,mBAAS,CAAC,MAAM;gBAC1B,UAAU,EAAE,qBAAW,CAAC,QAAQ;gBAChC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aACpC;YACD,wBAAwB,EAAE;gBACxB,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,QAAQ,EAAE;gBACR,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,GAAG;gBACX,UAAU,EAAE,uBAAuB;gBACnC,WAAW,EAAE,uBAAuB;gBACpC,SAAS,EAAE,WAAW;gBACtB,cAAc,EAAE,OAAO,CAAC,IAAI;gBAC5B,YAAY,EAAE,KAAK;gBACnB,QAAQ,EAAE,UAAU;aACrB;YACD,QAAQ,wCACH,KAAK,CAAC,KAAK,CAAC,KAAK,KACpB,UAAU,EAAE,qBAAW,CAAC,QAAQ,EAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,GACnC;YACD,YAAY,EAAE;gBACZ,YAAY,EAAE,OAAO,KAAK,oDAAyB,CAAC,aAAa,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;aAC1F;SACF,CAAC;IACJ,CAAC,CAAC;IAtEW,QAAA,2BAA2B,+BAsEtC","sourcesContent":["import { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';\nimport {\n HorizontalBarChartVariant,\n IHorizontalBarChartStyleProps,\n IHorizontalBarChartStyles,\n} from './HorizontalBarChart.types';\n\nexport const getHorizontalBarChartStyles = (props: IHorizontalBarChartStyleProps): IHorizontalBarChartStyles => {\n const { className, theme, width, barHeight, showTriangle, variant, hideLabels } = props;\n const { palette } = theme!;\n\n return {\n root: [\n {\n display: 'flex',\n flexDirection: 'column',\n width: width ? width : '100%',\n },\n className,\n ],\n items: {\n marginBottom: showTriangle \|\| variant === HorizontalBarChartVariant.AbsoluteScale ? '16px' : '10px',\n },\n chart: {\n width: '100%',\n height: barHeight ? barHeight : 12,\n display: 'block',\n overflow: 'visible',\n },\n barWrapper: {},\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 === HorizontalBarChartVariant.AbsoluteScale ? '4px' : '5px',\n },\n chartTitleRight: {\n fontSize: FontSizes.medium,\n fontWeight: FontWeights.semibold,\n color: theme.palette.neutralPrimary,\n },\n chartDataTextDenominator: {\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 triangle: {\n width: '0',\n height: '0',\n borderLeft: '4px solid transparent',\n borderRight: '4px solid transparent',\n borderTop: '7px solid',\n borderTopColor: palette.blue,\n marginBottom: '4px',\n position: 'absolute',\n },\n barLabel: {\n ...theme.fonts.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n chartWrapper: {\n paddingRight: variant === HorizontalBarChartVariant.AbsoluteScale && !hideLabels ? 40 : 0,\n },\n };\n};\n"]}

package/lib-amd/components/PieChart/Arc/Arc.d.ts CHANGED Viewed

@@ -1,12 +1,17 @@
 import * as React from 'react';
-import { IArcProps } from './Arc.types';
-export declare class Arc extends React.Component<IArcProps, {}> {
+import { IArcProps, IArcState } from './Arc.types';
+export declare class Arc extends React.Component<IArcProps, IArcState> {
     static defaultProps: Partial<IArcProps>;
-    state: {};
+    protected _arcId: string;
     static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): null;
+    constructor(props: IArcProps);
     updateChart: (newProps: IArcProps) => void;
     render(): JSX.Element;
+    protected _onFocus: () => void;
+    protected _onBlur: () => void;
 }
 export declare class LabeledArc extends Arc {
+    private _isRTL;
+    constructor(props: IArcProps);
     render(): JSX.Element;
 }

package/lib-amd/components/PieChart/Arc/Arc.js CHANGED Viewed

@@ -1,15 +1,24 @@
-define(["require", "exports", "tslib", "react", "d3-shape", "@fluentui/react/lib/Utilities", "./Arc.styles", "../../../utilities/utilities"], function (require, exports, tslib_1, React, shape, Utilities_1, Arc_styles_1, utilities_1) {
+define(["require", "exports", "tslib", "react", "d3-shape", "@fluentui/react/lib/Utilities", "./Arc.styles", "../../../utilities/utilities", "../../../utilities/SVGTooltipText"], function (require, exports, tslib_1, React, shape, Utilities_1, Arc_styles_1, utilities_1, SVGTooltipText_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.LabeledArc = exports.Arc = void 0;
     var Arc = /** @class */ (function (_super) {
         tslib_1.__extends(Arc, _super);
-        function Arc() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.state = {};
+        function Arc(props) {
+            var _this = _super.call(this, props) || this;
             _this.updateChart = function (newProps) {
                 _updateChart(newProps);
             };
+            _this._onFocus = function () {
+                _this.setState({ isArcFocused: true });
+            };
+            _this._onBlur = function () {
+                _this.setState({ isArcFocused: false });
+            };
+            _this.state = {
+                isArcFocused: false,
+            };
+            _this._arcId = (0, Utilities_1.getId)('piechart_arc');
             return _this;
         }
         Arc.getDerivedStateFromProps = function (nextProps) {
@@ -17,11 +26,12 @@ define(["require", "exports", "tslib", "react", "d3-shape", "@fluentui/react/lib
             return null;
         };
         Arc.prototype.render = function () {
+            var _this = this;
             var _a;
-            var _b = this.props, color = _b.color, arc = _b.arc;
+            var arc = this.props.arc;
             var getClassNames = (0, Utilities_1.classNamesFunction)();
-            var classNames = getClassNames(Arc_styles_1.getStyles, { color: color });
-            return React.createElement("path", { d: arc(this.props.data), className: classNames.root, onClick: (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.data.onClick });
+            var classNames = getClassNames(function (props) { return (0, Arc_styles_1.getStyles)(props, _this.props.theme); }, tslib_1.__assign({}, this.props));
+            return (React.createElement("path", { d: arc(this.props.data), className: "".concat(this.state.isArcFocused ? classNames.arcRootFocussed : classNames.arcRoot), onClick: (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.data.onClick }));
         };
         Arc.defaultProps = {
             arc: shape.arc(),
@@ -31,19 +41,39 @@ define(["require", "exports", "tslib", "react", "d3-shape", "@fluentui/react/lib
     exports.Arc = Arc;
     var LabeledArc = /** @class */ (function (_super) {
         tslib_1.__extends(LabeledArc, _super);
-        function LabeledArc() {
-            return _super !== null && _super.apply(this, arguments) || this;
+        function LabeledArc(props) {
+            var _this = _super.call(this, props) || this;
+            _this._isRTL = (0, Utilities_1.getRTL)();
+            _this._arcId = (0, Utilities_1.getId)('piechart_arc');
+            return _this;
         }
         LabeledArc.prototype.render = function () {
-            var _a = this.props, data = _a.data, arc = _a.arc, culture = _a.culture;
-            var _b = arc.centroid(data), labelX = _b[0], labelY = _b[1];
-            var labelTranslate = "translate(".concat(labelX, ", ").concat(labelY, ")");
-            return (React.createElement("g", { className: "arc" },
+            var _this = this;
+            var _a, _b;
+            var _c = this.props, data = _c.data, culture = _c.culture;
+            var gap = 4;
+            // placing the labels on the outside arc
+            var _d = shape.arc().centroid({
+                endAngle: (data === null || data === void 0 ? void 0 : data.endAngle) || 0,
+                startAngle: (data === null || data === void 0 ? void 0 : data.startAngle) || 0,
+                padAngle: data === null || data === void 0 ? void 0 : data.padAngle,
+                innerRadius: ((_a = this.props) === null || _a === void 0 ? void 0 : _a.outerRadius) || 0,
+                outerRadius: ((_b = this.props) === null || _b === void 0 ? void 0 : _b.outerRadius) || 0 + gap,
+            }), labelX = _d[0], labelY = _d[1];
+            var getClassNames = (0, Utilities_1.classNamesFunction)();
+            var classNames = getClassNames(function (props) { return (0, Arc_styles_1.getStyles)(props, _this.props.theme); });
+            var angle = (((data === null || data === void 0 ? void 0 : data.startAngle) || 0) + ((data === null || data === void 0 ? void 0 : data.endAngle) || 0)) / 2;
+            var content = "".concat(data === null || data === void 0 ? void 0 : data.data.x, "-").concat((0, utilities_1.convertToLocaleString)(data === null || data === void 0 ? void 0 : data.data.y, culture));
+            return (React.createElement("g", { className: "".concat(classNames.arc, " arc"), "data-is-focusable": true, id: this._arcId, onFocus: this._onFocus, onBlur: this._onBlur, "aria-label": content, role: "img" },
                 _super.prototype.render.call(this),
-                React.createElement("text", { transform: labelTranslate, textAnchor: "middle" },
-                    data.data.x,
-                    "-",
-                    (0, utilities_1.convertToLocaleString)(data.data.y, culture))));
+                React.createElement(SVGTooltipText_1.SVGTooltipText, { content: content, textProps: {
+                        x: labelX,
+                        y: labelY,
+                        dominantBaseline: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto',
+                        textAnchor: (!this._isRTL && angle > Math.PI) || (this._isRTL && angle < Math.PI) ? 'end' : 'start',
+                        'aria-label': "".concat(data === null || data === void 0 ? void 0 : data.data.x, "-").concat((0, utilities_1.convertToLocaleString)(data === null || data === void 0 ? void 0 : data.data.y, culture)),
+                        className: classNames.arcText,
+                    }, isTooltipVisibleProp: this.state.isArcFocused, shouldReceiveFocus: false, maxWidth: 40, wrapContent: utilities_1.wrapContent })));
         };
         return LabeledArc;
     }(Arc));

package/lib-amd/components/PieChart/Arc/Arc.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Arc.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.tsx"],"names":[],"mappings":";;;;~~IAOA~~;QAAyB,+~~BAA8B~~;~~QAAvD;YAAA~~,~~qEAsBC~~;~~YAjBQ~~,~~WAAK~~,~~GAAO~~,~~EAAE~~,CAAC;~~YAOf~~,iBAAW,GAAG,UAAC,QAAmB;gBACvC,YAAY,CAAC,QAAQ,CAAC,CAAC;YACzB,CAAC,CAAC;;~~QAQJ~~,CAAC;~~QAfe~~,4BAAwB,GAAtC,UAAuC,SAA8B;YACnE,YAAY,CAAC,SAAS,CAAC,CAAC;YACxB,OAAO,IAAI,CAAC;QACd,CAAC;~~QAMM~~,oBAAM,GAAb;;~~YACQ~~,IAAA,~~KAAiB~~,IAAI,CAAC,KAAK,~~EAAzB~~,~~KAAK,WAAA,EAAE,GAAG,SAAe,CAAC~~;~~YAClC~~,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAAyB,CAAC;YAClE,IAAM,UAAU,GAAG,aAAa,CAAC,sBAAS,~~EAAE~~,EAAE,KAAK,~~OAAA~~,~~EAAE~~,CAAC,CAAC;~~YACvD~~,OAAO,~~8BAAM~~,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,~~EAAE~~,SAAS,EAAE,UAAU,CAAC,~~IAAI~~,~~EAAE~~,OAAO,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,0CAAE,IAAI,CAAC,OAAO,~~GAAI~~,CAAC;~~QAC/G~~,CAAC;~~QApBa~~,gBAAY,GAAuB;YAC/C,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE;SACjB,CAAC;~~QAmBJ~~,UAAC;KAAA,~~AAtBD~~,CAAyB,KAAK,CAAC,SAAS,~~GAsBvC~~;~~IAtBY~~,kBAAG;~~IAwBhB~~;QAAgC,sCAAG;~~QAAnC~~;;~~QAeA~~,CAAC;~~QAdQ~~,2BAAM,GAAb;~~YACQ~~,IAAA,~~KAAyB~~,IAAI,CAAC,KAAK,~~EAAjC~~,IAAI,UAAA,EAAE,~~GAAG~~,~~SAAA~~,~~EAAE~~,~~OAAO~~,~~aAAe~~,CAAC;~~YACpC~~,IAAA,KAAmB,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,~~EAApC~~,MAAM,QAAA,EAAE,MAAM,~~QAAsB~~,CAAC;~~YAC5C~~,IAAM,~~cAAc~~,GAAG,~~oBAAa~~,~~MAAM~~,~~eAAK~~,~~MAAM~~,~~MAAG~~,CAAC;~~YAEzD~~,OAAO,CACL,~~2BAAG~~,SAAS,EAAC,KAAK;~~gBACf~~,iBAAM,MAAM,WAAE;gBACf,~~8BAAM~~,SAAS,EAAE,~~cAAc~~,EAAE,~~UAAU~~,~~EAAC~~,~~QAAQ~~;~~oBACjD~~,~~IAAK~~,CAAC,~~IAAK~~,CAAC,CAAC~~;;oBAAG~~,IAAA,iCAAqB,EAAC,~~IAAK~~,~~CAAC~~,~~IAAK~~,CAAC,CAAC,EAAE,OAAO,CAAC,~~CACzD~~,~~CACL~~,CACL,CAAC;QACJ,CAAC;QACH,iBAAC;IAAD,CAAC,~~AAfD~~,CAAgC,GAAG,~~GAelC~~;~~IAfY~~,gCAAU;~~IAiBvB~~,SAAS,YAAY,CAAC,QAAmB;QACvC,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;QAC/C,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IACjD,CAAC","sourcesContent":["import * as React from 'react';\nimport * as shape from 'd3-shape';\nimport { IArcProps, IArcStyles } from './Arc.types';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { convertToLocaleString } from '../../../utilities/utilities';\n\nexport class Arc extends React.Component<IArcProps, {}> {\n public static defaultProps: Partial<IArcProps> = {\n arc: shape.arc(),\n };\n\n ~~public~~ ~~state~~: ~~{} = {}~~;\n\n public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): null {\n _updateChart(nextProps);\n return null;\n }\n\n public updateChart = (newProps: IArcProps) => {\n _updateChart(newProps);\n };\n\n public render(): JSX.Element {\n const { ~~color,~~ arc } = this.props;\n const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n const classNames = getClassNames(getStyles, { ~~color~~ });\n return <path d={arc(this.props.data)} className={classNames.~~root~~} onClick={this.props.data?.data.onClick} ~~/>;\~~n }\n}\n\nexport class LabeledArc extends Arc {\n public render(): JSX.Element {\n const { data, ~~arc,~~ culture } = this.props;\n const [labelX, labelY] = arc.centroid(data);\n const ~~labelTranslate~~ = ~~`translate~~(${~~labelX~~}, ~~${labelY~~})`;\n\n return (\n <g ~~className~~=\"~~arc~~\">\n {super.render()}\n <~~text transform~~={~~labelTranslate~~} ~~textAnchor=\"middle~~\~~">\~~n {data!.data!.x}-{convertToLocaleString(data!.data!.y, culture)}\n ~~</text>\~~n </g>\n );\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/PieChart/Arc/Arc.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport * as shape from 'd3-shape';\nimport { IArcProps, IArcState, IArcStyles } from './Arc.types';\nimport { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { wrapContent, convertToLocaleString } from '../../../utilities/utilities';\nimport { SVGTooltipText } from '../../../utilities/SVGTooltipText';\n\nexport class Arc extends React.Component<IArcProps, IArcState> {\n public static defaultProps: Partial<IArcProps> = {\n arc: shape.arc(),\n };\n\n protected _arcId: string;\n\n public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): null {\n _updateChart(nextProps);\n return null;\n }\n\n public constructor(props: IArcProps) {\n super(props);\n this.state = {\n isArcFocused: false,\n };\n\n this._arcId = getId('piechart_arc');\n }\n\n public updateChart = (newProps: IArcProps) => {\n _updateChart(newProps);\n };\n\n public render(): JSX.Element {\n const { arc } = this.props;\n const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n const classNames = getClassNames(props => getStyles(props, this.props.theme), { ...this.props });\n\n return (\n <path\n d={arc(this.props.data)}\n className={`${this.state.isArcFocused ? classNames.arcRootFocussed : classNames.arcRoot}`}\n onClick={this.props.data?.data.onClick}\n />\n );\n }\n\n protected _onFocus = () => {\n this.setState({ isArcFocused: true });\n };\n\n protected _onBlur = () => {\n this.setState({ isArcFocused: false });\n };\n}\n\nexport class LabeledArc extends Arc {\n private _isRTL = getRTL();\n\n public constructor(props: IArcProps) {\n super(props);\n this._arcId = getId('piechart_arc');\n }\n\n public render(): JSX.Element {\n const { data, culture } = this.props;\n const gap = 4;\n // placing the labels on the outside arc\n const [labelX, labelY] = shape.arc().centroid({\n endAngle: data?.endAngle \|\| 0,\n startAngle: data?.startAngle \|\| 0,\n padAngle: data?.padAngle,\n innerRadius: this.props?.outerRadius \|\| 0,\n outerRadius: this.props?.outerRadius \|\| 0 + gap,\n });\n\n const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n const classNames = getClassNames(props => getStyles(props, this.props.theme));\n\n const angle = ((data?.startAngle \|\| 0) + (data?.endAngle \|\| 0)) / 2;\n\n const content = `${data?.data.x}-${convertToLocaleString(data?.data.y, culture)}`;\n\n return (\n <g\n className={`${classNames.arc} arc`}\n data-is-focusable={true}\n id={this._arcId}\n onFocus={this._onFocus}\n onBlur={this._onBlur}\n aria-label={content}\n role=\"img\"\n >\n {super.render()}\n <SVGTooltipText\n content={content}\n textProps={{\n x: labelX,\n y: labelY,\n dominantBaseline: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto',\n textAnchor: (!this._isRTL && angle > Math.PI) \|\| (this._isRTL && angle < Math.PI) ? 'end' : 'start',\n 'aria-label': `${data?.data.x}-${convertToLocaleString(data?.data.y, culture)}`,\n className: classNames.arcText,\n }}\n isTooltipVisibleProp={this.state.isArcFocused}\n shouldReceiveFocus={false}\n maxWidth={40}\n wrapContent={wrapContent}\n />\n </g>\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-amd/components/PieChart/Arc/Arc.styles.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 import { IArcProps, IArcStyles } from './Arc.types';
-export declare const getStyles: (props: IArcProps) => IArcStyles;
+import { ITheme } from '@fluentui/react/lib/Styling';
+export declare const getStyles: (props: IArcProps, theme: ITheme | undefined) => IArcStyles;

package/lib-amd/components/PieChart/Arc/Arc.styles.js CHANGED Viewed

@@ -2,10 +2,13 @@ define(["require", "exports", "@fluentui/react/lib/Styling"], function (require,
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.getStyles = void 0;
-    var getStyles = function (props) {
+    var getStyles = function (props, theme) {
         var color = props.color;
         return {
-            root: { fill: color, stroke: Styling_1.DefaultPalette.white, strokeWidth: 2 },
+            arcRoot: { fill: color },
+            arcRootFocussed: { fill: color, stroke: (theme === null || theme === void 0 ? void 0 : theme.palette.black) || Styling_1.DefaultPalette.black, strokeWidth: 2 },
+            arc: { outline: 'none' },
+            arcText: { fill: (theme === null || theme === void 0 ? void 0 : theme.palette.black) || Styling_1.DefaultPalette.black, outline: 'none' },
         };
     };
     exports.getStyles = getStyles;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Arc.styles.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAAgB;~~QAChC~~,IAAA,KAAK,GAAK,KAAK,MAAV,CAAW;QACxB,OAAO;YACL,IAAI,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,wBAAc,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,EAAE;~~SACpE~~,CAAC;IACJ,CAAC,CAAC;~~IALW~~,QAAA,SAAS,~~aAKpB~~","sourcesContent":["import { IArcProps, IArcStyles } from './Arc.types';\nimport { DefaultPalette } from '@fluentui/react/lib/Styling';\nexport const getStyles = (props: IArcProps): IArcStyles => {\n const { color } = props;\n return {\n ~~root~~: { fill: color, stroke: DefaultPalette.~~white~~, strokeWidth: 2 },\n };\n};\n"]}
1	+ {"version":3,"file":"Arc.styles.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAAgB,EAAE,KAAyB;QAC3D,IAAA,KAAK,GAAK,KAAK,MAAV,CAAW;QACxB,OAAO;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACxB,eAAe,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,KAAK,KAAI,wBAAc,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,EAAE;YACtG,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YACxB,OAAO,EAAE,EAAE,IAAI,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,KAAK,KAAI,wBAAc,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE;SACjF,CAAC;IACJ,CAAC,CAAC;IARW,QAAA,SAAS,aAQpB","sourcesContent":["import { IArcProps, IArcStyles } from './Arc.types';\nimport { DefaultPalette, ITheme } from '@fluentui/react/lib/Styling';\nexport const getStyles = (props: IArcProps, theme: ITheme \| undefined): IArcStyles => {\n const { color } = props;\n return {\n arcRoot: { fill: color },\n arcRootFocussed: { fill: color, stroke: theme?.palette.black \|\| DefaultPalette.black, strokeWidth: 2 },\n arc: { outline: 'none' },\n arcText: { fill: theme?.palette.black \|\| DefaultPalette.black, outline: 'none' },\n };\n};\n"]}

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

@@ -1,4 +1,4 @@
-import { IStyle } from '@fluentui/react/lib/Styling';
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
 import { IDataPoint } from '../PieChart.types';
 export interface IArcProps {
     /**
@@ -25,6 +25,16 @@ export interface IArcProps {
      * The prop used to define the culture to localized the numbers
      */
     culture?: string;
+    /**
+     * to pass the theme
+     */
+    theme?: ITheme;
+}
+export interface IArcState {
+    /**
+     * The state controls, whether the arc needs to be focused or not
+     */
+    isArcFocused?: boolean;
 }
 export interface IArcData {
     /**
@@ -56,5 +66,8 @@ export interface IArcStyles {
     /**
      * Style set for the card header component root
      */
-    root: IStyle;
+    arcRoot: IStyle;
+    arc: IStyle;
+    arcRootFocussed: IStyle;
+    arcText: IStyle;
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Arc.types.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IDataPoint } from '../PieChart.types';\n\nexport interface IArcProps {\n /*\n Data to render in the Arc.\n /\n data?: IArcData;\n\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 outerRadius of the Arc.\n /\n outerRadius?: number;\n /\n Color for the Arc.\n /\n color: string;\n\n /\n The prop used to define the culture to localized the numbers\n /\n culture?: string;\n}\n\nexport interface IArcData {\n /\n Data to render in the chart for individual arc.\n /\n data: IDataPoint;\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"]}
1	+ {"version":3,"file":"Arc.types.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IDataPoint } from '../PieChart.types';\n\nexport interface IArcProps {\n /*\n Data to render in the Arc.\n /\n data?: IArcData;\n\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 outerRadius of the Arc.\n /\n outerRadius?: number;\n /\n Color for the Arc.\n /\n color: string;\n\n /\n The prop used to define the culture to localized the numbers\n /\n culture?: string;\n /\n to pass the theme\n /\n theme?: ITheme;\n}\n\nexport interface IArcState {\n /\n The state controls, whether the arc needs to be focused or not\n /\n isArcFocused?: boolean;\n}\n\nexport interface IArcData {\n /\n Data to render in the chart for individual arc.\n /\n data: IDataPoint;\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 arcRoot: IStyle;\n\n arc: IStyle;\n\n arcRootFocussed: IStyle;\n\n arcText: IStyle;\n}\n"]}

package/lib-amd/components/PieChart/Pie/Pie.js CHANGED Viewed

@@ -1,4 +1,4 @@
-define(["require", "exports", "tslib", "react", "d3-shape", "d3-scale", "../Arc/Arc"], function (require, exports, tslib_1, React, shape, scale, Arc_1) {
+define(["require", "exports", "tslib", "react", "d3-shape", "d3-scale", "../Arc/Arc", "@fluentui/react-focus", "../../../utilities/colors"], function (require, exports, tslib_1, React, shape, scale, Arc_1, react_focus_1, colors_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Pie = void 0;
@@ -7,23 +7,32 @@ define(["require", "exports", "tslib", "react", "d3-shape", "d3-scale", "../Arc/
         function Pie(props) {
             var _this = _super.call(this, props) || this;
             _this.arcGenerator = function (d, i) {
-                return (React.createElement(Arc_1.LabeledArc, { culture: _this.props.culture, key: i, data: d, innerRadius: _this.props.innerRadius, outerRadius: _this.props.outerRadius, color: "".concat(_this.colors(i)) }));
+                return (React.createElement(Arc_1.LabeledArc, { culture: _this.props.culture, key: i, data: d, innerRadius: _this.props.innerRadius, outerRadius: _this.props.outerRadius, color: "".concat(_this.colors(i)), theme: _this.props.theme }));
             };
             return _this;
         }
         Pie.prototype.render = function () {
             var _this = this;
             // const getClassNames = classNamesFunction<IPieProps, IPieStyles>();
-            var _a = this.props, pie = _a.pie, colors = _a.colors, data = _a.data, width = _a.width, height = _a.height, chartTitle = _a.chartTitle;
-            this.colors = scale.scaleOrdinal().range(colors);
+            var _a = this.props, pie = _a.pie, data = _a.data, width = _a.width, height = _a.height, chartTitle = _a.chartTitle, theme = _a.theme;
+            var defaultColors = [];
+            if (data && !this.props.colors) {
+                for (var i = 0; i < data.length; i++) {
+                    defaultColors.push((0, colors_1.getNextColor)(i, 0, theme === null || theme === void 0 ? void 0 : theme.isInverted));
+                }
+            }
+            var _b = this.props.colors, colors = _b === void 0 ? defaultColors : _b;
+            this.colors = scale.scaleOrdinal().range(colors.map(function (color) { return (0, colors_1.getColorFromToken)(color); }));
             var piechart = pie(data);
             var translate = "translate(".concat(width / 2, ", ").concat(height / 2, ")");
-            return (React.createElement("svg", { width: width, height: height, "aria-label": chartTitle },
-                React.createElement("g", { transform: translate }, piechart.map(function (d, i) { return _this.arcGenerator(d, i); }))));
+            return (React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.domOrder },
+                React.createElement("svg", { width: width, height: height, "aria-label": chartTitle },
+                    React.createElement("g", { className: "pie", transform: translate }, piechart.map(function (d, i) { return _this.arcGenerator(d, i); })))));
         };
         Pie.defaultProps = {
             pie: shape
                 .pie()
+                .padAngle(0.01)
                 .sort(null)
                 /* eslint-disable @typescript-eslint/no-explicit-any */
                 .value(function (d) { return d.y; }),

package/lib-amd/components/PieChart/Pie/Pie.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pie.js","sourceRoot":"../src/","sources":["components/PieChart/Pie/Pie.tsx"],"names":[],"mappings":";;;;~~IAOA~~;QAAyB,+BAA8B;~~QAUrD~~,aAAY,KAAgB;YAA5B,YACE,kBAAM,KAAK,CAAC,SACb;YAEM,kBAAY,GAAG,UAAC,CAAW,EAAE,CAAS;gBAC3C,OAAO,CACL,oBAAC,gBAAU,IACT,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,EACP,WAAW,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,EACnC,WAAW,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,EACnC,KAAK,EAAE,UAAG,KAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAE,~~GAC1B~~,CACH,CAAC;YACJ,CAAC,CAAC;;~~QAbF~~,CAAC;~~QAeM~~,oBAAM,GAAb;YAAA,~~iBAcC~~;~~YAbC~~,qEAAqE;YAC/D,IAAA,~~KAAmD~~,IAAI,CAAC,KAAK,~~EAA3D~~,GAAG,SAAA,EAAE,MAAM,YAAA,EAAE,IAAI,~~UAAA~~,EAAE,KAAK,~~WAAA~~,EAAE,MAAM,~~YAAA~~,EAAE,UAAU,~~gBAAe~~,CAAC;~~YAEpE~~,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,~~MAAO~~,CAAC,CAAC;~~YAElD~~,IAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAM,SAAS,GAAG,oBAAa,KAAK,GAAG,CAAC,eAAK,MAAM,GAAG,CAAC,MAAG,CAAC;YAE3D,OAAO,CACL,6BAAK,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAc,UAAU;~~gBACvD~~,2BAAG,SAAS,EAAE,SAAS,~~IAAG~~,QAAQ,CAAC,GAAG,CAAC,UAAC,CAAW,EAAE,CAAS,IAAK,OAAA,KAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,EAAvB,CAAuB,CAAC,~~CAAK~~,~~CAC5F~~,~~CACP~~,CAAC;QACJ,CAAC;~~QAxCa~~,gBAAY,GAAuB;YAC/C,GAAG,EAAE,KAAK;iBACP,GAAG,EAAE;iBACL,IAAI,CAAC,IAAI,CAAC;gBACX,uDAAuD;iBACtD,KAAK,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC;SAC1B,CAAC;~~QAmCJ~~,UAAC;KAAA,~~AA1CD~~,CAAyB,KAAK,CAAC,SAAS,~~GA0CvC~~;~~IA1CY~~,kBAAG","sourcesContent":["import * as React from 'react';\nimport * as shape from 'd3-shape';\nimport * as scale from 'd3-scale';\nimport { IPieProps } from './Pie.types';\nimport { LabeledArc } from '../Arc/Arc';\nimport { IArcData } from '../Arc/Arc.types';\n\nexport class Pie extends React.Component<IPieProps, {}> {\n public static defaultProps: Partial<IPieProps> = {\n pie: shape\n .pie()\n .sort(null)\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .value((d: any) => d.y),\n };\n private colors: scale.ScaleOrdinal<string \| number, any>;\n\n constructor(props: IPieProps) {\n super(props);\n }\n\n public arcGenerator = (d: IArcData, i: number): JSX.Element => {\n return (\n <LabeledArc\n culture={this.props.culture}\n key={i}\n data={d}\n innerRadius={this.props.innerRadius}\n outerRadius={this.props.outerRadius}\n color={`${this.colors(i)}`}\n />\n );\n };\n\n public render(): JSX.Element {\n // const getClassNames = classNamesFunction<IPieProps, IPieStyles>();\n const { pie, ~~colors,~~ data, width, height, chartTitle } = this.props;\n\n this.colors = scale.scaleOrdinal().range(colors!);\n\n const piechart = pie(data);\n const translate = `translate(${width / 2}, ${height / 2})`;\n\n return (\n <svg width={width} height={height} aria-label={chartTitle}>\n <g transform={translate}>{piechart.map((d: IArcData, i: number) => this.arcGenerator(d, i))}</g>\n </svg>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"Pie.js","sourceRoot":"../src/","sources":["components/PieChart/Pie/Pie.tsx"],"names":[],"mappings":";;;;IASA;QAAyB,+BAA8B;QAWrD,aAAY,KAAgB;YAA5B,YACE,kBAAM,KAAK,CAAC,SACb;YAEM,kBAAY,GAAG,UAAC,CAAW,EAAE,CAAS;gBAC3C,OAAO,CACL,oBAAC,gBAAU,IACT,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,EACP,WAAW,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,EACnC,WAAW,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,EACnC,KAAK,EAAE,UAAG,KAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAE,EAC1B,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,KAAK,GACvB,CACH,CAAC;YACJ,CAAC,CAAC;;QAdF,CAAC;QAgBM,oBAAM,GAAb;YAAA,iBA0BC;YAzBC,qEAAqE;YAC/D,IAAA,KAAkD,IAAI,CAAC,KAAK,EAA1D,GAAG,SAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAA,EAAE,KAAK,WAAe,CAAC;YAEnE,IAAM,aAAa,GAAkB,EAAE,CAAC;YACxC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;gBAC9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBACpC,aAAa,CAAC,IAAI,CAAC,IAAA,qBAAY,EAAC,CAAC,EAAE,CAAC,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,CAAC,CAAC,CAAC;iBAC3D;aACF;YACO,IAAA,KAA2B,IAAI,CAAC,KAAK,OAAf,EAAtB,MAAM,mBAAG,aAAa,KAAA,CAAgB;YAE9C,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,UAAA,KAAK,IAAI,OAAA,IAAA,0BAAiB,EAAC,KAAK,CAAC,EAAxB,CAAwB,CAAC,CAAC,CAAC;YAExF,IAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAM,SAAS,GAAG,oBAAa,KAAK,GAAG,CAAC,eAAK,MAAM,GAAG,CAAC,MAAG,CAAC;YAE3D,OAAO,CACL,oBAAC,uBAAS,IAAC,SAAS,EAAE,gCAAkB,CAAC,QAAQ;gBAC/C,6BAAK,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAc,UAAU;oBACvD,2BAAG,SAAS,EAAC,KAAK,EAAC,SAAS,EAAE,SAAS,IACpC,QAAQ,CAAC,GAAG,CAAC,UAAC,CAAW,EAAE,CAAS,IAAK,OAAA,KAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,EAAvB,CAAuB,CAAC,CAChE,CACA,CACI,CACb,CAAC;QACJ,CAAC;QAtDa,gBAAY,GAAuB;YAC/C,GAAG,EAAE,KAAK;iBACP,GAAG,EAAE;iBACL,QAAQ,CAAC,IAAI,CAAC;iBACd,IAAI,CAAC,IAAI,CAAC;gBACX,uDAAuD;iBACtD,KAAK,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC;SAC1B,CAAC;QAgDJ,UAAC;KAAA,AAxDD,CAAyB,KAAK,CAAC,SAAS,GAwDvC;IAxDY,kBAAG","sourcesContent":["import * as React from 'react';\nimport * as shape from 'd3-shape';\nimport * as scale from 'd3-scale';\nimport { IPieProps } from './Pie.types';\nimport { LabeledArc } from '../Arc/Arc';\nimport { IArcData } from '../Arc/Arc.types';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { getColorFromToken, getNextColor } from '../../../utilities/colors';\n\nexport class Pie extends React.Component<IPieProps, {}> {\n public static defaultProps: Partial<IPieProps> = {\n pie: shape\n .pie()\n .padAngle(0.01)\n .sort(null)\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .value((d: any) => d.y),\n };\n private colors: scale.ScaleOrdinal<string \| number, any>;\n\n constructor(props: IPieProps) {\n super(props);\n }\n\n public arcGenerator = (d: IArcData, i: number): JSX.Element => {\n return (\n <LabeledArc\n culture={this.props.culture}\n key={i}\n data={d}\n innerRadius={this.props.innerRadius}\n outerRadius={this.props.outerRadius}\n color={`${this.colors(i)}`}\n theme={this.props.theme}\n />\n );\n };\n\n public render(): JSX.Element {\n // const getClassNames = classNamesFunction<IPieProps, IPieStyles>();\n const { pie, data, width, height, chartTitle, theme } = this.props;\n\n const defaultColors: Array<string> = [];\n if (data && !this.props.colors) {\n for (let i = 0; i < data.length; i++) {\n defaultColors.push(getNextColor(i, 0, theme?.isInverted));\n }\n }\n const { colors = defaultColors } = this.props;\n\n this.colors = scale.scaleOrdinal().range(colors.map(color => getColorFromToken(color)));\n\n const piechart = pie(data);\n const translate = `translate(${width / 2}, ${height / 2})`;\n\n return (\n <FocusZone direction={FocusZoneDirection.domOrder}>\n <svg width={width} height={height} aria-label={chartTitle}>\n <g className=\"pie\" transform={translate}>\n {piechart.map((d: IArcData, i: number) => this.arcGenerator(d, i))}\n </g>\n </svg>\n </FocusZone>\n );\n }\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { IStyle } from '@fluentui/react/lib/Styling';
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
 import { IDataPoint } from '../PieChart.types';
 export interface IPieProps {
     /**
@@ -37,6 +37,7 @@ export interface IPieProps {
      * The prop used to define the culture to localized the numbers
      */
     culture?: string;
+    theme?: ITheme;
 }
 export interface IPieStyles {
     /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Pie.types.js","sourceRoot":"../src/","sources":["components/PieChart/Pie/Pie.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IDataPoint } from '../PieChart.types';\n\nexport interface IPieProps {\n /*\n Width of the Pie.\n /\n width: number;\n /\n Height of the Pie.\n /\n height: number;\n /\n outerRadius of the Pie.\n /\n outerRadius: number;\n /\n innerRadius of the Pie.\n /\n innerRadius: number;\n /\n Data to render in the Pie.\n /\n data: IDataPoint[];\n /\n colors to render in the Pie.\n /\n colors?: string[];\n /\n Title to apply to the whole chart.\n /\n chartTitle?: string;\n /\n shape for pie.\n /\n / eslint-disable @typescript-eslint/no-explicit-any /\n pie?: any;\n\n /\n The prop used to define the culture to localized the numbers\n /\n culture?: string;\n}\n\nexport interface IPieStyles {\n /\n Style set for the card header component root\n */\n root: IStyle;\n}\n"]}
1	+ {"version":3,"file":"Pie.types.js","sourceRoot":"../src/","sources":["components/PieChart/Pie/Pie.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IDataPoint } from '../PieChart.types';\n\nexport interface IPieProps {\n /*\n Width of the Pie.\n /\n width: number;\n /\n Height of the Pie.\n /\n height: number;\n /\n outerRadius of the Pie.\n /\n outerRadius: number;\n /\n innerRadius of the Pie.\n /\n innerRadius: number;\n /\n Data to render in the Pie.\n /\n data: IDataPoint[];\n /\n colors to render in the Pie.\n /\n colors?: string[];\n /\n Title to apply to the whole chart.\n /\n chartTitle?: string;\n /\n shape for pie.\n /\n / eslint-disable @typescript-eslint/no-explicit-any /\n pie?: any;\n\n /\n The prop used to define the culture to localized the numbers\n /\n culture?: string;\n\n theme?: ITheme;\n}\n\nexport interface IPieStyles {\n /\n Style set for the card header component root\n */\n root: IStyle;\n}\n"]}

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

@@ -19,11 +19,17 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 height: height,
                 className: className,
             });
-            var radius = Math.min(width, height) / 2;
-            var outerRadius = radius - 10;
+            var TEXT_MAX_WIDTH = 40;
+            var TEXT_LINE_HEIGHT = 16;
+            /**
+             * The radius for the pie chart is computed based on the space available inside the svg
+             * after subtracting the max amount of space that can be used by the text in pie chart
+             */
+            var radius = Math.min(width - 2 * TEXT_MAX_WIDTH, height - 2 * TEXT_LINE_HEIGHT) / 2;
+            var outerRadius = radius;
             return !this._isChartEmpty() ? (React.createElement("div", { className: this._classNames.root },
                 this.props.chartTitle && React.createElement("p", { className: this._classNames.chartTitle }, this.props.chartTitle),
-                React.createElement(Pie_1.Pie, { culture: culture, width: width, height: height, outerRadius: outerRadius, innerRadius: 0, data: data, colors: colors, chartTitle: chartTitle }))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
+                React.createElement(Pie_1.Pie, { culture: culture, width: width, height: height, outerRadius: outerRadius, innerRadius: 1, data: data, colors: colors, chartTitle: chartTitle, theme: theme }))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
         };
         PieChartBase.prototype._isChartEmpty = function () {
             return !(this.props.data && this.props.data.length > 0 && this.props.data.filter(function (item) { return item.y > 0; }).length > 0);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PieChart.base.js","sourceRoot":"../src/","sources":["components/PieChart/PieChart.base.tsx"],"names":[],"mappings":";;;;IAMA,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAAwC,CAAC;IAEjF;QAAkC,wCAAmC;QASnE,sBAAmB,KAAqB;YAAxC,YACE,kBAAM,KAAK,CAAC,SAEb;YADC,KAAI,CAAC,aAAa,GAAG,IAAA,iBAAK,EAAC,iBAAiB,CAAC,CAAC;;QAChD,CAAC;QAEM,6BAAM,GAAb;YACQ,IAAA,KAA8C,IAAI,CAAC,KAAK,EAAtD,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAe,CAAC;YAEzD,IAAA,KAAwC,IAAI,CAAC,KAAK,EAAhD,KAAK,WAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA,EAAE,OAAO,aAAe,CAAC;YACzD,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,MAAO,EAAE;gBACxC,KAAK,EAAE,KAAM;gBACb,KAAK,EAAE,KAAM;gBACb,MAAM,EAAE,MAAO;gBACf,SAAS,WAAA;aACV,CAAC,CAAC;~~YACH~~,IAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAM,EAAE,MAAO,CAAC,GAAG,CAAC,CAAC;~~YAC7C~~,IAAM,WAAW,GAAG,MAAM,~~GAAG,EAAE,~~CAAC;~~YAEhC~~,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CAC7B,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI;gBAClC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,2BAAG,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,UAAU,IAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAK;gBAChG,oBAAC,SAAG,IACF,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAM,EACb,MAAM,EAAE,MAAO,EACf,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,CAAC,EACd,IAAI,EAAE,IAAK,EACX,MAAM,EAAE,MAAO,EACf,UAAU,EAAE,UAAW,~~GACvB~~,CACE,CACP,CAAC,CAAC,CAAC,CACF,6BACE,EAAE,EAAE,IAAI,CAAC,aAAa,EACtB,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,gBACX,8BAA8B,GAC1C,CACH,CAAC;QACJ,CAAC;QAEO,oCAAa,GAArB;YACE,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,CAAC,GAAG,CAAC,EAAV,CAAU,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACnH,CAAC;~~QApDa~~,yBAAY,GAA4B;YACpD,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;SACZ,CAAC;~~QAiDJ~~,mBAAC;KAAA,~~AAtDD~~,CAAkC,KAAK,CAAC,SAAS,~~GAsDhD~~;~~IAtDY~~,oCAAY","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport { IPieChartProps, IPieChartStyleProps, IPieChartStyles } from './PieChart.types';\nimport { Pie } from './Pie/Pie';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\n\nconst getClassNames = classNamesFunction<IPieChartStyleProps, IPieChartStyles>();\n\nexport class PieChartBase extends React.Component<IPieChartProps, {}> {\n public static defaultProps: Partial<IPieChartProps> = {\n data: [],\n width: 600,\n height: 350,\n };\n private _classNames: IProcessedStyleSet<IPieChartStyles>;\n private _emptyChartId: string;\n\n public constructor(props: IPieChartProps) {\n super(props);\n this._emptyChartId = getId('_PieChart_empty');\n }\n\n public render(): JSX.Element {\n const { data, width, height, colors, chartTitle } = this.props;\n\n const { theme, className, styles, culture } = this.props;\n this._classNames = getClassNames(styles!, {\n theme: theme!,\n width: width!,\n height: height!,\n className,\n });\n const radius = Math.min(width!, height!) / 2;\n const outerRadius = radius ~~- 10~~;\n\n return !this._isChartEmpty() ? (\n <div className={this._classNames.root}>\n {this.props.chartTitle && <p className={this._classNames.chartTitle}>{this.props.chartTitle}</p>}\n <Pie\n culture={culture}\n width={width!}\n height={height!}\n outerRadius={outerRadius}\n innerRadius={0}\n data={data!}\n colors={colors!}\n chartTitle={chartTitle!}\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 private _isChartEmpty(): boolean {\n return !(this.props.data && this.props.data.length > 0 && this.props.data.filter(item => item.y > 0).length > 0);\n }\n}\n"]}
1	+ {"version":3,"file":"PieChart.base.js","sourceRoot":"../src/","sources":["components/PieChart/PieChart.base.tsx"],"names":[],"mappings":";;;;IAMA,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAAwC,CAAC;IAEjF;QAAkC,wCAAmC;QASnE,sBAAmB,KAAqB;YAAxC,YACE,kBAAM,KAAK,CAAC,SAEb;YADC,KAAI,CAAC,aAAa,GAAG,IAAA,iBAAK,EAAC,iBAAiB,CAAC,CAAC;;QAChD,CAAC;QAEM,6BAAM,GAAb;YACQ,IAAA,KAA8C,IAAI,CAAC,KAAK,EAAtD,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAe,CAAC;YAEzD,IAAA,KAAwC,IAAI,CAAC,KAAK,EAAhD,KAAK,WAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA,EAAE,OAAO,aAAe,CAAC;YACzD,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,MAAO,EAAE;gBACxC,KAAK,EAAE,KAAM;gBACb,KAAK,EAAE,KAAM;gBACb,MAAM,EAAE,MAAO;gBACf,SAAS,WAAA;aACV,CAAC,CAAC;YAEH,IAAM,cAAc,GAAG,EAAE,CAAC;YAC1B,IAAM,gBAAgB,GAAG,EAAE,CAAC;YAE5B;;;eAGG;YAEH,IAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAM,GAAG,CAAC,GAAG,cAAc,EAAE,MAAO,GAAG,CAAC,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC;YACzF,IAAM,WAAW,GAAG,MAAM,CAAC;YAE3B,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CAC7B,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI;gBAClC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,2BAAG,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,UAAU,IAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAK;gBAChG,oBAAC,SAAG,IACF,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAM,EACb,MAAM,EAAE,MAAO,EACf,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,CAAC,EACd,IAAI,EAAE,IAAK,EACX,MAAM,EAAE,MAAO,EACf,UAAU,EAAE,UAAW,EACvB,KAAK,EAAE,KAAK,GACZ,CACE,CACP,CAAC,CAAC,CAAC,CACF,6BACE,EAAE,EAAE,IAAI,CAAC,aAAa,EACtB,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,gBACX,8BAA8B,GAC1C,CACH,CAAC;QACJ,CAAC;QAEO,oCAAa,GAArB;YACE,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,CAAC,GAAG,CAAC,EAAV,CAAU,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACnH,CAAC;QA9Da,yBAAY,GAA4B;YACpD,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;SACZ,CAAC;QA2DJ,mBAAC;KAAA,AAhED,CAAkC,KAAK,CAAC,SAAS,GAgEhD;IAhEY,oCAAY","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport { IPieChartProps, IPieChartStyleProps, IPieChartStyles } from './PieChart.types';\nimport { Pie } from './Pie/Pie';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\n\nconst getClassNames = classNamesFunction<IPieChartStyleProps, IPieChartStyles>();\n\nexport class PieChartBase extends React.Component<IPieChartProps, {}> {\n public static defaultProps: Partial<IPieChartProps> = {\n data: [],\n width: 600,\n height: 350,\n };\n private _classNames: IProcessedStyleSet<IPieChartStyles>;\n private _emptyChartId: string;\n\n public constructor(props: IPieChartProps) {\n super(props);\n this._emptyChartId = getId('_PieChart_empty');\n }\n\n public render(): JSX.Element {\n const { data, width, height, colors, chartTitle } = this.props;\n\n const { theme, className, styles, culture } = this.props;\n this._classNames = getClassNames(styles!, {\n theme: theme!,\n width: width!,\n height: height!,\n className,\n });\n\n const TEXT_MAX_WIDTH = 40;\n const TEXT_LINE_HEIGHT = 16;\n\n /*\n The radius for the pie chart is computed based on the space available inside the svg\n * after subtracting the max amount of space that can be used by the text in pie chart\n /\n\n const radius = Math.min(width! - 2 TEXT_MAX_WIDTH, height! - 2 * TEXT_LINE_HEIGHT) / 2;\n const outerRadius = radius;\n\n return !this._isChartEmpty() ? (\n <div className={this._classNames.root}>\n {this.props.chartTitle && <p className={this._classNames.chartTitle}>{this.props.chartTitle}</p>}\n <Pie\n culture={culture}\n width={width!}\n height={height!}\n outerRadius={outerRadius}\n innerRadius={1}\n data={data!}\n colors={colors!}\n chartTitle={chartTitle!}\n theme={theme}\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 private _isChartEmpty(): boolean {\n return !(this.props.data && this.props.data.length > 0 && this.props.data.filter(item => item.y > 0).length > 0);\n }\n}\n"]}

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

@@ -17,6 +17,7 @@ export interface IMultiStackedBarChartState {
     dataPointCalloutProps?: IChartDataPoint;
     callOutAccessibilityData?: IAccessibilityProps;
     calloutLegend: string;
+    barSpacingInPercent: number;
 }
 export declare class MultiStackedBarChartBase extends React.Component<IMultiStackedBarChartProps, IMultiStackedBarChartState> {
     static defaultProps: Partial<IMultiStackedBarChartProps>;
@@ -25,12 +26,20 @@ export declare class MultiStackedBarChartBase extends React.Component<IMultiStac
     private _calloutAnchorPoint;
     private _longestBarTotalValue;
     private _isRTL;
+    private barChartSvgRef;
     private _emptyChartId;
     private _barId;
     private _barIdPlaceholderPartToWhole;
     private _barIdEmpty;
     constructor(props: IMultiStackedBarChartProps);
+    componentDidMount(): void;
     render(): JSX.Element;
+    /**
+     * The Create bar functions returns an array of <rect> elements, which form the bars
+     * For each bar an x value, and a width needs to be specified
+     * The computations are done based on percentages
+     * Extra margin is also provided, in the x value to provide some spacing
+     */
     private _createBarsAndLegends;
     private _onBarFocus;
     private _refCallback;