Merge pull request #24 from buggregator/issue/#23-large-peaks-stat-borad

Issue/#23 large peaks stat borad

Author: butschster

components/StatBoard/StatBoard.stories.ts

@@ -1,12 +1,12 @@
 import { Meta, Story } from "@storybook/vue3";
 import { normalizeProfilerEvent } from "~/utils/normalize-event";
-import StatBoard from '~/components/StatBoard/StatBoard.vue';
-import profilerEventMock from '~/mocks/profiler.json'
-import type { Profiler } from '~/config/types'
+import StatBoard from "~/components/StatBoard/StatBoard.vue";
+import profilerEventMock from "~/mocks/profiler.json";
+import type { Profiler } from "~/config/types";
 
 export default {
   title: "Components/StatBoard",
-  component: StatBoard
+  component: StatBoard,
 } as Meta<typeof StatBoard>;
 
 const Template: Story = (args) => ({
@@ -24,3 +24,15 @@ export const Default = Template.bind({});
 Default.args = {
   cost: (normalizeProfilerEvent(profilerEventMock).payload as Profiler)?.peaks,
 };
+
+export const LargePeaks = Template.bind({});
+
+LargePeaks.args = {
+  cost: {
+    ct: 1,
+    wt: 2062700000,
+    cpu: 447500000,
+    mu: 31121760000,
+    pmu: 30014160000,
+  },
+};

package.json

@@ -8,7 +8,8 @@
     "preview": "nuxi preview",
     "postinstall": "nuxi prepare",
     "prepare": "npx husky install",
-    "lint": "eslint . --fix"
+    "lint": "eslint . --fix",
+    "test": "vitest"
   },
   "type": "module",
   "lint-staged": {
@@ -52,13 +53,13 @@
     "sass": "^1.57.1",
     "storybook-addon-themes": "^6.1.0",
     "typescript": "^4.9.4",
+    "vitest": "^0.34.2",
     "vue-eslint-parser": "^9.1.0"
   },
   "dependencies": {
     "@highlightjs/vue-plugin": "^2.1.2",
     "@hpcc-js/wasm": "^2.8.0",
     "@pinia/nuxt": "^0.4.6",
-    "nuxt": "3.3.3",
     "@storybook/addon-actions": "^6.5.15",
     "@storybook/vue3": "^6.5.16",
     "@vue/shared": "^3.2.45",
@@ -70,6 +71,7 @@
     "highlight.js": "^11.7.0",
     "html-to-image": "^1.11.4",
     "moment": "^2.29.4",
+    "nuxt": "3.3.3",
     "pinia": "^2.0.30",
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.45",

utils/formats.test.ts

@@ -0,0 +1,34 @@
+import { expect, test, describe } from "vitest";
+import { formatDuration } from "./formats";
+
+describe("formatDuration", () => {
+  test("should return correct string for milliseconds", () => {
+    expect(formatDuration(1)).toBe("0.0010 ms");
+    expect(formatDuration(1000)).toBe("1 ms");
+  });
+
+  test("should return correct string for milliseconds negative", () => {
+    expect(formatDuration(-1)).toBe("0.0010 ms");
+    expect(formatDuration(-1000)).toBe("1 ms");
+  });
+
+  test("should return correct string for seconds", () => {
+    expect(formatDuration(1000 * 1000)).toBe("1 s");
+    expect(formatDuration(1000 * 1000 * 59.9999)).toBe("59 s, 999.9000 ms");
+  });
+
+  test("should return correct string for minutes", () => {
+    expect(formatDuration(1000 * 1000 * 60)).toBe("1 m");
+    expect(formatDuration(1000 * 1000 * 60 * 59.9999)).toBe("59 m, 59 s, 994 ms");
+  });
+
+  test("should return correct string for hours", () => {
+    expect(formatDuration(1000 * 1000 * 60 * 60)).toBe("1 h");
+    expect(formatDuration(1000 * 1000 * 60 * 60 * 23.9999)).toBe("23 h, 59 m, 59 s, 640 ms");
+  });
+
+  test("should return correct string for days", () => {
+    expect(formatDuration(1000 * 1000 * 60 * 60 * 24)).toBe("1 d");
+    expect(formatDuration(1000 * 1000 * 60 * 60 * 24 * 364.9999)).toBe("364 d, 23 h, 59 m, 51 s, 360 ms");
+  });
+});

utils/formats.ts

@@ -15,10 +15,17 @@ export const formatDuration = (inputMs: number) => {
   };
 
   return Object.entries(time)
-    .filter((val) => val[1] !== 0)
-    .map((val) => `${val[1].toFixed(4)} ${val[1] !== 1 ? val[0] : val[0]}`)
+    .filter(([_, val]) => val !== 0)
+    .map(
+      ([key, val]) =>
+        `${
+          key === "ms" && Number(val.toFixed(4)) % 1 !== 0
+            ? val.toFixed(4)
+            : val.toFixed(0)
+        } ${key}`
+    )
     .join(", ");
-}
+};
 
 export const humanFileSize = (inputBytes: number) => {
   let bytes = inputBytes;
@@ -38,7 +45,7 @@ export const humanFileSize = (inputBytes: number) => {
   } while (
     Math.round(Math.abs(bytes) * r) / r >= thresh &&
     u < units.length - 1
-    );
+  );
 
   return `${bytes.toFixed(1)} ${units[u]}`;
-}
+};