Add formatter to central text in PieWidgetUI

CHANGELOG.md

@@ -1,7 +1,8 @@
 # CHANGELOG
 
 ## Not released
-
+- Feat PieWidgetUI: Add formatter to central text component and include a default formatted based on useIntl.formatNumber [#843](https://github.com/CartoDB/carto-react/pull/843)
+
 ## 2.3
 
 ### 2.3.12 (2024-02-19)

packages/react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js

@@ -67,7 +67,10 @@ function PieWidgetUI({
   const { showSkeleton } = useSkeleton(isLoading);
   const intl = useIntl();
   const intlConfig = useImperativeIntl(intl);
-
+  let _formatter = formatter;
+  if (!_formatter) {
+    _formatter = (val) => `${intl.formatNumber(val, { maximumFractionDigits: 2 })}%`;
+  }
   // Tooltip
   const tooltipOptions = useMemo(
     () => ({
@@ -233,7 +236,11 @@ function PieWidgetUI({
       )}
 
       <ChartContent height={height} width={width}>
-        <PieCentralText data={processedData} selectedCategories={selectedCategories} />
+        <PieCentralText
+          formatter={_formatter}
+          data={processedData}
+          selectedCategories={selectedCategories}
+        />
 
         <Chart
           option={options}
@@ -256,7 +263,6 @@ function PieWidgetUI({
 
 PieWidgetUI.defaultProps = {
   name: null,
-  formatter: (v) => v,
   tooltipFormatter,
   colors: [],
   labels: {},

packages/react-ui/src/widgets/PieWidgetUI/components/PieCentralText.js

@@ -29,7 +29,7 @@ const MarkerColor = styled(Box)(({ theme }) => ({
   height: theme.spacing(1)
 }));
 
-function PieCentralText({ data, selectedCategories }) {
+function PieCentralText({ data, selectedCategories, formatter }) {
   const [selectedItem, setSelectedItem] = useState({});
 
   // Select the largest category to display in CentralText and calculate its percentage from the total
@@ -57,7 +57,7 @@ function PieCentralText({ data, selectedCategories }) {
       sumValue += category.value;
     }
 
-    const percentage = calculatePercentage(category.value, sumValue);
+    const percentage = calculatePercentage(category.value, sumValue, formatter);
     category.percentage = percentage;
 
     return category;
@@ -96,6 +96,7 @@ PieCentralText.propTypes = {
       color: PropTypes.string
     })
   ),
+  formatter: PropTypes.func,
   selectedCategories: PropTypes.array
 };
 

packages/react-ui/src/widgets/utils/chartUtils.js

@@ -94,11 +94,12 @@ export function findLargestCategory(array) {
 }
 
 // Calculate the percentage of a value in relation to a total
-export function calculatePercentage(value, total) {
-  if (total === 0) {
-    return '0.00%'; // Avoid division by zero
+export function calculatePercentage(value, total, formatter) {
+  let percentage = 0;
+
+  if (total !== 0) {
+    percentage = (value / total) * 100;
   }
 
-  const percentage = ((value / total) * 100).toFixed(2); // Limit to two decimals
-  return `${percentage}%`;
+  return formatter(percentage);
 }

packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js

@@ -58,7 +58,9 @@ const LoadingTemplate = (args) => {
 };
 
 export const Default = Template.bind({});
-const DefaultProps = { data: dataDefault };
+const DefaultProps = {
+  data: dataDefault
+};
 Default.args = DefaultProps;
 
 export const CustomColors = Template.bind({});
@@ -128,3 +130,11 @@ CollapseMoreThan12Categories.args = CollapseCategoriesProps;
 export const Loading = LoadingTemplate.bind({});
 const LoadingProps = { data: dataDefault, isLoading: true };
 Loading.args = LoadingProps;
+
+const customFormatterFn = (value) => `${value.toFixed(2)} units`;
+export const CustomFormatter = Template.bind({});
+const CustomFormatterProps = {
+  data: dataDefault,
+  formatter: customFormatterFn
+};
+CustomFormatter.args = CustomFormatterProps;