feat(charts): skeletons

#10310
patternfly · Apr 29, 2024 · 7f1165c · 7f1165c
1 parent 58139cd
commit 7f1165c
Show file tree

Hide file tree

Showing 22 changed files with 1,200 additions and 54 deletions.
diff --git a/packages/react-charts/src/components/Chart/Chart.tsx b/packages/react-charts/src/components/Chart/Chart.tsx
@@ -33,6 +33,7 @@ import { getChartTheme } from '../ChartUtils/chart-theme-types';
 import { useEffect } from 'react';
 import { ChartLabel } from '../ChartLabel/ChartLabel';
 import { ChartPoint } from '../ChartPoint/ChartPoint';
+import { ChartThemeColor } from '../ChartTheme/ChartThemeColor';
 
 /**
  * Chart is a wrapper component that reconciles the domain for all its children, controls the layout of the chart,
@@ -473,7 +474,7 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
   children,
   colorScale,
   hasPatterns,
-  legendAllowWrap = false,
+  legendAllowWrap,
   legendComponent = <ChartLegend />,
   legendData,
   legendPosition = ChartCommonStyles.legend.position,
@@ -526,7 +527,8 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
     theme,
     ...containerComponent.props,
     className: getClassName({ className: containerComponent.props.className }), // Override VictoryContainer class name
-    ...(labelComponent && { labelComponent }) // Override label component props
+    ...(labelComponent && { labelComponent }), // Override label component props
+    ...(themeColor === ChartThemeColor.skeleton && { labelComponent: <ChartLabel /> }) // Omit cursor and tooltips
   });
 
   let legendXOffset = 0;
@@ -550,7 +552,11 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
       labelComponent: legendComponent.props.labelComponent ? (
         React.cloneElement(legendComponent.props.labelComponent, { direction: 'rtl', dx: legendXOffset - 30 })
       ) : (
-        <ChartLabel direction="rtl" dx={legendXOffset - 30} />
+        <ChartLabel
+          direction="rtl"
+          dx={legendXOffset - 30}
+          backgroundStyle={theme.skeleton ? theme.skeleton.backgroundStyle : undefined} // override backgroundStyle
+        />
       )
     }),
     ...legendComponent.props

diff --git a/packages/react-charts/src/components/ChartAxis/ChartAxis.tsx b/packages/react-charts/src/components/ChartAxis/ChartAxis.tsx
@@ -462,15 +462,17 @@ export const ChartAxis: React.FunctionComponent<ChartAxisProps> = ({
       ...(name && {
         id: () => `${name}-${(axisLabelComponent as any).type.displayName}`
       }),
-      ...axisLabelComponent.props
+      ...axisLabelComponent.props,
+      ...(theme.skeleton && theme.skeleton) // override backgroundStyle
     });
 
   const getTickLabelComponent = () =>
     React.cloneElement(tickLabelComponent, {
       ...(name && {
         id: (props: any) => `${name}-${(tickLabelComponent as any).type.displayName}-${props.index}`
       }),
-      ...tickLabelComponent.props
+      ...tickLabelComponent.props,
+      ...(theme.skeleton && theme.skeleton) // override backgroundStyle
     });
 
   // Note: containerComponent is required for theme

diff --git a/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx b/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx
@@ -594,6 +594,8 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
     standalone: false,
     subTitle: groupSubTitle,
     title: groupTitle,
+    theme,
+    themeColor,
     width,
     ...groupTitleComponent.props
   });
@@ -608,6 +610,7 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
     standalone: false,
     subTitle,
     theme,
+    themeColor,
     title,
     titlePosition,
     width,
@@ -617,7 +620,12 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
   // Comparative error measure
   const comparativeErrorMeasure = React.cloneElement(comparativeErrorMeasureComponent, {
     allowTooltip,
-    barWidth: getComparativeMeasureErrorWidth({ height: chartSize.height, horizontal, width: chartSize.width }),
+    barWidth: getComparativeMeasureErrorWidth({
+      height: chartSize.height,
+      horizontal,
+      themeColor,
+      width: chartSize.width
+    }),
     constrainToVisibleArea,
     data: comparativeErrorMeasureData,
     domain,
@@ -627,6 +635,7 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
     labels,
     padding,
     standalone: false,
+    themeColor,
     width: chartSize.width,
     y: comparativeErrorMeasureDataY,
     ...comparativeErrorMeasureComponent.props
@@ -635,7 +644,12 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
   // Comparative warning measure
   const comparativeWarningMeasure = React.cloneElement(comparativeWarningMeasureComponent, {
     allowTooltip,
-    barWidth: getComparativeMeasureWarningWidth({ height: chartSize.height, horizontal, width: chartSize.width }),
+    barWidth: getComparativeMeasureWarningWidth({
+      height: chartSize.height,
+      horizontal,
+      themeColor,
+      width: chartSize.width
+    }),
     constrainToVisibleArea,
     data: comparativeWarningMeasureData,
     domain,
@@ -645,20 +659,22 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
     labels,
     padding,
     standalone: false,
+    themeColor,
     width: chartSize.width,
     y: comparativeWarningMeasureDataY,
     ...comparativeWarningMeasureComponent.props
   });
 
   // Comparative zero measure
   const comparativeZeroMeasure = React.cloneElement(comparativeZeroMeasureComponent, {
-    barWidth: getComparativeMeasureWidth({ height: chartSize.height, horizontal, width: chartSize.width }),
+    barWidth: getComparativeMeasureWidth({ height: chartSize.height, horizontal, themeColor, width: chartSize.width }),
     data: [{ y: 0 }],
     domain,
     height: chartSize.height,
     horizontal,
     padding,
     standalone: false,
+    themeColor,
     width: chartSize.width,
     ...comparativeZeroMeasureComponent.props
   });
@@ -691,6 +707,7 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
     orientation: legendOrientation,
     position: legendPosition,
     theme,
+    themeColor,
     ...(legendDirection === 'rtl' && {
       dataComponent: legendComponent.props.dataComponent ? (
         React.cloneElement(legendComponent.props.dataComponent, { transform: `translate(${legendXOffset})` })
@@ -700,9 +717,17 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
     }),
     ...(legendDirection === 'rtl' && {
       labelComponent: legendComponent.props.labelComponent ? (
-        React.cloneElement(legendComponent.props.labelComponent, { direction: 'rtl', dx: legendXOffset - 30 })
+        React.cloneElement(legendComponent.props.labelComponent, {
+          direction: 'rtl',
+          dx: legendXOffset - 30,
+          ...(theme.skeleton && theme.skeleton) // override backgroundStyle
+        })
       ) : (
-        <ChartLabel direction="rtl" dx={legendXOffset - 30} />
+        <ChartLabel
+          direction="rtl"
+          dx={legendXOffset - 30}
+          {...(theme.skeleton && theme.skeleton)} // override backgroundStyle
+        />
       )
     }),
     ...legendComponent.props
@@ -720,7 +745,7 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
     labelComponent: allowTooltip ? <ChartTooltip height={height} theme={theme} width={width} /> : undefined,
     labels,
     padding,
-    size: getPrimaryDotMeasureSize({ height: chartSize.height, horizontal, width: chartSize.width }),
+    size: getPrimaryDotMeasureSize({ height: chartSize.height, horizontal, themeColor, width: chartSize.width }),
     standalone: false,
     themeColor,
     width: chartSize.width,
@@ -732,7 +757,12 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
   const primarySegmentedMeasure = React.cloneElement(primarySegmentedMeasureComponent, {
     allowTooltip,
     constrainToVisibleArea,
-    barWidth: getPrimarySegmentedMeasureWidth({ height: chartSize.height, horizontal, width: chartSize.width }),
+    barWidth: getPrimarySegmentedMeasureWidth({
+      height: chartSize.height,
+      horizontal,
+      themeColor,
+      width: chartSize.width
+    }),
     data: primarySegmentedMeasureData,
     domain,
     height: chartSize.height,
@@ -752,7 +782,7 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
   const qualitativeRange = React.cloneElement(qualitativeRangeComponent, {
     allowTooltip,
     constrainToVisibleArea,
-    barWidth: getQualitativeRangeBarWidth({ height: chartSize.height, horizontal, width: chartSize.width }),
+    barWidth: getQualitativeRangeBarWidth({ height: chartSize.height, horizontal, themeColor, width: chartSize.width }),
     data: qualitativeRangeData,
     domain,
     height: chartSize.height,
@@ -762,6 +792,7 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
     labels,
     padding,
     standalone: false,
+    themeColor,
     width: chartSize.width,
     y: qualitativeRangeDataY,
     y0: qualitativeRangeDataY0,
@@ -868,6 +899,7 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
     offsetY: horizontal ? 80 - defaultPadding.top * 0.5 + (defaultPadding.bottom * 0.5 - 25) : 0,
     padding,
     standalone: false,
+    themeColor,
     tickCount: ChartBulletStyles.axisTickCount,
     tickValues: getTickValues((domain as any).y[0], (domain as any).y[1]),
     width: chartSize.width,

diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeMeasure.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeMeasure.tsx
@@ -230,6 +230,7 @@ export const ChartBulletComparativeMeasure: React.FunctionComponent<ChartBulletC
       padding,
       standalone: false,
       theme,
+      themeColor,
       width,
       ...measureComponent.props
     })

diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.tsx
@@ -203,6 +203,7 @@ export const ChartBulletComparativeWarningMeasure: React.FunctionComponent<
     padding,
     standalone: false,
     theme,
+    themeColor,
     width,
     y,
     ...measureComponent.props

diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.tsx
@@ -183,7 +183,8 @@ export const ChartBulletGroupTitle: React.FunctionComponent<ChartBulletGroupTitl
         dy: defaultPadding.top,
         labelPosition: 'top'
       }),
-      ...titleProps
+      ...titleProps,
+      ...(theme.skeleton && theme.skeleton) // override backgroundStyle
     });
   };
 

diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletTitle.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletTitle.tsx
@@ -215,7 +215,8 @@ export const ChartBulletTitle: React.FunctionComponent<ChartBulletTitleProps> =
         dy,
         labelPosition
       }),
-      ...titleComponent.props
+      ...titleComponent.props,
+      ...(theme.skeleton && theme.skeleton) // override backgroundStyle
     });
   };
 

diff --git a/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-theme.ts b/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-theme.ts
@@ -7,6 +7,8 @@ import {
 } from './chart-bullet-data';
 import { ChartThemeDefinition } from '../../ChartTheme/ChartTheme';
 import { getBulletTheme } from '../../ChartUtils/chart-theme-types';
+import { ChartThemeColor } from '../../ChartTheme/ChartThemeColor';
+import { SkeletonColorTheme } from '../../ChartTheme/themes/colors/skeleton-theme';
 
 interface ChartBulletThemeInterface {
   comparativeErrorMeasureData?: any[];
@@ -134,5 +136,8 @@ export const getBulletThemeWithLegendColorScale = ({
 
   const theme = getBulletTheme(themeColor);
   theme.legend.colorScale = [...colorScale];
+  if (themeColor === ChartThemeColor.skeleton) {
+    theme.legend.colorScale = SkeletonColorTheme.legend.colorScale;
+  }
   return theme;
 };
diff --git a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx
@@ -213,7 +213,8 @@ export const ChartCursorContainer: React.FunctionComponent<ChartCursorContainerP
   const chartClassName = getClassName({ className });
   const chartCursorLabelComponent = React.cloneElement(cursorLabelComponent, {
     theme,
-    ...cursorLabelComponent.props
+    ...cursorLabelComponent.props,
+    ...(theme.skeleton && theme.skeleton) // override backgroundStyle
   });
 
   // Clone so users can override cursor container props

diff --git a/packages/react-charts/src/components/ChartDonut/ChartDonut.tsx b/packages/react-charts/src/components/ChartDonut/ChartDonut.tsx
@@ -659,7 +659,8 @@ export const ChartDonut: React.FunctionComponent<ChartDonutProps> = ({
         padding: defaultPadding,
         width
       }),
-      ...subTitleProps
+      ...subTitleProps,
+      ...(theme.skeleton && theme.skeleton) // override backgroundStyle
     });
   };
 
@@ -692,7 +693,8 @@ export const ChartDonut: React.FunctionComponent<ChartDonutProps> = ({
         padding: defaultPadding,
         width
       }),
-      ...titleProps
+      ...titleProps,
+      ...(theme.skeleton && theme.skeleton) // override backgroundStyle
     });
   };
 

diff --git a/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx b/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx
@@ -350,14 +350,16 @@ export const ChartLegend: React.FunctionComponent<ChartLegendProps> = ({
   const getLabelComponent = () =>
     React.cloneElement(labelComponent, {
       ...(name && { id: (props: any) => `${name}-${(labelComponent as any).type.displayName}-${props.index}` }),
-      ...labelComponent.props
+      ...labelComponent.props,
+      ...(theme.skeleton && theme.skeleton) // override backgroundStyle
     });
 
   const getTitleComponent = () =>
     React.cloneElement(titleComponent, {
       // Victory doesn't appear to call the id function here, but it's valid for label components
       ...(name && { id: () => `${name}-${(titleComponent as any).type.displayName}` }),
-      ...titleComponent.props
+      ...titleComponent.props,
+      ...(theme.skeleton && theme.skeleton) // override backgroundStyle
     });
 
   // Note: containerComponent is required for theme

diff --git a/packages/react-charts/src/components/ChartTheme/ChartTheme.ts b/packages/react-charts/src/components/ChartTheme/ChartTheme.ts
@@ -1,7 +1,17 @@
 import { VictoryThemeDefinition } from 'victory-core';
 
 // Note: Victory incorrectly typed ThemeBaseProps.padding as number instead of PaddingProps
-export interface ChartThemeDefinitionInterface extends VictoryThemeDefinition {}
+export interface ChartThemeDefinitionInterface extends VictoryThemeDefinition {
+  skeleton?: {
+    backgroundStyle?: {
+      fill?: string;
+    };
+    style?: {
+      fill?: string;
+      stroke?: string;
+    };
+  };
+}
 
 /**
  * Chart theme definition

diff --git a/packages/react-charts/src/components/ChartTheme/ChartThemeColor.ts b/packages/react-charts/src/components/ChartTheme/ChartThemeColor.ts
@@ -10,6 +10,7 @@ interface ChartThemeColorInterface {
   multiUnordered: string;
   orange: string;
   purple: string;
+  skeleton: string;
 }
 
 /**
@@ -49,5 +50,6 @@ export const ChartThemeColor: ChartThemeColorInterface = {
   multiOrdered: 'multi-ordered',
   multiUnordered: 'multi-unordered',
   orange: 'orange',
-  purple: 'purple'
+  purple: 'purple',
+  skeleton: 'skeleton'
 };
diff --git a/packages/react-charts/src/components/ChartTheme/ChartThemeTypes.ts b/packages/react-charts/src/components/ChartTheme/ChartThemeTypes.ts
@@ -1,6 +1,7 @@
 import { ChartThemeDefinition } from './ChartTheme';
 import { AxisTheme } from './themes/components/axis-theme';
 import { BaseTheme } from './themes/base-theme';
+import { SkeletonTheme } from './themes/skeleton-theme';
 import {
   BulletTheme,
   BulletComparativeErrorMeasureTheme,
@@ -108,13 +109,19 @@ export const ChartDonutTheme: ChartThemeDefinition = DonutTheme;
 export const ChartDonutThresholdDynamicTheme: ChartThemeDefinition = DonutThresholdDynamicTheme;
 
 /**
- * ChartDonutThresholdStatic theme
+ * Donut threshold static theme
  * @private
  */
 export const ChartDonutThresholdStaticTheme: ChartThemeDefinition = DonutThresholdStaticTheme;
 
 /**
- * Donut threshold static theme
+ * Skeleton theme
+ * @private
+ */
+export const ChartSkeletonTheme: ChartThemeDefinition = SkeletonTheme;
+
+/**
+ * Threshold static theme
  * @private
  */
 export const ChartThresholdTheme: ChartThemeDefinition = ThresholdTheme;
diff --git a/packages/react-charts/src/components/ChartTheme/themes/base-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/base-theme.ts
@@ -167,7 +167,7 @@ export const BaseTheme = {
       },
       grid: {
         fill: chart_axis_grid_Fill.var,
-        stroke: 'none',
+        stroke: 'transparent',
         pointerEvents: chart_axis_grid_PointerEvents.value,
         strokeLinecap: STROKE_LINE_CAP,
         strokeLinejoin: STROKE_LINE_JOIN