@fluentui/react-charts 9.3.7 → 9.3.8

package/lib/components/AreaChart/useAreaChartStyles.styles.js

@@ -36,7 +36,6 @@ const useStyles = /*#__PURE__*/__styles({
     B0ocmuz: "f1bnz8pu",
     qhf8xq: "f1euv43f",
     fsow6f: "f17mccla",
-    Bhzewxz: "fr6rvge",
     De3pzq: "fxugw4r",
     Beyfa6y: 0,
     Bbmb7ep: 0,
@@ -49,7 +48,7 @@ const useStyles = /*#__PURE__*/__styles({
 }, {
   d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", [".f1bnz8pu{padding:var(--spacingHorizontalS);}", {
     p: -1
-  }], ".f1euv43f{position:absolute;}", ".f17mccla{text-align:center;}", ".fr6rvge{top:var(--spacingVerticalNone);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
+  }], ".f1euv43f{position:absolute;}", ".f17mccla{text-align:center;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
     p: -1
   }], ".f1aehjj5{pointer-events:none;}", ".f19n0e5{color:var(--colorNeutralForeground1);}"]
 });

package/lib/components/AreaChart/useAreaChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","getTooltipStyle","areaChartClassNames","tooltip","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","plotContainer","annotationLayer","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","d","p","useAreaChartStyles","props","baseStyles"],"sources":["useAreaChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { getTooltipStyle } from '../../utilities/index';\nexport const areaChartClassNames = {\n    tooltip: 'fui-ac__tooltip',\n    root: '',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    axisTitle: '',\n    chartTitle: '',\n    opacityChangeOnHover: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: '',\n    plotContainer: '',\n    annotationLayer: ''\n};\nconst useStyles = makeStyles({\n    tooltip: getTooltipStyle()\n});\n/**\n * Apply styling to the AreaChart slots based on the state\n */ export const useAreaChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(areaChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ )\n    };\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,eAAe,QAAQ,uBAAuB;AACvD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,OAAO,EAAE,iBAAiB;EAC1BC,IAAI,EAAE,EAAE;EACRC,KAAK,EAAE,EAAE;EACTC,KAAK,EAAE,EAAE;EACTC,eAAe,EAAE,EAAE;EACnBC,KAAK,EAAE,EAAE;EACTC,kBAAkB,EAAE,EAAE;EACtBC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,EAAE;EACdC,oBAAoB,EAAE,EAAE;EACxBC,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE,EAAE;EAChBC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE,EAAE;EAClBC,aAAa,EAAE,EAAE;EACjBC,eAAe,EAAE;AACrB,CAAC;AACD,MAAMC,SAAS,gBAAGrB,QAAA;EAAAI,OAAA;IAAAkB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAEjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,UAAU,GAAG3B,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHjB,OAAO,EAAEH,YAAY,CAACE,mBAAmB,CAACC,OAAO,EAAE4C,UAAU,CAAC5C,OAAO,CAAC,yBAA0B;EACpG,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","getTooltipStyle","areaChartClassNames","tooltip","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","plotContainer","annotationLayer","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","fsow6f","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","d","p","useAreaChartStyles","props","baseStyles"],"sources":["useAreaChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { getTooltipStyle } from '../../utilities/index';\nexport const areaChartClassNames = {\n    tooltip: 'fui-ac__tooltip',\n    root: '',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    axisTitle: '',\n    chartTitle: '',\n    opacityChangeOnHover: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: '',\n    plotContainer: '',\n    annotationLayer: ''\n};\nconst useStyles = makeStyles({\n    tooltip: getTooltipStyle()\n});\n/**\n * Apply styling to the AreaChart slots based on the state\n */ export const useAreaChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(areaChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ )\n    };\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,eAAe,QAAQ,uBAAuB;AACvD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,OAAO,EAAE,iBAAiB;EAC1BC,IAAI,EAAE,EAAE;EACRC,KAAK,EAAE,EAAE;EACTC,KAAK,EAAE,EAAE;EACTC,eAAe,EAAE,EAAE;EACnBC,KAAK,EAAE,EAAE;EACTC,kBAAkB,EAAE,EAAE;EACtBC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,EAAE;EACdC,oBAAoB,EAAE,EAAE;EACxBC,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE,EAAE;EAChBC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE,EAAE;EAClBC,aAAa,EAAE,EAAE;EACjBC,eAAe,EAAE;AACrB,CAAC;AACD,MAAMC,SAAS,gBAAGrB,QAAA;EAAAI,OAAA;IAAAkB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAEjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,UAAU,GAAG1B,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHjB,OAAO,EAAEH,YAAY,CAACE,mBAAmB,CAACC,OAAO,EAAE2C,UAAU,CAAC3C,OAAO,CAAC,yBAA0B;EACpG,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/ChartTable/ChartTable.js

