refactor(uikit): replace isDuration with deltaUnit in DeltaDisplay

Signed-off-by: samarthsinh2660 <rajuvala80@gmail.com>

Author: samarthsinh2660

frontend/app/components/modules/widget/config/development/median-time-to-close/median-time-to-close.vue

@@ -18,7 +18,7 @@ SPDX-License-Identifier: MIT
           <lfx-delta-display
             v-if="selectedTimeRangeKey !== dateOptKeys.alltime"
             :summary="summary"
-            is-duration
+            :delta-unit="FormatterUnits.SECONDS"
             is-reverse
           />
         </div>
@@ -50,6 +50,7 @@ SPDX-License-Identifier: MIT
 import { useRoute } from 'nuxt/app';
 import { ref, computed, watch } from 'vue';
 import { storeToRefs } from 'pinia';
+import { FormatterUnits } from '~/components/shared/types/formatter.types';
 import type { MedianTimeToClose } from '~~/types/development/responses.types';
 import type { Summary } from '~~/types/shared/summary.types';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';

frontend/app/components/modules/widget/config/development/median-time-to-review/median-time-to-review.vue

@@ -18,7 +18,7 @@ SPDX-License-Identifier: MIT
           <lfx-delta-display
             v-if="selectedTimeRangeKey !== dateOptKeys.alltime"
             :summary="summary"
-            is-duration
+            :delta-unit="FormatterUnits.SECONDS"
             is-reverse
           />
         </div>
@@ -50,6 +50,7 @@ SPDX-License-Identifier: MIT
 import { useRoute } from 'nuxt/app';
 import { ref, computed, watch } from 'vue';
 import { storeToRefs } from 'pinia';
+import { FormatterUnits } from '~/components/shared/types/formatter.types';
 import type { MedianTimeToReview } from '~~/types/development/responses.types';
 import type { Summary } from '~~/types/shared/summary.types';
 import LfxDeltaDisplay from '~/components/uikit/delta-display/delta-display.vue';

frontend/app/components/uikit/delta-display/delta-display.stories.ts

@@ -1,6 +1,7 @@
 // Copyright (c) 2025 The Linux Foundation and each contributor.
 // SPDX-License-Identifier: MIT
 import LfxDeltaDisplay from './delta-display.vue';
+import { FormatterUnits } from '~/components/shared/types/formatter.types';
 import type { Summary } from '~~/types/shared/summary.types';
 
 export default {
@@ -38,10 +39,10 @@ export default {
       description: 'Unit to display after the numeric values (e.g., "%", "ms", "K")',
       control: 'text',
     },
-    isDuration: {
-      description: 'Formats values as duration (e.g., "2h 30m")',
-      defaultValue: false,
-      control: 'boolean',
+    deltaUnit: {
+      description: 'Formats values as duration with a specific unit (e.g., "seconds", "minutes")',
+      control: 'select',
+      options: Object.values(FormatterUnits),
     },
     isShort: {
       description: 'Uses short number formatting (e.g., "1.2K" instead of "1,200")',
@@ -108,7 +109,7 @@ export const Reversed = {
 export const Duration = {
   args: {
     summary: createSummary(7200, 3600), // 2 hours vs 1 hour in seconds
-    isDuration: true,
+    deltaUnit: FormatterUnits.SECONDS,
     isReverse: false,
   },
 };

frontend/app/components/uikit/delta-display/delta-display.vue

@@ -57,20 +57,19 @@ const deltaDirection = computed<'positive' | 'negative'>(() => {
   return value >= 0 ? 'positive' : 'negative';
 });
 
-// TODO: remove isDuration and use deltaUnit instead
 const delta = computed(() => {
   const value = props.summary.changeValue;
-  const changeDuration = formatSecondsToDuration(Math.abs(value), 'short');
+  const changeDuration = formatSecondsToDuration(Math.abs(value), 'short', props.deltaUnit);
   const changeValue = props.isShort ? formatNumberShort(value) : formatNumber(value, props.decimals || 1);
 
   const sign = value >= 0 ? '+' : '';
-  return sign + (props.isDuration ? changeDuration : changeValue);
+  return sign + (props.deltaUnit ? changeDuration : changeValue);
 });
 
 const deltaColor = computed(() => (deltaDirection.value === 'negative' ? 'text-negative-600' : 'text-positive-600'));
 
 const deltaDisplay = computed(() => {
-  const unit = props.isDuration ? '' : props.unit;
+  const unit = props.deltaUnit ? '' : props.unit;
   if (!props.percentageOnly) {
     return isHidePercentage.value ? `${delta.value}${unit || ''}` : `(${delta.value}${unit || ''})`;
   }
@@ -82,9 +81,9 @@ const deltaIcon = computed(() => (props.summary.changeValue < 0 ? 'circle-arrow-
 
 const previousDisplay = computed(() => {
   if (!props.hidePreviousValue) {
-    const unit = props.isDuration ? '' : props.unit;
-    const previousValue = props.isDuration
-      ? formatSecondsToDuration(props.summary.previous || 0, 'short')
+    const unit = props.deltaUnit ? '' : props.unit;
+    const previousValue = props.deltaUnit
+      ? formatSecondsToDuration(props.summary.previous || 0, 'short', props.deltaUnit)
       : formatNumber(props.summary.previous, props.percentageOnly ? 1 : props.decimals);
     return `${previousValue}${unit || ''}`;
   }

frontend/app/components/uikit/delta-display/types/delta-display.types.ts

@@ -1,5 +1,6 @@
 // Copyright (c) 2025 The Linux Foundation and each contributor.
 // SPDX-License-Identifier: MIT
+import type { FormatterUnits } from '~/components/shared/types/formatter.types';
 import type { Summary } from '~~/types/shared/summary.types';
 
 export type DeltaDisplayProps = {
@@ -9,7 +10,7 @@ export type DeltaDisplayProps = {
   hidePreviousValue?: boolean;
   percentageOnly?: boolean;
   unit?: string;
-  isDuration?: boolean;
+  deltaUnit?: FormatterUnits;
   isShort?: boolean;
   decimals?: number;
 };