@fluentui/react-charting 5.24.32 → 5.24.34

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.
@@ -1,4 +1,4 @@
1
- define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities", "../../utilities/image-export-utils", "d3-color", "../../utilities/colors"], function (require, exports, tslib_1, React, Utilities_1, image_export_utils_1, d3, colors_1) {
1
+ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities", "../../utilities/image-export-utils", "d3-color", "../../utilities/colors", "../../utilities/utilities"], function (require, exports, tslib_1, React, Utilities_1, image_export_utils_1, d3, colors_1, utilities_1) {
2
2
  "use strict";
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  exports.ChartTableBase = void 0;
@@ -10,14 +10,19 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
10
10
  var rgb = color.rgb();
11
11
  return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();
12
12
  }
13
- function getSafeBackgroundColor(theme, foreground, background) {
13
+ function getSafeBackgroundColor(theme, chartContainer, foreground, background) {
14
14
  var fallbackFg = theme.semanticColors.bodyText;
15
15
  var fallbackBg = theme.semanticColors.bodyBackground;
16
- var fg = d3.color(foreground || fallbackFg);
17
- var bg = d3.color(background || fallbackBg);
18
- if (!fg || !bg) {
16
+ if (!chartContainer) {
19
17
  return fallbackBg;
20
18
  }
19
+ var resolvedFg = (0, utilities_1.resolveCSSVariables)(chartContainer, foreground || fallbackFg);
20
+ var resolvedBg = (0, utilities_1.resolveCSSVariables)(chartContainer, background || fallbackBg);
21
+ var fg = d3.color(resolvedFg);
22
+ var bg = d3.color(resolvedBg);
23
+ if (!fg || !bg) {
24
+ return resolvedBg;
25
+ }
21
26
  var contrast = (0, colors_1.getColorContrast)(fg.formatHex(), bg.formatHex());
22
27
  if (contrast >= 3) {
23
28
  return bg.formatHex();
@@ -102,7 +107,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
102
107
  style.backgroundColor = sharedBackgroundColor;
103
108
  }
104
109
  else if (fg || bg) {
105
- style.backgroundColor = getSafeBackgroundColor(theme, fg, bg);
110
+ style.backgroundColor = getSafeBackgroundColor(theme, _this._rootElem, fg, bg);
106
111
  }
107
112
  return (React.createElement("th", { key: idx, className: classNames.headerCell, style: style }, header.value));
108
113
  }))),
@@ -111,7 +116,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
111
116
  var fg = style.color;
112
117
  var bg = style.backgroundColor;
113
118
  if (fg || bg) {
114
- style.backgroundColor = getSafeBackgroundColor(theme, fg, bg);
119
+ style.backgroundColor = getSafeBackgroundColor(theme, _this._rootElem, fg, bg);
115
120
  }
116
121
  return (React.createElement("td", { key: colIdx, className: classNames.bodyCell, style: style }, cell.value));
117
122
  }))); })))))))));
