@fluentui/react-charting 5.23.95 → 5.23.97

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 (38) hide show
  1. package/CHANGELOG.json +55 -1
  2. package/CHANGELOG.md +24 -2
  3. package/dist/react-charting.d.ts +8 -2
  4. package/dist/react-charting.js +1 -1
  5. package/dist/react-charting.min.js +1 -1
  6. package/etc/react-charting.api.md +8 -2
  7. package/lib/components/ChartTable/ChartTable.base.js +2 -2
  8. package/lib/components/ChartTable/ChartTable.base.js.map +1 -1
  9. package/lib/components/ChartTable/ChartTable.types.d.ts +9 -2
  10. package/lib/components/ChartTable/ChartTable.types.js.map +1 -1
  11. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.d.ts +0 -1
  12. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +154 -35
  13. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  14. package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.d.ts +1 -0
  15. package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js +40 -24
  16. package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js.map +1 -1
  17. package/lib-amd/components/ChartTable/ChartTable.base.js +2 -2
  18. package/lib-amd/components/ChartTable/ChartTable.base.js.map +1 -1
  19. package/lib-amd/components/ChartTable/ChartTable.types.d.ts +9 -2
  20. package/lib-amd/components/ChartTable/ChartTable.types.js.map +1 -1
  21. package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.d.ts +0 -1
  22. package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js +161 -44
  23. package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  24. package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.d.ts +1 -0
  25. package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js +39 -24
  26. package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js.map +1 -1
  27. package/lib-commonjs/components/ChartTable/ChartTable.base.js +2 -2
  28. package/lib-commonjs/components/ChartTable/ChartTable.base.js.map +1 -1
  29. package/lib-commonjs/components/ChartTable/ChartTable.types.d.ts +9 -2
  30. package/lib-commonjs/components/ChartTable/ChartTable.types.js.map +1 -1
  31. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.d.ts +0 -1
  32. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +161 -43
  33. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  34. package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.d.ts +1 -0
  35. package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js +39 -23
  36. package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js.map +1 -1
  37. package/package.json +2 -2
  38. package/src/components/ChartTable/ChartTable.types.ts +3 -2
package/etc/react-charting.api.md CHANGED
@@ -439,9 +439,15 @@ export interface IChartProps {
439
439
  export interface IChartTableProps {
440
440
  className?: string;
441
441
  componentRef?: IRefObject<IChart>;
442
- headers: (string | number | boolean | null)[] | (string | number | boolean | null)[][];
442
+ headers: {
443
+ value: string | number | boolean | null;
444
+ style?: React_2.CSSProperties;
445
+ }[];
443
446
  height?: string | number;
444
- rows: (string | number | boolean | null)[][];
447
+ rows: {
448
+ value: string | number | boolean | null;
449
+ style?: React_2.CSSProperties;
450
+ }[][];
445
451
  styles?: IStyleFunctionOrObject<IChartTableStyleProps, IChartTableStyles>;
446
452
  theme?: ITheme;
447
453
  width?: string | number;
package/lib/components/ChartTable/ChartTable.base.js CHANGED
@@ -35,8 +35,8 @@ var ChartTableBase = /** @class */ (function (_super) {
35
35
  width: width ? "".concat(width, "px") : '100%',
36
36
  } },
37
37
  React.createElement("thead", null,
38
- React.createElement("tr", null, headers.map(function (header, idx) { return (React.createElement("th", { key: idx, className: classNames.headerCell }, header)); }))),
39
- 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 }, cell)); }))); })))))))));
38
+ 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)); }))),
39
+ 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)); }))); })))))))));
40
40
  };
41
41
  return ChartTableBase;
