diff --git a/src/data/Duration/Duration.story.tsx b/src/data/Duration/Duration.story.tsx index e562d874..1dd55e83 100644 --- a/src/data/Duration/Duration.story.tsx +++ b/src/data/Duration/Duration.story.tsx @@ -8,6 +8,10 @@ export default { export const Simple = () => ( + +
+ +

@@ -20,13 +24,17 @@ export const Simple = () => (
); +export const CustomZero = () => ; + export const Empty = () => (

- -
); + +export const CustomEmpty = () => ( + +); diff --git a/src/data/Duration/Duration.tsx b/src/data/Duration/Duration.tsx index bc805adc..8a6d2a45 100644 --- a/src/data/Duration/Duration.tsx +++ b/src/data/Duration/Duration.tsx @@ -11,8 +11,15 @@ export interface DurationProps { * If the value is undefined/null it will return this value. */ emptyValue?: string; + + /** + * If the value is 0 it will return this value. Default to '0 ms' + */ + zeroValue?: string; } -export const Duration: FC = ({ value, emptyValue = 'N/A' }) => ( - <>{formatDuration(value, emptyValue)} -); +export const Duration: FC = ({ + value, + emptyValue = 'N/A', + zeroValue = '0 ms' +}) => <>{formatDuration(value, emptyValue, zeroValue)}; diff --git a/src/data/Duration/utils.ts b/src/data/Duration/utils.ts index 152b4640..0f24285b 100644 --- a/src/data/Duration/utils.ts +++ b/src/data/Duration/utils.ts @@ -12,7 +12,11 @@ const timeScale = new humanFormat.Scale({ month: 2592000 * 1000 }); -export function formatDuration(time: DurationFormatTypes, emptyValue = 'N/A') { +export function formatDuration( + time: DurationFormatTypes, + emptyValue = 'N/A', + zeroValue = '0 ms' +) { let newTime = time; // Try and tease out the different formats users might pass @@ -27,7 +31,9 @@ export function formatDuration(time: DurationFormatTypes, emptyValue = 'N/A') { const [valueStr, unitStr] = humanized.split(' '); const value = parseFloat(valueStr); - if (value === 1) { + if (value === 0) { + return zeroValue; + } else if (value === 1) { return humanized; }