@@ -1 +1 @@
1
- {"version":3,"file":"ChartTable.base.js","sourceRoot":"../src/","sources":["components/ChartTable/ChartTable.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { IChartTableProps } from './ChartTable.types';\nimport { IChartTableStyleProps, IChartTableStyles } from '../../index';\nimport { classNamesFunction, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities';\nimport { IImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\nimport * as d3 from 'd3-color';\nimport { getColorContrast } from '../../utilities/colors';\nimport { ITheme } from '@fluentui/react';\n\nfunction invertHexColor(hex: string, theme: ITheme): string {\n const color = d3.color(hex);\n if (!color) {\n return theme.semanticColors.bodyText!;\n }\n const rgb = color.rgb();\n return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();\n}\n\nfunction getSafeBackgroundColor(theme: ITheme, foreground?: string, background?: string): string {\n const fallbackFg = theme.semanticColors.bodyText;\n const fallbackBg = theme.semanticColors.bodyBackground;\n\n const fg = d3.color(foreground || fallbackFg);\n const bg = d3.color(background || fallbackBg);\n if (!fg || !bg) {\n return fallbackBg;\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(), theme);\n const invertedContrast = getColorContrast(fg.formatHex(), invertedBg);\n return invertedContrast >= 3 ? invertedBg : fallbackBg;\n}\n\nconst getClassNames = classNamesFunction<IChartTableStyleProps, IChartTableStyles>();\n\nexport class ChartTableBase extends React.Component<IChartTableProps> {\n private _isRTL: boolean;\n private _rootElem: HTMLDivElement | null;\n\n constructor(props: IChartTableProps) {\n super(props);\n initializeComponentRef(this);\n this._isRTL = getRTL(props.theme);\n }\n public toImage = (opts?: IImageExportOptions): Promise<string> => {\n return toImage(this._rootElem, undefined, this._isRTL, opts);\n };\n\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n public render(): JSX.Element {\n const { headers, rows, width, height, styles, theme } = this.props;\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n });\n\n if (!headers || headers.length === 0) {\n return <div>No data available</div>;\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 => (this._rootElem = el)}\n className={classNames.root}\n style={{ height: height ? `${height}px` : '650px', overflow: 'hidden' }}\n >\n <svg width={width ?? '100%'} height={height ?? '650px'} className={classNames.chart}>\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={classNames.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(theme!, fg, bg);\n }\n return (\n <th key={idx} className={classNames.headerCell} style={style}>\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(theme!, fg, bg);\n }\n return (\n <td key={colIdx} className={classNames.bodyCell} style={style}>\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"]}
1
+ {"version":3,"file":"ChartTable.base.js","sourceRoot":"../src/","sources":["components/ChartTable/ChartTable.base.tsx"],"names":[],"mappings":";;;;IAWA,SAAS,cAAc,CAAC,GAAW,EAAE,KAAa;QAChD,IAAM,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,KAAK,CAAC,cAAc,CAAC,QAAS,CAAC;QACxC,CAAC;QACD,IAAM,GAAG,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;QACxB,OAAO,EAAE,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;IACnE,CAAC;IAED,SAAS,sBAAsB,CAC7B,KAAa,EACb,cAA2B,EAC3B,UAAmB,EACnB,UAAmB;QAEnB,IAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;QACjD,IAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;QACvD,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,OAAO,UAAU,CAAC;QACpB,CAAC;QAED,IAAM,UAAU,GAAG,IAAA,+BAAmB,EAAC,cAAc,EAAE,UAAU,IAAI,UAAU,CAAC,CAAC;QACjF,IAAM,UAAU,GAAG,IAAA,+BAAmB,EAAC,cAAc,EAAE,UAAU,IAAI,UAAU,CAAC,CAAC;QAEjF,IAAM,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAChC,IAAM,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;YACf,OAAO,UAAU,CAAC;QACpB,CAAC;QACD,IAAM,QAAQ,GAAG,IAAA,yBAAgB,EAAC,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC;QAClE,IAAI,QAAQ,IAAI,CAAC,EAAE,CAAC;YAClB,OAAO,EAAE,CAAC,SAAS,EAAE,CAAC;QACxB,CAAC;QAED,IAAM,UAAU,GAAG,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,EAAE,KAAK,CAAC,CAAC;QACzD,IAAM,gBAAgB,GAAG,IAAA,yBAAgB,EAAC,EAAE,CAAC,SAAS,EAAE,EAAE,UAAU,CAAC,CAAC;QACtE,OAAO,gBAAgB,IAAI,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;IACzD,CAAC;IAED,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAA4C,CAAC;IAErF;QAAoC,0CAAiC;QAInE,wBAAY,KAAuB;YACjC,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;YAIR,aAAO,GAAG,UAAC,IAA0B;gBAC1C,OAAO,IAAA,4BAAO,EAAC,KAAI,CAAC,SAAS,EAAE,SAAS,EAAE,KAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;YAC/D,CAAC,CAAC;YALA,IAAA,kCAAsB,EAAC,KAAI,CAAC,CAAC;YAC7B,KAAI,CAAC,MAAM,GAAG,IAAA,kBAAM,EAAC,KAAK,CAAC,KAAK,CAAC,CAAC;;QACpC,CAAC;QAKD,4DAA4D;QACrD,+BAAM,GAAb;YAAA,iBA+GC;;YA9GO,IAAA,KAAkD,IAAI,CAAC,KAAK,EAA1D,OAAO,aAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,KAAK,WAAe,CAAC;YAEnE,IAAM,UAAU,GAAG,aAAa,CAAC,MAAO,EAAE;gBACxC,KAAK,EAAE,KAAM;aACd,CAAC,CAAC;YAEH,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACrC,OAAO,qDAA4B,CAAC;YACtC,CAAC;YACD,IAAM,UAAU,GAAG,IAAI,GAAG,EAAU,CAAC;YACrC,OAAO,CAAC,OAAO,CAAC,UAAA,MAAM;;gBACpB,IAAM,EAAE,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,eAAe,CAAC;gBAC1C,IAAM,UAAU,GAAG,MAAA,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC,0CAAE,SAAS,EAAE,CAAC;gBACnD,IAAI,UAAU,EAAE,CAAC;oBACf,UAAU,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;gBAC7B,CAAC;YACH,CAAC,CAAC,CAAC;YACH,IAAI,qBAAyC,CAAC;YAC9C,IAAI,mBAAmB,GAAG,KAAK,CAAC;YAEhC;;;;;;;;;cASE;YACF,IAAI,UAAU,CAAC,IAAI,KAAK,CAAC,IAAI,UAAU,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;gBACnD,IAAM,WAAW,GAAG,UAAU,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;gBAClG,KAAqB,UAAO,EAAP,mBAAO,EAAP,qBAAO,EAAP,IAAO,EAAE,CAAC;oBAA1B,IAAM,MAAM,gBAAA;oBACf,IAAM,EAAE,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,KAAK,CAAC;oBAChC,IAAI,EAAE,IAAI,IAAA,yBAAgB,EAAC,EAAE,EAAE,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;wBACjD,qBAAqB,GAAG,WAAW,CAAC;wBACpC,mBAAmB,GAAG,IAAI,CAAC;wBAC3B,MAAM;oBACR,CAAC;gBACH,CAAC;YACH,CAAC;YAED,OAAO,CACL,6BACE,GAAG,EAAE,UAAA,EAAE,IAAI,OAAA,CAAC,KAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAArB,CAAqB,EAChC,SAAS,EAAE,UAAU,CAAC,IAAI,EAC1B,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,UAAG,MAAM,OAAI,CAAC,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE;gBAEvE,6BAAK,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,MAAM,EAAE,MAAM,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,KAAK;oBACjF,uCAAe,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM;wBACnD,6BACE,KAAK,EAAE;gCACL,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,UAAG,MAAM,OAAI,CAAC,CAAC,CAAC,OAAO;gCAC3C,SAAS,EAAE,MAAM;gCACjB,SAAS,EAAE,MAAM;6BAClB;4BAED,+BACE,SAAS,EAAE,UAAU,CAAC,KAAK,EAC3B,KAAK,EAAE;oCACL,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,UAAG,KAAK,OAAI,CAAC,CAAC,CAAC,MAAM;iCACrC;gCAED;oCACE,gCACG,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,GAAG;wCACvB,IAAM,KAAK,wBAAQ,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAE,CAAC;wCACnC,IAAM,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC;wCACvB,IAAM,EAAE,GAAG,KAAK,CAAC,eAAe,CAAC;wCAEjC,IAAI,mBAAmB,EAAE,CAAC;4CACxB,KAAK,CAAC,eAAe,GAAG,qBAAqB,CAAC;wCAChD,CAAC;6CAAM,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC;4CACpB,KAAK,CAAC,eAAe,GAAG,sBAAsB,CAAC,KAAM,EAAE,KAAI,CAAC,SAAU,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;wCAClF,CAAC;wCACD,OAAO,CACL,4BAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,KAAK,EAAE,KAAK,IACzD,MAAM,CAAC,KAAK,CACV,CACN,CAAC;oCACJ,CAAC,CAAC,CACC,CACC;gCACP,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAC1B,mCACG,IAAI,CAAC,GAAG,CAAC,UAAC,GAAG,EAAE,MAAM,IAAK,OAAA,CACzB,4BAAI,GAAG,EAAE,MAAM,IACZ,GAAG,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,MAAM;oCACpB,IAAM,KAAK,wBAAQ,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,CAAE,CAAC;oCACjC,IAAM,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC;oCACvB,IAAM,EAAE,GAAG,KAAK,CAAC,eAAe,CAAC;oCACjC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC;wCACb,KAAK,CAAC,eAAe,GAAG,sBAAsB,CAAC,KAAM,EAAE,KAAI,CAAC,SAAU,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;oCAClF,CAAC;oCACD,OAAO,CACL,4BAAI,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,IAC1D,IAAI,CAAC,KAAK,CACR,CACN,CAAC;gCACJ,CAAC,CAAC,CACC,CACN,EAhB0B,CAgB1B,CAAC,CACI,CACT,CACK,CACJ,CACQ,CACZ,CACF,CACP,CAAC;QACJ,CAAC;QACH,qBAAC;IAAD,CAAC,AA9HD,CAAoC,KAAK,CAAC,SAAS,GA8HlD;IA9HY,wCAAc","sourcesContent":["import * as React from 'react';\nimport { IChartTableProps } from './ChartTable.types';\nimport { IChartTableStyleProps, IChartTableStyles } from '../../index';\nimport { classNamesFunction, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities';\nimport { IImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\nimport * as d3 from 'd3-color';\nimport { getColorContrast } from '../../utilities/colors';\nimport { ITheme } from '@fluentui/react';\nimport { resolveCSSVariables } from '../../utilities/utilities';\n\nfunction invertHexColor(hex: string, theme: ITheme): string {\n const color = d3.color(hex);\n if (!color) {\n return theme.semanticColors.bodyText!;\n }\n const rgb = color.rgb();\n return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();\n}\n\nfunction getSafeBackgroundColor(\n theme: ITheme,\n chartContainer: HTMLElement,\n foreground?: string,\n background?: string,\n): string {\n const fallbackFg = theme.semanticColors.bodyText;\n const fallbackBg = theme.semanticColors.bodyBackground;\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(), theme);\n const invertedContrast = getColorContrast(fg.formatHex(), invertedBg);\n return invertedContrast >= 3 ? invertedBg : fallbackBg;\n}\n\nconst getClassNames = classNamesFunction<IChartTableStyleProps, IChartTableStyles>();\n\nexport class ChartTableBase extends React.Component<IChartTableProps> {\n private _isRTL: boolean;\n private _rootElem: HTMLDivElement | null;\n\n constructor(props: IChartTableProps) {\n super(props);\n initializeComponentRef(this);\n this._isRTL = getRTL(props.theme);\n }\n public toImage = (opts?: IImageExportOptions): Promise<string> => {\n return toImage(this._rootElem, undefined, this._isRTL, opts);\n };\n\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n public render(): JSX.Element {\n const { headers, rows, width, height, styles, theme } = this.props;\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n });\n\n if (!headers || headers.length === 0) {\n return <div>No data available</div>;\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 => (this._rootElem = el)}\n className={classNames.root}\n style={{ height: height ? `${height}px` : '650px', overflow: 'hidden' }}\n >\n <svg width={width ?? '100%'} height={height ?? '650px'} className={classNames.chart}>\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={classNames.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(theme!, this._rootElem!, fg, bg);\n }\n return (\n <th key={idx} className={classNames.headerCell} style={style}>\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(theme!, this._rootElem!, fg, bg);\n }\n return (\n <td key={colIdx} className={classNames.bodyCell} style={style}>\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"]}
@@ -407,12 +407,12 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
407
407
  };
