feat: Add Radial Chart to extensibility (#2966)

* first implementaion

* small fixes

* add docs

* adjust radial chart

* improve docs

* remove unneded property

* improve docs

* Apply suggestions from code review

Co-authored-by: Natalia Sitko <[email protected]>

* fix docs fmt

---------

Co-authored-by: Natalia Sitko <[email protected]>

docs/extensibility/50-list-and-details-widgets.md

@@ -696,3 +696,45 @@ See the following example:
 ```
 
 <img src="./assets/display-widgets/Tabs.png" alt="Example of a tabs widget" style="border: 1px solid #D2D5D9">
+
+## Radial Chart
+
+`Radial Chart` widgets render a card component with a graphical representation of the radial chart.
+To display the widget in the **Monitoring and Health** section of a details page, configure it in **data.details.health**.  
+To render the card within the dense grid layout in the **Monitoring and Health** section of **Cluster Details**, use [injections](#widget-injections-overview) (`destination: ClusterOverview`, `slot: health`).
+
+These are the available `Radial Chart` widget parameters:
+
+| Parameter          | Required | Type                                         | Description                          |
+| ------------------ | -------- | -------------------------------------------- | ------------------------------------ |
+| **maxValue**       | **No**   | string or the [JSONata](jsonata.md) function | The maximum value for radial chart.  |
+| **additionalInfo** | **No**   | string or the [JSONata](jsonata.md) function | An additional description of values. |
+| **color**          | **No**   | string                                       | The color of the radial chart.       |
+
+This is an example of the widget configuration in the **data.details.health** section, which allows the `RadialChart` to be displayed on the details page in the **Monitoring and Health** section:
+
+```yaml
+- name: MyTitle
+  widget: RadialChart
+  source: status.currentReplicas
+  maxValue: status.desiredReplicas
+  additionalInfo: $join([$string(status.currentReplicas), "/", $string(status.desiredReplicas)])
+  color: var(--sapChart_OrderedColor_5)
+```
+
+This is an example of the widget configured using injection, which allows the `RadialChart` to be displayed in the **Monitoring and Health** section of **Cluster Details**:
+
+```yaml
+injections: |-
+  - name: MyTitle
+    widget: RadialChart
+    source: $sum(status.currentReplicas)
+    maxValue: $sum(status.desiredReplicas)
+    additionalInfo: $join([$string($sum(status.currentReplicas)), "/", $string($sum(status.desiredReplicas))])
+    color: var(--sapChart_OrderedColor_5)
+    targets:
+      - slot: health
+        location: ClusterOverview
+```
+
+<img src="./assets/display-widgets/RadialChart.png" alt="Example of a RadialChart widget" style="border: 1px solid #D2D5D9" width="75%">

src/components/Extensibility/components/RadialChart.js

@@ -0,0 +1,51 @@
+import { Card, CardHeader } from '@ui5/webcomponents-react';
+import { useTranslation } from 'react-i18next';
+import { UI5RadialChart } from 'shared/components/UI5RadialChart/UI5RadialChart';
+import { useJsonata } from '../hooks/useJsonata';
+
+export const RadialChart = ({ structure, value, originalResource }) => {
+  const { t } = useTranslation();
+  const jsonata = useJsonata({
+    resource: originalResource,
+    value,
+  });
+  let err;
+  let maxValue;
+
+  [maxValue, err] = jsonata(structure.maxValue, {
+    resource: originalResource,
+  });
+  if (err) {
+    return t('extensibility.configuration-error', {
+      error: err.message,
+    });
+  }
+
+  let additionalInfo;
+  [additionalInfo, err] = jsonata(structure.additionalInfo, {
+    resource: originalResource,
+  });
+  if (err) {
+    return t('extensibility.configuration-error', {
+      error: err.message,
+    });
+  }
+
+  return (
+    <div className={'item-wrapper tall'}>
+      <Card
+        className="radial-chart-card"
+        header={<CardHeader titleText={t(structure?.name)} />}
+      >
+        <UI5RadialChart
+          color={structure.color}
+          value={value}
+          max={maxValue ? maxValue : structure?.maxValue}
+          additionalInfo={
+            additionalInfo ? additionalInfo : structure?.additionalInfo
+          }
+        />
+      </Card>
+    </div>
+  );
+};

src/components/Extensibility/components/index.js

@@ -24,6 +24,7 @@ import { APIRuleHost } from './APIRules/APIRuleHost';
 
 import { PendingWrapper } from './PendingWrapper';
 import { StatisticalCard } from './StatisticalCard';
+import { RadialChart } from './RadialChart';
 
 export const widgets = {
   Null: () => '',
@@ -42,6 +43,7 @@ export const widgets = {
   Plain,
   ResourceButton,
   ExternalLinkButton,
+  RadialChart,
   ResourceLink,
   ResourceList,
   ResourceRefs,

src/components/Extensibility/hooks/useJsonata.ts

@@ -14,7 +14,7 @@ type JsonataValue = [string, Error | null];
 type JsonataFunction = {
   (
     query: string,
-    extras: { [key: string]: any },
+    extras?: { [key: string]: any },
     defaultValue?: any,
   ): JsonataValue;
   async: (

src/shared/components/UI5RadialChart/UI5RadialChart.js

@@ -56,5 +56,4 @@ UI5RadialChart.propTypes = {
   value: PropTypes.number.isRequired,
   max: PropTypes.number.isRequired,
   onClick: PropTypes.func,
-  title: PropTypes.string,
 };