From 6ff9f03efd7eeabd1d30c551fd3e2ce356747871 Mon Sep 17 00:00:00 2001
From: Duarte Caldeira <124570762+dlcaldeira@users.noreply.github.com>
Date: Fri, 24 May 2024 10:46:54 +0100
Subject: [PATCH] fix(DGT-528): Fix the rounding issue of QualityBar
 percentages

---
 .changeset/many-camels-agree.md               |  5 +++
 .../QualityBar/QualityRatioBar.utils.ts       | 36 +++++++++----------
 2 files changed, 23 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/many-camels-agree.md

diff --git a/.changeset/many-camels-agree.md b/.changeset/many-camels-agree.md
new file mode 100644
index 00000000000..d615d6bce13
--- /dev/null
+++ b/.changeset/many-camels-agree.md
@@ -0,0 +1,5 @@
+---
+"@talend/design-system": patch
+---
+
+DGT-528: Fix QualityBar rounding issue when the invalid or empty percentages were rounded to 0. Set a miminum value for the rounding to prevent UI inconsistencies
diff --git a/packages/design-system/src/components/QualityBar/QualityRatioBar.utils.ts b/packages/design-system/src/components/QualityBar/QualityRatioBar.utils.ts
index ad141045f73..f2318cf7d35 100644
--- a/packages/design-system/src/components/QualityBar/QualityRatioBar.utils.ts
+++ b/packages/design-system/src/components/QualityBar/QualityRatioBar.utils.ts
@@ -35,7 +35,7 @@ export const getQualityPercentagesRounded = (
 	empty: number = 0,
 	valid: number = 0,
 	na: number = 0,
-	placeholder = 0,
+	placeholder: number = 0,
 ): Required<QualityBarPercentages> => {
 	const output: Required<QualityBarPercentages> = {
 		empty: 0,
@@ -45,30 +45,30 @@ export const getQualityPercentagesRounded = (
 		valid: 0,
 	};
 
-	let sumValues = 0;
-	let sumRounded = 0;
 	const digitMultiplier = Math.pow(10, digits);
-	const multiplier = 100 * digitMultiplier;
-
 	const total = invalid + empty + valid + na + placeholder;
 
-	sumValues = (invalid * multiplier) / total;
-	output.invalid = Math.round(sumValues - sumRounded) / digitMultiplier;
-	sumRounded = Math.round(sumValues);
+	if (total === 0) {
+		return output;
+	}
+
+	const minPercentage = 1 / digitMultiplier;
+
+	output.invalid = +(invalid > 0 ? Math.max((invalid * 100) / total, minPercentage) : 0).toFixed(
+		digits,
+	);
 
-	sumValues += (empty * multiplier) / total;
-	output.empty = Math.round(sumValues - sumRounded) / digitMultiplier;
-	sumRounded = Math.round(sumValues);
+	output.empty = +(empty > 0 ? Math.max((empty * 100) / total, minPercentage) : 0).toFixed(digits);
 
-	sumValues += (valid * multiplier) / total;
-	output.valid = Math.round(sumValues - sumRounded) / digitMultiplier;
-	sumRounded = Math.round(sumValues);
+	output.na = +(na > 0 ? Math.max((na * 100) / total, minPercentage) : 0).toFixed(digits);
 
-	sumValues += (na * multiplier) / total;
-	output.na = Math.round(sumValues - sumRounded) / digitMultiplier;
+	output.placeholder = +(
+		placeholder > 0 ? Math.max((placeholder * 100) / total, minPercentage) : 0
+	).toFixed(digits);
 
-	sumValues += (placeholder * multiplier) / total;
-	output.placeholder = Math.round(sumValues - sumRounded) / digitMultiplier;
+	output.valid = +(100 - output.invalid - output.empty - output.na - output.placeholder).toFixed(
+		digits,
+	);
 
 	return output;
 };