408
408
  exports.transformPlotlyJsonToDonutProps = transformPlotlyJsonToDonutProps;
409
409
  var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme, fallbackVSBC) {
410
- var _a, _b, _c, _d;
410
+ var _a, _b, _c, _d, _e, _f, _g, _h;
411
411
  var mapXToDataPoints = {};
412
412
  var yMaxValue = 0;
413
413
  var yMinValue = 0;
414
414
  var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
415
- var _e = getLegendProps(input.data, input.layout, isMultiPlot), legends = _e.legends, hideLegend = _e.hideLegend;
415
+ var _j = getLegendProps(input.data, input.layout, isMultiPlot), legends = _j.legends, hideLegend = _j.hideLegend;
416
416
  var colorScale = undefined;
417
417
  var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
418
418
  input.data.forEach(function (series, index1) {
@@ -483,8 +483,53 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
483
483
  });
484
484
  });
485
485
  });
486
+ var xCategories = (_b = (_a = input.data[0]) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : [];
487
+ ((_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.shapes) !== null && _d !== void 0 ? _d : [])
488
+ .filter(function (shape) { return shape.type === 'line'; })
489
+ .forEach(function (shape, shapeIdx) {
490
+ var _a, _b, _c;
491
+ var lineColor = (_a = shape.line) === null || _a === void 0 ? void 0 : _a.color;
492
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
493
+ var resolveX = function (val) {
494
+ if (typeof val === 'number' && Array.isArray(xCategories) && xCategories[val] !== undefined) {
495
+ return xCategories[val];
496
+ }
497
+ return val;
498
+ };
499
+ var x0Key = resolveX(shape.x0);
500
+ var x1Key = resolveX(shape.x1);
501
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
502
+ var resolveY = function (val) {
503
+ if (shape.yref === 'paper') {
504
+ if (val === 0) {
505
+ return yMinValue;
506
+ }
507
+ if (val === 1) {
508
+ return yMaxValue;
509
+ }
510
+ return yMinValue + val * (yMaxValue - yMinValue);
511
+ }
512
+ return val;
513
+ };
514
+ var y0Val = resolveY(shape.y0);
515
+ var y1Val = resolveY(shape.y1);
516
+ mapXToDataPoints[x0Key].lineData.push({
517
+ legend: "Reference_".concat(shapeIdx),
518
+ y: y0Val,
519
+ color: (_b = (0, d3_color_1.rgb)(lineColor).formatHex8()) !== null && _b !== void 0 ? _b : lineColor,
520
+ lineOptions: getLineOptions(shape.line),
521
+ useSecondaryYScale: false,
522
+ });
523
+ mapXToDataPoints[x1Key].lineData.push({
524
+ legend: "Reference_".concat(shapeIdx),
525
+ y: y1Val,
526
+ color: (_c = (0, d3_color_1.rgb)(lineColor).formatHex8()) !== null && _c !== void 0 ? _c : lineColor,
527
+ lineOptions: getLineOptions(shape.line),
528
+ useSecondaryYScale: false,
529
+ });
530
+ });
486
531
  var vsbcData = Object.values(mapXToDataPoints);
487
- return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: vsbcData, width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, wrapXAxisLables: typeof ((_d = vsbcData[0]) === null || _d === void 0 ? void 0 : _d.xAxisPoint) === 'string' }), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getBarProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout));
532
+ return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: vsbcData, width: (_e = input.layout) === null || _e === void 0 ? void 0 : _e.width, height: (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : 350, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, wrapXAxisLables: typeof ((_h = vsbcData[0]) === null || _h === void 0 ? void 0 : _h.xAxisPoint) === 'string' }), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getBarProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout));
488
533
  };
