Skip to content

Commit 3db87e5

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

File tree

17 files changed

+116
-81
lines changed

17 files changed

+116
-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: 5 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,7 @@ 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(Number.isNaN(data.value) ? chartTokens.colorNeutralForeground1 : _colorScale.current(data.value));
161161
setCalloutLegend(data.legend);
162162
setRatio(data.ratio);
163163
setDescriptionMessage(data.descriptionMessage || '');
@@ -173,7 +173,7 @@ export const HeatMapChart: React.FunctionComponent<HeatMapChartProps> = React.fo
173173
setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);
174174
setCalloutYValue(`${data.rectText}`);
175175
setCalloutTextColor(
176-
Number.isNaN(data.value) ? tokens.colorNeutralForeground1 : _colorScale.current(data.value),
176+
Number.isNaN(data.value) ? chartTokens.colorNeutralForeground1 : _colorScale.current(data.value),
177177
);
178178
setCalloutLegend(data.legend);
179179
setRatio(data.ratio);
@@ -192,7 +192,7 @@ export const HeatMapChart: React.FunctionComponent<HeatMapChartProps> = React.fo
192192
};
193193

194194
const _getInvertedTextColor = (color: string): string => {
195-
return color === tokens.colorNeutralForeground1 ? tokens.colorNeutralBackground1 : tokens.colorNeutralForeground1;
195+
return color === chartTokens.colorNeutralForeground1 ? chartTokens.colorNeutralBackground1 : chartTokens.colorNeutralForeground1;
196196
};
197197

198198
/**
@@ -222,7 +222,7 @@ export const HeatMapChart: React.FunctionComponent<HeatMapChartProps> = React.fo
222222
*/
223223
const dataPointObject = _dataSet.current[yAxisDataPoint][index];
224224
let styleRules = '';
225-
let foregroundColor = tokens.colorNeutralForeground1;
225+
let foregroundColor = chartTokens.colorNeutralForeground1;
226226
if (cartesianChartRef.current?.chartContainer) {
227227
styleRules = resolveCSSVariables(cartesianChartRef.current.chartContainer, foregroundColor);
228228
}

‎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;

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import {
2929
YValueHover,
3030
} from '../../index';
3131
import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
32-
import { tokens } from '@fluentui/react-theme';
32+
import * as chartTokens from '../../utilities/chartTokens';
3333
import {
3434
calloutData,
3535
ChartTypes,
@@ -512,20 +512,20 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
512512
if (allowMultipleShapesForPoints) {
513513
if (pointIndex === 1 || isLastPoint) {
514514
if (activePoint === pointId) {
515-
return tokens.colorNeutralBackground1;
515+
return chartTokens.colorNeutralBackground1;
516516
} else {
517517
return lineColor;
518518
}
519519
} else {
520520
if (activePoint === pointId) {
521-
return tokens.colorNeutralBackground1;
521+
return chartTokens.colorNeutralBackground1;
522522
} else {
523523
return lineColor;
524524
}
525525
}
526526
} else {
527527
if (activePoint === pointId) {
528-
return tokens.colorNeutralBackground1;
528+
return chartTokens.colorNeutralBackground1;
529529
} else {
530530
return lineColor;
531531
}
@@ -599,7 +599,7 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
599599
}
600600
cx={xPoint}
601601
cy={yPoint}
602-
fill={activePoint === circleId ? tokens.colorNeutralBackground1 : lineColor}
602+
fill={activePoint === circleId ? chartTokens.colorNeutralBackground1 : lineColor}
603603
opacity={isLegendSelected ? 1 : 0.1}
604604
tabIndex={isLegendSelected ? 0 : undefined}
605605
onMouseOver={(event: React.MouseEvent<SVGElement>) =>
@@ -722,7 +722,7 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
722722
fill="transparent"
723723
strokeLinecap={_points[i].lineOptions?.strokeLinecap ?? 'round'}
724724
strokeWidth={Number.parseFloat(strokeWidth.toString()) + lineBorderWidth}
725-
stroke={_points[i].lineOptions?.lineBorderColor || tokens.colorNeutralBackground1}
725+
stroke={_points[i].lineOptions?.lineBorderColor || chartTokens.colorNeutralBackground1}
726726
opacity={1}
727727
/>,
728728
);
@@ -772,7 +772,7 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
772772
r={5.5}
773773
cx={0}
774774
cy={0}
775-
fill={tokens.colorNeutralBackground1}
775+
fill={chartTokens.colorNeutralBackground1}
776776
strokeWidth={DEFAULT_LINE_STROKE_SIZE}
777777
stroke={lineColor}
778778
visibility={'hidden'}
@@ -807,7 +807,7 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
807807
cy={yPoint}
808808
fill={
809809
activePoint === _circleId
810-
? tokens.colorNeutralBackground1
810+
? chartTokens.colorNeutralBackground1
811811
: perPointColor || _points[i]?.color || lineColor
812812
}
813813
stroke={perPointColor || lineColor}
@@ -1217,7 +1217,7 @@ export const LineChart: React.FunctionComponent<LineChartProps> = React.forwardR
12171217
y2={yPoint2}
12181218
strokeLinecap={_points[i].lineOptions?.strokeLinecap ?? 'round'}
12191219
strokeWidth={Number.parseFloat(strokeWidth.toString()) + lineBorderWidth}
1220-
stroke={_points[i].lineOptions?.lineBorderColor || tokens.colorNeutralBackground1}
1220+
stroke={_points[i].lineOptions?.lineBorderColor || chartTokens.colorNeutralBackground1}
12211221
opacity={1}
12221222
/>,
12231223
);

0 commit comments

Comments
 (0)