chore: move QualityBar component to @talend/design-system

.changeset/afraid-penguins-sort.md

@@ -0,0 +1,5 @@
+---
+'@talend/design-system': minor
+---
+
+chore: move QualityBar component to @talend/design-system

packages/components/src/RatioBar/RatioBar.component.js

@@ -1,8 +1,11 @@
-import PropTypes from 'prop-types';
 import { Trans } from 'react-i18next';
-import { RatioBarComposition } from './RatioBarComposition.component';
-import { EmptyLine, FilledLine, ErrorLine } from './RatioBarLines.component';
+
+import PropTypes from 'prop-types';
+
 import { getTheme } from '../theme';
+import { RatioBarComposition } from './RatioBarComposition.component';
+import { EmptyLine, ErrorLine, FilledLine } from './RatioBarLines.component';
+
 import ratioBarTheme from './RatioBar.module.scss';
 
 const theme = getTheme(ratioBarTheme);

packages/design-system/src/components/QualityBar/QualityBar.component.test.tsx

@@ -0,0 +1,111 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+
+import { QualityBar, QualityBarProps } from './QualityBar.component';
+
+describe('QualityBar', () => {
+	describe('QualityBar component in classic mode', () => {
+		it('should render a quality bar', () => {
+			// given
+			const props: QualityBarProps = {
+				valid: 523,
+				invalid: 123,
+				empty: 332,
+			};
+
+			// when
+			render(<QualityBar {...props} />);
+
+			// then
+			expect(screen.getByTestId('quality-bar-valid')).toBeInTheDocument();
+			expect(screen.getByTestId('quality-bar-invalid')).toBeInTheDocument();
+			expect(screen.getByTestId('quality-bar-empty')).toBeInTheDocument();
+			expect(screen.queryByTestId('quality-bar-na')).not.toBeInTheDocument();
+			expect(screen.queryByTestId('quality-bar-placeholder')).not.toBeInTheDocument();
+		});
+
+		it('should render quality bar with just na and placeholder', () => {
+			// given
+			const props: QualityBarProps = {
+				na: 10,
+				placeholder: 100,
+			};
+
+			// when
+			render(<QualityBar {...props} />);
+
+			// then
+			expect(screen.queryByTestId('quality-bar-valid')).not.toBeInTheDocument();
+			expect(screen.queryByTestId('quality-bar-invalid')).not.toBeInTheDocument();
+			expect(screen.queryByTestId('quality-bar-empty')).not.toBeInTheDocument();
+			expect(screen.getByTestId('quality-bar-na')).toBeInTheDocument();
+			expect(screen.getByTestId('quality-bar-placeholder')).toBeInTheDocument();
+		});
+
+		it('should render a quality bar in a disabled state', () => {
+			// given
+			const props: QualityBarProps = {
+				valid: 523,
+				invalid: 123,
+				empty: 332,
+				disabled: true,
+			};
+
+			// when
+			render(<QualityBar {...props} />);
+
+			// then
+			expect(screen.queryByTestId('quality-bar-valid')).not.toBeInTheDocument();
+			expect(screen.queryByTestId('quality-bar-invalid')).not.toBeInTheDocument();
+			expect(screen.queryByTestId('quality-bar-empty')).not.toBeInTheDocument();
+			expect(screen.queryByTestId('quality-bar-na')).not.toBeInTheDocument();
+			expect(screen.getByTestId('quality-bar-placeholder')).toBeInTheDocument();
+		});
+
+		it('should render an chart with action button', () => {
+			// given
+			const mockFunctionAction = jest.fn();
+			const props = {
+				valid: 523,
+				invalid: 123,
+				empty: 332,
+				na: 100,
+				onClick: mockFunctionAction,
+				getDataFeature: (qualityType: string) => {
+					return `data-feature-${qualityType}`;
+				},
+			};
+
+			// when
+			render(<QualityBar {...props} />);
+			screen.getAllByTestId('quality-bar-valid')[0].click();
+			// then
+			expect(mockFunctionAction).toHaveBeenCalledWith(expect.anything(), { type: 'valid' });
+		});
+	});
+
+	describe('QualityBar component in split mode', () => {
+		it('should render quality bars with numbers', () => {
+			// given
+			const props: QualityBarProps = {
+				valid: 15,
+				invalid: 30,
+				empty: 55,
+				split: true,
+			};
+
+			// when
+			render(<QualityBar {...props} />);
+
+			// then
+			expect(screen.getByText('15%', { collapseWhitespace: true })).toBeInTheDocument();
+			expect(screen.getByTestId('quality-bar-valid')).toBeInTheDocument();
+			expect(screen.getByText('30%', { collapseWhitespace: true })).toBeInTheDocument();
+			expect(screen.getByTestId('quality-bar-invalid')).toBeInTheDocument();
+			expect(screen.getByText('55%', { collapseWhitespace: true })).toBeInTheDocument();
+			expect(screen.getByTestId('quality-bar-empty')).toBeInTheDocument();
+			expect(screen.queryByTestId('quality-bar-na')).not.toBeInTheDocument();
+			expect(screen.getAllByTestId('quality-bar-placeholder')).toHaveLength(3);
+		});
+	});
+});

