npm - @fluentui/react-charts - Versions diffs - 0.0.0-nightly-20260109-0406.1 → 0.0.0-nightly-20260113-0406.1 - Mend

@fluentui/react-charts 0.0.0-nightly-20260109-0406.1 → 0.0.0-nightly-20260113-0406.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (173) hide show

package/lib-commonjs/PolarChart.js ADDED Viewed

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

package/lib-commonjs/PolarChart.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"sources":["../src/PolarChart.ts"],"sourcesContent":["export * from './components/PolarChart/index';\n"],"names":[],"mappings":";;;;;uBAAc,gCAAgC"}

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

@@ -199,7 +199,8 @@ const AnnotationOnlyChart = (props)=>{
         role: "presentation"
     }, hasAnnotations ? /*#__PURE__*/ _react.createElement(_ChartAnnotationLayer.ChartAnnotationLayer, {
         annotations: resolvedAnnotations,
-        context: context
+        context: context,
+        hideDefaultStyles: true
     }) : null)))));
 };
 AnnotationOnlyChart.displayName = 'AnnotationOnlyChart';

package/lib-commonjs/components/AnnotationOnlyChart/AnnotationOnlyChart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AnnotationOnlyChart/AnnotationOnlyChart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChartAnnotationLayer } from '../CommonComponents/Annotations/ChartAnnotationLayer';\nimport { useRtl } from '../../utilities';\nimport { useAnnotationOnlyChartStyles } from './useAnnotationOnlyChartStyles.styles';\nimport type { AnnotationOnlyChartProps } from './AnnotationOnlyChart.types';\nimport type { ChartAnnotationContext } from '../CommonComponents/Annotations/ChartAnnotationLayer.types';\nimport { useImageExport } from '../../utilities/hooks';\n\nconst DEFAULT_HEIGHT = 650;\nconst FALLBACK_WIDTH = 400;\n\nconst buildPadding = (margin: AnnotationOnlyChartProps['margin']): string \| undefined => {\n if (!margin) {\n return undefined;\n }\n\n const top = margin.t ?? 0;\n const right = margin.r ?? 0;\n const bottom = margin.b ?? 0;\n const left = margin.l ?? 0;\n\n if (top === 0 && right === 0 && bottom === 0 && left === 0) {\n return undefined;\n }\n\n return `${top}px ${right}px ${bottom}px ${left}px`;\n};\n\nexport const AnnotationOnlyChart: React.FC<AnnotationOnlyChartProps> = props => {\n const {\n annotations,\n chartTitle,\n description,\n width,\n height,\n paperBackgroundColor,\n plotBackgroundColor,\n fontColor,\n fontFamily,\n margin,\n componentRef,\n } = props;\n\n const isRtl = useRtl();\n const classes = useAnnotationOnlyChartStyles();\n const { chartContainerRef: containerRef } = useImageExport(componentRef, true, false);\n const contentRef = React.useRef<HTMLDivElement \| null>(null);\n const [measuredWidth, setMeasuredWidth] = React.useState<number>(width ?? 0);\n const [contentHeight, setContentHeight] = React.useState<number>(height ?? DEFAULT_HEIGHT);\n\n React.useEffect(() => {\n if (typeof width === 'number' && width > 0) {\n setMeasuredWidth(width);\n return;\n }\n\n const node = containerRef.current;\n if (!node \|\| typeof ResizeObserver === 'undefined') {\n const rect = node?.getBoundingClientRect();\n if (rect && rect.width > 0) {\n setMeasuredWidth(rect.width);\n } else {\n setMeasuredWidth(prev => (prev > 0 ? prev : FALLBACK_WIDTH));\n }\n return;\n }\n\n const observer = new ResizeObserver(entries => {\n const entry = entries[0];\n if (!entry) {\n return;\n }\n const newWidth = entry.contentRect.width;\n if (newWidth > 0 && Math.abs(newWidth - measuredWidth) > 0.5) {\n setMeasuredWidth(newWidth);\n }\n });\n\n const rect = node.getBoundingClientRect();\n if (rect.width > 0) {\n setMeasuredWidth(rect.width);\n }\n\n observer.observe(node);\n return () => observer.disconnect();\n }, [width, measuredWidth]);\n\n const resolvedWidth = Math.max(measuredWidth \|\| FALLBACK_WIDTH, 1);\n const resolvedHeight = Math.max(height ?? DEFAULT_HEIGHT, 1);\n\n React.useEffect(() => {\n const node = contentRef.current;\n if (!node) {\n setContentHeight(prev => (prev > 0 ? prev : resolvedHeight));\n return;\n }\n\n if (typeof ResizeObserver === 'undefined') {\n const rect = node.getBoundingClientRect();\n setContentHeight(prev => (rect.height > 0 ? rect.height : prev > 0 ? prev : resolvedHeight));\n return;\n }\n\n const observer = new ResizeObserver(entries => {\n const entry = entries[0];\n if (!entry) {\n return;\n }\n\n const newHeight = entry.contentRect.height;\n if (newHeight > 0) {\n setContentHeight(prev => (Math.abs(prev - newHeight) > 0.5 ? newHeight : prev));\n }\n });\n\n const rect = node.getBoundingClientRect();\n setContentHeight(prev => (rect.height > 0 ? rect.height : prev > 0 ? prev : resolvedHeight));\n\n observer.observe(node);\n return () => observer.disconnect();\n }, [\n resolvedHeight,\n resolvedWidth,\n annotations,\n chartTitle,\n description,\n margin,\n plotBackgroundColor,\n paperBackgroundColor,\n fontColor,\n fontFamily,\n ]);\n\n const svgHeight = Math.max(Math.ceil(contentHeight \|\| 0), resolvedHeight);\n\n const context: ChartAnnotationContext = {\n plotRect: { x: 0, y: 0, width: resolvedWidth, height: resolvedHeight },\n svgRect: { width: resolvedWidth, height: resolvedHeight },\n isRtl,\n };\n\n const padding = buildPadding(margin);\n\n // Inline styles for dynamic values that can't be in makeStyles\n const rootStyle: React.CSSProperties = React.useMemo(\n () => ({\n width: width ? `${width}px` : '100%',\n minHeight: resolvedHeight,\n ...(paperBackgroundColor && { backgroundColor: paperBackgroundColor }),\n ...(fontColor && { color: fontColor }),\n ...(fontFamily && { fontFamily }),\n ...(padding && { padding }),\n }),\n [fontColor, fontFamily, paperBackgroundColor, padding, resolvedHeight, width],\n );\n\n const contentStyle: React.CSSProperties = React.useMemo(\n () => ({\n ...(plotBackgroundColor && { backgroundColor: plotBackgroundColor }),\n }),\n [plotBackgroundColor],\n );\n\n const resolvedAnnotations = annotations ?? [];\n const hasAnnotations = resolvedAnnotations.length > 0;\n const ariaLabel = hasAnnotations ? description ?? chartTitle : undefined;\n\n return (\n <div ref={containerRef} data-chart-annotation-container=\"true\">\n <svg\n width={resolvedWidth}\n height={svgHeight}\n viewBox={`0 0 ${resolvedWidth} ${svgHeight}`}\n style={{ width: width ? `${width}px` : '100%', height: `${svgHeight}px`, display: 'block' }}\n role={ariaLabel ? 'img' : undefined}\n aria-label={ariaLabel}\n >\n <foreignObject x={0} y={0} width={resolvedWidth} height={svgHeight}>\n <div\n ref={contentRef}\n className={classes.root}\n style={rootStyle}\n data-chart-annotation-only=\"true\"\n aria-label={ariaLabel}\n >\n {chartTitle && (\n <span className={classes.title} aria-hidden=\"true\">\n {chartTitle}\n </span>\n )}\n <div className={classes.content} style={contentStyle} role=\"presentation\">\n {hasAnnotations ? <ChartAnnotationLayer annotations={resolvedAnnotations} context={context} /> : null}\n </div>\n </div>\n </foreignObject>\n </svg>\n </div>\n );\n};\n\nAnnotationOnlyChart.displayName = 'AnnotationOnlyChart';\n"],"names":["React","ChartAnnotationLayer","useRtl","useAnnotationOnlyChartStyles","useImageExport","DEFAULT_HEIGHT","FALLBACK_WIDTH","buildPadding","margin","undefined","top","t","right","r","bottom","b","left","l","AnnotationOnlyChart","props","annotations","chartTitle","description","width","height","paperBackgroundColor","plotBackgroundColor","fontColor","fontFamily","componentRef","isRtl","classes","chartContainerRef","containerRef","contentRef","useRef","measuredWidth","setMeasuredWidth","useState","contentHeight","setContentHeight","useEffect","node","current","ResizeObserver","rect","getBoundingClientRect","prev","observer","entries","entry","newWidth","contentRect","Math","abs","observe","disconnect","resolvedWidth","max","resolvedHeight","newHeight","svgHeight","ceil","context","plotRect","x","y","svgRect","padding","rootStyle","useMemo","minHeight","backgroundColor","color","contentStyle","resolvedAnnotations","hasAnnotations","length","ariaLabel","div","ref","data-chart-annotation-container","svg","viewBox","style","display","role","aria-label","foreignObject","className","root","data-chart-annotation-only","span","title","aria-hidden","content","displayName"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/AnnotationOnlyChart/AnnotationOnlyChart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChartAnnotationLayer } from '../CommonComponents/Annotations/ChartAnnotationLayer';\nimport { useRtl } from '../../utilities';\nimport { useAnnotationOnlyChartStyles } from './useAnnotationOnlyChartStyles.styles';\nimport type { AnnotationOnlyChartProps } from './AnnotationOnlyChart.types';\nimport type { ChartAnnotationContext } from '../CommonComponents/Annotations/ChartAnnotationLayer.types';\nimport { useImageExport } from '../../utilities/hooks';\n\nconst DEFAULT_HEIGHT = 650;\nconst FALLBACK_WIDTH = 400;\n\nconst buildPadding = (margin: AnnotationOnlyChartProps['margin']): string \| undefined => {\n if (!margin) {\n return undefined;\n }\n\n const top = margin.t ?? 0;\n const right = margin.r ?? 0;\n const bottom = margin.b ?? 0;\n const left = margin.l ?? 0;\n\n if (top === 0 && right === 0 && bottom === 0 && left === 0) {\n return undefined;\n }\n\n return `${top}px ${right}px ${bottom}px ${left}px`;\n};\n\nexport const AnnotationOnlyChart: React.FC<AnnotationOnlyChartProps> = props => {\n const {\n annotations,\n chartTitle,\n description,\n width,\n height,\n paperBackgroundColor,\n plotBackgroundColor,\n fontColor,\n fontFamily,\n margin,\n componentRef,\n } = props;\n\n const isRtl = useRtl();\n const classes = useAnnotationOnlyChartStyles();\n const { chartContainerRef: containerRef } = useImageExport(componentRef, true, false);\n const contentRef = React.useRef<HTMLDivElement \| null>(null);\n const [measuredWidth, setMeasuredWidth] = React.useState<number>(width ?? 0);\n const [contentHeight, setContentHeight] = React.useState<number>(height ?? DEFAULT_HEIGHT);\n\n React.useEffect(() => {\n if (typeof width === 'number' && width > 0) {\n setMeasuredWidth(width);\n return;\n }\n\n const node = containerRef.current;\n if (!node \|\| typeof ResizeObserver === 'undefined') {\n const rect = node?.getBoundingClientRect();\n if (rect && rect.width > 0) {\n setMeasuredWidth(rect.width);\n } else {\n setMeasuredWidth(prev => (prev > 0 ? prev : FALLBACK_WIDTH));\n }\n return;\n }\n\n const observer = new ResizeObserver(entries => {\n const entry = entries[0];\n if (!entry) {\n return;\n }\n const newWidth = entry.contentRect.width;\n if (newWidth > 0 && Math.abs(newWidth - measuredWidth) > 0.5) {\n setMeasuredWidth(newWidth);\n }\n });\n\n const rect = node.getBoundingClientRect();\n if (rect.width > 0) {\n setMeasuredWidth(rect.width);\n }\n\n observer.observe(node);\n return () => observer.disconnect();\n }, [width, measuredWidth]);\n\n const resolvedWidth = Math.max(measuredWidth \|\| FALLBACK_WIDTH, 1);\n const resolvedHeight = Math.max(height ?? DEFAULT_HEIGHT, 1);\n\n React.useEffect(() => {\n const node = contentRef.current;\n if (!node) {\n setContentHeight(prev => (prev > 0 ? prev : resolvedHeight));\n return;\n }\n\n if (typeof ResizeObserver === 'undefined') {\n const rect = node.getBoundingClientRect();\n setContentHeight(prev => (rect.height > 0 ? rect.height : prev > 0 ? prev : resolvedHeight));\n return;\n }\n\n const observer = new ResizeObserver(entries => {\n const entry = entries[0];\n if (!entry) {\n return;\n }\n\n const newHeight = entry.contentRect.height;\n if (newHeight > 0) {\n setContentHeight(prev => (Math.abs(prev - newHeight) > 0.5 ? newHeight : prev));\n }\n });\n\n const rect = node.getBoundingClientRect();\n setContentHeight(prev => (rect.height > 0 ? rect.height : prev > 0 ? prev : resolvedHeight));\n\n observer.observe(node);\n return () => observer.disconnect();\n }, [\n resolvedHeight,\n resolvedWidth,\n annotations,\n chartTitle,\n description,\n margin,\n plotBackgroundColor,\n paperBackgroundColor,\n fontColor,\n fontFamily,\n ]);\n\n const svgHeight = Math.max(Math.ceil(contentHeight \|\| 0), resolvedHeight);\n\n const context: ChartAnnotationContext = {\n plotRect: { x: 0, y: 0, width: resolvedWidth, height: resolvedHeight },\n svgRect: { width: resolvedWidth, height: resolvedHeight },\n isRtl,\n };\n\n const padding = buildPadding(margin);\n\n // Inline styles for dynamic values that can't be in makeStyles\n const rootStyle: React.CSSProperties = React.useMemo(\n () => ({\n width: width ? `${width}px` : '100%',\n minHeight: resolvedHeight,\n ...(paperBackgroundColor && { backgroundColor: paperBackgroundColor }),\n ...(fontColor && { color: fontColor }),\n ...(fontFamily && { fontFamily }),\n ...(padding && { padding }),\n }),\n [fontColor, fontFamily, paperBackgroundColor, padding, resolvedHeight, width],\n );\n\n const contentStyle: React.CSSProperties = React.useMemo(\n () => ({\n ...(plotBackgroundColor && { backgroundColor: plotBackgroundColor }),\n }),\n [plotBackgroundColor],\n );\n\n const resolvedAnnotations = annotations ?? [];\n const hasAnnotations = resolvedAnnotations.length > 0;\n const ariaLabel = hasAnnotations ? description ?? chartTitle : undefined;\n\n return (\n <div ref={containerRef} data-chart-annotation-container=\"true\">\n <svg\n width={resolvedWidth}\n height={svgHeight}\n viewBox={`0 0 ${resolvedWidth} ${svgHeight}`}\n style={{ width: width ? `${width}px` : '100%', height: `${svgHeight}px`, display: 'block' }}\n role={ariaLabel ? 'img' : undefined}\n aria-label={ariaLabel}\n >\n <foreignObject x={0} y={0} width={resolvedWidth} height={svgHeight}>\n <div\n ref={contentRef}\n className={classes.root}\n style={rootStyle}\n data-chart-annotation-only=\"true\"\n aria-label={ariaLabel}\n >\n {chartTitle && (\n <span className={classes.title} aria-hidden=\"true\">\n {chartTitle}\n </span>\n )}\n <div className={classes.content} style={contentStyle} role=\"presentation\">\n {hasAnnotations ? (\n <ChartAnnotationLayer annotations={resolvedAnnotations} context={context} hideDefaultStyles={true} />\n ) : null}\n </div>\n </div>\n </foreignObject>\n </svg>\n </div>\n );\n};\n\nAnnotationOnlyChart.displayName = 'AnnotationOnlyChart';\n"],"names":["React","ChartAnnotationLayer","useRtl","useAnnotationOnlyChartStyles","useImageExport","DEFAULT_HEIGHT","FALLBACK_WIDTH","buildPadding","margin","undefined","top","t","right","r","bottom","b","left","l","AnnotationOnlyChart","props","annotations","chartTitle","description","width","height","paperBackgroundColor","plotBackgroundColor","fontColor","fontFamily","componentRef","isRtl","classes","chartContainerRef","containerRef","contentRef","useRef","measuredWidth","setMeasuredWidth","useState","contentHeight","setContentHeight","useEffect","node","current","ResizeObserver","rect","getBoundingClientRect","prev","observer","entries","entry","newWidth","contentRect","Math","abs","observe","disconnect","resolvedWidth","max","resolvedHeight","newHeight","svgHeight","ceil","context","plotRect","x","y","svgRect","padding","rootStyle","useMemo","minHeight","backgroundColor","color","contentStyle","resolvedAnnotations","hasAnnotations","length","ariaLabel","div","ref","data-chart-annotation-container","svg","viewBox","style","display","role","aria-label","foreignObject","className","root","data-chart-annotation-only","span","title","aria-hidden","content","hideDefaultStyles","displayName"],"mappings":"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"}

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

@@ -16,6 +16,7 @@ const _reacttheme = require("@fluentui/react-theme");
 const _d3color = /*#__PURE__*/ _interop_require_wildcard._(require("d3-color"));
 const _colors = require("../../utilities/colors");
 const _utilities = require("../../utilities/utilities");
+const _index = require("../../utilities/index");
 const _hooks = require("../../utilities/hooks");
 const _reacttabster = require("@fluentui/react-tabster");
 function invertHexColor(hex) {
@@ -48,7 +49,7 @@ function getSafeBackgroundColor(chartContainer, foreground, background) {
     return invertedContrast >= 3 ? invertedBg : fallbackBg;
 }
 const ChartTable = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
-    const { headers, rows, width, height } = props;
+    const { headers, rows, width, height, chartTitle } = props;
     const { chartContainerRef: _rootElem } = (0, _hooks.useImageExport)(props.componentRef, true, false);
     const classes = (0, _useChartTableStylesstyles.useChartTableStyles)(props);
     const arrowAttributes = (0, _reacttabster.useArrowNavigationGroup)({
@@ -89,23 +90,36 @@ const ChartTable = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             }
         }
     }
+    const titleHeight = chartTitle ? 30 : 0;
+    const totalHeight = typeof height === 'number' ? height : 650;
+    const tableHeight = `${totalHeight - titleHeight}px`;
+    const svgWidth = typeof width === 'number' ? width : '100%';
+    const titleMaxWidth = typeof width === 'number' ? width - 20 : undefined;
+    const titleX = typeof width === 'number' ? width / 2 : 0;
     return /*#__PURE__*/ _react.createElement("div", {
         ref: (el)=>{
             _rootElem.current = el;
         },
         className: classes.root,
         style: {
-            height: height ? `${height}px` : '650px',
+            height: `${totalHeight}px`,
             overflow: 'hidden'
         }
     }, /*#__PURE__*/ _react.createElement("svg", {
-        width: width !== null && width !== void 0 ? width : '100%',
-        height: height !== null && height !== void 0 ? height : '650px'
-    }, /*#__PURE__*/ _react.createElement("foreignObject", {
+        width: svgWidth,
+        height: `${totalHeight}px`
+    }, chartTitle && /*#__PURE__*/ _react.createElement(_index.ChartTitle, {
+        title: chartTitle,
+        x: titleX,
+        maxWidth: titleMaxWidth,
+        className: classes.chartTitle,
+        titleStyles: props.titleStyles,
+        tooltipClassName: classes.svgTooltip
+    }), /*#__PURE__*/ _react.createElement("foreignObject", {
         x: "0",
-        y: "0",
+        y: titleHeight,
         width: "100%",
-        height: "100%"
+        height: tableHeight
     }, /*#__PURE__*/ _react.createElement("div", {
         style: {
             maxHeight: height ? `${height}px` : '650px',

package/lib-commonjs/components/ChartTable/ChartTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ChartTable/ChartTable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChartTableProps } from './ChartTable.types';\nimport { useChartTableStyles } from './useChartTableStyles.styles';\nimport { tokens } from '@fluentui/react-theme';\nimport * as d3 from 'd3-color';\nimport { getColorContrast } from '../../utilities/colors';\nimport { resolveCSSVariables } from '../../utilities/utilities';\nimport { useImageExport } from '../../utilities/hooks';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\nfunction invertHexColor(hex: string): string {\n const color = d3.color(hex);\n if (!color) {\n return tokens.colorNeutralForeground1!;\n }\n const rgb = color.rgb();\n return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();\n}\n\nfunction getSafeBackgroundColor(chartContainer: HTMLElement, foreground?: string, background?: string): string {\n const fallbackFg = tokens.colorNeutralForeground1;\n const fallbackBg = tokens.colorNeutralBackground1;\n if (!chartContainer) {\n return fallbackBg;\n }\n\n const resolvedFg = resolveCSSVariables(chartContainer, foreground \|\| fallbackFg);\n const resolvedBg = resolveCSSVariables(chartContainer, background \|\| fallbackBg);\n\n const fg = d3.color(resolvedFg);\n const bg = d3.color(resolvedBg);\n\n if (!fg \|\| !bg) {\n return resolvedBg;\n }\n const contrast = getColorContrast(fg.formatHex(), bg.formatHex());\n if (contrast >= 3) {\n return bg.formatHex();\n }\n\n const invertedBg = invertHexColor(bg.formatHex());\n const invertedContrast = getColorContrast(fg.formatHex(), invertedBg);\n return invertedContrast >= 3 ? invertedBg : fallbackBg;\n}\n\nexport const ChartTable: React.FunctionComponent<ChartTableProps> = React.forwardRef<HTMLDivElement, ChartTableProps>(\n (props, forwardedRef) => {\n const { headers, rows, width, height } = props;\n const { chartContainerRef: _rootElem } = useImageExport(props.componentRef, true, false);\n const classes = useChartTableStyles(props);\n const arrowAttributes = useArrowNavigationGroup({ axis: 'grid' });\n\n if (!headers \|\| headers.length === 0) {\n return <div>No data available</div>;\n }\n\n const bgColorSet = new Set<string>();\n headers.forEach(header => {\n const bg = header?.style?.backgroundColor;\n const normalized = d3.color(bg \|\| '')?.formatHex();\n if (normalized) {\n bgColorSet.add(normalized);\n }\n });\n let sharedBackgroundColor: string \| undefined;\n let useSharedBackground = false;\n\n /\n If we have only one or two unique background colors, we can consider using a shared background color\n for the table headers. This is to ensure better contrast with the foreground text.\n For size 1, we will consider that as default color if it satisfies the contrast ratio.\n There could also be a scenario where backgroundcolor array is of size 2, for eg: [\"dimsgray\", \"gray\"],\n which will assign 1st column header bg color to dimsgray and rest to gray. so our logic of shared background\n color won't run here. So will consider for size 2 as well.\n For size greater than this, we will consider that user wants different colors and will let color contrast fail\n if any.\n /\n if (bgColorSet.size === 1 \|\| bgColorSet.size === 2) {\n const candidateBg = bgColorSet.size === 1 ? Array.from(bgColorSet)[0] : Array.from(bgColorSet)[1];\n for (const header of headers) {\n const fg = header?.style?.color;\n if (fg && getColorContrast(fg, candidateBg) >= 3) {\n sharedBackgroundColor = candidateBg;\n useSharedBackground = true;\n break;\n }\n }\n }\n\n return (\n <div\n ref={el => {\n _rootElem.current = el;\n }}\n className={classes.root as string}\n style={{ height: height ? `${height}px` : '650px', overflow: 'hidden' }}\n >\n <svg width={width ?? '100%'} height={height ?? '650px'}>\n <foreignObject x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <div\n style={{\n maxHeight: height ? `${height}px` : '650px',\n overflowY: 'auto',\n overflowX: 'auto',\n }}\n >\n <table\n className={classes.table}\n style={{\n width: width ? `${width}px` : '100%',\n }}\n {...arrowAttributes}\n >\n <thead>\n <tr>\n {headers.map((header, idx) => {\n const style = { ...header?.style };\n const fg = style.color;\n const bg = style.backgroundColor;\n\n if (useSharedBackground) {\n style.backgroundColor = sharedBackgroundColor;\n } else if (fg \|\| bg) {\n style.backgroundColor = getSafeBackgroundColor(_rootElem.current!, fg, bg);\n }\n return (\n <th key={idx} className={classes.headerCell} style={style} tabIndex={0}>\n {header.value}\n </th>\n );\n })}\n </tr>\n </thead>\n {rows && rows.length > 0 && (\n <tbody>\n {rows.map((row, rowIdx) => (\n <tr key={rowIdx}>\n {row.map((cell, colIdx) => {\n const style = { ...cell?.style };\n const fg = style.color;\n const bg = style.backgroundColor;\n if (fg \|\| bg) {\n style.backgroundColor = getSafeBackgroundColor(_rootElem.current!, fg, bg);\n }\n return (\n <td key={colIdx} className={classes.bodyCell} style={style} tabIndex={0}>\n {cell.value}\n </td>\n );\n })}\n </tr>\n ))}\n </tbody>\n )}\n </table>\n </div>\n </foreignObject>\n </svg>\n </div>\n );\n },\n);\n\nChartTable.displayName = 'ChartTable';\n"],"names":["React","useChartTableStyles","tokens","d3","getColorContrast","resolveCSSVariables","useImageExport","useArrowNavigationGroup","invertHexColor","hex","color","colorNeutralForeground1","rgb","r","g","b","formatHex","getSafeBackgroundColor","chartContainer","foreground","background","fallbackFg","fallbackBg","colorNeutralBackground1","resolvedFg","resolvedBg","fg","bg","contrast","invertedBg","invertedContrast","ChartTable","forwardRef","props","forwardedRef","headers","rows","width","height","chartContainerRef","_rootElem","componentRef","classes","arrowAttributes","axis","length","div","bgColorSet","Set","forEach","header","style","backgroundColor","normalized","add","sharedBackgroundColor","useSharedBackground","size","candidateBg","Array","from","ref","el","current","className","root","overflow","svg","foreignObject","x","y","maxHeight","overflowY","overflowX","table","thead","tr","map","idx","th","key","headerCell","tabIndex","value","tbody","row","rowIdx","cell","colIdx","td","bodyCell","displayName"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/ChartTable/ChartTable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChartTableProps } from './ChartTable.types';\nimport { useChartTableStyles } from './useChartTableStyles.styles';\nimport { tokens } from '@fluentui/react-theme';\nimport * as d3 from 'd3-color';\nimport { getColorContrast } from '../../utilities/colors';\nimport { resolveCSSVariables } from '../../utilities/utilities';\nimport { ChartTitle } from '../../utilities/index';\nimport { useImageExport } from '../../utilities/hooks';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\nfunction invertHexColor(hex: string): string {\n const color = d3.color(hex);\n if (!color) {\n return tokens.colorNeutralForeground1!;\n }\n const rgb = color.rgb();\n return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();\n}\n\nfunction getSafeBackgroundColor(chartContainer: HTMLElement, foreground?: string, background?: string): string {\n const fallbackFg = tokens.colorNeutralForeground1;\n const fallbackBg = tokens.colorNeutralBackground1;\n if (!chartContainer) {\n return fallbackBg;\n }\n\n const resolvedFg = resolveCSSVariables(chartContainer, foreground \|\| fallbackFg);\n const resolvedBg = resolveCSSVariables(chartContainer, background \|\| fallbackBg);\n\n const fg = d3.color(resolvedFg);\n const bg = d3.color(resolvedBg);\n\n if (!fg \|\| !bg) {\n return resolvedBg;\n }\n const contrast = getColorContrast(fg.formatHex(), bg.formatHex());\n if (contrast >= 3) {\n return bg.formatHex();\n }\n\n const invertedBg = invertHexColor(bg.formatHex());\n const invertedContrast = getColorContrast(fg.formatHex(), invertedBg);\n return invertedContrast >= 3 ? invertedBg : fallbackBg;\n}\n\nexport const ChartTable: React.FunctionComponent<ChartTableProps> = React.forwardRef<HTMLDivElement, ChartTableProps>(\n (props, forwardedRef) => {\n const { headers, rows, width, height, chartTitle } = props;\n const { chartContainerRef: _rootElem } = useImageExport(props.componentRef, true, false);\n const classes = useChartTableStyles(props);\n const arrowAttributes = useArrowNavigationGroup({ axis: 'grid' });\n\n if (!headers \|\| headers.length === 0) {\n return <div>No data available</div>;\n }\n\n const bgColorSet = new Set<string>();\n headers.forEach(header => {\n const bg = header?.style?.backgroundColor;\n const normalized = d3.color(bg \|\| '')?.formatHex();\n if (normalized) {\n bgColorSet.add(normalized);\n }\n });\n let sharedBackgroundColor: string \| undefined;\n let useSharedBackground = false;\n\n /\n If we have only one or two unique background colors, we can consider using a shared background color\n for the table headers. This is to ensure better contrast with the foreground text.\n For size 1, we will consider that as default color if it satisfies the contrast ratio.\n There could also be a scenario where backgroundcolor array is of size 2, for eg: [\"dimsgray\", \"gray\"],\n which will assign 1st column header bg color to dimsgray and rest to gray. so our logic of shared background\n color won't run here. So will consider for size 2 as well.\n For size greater than this, we will consider that user wants different colors and will let color contrast fail\n if any.\n /\n if (bgColorSet.size === 1 \|\| bgColorSet.size === 2) {\n const candidateBg = bgColorSet.size === 1 ? Array.from(bgColorSet)[0] : Array.from(bgColorSet)[1];\n for (const header of headers) {\n const fg = header?.style?.color;\n if (fg && getColorContrast(fg, candidateBg) >= 3) {\n sharedBackgroundColor = candidateBg;\n useSharedBackground = true;\n break;\n }\n }\n }\n\n const titleHeight = chartTitle ? 30 : 0;\n const totalHeight = typeof height === 'number' ? height : 650;\n const tableHeight = `${totalHeight - titleHeight}px`;\n const svgWidth = typeof width === 'number' ? width : '100%';\n const titleMaxWidth = typeof width === 'number' ? width - 20 : undefined;\n const titleX = typeof width === 'number' ? width / 2 : 0;\n\n return (\n <div\n ref={el => {\n _rootElem.current = el;\n }}\n className={classes.root as string}\n style={{ height: `${totalHeight}px`, overflow: 'hidden' }}\n >\n <svg width={svgWidth} height={`${totalHeight}px`}>\n {chartTitle && (\n <ChartTitle\n title={chartTitle}\n x={titleX}\n maxWidth={titleMaxWidth}\n className={classes.chartTitle}\n titleStyles={props.titleStyles}\n tooltipClassName={classes.svgTooltip}\n />\n )}\n <foreignObject x=\"0\" y={titleHeight} width=\"100%\" height={tableHeight}>\n <div\n style={{\n maxHeight: height ? `${height}px` : '650px',\n overflowY: 'auto',\n overflowX: 'auto',\n }}\n >\n <table\n className={classes.table}\n style={{\n width: width ? `${width}px` : '100%',\n }}\n {...arrowAttributes}\n >\n <thead>\n <tr>\n {headers.map((header, idx) => {\n const style = { ...header?.style };\n const fg = style.color;\n const bg = style.backgroundColor;\n\n if (useSharedBackground) {\n style.backgroundColor = sharedBackgroundColor;\n } else if (fg \|\| bg) {\n style.backgroundColor = getSafeBackgroundColor(_rootElem.current!, fg, bg);\n }\n return (\n <th key={idx} className={classes.headerCell} style={style} tabIndex={0}>\n {header.value}\n </th>\n );\n })}\n </tr>\n </thead>\n {rows && rows.length > 0 && (\n <tbody>\n {rows.map((row, rowIdx) => (\n <tr key={rowIdx}>\n {row.map((cell, colIdx) => {\n const style = { ...cell?.style };\n const fg = style.color;\n const bg = style.backgroundColor;\n if (fg \|\| bg) {\n style.backgroundColor = getSafeBackgroundColor(_rootElem.current!, fg, bg);\n }\n return (\n <td key={colIdx} className={classes.bodyCell} style={style} tabIndex={0}>\n {cell.value}\n </td>\n );\n })}\n </tr>\n ))}\n </tbody>\n )}\n </table>\n </div>\n </foreignObject>\n </svg>\n </div>\n );\n },\n);\n\nChartTable.displayName = 'ChartTable';\n"],"names":["React","useChartTableStyles","tokens","d3","getColorContrast","resolveCSSVariables","ChartTitle","useImageExport","useArrowNavigationGroup","invertHexColor","hex","color","colorNeutralForeground1","rgb","r","g","b","formatHex","getSafeBackgroundColor","chartContainer","foreground","background","fallbackFg","fallbackBg","colorNeutralBackground1","resolvedFg","resolvedBg","fg","bg","contrast","invertedBg","invertedContrast","ChartTable","forwardRef","props","forwardedRef","headers","rows","width","height","chartTitle","chartContainerRef","_rootElem","componentRef","classes","arrowAttributes","axis","length","div","bgColorSet","Set","forEach","header","style","backgroundColor","normalized","add","sharedBackgroundColor","useSharedBackground","size","candidateBg","Array","from","titleHeight","totalHeight","tableHeight","svgWidth","titleMaxWidth","undefined","titleX","ref","el","current","className","root","overflow","svg","title","x","maxWidth","titleStyles","tooltipClassName","svgTooltip","foreignObject","y","maxHeight","overflowY","overflowX","table","thead","tr","map","idx","th","key","headerCell","tabIndex","value","tbody","row","rowIdx","cell","colIdx","td","bodyCell","displayName"],"mappings":"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"}

package/lib-commonjs/components/ChartTable/ChartTable.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ChartTable/ChartTable.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Chart } from './index';\n\n/*\n Chart Table properties\n * {@docCategory ChartTable}\n /\nexport interface ChartTableProps {\n /\n 1d or 2d Array of header values.\n /\n headers: { value: string \| number \| boolean \| null; style?: React.CSSProperties }[];\n\n /\n Array of rows. Each row corresponds to one data entry under each column.\n /\n rows: { value: string \| number \| boolean \| null; style?: React.CSSProperties }[][];\n\n /\n Optional width for the table\n * @default '100%'\n /\n width?: string \| number;\n\n /\n Optional height for the table\n * @default '650px'\n /\n height?: string \| number;\n\n /\n Additional class name(s) to apply to the table chart\n /\n className?: string;\n\n /\n Call to provide customized styling that will layer on top of the variant rules.\n /\n styles?: ChartTableStyles;\n\n /\n Optional callback to access the Chart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n /\n componentRef?: React.Ref<Chart>;\n}\n\n/\n Table Chart styles\n * {@docCategory ChartTable}\n */\nexport interface ChartTableStyles {\n root?: string \| React.CSSProperties;\n table?: string;\n headerCell?: string;\n bodyCell?: string;\n chart?: string;\n}\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
1	+ {"version":3,"sources":["../src/components/ChartTable/ChartTable.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TitleStyles } from '../../utilities/Common.styles';\nimport { Chart } from './index';\n\n/*\n Chart Table properties\n * {@docCategory ChartTable}\n /\nexport interface ChartTableProps {\n /\n Title styles configuration for the chart title\n /\n titleStyles?: TitleStyles;\n\n /\n 1d or 2d Array of header values.\n /\n headers: { value: string \| number \| boolean \| null; style?: React.CSSProperties }[];\n\n /\n Array of rows. Each row corresponds to one data entry under each column.\n /\n rows: { value: string \| number \| boolean \| null; style?: React.CSSProperties }[][];\n\n /\n Optional width for the table\n * @default '100%'\n /\n width?: string \| number;\n\n /\n Optional height for the table\n * @default '650px'\n /\n height?: string \| number;\n\n /\n Chart title to display above the table\n /\n chartTitle?: string;\n\n /\n Additional class name(s) to apply to the table chart\n /\n className?: string;\n\n /\n Call to provide customized styling that will layer on top of the variant rules.\n /\n styles?: ChartTableStyles;\n\n /\n Optional callback to access the Chart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n /\n componentRef?: React.Ref<Chart>;\n}\n\n/\n Table Chart styles\n * {@docCategory ChartTable}\n */\nexport interface ChartTableStyles {\n root?: string \| React.CSSProperties;\n table?: string;\n headerCell?: string;\n bodyCell?: string;\n chart?: string;\n chartTitle?: string;\n svgTooltip?: string;\n}\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

package/lib-commonjs/components/ChartTable/useChartTableStyles.styles.js CHANGED Viewed

@@ -23,7 +23,9 @@ const chartTableClassNames = {
     table: 'fui-ChartTable__table',
     headerCell: 'fui-ChartTable__headerCell',
     bodyCell: 'fui-ChartTable__bodyCell',
-    chart: 'fui-ChartTable__chart'
+    chart: 'fui-ChartTable__chart',
+    chartTitle: 'fui-ChartTable__chartTitle',
+    svgTooltip: 'fui-ChartTable__svgTooltip'
 };
 const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     root: {
@@ -102,6 +104,20 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
             "fes3tcz"
         ],
         B7iucu3: "fhs7xo9"
+    },
+    chartTitle: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "f13mqy1h",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "fcpl73t",
+        Bkfmm31: "fhuob2q",
+        Bvjb7m6: "fhv2zbx",
+        fsow6f: "f17mccla",
+        jrapky: "fqcjy3b"
+    },
+    svgTooltip: {
+        Bkfmm31: "f5q6cfr",
+        Bxms50k: "f1bgda6t"
     }
 }, {
     d: [
@@ -140,7 +156,14 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
             {
                 p: -2
             }
-        ]
+        ],
+        ".f13mqy1h{font-size:var(--fontSizeBase100);}",
+        ".fcpl73t{line-height:var(--lineHeightBase100);}",
+        ".fhuob2q{fill:var(--colorNeutralForeground1);}",
+        ".fhv2zbx{forced-color-adjust:auto;}",
+        ".f17mccla{text-align:center;}",
+        ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}",
+        ".f5q6cfr{fill:var(--colorNeutralBackground1);}"
     ],
     m: [
         [
@@ -154,6 +177,12 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
             {
                 m: "(forced-colors: active)"
             }
+        ],
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1bgda6t{fill:Canvas;}}",
+            {
+                m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+            }
         ]
     ]
 });
@@ -164,6 +193,8 @@ const useChartTableStyles = (props)=>{
         table: (0, _react.mergeClasses)(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/ ),
         headerCell: (0, _react.mergeClasses)(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/ ),
         bodyCell: (0, _react.mergeClasses)(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/ ),
-        chart: (0, _react.mergeClasses)(chartTableClassNames.chart /*props.styles?.chart*/ )
+        chart: (0, _react.mergeClasses)(chartTableClassNames.chart /*props.styles?.chart*/ ),
+        chartTitle: (0, _react.mergeClasses)(chartTableClassNames.chartTitle, baseStyles.chartTitle /*props.styles?.chartTitle*/ ),
+        svgTooltip: (0, _react.mergeClasses)(chartTableClassNames.svgTooltip, baseStyles.svgTooltip /*props.styles?.svgTooltip*/ )
     };
 };

package/lib-commonjs/components/ChartTable/useChartTableStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useChartTableStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/*\n @internal\n / export const chartTableClassNames = {\n root: 'fui-ChartTable__root',\n table: 'fui-ChartTable__table',\n headerCell: 'fui-ChartTable__headerCell',\n bodyCell: 'fui-ChartTable__bodyCell',\n chart: 'fui-ChartTable__chart'\n};\nconst useStyles = makeStyles({\n root: {\n width: '100%',\n overflowX: 'auto'\n },\n table: {\n borderCollapse: 'collapse'\n },\n headerCell: {\n ...typographyStyles.caption1,\n fontWeight: tokens.fontWeightSemibold,\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground1,\n padding: tokens.spacingHorizontalS,\n textAlign: 'left',\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,\n '@media (forced-colors: active)': {\n backgroundColor: 'Window',\n color: 'WindowText'\n }\n },\n bodyCell: {\n ...typographyStyles.caption1,\n padding: tokens.spacingHorizontalS,\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,\n color: tokens.colorNeutralForeground1,\n textAlign: 'left',\n '@media (forced-colors: active)': {\n color: 'WindowText'\n }\n }\n});\n/\n Apply styling to the ChartTable slots based on the state\n / export const useChartTableStyles = (props)=>{\n const baseStyles = useStyles();\n return {\n root: mergeClasses(chartTableClassNames.root, baseStyles.root /props.styles?.root/ ),\n table: mergeClasses(chartTableClassNames.table, baseStyles.table /props.styles?.table/ ),\n headerCell: mergeClasses(chartTableClassNames.headerCell, baseStyles.headerCell /props.styles?.headerCell/ ),\n bodyCell: mergeClasses(chartTableClassNames.bodyCell, baseStyles.bodyCell /props.styles?.bodyCell/ ),\n chart: mergeClasses(chartTableClassNames.chart /props.styles?.chart*/ )\n };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","chartTableClassNames","root","table","headerCell","bodyCell","chart","useStyles","a9b677","B68tc82","po53p8","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","De3pzq","sj55zd","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","fsow6f","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","By8wz76","B7iucu3","d","p","m","useChartTableStyles","props","baseStyles"],"mappings":"AAAA,YAAY;;;;;;;;;;;;~~IAKKI~~,oBAAoB;;;~~uBAyCD;eAAnB4C;;;uBA7CwB~~,gBAAgB;~~AAI9C~~,6BAA6B;~~IACpC3C~~,IAAI,EAAE,sBAAsB;IAC5BC,KAAK,EAAE,uBAAuB;IAC9BC,UAAU,EAAE,4BAA4B;IACxCC,QAAQ,EAAE,0BAA0B;IACpCC,KAAK,EAAE;~~AACX~~,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,~~OAAGV~~,eAAA,EAAA;~~IAAAK~~,IAAA,EAAA;~~QAAAM~~,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;~~IAAAN~~,KAAA,EAAA;~~QAAAO~~,MAAA,EAAA;IAAA;~~IAAAN~~,UAAA,EAAA;~~QAAAO~~,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;~~IAAApC~~,QAAA,EAAA;~~QAAAM~~,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAvB,MAAA,EAAA;QAAAM,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAmB,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,~~CA+BjB~~,CAAC;AAGS,~~6BAA6BE~~,KAAK,IAAG;IAC5C,MAAMC,UAAU,~~GAAGxC~~,SAAS,CAAC,CAAC;IAC9B,OAAO;~~QACHL~~,IAAI,~~MAAEJ~~,mBAAY,~~EAACG~~,oBAAoB,CAACC,IAAI,~~EAAE6C~~,UAAU,~~CAAC7C~~,IAAI,CAAC,oBAAA,EAAuB,CAAC;QACtFC,KAAK,~~MAAEL~~,mBAAY,~~EAACG~~,oBAAoB,CAACE,KAAK,~~EAAE4C~~,UAAU,~~CAAC5C~~,KAAK,CAAC,qBAAA,EAAwB,CAAC;QAC1FC,UAAU,~~EAAEN~~,uBAAY,~~EAACG~~,oBAAoB,CAACG,UAAU,~~EAAE2C~~,UAAU,~~CAAC3C~~,UAAU,CAAC,0BAAA,EAA6B,CAAC;QAC9GC,QAAQ,~~MAAEP~~,mBAAY,~~EAACG~~,oBAAoB,CAACI,QAAQ,~~EAAE0C~~,UAAU,~~CAAC1C~~,QAAQ,CAAC,wBAAA,EAA2B,CAAC;QACtGC,KAAK,~~MAAER~~,mBAAY,~~EAACG~~,oBAAoB,CAACK,KAAK,CAAC,qBAAA,EAAwB;~~IAC3E~~,CAAC;AACL,CAAC"}
1	+ {"version":3,"sources":["useChartTableStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { getChartTitleStyles, HighContrastSelector } from '../../utilities/index';\n/*\n @internal\n / export const chartTableClassNames = {\n root: 'fui-ChartTable__root',\n table: 'fui-ChartTable__table',\n headerCell: 'fui-ChartTable__headerCell',\n bodyCell: 'fui-ChartTable__bodyCell',\n chart: 'fui-ChartTable__chart',\n chartTitle: 'fui-ChartTable__chartTitle',\n svgTooltip: 'fui-ChartTable__svgTooltip'\n};\nconst useStyles = makeStyles({\n root: {\n width: '100%',\n overflowX: 'auto'\n },\n table: {\n borderCollapse: 'collapse'\n },\n headerCell: {\n ...typographyStyles.caption1,\n fontWeight: tokens.fontWeightSemibold,\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground1,\n padding: tokens.spacingHorizontalS,\n textAlign: 'left',\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,\n '@media (forced-colors: active)': {\n backgroundColor: 'Window',\n color: 'WindowText'\n }\n },\n bodyCell: {\n ...typographyStyles.caption1,\n padding: tokens.spacingHorizontalS,\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,\n color: tokens.colorNeutralForeground1,\n textAlign: 'left',\n '@media (forced-colors: active)': {\n color: 'WindowText'\n }\n },\n chartTitle: getChartTitleStyles(),\n svgTooltip: {\n fill: tokens.colorNeutralBackground1,\n [HighContrastSelector]: {\n fill: 'Canvas'\n }\n }\n});\n/\n Apply styling to the ChartTable slots based on the state\n / export const useChartTableStyles = (props)=>{\n const baseStyles = useStyles();\n return {\n root: mergeClasses(chartTableClassNames.root, baseStyles.root /props.styles?.root/ ),\n table: mergeClasses(chartTableClassNames.table, baseStyles.table /props.styles?.table/ ),\n headerCell: mergeClasses(chartTableClassNames.headerCell, baseStyles.headerCell /props.styles?.headerCell/ ),\n bodyCell: mergeClasses(chartTableClassNames.bodyCell, baseStyles.bodyCell /props.styles?.bodyCell/ ),\n chart: mergeClasses(chartTableClassNames.chart /props.styles?.chart/ ),\n chartTitle: mergeClasses(chartTableClassNames.chartTitle, baseStyles.chartTitle /props.styles?.chartTitle/ ),\n svgTooltip: mergeClasses(chartTableClassNames.svgTooltip, baseStyles.svgTooltip /props.styles?.svgTooltip*/ )\n };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","getChartTitleStyles","HighContrastSelector","chartTableClassNames","root","table","headerCell","bodyCell","chart","chartTitle","svgTooltip","useStyles","a9b677","B68tc82","po53p8","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","De3pzq","sj55zd","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","fsow6f","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","By8wz76","B7iucu3","Bkfmm31","Bvjb7m6","jrapky","Bxms50k","d","p","m","useChartTableStyles","props","baseStyles"],"mappings":"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"}

