npm - @fluentui/react-charts - Versions diffs - 9.3.6 → 9.3.7 - Mend

@fluentui/react-charts 9.3.6 → 9.3.7

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 (150) hide show

package/lib-commonjs/components/CommonComponents/ChartPopover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CommonComponents/ChartPopover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport { mergeClasses } from '@griffel/react';\nimport type { PositioningVirtualElement } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { useId } from '@fluentui/react-utilities';\nimport { getAccessibleDataObject, Points, pointTypes } from '../../utilities/index';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { Shape } from '../Legends/shape';\nimport { usePopoverStyles_unstable } from './useChartPopoverStyles.styles';\nimport { YValueHover } from './CartesianChart.types';\nimport { LegendShape } from '../Legends/Legends.types';\nimport { ChartPopoverProps } from './ChartPopover.types';\n\n/* This component is a wrapper over Popover component which implements the logic for rendering popovers for any chart\ncombining the logic for Callout and ChartHoverCard in v8 charts. /\nexport const ChartPopover: React.FunctionComponent<ChartPopoverProps> = React.forwardRef<\n HTMLDivElement,\n ChartPopoverProps\n>((props, forwardedRef) => {\n const virtualElement: PositioningVirtualElement = {\n getBoundingClientRect: () => ({\n top: props.clickPosition!.y,\n left: props.clickPosition!.x,\n right: props.clickPosition!.x,\n bottom: props.clickPosition!.y,\n x: props.clickPosition!.x,\n y: props.clickPosition!.y,\n width: 0,\n height: 0,\n }),\n };\n const target =\n typeof props.positioning === 'object' && 'target' in props.positioning\n ? props.positioning.target !== null\n ? props.positioning.target\n : virtualElement\n : virtualElement;\n props = { ...props, ...props.customCallout?.customCalloutProps };\n const classes = usePopoverStyles_unstable(props);\n const legend = props.xCalloutValue ? props.xCalloutValue : props.legend;\n const YValue = props.yCalloutValue ? props.yCalloutValue : props.YValue;\n return (\n <div id={useId('callout')} ref={forwardedRef} className={classes.calloutContainer}>\n <Popover\n positioning={{ target: target, autoSize: 'always', offset: 20, coverTarget: false }}\n open={props.isPopoverOpen}\n inline\n >\n <PopoverSurface>\n {/* Given custom callout, then it will render /}\n {props.customCallout && props.customCallout.customizedCallout && props.customCallout.customizedCallout}\n {/* single x point its corresponding y points of all the bars/lines in chart will render in callout /}\n {(!props.customCallout \|\| !props.customCallout.customizedCallout) &&\n props.isCalloutForStack &&\n _multiValueCallout()}\n {/* single x point its corresponding y point of single line/bar in the chart will render in callout /}\n {(!props.customCallout \|\| !props.customCallout.customizedCallout) && !props.isCalloutForStack && (\n <div className={classes.calloutContentRoot}>\n <div className={classes.calloutDateTimeContainer}>\n <div className={classes.calloutContentX}>{props.XValue} </div>\n {/TO DO if we add time for callout then will use this /}\n {/ <div className={classNames.calloutContentX}>07:00am</div> */}\n </div>\n <div\n className={classes.calloutInfoContainer}\n style={{\n ...(props.ratio && {\n display: 'flex',\n alignItems: 'flex-end',\n }),\n borderInlineStart: `4px solid ${props.color}`,\n marginTop: '11px',\n }}\n >\n <div className={classes.calloutBlockContainer}>\n <div className={classes.calloutlegendText}>\n {formatToLocaleString(legend, props.culture) as React.ReactNode}\n </div>\n <div\n className={classes.calloutContentY}\n style={{\n color: props.color ? props.color : tokens.colorNeutralForeground1,\n fontSize: tokens.fontSizeHero700,\n }}\n >\n {formatToLocaleString(YValue, props.culture) as React.ReactNode}\n </div>\n </div>\n {!!props.ratio && (\n <div className={classes.ratio}>\n <>\n <span className={classes.numerator}>\n {formatToLocaleString(props.ratio[0], props.culture) as React.ReactNode}\n </span>\n /\n <span className={classes.denominator}>\n {formatToLocaleString(props.ratio[1], props.culture) as React.ReactNode}\n </span>\n </>\n </div>\n )}\n </div>\n {!!props.descriptionMessage && (\n <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>\n )}\n </div>\n )}\n </PopoverSurface>\n </Popover>\n </div>\n );\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n function _multiValueCallout() {\n const yValueHoverSubCountsExists: boolean = _yValueHoverSubCountsExists(props.YValueHover) ?? false;\n return (\n <div className={classes.calloutContentRoot}>\n <div\n className={classes.calloutDateTimeContainer}\n style={yValueHoverSubCountsExists ? { marginBottom: '11px' } : {}}\n >\n <div\n className={classes.calloutContentX}\n {...getAccessibleDataObject(props!.xAxisCalloutAccessibilityData, 'text', false)}\n >\n {formatToLocaleString(props!.hoverXValue, props.culture) as React.ReactNode}\n </div>\n </div>\n <div style={yValueHoverSubCountsExists ? { display: 'flex' } : {}}>\n {props!.YValueHover &&\n props!.YValueHover.map((yValue: YValueHover, index: number, yValues: YValueHover[]) => {\n const isLast: boolean = index + 1 === yValues.length;\n const shouldDrawBorderBottom = isLast ? false : yValue.shouldDrawBorderBottom ?? false;\n return (\n <div\n {...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}\n key={`callout-content-${index}`}\n style={\n yValueHoverSubCountsExists\n ? {\n display: 'inline-block',\n ...(shouldDrawBorderBottom && {\n borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n paddingBottom: '10px',\n }),\n }\n : {\n ...(shouldDrawBorderBottom && {\n borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n paddingBottom: '10px',\n }),\n }\n }\n >\n {_getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}\n </div>\n );\n })}\n {!!props.descriptionMessage && <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>}\n </div>\n </div>\n );\n }\n\n function _yValueHoverSubCountsExists(yValueHover?: YValueHover[]): boolean \| undefined {\n return (\n yValueHover &&\n yValueHover.some(\n (yValue: {\n legend?: string;\n y?: number;\n color?: string;\n yAxisCalloutData?: string \| { [id: string]: number };\n }) => yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string',\n )\n );\n }\n\n function _getCalloutContent(\n xValue: YValueHover,\n index: number,\n yValueHoverSubCountsExists: boolean,\n isLast: boolean,\n ): React.ReactNode {\n const marginStyle: React.CSSProperties = isLast ? {} : { marginRight: '16px' };\n const toDrawShape = xValue.index !== undefined && xValue.index !== -1;\n const { culture } = props;\n const yValue = formatToLocaleString(xValue.y, culture) as React.ReactNode;\n if (!xValue.yAxisCalloutData \|\| typeof xValue.yAxisCalloutData === 'string') {\n return (\n <div style={yValueHoverSubCountsExists ? marginStyle : {}}>\n {yValueHoverSubCountsExists && (\n <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n {xValue.legend!} ({yValue})\n </div>\n )}\n <div\n id={`${index}_${xValue.y}`}\n className={classes.calloutBlockContainer}\n style={{\n ...(!toDrawShape\n ? {\n borderInlineStart: `4px solid ${xValue.color}`,\n }\n : {}),\n }}\n >\n {toDrawShape && (\n <Shape\n svgProps={{\n className: classes.shapeStyles,\n }}\n pathProps={{ fill: xValue.color }}\n shape={Points[xValue.index! % Object.keys(pointTypes).length] as LegendShape}\n />\n )}\n <div\n className={mergeClasses(\n classes.calloutBlockContainer,\n toDrawShape\n ? classes.calloutBlockContainertoDrawShapetrue\n : classes.calloutBlockContainertoDrawShapefalse,\n )}\n style={{ marginTop: xValue ? '13px' : 'unset' }}\n >\n <div className={classes.calloutlegendText}> {xValue.legend}</div>\n <div className={classes.calloutContentY} style={{ direction: 'ltr', unicodeBidi: 'isolate' }}>\n {\n formatToLocaleString(\n xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y ?? xValue.data,\n culture,\n ) as React.ReactNode\n }\n </div>\n </div>\n </div>\n </div>\n );\n } else {\n const subcounts: { [id: string]: number } = xValue.yAxisCalloutData as { [id: string]: number };\n return (\n <div style={marginStyle}>\n <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n {xValue.legend!} ({yValue})\n </div>\n {Object.keys(subcounts).map((subcountName: string) => {\n return (\n <div key={subcountName} className={classes.calloutBlockContainer}>\n <div className={classes.calloutlegendText}>\n {' '}\n {formatToLocaleString(subcountName, culture) as React.ReactNode}\n </div>\n <div\n className={classes.calloutContentY}\n style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}\n >\n {formatToLocaleString(subcounts[subcountName], culture) as React.ReactNode}\n </div>\n </div>\n );\n })}\n </div>\n );\n }\n }\n});\nChartPopover.displayName = 'ChartPopover';\n"],"names":["React","Popover","PopoverSurface","mergeClasses","tokens","useId","getAccessibleDataObject","Points","pointTypes","formatToLocaleString","Shape","usePopoverStyles_unstable","ChartPopover","forwardRef","props","forwardedRef","virtualElement","getBoundingClientRect","top","clickPosition","y","left","x","right","bottom","width","height","target","positioning","customCallout","customCalloutProps","classes","legend","xCalloutValue","YValue","yCalloutValue","div","id","ref","className","calloutContainer","autoSize","offset","coverTarget","open","isPopoverOpen","inline","customizedCallout","isCalloutForStack","_multiValueCallout","calloutContentRoot","calloutDateTimeContainer","calloutContentX","XValue","calloutInfoContainer","style","ratio","display","alignItems","borderInlineStart","color","marginTop","calloutBlockContainer","calloutlegendText","culture","calloutContentY","colorNeutralForeground1","fontSize","fontSizeHero700","span","numerator","denominator","descriptionMessage","_yValueHoverSubCountsExists","yValueHoverSubCountsExists","YValueHover","marginBottom","xAxisCalloutAccessibilityData","hoverXValue","map","yValue","index","yValues","isLast","length","shouldDrawBorderBottom","callOutAccessibilityData","key","borderBottom","colorNeutralStroke2","paddingBottom","_getCalloutContent","yValueHover","some","yAxisCalloutData","xValue","marginStyle","marginRight","toDrawShape","undefined","svgProps","shapeStyles","pathProps","fill","shape","Object","keys","calloutBlockContainertoDrawShapetrue","calloutBlockContainertoDrawShapefalse","direction","unicodeBidi","data","subcounts","subcountName","displayName"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/CommonComponents/ChartPopover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport { mergeClasses } from '@griffel/react';\nimport type { PositioningVirtualElement } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { useId } from '@fluentui/react-utilities';\nimport { getAccessibleDataObject, Points, pointTypes } from '../../utilities/index';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { Shape } from '../Legends/shape';\nimport { usePopoverStyles_unstable } from './useChartPopoverStyles.styles';\nimport { YValueHover } from './CartesianChart.types';\nimport { LegendShape } from '../Legends/Legends.types';\nimport { ChartPopoverProps } from './ChartPopover.types';\n\n/* This component is a wrapper over Popover component which implements the logic for rendering popovers for any chart\ncombining the logic for Callout and ChartHoverCard in v8 charts. /\nexport const ChartPopover: React.FunctionComponent<ChartPopoverProps> = React.forwardRef<\n HTMLDivElement,\n ChartPopoverProps\n>((props, forwardedRef) => {\n const virtualElement: PositioningVirtualElement = {\n getBoundingClientRect: () => ({\n top: props.clickPosition!.y,\n left: props.clickPosition!.x,\n right: props.clickPosition!.x,\n bottom: props.clickPosition!.y,\n x: props.clickPosition!.x,\n y: props.clickPosition!.y,\n width: 0,\n height: 0,\n }),\n };\n const target =\n typeof props.positioning === 'object' && 'target' in props.positioning\n ? props.positioning.target !== null\n ? props.positioning.target\n : virtualElement\n : virtualElement;\n props = { ...props, ...props.customCallout?.customCalloutProps };\n const classes = usePopoverStyles_unstable(props);\n const legend = props.xCalloutValue ? props.xCalloutValue : props.legend;\n const YValue = props.yCalloutValue ? props.yCalloutValue : props.YValue;\n return (\n <div id={useId('callout')} ref={forwardedRef} className={classes.calloutContainer}>\n <Popover\n positioning={{ target, autoSize: 'always', offset: 20, coverTarget: false }}\n open={props.isPopoverOpen}\n inline\n >\n <PopoverSurface>\n {/* Given custom callout, then it will render /}\n {props.customCallout && props.customCallout.customizedCallout && props.customCallout.customizedCallout}\n {/* single x point its corresponding y points of all the bars/lines in chart will render in callout /}\n {(!props.customCallout \|\| !props.customCallout.customizedCallout) &&\n props.isCalloutForStack &&\n _multiValueCallout()}\n {/* single x point its corresponding y point of single line/bar in the chart will render in callout /}\n {(!props.customCallout \|\| !props.customCallout.customizedCallout) && !props.isCalloutForStack && (\n <div className={classes.calloutContentRoot}>\n <div className={classes.calloutDateTimeContainer}>\n <div className={classes.calloutContentX}>{props.XValue} </div>\n {/TO DO if we add time for callout then will use this /}\n {/ <div className={classNames.calloutContentX}>07:00am</div> */}\n </div>\n <div\n className={classes.calloutInfoContainer}\n style={{\n ...(props.ratio && {\n display: 'flex',\n alignItems: 'flex-end',\n }),\n borderInlineStart: `4px solid ${props.color}`,\n marginTop: '11px',\n }}\n >\n <div className={classes.calloutBlockContainer}>\n <div className={classes.calloutlegendText}>\n {formatToLocaleString(legend, props.culture) as React.ReactNode}\n </div>\n <div\n className={classes.calloutContentY}\n style={{\n color: props.color ? props.color : tokens.colorNeutralForeground1,\n fontSize: tokens.fontSizeHero700,\n }}\n >\n {formatToLocaleString(YValue, props.culture) as React.ReactNode}\n </div>\n </div>\n {!!props.ratio && (\n <div className={classes.ratio}>\n <>\n <span className={classes.numerator}>\n {formatToLocaleString(props.ratio[0], props.culture) as React.ReactNode}\n </span>\n /\n <span className={classes.denominator}>\n {formatToLocaleString(props.ratio[1], props.culture) as React.ReactNode}\n </span>\n </>\n </div>\n )}\n </div>\n {!!props.descriptionMessage && (\n <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>\n )}\n </div>\n )}\n </PopoverSurface>\n </Popover>\n </div>\n );\n\n function _multiValueCallout() {\n const yValueHoverSubCountsExists: boolean = _yValueHoverSubCountsExists(props.YValueHover) ?? false;\n return (\n <div className={classes.calloutContentRoot}>\n <div\n className={classes.calloutDateTimeContainer}\n style={yValueHoverSubCountsExists ? { marginBottom: '11px' } : {}}\n >\n <div\n className={classes.calloutContentX}\n {...getAccessibleDataObject(props!.xAxisCalloutAccessibilityData, 'text', false)}\n >\n {formatToLocaleString(props!.hoverXValue, props.culture) as React.ReactNode}\n </div>\n </div>\n <div style={yValueHoverSubCountsExists ? { display: 'flex' } : {}}>\n {props!.YValueHover &&\n props!.YValueHover.map((yValue: YValueHover, index: number, yValues: YValueHover[]) => {\n const isLast: boolean = index + 1 === yValues.length;\n const shouldDrawBorderBottom = isLast ? false : yValue.shouldDrawBorderBottom ?? false;\n return (\n <div\n {...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}\n key={`callout-content-${index}`}\n style={\n yValueHoverSubCountsExists\n ? {\n display: 'inline-block',\n ...(shouldDrawBorderBottom && {\n borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n paddingBottom: '10px',\n }),\n }\n : {\n ...(shouldDrawBorderBottom && {\n borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n paddingBottom: '10px',\n }),\n }\n }\n >\n {_getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}\n </div>\n );\n })}\n {!!props.descriptionMessage && <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>}\n </div>\n </div>\n );\n }\n\n function _yValueHoverSubCountsExists(yValueHover?: YValueHover[]): boolean \| undefined {\n return (\n yValueHover &&\n yValueHover.some(\n (yValue: {\n legend?: string;\n y?: number;\n color?: string;\n yAxisCalloutData?: string \| { [id: string]: number };\n }) => yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string',\n )\n );\n }\n\n function _getCalloutContent(\n xValue: YValueHover,\n index: number,\n yValueHoverSubCountsExists: boolean,\n isLast: boolean,\n ): React.ReactNode {\n const marginStyle: React.CSSProperties = isLast ? {} : { marginRight: '16px' };\n const toDrawShape = xValue.index !== undefined && xValue.index !== -1;\n const { culture } = props;\n const yValue = formatToLocaleString(xValue.y, culture) as React.ReactNode;\n if (!xValue.yAxisCalloutData \|\| typeof xValue.yAxisCalloutData === 'string') {\n return (\n <div style={yValueHoverSubCountsExists ? marginStyle : {}}>\n {yValueHoverSubCountsExists && (\n <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n {xValue.legend!} ({yValue})\n </div>\n )}\n <div\n id={`${index}_${xValue.y}`}\n className={classes.calloutBlockContainer}\n style={{\n ...(!toDrawShape\n ? {\n borderInlineStart: `4px solid ${xValue.color}`,\n }\n : {}),\n }}\n >\n {toDrawShape && (\n <Shape\n svgProps={{\n className: classes.shapeStyles,\n }}\n pathProps={{ fill: xValue.color }}\n shape={Points[xValue.index! % Object.keys(pointTypes).length] as LegendShape}\n />\n )}\n <div\n className={mergeClasses(\n classes.calloutBlockContainer,\n toDrawShape\n ? classes.calloutBlockContainertoDrawShapetrue\n : classes.calloutBlockContainertoDrawShapefalse,\n )}\n style={{ marginTop: xValue ? '13px' : 'unset' }}\n >\n <div className={classes.calloutlegendText}> {xValue.legend}</div>\n <div className={classes.calloutContentY} style={{ direction: 'ltr', unicodeBidi: 'isolate' }}>\n {\n formatToLocaleString(\n xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y ?? xValue.data,\n culture,\n ) as React.ReactNode\n }\n </div>\n </div>\n </div>\n </div>\n );\n } else {\n const subcounts: { [id: string]: number } = xValue.yAxisCalloutData as { [id: string]: number };\n return (\n <div style={marginStyle}>\n <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n {xValue.legend!} ({yValue})\n </div>\n {Object.keys(subcounts).map((subcountName: string) => {\n return (\n <div key={subcountName} className={classes.calloutBlockContainer}>\n <div className={classes.calloutlegendText}>\n {' '}\n {formatToLocaleString(subcountName, culture) as React.ReactNode}\n </div>\n <div\n className={classes.calloutContentY}\n style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}\n >\n {formatToLocaleString(subcounts[subcountName], culture) as React.ReactNode}\n </div>\n </div>\n );\n })}\n </div>\n );\n }\n }\n});\nChartPopover.displayName = 'ChartPopover';\n"],"names":["React","Popover","PopoverSurface","mergeClasses","tokens","useId","getAccessibleDataObject","Points","pointTypes","formatToLocaleString","Shape","usePopoverStyles_unstable","ChartPopover","forwardRef","props","forwardedRef","virtualElement","getBoundingClientRect","top","clickPosition","y","left","x","right","bottom","width","height","target","positioning","customCallout","customCalloutProps","classes","legend","xCalloutValue","YValue","yCalloutValue","div","id","ref","className","calloutContainer","autoSize","offset","coverTarget","open","isPopoverOpen","inline","customizedCallout","isCalloutForStack","_multiValueCallout","calloutContentRoot","calloutDateTimeContainer","calloutContentX","XValue","calloutInfoContainer","style","ratio","display","alignItems","borderInlineStart","color","marginTop","calloutBlockContainer","calloutlegendText","culture","calloutContentY","colorNeutralForeground1","fontSize","fontSizeHero700","span","numerator","denominator","descriptionMessage","_yValueHoverSubCountsExists","yValueHoverSubCountsExists","YValueHover","marginBottom","xAxisCalloutAccessibilityData","hoverXValue","map","yValue","index","yValues","isLast","length","shouldDrawBorderBottom","callOutAccessibilityData","key","borderBottom","colorNeutralStroke2","paddingBottom","_getCalloutContent","yValueHover","some","yAxisCalloutData","xValue","marginStyle","marginRight","toDrawShape","undefined","svgProps","shapeStyles","pathProps","fill","shape","Object","keys","calloutBlockContainertoDrawShapetrue","calloutBlockContainertoDrawShapefalse","direction","unicodeBidi","data","subcounts","subcountName","displayName"],"mappings":"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"}

