report: Add simple sentence effort visualization

Trying to give the reader a sense for how difficult carpalx thinks
certain parts of a sentence are. Conclusions are only valid for a single
layout and comparison between them is not possible.

2 files changed, 22 insertions, 0 deletions

diff --git a/lulua/data/report/index.html b/lulua/data/report/index.html
index cda1c9d..749c5e9 100644
--- a/lulua/data/report/index.html
+++ b/lulua/data/report/index.html
@@ -333,6 +333,23 @@
 	{% endif %}
 {% endfor %}
 </div>
+<div class="sentencestats">
+<p lang="en">Examples:</p>
+<ul lang="ar">
+{% for sentence in stats.sentences %}
+	<li>
+	{% for match, weight in sentence[0] -%}
+		{%- if weight is none -%}
+			<span>{{ match }}</span>
+		{%- else -%}
+			{%- set c = weight|blendn((38, 139, 210), (108, 113, 196), (211, 54, 130), (220, 50, 47)) -%}
+			<span style="color: rgb({{ c[0] }}, {{ c[1] }}, {{ c[2] }});" title="{{ '%5.5f'|format(weight) }}">{{ match }}</span>
+		{%- endif -%}
+	{%- endfor %}
+	</li>
+{% endfor %}
+</ul>
+</div>
 {% endmacro %}
 
 <figure id="ar-lulua-heat">
diff --git a/lulua/data/report/style.css b/lulua/data/report/style.css
index e734a0e..da2787f 100644
--- a/lulua/data/report/style.css
+++ b/lulua/data/report/style.css
@@ -157,6 +157,11 @@ div.fingerhandstats .fingers .index {
 div.fingerhandstats .fingers .thumb {
 	border: 0.1em solid var(--finger-thumb);
 }
+div.sentencestats ul {
+	list-style-type: none;
+	margin: 1em 0;
+	padding: 0;
+}
 
 .table-overflow {
 	overflow-x: auto;