From e874886b61c6e8cd2c77855de1d36ba7ec464d7f Mon Sep 17 00:00:00 2001 From: Janto Lima Date: Wed, 28 Feb 2024 14:47:19 +0100 Subject: [PATCH 1/3] feat: add formatter to central text in piewidgetui --- .../react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js | 2 +- .../widgets/PieWidgetUI/components/PieCentralText.js | 5 +++-- packages/react-ui/src/widgets/utils/chartUtils.js | 11 ++++++----- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js b/packages/react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js index 2ba7b0006..9573a2244 100644 --- a/packages/react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js +++ b/packages/react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js @@ -233,7 +233,7 @@ function PieWidgetUI({ )} - + ({ 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 }; diff --git a/packages/react-ui/src/widgets/utils/chartUtils.js b/packages/react-ui/src/widgets/utils/chartUtils.js index 3815a941b..05cda8d2b 100644 --- a/packages/react-ui/src/widgets/utils/chartUtils.js +++ b/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 ? formatter(percentage) : `${percentage.toFixed(2)}%`; } From 8f1e9216c883f6bb225ccaf43a101b421dfdeedb Mon Sep 17 00:00:00 2001 From: Janto Lima Date: Thu, 29 Feb 2024 16:57:48 +0100 Subject: [PATCH 2/3] fix: add default intl formatter fix: remove default props formatter ui --- .../react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js | 12 +++++++++--- packages/react-ui/src/widgets/utils/chartUtils.js | 6 +++--- .../stories/widgetsUI/PieWidgetUI.stories.js | 4 +++- 3 files changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js b/packages/react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js index 9573a2244..0b61cc906 100644 --- a/packages/react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js +++ b/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({ )} - + v, tooltipFormatter, colors: [], labels: {}, diff --git a/packages/react-ui/src/widgets/utils/chartUtils.js b/packages/react-ui/src/widgets/utils/chartUtils.js index 05cda8d2b..fc275476b 100644 --- a/packages/react-ui/src/widgets/utils/chartUtils.js +++ b/packages/react-ui/src/widgets/utils/chartUtils.js @@ -95,11 +95,11 @@ export function findLargestCategory(array) { // Calculate the percentage of a value in relation to a total export function calculatePercentage(value, total, formatter) { - let percentage = 0 + let percentage = 0; if (total !== 0) { - percentage = (value / total) * 100 + percentage = (value / total) * 100; } - return formatter ? formatter(percentage) : `${percentage.toFixed(2)}%`; + return formatter(percentage); } diff --git a/packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js index 09fed5e7c..311d486e7 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js +++ b/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({}); From abd25472d5968db8fc72442408806e5053de4a85 Mon Sep 17 00:00:00 2001 From: Janto Lima Date: Thu, 29 Feb 2024 17:35:46 +0100 Subject: [PATCH 3/3] chore: add example to storybook of PieWidgetUI chore: add entry to CHANGELOG.md --- CHANGELOG.md | 3 ++- .../storybook/stories/widgetsUI/PieWidgetUI.stories.js | 8 ++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 90a325c7d..4b205ce03 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js index 311d486e7..e5ca4c9c0 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js @@ -130,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;