@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.
- package/CHANGELOG.json +66 -1
- package/CHANGELOG.md +22 -2
- package/dist/react-charting.js +1 -1
- package/dist/react-charting.min.js +1 -1
- package/lib/components/ChartTable/ChartTable.base.js +12 -6
- package/lib/components/ChartTable/ChartTable.base.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +94 -16
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib/components/LineChart/LineChart.base.js +40 -23
- package/lib/components/LineChart/LineChart.base.js.map +1 -1
- package/lib-amd/components/ChartTable/ChartTable.base.js +12 -7
- package/lib-amd/components/ChartTable/ChartTable.base.js.map +1 -1
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js +94 -16
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-amd/components/LineChart/LineChart.base.js +40 -23
- package/lib-amd/components/LineChart/LineChart.base.js.map +1 -1
- package/lib-commonjs/components/ChartTable/ChartTable.base.js +12 -6
- package/lib-commonjs/components/ChartTable/ChartTable.base.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +94 -16
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-commonjs/components/LineChart/LineChart.base.js +40 -23
- package/lib-commonjs/components/LineChart/LineChart.base.js.map +1 -1
- package/package.json +2 -5
- package/project.json +2 -1
|
@@ -4,6 +4,7 @@ import { classNamesFunction, getRTL, initializeComponentRef } from '@fluentui/re
|
|
|
4
4
|
import { toImage } from '../../utilities/image-export-utils';
|
|
5
5
|
import * as d3 from 'd3-color';
|
|
6
6
|
import { getColorContrast } from '../../utilities/colors';
|
|
7
|
+
import { resolveCSSVariables } from '../../utilities/utilities';
|
|
7
8
|
function invertHexColor(hex, theme) {
|
|
8
9
|
var color = d3.color(hex);
|
|
9
10
|
if (!color) {
|
|
@@ -12,14 +13,19 @@ function invertHexColor(hex, theme) {
|
|
|
12
13
|
var rgb = color.rgb();
|
|
13
14
|
return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();
|
|
14
15
|
}
|
|
15
|
-
function getSafeBackgroundColor(theme, foreground, background) {
|
|
16
|
+
function getSafeBackgroundColor(theme, chartContainer, foreground, background) {
|
|
16
17
|
var fallbackFg = theme.semanticColors.bodyText;
|
|
17
18
|
var fallbackBg = theme.semanticColors.bodyBackground;
|
|
18
|
-
|
|
19
|
-
var bg = d3.color(background || fallbackBg);
|
|
20
|
-
if (!fg || !bg) {
|
|
19
|
+
if (!chartContainer) {
|
|
21
20
|
return fallbackBg;
|
|
22
21
|
}
|
|
22
|
+
var resolvedFg = resolveCSSVariables(chartContainer, foreground || fallbackFg);
|
|
23
|
+
var resolvedBg = resolveCSSVariables(chartContainer, background || fallbackBg);
|
|
24
|
+
var fg = d3.color(resolvedFg);
|
|
25
|
+
var bg = d3.color(resolvedBg);
|
|
26
|
+
if (!fg || !bg) {
|
|
27
|
+
return resolvedBg;
|
|
28
|
+
}
|
|
23
29
|
var contrast = getColorContrast(fg.formatHex(), bg.formatHex());
|
|
24
30
|
if (contrast >= 3) {
|
|
25
31
|
return bg.formatHex();
|
|
@@ -104,7 +110,7 @@ var ChartTableBase = /** @class */ (function (_super) {
|
|
|
104
110
|
style.backgroundColor = sharedBackgroundColor;
|
|
105
111
|
}
|
|
106
112
|
else if (fg || bg) {
|
|
107
|
-
style.backgroundColor = getSafeBackgroundColor(theme, fg, bg);
|
|
113
|
+
style.backgroundColor = getSafeBackgroundColor(theme, _this._rootElem, fg, bg);
|
|
108
114
|
}
|
|
109
115
|
return (React.createElement("th", { key: idx, className: classNames.headerCell, style: style }, header.value));
|
|
110
116
|
}))),
|
|
@@ -113,7 +119,7 @@ var ChartTableBase = /** @class */ (function (_super) {
|
|
|
113
119
|
var fg = style.color;
|
|
114
120
|
var bg = style.backgroundColor;
|
|
115
121
|
if (fg || bg) {
|
|
116
|
-
style.backgroundColor = getSafeBackgroundColor(theme, fg, bg);
|
|
122
|
+
style.backgroundColor = getSafeBackgroundColor(theme, _this._rootElem, fg, bg);
|
|
117
123
|
}
|
|
118
124
|
return (React.createElement("td", { key: colIdx, className: classNames.bodyCell, style: style }, cell.value));
|
|
119
125
|
}))); })))))))));
|
|
@@ -1 +1 @@
|
|
|
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;AAG1D,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,CAAC,KAAa,EAAE,UAAmB,EAAE,UAAmB;IACrF,IAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;IACjD,IAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAEvD,IAAM,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,IAAI,UAAU,CAAC,CAAC;IAC9C,IAAM,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,IAAI,UAAU,CAAC,CAAC;IAC9C,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,EAAE,EAAE,EAAE,CAAC,CAAC;oCACjE,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,EAAE,EAAE,EAAE,CAAC,CAAC;gCACjE,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';\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":"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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';\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"]}
|
|
@@ -409,12 +409,12 @@ export var transformPlotlyJsonToDonutProps = function (input, isMultiPlot, color
|
|
|
409
409
|
};
|
|
410
410
|
};
|
|
411
411
|
export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme, fallbackVSBC) {
|
|
412
|
-
var _a, _b, _c, _d;
|
|
412
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
413
413
|
var mapXToDataPoints = {};
|
|
414
414
|
var yMaxValue = 0;
|
|
415
415
|
var yMinValue = 0;
|
|
416
416
|
var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
|
|
417
|
-
var
|
|
417
|
+
var _j = getLegendProps(input.data, input.layout, isMultiPlot), legends = _j.legends, hideLegend = _j.hideLegend;
|
|
418
418
|
var colorScale = undefined;
|
|
419
419
|
var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
|
|
420
420
|
input.data.forEach(function (series, index1) {
|
|
@@ -485,8 +485,53 @@ export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorM
|
|
|
485
485
|
});
|
|
486
486
|
});
|
|
487
487
|
});
|
|
488
|
+
var xCategories = (_b = (_a = input.data[0]) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : [];
|
|
489
|
+
((_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.shapes) !== null && _d !== void 0 ? _d : [])
|
|
490
|
+
.filter(function (shape) { return shape.type === 'line'; })
|
|
491
|
+
.forEach(function (shape, shapeIdx) {
|
|
492
|
+
var _a, _b, _c;
|
|
493
|
+
var lineColor = (_a = shape.line) === null || _a === void 0 ? void 0 : _a.color;
|
|
494
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
495
|
+
var resolveX = function (val) {
|
|
496
|
+
if (typeof val === 'number' && Array.isArray(xCategories) && xCategories[val] !== undefined) {
|
|
497
|
+
return xCategories[val];
|
|
498
|
+
}
|
|
499
|
+
return val;
|
|
500
|
+
};
|
|
501
|
+
var x0Key = resolveX(shape.x0);
|
|
502
|
+
var x1Key = resolveX(shape.x1);
|
|
503
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
504
|
+
var resolveY = function (val) {
|
|
505
|
+
if (shape.yref === 'paper') {
|
|
506
|
+
if (val === 0) {
|
|
507
|
+
return yMinValue;
|
|
508
|
+
}
|
|
509
|
+
if (val === 1) {
|
|
510
|
+
return yMaxValue;
|
|
511
|
+
}
|
|
512
|
+
return yMinValue + val * (yMaxValue - yMinValue);
|
|
513
|
+
}
|
|
514
|
+
return val;
|
|
515
|
+
};
|
|
516
|
+
var y0Val = resolveY(shape.y0);
|
|
517
|
+
var y1Val = resolveY(shape.y1);
|
|
518
|
+
mapXToDataPoints[x0Key].lineData.push({
|
|
519
|
+
legend: "Reference_".concat(shapeIdx),
|
|
520
|
+
y: y0Val,
|
|
521
|
+
color: (_b = rgb(lineColor).formatHex8()) !== null && _b !== void 0 ? _b : lineColor,
|
|
522
|
+
lineOptions: getLineOptions(shape.line),
|
|
523
|
+
useSecondaryYScale: false,
|
|
524
|
+
});
|
|
525
|
+
mapXToDataPoints[x1Key].lineData.push({
|
|
526
|
+
legend: "Reference_".concat(shapeIdx),
|
|
527
|
+
y: y1Val,
|
|
528
|
+
color: (_c = rgb(lineColor).formatHex8()) !== null && _c !== void 0 ? _c : lineColor,
|
|
529
|
+
lineOptions: getLineOptions(shape.line),
|
|
530
|
+
useSecondaryYScale: false,
|
|
531
|
+
});
|
|
532
|
+
});
|
|
488
533
|
var vsbcData = Object.values(mapXToDataPoints);
|
|
489
|
-
return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ data: vsbcData, width: (
|
|
534
|
+
return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__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));
|
|
490
535
|
};
|
|
491
536
|
export var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
|
|
492
537
|
var _a, _b, _c;
|
|
@@ -654,7 +699,7 @@ export var transformPlotlyJsonToScatterChartProps = function (input, isMultiPlot
|
|
|
654
699
|
return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'scatter', colorMap, colorwayType, isDarkTheme);
|
|
655
700
|
};
|
|
656
701
|
var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chartType, colorMap, colorwayType, isDarkTheme) {
|
|
657
|
-
var _a, _b, _c, _d;
|
|
702
|
+
var _a, _b, _c, _d, _e, _f;
|
|
658
703
|
var isScatterMarkers = [
|
|
659
704
|
'text',
|
|
660
705
|
'markers',
|
|
@@ -669,7 +714,7 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
|
|
|
669
714
|
var isScatterChart = chartType === 'scatter';
|
|
670
715
|
var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
|
|
671
716
|
var mode = 'tonexty';
|
|
672
|
-
var
|
|
717
|
+
var _g = getLegendProps(input.data, input.layout, isMultiPlot), legends = _g.legends, hideLegend = _g.hideLegend;
|
|
673
718
|
var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
|
|
674
719
|
var chartData = input.data
|
|
675
720
|
.map(function (series, index) {
|
|
@@ -729,6 +774,7 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
|
|
|
729
774
|
axisLabel: series.__axisLabel
|
|
730
775
|
? series.__axisLabel
|
|
731
776
|
: {},
|
|
777
|
+
fill: series.fill,
|
|
732
778
|
}
|
|
733
779
|
: {})),
|
|
734
780
|
useSecondaryYScale: usesSecondaryYScale(series, input.layout),
|
|
@@ -736,6 +782,22 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
|
|
|
736
782
|
});
|
|
737
783
|
})
|
|
738
784
|
.flat();
|
|
785
|
+
var lineShape = ((_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.shapes) !== null && _c !== void 0 ? _c : [])
|
|
786
|
+
.filter(function (shape) { return shape.type === 'line'; })
|
|
787
|
+
.map(function (shape, shapeIdx) {
|
|
788
|
+
var _a, _b;
|
|
789
|
+
var lineColor = (_a = shape.line) === null || _a === void 0 ? void 0 : _a.color;
|
|
790
|
+
return {
|
|
791
|
+
legend: "Reference_".concat(shapeIdx),
|
|
792
|
+
data: [
|
|
793
|
+
{ x: shape.x0, y: shape.y0 },
|
|
794
|
+
{ x: shape.x1, y: shape.y1 },
|
|
795
|
+
],
|
|
796
|
+
color: (_b = rgb(lineColor).formatHex8()) !== null && _b !== void 0 ? _b : lineColor,
|
|
797
|
+
lineOptions: getLineOptions(shape.line),
|
|
798
|
+
useSecondaryYScale: false,
|
|
799
|
+
};
|
|
800
|
+
});
|
|
739
801
|
var yMinMax = getYMinMaxValues(input.data[0], input.layout);
|
|
740
802
|
if (yMinMax.yMinValue === undefined && yMinMax.yMaxValue === undefined) {
|
|
741
803
|
var yMinMaxValues = findNumericMinMaxOfY(chartData);
|
|
@@ -744,12 +806,12 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
|
|
|
744
806
|
}
|
|
745
807
|
var numDataPoints = chartData.reduce(function (total, lineChartPoints) { return total + lineChartPoints.data.length; }, 0);
|
|
746
808
|
var chartProps = {
|
|
747
|
-
lineChartData: chartData,
|
|
809
|
+
lineChartData: __spreadArray(__spreadArray([], chartData, true), lineShape, true),
|
|
748
810
|
};
|
|
749
811
|
var scatterChartProps = {
|
|
750
812
|
scatterChartData: chartData,
|
|
751
813
|
};
|
|
752
|
-
var commonProps = __assign(__assign(__assign(__assign(__assign(__assign(__assign({ supportNegativeData: true }, secondaryYAxisValues), { width: (
|
|
814
|
+
var commonProps = __assign(__assign(__assign(__assign(__assign(__assign(__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));
|
|
753
815
|
if (isAreaChart) {
|
|
754
816
|
return __assign({ data: chartProps, mode: mode }, commonProps);
|
|
755
817
|
}
|
|
@@ -1122,8 +1184,20 @@ function resolveCellStyle(raw, rowIndex, colIndex) {
|
|
|
1122
1184
|
}
|
|
1123
1185
|
return raw;
|
|
1124
1186
|
}
|
|
1187
|
+
function mergeCells(tableCells, templateCells) {
|
|
1188
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
1189
|
+
return {
|
|
1190
|
+
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 : [],
|
|
1191
|
+
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,
|
|
1192
|
+
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 : {})),
|
|
1193
|
+
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 : {})),
|
|
1194
|
+
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,
|
|
1195
|
+
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,
|
|
1196
|
+
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,
|
|
1197
|
+
};
|
|
1198
|
+
}
|
|
1125
1199
|
export var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
|
|
1126
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
1200
|
+
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;
|
|
1127
1201
|
var tableData = input.data[0];
|
|
1128
1202
|
var normalizeHeaders = function (values, header) {
|
|
1129
1203
|
var cleanedValues = Array.isArray(values[0])
|
|
@@ -1147,9 +1221,7 @@ export var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot,
|
|
|
1147
1221
|
});
|
|
1148
1222
|
};
|
|
1149
1223
|
var columns = (_b = (_a = tableData.cells) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : [];
|
|
1150
|
-
var cells = tableData.cells
|
|
1151
|
-
? tableData.cells
|
|
1152
|
-
: (_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;
|
|
1224
|
+
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);
|
|
1153
1225
|
var rows = columns[0].map(function (_, rowIndex) {
|
|
1154
1226
|
return columns.map(function (col, colIndex) {
|
|
1155
1227
|
var _a, _b, _c;
|
|
@@ -1172,13 +1244,19 @@ export var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot,
|
|
|
1172
1244
|
var styles = {
|
|
1173
1245
|
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 } : {})),
|
|
1174
1246
|
};
|
|
1247
|
+
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;
|
|
1248
|
+
var tableHeader = tableData.header;
|
|
1249
|
+
var header = {
|
|
1250
|
+
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,
|
|
1251
|
+
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 : {})),
|
|
1252
|
+
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 : {})),
|
|
1253
|
+
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 : [],
|
|
1254
|
+
};
|
|
1175
1255
|
return {
|
|
1176
|
-
headers: normalizeHeaders((
|
|
1177
|
-
? tableData.header
|
|
1178
|
-
: (_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),
|
|
1256
|
+
headers: normalizeHeaders((_y = (_x = tableData.header) === null || _x === void 0 ? void 0 : _x.values) !== null && _y !== void 0 ? _y : [], header),
|
|
1179
1257
|
rows: rows,
|
|
1180
|
-
width: (
|
|
1181
|
-
height: (
|
|
1258
|
+
width: (_z = input.layout) === null || _z === void 0 ? void 0 : _z.width,
|
|
1259
|
+
height: (_0 = input.layout) === null || _0 === void 0 ? void 0 : _0.height,
|
|
1182
1260
|
styles: styles,
|
|
1183
1261
|
};
|
|
1184
1262
|
};
|