489
534
  exports.transformPlotlyJsonToVSBCProps = transformPlotlyJsonToVSBCProps;
490
535
  var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -658,7 +703,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
658
703
  };
659
704
  exports.transformPlotlyJsonToScatterChartProps = transformPlotlyJsonToScatterChartProps;
660
705
  var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chartType, colorMap, colorwayType, isDarkTheme) {
661
- var _a, _b, _c, _d;
706
+ var _a, _b, _c, _d, _e, _f;
662
707
  var isScatterMarkers = [
663
708
  'text',
664
709
  'markers',
@@ -673,7 +718,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
673
718
  var isScatterChart = chartType === 'scatter';
674
719
  var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
675
720
  var mode = 'tonexty';
676
- var _e = getLegendProps(input.data, input.layout, isMultiPlot), legends = _e.legends, hideLegend = _e.hideLegend;
721
+ var _g = getLegendProps(input.data, input.layout, isMultiPlot), legends = _g.legends, hideLegend = _g.hideLegend;
677
722
  var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
678
723
  var chartData = input.data
679
724
  .map(function (series, index) {
@@ -733,6 +778,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
733
778
  axisLabel: series.__axisLabel
734
779
  ? series.__axisLabel
735
780
  : {},
781
+ fill: series.fill,
736
782
  }
737
783
  : {})),
738
784
  useSecondaryYScale: usesSecondaryYScale(series, input.layout),
@@ -740,6 +786,22 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
740
786
  });
