From 4dc242ce4aa274a64416a6bbc536d563a91a33a2 Mon Sep 17 00:00:00 2001
From: Enzo AICARDI <eaicardi@datasolution.fr>
Date: Thu, 22 Feb 2024 11:21:56 +0100
Subject: [PATCH] [web] update benchmarks

---
 docs/assets/styles/styles.css | 31 +++++++++++++++++++++----------
 docs/index.html               | 15 +++++++++------
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/docs/assets/styles/styles.css b/docs/assets/styles/styles.css
index ed1f4ec..3ae5f32 100644
--- a/docs/assets/styles/styles.css
+++ b/docs/assets/styles/styles.css
@@ -505,26 +505,37 @@ header .language-switcher input:checked + label {
     background-color: var(--color-gray);
 }
 
-.benchs article div:nth-child(2)::before {
-    width: 51.8%;
-    content: "~259ms";
+/* 500ms base reference */
+.benchs article div.solid::before {
+    width: 37.6%;
+    content: "~188ms";
+    background-color: #436a9e;
+}
+.benchs article div.vif::before {
+    width: 51.6%;
+    content: "~258ms";
     background-color: var(--color-secondary);
 }
-.benchs article div:nth-child(4)::before {
-    width: 76.4%;
-    content: "~382ms";
-    background-color: #324fff;
-}
-.benchs article div:nth-child(6)::before {
+.benchs article div.vue::before {
     width: 53.8%;
     content: "~269ms";
     background-color: #42b883;
 }
-.benchs article div:nth-child(8)::before {
+.benchs article div.alpine::before {
     width: 67.6%;
     content: "~338ms";
     background-color: #48a9c1;
 }
+.benchs article div.lit::before {
+    width: 76.4%;
+    content: "~382ms";
+    background-color: #324fff;
+}
+.benchs article div.preact::before {
+    width: 87.2%;
+    content: "~436ms";
+    background-color: #673ab8;
+}
 
 /* INSTALLATION SECTION */
 
diff --git a/docs/index.html b/docs/index.html
index baee18d..44ca6e1 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -427,16 +427,19 @@ <h2 x-text="t().benchs.title">But what about speed ?</h2>
                 <article>
                     <!-- Vif -->
                     <p>Vif</p>
-                    <div class="chart"></div>
-                    <!-- Lit -->
-                    <p>Lit</p>
-                    <div class="chart"></div>
+                    <div class="chart vif"></div>
                     <!-- Vue -->
                     <p>Vue</p>
-                    <div class="chart"></div>
+                    <div class="chart vue"></div>
                     <!-- Alpine -->
                     <p>Alpine</p>
-                    <div class="chart"></div>
+                    <div class="chart alpine"></div>
+                    <!-- Lit -->
+                    <p>Lit</p>
+                    <div class="chart lit"></div>
+                    <!-- Preact -->
+                    <p>Preact</p>
+                    <div class="chart preact"></div>
                 </article>
 
                 <p class="sub-title">