Improved the benchmark

3 files changed, 27 insertions, 5 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'