@fluentui/react-charting 5.24.16 → 5.24.17

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 (32) hide show
  1. package/CHANGELOG.json +28 -1
  2. package/CHANGELOG.md +13 -2
  3. package/dist/react-charting.js +1 -1
  4. package/dist/react-charting.min.js +1 -1
  5. package/lib/components/ChartTable/ChartTable.base.js +83 -4
  6. package/lib/components/ChartTable/ChartTable.base.js.map +1 -1
  7. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +70 -25
  8. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  9. package/lib/components/FunnelChart/FunnelChart.base.js +44 -15
  10. package/lib/components/FunnelChart/FunnelChart.base.js.map +1 -1
  11. package/lib/components/FunnelChart/funnelGeometry.d.ts +8 -8
  12. package/lib/components/FunnelChart/funnelGeometry.js +4 -4
  13. package/lib/components/FunnelChart/funnelGeometry.js.map +1 -1
  14. package/lib-amd/components/ChartTable/ChartTable.base.js +81 -4
  15. package/lib-amd/components/ChartTable/ChartTable.base.js.map +1 -1
  16. package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js +70 -25
  17. package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  18. package/lib-amd/components/FunnelChart/FunnelChart.base.js +44 -15
  19. package/lib-amd/components/FunnelChart/FunnelChart.base.js.map +1 -1
  20. package/lib-amd/components/FunnelChart/funnelGeometry.d.ts +8 -8
  21. package/lib-amd/components/FunnelChart/funnelGeometry.js +9 -9
  22. package/lib-amd/components/FunnelChart/funnelGeometry.js.map +1 -1
  23. package/lib-commonjs/components/ChartTable/ChartTable.base.js +82 -3
  24. package/lib-commonjs/components/ChartTable/ChartTable.base.js.map +1 -1
  25. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +70 -25
  26. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  27. package/lib-commonjs/components/FunnelChart/FunnelChart.base.js +44 -15
  28. package/lib-commonjs/components/FunnelChart/FunnelChart.base.js.map +1 -1
  29. package/lib-commonjs/components/FunnelChart/funnelGeometry.d.ts +8 -8
  30. package/lib-commonjs/components/FunnelChart/funnelGeometry.js +9 -9
  31. package/lib-commonjs/components/FunnelChart/funnelGeometry.js.map +1 -1
  32. package/package.json +1 -1
package/lib/components/ChartTable/ChartTable.base.js CHANGED
@@ -1,7 +1,33 @@
1
- import { __extends } from "tslib";
1
+ import { __assign, __extends } from "tslib";
2
2
  import * as React from 'react';
