chore(charts): Simplify pattern visibility

Closes #7541
patternfly · Jun 13, 2022 · f8617fa · f8617fa
1 parent c2e4c27
commit f8617fa
Show file tree

Hide file tree

Showing 28 changed files with 296 additions and 269 deletions.
diff --git a/packages/react-charts/src/components/Chart/Chart.tsx b/packages/react-charts/src/components/Chart/Chart.tsx
@@ -29,12 +29,11 @@ import {
   getComputedLegend,
   getLabelTextSize,
   getPaddingForSide,
-  getPatternId,
   getPatternDefs,
-  getDefaultColorScale,
   getDefaultData,
-  getDefaultPatternScale
+  getDefaultPatternProps
 } from '../ChartUtils';
+import { PatternScaleInterface } from '../ChartUtils/chart-patterns';
 
 /**
  * See https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/index.d.ts
@@ -94,12 +93,14 @@ export interface ChartProps extends VictoryChartProps {
   /**
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   defaultAxes?: AxesType;
   /**
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   defaultPolarAxes?: AxesType;
@@ -307,13 +308,6 @@ export interface ChartProps extends VictoryChartProps {
    * @propType number | { top: number, bottom: number, left: number, right: number }
    */
   padding?: PaddingProps;
-  /**
-   * The optional ID to prefix pattern defs
-   *
-   * @example patternId="pattern"
-   * @beta
-   */
-  patternId?: string;
   /**
    * 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
@@ -326,10 +320,11 @@ export interface ChartProps extends VictoryChartProps {
    * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']}
    * @beta
    */
-  patternScale?: string[];
+  patternScale?: PatternScaleInterface[];
   /**
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   prependDefaultAxes?: boolean;
@@ -372,6 +367,7 @@ export interface ChartProps extends VictoryChartProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   sharedEvents?: { events: any[]; getEventState: Function };
@@ -460,18 +456,17 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
   ariaTitle,
   children,
   colorScale,
+  isPatternDefs = false,
   legendAllowWrap = false,
   legendComponent = <ChartLegend />,
   legendData,
   legendPosition = ChartCommonStyles.legend.position as ChartLegendPosition,
   padding,
+  patternScale,
   showAxis = true,
   themeColor,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   themeVariant,
-  patternId = getPatternId(),
-  patternScale,
-  isPatternDefs = false,
 
   // destructure last
   theme = getChartTheme(themeColor, showAxis),
@@ -488,12 +483,11 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
     top: getPaddingForSide('top', padding, theme.chart.padding)
   };
 
-  const defaultColorScale = getDefaultColorScale(colorScale as any, theme.chart.colorScale as string[]);
-  const defaultPatternScale = getDefaultPatternScale({
-    colorScale: defaultColorScale,
+  const { defaultColorScale, defaultPatternScale, patternId } = getDefaultPatternProps({
+    colorScale,
+    isPatternDefs,
     patternScale,
-    patternId,
-    isPatternDefs
+    themeColorScale: theme.chart.colorScale as string[]
   });
 
   // Add pattern props for legend tooltip
@@ -503,7 +497,6 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
     containerComponent.props.labelComponent.type.displayName === 'ChartLegendTooltip'
   ) {
     labelComponent = React.cloneElement(containerComponent.props.labelComponent, {
-      patternId,
       theme,
       ...(defaultPatternScale && { patternScale: defaultPatternScale }),
       ...containerComponent.props.labelComponent.props
@@ -580,7 +573,6 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
         const { ...childProps } = child.props;
         return React.cloneElement(child, {
           colorScale,
-          patternId,
           theme,
           ...(defaultPatternScale && { patternScale: defaultPatternScale }),
           ...childProps,
@@ -605,7 +597,7 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
     >
       {renderChildren()}
       {getLegend()}
-      {isPatternDefs && getPatternDefs({ patternId, patternScale: defaultColorScale })}
+      {isPatternDefs && getPatternDefs({ patternId, colorScale: defaultColorScale })}
     </VictoryChart>
   );
 };

diff --git a/packages/react-charts/src/components/ChartArea/ChartArea.tsx b/packages/react-charts/src/components/ChartArea/ChartArea.tsx
@@ -312,6 +312,7 @@ export interface ChartAreaProps extends VictoryAreaProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   sharedEvents?: { events: any[]; getEventState: Function };

diff --git a/packages/react-charts/src/components/ChartAxis/ChartAxis.tsx b/packages/react-charts/src/components/ChartAxis/ChartAxis.tsx
@@ -296,6 +296,7 @@ export interface ChartAxisProps extends VictoryAxisProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   sharedEvents?: { events: any[]; getEventState: Function };

diff --git a/packages/react-charts/src/components/ChartBar/ChartBar.tsx b/packages/react-charts/src/components/ChartBar/ChartBar.tsx
@@ -305,6 +305,7 @@ export interface ChartBarProps extends VictoryBarProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   polar?: boolean;
@@ -348,6 +349,7 @@ export interface ChartBarProps extends VictoryBarProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   sharedEvents?: { events: any[]; getEventState: Function };

diff --git a/packages/react-charts/src/components/ChartContainer/ChartContainer.tsx b/packages/react-charts/src/components/ChartContainer/ChartContainer.tsx
@@ -73,6 +73,7 @@ export interface ChartContainerProps extends VictoryContainerProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   polar?: boolean;

diff --git a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx
@@ -24,6 +24,7 @@ export interface ChartCursorContainerProps extends VictoryCursorContainerProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   children?: React.ReactElement | React.ReactElement[];
@@ -134,6 +135,7 @@ export interface ChartCursorContainerProps extends VictoryCursorContainerProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   polar?: boolean;

diff --git a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx
@@ -144,6 +144,7 @@ export interface ChartCursorTooltipProps extends ChartTooltipProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   height?: number;
@@ -257,6 +258,7 @@ export interface ChartCursorTooltipProps extends ChartTooltipProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   width?: number;

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 } from '../ChartUtils';
+import { getPieLabelX, getPieLabelY, getPaddingForSide, PatternScaleInterface } from '../ChartUtils';
 
 interface ChartDonutSubTitleInterface {
   dy?: number;
@@ -361,13 +361,6 @@ export interface ChartDonutProps extends ChartPieProps {
    * @propType number | Function
    */
   padAngle?: NumberOrCallback;
-  /**
-   * The optional ID to prefix pattern defs
-   *
-   * @example patternId="pattern"
-   * @beta
-   */
-  patternId?: string;
   /**
    * 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
@@ -380,7 +373,7 @@ export interface ChartDonutProps extends ChartPieProps {
    * @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']}
    * @beta
    */
-  patternScale?: string[];
+  patternScale?: PatternScaleInterface[];
   /**
    * 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
@@ -402,6 +395,7 @@ export interface ChartDonutProps extends ChartPieProps {
    *
    * Note: This prop should not be set manually.
    *
+   * @private
    * @hide
    */
   sharedEvents?: { events: any[]; getEventState: Function };
-Original file line number
+Diff line change
@@ Expand Up / @@ -312,6 +312,7 @@ export interface ChartAreaProps extends VictoryAreaProps { @@
        *
        * Note: This prop should not be set manually.
        *
+       * @private
        * @hide
        */
       sharedEvents?: { events: any[]; getEventState: Function };
@@ Expand Down @@