Skip to content

Commit c39e1d3

Browse files
srmukhersrmukher
authored
fix(react-charting): Add prop to remove default annotation styles (microsoft#35647)
1 parent b9b448d commit c39e1d3

File tree

6 files changed

+51
-32
lines changed

6 files changed

+51
-32
lines changed

‎change/@fluentui-react-charting-99df84c1-d269-31c1-4d11-33w9pp1ry3l.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": "feat(react-charting): Add prop to regulate removal of default annotation styling",
4+
"packageName": "@fluentui/react-charting",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎packages/charts/react-charting/src/components/AnnotationOnlyChart/AnnotationOnlyChart.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,12 @@ export const AnnotationOnlyChart: React.FC<IAnnotationOnlyChartProps> = props =>
217217
)}
218218
<div className={contentClassName} role="presentation">
219219
{hasAnnotations ? (
220-
<ChartAnnotationLayer annotations={resolvedAnnotations} context={context} theme={theme} />
220+
<ChartAnnotationLayer
221+
annotations={resolvedAnnotations}
222+
context={context}
223+
theme={theme}
224+
hideDefaultStyles={true}
225+
/>
221226
) : null}
222227
</div>
223228
</div>

‎packages/charts/react-charting/src/components/AnnotationOnlyChart/__snapshots__/AnnotationOnlyChart.test.tsx.snap‎

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -118,10 +118,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with all props 1`] = `
118118
-moz-osx-font-smoothing: grayscale;
119119
-webkit-font-smoothing: antialiased;
120120
align-items: center;
121-
background-color: rgba(255, 255, 255, 0.8);
122121
border-radius: 4px;
123-
border: 1px solid #edebe9;
124-
box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
125122
color: #323130;
126123
display: flex;
127124
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -178,10 +175,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with all props 1`] = `
178175
-moz-osx-font-smoothing: grayscale;
179176
-webkit-font-smoothing: antialiased;
180177
align-items: center;
181-
background-color: rgba(255, 255, 255, 0.8);
182178
border-radius: 4px;
183-
border: 1px solid #edebe9;
184-
box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
185179
color: #323130;
186180
display: flex;
187181
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -228,10 +222,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with all props 1`] = `
228222
-moz-osx-font-smoothing: grayscale;
229223
-webkit-font-smoothing: antialiased;
230224
align-items: center;
231-
background-color: rgba(255, 255, 255, 0.8);
232225
border-radius: 4px;
233-
border: 1px solid #edebe9;
234-
box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
235226
color: #323130;
236227
display: flex;
237228
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -278,10 +269,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with all props 1`] = `
278269
-moz-osx-font-smoothing: grayscale;
279270
-webkit-font-smoothing: antialiased;
280271
align-items: center;
281-
background-color: rgba(255, 255, 255, 0.8);
282272
border-radius: 4px;
283-
border: 1px solid #edebe9;
284-
box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
285273
color: #323130;
286274
display: flex;
287275
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -430,10 +418,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with default props 1`] =
430418
-moz-osx-font-smoothing: grayscale;
431419
-webkit-font-smoothing: antialiased;
432420
align-items: center;
433-
background-color: rgba(255, 255, 255, 0.8);
434421
border-radius: 4px;
435-
border: 1px solid #edebe9;
436-
box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
437422
color: #323130;
438423
display: flex;
439424
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -490,10 +475,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with default props 1`] =
490475
-moz-osx-font-smoothing: grayscale;
491476
-webkit-font-smoothing: antialiased;
492477
align-items: center;
493-
background-color: rgba(255, 255, 255, 0.8);
494478
border-radius: 4px;
495-
border: 1px solid #edebe9;
496-
box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
497479
color: #323130;
498480
display: flex;
499481
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -540,10 +522,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with default props 1`] =
540522
-moz-osx-font-smoothing: grayscale;
541523
-webkit-font-smoothing: antialiased;
542524
align-items: center;
543-
background-color: rgba(255, 255, 255, 0.8);
544525
border-radius: 4px;
545-
border: 1px solid #edebe9;
546-
box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
547526
color: #323130;
548527
display: flex;
549528
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -590,10 +569,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with default props 1`] =
590569
-moz-osx-font-smoothing: grayscale;
591570
-webkit-font-smoothing: antialiased;
592571
align-items: center;
593-
background-color: rgba(255, 255, 255, 0.8);
594572
border-radius: 4px;
595-
border: 1px solid #edebe9;
596-
box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
597573
color: #323130;
598574
display: flex;
599575
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;