3
3
  import { classNamesFunction, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities';
4
4
  import { toImage } from '../../utilities/image-export-utils';
5
+ import * as d3 from 'd3-color';
6
+ import { getColorContrast } from '../../utilities/colors';
7
+ function invertHexColor(hex, theme) {
8
+ var color = d3.color(hex);
9
+ if (!color) {
10
+ return theme.semanticColors.bodyText;
11
+ }
12
+ var rgb = color.rgb();
13
+ return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();
14
+ }
15
+ function getSafeBackgroundColor(theme, foreground, background) {
16
+ var fallbackFg = theme.semanticColors.bodyText;
17
+ var fallbackBg = theme.semanticColors.bodyBackground;
18
+ var fg = d3.color(foreground || fallbackFg);
19
+ var bg = d3.color(background || fallbackBg);
20
+ if (!fg || !bg) {
21
+ return fallbackBg;
22
+ }
23
+ var contrast = getColorContrast(fg.formatHex(), bg.formatHex());
24
+ if (contrast >= 3) {
25
+ return bg.formatHex();
26
+ }
27
+ var invertedBg = invertHexColor(bg.formatHex(), theme);
28
+ var invertedContrast = getColorContrast(fg.formatHex(), invertedBg);
29
+ return invertedContrast >= 3 ? invertedBg : fallbackBg;
30
+ }
5
31
  var getClassNames = classNamesFunction();
6
32
  var ChartTableBase = /** @class */ (function (_super) {
7
33
  __extends(ChartTableBase, _super);
@@ -17,13 +43,47 @@ var ChartTableBase = /** @class */ (function (_super) {
17
43
  // eslint-disable-next-line @typescript-eslint/no-deprecated
18
44
  ChartTableBase.prototype.render = function () {
19
45
  var _this = this;
20
- var _a = this.props, headers = _a.headers, rows = _a.rows, width = _a.width, height = _a.height, styles = _a.styles, theme = _a.theme;
46
+ var _a;
47
+ var _b = this.props, headers = _b.headers, rows = _b.rows, width = _b.width, height = _b.height, styles = _b.styles, theme = _b.theme;
21
48
  var classNames = getClassNames(styles, {
22
49
  theme: theme,
23
50
  });
24
51
  if (!headers || headers.length === 0) {
25
52
  return React.createElement("div", null, "No data available");
26
53
  }
54
+ var bgColorSet = new Set();
55
+ headers.forEach(function (header) {
56
+ var _a, _b;
57
+ var bg = (_a = header === null || header === void 0 ? void 0 : header.style) === null || _a === void 0 ? void 0 : _a.backgroundColor;
58
+ var normalized = (_b = d3.color(bg || '')) === null || _b === void 0 ? void 0 : _b.formatHex();
59
+ if (normalized) {
60
+ bgColorSet.add(normalized);
61
+ }
62
+ });
63
+ var sharedBackgroundColor;
64
+ var useSharedBackground = false;
65
+ /*
66
+ If we have only one or two unique background colors, we can consider using a shared background color
67
+ for the table headers. This is to ensure better contrast with the foreground text.
68
+ For size 1, we will consider that as default color if it satisfies the contrast ratio.
69
+ There could also be a scenario where backgroundcolor array is of size 2, for eg: ["dimsgray", "gray"],
70
+ which will assign 1st column header bg color to dimsgray and rest to gray. so our logic of shared background
71
+ color won't run here. So will consider for size 2 as well.
72
+ For size greater than this, we will consider that user wants different colors and will let color contrast fail
73
+ if any.
74
+ */
75
+ if (bgColorSet.size === 1 || bgColorSet.size === 2) {
76
+ var candidateBg = bgColorSet.size === 1 ? Array.from(bgColorSet)[0] : Array.from(bgColorSet)[1];
77
+ for (var _i = 0, headers_1 = headers; _i < headers_1.length; _i++) {
78
+ var header = headers_1[_i];
79
+ var fg = (_a = header === null || header === void 0 ? void 0 : header.style) === null || _a === void 0 ? void 0 : _a.color;
80
+ if (fg && getColorContrast(fg, candidateBg) >= 3) {
81
+ sharedBackgroundColor = candidateBg;
82
+ useSharedBackground = true;
83
+ break;
84
+ }
85
+ }
86
+ }
27
87
  return (React.createElement("div", { ref: function (el) { return (_this._rootElem = el); }, className: classNames.root, style: { height: height ? "".concat(height, "px") : '650px', overflow: 'hidden' } },
28
88
  React.createElement("svg", { width: width !== null && width !== void 0 ? width : '100%', height: height !== null && height !== void 0 ? height : '650px', className: classNames.chart },
29
89
  React.createElement("foreignObject", { x: "0", y: "0", width: "100%", height: "100%" },
@@ -36,8 +96,27 @@ var ChartTableBase = /** @class */ (function (_super) {
36
96
  width: width ? "".concat(width, "px") : '100%',
37
97
  } },
38
98
  React.createElement("thead", null,
39
- React.createElement("tr", null, headers.map(function (header, idx) { return (React.createElement("th", { key: idx, className: classNames.headerCell, style: header === null || header === void 0 ? void 0 : header.style }, header.value)); }))),
40
- rows && rows.length > 0 && (React.createElement("tbody", null, rows.map(function (row, rowIdx) { return (React.createElement("tr", { key: rowIdx }, row.map(function (cell, colIdx) { return (React.createElement("td", { key: colIdx, className: classNames.bodyCell, style: cell === null || cell === void 0 ? void 0 : cell.style }, cell.value)); }))); })))))))));
99
+ React.createElement("tr", null, headers.map(function (header, idx) {
100
+ var style = __assign({}, header === null || header === void 0 ? void 0 : header.style);
101
+ var fg = style.color;
102
+ var bg = style.backgroundColor;
103
+ if (useSharedBackground) {
104
+ style.backgroundColor = sharedBackgroundColor;
105
+ }
106
+ else if (fg || bg) {
107
+ style.backgroundColor = getSafeBackgroundColor(theme, fg, bg);
108
+ }
109
+ return (React.createElement("th", { key: idx, className: classNames.headerCell, style: style }, header.value));
110
+ }))),
111
+ rows && rows.length > 0 && (React.createElement("tbody", null, rows.map(function (row, rowIdx) { return (React.createElement("tr", { key: rowIdx }, row.map(function (cell, colIdx) {
112
+ var style = __assign({}, cell === null || cell === void 0 ? void 0 : cell.style);
113
+ var fg = style.color;
114
+ var bg = style.backgroundColor;
115
+ if (fg || bg) {
116
+ style.backgroundColor = getSafeBackgroundColor(theme, fg, bg);
117
+ }
118
+ return (React.createElement("td", { key: colIdx, className: classNames.bodyCell, style: style }, cell.value));
119
+ }))); })))))))));
41
120
  };
