Improved the benchmark

5 files changed, 58 insertions, 24 deletions

diff --git a/editor/links/main.css b/editor/links/main.css
index bca287a..efa812a 100644
--- a/editor/links/main.css
+++ b/editor/links/main.css
@@ -10,11 +10,16 @@
 
 body { font-size:14px; font-family: 'input_mono_medium'; font-weight:normal; padding:30px; transition: background-color 500ms; overflow: hidden;}
 body svg { margin:0px auto 30px; display: block; }
-table { margin:0px auto 30px; }
-table tr td { padding:5px 10px; transition: background-color 250ms, color 250ms; font-size:11px; line-height: 20px; position: relative; padding-left:32px;}
+table { margin:0px auto 30px; width:100%; }
+table tr td { padding:5px 10px; transition: background-color 250ms, color 250ms; font-size:11px; line-height: 20px; position: relative; padding-left:32px; }
+table tr th { padding:5px 10px;font-size:11px; line-height: 20px; position: relative; text-align: left}
 table tr td svg { stroke:none; display: inline-block; margin:0px 15px 0px 0px; position: absolute; left:8px; top:6px;}
 table tr td span {  display: inline-block; }
 #debug { font-size: 11px }
 #score { text-align: center; margin-bottom: 30px; font-size:11px; }
 
-#benchmark { height:300px; margin:calc(50vh - 200px);}
\ No newline at end of file
+#benchmark { height:300px; margin:calc(50vh - 200px) auto; max-width: 400px}
+
+#distribution { margin-bottom:30px; }
+#distribution > div { clear:both; height:2px; overflow-y: hidden; margin-bottom:2px;}
+#distribution > div > * { display: block; width:30px; height:20px; float:left; transition: background-color 250ms, color 250ms, width 250ms; }
\ No newline at end of file
diff --git a/editor/links/theme.css b/editor/links/theme.css
index ffcf93c..809cd39 100644
--- a/editor/links/theme.css
+++ b/editor/links/theme.css
@@ -9,4 +9,11 @@ body { background:var(--background) !important; color:var(--f_med); }
 .b_low { background:var(--b_low) !important ; fill:var(--b_low) !important }
 .b_inv { background:var(--b_inv) !important ; fill:var(--b_inv) !important }
 
-#debug { color:var(--f_high); }
\ No newline at end of file
+#debug { color:var(--f_high); }
+
+#dis_f_high { background: var(--f_high) !important }
+#dis_f_med { background: var(--f_med) !important }
+#dis_f_low { background: var(--f_low) !important }
+#dis_b_high { background: var(--b_high) !important }
+#dis_b_med { background: var(--b_med) !important }
+#dis_b_low { background: var(--b_low) !important }
\ No newline at end of file
diff --git a/editor/scripts/benchmark.js b/editor/scripts/benchmark.js
index 7b04fd1..8838e2b 100644
--- a/editor/scripts/benchmark.js
+++ b/editor/scripts/benchmark.js
@@ -44,7 +44,6 @@ function Benchmark () {
     }
 
     // Order
-
     const fhigh = new Color(theme.active.f_high).contrast(new Color(theme.active.background))
     const fmed = new Color(theme.active.f_med).contrast(new Color(theme.active.background))
     const flow = new Color(theme.active.f_low).contrast(new Color(theme.active.background))
