npm - @fluentui/react-charting - Versions diffs - 5.14.23 → 5.14.25 - Mend

@fluentui/react-charting 5.14.23 → 5.14.25

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StackedBarChart.base.js","sourceRoot":"../src/","sources":["components/StackedBarChart/StackedBarChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport { ILegend, Legends } from '../Legends/index';\nimport { IAccessibilityProps, IChartDataPoint, IChartProps } from './index';\nimport { IRefArrayData, IStackedBarChartProps, IStackedBarChartStyleProps, IStackedBarChartStyles } 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<IStackedBarChartStyleProps, IStackedBarChartStyles>();\nexport interface IStackedBarChartState {\n isCalloutVisible: boolean;\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 StackedBarChartBase extends React.Component<IStackedBarChartProps, IStackedBarChartState> {\n public static defaultProps: Partial<IStackedBarChartProps> = {\n barHeight: 16,\n hideNumberDisplay: false,\n hideLegend: false,\n ignoreFixStyle: false,\n };\n private _classNames: IProcessedStyleSet<IStackedBarChartStyles>;\n private _calloutId: string;\n private _refArray: IRefArrayData[];\n private _calloutAnchorPoint: IChartDataPoint \| null;\n\n public constructor(props: IStackedBarChartProps) {\n super(props);\n this.state = {\n isCalloutVisible: false,\n selectedLegend: '',\n activeLegend: '',\n refSelected: null,\n dataForHoverCard: 0,\n color: '',\n xCalloutValue: '',\n yCalloutValue: '',\n calloutLegend: '',\n };\n this._refArray = [];\n this._onLeave = this._onLeave.bind(this);\n this._refCallback = this._refCallback.bind(this);\n this._onBarLeave = this._onBarLeave.bind(this);\n this._calloutId = getId('callout');\n }\n\n public render(): JSX.Element {\n this._adjustProps();\n const { data, benchmarkData, targetData, hideNumberDisplay, ignoreFixStyle, culture } = this.props;\n const { palette } = this.props.theme!;\n const barHeight = ignoreFixStyle \|\| data!.chartData!.length > 2 ? this.props.barHeight : 8;\n\n if (benchmarkData) {\n // benchmark color is used to render color for benchmark triangle and benchmark legend\n benchmarkData.color = benchmarkData.color \|\| palette.neutralTertiary;\n }\n\n if (targetData) {\n // target color is used to render color for target triangle and target legend\n targetData.color = targetData.color \|\| palette.neutralSecondary;\n }\n\n const bars = this._createBarsAndLegends(data!, barHeight!, palette, benchmarkData, targetData);\n\n const showRatio = hideNumberDisplay === false && !ignoreFixStyle && data!.chartData!.length === 2;\n const showNumber = hideNumberDisplay === false && !ignoreFixStyle && data!.chartData!.length === 1;\n const total = data!.chartData!.reduce(\n (acc: number, value: IChartDataPoint) => acc + (value.data ? value.data : 0),\n 0,\n );\n\n let benchmarkRatio = 0;\n if (benchmarkData && total) {\n benchmarkRatio = (benchmarkData.data! / total) * 100;\n }\n let targetRatio = 0;\n if (targetData && total) {\n targetRatio = (targetData.data! / total) * 100;\n }\n\n const showLegend = this.props.hideLegend === false && (ignoreFixStyle \|\| data!.chartData!.length > 2);\n this._classNames = getClassNames(this.props.styles!, {\n legendColor: this.state.color,\n theme: this.props.theme!,\n benchmarkColor: benchmarkData ? benchmarkData.color : '',\n benchmarkRatio,\n targetColor: targetData ? targetData.color : '',\n targetRatio,\n });\n const getChartData = () => convertToLocaleString(data!.chartData![0].data ? data!.chartData![0].data : 0, culture);\n return (\n <div className={this._classNames.root} onMouseLeave={this._handleChartMouseLeave}>\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 {!this.props.hideDenominator && (\n <span>\n /<span className={this._classNames.ratioDenominator}>{convertToLocaleString(total, culture)}</span>\n </span>\n )}\n </div>\n )}\n {showNumber && (\n <div {...getAccessibleDataObject(data!.chartDataAccessibilityData)}>\n <strong>{getChartData()}</strong>\n </div>\n )}\n </div>\n {(benchmarkData \|\| targetData) && (\n <div className={this._classNames.benchmarkContainer}>\n {benchmarkData && <div className={this._classNames.benchmark} role=\"text\" />}\n {targetData && <div className={this._classNames.target} role=\"text\" />}\n </div>\n )}\n </FocusZone>\n <FocusZone direction={FocusZoneDirection.horizontal}>\n <div>\n <svg className={this._classNames.chart} aria-label={data?.chartTitle}>\n <g>{bars[0]}</g>\n <Callout\n gapSpace={15}\n isBeakVisible={false}\n target={this.state.refSelected}\n setInitialFocus={true}\n hidden={!(!this.props.hideTooltip && this.state.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\n Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.calloutLegend}\n YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard}\n color={this.state.color}\n culture={culture}\n />\n )}\n </>\n </Callout>\n </svg>\n </div>\n </FocusZone>\n {showLegend && <div className={this._classNames.legendContainer}>{bars[1]}</div>}\n </div>\n );\n }\n\n private _adjustProps(): void {\n this._classNames = getClassNames(this.props.styles!, {\n legendColor: this.state.color,\n theme: this.props.theme!,\n width: this.props.width!,\n barHeight: this.props.barHeight!,\n className: this.props.className!,\n });\n }\n\n private _createBarsAndLegends(\n data: IChartProps,\n barHeight: number,\n palette: IPalette,\n benchmarkData?: IChartDataPoint,\n targetData?: IChartDataPoint,\n ): [JSX.Element[], JSX.Element] {\n const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n const legendDataItems: ILegend[] = [];\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 let prevPosition = 0;\n let value = 0;\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;\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 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.data ? point.data : 0;\n // mapping data to the format Legends component needs\n const legend: ILegend = {\n title: point.legend!,\n color: color,\n action:\n total > 0\n ? () => {\n this._onClick(point.legend!);\n }\n : undefined,\n hoverAction:\n total > 0\n ? () => {\n this._onHover(point.legend!);\n }\n : undefined,\n onMouseOutAction:\n total > 0\n ? () => {\n this._onLeave();\n }\n : undefined,\n };\n if (!point.placeHolder) {\n legendDataItems.push(legend);\n }\n if (index > 0) {\n prevPosition += value;\n }\n value = (pointData / total) * 100;\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 startingPoint.push(prevPosition);\n const styles = this.props.styles;\n const shouldHighlight = this._legendHighlighted(point.legend!) \|\| this._noLegendHighlighted() ? true : false;\n this._classNames = getClassNames(styles!, {\n theme: this.props.theme!,\n shouldHighlight: shouldHighlight,\n href: this.props.href!,\n });\n\n return (\n <g\n key={index}\n className={this._classNames.opacityChangeOnHover}\n ref={(e: SVGGElement) => {\n this._refCallback(e, legend.title);\n }}\n data-is-focusable={!this.props.hideTooltip}\n onFocus={this._onBarFocus.bind(this, pointData, color, point)}\n onBlur={this._onBarLeave}\n aria-label={this._getAriaLabel(point)}\n role=\"img\"\n onMouseOver={this._onBarHover.bind(this, pointData, color, point)}\n onMouseMove={this._onBarHover.bind(this, pointData, color, point)}\n onMouseLeave={this._onBarLeave}\n pointerEvents=\"all\"\n onClick={this.props.href ? this._redirectToUrl.bind(this, this.props.href!) : point.onClick}\n >\n <rect key={index} x={startingPoint[index] + '%'} y={0} width={value + '%'} height={barHeight} fill={color} />\n </g>\n );\n });\n\n // add benchmark legends\n this._addLegend(legendDataItems, benchmarkData);\n this._addLegend(legendDataItems, targetData);\n const legends = (\n <Legends\n legends={legendDataItems}\n enabledWrapLines={this.props.enabledLegendsWrapLines}\n overflowProps={this.props.legendsOverflowProps}\n focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n overflowText={this.props.legendsOverflowText}\n {...this.props.legendProps}\n />\n );\n return [\n total === 0\n ? [\n this._generateEmptyBar(\n barHeight,\n this.props.barBackgroundColor ? this.props.barBackgroundColor : palette.neutralTertiary,\n ),\n ]\n : bars,\n legends,\n ];\n }\n\n private _onBarFocus(pointData: number, color: string, point: IChartDataPoint): void {\n this._refArray.forEach((obj: IRefArrayData) => {\n if (obj.index === 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 _addLegend(legendDataItems: ILegend[], data?: IChartDataPoint): void {\n if (data) {\n const legend: ILegend = {\n title: data.legend!,\n color: data.color!,\n shape: 'triangle',\n };\n legendDataItems.push(legend);\n }\n }\n\n private _generateEmptyBar(barHeight: number, color: string): JSX.Element {\n return (\n <g key={0} className={this._classNames.opacityChangeOnHover}>\n <rect key={0} x={'0%'} y={0} width={'100%'} height={barHeight} fill={color} />\n </g>\n );\n }\n\n private _refCallback(element: SVGGElement, legendTitle: string): void {\n this._refArray.push({ index: legendTitle, refElement: element });\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 _onHover(legendTitle: string): void {\n this.setState({\n activeLegend: legendTitle,\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 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":"StackedBarChart.base.js","sourceRoot":"../src/","sources":["components/StackedBarChart/StackedBarChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport { ILegend, Legends } from '../Legends/index';\nimport { IAccessibilityProps, IChartDataPoint, IChartProps } from './index';\nimport { IRefArrayData, IStackedBarChartProps, IStackedBarChartStyleProps, IStackedBarChartStyles } 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<IStackedBarChartStyleProps, IStackedBarChartStyles>();\nexport interface IStackedBarChartState {\n isCalloutVisible: boolean;\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 StackedBarChartBase extends React.Component<IStackedBarChartProps, IStackedBarChartState> {\n public static defaultProps: Partial<IStackedBarChartProps> = {\n barHeight: 12,\n hideNumberDisplay: false,\n hideLegend: false,\n ignoreFixStyle: false,\n };\n private _classNames: IProcessedStyleSet<IStackedBarChartStyles>;\n private _calloutId: string;\n private _refArray: IRefArrayData[];\n private _calloutAnchorPoint: IChartDataPoint \| null;\n\n public constructor(props: IStackedBarChartProps) {\n super(props);\n this.state = {\n isCalloutVisible: false,\n selectedLegend: '',\n activeLegend: '',\n refSelected: null,\n dataForHoverCard: 0,\n color: '',\n xCalloutValue: '',\n yCalloutValue: '',\n calloutLegend: '',\n };\n this._refArray = [];\n this._onLeave = this._onLeave.bind(this);\n this._refCallback = this._refCallback.bind(this);\n this._onBarLeave = this._onBarLeave.bind(this);\n this._calloutId = getId('callout');\n }\n\n public render(): JSX.Element {\n this._adjustProps();\n const { data, benchmarkData, targetData, hideNumberDisplay, ignoreFixStyle, culture } = this.props;\n const { palette } = this.props.theme!;\n const barHeight = ignoreFixStyle \|\| data!.chartData!.length > 2 ? this.props.barHeight : 12;\n\n if (benchmarkData) {\n // benchmark color is used to render color for benchmark triangle and benchmark legend\n benchmarkData.color = benchmarkData.color \|\| palette.neutralTertiary;\n }\n\n if (targetData) {\n // target color is used to render color for target triangle and target legend\n targetData.color = targetData.color \|\| palette.neutralSecondary;\n }\n\n const bars = this._createBarsAndLegends(data!, barHeight!, palette, benchmarkData, targetData);\n\n const showRatio = hideNumberDisplay === false && !ignoreFixStyle && data!.chartData!.length === 2;\n const showNumber = hideNumberDisplay === false && !ignoreFixStyle && data!.chartData!.length === 1;\n const total = data!.chartData!.reduce(\n (acc: number, value: IChartDataPoint) => acc + (value.data ? value.data : 0),\n 0,\n );\n\n let benchmarkRatio = 0;\n if (benchmarkData && total) {\n benchmarkRatio = (benchmarkData.data! / total) * 100;\n }\n let targetRatio = 0;\n if (targetData && total) {\n targetRatio = (targetData.data! / total) * 100;\n }\n\n const showLegend = this.props.hideLegend === false && (ignoreFixStyle \|\| data!.chartData!.length > 2);\n this._classNames = getClassNames(this.props.styles!, {\n legendColor: this.state.color,\n theme: this.props.theme!,\n benchmarkColor: benchmarkData ? benchmarkData.color : '',\n benchmarkRatio,\n targetColor: targetData ? targetData.color : '',\n targetRatio,\n showTriangle: !!(benchmarkData \|\| targetData),\n });\n const getChartData = () => convertToLocaleString(data!.chartData![0].data ? data!.chartData![0].data : 0, culture);\n return (\n <div className={this._classNames.root} onMouseLeave={this._handleChartMouseLeave}>\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 {!this.props.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 {(benchmarkData \|\| targetData) && (\n <div className={this._classNames.benchmarkContainer}>\n {benchmarkData && <div className={this._classNames.benchmark} role=\"text\" />}\n {targetData && <div className={this._classNames.target} role=\"text\" />}\n </div>\n )}\n </FocusZone>\n <FocusZone direction={FocusZoneDirection.horizontal}>\n <div>\n <svg className={this._classNames.chart} aria-label={data?.chartTitle}>\n <g>{bars[0]}</g>\n <Callout\n gapSpace={15}\n isBeakVisible={false}\n target={this.state.refSelected}\n setInitialFocus={true}\n hidden={!(!this.props.hideTooltip && this.state.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\n Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.calloutLegend}\n YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard}\n color={this.state.color}\n culture={culture}\n />\n )}\n </>\n </Callout>\n </svg>\n </div>\n </FocusZone>\n {showLegend && <div className={this._classNames.legendContainer}>{bars[1]}</div>}\n </div>\n );\n }\n\n private _adjustProps(): void {\n this._classNames = getClassNames(this.props.styles!, {\n legendColor: this.state.color,\n theme: this.props.theme!,\n width: this.props.width!,\n barHeight: this.props.barHeight!,\n className: this.props.className!,\n });\n }\n\n private _createBarsAndLegends(\n data: IChartProps,\n barHeight: number,\n palette: IPalette,\n benchmarkData?: IChartDataPoint,\n targetData?: IChartDataPoint,\n ): [JSX.Element[], JSX.Element] {\n const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n const legendDataItems: ILegend[] = [];\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 let prevPosition = 0;\n let value = 0;\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;\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 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.data ? point.data : 0;\n // mapping data to the format Legends component needs\n const legend: ILegend = {\n title: point.legend!,\n color: color,\n action:\n total > 0\n ? () => {\n this._onClick(point.legend!);\n }\n : undefined,\n hoverAction:\n total > 0\n ? () => {\n this._onHover(point.legend!);\n }\n : undefined,\n onMouseOutAction:\n total > 0\n ? () => {\n this._onLeave();\n }\n : undefined,\n };\n if (!point.placeHolder) {\n legendDataItems.push(legend);\n }\n if (index > 0) {\n prevPosition += value;\n }\n value = (pointData / total) * 100;\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 startingPoint.push(prevPosition);\n const styles = this.props.styles;\n const shouldHighlight = this._legendHighlighted(point.legend!) \|\| this._noLegendHighlighted() ? true : false;\n this._classNames = getClassNames(styles!, {\n theme: this.props.theme!,\n shouldHighlight: shouldHighlight,\n href: this.props.href!,\n });\n\n return (\n <g\n key={index}\n className={this._classNames.opacityChangeOnHover}\n ref={(e: SVGGElement) => {\n this._refCallback(e, legend.title);\n }}\n data-is-focusable={!this.props.hideTooltip}\n onFocus={this._onBarFocus.bind(this, pointData, color, point)}\n onBlur={this._onBarLeave}\n aria-label={this._getAriaLabel(point)}\n role=\"img\"\n onMouseOver={this._onBarHover.bind(this, pointData, color, point)}\n onMouseMove={this._onBarHover.bind(this, pointData, color, point)}\n onMouseLeave={this._onBarLeave}\n pointerEvents=\"all\"\n onClick={this.props.href ? this._redirectToUrl.bind(this, this.props.href!) : point.onClick}\n >\n <rect key={index} x={startingPoint[index] + '%'} y={0} width={value + '%'} height={barHeight} fill={color} />\n </g>\n );\n });\n\n // add benchmark legends\n this._addLegend(legendDataItems, benchmarkData);\n this._addLegend(legendDataItems, targetData);\n const legends = (\n <Legends\n legends={legendDataItems}\n enabledWrapLines={this.props.enabledLegendsWrapLines}\n overflowProps={this.props.legendsOverflowProps}\n focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n overflowText={this.props.legendsOverflowText}\n {...this.props.legendProps}\n />\n );\n return [\n total === 0\n ? [\n this._generateEmptyBar(\n barHeight,\n this.props.barBackgroundColor ? this.props.barBackgroundColor : palette.neutralLight,\n ),\n ]\n : bars,\n legends,\n ];\n }\n\n private _onBarFocus(pointData: number, color: string, point: IChartDataPoint): void {\n this._refArray.forEach((obj: IRefArrayData) => {\n if (obj.index === 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 _addLegend(legendDataItems: ILegend[], data?: IChartDataPoint): void {\n if (data) {\n const legend: ILegend = {\n title: data.legend!,\n color: data.color!,\n shape: 'triangle',\n };\n legendDataItems.push(legend);\n }\n }\n\n private _generateEmptyBar(barHeight: number, color: string): JSX.Element {\n return (\n <g key={0} className={this._classNames.opacityChangeOnHover}>\n <rect key={0} x={'0%'} y={0} width={'100%'} height={barHeight} fill={color} />\n </g>\n );\n }\n\n private _refCallback(element: SVGGElement, legendTitle: string): void {\n this._refArray.push({ index: legendTitle, refElement: element });\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 _onHover(legendTitle: string): void {\n this.setState({\n activeLegend: legendTitle,\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 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"]}

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

@@ -4,7 +4,7 @@ define(["require", "exports", "tslib", "@fluentui/react/lib/Styling"], function
     exports.getStyles = void 0;
     var getStyles = function (props) {
         var _a, _b;
-        var className = props.className, width = props.width, barHeight = props.barHeight, shouldHighlight = props.shouldHighlight, theme = props.theme, href = props.href, benchmarkColor = props.benchmarkColor, benchmarkRatio = props.benchmarkRatio, targetColor = props.targetColor, targetRatio = props.targetRatio;
+        var className = props.className, width = props.width, barHeight = props.barHeight, shouldHighlight = props.shouldHighlight, theme = props.theme, href = props.href, benchmarkColor = props.benchmarkColor, benchmarkRatio = props.benchmarkRatio, targetColor = props.targetColor, targetRatio = props.targetRatio, showTriangle = props.showTriangle;
         return {
             root: [
                 theme.fonts.medium,
@@ -18,16 +18,18 @@ define(["require", "exports", "tslib", "@fluentui/react/lib/Styling"], function
             ],
             chart: {
                 width: '100%',
-                height: barHeight ? barHeight : 16,
-                marginBottom: '12px',
+                height: barHeight ? barHeight : 12,
+                display: 'block',
+                marginBottom: showTriangle ? '16px' : '10px',
             },
-            chartTitle: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.small), { display: 'flex', justifyContent: 'space-between', marginBottom: '3px' }),
+            chartTitle: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.small), { display: 'flex', justifyContent: 'space-between' }),
             chartTitleLeft: {
-                fontWeight: Styling_1.FontWeights.bold,
                 textOverflow: 'ellipsis',
                 overflow: 'hidden',
                 whiteSpace: 'nowrap',
                 display: 'block',
+                color: '#171717',
+                marginBottom: '5px',
             },
             legendContainer: {
                 margin: '4px 0px 0px 4px',
@@ -45,34 +47,35 @@ define(["require", "exports", "tslib", "@fluentui/react/lib/Styling"], function
                 },
             },
             ratioNumerator: {
-                fontSize: Styling_1.FontSizes.small,
+                fontSize: Styling_1.FontSizes.medium,
                 fontWeight: Styling_1.FontWeights.semibold,
-                color: theme.palette.black,
+                color: theme.palette.neutralPrimary,
             },
             ratioDenominator: {
-                fontSize: Styling_1.FontSizes.small,
-                color: theme.palette.black,
-                opacity: '0.6',
+                fontSize: Styling_1.FontSizes.medium,
+                color: theme.palette.neutralPrimary,
             },
             benchmarkContainer: {
                 position: 'relative',
-                height: '12px',
+                height: '7px',
+                marginTop: '-3px',
+                marginBottom: '-1px',
             },
             benchmark: {
                 position: 'absolute',
-                left: 'calc(' + benchmarkRatio + '% - 4.5px)',
+                left: 'calc(' + benchmarkRatio + '% - 4px)',
                 width: '0',
                 height: '0',
-                borderLeft: '4.5px solid transparent',
-                borderRight: '4.5px solid transparent',
-                borderTop: '7.8px solid',
+                borderLeft: '4px solid transparent',
+                borderRight: '4px solid transparent',
+                borderTop: '7px solid',
                 borderTopColor: benchmarkColor,
                 marginBottom: '4px',
                 selectors: (_a = {},
                     _a[Styling_1.HighContrastSelector] = {
                         border: '0px',
-                        height: '7.8px',
-                        width: '7.8px',
+                        height: '7px',
+                        width: '7px',
                         clipPath: 'polygon(50% 100%, 0 0, 100% 0)',
                         backgroundImage: "linear-gradient(to right, " + benchmarkColor + ", " + benchmarkColor + ")",
                     },
@@ -80,19 +83,19 @@ define(["require", "exports", "tslib", "@fluentui/react/lib/Styling"], function
             },
             target: {
                 position: 'absolute',
-                left: 'calc(' + targetRatio + '% - 4.5px)',
+                left: 'calc(' + targetRatio + '% - 4px)',
                 width: '0',
                 height: '0',
-                borderLeft: '4.5px solid transparent',
-                borderRight: '4.5px solid transparent',
-                borderTop: '7.8px solid',
+                borderLeft: '4px solid transparent',
+                borderRight: '4px solid transparent',
+                borderTop: '7px solid',
                 borderTopColor: targetColor,
                 marginBottom: '4px',
                 selectors: (_b = {},
                     _b[Styling_1.HighContrastSelector] = {
                         border: '0px',
-                        height: '7.8px',
-                        width: '7.8px',
+                        height: '7px',
+                        width: '7px',
                         clipPath: 'polygon(50% 100%, 0 0, 100% 0)',
                         backgroundImage: "linear-gradient(to right, " + targetColor + ", " + targetColor + ")",
                     },

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,~~GAUP~~,KAAK,~~UAVE~~,EACT,KAAK,~~GASH~~,KAAK,~~MATF~~,EACL,SAAS,~~GAQP~~,KAAK,~~UARE~~,EACT,eAAe,~~GAOb~~,KAAK,~~gBAPQ~~,EACf,KAAK,~~GAMH~~,KAAK,~~MANF~~,EACL,IAAI,~~GAKF~~,KAAK,~~KALH~~,EACJ,cAAc,~~GAIZ~~,KAAK,~~eAJO~~,EACd,cAAc,~~GAGZ~~,KAAK,~~eAHO~~,EACd,WAAW,GAET,KAAK,YAFI,EACX,~~WAAW~~,~~GACT~~,KAAK,~~YADI~~,~~CACH~~;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,YAAY,EAAE,MAAM;~~aACrB~~;YACD,UAAU,wCACL,KAAK,CAAC,KAAK,CAAC,KAAK,KACpB,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,eAAe,~~EAC/B,YAAY,EAAE,KAAK,GACpB~~;YACD,cAAc,EAAE;gBACd,~~UAAU,EAAE,qBAAW,CAAC,IAAI;gBAC5B,~~YAAY,EAAE,UAAU;gBACxB,QAAQ,EAAE,QAAQ;gBAClB,UAAU,EAAE,QAAQ;gBACpB,OAAO,EAAE,OAAO;~~aACjB~~;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,~~KAAK~~;~~gBACzB~~,UAAU,EAAE,qBAAW,CAAC,QAAQ;gBAChC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,~~KAAK~~;~~aAC3B~~;YACD,gBAAgB,EAAE;gBAChB,QAAQ,EAAE,mBAAS,CAAC,~~KAAK~~;~~gBACzB~~,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,~~KAAK~~;~~gBAC1B,OAAO,EAAE,KAAK~~;~~aACf;~~YACD,kBAAkB,EAAE;gBAClB,QAAQ,EAAE,UAAU;gBACpB,MAAM,EAAE,MAAM;~~aACf~~;YACD,SAAS,EAAE;gBACT,QAAQ,EAAE,UAAU;gBACpB,IAAI,EAAE,OAAO,GAAG,cAAc,GAAG,~~YAAY~~;~~gBAC7C~~,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,GAAG;gBACX,UAAU,EAAE,~~yBAAyB~~;~~gBACrC~~,WAAW,EAAE,~~yBAAyB~~;~~gBACtC~~,SAAS,EAAE,~~aAAa~~;~~gBACxB~~,cAAc,EAAE,cAAc;gBAC9B,YAAY,EAAE,KAAK;gBACnB,SAAS;oBACP,GAAC,8BAAoB,IAAG;wBACtB,MAAM,EAAE,KAAK;wBACb,MAAM,EAAE,~~OAAO~~;~~wBACf~~,KAAK,EAAE,~~OAAO~~;~~wBACd~~,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,~~YAAY~~;~~gBAC1C~~,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,GAAG;gBACX,UAAU,EAAE,~~yBAAyB~~;~~gBACrC~~,WAAW,EAAE,~~yBAAyB~~;~~gBACtC~~,SAAS,EAAE,~~aAAa~~;~~gBACxB~~,cAAc,EAAE,WAAW;gBAC3B,YAAY,EAAE,KAAK;gBACnB,SAAS;oBACP,GAAC,8BAAoB,IAAG;wBACtB,MAAM,EAAE,KAAK;wBACb,MAAM,EAAE,~~OAAO~~;~~wBACf~~,KAAK,EAAE,~~OAAO~~;~~wBACd~~,QAAQ,EAAE,gCAAgC;wBAC1C,eAAe,EAAE,+BAA6B,WAAW,UAAK,WAAW,MAAG;qBACnE;uBACZ;aACF;SACF,CAAC;IACJ,CAAC,CAAC;~~IAhHW~~,QAAA,SAAS,~~aAgHpB~~","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 } = 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 : 16,\n marginBottom: '~~12px~~',\n },\n chartTitle: {\n ...theme.fonts.small,\n display: 'flex',\n justifyContent: 'space-between',\n ~~marginBottom: '3px',\n~~ },\n chartTitleLeft: {\n ~~fontWeight: FontWeights.bold,\n~~ textOverflow: 'ellipsis',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n display: 'block',\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.~~small~~,\n fontWeight: FontWeights.semibold,\n color: theme.palette.~~black~~,\n },\n ratioDenominator: {\n fontSize: FontSizes.~~small~~,\n color: theme.palette.~~black~~,\n ~~opacity: '0.6',\n~~ },\n benchmarkContainer: {\n position: 'relative',\n height: '~~12px~~',\n },\n benchmark: {\n position: 'absolute',\n left: 'calc(' + benchmarkRatio + '% - ~~4.5px~~)',\n width: '0',\n height: '0',\n borderLeft: '~~4.5px~~ solid transparent',\n borderRight: '~~4.5px~~ solid transparent',\n borderTop: '~~7.8px~~ solid',\n borderTopColor: benchmarkColor,\n marginBottom: '4px',\n selectors: {\n [HighContrastSelector]: {\n border: '0px',\n height: '~~7.8px~~',\n width: '~~7.8px~~',\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 + '% - ~~4.5px~~)',\n width: '0',\n height: '0',\n borderLeft: '~~4.5px~~ solid transparent',\n borderRight: '~~4.5px~~ solid transparent',\n borderTop: '~~7.8px~~ solid',\n borderTopColor: targetColor,\n marginBottom: '4px',\n selectors: {\n [HighContrastSelector]: {\n border: '0px',\n height: '~~7.8px~~',\n width: '~~7.8px~~',\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: '#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"]}

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

@@ -157,6 +157,10 @@ export interface IStackedBarChartStyleProps {
      * the ratio position for the target triangle
      */
     targetRatio?: number;
+    /**
+     * prop to check if benchmark data or target data is provided
+     */
+    showTriangle?: boolean;
 }
 export interface IStackedBarChartStyles {
     /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StackedBarChart.types.js","sourceRoot":"../src/","sources":["components/StackedBarChart/StackedBarChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme, IStyle } 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 IStackedBarChart {}\nimport { IChartProps, IChartDataPoint } from './index';\n\nexport interface IStackedBarChartProps {\n /*\n Data to render in the chart.\n /\n data?: IChartProps;\n\n /\n Benchmark Data to render in the chart.\n /\n benchmarkData?: IChartDataPoint;\n\n /\n Target Data to render in the chart.\n /\n targetData?: IChartDataPoint;\n\n /\n Width of the chart.\n /\n width?: number;\n\n /\n Height of each bar in the chart.\n /\n barHeight?: number;\n\n /\n Do not show the legend at the bottom of chart\n * when there are more than two datapoints\n \n @default false\n /\n hideLegend?: boolean;\n\n /\n Do not show number/ratio on top of bar\n \n @default false\n /\n hideNumberDisplay?: boolean;\n\n /\n Do not show tooltips in chart\n \n @default false\n /\n hideTooltip?: boolean;\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 Call to provide customized styling that will layer on top of the variant rules.\n /\n styles?: IStyleFunctionOrObject<IStackedBarChartStyleProps, IStackedBarChartStyles>;\n\n /\n Color setting of bar background color, this will show while all data points value is 0\n /\n barBackgroundColor?: string;\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, the fixed display pattern for less than 2 data points chart will be ignore\n /\n ignoreFixStyle?: boolean;\n\n /\n If this value is set to true the denominator will not be shown for the ratio above the chart\n /\n hideDenominator?: boolean;\n\n /\n Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n /\n enabledLegendsWrapLines?: boolean;\n\n /\n overflow props for the 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 IStackedBarChartStyleProps {\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 Height of bar in the chart.\n /\n barHeight?: number;\n\n /\n prop to show data of the chart with appropriate legend color\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 which specific section of the stacked bar chart is selected or hovered upon\n /\n isChartSelected?: boolean;\n\n /\n prop to check to decide cursor type\n /\n href?: string;\n\n /\n the color for the benchmark triangle\n /\n benchmarkColor?: string;\n\n /\n the ratio position for the benchmark triangle\n /\n benchmarkRatio?: number;\n\n /\n the color for the target triangle\n /\n targetColor?: string;\n\n /\n the ratio position for the target triangle\n /\n targetRatio?: number;\n}\n\nexport interface IStackedBarChartStyles {\n /\n Style for the root element.\n /\n root: IStyle;\n\n /\n Style for the chart.\n /\n chart: IStyle;\n\n /\n Style for the chart Title.\n /\n chartTitle: IStyle;\n\n /\n Style for left side text of the chart title\n /\n chartTitleLeft: IStyle;\n\n /\n Style for the legend container div\n /\n legendContainer: 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 for the benchmark container\n /\n benchmarkContainer: IStyle;\n\n /\n Style for the benchmark triangle\n /\n benchmark: IStyle;\n\n /\n Style for the target triangle\n */\n target: IStyle;\n}\n"]}
1	+ {"version":3,"file":"StackedBarChart.types.js","sourceRoot":"../src/","sources":["components/StackedBarChart/StackedBarChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme, IStyle } 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 IStackedBarChart {}\nimport { IChartProps, IChartDataPoint } from './index';\n\nexport interface IStackedBarChartProps {\n /*\n Data to render in the chart.\n /\n data?: IChartProps;\n\n /\n Benchmark Data to render in the chart.\n /\n benchmarkData?: IChartDataPoint;\n\n /\n Target Data to render in the chart.\n /\n targetData?: IChartDataPoint;\n\n /\n Width of the chart.\n /\n width?: number;\n\n /\n Height of each bar in the chart.\n /\n barHeight?: number;\n\n /\n Do not show the legend at the bottom of chart\n * when there are more than two datapoints\n \n @default false\n /\n hideLegend?: boolean;\n\n /\n Do not show number/ratio on top of bar\n \n @default false\n /\n hideNumberDisplay?: boolean;\n\n /\n Do not show tooltips in chart\n \n @default false\n /\n hideTooltip?: boolean;\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 Call to provide customized styling that will layer on top of the variant rules.\n /\n styles?: IStyleFunctionOrObject<IStackedBarChartStyleProps, IStackedBarChartStyles>;\n\n /\n Color setting of bar background color, this will show while all data points value is 0\n /\n barBackgroundColor?: string;\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, the fixed display pattern for less than 2 data points chart will be ignore\n /\n ignoreFixStyle?: boolean;\n\n /\n If this value is set to true the denominator will not be shown for the ratio above the chart\n /\n hideDenominator?: boolean;\n\n /\n Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n /\n enabledLegendsWrapLines?: boolean;\n\n /\n overflow props for the 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 IStackedBarChartStyleProps {\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 Height of bar in the chart.\n /\n barHeight?: number;\n\n /\n prop to show data of the chart with appropriate legend color\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 which specific section of the stacked bar chart is selected or hovered upon\n /\n isChartSelected?: boolean;\n\n /\n prop to check to decide cursor type\n /\n href?: string;\n\n /\n the color for the benchmark triangle\n /\n benchmarkColor?: string;\n\n /\n the ratio position for the benchmark triangle\n /\n benchmarkRatio?: number;\n\n /\n the color for the target triangle\n /\n targetColor?: string;\n\n /\n the ratio position for the target triangle\n /\n targetRatio?: number;\n\n /\n prop to check if benchmark data or target data is provided\n /\n showTriangle?: boolean;\n}\n\nexport interface IStackedBarChartStyles {\n /\n Style for the root element.\n /\n root: IStyle;\n\n /\n Style for the chart.\n /\n chart: IStyle;\n\n /\n Style for the chart Title.\n /\n chartTitle: IStyle;\n\n /\n Style for left side text of the chart title\n /\n chartTitleLeft: IStyle;\n\n /\n Style for the legend container div\n /\n legendContainer: 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 for the benchmark container\n /\n benchmarkContainer: IStyle;\n\n /\n Style for the benchmark triangle\n /\n benchmark: IStyle;\n\n /\n Style for the target triangle\n */\n target: IStyle;\n}\n"]}

package/lib-commonjs/components/HorizontalBarChart/HorizontalBarChart.base.js CHANGED Viewed

@@ -26,7 +26,7 @@ var HorizontalBarChartBase = /** @class */ (function (_super) {
             }
         };
         _this._adjustProps = function () {
-            _this._barHeight = _this.props.barHeight || 8;
+            _this._barHeight = _this.props.barHeight || 12;
             _this._classNames = getClassNames(_this.props.styles, {
                 theme: _this.props.theme,
                 width: _this.props.width,
@@ -87,13 +87,18 @@ var HorizontalBarChartBase = /** @class */ (function (_super) {
                         x: points.chartData[0].horizontalBarChartdata.y - datapoint,
                         y: points.chartData[0].horizontalBarChartdata.y,
                     },
-                    color: palette.neutralTertiaryAlt,
+                    color: palette.neutralLight,
                 };
                 var chartDataText = _this._getChartDataText(points);
                 var bars = _this._createBars(points, palette);
                 var keyVal = _this._uniqLineText + '_' + index;
-                return (React.createElement("div", { key: index, className: _this._classNames.items },
-                    React.createElement("div", { className: _this._classNames.items },
+                var classNames = getClassNames(_this.props.styles, {
+                    theme: _this.props.theme,
+                    width: _this.props.width,
+                    showTriangle: !!points.chartData[0].data,
+                });
+                return (React.createElement("div", { key: index },
+                    React.createElement("div", { className: classNames.items },
                         React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal },
                             React.createElement("div", { className: _this._classNames.chartTitle },
                                 points.chartTitle && (React.createElement(react_1.TooltipHost, { overflowMode: react_1.TooltipOverflowMode.Self, hostClassName: _this._classNames.chartTitleLeft, content: points.chartTitle },
@@ -152,7 +157,7 @@ var HorizontalBarChartBase = /** @class */ (function (_super) {
             case 'fraction':
                 return (React.createElement("div", tslib_1.__assign({}, accessibilityData),
                     React.createElement("span", { className: this._classNames.chartTitleRight }, index_1.convertToLocaleString(x, culture)),
-                    React.createElement("span", { className: this._classNames.chartDataTextDenominator }, '/' + index_1.convertToLocaleString(y, culture))));
+                    React.createElement("span", { className: this._classNames.chartDataTextDenominator }, ' / ' + index_1.convertToLocaleString(y, culture))));
             case 'percentage':
                 var dataRatioPercentage = index_1.convertToLocaleString(Math.round((x / y) * 100), culture) + "%";
                 return (React.createElement("div", tslib_1.__assign({ className: this._classNames.chartTitleRight }, accessibilityData), dataRatioPercentage));
@@ -163,10 +168,10 @@ var HorizontalBarChartBase = /** @class */ (function (_super) {
         var benchmarkData = data.chartData[0].data;
         var benchmarkRatio = Math.round(((benchmarkData ? benchmarkData : 0) / totalData) * 100);
         var benchmarkStyles = {
-            marginLeft: 'calc(' + benchmarkRatio + '% - 4px)',
-            marginRight: 'calc(' + (100 - benchmarkRatio) + '% - 4px)',
+            left: 'calc(' + benchmarkRatio + '% - 4px)',
         };
-        return React.createElement("div", { className: this._classNames.triangle, style: benchmarkStyles });
+        return (React.createElement("div", { className: this._classNames.benchmarkContainer },
+            React.createElement("div", { className: this._classNames.triangle, style: benchmarkStyles })));
     };
     HorizontalBarChartBase.prototype._createBars = function (data, palette) {
         var _this = this;

package/lib-commonjs/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 } 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} 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 { TooltipHost, TooltipOverflowMode } from '@fluentui/react';\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\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 }\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 (\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.neutralTertiaryAlt,\n };\n\n const chartDataText = this._getChartDataText(points!);\n const bars = this._createBars(points!, palette);\n const keyVal = this._uniqLineText + '_' + index;\n\n return (\n <div key={index} className={this._classNames.items}>\n <div className={this._classNames.items}>\n <FocusZone direction={FocusZoneDirection.horizontal}>\n <div className={this._classNames.chartTitle}>\n {points!.chartTitle && (\n <TooltipHost\n overflowMode={TooltipOverflowMode.Self}\n hostClassName={this._classNames.chartTitleLeft}\n content={points!.chartTitle}\n >\n <span {...getAccessibleDataObject(points!.chartTitleAccessibilityData)}>\n {points!.chartTitle}\n </span>\n </TooltipHost>\n )}\n {chartDataText}\n </div>\n </FocusZone>\n {points!.chartData![0].data && this._createBenchmark(points!)}\n <FocusZone direction={FocusZoneDirection.horizontal}>\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 className={this._classNames.barWrapper}\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 }\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 \|\| 8;\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 });\n };\n\n private _getChartDataText = (data: IChartProps) => {\n return this.props.barChartCustomData ? (\n <div data-is-focusable={true} role=\"text\">\n {this.props.barChartCustomData(data)}\n </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!);\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}>{'/' + convertToLocaleString(y, culture)}</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 marginLeft: 'calc(' + benchmarkRatio + '% - 4px)',\n marginRight: 'calc(' + (100 - benchmarkRatio) + '% - 4px)',\n };\n\n return <div className={this._classNames.triangle} style={benchmarkStyles} />;\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 return (\n <rect\n key={index}\n x={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 />\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"]}
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 } 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} 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 { TooltipHost, TooltipOverflowMode } from '@fluentui/react';\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\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 }\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 (\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 const chartDataText = 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 });\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 <TooltipHost\n overflowMode={TooltipOverflowMode.Self}\n hostClassName={this._classNames.chartTitleLeft}\n content={points!.chartTitle}\n >\n <span {...getAccessibleDataObject(points!.chartTitleAccessibilityData)}>\n {points!.chartTitle}\n </span>\n </TooltipHost>\n )}\n {chartDataText}\n </div>\n </FocusZone>\n {points!.chartData![0].data && this._createBenchmark(points!)}\n <FocusZone direction={FocusZoneDirection.horizontal}>\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 className={this._classNames.barWrapper}\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 }\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 });\n };\n\n private _getChartDataText = (data: IChartProps) => {\n return this.props.barChartCustomData ? (\n <div data-is-focusable={true} role=\"text\">\n {this.props.barChartCustomData(data)}\n </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!);\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 return (\n <rect\n key={index}\n x={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 />\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"]}

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

@@ -4,7 +4,7 @@ exports.getHorizontalBarChartStyles = void 0;
 var tslib_1 = require("tslib");
 var Styling_1 = require("@fluentui/react/lib/Styling");
 var getHorizontalBarChartStyles = function (props) {
-    var className = props.className, theme = props.theme, width = props.width;
+    var className = props.className, theme = props.theme, width = props.width, barHeight = props.barHeight, showTriangle = props.showTriangle;
     var palette = theme.palette;
     return {
         root: [
@@ -16,43 +16,50 @@ var getHorizontalBarChartStyles = function (props) {
             className,
         ],
         items: {
-            height: '32px',
-            marginTop: '5px',
-            position: 'relative',
+            marginBottom: showTriangle ? '16px' : '10px',
         },
         chart: {
             width: '100%',
-            height: '8px',
-            marginBottom: '11px',
+            height: barHeight ? barHeight : 12,
+            display: 'block',
         },
         barWrapper: {
             stroke: theme.palette.white,
             strokeWidth: 2,
         },
-        chartTitle: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.small), { display: 'flex', justifyContent: 'space-between', marginBottom: '3px' }),
+        chartTitle: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.small), { display: 'flex', justifyContent: 'space-between' }),
         chartTitleLeft: {
-            fontWeight: Styling_1.FontWeights.bold,
             textOverflow: 'ellipsis',
             overflow: 'hidden',
             whiteSpace: 'nowrap',
             display: 'block',
+            color: '#171717',
+            marginBottom: '5px',
         },
         chartTitleRight: {
-            fontWeight: Styling_1.FontWeights.bold,
+            fontSize: Styling_1.FontSizes.medium,
+            fontWeight: Styling_1.FontWeights.semibold,
+            color: theme.palette.neutralPrimary,
         },
         chartDataTextDenominator: {
-            fontWeight: Styling_1.FontWeights.semibold,
+            fontSize: Styling_1.FontSizes.medium,
+            color: theme.palette.neutralPrimary,
+        },
+        benchmarkContainer: {
+            position: 'relative',
+            height: '7px',
+            marginTop: '-3px',
+            marginBottom: '-1px',
         },
         triangle: {
             width: '0',
             height: '0',
             borderLeft: '4px solid transparent',
             borderRight: '4px solid transparent',
-            borderTop: '8px solid',
+            borderTop: '7px solid',
             borderTopColor: palette.blue,
             marginBottom: '4px',
             position: 'absolute',
-            top: '12px',
         },
     };
 };

package/lib-commonjs/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":";;;;AAAA,~~uDAA0D~~;~~AAGnD~~,IAAM,2BAA2B,GAAG,UAAC,KAAoC;IACtE,IAAA,SAAS,~~GAAmB~~,KAAK,~~UAAxB~~,EAAE,KAAK,~~GAAY~~,KAAK,~~MAAjB~~,EAAE,KAAK,GAAK,KAAK,~~MAAV~~,CAAW;~~IAClC~~,IAAA,OAAO,GAAK,KAAM,QAAX,CAAY;IAE3B,OAAO;QACL,IAAI,EAAE;YACJ;gBACE,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;aAC9B;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,~~MAAM~~,EAAE,~~MAAM;YACd~~,~~SAAS~~,~~EAAE~~,~~KAAK;YAChB~~,~~QAAQ~~,~~EAAE~~,~~UAAU~~;~~SACrB~~;QACD,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,~~KAAK~~;~~YACb~~,~~YAAY~~,EAAE,~~MAAM~~;~~SACrB~~;QACD,UAAU,EAAE;YACV,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YAC3B,WAAW,EAAE,CAAC;SACf;QACD,UAAU,wCACL,KAAK,CAAC,KAAK,CAAC,KAAK,KACpB,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,eAAe,~~EAC/B,YAAY,EAAE,KAAK,GACpB~~;QACD,cAAc,EAAE;YACd,~~UAAU,EAAE,qBAAW,CAAC,IAAI;YAC5B,~~YAAY,EAAE,UAAU;YACxB,QAAQ,EAAE,QAAQ;YAClB,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,OAAO;~~SACjB~~;QACD,eAAe,EAAE;YACf,UAAU,EAAE,qBAAW,CAAC,~~IAAI~~;~~SAC7B~~;QACD,wBAAwB,EAAE;YACxB,~~UAAU~~,EAAE,~~qBAAW~~,CAAC,QAAQ;~~SACjC~~;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;YACX,UAAU,EAAE,uBAAuB;YACnC,WAAW,EAAE,uBAAuB;YACpC,SAAS,EAAE,WAAW;YACtB,cAAc,EAAE,OAAO,CAAC,IAAI;YAC5B,YAAY,EAAE,KAAK;YACnB,QAAQ,EAAE,UAAU;~~YACpB,GAAG,EAAE,MAAM~~;~~SACZ;~~KACF,CAAC;AACJ,CAAC,CAAC;~~AA1DW~~,QAAA,2BAA2B,+~~BA0DtC~~","sourcesContent":["import { FontWeights } from '@fluentui/react/lib/Styling';\nimport { IHorizontalBarChartStyleProps, IHorizontalBarChartStyles } from './HorizontalBarChart.types';\n\nexport const getHorizontalBarChartStyles = (props: IHorizontalBarChartStyleProps): IHorizontalBarChartStyles => {\n const { className, theme, width } = 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 ~~height~~: '~~32px~~'~~,\n marginTop:~~ ~~'5px',\n position~~: '~~relative~~',\n },\n chart: {\n width: '100%',\n height: ~~'8px'~~,\n ~~marginBottom~~: '~~11px~~',\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 ~~marginBottom: '3px',\n~~ },\n chartTitleLeft: {\n ~~fontWeight: FontWeights.bold,\n~~ textOverflow: 'ellipsis',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n display: 'block',\n },\n chartTitleRight: {\n fontWeight: FontWeights.~~bold~~,\n },\n chartDataTextDenominator: {\n ~~fontWeight~~: ~~FontWeights~~.~~semibold~~,\n },\n triangle: {\n width: '0',\n height: '0',\n borderLeft: '4px solid transparent',\n borderRight: '4px solid transparent',\n borderTop: '~~8px~~ solid',\n borderTopColor: palette.blue,\n marginBottom: '4px',\n position: 'absolute',\n ~~top: '12px',\n~~ },\n };\n};\n"]}
1	+ {"version":3,"file":"HorizontalBarChart.styles.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/HorizontalBarChart.styles.ts"],"names":[],"mappings":";;;;AAAA,uDAAqE;AAG9D,IAAM,2BAA2B,GAAG,UAAC,KAAoC;IACtE,IAAA,SAAS,GAA4C,KAAK,UAAjD,EAAE,KAAK,GAAqC,KAAK,MAA1C,EAAE,KAAK,GAA8B,KAAK,MAAnC,EAAE,SAAS,GAAmB,KAAK,UAAxB,EAAE,YAAY,GAAK,KAAK,aAAV,CAAW;IAC3D,IAAA,OAAO,GAAK,KAAM,QAAX,CAAY;IAE3B,OAAO;QACL,IAAI,EAAE;YACJ;gBACE,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;aAC9B;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;SAC7C;QACD,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;YAClC,OAAO,EAAE,OAAO;SACjB;QACD,UAAU,EAAE;YACV,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YAC3B,WAAW,EAAE,CAAC;SACf;QACD,UAAU,wCACL,KAAK,CAAC,KAAK,CAAC,KAAK,KACpB,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,eAAe,GAChC;QACD,cAAc,EAAE;YACd,YAAY,EAAE,UAAU;YACxB,QAAQ,EAAE,QAAQ;YAClB,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE,SAAS;YAChB,YAAY,EAAE,KAAK;SACpB;QACD,eAAe,EAAE;YACf,QAAQ,EAAE,mBAAS,CAAC,MAAM;YAC1B,UAAU,EAAE,qBAAW,CAAC,QAAQ;YAChC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SACpC;QACD,wBAAwB,EAAE;YACxB,QAAQ,EAAE,mBAAS,CAAC,MAAM;YAC1B,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SACpC;QACD,kBAAkB,EAAE;YAClB,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,KAAK;YACb,SAAS,EAAE,MAAM;YACjB,YAAY,EAAE,MAAM;SACrB;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;YACX,UAAU,EAAE,uBAAuB;YACnC,WAAW,EAAE,uBAAuB;YACpC,SAAS,EAAE,WAAW;YACtB,cAAc,EAAE,OAAO,CAAC,IAAI;YAC5B,YAAY,EAAE,KAAK;YACnB,QAAQ,EAAE,UAAU;SACrB;KACF,CAAC;AACJ,CAAC,CAAC;AAhEW,QAAA,2BAA2B,+BAgEtC","sourcesContent":["import { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';\nimport { IHorizontalBarChartStyleProps, IHorizontalBarChartStyles } from './HorizontalBarChart.types';\n\nexport const getHorizontalBarChartStyles = (props: IHorizontalBarChartStyleProps): IHorizontalBarChartStyles => {\n const { className, theme, width, barHeight, showTriangle } = 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 ? '16px' : '10px',\n },\n chart: {\n width: '100%',\n height: barHeight ? barHeight : 12,\n display: 'block',\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: '#171717',\n marginBottom: '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 };\n};\n"]}