Extract formatPercentChange

Author: Kobzol

site/frontend/src/pages/compare/artifact-size/artifact-size-table.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import {ArtifactDescription} from "../types";
-import {diffClass, formatSize} from "../shared";
+import {
+  diffClass,
+  formatPercentChange,
+  formatSize,
+  isValidValue,
+} from "../shared";
+import Tooltip from "../tooltip.vue";
 
 const props = defineProps<{
   a: ArtifactDescription;
@@ -31,14 +37,14 @@ function formatName(component: string): string {
 }
 
 function formatValue(value: number | undefined): string {
-  if (value === undefined) {
+  if (!isValidValue(value)) {
     return "-";
   }
   return formatSize(value);
 }
 
 function formatChange(a: number | undefined, b: number | undefined): string {
-  if (a === undefined || b === undefined) {
+  if (!isValidValue(a) || !isValidValue(b)) {
     return "-";
   }
   const diff = b - a;
@@ -49,18 +55,8 @@ function formatChange(a: number | undefined, b: number | undefined): string {
   return formatted;
 }
 
-function formatPercentChange(
-  a: number | undefined,
-  b: number | undefined
-): string {
-  if (a === undefined || b === undefined) {
-    return "-";
-  }
-  return `${(((b - a) / a) * 100).toFixed(3)}%`;
-}
-
 function getClass(a: number | undefined, b: number | undefined): string {
-  if (a === undefined || b === undefined || a == b) {
+  if (!isValidValue(a) || !isValidValue(b) || a == b) {
     return "";
   }
   return diffClass(b - a);

site/frontend/src/pages/compare/shared.ts

@@ -50,3 +50,20 @@ export function formatSize(size: number): string {
   }
   return `${size} B`;
 }
+
+// Formats a percentual change between two values
+export function formatPercentChange(
+  before: number | undefined,
+  after: number | undefined,
+  invalidPlaceholder: string = "-"
+): string {
+  if (!isValidValue(before) || !isValidValue(after)) {
+    return invalidPlaceholder;
+  }
+  return `${(((after - before) / before) * 100).toFixed(3)}%`;
+}
+
+// Checks if the value is not undefined and not zero
+export function isValidValue(size: number | undefined): boolean {
+  return size !== undefined && size !== 0;
+}

site/frontend/src/pages/compare/tabs.vue

@@ -1,7 +1,12 @@
 <script setup lang="tsx">
 import {computed, h, ref, Ref} from "vue";
 import {CompareResponse, Tab} from "./types";
-import {diffClass, formatSize, percentClass} from "./shared";
+import {
+  diffClass,
+  formatPercentChange,
+  formatSize,
+  percentClass,
+} from "./shared";
 import {SummaryGroup} from "./data";
 import SummaryPercentValue from "./summary/percent-value.vue";
 import SummaryRange from "./summary/range.vue";
@@ -156,7 +161,7 @@ const activeTab: Ref<Tab> = ref(props.initialTab);
         >
           {{ totalSizeB < totalSizeA ? "-" : ""
           }}{{ formatSize(Math.abs(totalSizeB - totalSizeA)) }} ({{
-            (((totalSizeB - totalSizeA) / totalSizeA) * 100).toFixed(3)
+            formatPercentChange(totalSizeA, totalSizeB)
           }}%)
         </div>
       </div>