From ca5f1c998c7fe376588f0bd94f9ed4b4489cdcbf Mon Sep 17 00:00:00 2001
From: Juan Martin <martinmuda@gmail.com>
Date: Sat, 30 Nov 2024 21:49:46 +0300
Subject: [PATCH] Add chart capability

---
 src/js/orbit-arc.js | 37 ++++++++++++++++++++++++++++++++-----
 src/scss/_arc.scss  |  1 +
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/js/orbit-arc.js b/src/js/orbit-arc.js
index 99cc5d9..4389948 100644
--- a/src/js/orbit-arc.js
+++ b/src/js/orbit-arc.js
@@ -51,6 +51,7 @@
    }
  
    update() {
+    
      const { shape } = this.getAttributes();
      const svg = this.shadowRoot.querySelector('svg');
      const path = this.shadowRoot.querySelector('path');
@@ -64,9 +65,9 @@
        path.setAttribute('marker-start', 'url(#tail)');
      }
  
-     const { realRadius, arcColor, gap } = this.getAttributes();
+     const { realRadius, arcColor, gap, value } = this.getAttributes();
      const angle = this.calculateAngle();
-     const { d } = this.calculateArcParameters(angle, realRadius, gap);
+     const { d } = this.calculateArcParameters(angle, realRadius, gap, value);
  
      path.setAttribute('d', d);
      path.setAttribute('stroke', arcColor);
@@ -78,11 +79,31 @@
      const gap = parseFloat(getComputedStyle(this).getPropertyValue('--o-gap') || 0.001);
      const shape = this.getAttribute('shape') || 'none';
      const arcColor = this.getAttribute('arc-color');
-     const rawAngle = getComputedStyle(this).getPropertyValue('--o-angle');
+     const value = parseFloat(this.getAttribute('value'));
+     const range = parseFloat(
+      getComputedStyle(this).getPropertyValue('--o-range') || 360
+    );
+     let rawAngle
+     let arcAngle
+     if (value) {
+      arcAngle = this.getProgressAngle(range, value);
+     
+      const prevElement = this.previousElementSibling
+      const stackOffset = prevElement ? parseFloat(getComputedStyle(prevElement).getPropertyValue('--o_stack')) : 0;
+      this.style.setProperty('--o_stack', stackOffset + arcAngle);
+      if (stackOffset > 0) {
+        
+        this.style.setProperty('--o-angle-composite', parseFloat(stackOffset) + 'deg');
+      }
+      
+    } else {
+      rawAngle = getComputedStyle(this).getPropertyValue('--o-angle');
+      arcAngle = calcularExpresionCSS(rawAngle);
+    }
      const strokeWidth = parseFloat(getComputedStyle(this).getPropertyValue('stroke-width') || 1);
      const strokeWithPercentage = ((strokeWidth / 2) * 100) / orbitRadius / 2;
      let innerOuter = strokeWithPercentage;
- 
+     
      if (this.classList.contains('outer-orbit')) {
        innerOuter = strokeWithPercentage * 2;
      }
@@ -97,7 +118,7 @@
      }
  
      const realRadius = 50 + innerOuter - strokeWithPercentage;
-     const arcAngle = calcularExpresionCSS(rawAngle);
+     
  
      return {
        orbitRadius,
@@ -114,6 +135,12 @@
      const { arcAngle, gap } = this.getAttributes();
      return arcAngle - gap;
    }
+
+   getProgressAngle(maxAngle, value) {
+    const progress = value
+    const maxValue = parseFloat(this.getAttribute('max')) || 100;
+    return (progress / maxValue) * maxAngle;
+  }
  
    calculateArcParameters(angle, realRadius) {
      const radiusX = realRadius / 1;
diff --git a/src/scss/_arc.scss b/src/scss/_arc.scss
index 4d1d85f..4649a42 100644
--- a/src/scss/_arc.scss
+++ b/src/scss/_arc.scss
@@ -4,6 +4,7 @@ o-arc {
   --o-angle-composite: var(--o-angle) * var(--o-orbit-child-number) * var(--o-direction, 1);
   //--o-angle-composite: (var(--o-angle) * var(--o-orbit-child-number) var(--o-offset, + 90deg)) * var(--o-direction, 1);
   --o-gap: 1;
+  --o_stack: 0;
   container-name: oslice;
   display: flex;
   justify-content: center;