@@ -57,6 +56,17 @@ function Benchmark () {
     if (bmed < blow) { logs.push('flip b_med with b_low') }
     if (bhigh < bmed) { logs.push('flip b_high with b_med') }
 
+    // Distribution
+    const fsum = fhigh + fmed + flow
+    document.getElementById('dis_f_high').style.width = `${((fhigh / fsum) * 100).toFixed(2)}%`
+    document.getElementById('dis_f_med').style.width = `${((fmed / fsum) * 100).toFixed(2)}%`
+    document.getElementById('dis_f_low').style.width = `${((flow / fsum) * 100).toFixed(2)}%`
+
+    const bsum = bhigh + bmed + blow
+    document.getElementById('dis_b_high').style.width = `${((bhigh / bsum) * 100).toFixed(2)}%`
+    document.getElementById('dis_b_med').style.width = `${((bmed / bsum) * 100).toFixed(2)}%`
+    document.getElementById('dis_b_low').style.width = `${((blow / bsum) * 100).toFixed(2)}%`
+
     const perc = (score / (this.matches().length * 5)) * 100
     const cat = errors > 0 ? 'fix errors' : perc === 100 ? 'perfect' : perc > 80 ? 'good' : perc > 75 ? 'average' : 'bad'
 
diff --git a/index.html b/index.html
index 14339e8..3155e4d 100644
--- a/index.html
+++ b/index.html
@@ -25,27 +25,39 @@
           <circle cx='72' cy='40' r='8' id='b_inv' style='fill:var(--b_inv)'></circle>
           <rect width='96' height='64' style='stroke:var(--b_low); fill:none'></rect>
       </svg>
+      <div id='distribution'>
+        <div id='dis_f'>
+          <div id='dis_f_high'></div>
+          <div id='dis_f_med'></div>
+          <div id='dis_f_low'></div>
+        </div>
+        <div id='dis_b'>
+          <div id='dis_b_high'></div>
+          <div id='dis_b_med'></div>
+          <div id='dis_b_low'></div>
+        </div>
+      </div>
       <h1 id='score' class='f_med'>Score</h1>
       <table>
         <tr>
-          <td>
+          <th>
             <span class='f_low'></span>
-          </td>
-          <td>
+          </th>
+          <th>
             <span class='f_low'>f_high</span>
-          </td>
-          <td>
+          </th>
+          <th>
             <span class='f_low'>f_med</span>
-          </td>
-          <td>
+          </th>
+          <th>
             <span class='f_low'>f_low</span>
-          </td>
+          </th>
         </tr>
         <tr>
           <!-- bg -->
-          <td>
+          <th>
             <span class='f_low'>background</span>
-          </td>
+          </th>
           <td class='bg f_high'>
             <svg width="16px" height="16px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1">
               <circle cx='8' cy='8' r='8' id='f_high' style='fill:var(--f_high)'></circle>
@@ -67,9 +79,9 @@
         </tr>
         <!-- low -->
         <tr>
-          <td>
+          <th>
             <span class='f_low'>b_low</span>
-          </td>
+          </th>
           <td class='b_low f_high'>
             <svg width="16px" height="16px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1">
               <circle cx='8' cy='8' r='8' id='f_high' style='fill:var(--f_high)'></circle>
@@ -90,9 +102,9 @@
           </td>
         <!-- med -->
         <tr>
-          <td>
+          <th>
             <span class='f_low'>b_med</span>
-          </td>
+          </th>
           <td class='b_med f_high'>
             <svg width="16px" height="16px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1">
               <circle cx='8' cy='8' r='8' id='f_high' style='fill:var(--f_high)'></circle>
@@ -114,9 +126,9 @@
         </tr>
         <!-- high -->
         <tr>
-          <td>
+          <th>
             <span class='f_low'>b_high</span>
-          </td>
+          </th>
           <td class='b_high f_high'>
             <svg width="16px" height="16px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1">
               <circle cx='8' cy='8' r='8' id='f_high' style='fill:var(--f_high)'></circle>
@@ -138,9 +150,9 @@
         </tr>
         <!-- inv -->
         <tr>
-          <td>
+          <th>
             <span class='f_low'>b_inv</span>
-          </td>
+          </th>
           <td class='b_inv f_inv'>
             <svg width="16px" height="16px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1">
               <circle cx='8' cy='8' r='8' id='f_inv' style='fill:var(--f_inv)'></circle>
diff --git a/themes/murata.svg b/themes/murata.svg
index 35bebf4..860dd64 100644
--- a/themes/murata.svg
+++ b/themes/murata.svg
@@ -6,7 +6,7 @@
   <circle cx='56' cy='24' r='8' id='f_low' fill='#5a6970'></circle>
   <circle cx='72' cy='24' r='8' id='f_inv' fill='#000000'></circle>
   <!-- Background -->
-  <circle cx='24' cy='40' r='8' id='b_high' fill='#eeeeee'></circle>
+  <circle cx='24' cy='40' r='8' id='b_high' fill='#bbbbbb'></circle>
   <circle cx='40' cy='40' r='8' id='b_med' fill='#8498a2'></circle>
   <circle cx='56' cy='40' r='8' id='b_low' fill='#333333'></circle>
   <circle cx='72' cy='40' r='8' id='b_inv' fill='#b9615a'></circle>