Skip to content

Commit 1806203

Browse files
HotellHotell
committed
fix(react-charts): remedy bundling all fluent tokens
1 parent e708e6f commit 1806203

File tree

17 files changed

+120
-81
lines changed

17 files changed

+120
-81
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useAreaChartStyles } from './useAreaChartStyles.styles';
55
import { max as d3Max, bisector } from 'd3-array';
66
import { pointer } from 'd3-selection';
77
import { select as d3Select } from 'd3-selection';
8-
import { tokens } from '@fluentui/react-theme';
8+
import * as chartTokens from '../../utilities/chartTokens';
99
import { area as d3Area, stack as d3Stack, curveMonotoneX as d3CurveBasis, line as d3Line } from 'd3-shape';
1010
import {
1111
AccessibilityProps,
@@ -666,7 +666,7 @@ export const AreaChart: React.FunctionComponent<AreaChartProps> = React.forwardR
666666
let fillColor = lineColor;
667667
if (nearestCircleToHighlight === xDataPoint || activePoint === circleId) {
668668
if (!isCircleClicked) {
669-
fillColor = tokens.colorNeutralBackground1;
669+
fillColor = chartTokens.colorNeutralBackground1;
670670
}
671671
}
672672

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,34 @@ import * as React from 'react';
44
import { ChartTableProps } from './ChartTable.types';
55
import { useChartTableStyles } from './useChartTableStyles.styles';
66
import { useRtl } from '../../utilities/utilities';
7+
import * as chartTokens from '../../utilities/chartTokens';
78
import { ImageExportOptions } from '../../types/index';
89
import { toImage } from '../../utilities/image-export-utils';
9-
import { tokens } from '@fluentui/react-theme';
10-
import * as d3 from 'd3-color';
10+
import { color as d3Color, rgb as d3Rgb } from 'd3-color';
1111
import { getColorContrast } from '../../utilities/colors';
1212
import { resolveCSSVariables } from '../../utilities/utilities';
1313

1414
function invertHexColor(hex: string): string {
15-
const color = d3.color(hex);
15+
const color = d3Color(hex);
1616
if (!color) {
17-
return tokens.colorNeutralForeground1!;
17+
return chartTokens.colorNeutralForeground1!;
1818
}
1919
const rgb = color.rgb();
20-
return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();
20+
return d3Rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();
2121
}
2222

2323
function getSafeBackgroundColor(chartContainer: HTMLElement, foreground?: string, background?: string): string {
24-
const fallbackFg = tokens.colorNeutralForeground1;
25-
const fallbackBg = tokens.colorNeutralBackground1;
24+
const fallbackFg = chartTokens.colorNeutralForeground1;
25+
const fallbackBg = chartTokens.colorNeutralBackground1;
2626
if (!chartContainer) {
2727
return fallbackBg;
2828
}
2929

3030
const resolvedFg = resolveCSSVariables(chartContainer, foreground || fallbackFg);
3131
const resolvedBg = resolveCSSVariables(chartContainer, background || fallbackBg);
3232

33-
const fg = d3.color(resolvedFg);
34-
const bg = d3.color(resolvedBg);
33+
const fg = d3Color(resolvedFg);
34+
const bg = d3Color(resolvedBg);
3535

3636
if (!fg || !bg) {
3737
return resolvedBg;
@@ -71,7 +71,7 @@ export const ChartTable: React.FunctionComponent<ChartTableProps> = React.forwar
7171
const bgColorSet = new Set<string>();
7272
headers.forEach(header => {
7373
const bg = header?.style?.backgroundColor;
74-
const normalized = d3.color(bg || '')?.formatHex();
74+
const normalized = d3Color(bg || '')?.formatHex();
7575
if (normalized) {
7676
bgColorSet.add(normalized);
7777
}

‎packages/charts/react-charts/library/src/components/CommonComponents/ChartPopover.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as React from 'react';
44
import { Popover, PopoverSurface } from '@fluentui/react-popover';
55
import { mergeClasses } from '@griffel/react';
66
import type { PositioningVirtualElement } from '@fluentui/react-positioning';
7-
import { tokens } from '@fluentui/react-theme';
7+
import * as chartTokens from '../../utilities/chartTokens';
88
import { useId } from '@fluentui/react-utilities';
99
import { getAccessibleDataObject, Points, pointTypes } from '../../utilities/index';
1010
import { formatToLocaleString } from '@fluentui/chart-utilities';
@@ -82,8 +82,8 @@ export const ChartPopover: React.FunctionComponent<ChartPopoverProps> = React.fo
8282
<div
8383
className={classes.calloutContentY}
8484
style={{
85-
color: props.color ? props.color : tokens.colorNeutralForeground1,
86-
fontSize: tokens.fontSizeHero700,
85+
color: props.color ? props.color : chartTokens.colorNeutralForeground1,
86+
fontSize: chartTokens.fontSizeHero700,
8787
}}
8888
>
8989
{formatToLocaleString(YValue, props.culture) as React.ReactNode}
@@ -143,13 +143,13 @@ export const ChartPopover: React.FunctionComponent<ChartPopoverProps> = React.fo
143143
? {
144144
display: 'inline-block',
145145
...(shouldDrawBorderBottom && {
146-
borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
146+
borderBottom: `1px solid ${chartTokens.colorNeutralStroke2}`,
147147
paddingBottom: '10px',
148148
}),
149149
}
150150
: {
151151
...(shouldDrawBorderBottom && {
152-
borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
152+
borderBottom: `1px solid ${chartTokens.colorNeutralStroke2}`,
153153
paddingBottom: '10px',
154154
}),
155155
}
@@ -255,7 +255,7 @@ export const ChartPopover: React.FunctionComponent<ChartPopoverProps> = React.fo
255255
</div>
256256
<div
257257
className={classes.calloutContentY}
258-
style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}
258+
style={{ color: props.color ? props.color : chartTokens.colorNeutralForeground1 }}
259259
>
260260
{formatToLocaleString(subcounts[subcountName], culture) as React.ReactNode}
261261
</div>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ import {
1111
sanitizeJson,
1212
} from '@fluentui/chart-utilities';
1313
import type { GridProperties } from './PlotlySchemaAdapter';
14-
import { tokens } from '@fluentui/react-theme';
14+
import * as chartTokens from '../../utilities/chartTokens';
1515
import { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts';
1616
import { Theme, webLightTheme } from '@fluentui/tokens';
17-
import * as d3Color from 'd3-color';
17+
import { hsl as d3Hsl } from 'd3-color';
1818

1919
import {
2020
correctYearMonth,
@@ -316,8 +316,8 @@ const useIsDarkTheme = (): boolean => {
316316
const v9Theme: Theme = parentV9Theme ? parentV9Theme : webLightTheme;
317317

318318
// Get background and foreground colors
319-
const backgroundColor = d3Color.hsl(v9Theme.colorNeutralBackground1);
320-
const foregroundColor = d3Color.hsl(v9Theme.colorNeutralForeground1);
319+
const backgroundColor = d3Hsl(v9Theme.colorNeutralBackground1);
320+
const foregroundColor = d3Hsl(v9Theme.colorNeutralForeground1);
321321

322322
const isDarkTheme = backgroundColor.l < foregroundColor.l;
323323

@@ -407,7 +407,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
407407

408408
chartRef.current
409409
.toImage({
410-
background: tokens.colorNeutralBackground1,
410+
background: chartTokens.colorNeutralBackground1,
411411
scale: 5,
412412
...opts,
413413
})

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ import {
5454
ChildProps,
5555
} from '../../index';
5656
import { toImage } from '../../utilities/image-export-utils';
57-
import { tokens } from '@fluentui/react-theme';
57+
import * as chartTokens from '../../utilities/chartTokens';
5858

5959
type NumericScale = ScaleLinear<number, number>;
6060
type StringScale = ScaleBand<string>;
@@ -843,7 +843,7 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
843843
x2={x2}
844844
y2={y2}
845845
fill="transparent"
846-
stroke={series.lineOptions?.lineBorderColor ?? tokens.colorNeutralBackground1}
846+
stroke={series.lineOptions?.lineBorderColor ?? chartTokens.colorNeutralBackground1}
847847
strokeWidth={3 + lineBorderWidth * 2}
848848
strokeLinecap="round"
849849
opacity={shouldHighlight ? 1 : 0.1}
@@ -879,7 +879,7 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
879879
cx={x2}
880880
cy={y2}
881881
r={shouldHighlight && isLinePointActive ? 8 : 0.3}
882-
fill={tokens.colorNeutralBackground1}
882+
fill={chartTokens.colorNeutralBackground1}
883883
stroke={series.color}
884884
strokeWidth={3}
885885
opacity={shouldHighlight ? 1 : 0.1}

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import { formatToLocaleString } from '@fluentui/chart-utilities';
3030
import { CartesianChart, ChartPopoverProps, ChildProps } from '../CommonComponents/index';
3131
import { useId } from '@fluentui/react-utilities';
3232
import type { JSXElement } from '@fluentui/react-utilities';
33-
import { tokens } from '@fluentui/react-theme';
33+
import * as chartTokens from '../../utilities/chartTokens';
3434
import { useHeatMapChartStyles } from './useHeatMapChartStyles.styles';
3535
import { Legend, Legends, LegendContainer } from '../Legends/index';
3636
import { scaleLinear as d3ScaleLinear } from 'd3-scale';
@@ -157,7 +157,9 @@ export const HeatMapChart: React.FunctionComponent<HeatMapChartProps> = React.fo
157157
/** Show the callout if highlighted rectangle is focused and Hide it if unhighlighted rectangle is focused */
158158
setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);
159159
setCalloutYValue(`${data.rectText}`);
160-
setCalloutTextColor(Number.isNaN(data.value) ? tokens.colorNeutralForeground1 : _colorScale.current(data.value));
160+
setCalloutTextColor(
161+
Number.isNaN(data.value) ? chartTokens.colorNeutralForeground1 : _colorScale.current(data.value),
162+
);
161163
setCalloutLegend(data.legend);
162164
setRatio(data.ratio);
163165
setDescriptionMessage(data.descriptionMessage || '');
@@ -173,7 +175,7 @@ export const HeatMapChart: React.FunctionComponent<HeatMapChartProps> = React.fo
173175
setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);
174176
setCalloutYValue(`${data.rectText}`);
175177
setCalloutTextColor(
176-
Number.isNaN(data.value) ? tokens.colorNeutralForeground1 : _colorScale.current(data.value),
178+
Number.isNaN(data.value) ? chartTokens.colorNeutralForeground1 : _colorScale.current(data.value),
177179
);
178180
setCalloutLegend(data.legend);
179181
setRatio(data.ratio);
@@ -192,7 +194,9 @@ export const HeatMapChart: React.FunctionComponent<HeatMapChartProps> = React.fo
192194
};
193195

194196
const _getInvertedTextColor = (color: string): string => {
195-
return color === tokens.colorNeutralForeground1 ? tokens.colorNeutralBackground1 : tokens.colorNeutralForeground1;
197+
return color === chartTokens.colorNeutralForeground1
198+
? chartTokens.colorNeutralBackground1
199+
: chartTokens.colorNeutralForeground1;
196200
};
197201

198202
/**
@@ -222,7 +226,7 @@ export const HeatMapChart: React.FunctionComponent<HeatMapChartProps> = React.fo
222226
*/
223227
const dataPointObject = _dataSet.current[yAxisDataPoint][index];
224228
let styleRules = '';
225-
let foregroundColor = tokens.colorNeutralForeground1;
229+
let foregroundColor = chartTokens.colorNeutralForeground1;
226230
if (cartesianChartRef.current?.chartContainer) {
227231
styleRules = resolveCSSVariables(cartesianChartRef.current.chartContainer, foregroundColor);
228232
}

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { formatToLocaleString } from '@fluentui/chart-utilities';
77
import { formatScientificLimitWidth, getAccessibleDataObject, useRtl } from '../../utilities/index';
88
import { useId } from '@fluentui/react-utilities';
99
import type { JSXElement } from '@fluentui/react-utilities';
10-
import { tokens } from '@fluentui/react-theme';
10+
import * as chartTokens from '../../utilities/chartTokens';
1111
import { useFocusableGroup } from '@fluentui/react-tabster';
1212
import { ChartPopover } from '../CommonComponents/ChartPopover';
1313
import { FocusableTooltipText } from '../../utilities/FocusableTooltipText';
@@ -219,11 +219,11 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
219219
1;
220220
const totalMarginPercent = barSpacingInPercent * (noOfBars - 1);
221221
const defaultColors: string[] = [
222-
tokens.colorPaletteBlueForeground2,
223-
tokens.colorPaletteCornflowerForeground2,
224-
tokens.colorPaletteDarkGreenForeground2,
225-
tokens.colorPaletteNavyForeground2,
226-
tokens.colorPaletteDarkOrangeForeground2,
222+
chartTokens.colorPaletteBlueForeground2,
223+
chartTokens.colorPaletteCornflowerForeground2,
224+
chartTokens.colorPaletteDarkGreenForeground2,
225+
chartTokens.colorPaletteNavyForeground2,
226+
chartTokens.colorPaletteDarkOrangeForeground2,
227227
];
228228
// calculating starting point of each bar and it's range
229229
const startingPoint: number[] = [];
@@ -406,7 +406,7 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
406406
x: points.chartData![0].horizontalBarChartdata!.total! - datapoint!,
407407
total: points.chartData![0].horizontalBarChartdata!.total!,
408408
},
409-
color: tokens.colorBackgroundOverlay,
409+
color: chartTokens.colorBackgroundOverlay,
410410
};
411411
}
412412

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { useLegendStyles } from './useLegendsStyles.styles';
1010
import { Overflow, OverflowItem } from '@fluentui/react-overflow';
1111
import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabster';
1212
import { OverflowMenu } from './OverflowMenu';
13-
import { tokens } from '@fluentui/react-theme';
13+
import * as chartTokens from '../../utilities/chartTokens';
1414
import { cloneLegendsToSVG } from '../../utilities/image-export-utils';
1515
import { mergeClasses } from '@griffel/react';
1616

@@ -307,15 +307,18 @@ export const Legends: React.FunctionComponent<LegendsProps> = React.forwardRef<H
307307
style={{
308308
'--rect-height': legend.isLineLegendInBarChart ? '4px' : '12px',
309309
'--rect-backgroundColor': legend.stripePattern ? '' : color,
310-
'--rect-borderColor': legend.color ? legend.color : tokens.colorNeutralStroke1,
310+
'--rect-borderColor': legend.color ? legend.color : chartTokens.colorNeutralStroke1,
311311
'--rect-content': legend.stripePattern
312312
? // eslint-disable-next-line @fluentui/max-len
313313
`repeating-linear-gradient(135deg, transparent, transparent 3px, ${color} 1px, ${color} 4px)`
314314
: '',
315315
}} /* eslint-enable react/jsx-no-bind */
316316
>
317317
{shape}
318-
<div className={classes.text} style={{ opacity: color === tokens.colorNeutralBackground1 ? '0.67' : '' }}>
318+
<div
319+
className={classes.text}
320+
style={{ opacity: color === chartTokens.colorNeutralBackground1 ? '0.67' : '' }}
321+
>
319322
{legend.title}
320323
</div>
321324
</Button>
@@ -341,13 +344,13 @@ export const Legends: React.FunctionComponent<LegendsProps> = React.forwardRef<H
341344
{
342345
height: legend.isLineLegendInBarChart ? '4px' : '12px',
343346
backgroundColor: legend.stripePattern ? '' : color,
344-
borderColor: legend.color ? legend.color : tokens.colorNeutralStroke1,
347+
borderColor: legend.color ? legend.color : chartTokens.colorNeutralStroke1,
345348
content: legend.stripePattern
346349
? // eslint-disable-next-line @fluentui/max-len
347350
`repeating-linear-gradient(135deg, transparent, transparent 3px, ${color} 1px, ${color} 4px)`
348351
: '',
349352
'--rect-content-high-contrast': `linear-gradient(to right, ${color}, ${color})`,
350-
'--rect-opacity-high-contrast': color === tokens.colorNeutralBackground1 ? '0.6' : '',
353+
'--rect-opacity-high-contrast': color === chartTokens.colorNeutralBackground1 ? '0.6' : '',
351354
} as React.CSSProperties
352355
}
353356
/>
@@ -364,7 +367,7 @@ export const Legends: React.FunctionComponent<LegendsProps> = React.forwardRef<H
364367
}
365368
// if the given legend is unselected
366369
else {
367-
legendColor = tokens.colorNeutralBackground1;
370+
legendColor = chartTokens.colorNeutralBackground1;
368371
}
369372
}
370373
// if no legend is selected
@@ -376,7 +379,7 @@ export const Legends: React.FunctionComponent<LegendsProps> = React.forwardRef<H
376379
}
377380
// if there is a hovered legend but the given legend is not the one
378381
else {
379-
legendColor = tokens.colorNeutralBackground1;
382+
legendColor = chartTokens.colorNeutralBackground1;
380383
}
381384
}
382385
return legendColor;

0 commit comments

Comments
 (0)