packages/design-system/src/components/QualityBar/QualityBar.component.tsx

@@ -0,0 +1,100 @@
+import type { MouseEvent } from 'react';
+
+import { EnrichedQualityType, QualityBarPercentages, QualityCommonProps } from './QualityBar.types';
+import { QualityBarRatioBars } from './QualityBarRatioBars.component';
+import { SplitQualityBar } from './SplitQualityBar.component';
+
+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({
+	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
+			valid={valid}
+			invalid={invalid}
+			empty={empty}
+			na={na}
+			placeholder={placeholder}
+			percentages={percentages}
+			{...rest}
+		/>
+	);
+}

packages/design-system/src/components/QualityBar/QualityBar.stories.tsx

@@ -0,0 +1,114 @@
+import { action } from '@storybook/addon-actions';
+
+import { QualityBar } from './QualityBar.component';
+
+export default {
+	title: 'Components/Dataviz/QualityBar',
+};
+
+export const Default = () => (
+	// @ts-ignore
+	<section style={{ 'max-width': 500, padding: 20 }}>
+		<header>Quality Bar</header>
+
+		<div>
+			<div>Homogeneous Quality</div>
+			<QualityBar invalid={30} valid={30} empty={30} />
+
+			<div>Very invalid</div>
+			<QualityBar invalid={30} valid={0} empty={0} />
+
+			<div>Not applicable</div>
+			<QualityBar invalid={30} valid={0} empty={0} na={20} />
+
+			<div>Best quality ever</div>
+			<QualityBar invalid={0} valid={30} empty={0} />
+
+			<div>Nothing to see here</div>
+			<QualityBar invalid={0} valid={0} empty={30} />
+
+			<div>Invalid and Empty</div>
+			<QualityBar invalid={0} valid={30} empty={30} />
+
+			<div>Classic look</div>
+			<QualityBar invalid={2} valid={88} empty={3} />
+
+			<div>Classic look (again yep)</div>
+			<QualityBar invalid={122} valid={1088} empty={293} />
+
+			<div>I really like the digits !</div>
+			<QualityBar invalid={30} valid={30} empty={30} digits={5} />
+
+			<div>With a placeholder</div>
+			<QualityBar invalid={30} valid={0} empty={0} placeholder={70} />
+
+			<div>Disabled</div>
+			<QualityBar invalid={30} valid={0} empty={0} placeholder={70} disabled />
+
+			<div>Classic look with action button</div>
+			<QualityBar
+				invalid={2}
+				valid={88}
+				empty={3}
+				onClick={action('onClickAction')}
+				getDataFeature={qualityType => `data-feature.${qualityType}`}
+			/>
+		</div>
+	</section>
+);
+
+export const SplitBars = () => (
+	// @ts-ignore
+	<section style={{ 'max-width': 500, padding: 20 }}>
+		<header>Quality Bar</header>
+
+		<div>
+			<div>Split quality bar</div>
+			<QualityBar
+				invalid={10}
+				valid={30}
+				empty={30}
+				onClick={action('onSplitQualityBarAction')}
+				getDataFeature={qualityType => `data-feature.${qualityType}`}
+				split
+			/>
+			<QualityBar
+				invalid={0}
+				valid={100}
+				empty={0}
+				onClick={action('onSplitQualityBarAction')}
+				getDataFeature={qualityType => `data-feature.${qualityType}`}
+				split
+			/>
+			<QualityBar
+				invalid={40}
+				valid={60}
+				empty={0}
+				onClick={action('onSplitQualityBarAction')}
+				getDataFeature={qualityType => `data-feature.${qualityType}`}
+				split
+			/>
+			<QualityBar
+				invalid={40}
+				valid={30}
+				empty={15}
+				na={15}
+				onClick={action('onSplitQualityBarAction')}
+				getDataFeature={qualityType => `data-feature.${qualityType}`}
+				split
+			/>
+
+			<div>Disabled</div>
+			<QualityBar
+				disabled
+				invalid={40}
+				valid={30}
+				empty={15}
+				na={15}
+				onClick={action('onSplitQualityBarAction')}
+				getDataFeature={qualityType => `data-feature.${qualityType}`}
+				split
+			/>
+		</div>
+	</section>
+);

packages/design-system/src/components/QualityBar/QualityBar.types.ts

@@ -0,0 +1,19 @@
+export enum QualityType {
+	VALID = 'valid',
+	INVALID = 'invalid',
+	EMPTY = 'empty',
+	NA = 'na',
+}
+
+export type EnrichedQualityType = QualityType | 'placeholder';
+
+export type QualityCommonProps = {
+	valid?: number;
+	invalid?: number;
+	empty?: number;
+	na?: number;
+};
+
+export type QualityBarPercentages = Required<QualityCommonProps> & {
+	placeholder: number;
+};