@@ -6,6 +6,7 @@ import * as d3 from 'd3-color';
 import { getColorContrast } from '../../utilities/colors';
 import { resolveCSSVariables } from '../../utilities/utilities';
 import { useImageExport } from '../../utilities/hooks';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 function invertHexColor(hex) {
     const color = d3.color(hex);
     if (!color) {
@@ -39,6 +40,9 @@ export const ChartTable = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>
     const { headers, rows, width, height } = props;
     const { chartContainerRef: _rootElem } = useImageExport(props.componentRef, true, false);
     const classes = useChartTableStyles(props);
+    const arrowAttributes = useArrowNavigationGroup({
+        axis: 'grid'
+    });
     if (!headers || headers.length === 0) {
         return /*#__PURE__*/ React.createElement("div", null, "No data available");
     }
@@ -101,7 +105,8 @@ export const ChartTable = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>
         className: classes.table,
         style: {
             width: width ? `${width}px` : '100%'
-        }
+        },
+        ...arrowAttributes
     }, /*#__PURE__*/ React.createElement("thead", null, /*#__PURE__*/ React.createElement("tr", null, headers.map((header, idx)=>{
         const style = {
             ...header === null || header === void 0 ? void 0 : header.style

package/lib/components/ChartTable/ChartTable.js.map

@@ -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';\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\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              >\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","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","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":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,+BAA+B;AACnE,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,YAAYC,QAAQ,WAAW;AAC/B,SAASC,gBAAgB,QAAQ,yBAAyB;AAC1D,SAASC,mBAAmB,QAAQ,4BAA4B;AAChE,SAASC,cAAc,QAAQ,wBAAwB;AAEvD,SAASC,eAAeC,GAAW;IACjC,MAAMC,QAAQN,GAAGM,KAAK,CAACD;IACvB,IAAI,CAACC,OAAO;QACV,OAAOP,OAAOQ,uBAAuB;IACvC;IACA,MAAMC,MAAMF,MAAME,GAAG;IACrB,OAAOR,GAAGQ,GAAG,CAAC,MAAMA,IAAIC,CAAC,EAAE,MAAMD,IAAIE,CAAC,EAAE,MAAMF,IAAIG,CAAC,EAAEC,SAAS;AAChE;AAEA,SAASC,uBAAuBC,cAA2B,EAAEC,UAAmB,EAAEC,UAAmB;IACnG,MAAMC,aAAalB,OAAOQ,uBAAuB;IACjD,MAAMW,aAAanB,OAAOoB,uBAAuB;IACjD,IAAI,CAACL,gBAAgB;QACnB,OAAOI;IACT;IAEA,MAAME,aAAalB,oBAAoBY,gBAAgBC,cAAcE;IACrE,MAAMI,aAAanB,oBAAoBY,gBAAgBE,cAAcE;IAErE,MAAMI,KAAKtB,GAAGM,KAAK,CAACc;IACpB,MAAMG,KAAKvB,GAAGM,KAAK,CAACe;IAEpB,IAAI,CAACC,MAAM,CAACC,IAAI;QACd,OAAOF;IACT;IACA,MAAMG,WAAWvB,iBAAiBqB,GAAGV,SAAS,IAAIW,GAAGX,SAAS;IAC9D,IAAIY,YAAY,GAAG;QACjB,OAAOD,GAAGX,SAAS;IACrB;IAEA,MAAMa,aAAarB,eAAemB,GAAGX,SAAS;IAC9C,MAAMc,mBAAmBzB,iBAAiBqB,GAAGV,SAAS,IAAIa;IAC1D,OAAOC,oBAAoB,IAAID,aAAaP;AAC9C;AAEA,OAAO,MAAMS,2BAAuD9B,MAAM+B,UAAU,CAClF,CAACC,OAAOC;IACN,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGL;IACzC,MAAM,EAAEM,mBAAmBC,SAAS,EAAE,GAAGjC,eAAe0B,MAAMQ,YAAY,EAAE,MAAM;IAClF,MAAMC,UAAUxC,oBAAoB+B;IAEpC,IAAI,CAACE,WAAWA,QAAQQ,MAAM,KAAK,GAAG;QACpC,qBAAO,oBAACC,aAAI;IACd;IAEA,MAAMC,aAAa,IAAIC;IACvBX,QAAQY,OAAO,CAACC,CAAAA;YACHA,eACQ5C;QADnB,MAAMuB,KAAKqB,mBAAAA,8BAAAA,gBAAAA,OAAQC,KAAK,cAAbD,oCAAAA,cAAeE,eAAe;QACzC,MAAMC,cAAa/C,YAAAA,GAAGM,KAAK,CAACiB,MAAM,iBAAfvB,gCAAAA,UAAoBY,SAAS;QAChD,IAAImC,YAAY;YACdN,WAAWO,GAAG,CAACD;QACjB;IACF;IACA,IAAIE;IACJ,IAAIC,sBAAsB;IAE1B;;;;;;;;;IASA,GACA,IAAIT,WAAWU,IAAI,KAAK,KAAKV,WAAWU,IAAI,KAAK,GAAG;QAClD,MAAMC,cAAcX,WAAWU,IAAI,KAAK,IAAIE,MAAMC,IAAI,CAACb,WAAW,CAAC,EAAE,GAAGY,MAAMC,IAAI,CAACb,WAAW,CAAC,EAAE;QACjG,KAAK,MAAMG,UAAUb,QAAS;gBACjBa;YAAX,MAAMtB,KAAKsB,mBAAAA,8BAAAA,gBAAAA,OAAQC,KAAK,cAAbD,oCAAAA,cAAetC,KAAK;YAC/B,IAAIgB,MAAMrB,iBAAiBqB,IAAI8B,gBAAgB,GAAG;gBAChDH,wBAAwBG;gBACxBF,sBAAsB;gBACtB;YACF;QACF;IACF;IAEA,qBACE,oBAACV;QACCe,KAAKC,CAAAA;YACHpB,UAAUqB,OAAO,GAAGD;QACtB;QACAE,WAAWpB,QAAQqB,IAAI;QACvBd,OAAO;YAAEX,QAAQA,SAAS,GAAGA,OAAO,EAAE,CAAC,GAAG;YAAS0B,UAAU;QAAS;qBAEtE,oBAACC;QAAI5B,OAAOA,kBAAAA,mBAAAA,QAAS;QAAQC,QAAQA,mBAAAA,oBAAAA,SAAU;qBAC7C,oBAAC4B;QAAcC,GAAE;QAAIC,GAAE;QAAI/B,OAAM;QAAOC,QAAO;qBAC7C,oBAACM;QACCK,OAAO;YACLoB,WAAW/B,SAAS,GAAGA,OAAO,EAAE,CAAC,GAAG;YACpCgC,WAAW;YACXC,WAAW;QACb;qBAEA,oBAACC;QACCV,WAAWpB,QAAQ8B,KAAK;QACxBvB,OAAO;YACLZ,OAAOA,QAAQ,GAAGA,MAAM,EAAE,CAAC,GAAG;QAChC;qBAEA,oBAACoC,6BACC,oBAACC,YACEvC,QAAQwC,GAAG,CAAC,CAAC3B,QAAQ4B;QACpB,MAAM3B,QAAQ;eAAKD,mBAAAA,6BAAAA,OAAQC,KAAK,AAAhB;QAAiB;QACjC,MAAMvB,KAAKuB,MAAMvC,KAAK;QACtB,MAAMiB,KAAKsB,MAAMC,eAAe;QAEhC,IAAII,qBAAqB;YACvBL,MAAMC,eAAe,GAAGG;QAC1B,OAAO,IAAI3B,MAAMC,IAAI;YACnBsB,MAAMC,eAAe,GAAGjC,uBAAuBuB,UAAUqB,OAAO,EAAGnC,IAAIC;QACzE;QACA,qBACE,oBAACkD;YAAGC,KAAKF;YAAKd,WAAWpB,QAAQqC,UAAU;YAAE9B,OAAOA;YAAO+B,UAAU;WAClEhC,OAAOiC,KAAK;IAGnB,MAGH7C,QAAQA,KAAKO,MAAM,GAAG,mBACrB,oBAACuC,eACE9C,KAAKuC,GAAG,CAAC,CAACQ,KAAKC,uBACd,oBAACV;YAAGI,KAAKM;WACND,IAAIR,GAAG,CAAC,CAACU,MAAMC;YACd,MAAMrC,QAAQ;mBAAKoC,iBAAAA,2BAAAA,KAAMpC,KAAK,AAAd;YAAe;YAC/B,MAAMvB,KAAKuB,MAAMvC,KAAK;YACtB,MAAMiB,KAAKsB,MAAMC,eAAe;YAChC,IAAIxB,MAAMC,IAAI;gBACZsB,MAAMC,eAAe,GAAGjC,uBAAuBuB,UAAUqB,OAAO,EAAGnC,IAAIC;YACzE;YACA,qBACE,oBAAC4D;gBAAGT,KAAKQ;gBAAQxB,WAAWpB,QAAQ8C,QAAQ;gBAAEvC,OAAOA;gBAAO+B,UAAU;eACnEK,KAAKJ,KAAK;QAGjB;AAWtB,GACA;AAEFlD,WAAW0D,WAAW,GAAG"}
+{"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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"}

package/lib/components/CommonComponents/Annotations/ChartAnnotationLayer.js

@@ -14,10 +14,6 @@ const ARROW_SIZE_SCALE = 0.35;
 const MAX_SIMPLE_MARKUP_DEPTH = 5;
 const CHAR_CODE_LESS_THAN = '<'.codePointAt(0);
 const CHAR_CODE_GREATER_THAN = '>'.codePointAt(0);
-const getAnnotationKey = (annotation, index)=>{
-    var _annotation_id, _ref;
-    return (_ref = (_annotation_id = annotation.id) !== null && _annotation_id !== void 0 ? _annotation_id : typeof annotation.text === 'string' || typeof annotation.text === 'number' ? String(annotation.text) : undefined) !== null && _ref !== void 0 ? _ref : `annotation-${index}`;
-};
 const decodeSimpleMarkupInput = (input)=>{
     const namedEntities = {
         amp: '&',
@@ -216,6 +212,40 @@ const normalizeBandOffset = (scale, value)=>{
     return position;
 };
 const clamp = (value, min, max)=>Math.max(min, Math.min(max, value));
+const resolveDataCoordinate = (axis, value, context, yAxis = 'primary')=>{
+    if (axis === 'x') {
+        const xScale = context.xScale;
+        if (!xScale) {
+            return undefined;
+        }
+        const parsedValue = value instanceof Date ? value.getTime() : value;
+        return normalizeBandOffset(xScale, parsedValue);
+    }
+    const yScale = yAxis === 'secondary' ? context.yScaleSecondary : context.yScalePrimary;
+    if (!yScale) {
+        return undefined;
+    }
+    const parsedValue = value instanceof Date ? value.getTime() : value;
+    return normalizeBandOffset(yScale, parsedValue);
+};
+const resolveAxisCoordinate = (axis, coordinateType, value, context, options = {})=>{
+    switch(coordinateType){
+        case 'data':
+            return resolveDataCoordinate(axis, value, context, options.yAxis);
+        case 'relative':
+            if (typeof value !== 'number' || Number.isNaN(value)) {
+                return undefined;
+            }
+            return axis === 'x' ? context.plotRect.x + context.plotRect.width * value : context.plotRect.y + context.plotRect.height * value;
+        case 'pixel':
+            if (typeof value !== 'number' || Number.isNaN(value)) {
+                return undefined;
+            }
+            return axis === 'x' ? context.plotRect.x + value : context.plotRect.y + value;
+        default:
+            return undefined;
+    }
+};
 const createMeasurementSignature = (annotationContentSignature, containerStyle, contentStyle, layoutClassName, styleClassName)=>JSON.stringify({
         annotationContentSignature,
         containerStyle,
@@ -223,58 +253,58 @@ const createMeasurementSignature = (annotationContentSignature, containerStyle,
         layoutClassName: layoutClassName !== null && layoutClassName !== void 0 ? layoutClassName : '',
         styleClassName: styleClassName !== null && styleClassName !== void 0 ? styleClassName : ''
     });
+const getCoordinateDescriptor = (coordinates)=>{
+    switch(coordinates.type){
+        case 'data':
+            return {
+                xType: 'data',
+                yType: 'data',
+                yAxis: coordinates.yAxis
+            };
+        case 'relative':
+            return {
+                xType: 'relative',
+                yType: 'relative'
+            };
+        case 'pixel':
+            return {
+                xType: 'pixel',
+                yType: 'pixel'
+            };
+        case 'mixed':
+            return {
+                xType: coordinates.xCoordinateType,
+                yType: coordinates.yCoordinateType,
+                yAxis: coordinates.yAxis
+            };
+        default:
+            return undefined;
+    }
+};
 const resolveCoordinates = (annotation, context)=>{
     const { coordinates, layout } = annotation;
     if (!coordinates) {
         return undefined;
     }
+    const descriptor = getCoordinateDescriptor(coordinates);
+    if (!descriptor) {
+        return undefined;
+    }
     var _layout_offsetX;
     const offsetX = (_layout_offsetX = layout === null || layout === void 0 ? void 0 : layout.offsetX) !== null && _layout_offsetX !== void 0 ? _layout_offsetX : 0;
     var _layout_offsetY;
     const offsetY = (_layout_offsetY = layout === null || layout === void 0 ? void 0 : layout.offsetY) !== null && _layout_offsetY !== void 0 ? _layout_offsetY : 0;
+    const anchorX = resolveAxisCoordinate('x', descriptor.xType, coordinates.x, context);
+    const anchorY = resolveAxisCoordinate('y', descriptor.yType, coordinates.y, context, {
+        yAxis: descriptor.yAxis
+    });
+    if (anchorX === undefined || anchorY === undefined) {
+        return undefined;
+    }
     const anchor = {
-        x: 0,
-        y: 0
+        x: anchorX,
+        y: anchorY
     };
-    switch(coordinates.type){
-        case 'data':
-            {
-                const { x, y, yAxis = 'primary' } = coordinates;
-                const xScale = context.xScale;
-                const yScale = yAxis === 'secondary' ? context.yScaleSecondary : context.yScalePrimary;
-                if (!xScale || !yScale) {
-                    return undefined;
-                }
-                const xValue = normalizeBandOffset(xScale, x instanceof Date ? x.getTime() : x);
-                const yValue = normalizeBandOffset(yScale, y instanceof Date ? y.getTime() : y);
-                if (typeof xValue !== 'number' || typeof yValue !== 'number') {
-                    return undefined;
-                }
-                anchor.x = xValue;
-                anchor.y = yValue;
-                break;
-            }
-        case 'relative':
-            {
-                if (typeof coordinates.x !== 'number' || typeof coordinates.y !== 'number') {
-                    return undefined;
-                }
-                anchor.x = context.plotRect.x + context.plotRect.width * coordinates.x;
-                anchor.y = context.plotRect.y + context.plotRect.height * coordinates.y;
-                break;
-            }
-        case 'pixel':
-            {
-                if (typeof coordinates.x !== 'number' || typeof coordinates.y !== 'number') {
-                    return undefined;
-                }
-                anchor.x = context.plotRect.x + coordinates.x;
-                anchor.y = context.plotRect.y + coordinates.y;
-                break;
-            }
-        default:
-            return undefined;
-    }
     let left = anchor.x + offsetX;
     let top = anchor.y + offsetY;
     if (layout === null || layout === void 0 ? void 0 : layout.clipToBounds) {
@@ -293,12 +323,20 @@ export const ChartAnnotationLayer = /*#__PURE__*/ React.memo((props)=>{
     const { annotations: annotationsProp, context } = props;
     const classes = useChartAnnotationLayerStyles(props);
     const idPrefix = useId('chart-annotation');
+    const autoKeyPrefix = useId('chart-annotation-item');
     const [measurements, setMeasurements] = React.useState({});
-    const resolvedAnnotations = React.useMemo(()=>(annotationsProp !== null && annotationsProp !== void 0 ? annotationsProp : []).map((annotation, index)=>({
+    const resolvedAnnotations = React.useMemo(()=>{
+        let fallbackIndex = 0;
+        return (annotationsProp !== null && annotationsProp !== void 0 ? annotationsProp : []).map((annotation)=>{
+            var _annotation_id;
+            return {
                 annotation,
-                key: getAnnotationKey(annotation, index)
-            })), [
-        annotationsProp
+                key: (_annotation_id = annotation.id) !== null && _annotation_id !== void 0 ? _annotation_id : `${autoKeyPrefix}-${fallbackIndex++}`
+            };
+        });
+    }, [
+        annotationsProp,
+        autoKeyPrefix
     ]);
     React.useEffect(()=>{
         setMeasurements((prev)=>{
@@ -354,7 +392,7 @@ export const ChartAnnotationLayer = /*#__PURE__*/ React.memo((props)=>{
     const measurementElements = [];
     const connectors = [];
     resolvedAnnotations.forEach(({ annotation, key })=>{
-        var _annotation_style, _annotation_style1, _annotation_style2, _annotation_style3, _annotation_style4, _annotation_style5, _annotation_style6, _annotation_style7, _annotation_style8, _annotation_style9, _annotation_style10, _annotation_style11, _annotation_style12, _annotation_style13, _annotation_style14, _annotation_style15, _annotation_style16, _annotation_style17, _annotation_accessibility, _annotation_accessibility1, _annotation_accessibility2;
+        var _annotation_style, _annotation_style1, _annotation_style2, _annotation_style3, _annotation_style4, _annotation_style5, _annotation_style6, _annotation_style7, _annotation_style8, _annotation_style9, _annotation_style10, _annotation_style11, _annotation_style12, _annotation_style13, _annotation_style14, _annotation_style15, _annotation_style16, _annotation_style17, _annotation_style18, _annotation_accessibility, _annotation_accessibility1, _annotation_accessibility2;
         const resolved = resolveCoordinates(annotation, context);
         if (!resolved) {
             return;
@@ -376,28 +414,30 @@ export const ChartAnnotationLayer = /*#__PURE__*/ React.memo((props)=>{
         const containerStyle = {
             maxWidth: layout === null || layout === void 0 ? void 0 : layout.maxWidth,
             ...hasCustomBackground ? {
-                backgroundColor: applyOpacityToColor(baseBackgroundColor, backgroundOpacity)
+                backgroundColor: applyOpacityToColor(baseBackgroundColor, backgroundOpacity, {
+                    preserveOriginalOpacity: ((_annotation_style4 = annotation.style) === null || _annotation_style4 === void 0 ? void 0 : _annotation_style4.opacity) === undefined
+                })
             } : {
                 backgroundColor: applyOpacityToColor(tokens.colorNeutralBackground1, DEFAULT_ANNOTATION_BACKGROUND_OPACITY)
             },
-            borderColor: (_annotation_style4 = annotation.style) === null || _annotation_style4 === void 0 ? void 0 : _annotation_style4.borderColor,
-            borderWidth: (_annotation_style5 = annotation.style) === null || _annotation_style5 === void 0 ? void 0 : _annotation_style5.borderWidth,
-            borderStyle: (_annotation_style_borderStyle = (_annotation_style6 = annotation.style) === null || _annotation_style6 === void 0 ? void 0 : _annotation_style6.borderStyle) !== null && _annotation_style_borderStyle !== void 0 ? _annotation_style_borderStyle : ((_annotation_style7 = annotation.style) === null || _annotation_style7 === void 0 ? void 0 : _annotation_style7.borderColor) ? 'solid' : undefined,
-            borderRadius: (_annotation_style8 = annotation.style) === null || _annotation_style8 === void 0 ? void 0 : _annotation_style8.borderRadius,
-            padding: (_annotation_style9 = annotation.style) === null || _annotation_style9 === void 0 ? void 0 : _annotation_style9.padding,
-            boxShadow: (_annotation_style10 = annotation.style) === null || _annotation_style10 === void 0 ? void 0 : _annotation_style10.boxShadow
+            borderColor: (_annotation_style5 = annotation.style) === null || _annotation_style5 === void 0 ? void 0 : _annotation_style5.borderColor,
+            borderWidth: (_annotation_style6 = annotation.style) === null || _annotation_style6 === void 0 ? void 0 : _annotation_style6.borderWidth,
+            borderStyle: (_annotation_style_borderStyle = (_annotation_style7 = annotation.style) === null || _annotation_style7 === void 0 ? void 0 : _annotation_style7.borderStyle) !== null && _annotation_style_borderStyle !== void 0 ? _annotation_style_borderStyle : ((_annotation_style8 = annotation.style) === null || _annotation_style8 === void 0 ? void 0 : _annotation_style8.borderColor) ? 'solid' : undefined,
+            borderRadius: (_annotation_style9 = annotation.style) === null || _annotation_style9 === void 0 ? void 0 : _annotation_style9.borderRadius,
+            padding: (_annotation_style10 = annotation.style) === null || _annotation_style10 === void 0 ? void 0 : _annotation_style10.padding,
+            boxShadow: (_annotation_style11 = annotation.style) === null || _annotation_style11 === void 0 ? void 0 : _annotation_style11.boxShadow
         };
         const contentStyle = {
-            color: (_annotation_style11 = annotation.style) === null || _annotation_style11 === void 0 ? void 0 : _annotation_style11.textColor,
-            fontSize: (_annotation_style12 = annotation.style) === null || _annotation_style12 === void 0 ? void 0 : _annotation_style12.fontSize,
-            fontWeight: (_annotation_style13 = annotation.style) === null || _annotation_style13 === void 0 ? void 0 : _annotation_style13.fontWeight,
+            color: (_annotation_style12 = annotation.style) === null || _annotation_style12 === void 0 ? void 0 : _annotation_style12.textColor,
+            fontSize: (_annotation_style13 = annotation.style) === null || _annotation_style13 === void 0 ? void 0 : _annotation_style13.fontSize,
+            fontWeight: (_annotation_style14 = annotation.style) === null || _annotation_style14 === void 0 ? void 0 : _annotation_style14.fontWeight,
             opacity: 1
         };
-        if (typeof ((_annotation_style14 = annotation.style) === null || _annotation_style14 === void 0 ? void 0 : _annotation_style14.rotation) === 'number' && !Number.isNaN(annotation.style.rotation)) {
+        if (typeof ((_annotation_style15 = annotation.style) === null || _annotation_style15 === void 0 ? void 0 : _annotation_style15.rotation) === 'number' && !Number.isNaN(annotation.style.rotation)) {
             containerStyle.transform = `rotate(${annotation.style.rotation}deg)`;
             containerStyle.transformOrigin = '50% 50%';
         }
-        const measurementSignature = createMeasurementSignature(annotationMarkupSignature, containerStyle, contentStyle, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style15 = annotation.style) === null || _annotation_style15 === void 0 ? void 0 : _annotation_style15.className);
+        const measurementSignature = createMeasurementSignature(annotationMarkupSignature, containerStyle, contentStyle, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style16 = annotation.style) === null || _annotation_style16 === void 0 ? void 0 : _annotation_style16.className);
         const measurementEntry = measurements[key];
         const isMeasurementValid = (measurementEntry === null || measurementEntry === void 0 ? void 0 : measurementEntry.signature) === measurementSignature;
         const measuredSize = isMeasurementValid ? measurementEntry : undefined;
@@ -464,7 +504,7 @@ export const ChartAnnotationLayer = /*#__PURE__*/ React.memo((props)=>{
             ...containerStyle
         };
         if (!isMeasurementValid) {
-            var _annotation_style18, _annotation_style19;
+            var _annotation_style19, _annotation_style20;
             measurementElements.push(/*#__PURE__*/ React.createElement("div", {
                 key: `${key}-measurement`,
                 ref: (node)=>{
@@ -475,13 +515,13 @@ export const ChartAnnotationLayer = /*#__PURE__*/ React.memo((props)=>{
                         }
                     }
                 },
-                className: mergeClasses(classes.annotation, classes.measurement, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style18 = annotation.style) === null || _annotation_style18 === void 0 ? void 0 : _annotation_style18.className),
+                className: 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),
                 style: measurementStyle,
                 "aria-hidden": true,
                 "data-annotation-key": key,
                 "data-chart-annotation-measurement": "true"
             }, /*#__PURE__*/ React.createElement("div", {
-                className: mergeClasses(classes.annotationContent, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style19 = annotation.style) === null || _annotation_style19 === void 0 ? void 0 : _annotation_style19.className),
+                className: mergeClasses(classes.annotationContent, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style20 = annotation.style) === null || _annotation_style20 === void 0 ? void 0 : _annotation_style20.className),
                 style: contentStyle
             }, renderSimpleMarkup(annotationMarkupNodes, `${key}-measurement`))));
         }
@@ -495,11 +535,11 @@ export const ChartAnnotationLayer = /*#__PURE__*/ React.memo((props)=>{
             className: mergeClasses(classes.annotationForeignObject),
             "data-annotation-key": key
         }, /*#__PURE__*/ React.createElement("div", {
-            className: mergeClasses(classes.annotation, layout === null || layout === void 0 ? void 0 : layout.className, (_annotation_style16 = annotation.style) === null || _annotation_style16 === void 0 ? void 0 : _annotation_style16.className),
+            className: 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),
             style: containerStyle,
             "data-annotation-key": key
         }, /*#__PURE__*/ React.createElement("div", {
-            className: mergeClasses(classes.annotationContent, (_annotation_style17 = annotation.style) === null || _annotation_style17 === void 0 ? void 0 : _annotation_style17.className),
+            className: mergeClasses(classes.annotationContent, (_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,