Skip to content

Commit 85f2be1

Browse files
dlabrecqdlabrecq
authored
chore(charts): refactor how skeleton theme is applied (#10348)
* chore(charts): refactor how skeleton theme is applied #10346 * chore(charts): marked obsolete, private functions as deprecated
1 parent 76c4e2f commit 85f2be1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+964
-340
lines changed

‎packages/react-charts/src/components/Chart/Chart.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -541,6 +541,7 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
541541
...(name && { name: `${name}-${(legendComponent as any).type.displayName}` }),
542542
orientation: legendOrientation,
543543
theme,
544+
themeColor,
544545
...(legendDirection === 'rtl' && {
545546
dataComponent: legendComponent.props.dataComponent ? (
546547
React.cloneElement(legendComponent.props.dataComponent, { transform: `translate(${legendXOffset})` })
@@ -552,11 +553,7 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
552553
labelComponent: legendComponent.props.labelComponent ? (
553554
React.cloneElement(legendComponent.props.labelComponent, { direction: 'rtl', dx: legendXOffset - 30 })
554555
) : (
555-
<ChartLabel
556-
direction="rtl"
557-
dx={legendXOffset - 30}
558-
backgroundStyle={theme.skeleton ? theme.skeleton.backgroundStyle : undefined} // override backgroundStyle
559-
/>
556+
<ChartLabel direction="rtl" dx={legendXOffset - 30} />
560557
)
561558
}),
562559
...legendComponent.props
@@ -603,6 +600,7 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
603600
padding: defaultPadding,
604601
position: legendPosition,
605602
theme,
603+
themeColor,
606604
width,
607605
...(defaultPatternScale && { patternScale: defaultPatternScale })
608606
});
@@ -621,6 +619,7 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
621619
name: `${name}-${(child as any).type.displayName}-${index}`
622620
}),
623621
theme,
622+
themeColor,
624623
...childProps,
625624
...((child as any).type.displayName === 'ChartPie' && {
626625
data: mergePatternData(childProps.data, defaultPatternScale)

‎packages/react-charts/src/components/ChartAxis/ChartAxis.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { VictoryAxis, VictoryAxisProps, VictoryAxisTTargetType } from 'victory-a
1818
import { ChartContainer } from '../ChartContainer/ChartContainer';
1919
import { ChartLabel } from '../ChartLabel/ChartLabel';
2020
import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
21-
import { getTheme } from '../ChartUtils/chart-theme';
21+
import { getComponentTheme, getTheme } from '../ChartUtils/chart-theme';
2222
import { getAxisTheme } from '../ChartUtils/chart-theme-types';
2323

2424
/**
@@ -451,6 +451,8 @@ export const ChartAxis: React.FunctionComponent<ChartAxisProps> = ({
451451
theme = getTheme(themeColor),
452452
...rest
453453
}: ChartAxisProps) => {
454+
const componentTheme = getComponentTheme(themeColor);
455+
454456
// Clone so users can override container props
455457
const container = React.cloneElement(containerComponent, {
456458
theme,
@@ -463,7 +465,7 @@ export const ChartAxis: React.FunctionComponent<ChartAxisProps> = ({
463465
id: () => `${name}-${(axisLabelComponent as any).type.displayName}`
464466
}),
465467
...axisLabelComponent.props,
466-
...(theme.skeleton && theme.skeleton) // override backgroundStyle
468+
...(componentTheme?.label && componentTheme.label) // override backgroundStyle
467469
});
468470

469471
const getTickLabelComponent = () =>
@@ -472,7 +474,7 @@ export const ChartAxis: React.FunctionComponent<ChartAxisProps> = ({
472474
id: (props: any) => `${name}-${(tickLabelComponent as any).type.displayName}-${props.index}`
473475
}),
474476
...tickLabelComponent.props,
475-
...(theme.skeleton && theme.skeleton) // override backgroundStyle
477+
...(componentTheme?.label && componentTheme.label) // override backgroundStyle
476478
});
477479

478480
// Note: containerComponent is required for theme

‎packages/react-charts/src/components/ChartBullet/ChartBullet.tsx

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -594,7 +594,6 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
594594
standalone: false,
595595
subTitle: groupSubTitle,
596596
title: groupTitle,
597-
theme,
598597
themeColor,
599598
width,
600599
...groupTitleComponent.props
@@ -719,15 +718,10 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
719718
labelComponent: legendComponent.props.labelComponent ? (
720719
React.cloneElement(legendComponent.props.labelComponent, {
721720
direction: 'rtl',
722-
dx: legendXOffset - 30,
723-
...(theme.skeleton && theme.skeleton) // override backgroundStyle
721+
dx: legendXOffset - 30
724722
})
725723
) : (
726-
<ChartLabel
727-
direction="rtl"
728-
dx={legendXOffset - 30}
729-
{...(theme.skeleton && theme.skeleton)} // override backgroundStyle
730-
/>
724+
<ChartLabel direction="rtl" dx={legendXOffset - 30} />
731725
)
732726
}),
733727
...legendComponent.props

‎packages/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,7 @@ export const ChartBulletComparativeErrorMeasure: React.FunctionComponent<ChartBu
201201
padding,
202202
standalone: false,
203203
theme,
204+
themeColor,
204205
width,
205206
y,
206207
...measureComponent.props

‎packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { ChartBulletStyles } from '../ChartTheme/ChartStyles';
77
import { getLabelTextSize, getBulletLabelX, getBulletLabelY } from '../ChartUtils/chart-label';
88
import { getPaddingForSide } from '../ChartUtils/chart-padding';
99
import { getBulletGroupTitleTheme } from '../ChartUtils/chart-theme-types';
10+
import { getComponentTheme } from '../ChartUtils/chart-theme';
1011

1112
/**
1213
* ChartBulletGroupTitle renders a group title.
@@ -165,6 +166,7 @@ export const ChartBulletGroupTitle: React.FunctionComponent<ChartBulletGroupTitl
165166

166167
// Returns title
167168
const getTitle = () => {
169+
const componentTheme = getComponentTheme(themeColor);
168170
const titleProps = titleComponent ? titleComponent.props : {};
169171
const showBoth = title && subTitle;
170172
return React.cloneElement(titleComponent, {
@@ -184,7 +186,7 @@ export const ChartBulletGroupTitle: React.FunctionComponent<ChartBulletGroupTitl
184186
labelPosition: 'top'
185187
}),
186188
...titleProps,
187-
...(theme.skeleton && theme.skeleton) // override backgroundStyle
189+
...(componentTheme?.label && componentTheme.label) // override backgroundStyle
188190
});
189191
};
190192

‎packages/react-charts/src/components/ChartBullet/ChartBulletPrimaryDotMeasure.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,7 @@ export const ChartBulletPrimaryDotMeasure: React.FunctionComponent<ChartBulletPr
234234
}
235235
},
236236
theme,
237+
themeColor,
237238
width,
238239
...measureComponent.props
239240
})

‎packages/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,7 @@ export const ChartBulletPrimarySegmentedMeasure: React.FunctionComponent<ChartBu
267267
}
268268
},
269269
theme,
270+
themeColor,
270271
width,
271272
...measureComponent.props
272273
})

‎packages/react-charts/src/components/ChartBullet/ChartBulletQualitativeRange.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,7 @@ export const ChartBulletQualitativeRange: React.FunctionComponent<ChartBulletQua
255255
}
256256
},
257257
theme,
258+
themeColor,
258259
width,
259260
...measureComponent.props
260261
})

‎packages/react-charts/src/components/ChartBullet/ChartBulletTitle.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
77
import { getBulletLabelX, getBulletLabelY } from '../ChartUtils/chart-label';
88
import { getPaddingForSide } from '../ChartUtils/chart-padding';
99
import { getBulletTheme } from '../ChartUtils/chart-theme-types';
10+
import { getComponentTheme } from '../ChartUtils/chart-theme';
1011

1112
/**
1213
* ChartBulletTitle renders the bullet chart title.
@@ -159,6 +160,7 @@ export const ChartBulletTitle: React.FunctionComponent<ChartBulletTitleProps> =
159160

160161
// Returns title
161162
const getTitle = () => {
163+
const componentTheme = getComponentTheme(themeColor);
162164
const showBoth = title && subTitle;
163165

164166
let labelPosition: 'bottom' | 'left' | 'top-left' = horizontal ? 'left' : 'bottom';
@@ -216,7 +218,7 @@ export const ChartBulletTitle: React.FunctionComponent<ChartBulletTitleProps> =
216218
labelPosition
217219
}),
218220
...titleComponent.props,
219-
...(theme.skeleton && theme.skeleton) // override backgroundStyle
221+
...(componentTheme?.label && componentTheme.label) // override backgroundStyle
220222
});
221223
};
222224

‎packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
} from 'victory-cursor-container';
1212
import { ChartLabel } from '../ChartLabel/ChartLabel';
1313
import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
14-
import { getTheme } from '../ChartUtils/chart-theme';
14+
import { getComponentTheme, getTheme } from '../ChartUtils/chart-theme';
1515
import { getClassName } from '../ChartUtils/chart-helpers';
1616

1717
/**
@@ -210,11 +210,12 @@ export const ChartCursorContainer: React.FunctionComponent<ChartCursorContainerP
210210
cursorLabelComponent = <ChartLabel />, // Note that Victory provides its own label component here
211211
...rest
212212
}: ChartCursorContainerProps) => {
213+
const componentTheme = getComponentTheme(themeColor);
213214
const chartClassName = getClassName({ className });
214215
const chartCursorLabelComponent = React.cloneElement(cursorLabelComponent, {
215216
theme,
216217
...cursorLabelComponent.props,
217-
...(theme.skeleton && theme.skeleton) // override backgroundStyle
218+
...(componentTheme?.label && componentTheme.label) // override backgroundStyle
218219
});
219220

220221
// Clone so users can override cursor container props

‎packages/react-charts/src/components/ChartDonut/ChartDonut.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { ChartCommonStyles } from '../ChartTheme/ChartStyles';
2626
import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
2727
import { getPaddingForSide } from '../ChartUtils/chart-padding';
2828
import { getPieLabelX, getPieLabelY } from '../ChartUtils/chart-label';
29+
import { getComponentTheme } from '../ChartUtils/chart-theme';
2930

3031
interface ChartDonutSubTitleInterface {
3132
dy?: number;
@@ -596,6 +597,8 @@ export const ChartDonut: React.FunctionComponent<ChartDonutProps> = ({
596597
width = theme.pie.width,
597598
...rest
598599
}: ChartDonutProps) => {
600+
const componentTheme = getComponentTheme(themeColor);
601+
599602
const defaultPadding = {
600603
bottom: getPaddingForSide('bottom', padding, theme.pie.padding),
601604
left: getPaddingForSide('left', padding, theme.pie.padding),
@@ -660,7 +663,7 @@ export const ChartDonut: React.FunctionComponent<ChartDonutProps> = ({
660663
width
661664
}),
662665
...subTitleProps,
663-
...(theme.skeleton && theme.skeleton) // override backgroundStyle
666+
...(componentTheme?.label && componentTheme.label) // override backgroundStyle
664667
});
665668
};
666669

@@ -694,7 +697,7 @@ export const ChartDonut: React.FunctionComponent<ChartDonutProps> = ({
694697
width
695698
}),
696699
...titleProps,
697-
...(theme.skeleton && theme.skeleton) // override backgroundStyle
700+
...(componentTheme?.label && componentTheme.label) // override backgroundStyle
698701
});
699702
};
700703

@@ -712,6 +715,7 @@ export const ChartDonut: React.FunctionComponent<ChartDonutProps> = ({
712715
radius={chartRadius > 0 ? chartRadius : 0}
713716
standalone={false}
714717
theme={theme}
718+
themeColor={themeColor}
715719
width={width}
716720
{...rest}
717721
/>

‎packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -524,6 +524,7 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
524524
standalone: false,
525525
subTitlePosition: childProps.subTitlePosition || subTitlePosition,
526526
theme: dynamicTheme,
527+
themeColor,
527528
width,
528529
...childProps
529530
});
@@ -546,6 +547,7 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
546547
padding={defaultPadding}
547548
standalone={false}
548549
theme={theme}
550+
themeColor={themeColor}
549551
width={width}
550552
{...rest}
551553
/>

‎packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -688,6 +688,7 @@ export const ChartDonutUtilization: React.FunctionComponent<ChartDonutUtilizatio
688688
padding={padding}
689689
standalone={false}
690690
theme={getThresholdTheme()}
691+
themeColor={themeColor}
691692
width={width}
692693
{...rest}
693694
/>

‎packages/react-charts/src/components/ChartGroup/ChartGroup.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -499,7 +499,8 @@ export const ChartGroup: React.FunctionComponent<ChartGroupProps> = ({
499499
<VictoryGroup colorScale={colorScale} containerComponent={container} theme={theme} {...rest}>
500500
{renderChildrenWithPatterns({
501501
children,
502-
patternScale: defaultPatternScale
502+
patternScale: defaultPatternScale,
503+
themeColor
503504
})}
504505
{isPatternDefs && getPatternDefs({ patternId, colorScale: defaultColorScale })}
505506
</VictoryGroup>

‎packages/react-charts/src/components/ChartLegend/ChartLegend.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { ChartContainer } from '../ChartContainer/ChartContainer';
2121
import { ChartLabel } from '../ChartLabel/ChartLabel';
2222
import { ChartPoint } from '../ChartPoint/ChartPoint';
2323
import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
24-
import { getTheme } from '../ChartUtils/chart-theme';
24+
import { getComponentTheme, getTheme } from '../ChartUtils/chart-theme';
2525

2626
/**
2727
* ChartLegend renders a chart legend component.
@@ -317,6 +317,8 @@ export const ChartLegend: React.FunctionComponent<ChartLegendProps> = ({
317317
theme = getTheme(themeColor),
318318
...rest
319319
}: ChartLegendProps) => {
320+
const componentTheme = getComponentTheme(themeColor);
321+
320322
// Merge pattern IDs with `style.data.fill` property
321323
const getDefaultStyle = () => {
322324
if (!patternScale) {
@@ -351,15 +353,15 @@ export const ChartLegend: React.FunctionComponent<ChartLegendProps> = ({
351353
React.cloneElement(labelComponent, {
352354
...(name && { id: (props: any) => `${name}-${(labelComponent as any).type.displayName}-${props.index}` }),
353355
...labelComponent.props,
354-
...(theme.skeleton && theme.skeleton) // override backgroundStyle
356+
...(componentTheme?.label && componentTheme.label) // override backgroundStyle
355357
});
356358

357359
const getTitleComponent = () =>
358360
React.cloneElement(titleComponent, {
359361
// Victory doesn't appear to call the id function here, but it's valid for label components
360362
...(name && { id: () => `${name}-${(titleComponent as any).type.displayName}` }),
361363
...titleComponent.props,
362-
...(theme.skeleton && theme.skeleton) // override backgroundStyle
364+
...(componentTheme?.label && componentTheme.label) // override backgroundStyle
363365
});
364366

365367
// Note: containerComponent is required for theme

‎packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -401,6 +401,7 @@ export const ChartLegendTooltip: React.FunctionComponent<ChartLegendTooltipProps
401401
}),
402402
text,
403403
theme,
404+
themeColor,
404405
width,
405406
...rest
406407
});

‎packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,7 @@ export const ChartLegendTooltipContent: React.FunctionComponent<ChartLegendToolt
312312
patternScale,
313313
standalone: false,
314314
theme,
315+
themeColor,
315316
x: getX() + legendOffsetX + Helpers.evaluateProp(dx, undefined),
316317
y: getY() + legendOffsetY + Helpers.evaluateProp(dy, undefined),
317318
...legendProps

‎packages/react-charts/src/components/ChartPie/ChartPie.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -593,6 +593,7 @@ export const ChartPie: React.FunctionComponent<ChartPieProps> = ({
593593
key: 'pf-chart-pie-legend',
594594
orientation: legendOrientation,
595595
theme,
596+
themeColor,
596597
...(legendDirection === 'rtl' && {
597598
dataComponent: legendComponent.props.dataComponent ? (
598599
React.cloneElement(legendComponent.props.dataComponent, { transform: `translate(${legendXOffset})` })

‎packages/react-charts/src/components/ChartTheme/ChartTheme.ts

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,26 @@
11
import { VictoryThemeDefinition } from 'victory-core';
22

3-
// Note: Victory incorrectly typed ThemeBaseProps.padding as number instead of PaddingProps
4-
export interface ChartThemeDefinitionInterface extends VictoryThemeDefinition {
5-
skeleton?: {
3+
/**
4+
* Chart component theme definition
5+
* @private
6+
* @beta
7+
*/
8+
export interface ChartComponentThemeDefinitionInterface {
9+
axis?: VictoryThemeDefinition;
10+
bullet?: VictoryThemeDefinition;
11+
bulletComparativeErrorMeasure?: VictoryThemeDefinition;
12+
bulletComparativeMeasure?: VictoryThemeDefinition;
13+
bulletComparativeWarningMeasure: VictoryThemeDefinition;
14+
bulletGroupTitle?: VictoryThemeDefinition;
15+
bulletPrimaryDotMeasure?: VictoryThemeDefinition;
16+
bulletPrimaryNegativeMeasure?: VictoryThemeDefinition;
17+
bulletPrimarySegmentedMeasure?: VictoryThemeDefinition;
18+
bulletQualitativeRange?: VictoryThemeDefinition;
19+
donut?: VictoryThemeDefinition;
20+
donutThresholdDynamic?: VictoryThemeDefinition;
21+
donutThresholdStatic?: VictoryThemeDefinition;
22+
donutUtilization?: VictoryThemeDefinition;
23+
label?: {
624
backgroundStyle?: {
725
fill?: string;
826
};
@@ -11,10 +29,27 @@ export interface ChartThemeDefinitionInterface extends VictoryThemeDefinition {
1129
stroke?: string;
1230
};
1331
};
32+
threshold?: VictoryThemeDefinition;
1433
}
1534

35+
/**
36+
* Chart theme definition
37+
*
38+
* Note: Victory incorrectly typed ThemeBaseProps.padding as number instead of PaddingProps
39+
*
40+
* @public
41+
*/
42+
export interface ChartThemeDefinitionInterface extends VictoryThemeDefinition {}
43+
1644
/**
1745
* Chart theme definition
1846
* @public
1947
*/
2048
export type ChartThemeDefinition = ChartThemeDefinitionInterface;
49+
50+
/**
51+
* Chart component theme definition
52+
* @private
53+
* @beta
54+
*/
55+
export type ChartComponentThemeDefinition = ChartComponentThemeDefinitionInterface;

0 commit comments

Comments
 (0)