@fluentui/react-charts 9.3.7 → 9.3.9

package/lib/components/Legends/Legends.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Legends/Legends.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { Button } from '@fluentui/react-button';\nimport { Legend, LegendsProps, LegendShape } from './Legends.types';\nimport { Shape } from './shape';\nimport { useLegendStyles } from './useLegendsStyles.styles';\nimport { Overflow, OverflowItem } from '@fluentui/react-overflow';\nimport { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { OverflowMenu } from './OverflowMenu';\nimport { tokens } from '@fluentui/react-theme';\nimport { cloneLegendsToSVG } from '../../utilities/image-export-utils';\nimport { mergeClasses } from '@griffel/react';\n\n// This is an internal interface used for rendering the legends with unique key\ninterface LegendItem extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  name?: string;\n  title: string;\n  action: VoidFunction;\n  hoverAction: VoidFunction;\n  onMouseOutAction: VoidFunction;\n  color: string;\n  shape?: LegendShape;\n  key: number;\n  opacity?: number;\n  stripePattern?: boolean;\n  isLineLegendInBarChart?: boolean;\n  legendAnnotation?: () => React.ReactNode;\n}\n\ninterface LegendMap {\n  [key: string]: boolean;\n}\n\nexport interface LegendState {\n  activeLegend: string;\n  /** Set of legends selected, both for multiple selection and single selection */\n  selectedLegends: LegendMap;\n}\nexport const Legends: React.FunctionComponent<LegendsProps> = React.forwardRef<HTMLDivElement, LegendsProps>(\n  (props, forwardedRef) => {\n    /** Boolean variable to check if one or more legends are selected */\n    let _isLegendSelected = false;\n    let _rootElem = React.useRef<HTMLDivElement | null>(null);\n\n    // set states separately for each instance of the component\n    const [activeLegend, setActiveLegend] = React.useState('');\n    const [selectedLegends, setSelectedLegends] = React.useState<LegendMap>({});\n    const focusAttributes = useFocusableGroup();\n    const arrowAttributes = useArrowNavigationGroup({ axis: 'horizontal', memorizeCurrent: true });\n    const classes = useLegendStyles(props);\n    const toSVG = React.useCallback(\n      (svgWidth: number, isRTL: boolean = false) => {\n        return cloneLegendsToSVG(\n          props.legends,\n          svgWidth,\n          {\n            selectedLegends,\n            centerLegends: !!props.centerLegends,\n            textClassName: classes.text!,\n            isRTL,\n          },\n          _rootElem.current,\n        );\n      },\n      [props.legends, props.centerLegends, selectedLegends, classes.text],\n    );\n\n    React.useImperativeHandle(props.legendRef, () => ({\n      toSVG,\n    }));\n\n    React.useEffect(() => {\n      const initialSelectedLegends = props.selectedLegends ?? props.defaultSelectedLegends;\n      const initialSelectedLegend = props.selectedLegend ?? props.defaultSelectedLegend;\n      let selectedLegendsState = {};\n      if (props.canSelectMultipleLegends) {\n        selectedLegendsState =\n          (initialSelectedLegends ?? [])?.reduce(\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            (combineDict: any, key: any) => ({ [key]: true, ...combineDict }),\n            {},\n          ) || {};\n        setSelectedLegends(selectedLegendsState);\n      } else if (initialSelectedLegend !== undefined) {\n        selectedLegendsState = { [initialSelectedLegend]: true };\n        setSelectedLegends(selectedLegendsState);\n      }\n    }, [\n      props.canSelectMultipleLegends,\n      props.defaultSelectedLegend,\n      props.defaultSelectedLegends,\n      props.selectedLegend,\n      props.selectedLegends,\n    ]);\n\n    _isLegendSelected = Object.keys(selectedLegends).length > 0;\n    const dataToRender = _generateData();\n    const { overflowStyles, allowFocusOnLegends = true, canSelectMultipleLegends = false } = props;\n    const itemIds = dataToRender.map((_item, index) => index.toString());\n    const overflowHoverCardLegends: JSXElement[] = [];\n    dataToRender.map((legend, index) => {\n      const hoverCardElement = _renderButton(legend, index);\n      overflowHoverCardLegends.push(hoverCardElement);\n    });\n    const overflowString = props.overflowText ? props.overflowText : 'more';\n    return props.enabledWrapLines ? renderWrappedLegends() : renderLegends();\n\n    function renderLegends(): JSXElement {\n      return (\n        <div\n          {...focusAttributes}\n          {...arrowAttributes}\n          {...(allowFocusOnLegends && {\n            role: 'listbox',\n            'aria-label': 'Legends',\n            'aria-multiselectable': canSelectMultipleLegends,\n          })}\n          className={classes.root}\n          ref={el => {\n            _rootElem.current = el;\n          }}\n        >\n          <Overflow>\n            <div className={classes.resizableArea} style={{ textAlign: props.centerLegends ? 'center' : 'unset' }}>\n              {dataToRender.map((item, id) => (\n                <OverflowItem key={id} id={id.toString()}>\n                  {_renderButton(item)}\n                </OverflowItem>\n              ))}\n              <OverflowMenu itemIds={itemIds} title={`${overflowString}`} items={overflowHoverCardLegends} />\n            </div>\n          </Overflow>\n        </div>\n      );\n    }\n\n    function renderWrappedLegends(): JSXElement {\n      return (\n        <div\n          {...focusAttributes}\n          {...arrowAttributes}\n          {...(allowFocusOnLegends && {\n            role: 'listbox',\n            'aria-label': 'Legends',\n            'aria-multiselectable': canSelectMultipleLegends,\n          })}\n          style={{ justifyContent: props.centerLegends ? 'center' : 'unset', flexWrap: 'wrap', ...overflowStyles }}\n          className={classes.root}\n        >\n          <div className={classes.resizableArea} style={{ display: 'flex', flexWrap: 'wrap', overflow: 'auto' }}>\n            {dataToRender.map(item => (\n              <div\n                className={mergeClasses(classes.legendContainer, item.legendAnnotation && classes.annotation)}\n                key={item.key}\n              >\n                {_renderButton(item)}\n                {item.legendAnnotation && <div>{item.legendAnnotation()}</div>}\n              </div>\n            ))}\n          </div>\n        </div>\n      );\n    }\n\n    function _generateData(): LegendItem[] {\n      const { /*allowFocusOnLegends = true,*/ shape } = props;\n      const dataItems: LegendItem[] = props.legends.map((legend: Legend, index: number) => {\n        return {\n          /* ...(allowFocusOnLegends && {\n            nativeButtonProps: getIntrinsicElementProps(\n              'div',\n              {\n                legend,\n                ...buttonProperties,\n              },\n              ['title'],\n            ),\n            'aria-setsize': props.legends.length,\n            'aria-posinset': index + 1,\n          }), */\n          title: legend.title,\n          action: legend.action!,\n          hoverAction: legend.hoverAction!,\n          onMouseOutAction: legend.onMouseOutAction!,\n          color: legend.color,\n          shape: shape ? shape : legend.shape,\n          stripePattern: legend.stripePattern,\n          isLineLegendInBarChart: legend.isLineLegendInBarChart,\n          opacity: legend.opacity,\n          key: index,\n          legendAnnotation: legend.legendAnnotation,\n        };\n      });\n      return dataItems;\n    }\n\n    /**\n     * Determine whether the component is in \"controlled\" mode for selections, where the selected legend(s) are\n     * determined entirely by props passed in from the parent component.\n     */\n    function _isInControlledMode(): boolean {\n      return props.canSelectMultipleLegends ? props.selectedLegends !== undefined : props.selectedLegend !== undefined;\n    }\n\n    /**\n     * Get the new selected legends based on the legend that was clicked when multi-select is enabled.\n     * @param legend The legend that was clicked\n     * @returns An object with the new selected legend(s) state data.\n     */\n    function _getNewSelectedLegendsForMultiselect(legend: Legend): { [key: string]: boolean } {\n      let legendsSelected = { ...selectedLegends };\n      if (legendsSelected[legend.title]) {\n        // Delete entry for the deselected legend to make\n        // the number of keys equal to the number of selected legends\n        delete legendsSelected[legend.title];\n      } else {\n        legendsSelected[legend.title] = true;\n        // Clear set if all legends are selected\n        if (Object.keys(legendsSelected).length === props.legends.length) {\n          legendsSelected = {};\n        }\n      }\n      return legendsSelected;\n    }\n\n    /**\n     * Get the new selected legends based on the legend that was clicked when single-select is enabled.\n     * @param legend The legend that was clicked\n     * @returns An object with the new selected legend state data.\n     */\n    function _getNewSelectedLegendsForSingleSelect(legend: Legend): { [key: string]: boolean } {\n      return selectedLegends[legend.title] ? {} : { [legend.title]: true };\n    }\n\n    function _onClick(legend: Legend, event: React.MouseEvent<HTMLButtonElement>): void {\n      const { canSelectMultipleLegends = false } = props;\n      const nextSelectedLegends = canSelectMultipleLegends\n        ? _getNewSelectedLegendsForMultiselect(legend)\n        : _getNewSelectedLegendsForSingleSelect(legend);\n\n      if (!_isInControlledMode()) {\n        setSelectedLegends(nextSelectedLegends);\n      }\n      props.onChange?.(Object.keys(nextSelectedLegends), event, legend);\n      legend.action?.();\n    }\n\n    function _onHoverOverLegend(legend: Legend) {\n      if (legend.hoverAction) {\n        setActiveLegend(legend.title);\n        legend.hoverAction();\n      }\n    }\n\n    function _onLeave(legend: Legend) {\n      if (legend.onMouseOutAction) {\n        setActiveLegend('');\n        legend.onMouseOutAction();\n      }\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    function _renderButton(data: any, index?: number) {\n      const { allowFocusOnLegends = true } = props;\n      const legend: Legend = {\n        title: data.title,\n        color: data.color,\n        shape: data.shape,\n        action: data.action,\n        hoverAction: data.hoverAction,\n        onMouseOutAction: data.onMouseOutAction,\n        stripePattern: data.stripePattern,\n        isLineLegendInBarChart: data.isLineLegendInBarChart,\n        opacity: data.opacity,\n      };\n      const color = _getColor(legend.title, legend.color);\n      const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n        _onClick(legend, event);\n      };\n      const onHoverHandler = () => {\n        _onHoverOverLegend(legend);\n      };\n      const onMouseOut = () => {\n        _onLeave(legend);\n      };\n      const shape = _getShape(legend, color);\n      return (\n        <Button\n          {...(allowFocusOnLegends && {\n            'aria-selected': !!selectedLegends[legend.title],\n            role: 'option',\n            'aria-label': `${legend.title}`,\n            'aria-setsize': data['aria-setsize'],\n            'aria-posinset': data['aria-posinset'],\n          })}\n          {...(data.nativeButtonProps && { ...data.nativeButtonProps })}\n          key={index}\n          className={classes.legend}\n          onClick={onClickHandler}\n          onMouseOver={onHoverHandler}\n          onMouseOut={onMouseOut}\n          onFocus={onHoverHandler}\n          onBlur={onMouseOut}\n          appearance={'outline'}\n          size=\"small\"\n          style={{\n            '--rect-height': legend.isLineLegendInBarChart ? '4px' : '12px',\n            '--rect-backgroundColor': legend.stripePattern ? '' : color,\n            '--rect-borderColor': legend.color ? legend.color : tokens.colorNeutralStroke1,\n            '--rect-content': legend.stripePattern\n              ? // eslint-disable-next-line @fluentui/max-len\n                `repeating-linear-gradient(135deg, transparent, transparent 3px, ${color} 1px, ${color} 4px)`\n              : '',\n          }} /* eslint-enable react/jsx-no-bind */\n        >\n          {shape}\n          <div className={classes.text} style={{ opacity: color === tokens.colorNeutralBackground1 ? '0.67' : '' }}>\n            {legend.title}\n          </div>\n        </Button>\n      );\n    }\n\n    function _getShape(legend: Legend, color: string): React.ReactNode | string {\n      const svgParentProps: React.SVGAttributes<SVGElement> = {\n        className: classes.shape,\n      };\n      const svgChildProps: React.SVGAttributes<SVGElement> = {\n        fill: color,\n        strokeWidth: 2,\n        stroke: legend.color,\n      };\n      return (\n        <Shape\n          svgProps={svgParentProps}\n          pathProps={svgChildProps}\n          shape={legend.shape as LegendShape}\n          classNameForNonSvg={classes.rect}\n          style={\n            {\n              height: legend.isLineLegendInBarChart ? '4px' : '12px',\n              backgroundColor: legend.stripePattern ? '' : color,\n              borderColor: legend.color ? legend.color : tokens.colorNeutralStroke1,\n              content: legend.stripePattern\n                ? // eslint-disable-next-line @fluentui/max-len\n                  `repeating-linear-gradient(135deg, transparent, transparent 3px, ${color} 1px, ${color} 4px)`\n                : '',\n              '--rect-content-high-contrast': `linear-gradient(to right, ${color}, ${color})`,\n              '--rect-opacity-high-contrast': color === tokens.colorNeutralBackground1 ? '0.6' : '',\n            } as React.CSSProperties\n          }\n        />\n      );\n    }\n\n    function _getColor(title: string, color: string): string {\n      let legendColor = color;\n      // if one or more legends are selected\n      if (_isLegendSelected) {\n        // if the given legend (title) is one of the selected legends\n        if (selectedLegends[title]) {\n          legendColor = color;\n        }\n        // if the given legend is unselected\n        else {\n          legendColor = tokens.colorNeutralBackground1;\n        }\n      }\n      // if no legend is selected\n      else {\n        // if the given legend is hovered\n        // or none of the legends is hovered\n        if (activeLegend === title || activeLegend === '') {\n          legendColor = color;\n        }\n        // if there is a hovered legend but the given legend is not the one\n        else {\n          legendColor = tokens.colorNeutralBackground1;\n        }\n      }\n      return legendColor;\n    }\n  },\n);\nLegends.displayName = 'Legends';\n"],"names":["React","Button","Shape","useLegendStyles","Overflow","OverflowItem","useFocusableGroup","useArrowNavigationGroup","OverflowMenu","tokens","cloneLegendsToSVG","mergeClasses","Legends","forwardRef","props","forwardedRef","_isLegendSelected","_rootElem","useRef","activeLegend","setActiveLegend","useState","selectedLegends","setSelectedLegends","focusAttributes","arrowAttributes","axis","memorizeCurrent","classes","toSVG","useCallback","svgWidth","isRTL","legends","centerLegends","textClassName","text","current","useImperativeHandle","legendRef","useEffect","initialSelectedLegends","defaultSelectedLegends","initialSelectedLegend","selectedLegend","defaultSelectedLegend","selectedLegendsState","canSelectMultipleLegends","reduce","combineDict","key","undefined","Object","keys","length","dataToRender","_generateData","overflowStyles","allowFocusOnLegends","itemIds","map","_item","index","toString","overflowHoverCardLegends","legend","hoverCardElement","_renderButton","push","overflowString","overflowText","enabledWrapLines","renderWrappedLegends","renderLegends","div","role","className","root","ref","el","resizableArea","style","textAlign","item","id","title","items","justifyContent","flexWrap","display","overflow","legendContainer","legendAnnotation","annotation","shape","dataItems","action","hoverAction","onMouseOutAction","color","stripePattern","isLineLegendInBarChart","opacity","_isInControlledMode","_getNewSelectedLegendsForMultiselect","legendsSelected","_getNewSelectedLegendsForSingleSelect","_onClick","event","nextSelectedLegends","onChange","_onHoverOverLegend","_onLeave","data","_getColor","onClickHandler","onHoverHandler","onMouseOut","_getShape","nativeButtonProps","onClick","onMouseOver","onFocus","onBlur","appearance","size","colorNeutralStroke1","colorNeutralBackground1","svgParentProps","svgChildProps","fill","strokeWidth","stroke","svgProps","pathProps","classNameForNonSvg","rect","height","backgroundColor","borderColor","content","legendColor","displayName"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Legends/Legends.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { Button } from '@fluentui/react-button';\nimport { Legend, LegendsProps, LegendShape } from './Legends.types';\nimport { Shape } from './shape';\nimport { useLegendStyles } from './useLegendsStyles.styles';\nimport { Overflow, OverflowItem } from '@fluentui/react-overflow';\nimport { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { OverflowMenu } from './OverflowMenu';\nimport { tokens } from '@fluentui/react-theme';\nimport { cloneLegendsToSVG } from '../../utilities/image-export-utils';\nimport { mergeClasses } from '@griffel/react';\n\n// This is an internal interface used for rendering the legends with unique key\ninterface LegendItem extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  name?: string;\n  title: string;\n  action: VoidFunction;\n  hoverAction: VoidFunction;\n  onMouseOutAction: VoidFunction;\n  color: string;\n  shape?: LegendShape;\n  key: number;\n  opacity?: number;\n  stripePattern?: boolean;\n  isLineLegendInBarChart?: boolean;\n  legendAnnotation?: () => React.ReactNode;\n}\n\ninterface LegendMap {\n  [key: string]: boolean;\n}\n\nexport interface LegendState {\n  activeLegend: string;\n  /** Set of legends selected, both for multiple selection and single selection */\n  selectedLegends: LegendMap;\n}\nexport const Legends: React.FunctionComponent<LegendsProps> = React.forwardRef<HTMLDivElement, LegendsProps>(\n  (props, forwardedRef) => {\n    /** Boolean variable to check if one or more legends are selected */\n    let _isLegendSelected = false;\n    let _rootElem = React.useRef<HTMLDivElement | null>(null);\n\n    // set states separately for each instance of the component\n    const [activeLegend, setActiveLegend] = React.useState('');\n    const [selectedLegends, setSelectedLegends] = React.useState<LegendMap>({});\n    const focusAttributes = useFocusableGroup();\n    const arrowAttributes = useArrowNavigationGroup({ axis: 'horizontal', memorizeCurrent: true });\n    const classes = useLegendStyles(props);\n    const toSVG = React.useCallback(\n      (svgWidth: number, isRTL: boolean = false) => {\n        return cloneLegendsToSVG(\n          props.legends,\n          svgWidth,\n          {\n            selectedLegends,\n            centerLegends: !!props.centerLegends,\n            textClassName: classes.text!,\n            isRTL,\n          },\n          _rootElem.current,\n        );\n      },\n      [props.legends, props.centerLegends, selectedLegends, classes.text],\n    );\n\n    React.useImperativeHandle(props.legendRef, () => ({\n      toSVG,\n    }));\n\n    React.useEffect(() => {\n      const initialSelectedLegends = props.selectedLegends ?? props.defaultSelectedLegends;\n      const initialSelectedLegend = props.selectedLegend ?? props.defaultSelectedLegend;\n      let selectedLegendsState = {};\n      if (props.canSelectMultipleLegends) {\n        selectedLegendsState =\n          (initialSelectedLegends ?? [])?.reduce(\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            (combineDict: any, key: any) => ({ [key]: true, ...combineDict }),\n            {},\n          ) || {};\n        setSelectedLegends(selectedLegendsState);\n      } else if (initialSelectedLegend !== undefined) {\n        selectedLegendsState = { [initialSelectedLegend]: true };\n        setSelectedLegends(selectedLegendsState);\n      }\n    }, [\n      props.canSelectMultipleLegends,\n      props.defaultSelectedLegend,\n      props.defaultSelectedLegends,\n      props.selectedLegend,\n      props.selectedLegends,\n    ]);\n\n    _isLegendSelected = Object.keys(selectedLegends).length > 0;\n    const dataToRender = _generateData();\n    const { overflowStyles, allowFocusOnLegends = true, canSelectMultipleLegends = false } = props;\n    const itemIds = dataToRender.map((_item, index) => index.toString());\n    const overflowHoverCardLegends: JSXElement[] = [];\n    dataToRender.map((legend, index) => {\n      const hoverCardElement = _renderButton(legend, index);\n      overflowHoverCardLegends.push(hoverCardElement);\n    });\n    const overflowString = props.overflowText ? props.overflowText : 'more';\n    return props.enabledWrapLines ? renderWrappedLegends() : renderLegends();\n\n    function renderLegends(): JSXElement {\n      return (\n        <div\n          {...focusAttributes}\n          {...arrowAttributes}\n          {...(allowFocusOnLegends && {\n            role: 'listbox',\n            'aria-label': 'Legends',\n            'aria-multiselectable': canSelectMultipleLegends,\n          })}\n          className={classes.root}\n          ref={_rootElem}\n        >\n          <Overflow>\n            <div className={classes.resizableArea} style={{ textAlign: props.centerLegends ? 'center' : 'unset' }}>\n              {dataToRender.map((item, id) => (\n                <OverflowItem key={id} id={id.toString()}>\n                  {_renderButton(item)}\n                </OverflowItem>\n              ))}\n              <OverflowMenu itemIds={itemIds} title={`${overflowString}`} items={overflowHoverCardLegends} />\n            </div>\n          </Overflow>\n        </div>\n      );\n    }\n\n    function renderWrappedLegends(): JSXElement {\n      return (\n        <div\n          {...focusAttributes}\n          {...arrowAttributes}\n          {...(allowFocusOnLegends && {\n            role: 'listbox',\n            'aria-label': 'Legends',\n            'aria-multiselectable': canSelectMultipleLegends,\n          })}\n          style={{ justifyContent: props.centerLegends ? 'center' : 'unset', flexWrap: 'wrap', ...overflowStyles }}\n          className={classes.root}\n          ref={_rootElem}\n        >\n          <div className={classes.resizableArea} style={{ display: 'flex', flexWrap: 'wrap', overflow: 'auto' }}>\n            {dataToRender.map(item => (\n              <div\n                className={mergeClasses(classes.legendContainer, item.legendAnnotation && classes.annotation)}\n                key={item.key}\n              >\n                {_renderButton(item)}\n                {item.legendAnnotation && <div>{item.legendAnnotation()}</div>}\n              </div>\n            ))}\n          </div>\n        </div>\n      );\n    }\n\n    function _generateData(): LegendItem[] {\n      const { /*allowFocusOnLegends = true,*/ shape } = props;\n      const dataItems: LegendItem[] = props.legends.map((legend: Legend, index: number) => {\n        return {\n          /* ...(allowFocusOnLegends && {\n            nativeButtonProps: getIntrinsicElementProps(\n              'div',\n              {\n                legend,\n                ...buttonProperties,\n              },\n              ['title'],\n            ),\n            'aria-setsize': props.legends.length,\n            'aria-posinset': index + 1,\n          }), */\n          title: legend.title,\n          action: legend.action!,\n          hoverAction: legend.hoverAction!,\n          onMouseOutAction: legend.onMouseOutAction!,\n          color: legend.color,\n          shape: shape ? shape : legend.shape,\n          stripePattern: legend.stripePattern,\n          isLineLegendInBarChart: legend.isLineLegendInBarChart,\n          opacity: legend.opacity,\n          key: index,\n          legendAnnotation: legend.legendAnnotation,\n        };\n      });\n      return dataItems;\n    }\n\n    /**\n     * Determine whether the component is in \"controlled\" mode for selections, where the selected legend(s) are\n     * determined entirely by props passed in from the parent component.\n     */\n    function _isInControlledMode(): boolean {\n      return props.canSelectMultipleLegends ? props.selectedLegends !== undefined : props.selectedLegend !== undefined;\n    }\n\n    /**\n     * Get the new selected legends based on the legend that was clicked when multi-select is enabled.\n     * @param legend The legend that was clicked\n     * @returns An object with the new selected legend(s) state data.\n     */\n    function _getNewSelectedLegendsForMultiselect(legend: Legend): { [key: string]: boolean } {\n      let legendsSelected = { ...selectedLegends };\n      if (legendsSelected[legend.title]) {\n        // Delete entry for the deselected legend to make\n        // the number of keys equal to the number of selected legends\n        delete legendsSelected[legend.title];\n      } else {\n        legendsSelected[legend.title] = true;\n        // Clear set if all legends are selected\n        if (Object.keys(legendsSelected).length === props.legends.length) {\n          legendsSelected = {};\n        }\n      }\n      return legendsSelected;\n    }\n\n    /**\n     * Get the new selected legends based on the legend that was clicked when single-select is enabled.\n     * @param legend The legend that was clicked\n     * @returns An object with the new selected legend state data.\n     */\n    function _getNewSelectedLegendsForSingleSelect(legend: Legend): { [key: string]: boolean } {\n      return selectedLegends[legend.title] ? {} : { [legend.title]: true };\n    }\n\n    function _onClick(legend: Legend, event: React.MouseEvent<HTMLButtonElement>): void {\n      const { canSelectMultipleLegends = false } = props;\n      const nextSelectedLegends = canSelectMultipleLegends\n        ? _getNewSelectedLegendsForMultiselect(legend)\n        : _getNewSelectedLegendsForSingleSelect(legend);\n\n      if (!_isInControlledMode()) {\n        setSelectedLegends(nextSelectedLegends);\n      }\n      props.onChange?.(Object.keys(nextSelectedLegends), event, legend);\n      legend.action?.();\n    }\n\n    function _onHoverOverLegend(legend: Legend) {\n      if (legend.hoverAction) {\n        setActiveLegend(legend.title);\n        legend.hoverAction();\n      }\n    }\n\n    function _onLeave(legend: Legend) {\n      if (legend.onMouseOutAction) {\n        setActiveLegend('');\n        legend.onMouseOutAction();\n      }\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    function _renderButton(data: any, index?: number) {\n      const { allowFocusOnLegends = true } = props;\n      const legend: Legend = {\n        title: data.title,\n        color: data.color,\n        shape: data.shape,\n        action: data.action,\n        hoverAction: data.hoverAction,\n        onMouseOutAction: data.onMouseOutAction,\n        stripePattern: data.stripePattern,\n        isLineLegendInBarChart: data.isLineLegendInBarChart,\n        opacity: data.opacity,\n      };\n      const color = _getColor(legend.title, legend.color);\n      const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n        _onClick(legend, event);\n      };\n      const onHoverHandler = () => {\n        _onHoverOverLegend(legend);\n      };\n      const onMouseOut = () => {\n        _onLeave(legend);\n      };\n      const shape = _getShape(legend, color);\n      return (\n        <Button\n          {...(allowFocusOnLegends && {\n            'aria-selected': !!selectedLegends[legend.title],\n            role: 'option',\n            'aria-label': `${legend.title}`,\n            'aria-setsize': data['aria-setsize'],\n            'aria-posinset': data['aria-posinset'],\n          })}\n          {...(data.nativeButtonProps && { ...data.nativeButtonProps })}\n          key={index}\n          className={classes.legend}\n          onClick={onClickHandler}\n          onMouseOver={onHoverHandler}\n          onMouseOut={onMouseOut}\n          onFocus={onHoverHandler}\n          onBlur={onMouseOut}\n          appearance={'outline'}\n          size=\"small\"\n          style={{\n            '--rect-height': legend.isLineLegendInBarChart ? '4px' : '12px',\n            '--rect-backgroundColor': legend.stripePattern ? '' : color,\n            '--rect-borderColor': legend.color ? legend.color : tokens.colorNeutralStroke1,\n            '--rect-content': legend.stripePattern\n              ? // eslint-disable-next-line @fluentui/max-len\n                `repeating-linear-gradient(135deg, transparent, transparent 3px, ${color} 1px, ${color} 4px)`\n              : '',\n          }} /* eslint-enable react/jsx-no-bind */\n        >\n          {shape}\n          <div className={classes.text} style={{ opacity: color === tokens.colorNeutralBackground1 ? '0.67' : '' }}>\n            {legend.title}\n          </div>\n        </Button>\n      );\n    }\n\n    function _getShape(legend: Legend, color: string): React.ReactNode | string {\n      const svgParentProps: React.SVGAttributes<SVGElement> = {\n        className: classes.shape,\n      };\n      const svgChildProps: React.SVGAttributes<SVGElement> = {\n        fill: color,\n        strokeWidth: 2,\n        stroke: legend.color,\n      };\n      return (\n        <Shape\n          svgProps={svgParentProps}\n          pathProps={svgChildProps}\n          shape={legend.shape as LegendShape}\n          classNameForNonSvg={classes.rect}\n          style={\n            {\n              height: legend.isLineLegendInBarChart ? '4px' : '12px',\n              backgroundColor: legend.stripePattern ? '' : color,\n              borderColor: legend.color ? legend.color : tokens.colorNeutralStroke1,\n              content: legend.stripePattern\n                ? // eslint-disable-next-line @fluentui/max-len\n                  `repeating-linear-gradient(135deg, transparent, transparent 3px, ${color} 1px, ${color} 4px)`\n                : '',\n              '--rect-content-high-contrast': `linear-gradient(to right, ${color}, ${color})`,\n              '--rect-opacity-high-contrast': color === tokens.colorNeutralBackground1 ? '0.6' : '',\n            } as React.CSSProperties\n          }\n        />\n      );\n    }\n\n    function _getColor(title: string, color: string): string {\n      let legendColor = color;\n      // if one or more legends are selected\n      if (_isLegendSelected) {\n        // if the given legend (title) is one of the selected legends\n        if (selectedLegends[title]) {\n          legendColor = color;\n        }\n        // if the given legend is unselected\n        else {\n          legendColor = tokens.colorNeutralBackground1;\n        }\n      }\n      // if no legend is selected\n      else {\n        // if the given legend is hovered\n        // or none of the legends is hovered\n        if (activeLegend === title || activeLegend === '') {\n          legendColor = color;\n        }\n        // if there is a hovered legend but the given legend is not the one\n        else {\n          legendColor = tokens.colorNeutralBackground1;\n        }\n      }\n      return legendColor;\n    }\n  },\n);\nLegends.displayName = 'Legends';\n"],"names":["React","Button","Shape","useLegendStyles","Overflow","OverflowItem","useFocusableGroup","useArrowNavigationGroup","OverflowMenu","tokens","cloneLegendsToSVG","mergeClasses","Legends","forwardRef","props","forwardedRef","_isLegendSelected","_rootElem","useRef","activeLegend","setActiveLegend","useState","selectedLegends","setSelectedLegends","focusAttributes","arrowAttributes","axis","memorizeCurrent","classes","toSVG","useCallback","svgWidth","isRTL","legends","centerLegends","textClassName","text","current","useImperativeHandle","legendRef","useEffect","initialSelectedLegends","defaultSelectedLegends","initialSelectedLegend","selectedLegend","defaultSelectedLegend","selectedLegendsState","canSelectMultipleLegends","reduce","combineDict","key","undefined","Object","keys","length","dataToRender","_generateData","overflowStyles","allowFocusOnLegends","itemIds","map","_item","index","toString","overflowHoverCardLegends","legend","hoverCardElement","_renderButton","push","overflowString","overflowText","enabledWrapLines","renderWrappedLegends","renderLegends","div","role","className","root","ref","resizableArea","style","textAlign","item","id","title","items","justifyContent","flexWrap","display","overflow","legendContainer","legendAnnotation","annotation","shape","dataItems","action","hoverAction","onMouseOutAction","color","stripePattern","isLineLegendInBarChart","opacity","_isInControlledMode","_getNewSelectedLegendsForMultiselect","legendsSelected","_getNewSelectedLegendsForSingleSelect","_onClick","event","nextSelectedLegends","onChange","_onHoverOverLegend","_onLeave","data","_getColor","onClickHandler","onHoverHandler","onMouseOut","_getShape","nativeButtonProps","onClick","onMouseOver","onFocus","onBlur","appearance","size","colorNeutralStroke1","colorNeutralBackground1","svgParentProps","svgChildProps","fill","strokeWidth","stroke","svgProps","pathProps","classNameForNonSvg","rect","height","backgroundColor","borderColor","content","legendColor","displayName"],"mappings":"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"}

package/lib/components/Legends/OverflowMenu.js

@@ -13,10 +13,17 @@ export const OverflowMenu = ({ itemIds, title, items })=>{
     const remainingItemsCount = itemIds.length - overflowCount;
     const menuList = [];
     for(let i = remainingItemsCount; i < itemIds.length; i++){
+        const buttonElement = items[i];
         menuList.push(/*#__PURE__*/ React.createElement(MenuItem, {
             tabIndex: -1,
-            key: i
-        }, items[i]));
+            key: i,
+            onClick: (e)=>{
+                const button = buttonElement.props;
+                if (button.onClick) {
+                    button.onClick(e);
+                }
+            }
+        }, buttonElement));
     }
     return /*#__PURE__*/ React.createElement(Menu, null, /*#__PURE__*/ React.createElement(MenuTrigger, {
         disableButtonEnhancement: true

package/lib/components/Legends/OverflowMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Legends/OverflowMenu.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-menu';\nimport { MenuButton } from '@fluentui/react-button';\nimport { useOverflowMenu } from '@fluentui/react-overflow';\n\nexport const OverflowMenu: React.FC<{\n  itemIds: string[];\n  title: string;\n  items: JSXElement[];\n}> = ({ itemIds, title, items }) => {\n  const { ref, overflowCount, isOverflowing } = useOverflowMenu<HTMLButtonElement>();\n  let displayLabel = title;\n  displayLabel = title === '' ? `+${overflowCount} items` : `+${overflowCount} ${title}`;\n\n  if (!isOverflowing) {\n    return null;\n  }\n  const remainingItemsCount = itemIds.length - overflowCount;\n  const menuList = [];\n  for (let i = remainingItemsCount; i < itemIds.length; i++) {\n    menuList.push(\n      <MenuItem tabIndex={-1} key={i}>\n        {items[i]}\n      </MenuItem>,\n    );\n  }\n  return (\n    <Menu>\n      <MenuTrigger disableButtonEnhancement>\n        <MenuButton ref={ref}>{displayLabel}</MenuButton>\n      </MenuTrigger>\n\n      <MenuPopover>\n        <MenuList>{menuList}</MenuList>\n      </MenuPopover>\n    </Menu>\n  );\n};\n"],"names":["React","Menu","MenuTrigger","MenuPopover","MenuList","MenuItem","MenuButton","useOverflowMenu","OverflowMenu","itemIds","title","items","ref","overflowCount","isOverflowing","displayLabel","remainingItemsCount","length","menuList","i","push","tabIndex","key","disableButtonEnhancement"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,IAAI,EAAEC,WAAW,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,uBAAuB;AAC1F,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,OAAO,MAAMC,eAIR,CAAC,EAAEC,OAAO,EAAEC,KAAK,EAAEC,KAAK,EAAE;IAC7B,MAAM,EAAEC,GAAG,EAAEC,aAAa,EAAEC,aAAa,EAAE,GAAGP;IAC9C,IAAIQ,eAAeL;IACnBK,eAAeL,UAAU,KAAK,CAAC,CAAC,EAAEG,cAAc,MAAM,CAAC,GAAG,CAAC,CAAC,EAAEA,cAAc,CAAC,EAAEH,OAAO;IAEtF,IAAI,CAACI,eAAe;QAClB,OAAO;IACT;IACA,MAAME,sBAAsBP,QAAQQ,MAAM,GAAGJ;IAC7C,MAAMK,WAAW,EAAE;IACnB,IAAK,IAAIC,IAAIH,qBAAqBG,IAAIV,QAAQQ,MAAM,EAAEE,IAAK;QACzDD,SAASE,IAAI,eACX,oBAACf;YAASgB,UAAU,CAAC;YAAGC,KAAKH;WAC1BR,KAAK,CAACQ,EAAE;IAGf;IACA,qBACE,oBAAClB,0BACC,oBAACC;QAAYqB,0BAAAA;qBACX,oBAACjB;QAAWM,KAAKA;OAAMG,8BAGzB,oBAACZ,iCACC,oBAACC,gBAAUc;AAInB,EAAE"}
+{"version":3,"sources":["../src/components/Legends/OverflowMenu.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-menu';\nimport { MenuButton } from '@fluentui/react-button';\nimport { useOverflowMenu } from '@fluentui/react-overflow';\n\nexport const OverflowMenu: React.FC<{\n  itemIds: string[];\n  title: string;\n  items: JSXElement[];\n}> = ({ itemIds, title, items }) => {\n  const { ref, overflowCount, isOverflowing } = useOverflowMenu<HTMLButtonElement>();\n  let displayLabel = title;\n  displayLabel = title === '' ? `+${overflowCount} items` : `+${overflowCount} ${title}`;\n\n  if (!isOverflowing) {\n    return null;\n  }\n  const remainingItemsCount = itemIds.length - overflowCount;\n  const menuList = [];\n  for (let i = remainingItemsCount; i < itemIds.length; i++) {\n    const buttonElement = items[i];\n    menuList.push(\n      <MenuItem\n        tabIndex={-1}\n        key={i}\n        onClick={e => {\n          const button = buttonElement.props;\n          if (button.onClick) {\n            button.onClick(e);\n          }\n        }}\n      >\n        {buttonElement}\n      </MenuItem>,\n    );\n  }\n  return (\n    <Menu>\n      <MenuTrigger disableButtonEnhancement>\n        <MenuButton ref={ref}>{displayLabel}</MenuButton>\n      </MenuTrigger>\n\n      <MenuPopover>\n        <MenuList>{menuList}</MenuList>\n      </MenuPopover>\n    </Menu>\n  );\n};\n"],"names":["React","Menu","MenuTrigger","MenuPopover","MenuList","MenuItem","MenuButton","useOverflowMenu","OverflowMenu","itemIds","title","items","ref","overflowCount","isOverflowing","displayLabel","remainingItemsCount","length","menuList","i","buttonElement","push","tabIndex","key","onClick","e","button","props","disableButtonEnhancement"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,IAAI,EAAEC,WAAW,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,uBAAuB;AAC1F,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,OAAO,MAAMC,eAIR,CAAC,EAAEC,OAAO,EAAEC,KAAK,EAAEC,KAAK,EAAE;IAC7B,MAAM,EAAEC,GAAG,EAAEC,aAAa,EAAEC,aAAa,EAAE,GAAGP;IAC9C,IAAIQ,eAAeL;IACnBK,eAAeL,UAAU,KAAK,CAAC,CAAC,EAAEG,cAAc,MAAM,CAAC,GAAG,CAAC,CAAC,EAAEA,cAAc,CAAC,EAAEH,OAAO;IAEtF,IAAI,CAACI,eAAe;QAClB,OAAO;IACT;IACA,MAAME,sBAAsBP,QAAQQ,MAAM,GAAGJ;IAC7C,MAAMK,WAAW,EAAE;IACnB,IAAK,IAAIC,IAAIH,qBAAqBG,IAAIV,QAAQQ,MAAM,EAAEE,IAAK;QACzD,MAAMC,gBAAgBT,KAAK,CAACQ,EAAE;QAC9BD,SAASG,IAAI,eACX,oBAAChB;YACCiB,UAAU,CAAC;YACXC,KAAKJ;YACLK,SAASC,CAAAA;gBACP,MAAMC,SAASN,cAAcO,KAAK;gBAClC,IAAID,OAAOF,OAAO,EAAE;oBAClBE,OAAOF,OAAO,CAACC;gBACjB;YACF;WAECL;IAGP;IACA,qBACE,oBAACnB,0BACC,oBAACC;QAAY0B,0BAAAA;qBACX,oBAACtB;QAAWM,KAAKA;OAAMG,8BAGzB,oBAACZ,iCACC,oBAACC,gBAAUc;AAInB,EAAE"}

package/lib/components/LineChart/LineChart.js

@@ -11,7 +11,7 @@ import { find, findCalloutPoints } from '../../utilities/index';
 import { CartesianChart } from '../../index';
 import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
 import { tokens } from '@fluentui/react-theme';
-import { calloutData, ChartTypes, getXAxisType, XAxisTypes, tooltipOfAxislabels, Points, pointTypes, getTypeOfAxis, getNextColor, getColorFromToken, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfNumericForAreaLineScatterCharts, createStringYAxis, useRtl, getCurveFactory, isScatterPolarSeries, getDomainPaddingForMarkers, isPlottable, getRangeForScatterMarkerSize } from '../../utilities/index';
+import { calloutData, ChartTypes, getXAxisType, XAxisTypes, Points, pointTypes, getTypeOfAxis, getNextColor, getColorFromToken, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfNumericForAreaLineScatterCharts, createStringYAxis, useRtl, getCurveFactory, isScatterPolarSeries, getDomainPaddingForMarkers, isPlottable, getRangeForScatterMarkerSize } from '../../utilities/index';
 import { renderScatterPolarCategoryLabels } from '../../utilities/scatterpolar-utils';
 import { formatDateToLocaleString } from '@fluentui/chart-utilities';
 import { useImageExport } from '../../utilities/hooks';
@@ -117,7 +117,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
     let lines;
     let _renderedColorFillBars;
     const _colorFillBars = React.useRef([]);
-    let _tooltipId = useId('LineChartTooltipId_');
     let _rectId = useId('containerRectLD');
     let _staticHighlightCircle = useId('staticHighlightCircle');
     let _firstRenderOptimization = true;
@@ -167,7 +166,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
     function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues) {
         let domainNRangeValue;
         if (xAxisType === XAxisTypes.NumericAxis) {
-            domainNRangeValue = domainRangeOfNumericForAreaLineScatterCharts(points, margins, width, isRTL, props.xScaleType, _hasMarkersMode);
+            domainNRangeValue = domainRangeOfNumericForAreaLineScatterCharts(points, margins, width, isRTL, props.xScaleType, _hasMarkersMode, props.xMinValue, props.xMaxValue);
         } else if (xAxisType === XAxisTypes.DateAxis) {
             domainNRangeValue = domainRangeOfDateForAreaLineScatterVerticalBarCharts(points, margins, width, isRTL, tickValues, chartType, barWidth, _hasMarkersMode);
         } else {
@@ -460,7 +459,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
                         stroke: activePoint === circleId ? lineColor : '',
                         role: "img",
                         "aria-label": (_points_i_data__text = _points[i].data[0].text) !== null && _points_i_data__text !== void 0 ? _points_i_data__text : _getAriaLabel(i, 0),
-                        "data-is-focusable": isLegendSelected,
                         ref: (e)=>{
                             _refCallback(e, circleId);
                         },
@@ -523,7 +521,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
                         key: lineId,
                         d: line(lineData),
                         fill: "transparent",
-                        "data-is-focusable": true,
                         stroke: lineColor,
                         strokeWidth: strokeWidth,
                         strokeLinecap: (_points_i_lineOptions_strokeLinecap1 = (_points_i_lineOptions6 = _points[i].lineOptions) === null || _points_i_lineOptions6 === void 0 ? void 0 : _points_i_lineOptions6.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap1 !== void 0 ? _points_i_lineOptions_strokeLinecap1 : 'round',
@@ -543,7 +540,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                         key: lineId,
                         d: line(lineData),
                         fill: "transparent",
-                        "data-is-focusable": false,
+                        tabIndex: -1,
                         stroke: lineColor,
                         strokeWidth: strokeWidth,
                         strokeLinecap: (_points_i_lineOptions_strokeLinecap2 = (_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : _points_i_lineOptions10.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap2 !== void 0 ? _points_i_lineOptions_strokeLinecap2 : 'round',
@@ -560,6 +557,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                     cy: 0,
                     fill: tokens.colorNeutralBackground1,
                     strokeWidth: DEFAULT_LINE_STROKE_SIZE,
+                    tabIndex: isLegendSelected ? 0 : undefined,
                     stroke: lineColor,
                     visibility: 'hidden',
                     onMouseMove: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
@@ -577,18 +575,23 @@ const PATH_MULTIPLY_SIZE = 2.5;
                             var _points_i_data_k, _points_i;
                             const markerSize = _points[i].data[k].markerSize;
                             const perPointColor = (_points_i_data_k = _points[i].data[k]) === null || _points_i_data_k === void 0 ? void 0 : _points_i_data_k.markerColor;
+                            var _points_i_data_k_text;
                             pointsForLine.push(/*#__PURE__*/ React.createElement("circle", {
                                 key: `${_circleId}_${i}_${k}_marker`,
                                 r: markerSize ? markerSize * extraMaxPixels * 0.3 / maxMarkerSize : activePoint === _circleId ? 5.5 : 3.5,
                                 cx: xPoint,
                                 cy: yPoint,
                                 fill: activePoint === _circleId ? tokens.colorNeutralBackground1 : perPointColor || ((_points_i = _points[i]) === null || _points_i === void 0 ? void 0 : _points_i.color) || lineColor,
+                                tabIndex: isLegendSelected ? 0 : undefined,
                                 stroke: perPointColor || lineColor,
                                 strokeWidth: 1,
                                 opacity: isLegendSelected ? 1 : 0.1,
-                                onMouseMove: _onMouseOverLargeDataset.bind(i, verticaLineHeight, yScale),
-                                onMouseOver: _onMouseOverLargeDataset.bind(i, verticaLineHeight, yScale),
-                                onMouseOut: _handleMouseOut
+                                onMouseMove: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
+                                onMouseOver: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
+                                onFocus: (event)=>_onFocusLargeDataset(i, verticaLineHeight, event, yScale, k),
+                                onMouseOut: _handleMouseOut,
+                                role: "img",
+                                "aria-label": (_points_i_data_k_text = _points[i].data[k].text) !== null && _points_i_data_k_text !== void 0 ? _points_i_data_k_text : _getAriaLabel(i, k)
                             }));
                         }
                     }
@@ -625,7 +628,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                             r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
                             cx: xPoint1,
                             cy: yPoint1,
-                            "data-is-focusable": isLegendSelected,
+                            tabIndex: isLegendSelected ? 0 : undefined,
                             onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                             onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                             onMouseOut: _handleMouseOut,
@@ -648,7 +651,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
                             id: circleId,
                             key: circleId,
                             d: path,
-                            "data-is-focusable": isLegendSelected,
                             onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                             onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                             onMouseOut: _handleMouseOut,
@@ -687,7 +689,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                                 r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
                                 cx: xPoint2,
                                 cy: yPoint2,
-                                "data-is-focusable": isLegendSelected,
+                                tabIndex: isLegendSelected ? 0 : undefined,
                                 onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                                 onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                                 onMouseOut: _handleMouseOut,
@@ -709,7 +711,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
                                 id: lastCircleId,
                                 key: lastCircleId,
                                 d: path,
-                                "data-is-focusable": isLegendSelected,
                                 onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                                 onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                                 onMouseOut: _handleMouseOut,
@@ -844,27 +845,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
                 "aria-label": `${legendVal}, line ${i + 1} of ${_points.length} with ${_points[i].data.length} data points.`
             }, bordersForLine, linesForLine, pointsForLine));
         }
-        // Removing un wanted tooltip div from DOM, when prop not provided.
-        if (!props.showXAxisLablesTooltip) {
-            try {
-                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
-            // eslint-disable-next-line no-empty
-            } catch (e) {}
-        }
-        // Used to display tooltip at x axis labels.
-        if (!props.wrapXAxisLables && props.showXAxisLablesTooltip) {
-            const xAxisElement = d3Select(xElement).call(_xAxisScale);
-            try {
-                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
-            // eslint-disable-next-line no-empty
-            } catch (e) {}
-            const tooltipProps = {
-                tooltipCls: classes.tooltip,
-                id: _tooltipId,
-                axis: xAxisElement
-            };
-            xAxisElement && tooltipOfAxislabels(tooltipProps);
-        }
         return lines;
     }
     function _createColorFillBars(containerHeight) {
@@ -937,6 +917,50 @@ const PATH_MULTIPLY_SIZE = 2.5;
             refElement: element
         });
     }
