From ec2064fd6d46fdc9802984d4bc8712dd3bf8aa58 Mon Sep 17 00:00:00 2001
From: Benedikt Bastin <benedikt@benedikt-bastin.de>
Date: Tue, 2 Feb 2021 12:57:50 +0100
Subject: [PATCH] feat: Added meters for vaccination rates

---
 dashboard_template.xhtml | 11 +++++++++++
 site/rki-dashboard.css   | 29 +++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/dashboard_template.xhtml b/dashboard_template.xhtml
index 5ac1d53..efaaf2e 100644
--- a/dashboard_template.xhtml
+++ b/dashboard_template.xhtml
@@ -33,6 +33,17 @@
 				Für die Zweitimpfungen sind am <em>{{ data_second_vaccination['extrapolation_mean_seven_days']['date_herd_immunity_str'] }}</em> {{ herd_immunity }} % erreicht und am <em>{{ data_second_vaccination['extrapolation_mean_seven_days']['date_done_str'] }}</em> 100 %.
 			</p>
 		</section>
+		<section>
+			<h1>Impffortschritt</h1>
+			<div class="labelled_meter">
+				<meter name="first_vaccination_percentage" value="{{ data_first_vaccination.total_percentage }}" max="100" title="{{ '{:.3n}'.format(data_first_vaccination.total_percentage) }} %"/>
+				<label for="first_vaccination_percentage">Erstimpfungen: <em>{{ '{:.3n}'.format(data_first_vaccination.total_percentage) }} %</em></label>
+			</div>
+			<div class="labelled_meter">
+				<meter name="second_vaccination_percentage" value="{{ data_second_vaccination.total_percentage }}" max="100" title="{{ '{:.3n}'.format(data_second_vaccination.total_percentage) }} %"/>
+				<label for="second_vaccination_percentage">Zweitimpfungen: <em>{{ '{:.3n}'.format(data_second_vaccination.total_percentage) }} %</em></label>
+			</div>
+		</section>
 		<!--<section>
 			<h1>Details</h1>
 			<figure>
diff --git a/site/rki-dashboard.css b/site/rki-dashboard.css
index b02fda0..ca60fb1 100644
--- a/site/rki-dashboard.css
+++ b/site/rki-dashboard.css
@@ -43,7 +43,36 @@ sup {
 	user-select: none;
 }
 
+.labelled_meter {
+	display: flex;
+	flex-wrap: wrap;
+	padding: 0.1em;
+}
 
+.labelled_meter meter {
+	min-width: 250px;
+	height: 1.5em;
+	background: white;
+	border: 1px solid #999999;
+	flex-grow: 2;
+}
+
+.labelled_meter label {
+	width: 200px;
+	padding: 0.1em;
+	wrap: nowrap;
+	hyphens: none;
+}
+
+.labelled_meter label em {
+	font-weight: inherit;
+	font-style: inherit;
+	/*color: #ffac12;*/
+	color: #333333;
+	/*background-image: linear-gradient(rgba(255, 255, 255, 0) 90%, #f7bb3c 91%, #f7bb3c 98%, rgba(255, 255, 255, 0) 99%);*/
+	text-decoration: underline;
+	text-decoration-color: #ffac12;
+}
 
 figure {
 	max-width: 100%;