chore(charts): removed PatternScaleInterface and replaced the `isPa…

…tternDefs` prop with `hasPatterns`
patternfly · Jun 14, 2022 · 3742fdf · 3742fdf
1 parent 814b737
commit 3742fdf
Show file tree

Hide file tree

Showing 21 changed files with 319 additions and 359 deletions.
diff --git 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 <g> tag on web, and a react-native-svg <G> tag on mobile
    */
   groupComponent?: React.ReactElement<any>;
+  /**
+   * 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<ChartProps> = ({
   ariaTitle,
   children,
   colorScale,
-  isPatternDefs = false,
+  hasPatterns,
   legendAllowWrap = false,
   legendComponent = <ChartLegend />,
   legendData,
@@ -483,10 +489,10 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
     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<ChartProps> = ({
       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
@@ -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
@@ -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
    * <svg> element with standalone={false} parent styles will be applied to the enclosing <g> tag.
    * Many styles that can be applied to a parent <svg> will not be expressed when applied to a <g>.
    *

diff --git 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
@@ -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
@@ -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 <g> tag on web, and a react-native-svg <G> tag on mobile
    */
   groupComponent?: React.ReactElement<any>;
+  /**
+   * 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