Change style of summary and compile-time tab

Author: Kobzol

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

@@ -29,11 +29,8 @@ export function percentClass(pct: number): string {
 }
 
 export function diffClass(diff: number): string {
-  let klass = "";
-  if (diff > 1) {
-    klass = "positive";
-  } else if (diff < -1) {
-    klass = "negative";
+  if (diff >= 0) {
+    return "positive";
   }
-  return klass;
+  return "negative";
 }

site/frontend/src/pages/compare/summary/percent-value.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {computed} from "vue";
-import {signIfPositive} from "../shared";
+import {percentClass, signIfPositive} from "../shared";
 
 const props = withDefaults(
   defineProps<{
@@ -23,5 +23,7 @@ const padSpaces = computed((): string => {
 </script>
 
 <template>
-  <span><span v-html="padSpaces" />{{ formattedValue }}%</span>
+  <span :class="percentClass(props.value)"
+    ><span v-html="padSpaces" />{{ formattedValue }}%</span
+  >
 </template>

site/frontend/src/pages/compare/summary/summary-table.vue

@@ -39,7 +39,7 @@ const summary = computed(() => props.summary);
       </tr>
     </thead>
     <tbody>
-      <tr class="positive">
+      <tr>
         <td title="Regressions" v-if="withLegend">❌</td>
         <template v-if="summary.regressions.count !== 0">
           <td>
@@ -48,7 +48,7 @@ const summary = computed(() => props.summary);
           <td>
             <SummaryPercentValue :value="summary.regressions.average" />
           </td>
-          <td>
+          <td class="positive">
             <SummaryCount
               :cases="summary.regressions.count"
               :benchmarks="summary.regressions.benchmarks"
@@ -59,7 +59,7 @@ const summary = computed(() => props.summary);
           <td colspan="3" style="text-align: center">No regressions</td>
         </template>
       </tr>
-      <tr class="negative">
+      <tr>
         <td title="Improvements" v-if="withLegend">✅</td>
         <template v-if="summary.improvements.count !== 0">
           <td>
@@ -68,7 +68,7 @@ const summary = computed(() => props.summary);
           <td>
             <SummaryPercentValue :value="summary.improvements.average" />
           </td>
-          <td>
+          <td class="negative">
             <SummaryCount
               :cases="summary.improvements.count"
               :benchmarks="summary.improvements.benchmarks"

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

@@ -6,6 +6,7 @@ import {CompareResponse, Tab} from "./types";
 import {diffClass, percentClass} from "./shared";
 import {SummaryGroup} from "./data";
 import SummaryPercentValue from "./summary/percent-value.vue";
+import SummaryRange from "./summary/range.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -55,24 +56,14 @@ const activeTab: Ref<Tab> = ref(props.initialTab);
           <table>
             <thead>
               <tr>
-                <th>min</th>
-                <th>max</th>
-                <th>avg</th>
+                <th>Range</th>
+                <th>Mean</th>
               </tr>
             </thead>
             <thead>
               <tr>
                 <td>
-                  <SummaryPercentValue
-                    :class="percentClass(compileTimeSummary.all.range[0])"
-                    :value="compileTimeSummary.all.range[0]"
-                  />
-                </td>
-                <td>
-                  <SummaryPercentValue
-                    :class="percentClass(compileTimeSummary.all.range[1])"
-                    :value="compileTimeSummary.all.range[1]"
-                  />
+                  <SummaryRange :range="compileTimeSummary.all.range" />
                 </td>
                 <td>
                   <SummaryPercentValue
@@ -94,15 +85,15 @@ const activeTab: Ref<Tab> = ref(props.initialTab);
       @click="changeTab(Tab.Bootstrap)"
     >
       <div class="title">Bootstrap</div>
-      <div
-        :class="{[diffClass(bootstrapB - bootstrapA)]: bootstrapValid}"
-        class="summary"
-      >
+      <div class="summary">
         <div>
           {{ formatBootstrap(bootstrapA) }} ->
           {{ formatBootstrap(bootstrapB) }}
         </div>
-        <div v-if="bootstrapValid">
+        <div
+          v-if="bootstrapValid"
+          :class="{[diffClass(bootstrapB - bootstrapA)]: bootstrapValid}"
+        >
           {{ ((bootstrapB - bootstrapA) / 10e8).toFixed(1) }}s ({{
             (((bootstrapB - bootstrapA) / bootstrapA) * 100).toFixed(3)
           }}%)
@@ -161,7 +152,8 @@ const activeTab: Ref<Tab> = ref(props.initialTab);
 
 .title {
   font-weight: bold;
-  margin-bottom: 4px;
+  font-size: 1.1em;
+  margin-bottom: 5px;
 }
 
 .selected {