package/lib-commonjs/components/ChartTable/useChartTableStyles.styles.raw.js CHANGED Viewed

@@ -19,12 +19,15 @@ _export(exports, {
 });
 const _react = require("@griffel/react");
 const _reacttheme = require("@fluentui/react-theme");
+const _index = require("../../utilities/index");
 const chartTableClassNames = {
     root: 'fui-ChartTable__root',
     table: 'fui-ChartTable__table',
     headerCell: 'fui-ChartTable__headerCell',
     bodyCell: 'fui-ChartTable__bodyCell',
-    chart: 'fui-ChartTable__chart'
+    chart: 'fui-ChartTable__chart',
+    chartTitle: 'fui-ChartTable__chartTitle',
+    svgTooltip: 'fui-ChartTable__svgTooltip'
 };
 const useStyles = (0, _react.makeStyles)({
     root: {
@@ -56,6 +59,13 @@ const useStyles = (0, _react.makeStyles)({
         '@media (forced-colors: active)': {
             color: 'WindowText'
         }
+    },
+    chartTitle: (0, _index.getChartTitleStyles)(),
+    svgTooltip: {
+        fill: _reacttheme.tokens.colorNeutralBackground1,
+        [_index.HighContrastSelector]: {
+            fill: 'Canvas'
+        }
     }
 });
 const useChartTableStyles = (props)=>{
@@ -65,6 +75,8 @@ const useChartTableStyles = (props)=>{
         table: (0, _react.mergeClasses)(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/ ),
         headerCell: (0, _react.mergeClasses)(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/ ),
         bodyCell: (0, _react.mergeClasses)(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/ ),
-        chart: (0, _react.mergeClasses)(chartTableClassNames.chart /*props.styles?.chart*/ )
+        chart: (0, _react.mergeClasses)(chartTableClassNames.chart /*props.styles?.chart*/ ),
+        chartTitle: (0, _react.mergeClasses)(chartTableClassNames.chartTitle, baseStyles.chartTitle /*props.styles?.chartTitle*/ ),
+        svgTooltip: (0, _react.mergeClasses)(chartTableClassNames.svgTooltip, baseStyles.svgTooltip /*props.styles?.svgTooltip*/ )
     };
 };

package/lib-commonjs/components/ChartTable/useChartTableStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ChartTable/useChartTableStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { ChartTableProps, ChartTableStyles } from './ChartTable.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\n/*\n @internal\n /\nexport const chartTableClassNames: SlotClassNames<ChartTableStyles> = {\n root: 'fui-ChartTable__root',\n table: 'fui-ChartTable__table',\n headerCell: 'fui-ChartTable__headerCell',\n bodyCell: 'fui-ChartTable__bodyCell',\n chart: 'fui-ChartTable__chart',\n};\n\nconst useStyles = makeStyles({\n root: {\n width: '100%',\n overflowX: 'auto',\n },\n table: {\n borderCollapse: 'collapse',\n },\n headerCell: {\n ...typographyStyles.caption1,\n fontWeight: tokens.fontWeightSemibold,\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground1,\n padding: tokens.spacingHorizontalS,\n textAlign: 'left',\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,\n '@media (forced-colors: active)': {\n backgroundColor: 'Window',\n color: 'WindowText',\n },\n },\n bodyCell: {\n ...typographyStyles.caption1,\n padding: tokens.spacingHorizontalS,\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,\n color: tokens.colorNeutralForeground1,\n textAlign: 'left',\n '@media (forced-colors: active)': {\n color: 'WindowText',\n },\n },\n});\n\n/\n Apply styling to the ChartTable slots based on the state\n /\nexport const useChartTableStyles = (props: ChartTableProps): ChartTableStyles => {\n const baseStyles = useStyles();\n\n return {\n root: mergeClasses(chartTableClassNames.root, baseStyles.root /props.styles?.root/),\n table: mergeClasses(chartTableClassNames.table, baseStyles.table /props.styles?.table/),\n headerCell: mergeClasses(chartTableClassNames.headerCell, baseStyles.headerCell /props.styles?.headerCell/),\n bodyCell: mergeClasses(chartTableClassNames.bodyCell, baseStyles.bodyCell /props.styles?.bodyCell/),\n chart: mergeClasses(chartTableClassNames.chart /props.styles?.chart*/),\n };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","chartTableClassNames","root","table","headerCell","bodyCell","chart","useStyles","width","overflowX","borderCollapse","caption1","fontWeight","fontWeightSemibold","backgroundColor","colorNeutralBackground3","color","colorNeutralForeground1","padding","spacingHorizontalS","textAlign","border","strokeWidthThick","colorNeutralStroke2","useChartTableStyles","props","baseStyles"],"mappings":"AAAA;;;;;;;;;;;;~~IAUaI~~,oBAAAA;;;~~IA4CAuB~~,mBAAAA;;;;~~uBApD4B~~,iBAAiB;~~4BAGjB~~,wBAAwB;~~AAK1D~~,6BAA+D;~~IACpEtB~~,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,UAAU;IACVC,OAAO;~~AACT~~,EAAE;AAEF,MAAMC,~~gBAAYV~~,iBAAAA,EAAW;~~IAC3BK~~,MAAM;~~QACJM~~,OAAO;QACPC,WAAW;IACb;~~IACAN~~,OAAO;~~QACLO~~,gBAAgB;IAClB;~~IACAN~~,YAAY;QACV,~~GAAGJ~~,4BAAAA,~~CAAiBW~~,QAAQ;QAC5BC,~~YAAYb~~,kBAAAA,~~CAAOc~~,kBAAkB;QACrCC,~~iBAAiBf~~,kBAAAA,~~CAAOgB~~,uBAAuB;QAC/CC,~~OAAOjB~~,kBAAAA,~~CAAOkB~~,uBAAuB;QACrCC,~~SAASnB~~,kBAAAA,~~CAAOoB~~,kBAAkB;QAClCC,WAAW;QACXC,QAAQ,~~GAAGtB~~,kBAAAA,~~CAAOuB~~,gBAAgB,CAAC,OAAO,~~EAAEvB~~,kBAAAA,~~CAAOwB~~,mBAAmB,EAAE;QACxE,kCAAkC;YAChCT,iBAAiB;YACjBE,OAAO;QACT;IACF;~~IACAX~~,UAAU;QACR,~~GAAGL~~,4BAAAA,~~CAAiBW~~,QAAQ;QAC5BO,~~SAASnB~~,kBAAAA,~~CAAOoB~~,kBAAkB;QAClCE,QAAQ,~~GAAGtB~~,kBAAAA,~~CAAOuB~~,gBAAgB,CAAC,OAAO,~~EAAEvB~~,kBAAAA,~~CAAOwB~~,mBAAmB,EAAE;QACxEP,~~OAAOjB~~,kBAAAA,~~CAAOkB~~,uBAAuB;QACrCG,WAAW;QACX,kCAAkC;YAChCJ,OAAO;QACT;IACF;AACF;AAKO,4BAA4B,~~CAACS~~;IAClC,MAAMC,~~aAAanB~~;IAEnB,OAAO;~~QACLL~~,~~UAAMJ~~,mBAAAA,~~EAAaG~~,qBAAqBC,IAAI,~~EAAEwB~~,~~WAAWxB~~,IAAI,CAAC,oBAAoB;QAClFC,~~WAAOL~~,mBAAAA,~~EAAaG~~,qBAAqBE,KAAK,~~EAAEuB~~,~~WAAWvB~~,KAAK,CAAC,qBAAqB;QACtFC,~~gBAAYN~~,~~mBAAAA~~,~~EAAaG~~,qBAAqBG,UAAU,~~EAAEsB~~,~~WAAWtB~~,UAAU,CAAC,0BAA0B;QAC1GC,~~cAAUP~~,mBAAAA,~~EAAaG~~,qBAAqBI,QAAQ,~~EAAEqB~~,~~WAAWrB~~,QAAQ,CAAC,wBAAwB;QAClGC,~~WAAOR~~,mBAAAA,~~EAAaG~~,qBAAqBK,KAAK,CAAC,qBAAqB;~~IACtE~~;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/ChartTable/useChartTableStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { ChartTableProps, ChartTableStyles } from './ChartTable.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { getChartTitleStyles, HighContrastSelector } from '../../utilities/index';\n\n/*\n @internal\n /\nexport const chartTableClassNames: SlotClassNames<ChartTableStyles> = {\n root: 'fui-ChartTable__root',\n table: 'fui-ChartTable__table',\n headerCell: 'fui-ChartTable__headerCell',\n bodyCell: 'fui-ChartTable__bodyCell',\n chart: 'fui-ChartTable__chart',\n chartTitle: 'fui-ChartTable__chartTitle',\n svgTooltip: 'fui-ChartTable__svgTooltip',\n};\n\nconst useStyles = makeStyles({\n root: {\n width: '100%',\n overflowX: 'auto',\n },\n table: {\n borderCollapse: 'collapse',\n },\n headerCell: {\n ...typographyStyles.caption1,\n fontWeight: tokens.fontWeightSemibold,\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground1,\n padding: tokens.spacingHorizontalS,\n textAlign: 'left',\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,\n '@media (forced-colors: active)': {\n backgroundColor: 'Window',\n color: 'WindowText',\n },\n },\n bodyCell: {\n ...typographyStyles.caption1,\n padding: tokens.spacingHorizontalS,\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,\n color: tokens.colorNeutralForeground1,\n textAlign: 'left',\n '@media (forced-colors: active)': {\n color: 'WindowText',\n },\n },\n chartTitle: getChartTitleStyles() as GriffelStyle,\n svgTooltip: {\n fill: tokens.colorNeutralBackground1,\n [HighContrastSelector]: {\n fill: 'Canvas',\n },\n },\n});\n\n/\n Apply styling to the ChartTable slots based on the state\n /\nexport const useChartTableStyles = (props: ChartTableProps): ChartTableStyles => {\n const baseStyles = useStyles();\n\n return {\n root: mergeClasses(chartTableClassNames.root, baseStyles.root /props.styles?.root/),\n table: mergeClasses(chartTableClassNames.table, baseStyles.table /props.styles?.table/),\n headerCell: mergeClasses(chartTableClassNames.headerCell, baseStyles.headerCell /props.styles?.headerCell/),\n bodyCell: mergeClasses(chartTableClassNames.bodyCell, baseStyles.bodyCell /props.styles?.bodyCell/),\n chart: mergeClasses(chartTableClassNames.chart /props.styles?.chart/),\n chartTitle: mergeClasses(chartTableClassNames.chartTitle, baseStyles.chartTitle /props.styles?.chartTitle/),\n svgTooltip: mergeClasses(chartTableClassNames.svgTooltip, baseStyles.svgTooltip /props.styles?.svgTooltip*/),\n };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","getChartTitleStyles","HighContrastSelector","chartTableClassNames","root","table","headerCell","bodyCell","chart","chartTitle","svgTooltip","useStyles","width","overflowX","borderCollapse","caption1","fontWeight","fontWeightSemibold","backgroundColor","colorNeutralBackground3","color","colorNeutralForeground1","padding","spacingHorizontalS","textAlign","border","strokeWidthThick","colorNeutralStroke2","fill","colorNeutralBackground1","useChartTableStyles","props","baseStyles"],"mappings":"AAAA;;;;;;;;;;;;IAWaM,oBAAAA;;;IAqDA2B,mBAAAA;;;;uBA9D0C,iBAAiB;4BAG/B,wBAAwB;uBACP,wBAAwB;AAK3E,6BAA+D;IACpE1B,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,UAAU;IACVC,OAAO;IACPC,YAAY;IACZC,YAAY;AACd,EAAE;AAEF,MAAMC,gBAAYd,iBAAAA,EAAW;IAC3BO,MAAM;QACJQ,OAAO;QACPC,WAAW;IACb;IACAR,OAAO;QACLS,gBAAgB;IAClB;IACAR,YAAY;QACV,GAAGN,4BAAAA,CAAiBe,QAAQ;QAC5BC,YAAYjB,kBAAAA,CAAOkB,kBAAkB;QACrCC,iBAAiBnB,kBAAAA,CAAOoB,uBAAuB;QAC/CC,OAAOrB,kBAAAA,CAAOsB,uBAAuB;QACrCC,SAASvB,kBAAAA,CAAOwB,kBAAkB;QAClCC,WAAW;QACXC,QAAQ,GAAG1B,kBAAAA,CAAO2B,gBAAgB,CAAC,OAAO,EAAE3B,kBAAAA,CAAO4B,mBAAmB,EAAE;QACxE,kCAAkC;YAChCT,iBAAiB;YACjBE,OAAO;QACT;IACF;IACAb,UAAU;QACR,GAAGP,4BAAAA,CAAiBe,QAAQ;QAC5BO,SAASvB,kBAAAA,CAAOwB,kBAAkB;QAClCE,QAAQ,GAAG1B,kBAAAA,CAAO2B,gBAAgB,CAAC,OAAO,EAAE3B,kBAAAA,CAAO4B,mBAAmB,EAAE;QACxEP,OAAOrB,kBAAAA,CAAOsB,uBAAuB;QACrCG,WAAW;QACX,kCAAkC;YAChCJ,OAAO;QACT;IACF;IACAX,gBAAYR,0BAAAA;IACZS,YAAY;QACVkB,MAAM7B,kBAAAA,CAAO8B,uBAAuB;QACpC,CAAC3B,2BAAAA,CAAqB,EAAE;YACtB0B,MAAM;QACR;IACF;AACF;AAKO,4BAA4B,CAACG;IAClC,MAAMC,aAAarB;IAEnB,OAAO;QACLP,UAAMN,mBAAAA,EAAaK,qBAAqBC,IAAI,EAAE4B,WAAW5B,IAAI,CAAC,oBAAoB;QAClFC,WAAOP,mBAAAA,EAAaK,qBAAqBE,KAAK,EAAE2B,WAAW3B,KAAK,CAAC,qBAAqB;QACtFC,YAAYR,uBAAAA,EAAaK,qBAAqBG,UAAU,EAAE0B,WAAW1B,UAAU,CAAC,0BAA0B;QAC1GC,cAAUT,mBAAAA,EAAaK,qBAAqBI,QAAQ,EAAEyB,WAAWzB,QAAQ,CAAC,wBAAwB;QAClGC,WAAOV,mBAAAA,EAAaK,qBAAqBK,KAAK,CAAC,qBAAqB;QACpEC,gBAAYX,mBAAAA,EAAaK,qBAAqBM,UAAU,EAAEuB,WAAWvB,UAAU,CAAC,0BAA0B;QAC1GC,gBAAYZ,mBAAAA,EAAaK,qBAAqBO,UAAU,EAAEsB,WAAWtB,UAAU,CAAC,0BAA0B;IAC5G;AACF,EAAE"}

