npm - @fluentui/react-charts - Versions diffs - 0.0.0-nightly-20250908-0407.1 → 0.0.0-nightly-20250909-0406.1 - Mend

@fluentui/react-charts 0.0.0-nightly-20250908-0407.1 → 0.0.0-nightly-20250909-0406.1

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

package/lib-commonjs/components/CommonComponents/ChartPopover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CommonComponents/ChartPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport { mergeClasses } from '@griffel/react';\nimport type { PositioningVirtualElement } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { useId } from '@fluentui/react-utilities';\nimport { getAccessibleDataObject, Points, pointTypes } from '../../utilities/index';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { Shape } from '../Legends/shape';\nimport { usePopoverStyles_unstable } from './useChartPopoverStyles.styles';\nimport { YValueHover } from './CartesianChart.types';\nimport { LegendShape } from '../Legends/Legends.types';\nimport { ChartPopoverProps } from './ChartPopover.types';\n\n/* This component is a wrapper over Popover component which implements the logic for rendering popovers for any chart\ncombining the logic for Callout and ChartHoverCard in v8 charts. /\nexport const ChartPopover: React.FunctionComponent<ChartPopoverProps> = React.forwardRef<\n HTMLDivElement,\n ChartPopoverProps\n>((props, forwardedRef) => {\n const virtualElement: PositioningVirtualElement = {\n getBoundingClientRect: () => ({\n top: props.clickPosition!.y,\n left: props.clickPosition!.x,\n right: props.clickPosition!.x,\n bottom: props.clickPosition!.y,\n x: props.clickPosition!.x,\n y: props.clickPosition!.y,\n width: 0,\n height: 0,\n }),\n };\n props = { ...props, ...props.customCallout?.customCalloutProps };\n const classes = usePopoverStyles_unstable(props);\n const legend = props.xCalloutValue ? props.xCalloutValue : props.legend;\n const YValue = props.yCalloutValue ? props.yCalloutValue : props.YValue;\n return (\n <div id={useId('callout')} ref={forwardedRef} className={classes.calloutContainer}>\n <Popover\n positioning={{ target: virtualElement, autoSize: 'always', offset: 20, coverTarget: false }}\n open={props.isPopoverOpen}\n inline\n >\n <PopoverSurface>\n {/* Given custom callout, then it will render /}\n {props.customCallout && props.customCallout.customizedCallout && props.customCallout.customizedCallout}\n {/* single x point its corresponding y points of all the bars/lines in chart will render in callout /}\n {(!props.customCallout \|\| !props.customCallout.customizedCallout) &&\n props.isCalloutForStack &&\n _multiValueCallout()}\n {/* single x point its corresponding y point of single line/bar in the chart will render in callout /}\n {(!props.customCallout \|\| !props.customCallout.customizedCallout) && !props.isCalloutForStack && (\n <div className={classes.calloutContentRoot}>\n <div className={classes.calloutDateTimeContainer}>\n <div className={classes.calloutContentX}>{props.XValue} </div>\n {/TO DO if we add time for callout then will use this /}\n {/ <div className={classNames.calloutContentX}>07:00am</div> */}\n </div>\n <div\n className={classes.calloutInfoContainer}\n style={{\n ...(props.ratio && {\n display: 'flex',\n alignItems: 'flex-end',\n }),\n borderInlineStart: `4px solid ${props.color}`,\n marginTop: '11px',\n }}\n >\n <div className={classes.calloutBlockContainer}>\n <div className={classes.calloutlegendText}>\n {formatToLocaleString(legend, props.culture) as React.ReactNode}\n </div>\n <div\n className={classes.calloutContentY}\n style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}\n >\n {formatToLocaleString(YValue, props.culture) as React.ReactNode}\n </div>\n </div>\n {!!props.ratio && (\n <div className={classes.ratio}>\n <>\n <span className={classes.numerator}>\n {formatToLocaleString(props.ratio[0], props.culture) as React.ReactNode}\n </span>\n /\n <span className={classes.denominator}>\n {formatToLocaleString(props.ratio[1], props.culture) as React.ReactNode}\n </span>\n </>\n </div>\n )}\n </div>\n {!!props.descriptionMessage && (\n <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>\n )}\n </div>\n )}\n </PopoverSurface>\n </Popover>\n </div>\n );\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n function _multiValueCallout() {\n const yValueHoverSubCountsExists: boolean = _yValueHoverSubCountsExists(props.YValueHover) ?? false;\n return (\n <div className={classes.calloutContentRoot}>\n <div\n className={classes.calloutDateTimeContainer}\n style={yValueHoverSubCountsExists ? { marginBottom: '11px' } : {}}\n >\n <div\n className={classes.calloutContentX}\n {...getAccessibleDataObject(props!.xAxisCalloutAccessibilityData, 'text', false)}\n >\n {formatToLocaleString(props!.hoverXValue, props.culture) as React.ReactNode}\n </div>\n </div>\n <div style={yValueHoverSubCountsExists ? { display: 'flex' } : {}}>\n {props!.YValueHover &&\n props!.YValueHover.map((yValue: YValueHover, index: number, yValues: YValueHover[]) => {\n const isLast: boolean = index + 1 === yValues.length;\n const { shouldDrawBorderBottom = false } = yValue;\n return (\n <div\n {...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}\n key={`callout-content-${index}`}\n style={\n yValueHoverSubCountsExists\n ? {\n display: 'inline-block',\n ...(shouldDrawBorderBottom && {\n borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n paddingBottom: '10px',\n }),\n }\n : {\n ...(shouldDrawBorderBottom && {\n borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n paddingBottom: '10px',\n }),\n }\n }\n >\n {_getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}\n </div>\n );\n })}\n {!!props.descriptionMessage && <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>}\n </div>\n </div>\n );\n }\n\n function _yValueHoverSubCountsExists(yValueHover?: YValueHover[]): boolean \| undefined {\n return (\n yValueHover &&\n yValueHover.some(\n (yValue: {\n legend?: string;\n y?: number;\n color?: string;\n yAxisCalloutData?: string \| { [id: string]: number };\n }) => yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string',\n )\n );\n }\n\n function _getCalloutContent(\n xValue: YValueHover,\n index: number,\n yValueHoverSubCountsExists: boolean,\n isLast: boolean,\n ): React.ReactNode {\n const marginStyle: React.CSSProperties = isLast ? {} : { marginRight: '16px' };\n const toDrawShape = xValue.index !== undefined && xValue.index !== -1;\n const { culture } = props;\n const yValue = formatToLocaleString(xValue.y, culture) as React.ReactNode;\n if (!xValue.yAxisCalloutData \|\| typeof xValue.yAxisCalloutData === 'string') {\n return (\n <div style={yValueHoverSubCountsExists ? marginStyle : {}}>\n {yValueHoverSubCountsExists && (\n <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n {xValue.legend!} ({yValue})\n </div>\n )}\n <div\n id={`${index}_${xValue.y}`}\n className={classes.calloutBlockContainer}\n style={{\n marginTop: props.XValue ? '13px' : 'unset',\n ...(!toDrawShape\n ? {\n borderInlineStart: `4px solid ${xValue.color}`,\n }\n : {}),\n }}\n >\n {toDrawShape && (\n <Shape\n svgProps={{\n className: classes.shapeStyles,\n }}\n pathProps={{ fill: xValue.color }}\n shape={Points[xValue.index! % Object.keys(pointTypes).length] as LegendShape}\n />\n )}\n <div\n className={mergeClasses(\n classes.calloutBlockContainer,\n toDrawShape\n ? classes.calloutBlockContainertoDrawShapetrue\n : classes.calloutBlockContainertoDrawShapefalse,\n )}\n >\n <div className={classes.calloutlegendText}> {xValue.legend}</div>\n <div className={classes.calloutContentY}>\n {\n formatToLocaleString(\n xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y ?? xValue.data,\n culture,\n ) as React.ReactNode\n }\n </div>\n </div>\n </div>\n </div>\n );\n } else {\n const subcounts: { [id: string]: number } = xValue.yAxisCalloutData as { [id: string]: number };\n return (\n <div style={marginStyle}>\n <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n {xValue.legend!} ({yValue})\n </div>\n {Object.keys(subcounts).map((subcountName: string) => {\n return (\n <div key={subcountName} className={classes.calloutBlockContainer}>\n <div className={classes.calloutlegendText}>\n {' '}\n {formatToLocaleString(subcountName, culture) as React.ReactNode}\n </div>\n <div\n className={classes.calloutContentY}\n style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}\n >\n {formatToLocaleString(subcounts[subcountName], culture) as React.ReactNode}\n </div>\n </div>\n );\n })}\n </div>\n );\n }\n }\n});\nChartPopover.displayName = 'ChartPopover';\n"],"names":["React","Popover","PopoverSurface","mergeClasses","tokens","useId","getAccessibleDataObject","Points","pointTypes","formatToLocaleString","Shape","usePopoverStyles_unstable","ChartPopover","forwardRef","props","forwardedRef","virtualElement","getBoundingClientRect","top","clickPosition","y","left","x","right","bottom","width","height","customCallout","customCalloutProps","classes","legend","xCalloutValue","YValue","yCalloutValue","div","id","ref","className","calloutContainer","positioning","target","autoSize","offset","coverTarget","open","isPopoverOpen","inline","customizedCallout","isCalloutForStack","_multiValueCallout","calloutContentRoot","calloutDateTimeContainer","calloutContentX","XValue","calloutInfoContainer","style","ratio","display","alignItems","borderInlineStart","color","marginTop","calloutBlockContainer","calloutlegendText","culture","calloutContentY","colorNeutralForeground1","span","numerator","denominator","descriptionMessage","_yValueHoverSubCountsExists","yValueHoverSubCountsExists","YValueHover","marginBottom","xAxisCalloutAccessibilityData","hoverXValue","map","yValue","index","yValues","isLast","length","shouldDrawBorderBottom","callOutAccessibilityData","key","borderBottom","colorNeutralStroke2","paddingBottom","_getCalloutContent","yValueHover","some","yAxisCalloutData","xValue","marginStyle","marginRight","toDrawShape","undefined","fontSize","svgProps","shapeStyles","pathProps","fill","shape","Object","keys","calloutBlockContainertoDrawShapetrue","calloutBlockContainertoDrawShapefalse","data","subcounts","subcountName","displayName"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/CommonComponents/ChartPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport { mergeClasses } from '@griffel/react';\nimport type { PositioningVirtualElement } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { useId } from '@fluentui/react-utilities';\nimport { getAccessibleDataObject, Points, pointTypes } from '../../utilities/index';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { Shape } from '../Legends/shape';\nimport { usePopoverStyles_unstable } from './useChartPopoverStyles.styles';\nimport { YValueHover } from './CartesianChart.types';\nimport { LegendShape } from '../Legends/Legends.types';\nimport { ChartPopoverProps } from './ChartPopover.types';\n\n/* This component is a wrapper over Popover component which implements the logic for rendering popovers for any chart\ncombining the logic for Callout and ChartHoverCard in v8 charts. /\nexport const ChartPopover: React.FunctionComponent<ChartPopoverProps> = React.forwardRef<\n HTMLDivElement,\n ChartPopoverProps\n>((props, forwardedRef) => {\n const virtualElement: PositioningVirtualElement = {\n getBoundingClientRect: () => ({\n top: props.clickPosition!.y,\n left: props.clickPosition!.x,\n right: props.clickPosition!.x,\n bottom: props.clickPosition!.y,\n x: props.clickPosition!.x,\n y: props.clickPosition!.y,\n width: 0,\n height: 0,\n }),\n };\n props = { ...props, ...props.customCallout?.customCalloutProps };\n const classes = usePopoverStyles_unstable(props);\n const legend = props.xCalloutValue ? props.xCalloutValue : props.legend;\n const YValue = props.yCalloutValue ? props.yCalloutValue : props.YValue;\n return (\n <div id={useId('callout')} ref={forwardedRef} className={classes.calloutContainer}>\n <Popover\n positioning={{ target: virtualElement, autoSize: 'always', offset: 20, coverTarget: false }}\n open={props.isPopoverOpen}\n inline\n >\n <PopoverSurface>\n {/* Given custom callout, then it will render /}\n {props.customCallout && props.customCallout.customizedCallout && props.customCallout.customizedCallout}\n {/* single x point its corresponding y points of all the bars/lines in chart will render in callout /}\n {(!props.customCallout \|\| !props.customCallout.customizedCallout) &&\n props.isCalloutForStack &&\n _multiValueCallout()}\n {/* single x point its corresponding y point of single line/bar in the chart will render in callout /}\n {(!props.customCallout \|\| !props.customCallout.customizedCallout) && !props.isCalloutForStack && (\n <div className={classes.calloutContentRoot}>\n <div className={classes.calloutDateTimeContainer}>\n <div className={classes.calloutContentX}>{props.XValue} </div>\n {/TO DO if we add time for callout then will use this /}\n {/ <div className={classNames.calloutContentX}>07:00am</div> */}\n </div>\n <div\n className={classes.calloutInfoContainer}\n style={{\n ...(props.ratio && {\n display: 'flex',\n alignItems: 'flex-end',\n }),\n borderInlineStart: `4px solid ${props.color}`,\n marginTop: '11px',\n }}\n >\n <div className={classes.calloutBlockContainer}>\n <div className={classes.calloutlegendText}>\n {formatToLocaleString(legend, props.culture) as React.ReactNode}\n </div>\n <div\n className={classes.calloutContentY}\n style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}\n >\n {formatToLocaleString(YValue, props.culture) as React.ReactNode}\n </div>\n </div>\n {!!props.ratio && (\n <div className={classes.ratio}>\n <>\n <span className={classes.numerator}>\n {formatToLocaleString(props.ratio[0], props.culture) as React.ReactNode}\n </span>\n /\n <span className={classes.denominator}>\n {formatToLocaleString(props.ratio[1], props.culture) as React.ReactNode}\n </span>\n </>\n </div>\n )}\n </div>\n {!!props.descriptionMessage && (\n <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>\n )}\n </div>\n )}\n </PopoverSurface>\n </Popover>\n </div>\n );\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n function _multiValueCallout() {\n const yValueHoverSubCountsExists: boolean = _yValueHoverSubCountsExists(props.YValueHover) ?? false;\n return (\n <div className={classes.calloutContentRoot}>\n <div\n className={classes.calloutDateTimeContainer}\n style={yValueHoverSubCountsExists ? { marginBottom: '11px' } : {}}\n >\n <div\n className={classes.calloutContentX}\n {...getAccessibleDataObject(props!.xAxisCalloutAccessibilityData, 'text', false)}\n >\n {formatToLocaleString(props!.hoverXValue, props.culture) as React.ReactNode}\n </div>\n </div>\n <div style={yValueHoverSubCountsExists ? { display: 'flex' } : {}}>\n {props!.YValueHover &&\n props!.YValueHover.map((yValue: YValueHover, index: number, yValues: YValueHover[]) => {\n const isLast: boolean = index + 1 === yValues.length;\n const { shouldDrawBorderBottom = false } = yValue;\n return (\n <div\n {...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}\n key={`callout-content-${index}`}\n style={\n yValueHoverSubCountsExists\n ? {\n display: 'inline-block',\n ...(shouldDrawBorderBottom && {\n borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n paddingBottom: '10px',\n }),\n }\n : {\n ...(shouldDrawBorderBottom && {\n borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n paddingBottom: '10px',\n }),\n }\n }\n >\n {_getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}\n </div>\n );\n })}\n {!!props.descriptionMessage && <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>}\n </div>\n </div>\n );\n }\n\n function _yValueHoverSubCountsExists(yValueHover?: YValueHover[]): boolean \| undefined {\n return (\n yValueHover &&\n yValueHover.some(\n (yValue: {\n legend?: string;\n y?: number;\n color?: string;\n yAxisCalloutData?: string \| { [id: string]: number };\n }) => yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string',\n )\n );\n }\n\n function _getCalloutContent(\n xValue: YValueHover,\n index: number,\n yValueHoverSubCountsExists: boolean,\n isLast: boolean,\n ): React.ReactNode {\n const marginStyle: React.CSSProperties = isLast ? {} : { marginRight: '16px' };\n const toDrawShape = xValue.index !== undefined && xValue.index !== -1;\n const { culture } = props;\n const yValue = formatToLocaleString(xValue.y, culture) as React.ReactNode;\n if (!xValue.yAxisCalloutData \|\| typeof xValue.yAxisCalloutData === 'string') {\n return (\n <div style={yValueHoverSubCountsExists ? marginStyle : {}}>\n {yValueHoverSubCountsExists && (\n <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n {xValue.legend!} ({yValue})\n </div>\n )}\n <div\n id={`${index}_${xValue.y}`}\n className={classes.calloutBlockContainer}\n style={{\n marginTop: props.XValue ? '13px' : 'unset',\n ...(!toDrawShape\n ? {\n borderInlineStart: `4px solid ${xValue.color}`,\n }\n : {}),\n }}\n >\n {toDrawShape && (\n <Shape\n svgProps={{\n className: classes.shapeStyles,\n }}\n pathProps={{ fill: xValue.color }}\n shape={Points[xValue.index! % Object.keys(pointTypes).length] as LegendShape}\n />\n )}\n <div\n className={mergeClasses(\n classes.calloutBlockContainer,\n toDrawShape\n ? classes.calloutBlockContainertoDrawShapetrue\n : classes.calloutBlockContainertoDrawShapefalse,\n )}\n >\n <div className={classes.calloutlegendText}> {xValue.legend}</div>\n <div className={classes.calloutContentY} style={{ direction: 'ltr', unicodeBidi: 'isolate' }}>\n {\n formatToLocaleString(\n xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y ?? xValue.data,\n culture,\n ) as React.ReactNode\n }\n </div>\n </div>\n </div>\n </div>\n );\n } else {\n const subcounts: { [id: string]: number } = xValue.yAxisCalloutData as { [id: string]: number };\n return (\n <div style={marginStyle}>\n <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n {xValue.legend!} ({yValue})\n </div>\n {Object.keys(subcounts).map((subcountName: string) => {\n return (\n <div key={subcountName} className={classes.calloutBlockContainer}>\n <div className={classes.calloutlegendText}>\n {' '}\n {formatToLocaleString(subcountName, culture) as React.ReactNode}\n </div>\n <div\n className={classes.calloutContentY}\n style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}\n >\n {formatToLocaleString(subcounts[subcountName], culture) as React.ReactNode}\n </div>\n </div>\n );\n })}\n </div>\n );\n }\n }\n});\nChartPopover.displayName = 'ChartPopover';\n"],"names":["React","Popover","PopoverSurface","mergeClasses","tokens","useId","getAccessibleDataObject","Points","pointTypes","formatToLocaleString","Shape","usePopoverStyles_unstable","ChartPopover","forwardRef","props","forwardedRef","virtualElement","getBoundingClientRect","top","clickPosition","y","left","x","right","bottom","width","height","customCallout","customCalloutProps","classes","legend","xCalloutValue","YValue","yCalloutValue","div","id","ref","className","calloutContainer","positioning","target","autoSize","offset","coverTarget","open","isPopoverOpen","inline","customizedCallout","isCalloutForStack","_multiValueCallout","calloutContentRoot","calloutDateTimeContainer","calloutContentX","XValue","calloutInfoContainer","style","ratio","display","alignItems","borderInlineStart","color","marginTop","calloutBlockContainer","calloutlegendText","culture","calloutContentY","colorNeutralForeground1","span","numerator","denominator","descriptionMessage","_yValueHoverSubCountsExists","yValueHoverSubCountsExists","YValueHover","marginBottom","xAxisCalloutAccessibilityData","hoverXValue","map","yValue","index","yValues","isLast","length","shouldDrawBorderBottom","callOutAccessibilityData","key","borderBottom","colorNeutralStroke2","paddingBottom","_getCalloutContent","yValueHover","some","yAxisCalloutData","xValue","marginStyle","marginRight","toDrawShape","undefined","fontSize","svgProps","shapeStyles","pathProps","fill","shape","Object","keys","calloutBlockContainertoDrawShapetrue","calloutBlockContainertoDrawShapefalse","direction","unicodeBidi","data","subcounts","subcountName","displayName"],"mappings":"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"}

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

