@fluentui/react-charts 0.0.0-nightly-20250423-0405.1 → 0.0.0-nightly-20250423-1415.1

package/lib-commonjs/components/HeatMapChart/HeatMapChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["HeatMapChart.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HeatMapChartProps } from './HeatMapChart.types';\nimport { AccessibilityProps, Chart, HeatMapChartData, HeatMapChartDataPoint, Margins } from '../../types/index';\nimport {\n  ChartTypes,\n  convertToLocaleString,\n  getAccessibleDataObject,\n  getColorContrast,\n  getTypeOfAxis,\n  resolveCSSVariables,\n  XAxisTypes,\n  YAxisType,\n} from '../../utilities/index';\nimport { CartesianChart, ChartPopoverProps, ChildProps } from '../CommonComponents/index';\nimport { useId } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useHeatMapChartStyles } from './useHeatMapChartStyles.styles';\nimport { Legend, Legends } from '../Legends/index';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { format as d3Format } from 'd3-format';\nimport { timeFormat as d3TimeFormat } from 'd3-time-format';\n\ntype DataSet = {\n  dataSet: RectanglesGraphData;\n  yAxisPoints: string[];\n  xAxisPoints: string[];\n};\ntype FlattenData = HeatMapChartDataPoint & {\n  legend: string;\n};\ntype RectanglesGraphData = { [key: string]: FlattenData[] };\n\nexport const HeatMapChart: React.FunctionComponent<HeatMapChartProps> = React.forwardRef<\n  HTMLDivElement,\n  HeatMapChartProps\n>((props, forwardedRef) => {\n  const classes = useHeatMapChartStyles(props);\n  const _stringXAxisDataPoints = React.useRef<string[]>([]);\n  const _stringYAxisDataPoints = React.useRef<string[]>([]);\n  const _dataSet = React.useRef<RectanglesGraphData>({});\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const _colorScale = React.useRef<any>();\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const _xAxisScale = React.useRef<any>();\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const _yAxisScale = React.useRef<any>();\n  const _xAxisType = React.useRef<XAxisTypes>();\n  const _yAxisType = React.useRef<YAxisType>();\n  const _calloutAnchorPoint = React.useRef<FlattenData | null>(null);\n  const _emptyChartId = useId('_HeatMap_empty');\n  const _margins = React.useRef<Margins>({});\n  const cartesianChartRef = React.useRef<Chart>(null);\n\n  const [selectedLegend, setSelectedLegend] = React.useState<string>('');\n  const [activeLegend, setActiveLegend] = React.useState<string>('');\n  const [isPopoverOpen, setPopoverOpen] = React.useState<boolean>(false);\n  const [calloutLegend, setCalloutLegend] = React.useState<string>('');\n  const [calloutTextColor, setCalloutTextColor] = React.useState<string>('');\n  const [calloutYValue, setCalloutYValue] = React.useState<string>('');\n  const [ratio, setRatio] = React.useState<[number, number]>();\n  const [descriptionMessage, setDescriptionMessage] = React.useState<string>('');\n  const [callOutAccessibilityData, setCallOutAccessibilityData] = React.useState<AccessibilityProps>();\n  const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      chartContainer: cartesianChartRef.current?.chartContainer ?? null,\n    }),\n    [],\n  );\n\n  const _getXandY = (): { x: string | Date | number; y: string | Date | number } => {\n    let x: string | Date | number = '';\n    let y: string | Date | number = '';\n    props.data.forEach((item: HeatMapChartData) => {\n      if (item.data && item.data.length > 0) {\n        x = item.data[0].x;\n        y = item.data[0].y;\n        return { x, y };\n      }\n    });\n    return { x, y };\n  };\n\n  const _getMargins = (margins: Margins) => {\n    _margins.current = margins;\n  };\n\n  const _getOpacity = (legendTitle: string): string => {\n    const opacity = _legendHighlighted(legendTitle) || _noLegendHighlighted() ? '1' : '0.1';\n    return opacity;\n  };\n\n  const _onRectFocus = (id: string, data: FlattenData, focusEvent: React.FocusEvent<SVGGElement>): void => {\n    const boundingRect = focusEvent.currentTarget.getBoundingClientRect();\n    const clientX = boundingRect.left + boundingRect.width / 2;\n    const clientY = boundingRect.top + boundingRect.height / 2;\n    updatePosition(clientX, clientY);\n    /** Show the callout if highlighted rectangle is focused and Hide it if unhighlighted rectangle is focused */\n    setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);\n    setCalloutYValue(`${data.rectText}`);\n    setCalloutTextColor(Number.isNaN(data.value) ? tokens.colorNeutralForeground1 : _colorScale.current(data.value));\n    setCalloutLegend(data.legend);\n    setRatio(data.ratio);\n    setDescriptionMessage(data.descriptionMessage || '');\n    setCallOutAccessibilityData(data.callOutAccessibilityData);\n  };\n\n  const _onRectMouseOver = (id: string, data: FlattenData, mouseEvent: React.MouseEvent<SVGGElement>): void => {\n    mouseEvent.persist();\n    if (_calloutAnchorPoint.current !== data) {\n      _calloutAnchorPoint.current = data;\n      updatePosition(mouseEvent.clientX, mouseEvent.clientY);\n      /** Show the callout if highlighted rectangle is hovered and Hide it if unhighlighted rectangle is hovered */\n      setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);\n      setCalloutYValue(`${data.rectText}`);\n      setCalloutTextColor(Number.isNaN(data.value) ? tokens.colorNeutralForeground1 : _colorScale.current(data.value));\n      setCalloutLegend(data.legend);\n      setRatio(data.ratio);\n      setDescriptionMessage(data.descriptionMessage || '');\n      setCallOutAccessibilityData(data.callOutAccessibilityData);\n    }\n  };\n\n  const _onRectBlurOrMouseOut = (): void => {\n    /**/\n  };\n\n  const _handleChartMouseLeave = (): void => {\n    _calloutAnchorPoint.current = null;\n    setPopoverOpen(false);\n  };\n\n  const _getInvertedTextColor = (color: string): string => {\n    return color === tokens.colorNeutralForeground1 ? tokens.colorNeutralBackground1 : tokens.colorNeutralForeground1;\n  };\n\n  /**\n   * This is the function which is responsible for\n   * drawing the rectangle in the graph and also\n   * attaching dom events to that rectangles\n   */\n  const _createRectangles = (): React.ReactNode => {\n    const rectangles: JSX.Element[] = [];\n    const yAxisDataPoints = _stringYAxisDataPoints.current.slice().reverse();\n    /**\n     * yAxisDataPoint is noting but the DataPoint\n     * which will be rendered on the y-axis\n     */\n    yAxisDataPoints.forEach((yAxisDataPoint: string) => {\n      let index = 0;\n      _stringXAxisDataPoints.current.forEach((xAxisDataPoint: string) => {\n        let rectElement: JSX.Element;\n        const id = `x${xAxisDataPoint}y${yAxisDataPoint}`;\n        if (\n          _dataSet.current[yAxisDataPoint][index]?.x === xAxisDataPoint &&\n          typeof _dataSet.current[yAxisDataPoint][index]?.value === 'number'\n        ) {\n          /**\n           * dataPointObject is an object where it contains information on single\n           * data point such as x, y , value, rectText property of the rectangle\n           */\n          const dataPointObject = _dataSet.current[yAxisDataPoint][index];\n          let styleRules = '';\n          let foregroundColor = tokens.colorNeutralForeground1;\n          if (cartesianChartRef.current?.chartContainer) {\n            styleRules = resolveCSSVariables(cartesianChartRef.current.chartContainer, foregroundColor);\n          }\n          const contrastRatio = getColorContrast(styleRules, _colorScale.current(dataPointObject.value));\n          if (contrastRatio < 3) {\n            foregroundColor = _getInvertedTextColor(foregroundColor);\n          }\n          rectElement = (\n            <g\n              key={id}\n              role=\"img\"\n              aria-label={_getAriaLabel(dataPointObject)}\n              tabIndex={_legendHighlighted(dataPointObject.legend) || _noLegendHighlighted() ? 0 : -1}\n              fillOpacity={_getOpacity(dataPointObject.legend)}\n              transform={`translate(${_xAxisScale.current(dataPointObject.x)}, ${_yAxisScale.current(\n                dataPointObject.y,\n              )})`}\n              onFocus={e => _onRectFocus(id, dataPointObject, e)}\n              onBlur={_onRectBlurOrMouseOut}\n              onMouseOver={e => _onRectMouseOver(id, dataPointObject, e)}\n              onMouseOut={_onRectBlurOrMouseOut}\n            >\n              <rect\n                fill={_colorScale.current(dataPointObject.value)}\n                width={_xAxisScale.current.bandwidth()}\n                height={_yAxisScale.current.bandwidth()}\n                onClick={dataPointObject.onClick}\n              />\n              <text\n                dominantBaseline={'middle'}\n                textAnchor={'middle'}\n                className={classes.text}\n                transform={`translate(${_xAxisScale.current.bandwidth() / 2}, ${_yAxisScale.current.bandwidth() / 2})`}\n                fill={foregroundColor}\n              >\n                {convertToLocaleString(dataPointObject.rectText, props.culture)}\n              </text>\n            </g>\n          );\n          index++;\n        } else {\n          const dataPointObject: FlattenData = {\n            x: xAxisDataPoint,\n            y: yAxisDataPoint,\n            value: NaN,\n            rectText: 'No data available',\n            legend: '',\n          };\n          rectElement = (\n            <g\n              key={id}\n              role=\"img\"\n              aria-label={_getAriaLabel(dataPointObject)}\n              tabIndex={_noLegendHighlighted() ? 0 : -1}\n              transform={`translate(${_xAxisScale.current(dataPointObject.x)}, ${_yAxisScale.current(\n                dataPointObject.y,\n              )})`}\n              onFocus={e => _onRectFocus(id, dataPointObject, e)}\n              onBlur={_onRectBlurOrMouseOut}\n              onMouseOver={e => _onRectMouseOver(id, dataPointObject, e)}\n              onMouseOut={_onRectBlurOrMouseOut}\n            >\n              <rect\n                fill=\"transparent\"\n                width={_xAxisScale.current.bandwidth()}\n                height={_yAxisScale.current.bandwidth()}\n              />\n            </g>\n          );\n        }\n        rectangles.push(rectElement);\n      });\n    });\n    return rectangles;\n  };\n  /**\n   * when the legend is hovered we need to highlight\n   * all the rectangles which fall under that category\n   * and un-highlight the rest of them\n   * @param legendTitle\n   */\n  const _onLegendHover = (legendTitle: string): void => {\n    setActiveLegend(legendTitle);\n  };\n\n  /**\n   * when the mouse is out from the legend , we need\n   * to show the graph in initial mode.\n   */\n  const _onLegendLeave = (): void => {\n    setActiveLegend('');\n  };\n  /**\n   * @param legendTitle\n   * when the legend is clicked we need to highlight\n   * all the rectangles which fall under that category\n   * and un highlight the rest of them\n   */\n  const _onLegendClick = (legendTitle: string): void => {\n    /**\n     * check if the legend is already selceted,\n     * if yes, un-select the legend, else\n     * set the selected legend state to legendTitle\n     */\n    if (selectedLegend === legendTitle) {\n      setSelectedLegend('');\n    } else {\n      setSelectedLegend(legendTitle);\n    }\n  };\n  const _createLegendBars = (): JSX.Element => {\n    const { data, legendProps } = props;\n    const legends: Legend[] = [];\n    data.forEach((item: HeatMapChartData) => {\n      const legend: Legend = {\n        title: item.legend,\n        color: _colorScale.current(item.value),\n        action: () => {\n          _onLegendClick(item.legend);\n        },\n        hoverAction: () => {\n          _handleChartMouseLeave();\n          _onLegendHover(item.legend);\n        },\n        onMouseOutAction: () => {\n          _onLegendLeave();\n        },\n      };\n      legends.push(legend);\n    });\n    return <Legends {...legendProps} legends={legends} />;\n  };\n\n  const _getColorScale = () => {\n    const { domainValuesForColorScale, rangeValuesForColorScale } = props;\n    return d3ScaleLinear()\n      .domain(domainValuesForColorScale)\n      .range(rangeValuesForColorScale as unknown as number[]);\n  };\n\n  const _getXIndex = (value: string | Date | number): string => {\n    if (_xAxisType.current === XAxisTypes.DateAxis) {\n      return `${(value as Date).getTime()}`;\n    } else if (_xAxisType.current === XAxisTypes.StringAxis) {\n      return value as string;\n    } else if (_xAxisType.current === XAxisTypes.NumericAxis) {\n      return `${value}`;\n    } else {\n      return '';\n    }\n  };\n  const _getYIndex = (value: string | Date | number): string => {\n    if (_yAxisType.current === YAxisType.DateAxis) {\n      return `${(value as Date).getTime()}`;\n    } else if (_yAxisType.current === YAxisType.StringAxis) {\n      return value as string;\n    } else if (_yAxisType.current === YAxisType.NumericAxis) {\n      return `${value}`;\n    } else {\n      return '';\n    }\n  };\n\n  const { xAxisStringFormatter } = props;\n  const _getFormattedLabelForXAxisDataPoint = React.useCallback(\n    (point: string): string => {\n      return xAxisStringFormatter ? xAxisStringFormatter(point) : point;\n    },\n    [xAxisStringFormatter],\n  );\n\n  const { yAxisStringFormatter } = props;\n  const _getFormattedLabelForYAxisDataPoint = React.useCallback(\n    (point: string): string => {\n      return yAxisStringFormatter ? yAxisStringFormatter(point) : point;\n    },\n    [yAxisStringFormatter],\n  );\n\n  /**\n   * This function will return the final sorted and formatted x-axis points\n   * which will be rendered on the x-axis\n   * @param points\n   * @returns x-axis points\n   */\n  const _getXAxisDataPoints = React.useCallback(\n    (points: { [key: string]: '1' }): string[] => {\n      let xAxisPoints: string[] = [];\n      const unFormattedXAxisDataPoints = Object.keys(points).sort((a: string, b: string) => {\n        if (_xAxisType.current === XAxisTypes.DateAxis || _xAxisType.current === XAxisTypes.NumericAxis) {\n          return +a - +b;\n        } else {\n          return props.sortOrder === 'none' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1;\n        }\n      });\n      xAxisPoints = unFormattedXAxisDataPoints.map((xPoint: string) => {\n        if (_xAxisType.current === XAxisTypes.DateAxis) {\n          return _getStringFormattedDate(xPoint, props.xAxisDateFormatString);\n        } else if (_xAxisType.current === XAxisTypes.NumericAxis) {\n          return _getStringFormattedNumber(xPoint, props.xAxisNumberFormatString);\n        } else {\n          return _getFormattedLabelForXAxisDataPoint(xPoint);\n        }\n      });\n\n      return xAxisPoints;\n    },\n    [_getFormattedLabelForXAxisDataPoint, props.sortOrder, props.xAxisDateFormatString, props.xAxisNumberFormatString],\n  );\n\n  /**\n   * This function will return the final sorted and formatted y-axis points\n   * which will be rendered on the y-axis\n   * @param points\n   * @returns yaxis points\n   */\n  const _getYAxisDataPoints = React.useCallback(\n    (points: { [key: string]: '1' }): string[] => {\n      let yAxisPoints: string[] = [];\n      const unFormattedYAxisDataPoints = Object.keys(points).sort((a: string, b: string) => {\n        if (_yAxisType.current === YAxisType.DateAxis || _yAxisType.current === YAxisType.NumericAxis) {\n          return +a - +b;\n        } else {\n          return props.sortOrder === 'none' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1;\n        }\n      });\n      yAxisPoints = unFormattedYAxisDataPoints.map((yPoint: string) => {\n        if (_yAxisType.current === YAxisType.DateAxis) {\n          return _getStringFormattedDate(yPoint, props.yAxisDateFormatString);\n        } else if (_yAxisType.current === YAxisType.NumericAxis) {\n          return _getStringFormattedNumber(yPoint, props.yAxisNumberFormatString);\n        } else {\n          return _getFormattedLabelForYAxisDataPoint(yPoint);\n        }\n      });\n\n      return yAxisPoints;\n    },\n    [_getFormattedLabelForYAxisDataPoint, props.sortOrder, props.yAxisDateFormatString, props.yAxisNumberFormatString],\n  );\n\n  /**\n   * This will create a new data set based on the prop\n   * @data\n   * We will be using This data set to contsruct our rectangles\n   * in the chart, we use this data set becuase, when we loop in this\n   * data and build the heat map, it will support accessibility as\n   * specified in the figma\n   */\n\n  const _createNewDataSet = React.useCallback(\n    (\n      data: HeatMapChartData[],\n      xAxisDateFormatString: string | undefined,\n      xAxisNumberFormatString: string | undefined,\n      yAxisDateFormatString: string | undefined,\n      yAxisNumberFormatString: string | undefined,\n    ): DataSet => {\n      /**\n       * please do not destructure any of the props here,\n       * instead send them as parameter to this functions so that\n       * this functions get called whenever the prop changes\n       */\n      const flattenData: FlattenData[] = [];\n      /**\n       * below for each loop will store all the datapoints in the one array.\n       * basically it will flatten the nestesd array (data prop) into single array\n       * of object. where each object contains x, y, rectText , value and legend propety of single\n       * data point.\n       */\n      data.forEach((item: HeatMapChartData) => {\n        item.data.forEach((point: HeatMapChartDataPoint) => {\n          flattenData.push({ ...point, legend: item.legend });\n        });\n      });\n      const yPoints: RectanglesGraphData = {};\n      const uniqueYPoints: { [key: string]: '1' } = {};\n      const uniqueXPoints: { [key: string]: '1' } = {};\n      flattenData.forEach((item: FlattenData) => {\n        const posX = _getXIndex(item.x);\n        const posY = _getYIndex(item.y);\n\n        uniqueXPoints[posX] = '1';\n        uniqueYPoints[posY] = '1';\n        /** we will check if the property(posY) is already there in object, if  Yes,\n         *  then we will append the item in the Array related to the pos, if not\n         *  then we will simply append the item in the new Array and\n         *  assign that array to the  property (posY) in the Object\n         *  and finally we will get the array of Objects associated to each\n         *  property (which is nothing but y data point) and object in the\n         *  array are noting but x data points associated to the property y\n         */\n        if (yPoints[posY]) {\n          yPoints[posY] = [...yPoints[posY], item];\n        } else {\n          yPoints[posY] = [item];\n        }\n      });\n      /**\n       * we will now sort(ascending) the array's of y data point based on the x value\n       * sorting is important to achive the accessibility order of the\n       * rectangles and then format the x and y datapoints respectively\n       */\n      Object.keys(yPoints).forEach((item: string) => {\n        yPoints[item]\n          .sort((a: HeatMapChartDataPoint, b: HeatMapChartDataPoint) => {\n            if (_xAxisType.current === XAxisTypes.StringAxis) {\n              return props.sortOrder === 'none'\n                ? 0\n                : (a.x as string).toLowerCase() > (b.x as string).toLowerCase()\n                ? 1\n                : -1;\n            } else if (_xAxisType.current === XAxisTypes.DateAxis) {\n              return (a.x as Date).getTime() - (b.x as Date).getTime();\n            } else if (_xAxisType.current === XAxisTypes.NumericAxis) {\n              return +(a.x as string) > +(b.x as string) ? 1 : -1;\n            } else {\n              return a.x > b.x ? 1 : -1;\n            }\n          })\n          .forEach((datapoint: HeatMapChartDataPoint) => {\n            if (_xAxisType.current === XAxisTypes.DateAxis) {\n              datapoint.x = _getStringFormattedDate(datapoint.x as string, xAxisDateFormatString);\n            }\n            if (_xAxisType.current === XAxisTypes.NumericAxis) {\n              datapoint.x = _getStringFormattedNumber(datapoint.x as string, xAxisNumberFormatString);\n            }\n            if (_xAxisType.current === XAxisTypes.StringAxis) {\n              datapoint.x = _getFormattedLabelForXAxisDataPoint(datapoint.x as string);\n            }\n            if (_yAxisType.current === YAxisType.DateAxis) {\n              datapoint.y = _getStringFormattedDate(datapoint.y as string, yAxisDateFormatString);\n            }\n            if (_yAxisType.current === YAxisType.NumericAxis) {\n              datapoint.y = _getStringFormattedNumber(datapoint.y as string, yAxisNumberFormatString);\n            }\n            if (_yAxisType.current === YAxisType.StringAxis) {\n              datapoint.y = _getFormattedLabelForYAxisDataPoint(datapoint.y as string);\n            }\n          });\n      });\n      /**\n       * if  y-axis data points are of type date or number or if we have string formatter,\n       * then we need to change data points  to their respective string\n       * format, becuase in the private variable this._stringYAxisDatapoints, points will be stored in\n       * string format. and in here `yPoint` are not so we need to change, so that\n       * function `this._createRectangles` should work perfetcly while looping, and  if we don't change\n       * then `this._createRectangles` will fail while looping, causing the error\n       * Cannot read property 'forEach' of undefined\n       */\n\n      Object.keys(yPoints).forEach((yPoint: string) => {\n        if (_yAxisType.current === YAxisType.DateAxis) {\n          yPoints[_getStringFormattedDate(yPoint, yAxisDateFormatString)] = yPoints[yPoint];\n        } else if (_yAxisType.current === YAxisType.NumericAxis) {\n          yPoints[`${_getStringFormattedNumber(yPoint, yAxisNumberFormatString)}`] = yPoints[yPoint];\n        } else {\n          yPoints[_getFormattedLabelForYAxisDataPoint(yPoint)] = yPoints[yPoint];\n        }\n      });\n      /**\n       * assigning new data set\n       */\n      const dataSet = yPoints;\n      /**\n       * These are the Y axis data points which will get rendered in the\n       * Y axis in graph\n       */\n      const yAxisPoints = _getYAxisDataPoints(uniqueYPoints);\n      /**\n       * These are the x axis data points which will get rendered in the\n       * x axis in the graph\n       */\n\n      const xAxisPoints = _getXAxisDataPoints(uniqueXPoints);\n      return {\n        dataSet,\n        yAxisPoints,\n        xAxisPoints,\n      };\n    },\n    [\n      _getFormattedLabelForXAxisDataPoint,\n      _getFormattedLabelForYAxisDataPoint,\n      _getXAxisDataPoints,\n      _getYAxisDataPoints,\n      props.sortOrder,\n    ],\n  );\n\n  const _getStringFormattedDate = (point: string, formatString?: string): string => {\n    const date = new Date();\n    date.setTime(+point);\n    return d3TimeFormat(formatString || '%b/%d')(date);\n  };\n\n  const _getStringFormattedNumber = (point: string, formatString?: string): string => {\n    return d3Format(formatString || '.2~s')(+point);\n  };\n\n  /**\n   * This function checks if the given legend is highlighted or not.\n   * A legend can be highlighted in 2 ways:\n   * 1. selection: if the user clicks on it\n   * 2. hovering: if there is no selected legend and the user hovers over it\n   */\n  const _legendHighlighted = (legendTitle: string) => {\n    return selectedLegend === legendTitle || (selectedLegend === '' && activeLegend === legendTitle);\n  };\n\n  /**\n   * This function checks if none of the legends is selected or hovered.\n   */\n  const _noLegendHighlighted = () => {\n    return selectedLegend === '' && activeLegend === '';\n  };\n\n  const _getAriaLabel = (point: FlattenData): string => {\n    const xValue = point.x;\n    const yValue = point.y;\n    const legend = point.legend;\n    const zValue = point.ratio ? `${point.ratio[0]}/${point.ratio[1]}` : point.rectText || point.value;\n    const description = point.descriptionMessage;\n    return (\n      point.callOutAccessibilityData?.ariaLabel ||\n      `${xValue}, ${yValue}. ${legend}, ${zValue}.` + (description ? ` ${description}.` : '')\n    );\n  };\n\n  const _isChartEmpty = (): boolean => {\n    return !(props.data && props.data.length > 0);\n  };\n\n  const _getChartTitle = (): string => {\n    const { chartTitle } = props;\n    const numDataPoints = props.data.reduce((acc, curr) => acc + curr.data.length, 0);\n    return (chartTitle ? `${chartTitle}. ` : '') + `Heat map chart with ${numDataPoints} data points. `;\n  };\n\n  const updatePosition = (newX: number, newY: number) => {\n    const threshold = 1; // Set a threshold for movement\n    const { x, y } = clickPosition;\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    }\n  };\n\n  const { x, y } = _getXandY();\n  _xAxisType.current = getTypeOfAxis(x, true) as XAxisTypes;\n  _yAxisType.current = getTypeOfAxis(y, false) as YAxisType;\n  const { data, xAxisDateFormatString, xAxisNumberFormatString, yAxisDateFormatString, yAxisNumberFormatString } =\n    props;\n  _colorScale.current = _getColorScale();\n  const { dataSet, xAxisPoints, yAxisPoints } = React.useMemo(\n    () =>\n      _createNewDataSet(\n        data,\n        xAxisDateFormatString,\n        xAxisNumberFormatString,\n        yAxisDateFormatString,\n        yAxisNumberFormatString,\n      ),\n    [\n      _createNewDataSet,\n      data,\n      xAxisDateFormatString,\n      xAxisNumberFormatString,\n      yAxisDateFormatString,\n      yAxisNumberFormatString,\n    ],\n  );\n  _dataSet.current = dataSet;\n  _stringYAxisDataPoints.current = yAxisPoints;\n  _stringXAxisDataPoints.current = xAxisPoints;\n  const calloutProps: ChartPopoverProps = {\n    ...props.calloutProps,\n    isPopoverOpen,\n    YValue: calloutYValue,\n    legend: calloutLegend,\n    color: calloutTextColor,\n    ratio,\n    descriptionMessage,\n    clickPosition,\n    ...getAccessibleDataObject(callOutAccessibilityData, 'text', false),\n  };\n  const tickParams = {\n    tickValues: props.tickValues,\n    tickFormat: props.tickFormat,\n  };\n  return !_isChartEmpty() ? (\n    <CartesianChart\n      {...props}\n      chartTitle={_getChartTitle()}\n      points={data}\n      chartType={ChartTypes.HeatMapChart}\n      xAxisType={XAxisTypes.StringAxis}\n      yAxisType={YAxisType.StringAxis}\n      calloutProps={calloutProps}\n      datasetForXAxisDomain={_stringXAxisDataPoints.current}\n      stringDatasetForYAxisDomain={_stringYAxisDataPoints.current}\n      getmargins={_getMargins}\n      xAxisTickCount={_stringXAxisDataPoints.current.length}\n      xAxistickSize={0}\n      xAxisPadding={0.02}\n      yAxisPadding={0.02}\n      legendBars={_createLegendBars()}\n      onChartMouseLeave={_handleChartMouseLeave}\n      componentRef={cartesianChartRef}\n      tickParams={tickParams}\n      /* eslint-disable react/jsx-no-bind */\n      children={(p: ChildProps) => {\n        _xAxisScale.current = p.xScale;\n        _yAxisScale.current = p.yScale;\n        return _createRectangles();\n      }}\n    />\n  ) : (\n    <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n  );\n});\n"],"names":["HeatMapChart","React","forwardRef","props","forwardedRef","classes","useHeatMapChartStyles","_stringXAxisDataPoints","useRef","_stringYAxisDataPoints","_dataSet","_colorScale","_xAxisScale","_yAxisScale","_xAxisType","_yAxisType","_calloutAnchorPoint","_emptyChartId","useId","_margins","cartesianChartRef","selectedLegend","setSelectedLegend","useState","activeLegend","setActiveLegend","isPopoverOpen","setPopoverOpen","calloutLegend","setCalloutLegend","calloutTextColor","setCalloutTextColor","calloutYValue","setCalloutYValue","ratio","setRatio","descriptionMessage","setDescriptionMessage","callOutAccessibilityData","setCallOutAccessibilityData","clickPosition","setClickPosition","x","y","useImperativeHandle","componentRef","chartContainer","current","_getXandY","data","forEach","item","length","_getMargins","margins","_getOpacity","legendTitle","opacity","_legendHighlighted","_noLegendHighlighted","_onRectFocus","id","focusEvent","boundingRect","currentTarget","getBoundingClientRect","clientX","left","width","clientY","top","height","updatePosition","legend","rectText","Number","isNaN","value","tokens","colorNeutralForeground1","_onRectMouseOver","mouseEvent","persist","_onRectBlurOrMouseOut","_handleChartMouseLeave","_getInvertedTextColor","color","colorNeutralBackground1","_createRectangles","rectangles","yAxisDataPoints","slice","reverse","yAxisDataPoint","index","xAxisDataPoint","rectElement","dataPointObject","styleRules","foregroundColor","resolveCSSVariables","contrastRatio","getColorContrast","createElement","g","key","role","aria-label","_getAriaLabel","tabIndex","fillOpacity","transform","onFocus","e","onBlur","onMouseOver","onMouseOut","rect","fill","bandwidth","onClick","text","dominantBaseline","textAnchor","className","convertToLocaleString","culture","NaN","push","_onLegendHover","_onLegendLeave","_onLegendClick","_createLegendBars","legendProps","legends","title","action","hoverAction","onMouseOutAction","Legends","_getColorScale","domainValuesForColorScale","rangeValuesForColorScale","d3ScaleLinear","domain","range","_getXIndex","XAxisTypes","DateAxis","getTime","StringAxis","NumericAxis","_getYIndex","YAxisType","xAxisStringFormatter","_getFormattedLabelForXAxisDataPoint","useCallback","point","yAxisStringFormatter","_getFormattedLabelForYAxisDataPoint","_getXAxisDataPoints","points","xAxisPoints","unFormattedXAxisDataPoints","Object","keys","sort","a","b","sortOrder","toLowerCase","map","xPoint","_getStringFormattedDate","xAxisDateFormatString","_getStringFormattedNumber","xAxisNumberFormatString","_getYAxisDataPoints","yAxisPoints","unFormattedYAxisDataPoints","yPoint","yAxisDateFormatString","yAxisNumberFormatString","_createNewDataSet","flattenData","yPoints","uniqueYPoints","uniqueXPoints","posX","posY","datapoint","dataSet","formatString","date","Date","setTime","d3TimeFormat","d3Format","xValue","yValue","zValue","description","ariaLabel","_isChartEmpty","_getChartTitle","chartTitle","numDataPoints","reduce","acc","curr","newX","newY","threshold","distance","Math","sqrt","pow","getTypeOfAxis","useMemo","calloutProps","YValue","getAccessibleDataObject","tickParams","tickValues","tickFormat","CartesianChart","chartType","ChartTypes","xAxisType","yAxisType","datasetForXAxisDomain","stringDatasetForYAxisDomain","getmargins","xAxisTickCount","xAxistickSize","xAxisPadding","yAxisPadding","legendBars","onChartMouseLeave","children","p","xScale","yScale","div","style"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/HeatMapChart/HeatMapChart.types.js

@@ -0,0 +1,7 @@
+/**
+ * Heat Map Chart styles
+ * {@docCategory HeatMapChart}
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/lib-commonjs/components/HeatMapChart/HeatMapChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["HeatMapChart.types.ts"],"sourcesContent":["import type { CartesianChartProps, CartesianChartStyles } from '../CommonComponents/CartesianChart.types';\nimport type { HeatMapChartData } from '../../types/DataPoint';\n\n/**\n * Heat Map Chart properties\n * {@docCategory HeatMapChart}\n */\nexport interface HeatMapChartProps extends CartesianChartProps {\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n  /**\n   * data to provide for Heat Map\n   */\n  data: HeatMapChartData[];\n  /**\n   * The domain value for the color scale,\n   *\n   */\n  domainValuesForColorScale: number[];\n  /**\n   * The range values for the color scale,\n   * fill the array with colors in hex format\n   * note:- it should contain values exactly as many as values in the array\n   * `domainValuesForColorScale`\n   */\n  rangeValuesForColorScale: string[];\n  /**\n   * date formatter of x axis,\n   * if the x-axis data point are of date type then user can use this\n   * prop to format the date\n   * refer to https://github.com/d3/d3-time-format for string values\n   * @default '%b/%d'\n   */\n  xAxisDateFormatString?: string;\n  /**\n   * date formatter of y axis,\n   * if the y-axis data point are or date type then user can use this\n   * prop to format the date\n   * refer to https://github.com/d3/d3-time-format for string values\n   * @default '%b/%d'\n   */\n  yAxisDateFormatString?: string;\n  /**\n   * number formatter of x axis\n   * if the x-axis data pints are of number type then user can\n   * use this prop to format the number\n   * refer to https://github.com/d3/d3-format for string values\n   * @default '.2~s'\n   */\n  xAxisNumberFormatString?: string;\n  /**\n   * number formatter of y axis\n   * if the y-axis data pints are of number type then user can\n   * use this prop to format the number\n   * refer to https://github.com/d3/d3-format for string values\n   * @default '.2~s'\n   */\n  yAxisNumberFormatString?: string;\n  /**\n   * string formatter for x-axis.\n   * This prop only applies if the x-axis is of string type\n   *\n   * For the accessiblity reason we sort the x-axis data point given by the consumer in ascending\n   * order and then render in the x-axis. this behaviour would force the order of the data points.\n   * to overcome , user can give x-axis point names as p1 p2...etc and map those p1 and p2 to custom name.\n   * behind the scene the charting will actually sort the p1 and p2 and then we can attach the custom\n   * name to that point by using this prop, hence giving the us the flexiblity of the order in which\n   * label should render\n   *\n   * see the example file for the usage of the prop\n   */\n  xAxisStringFormatter?: (point: string) => string;\n\n  /**\n   * string formatter for y-axis.\n   * This prop only applies if the y-axis is of string type\n   *\n   * For the accessiblity reason we sort the x-axis data point given by the consumer in ascending\n   * order and then render in the y-axis. this behaviour would force the order of the data points.\n   * to overcome , user can give y-axis point names as p1 p2...etc and map those p1 and p2 to custom name.\n   * behind the scene the charting will actually sort the p1 and p2 and then we can attach the custom\n   * name to that point by using this prop, hence giving the us the flexiblity of the order in which\n   * label should render\n   *\n   * see the exaple file for the usage of the prop\n   */\n  yAxisStringFormatter?: (point: string) => string;\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: HeatMapChartStyles;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   *@default false\n   *Used for showing complete y axis lables   */\n  showYAxisLables?: boolean;\n\n  /**\n   * @default alphabetical\n   * The prop used to decide order of string axis labels */\n  sortOrder?: 'none' | 'alphabetical';\n}\n\n/**\n * Heat Map Chart styles\n * {@docCategory HeatMapChart}\n */\nexport interface HeatMapChartStyles extends CartesianChartStyles {\n  root?: string;\n  text?: string;\n}\n"],"names":[],"rangeMappings":";;;","mappings":"AA8GA;;;CAGC"}

package/lib-commonjs/components/HeatMapChart/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./HeatMapChart"), exports);
+_export_star._(require("./HeatMapChart.types"), exports);
+_export_star._(require("../../types/index"), exports);

package/lib-commonjs/components/HeatMapChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './HeatMapChart';\nexport * from './HeatMapChart.types';\nexport * from '../../types/index';\n"],"names":[],"rangeMappings":";;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA"}

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

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    heatmapChartClassNames: function() {
+        return heatmapChartClassNames;
+    },
+    useHeatMapChartStyles: function() {
+        return useHeatMapChartStyles;
+    }
+});
+const _react = require("@griffel/react");
+const heatmapChartClassNames = {
+    root: 'fui-hmc__root',
+    text: 'fui-hmc__text',
+    xAxis: '',
+    yAxis: '',
+    legendContainer: '',
+    hover: '',
+    calloutContentRoot: '',
+    calloutContentX: '',
+    calloutContentY: '',
+    descriptionMessage: '',
+    calloutDateTimeContainer: '',
+    calloutInfoContainer: '',
+    calloutBlockContainer: '',
+    calloutBlockContainertoDrawShapefalse: '',
+    calloutBlockContainertoDrawShapetrue: '',
+    calloutlegendText: '',
+    tooltip: '',
+    axisTitle: '',
+    chartTitle: '',
+    opacityChangeOnHover: '',
+    shapeStyles: '',
+    chartWrapper: ''
+};
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {},
+    text: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "f1i3iumi",
+        Bkecrkj: "f1aehjj5"
+    }
+}, {
+    d: [
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".fl43uef{font-weight:var(--fontWeightSemibold);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        ".f1aehjj5{pointer-events:none;}"
+    ]
+});
+const useHeatMapChartStyles = (props)=>{
+    const baseStyles = useStyles();
+    return {
+        root: (0, _react.mergeClasses)(heatmapChartClassNames.root, baseStyles.root /*, props.styles?.root*/ ),
+        text: (0, _react.mergeClasses)(heatmapChartClassNames.text, baseStyles.text /*, props.styles?.text*/ )
+    };
+}; //# sourceMappingURL=useHeatMapChartStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"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    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    calloutContentRoot: '',\n    calloutContentX: '',\n    calloutContentY: '',\n    descriptionMessage: '',\n    calloutDateTimeContainer: '',\n    calloutInfoContainer: '',\n    calloutBlockContainer: '',\n    calloutBlockContainertoDrawShapefalse: '',\n    calloutBlockContainertoDrawShapetrue: '',\n    calloutlegendText: '',\n    tooltip: '',\n    axisTitle: '',\n    chartTitle: '',\n    opacityChangeOnHover: '',\n    shapeStyles: '',\n    chartWrapper: ''\n};\nconst useStyles = makeStyles({\n    root: {},\n    text: {\n        ...typographyStyles.body1Strong,\n        pointerEvents: 'none'\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    };\n};\n"],"names":["heatmapChartClassNames","useHeatMapChartStyles","root","text","xAxis","yAxis","legendContainer","hover","calloutContentRoot","calloutContentX","calloutContentY","descriptionMessage","calloutDateTimeContainer","calloutInfoContainer","calloutBlockContainer","calloutBlockContainertoDrawShapefalse","calloutBlockContainertoDrawShapetrue","calloutlegendText","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","useStyles","__styles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Bkecrkj","d","props","baseStyles","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,sBAAsB;eAAtBA;;IA+BAC,qBAAqB;eAArBA;;;uBAjC4B;AAElC,MAAMD,yBAAyB;IAClCE,MAAM;IACNC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,iBAAiB;IACjBC,iBAAiB;IACjBC,oBAAoB;IACpBC,0BAA0B;IAC1BC,sBAAsB;IACtBC,uBAAuB;IACvBC,uCAAuC;IACvCC,sCAAsC;IACtCC,mBAAmB;IACnBC,SAAS;IACTC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;AAClB;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAvB,MAAA,CAAA;IAAAC,MAAA;QAAAuB,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAOX,MAAM9B,wBAAyB+B,CAAAA;IAClC,MAAMC,aAAaT;IACnB,OAAO;QACHtB,MAAMgC,IAAAA,mBAAY,EAAClC,uBAAuBE,IAAI,EAAE+B,WAAW/B,IAAI,CAAC,sBAAA;QAChEC,MAAM+B,IAAAA,mBAAY,EAAClC,uBAAuBG,IAAI,EAAE8B,WAAW9B,IAAI,CAAC,sBAAA;IACpE;AACJ"}