‎packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.styles.ts‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { ChartAnnotationArrowHead } from '../../../types/IChartAnnotation';
1111
export interface IChartAnnotationLayerStyles {
1212
root?: IStyle;
1313
annotation?: IStyle;
14+
annotationNoDefaults?: IStyle;
1415
connectorLayer?: IStyle;
1516
measurement?: IStyle;
1617
annotationContent?: IStyle;
@@ -79,12 +80,28 @@ export const getStyles: IStyleFunctionOrObject<IChartAnnotationLayerStyleProps,
7980
alignItems: 'center',
8081
justifyContent: 'center',
8182
textAlign: 'center',
82-
backgroundColor: defaultBackground,
8383
color: defaultTextColor,
8484
padding: DEFAULT_ANNOTATION_PADDING,
8585
borderRadius: 4,
86+
whiteSpace: 'pre-wrap',
87+
zIndex: 2,
88+
backgroundColor: defaultBackground,
8689
boxShadow: theme.effects.elevation4,
8790
border: `1px solid ${defaultBorderColor}`,
91+
},
92+
],
93+
annotationNoDefaults: [
94+
theme.fonts.small,
95+
{
96+
position: 'absolute',
97+
pointerEvents: 'none',
98+
display: 'flex',
99+
alignItems: 'center',
100+
justifyContent: 'center',
101+
textAlign: 'center',
102+
color: defaultTextColor,
103+
padding: DEFAULT_ANNOTATION_PADDING,
104+
borderRadius: 4,
88105
whiteSpace: 'pre-wrap',
89106
zIndex: 2,
90107
},

‎packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.tsx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,7 @@ const resolveCoordinates = (
345345
};
346346

347347
export const ChartAnnotationLayer: React.FC<IChartAnnotationLayerProps> = React.memo(props => {
348-
const { annotations: annotationsProp, theme, context, className } = props;
348+
const { annotations: annotationsProp, theme, context, className, hideDefaultStyles } = props;
349349

350350
const classNames = getClassNames(getStyles, { theme, className });
351351
const idPrefix = React.useMemo(() => getId('chart-annotation'), []);
@@ -439,9 +439,16 @@ export const ChartAnnotationLayer: React.FC<IChartAnnotationLayerProps> = React.
439439

440440
const containerStyle: React.CSSProperties = {
441441
maxWidth: layout?.maxWidth,
442-
...(hasCustomBackground && {
443-
backgroundColor: applyOpacityToColor(baseBackgroundColor, backgroundOpacity),
444-
}),
442+
...(hasCustomBackground
443+
? {
444+
backgroundColor: applyOpacityToColor(baseBackgroundColor, backgroundOpacity),
445+
}
446+
: !hideDefaultStyles && {
447+
backgroundColor: applyOpacityToColor(
448+
theme.semanticColors.bodyBackground,
449+
DEFAULT_ANNOTATION_BACKGROUND_OPACITY,
450+
),
451+
}),
445452
borderColor: annotation.style?.borderColor,
446453
borderWidth: annotation.style?.borderWidth,
447454
borderStyle: annotation.style?.borderStyle ?? (annotation.style?.borderColor ? 'solid' : undefined),
@@ -542,6 +549,8 @@ export const ChartAnnotationLayer: React.FC<IChartAnnotationLayerProps> = React.
542549
...containerStyle,
543550
};
544551

552+
const annotationClass = hideDefaultStyles ? classNames.annotationNoDefaults : classNames.annotation;
553+
545554
if (!isMeasurementValid) {
546555
measurementElements.push(
547556
<div
@@ -554,7 +563,7 @@ export const ChartAnnotationLayer: React.FC<IChartAnnotationLayerProps> = React.
554563
}
555564
}
556565
}}
557-
className={css(classNames.annotation, classNames.measurement, layout?.className, annotation.style?.className)}
566+
className={css(annotationClass, classNames.measurement, layout?.className, annotation.style?.className)}
558567
style={measurementStyle}
559568
aria-hidden={true}
560569
data-annotation-key={key}
@@ -581,7 +590,7 @@ export const ChartAnnotationLayer: React.FC<IChartAnnotationLayerProps> = React.
581590
data-annotation-key={key}
582591
>
583592
<div
584-
className={css(classNames.annotation, layout?.className, annotation.style?.className)}
593+
className={css(annotationClass, layout?.className, annotation.style?.className)}
585594
style={containerStyle}
586595
data-annotation-key={key}
587596
>

‎packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.types.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,11 @@ export interface IChartAnnotationLayerProps {
3636
context: IChartAnnotationContext;
3737
theme: ITheme;
3838
className?: string;
39+
/**
40+
* When true, removes default border, shadow, and background styling from annotations.
41+
* @default false
42+
*/
43+
hideDefaultStyles?: boolean;
3944
}
4045

4146
export interface IResolvedAnnotationPosition {

0 commit comments

Comments
 (0)