1 files changed, 88 insertions, 85 deletions
diff --git a/src/tools/benchmark-builder/benchmark-builder.vue b/src/tools/benchmark-builder/benchmark-builder.vue
index be350f2..d6642cc 100644
--- a/src/tools/benchmark-builder/benchmark-builder.vue
+++ b/src/tools/benchmark-builder/benchmark-builder.vue
@@ -1,89 +1,9 @@
-<template>
-  <n-scrollbar style="flex: 1" x-scrollable>
-    <div mb-5 flex flex-1 flex-nowrap justify-center gap-12px>
-      <div v-for="(suite, index) of suites" :key="index">
-        <c-card style="width: 294px">
-          <c-input-text
-            v-model:value="suite.title"
-            label-position="left"
-            label="Suite name"
-            placeholder="Suite name..."
-            clearable
-          />
-
-          <n-divider></n-divider>
-          <n-form-item label="Suite values" :show-feedback="false">
-            <dynamic-values v-model:values="suite.data" />
-          </n-form-item>
-        </c-card>
-
-        <div flex justify-center>
-          <c-button v-if="suites.length > 1" variant="text" @click="suites.splice(index, 1)">
-            <n-icon :component="Trash" depth="3" mr-2 size="18" />
-            Delete suite
-          </c-button>
-          <c-button
-            variant="text"
-            @click="suites.splice(index + 1, 0, { data: [0], title: `Suite ${suites.length + 1}` })"
-          >
-            <n-icon :component="Plus" depth="3" mr-2 size="18" />
-            Add suite
-          </c-button>
-        </div>
-      </div>
-    </div>
-  </n-scrollbar>
-
-  <div style="flex: 0 0 100%">
-    <div style="max-width: 600px; margin: 0 auto">
-      <div mx-auto max-w-sm flex justify-center gap-3>
-        <c-input-text v-model:value="unit" placeholder="Unit (eg: ms)" label="Unit" label-position="left" mb-4 />
-
-        <c-button
-          @click="
-            suites = [
-              { title: 'Suite 1', data: [] },
-              { title: 'Suite 2', data: [] },
-            ]
-          "
-          >Reset suites</c-button
-        >
-      </div>
-
-      <n-table>
-        <thead>
-          <tr>
-            <th>{{ header.position }}</th>
-            <th>{{ header.title }}</th>
-            <th>{{ header.size }}</th>
-            <th>{{ header.mean }}</th>
-            <th>{{ header.variance }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="{ title, size, mean, variance, position } of results" :key="title">
-            <td>{{ position }}</td>
-            <td>{{ title }}</td>
-            <td>{{ size }}</td>
-            <td>{{ mean }}</td>
-            <td>{{ variance }}</td>
-          </tr>
-        </tbody>
-      </n-table>
-      <div mt-5 flex justify-center gap-3>
-        <c-button @click="copyAsMarkdown">Copy as markdown table</c-button>
-        <c-button @click="copyAsBulletList">Copy as bullet list</c-button>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { Trash, Plus } from '@vicons/tabler';
+import { Plus, Trash } from '@vicons/tabler';
 import { useClipboard, useStorage } from '@vueuse/core';
 import _ from 'lodash';
 import { computed } from 'vue';
-import { computeAverage, computeVariance, arrayToMarkdownTable } from './benchmark-builder.models';
+import { arrayToMarkdownTable, computeAverage, computeVariance } from './benchmark-builder.models';
 import DynamicValues from './dynamic-values.vue';
 
 const suites = useStorage('benchmark-builder:suites', [
@@ -114,8 +34,8 @@ const results = computed(() => {
       const deltaWithBestMean = mean - bestMean;
       const ratioWithBestMean = bestMean === 0 ? '∞' : round(mean / bestMean);
 
-      const comparisonValues: string =
-        index !== 0 && bestMean !== mean ? ` (+${round(deltaWithBestMean)}${cleanUnit} ; x${ratioWithBestMean})` : '';
+      const comparisonValues: string
+        = (index !== 0 && bestMean !== mean) ? ` (+${round(deltaWithBestMean)}${cleanUnit} ; x${ratioWithBestMean})` : '';
 
       return {
         position: index + 1,
@@ -157,4 +77,87 @@ function copyAsBulletList() {
 }
 </script>
 
-<style lang="less" scoped></style>
+<template>
+  <n-scrollbar style="flex: 1" x-scrollable>
+    <div mb-5 flex flex-1 flex-nowrap justify-center gap-12px>
+      <div v-for="(suite, index) of suites" :key="index">
+        <c-card style="width: 294px">
+          <c-input-text
+            v-model:value="suite.title"
+            label-position="left"
+            label="Suite name"
+            placeholder="Suite name..."
+            clearable
+          />
+
+          <n-divider />
+          <n-form-item label="Suite values" :show-feedback="false">
+            <DynamicValues v-model:values="suite.data" />
+          </n-form-item>
+        </c-card>
+
+        <div flex justify-center>
+          <c-button v-if="suites.length > 1" variant="text" @click="suites.splice(index, 1)">
+            <n-icon :component="Trash" depth="3" mr-2 size="18" />
+            Delete suite
+          </c-button>
+          <c-button
+            variant="text"
+            @click="suites.splice(index + 1, 0, { data: [0], title: `Suite ${suites.length + 1}` })"
+          >
+            <n-icon :component="Plus" depth="3" mr-2 size="18" />
+            Add suite
+          </c-button>
+        </div>
+      </div>
+    </div>
+  </n-scrollbar>
+
+  <div style="flex: 0 0 100%">
+    <div style="max-width: 600px; margin: 0 auto">
+      <div mx-auto max-w-sm flex justify-center gap-3>
+        <c-input-text v-model:value="unit" placeholder="Unit (eg: ms)" label="Unit" label-position="left" mb-4 />
+
+        <c-button
+          @click="
+            suites = [
+              { title: 'Suite 1', data: [] },
+              { title: 'Suite 2', data: [] },
+            ]
+          "
+        >
+          Reset suites
+        </c-button>
+      </div>
+
+      <n-table>
+        <thead>
+          <tr>
+            <th>{{ header.position }}</th>
+            <th>{{ header.title }}</th>
+            <th>{{ header.size }}</th>
+            <th>{{ header.mean }}</th>
+            <th>{{ header.variance }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="{ title, size, mean, variance, position } of results" :key="title">
+            <td>{{ position }}</td>
+            <td>{{ title }}</td>
+            <td>{{ size }}</td>
+            <td>{{ mean }}</td>
+            <td>{{ variance }}</td>
+          </tr>
+        </tbody>
+      </n-table>
+      <div mt-5 flex justify-center gap-3>
+        <c-button @click="copyAsMarkdown">
+          Copy as markdown table
+        </c-button>
+        <c-button @click="copyAsBulletList">
+          Copy as bullet list
+        </c-button>
+      </div>
+    </div>
+  </div>
+</template>