From 6eb684f7bb60ba2de65fd3924be5b046684e5a39 Mon Sep 17 00:00:00 2001 From: Dan Labrecque Date: Thu, 5 May 2022 16:32:41 -0400 Subject: [PATCH] feat(charts): Deprecate themeVariant prop for light / dark themes https://github.com/patternfly/patternfly-react/issues/7369 --- .../src/components/Chart/Chart.tsx | 5 +- .../src/components/ChartArea/ChartArea.tsx | 5 +- .../ChartArea/examples/ChartArea.md | 2 +- .../src/components/ChartAxis/ChartAxis.tsx | 13 +- .../src/components/ChartBar/ChartBar.tsx | 5 +- .../components/ChartBullet/ChartBullet.tsx | 8 +- .../ChartBulletComparativeErrorMeasure.tsx | 5 +- .../ChartBulletComparativeMeasure.tsx | 5 +- .../ChartBulletComparativeWarningMeasure.tsx | 5 +- .../ChartBullet/ChartBulletGroupTitle.tsx | 5 +- .../ChartBulletPrimaryDotMeasure.tsx | 5 +- .../ChartBulletPrimarySegmentedMeasure.tsx | 7 +- .../ChartBulletQualitativeRange.tsx | 5 +- .../ChartBullet/ChartBulletTitle.tsx | 5 +- .../ChartBullet/utils/chart-bullet-data.ts | 23 +-- .../ChartBullet/utils/chart-bullet-size.ts | 18 +-- .../ChartBullet/utils/chart-bullet-theme.ts | 21 +-- .../ChartContainer/ChartContainer.tsx | 5 +- .../ChartCursorContainer.tsx | 5 +- .../ChartCursorTooltip/ChartCursorTooltip.tsx | 5 +- .../src/components/ChartDonut/ChartDonut.tsx | 5 +- .../ChartDonut/examples/ChartDonut.md | 4 +- .../ChartDonutThreshold.tsx | 9 +- .../ChartDonutUtilization.tsx | 5 +- .../examples/ChartDonutUtilization.md | 6 +- .../src/components/ChartGroup/ChartGroup.tsx | 5 +- .../components/ChartLegend/ChartLegend.tsx | 7 +- .../ChartLegendTooltip/ChartLegendTooltip.tsx | 5 +- .../ChartLegendTooltipContent.tsx | 5 +- .../src/components/ChartLine/ChartLine.tsx | 5 +- .../ChartLine/examples/ChartLine.md | 2 +- .../src/components/ChartPie/ChartPie.tsx | 5 +- .../components/ChartPie/examples/ChartPie.md | 2 +- .../components/ChartScatter/ChartScatter.tsx | 5 +- .../src/components/ChartStack/ChartStack.tsx | 5 +- .../src/components/ChartTheme/ChartTheme.ts | 7 + .../ChartTheme/examples/ChartTheme.md | 10 +- .../ChartThreshold/ChartThreshold.tsx | 9 +- .../ChartThreshold/examples/ChartThreshold.md | 1 - .../components/ChartTooltip/ChartTooltip.tsx | 5 +- .../ChartTooltip/examples/ChartTooltip.md | 8 +- .../src/components/ChartUtils/chart-theme.ts | 132 ++++++------------ .../ChartVoronoiContainer.tsx | 5 +- 43 files changed, 182 insertions(+), 227 deletions(-) diff --git a/packages/react-charts/src/components/Chart/Chart.tsx b/packages/react-charts/src/components/Chart/Chart.tsx index 64f0f29fb1a..2dc91be9842 100644 --- a/packages/react-charts/src/components/Chart/Chart.tsx +++ b/packages/react-charts/src/components/Chart/Chart.tsx @@ -404,7 +404,7 @@ export interface ChartProps extends VictoryChartProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -430,10 +430,11 @@ export const Chart: React.FunctionComponent = ({ padding, showAxis = true, themeColor, + // eslint-disable-next-line @typescript-eslint/no-unused-vars themeVariant, // destructure last - theme = getChartTheme(themeColor, themeVariant, showAxis), + theme = getChartTheme(themeColor, showAxis), containerComponent = , legendOrientation = theme.legend.orientation as ChartLegendOrientation, height = theme.chart.height, diff --git a/packages/react-charts/src/components/ChartArea/ChartArea.tsx b/packages/react-charts/src/components/ChartArea/ChartArea.tsx index ac4c9799791..d0e230ae033 100644 --- a/packages/react-charts/src/components/ChartArea/ChartArea.tsx +++ b/packages/react-charts/src/components/ChartArea/ChartArea.tsx @@ -386,7 +386,7 @@ export interface ChartAreaProps extends VictoryAreaProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -434,10 +434,11 @@ export interface ChartAreaProps extends VictoryAreaProps { export const ChartArea: React.FunctionComponent = ({ containerComponent = , themeColor, + // eslint-disable-next-line @typescript-eslint/no-unused-vars themeVariant, // destructure last - theme = getTheme(themeColor, themeVariant), + theme = getTheme(themeColor), ...rest }: ChartAreaProps) => { diff --git a/packages/react-charts/src/components/ChartArea/examples/ChartArea.md b/packages/react-charts/src/components/ChartArea/examples/ChartArea.md index b2cae8eb915..5fb254faf9c 100644 --- a/packages/react-charts/src/components/ChartArea/examples/ChartArea.md +++ b/packages/react-charts/src/components/ChartArea/examples/ChartArea.md @@ -12,7 +12,7 @@ propComponents: [ hideDarkMode: true --- -import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThreshold, ChartThemeColor, ChartLegendTooltip, ChartThemeVariant, ChartVoronoiContainer, createContainer, getResizeObserver } from '@patternfly/react-charts'; +import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThreshold, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer, getResizeObserver } from '@patternfly/react-charts'; import '@patternfly/patternfly/patternfly-charts.css'; ## Introduction diff --git a/packages/react-charts/src/components/ChartAxis/ChartAxis.tsx b/packages/react-charts/src/components/ChartAxis/ChartAxis.tsx index 1a794bc1083..f1e820af743 100644 --- a/packages/react-charts/src/components/ChartAxis/ChartAxis.tsx +++ b/packages/react-charts/src/components/ChartAxis/ChartAxis.tsx @@ -385,7 +385,7 @@ export interface ChartAxisProps extends VictoryAxisProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -446,10 +446,11 @@ export const ChartAxis: React.FunctionComponent = ({ containerComponent = , showGrid = false, themeColor, + // eslint-disable-next-line @typescript-eslint/no-unused-vars themeVariant, // destructure last - theme = getTheme(themeColor, themeVariant), + theme = getTheme(themeColor), ...rest }: ChartAxisProps) => { // Clone so users can override container props @@ -459,13 +460,7 @@ export const ChartAxis: React.FunctionComponent = ({ }); // Note: containerComponent is required for theme - return ( - - ); + return ; }; ChartAxis.displayName = 'ChartAxis'; diff --git a/packages/react-charts/src/components/ChartBar/ChartBar.tsx b/packages/react-charts/src/components/ChartBar/ChartBar.tsx index 1785293f481..5119c13c38a 100644 --- a/packages/react-charts/src/components/ChartBar/ChartBar.tsx +++ b/packages/react-charts/src/components/ChartBar/ChartBar.tsx @@ -422,7 +422,7 @@ export interface ChartBarProps extends VictoryBarProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -470,10 +470,11 @@ export interface ChartBarProps extends VictoryBarProps { export const ChartBar: React.FunctionComponent = ({ containerComponent = , themeColor, + // eslint-disable-next-line @typescript-eslint/no-unused-vars themeVariant, // destructure last - theme = getTheme(themeColor, themeVariant), + theme = getTheme(themeColor), ...rest }: ChartBarProps) => { // Clone so users can override container props diff --git a/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx b/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx index 78f708d1578..b75694b17f1 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx @@ -445,7 +445,7 @@ export interface ChartBulletProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -518,6 +518,7 @@ export const ChartBullet: React.FunctionComponent = ({ standalone = true, subTitle, themeColor, + // eslint-disable-next-line @typescript-eslint/no-unused-vars themeVariant, title, titleComponent = , @@ -536,8 +537,7 @@ export const ChartBullet: React.FunctionComponent = ({ primarySegmentedMeasureLegendData, qualitativeRangeData, qualitativeRangeLegendData, - themeColor, - themeVariant + themeColor }), domain = getBulletDomain({ comparativeErrorMeasureComponent, @@ -676,7 +676,6 @@ export const ChartBullet: React.FunctionComponent = ({ size: getPrimaryDotMeasureSize({ height: chartSize.height, horizontal, width: chartSize.width }), standalone: false, themeColor, - themeVariant, width: chartSize.width, y: primaryDotMeasureDataY, ...primaryDotMeasureComponent.props @@ -697,7 +696,6 @@ export const ChartBullet: React.FunctionComponent = ({ padding, standalone: false, themeColor, - themeVariant, width: chartSize.width, y: primarySegmentedMeasureDataY, ...primarySegmentedMeasureComponent.props diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.tsx index e700dc46afd..4db018584eb 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.tsx @@ -147,7 +147,7 @@ export interface ChartBulletComparativeErrorMeasureProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -185,11 +185,12 @@ export const ChartBulletComparativeErrorMeasure: React.FunctionComponent { diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeMeasure.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeMeasure.tsx index e1a077adff0..623a28dde58 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeMeasure.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeMeasure.tsx @@ -149,7 +149,7 @@ export interface ChartBulletComparativeMeasureProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -186,11 +186,12 @@ export const ChartBulletComparativeMeasure: React.FunctionComponent diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.tsx index 1946393d21b..01a566054c3 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.tsx @@ -147,7 +147,7 @@ export interface ChartBulletComparativeWarningMeasureProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -185,11 +185,12 @@ export const ChartBulletComparativeWarningMeasure: React.FunctionComponent { diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.tsx index 13da83dc82f..93849b17f88 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.tsx @@ -97,7 +97,7 @@ export interface ChartBulletGroupTitleProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -126,12 +126,13 @@ export const ChartBulletGroupTitle: React.FunctionComponent, // destructure last - theme = getBulletGroupTitleTheme(themeColor, themeVariant), + theme = getBulletGroupTitleTheme(themeColor), height = theme.chart.height, width = theme.chart.width }: ChartBulletGroupTitleProps) => { diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletPrimaryDotMeasure.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletPrimaryDotMeasure.tsx index 00855dcef21..11e31994ccc 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletPrimaryDotMeasure.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletPrimaryDotMeasure.tsx @@ -147,7 +147,7 @@ export interface ChartBulletPrimaryDotMeasureProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -194,12 +194,13 @@ export const ChartBulletPrimaryDotMeasure: React.FunctionComponent, height = theme.group.height, width = theme.group.width diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.tsx index 0d41e9bccaa..1506526b83a 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.tsx @@ -163,7 +163,7 @@ export interface ChartBulletPrimarySegmentedMeasureProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -210,13 +210,14 @@ export const ChartBulletPrimarySegmentedMeasure: React.FunctionComponent diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletQualitativeRange.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletQualitativeRange.tsx index 50a418ca43b..490f56250a0 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletQualitativeRange.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletQualitativeRange.tsx @@ -153,7 +153,7 @@ export interface ChartBulletQualitativeRangeProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -200,12 +200,13 @@ export const ChartBulletQualitativeRange: React.FunctionComponent diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletTitle.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletTitle.tsx index cfb748b3120..135193fdb57 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletTitle.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletTitle.tsx @@ -99,7 +99,7 @@ export interface ChartBulletTitleProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -135,13 +135,14 @@ export const ChartBulletTitle: React.FunctionComponent = standalone = true, subTitle, themeColor, + // eslint-disable-next-line @typescript-eslint/no-unused-vars themeVariant, title, titleComponent = , titlePosition, // destructure last - theme = getBulletTheme(themeColor, themeVariant), + theme = getBulletTheme(themeColor), height = horizontal ? theme.chart.height : theme.chart.width, width = horizontal ? theme.chart.width : theme.chart.height }: ChartBulletTitleProps) => { diff --git a/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-data.ts b/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-data.ts index ba9416b1203..1480274d3e5 100644 --- a/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-data.ts +++ b/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-data.ts @@ -24,10 +24,9 @@ interface ChartBulletDataInterface { export const getComparativeMeasureData = ({ data, themeColor, - themeVariant, // destructure last - theme = getBulletComparativeMeasureTheme(themeColor, themeVariant), + theme = getBulletComparativeMeasureTheme(themeColor), y }: ChartBulletDataInterface) => { const datum: any[] = []; @@ -53,34 +52,30 @@ export const getComparativeMeasureData = ({ export const getComparativeErrorMeasureData = ({ data, themeColor, - themeVariant, // destructure last - theme = getBulletComparativeErrorMeasureTheme(themeColor, themeVariant), + theme = getBulletComparativeErrorMeasureTheme(themeColor), y }: ChartBulletDataInterface) => getComparativeMeasureData({ data, theme, themeColor, - themeVariant, y }); export const getComparativeWarningMeasureData = ({ data, themeColor, - themeVariant, // destructure last - theme = getBulletComparativeWarningMeasureTheme(themeColor, themeVariant), + theme = getBulletComparativeWarningMeasureTheme(themeColor), y }: ChartBulletDataInterface) => getComparativeMeasureData({ data, theme, themeColor, - themeVariant, y }); @@ -88,10 +83,9 @@ export const getPrimaryDotMeasureData = ({ data, invert, themeColor, - themeVariant, // destructure last - theme = getBulletPrimaryDotMeasureTheme(themeColor, themeVariant), + theme = getBulletPrimaryDotMeasureTheme(themeColor), y, y0 }: ChartBulletDataInterface) => @@ -100,7 +94,6 @@ export const getPrimaryDotMeasureData = ({ invert, theme, themeColor, - themeVariant, y, y0 }); @@ -109,11 +102,10 @@ export const getPrimarySegmentedMeasureData = ({ data, invert, themeColor, - themeVariant, // destructure last - theme = getBulletPrimarySegmentedMeasureTheme(themeColor, themeVariant), - negativeMeasureTheme = getBulletPrimaryNegativeMeasureTheme(themeColor, themeVariant), + theme = getBulletPrimarySegmentedMeasureTheme(themeColor), + negativeMeasureTheme = getBulletPrimaryNegativeMeasureTheme(themeColor), y, y0 }: ChartBulletDataInterface) => { @@ -173,10 +165,9 @@ export const getQualitativeRangeData = ({ data, invert, themeColor, - themeVariant, // destructure last - theme = getBulletQualitativeRangeTheme(themeColor, themeVariant), + theme = getBulletQualitativeRangeTheme(themeColor), y, y0 }: ChartBulletDataInterface) => { diff --git a/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-size.ts b/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-size.ts index 4b71e3f0e93..da48eb2beba 100644 --- a/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-size.ts +++ b/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-size.ts @@ -62,11 +62,10 @@ export const getComparativeMeasureErrorWidth = ({ height, horizontal, themeColor, - themeVariant, width, // destructure last - theme = getBulletComparativeErrorMeasureTheme(themeColor, themeVariant) + theme = getBulletComparativeErrorMeasureTheme(themeColor) }: ChartBulletSizeInterface) => scaleBarWidth({ defaultSize: theme.bar.height, @@ -80,11 +79,10 @@ export const getComparativeMeasureWidth = ({ height, horizontal, themeColor, - themeVariant, width, // destructure last - theme = getBulletComparativeMeasureTheme(themeColor, themeVariant) + theme = getBulletComparativeMeasureTheme(themeColor) }: ChartBulletSizeInterface) => scaleBarWidth({ defaultSize: theme.bar.height, @@ -98,11 +96,10 @@ export const getComparativeMeasureWarningWidth = ({ height, horizontal, themeColor, - themeVariant, width, // destructure last - theme = getBulletComparativeWarningMeasureTheme(themeColor, themeVariant) + theme = getBulletComparativeWarningMeasureTheme(themeColor) }: ChartBulletSizeInterface) => scaleBarWidth({ defaultSize: theme.bar.height, @@ -116,11 +113,10 @@ export const getPrimaryDotMeasureSize = ({ height, horizontal, themeColor, - themeVariant, width, // destructure last - theme = getBulletPrimaryDotMeasureTheme(themeColor, themeVariant) + theme = getBulletPrimaryDotMeasureTheme(themeColor) }: ChartBulletSizeInterface) => scaleSize({ defaultSize: theme.group.height, @@ -134,11 +130,10 @@ export const getPrimarySegmentedMeasureWidth = ({ height, horizontal, themeColor, - themeVariant, width, // destructure last - theme = getBulletPrimarySegmentedMeasureTheme(themeColor, themeVariant) + theme = getBulletPrimarySegmentedMeasureTheme(themeColor) }: ChartBulletSizeInterface) => scaleBarWidth({ defaultSize: theme.group.height, @@ -153,11 +148,10 @@ export const getQualitativeRangeBarWidth = ({ height, horizontal, themeColor, - themeVariant, width, // destructure last - theme = getBulletQualitativeRangeTheme(themeColor, themeVariant) + theme = getBulletQualitativeRangeTheme(themeColor) }: ChartBulletSizeInterface) => scaleBarWidth({ defaultSize: theme.group.height, diff --git a/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-theme.ts b/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-theme.ts index a44fa4b8599..a8091881103 100644 --- a/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-theme.ts +++ b/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-theme.ts @@ -21,7 +21,6 @@ interface ChartBulletThemeInterface { qualitativeRangeData?: any[]; qualitativeRangeLegendData?: any[]; themeColor?: string; - themeVariant?: string; } const getLegendColorScale = (computedData: any, legendData: any) => { @@ -48,8 +47,7 @@ export const getColorScale = ({ primarySegmentedMeasureLegendData, qualitativeRangeData, qualitativeRangeLegendData, - themeColor, - themeVariant + themeColor }: ChartBulletThemeInterface): any[] => { const colorScale: any[] = []; if (primaryDotMeasureLegendData && primaryDotMeasureLegendData.length) { @@ -63,8 +61,7 @@ export const getColorScale = ({ const computedData = getPrimarySegmentedMeasureData({ data: primarySegmentedMeasureData, invert, - themeColor, - themeVariant + themeColor }); colorScale.push(...getLegendColorScale(computedData, primarySegmentedMeasureLegendData)); } @@ -72,8 +69,7 @@ export const getColorScale = ({ const computedData = getComparativeWarningMeasureData({ data: comparativeWarningMeasureData, invert, - themeColor, - themeVariant + themeColor }); colorScale.push(...getLegendColorScale(computedData, comparativeWarningMeasureLegendData)); } @@ -81,8 +77,7 @@ export const getColorScale = ({ const computedData = getComparativeErrorMeasureData({ data: comparativeErrorMeasureData, invert, - themeColor, - themeVariant + themeColor }); colorScale.push(...getLegendColorScale(computedData, comparativeErrorMeasureLegendData)); } @@ -109,8 +104,7 @@ export const getBulletThemeWithLegendColorScale = ({ primarySegmentedMeasureLegendData, qualitativeRangeData, qualitativeRangeLegendData, - themeColor, - themeVariant + themeColor }: ChartBulletThemeInterface): ChartThemeDefinition => { const colorScale = getColorScale({ comparativeErrorMeasureData, @@ -124,11 +118,10 @@ export const getBulletThemeWithLegendColorScale = ({ primarySegmentedMeasureLegendData, qualitativeRangeData, qualitativeRangeLegendData, - themeColor, - themeVariant + themeColor }); - const theme = getBulletTheme(themeColor, themeVariant); + const theme = getBulletTheme(themeColor); theme.legend.colorScale = [...colorScale]; return theme; }; diff --git a/packages/react-charts/src/components/ChartContainer/ChartContainer.tsx b/packages/react-charts/src/components/ChartContainer/ChartContainer.tsx index 9cdcf239c00..539e9c0794d 100644 --- a/packages/react-charts/src/components/ChartContainer/ChartContainer.tsx +++ b/packages/react-charts/src/components/ChartContainer/ChartContainer.tsx @@ -128,7 +128,7 @@ export interface ChartContainerProps extends VictoryContainerProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -150,10 +150,11 @@ export interface ChartContainerProps extends VictoryContainerProps { export const ChartContainer: React.FunctionComponent = ({ className, themeColor, + // eslint-disable-next-line @typescript-eslint/no-unused-vars themeVariant, // destructure last - theme = getTheme(themeColor, themeVariant), + theme = getTheme(themeColor), ...rest }: ChartContainerProps) => { const chartClassName = getClassName({ className }); diff --git a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx index a46ea8e7af5..16e78ea6a16 100644 --- a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx +++ b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx @@ -191,7 +191,7 @@ export interface ChartCursorContainerProps extends VictoryCursorContainerProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -206,10 +206,11 @@ export const ChartCursorContainer: React.FunctionComponent, themeColor, + // eslint-disable-next-line @typescript-eslint/no-unused-vars themeVariant, // destructure last - theme = getTheme(themeColor, themeVariant), + theme = getTheme(themeColor), cursorLabelComponent = , // Note that Victory provides its own label component here ...rest }: ChartCursorContainerProps) => { diff --git a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx index f13cd7aa110..995d006aa44 100644 --- a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx +++ b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx @@ -247,7 +247,7 @@ export interface ChartCursorTooltipProps extends ChartTooltipProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -278,10 +278,11 @@ export const ChartCursorTooltip: React.FunctionComponent = ({ subTitleComponent, subTitlePosition = ChartDonutStyles.label.subTitlePosition, themeColor, + // eslint-disable-next-line @typescript-eslint/no-unused-vars themeVariant, title, titleComponent = , // destructure last - theme = getDonutTheme(themeColor, themeVariant), + theme = getDonutTheme(themeColor), height = theme.pie.height, width = theme.pie.width, ...rest diff --git a/packages/react-charts/src/components/ChartDonut/examples/ChartDonut.md b/packages/react-charts/src/components/ChartDonut/examples/ChartDonut.md index ce3076848b6..ba5d5972e04 100644 --- a/packages/react-charts/src/components/ChartDonut/examples/ChartDonut.md +++ b/packages/react-charts/src/components/ChartDonut/examples/ChartDonut.md @@ -7,7 +7,7 @@ propComponents: [ hideDarkMode: true --- -import { ChartDonut, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts'; +import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts'; ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! @@ -68,7 +68,7 @@ import { ChartDonut } from '@patternfly/react-charts'; ### Multi-color (ordered) with right aligned legend ```js import React from 'react'; -import { ChartDonut, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts'; +import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts';
= ({ children, containerComponent = , themeColor, + // eslint-disable-next-line @typescript-eslint/no-unused-vars themeVariant, // destructure last - theme = getTheme(themeColor, themeVariant), + theme = getTheme(themeColor), ...rest }: ChartGroupProps) => { diff --git a/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx b/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx index 20259d72d46..687e5304a54 100644 --- a/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx +++ b/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx @@ -271,7 +271,7 @@ export interface ChartLegendProps extends VictoryLegendProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -322,11 +322,12 @@ export const ChartLegend: React.FunctionComponent = ({ labelComponent = , responsive = true, themeColor, + // eslint-disable-next-line @typescript-eslint/no-unused-vars themeVariant, titleComponent = , // destructure last - theme = getTheme(themeColor, themeVariant), + theme = getTheme(themeColor), ...rest }: ChartLegendProps) => { // Clone so users can override container props @@ -354,7 +355,7 @@ ChartLegend.displayName = 'ChartLegend'; hoistNonReactStatics(ChartLegend, VictoryLegend, { getBaseProps: true }); (ChartLegend as any).getBaseProps = (props: any) => { - const theme = getTheme(null, null); + const theme = getTheme(null); return (VictoryLegend as any).getBaseProps( { titleComponent: , // Workaround for getBaseProps error diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx index a2d5a7b70dc..609b1b7031f 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx +++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx @@ -284,7 +284,7 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -331,12 +331,13 @@ export const ChartLegendTooltip: React.FunctionComponent { const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength) : 10; diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx index f59879b4076..9d132e1d857 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx +++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx @@ -147,7 +147,7 @@ export interface ChartLegendTooltipContentProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -194,13 +194,14 @@ export const ChartLegendTooltipContent: React.FunctionComponent, width, // destructure last - theme = getTheme(themeColor, themeVariant), + theme = getTheme(themeColor), ...rest }: ChartLegendTooltipContentProps) => { const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength) : 10; diff --git a/packages/react-charts/src/components/ChartLine/ChartLine.tsx b/packages/react-charts/src/components/ChartLine/ChartLine.tsx index 06508e83dbe..e49368f27ef 100644 --- a/packages/react-charts/src/components/ChartLine/ChartLine.tsx +++ b/packages/react-charts/src/components/ChartLine/ChartLine.tsx @@ -387,7 +387,7 @@ export interface ChartLineProps extends VictoryLineProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -435,10 +435,11 @@ export interface ChartLineProps extends VictoryLineProps { export const ChartLine: React.FunctionComponent = ({ containerComponent = , themeColor, + // eslint-disable-next-line @typescript-eslint/no-unused-vars themeVariant, // destructure last - theme = getTheme(themeColor, themeVariant), + theme = getTheme(themeColor), ...rest }: ChartLineProps) => { // Clone so users can override container props diff --git a/packages/react-charts/src/components/ChartLine/examples/ChartLine.md b/packages/react-charts/src/components/ChartLine/examples/ChartLine.md index 5fe358ddfc1..d4c42c68343 100644 --- a/packages/react-charts/src/components/ChartLine/examples/ChartLine.md +++ b/packages/react-charts/src/components/ChartLine/examples/ChartLine.md @@ -11,7 +11,7 @@ propComponents: [ hideDarkMode: true --- -import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartLegendTooltip, ChartThemeVariant, ChartVoronoiContainer, createContainer, getResizeObserver } from '@patternfly/react-charts'; +import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer, getResizeObserver } from '@patternfly/react-charts'; import { VictoryZoomContainer } from 'victory-zoom-container'; ## Introduction diff --git a/packages/react-charts/src/components/ChartPie/ChartPie.tsx b/packages/react-charts/src/components/ChartPie/ChartPie.tsx index b3278297464..d3879f43277 100644 --- a/packages/react-charts/src/components/ChartPie/ChartPie.tsx +++ b/packages/react-charts/src/components/ChartPie/ChartPie.tsx @@ -421,7 +421,7 @@ export interface ChartPieProps extends VictoryPieProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -476,10 +476,11 @@ export const ChartPie: React.FunctionComponent = ({ radius, standalone = true, themeColor, + // eslint-disable-next-line @typescript-eslint/no-unused-vars themeVariant, // destructure last - theme = getTheme(themeColor, themeVariant), + theme = getTheme(themeColor), labelComponent = allowTooltip ? ( ) : ( diff --git a/packages/react-charts/src/components/ChartPie/examples/ChartPie.md b/packages/react-charts/src/components/ChartPie/examples/ChartPie.md index d71bd2a01f8..9f009f405ca 100644 --- a/packages/react-charts/src/components/ChartPie/examples/ChartPie.md +++ b/packages/react-charts/src/components/ChartPie/examples/ChartPie.md @@ -5,7 +5,7 @@ propComponents: ['ChartPie'] hideDarkMode: true --- -import { ChartPie, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts'; +import { ChartPie, ChartThemeColor } from '@patternfly/react-charts'; ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! diff --git a/packages/react-charts/src/components/ChartScatter/ChartScatter.tsx b/packages/react-charts/src/components/ChartScatter/ChartScatter.tsx index d5827b32c58..116bdcf5e23 100644 --- a/packages/react-charts/src/components/ChartScatter/ChartScatter.tsx +++ b/packages/react-charts/src/components/ChartScatter/ChartScatter.tsx @@ -404,7 +404,7 @@ export interface ChartScatterProps extends VictoryScatterProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -452,10 +452,11 @@ export interface ChartScatterProps extends VictoryScatterProps { export const ChartScatter: React.FunctionComponent = ({ containerComponent = , themeColor, + // eslint-disable-next-line @typescript-eslint/no-unused-vars themeVariant, // destructure last - theme = getTheme(themeColor, themeVariant), + theme = getTheme(themeColor), size = ({ active }) => (active ? ChartScatterStyles.activeSize : ChartScatterStyles.size), ...rest }: ChartScatterProps) => { diff --git a/packages/react-charts/src/components/ChartStack/ChartStack.tsx b/packages/react-charts/src/components/ChartStack/ChartStack.tsx index 6a297dce271..faeccdd0b99 100644 --- a/packages/react-charts/src/components/ChartStack/ChartStack.tsx +++ b/packages/react-charts/src/components/ChartStack/ChartStack.tsx @@ -365,7 +365,7 @@ export interface ChartStackProps extends VictoryStackProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -386,10 +386,11 @@ export const ChartStack: React.FunctionComponent = ({ children, containerComponent = , themeColor, + // eslint-disable-next-line @typescript-eslint/no-unused-vars themeVariant, // destructure last - theme = getTheme(themeColor, themeVariant), + theme = getTheme(themeColor), ...rest }: ChartStackProps) => { // Clone so users can override container props diff --git a/packages/react-charts/src/components/ChartTheme/ChartTheme.ts b/packages/react-charts/src/components/ChartTheme/ChartTheme.ts index 5ce979e42dc..0535a7cea79 100644 --- a/packages/react-charts/src/components/ChartTheme/ChartTheme.ts +++ b/packages/react-charts/src/components/ChartTheme/ChartTheme.ts @@ -34,6 +34,11 @@ interface ChartThemeColorInterface { purple: string; } +/** + * Chart theme variant interface + * + * @deprecated Use PatternFly's pf-theme-dark CSS selector + */ interface ChartThemeVariantInterface { dark: string; default: string; @@ -82,6 +87,8 @@ export const ChartThemeColor: ChartThemeColorInterface = { * The variant to be applied to a theme. * * Note: Only the light variant is currently supported + * + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ export const ChartThemeVariant: ChartThemeVariantInterface = { dark: 'dark', diff --git a/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md b/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md index dc6317ebfa6..efe57b9de15 100644 --- a/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md +++ b/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md @@ -15,11 +15,10 @@ import { ChartLine, ChartStack, ChartThemeColor, - ChartThemeVariant, ChartThreshold, ChartTooltip, ChartVoronoiContainer, - getCustomTheme + mergeTheme } from '@patternfly/react-charts'; import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300'; @@ -111,7 +110,7 @@ This demonstrates how to apply theme colors for ordered charts like bar, donut, ```js import React from 'react'; -import { ChartDonut, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts'; +import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts';
= ({ style = {}, themeColor, + // eslint-disable-next-line @typescript-eslint/no-unused-vars themeVariant, // destructure last - theme = getThresholdTheme(themeColor, themeVariant), + theme = getThresholdTheme(themeColor), ...rest }: ChartThresholdProps) => { // Returned style prop takes precedence over default theme @@ -442,13 +443,13 @@ export const ChartThreshold: React.FunctionComponent = ({ if (style && style.data && style.data.strokeDasharray) { return style.data.strokeDasharray; } - return getThresholdTheme(themeColor, themeVariant).line.style.data.strokeDasharray; + return getThresholdTheme(themeColor).line.style.data.strokeDasharray; }; const getStrokeWidth = () => { if (style && style.data && style.data.strokeWidth) { return style.data.strokeWidth; } - return getThresholdTheme(themeColor, themeVariant).line.style.data.strokeWidth; + return getThresholdTheme(themeColor).line.style.data.strokeWidth; }; // Clone style and apply strokeDasharray prop diff --git a/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md b/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md index 5dfd600ec8c..bc1802be9c6 100644 --- a/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md +++ b/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md @@ -19,7 +19,6 @@ import { ChartLegend, ChartThreshold, ChartThemeColor, - ChartThemeVariant, ChartVoronoiContainer, getResizeObserver } from '@patternfly/react-charts'; diff --git a/packages/react-charts/src/components/ChartTooltip/ChartTooltip.tsx b/packages/react-charts/src/components/ChartTooltip/ChartTooltip.tsx index 495ac6a297a..241a4b0c84b 100644 --- a/packages/react-charts/src/components/ChartTooltip/ChartTooltip.tsx +++ b/packages/react-charts/src/components/ChartTooltip/ChartTooltip.tsx @@ -238,7 +238,7 @@ export interface ChartTooltipProps extends VictoryTooltipProps { * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -266,10 +266,11 @@ export const ChartTooltip: React.FunctionComponent = ({ labelComponent = , // Note that Victory provides its own label component here labelTextAnchor, themeColor, + // eslint-disable-next-line @typescript-eslint/no-unused-vars themeVariant, // destructure last - theme = getTheme(themeColor, themeVariant), + theme = getTheme(themeColor), ...rest }: ChartTooltipProps) => { const chartLabelComponent = React.cloneElement(labelComponent, { diff --git a/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md b/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md index d08d54d5f12..4fe53ded2e2 100644 --- a/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md +++ b/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md @@ -25,11 +25,10 @@ import { ChartPoint, ChartStack, ChartThemeColor, - ChartThemeVariant, ChartTooltip, ChartVoronoiContainer, createContainer, - getCustomTheme + mergeTheme } from '@patternfly/react-charts'; import './chart-tooltip.css'; @@ -556,7 +555,7 @@ This demonstrates how to customize tooltip label alignment using theme propertie ```js import React from 'react'; -import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartThemeVariant, ChartVoronoiContainer, getCustomTheme } from '@patternfly/react-charts'; +import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartVoronoiContainer, mergeTheme } from '@patternfly/react-charts'; class TooltipThemeChart extends React.Component { constructor(props) { @@ -574,9 +573,8 @@ class TooltipThemeChart extends React.Component { }; // Applies theme color and variant to base theme - this.myCustomTheme = getCustomTheme( + this.myCustomTheme = mergeTheme( ChartThemeColor.default, - ChartThemeVariant.default, this.themeProps ); } diff --git a/packages/react-charts/src/components/ChartUtils/chart-theme.ts b/packages/react-charts/src/components/ChartUtils/chart-theme.ts index 63aab519259..00ec138cc2d 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-theme.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-theme.ts @@ -1,14 +1,6 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ import cloneDeep from 'lodash/cloneDeep'; import merge from 'lodash/merge'; -import { DarkBlueColorTheme } from '../ChartTheme/themes/dark/blue-color-theme'; -import { DarkCyanColorTheme } from '../ChartTheme/themes/dark/cyan-color-theme'; -import { DarkGoldColorTheme } from '../ChartTheme/themes/dark/gold-color-theme'; -import { DarkGrayColorTheme } from '../ChartTheme/themes/dark/gray-color-theme'; -import { DarkGreenColorTheme } from '../ChartTheme/themes/dark/green-color-theme'; -import { DarkMultiColorOrderedTheme } from '../ChartTheme/themes/dark/multi-color-ordered-theme'; -import { DarkMultiColorUnorderedTheme } from '../ChartTheme/themes/dark/multi-color-unordered-theme'; -import { DarkOrangeColorTheme } from '../ChartTheme/themes/dark/orange-color-theme'; -import { DarkPurpleColorTheme } from '../ChartTheme/themes/dark/purple-color-theme'; import { LightBlueColorTheme } from '../ChartTheme/themes/light/blue-color-theme'; import { LightCyanColorTheme } from '../ChartTheme/themes/light/cyan-color-theme'; import { LightGoldColorTheme } from '../ChartTheme/themes/light/gold-color-theme'; @@ -37,62 +29,65 @@ import { ChartDonutThresholdStaticTheme, ChartThemeDefinition, ChartThemeColor, - ChartThemeVariant, ChartThresholdTheme } from '../ChartTheme/ChartTheme'; -// Apply custom properties to base and color themes +/** + * Apply custom properties to base and color themes + * + * @deprecated Use mergeTheme + */ export const getCustomTheme = ( themeColor: string, themeVariant: string, customTheme: ChartThemeDefinition -): ChartThemeDefinition => merge(getTheme(themeColor, themeVariant), customTheme); +): ChartThemeDefinition => mergeTheme(themeColor, customTheme); + +// Merge custom properties with base and color themes +export const mergeTheme = (themeColor: string, customTheme: ChartThemeDefinition): ChartThemeDefinition => + merge(getTheme(themeColor), customTheme); // Returns axis theme -export const getAxisTheme = (themeColor: string, themeVariant: string): ChartThemeDefinition => - getCustomTheme(themeColor, themeVariant, ChartAxisTheme); +export const getAxisTheme = (themeColor: string): ChartThemeDefinition => mergeTheme(themeColor, ChartAxisTheme); // Returns bullet chart theme -export const getBulletTheme = (themeColor: string, themeVariant: string): ChartThemeDefinition => - getCustomTheme(themeColor, themeVariant, ChartBulletTheme); +export const getBulletTheme = (themeColor: string): ChartThemeDefinition => mergeTheme(themeColor, ChartBulletTheme); // Returns comparative error measure theme for bullet chart -export const getBulletComparativeErrorMeasureTheme = (themeColor: string, themeVariant: string): ChartThemeDefinition => - getCustomTheme(themeColor, themeVariant, ChartBulletComparativeErrorMeasureTheme); +export const getBulletComparativeErrorMeasureTheme = (themeColor: string): ChartThemeDefinition => + mergeTheme(themeColor, ChartBulletComparativeErrorMeasureTheme); // Returns comparative measure theme for bullet chart -export const getBulletComparativeMeasureTheme = (themeColor: string, themeVariant: string): ChartThemeDefinition => - getCustomTheme(themeColor, themeVariant, ChartBulletComparativeMeasureTheme); +export const getBulletComparativeMeasureTheme = (themeColor: string): ChartThemeDefinition => + mergeTheme(themeColor, ChartBulletComparativeMeasureTheme); // Returns comparative warning measure theme for bullet chart -export const getBulletComparativeWarningMeasureTheme = ( - themeColor: string, - themeVariant: string -): ChartThemeDefinition => getCustomTheme(themeColor, themeVariant, ChartBulletComparativeWarningMeasureTheme); +export const getBulletComparativeWarningMeasureTheme = (themeColor: string): ChartThemeDefinition => + mergeTheme(themeColor, ChartBulletComparativeWarningMeasureTheme); // Returns group title theme for bullet chart -export const getBulletGroupTitleTheme = (themeColor: string, themeVariant: string): ChartThemeDefinition => - getCustomTheme(themeColor, themeVariant, ChartBulletGroupTitleTheme); +export const getBulletGroupTitleTheme = (themeColor: string): ChartThemeDefinition => + mergeTheme(themeColor, ChartBulletGroupTitleTheme); // Returns primary dot measure theme for bullet chart -export const getBulletPrimaryDotMeasureTheme = (themeColor: string, themeVariant: string): ChartThemeDefinition => - getCustomTheme(themeColor, themeVariant, ChartBulletPrimaryDotMeasureTheme); +export const getBulletPrimaryDotMeasureTheme = (themeColor: string): ChartThemeDefinition => + mergeTheme(themeColor, ChartBulletPrimaryDotMeasureTheme); // Returns primary negative measure theme for bullet chart -export const getBulletPrimaryNegativeMeasureTheme = (themeColor: string, themeVariant: string): ChartThemeDefinition => - getCustomTheme(themeColor, themeVariant, ChartBulletPrimaryNegativeMeasureTheme); +export const getBulletPrimaryNegativeMeasureTheme = (themeColor: string): ChartThemeDefinition => + mergeTheme(themeColor, ChartBulletPrimaryNegativeMeasureTheme); // Returns primary segmented measure theme for bullet chart -export const getBulletPrimarySegmentedMeasureTheme = (themeColor: string, themeVariant: string): ChartThemeDefinition => - getCustomTheme(themeColor, themeVariant, ChartBulletPrimarySegmentedMeasureTheme); +export const getBulletPrimarySegmentedMeasureTheme = (themeColor: string): ChartThemeDefinition => + mergeTheme(themeColor, ChartBulletPrimarySegmentedMeasureTheme); // Returns qualitative range theme for bullet chart -export const getBulletQualitativeRangeTheme = (themeColor: string, themeVariant: string): ChartThemeDefinition => - getCustomTheme(themeColor, themeVariant, ChartBulletQualitativeRangeTheme); +export const getBulletQualitativeRangeTheme = (themeColor: string): ChartThemeDefinition => + mergeTheme(themeColor, ChartBulletQualitativeRangeTheme); // Returns theme for Chart component -export const getChartTheme = (themeColor: string, themeVariant: string, showAxis: boolean): ChartThemeDefinition => { - const theme = getTheme(themeColor, themeVariant); +export const getChartTheme = (themeColor: string, showAxis: boolean): ChartThemeDefinition => { + const theme = getTheme(themeColor); if (!showAxis) { theme.axis.padding = 0; @@ -108,12 +103,11 @@ export const getChartTheme = (themeColor: string, themeVariant: string, showAxis }; // Returns donut theme -export const getDonutTheme = (themeColor: string, themeVariant: string): ChartThemeDefinition => - getCustomTheme(themeColor, themeVariant, ChartDonutTheme); +export const getDonutTheme = (themeColor: string): ChartThemeDefinition => mergeTheme(themeColor, ChartDonutTheme); // Returns dynamic donut threshold theme -export const getDonutThresholdDynamicTheme = (themeColor: string, themeVariant: string): ChartThemeDefinition => { - const theme = getCustomTheme(themeColor, themeVariant, ChartDonutThresholdDynamicTheme); +export const getDonutThresholdDynamicTheme = (themeColor: string): ChartThemeDefinition => { + const theme = mergeTheme(themeColor, ChartDonutThresholdDynamicTheme); // Merge just the first color of dynamic (blue, green, etc.) with static (grey) for expected colorScale theme.legend.colorScale = [theme.pie.colorScale[0], ...ChartDonutThresholdDynamicTheme.legend.colorScale]; @@ -124,21 +118,17 @@ export const getDonutThresholdDynamicTheme = (themeColor: string, themeVariant: }; // Returns static donut threshold theme -export const getDonutThresholdStaticTheme = ( - themeColor: string, - themeVariant: string, - invert?: boolean -): ChartThemeDefinition => { +export const getDonutThresholdStaticTheme = (themeColor: string, invert?: boolean): ChartThemeDefinition => { const staticTheme = cloneDeep(ChartDonutThresholdStaticTheme); if (invert && staticTheme.pie.colorScale instanceof Array) { staticTheme.pie.colorScale = staticTheme.pie.colorScale.reverse(); } - return getCustomTheme(themeColor, themeVariant, staticTheme); + return mergeTheme(themeColor, staticTheme); }; // Returns donut utilization theme -export const getDonutUtilizationTheme = (themeColor: string, themeVariant: string): ChartThemeDefinition => { - const theme = getCustomTheme(themeColor, themeVariant, ChartDonutUtilizationDynamicTheme); +export const getDonutUtilizationTheme = (themeColor: string): ChartThemeDefinition => { + const theme = mergeTheme(themeColor, ChartDonutUtilizationDynamicTheme); // Merge just the first color of dynamic (blue, green, etc.) with static (grey) for expected colorScale theme.pie.colorScale = [theme.pie.colorScale[0], ...ChartDonutUtilizationStaticTheme.pie.colorScale]; @@ -146,35 +136,8 @@ export const getDonutUtilizationTheme = (themeColor: string, themeVariant: strin return theme; }; -// Returns dark theme colors -export const getDarkThemeColors = (themeColor: string) => { - switch (themeColor) { - case ChartThemeColor.blue: - return DarkBlueColorTheme; - case ChartThemeColor.cyan: - return DarkCyanColorTheme; - case ChartThemeColor.gold: - return DarkGoldColorTheme; - case ChartThemeColor.gray: - return DarkGrayColorTheme; - case ChartThemeColor.green: - return DarkGreenColorTheme; - case ChartThemeColor.multi: - case ChartThemeColor.multiOrdered: - return DarkMultiColorOrderedTheme; - case ChartThemeColor.multiUnordered: - return DarkMultiColorUnorderedTheme; - case ChartThemeColor.orange: - return DarkOrangeColorTheme; - case ChartThemeColor.purple: - return DarkPurpleColorTheme; - default: - return DarkBlueColorTheme; - } -}; - -// Returns light theme colors -export const getLightThemeColors = (themeColor: string) => { +// Returns theme colors +export const getThemeColors = (themeColor: string) => { switch (themeColor) { case ChartThemeColor.blue: return LightBlueColorTheme; @@ -201,21 +164,14 @@ export const getLightThemeColors = (themeColor: string) => { }; // Applies theme color and variant to base theme -export const getTheme = (themeColor: string, themeVariant: string): ChartThemeDefinition => { +export const getTheme = (themeColor: string): ChartThemeDefinition => { // Deep clone const baseTheme = { ...JSON.parse(JSON.stringify(ChartBaseTheme)) }; - switch (themeVariant) { - case ChartThemeVariant.dark: - return merge(baseTheme, getDarkThemeColors(themeColor)); - case ChartThemeVariant.light: - return merge(baseTheme, getLightThemeColors(themeColor)); - default: - return merge(baseTheme, getLightThemeColors(themeColor)); - } + return merge(baseTheme, getThemeColors(themeColor)); }; // Returns threshold theme -export const getThresholdTheme = (themeColor: string, themeVariant: string): ChartThemeDefinition => - getCustomTheme(themeColor, themeVariant, ChartThresholdTheme); +export const getThresholdTheme = (themeColor: string): ChartThemeDefinition => + mergeTheme(themeColor, ChartThresholdTheme); diff --git a/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx b/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx index c23e2ae203b..b0085962d90 100644 --- a/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx +++ b/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx @@ -199,7 +199,7 @@ export interface ChartVoronoiContainerProps extends VictoryVoronoiContainerProps * * Note: Not compatible with theme prop * - * @example themeVariant={ChartThemeVariant.light} + * @deprecated Use PatternFly's pf-theme-dark CSS selector */ themeVariant?: string; /** @@ -234,10 +234,11 @@ export const ChartVoronoiContainer: React.FunctionComponent, // Note that Victory provides its own tooltip component here ...rest }: ChartVoronoiContainerProps) => {