Add support for customizing the value of DonutSummary

### Provide a general summary of the feature here

For Donut charts, the summary in the center always displays the total value of all slices by default, for example -

```
const donutData = [
{ id: '1', value: 3 },
{ id: '2', value: 7 },
];
colors = ['static-green-800', 'gray-200'];





```

renders

Is there a way to customize it so that only the value of the green slice (i.e. the slice with id=1) is shown instead?

### 🤔 Expected Behavior?

Can customize the value of `DonutSummary`, maybe provide a prop -
```

```

### 💁 Possible Solution

_No response_

### 🔦 Context

Working on a project where we need to display a measurement score out of 10. We'd like to visualize it using a donut chart, with the score (not the sum) shown in the center.

### 💻 Examples

Here's a mock -

### 🧢 Your Company/Team

_No response_

Start by locating the DonutSummary component and the Donut chart tests or usage examples. Implement support for displaying a caller-provided value instead of only the total of all slices, and confirm that the existing default behavior remains unchanged.

Written by the indexing model from the issue text.