Merge pull request #164 from buggregator/hotfix/profiler-stat-board

Fixed Profiler popup Stat-board issues:

Author: Kreezag

src/screens/profiler/ui/call-stat-board/call-stat-board.vue

@@ -16,7 +16,7 @@ defineProps<Props>();
       {{ edge.callee }}
     </h4>
 
-    <StatBoard class="call-stat-board__body" :cost="edge.cost" />
+    <StatBoard class="call-stat-board__body" :cost="edge.cost" size="sm" />
   </div>
 </template>
 
@@ -26,7 +26,7 @@ defineProps<Props>();
 }
 
 .call-stat-board__title {
-  @apply px-4 py-2 font-bold truncate text-gray-300;
+  @apply p-2 text-xs font-bold truncate text-gray-300;
 }
 
 .call-stat-board__body {

src/screens/profiler/ui/flame-graph/flame-graph.vue

@@ -52,8 +52,8 @@ const renderChart = async () => {
               cost: data.data.source.cost,
 
               position: {
-                x: mouse?.x || 0,
-                y: mouse?.y || 0,
+                x: mouse?.x + 20 || 0,
+                y: mouse?.y - 20 || 0,
               },
             });
           }
@@ -83,6 +83,10 @@ onMounted(() => {
     renderChart();
   });
 });
+
+onBeforeUnmount(() => {
+  emit("hide");
+});
 </script>
 
 <template>

src/shared/ui/stat-board/stat-board.vue

@@ -7,9 +7,12 @@ const { formatDuration, formatFileSize } = useFormats();
 
 type Props = {
   cost: ProfilerCost;
+  size: 'sm' | 'md' | 'lg';
 };
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+})
 
 const statItems = computed(() => [
   {
@@ -41,7 +44,7 @@ const statItems = computed(() => [
 </script>
 
 <template>
-  <section class="stat-board">
+  <section class="stat-board" :class="[`size-${size}`]">
     <div v-for="item in statItems" :key="item.title" class="stat-board__item">
       <h4 class="stat-board__item-name">
         {{ item.title }}
@@ -65,25 +68,59 @@ const statItems = computed(() => [
   @apply flex flex-col sm:flex-row justify-between items-start;
   @apply divide-y sm:divide-y-0 sm:divide-x divide-gray-300 dark:divide-gray-500;
   @apply bg-gray-200 dark:bg-gray-800;
-  @apply p-0 sm:p-4 lg:p-6;
 }
 
 .stat-board__item {
   @apply flex flex-row justify-between sm:flex-col sm:justify-start flex-auto;
   @apply w-full sm:w-auto;
-  @apply py-2 px-2 sm:py-5 sm:px-5;
 }
 
 .stat-board__item-name {
-  @apply text-gray-600 dark:text-gray-300 font-bold text-2xs uppercase truncate;
-  @apply mb-0 sm:mb-1;
+  @apply text-gray-600 dark:text-gray-300 font-bold uppercase truncate;
 }
 
-.stat-board__item-name-detail {
-  @apply text-2xs truncate ml-1;
+.stat-board__item-name-detail,
+.stat-board__item-value {
+  @apply truncate;
 }
 
-.stat-board__item-value {
-  @apply text-2xs sm:text-xs md:text-base truncate;
+.stat-board.size-md {
+  @apply p-0 sm:p-4 lg:p-6;
+
+  .stat-board__item-name-detail {
+    @apply text-2xs ml-1;
+  }
+
+  .stat-board__item {
+    @apply py-2 px-2 sm:py-5 sm:px-5;
+  }
+
+  .stat-board__item-name {
+    @apply mb-0 sm:mb-1 text-2xs;
+  }
+
+  .stat-board__item-value {
+    @apply text-2xs sm:text-xs md:text-base;
+  }
+}
+
+.stat-board.size-sm {
+  @apply p-0 border-t border-t-gray-300 dark:border-t-gray-500;
+
+  .stat-board__item-name-detail {
+    @apply text-2xs;
+  }
+
+  .stat-board__item {
+    @apply px-4 py-2;
+  }
+
+  .stat-board__item-name {
+    @apply text-2xs;
+  }
+
+  .stat-board__item-value {
+    @apply text-xs;
+  }
 }
 </style>