@fluentui/react-charts 0.0.0-nightly-20251016-0409.1 → 0.0.0-nightly-20251017-2337.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +15 -15
  2. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +88 -50
  3. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  4. package/lib/components/Legends/Legends.js +1 -1
  5. package/lib/components/Legends/Legends.js.map +1 -1
  6. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +88 -50
  7. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  8. package/lib-commonjs/components/Legends/Legends.js +1 -1
  9. package/lib-commonjs/components/Legends/Legends.js.map +1 -1
  10. package/package.json +13 -13
package/lib/components/Legends/Legends.js CHANGED
@@ -69,7 +69,7 @@ export const Legends = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
69
69
  const { overflowStyles, allowFocusOnLegends = true, canSelectMultipleLegends = false } = props;
70
70
  const itemIds = dataToRender.map((_item, index)=>index.toString());
71
71
  const overflowHoverCardLegends = [];
72
- props.legends.map((legend, index)=>{
72
+ dataToRender.map((legend, index)=>{
73
73
  const hoverCardElement = _renderButton(legend, index);
74
74
  overflowHoverCardLegends.push(hoverCardElement);
75
75
  });
package/lib/components/Legends/Legends.js.map CHANGED
@@ -1 +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 props.legends.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 => (_rootElem.current = el)}\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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"}
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 => (_rootElem.current = el)}\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":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,eAAe,QAAQ,4BAA4B;AAC5D,SAASC,QAAQ,EAAEC,YAAY,QAAQ,2BAA2B;AAClE,SAASC,iBAAiB,EAAEC,uBAAuB,QAAQ,0BAA0B;AACrF,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,iBAAiB,QAAQ,qCAAqC;AACvE,SAASC,YAAY,QAAQ,iBAAiB;AA2B9C,OAAO,MAAMC,wBAAiDZ,MAAMa,UAAU,CAC5E,CAACC,OAAOC;IACN,kEAAkE,GAClE,IAAIC,oBAAoB;IACxB,IAAIC,YAAYjB,MAAMkB,MAAM,CAAwB;IAEpD,2DAA2D;IAC3D,MAAM,CAACC,cAAcC,gBAAgB,GAAGpB,MAAMqB,QAAQ,CAAC;IACvD,MAAM,CAACC,iBAAiBC,mBAAmB,GAAGvB,MAAMqB,QAAQ,CAAY,CAAC;IACzE,MAAMG,kBAAkBlB;IACxB,MAAMmB,kBAAkBlB,wBAAwB;QAAEmB,MAAM;QAAcC,iBAAiB;IAAK;IAC5F,MAAMC,UAAUzB,gBAAgBW;IAChC,MAAMe,QAAQ7B,MAAM8B,WAAW,CAC7B,CAACC,UAAkBC,QAAiB,KAAK;QACvC,OAAOtB,kBACLI,MAAMmB,OAAO,EACbF,UACA;YACET;YACAY,eAAe,CAAC,CAACpB,MAAMoB,aAAa;YACpCC,eAAeP,QAAQQ,IAAI;YAC3BJ;QACF,GACAf,UAAUoB,OAAO;IAErB,GACA;QAACvB,MAAMmB,OAAO;QAAEnB,MAAMoB,aAAa;QAAEZ;QAAiBM,QAAQQ,IAAI;KAAC;IAGrEpC,MAAMsC,mBAAmB,CAACxB,MAAMyB,SAAS,EAAE,IAAO,CAAA;YAChDV;QACF,CAAA;IAEA7B,MAAMwC,SAAS,CAAC;YACiB1B;QAA/B,MAAM2B,yBAAyB3B,CAAAA,yBAAAA,MAAMQ,eAAe,cAArBR,oCAAAA,yBAAyBA,MAAM4B,sBAAsB;YACtD5B;QAA9B,MAAM6B,wBAAwB7B,CAAAA,wBAAAA,MAAM8B,cAAc,cAApB9B,mCAAAA,wBAAwBA,MAAM+B,qBAAqB;QACjF,IAAIC,uBAAuB,CAAC;QAC5B,IAAIhC,MAAMiC,wBAAwB,EAAE;gBAE/BN;YADHK,uBACE,EAACL,QAAAA,mCAAAA,oCAAAA,yBAA0B,EAAE,cAA5BA,4BAAD,AAACA,MAA+BO,MAAM,CACpC,8DAA8D;YAC9D,CAACC,aAAkBC,MAAc,CAAA;oBAAE,CAACA,IAAI,EAAE;oBAAM,GAAGD,WAAW;gBAAC,CAAA,GAC/D,CAAC,OACE,CAAC;YACR1B,mBAAmBuB;QACrB,OAAO,IAAIH,0BAA0BQ,WAAW;YAC9CL,uBAAuB;gBAAE,CAACH,sBAAsB,EAAE;YAAK;YACvDpB,mBAAmBuB;QACrB;IACF,GAAG;QACDhC,MAAMiC,wBAAwB;QAC9BjC,MAAM+B,qBAAqB;QAC3B/B,MAAM4B,sBAAsB;QAC5B5B,MAAM8B,cAAc;QACpB9B,MAAMQ,eAAe;KACtB;IAEDN,oBAAoBoC,OAAOC,IAAI,CAAC/B,iBAAiBgC,MAAM,GAAG;IAC1D,MAAMC,eAAeC;IACrB,MAAM,EAAEC,cAAc,EAAEC,sBAAsB,IAAI,EAAEX,2BAA2B,KAAK,EAAE,GAAGjC;IACzF,MAAM6C,UAAUJ,aAAaK,GAAG,CAAC,CAACC,OAAOC,QAAUA,MAAMC,QAAQ;IACjE,MAAMC,2BAAyC,EAAE;IACjDT,aAAaK,GAAG,CAAC,CAACK,QAAQH;QACxB,MAAMI,mBAAmBC,cAAcF,QAAQH;QAC/CE,yBAAyBI,IAAI,CAACF;IAChC;IACA,MAAMG,iBAAiBvD,MAAMwD,YAAY,GAAGxD,MAAMwD,YAAY,GAAG;IACjE,OAAOxD,MAAMyD,gBAAgB,GAAGC,yBAAyBC;IAEzD,SAASA;QACP,qBACE,oBAACC;YACE,GAAGlD,eAAe;YAClB,GAAGC,eAAe;YAClB,GAAIiC,uBAAuB;gBAC1BiB,MAAM;gBACN,cAAc;gBACd,wBAAwB5B;YAC1B,CAAC;YACD6B,WAAWhD,QAAQiD,IAAI;YACvBC,KAAKC,CAAAA,KAAO9D,UAAUoB,OAAO,GAAG0C;yBAEhC,oBAAC3E,8BACC,oBAACsE;YAAIE,WAAWhD,QAAQoD,aAAa;YAAEC,OAAO;gBAAEC,WAAWpE,MAAMoB,aAAa,GAAG,WAAW;YAAQ;WACjGqB,aAAaK,GAAG,CAAC,CAACuB,MAAMC,mBACvB,oBAAC/E;gBAAa6C,KAAKkC;gBAAIA,IAAIA,GAAGrB,QAAQ;eACnCI,cAAcgB,uBAGnB,oBAAC3E;YAAamD,SAASA;YAAS0B,OAAO,GAAGhB,gBAAgB;YAAEiB,OAAOtB;;IAK7E;IAEA,SAASQ;QACP,qBACE,oBAACE;YACE,GAAGlD,eAAe;YAClB,GAAGC,eAAe;YAClB,GAAIiC,uBAAuB;gBAC1BiB,MAAM;gBACN,cAAc;gBACd,wBAAwB5B;YAC1B,CAAC;YACDkC,OAAO;gBAAEM,gBAAgBzE,MAAMoB,aAAa,GAAG,WAAW;gBAASsD,UAAU;gBAAQ,GAAG/B,cAAc;YAAC;YACvGmB,WAAWhD,QAAQiD,IAAI;yBAEvB,oBAACH;YAAIE,WAAWhD,QAAQoD,aAAa;YAAEC,OAAO;gBAAEQ,SAAS;gBAAQD,UAAU;gBAAQE,UAAU;YAAO;WACjGnC,aAAaK,GAAG,CAACuB,CAAAA,qBAChB,oBAACT;gBACCE,WAAWjE,aAAaiB,QAAQ+D,eAAe,EAAER,KAAKS,gBAAgB,IAAIhE,QAAQiE,UAAU;gBAC5F3C,KAAKiC,KAAKjC,GAAG;eAEZiB,cAAcgB,OACdA,KAAKS,gBAAgB,kBAAI,oBAAClB,aAAKS,KAAKS,gBAAgB;IAMjE;IAEA,SAASpC;QACP,MAAM,EAAkCsC,KAAK,EAAE,GAAGhF;QAClD,MAAMiF,YAA0BjF,MAAMmB,OAAO,CAAC2B,GAAG,CAAC,CAACK,QAAgBH;YACjE,OAAO;gBACL;;;;;;;;;;;cAWI,GACJuB,OAAOpB,OAAOoB,KAAK;gBACnBW,QAAQ/B,OAAO+B,MAAM;gBACrBC,aAAahC,OAAOgC,WAAW;gBAC/BC,kBAAkBjC,OAAOiC,gBAAgB;gBACzCC,OAAOlC,OAAOkC,KAAK;gBACnBL,OAAOA,QAAQA,QAAQ7B,OAAO6B,KAAK;gBACnCM,eAAenC,OAAOmC,aAAa;gBACnCC,wBAAwBpC,OAAOoC,sBAAsB;gBACrDC,SAASrC,OAAOqC,OAAO;gBACvBpD,KAAKY;gBACL8B,kBAAkB3B,OAAO2B,gBAAgB;YAC3C;QACF;QACA,OAAOG;IACT;IAEA;;;KAGC,GACD,SAASQ;QACP,OAAOzF,MAAMiC,wBAAwB,GAAGjC,MAAMQ,eAAe,KAAK6B,YAAYrC,MAAM8B,cAAc,KAAKO;IACzG;IAEA;;;;KAIC,GACD,SAASqD,qCAAqCvC,MAAc;QAC1D,IAAIwC,kBAAkB;YAAE,GAAGnF,eAAe;QAAC;QAC3C,IAAImF,eAAe,CAACxC,OAAOoB,KAAK,CAAC,EAAE;YACjC,iDAAiD;YACjD,6DAA6D;YAC7D,OAAOoB,eAAe,CAACxC,OAAOoB,KAAK,CAAC;QACtC,OAAO;YACLoB,eAAe,CAACxC,OAAOoB,KAAK,CAAC,GAAG;YAChC,wCAAwC;YACxC,IAAIjC,OAAOC,IAAI,CAACoD,iBAAiBnD,MAAM,KAAKxC,MAAMmB,OAAO,CAACqB,MAAM,EAAE;gBAChEmD,kBAAkB,CAAC;YACrB;QACF;QACA,OAAOA;IACT;IAEA;;;;KAIC,GACD,SAASC,sCAAsCzC,MAAc;QAC3D,OAAO3C,eAAe,CAAC2C,OAAOoB,KAAK,CAAC,GAAG,CAAC,IAAI;YAAE,CAACpB,OAAOoB,KAAK,CAAC,EAAE;QAAK;IACrE;IAEA,SAASsB,SAAS1C,MAAc,EAAE2C,KAA0C;YAS1E9F,iBACAmD;QATA,MAAM,EAAElB,2BAA2B,KAAK,EAAE,GAAGjC;QAC7C,MAAM+F,sBAAsB9D,2BACxByD,qCAAqCvC,UACrCyC,sCAAsCzC;QAE1C,IAAI,CAACsC,uBAAuB;YAC1BhF,mBAAmBsF;QACrB;SACA/F,kBAAAA,MAAMgG,QAAQ,cAAdhG,sCAAAA,qBAAAA,OAAiBsC,OAAOC,IAAI,CAACwD,sBAAsBD,OAAO3C;SAC1DA,iBAAAA,OAAO+B,MAAM,cAAb/B,qCAAAA,oBAAAA;IACF;IAEA,SAAS8C,mBAAmB9C,MAAc;QACxC,IAAIA,OAAOgC,WAAW,EAAE;YACtB7E,gBAAgB6C,OAAOoB,KAAK;YAC5BpB,OAAOgC,WAAW;QACpB;IACF;IAEA,SAASe,SAAS/C,MAAc;QAC9B,IAAIA,OAAOiC,gBAAgB,EAAE;YAC3B9E,gBAAgB;YAChB6C,OAAOiC,gBAAgB;QACzB;IACF;IAEA,8DAA8D;IAC9D,SAAS/B,cAAc8C,IAAS,EAAEnD,KAAc;QAC9C,MAAM,EAAEJ,sBAAsB,IAAI,EAAE,GAAG5C;QACvC,MAAMmD,SAAiB;YACrBoB,OAAO4B,KAAK5B,KAAK;YACjBc,OAAOc,KAAKd,KAAK;YACjBL,OAAOmB,KAAKnB,KAAK;YACjBE,QAAQiB,KAAKjB,MAAM;YACnBC,aAAagB,KAAKhB,WAAW;YAC7BC,kBAAkBe,KAAKf,gBAAgB;YACvCE,eAAea,KAAKb,aAAa;YACjCC,wBAAwBY,KAAKZ,sBAAsB;YACnDC,SAASW,KAAKX,OAAO;QACvB;QACA,MAAMH,QAAQe,UAAUjD,OAAOoB,KAAK,EAAEpB,OAAOkC,KAAK;QAClD,MAAMgB,iBAAiB,CAACP;YACtBD,SAAS1C,QAAQ2C;QACnB;QACA,MAAMQ,iBAAiB;YACrBL,mBAAmB9C;QACrB;QACA,MAAMoD,aAAa;YACjBL,SAAS/C;QACX;QACA,MAAM6B,QAAQwB,UAAUrD,QAAQkC;QAChC,qBACE,oBAAClG;YACE,GAAIyD,uBAAuB;gBAC1B,iBAAiB,CAAC,CAACpC,eAAe,CAAC2C,OAAOoB,KAAK,CAAC;gBAChDV,MAAM;gBACN,cAAc,GAAGV,OAAOoB,KAAK,EAAE;gBAC/B,gBAAgB4B,IAAI,CAAC,eAAe;gBACpC,iBAAiBA,IAAI,CAAC,gBAAgB;YACxC,CAAC;YACA,GAAIA,KAAKM,iBAAiB,IAAI;gBAAE,GAAGN,KAAKM,iBAAiB;YAAC,CAAC;YAC5DrE,KAAKY;YACLc,WAAWhD,QAAQqC,MAAM;YACzBuD,SAASL;YACTM,aAAaL;YACbC,YAAYA;YACZK,SAASN;YACTO,QAAQN;YACRO,YAAY;YACZC,MAAK;YACL5C,OAAO;gBACL,iBAAiBhB,OAAOoC,sBAAsB,GAAG,QAAQ;gBACzD,0BAA0BpC,OAAOmC,aAAa,GAAG,KAAKD;gBACtD,sBAAsBlC,OAAOkC,KAAK,GAAGlC,OAAOkC,KAAK,GAAG1F,OAAOqH,mBAAmB;gBAC9E,kBAAkB7D,OAAOmC,aAAa,GAElC,CAAC,gEAAgE,EAAED,MAAM,MAAM,EAAEA,MAAM,KAAK,CAAC,GAC7F;YACN;WAECL,qBACD,oBAACpB;YAAIE,WAAWhD,QAAQQ,IAAI;YAAE6C,OAAO;gBAAEqB,SAASH,UAAU1F,OAAOsH,uBAAuB,GAAG,SAAS;YAAG;WACpG9D,OAAOoB,KAAK;IAIrB;IAEA,SAASiC,UAAUrD,MAAc,EAAEkC,KAAa;QAC9C,MAAM6B,iBAAkD;YACtDpD,WAAWhD,QAAQkE,KAAK;QAC1B;QACA,MAAMmC,gBAAiD;YACrDC,MAAM/B;YACNgC,aAAa;YACbC,QAAQnE,OAAOkC,KAAK;QACtB;QACA,qBACE,oBAACjG;YACCmI,UAAUL;YACVM,WAAWL;YACXnC,OAAO7B,OAAO6B,KAAK;YACnByC,oBAAoB3G,QAAQ4G,IAAI;YAChCvD,OACE;gBACEwD,QAAQxE,OAAOoC,sBAAsB,GAAG,QAAQ;gBAChDqC,iBAAiBzE,OAAOmC,aAAa,GAAG,KAAKD;gBAC7CwC,aAAa1E,OAAOkC,KAAK,GAAGlC,OAAOkC,KAAK,GAAG1F,OAAOqH,mBAAmB;gBACrEc,SAAS3E,OAAOmC,aAAa,GAEzB,CAAC,gEAAgE,EAAED,MAAM,MAAM,EAAEA,MAAM,KAAK,CAAC,GAC7F;gBACJ,gCAAgC,CAAC,0BAA0B,EAAEA,MAAM,EAAE,EAAEA,MAAM,CAAC,CAAC;gBAC/E,gCAAgCA,UAAU1F,OAAOsH,uBAAuB,GAAG,QAAQ;YACrF;;IAIR;IAEA,SAASb,UAAU7B,KAAa,EAAEc,KAAa;QAC7C,IAAI0C,cAAc1C;QAClB,sCAAsC;QACtC,IAAInF,mBAAmB;YACrB,6DAA6D;YAC7D,IAAIM,eAAe,CAAC+D,MAAM,EAAE;gBAC1BwD,cAAc1C;YAChB,OAEK;gBACH0C,cAAcpI,OAAOsH,uBAAuB;YAC9C;QACF,OAEK;YACH,iCAAiC;YACjC,oCAAoC;YACpC,IAAI5G,iBAAiBkE,SAASlE,iBAAiB,IAAI;gBACjD0H,cAAc1C;YAChB,OAEK;gBACH0C,cAAcpI,OAAOsH,uBAAuB;YAC9C;QACF;QACA,OAAOc;IACT;AACF,GACA;AACFjI,QAAQkI,WAAW,GAAG"}
package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js CHANGED
@@ -500,24 +500,20 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
500
500
  var _input_data_, _input_layout, _input_layout1, _input_layout2, _vsbcData_;
