update

src/js/orbit-label.js

@@ -55,8 +55,15 @@ export class OrbitLabel extends HTMLElement {
         }
       })
     })
-
     observer.observe(this, { attributes: true })
+
+  //  const textoObserver = new MutationObserver(() => {
+     // this.update();
+  //  });
+   // textoObserver.observe(this, { childList: true, subtree: true });
+
+
+
   }
   update() {
     const svg = this.createSVGElement();
@@ -122,7 +129,7 @@ createTextPath(pathId, path) {
   } else if (textAnchor === 'end') {
     const textLength = text.textContent.length;
     const pathLength = path.getTotalLength();
-    const startOffset = (pathLength - textLength + gap) / 2  ;
+    const startOffset = (pathLength - textLength - gap * 4) / 2  ;
 
     textPath.setAttribute('startOffset', startOffset);
   }
@@ -161,9 +168,15 @@ getAttributes() {
     if (this.classList.contains('outer-orbit')) {
       innerOuter = strokeWithPercentage * 2
     }
+    if (this.classList.contains('quarter-outer-orbit')) {
+      innerOuter = strokeWithPercentage * 3.75
+    }
     if (this.classList.contains('inner-orbit')) {
       innerOuter = 0
     }
+    if (this.classList.contains('quarter-inner-orbit')) {
+      innerOuter = strokeWithPercentage * 0.75
+    }
     const realRadius = 50 + innerOuter - strokeWithPercentage
     const labelAngle = calcularExpresionCSS(rawAngle)
 

src/scss/_orbit-class.scss

@@ -108,12 +108,13 @@ alineada tambien.
 - el gap en label no anda super duper con texto invertido
 - agregar quarters a secto, label, progress
 + dar vuelta texto camniando 1 por 0.. meterlo en function
++ ver orbit reduce que no anda del todo bien , tmpoco en label
 
 
 */
 .orbit, [class*='orbit-']:not(.orbit-zone) {
   container-name: orbit;
-  --o-diameter: calc(var(--o-orbit-number) * var(--o-lenght) / #{$max-orbits});
+  --o-diameter: calc(var(--o-orbit-number) * var(--o-lenght) / #{$max-orbits} * var(--o-orbit-ratio, 1));
   --o-radius: calc(var(--o-diameter) / 2);
   width: calc(var(--o-diameter) / var(--o-ellipse-x));
   height: calc(var(--o-diameter) / var(--o-ellipse-y));

src/scss/_utilities.scss

@@ -101,6 +101,13 @@ $max-gaps: calc($max-orbiters / 2);
 Sector, Progress and Vector size-ratio
 Can be used in parent elements or in each orbiter class
 */ 
+@for $i from 0 through  10  {
+  $percent: calc($i * 10);
+  $value: if($i == 0, 1, 1 - calc($i / 10));
+  .orbit.reduce-#{$percent}, [class*='orbit-']:not(.orbit-zone).reduce-#{$percent} {
+    --o-orbit-ratio: #{$value}; 
+  }
+}
 
 @for $i from 0 through  10  {
   $percent: calc($i * 10);