Skip to content

Commit cb0e73c

Browse files
Anush2303Anush
Anush2303
and
Anush
authored
fix(charts): fixed styling in chart table (microsoft#35156)
Co-authored-by: Anush <[email protected]>
1 parent c8b4bdd commit cb0e73c

File tree

5 files changed

+73
-143
lines changed

5 files changed

+73
-143
lines changed

‎change/@fluentui-react-charting-a0fa82be-a954-4f1c-815a-974b6ae85527.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "fix styling in chart table",
4+
"packageName": "@fluentui/react-charting",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎change/@fluentui-react-charts-8d6a48fa-5261-4411-83cf-5e588852d212.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "fix styling in chart table",
4+
"packageName": "@fluentui/react-charts",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts‎

Lines changed: 25 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1728,6 +1728,17 @@ const formatValue = (
17281728
return `${prefix ?? ''}${formatted}${suffix ?? ''}`;
17291729
};
17301730

1731+
function resolveCellStyle<T>(raw: T | T[] | T[][] | undefined, rowIndex: number, colIndex: number): T | undefined {
1732+
if (Array.isArray(raw)) {
1733+
const rowEntry = raw[colIndex] ?? raw[0];
1734+
if (Array.isArray(rowEntry)) {
1735+
return rowEntry[rowIndex] ?? rowEntry[0];
1736+
}
1737+
return rowEntry;
1738+
}
1739+
return raw;
1740+
}
1741+
17311742
export const transformPlotlyJsonToChartTableProps = (
17321743
input: PlotlySchema,
17331744
isMultiPlot: boolean,
@@ -1751,42 +1762,14 @@ export const transformPlotlyJsonToChartTableProps = (
17511762
: (values as string[]).map(cell => cleanText(cell));
17521763

17531764
return cleanedValues.map((value, colIndex) => {
1754-
const fontColorRaw = header?.font?.color;
1755-
let fontColor: React.CSSProperties['color'] | undefined;
1756-
1757-
if (Array.isArray(fontColorRaw)) {
1758-
const colorEntry = fontColorRaw[colIndex] ?? fontColorRaw[0];
1759-
if (Array.isArray(colorEntry)) {
1760-
fontColor = typeof colorEntry[0] === 'string' ? colorEntry[0] : undefined;
1761-
} else if (typeof colorEntry === 'string') {
1762-
fontColor = colorEntry;
1763-
}
1764-
} else if (typeof fontColorRaw === 'string') {
1765-
fontColor = fontColorRaw;
1766-
}
1767-
1768-
const fontSizeRaw = header?.font?.size;
1769-
let fontSize: React.CSSProperties['fontSize'] | undefined;
1770-
1771-
if (Array.isArray(fontSizeRaw)) {
1772-
const fontSizeEntry = fontSizeRaw[colIndex] ?? fontSizeRaw[0];
1773-
fontSize = Array.isArray(fontSizeRaw[0])
1774-
? fontSizeRaw[0][colIndex] ?? fontSizeRaw[0][0]
1775-
: typeof fontSizeEntry === 'number'
1776-
? fontSizeEntry
1777-
: undefined;
1778-
} else if (typeof fontSizeRaw === 'number') {
1779-
fontSize = fontSizeRaw;
1780-
}
1781-
1782-
const updatedColIndex = colIndex >= 1 ? 1 : 0;
1783-
const fillColorRaw = header?.fill?.color;
1784-
const backgroundColor = Array.isArray(fillColorRaw)
1785-
? fillColorRaw[updatedColIndex] ?? fillColorRaw[0]
1786-
: fillColorRaw;
1787-
1788-
const textAlignRaw = header?.align;
1789-
const textAlign = Array.isArray(textAlignRaw) ? textAlignRaw[colIndex] ?? textAlignRaw[0] : textAlignRaw;
1765+
//headers are at first row only
1766+
const rowIndex = 0;
1767+
const fontColor = resolveCellStyle(header?.font?.color, rowIndex, colIndex) as string | undefined;
1768+
const fontSize = resolveCellStyle(header?.font?.size, rowIndex, colIndex) as number | undefined;
1769+
const backgroundColor = resolveCellStyle(header?.fill?.color, rowIndex, colIndex) as string | undefined;
1770+
const textAlign = resolveCellStyle(header?.align, rowIndex, colIndex) as
1771+
| React.CSSProperties['textAlign']
1772+
| undefined;
17901773

17911774
const style: React.CSSProperties = {
17921775
...(typeof fontColor === 'string' ? { color: fontColor } : {}),
@@ -1813,39 +1796,12 @@ export const transformPlotlyJsonToChartTableProps = (
18131796
? formatValue(cleanValue, colIndex, cells)
18141797
: cleanValue;
18151798

1816-
const rawFontColor = cells?.font?.color;
1817-
let fontColor: React.CSSProperties['color'] | undefined;
1818-
if (Array.isArray(rawFontColor)) {
1819-
const entry = rawFontColor[colIndex] ?? rawFontColor[0];
1820-
const colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
1821-
fontColor = typeof colorValue === 'string' ? colorValue : undefined;
1822-
} else if (typeof rawFontColor === 'string') {
1823-
fontColor = rawFontColor;
1824-
}
1825-
1826-
const rawFontSize = cells?.font?.size;
1827-
let fontSize: React.CSSProperties['fontSize'] | undefined;
1828-
if (Array.isArray(rawFontSize)) {
1829-
const entry = rawFontSize[colIndex] ?? rawFontSize[0];
1830-
const fontSizeValue = Array.isArray(entry) ? entry[rowIndex] : entry;
1831-
fontSize = typeof fontSizeValue === 'number' ? fontSizeValue : undefined;
1832-
} else if (typeof rawFontSize === 'number') {
1833-
fontSize = rawFontSize;
1834-
}
1835-
1836-
const updatedColIndex = colIndex >= 1 ? 1 : 0;
1837-
const rawBackgroundColor = cells?.fill?.color;
1838-
let backgroundColor: React.CSSProperties['backgroundColor'] | undefined;
1839-
if (Array.isArray(rawBackgroundColor)) {
1840-
const entry = rawBackgroundColor[updatedColIndex] ?? rawBackgroundColor[0];
1841-
const colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
1842-
backgroundColor = typeof colorValue === 'string' ? colorValue : undefined;
1843-
} else if (typeof rawBackgroundColor === 'string') {
1844-
backgroundColor = rawBackgroundColor;
1845-
}
1846-
1847-
const rawTextAlign = Array.isArray(cells?.align) ? cells.align[colIndex] ?? cells.align[0] : cells?.align;
1848-
const textAlign = rawTextAlign as React.CSSProperties['textAlign'] | undefined;
1799+
const fontColor = resolveCellStyle(cells?.font?.color, rowIndex, colIndex) as string | undefined;
1800+
const fontSize = resolveCellStyle(cells?.font?.size, rowIndex, colIndex) as number | undefined;
1801+
const backgroundColor = resolveCellStyle(cells?.fill?.color, rowIndex, colIndex) as string | undefined;
1802+
const textAlign = resolveCellStyle(cells?.align, rowIndex, colIndex) as
1803+
| React.CSSProperties['textAlign']
1804+
| undefined;
18491805

18501806
const style: React.CSSProperties = {
18511807
...(fontColor ? { color: fontColor } : {}),

‎packages/charts/react-charts/library/src/components/ChartTable/ChartTable.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { toImage } from '../../utilities/image-export-utils';
77
import { tokens } from '@fluentui/react-theme';
88
import * as d3 from 'd3-color';
99
import { getColorContrast } from '../../utilities/colors';
10+
import { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts';
11+
import { Theme, webLightTheme } from '@fluentui/tokens';
1012

1113
function invertHexColor(hex: string): string {
1214
const color = d3.color(hex);
@@ -17,9 +19,9 @@ function invertHexColor(hex: string): string {
1719
return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();
1820
}
1921

20-
function getSafeBackgroundColor(foreground?: string, background?: string): string {
21-
const fallbackFg = tokens.colorNeutralForeground1;
22-
const fallbackBg = tokens.colorNeutralBackground1;
22+
function getSafeBackgroundColor(v9Theme: Theme, foreground?: string, background?: string): string {
23+
const fallbackFg = v9Theme.colorNeutralForeground1;
24+
const fallbackBg = v9Theme.colorNeutralBackground1;
2325

2426
const fg = d3.color(foreground || fallbackFg);
2527
const bg = d3.color(background || fallbackBg);
@@ -38,6 +40,8 @@ function getSafeBackgroundColor(foreground?: string, background?: string): strin
3840

3941
export const ChartTable: React.FunctionComponent<ChartTableProps> = React.forwardRef<HTMLDivElement, ChartTableProps>(
4042
(props, forwardedRef) => {
43+
const parentV9Theme = React.useContext(V9ThemeContext) as Theme;
44+
const v9Theme: Theme = parentV9Theme ? parentV9Theme : webLightTheme;
4145
const { headers, rows, width, height } = props;
4246
const _isRTL: boolean = useRtl();
4347
const _rootElem = React.useRef<HTMLDivElement | null>(null);
@@ -123,7 +127,7 @@ export const ChartTable: React.FunctionComponent<ChartTableProps> = React.forwar
123127
if (useSharedBackground) {
124128
style.backgroundColor = sharedBackgroundColor;
125129
} else if (fg || bg) {
126-
style.backgroundColor = getSafeBackgroundColor(fg, bg);
130+
style.backgroundColor = getSafeBackgroundColor(v9Theme, fg, bg);
127131
}
128132
return (
129133
<th key={idx} className={classes.headerCell} style={style} tabIndex={0}>
@@ -142,7 +146,7 @@ export const ChartTable: React.FunctionComponent<ChartTableProps> = React.forwar
142146
const fg = style.color;
143147
const bg = style.backgroundColor;
144148
if (fg || bg) {
145-
style.backgroundColor = getSafeBackgroundColor(fg, bg);
149+
style.backgroundColor = getSafeBackgroundColor(v9Theme, fg, bg);
146150
}
147151
return (
148152
<td key={colIdx} className={classes.bodyCell} style={style} tabIndex={0}>

‎packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts‎

Lines changed: 25 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1657,6 +1657,17 @@ const formatValue = (
16571657
return `${prefix ?? ''}${formatted}${suffix ?? ''}`;
16581658
};
16591659

1660+
function resolveCellStyle<T>(raw: T | T[] | T[][] | undefined, rowIndex: number, colIndex: number): T | undefined {
1661+
if (Array.isArray(raw)) {
1662+
const rowEntry = raw[colIndex] ?? raw[0];
1663+
if (Array.isArray(rowEntry)) {
1664+
return rowEntry[rowIndex] ?? rowEntry[0];
1665+
}
1666+
return rowEntry;
1667+
}
1668+
return raw;
1669+
}
1670+
16601671
export const transformPlotlyJsonToChartTableProps = (
16611672
input: PlotlySchema,
16621673
isMultiPlot: boolean,
@@ -1680,42 +1691,14 @@ export const transformPlotlyJsonToChartTableProps = (
16801691
: (values as string[]).map(cell => cleanText(cell));
16811692

16821693
return cleanedValues.map((value, colIndex) => {
1683-
const fontColorRaw = header?.font?.color;
1684-
let fontColor: React.CSSProperties['color'] | undefined;
1685-
1686-
if (Array.isArray(fontColorRaw)) {
1687-
const colorEntry = fontColorRaw[colIndex] ?? fontColorRaw[0];
1688-
if (Array.isArray(colorEntry)) {
1689-
fontColor = typeof colorEntry[0] === 'string' ? colorEntry[0] : undefined;
1690-
} else if (typeof colorEntry === 'string') {
1691-
fontColor = colorEntry;
1692-
}
1693-
} else if (typeof fontColorRaw === 'string') {
1694-
fontColor = fontColorRaw;
1695-
}
1696-
1697-
const fontSizeRaw = header?.font?.size;
1698-
let fontSize: React.CSSProperties['fontSize'] | undefined;
1699-
1700-
if (Array.isArray(fontSizeRaw)) {
1701-
const fontSizeEntry = fontSizeRaw[colIndex] ?? fontSizeRaw[0];
1702-
fontSize = Array.isArray(fontSizeRaw[0])
1703-
? fontSizeRaw[0][colIndex] ?? fontSizeRaw[0][0]
1704-
: typeof fontSizeEntry === 'number'
1705-
? fontSizeEntry
1706-
: undefined;
1707-
} else if (typeof fontSizeRaw === 'number') {
1708-
fontSize = fontSizeRaw;
1709-
}
1710-
1711-
const updatedColIndex = colIndex >= 1 ? 1 : 0;
1712-
const fillColorRaw = header?.fill?.color;
1713-
const backgroundColor = Array.isArray(fillColorRaw)
1714-
? fillColorRaw[updatedColIndex] ?? fillColorRaw[0]
1715-
: fillColorRaw;
1716-
1717-
const textAlignRaw = header?.align;
1718-
const textAlign = Array.isArray(textAlignRaw) ? textAlignRaw[colIndex] ?? textAlignRaw[0] : textAlignRaw;
1694+
//headers are at first row only
1695+
const rowIndex = 0;
1696+
const fontColor = resolveCellStyle(header?.font?.color, rowIndex, colIndex) as string | undefined;
1697+
const fontSize = resolveCellStyle(header?.font?.size, rowIndex, colIndex) as number | undefined;
1698+
const backgroundColor = resolveCellStyle(header?.fill?.color, rowIndex, colIndex) as string | undefined;
1699+
const textAlign = resolveCellStyle(header?.align, rowIndex, colIndex) as
1700+
| React.CSSProperties['textAlign']
1701+
| undefined;
17191702

17201703
const style: React.CSSProperties = {
17211704
...(typeof fontColor === 'string' ? { color: fontColor } : {}),
@@ -1742,39 +1725,12 @@ export const transformPlotlyJsonToChartTableProps = (
17421725
? formatValue(cleanValue, colIndex, cells)
17431726
: cleanValue;
17441727

1745-
const rawFontColor = cells?.font?.color;
1746-
let fontColor: React.CSSProperties['color'] | undefined;
1747-
if (Array.isArray(rawFontColor)) {
1748-
const entry = rawFontColor[colIndex] ?? rawFontColor[0];
1749-
const colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
1750-
fontColor = typeof colorValue === 'string' ? colorValue : undefined;
1751-
} else if (typeof rawFontColor === 'string') {
1752-
fontColor = rawFontColor;
1753-
}
1754-
1755-
const rawFontSize = cells?.font?.size;
1756-
let fontSize: React.CSSProperties['fontSize'] | undefined;
1757-
if (Array.isArray(rawFontSize)) {
1758-
const entry = rawFontSize[colIndex] ?? rawFontSize[0];
1759-
const fontSizeValue = Array.isArray(entry) ? entry[rowIndex] : entry;
1760-
fontSize = typeof fontSizeValue === 'number' ? fontSizeValue : undefined;
1761-
} else if (typeof rawFontSize === 'number') {
1762-
fontSize = rawFontSize;
1763-
}
1764-
1765-
const updatedColIndex = colIndex >= 1 ? 1 : 0;
1766-
const rawBackgroundColor = cells?.fill?.color;
1767-
let backgroundColor: React.CSSProperties['backgroundColor'] | undefined;
1768-
if (Array.isArray(rawBackgroundColor)) {
1769-
const entry = rawBackgroundColor[updatedColIndex] ?? rawBackgroundColor[0];
1770-
const colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
1771-
backgroundColor = typeof colorValue === 'string' ? colorValue : undefined;
1772-
} else if (typeof rawBackgroundColor === 'string') {
1773-
backgroundColor = rawBackgroundColor;
1774-
}
1775-
1776-
const rawTextAlign = Array.isArray(cells?.align) ? cells.align[colIndex] ?? cells.align[0] : cells?.align;
1777-
const textAlign = rawTextAlign as React.CSSProperties['textAlign'] | undefined;
1728+
const fontColor = resolveCellStyle(cells?.font?.color, rowIndex, colIndex) as string | undefined;
1729+
const fontSize = resolveCellStyle(cells?.font?.size, rowIndex, colIndex) as number | undefined;
1730+
const backgroundColor = resolveCellStyle(cells?.fill?.color, rowIndex, colIndex) as string | undefined;
1731+
const textAlign = resolveCellStyle(cells?.align, rowIndex, colIndex) as
1732+
| React.CSSProperties['textAlign']
1733+
| undefined;
17781734

17791735
const style: React.CSSProperties = {
17801736
...(fontColor ? { color: fontColor } : {}),

0 commit comments

Comments
 (0)