From 47c082eb4478ef287e779fa9af145bea156fdabf Mon Sep 17 00:00:00 2001
From: Lucas <hello@lucascm.dev>
Date: Wed, 16 Oct 2024 07:30:22 +0100
Subject: [PATCH] [Scorecards][General] Added percentage ring component

---
 scoring/static/scoring/scss/main.scss         |  1 +
 .../static/scoring/scss/percentage-ring.scss  | 36 +++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 scoring/static/scoring/scss/percentage-ring.scss

diff --git a/scoring/static/scoring/scss/main.scss b/scoring/static/scoring/scss/main.scss
index 39151331..7913ac83 100644
--- a/scoring/static/scoring/scss/main.scss
+++ b/scoring/static/scoring/scss/main.scss
@@ -66,3 +66,4 @@
 @import "open-graph-preview";
 @import "years";
 @import "gallery-component";
+@import "percentage-ring";
diff --git a/scoring/static/scoring/scss/percentage-ring.scss b/scoring/static/scoring/scss/percentage-ring.scss
new file mode 100644
index 00000000..ec19d664
--- /dev/null
+++ b/scoring/static/scoring/scss/percentage-ring.scss
@@ -0,0 +1,36 @@
+/* USAGE:
+Always check how the ring will look at 100% and if there is an overlap between elements.
+
+<div class="progress-ring" style="--ring-size: 40px;--ring-percentage: {% widthratio answer.council_count council_count 100%};">
+  <div class="percentage fs-8">
+    {% widthratio answer.council_count council_count 100%}%
+  </div>
+</div>
+*/
+
+.progress-ring {
+  min-width: var(--ring-size, 150px);
+  height: var(--ring-size, 150px);
+  border-radius: 50%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: conic-gradient(
+    var(--ring-primary-color, $primary) 0% calc(var(--ring-percentage) * 1%),
+    var(--ring-secondary-color, $primary-200) calc(var(--ring-percentage) * 1%) 100%
+  );
+
+  .percentage {
+    font-weight: bold;
+    color: var(--ring-primary-color, $primary);
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: calc(var(--ring-size, 150px) * 0.7);
+    height: calc(var(--ring-size, 150px) * 0.7);
+    background: white;
+    border-radius: 50%;
+  }
+}