741
787
  })
742
788
  .flat();
789
+ var lineShape = ((_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.shapes) !== null && _c !== void 0 ? _c : [])
790
+ .filter(function (shape) { return shape.type === 'line'; })
791
+ .map(function (shape, shapeIdx) {
792
+ var _a, _b;
793
+ var lineColor = (_a = shape.line) === null || _a === void 0 ? void 0 : _a.color;
794
+ return {
795
+ legend: "Reference_".concat(shapeIdx),
796
+ data: [
797
+ { x: shape.x0, y: shape.y0 },
798
+ { x: shape.x1, y: shape.y1 },
799
+ ],
800
+ color: (_b = (0, d3_color_1.rgb)(lineColor).formatHex8()) !== null && _b !== void 0 ? _b : lineColor,
801
+ lineOptions: getLineOptions(shape.line),
802
+ useSecondaryYScale: false,
803
+ };
804
+ });
743
805
  var yMinMax = getYMinMaxValues(input.data[0], input.layout);
744
806
  if (yMinMax.yMinValue === undefined && yMinMax.yMaxValue === undefined) {
745
807
  var yMinMaxValues = (0, utilities_1.findNumericMinMaxOfY)(chartData);
@@ -748,12 +810,12 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
748
810
  }
749
811
  var numDataPoints = chartData.reduce(function (total, lineChartPoints) { return total + lineChartPoints.data.length; }, 0);