package/lib-commonjs/components/HorizontalBarChart/HorizontalBarChart.js

@@ -0,0 +1,408 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "HorizontalBarChart", {
+    enumerable: true,
+    get: function() {
+        return HorizontalBarChart;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useHorizontalBarChartStylesstyles = require("./useHorizontalBarChartStyles.styles");
+const _index = require("./index");
+const _localeutil = require("../../utilities/locale-util");
+const _index1 = require("../../utilities/index");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reacttheme = require("@fluentui/react-theme");
+const _reacttabster = require("@fluentui/react-tabster");
+const _ChartPopover = require("../CommonComponents/ChartPopover");
+const _FocusableTooltipText = require("../../utilities/FocusableTooltipText");
+const _index2 = require("../../index");
+const HorizontalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
+    const legendContainer = _react.useRef(null);
+    const _uniqLineText = '_HorizontalLine_' + Math.random().toString(36).substring(7);
+    const _refArray = [];
+    const _isRTL = (0, _index1.useRtl)();
+    const barChartSvgRef = /*#__PURE__*/ _react.createRef();
+    const _emptyChartId = (0, _reactutilities.useId)('_HBC_empty');
+    let _barHeight;
+    let _calloutAnchorPoint;
+    let isSingleBar = true;
+    const [hoverValue, setHoverValue] = _react.useState('');
+    const [lineColor, setLineColor] = _react.useState('');
+    const [legend, setLegend] = _react.useState('');
+    const [xCalloutValue, setXCalloutValue] = _react.useState('');
+    const [yCalloutValue, setYCalloutValue] = _react.useState('');
+    const [barCalloutProps, setBarCalloutProps] = _react.useState();
+    const [barSpacingInPercent, setBarSpacingInPercent] = _react.useState(0);
+    const [isPopoverOpen, setPopoverOpen] = _react.useState(false);
+    const [clickPosition, setClickPosition] = _react.useState({
+        x: 0,
+        y: 0
+    });
+    const [selectedLegend, setSelectedLegend] = _react.useState('');
+    const [activeLegend, setActiveLegend] = _react.useState('');
+    function _refCallback(element, legendTitle) {
+        _refArray.push({
+            index: legendTitle,
+            refElement: element
+        });
+    }
+    function _hoverOn(event, hoverVal, point) {
+        if ((!isPopoverOpen || legend !== point.legend) && _calloutAnchorPoint !== point && (_legendHighlighted(point.legend) || _noLegendHighlighted())) {
+            _calloutAnchorPoint = point;
+            updatePosition(event.clientX, event.clientY);
+            setHoverValue(hoverVal);
+            setLineColor(point.color);
+            setLegend(point.legend);
+            setXCalloutValue(point.xAxisCalloutData);
+            setYCalloutValue(point.yAxisCalloutData);
+            setBarCalloutProps(point);
+        // ToDo - Confirm setting multiple state variables like this is performant.
+        }
+    }
+    function _hoverOff() {
+    /*ToDo. To fix*/ }
+    const _handleChartMouseLeave = ()=>{
+        _calloutAnchorPoint = null;
+        if (isPopoverOpen) {
+            setPopoverOpen(false);
+            setHoverValue('');
+            setLineColor('');
+            setLegend('');
+        }
+    };
+    const _adjustProps = ()=>{
+        _barHeight = props.barHeight || 12;
+    };
+    const _getChartDataText = (data)=>{
+        /* return props.barChartCustomData ? (
+        <div role="text">{props.barChartCustomData(data)}</div>
+      ) : ( */ return _getDefaultTextData(data);
+    //)
+    };
+    function _createLegends(chartProps) {
+        const legendItems = [];
+        chartProps.forEach((point)=>{
+            point.chartData.forEach((dataPoint)=>{
+                const color = dataPoint.color;
+                // mapping data to the format Legends component needs
+                const legendItem = {
+                    title: dataPoint.legend,
+                    color,
+                    action: ()=>{
+                        if (selectedLegend === dataPoint.legend) {
+                            setSelectedLegend('');
+                        } else {
+                            setSelectedLegend(dataPoint.legend);
+                        }
+                    },
+                    hoverAction: ()=>{
+                        _handleChartMouseLeave();
+                        setActiveLegend(dataPoint.legend);
+                    },
+                    onMouseOutAction: ()=>{
+                        setActiveLegend('');
+                    }
+                };
+                legendItems.push(legendItem);
+            });
+        });
+        const legends = /*#__PURE__*/ _react.createElement(_index2.Legends, {
+            legends: legendItems,
+            centerLegends: true,
+            overflowText: props.legendsOverflowText,
+            ...props.legendProps
+        });
+        return legends;
+    }
+    function _getDefaultTextData(data) {
+        const { culture } = props;
+        const accessibilityData = (0, _index1.getAccessibleDataObject)(data.chartDataAccessibilityData, 'text', false);
+        if (!isSingleBar) {
+            const total = data.chartData.reduce((acc, point)=>acc + (point.horizontalBarChartdata.x ? point.horizontalBarChartdata.x : 0), 0);
+            return /*#__PURE__*/ _react.createElement("div", {
+                className: classes.chartTitleRight,
+                ...accessibilityData
+            }, (0, _localeutil.convertToLocaleString)(total, culture));
+        }
+        const chartDataMode = props.chartDataMode || 'default';
+        const chartData = data.chartData[0];
+        const x = chartData.horizontalBarChartdata.x;
+        const y = chartData.horizontalBarChartdata.total;
+        switch(chartDataMode){
+            case 'default':
+                return /*#__PURE__*/ _react.createElement("div", {
+                    className: classes.chartTitleRight,
+                    ...accessibilityData
+                }, (0, _localeutil.convertToLocaleString)(x, culture));
+            case 'fraction':
+                return /*#__PURE__*/ _react.createElement("div", accessibilityData, /*#__PURE__*/ _react.createElement("span", {
+                    className: classes.chartTitleRight
+                }, (0, _localeutil.convertToLocaleString)(x, culture)), /*#__PURE__*/ _react.createElement("span", {
+                    className: classes.chartDataTextDenominator
+                }, ' / ' + (0, _localeutil.convertToLocaleString)(y, culture)));
+            case 'percentage':
+                const dataRatioPercentage = `${(0, _localeutil.convertToLocaleString)(Math.round(x / y * 100), culture)}%`;
+                return /*#__PURE__*/ _react.createElement("div", {
+                    className: classes.chartTitleRight,
+                    ...accessibilityData
+                }, dataRatioPercentage);
+        }
+    }
+    function _createBenchmark(data) {
+        if (data.chartData[0].horizontalBarChartdata.total === undefined) {
+            return /*#__PURE__*/ _react.createElement(_react.Fragment, null);
+        }
+        const totalData = data.chartData[0].horizontalBarChartdata.total;
+        const benchmarkData = data.chartData[0].data;
+        const benchmarkRatio = Math.round((benchmarkData ? benchmarkData : 0) / totalData * 100);
+        const benchmarkStyles = {
+            left: 'calc(' + benchmarkRatio + '% - 4px)'
+        };
+        return /*#__PURE__*/ _react.createElement("div", {
+            className: classes.benchmarkContainer
+        }, /*#__PURE__*/ _react.createElement("div", {
+            className: classes.triangle,
+            style: benchmarkStyles
+        }));
+    }
+    /**
+   * This functions returns an array of <rect> elements, which form the bars
+   * For each bar an x value, and a width needs to be specified
+   * The computations are done based on percentages
+   * Extra margin is also provided, in the x value to provide some spacing in between the bars
+   */ function _createBars(data) {
+        var _data_chartData;
+        const noOfBars = ((_data_chartData = data.chartData) === null || _data_chartData === void 0 ? void 0 : _data_chartData.reduce((count, point)=>count += (point.data || 0) > 0 ? 1 : 0, 0)) || 1;
+        const totalMarginPercent = barSpacingInPercent * (noOfBars - 1);
+        const defaultColors = [
+            _reacttheme.tokens.colorPaletteBlueForeground2,
+            _reacttheme.tokens.colorPaletteCornflowerForeground2,
+            _reacttheme.tokens.colorPaletteDarkGreenForeground2,
+            _reacttheme.tokens.colorPaletteNavyForeground2,
+            _reacttheme.tokens.colorPaletteDarkOrangeForeground2
+        ];
+        // calculating starting point of each bar and it's range
+        const startingPoint = [];
+        const total = data.chartData.reduce((acc, point)=>acc + (point.horizontalBarChartdata.x ? point.horizontalBarChartdata.x : 0), 0);
+        let prevPosition = 0;
+        let value = 0;
+        let sumOfPercent = 0;
+        data.chartData.map((point, index)=>{
+            const pointData = point.horizontalBarChartdata.x ? point.horizontalBarChartdata.x : 0;
+            value = pointData / total * 100;
+            if (value < 0) {
+                value = 0;
+            } else if (value < 1 && value !== 0) {
+                value = 1;
+            }
+            sumOfPercent += value;
+            return sumOfPercent;
+        });
+        /**
+     * The %age of the space occupied by the margin needs to subtracted
+     * while computing the scaling ratio, since the margins are not being
+     * scaled down, only the data is being scaled down from a higher percentage to lower percentage
+     * Eg: 95% of the space is taken by the bars, 5% by the margins
+     * Now if the sumOfPercent is 120% -> This needs to be scaled down to 95%, not 100%
+     * since that's only space available to the bars
+     */ const scalingRatio = sumOfPercent !== 0 ? (sumOfPercent - totalMarginPercent) / 100 : 1;
+        const bars = data.chartData.map((point, index)=>{
+            const color = point.color ? point.color : defaultColors[Math.floor(Math.random() * 4 + 1)];
+            const pointData = point.horizontalBarChartdata.x ? point.horizontalBarChartdata.x : 0;
+            if (index > 0) {
+                prevPosition += value;
+            }
+            value = pointData / total * 100;
+            if (value < 0) {
+                value = 0;
+            } else if (value < 1 && value !== 0) {
+                value = 1 / scalingRatio;
+            } else {
+                value = value / scalingRatio;
+            }
+            startingPoint.push(prevPosition);
+            const xValue = point.horizontalBarChartdata.x;
+            const placeholderIndex = 1;
+            const isLegendSelected = _legendHighlighted(point.legend) || _noLegendHighlighted();
+            // Render bar label instead of placeholder bar for absolute-scale variant
+            if (index === placeholderIndex && props.variant === _index.HorizontalBarChartVariant.AbsoluteScale) {
+                if (props.hideLabels) {
+                    return /*#__PURE__*/ _react.createElement("text", {
+                        key: index
+                    });
+                }
+                const barValue = data.chartData[0].horizontalBarChartdata.x;
+                return /*#__PURE__*/ _react.createElement("text", {
+                    key: index,
+                    x: `${_isRTL ? 100 - startingPoint[index] : startingPoint[index]}%`,
+                    y: _barHeight / 2,
+                    dominantBaseline: "central",
+                    transform: `translate(${_isRTL ? -4 : 4})`,
+                    className: classes.barLabel,
+                    "aria-hidden": true
+                }, (0, _index1.formatValueWithSIPrefix)(barValue));
+            }
+            return /*#__PURE__*/ _react.createElement("rect", {
+                key: index,
+                x: `${_isRTL ? 100 - startingPoint[index] - value - index * barSpacingInPercent : startingPoint[index] + index * barSpacingInPercent}%`,
+                y: 0,
+                "data-is-focusable": point.legend !== '' ? true : false,
+                width: value + '%',
+                height: _barHeight,
+                fill: color,
+                onMouseOver: point.legend !== '' ? (event)=>_hoverOn(event, xValue, point) : undefined,
+                onFocus: point.legend !== '' ? (event)=>_hoverOn.bind(event, xValue, point) : undefined,
+                role: "img",
+                "aria-label": _getAriaLabel(point),
+                onBlur: _hoverOff,
+                onMouseLeave: _hoverOff,
+                className: classes.barWrapper,
+                opacity: isLegendSelected ? 1 : 0.1,
+                tabIndex: point.legend !== '' ? 0 : undefined
+            });
+        });
+        return bars;
+    }
+    const _getAriaLabel = (point)=>{
+        var _point_callOutAccessibilityData;
+        const legend = point.xAxisCalloutData || point.legend;
+        var _point_horizontalBarChartdata_total;
+        const yValue = point.yAxisCalloutData || (point.horizontalBarChartdata ? `${point.horizontalBarChartdata.x}/${(_point_horizontalBarChartdata_total = point.horizontalBarChartdata.total) !== null && _point_horizontalBarChartdata_total !== void 0 ? _point_horizontalBarChartdata_total : ''}` : 0);
+        return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || (legend ? `${legend}, ` : '') + `${yValue}.`;
+    };
+    function _isChartEmpty() {
+        return !(props.data && props.data.length > 0);
+    }
+    function updatePosition(newX, newY) {
+        const threshold = 1; // Set a threshold for movement
+        const { x, y } = clickPosition;
+        // Calculate the distance moved
+        const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));
+        // Update the position only if the distance moved is greater than the threshold
+        if (distance > threshold) {
+            setClickPosition({
+                x: newX,
+                y: newY
+            });
+            setPopoverOpen(true);
+        }
+    }
+    _react.useEffect(()=>{
+        var _barChartSvgRef_current;
+        const svgWidth = (barChartSvgRef === null || barChartSvgRef === void 0 ? void 0 : (_barChartSvgRef_current = barChartSvgRef.current) === null || _barChartSvgRef_current === void 0 ? void 0 : _barChartSvgRef_current.getBoundingClientRect().width) || 0;
+        const MARGIN_WIDTH_IN_PX = 3;
+        if (svgWidth) {
+            const currentBarSpacing = MARGIN_WIDTH_IN_PX / svgWidth * 100;
+            setBarSpacingInPercent(currentBarSpacing);
+        }
+    }, [
+        barChartSvgRef
+    ]);
+    function _legendHighlighted(barLegend) {
+        if (barLegend === undefined) {
+            return false;
+        }
+        return selectedLegend === barLegend || selectedLegend === '' && activeLegend === barLegend;
+    }
+    /**
+   * This function checks if none of the legends is selected or hovered.*/ function _noLegendHighlighted() {
+        return selectedLegend === '' && activeLegend === '';
+    }
+    const { data } = props;
+    _adjustProps();
+    const classes = (0, _useHorizontalBarChartStylesstyles.useHorizontalBarChartStyles)(props);
+    const focusAttributes = (0, _reacttabster.useFocusableGroup)();
+    const legendButtons = _createLegends(data);
+    let datapoint = 0;
+    var _props_culture;
+    return !_isChartEmpty() ? /*#__PURE__*/ _react.createElement("div", {
+        className: classes.root,
+        onMouseLeave: _handleChartMouseLeave
+    }, data.map((points, index)=>{
+        if (points.chartData && points.chartData[0] && points.chartData[0].horizontalBarChartdata.x) {
+            datapoint = points.chartData[0].horizontalBarChartdata.x;
+        } else {
+            datapoint = 0;
+        }
+        isSingleBar = points.chartData.length === 1 || points.chartData.length > 1 && points.chartData[1].legend === '';
+        if (isSingleBar) {
+            points.chartData[1] = {
+                legend: '',
+                horizontalBarChartdata: {
+                    x: points.chartData[0].horizontalBarChartdata.total - datapoint,
+                    total: points.chartData[0].horizontalBarChartdata.total
+                },
+                color: _reacttheme.tokens.colorBackgroundOverlay
+            };
+        }
+        // Hide right side text of chart title for absolute-scale variant
+        const chartDataText = props.variant === _index.HorizontalBarChartVariant.AbsoluteScale ? null : _getChartDataText(points);
+        const bars = _createBars(points);
+        const keyVal = _uniqLineText + '_' + index;
+        // ToDo - Showtriangle property is per data series. How to account for it in the new stylesheet
+        /*         const classes = useHorizontalBarChartStyles(props.styles!, {
+          width: props.width,
+          showTriangle: !!points!.chartData![0].data,
+          variant: props.variant,
+        }); */ return /*#__PURE__*/ _react.createElement("div", {
+            key: index
+        }, /*#__PURE__*/ _react.createElement("div", {
+            className: classes.items,
+            ...focusAttributes
+        }, /*#__PURE__*/ _react.createElement("div", {
+            className: classes.chartTitle
+        }, points.chartTitle && /*#__PURE__*/ _react.createElement(_FocusableTooltipText.FocusableTooltipText, {
+            className: classes.chartTitleLeft,
+            content: points.chartTitle,
+            accessibilityData: points.chartTitleAccessibilityData
+        }), chartDataText), points.chartData[0].data && _createBenchmark(points), /*#__PURE__*/ _react.createElement("svg", {
+            ref: barChartSvgRef,
+            className: classes.chart,
+            "aria-label": points.chartTitle
+        }, /*#__PURE__*/ _react.createElement("g", {
+            id: keyVal,
+            key: keyVal,
+            ref: (e)=>{
+                _refCallback(e, points.chartData[0].legend);
+            },
+            // NOTE: points.chartData![0] contains current data value
+            onClick: ()=>{
+                const p = points.chartData[0];
+                if (p && p.onClick) {
+                    p.onClick();
+                }
+            }
+        }, bars))));
+    }), /*#__PURE__*/ _react.createElement(_ChartPopover.ChartPopover, {
+        xCalloutValue: xCalloutValue,
+        yCalloutValue: yCalloutValue,
+        culture: (_props_culture = props.culture) !== null && _props_culture !== void 0 ? _props_culture : 'en-us',
+        clickPosition: clickPosition,
+        isPopoverOpen: isPopoverOpen,
+        legend: legend,
+        YValue: hoverValue,
+        color: lineColor,
+        isCalloutForStack: false,
+        customCallout: {
+            customizedCallout: props.onRenderCalloutPerHorizontalBar ? props.onRenderCalloutPerHorizontalBar(barCalloutProps) : undefined,
+            customCalloutProps: props.calloutPropsPerDataPoint ? props.calloutPropsPerDataPoint(barCalloutProps) : undefined
+        },
+        isCartesian: false
+    }), !isSingleBar && /*#__PURE__*/ _react.createElement("div", {
+        ref: (e)=>legendContainer.current = e,
+        className: classes.legendContainer
+    }, legendButtons)) : /*#__PURE__*/ _react.createElement("div", {
+        id: _emptyChartId,
+        role: 'alert',
+        style: {
+            opacity: '0'
+        },
+        "aria-label": 'Graph has no data to display'
+    });
+//TODO validate and fix focus border for issue for popover
+});
+HorizontalBarChart.displayName = 'HorizontalBarChart';