react-charts: ChartLabel not compatible with TypeScript 5.x

[manstis]

Describe the enhancement or change I use @patternfly/react-charts:7.1.2 with RedHat console.dot starter project https://github.com/RedHatInsights/frontend-starter-app

frontend-starter-app has moved to TypeScript 5.x from 4.x.

This however brings problems when using @patternfly/react-charts:7.1.2 which still uses TypeScript 4.x.

This line fails to compile with TS 5.x:

ERROR in ./node_modules/@patternfly/react-charts/src/components/ChartLabel/ChartLabel.tsx:233:92
TS2345: Argument of type 'CSSProperties | undefined' is not assignable to parameter of type 'CSSProperties'.
  Type 'undefined' is not assignable to type 'Properties<string | number, string & {}>'.
    231 |       }
    232 |     );
  > 233 |   const newStyle = Array.isArray(style) ? style.map(applyDefaultStyle) : applyDefaultStyle(style);
        |                                                                                            ^^^^^
    234 |
    235 |   return <VictoryLabel style={newStyle as any} textAnchor={textAnchor} {...rest} />;
    236 | };

Found 1 error in 2818 ms.

It is OK with TypeScript 4.x

Is this request originating from a Red Hat product team? If so, which ones and is there any sort of deadline for this enhancement? Yes, I work for Red Hat on the Ansible Project.

I am writing a new console.dot extension and am tied to the latest frontend-starter-app that uses TypeScript 5.x (and PatternFly 5.x - I see you are using PF5 pre-release.. IDK if you need a general dependency upgrade?)

Any other information?

[nicolethoen]

@manstis A possible workaround here until we update to Typescript 5.x might be to cast your style object to React.CSSProperties That's something the PF code does frequently. Here is an example.

[manstis]

Thanks for the suggestion @nicolethoen.

The error however does not occur in my code but in @patternfly/react-charts.

[nicolethoen]

ah I see

[dlabrecq]

FYI, I don't encounter issues with ChartLabel in Cost Management. We're currently using "typescript": "^5.3.3" and "@patternfly/react-charts": "^7.2.0".

Victory changed some types recently, so it may be possible you're installing Victory 36.9.0? PatternFly had previously been using Victory 36.8.1

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[github-actions[bot]]

false