npm - @fluentui/react-charting - Versions diffs - 5.24.31 → 5.24.33 - Mend

@fluentui/react-charting 5.24.31 → 5.24.33

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

package/lib/components/ChartTable/ChartTable.base.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { classNamesFunction, getRTL, initializeComponentRef } from '@fluentui/re
 import { toImage } from '../../utilities/image-export-utils';
 import * as d3 from 'd3-color';
 import { getColorContrast } from '../../utilities/colors';
+import { resolveCSSVariables } from '../../utilities/utilities';
 function invertHexColor(hex, theme) {
     var color = d3.color(hex);
     if (!color) {
@@ -12,14 +13,19 @@ function invertHexColor(hex, theme) {
     var rgb = color.rgb();
     return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();
 }
-function getSafeBackgroundColor(theme, foreground, background) {
+function getSafeBackgroundColor(theme, chartContainer, foreground, background) {
     var fallbackFg = theme.semanticColors.bodyText;
     var fallbackBg = theme.semanticColors.bodyBackground;
-    var fg = d3.color(foreground || fallbackFg);
-    var bg = d3.color(background || fallbackBg);
-    if (!fg || !bg) {
+    if (!chartContainer) {
         return fallbackBg;
     }
+    var resolvedFg = resolveCSSVariables(chartContainer, foreground || fallbackFg);
+    var resolvedBg = resolveCSSVariables(chartContainer, background || fallbackBg);
+    var fg = d3.color(resolvedFg);
+    var bg = d3.color(resolvedBg);
+    if (!fg || !bg) {
+        return resolvedBg;
+    }
     var contrast = getColorContrast(fg.formatHex(), bg.formatHex());
     if (contrast >= 3) {
         return bg.formatHex();
@@ -104,7 +110,7 @@ var ChartTableBase = /** @class */ (function (_super) {
                                         style.backgroundColor = sharedBackgroundColor;
                                     }
                                     else if (fg || bg) {
-                                        style.backgroundColor = getSafeBackgroundColor(theme, fg, bg);
+                                        style.backgroundColor = getSafeBackgroundColor(theme, _this._rootElem, fg, bg);
                                     }
                                     return (React.createElement("th", { key: idx, className: classNames.headerCell, style: style }, header.value));
                                 }))),
@@ -113,7 +119,7 @@ var ChartTableBase = /** @class */ (function (_super) {
                                 var fg = style.color;
                                 var bg = style.backgroundColor;
                                 if (fg || bg) {
-                                    style.backgroundColor = getSafeBackgroundColor(theme, fg, bg);
+                                    style.backgroundColor = getSafeBackgroundColor(theme, _this._rootElem, fg, bg);
                                 }
                                 return (React.createElement("td", { key: colIdx, className: classNames.bodyCell, style: style }, cell.value));
                             }))); })))))))));

package/lib/components/ChartTable/ChartTable.base.js.map CHANGED Viewed

	@@ -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":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAEnG,OAAO,EAAE,OAAO,EAAE,MAAM,oCAAoC,CAAC;AAC7D,OAAO,KAAK,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEhE,SAAS,cAAc,CAAC,GAAW,EAAE,KAAa;IAChD,IAAM,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,KAAK,CAAC,cAAc,CAAC,QAAS,CAAC;IACxC,CAAC;IACD,IAAM,GAAG,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;IACxB,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;AACnE,CAAC;AAED,SAAS,sBAAsB,CAC7B,KAAa,EACb,cAA2B,EAC3B,UAAmB,EACnB,UAAmB;IAEnB,IAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;IACjD,IAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvD,IAAI,CAAC,cAAc,EAAE,CAAC;QACpB,OAAO,UAAU,CAAC;IACpB,CAAC;IAED,IAAM,UAAU,GAAG,mBAAmB,CAAC,cAAc,EAAE,UAAU,IAAI,UAAU,CAAC,CAAC;IACjF,IAAM,UAAU,GAAG,mBAAmB,CAAC,cAAc,EAAE,UAAU,IAAI,UAAU,CAAC,CAAC;IAEjF,IAAM,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAChC,IAAM,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAEhC,IAAI,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;QACf,OAAO,UAAU,CAAC;IACpB,CAAC;IACD,IAAM,QAAQ,GAAG,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC;IAClE,IAAI,QAAQ,IAAI,CAAC,EAAE,CAAC;QAClB,OAAO,EAAE,CAAC,SAAS,EAAE,CAAC;IACxB,CAAC;IAED,IAAM,UAAU,GAAG,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,EAAE,KAAK,CAAC,CAAC;IACzD,IAAM,gBAAgB,GAAG,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,EAAE,UAAU,CAAC,CAAC;IACtE,OAAO,gBAAgB,IAAI,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;AACzD,CAAC;AAED,IAAM,aAAa,GAAG,kBAAkB,EAA4C,CAAC;AAErF;IAAoC,kCAAiC;IAInE,wBAAY,KAAuB;QACjC,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QAIR,aAAO,GAAG,UAAC,IAA0B;YAC1C,OAAO,OAAO,CAAC,KAAI,CAAC,SAAS,EAAE,SAAS,EAAE,KAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QAC/D,CAAC,CAAC;QALA,sBAAsB,CAAC,KAAI,CAAC,CAAC;QAC7B,KAAI,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;;IACpC,CAAC;IAKD,4DAA4D;IACrD,+BAAM,GAAb;QAAA,iBA+GC;;QA9GO,IAAA,KAAkD,IAAI,CAAC,KAAK,EAA1D,OAAO,aAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,KAAK,WAAe,CAAC;QAEnE,IAAM,UAAU,GAAG,aAAa,CAAC,MAAO,EAAE;YACxC,KAAK,EAAE,KAAM;SACd,CAAC,CAAC;QAEH,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACrC,OAAO,qDAA4B,CAAC;QACtC,CAAC;QACD,IAAM,UAAU,GAAG,IAAI,GAAG,EAAU,CAAC;QACrC,OAAO,CAAC,OAAO,CAAC,UAAA,MAAM;;YACpB,IAAM,EAAE,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,eAAe,CAAC;YAC1C,IAAM,UAAU,GAAG,MAAA,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC,0CAAE,SAAS,EAAE,CAAC;YACnD,IAAI,UAAU,EAAE,CAAC;gBACf,UAAU,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC,CAAC,CAAC;QACH,IAAI,qBAAyC,CAAC;QAC9C,IAAI,mBAAmB,GAAG,KAAK,CAAC;QAEhC;;;;;;;;;UASE;QACF,IAAI,UAAU,CAAC,IAAI,KAAK,CAAC,IAAI,UAAU,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;YACnD,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;YAClG,KAAqB,UAAO,EAAP,mBAAO,EAAP,qBAAO,EAAP,IAAO,EAAE,CAAC;gBAA1B,IAAM,MAAM,gBAAA;gBACf,IAAM,EAAE,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,KAAK,CAAC;gBAChC,IAAI,EAAE,IAAI,gBAAgB,CAAC,EAAE,EAAE,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;oBACjD,qBAAqB,GAAG,WAAW,CAAC;oBACpC,mBAAmB,GAAG,IAAI,CAAC;oBAC3B,MAAM;gBACR,CAAC;YACH,CAAC;QACH,CAAC;QAED,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;YAEvE,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;gBACjF,uCAAe,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM;oBACnD,6BACE,KAAK,EAAE;4BACL,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,UAAG,MAAM,OAAI,CAAC,CAAC,CAAC,OAAO;4BAC3C,SAAS,EAAE,MAAM;4BACjB,SAAS,EAAE,MAAM;yBAClB;wBAED,+BACE,SAAS,EAAE,UAAU,CAAC,KAAK,EAC3B,KAAK,EAAE;gCACL,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,UAAG,KAAK,OAAI,CAAC,CAAC,CAAC,MAAM;6BACrC;4BAED;gCACE,gCACG,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,GAAG;oCACvB,IAAM,KAAK,gBAAQ,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAE,CAAC;oCACnC,IAAM,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC;oCACvB,IAAM,EAAE,GAAG,KAAK,CAAC,eAAe,CAAC;oCAEjC,IAAI,mBAAmB,EAAE,CAAC;wCACxB,KAAK,CAAC,eAAe,GAAG,qBAAqB,CAAC;oCAChD,CAAC;yCAAM,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC;wCACpB,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,GAAG,EAAE,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,KAAK,EAAE,KAAK,IACzD,MAAM,CAAC,KAAK,CACV,CACN,CAAC;gCACJ,CAAC,CAAC,CACC,CACC;4BACP,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;gCACpB,IAAM,KAAK,gBAAQ,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,CAAE,CAAC;gCACjC,IAAM,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC;gCACvB,IAAM,EAAE,GAAG,KAAK,CAAC,eAAe,CAAC;gCACjC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC;oCACb,KAAK,CAAC,eAAe,GAAG,sBAAsB,CAAC,KAAM,EAAE,KAAI,CAAC,SAAU,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;gCAClF,CAAC;gCACD,OAAO,CACL,4BAAI,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,IAC1D,IAAI,CAAC,KAAK,CACR,CACN,CAAC;4BACJ,CAAC,CAAC,CACC,CACN,EAhB0B,CAgB1B,CAAC,CACI,CACT,CACK,CACJ,CACQ,CACZ,CACF,CACP,CAAC;IACJ,CAAC;IACH,qBAAC;AAAD,CAAC,AA9HD,CAAoC,KAAK,CAAC,SAAS,GA8HlD","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"]}

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

