From cb916208940b34aec2fff6e82dc79992aa203a61 Mon Sep 17 00:00:00 2001
From: Stephanie Yang <steph@goodcode.us>
Date: Wed, 11 Sep 2024 15:02:15 -0400
Subject: [PATCH 1/2] handle 0 value durations

---
 src/data/Duration/Duration.story.tsx | 4 ++++
 src/data/Duration/utils.ts           | 4 +++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/data/Duration/Duration.story.tsx b/src/data/Duration/Duration.story.tsx
index e562d874..2c0b3607 100644
--- a/src/data/Duration/Duration.story.tsx
+++ b/src/data/Duration/Duration.story.tsx
@@ -8,6 +8,10 @@ export default {
 
 export const Simple = () => (
   <Fragment>
+    <Duration value="0" />
+    <br />
+    <Duration value="1" />
+    <br />
     <Duration value="125" />
     <br />
     <Duration value="256" />
diff --git a/src/data/Duration/utils.ts b/src/data/Duration/utils.ts
index 152b4640..f7671a2f 100644
--- a/src/data/Duration/utils.ts
+++ b/src/data/Duration/utils.ts
@@ -27,7 +27,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 '0 ms';
+  } else if (value === 1) {
     return humanized;
   }
 

From ca93f663111c026320facb87d4fca3c5e5d021da Mon Sep 17 00:00:00 2001
From: Stephanie Yang <steph@goodcode.us>
Date: Wed, 11 Sep 2024 17:22:09 -0400
Subject: [PATCH 2/2] allow custom 0 value display

---
 src/data/Duration/Duration.story.tsx |  8 ++++++--
 src/data/Duration/Duration.tsx       | 13 ++++++++++---
 src/data/Duration/utils.ts           |  8 ++++++--
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/data/Duration/Duration.story.tsx b/src/data/Duration/Duration.story.tsx
index 2c0b3607..1dd55e83 100644
--- a/src/data/Duration/Duration.story.tsx
+++ b/src/data/Duration/Duration.story.tsx
@@ -24,13 +24,17 @@ export const Simple = () => (
   </Fragment>
 );
 
+export const CustomZero = () => <Duration value="0" zeroValue="No value" />;
+
 export const Empty = () => (
   <Fragment>
     <Duration value={null} />
     <br />
     <Duration value={undefined} />
     <br />
-    <Duration value={null} emptyValue="Nothing to see" />
-    <br />
   </Fragment>
 );
+
+export const CustomEmpty = () => (
+  <Duration value={null} emptyValue="Nothing to see" />
+);
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<DurationProps> = ({ value, emptyValue = 'N/A' }) => (
-  <>{formatDuration(value, emptyValue)}</>
-);
+export const Duration: FC<DurationProps> = ({
+  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 f7671a2f..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
@@ -28,7 +32,7 @@ export function formatDuration(time: DurationFormatTypes, emptyValue = 'N/A') {
 
   const value = parseFloat(valueStr);
   if (value === 0) {
-    return '0 ms';
+    return zeroValue;
   } else if (value === 1) {
     return humanized;
   }