+    // Helper function to update highlight circle, vertical line, and callout for large datasets
+    const _updateLargeDatasetHighlightAndCallout = (linenumber, lineHeight, pointToHighlight, xAxisCalloutData, formattedDate, yScale)=>{
+        // Check if this point is plottable. If not, close the popover and return.
+        const xPoint = _xAxisScale(pointToHighlight.x);
+        const yPoint = yScale(pointToHighlight.y);
+        if (!isPlottable(xPoint, yPoint)) {
+            return;
+        }
+        const found = findCalloutPoints(calloutPointsRef.current, pointToHighlight.x);
+        const pointToHighlightUpdated = nearestCircleToHighlight === null || nearestCircleToHighlight !== null && pointToHighlight !== null && (nearestCircleToHighlight.x !== pointToHighlight.x || nearestCircleToHighlight.y !== pointToHighlight.y);
+        // if no points need to be called out then don't show vertical line and callout card
+        if (found && pointToHighlightUpdated) {
+            _uniqueCallOutID = `#${_staticHighlightCircle}_${linenumber}`;
+            d3Select(`#${_staticHighlightCircle}_${linenumber}`).attr('cx', `${xPoint}`).attr('cy', `${yPoint}`).attr('visibility', 'visibility');
+            d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${xPoint}, ${yPoint})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - yPoint}`);
+            const targetElement = document.getElementById(`${_staticHighlightCircle}_${linenumber}`);
+            const rect = targetElement.getBoundingClientRect();
+            setNearestCircleToHighlight(pointToHighlight);
+            updatePosition(rect.x, rect.y);
+            setStackCalloutProps(found);
+            setYValueHover(found.values);
+            setDataPointCalloutProps(found);
+            xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue(formattedDate);
+            setActivePoint('');
+        }
+        if (!found) {
+            setPopoverOpen(false);
+            setNearestCircleToHighlight(pointToHighlight);
+            setActivePoint('');
+        }
+    };
+    const _onFocusLargeDataset = (linenumber, lineHeight, focusEvent, yScale, pointIndex)=>{
+        focusEvent.persist();
+        const { data } = props;
+        const { lineChartData } = data;
+        // For focus events, we use the provided point index directly
+        const pointToHighlight = lineChartData[linenumber].data[pointIndex];
+        if (!pointToHighlight) {
+            return;
+        }
+        const { xAxisCalloutData } = pointToHighlight;
+        const formattedDate = pointToHighlight.x instanceof Date ? formatDateToLocaleString(pointToHighlight.x, props.culture, props.useUTC) : pointToHighlight.x;
+        _updateLargeDatasetHighlightAndCallout(linenumber, lineHeight, pointToHighlight, xAxisCalloutData, formattedDate, yScale);
+    };
     const _onMouseOverLargeDataset = (linenumber, lineHeight, mouseEvent, yScale)=>{
         mouseEvent.persist();
         const { data } = props;
@@ -981,35 +1005,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
         }
         const { xAxisCalloutData } = lineChartData[linenumber].data[index];
         const formattedDate = xPointToHighlight instanceof Date ? formatDateToLocaleString(xPointToHighlight, props.culture, props.useUTC) : xPointToHighlight;
-        const found = findCalloutPoints(calloutPointsRef.current, xPointToHighlight);
         const pointToHighlight = lineChartData[linenumber].data[index];
-        // Check if this point is plottable. If not, close the popover and return.
-        const xPoint = _xAxisScale(pointToHighlight.x);
-        const yPoint = yScale(pointToHighlight.y);
-        if (!isPlottable(xPoint, yPoint)) {
-            return;
-        }
-        const pointToHighlightUpdated = nearestCircleToHighlight === null || nearestCircleToHighlight !== null && pointToHighlight !== null && (nearestCircleToHighlight.x !== pointToHighlight.x || nearestCircleToHighlight.y !== pointToHighlight.y);
-        // if no points need to be called out then don't show vertical line and callout card
-        if (found && pointToHighlightUpdated) {
-            _uniqueCallOutID = `#${_staticHighlightCircle}_${linenumber}`;
-            d3Select(`#${_staticHighlightCircle}_${linenumber}`).attr('cx', `${xPoint}`).attr('cy', `${yPoint}`).attr('visibility', 'visibility');
-            d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${xPoint}, ${yPoint})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - yPoint}`);
-            const targetElement = document.getElementById(`${_staticHighlightCircle}_${linenumber}`);
-            const rect = targetElement.getBoundingClientRect();
-            setNearestCircleToHighlight(pointToHighlight);
-            updatePosition(rect.x, rect.y);
-            setStackCalloutProps(found);
-            setYValueHover(found.values);
-            setDataPointCalloutProps(found);
-            xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue(formattedDate);
-            setActivePoint('');
-        }
-        if (!found) {
-            setPopoverOpen(false);
-            setNearestCircleToHighlight(pointToHighlight);
-            setActivePoint('');
-        }
+        _updateLargeDatasetHighlightAndCallout(linenumber, lineHeight, pointToHighlight, xAxisCalloutData, formattedDate, yScale);
     };
     function _handleFocus(event, lineId, x, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData) {
         _uniqueCallOutID = circleId;
@@ -1186,6 +1183,10 @@ const PATH_MULTIPLY_SIZE = 2.5;
         const yValue = point.yAxisCalloutData || point.y;
         return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ${legend}, ${yValue}.`;
     }
+    function _getChartTitle() {
+        const { chartTitle, lineChartData } = props.data;
+        return (chartTitle ? `${chartTitle}. ` : '') + `Line chart with ${(lineChartData === null || lineChartData === void 0 ? void 0 : lineChartData.length) || 0} lines. `;
+    }
     function _isChartEmpty() {
         return !(props.data && props.data.lineChartData && props.data.lineChartData.length > 0 && props.data.lineChartData.filter((item)=>item.data.length).length > 0);
     }
@@ -1212,7 +1213,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
         color: lineColor,
         XValue: hoverXValue,
         descriptionMessage: props.getCalloutDescriptionMessage && stackCalloutProps ? props.getCalloutDescriptionMessage(stackCalloutProps) : undefined,
-        'data-is-focusable': true,
+        tabIndex: 0,
         xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
         ...props.calloutProps,
         isPopoverOpen: isPopoverOpen,
@@ -1234,7 +1235,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
     };
     return !_isChartEmpty() ? /*#__PURE__*/ React.createElement(CartesianChart, {
         ...props,
-        chartTitle: props.data.chartTitle,
+        chartTitle: _getChartTitle(),
         points: points,
         chartType: ChartTypes.LineChart,
         calloutProps: calloutProps,