@fluentui/react-charting 5.23.96 → 5.23.97

package/etc/react-charting.api.md

@@ -439,9 +439,15 @@ export interface IChartProps {
 export interface IChartTableProps {
     className?: string;
     componentRef?: IRefObject<IChart>;
-    headers: (string | number | boolean | null)[] | (string | number | boolean | null)[][];
+    headers: {
+        value: string | number | boolean | null;
+        style?: React_2.CSSProperties;
+    }[];
     height?: string | number;
-    rows: (string | number | boolean | null)[][];
+    rows: {
+        value: string | number | boolean | null;
+        style?: React_2.CSSProperties;
+    }[][];
     styles?: IStyleFunctionOrObject<IChartTableStyleProps, IChartTableStyles>;
     theme?: ITheme;
     width?: string | number;

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

@@ -35,8 +35,8 @@ var ChartTableBase = /** @class */ (function (_super) {
                                 width: width ? "".concat(width, "px") : '100%',
                             } },
                             React.createElement("thead", null,
-                                React.createElement("tr", null, headers.map(function (header, idx) { return (React.createElement("th", { key: idx, className: classNames.headerCell }, header)); }))),
-                            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)); }))); })))))))));
+                                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)); }))),
+                            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)); }))); })))))))));
     };
     return ChartTableBase;
 }(React.Component));

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

@@ -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"]}
+{"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

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ITheme, IStyle } from '@fluentui/react/lib/Styling';
 import { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
 import { IChart } from '../../types/index';
@@ -13,11 +14,17 @@ export interface IChartTableProps {
     /**
      * 1d or 2d Array of header values.
      */
-    headers: (string | number | boolean | null)[] | (string | number | boolean | null)[][];
+    headers: {
+        value: string | number | boolean | null;
+        style?: React.CSSProperties;
+    }[];
     /**
      * Array of rows. Each row corresponds to one data entry under each column.
      */
-    rows: (string | number | boolean | null)[][];
+    rows: {
+        value: string | number | boolean | null;
+        style?: React.CSSProperties;
+    }[][];
     /**
      * Optional width for the table
      * @default '100%'

package/lib/components/ChartTable/ChartTable.types.js.map

@@ -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"]}
+{"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

@@ -32,6 +32,5 @@ export declare const projectPolarToCartesian: (input: PlotlySchema) => PlotlySch
  * @param trace
  */
 export declare function findArrayAttributes(trace: any): void;
-export declare const isInvalidValue: (value: any) => boolean;
 export declare const getNumberAtIndexOrDefault: (data: PlotData['z'] | undefined, index: number) => number | undefined;
 export declare const getValidXYRanges: (series: Partial<PlotData>) => [number, number][];

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -1,10 +1,11 @@
 import { __assign } from "tslib";
 import { bin as d3Bin, extent as d3Extent, sum as d3Sum, min as d3Min, max as d3Max, range as d3Range, } from 'd3-array';
 import { scaleLinear as d3ScaleLinear } from 'd3-scale';
+import { format as d3Format } from 'd3-format';
 import { DataVizPalette, getColorFromToken } from '../../utilities/colors';
 import { GaugeChartVariant } from '../GaugeChart/index';
-import { findNumericMinMaxOfY } from '../../utilities/utilities';
-import { isArrayOfType, isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isYearArray, } from '@fluentui/chart-utilities';
+import { findNumericMinMaxOfY, formatValueLimitWidth } from '../../utilities/utilities';
+import { isArrayOfType, isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isYearArray, isInvalidValue, } from '@fluentui/chart-utilities';
 import { timeParse } from 'd3-time-format';
 import { curveCardinal as d3CurveCardinal } from 'd3-shape';
 import { extractColor, resolveColor } from './PlotlyColorAdapter';
@@ -265,17 +266,40 @@ export var transformPlotlyJsonToVSBCProps = function (input, colorMap, colorwayT
     var _e = getTitles(input.layout), chartTitle = _e.chartTitle, xAxisTitle = _e.xAxisTitle, yAxisTitle = _e.yAxisTitle;
     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 });
 };
