Add support for customizing the value of DonutSummary

[lishichengyan]

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'];
 <Chart
   data={donutData}
   colorScheme="light"
   colors={colors}
   height={110}
   width={110}
   >
    <Donut color="id" metric="value">
      <DonutSummary label={'Good'} />
    </Donut>
  </Chart>

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 -

<DonutSummary label={someLabel} value={someValue}/>

💁 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

[lishichengyan]

I found a workaround for this issue, in case anyone else runs into a similar situation -

  const getColors = score => {
    if (score >= 8) {
      return ['static-green-800', 'gray-200'];
    } else if (score >= 5) {
      return ['static-yellow-600', 'gray-200'];
    }
    return ['static-red-800', 'gray-200'];
  };

  // round to 2 decimal places
  const roundTo2 = num => Math.round(num * 100) / 100;

  const getData = score => [
      { id: '1', value: roundTo2(score * (score / 10)) },
      { id: '2', value: roundTo2(score * (1 - score / 10)) },
    ];

// Details omitted
          <Chart
            data={getData(score)}
            colorScheme="light"
            colors={getColors(score)}
            height={110}
            width={110}
          >
            <Donut color="id" metric="value">
              <DonutSummary label={'out of 10'} />
            </Donut>
          </Chart>

[c-lamoureux]

We have plans to make this more intuitive in the future. We don't have a concrete timeline for release yet. We'll follow up once we have more details.