@@ -38,7 +38,6 @@ var ResponsiveChartTable = withResponsiveContainer(ChartTable);
 var ResponsiveGanttChart = withResponsiveContainer(GanttChart);
 // Default x-axis key for grouping traces. Also applicable for PieData and SankeyData where x-axis is not defined.
 var DEFAULT_XAXIS = 'x';
-var FALLBACK_TYPE = 'fallback';
 var useColorMapping = function () {
     var colorMap = React.useRef(new Map());
     return colorMap;
@@ -286,9 +285,7 @@ export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
             var xAxisKey = _a[0], index = _a[1];
             var plotlyInputForGroup = __assign(__assign({}, plotlyInputWithValidData), { data: index.map(function (idx) { return plotlyInputWithValidData.data[idx]; }) });
             var filteredTracesInfo = validTracesFilteredIndex.filter(function (trace) { return index.includes(trace.index); });
-            var chartType = validTracesFilteredIndex.some(function (trace) { return trace.type === FALLBACK_TYPE; }) || chart.type === FALLBACK_TYPE
-                ? FALLBACK_TYPE
-                : filteredTracesInfo[0].type;
+            var chartType = chart.type === 'fallback' || chart.type === 'groupedverticalbar' ? chart.type : filteredTracesInfo[0].type;
             if (validTracesFilteredIndex.some(function (trace) { return trace.type === 'line'; }) &&
                 validTracesFilteredIndex.some(function (trace) { return trace.type === 'scatter'; })) {
                 chartType = 'line';

package/lib/components/DeclarativeChart/DeclarativeChart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DeclarativeChart.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/DeclarativeChart.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention /\nimport as React from 'react';\nimport { useTheme } from '@fluentui/react';\nimport { IRefObject } from '@fluentui/react/lib/Utilities';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { decodeBase64Fields } from '@fluentui/chart-utilities';\nimport type { Data, PlotData, PlotlySchema, OutputChartType, TraceInfo } from '@fluentui/chart-utilities';\nimport { isArrayOrTypedArray, isMonthArray, mapFluentChart, sanitizeJson } from '@fluentui/chart-utilities';\n\nimport type { GridProperties } from './PlotlySchemaAdapter';\nimport {\n correctYearMonth,\n getGridProperties,\n isNonPlotType,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToAreaChartProps,\n transformPlotlyJsonToLineChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n transformPlotlyJsonToChartTableProps,\n transformPlotlyJsonToScatterChartProps,\n projectPolarToCartesian,\n getAllupLegendsProps,\n NON_PLOT_KEY_PREFIX,\n SINGLE_REPEAT,\n transformPlotlyJsonToFunnelChartProps,\n transformPlotlyJsonToGanttChartProps,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\nimport { LineChart } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { IChart, IImageExportOptions } from '../../types/index';\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ScatterChart } from '../ScatterChart/index';\nimport { ChartTable } from '../ChartTable/index';\nimport { FunnelChart } from '../FunnelChart/FunnelChart';\nimport { GanttChart } from '../GanttChart/index';\nimport { ILegendsProps, Legends } from '../Legends/index';\n\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\nconst ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\nconst ResponsiveScatterChart = withResponsiveContainer(ScatterChart);\nconst ResponsiveChartTable = withResponsiveContainer(ChartTable);\n// Removing responsive wrapper for FunnelChart as responsive container is not working with FunnelChart\n//const ResponsiveFunnelChart = withResponsiveContainer(FunnelChart);\nconst ResponsiveGanttChart = withResponsiveContainer(GanttChart);\n\n// Default x-axis key for grouping traces. Also applicable for PieData and SankeyData where x-axis is not defined.\nconst DEFAULT_XAXIS = 'x';\nconst FALLBACK_TYPE = 'fallback';\n\n/*\n DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n /\nexport interface Schema {\n /\n Plotly schema represented as JSON object\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n plotlySchema: any;\n}\n\n/\n DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n /\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n /\n The schema representing the chart data, layout and configuration\n /\n chartSchema: Schema;\n\n /\n Callback when an event occurs\n /\n onSchemaChange?: (eventData: Schema) => void;\n\n /\n Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n /\n componentRef?: IRefObject<IDeclarativeChart>;\n\n /\n Optional prop to specify the colorway type of the chart.\n * - 'default': Use Fluent UI color palette aligning with plotly colorway.\n * - 'builtin': Use Fluent UI colorway.\n * - 'others': Reserved for future colorways.\n * @default 'default'\n /\n colorwayType?: ColorwayType;\n}\n\n/\n {@docCategory DeclarativeChart}\n /\nexport interface IDeclarativeChart {\n exportAsImage: (opts?: IImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n const colorMap = React.useRef(new Map<string, string>());\n return colorMap;\n};\n\nfunction renderChart<TProps>(\n Renderer: React.ComponentType<TProps>,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n transformer: (...args: any[]) => TProps,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n transformerArgs: any[],\n commonProps: Partial<TProps>,\n cellRow: number,\n cellColumn: number,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n): JSX.Element {\n const chartProps = transformer(...transformerArgs);\n return (\n <div\n key={`${cellRow}_${cellColumn}`}\n style={{\n gridRowStart: cellRow,\n gridRowEnd: cellRow + 1,\n gridColumnStart: cellColumn,\n gridColumnEnd: cellColumn + 1,\n }}\n >\n <Renderer {...chartProps} {...commonProps} />\n </div>\n );\n}\n\ntype PreTransformHooks = {\n preTransformCondition?: (plotlySchema: PlotlySchema) => boolean;\n preTransformOperation?: (plotlySchema: PlotlySchema) => PlotlySchema;\n};\n\nconst LineAreaPreTransformOp = (plotlyInput: PlotlySchema) => {\n const xValues = (plotlyInput.data[0] as PlotData).x;\n const isXMonth = isMonthArray(xValues);\n let renderData = plotlyInput.data;\n if (isXMonth) {\n renderData = plotlyInput.data.map((dataPoint: PlotData) => ({\n ...dataPoint,\n x: correctYearMonth(dataPoint.x),\n }));\n }\n return { data: renderData, layout: plotlyInput.layout };\n};\n\ntype ChartTypeMap = {\n donut: {\n transformer: typeof transformPlotlyJsonToDonutProps;\n renderer: typeof ResponsiveDonutChart;\n } & PreTransformHooks;\n sankey: {\n transformer: typeof transformPlotlyJsonToSankeyProps;\n renderer: typeof ResponsiveSankeyChart;\n } & PreTransformHooks;\n table: {\n transformer: typeof transformPlotlyJsonToChartTableProps;\n renderer: typeof ResponsiveChartTable;\n } & PreTransformHooks;\n horizontalbar: {\n transformer: typeof transformPlotlyJsonToHorizontalBarWithAxisProps;\n renderer: typeof ResponsiveHorizontalBarChartWithAxis;\n } & PreTransformHooks;\n groupedverticalbar: {\n transformer: typeof transformPlotlyJsonToGVBCProps;\n renderer: typeof ResponsiveGroupedVerticalBarChart;\n } & PreTransformHooks;\n verticalstackedbar: {\n transformer: typeof transformPlotlyJsonToVSBCProps;\n renderer: typeof ResponsiveVerticalStackedBarChart;\n } & PreTransformHooks;\n heatmap: {\n transformer: typeof transformPlotlyJsonToHeatmapProps;\n renderer: typeof ResponsiveHeatMapChart;\n } & PreTransformHooks;\n gauge: {\n transformer: typeof transformPlotlyJsonToGaugeProps;\n renderer: typeof ResponsiveGaugeChart;\n } & PreTransformHooks;\n verticalbar: {\n transformer: typeof transformPlotlyJsonToVBCProps;\n renderer: typeof ResponsiveVerticalBarChart;\n } & PreTransformHooks;\n area: {\n transformer: typeof transformPlotlyJsonToAreaChartProps;\n renderer: typeof ResponsiveAreaChart;\n } & PreTransformHooks;\n line: {\n transformer: typeof transformPlotlyJsonToLineChartProps;\n renderer: typeof ResponsiveLineChart;\n } & PreTransformHooks;\n scatter: {\n transformer: typeof transformPlotlyJsonToScatterChartProps;\n renderer: typeof ResponsiveScatterChart;\n } & PreTransformHooks;\n funnel: {\n transformer: typeof transformPlotlyJsonToFunnelChartProps;\n renderer: typeof FunnelChart;\n } & PreTransformHooks;\n gantt: {\n transformer: typeof transformPlotlyJsonToGanttChartProps;\n renderer: typeof ResponsiveGanttChart;\n } & PreTransformHooks;\n fallback: {\n transformer: typeof transformPlotlyJsonToVSBCProps;\n renderer: typeof ResponsiveVerticalStackedBarChart;\n } & PreTransformHooks;\n};\n\nconst chartMap: ChartTypeMap = {\n // PieData category charts\n donut: {\n transformer: transformPlotlyJsonToDonutProps,\n renderer: ResponsiveDonutChart,\n },\n // SankeyData category charts\n sankey: {\n transformer: transformPlotlyJsonToSankeyProps,\n renderer: ResponsiveSankeyChart,\n },\n // TableData category charts\n table: {\n transformer: transformPlotlyJsonToChartTableProps,\n renderer: ResponsiveChartTable,\n },\n // PlotData category charts\n horizontalbar: {\n transformer: transformPlotlyJsonToHorizontalBarWithAxisProps,\n renderer: ResponsiveHorizontalBarChartWithAxis,\n },\n groupedverticalbar: {\n transformer: transformPlotlyJsonToGVBCProps,\n renderer: ResponsiveGroupedVerticalBarChart,\n },\n verticalstackedbar: {\n transformer: transformPlotlyJsonToVSBCProps,\n renderer: ResponsiveVerticalStackedBarChart,\n },\n heatmap: {\n transformer: transformPlotlyJsonToHeatmapProps,\n renderer: ResponsiveHeatMapChart,\n },\n gauge: {\n transformer: transformPlotlyJsonToGaugeProps,\n renderer: ResponsiveGaugeChart,\n },\n verticalbar: {\n transformer: transformPlotlyJsonToVBCProps,\n renderer: ResponsiveVerticalBarChart,\n },\n area: {\n transformer: transformPlotlyJsonToAreaChartProps,\n renderer: ResponsiveAreaChart,\n preTransformOperation: LineAreaPreTransformOp,\n },\n line: {\n transformer: transformPlotlyJsonToLineChartProps,\n renderer: ResponsiveLineChart,\n preTransformOperation: LineAreaPreTransformOp,\n },\n scatter: {\n transformer: transformPlotlyJsonToScatterChartProps,\n renderer: ResponsiveScatterChart,\n preTransformOperation: LineAreaPreTransformOp,\n },\n funnel: {\n transformer: transformPlotlyJsonToFunnelChartProps,\n renderer: FunnelChart,\n },\n gantt: {\n transformer: transformPlotlyJsonToGanttChartProps,\n renderer: ResponsiveGanttChart,\n },\n fallback: {\n transformer: transformPlotlyJsonToVSBCProps,\n renderer: ResponsiveVerticalStackedBarChart,\n },\n};\n\n/\n DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n HTMLDivElement,\n DeclarativeChartProps\n>((props, forwardedRef) => {\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n const chart: OutputChartType = mapFluentChart(plotlySchema);\n if (!chart.isValid) {\n throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n }\n let plotlyInput = plotlySchema as PlotlySchema;\n try {\n plotlyInput = decodeBase64Fields(plotlyInput);\n } catch (error) {\n throw new Error(`Failed to decode plotly schema: ${error}`);\n }\n const plotlyInputWithValidData: PlotlySchema = {\n ...plotlyInput,\n data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace.index]),\n };\n\n const validTracesFilteredIndex: TraceInfo[] = chart.validTracesInfo!.map((trace, index) => ({\n index,\n type: trace.type,\n }));\n\n let { selectedLegends } = plotlySchema;\n const colorMap = useColorMapping();\n const theme = useTheme();\n const isDarkTheme = theme?.isInverted ?? false;\n const chartRef = React.useRef<IChart>(null);\n const isMultiPlot = React.useRef(false);\n\n if (!isArrayOrTypedArray(selectedLegends)) {\n selectedLegends = [];\n }\n\n const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n const onActiveLegendsChange = (keys: string[]) => {\n setActiveLegends(keys);\n if (props.onSchemaChange) {\n props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });\n }\n };\n\n React.useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { selectedLegends } = plotlySchema;\n setActiveLegends(selectedLegends ?? []);\n }, [props.chartSchema]);\n\n const multiSelectLegendProps = {\n canSelectMultipleLegends: true,\n onChange: onActiveLegendsChange,\n selectedLegends: activeLegends,\n };\n\n const commonProps = {\n legendProps: multiSelectLegendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n function createLegends(legendProps: ILegendsProps): JSX.Element {\n // eslint-disable-next-line react/jsx-no-bind\n return <Legends {...legendProps} selectedLegends={activeLegends} onChange={onActiveLegendsChange} />;\n }\n\n const exportAsImage = React.useCallback(\n (opts?: IImageExportOptions): Promise<string> => {\n return new Promise((resolve, reject) => {\n if (isMultiPlot.current) {\n return reject(Error('Exporting multi plot charts as image is not supported'));\n }\n if (!chartRef.current \|\| typeof chartRef.current.toImage !== 'function') {\n return reject(Error('Chart cannot be exported as image'));\n }\n\n chartRef.current\n .toImage({\n background: theme.semanticColors.bodyBackground,\n scale: 5,\n ...opts,\n })\n .then(resolve)\n .catch(reject);\n });\n },\n [theme],\n );\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n if (chart.type === 'scatterpolar') {\n const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n plotlyInputWithValidData.data = cartesianProjection.data;\n plotlyInputWithValidData.layout = cartesianProjection.layout;\n validTracesFilteredIndex.forEach((trace, index) => {\n if (trace.type === 'scatterpolar') {\n const mode = (plotlyInputWithValidData.data[index] as PlotData)?.mode ?? '';\n if (mode.includes('line')) {\n validTracesFilteredIndex[index].type = 'line';\n } else if (mode.includes('markers') \|\| mode === 'text') {\n validTracesFilteredIndex[index].type = 'scatter';\n } else {\n validTracesFilteredIndex[index].type = 'line';\n }\n }\n });\n }\n\n const groupedTraces: Record<string, number[]> = {};\n let nonCartesianTraceCount = 0;\n plotlyInputWithValidData.data.forEach((trace: Data, index: number) => {\n let traceKey = '';\n if (isNonPlotType(chart.validTracesInfo![index].type)) {\n traceKey = `${NON_PLOT_KEY_PREFIX}${nonCartesianTraceCount + 1}`;\n nonCartesianTraceCount++;\n } else {\n traceKey = (trace as PlotData).xaxis ?? DEFAULT_XAXIS;\n }\n if (!groupedTraces[traceKey]) {\n groupedTraces[traceKey] = [];\n }\n groupedTraces[traceKey].push(index);\n });\n\n isMultiPlot.current = Object.keys(groupedTraces).length > 1;\n const gridProperties: GridProperties = getGridProperties(\n plotlyInputWithValidData,\n isMultiPlot.current,\n chart.validTracesInfo!,\n );\n\n // Render only one plot if the grid properties cannot determine positioning of multiple plots.\n if (\n isMultiPlot.current &&\n gridProperties.templateRows === SINGLE_REPEAT &&\n gridProperties.templateColumns === SINGLE_REPEAT\n ) {\n if (chart.type === 'donut') {\n // If there are multiple data traces for donut/pie, picking the last one similar to plotly\n const keys = Object.keys(groupedTraces);\n keys.forEach((key, index) => {\n if (index < keys.length - 1) {\n delete groupedTraces[key];\n }\n });\n } else {\n Object.keys(groupedTraces).forEach((key, index) => {\n if (index > 0) {\n delete groupedTraces[key];\n }\n });\n }\n isMultiPlot.current = false;\n }\n\n const allupLegendsProps = getAllupLegendsProps(\n plotlyInputWithValidData,\n colorMap,\n props.colorwayType,\n chart.validTracesInfo!,\n isDarkTheme,\n );\n\n type ChartType = keyof ChartTypeMap;\n // map through the grouped traces and render the appropriate chart\n return (\n <>\n <div\n style={{\n display: 'grid',\n gridTemplateRows: gridProperties.templateRows,\n gridTemplateColumns: gridProperties.templateColumns,\n }}\n >\n {Object.entries(groupedTraces).map(([xAxisKey, index]) => {\n const plotlyInputForGroup: PlotlySchema = {\n ...plotlyInputWithValidData,\n data: index.map(idx => plotlyInputWithValidData.data[idx]),\n };\n\n const filteredTracesInfo = validTracesFilteredIndex.filter(trace => index.includes(trace.index));\n let chartType =\n validTracesFilteredIndex.some(trace => trace.type === FALLBACK_TYPE) \|\| chart.type === FALLBACK_TYPE\n ? FALLBACK_TYPE\n : filteredTracesInfo[0].type;\n\n if (\n validTracesFilteredIndex.some(trace => trace.type === 'line') &&\n validTracesFilteredIndex.some(trace => trace.type === 'scatter')\n ) {\n chartType = 'line';\n }\n\n const chartEntry = chartMap[chartType as ChartType];\n if (chartEntry) {\n const { transformer, renderer, preTransformCondition, preTransformOperation } = chartEntry;\n if (preTransformCondition === undefined \|\| preTransformCondition(plotlyInputForGroup)) {\n const transformedInput = preTransformOperation\n ? preTransformOperation(plotlyInputForGroup)\n : plotlyInputForGroup;\n const cellProperties = gridProperties.layout[xAxisKey];\n\n return renderChart<ReturnType<typeof transformer>>(\n renderer,\n transformer,\n [transformedInput, isMultiPlot.current, colorMap, props.colorwayType, isDarkTheme],\n {\n ...commonProps,\n xAxisAnnotation: cellProperties?.xAnnotation,\n yAxisAnnotation: cellProperties?.yAnnotation,\n },\n cellProperties?.row ?? 1,\n cellProperties?.column ?? 1,\n );\n }\n return <></>;\n } else {\n throw new Error(`Unsupported chart type :${plotlyInputForGroup.data[0]?.type}`);\n }\n })}\n </div>\n {isMultiPlot.current && createLegends(allupLegendsProps)}\n </>\n );\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nDeclarativeChart.defaultProps = {\n colorwayType: 'default',\n};\n"]}
1	+ {"version":3,"file":"DeclarativeChart.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/DeclarativeChart.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention /\nimport as React from 'react';\nimport { useTheme } from '@fluentui/react';\nimport { IRefObject } from '@fluentui/react/lib/Utilities';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { decodeBase64Fields } from '@fluentui/chart-utilities';\nimport type { Data, PlotData, PlotlySchema, OutputChartType, TraceInfo } from '@fluentui/chart-utilities';\nimport { isArrayOrTypedArray, isMonthArray, mapFluentChart, sanitizeJson } from '@fluentui/chart-utilities';\n\nimport type { GridProperties } from './PlotlySchemaAdapter';\nimport {\n correctYearMonth,\n getGridProperties,\n isNonPlotType,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToAreaChartProps,\n transformPlotlyJsonToLineChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n transformPlotlyJsonToChartTableProps,\n transformPlotlyJsonToScatterChartProps,\n projectPolarToCartesian,\n getAllupLegendsProps,\n NON_PLOT_KEY_PREFIX,\n SINGLE_REPEAT,\n transformPlotlyJsonToFunnelChartProps,\n transformPlotlyJsonToGanttChartProps,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\nimport { LineChart } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { IChart, IImageExportOptions } from '../../types/index';\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ScatterChart } from '../ScatterChart/index';\nimport { ChartTable } from '../ChartTable/index';\nimport { FunnelChart } from '../FunnelChart/FunnelChart';\nimport { GanttChart } from '../GanttChart/index';\nimport { ILegendsProps, Legends } from '../Legends/index';\n\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\nconst ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\nconst ResponsiveScatterChart = withResponsiveContainer(ScatterChart);\nconst ResponsiveChartTable = withResponsiveContainer(ChartTable);\n// Removing responsive wrapper for FunnelChart as responsive container is not working with FunnelChart\n//const ResponsiveFunnelChart = withResponsiveContainer(FunnelChart);\nconst ResponsiveGanttChart = withResponsiveContainer(GanttChart);\n\n// Default x-axis key for grouping traces. Also applicable for PieData and SankeyData where x-axis is not defined.\nconst DEFAULT_XAXIS = 'x';\n\n/*\n DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n /\nexport interface Schema {\n /\n Plotly schema represented as JSON object\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n plotlySchema: any;\n}\n\n/\n DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n /\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n /\n The schema representing the chart data, layout and configuration\n /\n chartSchema: Schema;\n\n /\n Callback when an event occurs\n /\n onSchemaChange?: (eventData: Schema) => void;\n\n /\n Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n /\n componentRef?: IRefObject<IDeclarativeChart>;\n\n /\n Optional prop to specify the colorway type of the chart.\n * - 'default': Use Fluent UI color palette aligning with plotly colorway.\n * - 'builtin': Use Fluent UI colorway.\n * - 'others': Reserved for future colorways.\n * @default 'default'\n /\n colorwayType?: ColorwayType;\n}\n\n/\n {@docCategory DeclarativeChart}\n /\nexport interface IDeclarativeChart {\n exportAsImage: (opts?: IImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n const colorMap = React.useRef(new Map<string, string>());\n return colorMap;\n};\n\nfunction renderChart<TProps>(\n Renderer: React.ComponentType<TProps>,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n transformer: (...args: any[]) => TProps,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n transformerArgs: any[],\n commonProps: Partial<TProps>,\n cellRow: number,\n cellColumn: number,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n): JSX.Element {\n const chartProps = transformer(...transformerArgs);\n return (\n <div\n key={`${cellRow}_${cellColumn}`}\n style={{\n gridRowStart: cellRow,\n gridRowEnd: cellRow + 1,\n gridColumnStart: cellColumn,\n gridColumnEnd: cellColumn + 1,\n }}\n >\n <Renderer {...chartProps} {...commonProps} />\n </div>\n );\n}\n\ntype PreTransformHooks = {\n preTransformCondition?: (plotlySchema: PlotlySchema) => boolean;\n preTransformOperation?: (plotlySchema: PlotlySchema) => PlotlySchema;\n};\n\nconst LineAreaPreTransformOp = (plotlyInput: PlotlySchema) => {\n const xValues = (plotlyInput.data[0] as PlotData).x;\n const isXMonth = isMonthArray(xValues);\n let renderData = plotlyInput.data;\n if (isXMonth) {\n renderData = plotlyInput.data.map((dataPoint: PlotData) => ({\n ...dataPoint,\n x: correctYearMonth(dataPoint.x),\n }));\n }\n return { data: renderData, layout: plotlyInput.layout };\n};\n\ntype ChartTypeMap = {\n donut: {\n transformer: typeof transformPlotlyJsonToDonutProps;\n renderer: typeof ResponsiveDonutChart;\n } & PreTransformHooks;\n sankey: {\n transformer: typeof transformPlotlyJsonToSankeyProps;\n renderer: typeof ResponsiveSankeyChart;\n } & PreTransformHooks;\n table: {\n transformer: typeof transformPlotlyJsonToChartTableProps;\n renderer: typeof ResponsiveChartTable;\n } & PreTransformHooks;\n horizontalbar: {\n transformer: typeof transformPlotlyJsonToHorizontalBarWithAxisProps;\n renderer: typeof ResponsiveHorizontalBarChartWithAxis;\n } & PreTransformHooks;\n groupedverticalbar: {\n transformer: typeof transformPlotlyJsonToGVBCProps;\n renderer: typeof ResponsiveGroupedVerticalBarChart;\n } & PreTransformHooks;\n verticalstackedbar: {\n transformer: typeof transformPlotlyJsonToVSBCProps;\n renderer: typeof ResponsiveVerticalStackedBarChart;\n } & PreTransformHooks;\n heatmap: {\n transformer: typeof transformPlotlyJsonToHeatmapProps;\n renderer: typeof ResponsiveHeatMapChart;\n } & PreTransformHooks;\n gauge: {\n transformer: typeof transformPlotlyJsonToGaugeProps;\n renderer: typeof ResponsiveGaugeChart;\n } & PreTransformHooks;\n verticalbar: {\n transformer: typeof transformPlotlyJsonToVBCProps;\n renderer: typeof ResponsiveVerticalBarChart;\n } & PreTransformHooks;\n area: {\n transformer: typeof transformPlotlyJsonToAreaChartProps;\n renderer: typeof ResponsiveAreaChart;\n } & PreTransformHooks;\n line: {\n transformer: typeof transformPlotlyJsonToLineChartProps;\n renderer: typeof ResponsiveLineChart;\n } & PreTransformHooks;\n scatter: {\n transformer: typeof transformPlotlyJsonToScatterChartProps;\n renderer: typeof ResponsiveScatterChart;\n } & PreTransformHooks;\n funnel: {\n transformer: typeof transformPlotlyJsonToFunnelChartProps;\n renderer: typeof FunnelChart;\n } & PreTransformHooks;\n gantt: {\n transformer: typeof transformPlotlyJsonToGanttChartProps;\n renderer: typeof ResponsiveGanttChart;\n } & PreTransformHooks;\n fallback: {\n transformer: typeof transformPlotlyJsonToVSBCProps;\n renderer: typeof ResponsiveVerticalStackedBarChart;\n } & PreTransformHooks;\n};\n\nconst chartMap: ChartTypeMap = {\n // PieData category charts\n donut: {\n transformer: transformPlotlyJsonToDonutProps,\n renderer: ResponsiveDonutChart,\n },\n // SankeyData category charts\n sankey: {\n transformer: transformPlotlyJsonToSankeyProps,\n renderer: ResponsiveSankeyChart,\n },\n // TableData category charts\n table: {\n transformer: transformPlotlyJsonToChartTableProps,\n renderer: ResponsiveChartTable,\n },\n // PlotData category charts\n horizontalbar: {\n transformer: transformPlotlyJsonToHorizontalBarWithAxisProps,\n renderer: ResponsiveHorizontalBarChartWithAxis,\n },\n groupedverticalbar: {\n transformer: transformPlotlyJsonToGVBCProps,\n renderer: ResponsiveGroupedVerticalBarChart,\n },\n verticalstackedbar: {\n transformer: transformPlotlyJsonToVSBCProps,\n renderer: ResponsiveVerticalStackedBarChart,\n },\n heatmap: {\n transformer: transformPlotlyJsonToHeatmapProps,\n renderer: ResponsiveHeatMapChart,\n },\n gauge: {\n transformer: transformPlotlyJsonToGaugeProps,\n renderer: ResponsiveGaugeChart,\n },\n verticalbar: {\n transformer: transformPlotlyJsonToVBCProps,\n renderer: ResponsiveVerticalBarChart,\n },\n area: {\n transformer: transformPlotlyJsonToAreaChartProps,\n renderer: ResponsiveAreaChart,\n preTransformOperation: LineAreaPreTransformOp,\n },\n line: {\n transformer: transformPlotlyJsonToLineChartProps,\n renderer: ResponsiveLineChart,\n preTransformOperation: LineAreaPreTransformOp,\n },\n scatter: {\n transformer: transformPlotlyJsonToScatterChartProps,\n renderer: ResponsiveScatterChart,\n preTransformOperation: LineAreaPreTransformOp,\n },\n funnel: {\n transformer: transformPlotlyJsonToFunnelChartProps,\n renderer: FunnelChart,\n },\n gantt: {\n transformer: transformPlotlyJsonToGanttChartProps,\n renderer: ResponsiveGanttChart,\n },\n fallback: {\n transformer: transformPlotlyJsonToVSBCProps,\n renderer: ResponsiveVerticalStackedBarChart,\n },\n};\n\n/\n DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n HTMLDivElement,\n DeclarativeChartProps\n>((props, forwardedRef) => {\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n const chart: OutputChartType = mapFluentChart(plotlySchema);\n if (!chart.isValid) {\n throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n }\n let plotlyInput = plotlySchema as PlotlySchema;\n try {\n plotlyInput = decodeBase64Fields(plotlyInput);\n } catch (error) {\n throw new Error(`Failed to decode plotly schema: ${error}`);\n }\n const plotlyInputWithValidData: PlotlySchema = {\n ...plotlyInput,\n data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace.index]),\n };\n\n const validTracesFilteredIndex: TraceInfo[] = chart.validTracesInfo!.map((trace, index) => ({\n index,\n type: trace.type,\n }));\n\n let { selectedLegends } = plotlySchema;\n const colorMap = useColorMapping();\n const theme = useTheme();\n const isDarkTheme = theme?.isInverted ?? false;\n const chartRef = React.useRef<IChart>(null);\n const isMultiPlot = React.useRef(false);\n\n if (!isArrayOrTypedArray(selectedLegends)) {\n selectedLegends = [];\n }\n\n const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n const onActiveLegendsChange = (keys: string[]) => {\n setActiveLegends(keys);\n if (props.onSchemaChange) {\n props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });\n }\n };\n\n React.useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { selectedLegends } = plotlySchema;\n setActiveLegends(selectedLegends ?? []);\n }, [props.chartSchema]);\n\n const multiSelectLegendProps = {\n canSelectMultipleLegends: true,\n onChange: onActiveLegendsChange,\n selectedLegends: activeLegends,\n };\n\n const commonProps = {\n legendProps: multiSelectLegendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n function createLegends(legendProps: ILegendsProps): JSX.Element {\n // eslint-disable-next-line react/jsx-no-bind\n return <Legends {...legendProps} selectedLegends={activeLegends} onChange={onActiveLegendsChange} />;\n }\n\n const exportAsImage = React.useCallback(\n (opts?: IImageExportOptions): Promise<string> => {\n return new Promise((resolve, reject) => {\n if (isMultiPlot.current) {\n return reject(Error('Exporting multi plot charts as image is not supported'));\n }\n if (!chartRef.current \|\| typeof chartRef.current.toImage !== 'function') {\n return reject(Error('Chart cannot be exported as image'));\n }\n\n chartRef.current\n .toImage({\n background: theme.semanticColors.bodyBackground,\n scale: 5,\n ...opts,\n })\n .then(resolve)\n .catch(reject);\n });\n },\n [theme],\n );\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n if (chart.type === 'scatterpolar') {\n const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n plotlyInputWithValidData.data = cartesianProjection.data;\n plotlyInputWithValidData.layout = cartesianProjection.layout;\n validTracesFilteredIndex.forEach((trace, index) => {\n if (trace.type === 'scatterpolar') {\n const mode = (plotlyInputWithValidData.data[index] as PlotData)?.mode ?? '';\n if (mode.includes('line')) {\n validTracesFilteredIndex[index].type = 'line';\n } else if (mode.includes('markers') \|\| mode === 'text') {\n validTracesFilteredIndex[index].type = 'scatter';\n } else {\n validTracesFilteredIndex[index].type = 'line';\n }\n }\n });\n }\n\n const groupedTraces: Record<string, number[]> = {};\n let nonCartesianTraceCount = 0;\n plotlyInputWithValidData.data.forEach((trace: Data, index: number) => {\n let traceKey = '';\n if (isNonPlotType(chart.validTracesInfo![index].type)) {\n traceKey = `${NON_PLOT_KEY_PREFIX}${nonCartesianTraceCount + 1}`;\n nonCartesianTraceCount++;\n } else {\n traceKey = (trace as PlotData).xaxis ?? DEFAULT_XAXIS;\n }\n if (!groupedTraces[traceKey]) {\n groupedTraces[traceKey] = [];\n }\n groupedTraces[traceKey].push(index);\n });\n\n isMultiPlot.current = Object.keys(groupedTraces).length > 1;\n const gridProperties: GridProperties = getGridProperties(\n plotlyInputWithValidData,\n isMultiPlot.current,\n chart.validTracesInfo!,\n );\n\n // Render only one plot if the grid properties cannot determine positioning of multiple plots.\n if (\n isMultiPlot.current &&\n gridProperties.templateRows === SINGLE_REPEAT &&\n gridProperties.templateColumns === SINGLE_REPEAT\n ) {\n if (chart.type === 'donut') {\n // If there are multiple data traces for donut/pie, picking the last one similar to plotly\n const keys = Object.keys(groupedTraces);\n keys.forEach((key, index) => {\n if (index < keys.length - 1) {\n delete groupedTraces[key];\n }\n });\n } else {\n Object.keys(groupedTraces).forEach((key, index) => {\n if (index > 0) {\n delete groupedTraces[key];\n }\n });\n }\n isMultiPlot.current = false;\n }\n\n const allupLegendsProps = getAllupLegendsProps(\n plotlyInputWithValidData,\n colorMap,\n props.colorwayType,\n chart.validTracesInfo!,\n isDarkTheme,\n );\n\n type ChartType = keyof ChartTypeMap;\n // map through the grouped traces and render the appropriate chart\n return (\n <>\n <div\n style={{\n display: 'grid',\n gridTemplateRows: gridProperties.templateRows,\n gridTemplateColumns: gridProperties.templateColumns,\n }}\n >\n {Object.entries(groupedTraces).map(([xAxisKey, index]) => {\n const plotlyInputForGroup: PlotlySchema = {\n ...plotlyInputWithValidData,\n data: index.map(idx => plotlyInputWithValidData.data[idx]),\n };\n\n const filteredTracesInfo = validTracesFilteredIndex.filter(trace => index.includes(trace.index));\n let chartType =\n chart.type === 'fallback' \|\| chart.type === 'groupedverticalbar' ? chart.type : filteredTracesInfo[0].type;\n\n if (\n validTracesFilteredIndex.some(trace => trace.type === 'line') &&\n validTracesFilteredIndex.some(trace => trace.type === 'scatter')\n ) {\n chartType = 'line';\n }\n\n const chartEntry = chartMap[chartType as ChartType];\n if (chartEntry) {\n const { transformer, renderer, preTransformCondition, preTransformOperation } = chartEntry;\n if (preTransformCondition === undefined \|\| preTransformCondition(plotlyInputForGroup)) {\n const transformedInput = preTransformOperation\n ? preTransformOperation(plotlyInputForGroup)\n : plotlyInputForGroup;\n const cellProperties = gridProperties.layout[xAxisKey];\n\n return renderChart<ReturnType<typeof transformer>>(\n renderer,\n transformer,\n [transformedInput, isMultiPlot.current, colorMap, props.colorwayType, isDarkTheme],\n {\n ...commonProps,\n xAxisAnnotation: cellProperties?.xAnnotation,\n yAxisAnnotation: cellProperties?.yAnnotation,\n },\n cellProperties?.row ?? 1,\n cellProperties?.column ?? 1,\n );\n }\n return <></>;\n } else {\n throw new Error(`Unsupported chart type :${plotlyInputForGroup.data[0]?.type}`);\n }\n })}\n </div>\n {isMultiPlot.current && createLegends(allupLegendsProps)}\n </>\n );\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nDeclarativeChart.defaultProps = {\n colorwayType: 'default',\n};\n"]}

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { format as d3Format } from 'd3-format';
 import { DataVizPalette, getColorFromToken } from '../../utilities/colors';
 import { GaugeChartVariant } from '../GaugeChart/index';
 import { DEFAULT_DATE_STRING, findNumericMinMaxOfY, formatScientificLimitWidth, MIN_DONUT_RADIUS, } from '../../utilities/utilities';
-import { isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isStringArray, isYearArray, isInvalidValue, formatToLocaleString, isNumber, isObjectArray, getAxisIds, getAxisKey, } from '@fluentui/chart-utilities';
+import { isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isStringArray, isYearArray, isInvalidValue, formatToLocaleString, isNumber, isObjectArray, getAxisIds, getAxisKey, isScatterAreaChart, } from '@fluentui/chart-utilities';
 import { curveCardinal as d3CurveCardinal } from 'd3-shape';
 import { getOpacity, extractColor, resolveColor, createColorScale } from './PlotlyColorAdapter';
 import { rgb } from 'd3-color';
@@ -141,11 +141,12 @@ var usesSecondaryYScale = function (series, layout) {
     var _a, _b;
     return series.yaxis === 'y2' && (((_a = layout === null || layout === void 0 ? void 0 : layout.yaxis2) === null || _a === void 0 ? void 0 : _a.anchor) === 'x' || ((_b = layout === null || layout === void 0 ? void 0 : layout.yaxis2) === null || _b === void 0 ? void 0 : _b.side) === 'right');
 };
-var getSecondaryYAxisValues = function (data, layout, maxAllowedMinY, minAllowedMaxY) {
+var getSecondaryYAxisValues = function (data, layout) {
     var _a, _b, _c, _d;
     var containsSecondaryYAxis = false;
     var yMinValue;
     var yMaxValue;
+    var allLineSeries = true;
     data.forEach(function (series) {
         if (usesSecondaryYScale(series, layout)) {
             containsSecondaryYAxis = true;
@@ -154,16 +155,21 @@ var getSecondaryYAxisValues = function (data, layout, maxAllowedMinY, minAllowed
                 yMinValue = Math.min.apply(Math, yValues);
                 yMaxValue = Math.max.apply(Math, yValues);
             }
+            if (series.type !== 'scatter' || isScatterAreaChart(series)) {
+                allLineSeries = false;
+            }
         }
     });
     if (!containsSecondaryYAxis) {
         return {};
     }
-    if (typeof yMinValue === 'number' && typeof maxAllowedMinY === 'number') {
-        yMinValue = Math.min(yMinValue, maxAllowedMinY);
-    }
-    if (typeof yMaxValue === 'number' && typeof minAllowedMaxY === 'number') {
-        yMaxValue = Math.max(yMaxValue, minAllowedMaxY);
+    if (!allLineSeries) {
+        if (typeof yMinValue === 'number') {
+            yMinValue = Math.min(yMinValue, 0);
+        }
+        if (typeof yMaxValue === 'number') {
+            yMaxValue = Math.max(yMaxValue, 0);
+        }
     }
     if ((_a = layout === null || layout === void 0 ? void 0 : layout.yaxis2) === null || _a === void 0 ? void 0 : _a.range) {
         yMinValue = layout.yaxis2.range[0];
@@ -483,7 +489,7 @@ export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorM
     return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__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));
 };
 export var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     // Handle object arrays in y values by normalizing the data first
     var processedInput = __assign({}, input);
     // Check if any bar traces have object arrays as y values
@@ -505,48 +511,80 @@ export var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorM
             .flat();
         processedInput = __assign(__assign({}, input), { data: processedData });
     }
-    var mapXToDataPoints = {};
-    var secondaryYAxisValues = getSecondaryYAxisValues(processedInput.data, processedInput.layout, 0, 0);
-    var _e = getLegendProps(processedInput.data, processedInput.layout, isMultiPlot), legends = _e.legends, hideLegend = _e.hideLegend;
+    var gvbcDataV2 = [];
+    var secondaryYAxisValues = getSecondaryYAxisValues(processedInput.data, processedInput.layout);
+    var _d = getLegendProps(processedInput.data, processedInput.layout, isMultiPlot), legends = _d.legends, hideLegend = _d.hideLegend;
     var colorScale = undefined;
     var yAxisTickFormat = getYAxisTickFormat(processedInput.data[0], processedInput.layout);
     processedInput.data.forEach(function (series, index1) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         colorScale = createColorScale(processedInput.layout, series, colorScale);
-        // extract colors for each series only once
-        var extractedColors = extractColor((_c = (_b = (_a = processedInput.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
-        (_e = series.x) === null || _e === void 0 ? void 0 : _e.forEach(function (x, xIndex) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            if (isInvalidValue(x) || isInvalidValue((_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex])) {
-                return;
-            }
-            if (!mapXToDataPoints[x]) {
-                mapXToDataPoints[x] = { name: x.toString(), series: [] };
-            }
-            if (series.type === 'bar') {
-                var legend = legends[index1];
-                // resolve color for each legend's bars from the colorscale or extracted colors
-                var color = colorScale
-                    ? colorScale(isArrayOrTypedArray((_b = series.marker) === null || _b === void 0 ? void 0 : _b.color)
-                        ? (_d = (_c = series.marker) === null || _c === void 0 ? void 0 : _c.color) === null || _d === void 0 ? void 0 : _d[xIndex % ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length]
-                        : 0)
-                    : resolveColor(extractedColors, xIndex, legend, colorMap, (_h = (_g = (_f = processedInput.layout) === null || _f === void 0 ? void 0 : _f.template) === null || _g === void 0 ? void 0 : _g.layout) === null || _h === void 0 ? void 0 : _h.colorway, isDarkTheme);
-                var opacity = getOpacity(series, xIndex);
-                var yVal = series.y[xIndex];
-                mapXToDataPoints[x].series.push({
-                    key: legend,
-                    data: yVal,
-                    xAxisCalloutData: x,
-                    color: (_j = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _j !== void 0 ? _j : color,
+        var legend = legends[index1];
+        var legendShape = getLegendShape(series);
+        if (series.type === 'bar') {
+            // extract bar colors for each series only once
+            var extractedBarColors_1 = extractColor((_c = (_b = (_a = processedInput.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
+            gvbcDataV2.push({
+                type: 'bar',
+                legend: legend,
+                key: legend,
+                data: series.x
+                    .map(function (x, xIndex) {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                    if (isInvalidValue(x) || isInvalidValue((_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex])) {
+                        return;
+                    }
+                    // resolve color for each legend's bars from the colorscale or extracted colors
+                    var color = colorScale
+                        ? colorScale(isArrayOrTypedArray((_b = series.marker) === null || _b === void 0 ? void 0 : _b.color)
+                            ? (_d = (_c = series.marker) === null || _c === void 0 ? void 0 : _c.color) === null || _d === void 0 ? void 0 : _d[xIndex % ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length]
+                            : 0)
+                        : resolveColor(extractedBarColors_1, xIndex, legend, colorMap, (_h = (_g = (_f = processedInput.layout) === null || _f === void 0 ? void 0 : _f.template) === null || _g === void 0 ? void 0 : _g.layout) === null || _h === void 0 ? void 0 : _h.colorway, isDarkTheme);
+                    var opacity = getOpacity(series, xIndex);
+                    var yVal = series.y[xIndex];
+                    return {
+                        x: x.toString(),
+                        y: yVal,
+                        yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat),
+                        color: (_j = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _j !== void 0 ? _j : color,
+                    };
+                })
+                    .filter(function (item) { return typeof item !== 'undefined'; }),
+                useSecondaryYScale: usesSecondaryYScale(series, processedInput.layout),
+            });
+        }
+        else if (series.type === 'scatter') {
+            // extract line colors for each series only once
+            var extractedLineColors = extractColor((_g = (_f = (_e = processedInput.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, colorwayType, (_h = series.line) === null || _h === void 0 ? void 0 : _h.color, colorMap, isDarkTheme);
+            var lineColor_1 = resolveColor(extractedLineColors, index1, legend, colorMap, (_l = (_k = (_j = processedInput.layout) === null || _j === void 0 ? void 0 : _j.template) === null || _k === void 0 ? void 0 : _k.layout) === null || _l === void 0 ? void 0 : _l.colorway, isDarkTheme);
+            var lineOptions_1 = getLineOptions(series.line);
+            var opacity_1 = getOpacity(series, index1);
+            var validXYRanges = getValidXYRanges(series);
+            validXYRanges.forEach(function (_a) {
+                var _b;
+                var rangeStart = _a[0], rangeEnd = _a[1];
+                var rangeXValues = series.x.slice(rangeStart, rangeEnd);
+                var rangeYValues = series.y.slice(rangeStart, rangeEnd);
+                gvbcDataV2.push({
+                    type: 'line',
                     legend: legend,
+                    legendShape: legendShape,
+                    data: rangeXValues.map(function (x, i) {
+                        var yVal = rangeYValues[i];
+                        return {
+                            x: x.toString(),
+                            y: yVal,
+                            yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat),
+                        };
+                    }),
+                    color: (_b = rgb(lineColor_1).copy({ opacity: opacity_1 }).formatHex8()) !== null && _b !== void 0 ? _b : lineColor_1,
+                    lineOptions: __assign(__assign({}, (lineOptions_1 !== null && lineOptions_1 !== void 0 ? lineOptions_1 : {})), { mode: series.mode }),
                     useSecondaryYScale: usesSecondaryYScale(series, processedInput.layout),
-                    yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat),
                 });
-            }
-        });
+            });
+        }
     });
-    var gvbcData = Object.values(mapXToDataPoints);
-    return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ data: gvbcData, width: (_a = processedInput.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = processedInput.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barwidth: 'auto', mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, wrapXAxisLables: typeof ((_d = gvbcData[0]) === null || _d === void 0 ? void 0 : _d.name) === 'string' }), getTitles(processedInput.layout)), getAxisCategoryOrderProps(processedInput.data, processedInput.layout)), getYMinMaxValues(processedInput.data[0], processedInput.layout)), getXAxisTickFormat(processedInput.data[0], processedInput.layout)), yAxisTickFormat), getBarProps(processedInput.data, processedInput.layout)), getAxisTickProps(processedInput.data, processedInput.layout));
+    return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ dataV2: gvbcDataV2, width: (_a = processedInput.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = processedInput.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barwidth: 'auto', mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, wrapXAxisLables: true }), getTitles(processedInput.layout)), getAxisCategoryOrderProps(processedInput.data, processedInput.layout)), getYMinMaxValues(processedInput.data[0], processedInput.layout)), getXAxisTickFormat(processedInput.data[0], processedInput.layout)), yAxisTickFormat), getBarProps(processedInput.data, processedInput.layout)), getAxisTickProps(processedInput.data, processedInput.layout));
 };
 export var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c, _d;
