From 1b2a0e879b8c0e8c8f2b54563a31639248641969 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 5 May 2021 09:30:52 +0200
Subject: [PATCH] wip: update ProgressCircle to take values

---
 .../src/ProgressCircle/ProgressCircle.svelte  | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/bbui/src/ProgressCircle/ProgressCircle.svelte b/packages/bbui/src/ProgressCircle/ProgressCircle.svelte
index c3c0fb39d6..f5ecccde79 100644
--- a/packages/bbui/src/ProgressCircle/ProgressCircle.svelte
+++ b/packages/bbui/src/ProgressCircle/ProgressCircle.svelte
@@ -4,10 +4,29 @@
   import { tweened } from "svelte/motion"
   import { cubicOut } from "svelte/easing"
 
-  export let value = false
   export let small
   export let large
 
+  export let value = false
+  export let minValue = 0
+  export let maxValue = 0
+
+  let subMask1Style
+  let subMask2Style
+  if (!value) {
+    let percentage = ((value - minValue) / (maxValue - minValue)) * 100
+    let angle
+    if (percentage > 0 && percentage <= 50) {
+      angle = -180 + (percentage / 50) * 180
+      subMask1Style = `rotate(${angle}deg)`
+      subMask2Style = "rotate(-180deg)"
+    } else if (percentage > 50) {
+      angle = -180 + ((percentage - 50) / 50) * 180
+      subMask1Style = "rotate(0deg)"
+      subMask2Style = `rotate(${angle}deg)`
+    }
+  }
+
   export let overBackground
 </script>
 
@@ -20,12 +39,12 @@
   <div class="spectrum-ProgressCircle-track" />
   <div class="spectrum-ProgressCircle-fills">
     <div class="spectrum-ProgressCircle-fillMask1">
-      <div class="spectrum-ProgressCircle-fillSubMask1">
+      <div class="spectrum-ProgressCircle-fillSubMask1" style={subMask1Style}>
         <div class="spectrum-ProgressCircle-fill" />
       </div>
     </div>
     <div class="spectrum-ProgressCircle-fillMask2">
-      <div class="spectrum-ProgressCircle-fillSubMask2">
+      <div class="spectrum-ProgressCircle-fillSubMask2" style={subMask2Style}>
         <div class="spectrum-ProgressCircle-fill" />
       </div>
     </div>