diff --git a/packages/react-charts/src/components/Chart/Chart.tsx b/packages/react-charts/src/components/Chart/Chart.tsx index 8ff784e5cc0..3fe2bb97d8f 100644 --- a/packages/react-charts/src/components/Chart/Chart.tsx +++ b/packages/react-charts/src/components/Chart/Chart.tsx @@ -33,7 +33,6 @@ import { getDefaultData, getDefaultPatternProps } from '../ChartUtils'; -import { PatternScaleInterface } from '../ChartUtils/chart-patterns'; /** * See https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/index.d.ts @@ -198,6 +197,20 @@ export interface ChartProps extends VictoryChartProps { * to a tag on web, and a react-native-svg tag on mobile */ groupComponent?: React.ReactElement; + /** + * The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart or data series. + * SVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected + * color theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar + * to the color theme ordering defined by PatternFly. If you were to use the multi-color theme; for example, colorized + * patterns would be displayed in that exact order. Create custom patterns via the patternScale prop. + * + * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. + * + * @example hasPatterns={ true } + * @example hasPatterns={[ true, true, false ]} + * @beta + */ + hasPatterns?: boolean | boolean[]; /** * Specifies the height the svg viewBox of the chart container. This value should be given as a * number of pixels. @@ -219,11 +232,6 @@ export interface ChartProps extends VictoryChartProps { * @propType number | Function */ innerRadius?: number; - /** - * Generate default pattern defs and populate patternScale - * @beta - */ - isPatternDefs?: boolean; /** * Allows legend items to wrap. A value of true allows the legend to wrap onto the next line * if its container is not wide enough. @@ -274,7 +282,7 @@ export interface ChartProps extends VictoryChartProps { * domain of a chart is static, while the minimum value depends on data or other variable information. If the domain * prop is set in addition to maximumDomain, domain will be used. * - * note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the + * Note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to * the y axis. * @@ -289,7 +297,7 @@ export interface ChartProps extends VictoryChartProps { * domain of a chart is static, while the maximum value depends on data or other variable information. If the domain * prop is set in addition to minimumDomain, domain will be used. * - * note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the + * Note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to * the y axis. * @@ -309,18 +317,16 @@ export interface ChartProps extends VictoryChartProps { */ padding?: PaddingProps; /** - * The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable. - * This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be - * assigned to children by index, unless they are explicitly specified in styles. Patterns will repeat when there are - * more children than patterns in the provided patternScale. Functionality may be overridden via the `style.data.fill` - * property. + * The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be + * given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there + * are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index. * * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. * - * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']} + * @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} * @beta */ - patternScale?: PatternScaleInterface[]; + patternScale?: string[]; /** * Note: This prop should not be set manually. * @@ -384,7 +390,7 @@ export interface ChartProps extends VictoryChartProps { * specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied * without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. * - * note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y + * Note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y * value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable * will corresponds to the y axis. * @@ -456,7 +462,7 @@ export const Chart: React.FunctionComponent = ({ ariaTitle, children, colorScale, - isPatternDefs = false, + hasPatterns, legendAllowWrap = false, legendComponent = , legendData, @@ -483,10 +489,10 @@ export const Chart: React.FunctionComponent = ({ top: getPaddingForSide('top', padding, theme.chart.padding) }; - const { defaultColorScale, defaultPatternScale, patternId } = getDefaultPatternProps({ + const { defaultColorScale, defaultPatternScale, isPatternDefs, patternId } = getDefaultPatternProps({ colorScale, - isPatternDefs, patternScale, + hasPatterns, themeColorScale: theme.chart.colorScale as string[] }); @@ -559,10 +565,10 @@ export const Chart: React.FunctionComponent = ({ height, legendComponent: legend, padding: defaultPadding, - ...(defaultPatternScale && { patternScale: defaultPatternScale }), position: legendPosition, theme, - width + width, + ...(defaultPatternScale && { patternScale: defaultPatternScale }) }); }; diff --git a/packages/react-charts/src/components/ChartArea/ChartArea.tsx b/packages/react-charts/src/components/ChartArea/ChartArea.tsx index 44a5a055769..d05ed1c5648 100644 --- a/packages/react-charts/src/components/ChartArea/ChartArea.tsx +++ b/packages/react-charts/src/components/ChartArea/ChartArea.tsx @@ -222,7 +222,7 @@ export interface ChartAreaProps extends VictoryAreaProps { * domain of a chart is static, while the minimum value depends on data or other variable information. If the domain * prop is set in addition to maximumDomain, domain will be used. * - * note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the + * Note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to * the y axis. * @@ -237,7 +237,7 @@ export interface ChartAreaProps extends VictoryAreaProps { * domain of a chart is static, while the maximum value depends on data or other variable information. If the domain * prop is set in addition to minimumDomain, domain will be used. * - * note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the + * Note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to * the y axis. * @@ -324,7 +324,7 @@ export interface ChartAreaProps extends VictoryAreaProps { * specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied * without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. * - * note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y + * Note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y * value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable * will corresponds to the y axis. * diff --git a/packages/react-charts/src/components/ChartAxis/ChartAxis.tsx b/packages/react-charts/src/components/ChartAxis/ChartAxis.tsx index d39d9a4da13..8efccbe27d2 100644 --- a/packages/react-charts/src/components/ChartAxis/ChartAxis.tsx +++ b/packages/react-charts/src/components/ChartAxis/ChartAxis.tsx @@ -204,7 +204,7 @@ export interface ChartAxisProps extends VictoryAxisProps { * domain of a chart is static, while the minimum value depends on data or other variable information. If the domain * prop is set in addition to maximumDomain, domain will be used. * - * note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the + * Note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to * the y axis. * @@ -219,7 +219,7 @@ export interface ChartAxisProps extends VictoryAxisProps { * domain of a chart is static, while the maximum value depends on data or other variable information. If the domain * prop is set in addition to minimumDomain, domain will be used. * - * note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the + * Note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to * the y axis. * @@ -312,7 +312,7 @@ export interface ChartAxisProps extends VictoryAxisProps { * specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied * without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. * - * note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y + * Note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y * value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable * will corresponds to the y axis. * @@ -335,7 +335,7 @@ export interface ChartAxisProps extends VictoryAxisProps { * determine relative layout for components in Chart. Functional styles may be defined for * grid, tick, and tickLabel style properties, and they will be evaluated with each tick. * - * note: When a component is rendered as a child of another Victory component, or within a custom + * Note: When a component is rendered as a child of another Victory component, or within a custom * element with standalone={false} parent styles will be applied to the enclosing tag. * Many styles that can be applied to a parent will not be expressed when applied to a . * diff --git a/packages/react-charts/src/components/ChartBar/ChartBar.tsx b/packages/react-charts/src/components/ChartBar/ChartBar.tsx index f53d42a63eb..164d04d16b0 100644 --- a/packages/react-charts/src/components/ChartBar/ChartBar.tsx +++ b/packages/react-charts/src/components/ChartBar/ChartBar.tsx @@ -254,7 +254,7 @@ export interface ChartBarProps extends VictoryBarProps { * domain of a chart is static, while the minimum value depends on data or other variable information. If the domain * prop is set in addition to maximumDomain, domain will be used. * - * note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the + * Note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to * the y axis. * @@ -269,7 +269,7 @@ export interface ChartBarProps extends VictoryBarProps { * domain of a chart is static, while the maximum value depends on data or other variable information. If the domain * prop is set in addition to minimumDomain, domain will be used. * - * note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the + * Note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to * the y axis. * @@ -361,7 +361,7 @@ export interface ChartBarProps extends VictoryBarProps { * specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied * without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. * - * note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y + * Note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y * value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable * will corresponds to the y axis. * diff --git a/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx b/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx index b75694b17f1..db600a680d6 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx @@ -245,7 +245,7 @@ export interface ChartBulletProps { * domain of a chart is static, while the minimum value depends on data or other variable information. If the domain * prop is set in addition to maximumDomain, domain will be used. * - * note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the + * Note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to * the y axis. * @@ -262,7 +262,7 @@ export interface ChartBulletProps { * domain of a chart is static, while the maximum value depends on data or other variable information. If the domain * prop is set in addition to minimumDomain, domain will be used. * - * note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the + * Note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to * the y axis. * diff --git a/packages/react-charts/src/components/ChartDonut/ChartDonut.tsx b/packages/react-charts/src/components/ChartDonut/ChartDonut.tsx index f8f6bbb8059..05538b2a712 100644 --- a/packages/react-charts/src/components/ChartDonut/ChartDonut.tsx +++ b/packages/react-charts/src/components/ChartDonut/ChartDonut.tsx @@ -22,7 +22,7 @@ import { ChartContainer } from '../ChartContainer'; import { ChartLabel } from '../ChartLabel'; import { ChartPie, ChartPieLegendPosition, ChartPieProps } from '../ChartPie'; import { ChartCommonStyles, ChartDonutStyles, ChartThemeDefinition } from '../ChartTheme'; -import { getPieLabelX, getPieLabelY, getPaddingForSide, PatternScaleInterface } from '../ChartUtils'; +import { getPieLabelX, getPieLabelY, getPaddingForSide } from '../ChartUtils'; interface ChartDonutSubTitleInterface { dy?: number; @@ -232,6 +232,20 @@ export interface ChartDonutProps extends ChartPieProps { * to a tag on web, and a react-native-svg tag on mobile */ groupComponent?: React.ReactElement; + /** + * The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart or data series. + * SVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected + * color theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar + * to the color theme ordering defined by PatternFly. If you were to use the multi-color theme; for example, colorized + * patterns would be displayed in that exact order. Create custom patterns via the patternScale prop. + * + * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. + * + * @example hasPatterns={ true } + * @example hasPatterns={[ true, true, false ]} + * @beta + */ + hasPatterns?: boolean | boolean[]; /** * Specifies the height the svg viewBox of the chart container. This value should be given as a * number of pixels. @@ -256,11 +270,6 @@ export interface ChartDonutProps extends ChartPieProps { * @propType number | Function */ innerRadius?: NumberOrCallback; - /** - * Generate default pattern defs and populate patternScale - * @beta - */ - isPatternDefs?: boolean; /** * The labelComponent prop takes in an entire label component which will be used * to create a label for the area. The new element created from the passed labelComponent @@ -362,18 +371,16 @@ export interface ChartDonutProps extends ChartPieProps { */ padAngle?: NumberOrCallback; /** - * The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable. - * This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be - * assigned to children by index, unless they are explicitly specified in styles. Patterns will repeat when there are - * more children than patterns in the provided patternScale. Functionality may be overridden via the `style.data.fill` - * property. + * The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be + * given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there + * are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index. * * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. * - * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']} + * @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} * @beta */ - patternScale?: PatternScaleInterface[]; + patternScale?: string[]; /** * The padding props specifies the amount of padding in number of pixels between * the edge of the chart and any rendered child components. This prop can be given diff --git a/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx b/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx index e3598a3718c..27e1ae10bfa 100644 --- a/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx +++ b/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx @@ -21,12 +21,7 @@ import hoistNonReactStatics from 'hoist-non-react-statics'; import { ChartContainer } from '../ChartContainer'; import { ChartDonut, ChartDonutProps } from '../ChartDonut'; import { ChartDonutStyles, ChartThemeDefinition } from '../ChartTheme'; -import { - getDonutThresholdDynamicTheme, - getDonutThresholdStaticTheme, - getPaddingForSide, - PatternScaleInterface -} from '../ChartUtils'; +import { getDonutThresholdDynamicTheme, getDonutThresholdStaticTheme, getPaddingForSide } from '../ChartUtils'; export enum ChartDonutThresholdDonutOrientation { left = 'left', @@ -248,6 +243,20 @@ export interface ChartDonutThresholdProps extends ChartDonutProps { * to a tag on web, and a react-native-svg tag on mobile */ groupComponent?: React.ReactElement; + /** + * The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart or data series. + * SVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected + * color theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar + * to the color theme ordering defined by PatternFly. If you were to use the multi-color theme; for example, colorized + * patterns would be displayed in that exact order. Create custom patterns via the patternScale prop. + * + * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. + * + * @example hasPatterns={ true } + * @example hasPatterns={[ true, true, false ]} + * @beta + */ + hasPatterns?: boolean | boolean[]; /** * Specifies the height the svg viewBox of the chart container. This value should be given as a number of pixels. * @@ -268,11 +277,6 @@ export interface ChartDonutThresholdProps extends ChartDonutProps { * Invert the threshold color scale used to represent warnings, errors, etc. */ invert?: boolean; - /** - * Generate default pattern defs and populate patternScale - * @beta - */ - isPatternDefs?: boolean; /** * The labelRadius prop defines the radius of the arc that will be used for positioning each slice label. * If this prop is not set, the label radius will default to the radius of the pie + label padding. @@ -319,18 +323,16 @@ export interface ChartDonutThresholdProps extends ChartDonutProps { */ padding?: PaddingProps; /** - * The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable. - * This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be - * assigned to children by index, unless they are explicitly specified in styles. Patterns will repeat when there are - * more children than patterns in the provided patternScale. Functionality may be overridden via the `style.data.fill` - * property. + * The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be + * given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there + * are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index. * * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. * - * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']} + * @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} * @beta */ - patternScale?: PatternScaleInterface[]; + patternScale?: string[]; /** * Specifies the radius of the chart. If this property is not provided it is computed * from width, height, and padding props @@ -468,11 +470,10 @@ export const ChartDonutThreshold: React.FunctionComponent, data = [], + hasPatterns, invert = false, - isPatternDefs = false, labels = [], // Don't show any tooltip labels by default, let consumer override if needed padding, - patternScale, radius, standalone = true, subTitlePosition = ChartDonutStyles.label.subTitlePosition as ChartDonutThresholdSubTitlePosition, @@ -539,16 +540,16 @@ export const ChartDonutThreshold: React.FunctionComponent tag on web, and a react-native-svg tag on mobile */ groupComponent?: React.ReactElement; + /** + * The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart or data series. + * SVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected + * color theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar + * to the color theme ordering defined by PatternFly. If you were to use the multi-color theme; for example, colorized + * patterns would be displayed in that exact order. Create custom patterns via the patternScale prop. + * + * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. + * + * @example hasPatterns={ true } + * @example hasPatterns={[ true, true, false ]} + * @beta + */ + hasPatterns?: boolean | boolean[]; /** * Specifies the height the svg viewBox of the chart container. This value should be given as a * number of pixels. @@ -267,11 +281,6 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps { * below 60% and an error below 20% */ invert?: boolean; - /** - * Generate default pattern defs and populate patternScale - * @beta - */ - isPatternDefs?: boolean; /** * This will show the static, unused portion of the donut utilization chart. * @@ -392,18 +401,16 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps { */ padding?: PaddingProps; /** - * The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable. - * This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be - * assigned to children by index, unless they are explicitly specified in styles. Patterns will repeat when there are - * more children than patterns in the provided patternScale. Functionality may be overridden via the `style.data.fill` - * property. + * The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be + * given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there + * are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index. * * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. * - * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']} + * @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} * @beta */ - patternScale?: PatternScaleInterface[]; + patternScale?: string[]; /** * Moves the given pattern index to top of scale, used to sync patterns with ChartDonutThreshold * @@ -608,14 +615,11 @@ export const ChartDonutUtilization: React.FunctionComponent tag on web, and a react-native-svg tag on mobile */ groupComponent?: React.ReactElement; + /** + * The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart or data series. + * SVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected + * color theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar + * to the color theme ordering defined by PatternFly. If you were to use the multi-color theme; for example, colorized + * patterns would be displayed in that exact order. Create custom patterns via the patternScale prop. + * + * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. + * + * @example hasPatterns={ true } + * @example hasPatterns={[ true, true, false ]} + * @beta + */ + hasPatterns?: boolean | boolean[]; /** * The height props specifies the height the svg viewBox of the chart container. * This value should be given as a number of pixels @@ -212,11 +225,6 @@ export interface ChartGroupProps extends VictoryGroupProps { * and the dependent variable will be plotted on the x axis. */ horizontal?: boolean; - /** - * Generate default pattern defs and populate patternScale - * @beta - */ - isPatternDefs?: boolean; /** * The labelComponent prop takes in an entire label component which will be used * to create a label for the area. The new element created from the passed labelComponent @@ -244,7 +252,7 @@ export interface ChartGroupProps extends VictoryGroupProps { * domain of a chart is static, while the minimum value depends on data or other variable information. If the domain * prop is set in addition to maximumDomain, domain will be used. * - * note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the + * Note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to * the y axis. * @@ -259,7 +267,7 @@ export interface ChartGroupProps extends VictoryGroupProps { * domain of a chart is static, while the maximum value depends on data or other variable information. If the domain * prop is set in addition to minimumDomain, domain will be used. * - * note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the + * Note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to * the y axis. * @@ -298,18 +306,16 @@ export interface ChartGroupProps extends VictoryGroupProps { */ padding?: PaddingProps; /** - * The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable. - * This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be - * assigned to children by index, unless they are explicitly specified in styles. Patterns will repeat when there are - * more children than patterns in the provided patternScale. Functionality may be overridden via the `style.data.fill` - * property. + * The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be + * given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there + * are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index. * * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. * - * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']} + * @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} * @beta */ - patternScale?: PatternScaleInterface[]; + patternScale?: string[]; /** * Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart. */ @@ -366,7 +372,7 @@ export interface ChartGroupProps extends VictoryGroupProps { * specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied * without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. * - * note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y + * Note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y * value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable * will corresponds to the y axis. * @@ -477,7 +483,7 @@ export const ChartGroup: React.FunctionComponent = ({ children, colorScale, containerComponent = , - isPatternDefs = false, + hasPatterns, patternScale, themeColor, // eslint-disable-next-line @typescript-eslint/no-unused-vars @@ -496,9 +502,9 @@ export const ChartGroup: React.FunctionComponent = ({ className: getClassName({ className: containerComponent.props.className }) // Override VictoryContainer class name }); - const { defaultColorScale, defaultPatternScale, patternId } = getDefaultPatternProps({ + const { defaultColorScale, defaultPatternScale, isPatternDefs, patternId } = getDefaultPatternProps({ colorScale, - isPatternDefs, + hasPatterns, patternScale, themeColorScale: theme.group.colorScale as string[] }); diff --git a/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx b/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx index 7a235c7276e..b096faba8e5 100644 --- a/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx +++ b/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx @@ -21,7 +21,7 @@ import { ChartContainer } from '../ChartContainer'; import { ChartLabel } from '../ChartLabel'; import { ChartPoint } from '../ChartPoint'; import { ChartThemeDefinition } from '../ChartTheme'; -import { getTheme, PatternScaleInterface } from '../ChartUtils'; +import { getTheme } from '../ChartUtils'; export enum ChartLegendOrientation { horizontal = 'horizontal', @@ -154,15 +154,6 @@ export interface ChartLegendProps extends VictoryLegendProps { * are the space between rows. */ gutter?: number | { left: number; right: number }; - /** - * Specifies the height the svg viewBox of the chart container. This value should be given as a - * number of pixels. - * - * Because Victory renders responsive containers, the width and height props do not determine the width and - * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of - * pixels will depend on the size of the container the chart is rendered into. - */ - height?: number; /** * The itemsPerRow prop determines how many items to render in each row * of a horizontal legend, or in each column of a vertical legend. This @@ -202,18 +193,16 @@ export interface ChartLegendProps extends VictoryLegendProps { */ padding?: PaddingProps; /** - * The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable. - * This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be - * assigned to children by index, unless they are explicitly specified in styles. Patterns will repeat when there are - * more children than patterns in the provided patternScale. Functionality may be overridden via the `data.symbol.fill` - * property. + * The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be + * given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there + * are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index. * * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. * - * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']} + * @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} * @beta */ - patternScale?: PatternScaleInterface[]; + patternScale?: string[]; /** * The responsive prop specifies whether the rendered container should be a responsive container with a viewBox * attribute, or a static container with absolute width and height. @@ -361,9 +350,9 @@ export const ChartLegend: React.FunctionComponent = ({ theme && theme.legend && theme.legend.colorScale ? theme.legend.colorScale[index % theme.legend.colorScale.length] : undefined; - const pattern = patternScale[index % patternScale.length]; const color = colorScale ? colorScale[index % colorScale.length] : themeColor; // Sync color scale - return pattern && pattern.isVisible !== false ? pattern.value : color; + const pattern = patternScale[index % patternScale.length]; + return pattern ? pattern : color; }, ..._style.data }; diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx index 0ef2af6fcc3..61a255bae59 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx +++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx @@ -18,8 +18,7 @@ import { getLegendTooltipSize, getLegendTooltipVisibleData, getLegendTooltipVisibleText, - getTheme, - PatternScaleInterface + getTheme } from '../ChartUtils'; /** @@ -229,18 +228,16 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps { */ orientation?: OrientationOrCallback; /** - * The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable. - * This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be - * assigned to children by index, unless they are explicitly specified in styles. Patterns will repeat when there are - * more children than patterns in the provided patternScale. Functionality may be overridden via the `style.data.fill` - * property. + * The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be + * given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there + * are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index. * * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. * - * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']} + * @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} * @beta */ - patternScale?: PatternScaleInterface[]; + patternScale?: string[]; /** * The pointerLength prop determines the length of the triangular pointer extending from the flyout. This prop may be * given as a positive number or a function of datum. diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx index 9a575fec9d2..74e3cdb4906 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx +++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx @@ -11,8 +11,7 @@ import { getLegendTooltipSize, getLegendTooltipVisibleData, getLegendTooltipVisibleText, - getTheme, - PatternScaleInterface + getTheme } from '../ChartUtils'; /** @@ -119,18 +118,16 @@ export interface ChartLegendTooltipContentProps { }; }[]; /** - * The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable. - * This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be - * assigned to children by index, unless they are explicitly specified in styles. Patterns will repeat when there are - * more children than patterns in the provided patternScale. Functionality may be overridden via the `style.data.fill` - * property. + * The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be + * given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there + * are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index. * * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. * - * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']} + * @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} * @beta */ - patternScale?: PatternScaleInterface[]; + patternScale?: string[]; /** * The text prop defines the text ChartTooltip will render. The text prop may be given as a string, number, or * function of datum. When ChartLabel is used as the labelComponent, strings may include newline characters, which diff --git a/packages/react-charts/src/components/ChartLine/ChartLine.tsx b/packages/react-charts/src/components/ChartLine/ChartLine.tsx index 4114db58f96..66db628213b 100644 --- a/packages/react-charts/src/components/ChartLine/ChartLine.tsx +++ b/packages/react-charts/src/components/ChartLine/ChartLine.tsx @@ -221,7 +221,7 @@ export interface ChartLineProps extends VictoryLineProps { * domain of a chart is static, while the minimum value depends on data or other variable information. If the domain * prop is set in addition to maximumDomain, domain will be used. * - * note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the + * Note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to * the y axis. * @@ -236,7 +236,7 @@ export interface ChartLineProps extends VictoryLineProps { * domain of a chart is static, while the maximum value depends on data or other variable information. If the domain * prop is set in addition to minimumDomain, domain will be used. * - * note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the + * Note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to * the y axis. * @@ -328,7 +328,7 @@ export interface ChartLineProps extends VictoryLineProps { * specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied * without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. * - * note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y + * Note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y * value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable * will corresponds to the y axis. * diff --git a/packages/react-charts/src/components/ChartPie/ChartPie.tsx b/packages/react-charts/src/components/ChartPie/ChartPie.tsx index 9ad87bcdbf4..4858e1e982c 100644 --- a/packages/react-charts/src/components/ChartPie/ChartPie.tsx +++ b/packages/react-charts/src/components/ChartPie/ChartPie.tsx @@ -27,14 +27,7 @@ import { ChartContainer } from '../ChartContainer'; import { ChartLegend, ChartLegendOrientation } from '../ChartLegend'; import { ChartCommonStyles, ChartThemeDefinition } from '../ChartTheme'; import { ChartTooltip } from '../ChartTooltip'; -import { - getComputedLegend, - getDefaultPatternProps, - getPaddingForSide, - getPatternDefs, - getTheme, - PatternScaleInterface -} from '../ChartUtils'; +import { getComputedLegend, getDefaultPatternProps, getPaddingForSide, getPatternDefs, getTheme } from '../ChartUtils'; export enum ChartPieLabelPosition { centroid = 'centroid', @@ -222,6 +215,20 @@ export interface ChartPieProps extends VictoryPieProps { * to a tag on web, and a react-native-svg tag on mobile */ groupComponent?: React.ReactElement; + /** + * The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart or data series. + * SVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected + * color theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar + * to the color theme ordering defined by PatternFly. If you were to use the multi-color theme; for example, colorized + * patterns would be displayed in that exact order. Create custom patterns via the patternScale prop. + * + * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. + * + * @example hasPatterns={ true } + * @example hasPatterns={[ true, true, false ]} + * @beta + */ + hasPatterns?: boolean | boolean[]; /** * Specifies the height the svg viewBox of the chart container. This value should be given as a * number of pixels. @@ -247,11 +254,6 @@ export interface ChartPieProps extends VictoryPieProps { * @propType number | Function */ innerRadius?: NumberOrCallback; - /** - * Generate default pattern defs and populate patternScale - * @beta - */ - isPatternDefs?: boolean; /** * The labelComponent prop takes in an entire label component which will be used * to create a label for the area. The new element created from the passed labelComponent @@ -363,18 +365,16 @@ export interface ChartPieProps extends VictoryPieProps { */ padding?: PaddingProps; /** - * The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable. - * This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be - * assigned to children by index, unless they are explicitly specified in styles. Patterns will repeat when there are - * more children than patterns in the provided patternScale. Functionality may be overridden via the `style.data.fill` - * property. + * The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be + * given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there + * are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index. * * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. * - * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']} + * @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} * @beta */ - patternScale?: PatternScaleInterface[]; + patternScale?: string[]; /** * Moves the given pattern index to top of scale, used to sync patterns with ChartDonutThreshold * @@ -503,13 +503,14 @@ export const ChartPie: React.FunctionComponent = ({ colorScale, constrainToVisibleArea = false, containerComponent = , - isPatternDefs = false, + hasPatterns, legendAllowWrap = false, legendComponent = , legendData, legendPosition = ChartCommonStyles.legend.position as ChartPieLegendPosition, patternScale, patternUnshiftIndex, + padding, radius, standalone = true, @@ -537,9 +538,9 @@ export const ChartPie: React.FunctionComponent = ({ top: getPaddingForSide('top', padding, theme.pie.padding) }; - const { defaultColorScale, defaultPatternScale, patternId } = getDefaultPatternProps({ + const { defaultColorScale, defaultPatternScale, isPatternDefs, patternId } = getDefaultPatternProps({ colorScale, - isPatternDefs, + hasPatterns, patternScale, themeColorScale: theme.pie.colorScale as string[] }); @@ -564,9 +565,7 @@ export const ChartPie: React.FunctionComponent = ({ _style.data = { fill: ({ slice }: any) => { const pattern = defaultPatternScale[slice.index % defaultPatternScale.length]; - return pattern && pattern.isVisible !== false - ? pattern.value - : defaultColorScale[slice.index % defaultColorScale.length].value; + return pattern ? pattern : defaultColorScale[slice.index % defaultColorScale.length]; }, ..._style.data }; @@ -609,10 +608,10 @@ export const ChartPie: React.FunctionComponent = ({ height, legendComponent: legend, padding: defaultPadding, - ...(defaultPatternScale && { patternScale: defaultPatternScale }), position: legendPosition, theme, - width + width, + ...(defaultPatternScale && { patternScale: defaultPatternScale }) }); }; diff --git a/packages/react-charts/src/components/ChartScatter/ChartScatter.tsx b/packages/react-charts/src/components/ChartScatter/ChartScatter.tsx index 9a29a7239d8..7b767cf9a37 100644 --- a/packages/react-charts/src/components/ChartScatter/ChartScatter.tsx +++ b/packages/react-charts/src/components/ChartScatter/ChartScatter.tsx @@ -221,7 +221,7 @@ export interface ChartScatterProps extends VictoryScatterProps { * domain of a chart is static, while the minimum value depends on data or other variable information. If the domain * prop is set in addition to maximumDomain, domain will be used. * - * note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the + * Note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to * the y axis. * @@ -240,7 +240,7 @@ export interface ChartScatterProps extends VictoryScatterProps { * domain of a chart is static, while the maximum value depends on data or other variable information. If the domain * prop is set in addition to minimumDomain, domain will be used. * - * note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the + * Note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to * the y axis. * @@ -332,7 +332,7 @@ export interface ChartScatterProps extends VictoryScatterProps { * specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied * without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. * - * note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y + * Note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y * value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable * will corresponds to the y axis. * diff --git a/packages/react-charts/src/components/ChartStack/ChartStack.tsx b/packages/react-charts/src/components/ChartStack/ChartStack.tsx index 734da23166a..278e68817b2 100644 --- a/packages/react-charts/src/components/ChartStack/ChartStack.tsx +++ b/packages/react-charts/src/components/ChartStack/ChartStack.tsx @@ -19,13 +19,7 @@ import { import { VictoryStack, VictoryStackProps, VictoryStackTTargetType } from 'victory-stack'; import { ChartContainer } from '../ChartContainer'; import { ChartThemeDefinition } from '../ChartTheme'; -import { - getClassName, - getDefaultPatternProps, - getTheme, - PatternScaleInterface, - renderChildrenWithPatterns -} from '../ChartUtils'; +import { getClassName, getDefaultPatternProps, getTheme, renderChildrenWithPatterns } from '../ChartUtils'; /** * See https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/index.d.ts @@ -187,6 +181,20 @@ export interface ChartStackProps extends VictoryStackProps { * to a tag on web, and a react-native-svg tag on mobile */ groupComponent?: React.ReactElement; + /** + * The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart or data series. + * SVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected + * color theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar + * to the color theme ordering defined by PatternFly. If you were to use the multi-color theme; for example, colorized + * patterns would be displayed in that exact order. Create custom patterns via the patternScale prop. + * + * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. + * + * @example hasPatterns={ true } + * @example hasPatterns={[ true, true, false ]} + * @beta + */ + hasPatterns?: boolean | boolean[]; /** * The height props specifies the height the svg viewBox of the chart container. * This value should be given as a number of pixels @@ -198,11 +206,6 @@ export interface ChartStackProps extends VictoryStackProps { * or horizontal if the prop is set to true. */ horizontal?: boolean; - /** - * Generate default pattern defs and populate patternScale - * @beta - */ - isPatternDefs?: boolean; /** * The labelComponent prop takes in an entire label component which will be used * to create a label for the area. The new element created from the passed labelComponent @@ -230,7 +233,7 @@ export interface ChartStackProps extends VictoryStackProps { * domain of a chart is static, while the minimum value depends on data or other variable information. If the domain * prop is set in addition to maximumDomain, domain will be used. * - * note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the + * Note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to * the y axis. * @@ -245,7 +248,7 @@ export interface ChartStackProps extends VictoryStackProps { * domain of a chart is static, while the maximum value depends on data or other variable information. If the domain * prop is set in addition to minimumDomain, domain will be used. * - * note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the + * Note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to * the y axis. * @@ -277,18 +280,16 @@ export interface ChartStackProps extends VictoryStackProps { */ padding?: PaddingProps; /** - * The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable. - * This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be - * assigned to children by index, unless they are explicitly specified in styles. Patterns will repeat when there are - * more children than patterns in the provided patternScale. Functionality may be overridden via the `style.data.fill` - * property. + * The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be + * given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there + * are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index. * * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. * - * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']} + * @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} * @beta */ - patternScale?: PatternScaleInterface[]; + patternScale?: string[]; /** * Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart. * @@ -345,7 +346,7 @@ export interface ChartStackProps extends VictoryStackProps { * specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied * without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. * - * note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y + * Note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y * value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable * will corresponds to the y axis. * @@ -412,7 +413,7 @@ export const ChartStack: React.FunctionComponent = ({ children, colorScale, containerComponent = , - isPatternDefs = false, + hasPatterns, patternScale, themeColor, // eslint-disable-next-line @typescript-eslint/no-unused-vars @@ -433,7 +434,7 @@ export const ChartStack: React.FunctionComponent = ({ const { defaultPatternScale } = getDefaultPatternProps({ colorScale, - isPatternDefs, + hasPatterns, patternScale, themeColorScale: theme.stack.colorScale as string[] }); diff --git a/packages/react-charts/src/components/ChartThreshold/ChartThreshold.tsx b/packages/react-charts/src/components/ChartThreshold/ChartThreshold.tsx index 77bb289acd0..dfc776ab281 100644 --- a/packages/react-charts/src/components/ChartThreshold/ChartThreshold.tsx +++ b/packages/react-charts/src/components/ChartThreshold/ChartThreshold.tsx @@ -217,7 +217,7 @@ export interface ChartThresholdProps extends VictoryLineProps { * domain of a chart is static, while the minimum value depends on data or other variable information. If the domain * prop is set in addition to maximumDomain, domain will be used. * - * note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the + * Note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to * the y axis. * @@ -232,7 +232,7 @@ export interface ChartThresholdProps extends VictoryLineProps { * domain of a chart is static, while the maximum value depends on data or other variable information. If the domain * prop is set in addition to minimumDomain, domain will be used. * - * note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the + * Note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to * the y axis. * @@ -324,7 +324,7 @@ export interface ChartThresholdProps extends VictoryLineProps { * specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied * without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. * - * note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y + * Note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y * value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable * will corresponds to the y axis. * diff --git a/packages/react-charts/src/components/ChartUtils/chart-legend.ts b/packages/react-charts/src/components/ChartUtils/chart-legend.ts index 56abe0fd803..c4ebd392ea8 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-legend.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-legend.ts @@ -5,7 +5,6 @@ import { ChartLegendOrientation, ChartLegendPosition, ChartLegendProps } from '. import { ChartCommonStyles, ChartThemeDefinition } from '../ChartTheme'; import { getPieOrigin } from './chart-origin'; import * as React from 'react'; -import { PatternScaleInterface } from './chart-patterns'; interface ChartLegendInterface { allowWrap?: boolean; // Allow legend items to wrap to the next line @@ -17,7 +16,7 @@ interface ChartLegendInterface { legendComponent: React.ReactElement; // The base legend component to render orientation?: 'horizontal' | 'vertical'; // Orientation of legend padding: PaddingProps; // Chart padding - patternScale?: PatternScaleInterface[]; // Legend symbol patterns + patternScale?: string[]; // Legend symbol patterns position: 'bottom' | 'bottom-left' | 'right'; // The legend position theme: ChartThemeDefinition; // The theme that will be applied to the chart width: number; // Overall width of SVG diff --git a/packages/react-charts/src/components/ChartUtils/chart-patterns.tsx b/packages/react-charts/src/components/ChartUtils/chart-patterns.tsx index 722a42d1f25..ebbc14337d2 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-patterns.tsx +++ b/packages/react-charts/src/components/ChartUtils/chart-patterns.tsx @@ -1,21 +1,15 @@ import * as React from 'react'; -import merge from 'lodash/merge'; import uniqueId from 'lodash/uniqueId'; -// @beta -export interface PatternScaleInterface { - value?: string; // This value is output as "fill" for component styles and as "stroke" for pattern defs - isVisible?: boolean; -} - // @beta interface PatternPropsInterface { children?: any; colorScale?: any; + hasPatterns?: boolean | boolean[]; isPatternDefs?: boolean; offset?: number; patternId?: string; - patternScale?: PatternScaleInterface[]; + patternScale?: string[]; patternUnshiftIndex?: number; themeColorScale?: string[]; } @@ -256,8 +250,8 @@ export const getPatternDefs = ({ const defs = ( - {colorScale.map((color: PatternScaleInterface, index: number) => { - const { d, fill, stroke = color.value, strokeWidth, ...rest } = defaultPatterns[ + {colorScale.map((color: string, index: number) => { + const { d, fill, stroke = color, strokeWidth, ...rest } = defaultPatterns[ (index + offset) % defaultPatterns.length ]; const id = getPatternDefsId(patternId, index); @@ -285,14 +279,10 @@ export const getPatternScale = (colorScale: string[], patternId: string) => * @private */ export const getDefaultColorScale = (colorScale: string[], themeColorScale: string[]) => { - const result: PatternScaleInterface[] = []; + const result: string[] = []; const colors = colorScale ? colorScale : themeColorScale; - colors.forEach(val => - result.push({ - value: val - }) - ); + colors.forEach(val => result.push(val)); return result; }; @@ -300,14 +290,14 @@ export const getDefaultColorScale = (colorScale: string[], themeColorScale: stri * Merge pattern IDs with `data.fill` property, used by interactive pie chart legend * @private */ -export const getDefaultData = (data: any, patternScale: PatternScaleInterface[]) => { +export const getDefaultData = (data: any, patternScale: string[]) => { if (!patternScale) { return data; } return data.map((datum: any, index: number) => { const pattern = patternScale[index % patternScale.length]; return { - ...(pattern && pattern.isVisible !== false && { _fill: pattern.value }), + ...(pattern && { _fill: pattern }), ...datum }; }); @@ -317,27 +307,12 @@ export const getDefaultData = (data: any, patternScale: PatternScaleInterface[]) * Helper function to return default pattern scale * @private */ -export const getDefaultPatternScale = ({ - colorScale, - isPatternDefs, - patternId, - patternScale -}: PatternPropsInterface) => { - const result: PatternScaleInterface[] = []; - - if (isPatternDefs) { - const defaultPatterns = getPatternScale(colorScale, patternId); - defaultPatterns.forEach(p => - result.push({ - value: p, - isVisible: true - }) - ); - } +export const getDefaultPatternScale = ({ colorScale, patternId, patternScale }: PatternPropsInterface) => { if (patternScale) { - merge(result, patternScale); + return patternScale; } - return result.length > 0 ? result : undefined; + const defaultPatternScale = getPatternScale(colorScale, patternId); + return defaultPatternScale && defaultPatternScale.length > 0 ? defaultPatternScale : undefined; }; /** @@ -346,24 +321,36 @@ export const getDefaultPatternScale = ({ */ export const getDefaultPatternProps = ({ colorScale, - isPatternDefs, + hasPatterns, patternScale, themeColorScale }: PatternPropsInterface) => { const defaultColorScale = getDefaultColorScale(colorScale, themeColorScale); let defaultPatternScale = patternScale; + let isPatternDefs = !patternScale && hasPatterns !== undefined; let patternId; if (isPatternDefs) { patternId = React.useMemo(() => getPatternId(), []); defaultPatternScale = getDefaultPatternScale({ colorScale: defaultColorScale, - isPatternDefs, patternId, patternScale }); } - return { defaultColorScale, defaultPatternScale, patternId }; + + // Initialize pattern visibility + if (Array.isArray(hasPatterns)) { + for (let i = 0; i < defaultPatternScale.length; i++) { + if (!(i < hasPatterns.length && hasPatterns[i])) { + defaultPatternScale[i] = null; + } + } + } else if (hasPatterns === false) { + defaultPatternScale = undefined; + isPatternDefs = false; + } + return { defaultColorScale, defaultPatternScale, isPatternDefs, patternId }; }; /** @@ -380,7 +367,7 @@ export const renderChildrenWithPatterns = ({ children, patternScale }: PatternPr if (patternScale) { const pattern = patternScale[index % patternScale.length]; style.data = { - ...(pattern && pattern.isVisible !== false && { fill: pattern.value }), + ...(pattern && { fill: pattern }), ...style.data }; } diff --git a/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts b/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts index 3a5b35d5f4a..7dcab93a17a 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts @@ -4,7 +4,6 @@ import { Helpers, OrientationTypes, StringOrNumberOrCallback } from 'victory-cor import { ChartLegendProps } from '../ChartLegend'; import { ChartLegendTooltipStyles, ChartThemeDefinition } from '../ChartTheme'; import { getLegendDimensions } from './chart-legend'; -import { PatternScaleInterface } from './chart-patterns'; interface ChartCursorTooltipCenterOffsetInterface { offsetCursorDimensionX?: boolean; // Adjust the tooltip to appear to the right of the vertical cursor @@ -29,7 +28,7 @@ interface ChartLegendTooltipVisibleDataInterface { activePoints?: any[]; colorScale?: string[]; legendData: any; - patternScale?: PatternScaleInterface[]; // Legend symbol patterns + patternScale?: string[]; // Legend symbol patterns text?: StringOrNumberOrCallback | string[] | number[]; textAsLegendData?: boolean; theme: ChartThemeDefinition; @@ -239,12 +238,12 @@ export const getLegendTooltipVisibleData = ({ theme && theme.legend && theme.legend.colorScale ? theme.legend.colorScale[i % theme.legend.colorScale.length] : undefined; - const pattern = patternScale ? patternScale[i % patternScale.length] : undefined; const color = colorScale ? colorScale[i % colorScale.length] : themeColor; // Sync color scale + const pattern = patternScale ? patternScale[i % patternScale.length] : undefined; result.push({ name: textAsLegendData ? _text[index] : data.name, symbol: { - fill: pattern && pattern.isVisible !== false ? pattern.value : color, + fill: pattern ? pattern : color, ...data.symbol } }); diff --git a/packages/react-charts/src/components/Patterns/examples/patterms.md b/packages/react-charts/src/components/Patterns/examples/patterms.md index b9baab66a38..e1f0499806e 100644 --- a/packages/react-charts/src/components/Patterns/examples/patterms.md +++ b/packages/react-charts/src/components/Patterns/examples/patterms.md @@ -15,7 +15,7 @@ propComponents: [ 'ChartPie', 'ChartScatter', 'ChartStack', - 'ChartVoronoiContainer', + 'ChartVoronoiContainer' ] hideDarkMode: true beta: true @@ -67,6 +67,7 @@ import { ChartPie } from '@patternfly/react-charts'; ariaTitle="Pie chart example" constrainToVisibleArea={true} data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]} + hasPatterns={true} height={230} labels={({ datum }) => `${datum.x}: ${datum.y}`} legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]} @@ -78,7 +79,6 @@ import { ChartPie } from '@patternfly/react-charts'; right: 140, // Adjusted to accommodate legend top: 20 }} - isPatternDefs width={350} /> @@ -97,6 +97,7 @@ import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor, ChartVoronoiCo domainPadding={{ x: [30, 25] }} legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]} legendPosition="bottom" + hasPatterns={true} height={275} padding={{ bottom: 75, // Adjusted to accommodate legend @@ -105,7 +106,6 @@ import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor, ChartVoronoiCo top: 50 }} themeColor={ChartThemeColor.purple} - isPatternDefs width={450} > @@ -134,6 +134,7 @@ import { Chart, ChartAxis, ChartBar, ChartStack, ChartThemeColor, ChartVoronoiCo legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]} legendOrientation="vertical" legendPosition="right" + hasPatterns={true} height={250} padding={{ bottom: 50, @@ -142,7 +143,6 @@ import { Chart, ChartAxis, ChartBar, ChartStack, ChartThemeColor, ChartVoronoiCo top: 50 }} themeColor={ChartThemeColor.green} - isPatternDefs width={600} > @@ -168,6 +168,7 @@ import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts'; ariaTitle="Donut chart example" constrainToVisibleArea={true} data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]} + hasPatterns={true} labels={({ datum }) => `${datum.x}: ${datum.y}%`} legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]} legendOrientation="vertical" @@ -181,7 +182,6 @@ import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts'; subTitle="Pets" title="100" themeColor={ChartThemeColor.gold} - isPatternDefs width={350} /> @@ -201,6 +201,7 @@ import { ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts ariaTitle="Donut utilization chart example" constrainToVisibleArea={true} data={{ x: 'Storage capacity', y: 45 }} + hasPatterns={true} height={275} labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null} legendData={[{ name: `Storage capacity: 45%` }, { name: 'Unused' }]} @@ -211,15 +212,10 @@ import { ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts right: 20, top: 20 }} - patternScale={[ - { isVisible: true }, - { isVisible: false } - ]} subTitle="of 100 GBps" title="45%" themeColor={ChartThemeColor.green} thresholds={[{ value: 60 }, { value: 90 }]} - isPatternDefs width={300} /> @@ -239,6 +235,7 @@ import { ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor } from '@pa ariaTitle="Donut utilization chart with static threshold example" constrainToVisibleArea={true} data={[{ x: 'Warning at 60%', y: 60 }, { x: 'Danger at 90%', y: 90 }]} + hasPatterns={true} height={275} labels={({ datum }) => datum.x ? datum.x : null} padding={{ @@ -248,7 +245,6 @@ import { ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor } from '@pa top: 20 }} width={675} - isPatternDefs > } legendPosition="bottom" @@ -365,7 +362,6 @@ class InteractivePieLegendChart extends React.Component { }} showAxis={false} themeColor={ChartThemeColor.multiUnordered} - isPatternDefs width={500} > } legendPosition="bottom-left" @@ -555,7 +552,6 @@ class InteractiveLegendChart extends React.Component { }} maxDomain={{y: 9}} themeColor={ChartThemeColor.multiUnordered} - isPatternDefs width={width} > @@ -592,73 +588,10 @@ class InteractiveLegendChart extends React.Component { } ``` -### All patterns -```js -import React from 'react'; -import { ChartPie, ChartThemeColor } from '@patternfly/react-charts'; - -
- `${datum.x}: ${datum.y}`} - legendData={[ - { name: 'Cats: 6' }, - { name: 'Dogs: 6' }, - { name: 'Birds: 6' }, - { name: 'Fish: 6' }, - { name: 'Rabbits: 6' }, - { name: 'Squirels: 6' }, - { name: 'Chipmunks: 6' }, - { name: 'Bats: 6' }, - { name: 'Ducks: 6' }, - { name: 'Geese: 6' }, - { name: 'Bobcat: 6' }, - { name: 'Foxes: 6' }, - { name: 'Coyotes: 6' }, - { name: 'Deer: 6' }, - { name: 'Bears: 6' }, - ]} - legendAllowWrap - legendPosition="bottom" - padding={{ - bottom: 110, - left: 20, - right: 20, - top: 20 - }} - themeColor={ChartThemeColor.multiOrdered} - isPatternDefs - width={600} - /> -
-``` - -### Custom pattern IDs +### Custom pattern visibility This demonstrates how to omit patterns from pie chart segments. -The approach uses `isPatternDefs` to generate default pattern defs using the given `patternId` prefix. The `patternScale` property is then used to apply indexed pattern IDs to each pie chart segment. If you want to omit a particular pattern from a pie segment, simply provide `null` instead. - ```js import React from 'react'; import { ChartPie, ChartThemeColor } from '@patternfly/react-charts'; @@ -669,6 +602,7 @@ import { ChartPie, ChartThemeColor } from '@patternfly/react-charts'; ariaTitle="Pie chart example" constrainToVisibleArea={true} data={[{ x: 'Cats', y: 15 }, { x: 'Dogs', y: 15 }, { x: 'Birds', y: 15 }, { x: 'Fish', y: 25 }, { x: 'Rabbits', y: 30 }]} + hasPatterns={[ true, true, false, false, false ]} height={230} labels={({ datum }) => `${datum.x}: ${datum.y}`} legendData={[{ name: 'Cats: 15' }, { name: 'Dogs: 15' }, { name: 'Birds: 15' }, { name: 'Fish: 25' }, { name: 'Rabbits: 30' }]} @@ -680,15 +614,7 @@ import { ChartPie, ChartThemeColor } from '@patternfly/react-charts'; right: 140, // Adjusted to accommodate legend top: 20 }} - patternScale={[ - { isVisible: true }, - { isVisible: true }, - { isVisible: false }, - { isVisible: false }, - { isVisible: false } - ]} themeColor={ChartThemeColor.multiUnordered} - isPatternDefs width={350} /> @@ -696,9 +622,7 @@ import { ChartPie, ChartThemeColor } from '@patternfly/react-charts'; ### Custom color scale -This demonstrates how to apply a custom color scale. - -The approach uses `isPatternDefs` to generate default pattern defs using the given `patternId` prefix and custom `colorScale`. The `patternScale` property is then used to apply indexed pattern IDs to each pie chart segment. If you want to omit a particular pattern from a pie segment, simply provide `null` instead. +This demonstrates how to apply a custom color scale to patterns. ```js import React from 'react'; @@ -714,6 +638,7 @@ import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color colorScale={[chart_color_blue_300.var, chart_color_gold_300.var, chart_color_green_300.var]} constrainToVisibleArea={true} data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]} + hasPatterns={[ true, true, false ]} height={230} labels={({ datum }) => `${datum.x}: ${datum.y}`} legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]} @@ -725,12 +650,6 @@ import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color right: 140, // Adjusted to accommodate legend top: 20 }} - patternScale={[ - { isVisible: true }, - { isVisible: true }, - { isVisible: false } - ]} - isPatternDefs width={350} /> @@ -740,10 +659,6 @@ import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color This demonstrates how to create custom patterns. -The approach uses custom pattern defs. The `patternScale` property is used to apply pattern IDs to each pie chart segment. If you want to omit a particular pattern from a pie segment, simply provide `null` instead. - -Note that `isPatternDefs` and `patternId` are not used here. - ```js import React from 'react'; import { ChartPie, ChartThemeColor } from '@patternfly/react-charts'; @@ -753,10 +668,10 @@ import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color
- + - + @@ -777,17 +692,74 @@ import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color right: 140, // Adjusted to accommodate legend top: 20 }} - patternScale={[ - { isVisible: true, value: 'url("#pattern:0")' }, - { isVisible: true, value: 'url("#pattern:1")' }, - { isVisible: false } - ]} + patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} themeColor={ChartThemeColor.multiUnordered} width={350} />
``` +### All patterns +```js +import React from 'react'; +import { ChartPie, ChartThemeColor } from '@patternfly/react-charts'; + +
+ `${datum.x}: ${datum.y}`} + legendData={[ + { name: 'Cats: 6' }, + { name: 'Dogs: 6' }, + { name: 'Birds: 6' }, + { name: 'Fish: 6' }, + { name: 'Rabbits: 6' }, + { name: 'Squirels: 6' }, + { name: 'Chipmunks: 6' }, + { name: 'Bats: 6' }, + { name: 'Ducks: 6' }, + { name: 'Geese: 6' }, + { name: 'Bobcat: 6' }, + { name: 'Foxes: 6' }, + { name: 'Coyotes: 6' }, + { name: 'Deer: 6' }, + { name: 'Bears: 6' }, + ]} + legendAllowWrap + legendPosition="bottom" + padding={{ + bottom: 110, + left: 20, + right: 20, + top: 20 + }} + themeColor={ChartThemeColor.multiOrdered} + width={600} + /> +
+``` + ## Documentation ### Tips - See Victory's [FAQ](https://formidable.com/open-source/victory/docs/faq)