feat(DGT-342): Coral Quality Bars

.changeset/mean-monkeys-look.md

@@ -0,0 +1,6 @@
+---
+"@talend/design-system": minor
+"@talend/react-components": minor
+---
+
+feat(DGT-342): Moved QualityBar and RatioBar components to the Design System and use those components on @talend/react-components

packages/components/src/QualityBar/QualityBar.component.tsx

@@ -1,100 +1,72 @@
-import type { MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
 
-import { EnrichedQualityType, QualityBarPercentages, QualityCommonProps } from './QualityBar.types';
-import { QualityBarRatioBars } from './QualityBarRatioBars.component';
-import { SplitQualityBar } from './SplitQualityBar.component';
+import { QualityBar as QualityBarDS, type QualityCommonProps } from '@talend/design-system';
+
+import I18N_DOMAIN_COMPONENTS from '../constants';
 
 export type QualityBarProps = QualityCommonProps & {
-	disabled?: boolean;
-	placeholder?: number;
 	digits?: number;
 	split?: boolean;
-	onClick?: (e: MouseEvent<HTMLElement>, data: { type: EnrichedQualityType }) => void;
-	getDataFeature?: (type: string) => string;
 };
 
-/**
- * This function round up the percentages to make it to 100%
- * based on https://stackoverflow.com/questions/13483430/how-to-make-rounded-percentages-add-up-to-100#answer-13483486
- * @param {number} invalidRaw number of invalid raw
- * @param {number} emptyRaw number of empty raw
- * @param {number} validRaw number of valid raw
- * @param {number} naRaw number of not applicable raw
- * @param {number} digits number of digits we want to keep
- */
-function getQualityPercentagesRounded(
-	digits: number,
-	invalid = 0,
-	empty = 0,
-	valid = 0,
-	na = 0,
-	placeholder = 0,
-): Required<QualityBarPercentages> {
-	const output: Required<QualityBarPercentages> = {
-		empty: 0,
-		invalid: 0,
-		na: 0,
-		placeholder: 0,
-		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);
-
-	sumValues += (empty * multiplier) / total;
-	output.empty = Math.round(sumValues - sumRounded) / digitMultiplier;
-	sumRounded = Math.round(sumValues);
-
-	sumValues += (valid * multiplier) / total;
-	output.valid = Math.round(sumValues - sumRounded) / digitMultiplier;
-	sumRounded = Math.round(sumValues);
-
-	sumValues += (na * multiplier) / total;
-	output.na = Math.round(sumValues - sumRounded) / digitMultiplier;
-
-	sumValues += (placeholder * multiplier) / total;
-	output.placeholder = Math.round(sumValues - sumRounded) / digitMultiplier;
-
-	return output;
-}
-
-export function QualityBar({
+export const QualityBar = ({
 	valid,
 	invalid,
 	empty,
 	na,
 	placeholder,
 	digits = 1,
-	split = false,
 	...rest
-}: QualityBarProps) {
-	const percentages = getQualityPercentagesRounded(digits, invalid, empty, valid, na, placeholder);
-	return split ? (
-		<SplitQualityBar
-			valid={valid}
-			invalid={invalid}
-			empty={empty}
-			na={na}
-			percentages={percentages}
-			{...rest}
-		/>
-	) : (
-		<QualityBarRatioBars
+}: QualityBarProps) => {
+	const { t } = useTranslation(I18N_DOMAIN_COMPONENTS);
+
+	const percentages = QualityBarDS.getQualityPercentagesRounded(
+		digits,
+		invalid,
+		empty,
+		valid,
+		na,
+		placeholder,
+	);
+
+	return (
+		<QualityBarDS
 			valid={valid}
 			invalid={invalid}
 			empty={empty}
 			na={na}
 			placeholder={placeholder}
-			percentages={percentages}
+			tooltipLabels={{
+				empty: t('EMPTY_VALUES', {
+					defaultValue: '{{value}} empty value ({{percentage}}%)',
+					defaultValue_other: '{{value}} empty valuesssss ({{percentage}}%)',
+					count: empty,
+					percentage: percentages.empty,
+					value: QualityBarDS.formatNumber(empty),
+				}),
+				invalid: t('INVALID_VALUES', {
+					defaultValue: '{{value}} invalid value ({{percentage}}%)',
+					defaultValue_other: '{{value}} invalid values ({{percentage}}%)',
+					count: invalid,
+					percentage: percentages.invalid,
+					value: QualityBarDS.formatNumber(invalid),
+				}),
+				na: t('NOT_APPLICABLE_VALUES', {
+					defaultValue: '{{value}} not applicable value ({{percentage}}%)',
+					defaultValue_other: '{{value}} not applicable values ({{percentage}}%)',
+					count: na,
+					percentages: percentages.na,
+					value: QualityBarDS.formatNumber(na),
+				}),
+				valid: t('VALID_VALUES', {
+					defaultValue: '{{value}} valid value ({{percentage}}%)',
+					defaultValue_other: '{{value}} valid values ({{percentage}}%)',
+					count: valid,
+					percentage: percentages.valid,
+					value: QualityBarDS.formatNumber(valid),
+				}),
+			}}
 			{...rest}
 		/>
 	);
-}
+};

packages/components/src/QualityBar/QualityBar.stories.tsx

@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+
 import { QualityBar } from './QualityBar.component';
 
 export default {

packages/components/src/QualityBar/index.ts

@@ -1,7 +1,5 @@
-import { QualityBar } from './QualityBar.component';
-import { QualityType } from './QualityBar.types';
+import { QualityType } from '@talend/design-system';
 
-// @ts-ignore
-QualityBar.QualityType = QualityType;
+import { QualityBar } from './QualityBar.component';
 
 export { QualityBar, QualityType };