Skip to content

Commit 85f2be1

Browse files
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

0 commit comments

Comments
 (0)