750
812
  var chartProps = {
751
- lineChartData: chartData,
813
+ lineChartData: tslib_1.__spreadArray(tslib_1.__spreadArray([], chartData, true), lineShape, true),
752
814
  };
753
815
  var scatterChartProps = {
754
816
  scatterChartData: chartData,
755
817
  };
756
- var commonProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ supportNegativeData: true }, secondaryYAxisValues), { width: (_b = input.layout) === null || _b === void 0 ? void 0 : _b.width, height: (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000 }), getTitles(input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getAxisScaleTypeProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout));
818
+ var commonProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ supportNegativeData: true }, secondaryYAxisValues), { width: (_d = input.layout) === null || _d === void 0 ? void 0 : _d.width, height: (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000 }), getTitles(input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getAxisScaleTypeProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout));
757
819
  if (isAreaChart) {
758
820
  return tslib_1.__assign({ data: chartProps, mode: mode }, commonProps);
759
821
  }
@@ -1131,8 +1193,20 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
1131
1193
  }
1132
1194
  return raw;
1133
1195
  }
1196
+ function mergeCells(tableCells, templateCells) {
1197
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
1198
+ return {
1199
+ values: (_b = (_a = tableCells === null || tableCells === void 0 ? void 0 : tableCells.values) !== null && _a !== void 0 ? _a : templateCells === null || templateCells === void 0 ? void 0 : templateCells.values) !== null && _b !== void 0 ? _b : [],
1200
+ align: (_c = tableCells === null || tableCells === void 0 ? void 0 : tableCells.align) !== null && _c !== void 0 ? _c : templateCells === null || templateCells === void 0 ? void 0 : templateCells.align,
1201
+ fill: tslib_1.__assign(tslib_1.__assign({}, ((_d = templateCells === null || templateCells === void 0 ? void 0 : templateCells.fill) !== null && _d !== void 0 ? _d : {})), ((_e = tableCells === null || tableCells === void 0 ? void 0 : tableCells.fill) !== null && _e !== void 0 ? _e : {})),
1202
+ font: tslib_1.__assign(tslib_1.__assign({}, ((_f = templateCells === null || templateCells === void 0 ? void 0 : templateCells.font) !== null && _f !== void 0 ? _f : {})), ((_g = tableCells === null || tableCells === void 0 ? void 0 : tableCells.font) !== null && _g !== void 0 ? _g : {})),
1203
+ format: (_h = tableCells === null || tableCells === void 0 ? void 0 : tableCells.format) !== null && _h !== void 0 ? _h : templateCells === null || templateCells === void 0 ? void 0 : templateCells.format,
1204
+ prefix: (_j = tableCells === null || tableCells === void 0 ? void 0 : tableCells.prefix) !== null && _j !== void 0 ? _j : templateCells === null || templateCells === void 0 ? void 0 : templateCells.prefix,
1205
+ suffix: (_k = tableCells === null || tableCells === void 0 ? void 0 : tableCells.suffix) !== null && _k !== void 0 ? _k : templateCells === null || templateCells === void 0 ? void 0 : templateCells.suffix,
1206
+ };
1207
+ }
1134
1208
  var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