@@ -629,7 +667,7 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
     ].includes((_a = input.data[0]) === null || _a === void 0 ? void 0 : _a.mode);
     var isAreaChart = chartType === 'area';
     var isScatterChart = chartType === 'scatter';
-    var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, isAreaChart ? 0 : undefined, isAreaChart ? 0 : undefined);
+    var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
     var mode = 'tonexty';
     var _e = getLegendProps(input.data, input.layout, isMultiPlot), legends = _e.legends, hideLegend = _e.hideLegend;
     var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
@@ -691,6 +729,7 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
                         axisLabel: series.__axisLabel
                             ? series.__axisLabel
                             : {},
+                        fill: series.fill,
                     }
                     : {})),
                 useSecondaryYScale: usesSecondaryYScale(series, input.layout),
@@ -1084,8 +1123,20 @@ function resolveCellStyle(raw, rowIndex, colIndex) {
     }
     return raw;
 }
+function mergeCells(tableCells, templateCells) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    return {
+        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 : [],
+        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,
+        fill: __assign(__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 : {})),
+        font: __assign(__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 : {})),
+        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,
+        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,
+        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,
+    };
+}
 export var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    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;
     var tableData = input.data[0];
     var normalizeHeaders = function (values, header) {
         var cleanedValues = Array.isArray(values[0])
@@ -1109,9 +1160,7 @@ export var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot,
         });
     };
     var columns = (_b = (_a = tableData.cells) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : [];
-    var cells = tableData.cells && Object.keys(tableData.cells).length > 0
-        ? 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;
+    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);
     var rows = columns[0].map(function (_, rowIndex) {
         return columns.map(function (col, colIndex) {
             var _a, _b, _c;
@@ -1134,13 +1183,19 @@ export var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot,
     var styles = {
         root: __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 } : {})),
     };
+    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;
+    var tableHeader = tableData.header;
+    var header = {
+        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,
+        fill: __assign(__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 : {})),
+        font: __assign(__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 : {})),
+        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 : [],
+    };
     return {
-        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
-            ? tableData.header
-            : (_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),
+        headers: normalizeHeaders((_y = (_x = tableData.header) === null || _x === void 0 ? void 0 : _x.values) !== null && _y !== void 0 ? _y : [], header),
         rows: rows,
-        width: (_q = input.layout) === null || _q === void 0 ? void 0 : _q.width,
-        height: (_r = input.layout) === null || _r === void 0 ? void 0 : _r.height,
+        width: (_z = input.layout) === null || _z === void 0 ? void 0 : _z.width,
+        height: (_0 = input.layout) === null || _0 === void 0 ? void 0 : _0.height,
         styles: styles,
     };
 };