From de9d6d2b80331a91db7988659022f314e322de6f Mon Sep 17 00:00:00 2001
From: koehr <n@koehr.in>
Date: Tue, 8 Dec 2020 23:24:12 +0100
Subject: [PATCH] a gauge

---
 src/components/Gauge.svelte | 44 +++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/components/Gauge.svelte

diff --git a/src/components/Gauge.svelte b/src/components/Gauge.svelte
new file mode 100644
index 00000000..32315ece
--- /dev/null
+++ b/src/components/Gauge.svelte
@@ -0,0 +1,44 @@
+<script>
+const radius = 40
+const dashes = 2 * Math.PI * radius
+
+export let max = 100
+export let value = 1
+
+$: offset = dashes * value / max * -1
+
+</script>
+
+<div class="gauge-box">
+  <svg viewBox="0 0 100 100" class="gauge">
+    <circle class="dial" cx="50" cy="50" r={radius} />
+    <circle class="dial value" cx="50" cy="50" r={radius}
+      stroke-dasharray={dashes}
+      stroke-dashoffset={offset}
+    />
+    <circle class="dial value2" cx="50" cy="50" r={radius}
+      stroke-dasharray={dashes}
+      stroke-dashoffset={offset*1.2}
+    />
+  </svg>
+</div>
+
+<style>
+.gauge-box {
+  width: 60px;
+  height: 60px;
+  margin-top: -10px;
+}
+.gauge {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+.dial {
+  fill: none;
+  stroke: #333;
+  stroke-width: 4;
+}
+.value { stroke: green; }
+.value2 { stroke: yellow; }
+</style>