package/lib-commonjs/components/CommonComponents/Annotations/ChartAnnotationLayer.js CHANGED Viewed

@@ -331,7 +331,7 @@ const resolveCoordinates = (annotation, context)=>{
     };
 };
 const ChartAnnotationLayer = /*#__PURE__*/ _react.memo((props)=>{
-    const { annotations: annotationsProp, context } = props;
+    const { annotations: annotationsProp, context, hideDefaultStyles } = props;
     const classes = (0, _useChartAnnotationLayerstyles.useChartAnnotationLayerStyles)(props);
     const idPrefix = (0, _reactutilities.useId)('chart-annotation');
     const autoKeyPrefix = (0, _reactutilities.useId)('chart-annotation-item');
@@ -428,7 +428,7 @@ const ChartAnnotationLayer = /*#__PURE__*/ _react.memo((props)=>{
                 backgroundColor: (0, _useChartAnnotationLayerstyles.applyOpacityToColor)(baseBackgroundColor, backgroundOpacity, {
                     preserveOriginalOpacity: ((_annotation_style4 = annotation.style) === null || _annotation_style4 === void 0 ? void 0 : _annotation_style4.opacity) === undefined
                 })
-            } : {
+            } : hideDefaultStyles ? {} : {
                 backgroundColor: (0, _useChartAnnotationLayerstyles.applyOpacityToColor)(_reacttheme.tokens.colorNeutralBackground1, _useChartAnnotationLayerstyles.DEFAULT_ANNOTATION_BACKGROUND_OPACITY)
             },
             borderColor: (_annotation_style5 = annotation.style) === null || _annotation_style5 === void 0 ? void 0 : _annotation_style5.borderColor,
@@ -514,6 +514,7 @@ const ChartAnnotationLayer = /*#__PURE__*/ _react.memo((props)=>{
             visibility: 'hidden',
             ...containerStyle
         };
+        const annotationClass = hideDefaultStyles ? classes.annotationNoDefaults : classes.annotation;
         if (!isMeasurementValid) {
             var _annotation_style19, _annotation_style20;
             measurementElements.push(/*#__PURE__*/ _react.createElement("div", {
@@ -526,7 +527,7 @@ const ChartAnnotationLayer = /*#__PURE__*/ _react.memo((props)=>{
                         }
                     }
                 },
-                className: (0, _react1.mergeClasses)(classes.annotation, classes.measurement, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style19 = annotation.style) === null || _annotation_style19 === void 0 ? void 0 : _annotation_style19.className),
+                className: (0, _react1.mergeClasses)(annotationClass, classes.measurement, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style19 = annotation.style) === null || _annotation_style19 === void 0 ? void 0 : _annotation_style19.className),
                 style: measurementStyle,
                 "aria-hidden": true,
                 "data-annotation-key": key,
@@ -546,15 +547,16 @@ const ChartAnnotationLayer = /*#__PURE__*/ _react.memo((props)=>{
             className: (0, _react1.mergeClasses)(classes.annotationForeignObject),
             "data-annotation-key": key
         }, /*#__PURE__*/ _react.createElement("div", {
-            className: (0, _react1.mergeClasses)(classes.annotation, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style17 = annotation.style) === null || _annotation_style17 === void 0 ? void 0 : _annotation_style17.className),
+            className: (0, _react1.mergeClasses)(annotationClass, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style17 = annotation.style) === null || _annotation_style17 === void 0 ? void 0 : _annotation_style17.className),
             style: containerStyle,
             "data-annotation-key": key
         }, /*#__PURE__*/ _react.createElement("div", {
-            className: (0, _react1.mergeClasses)(classes.annotationContent, (_annotation_style18 = annotation.style) === null || _annotation_style18 === void 0 ? void 0 : _annotation_style18.className),
+            className: (0, _react1.mergeClasses)(classes.annotationContent, classes.annotationContentInteractive, (_annotation_style18 = annotation.style) === null || _annotation_style18 === void 0 ? void 0 : _annotation_style18.className),
             style: contentStyle,
             role: (_annotation_accessibility_role = (_annotation_accessibility = annotation.accessibility) === null || _annotation_accessibility === void 0 ? void 0 : _annotation_accessibility.role) !== null && _annotation_accessibility_role !== void 0 ? _annotation_accessibility_role : 'note',
             "aria-label": (_annotation_accessibility_ariaLabel = (_annotation_accessibility1 = annotation.accessibility) === null || _annotation_accessibility1 === void 0 ? void 0 : _annotation_accessibility1.ariaLabel) !== null && _annotation_accessibility_ariaLabel !== void 0 ? _annotation_accessibility_ariaLabel : annotationPlainText ? annotationPlainText : undefined,
             "aria-describedby": (_annotation_accessibility2 = annotation.accessibility) === null || _annotation_accessibility2 === void 0 ? void 0 : _annotation_accessibility2.ariaDescribedBy,
+            tabIndex: 0,
             "data-chart-annotation": "true",
             "data-annotation-key": key
         }, renderSimpleMarkup(annotationMarkupNodes, `${key}-content`)))));