42
42
  }(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 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'}>\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}>\n {header}\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}>\n {cell}\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';\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 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'}>\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"]}
package/lib/components/ChartTable/ChartTable.types.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import * as React from 'react';
1
2
  import { ITheme, IStyle } from '@fluentui/react/lib/Styling';
2
3
  import { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
3
4
  import { IChart } from '../../types/index';
@@ -13,11 +14,17 @@ export interface IChartTableProps {
13
14
  /**
14
15
  * 1d or 2d Array of header values.
15
16
  */
16
- headers: (string | number | boolean | null)[] | (string | number | boolean | null)[][];
17
+ headers: {
18
+ value: string | number | boolean | null;
19
+ style?: React.CSSProperties;
20
+ }[];
17
21
  /**
18
22
  * Array of rows. Each row corresponds to one data entry under each column.
19
23
  */
20
- rows: (string | number | boolean | null)[][];
24
+ rows: {
25
+ value: string | number | boolean | null;
26
+ style?: React.CSSProperties;
27
+ }[][];
21
28
  /**
22
29
  * Optional width for the table
23
30
  * @default '100%'
package/lib/components/ChartTable/ChartTable.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChartTable.types.js","sourceRoot":"../src/","sources":["components/ChartTable/ChartTable.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IChart } from '../../types/index';\n\nexport interface IChartTableStyleProps {\n theme: ITheme;\n className?: string;\n}\n\n/**\n * Chart Table properties\n * {@docCategory ChartTable}\n */\nexport interface IChartTableProps {\n /**\n * 1d or 2d Array of header values.\n */\n headers: (string | number | boolean | null)[] | (string | number | boolean | null)[][];\n\n /**\n * Array of rows. Each row corresponds to one data entry under each column.\n */\n rows: (string | number | boolean | null)[][];\n\n /**\n * Optional width for the table\n * @default '100%'\n */\n width?: string | number;\n\n /**\n * Optional height for the table\n * @default '650px'\n */\n height?: string | number;\n\n /**\n * Theme (provided through customization)\n */\n theme?: ITheme;\n\n /**\n * Additional class name(s) to apply to the table chart\n */\n className?: string;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<IChartTableStyleProps, IChartTableStyles>;\n\n /**\n * Optional callback to access the IChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject<IChart>;\n}\n\n/**\n * Table Chart styles\n * {@docCategory ChartTable}\n */\nexport interface IChartTableStyles {\n root?: IStyle;\n table?: IStyle;\n headerCell?: IStyle;\n bodyCell?: IStyle;\n}\n"]}
1
+ {"version":3,"file":"ChartTable.types.js","sourceRoot":"../src/","sources":["components/ChartTable/ChartTable.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IChart } from '../../types/index';\n\nexport interface IChartTableStyleProps {\n theme: ITheme;\n className?: string;\n}\n\n/**\n * Chart Table properties\n * {@docCategory ChartTable}\n */\nexport interface IChartTableProps {\n /**\n * 1d or 2d Array of header values.\n */\n headers: { value: string | number | boolean | null; style?: React.CSSProperties }[];\n\n /**\n * Array of rows. Each row corresponds to one data entry under each column.\n */\n rows: { value: string | number | boolean | null; style?: React.CSSProperties }[][];\n\n /**\n * Optional width for the table\n * @default '100%'\n */\n width?: string | number;\n\n /**\n * Optional height for the table\n * @default '650px'\n */\n height?: string | number;\n\n /**\n * Theme (provided through customization)\n */\n theme?: ITheme;\n\n /**\n * Additional class name(s) to apply to the table chart\n */\n className?: string;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<IChartTableStyleProps, IChartTableStyles>;\n\n /**\n * Optional callback to access the IChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject<IChart>;\n}\n\n/**\n * Table Chart styles\n * {@docCategory ChartTable}\n */\nexport interface IChartTableStyles {\n root?: IStyle;\n table?: IStyle;\n headerCell?: IStyle;\n bodyCell?: IStyle;\n}\n"]}
package/lib/components/DeclarativeChart/PlotlySchemaAdapter.d.ts CHANGED
@@ -32,6 +32,5 @@ export declare const projectPolarToCartesian: (input: PlotlySchema) => PlotlySch
32
32
  * @param trace
33
33
  */
34
34
  export declare function findArrayAttributes(trace: any): void;
35
- export declare const isInvalidValue: (value: any) => boolean;
36
35
  export declare const getNumberAtIndexOrDefault: (data: PlotData['z'] | undefined, index: number) => number | undefined;
37
36
  export declare const getValidXYRanges: (series: Partial<PlotData>) => [number, number][];
package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js CHANGED
@@ -1,10 +1,11 @@
1
1
  import { __assign } from "tslib";
2
2
  import { bin as d3Bin, extent as d3Extent, sum as d3Sum, min as d3Min, max as d3Max, range as d3Range, } from 'd3-array';
3
3
  import { scaleLinear as d3ScaleLinear } from 'd3-scale';
4
+ import { format as d3Format } from 'd3-format';
4
5
  import { DataVizPalette, getColorFromToken } from '../../utilities/colors';
5
6
  import { GaugeChartVariant } from '../GaugeChart/index';
6
- import { findNumericMinMaxOfY } from '../../utilities/utilities';
7
- import { isArrayOfType, isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isYearArray, } from '@fluentui/chart-utilities';
7
+ import { findNumericMinMaxOfY, formatValueLimitWidth } from '../../utilities/utilities';
8
+ import { isArrayOfType, isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isYearArray, isInvalidValue, } from '@fluentui/chart-utilities';
8
9
  import { timeParse } from 'd3-time-format';
9
10
  import { curveCardinal as d3CurveCardinal } from 'd3-shape';
10
11
  import { extractColor, resolveColor } from './PlotlyColorAdapter';
@@ -150,12 +151,14 @@ export var _getGaugeAxisColor = function (colorway, colorwayType, color, colorMa
150
151
  return resolveColor(extractedColors, 0, '', colorMap, isDarkTheme);
151
152
  };
152
153
  export var transformPlotlyJsonToDonutProps = function (input, colorMap, colorwayType, isDarkTheme) {
153
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
154
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
154
155
  var firstData = input.data[0];
155
156
  // extract colors for each series only once
156
- var colors = extractColor((_c = (_b = (_a = input.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 = firstData === null || firstData === void 0 ? void 0 : firstData.marker) === null || _d === void 0 ? void 0 : _d.colors, colorMap, isDarkTheme);
157
+ // use piecolorway if available
158
+ // otherwise, default to colorway from template
159
+ var colors = extractColor((_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.piecolorway) !== null && _b !== void 0 ? _b : (_e = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.template) === null || _d === void 0 ? void 0 : _d.layout) === null || _e === void 0 ? void 0 : _e.colorway, colorwayType, (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.piecolorway) !== null && _g !== void 0 ? _g : (_h = firstData === null || firstData === void 0 ? void 0 : firstData.marker) === null || _h === void 0 ? void 0 : _h.colors, colorMap, isDarkTheme);
157
160
  var mapLegendToDataPoint = {};
158
- (_e = firstData.labels) === null || _e === void 0 ? void 0 : _e.forEach(function (label, index) {
161
+ (_j = firstData.labels) === null || _j === void 0 ? void 0 : _j.forEach(function (label, index) {
159
162
  var value = getNumberAtIndexOrDefault(firstData.values, index);
160
163
  if (isInvalidValue(value) || value < 0) {
161
164
  return;
@@ -174,8 +177,8 @@ export var transformPlotlyJsonToDonutProps = function (input, colorMap, colorway
174
177
  mapLegendToDataPoint[legend].data += value;
175
178
  }
176
179
  });
177
- var width = (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.width) !== null && _g !== void 0 ? _g : 440;
178
- var height = (_j = (_h = input.layout) === null || _h === void 0 ? void 0 : _h.height) !== null && _j !== void 0 ? _j : 220;
180
+ var width = (_l = (_k = input.layout) === null || _k === void 0 ? void 0 : _k.width) !== null && _l !== void 0 ? _l : 440;
181
+ var height = (_o = (_m = input.layout) === null || _m === void 0 ? void 0 : _m.height) !== null && _o !== void 0 ? _o : 220;
179
182
  var hideLabels = firstData.textinfo
180
183
  ? !['value', 'percent', 'label+percent'].includes(firstData.textinfo)
181
184
  : false;
@@ -190,8 +193,8 @@ export var transformPlotlyJsonToDonutProps = function (input, colorMap, colorway
190
193
  chartTitle: chartTitle,
191
194
  chartData: Object.values(mapLegendToDataPoint),
192
195
  },
193
- hideLegend: ((_k = input.layout) === null || _k === void 0 ? void 0 : _k.showlegend) === false ? true : false,
194
- width: (_l = input.layout) === null || _l === void 0 ? void 0 : _l.width,
196
+ hideLegend: ((_p = input.layout) === null || _p === void 0 ? void 0 : _p.showlegend) === false ? true : false,
197
+ width: (_q = input.layout) === null || _q === void 0 ? void 0 : _q.width,
195
198
  height: height,
196
199
  innerRadius: innerRadius,
197
200
  hideLabels: hideLabels,
@@ -263,17 +266,40 @@ export var transformPlotlyJsonToVSBCProps = function (input, colorMap, colorwayT
263
266
  var _e = getTitles(input.layout), chartTitle = _e.chartTitle, xAxisTitle = _e.xAxisTitle, yAxisTitle = _e.yAxisTitle;
264
267
  return __assign(__assign({ data: Object.values(mapXToDataPoints), 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, chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2 });
265
268
  };
269
+ var createColorScale = function (colorscale, domain) {
270
+ var dMin = domain[0], dMax = domain[1];
271
+ // Normalize colorscale domain to actual data domain
272
+ var scaleDomain = colorscale.map(function (_a) {
273
+ var pos = _a[0];
274
+ return dMin + pos * (dMax - dMin);
275
+ });
276
+ var scaleColors = colorscale.map(function (item) { return item[1]; });
277
+ return d3ScaleLinear().domain(scaleDomain).range(scaleColors);
278
+ };
266
279
  export var transformPlotlyJsonToGVBCProps = function (input, colorMap, colorwayType, isDarkTheme) {
267
280
  var _a, _b, _c;
268
281
  var mapXToDataPoints = {};
269
282
  var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
270
283
  var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
284
+ var colorScale = undefined;
271
285
  input.data.forEach(function (series, index1) {
272
- var _a, _b, _c, _d, _e;
286
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
287
+ if (((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.coloraxis) === null || _b === void 0 ? void 0 : _b.colorscale) === null || _c === void 0 ? void 0 : _c.length) &&
288
+ isArrayOrTypedArray((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color) &&
289
+ ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length > 0 &&
290
+ typeof ((_g = (_f = series.marker) === null || _f === void 0 ? void 0 : _f.color) === null || _g === void 0 ? void 0 : _g[0]) === 'number') {
291
+ var scale = input.layout.coloraxis.colorscale;
292
+ var colorValues = (_h = series.marker) === null || _h === void 0 ? void 0 : _h.color;
293
+ var _t = [
294
+ (_k = (_j = input.layout.coloraxis) === null || _j === void 0 ? void 0 : _j.cmin) !== null && _k !== void 0 ? _k : Math.min.apply(Math, colorValues),
295
+ (_m = (_l = input.layout.coloraxis) === null || _l === void 0 ? void 0 : _l.cmax) !== null && _m !== void 0 ? _m : Math.max.apply(Math, colorValues),
296
+ ], dMin = _t[0], dMax = _t[1];
297
+ colorScale = createColorScale(scale, [dMin, dMax]);
298
+ }
273
299
  // extract colors for each series only once
274
- var extractedColors = extractColor((_c = (_b = (_a = input.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);
275
- (_e = series.x) === null || _e === void 0 ? void 0 : _e.forEach(function (x, xIndex) {
276
- var _a;
300
+ var extractedColors = extractColor((_q = (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.template) === null || _p === void 0 ? void 0 : _p.layout) === null || _q === void 0 ? void 0 : _q.colorway, colorwayType, (_r = series.marker) === null || _r === void 0 ? void 0 : _r.color, colorMap, isDarkTheme);
301
+ (_s = series.x) === null || _s === void 0 ? void 0 : _s.forEach(function (x, xIndex) {
302
+ var _a, _b, _c, _d;
277
303
  if (isInvalidValue(x) || isInvalidValue((_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex])) {
278
304
  return;
279
305
  }
@@ -282,8 +308,10 @@ export var transformPlotlyJsonToGVBCProps = function (input, colorMap, colorwayT
282
308
  }
283
309
  if (series.type === 'bar') {
284
310
  var legend = legends[index1];
285
- // resolve color for each legend's bars from the extracted colors
286
- var color = resolveColor(extractedColors, index1, legend, colorMap, isDarkTheme);
311
+ // resolve color for each legend's bars from the colorscale or extracted colors
312
+ var color = colorScale
313
+ ? 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] : 0)
314
+ : resolveColor(extractedColors, index1, legend, colorMap, isDarkTheme);
287
315
  mapXToDataPoints[x].series.push({
288
316
  key: legend,
289
317
  data: series.y[xIndex],
@@ -739,37 +767,132 @@ var cleanText = function (text) {
739
767
  .replace(/\$[^$]*\$/g, '$')
740
768
  .trim();
741
769
  };
770
+ var formatValue = function (value, colIndex, cells) {
771
+ if (value === null || typeof value === 'boolean') {
772
+ return value;
773
+ }
774
+ var formatStr = Array.isArray(cells.format) ? cells.format[colIndex] : cells.format;
775
+ var prefix = Array.isArray(cells.prefix) ? cells.prefix[colIndex] : cells.prefix;
776
+ var suffix = Array.isArray(cells.suffix) ? cells.suffix[colIndex] : cells.suffix;
777
+ var formatted = value;
778
+ if (typeof value === 'number') {
779
+ if (typeof formatStr === 'string') {
780
+ try {
781
+ formatted = d3Format(formatStr)(value);
782
+ }
783
+ catch (_a) {
784
+ formatted = formatValueLimitWidth(value);
785
+ }
786
+ }
787
+ else {
788
+ formatted = formatValueLimitWidth(value);
789
+ }
790
+ }
791
+ return "".concat(prefix !== null && prefix !== void 0 ? prefix : '').concat(formatted).concat(suffix !== null && suffix !== void 0 ? suffix : '');
792
+ };
742
793
  export var transformPlotlyJsonToChartTableProps = function (input, colorMap, isDarkTheme) {
743
- var _a, _b, _c, _d, _e, _f, _g, _h;
794
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
744
795
  var tableData = input.data[0];
745
- var normalizeHeaders = function (values) {
746
- // Case: values is array of arrays
747
- if (Array.isArray(values[0])) {
748
- return values.map(function (row) {
796
+ var normalizeHeaders = function (values, header) {
797
+ var cleanedValues = Array.isArray(values[0])
798
+ ? values.map(function (row) {
749
799
  return row
750
800
  .map(function (cell) { return cleanText(cell); })
751
801
  .filter(Boolean)
752
802
  .join(' ');
753
- });
754
- }
755
- // Case: values is 1d array
756
- return values.map(function (cell) { return cleanText(cell); });
803
+ })
804
+ : values.map(function (cell) { return cleanText(cell); });
805
+ return cleanedValues.map(function (value, colIndex) {
806
+ var _a, _b, _c;
807
+ var fontColorRaw = (_a = header === null || header === void 0 ? void 0 : header.font) === null || _a === void 0 ? void 0 : _a.color;
808
+ var fontColor;
809
+ if (Array.isArray(fontColorRaw)) {
810
+ var colorEntry = fontColorRaw[colIndex];
811
+ if (Array.isArray(colorEntry)) {
812
+ fontColor = typeof colorEntry[0] === 'string' ? colorEntry[0] : undefined;
813
+ }
814
+ else if (typeof colorEntry === 'string') {
815
+ fontColor = colorEntry;
816
+ }
817
+ }
818
+ else if (typeof fontColorRaw === 'string') {
819
+ fontColor = fontColorRaw;
820
+ }
821
+ var fontSizeRaw = (_b = header === null || header === void 0 ? void 0 : header.font) === null || _b === void 0 ? void 0 : _b.size;
822
+ var fontSize;
823
+ if (Array.isArray(fontSizeRaw)) {
824
+ fontSize = Array.isArray(fontSizeRaw[0]) ? fontSizeRaw[0][colIndex] : fontSizeRaw[colIndex];
825
+ }
826
+ else if (typeof fontSizeRaw === 'number') {
827
+ fontSize = fontSizeRaw;
828
+ }
829
+ var updatedColIndex = colIndex >= 1 ? 1 : 0;
830
+ var fillColorRaw = (_c = header === null || header === void 0 ? void 0 : header.fill) === null || _c === void 0 ? void 0 : _c.color;
831
+ var backgroundColor = Array.isArray(fillColorRaw) ? fillColorRaw[updatedColIndex] : fillColorRaw;
832
+ var textAlignRaw = header === null || header === void 0 ? void 0 : header.align;
833
+ var textAlign = Array.isArray(textAlignRaw) ? textAlignRaw[colIndex] : textAlignRaw;
834
+ var style = __assign(__assign(__assign(__assign({}, (typeof fontColor === 'string' ? { color: fontColor } : {})), (typeof fontSize === 'number' ? { fontSize: fontSize } : {})), (typeof backgroundColor === 'string' ? { backgroundColor: backgroundColor } : {})), (textAlign ? { textAlign: textAlign } : {}));
835
+ return { value: value, style: style };
836
+ });
757
837
  };
758
838
  var columns = (_b = (_a = tableData.cells) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : [];
839
+ 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;
759
840
  var rows = columns[0].map(function (_, rowIndex) {
760
- return columns.map(function (col) {
761
- var cell = col[rowIndex];
762
- return typeof cell === 'string' ? cleanText(cell) : cell;
841
+ return columns.map(function (col, colIndex) {
842
+ var _a, _b, _c;
843
+ var cellValue = col[rowIndex];
844
+ var cleanValue = typeof cellValue === 'string' ? cleanText(cellValue) : cellValue;
845
+ var formattedValue = typeof cleanValue === 'string' || typeof cleanValue === 'number'
846
+ ? formatValue(cleanValue, colIndex, cells)
847
+ : cleanValue;
848
+ var rawFontColor = (_a = cells === null || cells === void 0 ? void 0 : cells.font) === null || _a === void 0 ? void 0 : _a.color;
849
+ var fontColor;
850
+ if (Array.isArray(rawFontColor)) {
851
+ var entry = rawFontColor[colIndex];
852
+ var colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
853
+ fontColor = typeof colorValue === 'string' ? colorValue : undefined;
854
+ }
855
+ else if (typeof rawFontColor === 'string') {
856
+ fontColor = rawFontColor;
857
+ }
858
+ var rawFontSize = (_b = cells === null || cells === void 0 ? void 0 : cells.font) === null || _b === void 0 ? void 0 : _b.size;
859
+ var fontSize;
860
+ if (Array.isArray(rawFontSize)) {
861
+ var entry = rawFontSize[colIndex];
862
+ var fontSizeValue = Array.isArray(entry) ? entry[rowIndex] : entry;
863
+ fontSize = typeof fontSizeValue === 'number' ? fontSizeValue : undefined;
864
+ }
865
+ else if (typeof rawFontSize === 'number') {
866
+ fontSize = rawFontSize;
867
+ }
868
+ var updatedColIndex = colIndex >= 1 ? 1 : 0;
869
+ var rawBackgroundColor = (_c = cells === null || cells === void 0 ? void 0 : cells.fill) === null || _c === void 0 ? void 0 : _c.color;
870
+ var backgroundColor;
871
+ if (Array.isArray(rawBackgroundColor)) {
872
+ var entry = rawBackgroundColor[updatedColIndex];
873
+ var colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
874
+ backgroundColor = typeof colorValue === 'string' ? colorValue : undefined;
875
+ }
876
+ else if (typeof rawBackgroundColor === 'string') {
877
+ backgroundColor = rawBackgroundColor;
878
+ }
879
+ 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;
880
+ var textAlign = rawTextAlign;
881
+ var style = __assign(__assign(__assign(__assign({}, (fontColor ? { color: fontColor } : {})), (typeof fontSize === 'number' ? { fontSize: fontSize } : {})), (backgroundColor ? { backgroundColor: backgroundColor } : {})), (textAlign ? { textAlign: textAlign } : {}));
882
+ return {
883
+ value: formattedValue,
884
+ style: style,
885
+ };
763
886
  });
764
887
  });
765
888
  var styles = {
766
- root: __assign({}, (((_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.font) === null || _d === void 0 ? void 0 : _d.size) ? { fontSize: input.layout.font.size } : {})),
889
+ 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 } : {})),
767
890
  };
768
891
  return {
769
- headers: normalizeHeaders((_f = (_e = tableData.header) === null || _e === void 0 ? void 0 : _e.values) !== null && _f !== void 0 ? _f : []),
892
+ 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),
770
893
  rows: rows,
771
- width: (_g = input.layout) === null || _g === void 0 ? void 0 : _g.width,
772
- height: (_h = input.layout) === null || _h === void 0 ? void 0 : _h.height,
894
+ width: (_p = input.layout) === null || _p === void 0 ? void 0 : _p.width,
895
+ height: (_q = input.layout) === null || _q === void 0 ? void 0 : _q.height,
773
896
  styles: styles,
774
897
  };
775
898
  };
@@ -985,10 +1108,6 @@ var getLegendProps = function (data, layout) {
985
1108
  hideLegend: (layout === null || layout === void 0 ? void 0 : layout.showlegend) === false || ((layout === null || layout === void 0 ? void 0 : layout.showlegend) !== true && legends.length < 2) ? true : hideLegends,
986
1109
  };
987
1110
  };
988
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
989
- export var isInvalidValue = function (value) {
990
- return typeof value === 'undefined' || value === null || (typeof value === 'number' && !isFinite(value));
991
- };
992
1111
  export var getNumberAtIndexOrDefault = function (data, index) {
993
1112
  if (isArrayOrTypedArray(data)) {
994
1113
  if (typeof data[index] !== 'number' || !isFinite(data[index])) {