@fluentui/react-charting 5.14.24 → 5.14.26

package/lib/components/StackedBarChart/MultiStackedBarChart.types.js.map

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

package/lib/components/StackedBarChart/StackedBarChart.base.js

@@ -66,7 +66,7 @@ var StackedBarChartBase = /** @class */ (function (_super) {
         this._adjustProps();
         var _a = this.props, data = _a.data, benchmarkData = _a.benchmarkData, targetData = _a.targetData, hideNumberDisplay = _a.hideNumberDisplay, ignoreFixStyle = _a.ignoreFixStyle, culture = _a.culture;
         var palette = this.props.theme.palette;
-        var barHeight = ignoreFixStyle || data.chartData.length > 2 ? this.props.barHeight : 8;
+        var barHeight = ignoreFixStyle || data.chartData.length > 2 ? this.props.barHeight : 12;
         if (benchmarkData) {
             // benchmark color is used to render color for benchmark triangle and benchmark legend
             benchmarkData.color = benchmarkData.color || palette.neutralTertiary;
@@ -95,6 +95,7 @@ var StackedBarChartBase = /** @class */ (function (_super) {
             benchmarkRatio: benchmarkRatio,
             targetColor: targetData ? targetData.color : '',
             targetRatio: targetRatio,
+            showTriangle: !!(benchmarkData || targetData),
         });
         var getChartData = function () { return convertToLocaleString(data.chartData[0].data ? data.chartData[0].data : 0, culture); };
         return (React.createElement("div", { className: this._classNames.root, onMouseLeave: this._handleChartMouseLeave },
@@ -104,11 +105,8 @@ var StackedBarChartBase = /** @class */ (function (_super) {
                         React.createElement("span", __assign({}, getAccessibleDataObject(data.chartTitleAccessibilityData)), data.chartTitle))),
                     showRatio && (React.createElement("div", __assign({}, getAccessibleDataObject(data.chartDataAccessibilityData)),
                         React.createElement("span", { className: this._classNames.ratioNumerator }, getChartData()),
-                        !this.props.hideDenominator && (React.createElement("span", null,
-                            "/",
-                            React.createElement("span", { className: this._classNames.ratioDenominator }, convertToLocaleString(total, culture)))))),
-                    showNumber && (React.createElement("div", __assign({}, getAccessibleDataObject(data.chartDataAccessibilityData)),
-                        React.createElement("strong", null, getChartData())))),
+                        !this.props.hideDenominator && (React.createElement("span", { className: this._classNames.ratioDenominator }, ' / ' + convertToLocaleString(total, culture))))),
+                    showNumber && (React.createElement("div", __assign({ className: this._classNames.ratioNumerator }, getAccessibleDataObject(data.chartDataAccessibilityData)), getChartData()))),
                 (benchmarkData || targetData) && (React.createElement("div", { className: this._classNames.benchmarkContainer },
                     benchmarkData && React.createElement("div", { className: this._classNames.benchmark, role: "text" }),
                     targetData && React.createElement("div", { className: this._classNames.target, role: "text" })))),
@@ -213,7 +211,7 @@ var StackedBarChartBase = /** @class */ (function (_super) {
         return [
             total === 0
                 ? [
-                    this._generateEmptyBar(barHeight, this.props.barBackgroundColor ? this.props.barBackgroundColor : palette.neutralTertiary),
+                    this._generateEmptyBar(barHeight, this.props.barBackgroundColor ? this.props.barBackgroundColor : palette.neutralLight),
                 ]
                 : bars,
             legends,
@@ -302,7 +300,7 @@ var StackedBarChartBase = /** @class */ (function (_super) {
         href ? (window.location.href = href) : '';
     };
     StackedBarChartBase.defaultProps = {
-        barHeight: 16,
+        barHeight: 12,
         hideNumberDisplay: false,
         hideLegend: false,
         ignoreFixStyle: false,

package/lib/components/StackedBarChart/StackedBarChart.base.js.map

@@ -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"]}
+{"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/components/StackedBarChart/StackedBarChart.styles.js

@@ -2,7 +2,7 @@ import { __assign } from "tslib";
 import { FontSizes, FontWeights, HighContrastSelector } from '@fluentui/react/lib/Styling';
 export 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,
@@ -16,16 +16,18 @@ export var getStyles = function (props) {
         ],
         chart: {
             width: '100%',
-            height: barHeight ? barHeight : 16,
-            marginBottom: '12px',
+            height: barHeight ? barHeight : 12,
+            display: 'block',
+            marginBottom: showTriangle ? '16px' : '10px',
         },
-        chartTitle: __assign(__assign({}, theme.fonts.small), { display: 'flex', justifyContent: 'space-between', marginBottom: '3px' }),
+        chartTitle: __assign(__assign({}, theme.fonts.small), { display: 'flex', justifyContent: 'space-between' }),
         chartTitleLeft: {
-            fontWeight: FontWeights.bold,
             textOverflow: 'ellipsis',
             overflow: 'hidden',
             whiteSpace: 'nowrap',
             display: 'block',
+            color: '#171717',
+            marginBottom: '5px',
         },
         legendContainer: {
             margin: '4px 0px 0px 4px',
@@ -43,34 +45,35 @@ export var getStyles = function (props) {
             },
         },
         ratioNumerator: {
-            fontSize: FontSizes.small,
+            fontSize: FontSizes.medium,
             fontWeight: FontWeights.semibold,
-            color: theme.palette.black,
+            color: theme.palette.neutralPrimary,
         },
         ratioDenominator: {
-            fontSize: FontSizes.small,
-            color: theme.palette.black,
-            opacity: '0.6',
+            fontSize: 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[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 + ")",
                 },
@@ -78,19 +81,19 @@ export var getStyles = function (props) {
         },
         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[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/components/StackedBarChart/StackedBarChart.styles.js.map

@@ -1 +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  } = 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"]}
+{"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/components/StackedBarChart/StackedBarChart.types.d.ts

@@ -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/components/StackedBarChart/StackedBarChart.types.js.map

@@ -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"]}
+{"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-amd/components/HorizontalBarChart/HorizontalBarChart.base.js

@@ -20,7 +20,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 }
             };
             _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,
@@ -81,13 +81,18 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                             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 },
@@ -146,7 +151,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 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));
@@ -157,10 +162,10 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             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-amd/components/HorizontalBarChart/HorizontalBarChart.base.js.map

@@ -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"]}
+{"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"]}