package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js CHANGED Viewed

@@ -59,7 +59,9 @@ const cartesianchartClassNames = {
         ]
     },
     chartWrapper: {
-        qhf8xq: "f10pi13n",
+        qhf8xq: "f10pi13n"
+    },
+    chartWrapperMinWidth: {
         B68tc82: 0,
         Bmxbyg5: 0,
         Bpg54ce: "f1enuhaj"
@@ -251,7 +253,7 @@ const useCartesianChartStyles = (props)=>{
     const baseStyles = useStyles();
     return {
         root: (0, _react.mergeClasses)(cartesianchartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
-        chartWrapper: (0, _react.mergeClasses)(cartesianchartClassNames.chartWrapper, ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapper : '', (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),
+        chartWrapper: (0, _react.mergeClasses)(cartesianchartClassNames.chartWrapper, baseStyles.chartWrapper, ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapperMinWidth : undefined, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),
         plotContainer: (0, _react.mergeClasses)(cartesianchartClassNames.plotContainer, baseStyles.plotContainer /*props.styles?.plotContainer*/ ),
         axisTitle: (0, _react.mergeClasses)(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/ ),
         xAxis: (0, _react.mergeClasses)(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/ ),

package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\n/*\n @internal\n / export const cartesianchartClassNames = {\n root: 'fui-cart__root',\n chartWrapper: 'fui-cart__chartWrapper',\n plotContainer: 'fui-cart__plotContainer',\n axisTitle: 'fui-cart__axisTitle',\n xAxis: 'fui-cart__xAxis',\n yAxis: 'fui-cart__yAxis',\n opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n legendContainer: 'fui-cart__legendContainer',\n svgTooltip: 'fui-cart_svgTooltip',\n shapeStyles: 'fui-cart__shapeStyles',\n descriptionMessage: 'fui-cart__descriptionMessage',\n hover: 'fui-cart__hover',\n tooltip: 'fui-cart__tooltip',\n axisAnnotation: 'fui-cart__axisAnnotation',\n chartTitle: 'fui-cart__chartTitle',\n chart: 'fui-cart__chart',\n annotationLayer: 'fui-cart__annotationLayer'\n};\n/\n Base Styles\n / const useStyles = makeStyles({\n root: {\n ...typographyStyles.body1,\n display: 'flex',\n width: '100%',\n height: '100%',\n flexDirection: 'column',\n overflow: 'hidden',\n textAlign: 'left'\n },\n chartWrapper: {\n position: 'relative',\n overflow: 'auto'\n },\n plotContainer: {\n position: 'relative',\n width: '100%',\n height: '100%'\n },\n axisTitle: getAxisTitleStyle(),\n axisAnnotation: getAxisTitleStyle(),\n xAxis: {\n '& text': {\n fill: tokens.colorNeutralForeground1,\n ...typographyStyles.caption2Strong,\n forcedColorAdjust: 'auto'\n },\n '& line': {\n opacity: 0.2,\n stroke: tokens.colorNeutralForeground1,\n width: '1px',\n forcedColorAdjust: 'auto'\n },\n '& path': {\n display: 'none'\n }\n },\n yAxis: {\n '& text': {\n ...typographyStyles.caption2Strong,\n fill: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto'\n },\n '& line': {\n opacity: 0.2,\n stroke: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto'\n },\n '& path': {\n display: 'none'\n }\n },\n rtl: {\n '& g': {\n textAnchor: 'end'\n }\n },\n ltr: {},\n opacityChangeOnHover: {\n opacity: '0.1',\n cursor: 'default'\n },\n legendContainer: {\n marginTop: tokens.spacingVerticalS,\n marginLeft: tokens.spacingHorizontalXL\n },\n svgTooltip: {\n fill: tokens.colorNeutralBackground1,\n [HighContrastSelector]: {\n fill: 'Canvas'\n }\n },\n annotationLayer: {\n pointerEvents: 'none'\n },\n tooltip: getTooltipStyle()\n});\n/\n \n * Apply styling to the Carousel slots based on the state\n / export const useCartesianChartStyles = (props)=>{\n var _props_styles, _props_reflowProps, _props_styles1, _props_styles2, _props_styles3;\n const _useRtl = useRtl();\n const baseStyles = useStyles();\n return {\n root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null \|\| _props_styles === void 0 ? void 0 : _props_styles.root),\n chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, ((_props_reflowProps = props.reflowProps) === null \|\| _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapper : '', (_props_styles1 = props.styles) === null \|\| _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),\n plotContainer: mergeClasses(cartesianchartClassNames.plotContainer, baseStyles.plotContainer /props.styles?.plotContainer/ ),\n axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /props.styles?.axisTitle/ ),\n xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /props.styles?.xAxis/ ),\n yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /props.styles?.yAxis/ ),\n opacityChangeOnHover: mergeClasses(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /props.styles?.opacityChangeOnHover/ ),\n legendContainer: mergeClasses(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /props.styles?.legendContainer/ ),\n svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles2 = props.styles) === null \|\| _props_styles2 === void 0 ? void 0 : _props_styles2.svgTooltip),\n annotationLayer: mergeClasses(cartesianchartClassNames.annotationLayer, baseStyles.annotationLayer /props.styles?.annotationLayer/ ),\n tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /props.styles?.tooltip*/ ),\n axisAnnotation: mergeClasses(cartesianchartClassNames.axisAnnotation, baseStyles.axisAnnotation),\n chart: mergeClasses(cartesianchartClassNames.chart, (_props_styles3 = props.styles) === null \|\| _props_styles3 === void 0 ? void 0 : _props_styles3.chart)\n };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","plotContainer","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","annotationLayer","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","qhf8xq","B80ckks","sj55zd","Bkfmm31","Bxms50k","Bifops1","lr70ht","D01gh","vxuu72","lclgl4","zp1vxd","jxu3ei","B3i31d3","Bhcy8il","z3m6do","se2xxg","rtl","Bkw34lo","ltr","abs64n","Bceei9c","B6of3ja","Frg6f3","Bkecrkj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","m","useCartesianChartStyles","props","_props_styles","_props_reflowProps","_props_styles1","_props_styles2","_props_styles3","_useRtl","baseStyles","styles","reflowProps","mode"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAOKQ,wBAAwB;;;2BAqGD;eAAvBsE;;;uBA3GwB,gBAAgB;2BAEZ,2BAA2B;AAI7D,iCAAiC;IACxCrE,IAAI,EAAE,gBAAgB;IACtBC,YAAY,EAAE,wBAAwB;IACtCC,aAAa,EAAE,yBAAyB;IACxCC,SAAS,EAAE,qBAAqB;IAChCC,KAAK,EAAE,iBAAiB;IACxBC,KAAK,EAAE,iBAAiB;IACxBC,oBAAoB,EAAE,gCAAgC;IACtDC,eAAe,EAAE,2BAA2B;IAC5CC,UAAU,EAAE,qBAAqB;IACjCC,WAAW,EAAE,uBAAuB;IACpCC,kBAAkB,EAAE,8BAA8B;IAClDC,KAAK,EAAE,iBAAiB;IACxBC,OAAO,EAAE,mBAAmB;IAC5BC,cAAc,EAAE,0BAA0B;IAC1CC,UAAU,EAAE,sBAAsB;IAClCC,KAAK,EAAE,iBAAiB;IACxBC,eAAe,EAAE;AACrB,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAG1B,eAAA,EAAA;IAAAS,IAAA,EAAA;QAAAkB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAA5B,YAAA,EAAA;QAAA6B,MAAA,EAAA;QAAAJ,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAA1B,aAAA,EAAA;QAAA4B,MAAA,EAAA;QAAAP,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAArB,SAAA,EAAA;QAAAe,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAU,OAAA,EAAA;QAAAF,MAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAArB,cAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAU,OAAA,EAAA;QAAAF,MAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAA9B,KAAA,EAAA;QAAA+B,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAxC,KAAA,EAAA;QAAA+B,MAAA,EAAA;QAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAJ,OAAA,EAAA;QAAAK,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,GAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,GAAA,EAAA,CAAA;IAAA1C,oBAAA,EAAA;QAAA2C,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAA3C,eAAA,EAAA;QAAA4C,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAA5C,UAAA,EAAA;QAAAyB,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAlB,eAAA,EAAA;QAAAqC,OAAA,EAAA;IAAA;IAAAzC,OAAA,EAAA;QAAAM,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAG,OAAA,EAAA;QAAA6B,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAA5B,MAAA,EAAA;QAAAD,MAAA,EAAA;QAAA8B,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAZ,OAAA,EAAA;QAAArB,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAkC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CA4ErB,CAAC;AAIS,iCAAiCE,KAAK,IAAG;IAChD,IAAIC,aAAa,EAAEC,kBAAkB,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc;IACrF,MAAMC,OAAO,OAAGhF,iBAAM,CAAC,CAAC;IACxB,MAAMiF,UAAU,GAAG5D,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHjB,IAAI,MAAER,mBAAY,EAACO,wBAAwB,CAACC,IAAI,EAAE6E,UAAU,CAAC7E,IAAI,EAAE,CAACuE,aAAa,GAAGD,KAAK,CAACQ,MAAAA,AAAM,MAAM,IAAI,IAAIP,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACvE,IAAI,CAAC;QACrKC,YAAY,MAAET,mBAAY,EAACO,wBAAwB,CAACE,YAAY,EAAE,CAAC,CAACuE,kBAAkB,GAAGF,KAAK,CAACS,WAAAA,AAAW,MAAM,IAAI,IAAIP,kBAAkB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,kBAAkB,CAACQ,IAAAA,AAAI,MAAM,WAAW,GAAGH,UAAU,CAAC5E,YAAY,GAAG,EAAE,EAAE,CAACwE,cAAc,GAAGH,KAAK,CAACQ,MAAAA,AAAM,MAAM,IAAI,IAAIL,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACxE,YAAY,CAAC;QACvVC,aAAa,MAAEV,mBAAY,EAACO,wBAAwB,CAACG,aAAa,EAAE2E,UAAU,CAAC3E,aAAa,CAAC,6BAAA,EAAgC,CAAC;QAC9HC,SAAS,MAAEX,mBAAY,EAACO,wBAAwB,CAACI,SAAS,EAAE0E,UAAU,CAAC1E,SAAS,CAAC,yBAAA,EAA4B,CAAC;QAC9GC,KAAK,MAAEZ,mBAAY,EAACO,wBAAwB,CAACK,KAAK,EAAEyE,UAAU,CAACzE,KAAK,CAAC,qBAAA,EAAwB,CAAC;QAC9FC,KAAK,MAAEb,mBAAY,EAACO,wBAAwB,CAACM,KAAK,EAAEwE,UAAU,CAACxE,KAAK,EAAEuE,OAAO,GAAGC,UAAU,CAAC/B,GAAG,GAAG+B,UAAU,CAAC7B,GAAG,CAAC,qBAAA,EAAwB,CAAC;QACzI1C,oBAAoB,MAAEd,mBAAY,EAACO,wBAAwB,CAACO,oBAAoB,EAAEuE,UAAU,CAACvE,oBAAoB,CAAC,oCAAA,EAAuC,CAAC;QAC1JC,eAAe,MAAEf,mBAAY,EAACO,wBAAwB,CAACQ,eAAe,EAAEsE,UAAU,CAACtE,eAAe,CAAC,+BAAA,EAAkC,CAAC;QACtIC,UAAU,MAAEhB,mBAAY,EAACO,wBAAwB,CAACS,UAAU,EAAEqE,UAAU,CAACrE,UAAU,EAAE,CAACkE,cAAc,GAAGJ,KAAK,CAACQ,MAAM,AAANA,MAAY,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAClE,UAAU,CAAC;QAChMQ,eAAe,EAAExB,uBAAY,EAACO,wBAAwB,CAACiB,eAAe,EAAE6D,UAAU,CAAC7D,eAAe,CAAC,+BAAA,EAAkC,CAAC;QACtIJ,OAAO,MAAEpB,mBAAY,EAACO,wBAAwB,CAACa,OAAO,EAAEiE,UAAU,CAACjE,OAAO,CAAC,uBAAA,EAA0B,CAAC;QACtGC,cAAc,MAAErB,mBAAY,EAACO,wBAAwB,CAACc,cAAc,EAAEgE,UAAU,CAAChE,cAAc,CAAC;QAChGE,KAAK,MAAEvB,mBAAY,EAACO,wBAAwB,CAACgB,KAAK,EAAE,CAAC4D,cAAc,GAAGL,KAAK,CAACQ,MAAAA,AAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC5D,KAAK;IAC7J,CAAC;AACL,CAAC"}
1	+ {"version":3,"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\n/*\n @internal\n / export const cartesianchartClassNames = {\n root: 'fui-cart__root',\n chartWrapper: 'fui-cart__chartWrapper',\n plotContainer: 'fui-cart__plotContainer',\n axisTitle: 'fui-cart__axisTitle',\n xAxis: 'fui-cart__xAxis',\n yAxis: 'fui-cart__yAxis',\n opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n legendContainer: 'fui-cart__legendContainer',\n svgTooltip: 'fui-cart_svgTooltip',\n shapeStyles: 'fui-cart__shapeStyles',\n descriptionMessage: 'fui-cart__descriptionMessage',\n hover: 'fui-cart__hover',\n tooltip: 'fui-cart__tooltip',\n axisAnnotation: 'fui-cart__axisAnnotation',\n chartTitle: 'fui-cart__chartTitle',\n chart: 'fui-cart__chart',\n annotationLayer: 'fui-cart__annotationLayer'\n};\n/\n Base Styles\n / const useStyles = makeStyles({\n root: {\n ...typographyStyles.body1,\n display: 'flex',\n width: '100%',\n height: '100%',\n flexDirection: 'column',\n overflow: 'hidden',\n textAlign: 'left'\n },\n chartWrapper: {\n position: 'relative'\n },\n chartWrapperMinWidth: {\n overflow: 'auto'\n },\n plotContainer: {\n position: 'relative',\n width: '100%',\n height: '100%'\n },\n axisTitle: getAxisTitleStyle(),\n axisAnnotation: getAxisTitleStyle(),\n xAxis: {\n '& text': {\n fill: tokens.colorNeutralForeground1,\n ...typographyStyles.caption2Strong,\n forcedColorAdjust: 'auto'\n },\n '& line': {\n opacity: 0.2,\n stroke: tokens.colorNeutralForeground1,\n width: '1px',\n forcedColorAdjust: 'auto'\n },\n '& path': {\n display: 'none'\n }\n },\n yAxis: {\n '& text': {\n ...typographyStyles.caption2Strong,\n fill: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto'\n },\n '& line': {\n opacity: 0.2,\n stroke: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto'\n },\n '& path': {\n display: 'none'\n }\n },\n rtl: {\n '& g': {\n textAnchor: 'end'\n }\n },\n ltr: {},\n opacityChangeOnHover: {\n opacity: '0.1',\n cursor: 'default'\n },\n legendContainer: {\n marginTop: tokens.spacingVerticalS,\n marginLeft: tokens.spacingHorizontalXL\n },\n svgTooltip: {\n fill: tokens.colorNeutralBackground1,\n [HighContrastSelector]: {\n fill: 'Canvas'\n }\n },\n annotationLayer: {\n pointerEvents: 'none'\n },\n tooltip: getTooltipStyle()\n});\n/\n \n * Apply styling to the Carousel slots based on the state\n / export const useCartesianChartStyles = (props)=>{\n var _props_styles, _props_reflowProps, _props_styles1, _props_styles2, _props_styles3;\n const _useRtl = useRtl();\n const baseStyles = useStyles();\n return {\n root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null \|\| _props_styles === void 0 ? void 0 : _props_styles.root),\n chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, baseStyles.chartWrapper, ((_props_reflowProps = props.reflowProps) === null \|\| _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapperMinWidth : undefined, (_props_styles1 = props.styles) === null \|\| _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),\n plotContainer: mergeClasses(cartesianchartClassNames.plotContainer, baseStyles.plotContainer /props.styles?.plotContainer/ ),\n axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /props.styles?.axisTitle/ ),\n xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /props.styles?.xAxis/ ),\n yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /props.styles?.yAxis/ ),\n opacityChangeOnHover: mergeClasses(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /props.styles?.opacityChangeOnHover/ ),\n legendContainer: mergeClasses(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /props.styles?.legendContainer/ ),\n svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles2 = props.styles) === null \|\| _props_styles2 === void 0 ? void 0 : _props_styles2.svgTooltip),\n annotationLayer: mergeClasses(cartesianchartClassNames.annotationLayer, baseStyles.annotationLayer /props.styles?.annotationLayer/ ),\n tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /props.styles?.tooltip*/ ),\n axisAnnotation: mergeClasses(cartesianchartClassNames.axisAnnotation, baseStyles.axisAnnotation),\n chart: mergeClasses(cartesianchartClassNames.chart, (_props_styles3 = props.styles) === null \|\| _props_styles3 === void 0 ? void 0 : _props_styles3.chart)\n };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","plotContainer","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","annotationLayer","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","qhf8xq","chartWrapperMinWidth","B80ckks","sj55zd","Bkfmm31","Bxms50k","Bifops1","lr70ht","D01gh","vxuu72","lclgl4","zp1vxd","jxu3ei","B3i31d3","Bhcy8il","z3m6do","se2xxg","rtl","Bkw34lo","ltr","abs64n","Bceei9c","B6of3ja","Frg6f3","Bkecrkj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","m","useCartesianChartStyles","props","_props_styles","_props_reflowProps","_props_styles1","_props_styles2","_props_styles3","_useRtl","baseStyles","styles","reflowProps","mode","undefined"],"mappings":"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"}

package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.raw.js CHANGED Viewed

@@ -53,7 +53,9 @@ const cartesianchartClassNames = {
         textAlign: 'left'
     },
     chartWrapper: {
-        position: 'relative',
+        position: 'relative'
+    },
+    chartWrapperMinWidth: {
         overflow: 'auto'
     },
     plotContainer: {
@@ -125,7 +127,7 @@ const useCartesianChartStyles = (props)=>{
     const baseStyles = useStyles();
     return {
         root: (0, _react.mergeClasses)(cartesianchartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
-        chartWrapper: (0, _react.mergeClasses)(cartesianchartClassNames.chartWrapper, ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapper : '', (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),
+        chartWrapper: (0, _react.mergeClasses)(cartesianchartClassNames.chartWrapper, baseStyles.chartWrapper, ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapperMinWidth : undefined, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),
         plotContainer: (0, _react.mergeClasses)(cartesianchartClassNames.plotContainer, baseStyles.plotContainer /*props.styles?.plotContainer*/ ),
         axisTitle: (0, _react.mergeClasses)(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/ ),
         xAxis: (0, _react.mergeClasses)(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/ ),

package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CommonComponents/useCartesianChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { CartesianChartProps, CartesianChartStyles } from './CartesianChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\n\n/*\n @internal\n /\nexport const cartesianchartClassNames: SlotClassNames<CartesianChartStyles> = {\n root: 'fui-cart__root',\n chartWrapper: 'fui-cart__chartWrapper',\n plotContainer: 'fui-cart__plotContainer',\n axisTitle: 'fui-cart__axisTitle',\n xAxis: 'fui-cart__xAxis',\n yAxis: 'fui-cart__yAxis',\n opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n legendContainer: 'fui-cart__legendContainer',\n svgTooltip: 'fui-cart_svgTooltip',\n shapeStyles: 'fui-cart__shapeStyles',\n descriptionMessage: 'fui-cart__descriptionMessage',\n hover: 'fui-cart__hover',\n tooltip: 'fui-cart__tooltip',\n axisAnnotation: 'fui-cart__axisAnnotation',\n chartTitle: 'fui-cart__chartTitle',\n chart: 'fui-cart__chart',\n annotationLayer: 'fui-cart__annotationLayer',\n};\n\n/\n Base Styles\n /\nconst useStyles = makeStyles({\n root: {\n ...typographyStyles.body1,\n display: 'flex',\n width: '100%',\n height: '100%',\n flexDirection: 'column',\n overflow: 'hidden',\n textAlign: 'left',\n },\n chartWrapper: {\n position: 'relative',\n overflow: 'auto',\n },\n plotContainer: {\n position: 'relative',\n width: '100%',\n height: '100%',\n },\n axisTitle: getAxisTitleStyle() as GriffelStyle,\n axisAnnotation: getAxisTitleStyle() as GriffelStyle,\n xAxis: {\n '& text': {\n fill: tokens.colorNeutralForeground1,\n ...typographyStyles.caption2Strong,\n forcedColorAdjust: 'auto',\n },\n '& line': {\n opacity: 0.2,\n stroke: tokens.colorNeutralForeground1,\n width: '1px',\n forcedColorAdjust: 'auto',\n },\n '& path': {\n display: 'none',\n },\n },\n yAxis: {\n '& text': {\n ...typographyStyles.caption2Strong,\n fill: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto',\n },\n '& line': {\n opacity: 0.2,\n stroke: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto',\n },\n '& path': {\n display: 'none',\n },\n },\n rtl: {\n '& g': {\n textAnchor: 'end',\n },\n },\n ltr: {},\n opacityChangeOnHover: {\n opacity: '0.1', //supports custom opacity ??\n cursor: 'default', //supports custom cursor ??\n },\n legendContainer: {\n marginTop: tokens.spacingVerticalS,\n marginLeft: tokens.spacingHorizontalXL,\n },\n svgTooltip: {\n fill: tokens.colorNeutralBackground1,\n [HighContrastSelector]: {\n fill: 'Canvas',\n },\n },\n annotationLayer: {\n pointerEvents: 'none',\n },\n tooltip: getTooltipStyle() as GriffelStyle,\n});\n/\n \n * Apply styling to the Carousel slots based on the state\n /\nexport const useCartesianChartStyles = (props: CartesianChartProps): CartesianChartStyles => {\n const _useRtl = useRtl();\n const baseStyles = useStyles();\n return {\n root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, props.styles?.root),\n chartWrapper: mergeClasses(\n cartesianchartClassNames.chartWrapper,\n props.reflowProps?.mode === 'min-width' ? baseStyles.~~chartWrapper~~ : '',\n props.styles?.chartWrapper,\n ),\n plotContainer: mergeClasses(\n cartesianchartClassNames.plotContainer,\n baseStyles.plotContainer /props.styles?.plotContainer/,\n ),\n axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /props.styles?.axisTitle/),\n xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /props.styles?.xAxis/),\n yAxis: mergeClasses(\n cartesianchartClassNames.yAxis,\n baseStyles.yAxis,\n _useRtl ? baseStyles.rtl : baseStyles.ltr /props.styles?.yAxis/,\n ),\n opacityChangeOnHover: mergeClasses(\n cartesianchartClassNames.opacityChangeOnHover,\n baseStyles.opacityChangeOnHover /props.styles?.opacityChangeOnHover/,\n ),\n legendContainer: mergeClasses(\n cartesianchartClassNames.legendContainer,\n baseStyles.legendContainer /props.styles?.legendContainer/,\n ),\n svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, props.styles?.svgTooltip),\n annotationLayer: mergeClasses(\n cartesianchartClassNames.annotationLayer,\n baseStyles.annotationLayer /props.styles?.annotationLayer/,\n ),\n tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /props.styles?.tooltip/),\n axisAnnotation: mergeClasses(\n cartesianchartClassNames.axisAnnotation,\n baseStyles.axisAnnotation,\n /props.styles?.axisAnnotation,*/\n ),\n chart: mergeClasses(cartesianchartClassNames.chart, props.styles?.chart),\n };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","plotContainer","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","annotationLayer","useStyles","body1","display","width","height","flexDirection","overflow","textAlign","position","fill","colorNeutralForeground1","caption2Strong","forcedColorAdjust","opacity","stroke","rtl","textAnchor","ltr","cursor","marginTop","spacingVerticalS","marginLeft","spacingHorizontalXL","colorNeutralBackground1","pointerEvents","useCartesianChartStyles","props","_useRtl","baseStyles","styles","reflowProps","mode"],"mappings":"AAAA;;;;;;;;;;;;IAYaQ,wBAAAA;;;~~2BAwGA2C;eAAAA;;;uBAlH0C~~,iBAAiB;4BAG/B,wBAAwB;2BACpB,4BAA4B;uBACtB,wBAAwB;AAKpE,iCAAuE;~~IAC5E1C~~,MAAM;IACNC,cAAc;IACdC,eAAe;IACfC,WAAW;IACXC,OAAO;IACPC,OAAO;IACPC,sBAAsB;IACtBC,iBAAiB;IACjBC,YAAY;IACZC,aAAa;IACbC,oBAAoB;IACpBC,OAAO;IACPC,SAAS;IACTC,gBAAgB;IAChBC,YAAY;IACZC,OAAO;IACPC,iBAAiB;AACnB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAY1B,qBAAAA,EAAW;IAC3BS,MAAM;QACJ,GAAGN,4BAAAA,CAAiBwB,KAAK;QACzBC,SAAS;QACTC,OAAO;QACPC,QAAQ;QACRC,eAAe;QACfC,UAAU;QACVC,WAAW;IACb;IACAvB,cAAc;QACZwB,UAAU;~~QACVF~~,UAAU;IACZ;IACArB,eAAe;QACbuB,UAAU;QACVL,OAAO;QACPC,QAAQ;IACV;IACAlB,eAAWN,wBAAAA;IACXgB,oBAAgBhB,wBAAAA;IAChBO,OAAO;QACL,UAAU;~~YACRsB~~,~~MAAMjC~~,kBAAAA,~~CAAOkC~~,uBAAuB;YACpC,~~GAAGjC~~,4BAAAA,~~CAAiBkC~~,cAAc;YAClCC,mBAAmB;QACrB;QACA,UAAU;YACRC,SAAS;YACTC,~~QAAQtC~~,kBAAAA,~~CAAOkC~~,uBAAuB;~~YACtCP~~,OAAO;~~YACPS~~,mBAAmB;QACrB;QACA,UAAU;~~YACRV~~,SAAS;QACX;IACF;IACAd,OAAO;QACL,UAAU;YACR,GAAGX,4BAAAA,~~CAAiBkC~~,cAAc;YAClCF,~~MAAMjC~~,kBAAAA,~~CAAOkC~~,uBAAuB;YACpCE,mBAAmB;QACrB;QACA,UAAU;YACRC,SAAS;YACTC,~~QAAQtC~~,kBAAAA,~~CAAOkC~~,uBAAuB;YACtCE,mBAAmB;QACrB;QACA,UAAU;~~YACRV~~,SAAS;QACX;IACF;~~IACAa~~,KAAK;QACH,OAAO;YACLC,YAAY;QACd;IACF;IACAC,KAAK,CAAC;~~IACN5B~~,sBAAsB;~~QACpBwB~~,SAAS;QACTK,QAAQ;IACV;~~IACA5B~~,iBAAiB;~~QACf6B~~,~~WAAW3C~~,kBAAAA,~~CAAO4C~~,gBAAgB;QAClCC,~~YAAY7C~~,kBAAAA,~~CAAO8C~~,mBAAmB;IACxC;~~IACA/B~~,YAAY;~~QACVkB~~,~~MAAMjC~~,kBAAAA,~~CAAO+C~~,uBAAuB;QACpC,~~CAAC7C~~,+BAAAA,CAAqB,EAAE;~~YACtB+B~~,MAAM;QACR;IACF;~~IACAV~~,iBAAiB;~~QACfyB~~,eAAe;IACjB;~~IACA7B~~,aAASd,sBAAAA;AACX;AAKO,gCAAgC,~~CAAC6C~~;QAI+BA,~~eAGjEA~~,oBACAA,gBAqBmFA,gBAWjCA;~~IAvCtD~~,MAAMC,~~cAAUhD~~,iBAAAA;IAChB,~~MAAMiD~~,~~aAAa5B~~;IACnB,OAAO;QACLjB,UAAMR,mBAAAA,EAAaO,yBAAyBC,IAAI,~~EAAE6C~~,~~WAAW7C~~,IAAI,EAAA,~~CAAE2C~~,gBAAAA,MAAMG,~~MAAAA~~,~~AAAM~~,~~MAAA~~,QAAZH,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,~~cAAc3C~~,IAAI;QACrFC,kBAAcT,mBAAAA,EACZO,yBAAyBE,YAAY,~~EACrC0C~~,CAAAA,CAAAA,qBAAAA,MAAMI,WAAAA,AAAW,MAAA,QAAjBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmBK,IAAAA,AAAI,MAAK,cAAcH,~~WAAW5C~~,~~YAAY~~,~~GAAG~~,~~IAAA~~,~~CACpE0C~~,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,~~eAAc1C~~,YAAY;QAE5BC,mBAAeV,mBAAAA,EACbO,yBAAyBG,aAAa,~~EACtC2C~~,~~WAAW3C~~,aAAa,CAAC,6BAA6B;QAExDC,~~WAAWX~~,~~uBAAAA~~,EAAaO,yBAAyBI,SAAS,~~EAAE0C~~,~~WAAW1C~~,SAAS,CAAC,yBAAyB;QAC1GC,WAAOZ,mBAAAA,EAAaO,yBAAyBK,KAAK,~~EAAEyC~~,~~WAAWzC~~,KAAK,CAAC,qBAAqB;QAC1FC,WAAOb,mBAAAA,EACLO,yBAAyBM,KAAK,~~EAC9BwC~~,~~WAAWxC~~,KAAK,~~EAChBuC~~,UAAUC,WAAWb,GAAG,GAAGa,WAAWX,GAAG,CAAC,qBAAqB;~~QAEjE5B~~,0BAAsBd,mBAAAA,EACpBO,yBAAyBO,oBAAoB,~~EAC7CuC~~,~~WAAWvC~~,oBAAoB,CAAC,oCAAoC;QAEtEC,~~iBAAiBf~~,~~uBAAAA~~,EACfO,yBAAyBQ,eAAe,~~EACxCsC~~,~~WAAWtC~~,eAAe,CAAC,+BAA+B;QAE5DC,gBAAYhB,mBAAAA,EAAaO,yBAAyBS,UAAU,~~EAAEqC~~,~~WAAWrC~~,UAAU,EAAA,~~CAAEmC~~,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,~~eAAcnC~~,UAAU;QAC7GQ,qBAAiBxB,mBAAAA,EACfO,yBAAyBiB,eAAe,~~EACxC6B~~,~~WAAW7B~~,eAAe,CAAC,+BAA+B;QAE5DJ,SAASpB,uBAAAA,EAAaO,yBAAyBa,OAAO,~~EAAEiC~~,~~WAAWjC~~,OAAO,CAAC,uBAAuB;QAClGC,oBAAgBrB,mBAAAA,EACdO,yBAAyBc,cAAc,~~EACvCgC~~,~~WAAWhC~~,cAAc;QAG3BE,WAAOvB,mBAAAA,EAAaO,yBAAyBgB,KAAK,EAAA,~~CAAE4B~~,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,~~eAAc5B~~,KAAK;IACzE;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/CommonComponents/useCartesianChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { CartesianChartProps, CartesianChartStyles } from './CartesianChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\n\n/*\n @internal\n /\nexport const cartesianchartClassNames: SlotClassNames<CartesianChartStyles> = {\n root: 'fui-cart__root',\n chartWrapper: 'fui-cart__chartWrapper',\n plotContainer: 'fui-cart__plotContainer',\n axisTitle: 'fui-cart__axisTitle',\n xAxis: 'fui-cart__xAxis',\n yAxis: 'fui-cart__yAxis',\n opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n legendContainer: 'fui-cart__legendContainer',\n svgTooltip: 'fui-cart_svgTooltip',\n shapeStyles: 'fui-cart__shapeStyles',\n descriptionMessage: 'fui-cart__descriptionMessage',\n hover: 'fui-cart__hover',\n tooltip: 'fui-cart__tooltip',\n axisAnnotation: 'fui-cart__axisAnnotation',\n chartTitle: 'fui-cart__chartTitle',\n chart: 'fui-cart__chart',\n annotationLayer: 'fui-cart__annotationLayer',\n};\n\n/\n Base Styles\n /\nconst useStyles = makeStyles({\n root: {\n ...typographyStyles.body1,\n display: 'flex',\n width: '100%',\n height: '100%',\n flexDirection: 'column',\n overflow: 'hidden',\n textAlign: 'left',\n },\n chartWrapper: {\n position: 'relative',\n },\n chartWrapperMinWidth: {\n overflow: 'auto',\n },\n plotContainer: {\n position: 'relative',\n width: '100%',\n height: '100%',\n },\n axisTitle: getAxisTitleStyle() as GriffelStyle,\n axisAnnotation: getAxisTitleStyle() as GriffelStyle,\n xAxis: {\n '& text': {\n fill: tokens.colorNeutralForeground1,\n ...typographyStyles.caption2Strong,\n forcedColorAdjust: 'auto',\n },\n '& line': {\n opacity: 0.2,\n stroke: tokens.colorNeutralForeground1,\n width: '1px',\n forcedColorAdjust: 'auto',\n },\n '& path': {\n display: 'none',\n },\n },\n yAxis: {\n '& text': {\n ...typographyStyles.caption2Strong,\n fill: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto',\n },\n '& line': {\n opacity: 0.2,\n stroke: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto',\n },\n '& path': {\n display: 'none',\n },\n },\n rtl: {\n '& g': {\n textAnchor: 'end',\n },\n },\n ltr: {},\n opacityChangeOnHover: {\n opacity: '0.1', //supports custom opacity ??\n cursor: 'default', //supports custom cursor ??\n },\n legendContainer: {\n marginTop: tokens.spacingVerticalS,\n marginLeft: tokens.spacingHorizontalXL,\n },\n svgTooltip: {\n fill: tokens.colorNeutralBackground1,\n [HighContrastSelector]: {\n fill: 'Canvas',\n },\n },\n annotationLayer: {\n pointerEvents: 'none',\n },\n tooltip: getTooltipStyle() as GriffelStyle,\n});\n/\n \n * Apply styling to the Carousel slots based on the state\n /\nexport const useCartesianChartStyles = (props: CartesianChartProps): CartesianChartStyles => {\n const _useRtl = useRtl();\n const baseStyles = useStyles();\n return {\n root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, props.styles?.root),\n chartWrapper: mergeClasses(\n cartesianchartClassNames.chartWrapper,\n baseStyles.chartWrapper,\n props.reflowProps?.mode === 'min-width' ? baseStyles.chartWrapperMinWidth : undefined,\n props.styles?.chartWrapper,\n ),\n plotContainer: mergeClasses(\n cartesianchartClassNames.plotContainer,\n baseStyles.plotContainer /props.styles?.plotContainer/,\n ),\n axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /props.styles?.axisTitle/),\n xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /props.styles?.xAxis/),\n yAxis: mergeClasses(\n cartesianchartClassNames.yAxis,\n baseStyles.yAxis,\n _useRtl ? baseStyles.rtl : baseStyles.ltr /props.styles?.yAxis/,\n ),\n opacityChangeOnHover: mergeClasses(\n cartesianchartClassNames.opacityChangeOnHover,\n baseStyles.opacityChangeOnHover /props.styles?.opacityChangeOnHover/,\n ),\n legendContainer: mergeClasses(\n cartesianchartClassNames.legendContainer,\n baseStyles.legendContainer /props.styles?.legendContainer/,\n ),\n svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, props.styles?.svgTooltip),\n annotationLayer: mergeClasses(\n cartesianchartClassNames.annotationLayer,\n baseStyles.annotationLayer /props.styles?.annotationLayer/,\n ),\n tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /props.styles?.tooltip/),\n axisAnnotation: mergeClasses(\n cartesianchartClassNames.axisAnnotation,\n baseStyles.axisAnnotation,\n /props.styles?.axisAnnotation,*/\n ),\n chart: mergeClasses(cartesianchartClassNames.chart, props.styles?.chart),\n };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","plotContainer","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","annotationLayer","useStyles","body1","display","width","height","flexDirection","overflow","textAlign","position","chartWrapperMinWidth","fill","colorNeutralForeground1","caption2Strong","forcedColorAdjust","opacity","stroke","rtl","textAnchor","ltr","cursor","marginTop","spacingVerticalS","marginLeft","spacingHorizontalXL","colorNeutralBackground1","pointerEvents","useCartesianChartStyles","props","_useRtl","baseStyles","styles","reflowProps","mode","undefined"],"mappings":"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"}

package/lib-commonjs/components/CommonComponents/useChartPopoverStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useChartPopoverStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/*\n @internal\n / export const popoverClassNames = {\n calloutContentRoot: 'fui-cart__calloutContentRoot',\n calloutDateTimeContainer: 'fui-cart__calloutDateTimeContainer',\n calloutContentX: 'fui-cart__calloutContentX',\n calloutBlockContainer: 'fui-cart__calloutBlockContainer',\n calloutBlockContainertoDrawShapefalse: 'fui-cart__calloutBlockContainertoDrawShapefalse',\n calloutBlockContainertoDrawShapetrue: 'fui-cart__calloutBlockContainertoDrawShapetrue',\n shapeStyles: 'fui-cart__shapeStyles',\n calloutlegendText: 'fui-cart__calloutlegendText',\n calloutContentY: 'fui-cart__calloutContentY',\n descriptionMessage: 'fui-cart__descriptionMessage',\n ratio: 'fui-cart__ratio',\n numerator: 'fui-cart__numerator',\n denominator: 'fui-cart__denominator',\n calloutInfoContainer: 'fui-cart__calloutInfoContainer',\n calloutContainer: 'fui-cart__calloutContainer'\n};\n/\n Base Styles\n / const useStyles = makeStyles({\n calloutContentRoot: {\n display: 'grid',\n overflow: 'hidden',\n // TODO: Confirm this style is needed. Shorthands are not used correctly, therefore this style has no effect.\n // ...shorthands.padding('11px 16px 10px 16px'),\n backgroundColor: tokens.colorNeutralBackground1,\n backgroundBlendMode: 'normal, luminosity'\n },\n calloutDateTimeContainer: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between'\n },\n calloutContentX: {\n ...typographyStyles.caption1,\n opacity: '0.8',\n color: tokens.colorNeutralForeground2\n },\n calloutBlockContainer: {\n color: tokens.colorNeutralForeground2,\n textAlign: 'left'\n },\n calloutBlockContainerCartesian: {\n ...typographyStyles.caption1,\n forcedColorAdjust: 'none'\n },\n calloutBlockContainerNonCartesian: {\n fontSize: tokens.fontSizeHero700,\n lineHeight: '22px',\n forcedColorAdjust: 'none'\n },\n calloutBlockContainertoDrawShapefalse: {\n paddingLeft: tokens.spacingHorizontalS,\n forcedColorAdjust: 'none'\n },\n calloutBlockContainertoDrawShapetrue: {\n display: 'inline-grid'\n },\n shapeStyles: {\n marginRight: tokens.spacingHorizontalS\n },\n calloutLegendText: {\n ...typographyStyles.caption1,\n color: tokens.colorNeutralForeground2,\n forcedColorAdjust: 'auto',\n marginBottom: tokens.spacingVerticalXS\n },\n calloutContentY: {\n forcedColorAdjust: 'auto'\n },\n calloutContentYCartesian: {\n ...typographyStyles.subtitle2Stronger\n },\n calloutContentYNonCartesian: {\n ...typographyStyles.title2\n },\n descriptionMessage: {\n ...typographyStyles.caption1,\n color: tokens.colorNeutralForeground2,\n marginTop: tokens.spacingVerticalMNudge,\n paddingTop: tokens.spacingVerticalMNudge,\n borderTop: `1px solid ${tokens.colorNeutralStroke2}`\n },\n ratio: {\n ...typographyStyles.caption2,\n marginLeft: tokens.spacingHorizontalSNudge,\n color: tokens.colorNeutralForeground1\n },\n numerator: {\n ...typographyStyles.caption2Strong\n },\n denominator: {\n ...typographyStyles.caption2Strong\n },\n calloutInfoContainer: {\n paddingLeft: tokens.spacingHorizontalS,\n forcedColorAdjust: 'none'\n },\n calloutContainer: {}\n});\n/\n Apply styling to the Carousel slots based on the state\n / export const usePopoverStyles_unstable = (props)=>{\n var _props_styles;\n const { isCartesian } = props;\n const baseStyles = useStyles();\n return {\n calloutContentRoot: mergeClasses(popoverClassNames.calloutContentRoot, baseStyles.calloutContentRoot, (_props_styles = props.styles) === null \|\| _props_styles === void 0 ? void 0 : _props_styles.calloutContentRoot),\n calloutDateTimeContainer: mergeClasses(popoverClassNames.calloutDateTimeContainer, baseStyles.calloutDateTimeContainer /props.styles?.calloutDateTimeContainer/ ),\n calloutContentX: mergeClasses(popoverClassNames.calloutContentX, baseStyles.calloutContentX /props.styles?.calloutContentX/ ),\n calloutBlockContainer: mergeClasses(popoverClassNames.calloutBlockContainer, baseStyles.calloutBlockContainer /props.styles?.calloutBlockContainerCartesian/ , isCartesian ? baseStyles.calloutBlockContainerCartesian : baseStyles.calloutBlockContainerNonCartesian),\n calloutBlockContainertoDrawShapefalse: mergeClasses(popoverClassNames.calloutBlockContainertoDrawShapefalse, baseStyles.calloutBlockContainertoDrawShapefalse /props.styles?.calloutBlockContainertoDrawShapefalse/ ),\n calloutBlockContainertoDrawShapetrue: mergeClasses(popoverClassNames.calloutBlockContainertoDrawShapetrue, baseStyles.calloutBlockContainertoDrawShapetrue /props.styles?.calloutBlockContainertoDrawShapetrue/ ),\n shapeStyles: mergeClasses(popoverClassNames.shapeStyles, baseStyles.shapeStyles /props.styles?.shapeStyles/ ),\n calloutlegendText: mergeClasses(popoverClassNames.calloutlegendText, baseStyles.calloutLegendText /props.styles?.calloutlegendText/ ),\n calloutContentY: mergeClasses(popoverClassNames.calloutContentY, baseStyles.calloutContentY /props.styles?.calloutContentYNonCartesian/ , isCartesian ? baseStyles.calloutContentYCartesian : baseStyles.calloutContentYNonCartesian),\n descriptionMessage: mergeClasses(popoverClassNames.descriptionMessage, baseStyles.descriptionMessage /props.styles?. descriptionMessage/ ),\n ratio: mergeClasses(popoverClassNames.ratio, baseStyles.ratio /props.styles?.ratio/ ),\n numerator: mergeClasses(popoverClassNames.numerator, baseStyles.numerator /props.styles?.numerator/ ),\n denominator: mergeClasses(popoverClassNames.denominator, baseStyles.denominator /props.styles?.denominator*/ ),\n calloutInfoContainer: mergeClasses(popoverClassNames.calloutInfoContainer, baseStyles.calloutInfoContainer),\n calloutContainer: mergeClasses(popoverClassNames.calloutContainer, baseStyles.calloutContainer)\n };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","popoverClassNames","calloutContentRoot","calloutDateTimeContainer","calloutContentX","calloutBlockContainer","calloutBlockContainertoDrawShapefalse","calloutBlockContainertoDrawShapetrue","shapeStyles","calloutlegendText","calloutContentY","descriptionMessage","ratio","numerator","denominator","calloutInfoContainer","calloutContainer","useStyles","mc9l5x","B68tc82","Bmxbyg5","Bpg54ce","De3pzq","jy2i9i","Beiy3e4","Brf1p80","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","abs64n","sj55zd","fsow6f","calloutBlockContainerCartesian","Bvjb7m6","calloutBlockContainerNonCartesian","uwmqm3","t21cq0","calloutLegendText","jrapky","calloutContentYCartesian","calloutContentYNonCartesian","B6of3ja","z8tnut","g2u3we","icvyot","B4j52fo","i8vvqc","Frg6f3","d","p","usePopoverStyles_unstable","props","_props_styles","isCartesian","baseStyles","styles"],"mappings":"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"}
1	+ {"version":3,"sources":["useChartPopoverStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/*\n @internal\n / export const popoverClassNames = {\n calloutContentRoot: 'fui-cart__calloutContentRoot',\n calloutDateTimeContainer: 'fui-cart__calloutDateTimeContainer',\n calloutContentX: 'fui-cart__calloutContentX',\n calloutBlockContainer: 'fui-cart__calloutBlockContainer',\n calloutBlockContainertoDrawShapefalse: 'fui-cart__calloutBlockContainertoDrawShapefalse',\n calloutBlockContainertoDrawShapetrue: 'fui-cart__calloutBlockContainertoDrawShapetrue',\n shapeStyles: 'fui-cart__shapeStyles',\n calloutlegendText: 'fui-cart__calloutlegendText',\n calloutContentY: 'fui-cart__calloutContentY',\n descriptionMessage: 'fui-cart__descriptionMessage',\n ratio: 'fui-cart__ratio',\n numerator: 'fui-cart__numerator',\n denominator: 'fui-cart__denominator',\n calloutInfoContainer: 'fui-cart__calloutInfoContainer',\n calloutContainer: 'fui-cart__calloutContainer'\n};\n/\n Base Styles\n / const useStyles = makeStyles({\n calloutContentRoot: {\n display: 'grid',\n overflow: 'hidden',\n backgroundColor: tokens.colorNeutralBackground1,\n backgroundBlendMode: 'normal, luminosity'\n },\n calloutDateTimeContainer: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between'\n },\n calloutContentX: {\n ...typographyStyles.caption1,\n opacity: '0.8',\n color: tokens.colorNeutralForeground2\n },\n calloutBlockContainer: {\n color: tokens.colorNeutralForeground2,\n textAlign: 'left'\n },\n calloutBlockContainerCartesian: {\n ...typographyStyles.caption1,\n forcedColorAdjust: 'none'\n },\n calloutBlockContainerNonCartesian: {\n fontSize: tokens.fontSizeHero700,\n lineHeight: '22px',\n forcedColorAdjust: 'none'\n },\n calloutBlockContainertoDrawShapefalse: {\n paddingLeft: tokens.spacingHorizontalS,\n forcedColorAdjust: 'none'\n },\n calloutBlockContainertoDrawShapetrue: {\n display: 'inline-grid'\n },\n shapeStyles: {\n marginRight: tokens.spacingHorizontalS\n },\n calloutLegendText: {\n ...typographyStyles.caption1,\n color: tokens.colorNeutralForeground2,\n forcedColorAdjust: 'auto',\n marginBottom: tokens.spacingVerticalXS\n },\n calloutContentY: {\n forcedColorAdjust: 'auto'\n },\n calloutContentYCartesian: {\n ...typographyStyles.subtitle2Stronger\n },\n calloutContentYNonCartesian: {\n ...typographyStyles.title2\n },\n descriptionMessage: {\n ...typographyStyles.caption1,\n color: tokens.colorNeutralForeground2,\n marginTop: tokens.spacingVerticalMNudge,\n paddingTop: tokens.spacingVerticalMNudge,\n borderTop: `1px solid ${tokens.colorNeutralStroke2}`\n },\n ratio: {\n ...typographyStyles.caption2,\n marginLeft: tokens.spacingHorizontalSNudge,\n color: tokens.colorNeutralForeground1\n },\n numerator: {\n ...typographyStyles.caption2Strong\n },\n denominator: {\n ...typographyStyles.caption2Strong\n },\n calloutInfoContainer: {\n paddingLeft: tokens.spacingHorizontalS,\n forcedColorAdjust: 'none'\n },\n calloutContainer: {}\n});\n/\n Apply styling to the Carousel slots based on the state\n / export const usePopoverStyles_unstable = (props)=>{\n var _props_styles;\n const { isCartesian } = props;\n const baseStyles = useStyles();\n return {\n calloutContentRoot: mergeClasses(popoverClassNames.calloutContentRoot, baseStyles.calloutContentRoot, (_props_styles = props.styles) === null \|\| _props_styles === void 0 ? void 0 : _props_styles.calloutContentRoot),\n calloutDateTimeContainer: mergeClasses(popoverClassNames.calloutDateTimeContainer, baseStyles.calloutDateTimeContainer /props.styles?.calloutDateTimeContainer/ ),\n calloutContentX: mergeClasses(popoverClassNames.calloutContentX, baseStyles.calloutContentX /props.styles?.calloutContentX/ ),\n calloutBlockContainer: mergeClasses(popoverClassNames.calloutBlockContainer, baseStyles.calloutBlockContainer /props.styles?.calloutBlockContainerCartesian/ , isCartesian ? baseStyles.calloutBlockContainerCartesian : baseStyles.calloutBlockContainerNonCartesian),\n calloutBlockContainertoDrawShapefalse: mergeClasses(popoverClassNames.calloutBlockContainertoDrawShapefalse, baseStyles.calloutBlockContainertoDrawShapefalse /props.styles?.calloutBlockContainertoDrawShapefalse/ ),\n calloutBlockContainertoDrawShapetrue: mergeClasses(popoverClassNames.calloutBlockContainertoDrawShapetrue, baseStyles.calloutBlockContainertoDrawShapetrue /props.styles?.calloutBlockContainertoDrawShapetrue/ ),\n shapeStyles: mergeClasses(popoverClassNames.shapeStyles, baseStyles.shapeStyles /props.styles?.shapeStyles/ ),\n calloutlegendText: mergeClasses(popoverClassNames.calloutlegendText, baseStyles.calloutLegendText /props.styles?.calloutlegendText/ ),\n calloutContentY: mergeClasses(popoverClassNames.calloutContentY, baseStyles.calloutContentY /props.styles?.calloutContentYNonCartesian/ , isCartesian ? baseStyles.calloutContentYCartesian : baseStyles.calloutContentYNonCartesian),\n descriptionMessage: mergeClasses(popoverClassNames.descriptionMessage, baseStyles.descriptionMessage /props.styles?. descriptionMessage/ ),\n ratio: mergeClasses(popoverClassNames.ratio, baseStyles.ratio /props.styles?.ratio/ ),\n numerator: mergeClasses(popoverClassNames.numerator, baseStyles.numerator /props.styles?.numerator/ ),\n denominator: mergeClasses(popoverClassNames.denominator, baseStyles.denominator /props.styles?.denominator*/ ),\n calloutInfoContainer: mergeClasses(popoverClassNames.calloutInfoContainer, baseStyles.calloutInfoContainer),\n calloutContainer: mergeClasses(popoverClassNames.calloutContainer, baseStyles.calloutContainer)\n };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","popoverClassNames","calloutContentRoot","calloutDateTimeContainer","calloutContentX","calloutBlockContainer","calloutBlockContainertoDrawShapefalse","calloutBlockContainertoDrawShapetrue","shapeStyles","calloutlegendText","calloutContentY","descriptionMessage","ratio","numerator","denominator","calloutInfoContainer","calloutContainer","useStyles","mc9l5x","B68tc82","Bmxbyg5","Bpg54ce","De3pzq","jy2i9i","Beiy3e4","Brf1p80","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","abs64n","sj55zd","fsow6f","calloutBlockContainerCartesian","Bvjb7m6","calloutBlockContainerNonCartesian","uwmqm3","t21cq0","calloutLegendText","jrapky","calloutContentYCartesian","calloutContentYNonCartesian","B6of3ja","z8tnut","g2u3we","icvyot","B4j52fo","i8vvqc","Frg6f3","d","p","usePopoverStyles_unstable","props","_props_styles","isCartesian","baseStyles","styles"],"mappings":"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"}

package/lib-commonjs/components/CommonComponents/useChartPopoverStyles.styles.raw.js CHANGED Viewed

@@ -42,8 +42,6 @@ const popoverClassNames = {
     calloutContentRoot: {
         display: 'grid',
         overflow: 'hidden',
-        // TODO: Confirm this style is needed. Shorthands are not used correctly, therefore this style has no effect.
-        // ...shorthands.padding('11px 16px 10px 16px'),
         backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
         backgroundBlendMode: 'normal, luminosity'
     },

package/lib-commonjs/components/CommonComponents/useChartPopoverStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CommonComponents/useChartPopoverStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { ChartPopoverProps, PopoverComponentStyles } from './ChartPopover.types';\n\n/*\n @internal\n /\nexport const popoverClassNames: SlotClassNames<PopoverComponentStyles> = {\n calloutContentRoot: 'fui-cart__calloutContentRoot',\n calloutDateTimeContainer: 'fui-cart__calloutDateTimeContainer',\n calloutContentX: 'fui-cart__calloutContentX',\n calloutBlockContainer: 'fui-cart__calloutBlockContainer',\n calloutBlockContainertoDrawShapefalse: 'fui-cart__calloutBlockContainertoDrawShapefalse',\n calloutBlockContainertoDrawShapetrue: 'fui-cart__calloutBlockContainertoDrawShapetrue',\n shapeStyles: 'fui-cart__shapeStyles',\n calloutlegendText: 'fui-cart__calloutlegendText',\n calloutContentY: 'fui-cart__calloutContentY',\n descriptionMessage: 'fui-cart__descriptionMessage',\n ratio: 'fui-cart__ratio',\n numerator: 'fui-cart__numerator',\n denominator: 'fui-cart__denominator',\n calloutInfoContainer: 'fui-cart__calloutInfoContainer',\n calloutContainer: 'fui-cart__calloutContainer',\n};\n\n/\n Base Styles\n /\nconst useStyles = makeStyles({\n calloutContentRoot: {\n display: 'grid',\n overflow: 'hidden',\n // TODO: Confirm this style is needed. Shorthands are not used correctly, therefore this style has no effect.\n // ...shorthands.padding('11px 16px 10px 16px'),\n backgroundColor: tokens.colorNeutralBackground1,\n backgroundBlendMode: 'normal, luminosity',\n },\n calloutDateTimeContainer: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n },\n calloutContentX: {\n ...typographyStyles.caption1,\n opacity: '0.8',\n color: tokens.colorNeutralForeground2,\n },\n calloutBlockContainer: {\n color: tokens.colorNeutralForeground2,\n textAlign: 'left',\n },\n calloutBlockContainerCartesian: {\n ...typographyStyles.caption1,\n forcedColorAdjust: 'none',\n },\n calloutBlockContainerNonCartesian: {\n fontSize: tokens.fontSizeHero700,\n lineHeight: '22px',\n forcedColorAdjust: 'none',\n },\n calloutBlockContainertoDrawShapefalse: {\n paddingLeft: tokens.spacingHorizontalS,\n forcedColorAdjust: 'none',\n },\n calloutBlockContainertoDrawShapetrue: { display: 'inline-grid' },\n shapeStyles: {\n marginRight: tokens.spacingHorizontalS,\n },\n calloutLegendText: {\n ...typographyStyles.caption1,\n color: tokens.colorNeutralForeground2,\n forcedColorAdjust: 'auto',\n marginBottom: tokens.spacingVerticalXS,\n },\n calloutContentY: {\n forcedColorAdjust: 'auto',\n },\n calloutContentYCartesian: {\n ...typographyStyles.subtitle2Stronger,\n },\n calloutContentYNonCartesian: {\n ...typographyStyles.title2,\n },\n descriptionMessage: {\n ...typographyStyles.caption1,\n color: tokens.colorNeutralForeground2,\n marginTop: tokens.spacingVerticalMNudge,\n paddingTop: tokens.spacingVerticalMNudge,\n borderTop: `1px solid ${tokens.colorNeutralStroke2}`,\n },\n ratio: {\n ...typographyStyles.caption2,\n marginLeft: tokens.spacingHorizontalSNudge,\n color: tokens.colorNeutralForeground1,\n },\n numerator: {\n ...typographyStyles.caption2Strong,\n },\n denominator: {\n ...typographyStyles.caption2Strong,\n },\n calloutInfoContainer: {\n paddingLeft: tokens.spacingHorizontalS,\n forcedColorAdjust: 'none',\n },\n calloutContainer: {},\n});\n/\n Apply styling to the Carousel slots based on the state\n /\nexport const usePopoverStyles_unstable = (props: ChartPopoverProps): PopoverComponentStyles => {\n const { isCartesian } = props;\n const baseStyles = useStyles();\n return {\n calloutContentRoot: mergeClasses(\n popoverClassNames.calloutContentRoot,\n baseStyles.calloutContentRoot,\n props.styles?.calloutContentRoot,\n ),\n calloutDateTimeContainer: mergeClasses(\n popoverClassNames.calloutDateTimeContainer,\n baseStyles.calloutDateTimeContainer /props.styles?.calloutDateTimeContainer/,\n ),\n calloutContentX: mergeClasses(\n popoverClassNames.calloutContentX,\n baseStyles.calloutContentX /props.styles?.calloutContentX/,\n ),\n calloutBlockContainer: mergeClasses(\n popoverClassNames.calloutBlockContainer,\n baseStyles.calloutBlockContainer /props.styles?.calloutBlockContainerCartesian/,\n isCartesian ? baseStyles.calloutBlockContainerCartesian : baseStyles.calloutBlockContainerNonCartesian,\n ),\n calloutBlockContainertoDrawShapefalse: mergeClasses(\n popoverClassNames.calloutBlockContainertoDrawShapefalse,\n baseStyles.calloutBlockContainertoDrawShapefalse /props.styles?.calloutBlockContainertoDrawShapefalse/,\n ),\n calloutBlockContainertoDrawShapetrue: mergeClasses(\n popoverClassNames.calloutBlockContainertoDrawShapetrue,\n baseStyles.calloutBlockContainertoDrawShapetrue /props.styles?.calloutBlockContainertoDrawShapetrue/,\n ),\n shapeStyles: mergeClasses(popoverClassNames.shapeStyles, baseStyles.shapeStyles /props.styles?.shapeStyles/),\n calloutlegendText: mergeClasses(\n popoverClassNames.calloutlegendText,\n baseStyles.calloutLegendText /props.styles?.calloutlegendText/,\n ),\n calloutContentY: mergeClasses(\n popoverClassNames.calloutContentY,\n baseStyles.calloutContentY /props.styles?.calloutContentYNonCartesian/,\n isCartesian ? baseStyles.calloutContentYCartesian : baseStyles.calloutContentYNonCartesian,\n ),\n descriptionMessage: mergeClasses(\n popoverClassNames.descriptionMessage,\n baseStyles.descriptionMessage /props.styles?. descriptionMessage/,\n ),\n ratio: mergeClasses(popoverClassNames.ratio, baseStyles.ratio /props.styles?.ratio/),\n numerator: mergeClasses(popoverClassNames.numerator, baseStyles.numerator /props.styles?.numerator/),\n denominator: mergeClasses(popoverClassNames.denominator, baseStyles.denominator /props.styles?.denominator*/),\n calloutInfoContainer: mergeClasses(popoverClassNames.calloutInfoContainer, baseStyles.calloutInfoContainer),\n calloutContainer: mergeClasses(popoverClassNames.calloutContainer, baseStyles.calloutContainer),\n };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","popoverClassNames","calloutContentRoot","calloutDateTimeContainer","calloutContentX","calloutBlockContainer","calloutBlockContainertoDrawShapefalse","calloutBlockContainertoDrawShapetrue","shapeStyles","calloutlegendText","calloutContentY","descriptionMessage","ratio","numerator","denominator","calloutInfoContainer","calloutContainer","useStyles","display","overflow","backgroundColor","colorNeutralBackground1","backgroundBlendMode","flexDirection","justifyContent","caption1","opacity","color","colorNeutralForeground2","textAlign","calloutBlockContainerCartesian","forcedColorAdjust","calloutBlockContainerNonCartesian","fontSize","fontSizeHero700","lineHeight","paddingLeft","spacingHorizontalS","marginRight","calloutLegendText","marginBottom","spacingVerticalXS","calloutContentYCartesian","subtitle2Stronger","calloutContentYNonCartesian","title2","marginTop","spacingVerticalMNudge","paddingTop","borderTop","colorNeutralStroke2","caption2","marginLeft","spacingHorizontalSNudge","colorNeutralForeground1","caption2Strong","usePopoverStyles_unstable","props","isCartesian","baseStyles","styles"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/CommonComponents/useChartPopoverStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { ChartPopoverProps, PopoverComponentStyles } from './ChartPopover.types';\n\n/*\n @internal\n /\nexport const popoverClassNames: SlotClassNames<PopoverComponentStyles> = {\n calloutContentRoot: 'fui-cart__calloutContentRoot',\n calloutDateTimeContainer: 'fui-cart__calloutDateTimeContainer',\n calloutContentX: 'fui-cart__calloutContentX',\n calloutBlockContainer: 'fui-cart__calloutBlockContainer',\n calloutBlockContainertoDrawShapefalse: 'fui-cart__calloutBlockContainertoDrawShapefalse',\n calloutBlockContainertoDrawShapetrue: 'fui-cart__calloutBlockContainertoDrawShapetrue',\n shapeStyles: 'fui-cart__shapeStyles',\n calloutlegendText: 'fui-cart__calloutlegendText',\n calloutContentY: 'fui-cart__calloutContentY',\n descriptionMessage: 'fui-cart__descriptionMessage',\n ratio: 'fui-cart__ratio',\n numerator: 'fui-cart__numerator',\n denominator: 'fui-cart__denominator',\n calloutInfoContainer: 'fui-cart__calloutInfoContainer',\n calloutContainer: 'fui-cart__calloutContainer',\n};\n\n/\n Base Styles\n /\nconst useStyles = makeStyles({\n calloutContentRoot: {\n display: 'grid',\n overflow: 'hidden',\n backgroundColor: tokens.colorNeutralBackground1,\n backgroundBlendMode: 'normal, luminosity',\n },\n calloutDateTimeContainer: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n },\n calloutContentX: {\n ...typographyStyles.caption1,\n opacity: '0.8',\n color: tokens.colorNeutralForeground2,\n },\n calloutBlockContainer: {\n color: tokens.colorNeutralForeground2,\n textAlign: 'left',\n },\n calloutBlockContainerCartesian: {\n ...typographyStyles.caption1,\n forcedColorAdjust: 'none',\n },\n calloutBlockContainerNonCartesian: {\n fontSize: tokens.fontSizeHero700,\n lineHeight: '22px',\n forcedColorAdjust: 'none',\n },\n calloutBlockContainertoDrawShapefalse: {\n paddingLeft: tokens.spacingHorizontalS,\n forcedColorAdjust: 'none',\n },\n calloutBlockContainertoDrawShapetrue: { display: 'inline-grid' },\n shapeStyles: {\n marginRight: tokens.spacingHorizontalS,\n },\n calloutLegendText: {\n ...typographyStyles.caption1,\n color: tokens.colorNeutralForeground2,\n forcedColorAdjust: 'auto',\n marginBottom: tokens.spacingVerticalXS,\n },\n calloutContentY: {\n forcedColorAdjust: 'auto',\n },\n calloutContentYCartesian: {\n ...typographyStyles.subtitle2Stronger,\n },\n calloutContentYNonCartesian: {\n ...typographyStyles.title2,\n },\n descriptionMessage: {\n ...typographyStyles.caption1,\n color: tokens.colorNeutralForeground2,\n marginTop: tokens.spacingVerticalMNudge,\n paddingTop: tokens.spacingVerticalMNudge,\n borderTop: `1px solid ${tokens.colorNeutralStroke2}`,\n },\n ratio: {\n ...typographyStyles.caption2,\n marginLeft: tokens.spacingHorizontalSNudge,\n color: tokens.colorNeutralForeground1,\n },\n numerator: {\n ...typographyStyles.caption2Strong,\n },\n denominator: {\n ...typographyStyles.caption2Strong,\n },\n calloutInfoContainer: {\n paddingLeft: tokens.spacingHorizontalS,\n forcedColorAdjust: 'none',\n },\n calloutContainer: {},\n});\n/\n Apply styling to the Carousel slots based on the state\n /\nexport const usePopoverStyles_unstable = (props: ChartPopoverProps): PopoverComponentStyles => {\n const { isCartesian } = props;\n const baseStyles = useStyles();\n return {\n calloutContentRoot: mergeClasses(\n popoverClassNames.calloutContentRoot,\n baseStyles.calloutContentRoot,\n props.styles?.calloutContentRoot,\n ),\n calloutDateTimeContainer: mergeClasses(\n popoverClassNames.calloutDateTimeContainer,\n baseStyles.calloutDateTimeContainer /props.styles?.calloutDateTimeContainer/,\n ),\n calloutContentX: mergeClasses(\n popoverClassNames.calloutContentX,\n baseStyles.calloutContentX /props.styles?.calloutContentX/,\n ),\n calloutBlockContainer: mergeClasses(\n popoverClassNames.calloutBlockContainer,\n baseStyles.calloutBlockContainer /props.styles?.calloutBlockContainerCartesian/,\n isCartesian ? baseStyles.calloutBlockContainerCartesian : baseStyles.calloutBlockContainerNonCartesian,\n ),\n calloutBlockContainertoDrawShapefalse: mergeClasses(\n popoverClassNames.calloutBlockContainertoDrawShapefalse,\n baseStyles.calloutBlockContainertoDrawShapefalse /props.styles?.calloutBlockContainertoDrawShapefalse/,\n ),\n calloutBlockContainertoDrawShapetrue: mergeClasses(\n popoverClassNames.calloutBlockContainertoDrawShapetrue,\n baseStyles.calloutBlockContainertoDrawShapetrue /props.styles?.calloutBlockContainertoDrawShapetrue/,\n ),\n shapeStyles: mergeClasses(popoverClassNames.shapeStyles, baseStyles.shapeStyles /props.styles?.shapeStyles/),\n calloutlegendText: mergeClasses(\n popoverClassNames.calloutlegendText,\n baseStyles.calloutLegendText /props.styles?.calloutlegendText/,\n ),\n calloutContentY: mergeClasses(\n popoverClassNames.calloutContentY,\n baseStyles.calloutContentY /props.styles?.calloutContentYNonCartesian/,\n isCartesian ? baseStyles.calloutContentYCartesian : baseStyles.calloutContentYNonCartesian,\n ),\n descriptionMessage: mergeClasses(\n popoverClassNames.descriptionMessage,\n baseStyles.descriptionMessage /props.styles?. descriptionMessage/,\n ),\n ratio: mergeClasses(popoverClassNames.ratio, baseStyles.ratio /props.styles?.ratio/),\n numerator: mergeClasses(popoverClassNames.numerator, baseStyles.numerator /props.styles?.numerator/),\n denominator: mergeClasses(popoverClassNames.denominator, baseStyles.denominator /props.styles?.denominator*/),\n calloutInfoContainer: mergeClasses(popoverClassNames.calloutInfoContainer, baseStyles.calloutInfoContainer),\n calloutContainer: mergeClasses(popoverClassNames.calloutContainer, baseStyles.calloutContainer),\n };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","popoverClassNames","calloutContentRoot","calloutDateTimeContainer","calloutContentX","calloutBlockContainer","calloutBlockContainertoDrawShapefalse","calloutBlockContainertoDrawShapetrue","shapeStyles","calloutlegendText","calloutContentY","descriptionMessage","ratio","numerator","denominator","calloutInfoContainer","calloutContainer","useStyles","display","overflow","backgroundColor","colorNeutralBackground1","backgroundBlendMode","flexDirection","justifyContent","caption1","opacity","color","colorNeutralForeground2","textAlign","calloutBlockContainerCartesian","forcedColorAdjust","calloutBlockContainerNonCartesian","fontSize","fontSizeHero700","lineHeight","paddingLeft","spacingHorizontalS","marginRight","calloutLegendText","marginBottom","spacingVerticalXS","calloutContentYCartesian","subtitle2Stronger","calloutContentYNonCartesian","title2","marginTop","spacingVerticalMNudge","paddingTop","borderTop","colorNeutralStroke2","caption2","marginLeft","spacingHorizontalSNudge","colorNeutralForeground1","caption2Strong","usePopoverStyles_unstable","props","isCartesian","baseStyles","styles"],"mappings":"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"}

