chore: fix types for charts package

Signed-off-by: Jon Koops <jonkoops@gmail.com>
patternfly · Apr 15, 2024 · 524fd62 · 524fd62
1 parent 62810f1
commit 524fd62
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 24 deletions.
diff --git a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx
@@ -287,9 +287,9 @@ export const ChartCursorTooltip: React.FunctionComponent<ChartCursorTooltipProps
   const newStyle: any = Array.isArray(style) ? style.map(applyDefaultStyle) : applyDefaultStyle(style);
 
   const getFlyoutComponent = () => {
-    let _pointerLength = Helpers.evaluateProp(pointerLength);
+    let _pointerLength = Helpers.evaluateProp(pointerLength, undefined);
     if (showPointer && _pointerLength === 0) {
-      _pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength) : 10;
+      _pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength, undefined) : 10;
     }
     return React.cloneElement(flyoutComponent, {
       pointerLength: _pointerLength,

diff --git a/packages/react-charts/src/components/ChartDonut/ChartDonut.tsx b/packages/react-charts/src/components/ChartDonut/ChartDonut.tsx
@@ -603,13 +603,13 @@ export const ChartDonut: React.FunctionComponent<ChartDonutProps> = ({
     top: getPaddingForSide('top', padding, theme.pie.padding)
   };
   const chartRadius = radius
-    ? radius
+    ? Helpers.evaluateProp(radius, undefined)
     : Helpers.getRadius({
         height,
         width,
         padding: defaultPadding
       });
-  const chartInnerRadius = innerRadius ? innerRadius : chartRadius - 9; // Todo: Add pf-core variable
+  const chartInnerRadius = innerRadius ? Helpers.evaluateProp(innerRadius, undefined) : chartRadius - 9; // Todo: Add pf-core variable
   const centerSubTitle = subTitle && subTitlePosition === 'center';
 
   // Returns title and subtitle

diff --git a/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx b/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx
@@ -462,7 +462,7 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
     top: getPaddingForSide('top', padding, theme.pie.padding)
   };
   const chartRadius =
-    radius ||
+    Helpers.evaluateProp(radius, undefined) ||
     Helpers.getRadius({
       height,
       width,

diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx
@@ -346,7 +346,7 @@ export const ChartLegendTooltip: React.FunctionComponent<ChartLegendTooltipProps
   theme = getTheme(themeColor),
   ...rest
 }: ChartLegendTooltipProps) => {
-  const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength) : 10;
+  const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength, undefined) : 10;
   const legendTooltipProps = () => ({
     legendData: getLegendTooltipVisibleData({ activePoints, legendData, text, theme }),
     legendProps: getLegendTooltipDataProps(

diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx
@@ -208,7 +208,7 @@ export const ChartLegendTooltipContent: React.FunctionComponent<ChartLegendToolt
   theme = getTheme(themeColor),
   ...rest
 }: ChartLegendTooltipContentProps) => {
-  const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength) : 10;
+  const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength, undefined) : 10;
   const legendProps = getLegendTooltipDataProps(legendComponent.props);
   const visibleLegendData = getLegendTooltipVisibleData({
     activePoints,
@@ -230,7 +230,7 @@ export const ChartLegendTooltipContent: React.FunctionComponent<ChartLegendToolt
       const x = (rest as any).x;
       return x ? x : undefined;
     }
-    const _flyoutWidth = Helpers.evaluateProp(flyoutWidth);
+    const _flyoutWidth = Helpers.evaluateProp(flyoutWidth, undefined);
     if (width > center.x + _flyoutWidth + pointerLength) {
       return center.x + ChartLegendTooltipStyles.flyout.padding / 2;
     } else if (center.x < _flyoutWidth + pointerLength) {
@@ -246,7 +246,7 @@ export const ChartLegendTooltipContent: React.FunctionComponent<ChartLegendToolt
       const y = (rest as any).y;
       return y ? y : undefined;
     }
-    const _flyoutHeight = Helpers.evaluateProp(flyoutHeight);
+    const _flyoutHeight = Helpers.evaluateProp(flyoutHeight, undefined);
     if (center.y < _flyoutHeight / 2) {
       return ChartLegendTooltipStyles.flyout.padding / 2;
     } else if (center.y > height - _flyoutHeight / 2) {
@@ -290,8 +290,8 @@ export const ChartLegendTooltipContent: React.FunctionComponent<ChartLegendToolt
       },
       text: _title,
       textAnchor: 'start',
-      x: getX() + titleOffsetX + Helpers.evaluateProp(dx),
-      y: getY() + titleOffsetY + Helpers.evaluateProp(dy),
+      x: getX() + titleOffsetX + Helpers.evaluateProp(dx, undefined),
+      y: getY() + titleOffsetY + Helpers.evaluateProp(dy, undefined),
       ...titleComponent.props
     });
   };
@@ -312,8 +312,8 @@ export const ChartLegendTooltipContent: React.FunctionComponent<ChartLegendToolt
       patternScale,
       standalone: false,
       theme,
