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;
}