feat(RadialChart): introduce loading & loadingDelay props

package.json

@@ -44,8 +44,8 @@
     "@ui5/webcomponents-compat": "2.0.0-rc.6",
     "@ui5/webcomponents-fiori": "2.0.0-rc.6",
     "@ui5/webcomponents-icons": "2.0.0-rc.6",
-    "react": "19.0.0-rc-c21bcd627b-20240624",
-    "react-dom": "19.0.0-rc-c21bcd627b-20240624",
+    "react": "18",
+    "react-dom": "18",
     "remark-gfm": "^4.0.0",
     "tocbot": "4.28.2"
   },

packages/charts/src/components/RadialChart/RadialChart.tsx

@@ -6,6 +6,7 @@ import type { CSSProperties } from 'react';
 import { forwardRef } from 'react';
 import { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts';
 import { useOnClickInternal } from '../../hooks/useOnClickInternal.js';
+import type { IChartBaseProps } from '../../interfaces/IChartBaseProps.js';
 import { ChartContainer } from '../../internal/ChartContainer.js';
 import { PieChartPlaceholder } from '../PieChart/Placeholder.js';
 
@@ -17,8 +18,9 @@ interface RadialChartConfig {
 
   [rest: string]: any;
 }
-//todo expose `loading`
-export interface RadialChartProps extends Omit<CommonProps, 'onClick' | 'children' | 'onLegendClick'> {
+export interface RadialChartProps
+  extends Omit<CommonProps, 'onClick' | 'children' | 'onLegendClick'>,
+    Pick<IChartBaseProps, 'loading' | 'loadingDelay'> {
   /**
    * The actual value which defines how much the ring is filled.
    */
@@ -92,6 +94,8 @@ const defaultDisplayValueStyles = {
  */
 const RadialChart = forwardRef<HTMLDivElement, RadialChartProps>((props, ref) => {
   const {
+    loading,
+    loadingDelay,
     maxValue = 100,
     value,
     displayValue,
@@ -108,7 +112,7 @@ const RadialChart = forwardRef<HTMLDivElement, RadialChartProps>((props, ref) =>
   } = props;
 
   const range = [0, maxValue];
-  const dataset = [{ value }];
+  const dataset = typeof value === 'number' ? [{ value }] : [];
 
   const onDataPointClickInternal = (payload, i, event) => {
     if (payload && onDataPointClick) {
@@ -126,8 +130,8 @@ const RadialChart = forwardRef<HTMLDivElement, RadialChartProps>((props, ref) =>
 
   return (
     <ChartContainer
-      loading={undefined}
-      loadingDelay={undefined}
+      loading={loading}
+      loadingDelay={loadingDelay}
       dataset={dataset}
       ref={ref}
       Placeholder={PieChartPlaceholder}

yarn.lock

@@ -19516,14 +19516,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:19.0.0-rc-c21bcd627b-20240624":
-  version: 19.0.0-rc-c21bcd627b-20240624
-  resolution: "react-dom@npm:19.0.0-rc-c21bcd627b-20240624"
+"react-dom@npm:18":
+  version: 18.3.1
+  resolution: "react-dom@npm:18.3.1"
   dependencies:
-    scheduler: "npm:0.25.0-rc-c21bcd627b-20240624"
+    loose-envify: "npm:^1.1.0"
+    scheduler: "npm:^0.23.2"
   peerDependencies:
-    react: 19.0.0-rc-c21bcd627b-20240624
-  checksum: 10c0/61570745ba25391e1659ccb4da5f315b6e8fc65597741fe28af36c33551623e2f984ac6ce6acea0a062f9c97dd6c556788c8b3cd97ad497788d5a66e291ce622
+    react: ^18.3.1
+  checksum: 10c0/a752496c1941f958f2e8ac56239172296fcddce1365ce45222d04a1947e0cc5547df3e8447f855a81d6d39f008d7c32eab43db3712077f09e3f67c4874973e85
   languageName: node
   linkType: hard
 
@@ -19626,10 +19627,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:19.0.0-rc-c21bcd627b-20240624":
-  version: 19.0.0-rc-c21bcd627b-20240624
-  resolution: "react@npm:19.0.0-rc-c21bcd627b-20240624"
-  checksum: 10c0/82a760b294b40a13b93a94c6d3c76265896977c7f270006082a8b2dc89d71894d1f51e77861e9316265c1f8a92bc09f1314c1e4679be48e44690d0ec74e0c688
+"react@npm:18":
+  version: 18.3.1
+  resolution: "react@npm:18.3.1"
+  dependencies:
+    loose-envify: "npm:^1.1.0"
+  checksum: 10c0/283e8c5efcf37802c9d1ce767f302dd569dd97a70d9bb8c7be79a789b9902451e0d16334b05d73299b20f048cbc3c7d288bbbde10b701fa194e2089c237dbea3
   languageName: node
   linkType: hard
 
@@ -20527,13 +20530,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:0.25.0-rc-c21bcd627b-20240624":
-  version: 0.25.0-rc-c21bcd627b-20240624
-  resolution: "scheduler@npm:0.25.0-rc-c21bcd627b-20240624"
-  checksum: 10c0/78dfa0cadc3f617933d01718ddf855ac9ee46d96e5ab46e839c9b7d13138afb304a5ac779b89d0c600095cfdca409758828536a187099a39d16100d5be4fc758
-  languageName: node
-  linkType: hard
-
 "scheduler@npm:^0.23.0":
   version: 0.23.0
   resolution: "scheduler@npm:0.23.0"
@@ -20543,6 +20539,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"scheduler@npm:^0.23.2":
+  version: 0.23.2
+  resolution: "scheduler@npm:0.23.2"
+  dependencies:
+    loose-envify: "npm:^1.1.0"
+  checksum: 10c0/26383305e249651d4c58e6705d5f8425f153211aef95f15161c151f7b8de885f24751b377e4a0b3dd42cce09aad3f87a61dab7636859c0d89b7daf1a1e2a5c78
+  languageName: node
+  linkType: hard
+
 "semver@npm:2 || 3 || 4 || 5, semver@npm:^5.6.0":
   version: 5.7.2
   resolution: "semver@npm:5.7.2"
@@ -22433,8 +22438,8 @@ __metadata:
     postcss-modules: "npm:^6.0.0"
     postcss-nesting: "npm:^12.0.3"
     prettier: "npm:^3.0.0"
-    react: "npm:19.0.0-rc-c21bcd627b-20240624"
-    react-dom: "npm:19.0.0-rc-c21bcd627b-20240624"
+    react: "npm:18"
+    react-dom: "npm:18"
     remark-gfm: "npm:^4.0.0"
     rimraf: "npm:^5.0.0"
     storybook: "npm:8.0.10"