42
121
  return ChartTableBase;
43
122
  }(React.Component));
package/lib/components/ChartTable/ChartTable.base.js.map CHANGED
@@ -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';\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\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 <th key={idx} className={classNames.headerCell} style={header?.style}>\n {header.value}\n </th>\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 <td key={colIdx} className={classNames.bodyCell} style={cell?.style}>\n {cell.value}\n </td>\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';\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"]}
package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js CHANGED
@@ -333,7 +333,7 @@ export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorM
333
333
  });
334
334
  });
335
335
  var vsbcData = Object.values(mapXToDataPoints);
336
- return __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);
336
+ return __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));
337
337
  };
338
338
  export var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
339
339
  var _a, _b, _c, _d;
@@ -378,7 +378,7 @@ export var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorM
378
378
  });
379
379
  });
380
380
  var gvbcData = Object.values(mapXToDataPoints);
381
- return __assign(__assign(__assign(__assign(__assign(__assign(__assign({ data: gvbcData, 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', mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, wrapXAxisLables: typeof ((_d = gvbcData[0]) === null || _d === void 0 ? void 0 : _d.name) === 'string' }), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat);
381
+ return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ data: gvbcData, 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', mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, wrapXAxisLables: typeof ((_d = gvbcData[0]) === null || _d === void 0 ? void 0 : _d.name) === '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));
382
382
  };
383
383
  export var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
384
384
  var _a, _b, _c, _d;
@@ -585,9 +585,9 @@ export var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, is
585
585
  var scalingFactor = 0.01;
586
586
  var gapFactor = 1 / (1 + scalingFactor * numberOfRows);
587
587
  var barHeight = availableHeight / (numberOfRows * (1 + gapFactor));
588
- return __assign(__assign({ data: chartData, secondaryYAxistitle: typeof ((_k = (_j = input.layout) === null || _j === void 0 ? void 0 : _j.yaxis2) === null || _k === void 0 ? void 0 : _k.title) === 'string'
588
+ return __assign(__assign(__assign({ data: chartData, secondaryYAxistitle: typeof ((_k = (_j = input.layout) === null || _j === void 0 ? void 0 : _j.yaxis2) === null || _k === void 0 ? void 0 : _k.title) === 'string'
589
589
  ? (_m = (_l = input.layout) === null || _l === void 0 ? void 0 : _l.yaxis2) === null || _m === void 0 ? void 0 : _m.title
590
- : ((_q = (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.yaxis2) === null || _p === void 0 ? void 0 : _p.title) === null || _q === void 0 ? void 0 : _q.text) || '', barHeight: barHeight, showYAxisLables: true, height: chartHeight, width: (_r = input.layout) === null || _r === void 0 ? void 0 : _r.width, hideTickOverlap: true, hideLegend: hideLegend, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundCorners: true }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout));
590
+ : ((_q = (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.yaxis2) === null || _p === void 0 ? void 0 : _p.title) === null || _q === void 0 ? void 0 : _q.text) || '', barHeight: barHeight, showYAxisLables: true, height: chartHeight, width: (_r = input.layout) === null || _r === void 0 ? void 0 : _r.width, hideTickOverlap: true, hideLegend: hideLegend, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundCorners: true }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getBarProps(input.data, input.layout, true));
591
591
  };
592
592
  export var transformPlotlyJsonToGanttChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
593
593
  var _a, _b, _c;
@@ -633,7 +633,7 @@ export var transformPlotlyJsonToGanttChartProps = function (input, isMultiPlot,
633
633
  .filter(function (point) { return point !== null; });
634
634
  })
635
635
  .flat();
636
- return __assign(__assign({ data: chartData, showYAxisLables: true, height: (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 350, width: (_c = input.layout) === null || _c === void 0 ? void 0 : _c.width, hideTickOverlap: true, hideLegend: hideLegend, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundCorners: true, useUTC: false }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout));
636
+ return __assign(__assign(__assign({ data: chartData, showYAxisLables: true, height: (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 350, width: (_c = input.layout) === null || _c === void 0 ? void 0 : _c.width, hideTickOverlap: true, hideLegend: hideLegend, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundCorners: true, useUTC: false }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getBarProps(input.data, input.layout, true));
637
637
  };
638
638
  export var transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
639
639
  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, _1, _2, _3, _4, _5, _6, _7, _8;
@@ -896,7 +896,7 @@ var formatValue = function (value, colIndex, cells) {
896
896
  return "".concat(prefix !== null && prefix !== void 0 ? prefix : '').concat(formatted).concat(suffix !== null && suffix !== void 0 ? suffix : '');
897
897
  };
898
898
  export var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
899
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
899
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
900
900
  var tableData = input.data[0];
901
901
  var normalizeHeaders = function (values, header) {
902
902
  var cleanedValues = Array.isArray(values[0])
@@ -908,11 +908,11 @@ export var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot,
908
908
  })
909
909
  : values.map(function (cell) { return cleanText(cell); });
910
910
  return cleanedValues.map(function (value, colIndex) {
911
- var _a, _b, _c;
911
+ var _a, _b, _c, _d, _e, _f, _g, _h;
912
912
  var fontColorRaw = (_a = header === null || header === void 0 ? void 0 : header.font) === null || _a === void 0 ? void 0 : _a.color;
913
913
  var fontColor;
914
914
  if (Array.isArray(fontColorRaw)) {
915
- var colorEntry = fontColorRaw[colIndex];
915
+ var colorEntry = (_b = fontColorRaw[colIndex]) !== null && _b !== void 0 ? _b : fontColorRaw[0];
916
916
  if (Array.isArray(colorEntry)) {
917
917
  fontColor = typeof colorEntry[0] === 'string' ? colorEntry[0] : undefined;
918
918
  }
@@ -923,28 +923,37 @@ export var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot,
923
923
  else if (typeof fontColorRaw === 'string') {
924
924
  fontColor = fontColorRaw;
925
925
  }
926
- var fontSizeRaw = (_b = header === null || header === void 0 ? void 0 : header.font) === null || _b === void 0 ? void 0 : _b.size;
926
+ var fontSizeRaw = (_c = header === null || header === void 0 ? void 0 : header.font) === null || _c === void 0 ? void 0 : _c.size;
927
927
  var fontSize;
928
928
  if (Array.isArray(fontSizeRaw)) {
929
- fontSize = Array.isArray(fontSizeRaw[0]) ? fontSizeRaw[0][colIndex] : fontSizeRaw[colIndex];
929
+ var fontSizeEntry = (_d = fontSizeRaw[colIndex]) !== null && _d !== void 0 ? _d : fontSizeRaw[0];
930
+ fontSize = Array.isArray(fontSizeRaw[0])
931
+ ? (_e = fontSizeRaw[0][colIndex]) !== null && _e !== void 0 ? _e : fontSizeRaw[0][0]
932
+ : typeof fontSizeEntry === 'number'
933
+ ? fontSizeEntry
934
+ : undefined;
930
935
  }
931
936
  else if (typeof fontSizeRaw === 'number') {
932
937
  fontSize = fontSizeRaw;
933
938
  }
934
939
  var updatedColIndex = colIndex >= 1 ? 1 : 0;
935
- var fillColorRaw = (_c = header === null || header === void 0 ? void 0 : header.fill) === null || _c === void 0 ? void 0 : _c.color;
936
- var backgroundColor = Array.isArray(fillColorRaw) ? fillColorRaw[updatedColIndex] : fillColorRaw;
940
+ var fillColorRaw = (_f = header === null || header === void 0 ? void 0 : header.fill) === null || _f === void 0 ? void 0 : _f.color;
941
+ var backgroundColor = Array.isArray(fillColorRaw)
942
+ ? (_g = fillColorRaw[updatedColIndex]) !== null && _g !== void 0 ? _g : fillColorRaw[0]
943
+ : fillColorRaw;
937
944
  var textAlignRaw = header === null || header === void 0 ? void 0 : header.align;
938
- var textAlign = Array.isArray(textAlignRaw) ? textAlignRaw[colIndex] : textAlignRaw;
945
+ var textAlign = Array.isArray(textAlignRaw) ? (_h = textAlignRaw[colIndex]) !== null && _h !== void 0 ? _h : textAlignRaw[0] : textAlignRaw;
939
946
  var style = __assign(__assign(__assign(__assign({}, (typeof fontColor === 'string' ? { color: fontColor } : {})), (typeof fontSize === 'number' ? { fontSize: fontSize } : {})), (typeof backgroundColor === 'string' ? { backgroundColor: backgroundColor } : {})), (textAlign ? { textAlign: textAlign } : {}));
940
947
  return { value: value, style: style };
941
948
  });
942
949
  };
943
950
  var columns = (_b = (_a = tableData.cells) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : [];
944
- var cells = tableData.cells.font ? tableData.cells : (_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[0].cells;
951
+ var cells = tableData.cells && Object.keys(tableData.cells).length > 0
952
+ ? tableData.cells
953
+ : (_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;
945
954
  var rows = columns[0].map(function (_, rowIndex) {
946
955
  return columns.map(function (col, colIndex) {
947
- var _a, _b, _c;
956
+ var _a, _b, _c, _d, _e, _f, _g;
948
957
  var cellValue = col[rowIndex];
949
958
  var cleanValue = typeof cellValue === 'string' ? cleanText(cellValue) : cellValue;
950
959
  var formattedValue = typeof cleanValue === 'string' || typeof cleanValue === 'number'
@@ -953,17 +962,17 @@ export var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot,
953
962
  var rawFontColor = (_a = cells === null || cells === void 0 ? void 0 : cells.font) === null || _a === void 0 ? void 0 : _a.color;
954
963
  var fontColor;
955
964
  if (Array.isArray(rawFontColor)) {
956
- var entry = rawFontColor[colIndex];
965
+ var entry = (_b = rawFontColor[colIndex]) !== null && _b !== void 0 ? _b : rawFontColor[0];
957
966
  var colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
958
967
  fontColor = typeof colorValue === 'string' ? colorValue : undefined;
959
968
  }
960
969
  else if (typeof rawFontColor === 'string') {
961
970
  fontColor = rawFontColor;
962
971
  }
963
- var rawFontSize = (_b = cells === null || cells === void 0 ? void 0 : cells.font) === null || _b === void 0 ? void 0 : _b.size;
972
+ var rawFontSize = (_c = cells === null || cells === void 0 ? void 0 : cells.font) === null || _c === void 0 ? void 0 : _c.size;
964
973
  var fontSize;
965
974
  if (Array.isArray(rawFontSize)) {
966
- var entry = rawFontSize[colIndex];
975
+ var entry = (_d = rawFontSize[colIndex]) !== null && _d !== void 0 ? _d : rawFontSize[0];
967
976
  var fontSizeValue = Array.isArray(entry) ? entry[rowIndex] : entry;
968
977
  fontSize = typeof fontSizeValue === 'number' ? fontSizeValue : undefined;
969
978
  }
@@ -971,17 +980,17 @@ export var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot,
971
980
  fontSize = rawFontSize;
972
981
  }
973
982
  var updatedColIndex = colIndex >= 1 ? 1 : 0;
974
- var rawBackgroundColor = (_c = cells === null || cells === void 0 ? void 0 : cells.fill) === null || _c === void 0 ? void 0 : _c.color;
983
+ var rawBackgroundColor = (_e = cells === null || cells === void 0 ? void 0 : cells.fill) === null || _e === void 0 ? void 0 : _e.color;
975
984
  var backgroundColor;
976
985
  if (Array.isArray(rawBackgroundColor)) {
977
- var entry = rawBackgroundColor[updatedColIndex];
986
+ var entry = (_f = rawBackgroundColor[updatedColIndex]) !== null && _f !== void 0 ? _f : rawBackgroundColor[0];
978
987
  var colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
979
988
  backgroundColor = typeof colorValue === 'string' ? colorValue : undefined;
980
989
  }
981
990
  else if (typeof rawBackgroundColor === 'string') {
982
991
  backgroundColor = rawBackgroundColor;
983
992
  }
984
- var rawTextAlign = Array.isArray(cells === null || cells === void 0 ? void 0 : cells.align) ? cells.align[colIndex] : cells === null || cells === void 0 ? void 0 : cells.align;
993
+ var rawTextAlign = Array.isArray(cells === null || cells === void 0 ? void 0 : cells.align) ? (_g = cells.align[colIndex]) !== null && _g !== void 0 ? _g : cells.align[0] : cells === null || cells === void 0 ? void 0 : cells.align;
985
994
  var textAlign = rawTextAlign;
986
995
  var style = __assign(__assign(__assign(__assign({}, (fontColor ? { color: fontColor } : {})), (typeof fontSize === 'number' ? { fontSize: fontSize } : {})), (backgroundColor ? { backgroundColor: backgroundColor } : {})), (textAlign ? { textAlign: textAlign } : {}));
987
996
  return {
@@ -991,13 +1000,15 @@ export var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot,
991
1000
  });
992
1001
  });
993
1002
  var styles = {
994
- root: __assign({}, (((_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.font) === null || _g === void 0 ? void 0 : _g.size) ? { fontSize: input.layout.font.size } : {})),
1003
+ 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 } : {})),
995
1004
  };
996
1005
  return {
997
- headers: normalizeHeaders((_j = (_h = tableData.header) === null || _h === void 0 ? void 0 : _h.values) !== null && _j !== void 0 ? _j : [], ((_k = tableData.header) === null || _k === void 0 ? void 0 : _k.font) ? tableData.header : (_o = (_m = (_l = input.layout) === null || _l === void 0 ? void 0 : _l.template) === null || _m === void 0 ? void 0 : _m.data) === null || _o === void 0 ? void 0 : _o.table[0].header),
1006
+ 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
1007
+ ? tableData.header
1008
+ : (_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),
998
1009
  rows: rows,
999
- width: (_p = input.layout) === null || _p === void 0 ? void 0 : _p.width,
1000
- height: (_q = input.layout) === null || _q === void 0 ? void 0 : _q.height,
1010
+ width: (_q = input.layout) === null || _q === void 0 ? void 0 : _q.width,
1011
+ height: (_r = input.layout) === null || _r === void 0 ? void 0 : _r.height,
1001
1012
  styles: styles,
1002
1013
  };
1003
1014
  };
@@ -1746,4 +1757,38 @@ var parseLocalDate = function (value) {
1746
1757
  }
1747
1758
  return new Date(value);
1748
1759
  };
1760
+ var getBarProps = function (data, layout, isHorizontal) {
1761
+ var padding;
1762
+ if (typeof (layout === null || layout === void 0 ? void 0 : layout.bargap) === 'number') {
1763
+ padding = layout.bargap;
1764
+ }
1765
+ var plotlyBarWidths = data
1766
+ .map(function (series) {
1767
+ if (series.type === 'bar' && (isArrayOrTypedArray(series.width) || typeof series.width === 'number')) {
1768
+ return series.width;
1769
+ }
1770
+ return [];
1771
+ })
1772
+ .flat();
1773
+ var maxPlotlyBarWidth = d3Max(plotlyBarWidths);
1774
+ if (typeof maxPlotlyBarWidth === 'number') {
1775
+ padding = 1 - maxPlotlyBarWidth;
1776
+ padding = Math.max(0, Math.min(padding, 1));
1777
+ }
1778
+ if (typeof padding === 'undefined') {
1779
+ return {};
1780
+ }
1781
+ if (isHorizontal) {
1782
+ return {
1783
+ maxBarHeight: 1000,
1784
+ yAxisPadding: padding,
1785
+ };
1786
+ }
1787
+ return {
1788
+ barWidth: 'auto',
1789
+ maxBarWidth: 1000,
1790
+ xAxisInnerPadding: padding,
1791
+ xAxisOuterPadding: padding / 2,
1792
+ };
1793
+ };
1749
1794
  //# sourceMappingURL=PlotlySchemaAdapter.js.map