501
501
  const mapXToDataPoints = {};
502
502
  let yMaxValue = 0;
503
+ let yMinValue = 0;
503
504
  const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
504
505
  const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
505
506
  let colorScale = undefined;
506
507
  const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
507
- let yMinValue = 0;
508
+ const resolveXAxisValue = getAxisValueResolver(input.data, input.layout, 'x');
508
509
  input.data.forEach((series, index1)=>{
509
510
  var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _input_layout_template_layout1, _input_layout_template1, _input_layout1, _series_line;
510
511
  colorScale = (0, _PlotlyColorAdapter.createColorScale)(input.layout, series, colorScale);
511
- const isXYearCategory = (0, _chartutilities.isYearArray)(series.x); // Consider year as categorical not numeric continuous axis
512
512
  // extract bar colors for each series only once
513
513
  const extractedBarColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
514
514
  // extract line colors for each series only once
515
515
  const extractedLineColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template1 = _input_layout1.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, colorwayType, (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color, colorMap, isDarkTheme);
516
- const xValues = series.x;
517
- const isXDate = (0, _chartutilities.isDateArray)(xValues);
518
- const isXString = (0, _chartutilities.isStringArray)(xValues);
519
- const isXNumber = (0, _chartutilities.isNumberArray)(xValues);
520
- const validXYRanges = getValidXYRanges(series);
516
+ const validXYRanges = getValidXYRanges(series, resolveXAxisValue);
521
517
  validXYRanges.forEach(([rangeStart, rangeEnd], rangeIdx)=>{
522
518
  const rangeXValues = series.x.slice(rangeStart, rangeEnd);
523
519
  const rangeYValues = series.y.slice(rangeStart, rangeEnd);
@@ -525,7 +521,7 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
525
521
  var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout;
526
522
  if (!mapXToDataPoints[x]) {
527
523
  mapXToDataPoints[x] = {
528
- xAxisPoint: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber),
524
+ xAxisPoint: resolveXAxisValue(x),
529
525
  chartData: [],
530
526
  lineData: []
531
527
  };
@@ -794,8 +790,9 @@ const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colorwayTyp
794
790
  const xValues = [];
795
791
  const yValues = [];
796
792
  series.x.forEach((xVal, index)=>{
797
- const yVal = getNumberAtIndexOrDefault(series.y, index);
798
- if ((0, _chartutilities.isInvalidValue)(xVal) || (0, _chartutilities.isInvalidValue)(yVal)) {
793
+ var _getNumberAtIndexOrDefault;
794
+ const yVal = (_getNumberAtIndexOrDefault = getNumberAtIndexOrDefault(series.y, index)) !== null && _getNumberAtIndexOrDefault !== void 0 ? _getNumberAtIndexOrDefault : 0;
795
+ if ((0, _chartutilities.isInvalidValue)(xVal)) {
799
796
  return;
800
797
  }
801
798
  xValues.push(xVal);
@@ -882,18 +879,14 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
882
879
  let mode = 'tonexty';
883
880
  const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
884
881
  const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
885
- var shouldWrapLabels = false;
882
+ const resolveXAxisValue = getAxisValueResolver(input.data, input.layout, 'x');
883
+ const shouldWrapLabels = getAxisType(input.data, input.layout, 'x') === 'category';
886
884
  const chartData = input.data.map((series, index)=>{
887
885
  var _series_mode, _series_line, _series_marker, _series_line1, _input_layout_template_layout, _input_layout_template, _input_layout, _input_layout_template_layout1, _input_layout_template1, _input_layout1, _series_mode1;
888
886
  const colors = isScatterMarkers ? (series === null || series === void 0 ? void 0 : (_series_mode = series.mode) === null || _series_mode === void 0 ? void 0 : _series_mode.includes('line')) ? (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color : (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color : (_series_line1 = series.line) === null || _series_line1 === void 0 ? void 0 : _series_line1.color;
889
887
  // extract colors for each series only once
890
888
  const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, colors, colorMap, isDarkTheme);
891
889
  const xValues = series.x;
892
- const isXString = (0, _chartutilities.isStringArray)(xValues);
893
- const isXDate = (0, _chartutilities.isDateArray)(xValues);
894
- const isXNumber = (0, _chartutilities.isNumberArray)(xValues);
895
- const isXYearCategory = (0, _chartutilities.isYearArray)(series.x); // Consider year as categorical not numeric continuous axis
896
- shouldWrapLabels = shouldWrapLabels || isXString && !isXDate;
897
890
  const legend = legends[index];
898
891
  // resolve color for each legend's lines from the extracted colors
899
892
  const seriesColor = (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index, legend, colorMap, (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template1 = _input_layout1.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, isDarkTheme);
@@ -902,7 +895,7 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
902
895
  // if mode contains 'text', we prioritize showing the text over curving the line
903
896
  const lineOptions = !((_series_mode1 = series.mode) === null || _series_mode1 === void 0 ? void 0 : _series_mode1.includes('text')) && series.type !== 'scatterpolar' ? getLineOptions(series.line) : undefined;
904
897
  const legendShape = getLegendShape(series);
905
- const validXYRanges = getValidXYRanges(series);
898
+ const validXYRanges = getValidXYRanges(series, resolveXAxisValue);
906
899
  return validXYRanges.map(([rangeStart, rangeEnd], rangeIdx)=>{
907
900
  var _series_marker, _series_marker1, _series_marker2, _input_layout, _input_layout_polar_angularaxis, _input_layout_polar, _input_layout1, _input_layout_polar_angularaxis1, _input_layout_polar1, _input_layout2;
908
901
  const rangeXValues = xValues.slice(rangeStart, rangeEnd);
@@ -917,7 +910,7 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
917
910
  data: rangeXValues.map((x, i)=>{
918
911
  var _series_marker, _series_marker1;
919
912
  return {
920
- x: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber),
913
+ x: resolveXAxisValue(x),
921
914
  y: rangeYValues[i],
922
915
  ...Array.isArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.size) ? {
923
916
  markerSize: markerSizes[i]
@@ -1038,8 +1031,8 @@ const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPlot, col
1038
1031
  const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
1039
1032
  const legend = legends[index];
1040
1033
  return series.y.map((yValue, i)=>{
1041
- var _series_x, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout;
1042
- if ((0, _chartutilities.isInvalidValue)((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x[i]) || (0, _chartutilities.isInvalidValue)(yValue)) {
1034
+ var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout, _series_x;
1035
+ if ((0, _chartutilities.isInvalidValue)(yValue)) {
1043
1036
  return null;
1044
1037
  }
1045
1038
  // resolve color for each legend's bars from the colorscale or extracted colors
@@ -1047,7 +1040,7 @@ const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPlot, col
1047
1040
  const opacity = (0, _PlotlyColorAdapter.getOpacity)(series, i);
1048
1041
  var _rgb_copy_formatHex8;
1049
1042
  return {
1050
- x: series.x[i],
1043
+ x: (0, _chartutilities.isInvalidValue)((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x[i]) ? 0 : series.x[i],
1051
1044
  y: yValue,
1052
1045
  legend,
1053
1046
  color: (_rgb_copy_formatHex8 = (0, _d3color.rgb)(color).copy({
@@ -1089,13 +1082,13 @@ const transformPlotlyJsonToGanttChartProps = (input, isMultiPlot, colorMap, colo
1089
1082
  var _input_layout, _input_layout1;
1090
1083
  const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
1091
1084
  let colorScale = undefined;
1085
+ const isXDate = getAxisType(input.data, input.layout, 'x') === 'date';
1092
1086
  const chartData = input.data.map((series, index)=>{
1093
- var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _input_layout_xaxis, _input_layout1;
1087
+ var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker;
1094
1088
  colorScale = (0, _PlotlyColorAdapter.createColorScale)(input.layout, series, colorScale);
1095
1089
  // extract colors for each series only once
1096
1090
  const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
1097
1091
  const legend = legends[index];
1098
- const isXDate = ((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_xaxis = _input_layout1.xaxis) === null || _input_layout_xaxis === void 0 ? void 0 : _input_layout_xaxis.type) === 'date' || (0, _chartutilities.isDateArray)(series.x);
1099
1092
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
1100
1093
  const convertXValueToNumber = (value)=>{
1101
1094
  return (0, _chartutilities.isInvalidValue)(value) ? 0 : isXDate ? +parseLocalDate(value) : +value;
@@ -1155,8 +1148,9 @@ const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwa
1155
1148
  const zValues = [];
1156
1149
  (_firstData_x = firstData.x) === null || _firstData_x === void 0 ? void 0 : _firstData_x.forEach((xVal, index)=>{
1157
1150
  var _firstData_y;
1158
- const zVal = getNumberAtIndexOrDefault(firstData.z, index);
1159
- if ((0, _chartutilities.isInvalidValue)(xVal) || (0, _chartutilities.isInvalidValue)((_firstData_y = firstData.y) === null || _firstData_y === void 0 ? void 0 : _firstData_y[index]) || (0, _chartutilities.isInvalidValue)(zVal)) {
1151
+ var _getNumberAtIndexOrDefault;
1152
+ const zVal = (_getNumberAtIndexOrDefault = getNumberAtIndexOrDefault(firstData.z, index)) !== null && _getNumberAtIndexOrDefault !== void 0 ? _getNumberAtIndexOrDefault : 0;
1153
+ if ((0, _chartutilities.isInvalidValue)(xVal) || (0, _chartutilities.isInvalidValue)((_firstData_y = firstData.y) === null || _firstData_y === void 0 ? void 0 : _firstData_y[index])) {
1160
1154
  return;
1161
1155
  }
1162
1156
  xValues.push(xVal);
@@ -2071,7 +2065,7 @@ const getNumberAtIndexOrDefault = (data, index)=>{
2071
2065
  }
2072
2066
  return 1;
2073
2067
  };
2074
- const getValidXYRanges = (series)=>{
2068
+ const getValidXYRanges = (series, resolveX, resolveY)=>{
2075
2069
  if (!(0, _chartutilities.isArrayOrTypedArray)(series.x) || !(0, _chartutilities.isArrayOrTypedArray)(series.y)) {
2076
2070
  return [];
2077
2071
  }
@@ -2079,7 +2073,7 @@ const getValidXYRanges = (series)=>{
2079
2073
  let start = 0;
2080
2074
  let end = 0;
2081
2075
  for(; end < series.x.length; end++){
2082
- if ((0, _chartutilities.isInvalidValue)(series.x[end]) || (0, _chartutilities.isInvalidValue)(series.y[end])) {
2076
+ if ((0, _chartutilities.isInvalidValue)(series.x[end]) || typeof resolveX === 'function' && (0, _chartutilities.isInvalidValue)(resolveX(series.x[end])) || (0, _chartutilities.isInvalidValue)(series.y[end]) || typeof resolveY === 'function' && (0, _chartutilities.isInvalidValue)(resolveY(series.y[end]))) {
2083
2077
  if (end - start > 0) {
2084
2078
  ranges.push([
2085
2079
  start,
@@ -2367,7 +2361,7 @@ const getAxisScaleTypeProps = (data, layout)=>{
2367
2361
  if (!ax) {
2368
2362
  return;
2369
2363
  }
2370
- const axType = getAxisType(data, axId[0], ax);
2364
+ const axType = getAxisType(data, ax);
2371
2365
  if ((!ax.tickmode || ax.tickmode === 'array') && (0, _chartutilities.isArrayOrTypedArray)(ax.tickvals)) {
2372
2366
  const tickValues = axType === 'date' ? ax.tickvals.map((v)=>new Date(v)) : ax.tickvals;
2373
2367
  if (axId === 'x') {
@@ -2383,12 +2377,12 @@ const getAxisScaleTypeProps = (data, layout)=>{
2383
2377
  if (axId === 'x') {
2384
2378
  props.xAxis = {
2385
2379
  tickStep: dtick,
2386
- tick0: tick0
2380
+ tick0
2387
2381
  };
2388
2382
  } else if (axId === 'y') {
2389
2383
  props.yAxis = {
2390
2384
  tickStep: dtick,
2391
- tick0: tick0
2385
+ tick0
2392
2386
  };
2393
2387
  }
2394
2388
  return;
@@ -2464,44 +2458,88 @@ const getAxisObjects = (data, layout)=>{
2464
2458
  xAxisId = axisIds.x;
2465
2459
  yAxisIds.add(axisIds.y);
2466
2460
  });
2461
+ const makeAxisObject = (axLetter, axId)=>({
2462
+ ...layout === null || layout === void 0 ? void 0 : layout[(0, _chartutilities.getAxisKey)(axLetter, axId)],
2463
+ _id: `${axLetter}${axId > 1 ? axId : ''}`
2464
+ });
2467
2465
  const axisObjects = {};
2468
2466
  if (typeof xAxisId === 'number') {
2469
- axisObjects.x = layout === null || layout === void 0 ? void 0 : layout[(0, _chartutilities.getAxisKey)('x', xAxisId)];
2467
+ axisObjects.x = makeAxisObject('x', xAxisId);
2470
2468
  }
2471
2469
  const sortedYAxisIds = Array.from(yAxisIds).sort();
2472
2470
  if (sortedYAxisIds.length > 0) {
2473
- axisObjects.y = layout === null || layout === void 0 ? void 0 : layout[(0, _chartutilities.getAxisKey)('y', sortedYAxisIds[0])];
2471
+ axisObjects.y = makeAxisObject('y', sortedYAxisIds[0]);
2474
2472
  }
2475
2473
  if (sortedYAxisIds.length > 1) {
2476
- axisObjects.y2 = layout === null || layout === void 0 ? void 0 : layout[(0, _chartutilities.getAxisKey)('y', sortedYAxisIds[1])];
2474
+ axisObjects.y2 = makeAxisObject('y', sortedYAxisIds[1]);
2477
2475
  }
2478
2476
  return axisObjects;
2479
2477
  };
2480
- const getAxisType = (data, axLetter, ax)=>{
2478
+ function getAxisType(data, arg2, arg3) {
2479
+ let ax;
2480
+ if (arg2 && typeof arg2 === 'object' && '_id' in arg2) {
2481
+ ax = arg2;
2482
+ } else if (typeof arg3 === 'string') {
2483
+ const layout = arg2;
2484
+ ax = getAxisObjects(data, layout)[arg3];
2485
+ }
2486
+ if (!ax) {
2487
+ return 'category';
2488
+ }
2489
+ var _ax_type;
2490
+ if ([
2491
+ 'linear',
2492
+ 'log',
2493
+ 'date',
2494
+ 'category'
2495
+ ].includes((_ax_type = ax.type) !== null && _ax_type !== void 0 ? _ax_type : '')) {
2496
+ return ax.type;
2497
+ }
2498
+ const axLetter = ax._id[0];
2481
2499
  const values = [];
2482
2500
  data.forEach((series)=>{
2483
- var _series_axLetter;
2484
- (_series_axLetter = series[axLetter]) === null || _series_axLetter === void 0 ? void 0 : _series_axLetter.forEach((val)=>{
2485
- if (!(0, _chartutilities.isInvalidValue)(val)) {
2486
- values.push(val);
2487
- }
2488
- });
2489
- });
2490
- // Note: When ax.type is explicitly specified, Plotly casts the values to match that type.
2491
- // Therefore, simply checking the type of the values may not be sufficient. At the moment,
2492
- // we don’t always perform this casting ourselves and instead use the values as provided.
2493
- if ((0, _chartutilities.isNumberArray)(values)) {
2494
- if ((ax === null || ax === void 0 ? void 0 : ax.type) === 'log') {
2495
- return 'log';
2501
+ const axId = series[`${axLetter}axis`];
2502
+ if (axId === ax._id || !axId && ax._id === axLetter) {
2503
+ var _series_axLetter;
2504
+ (_series_axLetter = series[axLetter]) === null || _series_axLetter === void 0 ? void 0 : _series_axLetter.forEach((val)=>{
2505
+ if (!(0, _chartutilities.isInvalidValue)(val)) {
2506
+ values.push(val);
2507
+ }
2508
+ });
2496
2509
  }
2510
+ });
2511
+ if ((0, _chartutilities.isNumberArray)(values) && !(0, _chartutilities.isYearArray)(values)) {
2497
2512
  return 'linear';
2498
2513
  }
2499
2514
  if ((0, _chartutilities.isDateArray)(values)) {
2500
2515
  return 'date';
2501
2516
  }
2502
- if ((0, _chartutilities.isStringArray)(values)) {
2503
- return 'category';
2504
- }
2517
+ return 'category';
2518
+ }
2519
+ const getAxisValueResolver = (data, layout, axisId)=>{
2520
+ const axType = getAxisType(data, layout, axisId);
2521
+ return (value)=>{
2522
+ if ((0, _chartutilities.isInvalidValue)(value)) {
2523
+ return null;
2524
+ }
2525
+ switch(axType){
2526
+ case 'linear':
2527
+ case 'log':
2528
+ return (0, _chartutilities.isNumber)(value) ? +value : null;
2529
+ case 'date':
2530
+ if ((0, _chartutilities.isNumber)(value)) {
2531
+ return new Date(+value);
2532
+ }
2533
+ if (typeof value === 'string') {
2534
+ return new Date(value);
2535
+ }
2536
+ return null;
2537
+ case 'category':
2538
+ return `${value}`;
2539
+ default:
2540
+ return null;
2541
+ }
2542
+ };
2505
2543
  };
2506
2544
  /**
2507
2545
  * This is experimental. Use it only with valid datetime strings to verify if they conform to the ISO 8601 format.