@@ -1300,6 +1300,18 @@ const formatValue = (value, colIndex, cells)=>{
     }
     return `${prefix !== null && prefix !== void 0 ? prefix : ''}${formatted}${suffix !== null && suffix !== void 0 ? suffix : ''}`;
 };
+function resolveCellStyle(raw, rowIndex, colIndex) {
+    if (Array.isArray(raw)) {
+        var _raw_colIndex;
+        const rowEntry = (_raw_colIndex = raw[colIndex]) !== null && _raw_colIndex !== void 0 ? _raw_colIndex : raw[0];
+        if (Array.isArray(rowEntry)) {
+            var _rowEntry_rowIndex;
+            return (_rowEntry_rowIndex = rowEntry[rowIndex]) !== null && _rowEntry_rowIndex !== void 0 ? _rowEntry_rowIndex : rowEntry[0];
+        }
+        return rowEntry;
+    }
+    return raw;
+}
 const transformPlotlyJsonToChartTableProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
     var _tableData_cells, _input_layout_template_data_table_, _input_layout_template_data_table, _input_layout_template_data, _input_layout_template, _input_layout, _input_layout_font, _input_layout1, _tableData_header, _input_layout_template_data1, _input_layout_template1, _input_layout2, _input_layout3, _input_layout4;
     const tableData = input.data[0];
