handle 0 value durations

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" />
@@ -20,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" />
+);

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

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