package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js CHANGED Viewed

@@ -34,6 +34,8 @@ const _index10 = require("../GanttChart/index");
 const _withResponsiveContainer = require("../ResponsiveContainer/withResponsiveContainer");
 const _index11 = require("../ChartTable/index");
 const _index12 = require("../Legends/index");
+const _index13 = require("../../utilities/index");
+const _imageexportutils = require("../../utilities/image-export-utils");
 const ResponsiveDonutChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index.DonutChart);
 const ResponsiveVerticalStackedBarChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index1.VerticalStackedBarChart);
 const ResponsiveLineChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index2.LineChart);
@@ -190,8 +192,11 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef(({ colorwayType = 'defa
     let { selectedLegends } = plotlySchema;
     const colorMap = useColorMapping();
     const isDarkTheme = useIsDarkTheme();
-    const chartRef = _react.useRef(null);
+    const chartRefs = _react.useRef([]);
     const isMultiPlot = _react.useRef(false);
+    const legendsRef = _react.useRef(null);
+    const containerRef = _react.useRef(null);
+    const isRTL = (0, _index13.useRtl)();
     if (!(0, _chartutilities.isArrayOrTypedArray)(selectedLegends)) {
         selectedLegends = [];
     }
@@ -221,11 +226,7 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef(({ colorwayType = 'defa
         onChange: onActiveLegendsChange,
         selectedLegends: activeLegends
     };
-    const baseCommonProps = {
-        componentRef: chartRef
-    };
     const interactiveCommonProps = {
-        ...baseCommonProps,
         legendProps: multiSelectLegendProps
     };
     function createLegends(legendProps) {
@@ -233,25 +234,38 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef(({ colorwayType = 'defa
         return /*#__PURE__*/ _react.createElement(_index12.Legends, {
             ...legendProps,
             selectedLegends: activeLegends,
-            onChange: onActiveLegendsChange
+            onChange: onActiveLegendsChange,
+            legendRef: legendsRef
         });
     }
-    // TODO
-    const exportAsImage = _react.useCallback((opts)=>{
-        return new Promise((resolve, reject)=>{
-            if (isMultiPlot.current) {
-                return reject(Error('Exporting multi plot charts as image is not supported'));
-            }
-            if (!chartRef.current || typeof chartRef.current.toImage !== 'function') {
-                return reject(Error('Chart cannot be exported as image'));
+    const exportAsImage = _react.useCallback(async (opts)=>{
+        var _legendsRef_current;
+        if (!containerRef.current) {
+            throw new Error('Container reference is null');
+        }
+        const imgExpOpts = {
+            background: (0, _index13.resolveCSSVariables)(containerRef.current, _reacttheme.tokens.colorNeutralBackground1),
+            scale: 5,
+            ...opts
+        };
+        if (!isMultiPlot.current) {
+            var _chartRefs_current__compRef, _chartRefs_current_;
+            if (!((_chartRefs_current_ = chartRefs.current[0]) === null || _chartRefs_current_ === void 0 ? void 0 : (_chartRefs_current__compRef = _chartRefs_current_.compRef) === null || _chartRefs_current__compRef === void 0 ? void 0 : _chartRefs_current__compRef.toImage)) {
+                throw new Error('Chart cannot be exported as image');
             }
-            chartRef.current.toImage({
-                background: _reacttheme.tokens.colorNeutralBackground1,
-                scale: 5,
-                ...opts
-            }).then(resolve).catch(reject);
-        });
-    }, []);
+            return chartRefs.current[0].compRef.toImage(imgExpOpts);
+        }
+        return (0, _imageexportutils.exportChartsAsImage)(chartRefs.current.map((item)=>{
+            var _item_compRef;
+            return {
+                container: (_item_compRef = item.compRef) === null || _item_compRef === void 0 ? void 0 : _item_compRef.chartContainer,
+                row: item.row,
+                col: item.col
+            };
+        }), (_legendsRef_current = legendsRef.current) === null || _legendsRef_current === void 0 ? void 0 : _legendsRef_current.toSVG, isRTL, imgExpOpts);
+    }, [
+        isRTL
+    ]);
     _react.useImperativeHandle(props.componentRef, ()=>({
             exportAsImage
         }), [
@@ -325,8 +339,9 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef(({ colorwayType = 'defa
             display: 'grid',
             gridTemplateRows: gridProperties.templateRows,
             gridTemplateColumns: gridProperties.templateColumns
-        }
-    }, Object.entries(groupedTraces).map(([xAxisKey, index])=>{
+        },
+        ref: containerRef
+    }, Object.entries(groupedTraces).map(([xAxisKey, index], chartIdx)=>{
         var _filteredTracesInfo_;
         const plotlyInputForGroup = {
             ...plotlyInputWithValidData,
@@ -344,7 +359,7 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef(({ colorwayType = 'defa
             if (preTransformCondition === undefined || preTransformCondition(plotlyInputForGroup)) {
                 const transformedInput = preTransformOperation ? preTransformOperation(plotlyInputForGroup) : plotlyInputForGroup;
                 const cellProperties = gridProperties.layout[xAxisKey];
-                const resolvedCommonProps = chartType === 'annotation' ? baseCommonProps : {
+                const resolvedCommonProps = chartType === 'annotation' ? {} : {
                     ...interactiveCommonProps,
                     xAxisAnnotation: cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.xAnnotation,
                     yAxisAnnotation: cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.yAnnotation
@@ -359,7 +374,15 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef(({ colorwayType = 'defa
                 ], {
                     ...resolvedCommonProps,
                     xAxisAnnotation: cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.xAnnotation,
-                    yAxisAnnotation: cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.yAnnotation
+                    yAxisAnnotation: cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.yAnnotation,
+                    componentRef: (ref)=>{
+                        var _cellProperties_row, _cellProperties_column;
+                        chartRefs.current[chartIdx] = {
+                            compRef: ref,
+                            row: (_cellProperties_row = cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.row) !== null && _cellProperties_row !== void 0 ? _cellProperties_row : 1,
+                            col: (_cellProperties_column = cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.column) !== null && _cellProperties_column !== void 0 ? _cellProperties_column : 1
+                        };
+                    }
                 }, (_cellProperties_row = cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.row) !== null && _cellProperties_row !== void 0 ? _cellProperties_row : 1, (_cellProperties_column = cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.column) !== null && _cellProperties_column !== void 0 ? _cellProperties_column : 1);
             }
             return /*#__PURE__*/ _react.createElement(_react.Fragment, null);