-      x: getX() + legendOffsetX + Helpers.evaluateProp(dx),
-      y: getY() + legendOffsetY + Helpers.evaluateProp(dy),
+      x: getX() + legendOffsetX + Helpers.evaluateProp(dx, undefined),
+      y: getY() + legendOffsetY + Helpers.evaluateProp(dy, undefined),
       ...legendProps
     });
 

diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLabel.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLabel.tsx
@@ -273,7 +273,7 @@ export const ChartLegendTooltipLabel: React.FunctionComponent<ChartLegendTooltip
   };
 
   const getValueLabelComponent = () => {
-    const _x = x + Helpers.evaluateProp(dx);
+    const _x = x + (Helpers.evaluateProp(dx, undefined) as number);
 
     return React.cloneElement(valueLabelComponent, {
       style: getStyle(style),

diff --git a/packages/react-charts/src/components/ChartPoint/ChartPoint.tsx b/packages/react-charts/src/components/ChartPoint/ChartPoint.tsx
@@ -133,7 +133,7 @@ const getPath = (props: ChartPointProps) => {
     threshold: PathHelpers.threshold
   };
   const symbol = Helpers.evaluateProp(props.symbol, props);
-  const key: keyof PathHelpersInterface = symbol;
+  const key = symbol as keyof PathHelpersInterface;
   const symbolFunction = typeof pathFunctions[key] === 'function' ? pathFunctions[key] : pathFunctions.square;
   return symbolFunction(x, y, size);
 };

diff --git a/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts b/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts
@@ -55,7 +55,7 @@ export const getCursorTooltipCenterOffset = ({
   offsetCursorDimensionY = false,
   theme
 }: ChartCursorTooltipCenterOffsetInterface) => {
-  const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength) : 10;
+  const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength, undefined) : 10;
   const offsetX = ({ center, flyoutWidth, width }: any) => {
     const offset = flyoutWidth / 2 + pointerLength;
     return width > center.x + flyoutWidth + pointerLength ? offset : -offset;
@@ -80,7 +80,7 @@ export const getCursorTooltipPoniterOrientation = ({
   horizontal = true,
   theme
 }: ChartCursorTooltipPoniterOrientationInterface): ((props: any) => OrientationTypes) => {
-  const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength) : 10;
+  const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength, undefined) : 10;
   const orientationX = ({ center, flyoutWidth, width }: any): OrientationTypes =>
     width > center.x + flyoutWidth + pointerLength ? 'left' : 'right';
   const orientationY = ({ center, flyoutHeight, height }: any): OrientationTypes =>
@@ -127,13 +127,17 @@ export const getLegendTooltipSize = ({
   text = '',
   theme
 }: ChartLegendTooltipFlyoutInterface) => {
-  const textEvaluated = Helpers.evaluateProp(text);
+  const textEvaluated = Helpers.evaluateProp(text, undefined);
   const _text = Array.isArray(textEvaluated) ? textEvaluated : [textEvaluated];
 
   // Find max char lengths
   let maxDataLength = 0;
   let maxTextLength = 0;
-  _text.map((item: string, index: number) => {
+  _text.map((item, index) => {
+    if (typeof item === 'number') {
+      return;
+    }
+
     if (item) {
       if (item.length > maxTextLength) {
         maxTextLength = item.length;
@@ -174,7 +178,11 @@ export const getLegendTooltipSize = ({
   // {name: "Dogs         1"}
   // {name: "Birds        4"}
   // {name: "Mice         3"}
-  const data = _text.map((label: string, index: number) => {
+  const data = _text.map((label, index) => {
+    if (typeof label === 'number') {
+      return;
+    }
+
     const hasData = legendData && legendData[index] && legendData[index].name !== undefined;
     const spacing = hasData ? getSpacing(legendData[index].name, label) : '';
 
@@ -197,7 +205,7 @@ export const getLegendTooltipSize = ({
   });
   // This should only use text. The row gutter changes when displaying all "no data" messages
   const heightDimensions = getLegendDimensions({
-    legendData: _text.map((name: string) => ({ name })),
+    legendData: _text.map((name) => ({ name })),
     legendOrientation,
     legendProps,
     theme
@@ -222,7 +230,7 @@ export const getLegendTooltipVisibleData = ({
   textAsLegendData = false,
   theme
 }: ChartLegendTooltipVisibleDataInterface) => {
-  const textEvaluated = Helpers.evaluateProp(text);
+  const textEvaluated = Helpers.evaluateProp(text, undefined);
   const _text = Array.isArray(textEvaluated) ? textEvaluated : [textEvaluated];
   const result = [];
 
@@ -267,7 +275,7 @@ export const getLegendTooltipVisibleText = ({
   legendData,
   text
 }: ChartLegendTooltipVisibleTextInterface) => {
-  const textEvaluated = Helpers.evaluateProp(text);
+  const textEvaluated = Helpers.evaluateProp(text, undefined);
   const _text = Array.isArray(textEvaluated) ? textEvaluated : [textEvaluated];
   const result = [];
   if (legendData) {
@@ -285,5 +293,5 @@ export const getLegendTooltipVisibleText = ({
       }
     }
   }
-  return result;
+  return result as string[] | number[];
 };