1135
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
1209
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
1136
1210
  var tableData = input.data[0];
1137
1211
  var normalizeHeaders = function (values, header) {
1138
1212
  var cleanedValues = Array.isArray(values[0])
@@ -1156,9 +1230,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
1156
1230
  });
1157
1231
  };
1158
1232
  var columns = (_b = (_a = tableData.cells) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : [];
1159
- var cells = tableData.cells && Object.keys(tableData.cells).length > 0
1160
- ? tableData.cells
1161
- : (_g = (_f = (_e = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.template) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.table) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.cells;
1233
+ var cells = mergeCells(tableData.cells, (_g = (_f = (_e = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.template) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.table) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.cells);
1162
1234
  var rows = columns[0].map(function (_, rowIndex) {
1163
1235
  return columns.map(function (col, colIndex) {
1164
1236
  var _a, _b, _c;
@@ -1181,13 +1253,19 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
1181
1253
  var styles = {
1182
1254
  root: tslib_1.__assign({}, (((_j = (_h = input.layout) === null || _h === void 0 ? void 0 : _h.font) === null || _j === void 0 ? void 0 : _j.size) ? { fontSize: input.layout.font.size } : {})),
1183
1255
  };
1256
+ var templateHeader = (_p = (_o = (_m = (_l = (_k = input.layout) === null || _k === void 0 ? void 0 : _k.template) === null || _l === void 0 ? void 0 : _l.data) === null || _m === void 0 ? void 0 : _m.table) === null || _o === void 0 ? void 0 : _o[0]) === null || _p === void 0 ? void 0 : _p.header;
1257
+ var tableHeader = tableData.header;
1258
+ var header = {
1259
+ align: (_q = tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.align) !== null && _q !== void 0 ? _q : templateHeader === null || templateHeader === void 0 ? void 0 : templateHeader.align,
1260
+ fill: tslib_1.__assign(tslib_1.__assign({}, ((_r = templateHeader === null || templateHeader === void 0 ? void 0 : templateHeader.fill) !== null && _r !== void 0 ? _r : {})), ((_s = tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.fill) !== null && _s !== void 0 ? _s : {})),
1261
+ font: tslib_1.__assign(tslib_1.__assign({}, ((_t = templateHeader === null || templateHeader === void 0 ? void 0 : templateHeader.font) !== null && _t !== void 0 ? _t : {})), ((_u = tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.font) !== null && _u !== void 0 ? _u : {})),
1262
+ values: (_w = (_v = tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.values) !== null && _v !== void 0 ? _v : templateHeader === null || templateHeader === void 0 ? void 0 : templateHeader.values) !== null && _w !== void 0 ? _w : [],
1263
+ };
1184
1264
  return {
1185
- headers: normalizeHeaders((_l = (_k = tableData.header) === null || _k === void 0 ? void 0 : _k.values) !== null && _l !== void 0 ? _l : [], tableData.header && Object.keys(tableData.header).length > 0
1186
- ? tableData.header
1187
- : (_p = (_o = (_m = input.layout) === null || _m === void 0 ? void 0 : _m.template) === null || _o === void 0 ? void 0 : _o.data) === null || _p === void 0 ? void 0 : _p.table[0].header),
1265
+ headers: normalizeHeaders((_y = (_x = tableData.header) === null || _x === void 0 ? void 0 : _x.values) !== null && _y !== void 0 ? _y : [], header),
1188
1266
  rows: rows,
1189
- width: (_q = input.layout) === null || _q === void 0 ? void 0 : _q.width,
1190
- height: (_r = input.layout) === null || _r === void 0 ? void 0 : _r.height,
1267
+ width: (_z = input.layout) === null || _z === void 0 ? void 0 : _z.width,
1268
+ height: (_0 = input.layout) === null || _0 === void 0 ? void 0 : _0.height,
1191
1269
  styles: styles,
1192
1270
  };
1193
1271
  };