@@ -1307,36 +1319,12 @@ const transformPlotlyJsonToChartTableProps = (input, isMultiPlot, colorMap, colo
         const cleanedValues = Array.isArray(values[0]) ? values.map((row)=>row.map((cell)=>cleanText(cell)).filter(Boolean).join(' ')) : values.map((cell)=>cleanText(cell));
         return cleanedValues.map((value, colIndex)=>{
             var _header_font, _header_font1, _header_fill;
-            const fontColorRaw = header === null || header === void 0 ? void 0 : (_header_font = header.font) === null || _header_font === void 0 ? void 0 : _header_font.color;
-            let fontColor;
-            if (Array.isArray(fontColorRaw)) {
-                var _fontColorRaw_colIndex;
-                const colorEntry = (_fontColorRaw_colIndex = fontColorRaw[colIndex]) !== null && _fontColorRaw_colIndex !== void 0 ? _fontColorRaw_colIndex : fontColorRaw[0];
-                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;
-            }
-            const fontSizeRaw = header === null || header === void 0 ? void 0 : (_header_font1 = header.font) === null || _header_font1 === void 0 ? void 0 : _header_font1.size;
-            let fontSize;
-            if (Array.isArray(fontSizeRaw)) {
-                var _fontSizeRaw_colIndex;
-                const fontSizeEntry = (_fontSizeRaw_colIndex = fontSizeRaw[colIndex]) !== null && _fontSizeRaw_colIndex !== void 0 ? _fontSizeRaw_colIndex : fontSizeRaw[0];
-                var _fontSizeRaw__colIndex;
-                fontSize = Array.isArray(fontSizeRaw[0]) ? (_fontSizeRaw__colIndex = fontSizeRaw[0][colIndex]) !== null && _fontSizeRaw__colIndex !== void 0 ? _fontSizeRaw__colIndex : fontSizeRaw[0][0] : typeof fontSizeEntry === 'number' ? fontSizeEntry : undefined;
-            } else if (typeof fontSizeRaw === 'number') {
-                fontSize = fontSizeRaw;
-            }
-            const updatedColIndex = colIndex >= 1 ? 1 : 0;
-            const fillColorRaw = header === null || header === void 0 ? void 0 : (_header_fill = header.fill) === null || _header_fill === void 0 ? void 0 : _header_fill.color;
-            var _fillColorRaw_updatedColIndex;
-            const backgroundColor = Array.isArray(fillColorRaw) ? (_fillColorRaw_updatedColIndex = fillColorRaw[updatedColIndex]) !== null && _fillColorRaw_updatedColIndex !== void 0 ? _fillColorRaw_updatedColIndex : fillColorRaw[0] : fillColorRaw;
-            const textAlignRaw = header === null || header === void 0 ? void 0 : header.align;
-            var _textAlignRaw_colIndex;
-            const textAlign = Array.isArray(textAlignRaw) ? (_textAlignRaw_colIndex = textAlignRaw[colIndex]) !== null && _textAlignRaw_colIndex !== void 0 ? _textAlignRaw_colIndex : textAlignRaw[0] : textAlignRaw;
+            //headers are at first row only
+            const rowIndex = 0;
+            const fontColor = resolveCellStyle(header === null || header === void 0 ? void 0 : (_header_font = header.font) === null || _header_font === void 0 ? void 0 : _header_font.color, rowIndex, colIndex);
+            const fontSize = resolveCellStyle(header === null || header === void 0 ? void 0 : (_header_font1 = header.font) === null || _header_font1 === void 0 ? void 0 : _header_font1.size, rowIndex, colIndex);
+            const backgroundColor = resolveCellStyle(header === null || header === void 0 ? void 0 : (_header_fill = header.fill) === null || _header_fill === void 0 ? void 0 : _header_fill.color, rowIndex, colIndex);
+            const textAlign = resolveCellStyle(header === null || header === void 0 ? void 0 : header.align, rowIndex, colIndex);
             const style = {
                 ...typeof fontColor === 'string' ? {
                     color: fontColor
@@ -1365,40 +1353,10 @@ const transformPlotlyJsonToChartTableProps = (input, isMultiPlot, colorMap, colo
             const cellValue = col[rowIndex];
             const cleanValue = typeof cellValue === 'string' ? cleanText(cellValue) : cellValue;
             const formattedValue = typeof cleanValue === 'string' || typeof cleanValue === 'number' ? formatValue(cleanValue, colIndex, cells) : cleanValue;
-            const rawFontColor = cells === null || cells === void 0 ? void 0 : (_cells_font = cells.font) === null || _cells_font === void 0 ? void 0 : _cells_font.color;
-            let fontColor;
-            if (Array.isArray(rawFontColor)) {
-                var _rawFontColor_colIndex;
-                const entry = (_rawFontColor_colIndex = rawFontColor[colIndex]) !== null && _rawFontColor_colIndex !== void 0 ? _rawFontColor_colIndex : rawFontColor[0];
-                const colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
-                fontColor = typeof colorValue === 'string' ? colorValue : undefined;
-            } else if (typeof rawFontColor === 'string') {
-                fontColor = rawFontColor;
-            }
-            const rawFontSize = cells === null || cells === void 0 ? void 0 : (_cells_font1 = cells.font) === null || _cells_font1 === void 0 ? void 0 : _cells_font1.size;
-            let fontSize;
-            if (Array.isArray(rawFontSize)) {
-                var _rawFontSize_colIndex;
-                const entry = (_rawFontSize_colIndex = rawFontSize[colIndex]) !== null && _rawFontSize_colIndex !== void 0 ? _rawFontSize_colIndex : rawFontSize[0];
-                const fontSizeValue = Array.isArray(entry) ? entry[rowIndex] : entry;
-                fontSize = typeof fontSizeValue === 'number' ? fontSizeValue : undefined;
-            } else if (typeof rawFontSize === 'number') {
-                fontSize = rawFontSize;
-            }
-            const updatedColIndex = colIndex >= 1 ? 1 : 0;
-            const rawBackgroundColor = cells === null || cells === void 0 ? void 0 : (_cells_fill = cells.fill) === null || _cells_fill === void 0 ? void 0 : _cells_fill.color;
-            let backgroundColor;
-            if (Array.isArray(rawBackgroundColor)) {
-                var _rawBackgroundColor_updatedColIndex;
-                const entry = (_rawBackgroundColor_updatedColIndex = rawBackgroundColor[updatedColIndex]) !== null && _rawBackgroundColor_updatedColIndex !== void 0 ? _rawBackgroundColor_updatedColIndex : rawBackgroundColor[0];
-                const colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
-                backgroundColor = typeof colorValue === 'string' ? colorValue : undefined;
-            } else if (typeof rawBackgroundColor === 'string') {
-                backgroundColor = rawBackgroundColor;
-            }
-            var _cells_align_colIndex;
-            const rawTextAlign = Array.isArray(cells === null || cells === void 0 ? void 0 : cells.align) ? (_cells_align_colIndex = cells.align[colIndex]) !== null && _cells_align_colIndex !== void 0 ? _cells_align_colIndex : cells.align[0] : cells === null || cells === void 0 ? void 0 : cells.align;
-            const textAlign = rawTextAlign;
+            const fontColor = resolveCellStyle(cells === null || cells === void 0 ? void 0 : (_cells_font = cells.font) === null || _cells_font === void 0 ? void 0 : _cells_font.color, rowIndex, colIndex);
+            const fontSize = resolveCellStyle(cells === null || cells === void 0 ? void 0 : (_cells_font1 = cells.font) === null || _cells_font1 === void 0 ? void 0 : _cells_font1.size, rowIndex, colIndex);
+            const backgroundColor = resolveCellStyle(cells === null || cells === void 0 ? void 0 : (_cells_fill = cells.fill) === null || _cells_fill === void 0 ? void 0 : _cells_fill.color, rowIndex, colIndex);
+            const textAlign = resolveCellStyle(cells === null || cells === void 0 ? void 0 : cells.align, rowIndex, colIndex);
             const style = {
                 ...fontColor ? {
                     color: fontColor