@fluentui/react-charts 0.0.0-nightly-20250930-0405.1 → 0.0.0-nightly-20251002-0406.1

package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 import { typographyStyles } from '@fluentui/react-theme';
 export const heatmapChartClassNames = {

package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","typographyStyles","heatmapChartClassNames","root","text","calloutContentRoot","xAxis","yAxis","legendContainer","hover","descriptionMessage","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Bkecrkj","B2u0y6b","d","useHeatMapChartStyles","props","baseStyles"],"sources":["useHeatMapChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const heatmapChartClassNames = {\n    root: 'fui-hmc__root',\n    text: 'fui-hmc__text',\n    calloutContentRoot: 'fui-hmc__calloutContentRoot',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    tooltip: '',\n    axisTitle: '',\n    chartTitle: '',\n    opacityChangeOnHover: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\nconst useStyles = makeStyles({\n    root: {},\n    text: {\n        ...typographyStyles.body1Strong,\n        pointerEvents: 'none'\n    },\n    calloutContentRoot: {\n        maxWidth: '238px'\n    }\n});\nexport const useHeatMapChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(heatmapChartClassNames.root, baseStyles.root /*, props.styles?.root*/ ),\n        text: mergeClasses(heatmapChartClassNames.text, baseStyles.text /*, props.styles?.text*/ ),\n        calloutContentRoot: mergeClasses(heatmapChartClassNames.calloutContentRoot, baseStyles.calloutContentRoot /*, props.styles?.calloutContentRoot*/ )\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,eAAe;EACrBC,IAAI,EAAE,eAAe;EACrBC,kBAAkB,EAAE,6BAA6B;EACjDC,KAAK,EAAE,EAAE;EACTC,KAAK,EAAE,EAAE;EACTC,eAAe,EAAE,EAAE;EACnBC,KAAK,EAAE,EAAE;EACTC,kBAAkB,EAAE,EAAE;EACtBC,OAAO,EAAE,EAAE;EACXC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,EAAE;EACdC,oBAAoB,EAAE,EAAE;EACxBC,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE,EAAE;EAChBC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE;AACpB,CAAC;AACD,MAAMC,SAAS,gBAAGrB,QAAA;EAAAI,IAAA;EAAAC,IAAA;IAAAiB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAApB,kBAAA;IAAAqB,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CASjB,CAAC;AACF,OAAO,MAAMC,qBAAqB,GAAIC,KAAK,IAAG;EAC1C,MAAMC,UAAU,GAAGV,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHjB,IAAI,EAAEH,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAE2B,UAAU,CAAC3B,IAAI,CAAC,wBAAyB,CAAC;IAC1FC,IAAI,EAAEJ,YAAY,CAACE,sBAAsB,CAACE,IAAI,EAAE0B,UAAU,CAAC1B,IAAI,CAAC,wBAAyB,CAAC;IAC1FC,kBAAkB,EAAEL,YAAY,CAACE,sBAAsB,CAACG,kBAAkB,EAAEyB,UAAU,CAACzB,kBAAkB,CAAC,sCAAuC;EACrJ,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","typographyStyles","heatmapChartClassNames","root","text","calloutContentRoot","xAxis","yAxis","legendContainer","hover","descriptionMessage","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Bkecrkj","B2u0y6b","d","useHeatMapChartStyles","props","baseStyles"],"sources":["useHeatMapChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const heatmapChartClassNames = {\n    root: 'fui-hmc__root',\n    text: 'fui-hmc__text',\n    calloutContentRoot: 'fui-hmc__calloutContentRoot',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    tooltip: '',\n    axisTitle: '',\n    chartTitle: '',\n    opacityChangeOnHover: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\nconst useStyles = makeStyles({\n    root: {},\n    text: {\n        ...typographyStyles.body1Strong,\n        pointerEvents: 'none'\n    },\n    calloutContentRoot: {\n        maxWidth: '238px'\n    }\n});\nexport const useHeatMapChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(heatmapChartClassNames.root, baseStyles.root /*, props.styles?.root*/ ),\n        text: mergeClasses(heatmapChartClassNames.text, baseStyles.text /*, props.styles?.text*/ ),\n        calloutContentRoot: mergeClasses(heatmapChartClassNames.calloutContentRoot, baseStyles.calloutContentRoot /*, props.styles?.calloutContentRoot*/ )\n    };\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,eAAe;EACrBC,IAAI,EAAE,eAAe;EACrBC,kBAAkB,EAAE,6BAA6B;EACjDC,KAAK,EAAE,EAAE;EACTC,KAAK,EAAE,EAAE;EACTC,eAAe,EAAE,EAAE;EACnBC,KAAK,EAAE,EAAE;EACTC,kBAAkB,EAAE,EAAE;EACtBC,OAAO,EAAE,EAAE;EACXC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,EAAE;EACdC,oBAAoB,EAAE,EAAE;EACxBC,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE,EAAE;EAChBC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE;AACpB,CAAC;AACD,MAAMC,SAAS,gBAAGrB,QAAA;EAAAI,IAAA;EAAAC,IAAA;IAAAiB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAApB,kBAAA;IAAAqB,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CASjB,CAAC;AACF,OAAO,MAAMC,qBAAqB,GAAIC,KAAK,IAAG;EAC1C,MAAMC,UAAU,GAAGV,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHjB,IAAI,EAAEH,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAE2B,UAAU,CAAC3B,IAAI,CAAC,wBAAyB,CAAC;IAC1FC,IAAI,EAAEJ,YAAY,CAACE,sBAAsB,CAACE,IAAI,EAAE0B,UAAU,CAAC1B,IAAI,CAAC,wBAAyB,CAAC;IAC1FC,kBAAkB,EAAEL,YAAY,CAACE,sBAAsB,CAACG,kBAAkB,EAAEyB,UAAU,CAACzB,kBAAkB,CAAC,sCAAuC;EACrJ,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { typographyStyles } from '@fluentui/react-theme';
 export const heatmapChartClassNames = {

package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/HeatMapChart/useHeatMapChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { HeatMapChartProps, HeatMapChartStyles } from './HeatMapChart.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const heatmapChartClassNames: SlotClassNames<HeatMapChartStyles> = {\n  root: 'fui-hmc__root',\n  text: 'fui-hmc__text',\n  calloutContentRoot: 'fui-hmc__calloutContentRoot',\n  xAxis: '',\n  yAxis: '',\n  legendContainer: '',\n  hover: '',\n  descriptionMessage: '',\n  tooltip: '',\n  axisTitle: '',\n  chartTitle: '',\n  opacityChangeOnHover: '',\n  shapeStyles: '',\n  chartWrapper: '',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\nconst useStyles = makeStyles({\n  root: {},\n  text: {\n    ...typographyStyles.body1Strong,\n    pointerEvents: 'none',\n  },\n  calloutContentRoot: {\n    maxWidth: '238px',\n  },\n});\n\nexport const useHeatMapChartStyles = (props: HeatMapChartProps): HeatMapChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(heatmapChartClassNames.root, baseStyles.root /*, props.styles?.root*/),\n    text: mergeClasses(heatmapChartClassNames.text, baseStyles.text /*, props.styles?.text*/),\n    calloutContentRoot: mergeClasses(\n      heatmapChartClassNames.calloutContentRoot,\n      baseStyles.calloutContentRoot /*, props.styles?.calloutContentRoot*/,\n    ),\n  };\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","heatmapChartClassNames","root","text","calloutContentRoot","xAxis","yAxis","legendContainer","hover","descriptionMessage","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","body1Strong","pointerEvents","maxWidth","useHeatMapChartStyles","props","baseStyles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,OAAO,MAAMC,yBAA6D;IACxEC,MAAM;IACNC,MAAM;IACNC,oBAAoB;IACpBC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,SAAS;IACTC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AACF,MAAMC,YAAYrB,WAAW;IAC3BI,MAAM,CAAC;IACPC,MAAM;QACJ,GAAGH,iBAAiBoB,WAAW;QAC/BC,eAAe;IACjB;IACAjB,oBAAoB;QAClBkB,UAAU;IACZ;AACF;AAEA,OAAO,MAAMC,wBAAwB,CAACC;IACpC,MAAMC,aAAaN;IAEnB,OAAO;QACLjB,MAAMH,aAAaE,uBAAuBC,IAAI,EAAEuB,WAAWvB,IAAI,CAAC,sBAAsB;QACtFC,MAAMJ,aAAaE,uBAAuBE,IAAI,EAAEsB,WAAWtB,IAAI,CAAC,sBAAsB;QACtFC,oBAAoBL,aAClBE,uBAAuBG,kBAAkB,EACzCqB,WAAWrB,kBAAkB,CAAC,oCAAoC;IAEtE;AACF,EAAE"}
+{"version":3,"sources":["../src/components/HeatMapChart/useHeatMapChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { HeatMapChartProps, HeatMapChartStyles } from './HeatMapChart.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const heatmapChartClassNames: SlotClassNames<HeatMapChartStyles> = {\n  root: 'fui-hmc__root',\n  text: 'fui-hmc__text',\n  calloutContentRoot: 'fui-hmc__calloutContentRoot',\n  xAxis: '',\n  yAxis: '',\n  legendContainer: '',\n  hover: '',\n  descriptionMessage: '',\n  tooltip: '',\n  axisTitle: '',\n  chartTitle: '',\n  opacityChangeOnHover: '',\n  shapeStyles: '',\n  chartWrapper: '',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\nconst useStyles = makeStyles({\n  root: {},\n  text: {\n    ...typographyStyles.body1Strong,\n    pointerEvents: 'none',\n  },\n  calloutContentRoot: {\n    maxWidth: '238px',\n  },\n});\n\nexport const useHeatMapChartStyles = (props: HeatMapChartProps): HeatMapChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(heatmapChartClassNames.root, baseStyles.root /*, props.styles?.root*/),\n    text: mergeClasses(heatmapChartClassNames.text, baseStyles.text /*, props.styles?.text*/),\n    calloutContentRoot: mergeClasses(\n      heatmapChartClassNames.calloutContentRoot,\n      baseStyles.calloutContentRoot /*, props.styles?.calloutContentRoot*/,\n    ),\n  };\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","heatmapChartClassNames","root","text","calloutContentRoot","xAxis","yAxis","legendContainer","hover","descriptionMessage","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","body1Strong","pointerEvents","maxWidth","useHeatMapChartStyles","props","baseStyles"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,OAAO,MAAMC,yBAA6D;IACxEC,MAAM;IACNC,MAAM;IACNC,oBAAoB;IACpBC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,SAAS;IACTC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AACF,MAAMC,YAAYrB,WAAW;IAC3BI,MAAM,CAAC;IACPC,MAAM;QACJ,GAAGH,iBAAiBoB,WAAW;QAC/BC,eAAe;IACjB;IACAjB,oBAAoB;QAClBkB,UAAU;IACZ;AACF;AAEA,OAAO,MAAMC,wBAAwB,CAACC;IACpC,MAAMC,aAAaN;IAEnB,OAAO;QACLjB,MAAMH,aAAaE,uBAAuBC,IAAI,EAAEuB,WAAWvB,IAAI,CAAC,sBAAsB;QACtFC,MAAMJ,aAAaE,uBAAuBE,IAAI,EAAEsB,WAAWtB,IAAI,CAAC,sBAAsB;QACtFC,oBAAoBL,aAClBE,uBAAuBG,kBAAkB,EACzCqB,WAAWrB,kBAAkB,CAAC,oCAAoC;IAEtE;AACF,EAAE"}

package/lib/components/HorizontalBarChart/HorizontalBarChart.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useHorizontalBarChartStyles } from './useHorizontalBarChartStyles.styles';
 import { HorizontalBarChartVariant } from './index';

package/lib/components/HorizontalBarChart/HorizontalBarChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/HorizontalBarChart/HorizontalBarChart.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useHorizontalBarChartStyles } from './useHorizontalBarChartStyles.styles';\nimport { ChartProps, HorizontalBarChartProps, ChartDataPoint, RefArrayData, HorizontalBarChartVariant } from './index';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { formatScientificLimitWidth, getAccessibleDataObject, useRtl } from '../../utilities/index';\nimport { useId } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\nimport { FocusableTooltipText } from '../../utilities/FocusableTooltipText';\nimport { Legend, Legends } from '../../index';\n\n/**\n * HorizontalBarChart is the context wrapper and container for all HorizontalBarChart content/controls,\n * It has no direct style or slot opinions.\n *\n * HorizontalBarChart also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps> = React.forwardRef<\n  HTMLDivElement,\n  HorizontalBarChartProps\n>((props, forwardedRef) => {\n  const legendContainer = React.useRef<HTMLDivElement | null>(null);\n  const _uniqLineText: string = useId('_HorizontalLine_');\n  const _refArray: RefArrayData[] = [];\n  const _isRTL: boolean = useRtl();\n  const barChartSvgRef: React.RefObject<SVGSVGElement> = React.createRef<SVGSVGElement>();\n  const _emptyChartId: string = useId('_HBC_empty');\n  let _barHeight: number;\n  let _calloutAnchorPoint: ChartDataPoint | null;\n  let isSingleBar: boolean = true;\n  let _showToolTipOnSegment: boolean = !props.hideTooltip;\n\n  const [hoverValue, setHoverValue] = React.useState<string | number | Date | null>('');\n  const [lineColor, setLineColor] = React.useState<string>('');\n  const [legend, setLegend] = React.useState<string | null>('');\n  const [xCalloutValue, setXCalloutValue] = React.useState<string | undefined>('');\n  const [yCalloutValue, setYCalloutValue] = React.useState<string | undefined>('');\n  const [barCalloutProps, setBarCalloutProps] = React.useState<ChartDataPoint>();\n  const [barSpacingInPercent, setBarSpacingInPercent] = React.useState<number>(0);\n  const [isPopoverOpen, setPopoverOpen] = React.useState<boolean>(false);\n  const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n  const [selectedLegend, setSelectedLegend] = React.useState<string>('');\n  const [activeLegend, setActiveLegend] = React.useState<string>('');\n\n  function _refCallback(element: SVGGElement, legendTitle: string | undefined): void {\n    _refArray.push({ index: legendTitle, refElement: element });\n  }\n\n  function _hoverOn(\n    event: React.FocusEvent<SVGRectElement> | React.MouseEvent<SVGRectElement>,\n    hoverVal: string | number | Date,\n    point: ChartDataPoint,\n  ): void {\n    if (\n      (!isPopoverOpen || legend !== point.legend!) &&\n      _calloutAnchorPoint !== point &&\n      (_legendHighlighted(point.legend) || _noLegendHighlighted())\n    ) {\n      _calloutAnchorPoint = point;\n      let x = 0;\n      let y = 0;\n\n      if ('clientX' in event && event.clientX && event.clientY) {\n        // Mouse event\n        x = event.clientX;\n        y = event.clientY;\n      } else {\n        // Focus event\n        const targetRect = (event.target as SVGRectElement).getBoundingClientRect();\n        x = targetRect.left + targetRect.width / 2;\n        y = targetRect.top + targetRect.height / 2;\n      }\n\n      updatePosition(x, y);\n      setHoverValue(hoverVal);\n      setLineColor(point.color!);\n      setLegend(point.legend!);\n      setXCalloutValue(point.xAxisCalloutData!);\n      setYCalloutValue(point.yAxisCalloutData!);\n      setBarCalloutProps(point);\n      // ToDo - Confirm setting multiple state variables like this is performant.\n    }\n  }\n\n  function _hoverOff(): void {\n    /*ToDo. To fix*/\n  }\n\n  const _handleChartMouseLeave = () => {\n    _calloutAnchorPoint = null;\n    if (isPopoverOpen) {\n      setPopoverOpen(false);\n      setHoverValue('');\n      setLineColor('');\n      setLegend('');\n    }\n  };\n\n  const _adjustProps = (): void => {\n    _barHeight = props.barHeight || 12;\n  };\n\n  const _getChartDataText = (data: ChartProps) => {\n    /* return props.barChartCustomData ? (\n        <div role=\"text\">{props.barChartCustomData(data)}</div>\n      ) : ( */\n    return _getDefaultTextData(data);\n    //)\n  };\n\n  function _createLegends(chartProps: ChartProps[]): JSXElement {\n    const legendItems: Legend[] = chartProps.flatMap(\n      point =>\n        point.chartData?.map((dataPoint): Legend => {\n          const legend = dataPoint.legend ?? '';\n          const color = dataPoint.color ?? '';\n\n          return {\n            title: legend,\n            color,\n            action: () => setSelectedLegend(selectedLegend === legend ? '' : legend),\n            hoverAction: () => {\n              _handleChartMouseLeave();\n              setActiveLegend(legend);\n            },\n            onMouseOutAction: () => setActiveLegend(''),\n          };\n        }) ?? [],\n    );\n\n    return (\n      <Legends legends={legendItems} centerLegends overflowText={props.legendsOverflowText} {...props.legendProps} />\n    );\n  }\n\n  function _getDefaultTextData(data: ChartProps): JSXElement {\n    const chartDataMode = props.chartDataMode || 'default';\n\n    if (chartDataMode === 'hidden') {\n      return <></>; // No text data for hidden mode\n    }\n\n    const { culture } = props;\n    const accessibilityData = getAccessibleDataObject(data.chartDataAccessibilityData!, 'text', false);\n    if (!isSingleBar) {\n      const total = data.chartData!.reduce(\n        (acc: number, point: ChartDataPoint) =>\n          acc + (point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0),\n        0,\n      );\n      return (\n        <div className={classes.chartTitleRight} {...accessibilityData}>\n          {formatToLocaleString(total, culture) as React.ReactNode}\n        </div>\n      );\n    }\n\n    const chartData: ChartDataPoint = data!.chartData![0];\n    const x = chartData.horizontalBarChartdata!.x;\n    const y = chartData.horizontalBarChartdata!.total!;\n\n    switch (chartDataMode) {\n      case 'default':\n        return (\n          <div className={classes.chartTitleRight} {...accessibilityData}>\n            {formatToLocaleString(x, culture) as React.ReactNode}\n          </div>\n        );\n      case 'fraction':\n        return (\n          <div {...accessibilityData}>\n            <span className={classes.chartTitleRight}>{formatToLocaleString(x, culture) as React.ReactNode}</span>\n            <span className={classes.chartDataTextDenominator}>{' / ' + formatToLocaleString(y, culture)}</span>\n          </div>\n        );\n      case 'percentage':\n        const dataRatioPercentage = `${formatToLocaleString(Math.round((x / y) * 100), culture)}%`;\n        return (\n          <div className={classes.chartTitleRight} {...accessibilityData}>\n            {dataRatioPercentage}\n          </div>\n        );\n    }\n  }\n\n  function _createBenchmark(data: ChartProps): JSXElement {\n    if (data.chartData![0].horizontalBarChartdata!.total === undefined) {\n      return <></>;\n    }\n    const totalData = data.chartData![0].horizontalBarChartdata!.total!;\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={classes.benchmarkContainer}>\n        <div className={classes.triangle} style={benchmarkStyles} />\n      </div>\n    );\n  }\n\n  /**\n   * This functions returns an array of <rect> elements, which form the bars\n   * For each bar an x value, and a width needs to be specified\n   * The computations are done based on percentages\n   * Extra margin is also provided, in the x value to provide some spacing in between the bars\n   */\n\n  function _createBars(data: ChartProps): JSXElement[] {\n    const noOfBars =\n      data.chartData?.reduce((count: number, point: ChartDataPoint) => (count += (point.data || 0) > 0 ? 1 : 0), 0) ||\n      1;\n    const totalMarginPercent = barSpacingInPercent * (noOfBars - 1);\n    const defaultColors: string[] = [\n      tokens.colorPaletteBlueForeground2,\n      tokens.colorPaletteCornflowerForeground2,\n      tokens.colorPaletteDarkGreenForeground2,\n      tokens.colorPaletteNavyForeground2,\n      tokens.colorPaletteDarkOrangeForeground2,\n    ];\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: ChartDataPoint) =>\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: ChartDataPoint, index: number) => {\n      const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;\n      value = (pointData / total) * 100;\n      if (value < 0) {\n        value = 0;\n      } else if (value < 1 && value !== 0) {\n        value = 1;\n      }\n      sumOfPercent += value;\n\n      return sumOfPercent;\n    });\n\n    /**\n     * The %age of the space occupied by the margin needs to subtracted\n     * while computing the scaling ratio, since the margins are not being\n     * scaled down, only the data is being scaled down from a higher percentage to lower percentage\n     * Eg: 95% of the space is taken by the bars, 5% by the margins\n     * Now if the sumOfPercent is 120% -> This needs to be scaled down to 95%, not 100%\n     * since that's only space available to the bars\n     */\n    const scalingRatio = sumOfPercent !== 0 ? (sumOfPercent - totalMarginPercent) / 100 : 1;\n\n    const bars = data.chartData!.map((point: ChartDataPoint, index: number) => {\n      const color: string = point.color ? point.color : defaultColors[Math.floor(Math.random() * 4 + 1)];\n      const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;\n      if (index > 0) {\n        prevPosition += value;\n      }\n      value = (pointData / total) * 100;\n      if (value < 0) {\n        value = 0;\n      } else if (value < 1 && value !== 0) {\n        value = 1 / scalingRatio;\n      } else {\n        value = value / scalingRatio;\n      }\n      startingPoint.push(prevPosition);\n\n      const xValue = point.horizontalBarChartdata!.x;\n      const placeholderIndex = 1;\n      const isLegendSelected: boolean = _legendHighlighted(point.legend) || _noLegendHighlighted();\n\n      // Render bar label instead of placeholder bar for absolute-scale variant\n      if (index === placeholderIndex && props.variant === HorizontalBarChartVariant.AbsoluteScale) {\n        if (props.hideLabels) {\n          return <text key={index} />;\n        }\n\n        const barValue = data.chartData![0].horizontalBarChartdata!.x;\n\n        return (\n          <text\n            key={index}\n            x={`${_isRTL ? 100 - startingPoint[index] : startingPoint[index]}%`}\n            y={_barHeight / 2}\n            dominantBaseline=\"central\"\n            transform={`translate(${_isRTL ? -4 : 4})`}\n            className={classes.barLabel}\n            aria-hidden={true}\n          >\n            {formatScientificLimitWidth(barValue)}\n          </text>\n        );\n      }\n\n      return (\n        <rect\n          key={index}\n          x={`${\n            _isRTL\n              ? 100 - startingPoint[index] - value - index * barSpacingInPercent\n              : startingPoint[index] + index * barSpacingInPercent\n          }%`}\n          y={0}\n          width={value + '%'}\n          height={_barHeight}\n          fill={color}\n          onMouseOver={\n            _showToolTipOnSegment && point.legend !== '' ? event => _hoverOn(event, xValue, point) : undefined\n          }\n          onFocus={_showToolTipOnSegment && point.legend !== '' ? event => _hoverOn(event, xValue, point) : undefined}\n          role=\"img\"\n          aria-label={_getAriaLabel(point)}\n          onBlur={_hoverOff}\n          onMouseLeave={_hoverOff}\n          className={classes.barWrapper}\n          opacity={isLegendSelected ? 1 : 0.1}\n          tabIndex={_legendHighlighted(point.legend!) || _noLegendHighlighted() ? 0 : undefined}\n        />\n      );\n    });\n    return bars;\n  }\n\n  const _getAriaLabel = (point: ChartDataPoint): string => {\n    const legend = point.xAxisCalloutData || point.legend;\n    const yValue =\n      point.yAxisCalloutData ||\n      (point.horizontalBarChartdata\n        ? `${point.horizontalBarChartdata.x}/${point.horizontalBarChartdata.total ?? ''}`\n        : 0);\n    return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;\n  };\n\n  function _isChartEmpty(): boolean {\n    return !(props.data && props.data.length > 0);\n  }\n\n  function updatePosition(newX: number, newY: number): void {\n    const threshold = 1; // Set a threshold for movement\n    const { x, y } = clickPosition;\n\n    // Calculate the distance moved\n    const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));\n    // Update the position only if the distance moved is greater than the threshold\n    if (distance > threshold) {\n      setClickPosition({ x: newX, y: newY });\n      setPopoverOpen(true);\n    }\n  }\n\n  React.useEffect(() => {\n    const svgWidth = barChartSvgRef?.current?.getBoundingClientRect().width || 0;\n    const MARGIN_WIDTH_IN_PX = 3;\n    if (svgWidth) {\n      const currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;\n      setBarSpacingInPercent(currentBarSpacing);\n    }\n  }, [barChartSvgRef]);\n\n  function _legendHighlighted(barLegend?: string) {\n    if (barLegend === undefined) {\n      return false;\n    }\n    return selectedLegend === barLegend || (selectedLegend === '' && activeLegend === barLegend);\n  }\n\n  /**\n   * This function checks if none of the legends is selected or hovered.*/\n\n  function _noLegendHighlighted() {\n    return selectedLegend === '' && activeLegend === '';\n  }\n\n  const { data } = props;\n  _adjustProps();\n  const classes = useHorizontalBarChartStyles(props);\n  const focusAttributes = useFocusableGroup();\n  const legendButtons = _createLegends(data!);\n\n  let datapoint: number | undefined = 0;\n  return !_isChartEmpty() ? (\n    <div className={classes.root} onMouseLeave={_handleChartMouseLeave}>\n      {data!.map((points: ChartProps, 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        isSingleBar = props.showLegendForSinglePointBar\n          ? false\n          : points.chartData!.length === 1 || (points.chartData!.length > 1 && points.chartData![1].legend === '');\n        if (isSingleBar) {\n          points.chartData![1] = {\n            legend: '',\n            horizontalBarChartdata: {\n              x: points.chartData![0].horizontalBarChartdata!.total! - datapoint!,\n              total: points.chartData![0].horizontalBarChartdata!.total!,\n            },\n            color: tokens.colorBackgroundOverlay,\n          };\n        }\n\n        // Hide right side text of chart title for absolute-scale variant\n        const chartDataText =\n          props.variant === HorizontalBarChartVariant.AbsoluteScale ? null : _getChartDataText(points!);\n        const bars = _createBars(points!);\n        const keyVal = _uniqLineText + '_' + index;\n        // ToDo - Showtriangle property is per data series. How to account for it in the new stylesheet\n        /*         const classes = useHorizontalBarChartStyles(props.styles!, {\n          width: props.width,\n          showTriangle: !!points!.chartData![0].data,\n          variant: props.variant,\n        }); */\n\n        return (\n          <div key={index}>\n            <div className={classes.items} {...focusAttributes}>\n              <div className={classes.chartTitle}>\n                {points!.chartTitle && (\n                  <FocusableTooltipText\n                    className={classes.chartTitleLeft}\n                    content={points!.chartTitle}\n                    accessibilityData={points!.chartTitleAccessibilityData}\n                  />\n                )}\n                {chartDataText}\n              </div>\n              {points!.chartData![0].data && _createBenchmark(points!)}\n              <svg ref={barChartSvgRef} className={classes.chart} aria-label={points!.chartTitle}>\n                <g\n                  id={keyVal}\n                  ref={(e: SVGGElement) => {\n                    _refCallback(e, points!.chartData![0].legend);\n                  }}\n                  // NOTE: points.chartData![0] contains current data value\n                  onClick={() => {\n                    const p = points!.chartData![0];\n                    if (p && p.onClick) {\n                      p.onClick();\n                    }\n                  }}\n                >\n                  {bars}\n                </g>\n              </svg>\n            </div>\n          </div>\n        );\n      })}\n      <ChartPopover\n        xCalloutValue={xCalloutValue}\n        yCalloutValue={yCalloutValue}\n        culture={props.culture}\n        clickPosition={clickPosition}\n        isPopoverOpen={isPopoverOpen}\n        legend={legend!}\n        YValue={hoverValue!}\n        color={lineColor}\n        isCalloutForStack={false}\n        customCallout={{\n          customizedCallout: props.onRenderCalloutPerHorizontalBar\n            ? props.onRenderCalloutPerHorizontalBar(barCalloutProps!)\n            : undefined,\n          customCalloutProps: props.calloutPropsPerDataPoint\n            ? props.calloutPropsPerDataPoint(barCalloutProps!)\n            : undefined,\n        }}\n        isCartesian={false}\n      />\n      {!isSingleBar && (\n        <div ref={(e: HTMLDivElement) => (legendContainer.current = e)} className={classes.legendContainer}>\n          {legendButtons}\n        </div>\n      )}\n    </div>\n  ) : (\n    <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n  );\n  //TODO validate and fix focus border for issue for popover\n});\nHorizontalBarChart.displayName = 'HorizontalBarChart';\n"],"names":["React","useHorizontalBarChartStyles","HorizontalBarChartVariant","formatToLocaleString","formatScientificLimitWidth","getAccessibleDataObject","useRtl","useId","tokens","useFocusableGroup","ChartPopover","FocusableTooltipText","Legends","HorizontalBarChart","forwardRef","props","forwardedRef","legendContainer","useRef","_uniqLineText","_refArray","_isRTL","barChartSvgRef","createRef","_emptyChartId","_barHeight","_calloutAnchorPoint","isSingleBar","_showToolTipOnSegment","hideTooltip","hoverValue","setHoverValue","useState","lineColor","setLineColor","legend","setLegend","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","barCalloutProps","setBarCalloutProps","barSpacingInPercent","setBarSpacingInPercent","isPopoverOpen","setPopoverOpen","clickPosition","setClickPosition","x","y","selectedLegend","setSelectedLegend","activeLegend","setActiveLegend","_refCallback","element","legendTitle","push","index","refElement","_hoverOn","event","hoverVal","point","_legendHighlighted","_noLegendHighlighted","clientX","clientY","targetRect","target","getBoundingClientRect","left","width","top","height","updatePosition","color","xAxisCalloutData","yAxisCalloutData","_hoverOff","_handleChartMouseLeave","_adjustProps","barHeight","_getChartDataText","data","_getDefaultTextData","_createLegends","chartProps","legendItems","flatMap","chartData","map","dataPoint","title","action","hoverAction","onMouseOutAction","legends","centerLegends","overflowText","legendsOverflowText","legendProps","chartDataMode","culture","accessibilityData","chartDataAccessibilityData","total","reduce","acc","horizontalBarChartdata","div","className","classes","chartTitleRight","span","chartDataTextDenominator","dataRatioPercentage","Math","round","_createBenchmark","undefined","totalData","benchmarkData","benchmarkRatio","benchmarkStyles","benchmarkContainer","triangle","style","_createBars","noOfBars","count","totalMarginPercent","defaultColors","colorPaletteBlueForeground2","colorPaletteCornflowerForeground2","colorPaletteDarkGreenForeground2","colorPaletteNavyForeground2","colorPaletteDarkOrangeForeground2","startingPoint","prevPosition","value","sumOfPercent","pointData","scalingRatio","bars","floor","random","xValue","placeholderIndex","isLegendSelected","variant","AbsoluteScale","hideLabels","text","key","barValue","dominantBaseline","transform","barLabel","aria-hidden","rect","fill","onMouseOver","onFocus","role","aria-label","_getAriaLabel","onBlur","onMouseLeave","barWrapper","opacity","tabIndex","yValue","callOutAccessibilityData","ariaLabel","_isChartEmpty","length","newX","newY","threshold","distance","sqrt","pow","useEffect","svgWidth","current","MARGIN_WIDTH_IN_PX","currentBarSpacing","barLegend","focusAttributes","legendButtons","datapoint","root","points","showLegendForSinglePointBar","colorBackgroundOverlay","chartDataText","keyVal","items","chartTitle","chartTitleLeft","content","chartTitleAccessibilityData","svg","ref","chart","g","id","e","onClick","p","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerHorizontalBar","customCalloutProps","calloutPropsPerDataPoint","isCartesian","displayName"],"mappings":"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"}
+{"version":3,"sources":["../src/components/HorizontalBarChart/HorizontalBarChart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useHorizontalBarChartStyles } from './useHorizontalBarChartStyles.styles';\nimport { ChartProps, HorizontalBarChartProps, ChartDataPoint, RefArrayData, HorizontalBarChartVariant } from './index';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { formatScientificLimitWidth, getAccessibleDataObject, useRtl } from '../../utilities/index';\nimport { useId } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\nimport { FocusableTooltipText } from '../../utilities/FocusableTooltipText';\nimport { Legend, Legends } from '../../index';\n\n/**\n * HorizontalBarChart is the context wrapper and container for all HorizontalBarChart content/controls,\n * It has no direct style or slot opinions.\n *\n * HorizontalBarChart also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps> = React.forwardRef<\n  HTMLDivElement,\n  HorizontalBarChartProps\n>((props, forwardedRef) => {\n  const legendContainer = React.useRef<HTMLDivElement | null>(null);\n  const _uniqLineText: string = useId('_HorizontalLine_');\n  const _refArray: RefArrayData[] = [];\n  const _isRTL: boolean = useRtl();\n  const barChartSvgRef: React.RefObject<SVGSVGElement> = React.createRef<SVGSVGElement>();\n  const _emptyChartId: string = useId('_HBC_empty');\n  let _barHeight: number;\n  let _calloutAnchorPoint: ChartDataPoint | null;\n  let isSingleBar: boolean = true;\n  let _showToolTipOnSegment: boolean = !props.hideTooltip;\n\n  const [hoverValue, setHoverValue] = React.useState<string | number | Date | null>('');\n  const [lineColor, setLineColor] = React.useState<string>('');\n  const [legend, setLegend] = React.useState<string | null>('');\n  const [xCalloutValue, setXCalloutValue] = React.useState<string | undefined>('');\n  const [yCalloutValue, setYCalloutValue] = React.useState<string | undefined>('');\n  const [barCalloutProps, setBarCalloutProps] = React.useState<ChartDataPoint>();\n  const [barSpacingInPercent, setBarSpacingInPercent] = React.useState<number>(0);\n  const [isPopoverOpen, setPopoverOpen] = React.useState<boolean>(false);\n  const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n  const [selectedLegend, setSelectedLegend] = React.useState<string>('');\n  const [activeLegend, setActiveLegend] = React.useState<string>('');\n\n  function _refCallback(element: SVGGElement, legendTitle: string | undefined): void {\n    _refArray.push({ index: legendTitle, refElement: element });\n  }\n\n  function _hoverOn(\n    event: React.FocusEvent<SVGRectElement> | React.MouseEvent<SVGRectElement>,\n    hoverVal: string | number | Date,\n    point: ChartDataPoint,\n  ): void {\n    if (\n      (!isPopoverOpen || legend !== point.legend!) &&\n      _calloutAnchorPoint !== point &&\n      (_legendHighlighted(point.legend) || _noLegendHighlighted())\n    ) {\n      _calloutAnchorPoint = point;\n      let x = 0;\n      let y = 0;\n\n      if ('clientX' in event && event.clientX && event.clientY) {\n        // Mouse event\n        x = event.clientX;\n        y = event.clientY;\n      } else {\n        // Focus event\n        const targetRect = (event.target as SVGRectElement).getBoundingClientRect();\n        x = targetRect.left + targetRect.width / 2;\n        y = targetRect.top + targetRect.height / 2;\n      }\n\n      updatePosition(x, y);\n      setHoverValue(hoverVal);\n      setLineColor(point.color!);\n      setLegend(point.legend!);\n      setXCalloutValue(point.xAxisCalloutData!);\n      setYCalloutValue(point.yAxisCalloutData!);\n      setBarCalloutProps(point);\n      // ToDo - Confirm setting multiple state variables like this is performant.\n    }\n  }\n\n  function _hoverOff(): void {\n    /*ToDo. To fix*/\n  }\n\n  const _handleChartMouseLeave = () => {\n    _calloutAnchorPoint = null;\n    if (isPopoverOpen) {\n      setPopoverOpen(false);\n      setHoverValue('');\n      setLineColor('');\n      setLegend('');\n    }\n  };\n\n  const _adjustProps = (): void => {\n    _barHeight = props.barHeight || 12;\n  };\n\n  const _getChartDataText = (data: ChartProps) => {\n    /* return props.barChartCustomData ? (\n        <div role=\"text\">{props.barChartCustomData(data)}</div>\n      ) : ( */\n    return _getDefaultTextData(data);\n    //)\n  };\n\n  function _createLegends(chartProps: ChartProps[]): JSXElement {\n    const legendItems: Legend[] = chartProps.flatMap(\n      point =>\n        point.chartData?.map((dataPoint): Legend => {\n          const legend = dataPoint.legend ?? '';\n          const color = dataPoint.color ?? '';\n\n          return {\n            title: legend,\n            color,\n            action: () => setSelectedLegend(selectedLegend === legend ? '' : legend),\n            hoverAction: () => {\n              _handleChartMouseLeave();\n              setActiveLegend(legend);\n            },\n            onMouseOutAction: () => setActiveLegend(''),\n          };\n        }) ?? [],\n    );\n\n    return (\n      <Legends legends={legendItems} centerLegends overflowText={props.legendsOverflowText} {...props.legendProps} />\n    );\n  }\n\n  function _getDefaultTextData(data: ChartProps): JSXElement {\n    const chartDataMode = props.chartDataMode || 'default';\n\n    if (chartDataMode === 'hidden') {\n      return <></>; // No text data for hidden mode\n    }\n\n    const { culture } = props;\n    const accessibilityData = getAccessibleDataObject(data.chartDataAccessibilityData!, 'text', false);\n    if (!isSingleBar) {\n      const total = data.chartData!.reduce(\n        (acc: number, point: ChartDataPoint) =>\n          acc + (point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0),\n        0,\n      );\n      return (\n        <div className={classes.chartTitleRight} {...accessibilityData}>\n          {formatToLocaleString(total, culture) as React.ReactNode}\n        </div>\n      );\n    }\n\n    const chartData: ChartDataPoint = data!.chartData![0];\n    const x = chartData.horizontalBarChartdata!.x;\n    const y = chartData.horizontalBarChartdata!.total!;\n\n    switch (chartDataMode) {\n      case 'default':\n        return (\n          <div className={classes.chartTitleRight} {...accessibilityData}>\n            {formatToLocaleString(x, culture) as React.ReactNode}\n          </div>\n        );\n      case 'fraction':\n        return (\n          <div {...accessibilityData}>\n            <span className={classes.chartTitleRight}>{formatToLocaleString(x, culture) as React.ReactNode}</span>\n            <span className={classes.chartDataTextDenominator}>{' / ' + formatToLocaleString(y, culture)}</span>\n          </div>\n        );\n      case 'percentage':\n        const dataRatioPercentage = `${formatToLocaleString(Math.round((x / y) * 100), culture)}%`;\n        return (\n          <div className={classes.chartTitleRight} {...accessibilityData}>\n            {dataRatioPercentage}\n          </div>\n        );\n    }\n  }\n\n  function _createBenchmark(data: ChartProps): JSXElement {\n    if (data.chartData![0].horizontalBarChartdata!.total === undefined) {\n      return <></>;\n    }\n    const totalData = data.chartData![0].horizontalBarChartdata!.total!;\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={classes.benchmarkContainer}>\n        <div className={classes.triangle} style={benchmarkStyles} />\n      </div>\n    );\n  }\n\n  /**\n   * This functions returns an array of <rect> elements, which form the bars\n   * For each bar an x value, and a width needs to be specified\n   * The computations are done based on percentages\n   * Extra margin is also provided, in the x value to provide some spacing in between the bars\n   */\n\n  function _createBars(data: ChartProps): JSXElement[] {\n    const noOfBars =\n      data.chartData?.reduce((count: number, point: ChartDataPoint) => (count += (point.data || 0) > 0 ? 1 : 0), 0) ||\n      1;\n    const totalMarginPercent = barSpacingInPercent * (noOfBars - 1);\n    const defaultColors: string[] = [\n      tokens.colorPaletteBlueForeground2,\n      tokens.colorPaletteCornflowerForeground2,\n      tokens.colorPaletteDarkGreenForeground2,\n      tokens.colorPaletteNavyForeground2,\n      tokens.colorPaletteDarkOrangeForeground2,\n    ];\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: ChartDataPoint) =>\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: ChartDataPoint, index: number) => {\n      const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;\n      value = (pointData / total) * 100;\n      if (value < 0) {\n        value = 0;\n      } else if (value < 1 && value !== 0) {\n        value = 1;\n      }\n      sumOfPercent += value;\n\n      return sumOfPercent;\n    });\n\n    /**\n     * The %age of the space occupied by the margin needs to subtracted\n     * while computing the scaling ratio, since the margins are not being\n     * scaled down, only the data is being scaled down from a higher percentage to lower percentage\n     * Eg: 95% of the space is taken by the bars, 5% by the margins\n     * Now if the sumOfPercent is 120% -> This needs to be scaled down to 95%, not 100%\n     * since that's only space available to the bars\n     */\n    const scalingRatio = sumOfPercent !== 0 ? (sumOfPercent - totalMarginPercent) / 100 : 1;\n\n    const bars = data.chartData!.map((point: ChartDataPoint, index: number) => {\n      const color: string = point.color ? point.color : defaultColors[Math.floor(Math.random() * 4 + 1)];\n      const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;\n      if (index > 0) {\n        prevPosition += value;\n      }\n      value = (pointData / total) * 100;\n      if (value < 0) {\n        value = 0;\n      } else if (value < 1 && value !== 0) {\n        value = 1 / scalingRatio;\n      } else {\n        value = value / scalingRatio;\n      }\n      startingPoint.push(prevPosition);\n\n      const xValue = point.horizontalBarChartdata!.x;\n      const placeholderIndex = 1;\n      const isLegendSelected: boolean = _legendHighlighted(point.legend) || _noLegendHighlighted();\n\n      // Render bar label instead of placeholder bar for absolute-scale variant\n      if (index === placeholderIndex && props.variant === HorizontalBarChartVariant.AbsoluteScale) {\n        if (props.hideLabels) {\n          return <text key={index} />;\n        }\n\n        const barValue = data.chartData![0].horizontalBarChartdata!.x;\n\n        return (\n          <text\n            key={index}\n            x={`${_isRTL ? 100 - startingPoint[index] : startingPoint[index]}%`}\n            y={_barHeight / 2}\n            dominantBaseline=\"central\"\n            transform={`translate(${_isRTL ? -4 : 4})`}\n            className={classes.barLabel}\n            aria-hidden={true}\n          >\n            {formatScientificLimitWidth(barValue)}\n          </text>\n        );\n      }\n\n      return (\n        <rect\n          key={index}\n          x={`${\n            _isRTL\n              ? 100 - startingPoint[index] - value - index * barSpacingInPercent\n              : startingPoint[index] + index * barSpacingInPercent\n          }%`}\n          y={0}\n          width={value + '%'}\n          height={_barHeight}\n          fill={color}\n          onMouseOver={\n            _showToolTipOnSegment && point.legend !== '' ? event => _hoverOn(event, xValue, point) : undefined\n          }\n          onFocus={_showToolTipOnSegment && point.legend !== '' ? event => _hoverOn(event, xValue, point) : undefined}\n          role=\"img\"\n          aria-label={_getAriaLabel(point)}\n          onBlur={_hoverOff}\n          onMouseLeave={_hoverOff}\n          className={classes.barWrapper}\n          opacity={isLegendSelected ? 1 : 0.1}\n          tabIndex={_legendHighlighted(point.legend!) || _noLegendHighlighted() ? 0 : undefined}\n        />\n      );\n    });\n    return bars;\n  }\n\n  const _getAriaLabel = (point: ChartDataPoint): string => {\n    const legend = point.xAxisCalloutData || point.legend;\n    const yValue =\n      point.yAxisCalloutData ||\n      (point.horizontalBarChartdata\n        ? `${point.horizontalBarChartdata.x}/${point.horizontalBarChartdata.total ?? ''}`\n        : 0);\n    return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;\n  };\n\n  function _isChartEmpty(): boolean {\n    return !(props.data && props.data.length > 0);\n  }\n\n  function updatePosition(newX: number, newY: number): void {\n    const threshold = 1; // Set a threshold for movement\n    const { x, y } = clickPosition;\n\n    // Calculate the distance moved\n    const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));\n    // Update the position only if the distance moved is greater than the threshold\n    if (distance > threshold) {\n      setClickPosition({ x: newX, y: newY });\n      setPopoverOpen(true);\n    }\n  }\n\n  React.useEffect(() => {\n    const svgWidth = barChartSvgRef?.current?.getBoundingClientRect().width || 0;\n    const MARGIN_WIDTH_IN_PX = 3;\n    if (svgWidth) {\n      const currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;\n      setBarSpacingInPercent(currentBarSpacing);\n    }\n  }, [barChartSvgRef]);\n\n  function _legendHighlighted(barLegend?: string) {\n    if (barLegend === undefined) {\n      return false;\n    }\n    return selectedLegend === barLegend || (selectedLegend === '' && activeLegend === barLegend);\n  }\n\n  /**\n   * This function checks if none of the legends is selected or hovered.*/\n\n  function _noLegendHighlighted() {\n    return selectedLegend === '' && activeLegend === '';\n  }\n\n  const { data } = props;\n  _adjustProps();\n  const classes = useHorizontalBarChartStyles(props);\n  const focusAttributes = useFocusableGroup();\n  const legendButtons = _createLegends(data!);\n\n  let datapoint: number | undefined = 0;\n  return !_isChartEmpty() ? (\n    <div className={classes.root} onMouseLeave={_handleChartMouseLeave}>\n      {data!.map((points: ChartProps, 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        isSingleBar = props.showLegendForSinglePointBar\n          ? false\n          : points.chartData!.length === 1 || (points.chartData!.length > 1 && points.chartData![1].legend === '');\n        if (isSingleBar) {\n          points.chartData![1] = {\n            legend: '',\n            horizontalBarChartdata: {\n              x: points.chartData![0].horizontalBarChartdata!.total! - datapoint!,\n              total: points.chartData![0].horizontalBarChartdata!.total!,\n            },\n            color: tokens.colorBackgroundOverlay,\n          };\n        }\n\n        // Hide right side text of chart title for absolute-scale variant\n        const chartDataText =\n          props.variant === HorizontalBarChartVariant.AbsoluteScale ? null : _getChartDataText(points!);\n        const bars = _createBars(points!);\n        const keyVal = _uniqLineText + '_' + index;\n        // ToDo - Showtriangle property is per data series. How to account for it in the new stylesheet\n        /*         const classes = useHorizontalBarChartStyles(props.styles!, {\n          width: props.width,\n          showTriangle: !!points!.chartData![0].data,\n          variant: props.variant,\n        }); */\n\n        return (\n          <div key={index}>\n            <div className={classes.items} {...focusAttributes}>\n              <div className={classes.chartTitle}>\n                {points!.chartTitle && (\n                  <FocusableTooltipText\n                    className={classes.chartTitleLeft}\n                    content={points!.chartTitle}\n                    accessibilityData={points!.chartTitleAccessibilityData}\n                  />\n                )}\n                {chartDataText}\n              </div>\n              {points!.chartData![0].data && _createBenchmark(points!)}\n              <svg ref={barChartSvgRef} className={classes.chart} aria-label={points!.chartTitle}>\n                <g\n                  id={keyVal}\n                  ref={(e: SVGGElement) => {\n                    _refCallback(e, points!.chartData![0].legend);\n                  }}\n                  // NOTE: points.chartData![0] contains current data value\n                  onClick={() => {\n                    const p = points!.chartData![0];\n                    if (p && p.onClick) {\n                      p.onClick();\n                    }\n                  }}\n                >\n                  {bars}\n                </g>\n              </svg>\n            </div>\n          </div>\n        );\n      })}\n      <ChartPopover\n        xCalloutValue={xCalloutValue}\n        yCalloutValue={yCalloutValue}\n        culture={props.culture}\n        clickPosition={clickPosition}\n        isPopoverOpen={isPopoverOpen}\n        legend={legend!}\n        YValue={hoverValue!}\n        color={lineColor}\n        isCalloutForStack={false}\n        customCallout={{\n          customizedCallout: props.onRenderCalloutPerHorizontalBar\n            ? props.onRenderCalloutPerHorizontalBar(barCalloutProps!)\n            : undefined,\n          customCalloutProps: props.calloutPropsPerDataPoint\n            ? props.calloutPropsPerDataPoint(barCalloutProps!)\n            : undefined,\n        }}\n        isCartesian={false}\n      />\n      {!isSingleBar && (\n        <div ref={(e: HTMLDivElement) => (legendContainer.current = e)} className={classes.legendContainer}>\n          {legendButtons}\n        </div>\n      )}\n    </div>\n  ) : (\n    <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n  );\n  //TODO validate and fix focus border for issue for popover\n});\nHorizontalBarChart.displayName = 'HorizontalBarChart';\n"],"names":["React","useHorizontalBarChartStyles","HorizontalBarChartVariant","formatToLocaleString","formatScientificLimitWidth","getAccessibleDataObject","useRtl","useId","tokens","useFocusableGroup","ChartPopover","FocusableTooltipText","Legends","HorizontalBarChart","forwardRef","props","forwardedRef","legendContainer","useRef","_uniqLineText","_refArray","_isRTL","barChartSvgRef","createRef","_emptyChartId","_barHeight","_calloutAnchorPoint","isSingleBar","_showToolTipOnSegment","hideTooltip","hoverValue","setHoverValue","useState","lineColor","setLineColor","legend","setLegend","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","barCalloutProps","setBarCalloutProps","barSpacingInPercent","setBarSpacingInPercent","isPopoverOpen","setPopoverOpen","clickPosition","setClickPosition","x","y","selectedLegend","setSelectedLegend","activeLegend","setActiveLegend","_refCallback","element","legendTitle","push","index","refElement","_hoverOn","event","hoverVal","point","_legendHighlighted","_noLegendHighlighted","clientX","clientY","targetRect","target","getBoundingClientRect","left","width","top","height","updatePosition","color","xAxisCalloutData","yAxisCalloutData","_hoverOff","_handleChartMouseLeave","_adjustProps","barHeight","_getChartDataText","data","_getDefaultTextData","_createLegends","chartProps","legendItems","flatMap","chartData","map","dataPoint","title","action","hoverAction","onMouseOutAction","legends","centerLegends","overflowText","legendsOverflowText","legendProps","chartDataMode","culture","accessibilityData","chartDataAccessibilityData","total","reduce","acc","horizontalBarChartdata","div","className","classes","chartTitleRight","span","chartDataTextDenominator","dataRatioPercentage","Math","round","_createBenchmark","undefined","totalData","benchmarkData","benchmarkRatio","benchmarkStyles","benchmarkContainer","triangle","style","_createBars","noOfBars","count","totalMarginPercent","defaultColors","colorPaletteBlueForeground2","colorPaletteCornflowerForeground2","colorPaletteDarkGreenForeground2","colorPaletteNavyForeground2","colorPaletteDarkOrangeForeground2","startingPoint","prevPosition","value","sumOfPercent","pointData","scalingRatio","bars","floor","random","xValue","placeholderIndex","isLegendSelected","variant","AbsoluteScale","hideLabels","text","key","barValue","dominantBaseline","transform","barLabel","aria-hidden","rect","fill","onMouseOver","onFocus","role","aria-label","_getAriaLabel","onBlur","onMouseLeave","barWrapper","opacity","tabIndex","yValue","callOutAccessibilityData","ariaLabel","_isChartEmpty","length","newX","newY","threshold","distance","sqrt","pow","useEffect","svgWidth","current","MARGIN_WIDTH_IN_PX","currentBarSpacing","barLegend","focusAttributes","legendButtons","datapoint","root","points","showLegendForSinglePointBar","colorBackgroundOverlay","chartDataText","keyVal","items","chartTitle","chartTitleLeft","content","chartTitleAccessibilityData","svg","ref","chart","g","id","e","onClick","p","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerHorizontalBar","customCalloutProps","calloutPropsPerDataPoint","isCartesian","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,uCAAuC;AACnF,SAA4EC,yBAAyB,QAAQ,UAAU;AACvH,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,0BAA0B,EAAEC,uBAAuB,EAAEC,MAAM,QAAQ,wBAAwB;AACpG,SAASC,KAAK,QAAQ,4BAA4B;AAElD,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,YAAY,QAAQ,mCAAmC;AAChE,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,SAAiBC,OAAO,QAAQ,cAAc;AAE9C;;;;;CAKC,GACD,OAAO,MAAMC,mCAAuEb,MAAMc,UAAU,CAGlG,CAACC,OAAOC;IACR,MAAMC,kBAAkBjB,MAAMkB,MAAM,CAAwB;IAC5D,MAAMC,gBAAwBZ,MAAM;IACpC,MAAMa,YAA4B,EAAE;IACpC,MAAMC,SAAkBf;IACxB,MAAMgB,+BAAiDtB,MAAMuB,SAAS;IACtE,MAAMC,gBAAwBjB,MAAM;IACpC,IAAIkB;IACJ,IAAIC;IACJ,IAAIC,cAAuB;IAC3B,IAAIC,wBAAiC,CAACb,MAAMc,WAAW;IAEvD,MAAM,CAACC,YAAYC,cAAc,GAAG/B,MAAMgC,QAAQ,CAAgC;IAClF,MAAM,CAACC,WAAWC,aAAa,GAAGlC,MAAMgC,QAAQ,CAAS;IACzD,MAAM,CAACG,QAAQC,UAAU,GAAGpC,MAAMgC,QAAQ,CAAgB;IAC1D,MAAM,CAACK,eAAeC,iBAAiB,GAAGtC,MAAMgC,QAAQ,CAAqB;IAC7E,MAAM,CAACO,eAAeC,iBAAiB,GAAGxC,MAAMgC,QAAQ,CAAqB;IAC7E,MAAM,CAACS,iBAAiBC,mBAAmB,GAAG1C,MAAMgC,QAAQ;IAC5D,MAAM,CAACW,qBAAqBC,uBAAuB,GAAG5C,MAAMgC,QAAQ,CAAS;IAC7E,MAAM,CAACa,eAAeC,eAAe,GAAG9C,MAAMgC,QAAQ,CAAU;IAChE,MAAM,CAACe,eAAeC,iBAAiB,GAAGhD,MAAMgC,QAAQ,CAAC;QAAEiB,GAAG;QAAGC,GAAG;IAAE;IACtE,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGpD,MAAMgC,QAAQ,CAAS;IACnE,MAAM,CAACqB,cAAcC,gBAAgB,GAAGtD,MAAMgC,QAAQ,CAAS;IAE/D,SAASuB,aAAaC,OAAoB,EAAEC,WAA+B;QACzErC,UAAUsC,IAAI,CAAC;YAAEC,OAAOF;YAAaG,YAAYJ;QAAQ;IAC3D;IAEA,SAASK,SACPC,KAA0E,EAC1EC,QAAgC,EAChCC,KAAqB;QAErB,IACE,AAAC,CAAA,CAACnB,iBAAiBV,WAAW6B,MAAM7B,MAAM,KAC1CT,wBAAwBsC,SACvBC,CAAAA,mBAAmBD,MAAM7B,MAAM,KAAK+B,sBAAqB,GAC1D;YACAxC,sBAAsBsC;YACtB,IAAIf,IAAI;YACR,IAAIC,IAAI;YAER,IAAI,aAAaY,SAASA,MAAMK,OAAO,IAAIL,MAAMM,OAAO,EAAE;gBACxD,cAAc;gBACdnB,IAAIa,MAAMK,OAAO;gBACjBjB,IAAIY,MAAMM,OAAO;YACnB,OAAO;gBACL,cAAc;gBACd,MAAMC,aAAa,AAACP,MAAMQ,MAAM,CAAoBC,qBAAqB;gBACzEtB,IAAIoB,WAAWG,IAAI,GAAGH,WAAWI,KAAK,GAAG;gBACzCvB,IAAImB,WAAWK,GAAG,GAAGL,WAAWM,MAAM,GAAG;YAC3C;YAEAC,eAAe3B,GAAGC;YAClBnB,cAAcgC;YACd7B,aAAa8B,MAAMa,KAAK;YACxBzC,UAAU4B,MAAM7B,MAAM;YACtBG,iBAAiB0B,MAAMc,gBAAgB;YACvCtC,iBAAiBwB,MAAMe,gBAAgB;YACvCrC,mBAAmBsB;QACnB,2EAA2E;QAC7E;IACF;IAEA,SAASgB;IACP,cAAc,GAChB;IAEA,MAAMC,yBAAyB;QAC7BvD,sBAAsB;QACtB,IAAImB,eAAe;YACjBC,eAAe;YACff,cAAc;YACdG,aAAa;YACbE,UAAU;QACZ;IACF;IAEA,MAAM8C,eAAe;QACnBzD,aAAaV,MAAMoE,SAAS,IAAI;IAClC;IAEA,MAAMC,oBAAoB,CAACC;QACzB;;YAEQ,GACR,OAAOC,oBAAoBD;IAC3B,GAAG;IACL;IAEA,SAASE,eAAeC,UAAwB;QAC9C,MAAMC,cAAwBD,WAAWE,OAAO,CAC9C1B,CAAAA;gBACEA;gBAAAA;mBAAAA,CAAAA,wBAAAA,mBAAAA,MAAM2B,SAAS,cAAf3B,uCAAAA,iBAAiB4B,GAAG,CAAC,CAACC;oBACLA;gBAAf,MAAM1D,SAAS0D,CAAAA,oBAAAA,UAAU1D,MAAM,cAAhB0D,+BAAAA,oBAAoB;oBACrBA;gBAAd,MAAMhB,QAAQgB,CAAAA,mBAAAA,UAAUhB,KAAK,cAAfgB,8BAAAA,mBAAmB;gBAEjC,OAAO;oBACLC,OAAO3D;oBACP0C;oBACAkB,QAAQ,IAAM3C,kBAAkBD,mBAAmBhB,SAAS,KAAKA;oBACjE6D,aAAa;wBACXf;wBACA3B,gBAAgBnB;oBAClB;oBACA8D,kBAAkB,IAAM3C,gBAAgB;gBAC1C;YACF,gBAdAU,kCAAAA,uBAcM,EAAE;;QAGZ,qBACE,oBAACpD;YAAQsF,SAAST;YAAaU,eAAAA;YAAcC,cAAcrF,MAAMsF,mBAAmB;YAAG,GAAGtF,MAAMuF,WAAW;;IAE/G;IAEA,SAAShB,oBAAoBD,IAAgB;QAC3C,MAAMkB,gBAAgBxF,MAAMwF,aAAa,IAAI;QAE7C,IAAIA,kBAAkB,UAAU;YAC9B,qBAAO,2CAAO,+BAA+B;QAC/C;QAEA,MAAM,EAAEC,OAAO,EAAE,GAAGzF;QACpB,MAAM0F,oBAAoBpG,wBAAwBgF,KAAKqB,0BAA0B,EAAG,QAAQ;QAC5F,IAAI,CAAC/E,aAAa;YAChB,MAAMgF,QAAQtB,KAAKM,SAAS,CAAEiB,MAAM,CAClC,CAACC,KAAa7C,QACZ6C,MAAO7C,CAAAA,MAAM8C,sBAAsB,CAAE7D,CAAC,GAAGe,MAAM8C,sBAAsB,CAAE7D,CAAC,GAAG,CAAA,GAC7E;YAEF,qBACE,oBAAC8D;gBAAIC,WAAWC,QAAQC,eAAe;gBAAG,GAAGT,iBAAiB;eAC3DtG,qBAAqBwG,OAAOH;QAGnC;QAEA,MAAMb,YAA4BN,KAAMM,SAAS,AAAC,CAAC,EAAE;QACrD,MAAM1C,IAAI0C,UAAUmB,sBAAsB,CAAE7D,CAAC;QAC7C,MAAMC,IAAIyC,UAAUmB,sBAAsB,CAAEH,KAAK;QAEjD,OAAQJ;YACN,KAAK;gBACH,qBACE,oBAACQ;oBAAIC,WAAWC,QAAQC,eAAe;oBAAG,GAAGT,iBAAiB;mBAC3DtG,qBAAqB8C,GAAGuD;YAG/B,KAAK;gBACH,qBACE,oBAACO,OAAQN,iCACP,oBAACU;oBAAKH,WAAWC,QAAQC,eAAe;mBAAG/G,qBAAqB8C,GAAGuD,yBACnE,oBAACW;oBAAKH,WAAWC,QAAQG,wBAAwB;mBAAG,QAAQjH,qBAAqB+C,GAAGsD;YAG1F,KAAK;gBACH,MAAMa,sBAAsB,GAAGlH,qBAAqBmH,KAAKC,KAAK,CAAC,AAACtE,IAAIC,IAAK,MAAMsD,SAAS,CAAC,CAAC;gBAC1F,qBACE,oBAACO;oBAAIC,WAAWC,QAAQC,eAAe;oBAAG,GAAGT,iBAAiB;mBAC3DY;QAGT;IACF;IAEA,SAASG,iBAAiBnC,IAAgB;QACxC,IAAIA,KAAKM,SAAS,AAAC,CAAC,EAAE,CAACmB,sBAAsB,CAAEH,KAAK,KAAKc,WAAW;YAClE,qBAAO;QACT;QACA,MAAMC,YAAYrC,KAAKM,SAAS,AAAC,CAAC,EAAE,CAACmB,sBAAsB,CAAEH,KAAK;QAClE,MAAMgB,gBAAgBtC,KAAKM,SAAS,AAAC,CAAC,EAAE,CAACN,IAAI;QAC7C,MAAMuC,iBAAiBN,KAAKC,KAAK,CAAC,AAAEI,CAAAA,gBAAgBA,gBAAgB,CAAA,IAAKD,YAAa;QAEtF,MAAMG,kBAAkB;YACtBrD,MAAM,UAAUoD,iBAAiB;QACnC;QAEA,qBACE,oBAACb;YAAIC,WAAWC,QAAQa,kBAAkB;yBACxC,oBAACf;YAAIC,WAAWC,QAAQc,QAAQ;YAAEC,OAAOH;;IAG/C;IAEA;;;;;GAKC,GAED,SAASI,YAAY5C,IAAgB;YAEjCA;QADF,MAAM6C,WACJ7C,EAAAA,kBAAAA,KAAKM,SAAS,cAAdN,sCAAAA,gBAAgBuB,MAAM,CAAC,CAACuB,OAAenE,QAA2BmE,SAAS,AAACnE,CAAAA,MAAMqB,IAAI,IAAI,CAAA,IAAK,IAAI,IAAI,GAAI,OAC3G;QACF,MAAM+C,qBAAqBzF,sBAAuBuF,CAAAA,WAAW,CAAA;QAC7D,MAAMG,gBAA0B;YAC9B7H,OAAO8H,2BAA2B;YAClC9H,OAAO+H,iCAAiC;YACxC/H,OAAOgI,gCAAgC;YACvChI,OAAOiI,2BAA2B;YAClCjI,OAAOkI,iCAAiC;SACzC;QACD,wDAAwD;QACxD,MAAMC,gBAA0B,EAAE;QAClC,MAAMhC,QAAQtB,KAAKM,SAAS,CAAEiB,MAAM,CAClC,CAACC,KAAa7C,QACZ6C,MAAO7C,CAAAA,MAAM8C,sBAAsB,CAAE7D,CAAC,GAAGe,MAAM8C,sBAAsB,CAAE7D,CAAC,GAAG,CAAA,GAC7E;QAEF,IAAI2F,eAAe;QACnB,IAAIC,QAAQ;QAEZ,IAAIC,eAAe;QACnBzD,KAAKM,SAAS,CAAEC,GAAG,CAAC,CAAC5B,OAAuBL;YAC1C,MAAMoF,YAAY/E,MAAM8C,sBAAsB,CAAE7D,CAAC,GAAGe,MAAM8C,sBAAsB,CAAE7D,CAAC,GAAG;YACtF4F,QAAQ,AAACE,YAAYpC,QAAS;YAC9B,IAAIkC,QAAQ,GAAG;gBACbA,QAAQ;YACV,OAAO,IAAIA,QAAQ,KAAKA,UAAU,GAAG;gBACnCA,QAAQ;YACV;YACAC,gBAAgBD;YAEhB,OAAOC;QACT;QAEA;;;;;;;KAOC,GACD,MAAME,eAAeF,iBAAiB,IAAI,AAACA,CAAAA,eAAeV,kBAAiB,IAAK,MAAM;QAEtF,MAAMa,OAAO5D,KAAKM,SAAS,CAAEC,GAAG,CAAC,CAAC5B,OAAuBL;YACvD,MAAMkB,QAAgBb,MAAMa,KAAK,GAAGb,MAAMa,KAAK,GAAGwD,aAAa,CAACf,KAAK4B,KAAK,CAAC5B,KAAK6B,MAAM,KAAK,IAAI,GAAG;YAClG,MAAMJ,YAAY/E,MAAM8C,sBAAsB,CAAE7D,CAAC,GAAGe,MAAM8C,sBAAsB,CAAE7D,CAAC,GAAG;YACtF,IAAIU,QAAQ,GAAG;gBACbiF,gBAAgBC;YAClB;YACAA,QAAQ,AAACE,YAAYpC,QAAS;YAC9B,IAAIkC,QAAQ,GAAG;gBACbA,QAAQ;YACV,OAAO,IAAIA,QAAQ,KAAKA,UAAU,GAAG;gBACnCA,QAAQ,IAAIG;YACd,OAAO;gBACLH,QAAQA,QAAQG;YAClB;YACAL,cAAcjF,IAAI,CAACkF;YAEnB,MAAMQ,SAASpF,MAAM8C,sBAAsB,CAAE7D,CAAC;YAC9C,MAAMoG,mBAAmB;YACzB,MAAMC,mBAA4BrF,mBAAmBD,MAAM7B,MAAM,KAAK+B;YAEtE,yEAAyE;YACzE,IAAIP,UAAU0F,oBAAoBtI,MAAMwI,OAAO,KAAKrJ,0BAA0BsJ,aAAa,EAAE;gBAC3F,IAAIzI,MAAM0I,UAAU,EAAE;oBACpB,qBAAO,oBAACC;wBAAKC,KAAKhG;;gBACpB;gBAEA,MAAMiG,WAAWvE,KAAKM,SAAS,AAAC,CAAC,EAAE,CAACmB,sBAAsB,CAAE7D,CAAC;gBAE7D,qBACE,oBAACyG;oBACCC,KAAKhG;oBACLV,GAAG,GAAG5B,SAAS,MAAMsH,aAAa,CAAChF,MAAM,GAAGgF,aAAa,CAAChF,MAAM,CAAC,CAAC,CAAC;oBACnET,GAAGzB,aAAa;oBAChBoI,kBAAiB;oBACjBC,WAAW,CAAC,UAAU,EAAEzI,SAAS,CAAC,IAAI,EAAE,CAAC,CAAC;oBAC1C2F,WAAWC,QAAQ8C,QAAQ;oBAC3BC,eAAa;mBAEZ5J,2BAA2BwJ;YAGlC;YAEA,qBACE,oBAACK;gBACCN,KAAKhG;gBACLV,GAAG,GACD5B,SACI,MAAMsH,aAAa,CAAChF,MAAM,GAAGkF,QAAQlF,QAAQhB,sBAC7CgG,aAAa,CAAChF,MAAM,GAAGA,QAAQhB,oBACpC,CAAC,CAAC;gBACHO,GAAG;gBACHuB,OAAOoE,QAAQ;gBACflE,QAAQlD;gBACRyI,MAAMrF;gBACNsF,aACEvI,yBAAyBoC,MAAM7B,MAAM,KAAK,KAAK2B,CAAAA,QAASD,SAASC,OAAOsF,QAAQpF,SAASyD;gBAE3F2C,SAASxI,yBAAyBoC,MAAM7B,MAAM,KAAK,KAAK2B,CAAAA,QAASD,SAASC,OAAOsF,QAAQpF,SAASyD;gBAClG4C,MAAK;gBACLC,cAAYC,cAAcvG;gBAC1BwG,QAAQxF;gBACRyF,cAAczF;gBACdgC,WAAWC,QAAQyD,UAAU;gBAC7BC,SAASrB,mBAAmB,IAAI;gBAChCsB,UAAU3G,mBAAmBD,MAAM7B,MAAM,KAAM+B,yBAAyB,IAAIuD;;QAGlF;QACA,OAAOwB;IACT;IAEA,MAAMsB,gBAAgB,CAACvG;YAOdA;QANP,MAAM7B,SAAS6B,MAAMc,gBAAgB,IAAId,MAAM7B,MAAM;YAIV6B;QAH3C,MAAM6G,SACJ7G,MAAMe,gBAAgB,IACrBf,CAAAA,MAAM8C,sBAAsB,GACzB,GAAG9C,MAAM8C,sBAAsB,CAAC7D,CAAC,CAAC,CAAC,EAAEe,CAAAA,sCAAAA,MAAM8C,sBAAsB,CAACH,KAAK,cAAlC3C,iDAAAA,sCAAsC,IAAI,GAC/E,CAAA;QACN,OAAOA,EAAAA,kCAAAA,MAAM8G,wBAAwB,cAA9B9G,sDAAAA,gCAAgC+G,SAAS,KAAI,AAAC5I,CAAAA,SAAS,GAAGA,OAAO,EAAE,CAAC,GAAG,EAAC,IAAK,GAAG0I,OAAO,CAAC,CAAC;IAClG;IAEA,SAASG;QACP,OAAO,CAAEjK,CAAAA,MAAMsE,IAAI,IAAItE,MAAMsE,IAAI,CAAC4F,MAAM,GAAG,CAAA;IAC7C;IAEA,SAASrG,eAAesG,IAAY,EAAEC,IAAY;QAChD,MAAMC,YAAY,GAAG,+BAA+B;QACpD,MAAM,EAAEnI,CAAC,EAAEC,CAAC,EAAE,GAAGH;QAEjB,+BAA+B;QAC/B,MAAMsI,WAAW/D,KAAKgE,IAAI,CAAChE,KAAKiE,GAAG,CAACL,OAAOjI,GAAG,KAAKqE,KAAKiE,GAAG,CAACJ,OAAOjI,GAAG;QACtE,+EAA+E;QAC/E,IAAImI,WAAWD,WAAW;YACxBpI,iBAAiB;gBAAEC,GAAGiI;gBAAMhI,GAAGiI;YAAK;YACpCrI,eAAe;QACjB;IACF;IAEA9C,MAAMwL,SAAS,CAAC;YACGlK;QAAjB,MAAMmK,WAAWnK,CAAAA,2BAAAA,sCAAAA,0BAAAA,eAAgBoK,OAAO,cAAvBpK,8CAAAA,wBAAyBiD,qBAAqB,GAAGE,KAAK,KAAI;QAC3E,MAAMkH,qBAAqB;QAC3B,IAAIF,UAAU;YACZ,MAAMG,oBAAoB,AAACD,qBAAqBF,WAAY;YAC5D7I,uBAAuBgJ;QACzB;IACF,GAAG;QAACtK;KAAe;IAEnB,SAAS2C,mBAAmB4H,SAAkB;QAC5C,IAAIA,cAAcpE,WAAW;YAC3B,OAAO;QACT;QACA,OAAOtE,mBAAmB0I,aAAc1I,mBAAmB,MAAME,iBAAiBwI;IACpF;IAEA;wEACsE,GAEtE,SAAS3H;QACP,OAAOf,mBAAmB,MAAME,iBAAiB;IACnD;IAEA,MAAM,EAAEgC,IAAI,EAAE,GAAGtE;IACjBmE;IACA,MAAM+B,UAAUhH,4BAA4Bc;IAC5C,MAAM+K,kBAAkBrL;IACxB,MAAMsL,gBAAgBxG,eAAeF;IAErC,IAAI2G,YAAgC;IACpC,OAAO,CAAChB,gCACN,oBAACjE;QAAIC,WAAWC,QAAQgF,IAAI;QAAExB,cAAcxF;OACzCI,KAAMO,GAAG,CAAC,CAACsG,QAAoBvI;QAC9B,IAAIuI,OAAOvG,SAAS,IAAIuG,OAAOvG,SAAS,AAAC,CAAC,EAAE,IAAIuG,OAAOvG,SAAS,AAAC,CAAC,EAAE,CAACmB,sBAAsB,CAAE7D,CAAC,EAAE;YAC9F+I,YAAYE,OAAOvG,SAAS,AAAC,CAAC,EAAE,CAACmB,sBAAsB,CAAE7D,CAAC;QAC5D,OAAO;YACL+I,YAAY;QACd;QACArK,cAAcZ,MAAMoL,2BAA2B,GAC3C,QACAD,OAAOvG,SAAS,CAAEsF,MAAM,KAAK,KAAMiB,OAAOvG,SAAS,CAAEsF,MAAM,GAAG,KAAKiB,OAAOvG,SAAS,AAAC,CAAC,EAAE,CAACxD,MAAM,KAAK;QACvG,IAAIR,aAAa;YACfuK,OAAOvG,SAAS,AAAC,CAAC,EAAE,GAAG;gBACrBxD,QAAQ;gBACR2E,wBAAwB;oBACtB7D,GAAGiJ,OAAOvG,SAAS,AAAC,CAAC,EAAE,CAACmB,sBAAsB,CAAEH,KAAK,GAAIqF;oBACzDrF,OAAOuF,OAAOvG,SAAS,AAAC,CAAC,EAAE,CAACmB,sBAAsB,CAAEH,KAAK;gBAC3D;gBACA9B,OAAOrE,OAAO4L,sBAAsB;YACtC;QACF;QAEA,iEAAiE;QACjE,MAAMC,gBACJtL,MAAMwI,OAAO,KAAKrJ,0BAA0BsJ,aAAa,GAAG,OAAOpE,kBAAkB8G;QACvF,MAAMjD,OAAOhB,YAAYiE;QACzB,MAAMI,SAASnL,gBAAgB,MAAMwC;QACrC,+FAA+F;QAC/F;;;;YAII,GAEJ,qBACE,oBAACoD;YAAI4C,KAAKhG;yBACR,oBAACoD;YAAIC,WAAWC,QAAQsF,KAAK;YAAG,GAAGT,eAAe;yBAChD,oBAAC/E;YAAIC,WAAWC,QAAQuF,UAAU;WAC/BN,OAAQM,UAAU,kBACjB,oBAAC7L;YACCqG,WAAWC,QAAQwF,cAAc;YACjCC,SAASR,OAAQM,UAAU;YAC3B/F,mBAAmByF,OAAQS,2BAA2B;YAGzDN,gBAEFH,OAAQvG,SAAS,AAAC,CAAC,EAAE,CAACN,IAAI,IAAImC,iBAAiB0E,uBAChD,oBAACU;YAAIC,KAAKvL;YAAgB0F,WAAWC,QAAQ6F,KAAK;YAAExC,cAAY4B,OAAQM,UAAU;yBAChF,oBAACO;YACCC,IAAIV;YACJO,KAAK,CAACI;gBACJ1J,aAAa0J,GAAGf,OAAQvG,SAAS,AAAC,CAAC,EAAE,CAACxD,MAAM;YAC9C;YACA,yDAAyD;YACzD+K,SAAS;gBACP,MAAMC,IAAIjB,OAAQvG,SAAS,AAAC,CAAC,EAAE;gBAC/B,IAAIwH,KAAKA,EAAED,OAAO,EAAE;oBAClBC,EAAED,OAAO;gBACX;YACF;WAECjE;IAMb,kBACA,oBAACvI;QACC2B,eAAeA;QACfE,eAAeA;QACfiE,SAASzF,MAAMyF,OAAO;QACtBzD,eAAeA;QACfF,eAAeA;QACfV,QAAQA;QACRiL,QAAQtL;QACR+C,OAAO5C;QACPoL,mBAAmB;QACnBC,eAAe;YACbC,mBAAmBxM,MAAMyM,+BAA+B,GACpDzM,MAAMyM,+BAA+B,CAAC/K,mBACtCgF;YACJgG,oBAAoB1M,MAAM2M,wBAAwB,GAC9C3M,MAAM2M,wBAAwB,CAACjL,mBAC/BgF;QACN;QACAkG,aAAa;QAEd,CAAChM,6BACA,oBAACoF;QAAI8F,KAAK,CAACI,IAAuBhM,gBAAgByK,OAAO,GAAGuB;QAAIjG,WAAWC,QAAQhG,eAAe;OAC/F8K,gCAKP,oBAAChF;QAAIiG,IAAIxL;QAAe6I,MAAM;QAASrC,OAAO;YAAE2C,SAAS;QAAI;QAAGL,cAAY;;AAE9E,0DAA0D;AAC5D,GAAG;AACHzJ,mBAAmB+M,WAAW,GAAG"}

package/lib/components/HorizontalBarChart/useHorizontalBarChartStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { HorizontalBarChartVariant } from './index';

package/lib/components/HorizontalBarChart/useHorizontalBarChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","HorizontalBarChartVariant","HighContrastSelector","hbcClassNames","root","items","chart","chartTitle","barWrapper","chartTitleLeft","chartTitleRight","chartDataTextDenominator","benchmarkContainer","triangle","barLabel","chartWrapper","legendContainer","useStyles","mc9l5x","Beiy3e4","a9b677","items10pMargin","jrapky","items16pMargin","Bqenvij","B68tc82","Bmxbyg5","Bpg54ce","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Brf1p80","ygn44y","Huce71","sj55zd","chartTitleLeft4pMargin","chartTitleLeft5pMargin","qhf8xq","B6of3ja","ibv6hh","wvpqe5","zhjwy3","Bekrc4i","vrafjx","h3c5rm","B4j52fo","icvyot","g2u3we","Bkfmm31","Bpvj6i6","chartWrapper40ppadding","z189sj","chartWrapper0ppadding","z8tnut","d","p","m","useHorizontalBarChartStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","_props_styles5","_props_styles6","_props_styles7","_props_styles8","_props_styles9","_props_styles10","_props_styles11","_props_styles12","className","showTriangle","variant","hideLabels","baseStyles","styles","AbsoluteScale"],"sources":["useHorizontalBarChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HorizontalBarChartVariant } from './index';\nimport { HighContrastSelector } from '../../utilities/index';\n/**\n * @internal\n */ export const hbcClassNames = {\n    root: 'fui-hbc__root',\n    items: 'fui-hbc__items',\n    chart: 'fui-hbc__chart',\n    chartTitle: 'fui-hbc__chartTitle',\n    barWrapper: 'fui-hbc__barWrapper',\n    chartTitleLeft: 'fui-hbc__chartTitleLeft',\n    chartTitleRight: 'fui-hbc__chartTitleRight',\n    chartDataTextDenominator: 'fui-hbc__textDenom',\n    benchmarkContainer: 'fui-hbc__benchmark',\n    triangle: 'fui-hbc__triangle',\n    barLabel: 'fui-hbc__barLabel',\n    chartWrapper: 'fui-hbc__chartWrapper',\n    legendContainer: 'fui-hbc__legendContainer'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%'\n    },\n    items10pMargin: {\n        marginBottom: tokens.spacingVerticalMNudge\n    },\n    items16pMargin: {\n        marginBottom: tokens.spacingVerticalL\n    },\n    chart: {\n        width: '100%',\n        height: '12px',\n        display: 'block',\n        overflow: 'visible'\n    },\n    barWrapper: {},\n    chartTitle: {\n        ...typographyStyles.caption1,\n        display: 'flex',\n        justifyContent: 'space-between'\n    },\n    chartTitleLeft: {\n        textOverflow: 'ellipsis',\n        overflow: 'hidden',\n        whiteSpace: 'nowrap',\n        display: 'block',\n        color: tokens.colorNeutralForeground1\n    },\n    chartTitleLeft4pMargin: {\n        marginBottom: '4px'\n    },\n    chartTitleLeft5pMargin: {\n        marginBottom: '5px'\n    },\n    chartTitleRight: {\n        ...typographyStyles.body1Strong,\n        color: tokens.colorNeutralForeground1\n    },\n    chartDataTextDenominator: {\n        ...typographyStyles.body1,\n        color: tokens.colorNeutralForeground1\n    },\n    benchmarkContainer: {\n        position: 'relative',\n        height: '7px',\n        marginTop: '-3px',\n        marginBottom: '-1px'\n    },\n    triangle: {\n        width: '0',\n        height: '0',\n        ...shorthands.borderLeft('4px', 'solid', 'transparent'),\n        ...shorthands.borderRight('4px', 'solid', 'transparent'),\n        ...shorthands.borderTop('7px', 'solid'),\n        borderTopColor: tokens.colorPaletteBlueBorderActive,\n        marginBottom: tokens.spacingVerticalXS,\n        position: 'absolute'\n    },\n    barLabel: {\n        ...typographyStyles.caption1Strong,\n        fill: tokens.colorNeutralForeground1,\n        [HighContrastSelector]: {\n            stroke: 'CanvasText'\n        }\n    },\n    chartWrapper40ppadding: {\n        paddingRight: '40p'\n    },\n    chartWrapper0ppadding: {\n        paddingRight: tokens.spacingHorizontalNone\n    },\n    legendContainer: {\n        paddingTop: tokens.spacingVerticalL\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useHorizontalBarChartStyles = (props)=>{\n    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8, _props_styles9, _props_styles10, _props_styles11, _props_styles12;\n    const { className, showTriangle, variant, hideLabels } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(hbcClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        items: mergeClasses(hbcClassNames.items, showTriangle || variant === HorizontalBarChartVariant.AbsoluteScale ? baseStyles.items16pMargin : baseStyles.items10pMargin, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.items),\n        chart: mergeClasses(hbcClassNames.chart, baseStyles.chart, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.chart),\n        chartTitle: mergeClasses(hbcClassNames.chartTitle, baseStyles.chartTitle, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartTitle),\n        barWrapper: mergeClasses(hbcClassNames.barWrapper, baseStyles.barWrapper, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.barWrapper),\n        chartTitleLeft: mergeClasses(hbcClassNames.chartTitleLeft, baseStyles.chartTitleLeft, variant === HorizontalBarChartVariant.AbsoluteScale ? baseStyles.chartTitleLeft4pMargin : baseStyles.chartTitleLeft5pMargin, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.chartTitleLeft),\n        chartTitleRight: mergeClasses(hbcClassNames.chartTitleRight, baseStyles.chartTitleRight, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.chartTitleRight),\n        chartDataTextDenominator: mergeClasses(hbcClassNames.chartDataTextDenominator, baseStyles.chartDataTextDenominator, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.chartDataTextDenominator),\n        benchmarkContainer: mergeClasses(hbcClassNames.benchmarkContainer, baseStyles.benchmarkContainer, (_props_styles8 = props.styles) === null || _props_styles8 === void 0 ? void 0 : _props_styles8.benchmarkContainer),\n        triangle: mergeClasses(hbcClassNames.triangle, baseStyles.triangle, (_props_styles9 = props.styles) === null || _props_styles9 === void 0 ? void 0 : _props_styles9.triangle),\n        barLabel: mergeClasses(hbcClassNames.barLabel, baseStyles.barLabel, (_props_styles10 = props.styles) === null || _props_styles10 === void 0 ? void 0 : _props_styles10.barLabel),\n        chartWrapper: mergeClasses(hbcClassNames.chartWrapper, variant === HorizontalBarChartVariant.AbsoluteScale && !hideLabels ? baseStyles.chartWrapper40ppadding : baseStyles.chartWrapper0ppadding, (_props_styles11 = props.styles) === null || _props_styles11 === void 0 ? void 0 : _props_styles11.chartWrapper),\n        legendContainer: mergeClasses(hbcClassNames.legendContainer, baseStyles.legendContainer, (_props_styles12 = props.styles) === null || _props_styles12 === void 0 ? void 0 : _props_styles12.legendContainer)\n    };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","HorizontalBarChartVariant","HighContrastSelector","hbcClassNames","root","items","chart","chartTitle","barWrapper","chartTitleLeft","chartTitleRight","chartDataTextDenominator","benchmarkContainer","triangle","barLabel","chartWrapper","legendContainer","useStyles","mc9l5x","Beiy3e4","a9b677","items10pMargin","jrapky","items16pMargin","Bqenvij","B68tc82","Bmxbyg5","Bpg54ce","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Brf1p80","ygn44y","Huce71","sj55zd","chartTitleLeft4pMargin","chartTitleLeft5pMargin","qhf8xq","B6of3ja","ibv6hh","wvpqe5","zhjwy3","Bekrc4i","vrafjx","h3c5rm","B4j52fo","icvyot","g2u3we","Bkfmm31","Bpvj6i6","chartWrapper40ppadding","z189sj","chartWrapper0ppadding","z8tnut","d","p","m","useHorizontalBarChartStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","_props_styles5","_props_styles6","_props_styles7","_props_styles8","_props_styles9","_props_styles10","_props_styles11","_props_styles12","className","showTriangle","variant","hideLabels","baseStyles","styles","AbsoluteScale"],"sources":["useHorizontalBarChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HorizontalBarChartVariant } from './index';\nimport { HighContrastSelector } from '../../utilities/index';\n/**\n * @internal\n */ export const hbcClassNames = {\n    root: 'fui-hbc__root',\n    items: 'fui-hbc__items',\n    chart: 'fui-hbc__chart',\n    chartTitle: 'fui-hbc__chartTitle',\n    barWrapper: 'fui-hbc__barWrapper',\n    chartTitleLeft: 'fui-hbc__chartTitleLeft',\n    chartTitleRight: 'fui-hbc__chartTitleRight',\n    chartDataTextDenominator: 'fui-hbc__textDenom',\n    benchmarkContainer: 'fui-hbc__benchmark',\n    triangle: 'fui-hbc__triangle',\n    barLabel: 'fui-hbc__barLabel',\n    chartWrapper: 'fui-hbc__chartWrapper',\n    legendContainer: 'fui-hbc__legendContainer'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%'\n    },\n    items10pMargin: {\n        marginBottom: tokens.spacingVerticalMNudge\n    },\n    items16pMargin: {\n        marginBottom: tokens.spacingVerticalL\n    },\n    chart: {\n        width: '100%',\n        height: '12px',\n        display: 'block',\n        overflow: 'visible'\n    },\n    barWrapper: {},\n    chartTitle: {\n        ...typographyStyles.caption1,\n        display: 'flex',\n        justifyContent: 'space-between'\n    },\n    chartTitleLeft: {\n        textOverflow: 'ellipsis',\n        overflow: 'hidden',\n        whiteSpace: 'nowrap',\n        display: 'block',\n        color: tokens.colorNeutralForeground1\n    },\n    chartTitleLeft4pMargin: {\n        marginBottom: '4px'\n    },\n    chartTitleLeft5pMargin: {\n        marginBottom: '5px'\n    },\n    chartTitleRight: {\n        ...typographyStyles.body1Strong,\n        color: tokens.colorNeutralForeground1\n    },\n    chartDataTextDenominator: {\n        ...typographyStyles.body1,\n        color: tokens.colorNeutralForeground1\n    },\n    benchmarkContainer: {\n        position: 'relative',\n        height: '7px',\n        marginTop: '-3px',\n        marginBottom: '-1px'\n    },\n    triangle: {\n        width: '0',\n        height: '0',\n        ...shorthands.borderLeft('4px', 'solid', 'transparent'),\n        ...shorthands.borderRight('4px', 'solid', 'transparent'),\n        ...shorthands.borderTop('7px', 'solid'),\n        borderTopColor: tokens.colorPaletteBlueBorderActive,\n        marginBottom: tokens.spacingVerticalXS,\n        position: 'absolute'\n    },\n    barLabel: {\n        ...typographyStyles.caption1Strong,\n        fill: tokens.colorNeutralForeground1,\n        [HighContrastSelector]: {\n            stroke: 'CanvasText'\n        }\n    },\n    chartWrapper40ppadding: {\n        paddingRight: '40p'\n    },\n    chartWrapper0ppadding: {\n        paddingRight: tokens.spacingHorizontalNone\n    },\n    legendContainer: {\n        paddingTop: tokens.spacingVerticalL\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useHorizontalBarChartStyles = (props)=>{\n    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8, _props_styles9, _props_styles10, _props_styles11, _props_styles12;\n    const { className, showTriangle, variant, hideLabels } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(hbcClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        items: mergeClasses(hbcClassNames.items, showTriangle || variant === HorizontalBarChartVariant.AbsoluteScale ? baseStyles.items16pMargin : baseStyles.items10pMargin, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.items),\n        chart: mergeClasses(hbcClassNames.chart, baseStyles.chart, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.chart),\n        chartTitle: mergeClasses(hbcClassNames.chartTitle, baseStyles.chartTitle, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartTitle),\n        barWrapper: mergeClasses(hbcClassNames.barWrapper, baseStyles.barWrapper, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.barWrapper),\n        chartTitleLeft: mergeClasses(hbcClassNames.chartTitleLeft, baseStyles.chartTitleLeft, variant === HorizontalBarChartVariant.AbsoluteScale ? baseStyles.chartTitleLeft4pMargin : baseStyles.chartTitleLeft5pMargin, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.chartTitleLeft),\n        chartTitleRight: mergeClasses(hbcClassNames.chartTitleRight, baseStyles.chartTitleRight, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.chartTitleRight),\n        chartDataTextDenominator: mergeClasses(hbcClassNames.chartDataTextDenominator, baseStyles.chartDataTextDenominator, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.chartDataTextDenominator),\n        benchmarkContainer: mergeClasses(hbcClassNames.benchmarkContainer, baseStyles.benchmarkContainer, (_props_styles8 = props.styles) === null || _props_styles8 === void 0 ? void 0 : _props_styles8.benchmarkContainer),\n        triangle: mergeClasses(hbcClassNames.triangle, baseStyles.triangle, (_props_styles9 = props.styles) === null || _props_styles9 === void 0 ? void 0 : _props_styles9.triangle),\n        barLabel: mergeClasses(hbcClassNames.barLabel, baseStyles.barLabel, (_props_styles10 = props.styles) === null || _props_styles10 === void 0 ? void 0 : _props_styles10.barLabel),\n        chartWrapper: mergeClasses(hbcClassNames.chartWrapper, variant === HorizontalBarChartVariant.AbsoluteScale && !hideLabels ? baseStyles.chartWrapper40ppadding : baseStyles.chartWrapper0ppadding, (_props_styles11 = props.styles) === null || _props_styles11 === void 0 ? void 0 : _props_styles11.chartWrapper),\n        legendContainer: mergeClasses(hbcClassNames.legendContainer, baseStyles.legendContainer, (_props_styles12 = props.styles) === null || _props_styles12 === void 0 ? void 0 : _props_styles12.legendContainer)\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/HorizontalBarChart/useHorizontalBarChartStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { HorizontalBarChartVariant } from './index';

package/lib/components/HorizontalBarChart/useHorizontalBarChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/HorizontalBarChart/useHorizontalBarChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HorizontalBarChartProps, HorizontalBarChartStyles, HorizontalBarChartVariant } from './index';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { HighContrastSelector } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const hbcClassNames: SlotClassNames<HorizontalBarChartStyles> = {\n  root: 'fui-hbc__root',\n  items: 'fui-hbc__items',\n  chart: 'fui-hbc__chart',\n  chartTitle: 'fui-hbc__chartTitle',\n  barWrapper: 'fui-hbc__barWrapper',\n  chartTitleLeft: 'fui-hbc__chartTitleLeft',\n  chartTitleRight: 'fui-hbc__chartTitleRight',\n  chartDataTextDenominator: 'fui-hbc__textDenom',\n  benchmarkContainer: 'fui-hbc__benchmark',\n  triangle: 'fui-hbc__triangle',\n  barLabel: 'fui-hbc__barLabel',\n  chartWrapper: 'fui-hbc__chartWrapper',\n  legendContainer: 'fui-hbc__legendContainer',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%', // Support custom width\n  },\n  items10pMargin: {\n    marginBottom: tokens.spacingVerticalMNudge,\n  },\n  items16pMargin: {\n    marginBottom: tokens.spacingVerticalL,\n  },\n  chart: {\n    width: '100%',\n    height: '12px', // Support custom bar height\n    display: 'block',\n    overflow: 'visible',\n  },\n  barWrapper: {},\n  chartTitle: {\n    ...typographyStyles.caption1,\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  chartTitleLeft: {\n    textOverflow: 'ellipsis',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n    display: 'block',\n    color: tokens.colorNeutralForeground1,\n  },\n  chartTitleLeft4pMargin: {\n    marginBottom: '4px',\n  },\n  chartTitleLeft5pMargin: {\n    marginBottom: '5px',\n  },\n  chartTitleRight: {\n    ...typographyStyles.body1Strong,\n    color: tokens.colorNeutralForeground1,\n  },\n  chartDataTextDenominator: {\n    ...typographyStyles.body1,\n    color: tokens.colorNeutralForeground1,\n  },\n  benchmarkContainer: {\n    position: 'relative',\n    height: '7px',\n    marginTop: '-3px',\n    marginBottom: '-1px',\n  },\n  triangle: {\n    width: '0',\n    height: '0',\n    ...shorthands.borderLeft('4px', 'solid', 'transparent'),\n    ...shorthands.borderRight('4px', 'solid', 'transparent'),\n    ...shorthands.borderTop('7px', 'solid'),\n    borderTopColor: tokens.colorPaletteBlueBorderActive,\n    marginBottom: tokens.spacingVerticalXS,\n    position: 'absolute',\n  },\n  barLabel: {\n    ...typographyStyles.caption1Strong,\n    fill: tokens.colorNeutralForeground1,\n    [HighContrastSelector]: {\n      stroke: 'CanvasText',\n    },\n  },\n  chartWrapper40ppadding: {\n    paddingRight: '40p',\n  },\n  chartWrapper0ppadding: {\n    paddingRight: tokens.spacingHorizontalNone,\n  },\n  legendContainer: { paddingTop: tokens.spacingVerticalL },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useHorizontalBarChartStyles = (props: HorizontalBarChartProps): HorizontalBarChartStyles => {\n  const { className, showTriangle, variant, hideLabels } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(hbcClassNames.root, baseStyles.root, className, props.styles?.root),\n    items: mergeClasses(\n      hbcClassNames.items,\n      showTriangle || variant === HorizontalBarChartVariant.AbsoluteScale\n        ? baseStyles.items16pMargin\n        : baseStyles.items10pMargin,\n      props.styles?.items,\n    ),\n    chart: mergeClasses(hbcClassNames.chart, baseStyles.chart, props.styles?.chart),\n    chartTitle: mergeClasses(hbcClassNames.chartTitle, baseStyles.chartTitle, props.styles?.chartTitle),\n    barWrapper: mergeClasses(hbcClassNames.barWrapper, baseStyles.barWrapper, props.styles?.barWrapper),\n    chartTitleLeft: mergeClasses(\n      hbcClassNames.chartTitleLeft,\n      baseStyles.chartTitleLeft,\n      variant === HorizontalBarChartVariant.AbsoluteScale\n        ? baseStyles.chartTitleLeft4pMargin\n        : baseStyles.chartTitleLeft5pMargin,\n      props.styles?.chartTitleLeft,\n    ),\n    chartTitleRight: mergeClasses(\n      hbcClassNames.chartTitleRight,\n      baseStyles.chartTitleRight,\n      props.styles?.chartTitleRight,\n    ),\n    chartDataTextDenominator: mergeClasses(\n      hbcClassNames.chartDataTextDenominator,\n      baseStyles.chartDataTextDenominator,\n      props.styles?.chartDataTextDenominator,\n    ),\n    benchmarkContainer: mergeClasses(\n      hbcClassNames.benchmarkContainer,\n      baseStyles.benchmarkContainer,\n      props.styles?.benchmarkContainer,\n    ),\n    triangle: mergeClasses(hbcClassNames.triangle, baseStyles.triangle, props.styles?.triangle),\n    barLabel: mergeClasses(hbcClassNames.barLabel, baseStyles.barLabel, props.styles?.barLabel),\n    chartWrapper: mergeClasses(\n      hbcClassNames.chartWrapper,\n      variant === HorizontalBarChartVariant.AbsoluteScale && !hideLabels\n        ? baseStyles.chartWrapper40ppadding\n        : baseStyles.chartWrapper0ppadding,\n      props.styles?.chartWrapper,\n    ),\n    legendContainer: mergeClasses(\n      hbcClassNames.legendContainer,\n      baseStyles.legendContainer,\n      props.styles?.legendContainer,\n    ),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","HorizontalBarChartVariant","HighContrastSelector","hbcClassNames","root","items","chart","chartTitle","barWrapper","chartTitleLeft","chartTitleRight","chartDataTextDenominator","benchmarkContainer","triangle","barLabel","chartWrapper","legendContainer","useStyles","display","flexDirection","width","items10pMargin","marginBottom","spacingVerticalMNudge","items16pMargin","spacingVerticalL","height","overflow","caption1","justifyContent","textOverflow","whiteSpace","color","colorNeutralForeground1","chartTitleLeft4pMargin","chartTitleLeft5pMargin","body1Strong","body1","position","marginTop","borderLeft","borderRight","borderTop","borderTopColor","colorPaletteBlueBorderActive","spacingVerticalXS","caption1Strong","fill","stroke","chartWrapper40ppadding","paddingRight","chartWrapper0ppadding","spacingHorizontalNone","paddingTop","useHorizontalBarChartStyles","props","className","showTriangle","variant","hideLabels","baseStyles","styles","AbsoluteScale"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAA4DC,yBAAyB,QAAQ,UAAU;AAEvG,SAASC,oBAAoB,QAAQ,wBAAwB;AAE7D;;CAEC,GACD,OAAO,MAAMC,gBAA0D;IACrEC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,YAAY;IACZC,YAAY;IACZC,gBAAgB;IAChBC,iBAAiB;IACjBC,0BAA0B;IAC1BC,oBAAoB;IACpBC,UAAU;IACVC,UAAU;IACVC,cAAc;IACdC,iBAAiB;AACnB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYrB,WAAW;IAC3BQ,MAAM;QACJc,SAAS;QACTC,eAAe;QACfC,OAAO;IACT;IACAC,gBAAgB;QACdC,cAAcvB,OAAOwB,qBAAqB;IAC5C;IACAC,gBAAgB;QACdF,cAAcvB,OAAO0B,gBAAgB;IACvC;IACAnB,OAAO;QACLc,OAAO;QACPM,QAAQ;QACRR,SAAS;QACTS,UAAU;IACZ;IACAnB,YAAY,CAAC;IACbD,YAAY;QACV,GAAGP,iBAAiB4B,QAAQ;QAC5BV,SAAS;QACTW,gBAAgB;IAClB;IACApB,gBAAgB;QACdqB,cAAc;QACdH,UAAU;QACVI,YAAY;QACZb,SAAS;QACTc,OAAOjC,OAAOkC,uBAAuB;IACvC;IACAC,wBAAwB;QACtBZ,cAAc;IAChB;IACAa,wBAAwB;QACtBb,cAAc;IAChB;IACAZ,iBAAiB;QACf,GAAGV,iBAAiBoC,WAAW;QAC/BJ,OAAOjC,OAAOkC,uBAAuB;IACvC;IACAtB,0BAA0B;QACxB,GAAGX,iBAAiBqC,KAAK;QACzBL,OAAOjC,OAAOkC,uBAAuB;IACvC;IACArB,oBAAoB;QAClB0B,UAAU;QACVZ,QAAQ;QACRa,WAAW;QACXjB,cAAc;IAChB;IACAT,UAAU;QACRO,OAAO;QACPM,QAAQ;QACR,GAAG5B,WAAW0C,UAAU,CAAC,OAAO,SAAS,cAAc;QACvD,GAAG1C,WAAW2C,WAAW,CAAC,OAAO,SAAS,cAAc;QACxD,GAAG3C,WAAW4C,SAAS,CAAC,OAAO,QAAQ;QACvCC,gBAAgB5C,OAAO6C,4BAA4B;QACnDtB,cAAcvB,OAAO8C,iBAAiB;QACtCP,UAAU;IACZ;IACAxB,UAAU;QACR,GAAGd,iBAAiB8C,cAAc;QAClCC,MAAMhD,OAAOkC,uBAAuB;QACpC,CAAC/B,qBAAqB,EAAE;YACtB8C,QAAQ;QACV;IACF;IACAC,wBAAwB;QACtBC,cAAc;IAChB;IACAC,uBAAuB;QACrBD,cAAcnD,OAAOqD,qBAAqB;IAC5C;IACApC,iBAAiB;QAAEqC,YAAYtD,OAAO0B,gBAAgB;IAAC;AACzD;AAEA;;CAEC,GACD,OAAO,MAAM6B,8BAA8B,CAACC;QAK2BA,eAMjEA,gBAEyDA,gBACeA,gBACAA,gBAOxEA,gBAKAA,gBAKAA,gBAKAA,gBAEkEA,gBACAA,iBAMlEA,iBAKAA;IAlDJ,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGJ,OAAO,qEAAqE;IACrI,MAAMK,aAAa3C;IAEnB,OAAO;QACLb,MAAMP,aAAaM,cAAcC,IAAI,EAAEwD,WAAWxD,IAAI,EAAEoD,YAAWD,gBAAAA,MAAMM,MAAM,cAAZN,oCAAAA,cAAcnD,IAAI;QACrFC,OAAOR,aACLM,cAAcE,KAAK,EACnBoD,gBAAgBC,YAAYzD,0BAA0B6D,aAAa,GAC/DF,WAAWpC,cAAc,GACzBoC,WAAWvC,cAAc,GAC7BkC,iBAAAA,MAAMM,MAAM,cAAZN,qCAAAA,eAAclD,KAAK;QAErBC,OAAOT,aAAaM,cAAcG,KAAK,EAAEsD,WAAWtD,KAAK,GAAEiD,iBAAAA,MAAMM,MAAM,cAAZN,qCAAAA,eAAcjD,KAAK;QAC9EC,YAAYV,aAAaM,cAAcI,UAAU,EAAEqD,WAAWrD,UAAU,GAAEgD,iBAAAA,MAAMM,MAAM,cAAZN,qCAAAA,eAAchD,UAAU;QAClGC,YAAYX,aAAaM,cAAcK,UAAU,EAAEoD,WAAWpD,UAAU,GAAE+C,iBAAAA,MAAMM,MAAM,cAAZN,qCAAAA,eAAc/C,UAAU;QAClGC,gBAAgBZ,aACdM,cAAcM,cAAc,EAC5BmD,WAAWnD,cAAc,EACzBiD,YAAYzD,0BAA0B6D,aAAa,GAC/CF,WAAW1B,sBAAsB,GACjC0B,WAAWzB,sBAAsB,GACrCoB,iBAAAA,MAAMM,MAAM,cAAZN,qCAAAA,eAAc9C,cAAc;QAE9BC,iBAAiBb,aACfM,cAAcO,eAAe,EAC7BkD,WAAWlD,eAAe,GAC1B6C,iBAAAA,MAAMM,MAAM,cAAZN,qCAAAA,eAAc7C,eAAe;QAE/BC,0BAA0Bd,aACxBM,cAAcQ,wBAAwB,EACtCiD,WAAWjD,wBAAwB,GACnC4C,iBAAAA,MAAMM,MAAM,cAAZN,qCAAAA,eAAc5C,wBAAwB;QAExCC,oBAAoBf,aAClBM,cAAcS,kBAAkB,EAChCgD,WAAWhD,kBAAkB,GAC7B2C,iBAAAA,MAAMM,MAAM,cAAZN,qCAAAA,eAAc3C,kBAAkB;QAElCC,UAAUhB,aAAaM,cAAcU,QAAQ,EAAE+C,WAAW/C,QAAQ,GAAE0C,iBAAAA,MAAMM,MAAM,cAAZN,qCAAAA,eAAc1C,QAAQ;QAC1FC,UAAUjB,aAAaM,cAAcW,QAAQ,EAAE8C,WAAW9C,QAAQ,GAAEyC,kBAAAA,MAAMM,MAAM,cAAZN,sCAAAA,gBAAczC,QAAQ;QAC1FC,cAAclB,aACZM,cAAcY,YAAY,EAC1B2C,YAAYzD,0BAA0B6D,aAAa,IAAI,CAACH,aACpDC,WAAWX,sBAAsB,GACjCW,WAAWT,qBAAqB,GACpCI,kBAAAA,MAAMM,MAAM,cAAZN,sCAAAA,gBAAcxC,YAAY;QAE5BC,iBAAiBnB,aACfM,cAAca,eAAe,EAC7B4C,WAAW5C,eAAe,GAC1BuC,kBAAAA,MAAMM,MAAM,cAAZN,sCAAAA,gBAAcvC,eAAe;IAEjC;AACF,EAAE"}
+{"version":3,"sources":["../src/components/HorizontalBarChart/useHorizontalBarChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HorizontalBarChartProps, HorizontalBarChartStyles, HorizontalBarChartVariant } from './index';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { HighContrastSelector } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const hbcClassNames: SlotClassNames<HorizontalBarChartStyles> = {\n  root: 'fui-hbc__root',\n  items: 'fui-hbc__items',\n  chart: 'fui-hbc__chart',\n  chartTitle: 'fui-hbc__chartTitle',\n  barWrapper: 'fui-hbc__barWrapper',\n  chartTitleLeft: 'fui-hbc__chartTitleLeft',\n  chartTitleRight: 'fui-hbc__chartTitleRight',\n  chartDataTextDenominator: 'fui-hbc__textDenom',\n  benchmarkContainer: 'fui-hbc__benchmark',\n  triangle: 'fui-hbc__triangle',\n  barLabel: 'fui-hbc__barLabel',\n  chartWrapper: 'fui-hbc__chartWrapper',\n  legendContainer: 'fui-hbc__legendContainer',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%', // Support custom width\n  },\n  items10pMargin: {\n    marginBottom: tokens.spacingVerticalMNudge,\n  },\n  items16pMargin: {\n    marginBottom: tokens.spacingVerticalL,\n  },\n  chart: {\n    width: '100%',\n    height: '12px', // Support custom bar height\n    display: 'block',\n    overflow: 'visible',\n  },\n  barWrapper: {},\n  chartTitle: {\n    ...typographyStyles.caption1,\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  chartTitleLeft: {\n    textOverflow: 'ellipsis',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n    display: 'block',\n    color: tokens.colorNeutralForeground1,\n  },\n  chartTitleLeft4pMargin: {\n    marginBottom: '4px',\n  },\n  chartTitleLeft5pMargin: {\n    marginBottom: '5px',\n  },\n  chartTitleRight: {\n    ...typographyStyles.body1Strong,\n    color: tokens.colorNeutralForeground1,\n  },\n  chartDataTextDenominator: {\n    ...typographyStyles.body1,\n    color: tokens.colorNeutralForeground1,\n  },\n  benchmarkContainer: {\n    position: 'relative',\n    height: '7px',\n    marginTop: '-3px',\n    marginBottom: '-1px',\n  },\n  triangle: {\n    width: '0',\n    height: '0',\n    ...shorthands.borderLeft('4px', 'solid', 'transparent'),\n    ...shorthands.borderRight('4px', 'solid', 'transparent'),\n    ...shorthands.borderTop('7px', 'solid'),\n    borderTopColor: tokens.colorPaletteBlueBorderActive,\n    marginBottom: tokens.spacingVerticalXS,\n    position: 'absolute',\n  },\n  barLabel: {\n    ...typographyStyles.caption1Strong,\n    fill: tokens.colorNeutralForeground1,\n    [HighContrastSelector]: {\n      stroke: 'CanvasText',\n    },\n  },\n  chartWrapper40ppadding: {\n    paddingRight: '40p',\n  },\n  chartWrapper0ppadding: {\n    paddingRight: tokens.spacingHorizontalNone,\n  },\n  legendContainer: { paddingTop: tokens.spacingVerticalL },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useHorizontalBarChartStyles = (props: HorizontalBarChartProps): HorizontalBarChartStyles => {\n  const { className, showTriangle, variant, hideLabels } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(hbcClassNames.root, baseStyles.root, className, props.styles?.root),\n    items: mergeClasses(\n      hbcClassNames.items,\n      showTriangle || variant === HorizontalBarChartVariant.AbsoluteScale\n        ? baseStyles.items16pMargin\n        : baseStyles.items10pMargin,\n      props.styles?.items,\n    ),\n    chart: mergeClasses(hbcClassNames.chart, baseStyles.chart, props.styles?.chart),\n    chartTitle: mergeClasses(hbcClassNames.chartTitle, baseStyles.chartTitle, props.styles?.chartTitle),\n    barWrapper: mergeClasses(hbcClassNames.barWrapper, baseStyles.barWrapper, props.styles?.barWrapper),\n    chartTitleLeft: mergeClasses(\n      hbcClassNames.chartTitleLeft,\n      baseStyles.chartTitleLeft,\n      variant === HorizontalBarChartVariant.AbsoluteScale\n        ? baseStyles.chartTitleLeft4pMargin\n        : baseStyles.chartTitleLeft5pMargin,\n      props.styles?.chartTitleLeft,\n    ),\n    chartTitleRight: mergeClasses(\n      hbcClassNames.chartTitleRight,\n      baseStyles.chartTitleRight,\n      props.styles?.chartTitleRight,\n    ),\n    chartDataTextDenominator: mergeClasses(\n      hbcClassNames.chartDataTextDenominator,\n      baseStyles.chartDataTextDenominator,\n      props.styles?.chartDataTextDenominator,\n    ),\n    benchmarkContainer: mergeClasses(\n      hbcClassNames.benchmarkContainer,\n      baseStyles.benchmarkContainer,\n      props.styles?.benchmarkContainer,\n    ),\n    triangle: mergeClasses(hbcClassNames.triangle, baseStyles.triangle, props.styles?.triangle),\n    barLabel: mergeClasses(hbcClassNames.barLabel, baseStyles.barLabel, props.styles?.barLabel),\n    chartWrapper: mergeClasses(\n      hbcClassNames.chartWrapper,\n      variant === HorizontalBarChartVariant.AbsoluteScale && !hideLabels\n        ? baseStyles.chartWrapper40ppadding\n        : baseStyles.chartWrapper0ppadding,\n      props.styles?.chartWrapper,\n    ),\n    legendContainer: mergeClasses(\n      hbcClassNames.legendContainer,\n      baseStyles.legendContainer,\n      props.styles?.legendContainer,\n    ),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","HorizontalBarChartVariant","HighContrastSelector","hbcClassNames","root","items","chart","chartTitle","barWrapper","chartTitleLeft","chartTitleRight","chartDataTextDenominator","benchmarkContainer","triangle","barLabel","chartWrapper","legendContainer","useStyles","display","flexDirection","width","items10pMargin","marginBottom","spacingVerticalMNudge","items16pMargin","spacingVerticalL","height","overflow","caption1","justifyContent","textOverflow","whiteSpace","color","colorNeutralForeground1","chartTitleLeft4pMargin","chartTitleLeft5pMargin","body1Strong","body1","position","marginTop","borderLeft","borderRight","borderTop","borderTopColor","colorPaletteBlueBorderActive","spacingVerticalXS","caption1Strong","fill","stroke","chartWrapper40ppadding","paddingRight","chartWrapper0ppadding","spacingHorizontalNone","paddingTop","useHorizontalBarChartStyles","props","className","showTriangle","variant","hideLabels","baseStyles","styles","AbsoluteScale"],"mappings":"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"}

package/lib/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { max as d3Max, min as d3Min } from 'd3-array';
 import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand } from 'd3-scale';