+var createColorScale = function (colorscale, domain) {
+    var dMin = domain[0], dMax = domain[1];
+    // Normalize colorscale domain to actual data domain
+    var scaleDomain = colorscale.map(function (_a) {
+        var pos = _a[0];
+        return dMin + pos * (dMax - dMin);
+    });
+    var scaleColors = colorscale.map(function (item) { return item[1]; });
+    return d3ScaleLinear().domain(scaleDomain).range(scaleColors);
+};
 export var transformPlotlyJsonToGVBCProps = function (input, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c;
     var mapXToDataPoints = {};
     var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
     var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
+    var colorScale = undefined;
     input.data.forEach(function (series, index1) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        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) &&
+            isArrayOrTypedArray((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color) &&
+            ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length > 0 &&
+            typeof ((_g = (_f = series.marker) === null || _f === void 0 ? void 0 : _f.color) === null || _g === void 0 ? void 0 : _g[0]) === 'number') {
+            var scale = input.layout.coloraxis.colorscale;
+            var colorValues = (_h = series.marker) === null || _h === void 0 ? void 0 : _h.color;
+            var _t = [
+                (_k = (_j = input.layout.coloraxis) === null || _j === void 0 ? void 0 : _j.cmin) !== null && _k !== void 0 ? _k : Math.min.apply(Math, colorValues),
+                (_m = (_l = input.layout.coloraxis) === null || _l === void 0 ? void 0 : _l.cmax) !== null && _m !== void 0 ? _m : Math.max.apply(Math, colorValues),
+            ], dMin = _t[0], dMax = _t[1];
+            colorScale = createColorScale(scale, [dMin, dMax]);
+        }
         // extract colors for each series only once
-        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);
-        (_e = series.x) === null || _e === void 0 ? void 0 : _e.forEach(function (x, xIndex) {
-            var _a;
+        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);
+        (_s = series.x) === null || _s === void 0 ? void 0 : _s.forEach(function (x, xIndex) {
+            var _a, _b, _c, _d;
             if (isInvalidValue(x) || isInvalidValue((_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex])) {
                 return;
             }
@@ -284,8 +308,10 @@ export var transformPlotlyJsonToGVBCProps = function (input, colorMap, colorwayT
             }
             if (series.type === 'bar') {
                 var legend = legends[index1];
-                // resolve color for each legend's bars from the extracted colors
-                var color = resolveColor(extractedColors, index1, legend, colorMap, isDarkTheme);
+                // resolve color for each legend's bars from the colorscale or extracted colors
+                var color = colorScale
+                    ? colorScale(isArrayOrTypedArray((_b = series.marker) === null || _b === void 0 ? void 0 : _b.color) ? (_d = (_c = series.marker) === null || _c === void 0 ? void 0 : _c.color) === null || _d === void 0 ? void 0 : _d[xIndex] : 0)
+                    : resolveColor(extractedColors, index1, legend, colorMap, isDarkTheme);
                 mapXToDataPoints[x].series.push({
                     key: legend,
                     data: series.y[xIndex],
@@ -741,37 +767,132 @@ var cleanText = function (text) {
         .replace(/\$[^$]*\$/g, '$')
         .trim();
 };
+var formatValue = function (value, colIndex, cells) {
+    if (value === null || typeof value === 'boolean') {
+        return value;
+    }
+    var formatStr = Array.isArray(cells.format) ? cells.format[colIndex] : cells.format;
+    var prefix = Array.isArray(cells.prefix) ? cells.prefix[colIndex] : cells.prefix;
+    var suffix = Array.isArray(cells.suffix) ? cells.suffix[colIndex] : cells.suffix;
+    var formatted = value;
+    if (typeof value === 'number') {
+        if (typeof formatStr === 'string') {
+            try {
+                formatted = d3Format(formatStr)(value);
+            }
+            catch (_a) {
+                formatted = formatValueLimitWidth(value);
+            }
+        }
+        else {
+            formatted = formatValueLimitWidth(value);
+        }
+    }
+    return "".concat(prefix !== null && prefix !== void 0 ? prefix : '').concat(formatted).concat(suffix !== null && suffix !== void 0 ? suffix : '');
+};
 export var transformPlotlyJsonToChartTableProps = function (input, colorMap, isDarkTheme) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     var tableData = input.data[0];
-    var normalizeHeaders = function (values) {
-        // Case: values is array of arrays
-        if (Array.isArray(values[0])) {
-            return values.map(function (row) {
+    var normalizeHeaders = function (values, header) {
+        var cleanedValues = Array.isArray(values[0])
+            ? values.map(function (row) {
                 return row
                     .map(function (cell) { return cleanText(cell); })
                     .filter(Boolean)
                     .join(' ');
-            });
-        }
-        // Case: values is 1d array
-        return values.map(function (cell) { return cleanText(cell); });
+            })
+            : values.map(function (cell) { return cleanText(cell); });
+        return cleanedValues.map(function (value, colIndex) {
+            var _a, _b, _c;
+            var fontColorRaw = (_a = header === null || header === void 0 ? void 0 : header.font) === null || _a === void 0 ? void 0 : _a.color;
+            var fontColor;
+            if (Array.isArray(fontColorRaw)) {
+                var colorEntry = fontColorRaw[colIndex];
+                if (Array.isArray(colorEntry)) {
+                    fontColor = typeof colorEntry[0] === 'string' ? colorEntry[0] : undefined;
+                }
+                else if (typeof colorEntry === 'string') {
+                    fontColor = colorEntry;
+                }
+            }
+            else if (typeof fontColorRaw === 'string') {
+                fontColor = fontColorRaw;
+            }
+            var fontSizeRaw = (_b = header === null || header === void 0 ? void 0 : header.font) === null || _b === void 0 ? void 0 : _b.size;
+            var fontSize;
+            if (Array.isArray(fontSizeRaw)) {
+                fontSize = Array.isArray(fontSizeRaw[0]) ? fontSizeRaw[0][colIndex] : fontSizeRaw[colIndex];
+            }
+            else if (typeof fontSizeRaw === 'number') {
+                fontSize = fontSizeRaw;
+            }
+            var updatedColIndex = colIndex >= 1 ? 1 : 0;
+            var fillColorRaw = (_c = header === null || header === void 0 ? void 0 : header.fill) === null || _c === void 0 ? void 0 : _c.color;
+            var backgroundColor = Array.isArray(fillColorRaw) ? fillColorRaw[updatedColIndex] : fillColorRaw;
+            var textAlignRaw = header === null || header === void 0 ? void 0 : header.align;
+            var textAlign = Array.isArray(textAlignRaw) ? textAlignRaw[colIndex] : textAlignRaw;
+            var style = __assign(__assign(__assign(__assign({}, (typeof fontColor === 'string' ? { color: fontColor } : {})), (typeof fontSize === 'number' ? { fontSize: fontSize } : {})), (typeof backgroundColor === 'string' ? { backgroundColor: backgroundColor } : {})), (textAlign ? { textAlign: textAlign } : {}));
+            return { value: value, style: style };
+        });
     };
     var columns = (_b = (_a = tableData.cells) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : [];
+    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;
     var rows = columns[0].map(function (_, rowIndex) {
-        return columns.map(function (col) {
-            var cell = col[rowIndex];
-            return typeof cell === 'string' ? cleanText(cell) : cell;
+        return columns.map(function (col, colIndex) {
+            var _a, _b, _c;
+            var cellValue = col[rowIndex];
+            var cleanValue = typeof cellValue === 'string' ? cleanText(cellValue) : cellValue;
+            var formattedValue = typeof cleanValue === 'string' || typeof cleanValue === 'number'
+                ? formatValue(cleanValue, colIndex, cells)
+                : cleanValue;
+            var rawFontColor = (_a = cells === null || cells === void 0 ? void 0 : cells.font) === null || _a === void 0 ? void 0 : _a.color;
+            var fontColor;
+            if (Array.isArray(rawFontColor)) {
+                var entry = rawFontColor[colIndex];
+                var colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
+                fontColor = typeof colorValue === 'string' ? colorValue : undefined;
+            }
+            else if (typeof rawFontColor === 'string') {
+                fontColor = rawFontColor;
+            }
+            var rawFontSize = (_b = cells === null || cells === void 0 ? void 0 : cells.font) === null || _b === void 0 ? void 0 : _b.size;
+            var fontSize;
+            if (Array.isArray(rawFontSize)) {
+                var entry = rawFontSize[colIndex];
+                var fontSizeValue = Array.isArray(entry) ? entry[rowIndex] : entry;
+                fontSize = typeof fontSizeValue === 'number' ? fontSizeValue : undefined;
+            }
+            else if (typeof rawFontSize === 'number') {
+                fontSize = rawFontSize;
+            }
+            var updatedColIndex = colIndex >= 1 ? 1 : 0;
+            var rawBackgroundColor = (_c = cells === null || cells === void 0 ? void 0 : cells.fill) === null || _c === void 0 ? void 0 : _c.color;
+            var backgroundColor;
+            if (Array.isArray(rawBackgroundColor)) {
+                var entry = rawBackgroundColor[updatedColIndex];
+                var colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
+                backgroundColor = typeof colorValue === 'string' ? colorValue : undefined;
+            }
+            else if (typeof rawBackgroundColor === 'string') {
+                backgroundColor = rawBackgroundColor;
+            }
+            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;
+            var textAlign = rawTextAlign;
+            var style = __assign(__assign(__assign(__assign({}, (fontColor ? { color: fontColor } : {})), (typeof fontSize === 'number' ? { fontSize: fontSize } : {})), (backgroundColor ? { backgroundColor: backgroundColor } : {})), (textAlign ? { textAlign: textAlign } : {}));
+            return {
+                value: formattedValue,
+                style: style,
+            };
         });
     });
     var styles = {
-        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 } : {})),
+        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 } : {})),
     };
     return {
-        headers: normalizeHeaders((_f = (_e = tableData.header) === null || _e === void 0 ? void 0 : _e.values) !== null && _f !== void 0 ? _f : []),
+        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),
         rows: rows,
-        width: (_g = input.layout) === null || _g === void 0 ? void 0 : _g.width,
-        height: (_h = input.layout) === null || _h === void 0 ? void 0 : _h.height,
+        width: (_p = input.layout) === null || _p === void 0 ? void 0 : _p.width,
+        height: (_q = input.layout) === null || _q === void 0 ? void 0 : _q.height,
         styles: styles,
     };
 };
@@ -987,10 +1108,6 @@ var getLegendProps = function (data, layout) {
         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,
     };
 };
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export var isInvalidValue = function (value) {
-    return typeof value === 'undefined' || value === null || (typeof value === 'number' && !isFinite(value));
-};
 export var getNumberAtIndexOrDefault = function (data, index) {
     if (isArrayOrTypedArray(data)) {
         if (typeof data[index] !== 'number' || !isFinite(data[index])) {