-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
\ No newline at end of file
diff --git a/src/_orbit.scss b/src/_orbit.scss
index 0b9cac0..8965e3b 100644
--- a/src/_orbit.scss
+++ b/src/_orbit.scss
@@ -6,8 +6,8 @@
display: flex;
justify-content: center;
align-items: center;
- --o-diameter: calc(var(--orbit-nth) * var(--o-lenght) / var(--max-orbits));
+ --o-diameter: calc(var(--orbit-nth) * var(--o-lenght) / var(--o-max-orbits));
--o-radius: calc(var(--o-diameter) / 2);
- width: calc(var(--o-diameter) / var(--ellipse-ratio-x));
- height: calc(var(--o-diameter) / var(--ellipse-ratio-y));
+ width: calc(var(--o-diameter) / var(--o-ellipse-x));
+ height: calc(var(--o-diameter) / var(--o-ellipse-y));
}
diff --git a/src/_orbital-zone.scss b/src/_orbital-zone.scss
index 9b334af..a5794e2 100644
--- a/src/_orbital-zone.scss
+++ b/src/_orbital-zone.scss
@@ -1,6 +1,6 @@
/* Orbital zone class */
.orbital-zone {
- --o-lenght: 300px;
+ --o-lenght: 500px;
display: flex;
align-items: center;
justify-content: center;
diff --git a/src/_radial-layout.scss b/src/_radial-layout.scss
index e6408a1..df4332f 100644
--- a/src/_radial-layout.scss
+++ b/src/_radial-layout.scss
@@ -9,7 +9,7 @@
border: 1px solid red;
}
@for $i from 1 through $max-orbits {
- .orbit:nth-child(#{$i}), .orbit-#{$i} {
+ :nth-child(#{$i} of .orbit), .orbit-#{$i} {
--orbit-nth: #{$i};
}
}
@@ -17,20 +17,14 @@
/* Satellites, sectors and vectors layout */
@for $i from 1 through $max-orbiters {
- .satellite:nth-child(#{$i}), o-sector:nth-child(#{$i}), .vector:nth-child(#{$i}) {
- --sat-number: #{$i};
+ :nth-child(#{$i} of .satellite), :nth-child(#{$i} of o-sector), :nth-child(#{$i} of .vector) {
+ --o-position: #{$i};
}
}
@for $i from 1 through $max-orbiters {
- .satellite:nth-child(#{$i}), o-sector:nth-child(#{$i}), .vector:nth-child(#{$i}) {
- --sat-number: #{$i};
- }
-}
-
-@for $i from 1 through $max-orbiters {
- .orbit:has(> .satellite:nth-child(#{$i}), > o-sector:nth-child(#{$i}), > .vector:nth-child(#{$i})),
- [class*='orbit-']:has(> .satellite:nth-child(#{$i}), > o-sector:nth-child(#{$i}), > .vector:nth-child(#{$i})) {
- --angle: calc(var(--range) / #{$i});
+ .orbit:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-sector), > :nth-child(#{$i} of .vector)),
+ [class*='orbit-']:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-sector), > :nth-child(#{$i} of .vector)) {
+ --o-angle: calc(var(--o-range) / #{$i});
}
}
diff --git a/src/_satellite.scss b/src/_satellite.scss
index c43c084..eec8cbb 100644
--- a/src/_satellite.scss
+++ b/src/_satellite.scss
@@ -1,5 +1,6 @@
/* Satellite class */
.satellite {
+ --o-angle-composite: var(--o-angle) * var(--o-position);
width: 5px; /* Adjust satellite size */
height: 5px; /* Adjust satellite size */
background-color: yellow; /* Adjust satellite color */
@@ -11,12 +12,12 @@
align-items: center;
transform: translate(
calc(
- var(--o-radius) / var(--ellipse-ratio-x) *
- cos(var(--begin-at) + var(--angle) * var(--sat-number))
+ var(--o-radius) / var(--o-ellipse-x) *
+ cos(var(--o-begin-at) + var(--o-angle-composite))
),
calc(
- var(--o-radius) / var(--ellipse-ratio-y) *
- sin(var(--begin-at) + var(--angle) * var(--sat-number))
+ var(--o-radius) / var(--o-ellipse-y) *
+ sin(var(--o-begin-at) + var(--o-angle-composite))
)
);
}
diff --git a/src/_sector.scss b/src/_sector.scss
index ae76b10..6187d8a 100644
--- a/src/_sector.scss
+++ b/src/_sector.scss
@@ -1,6 +1,8 @@
@use './variables' as *;
/* Sector class */
o-sector {
+ --o-angle-composite: var(--o-angle) * var(--o-position);
+ ---o-width-factor: 1;
container-name: sectors;
display: flex;
justify-content: center;
@@ -9,14 +11,13 @@ o-sector {
position: absolute;
pointer-events: none;
width: 100%;
- transform: rotate(calc((var(--begin-at) + var(--angle) * var(--sat-number))));
- ---o-width-factor: 1;
+ transform: rotate(calc(var(--o-begin-at) + var(--o-angle-composite)));
}
o-sector svg path {
display: none;
}
-@container sectors style(--ellipse-ratio-x: 1) and style(--ellipse-ratio-y: 1) {
+@container sectors style(--o-ellipse-x: 1) and style(--o-ellipse-y: 1) {
/* Conditional render sector if ratio equals 1*/
o-sector svg path {
display: block;
@@ -40,3 +41,4 @@ o-sector path:hover {
stroke: red;
cursor: pointer;
}
+
diff --git a/src/_settings.scss b/src/_settings.scss
index 0fc24ae..840dfa5 100644
--- a/src/_settings.scss
+++ b/src/_settings.scss
@@ -1,10 +1,10 @@
@use './variables' as *;
:root {
- --max-orbits: #{$max-orbits};
- --begin-at: 0deg;
- --range: 360deg;
- --ellipse-ratio-x: 1;
- --ellipse-ratio-y: 1;
+ --o-max-orbits: #{$max-orbits};
+ --o-begin-at: 0deg;
+ --o-range: 360deg;
+ --o-ellipse-x: 1;
+ --o-ellipse-y: 1;
}
* {
diff --git a/src/_utilities.scss b/src/_utilities.scss
index 185b989..2196eef 100644
--- a/src/_utilities.scss
+++ b/src/_utilities.scss
@@ -1,10 +1,21 @@
@use './variables' as *;
/* Utilities */
-/* Sector utilities */
-@for $i from 1 through $max-orbiters {
- o-sector.gap#{$i} {
- --o-gap: #{$i};
+/* Range, begin-at and angle classes utility */
+$max-grade: 360;
+@for $i from 0 through $max-grade {
+ .range-#{$i} {
+ --o-range: #{$i}deg;
+ }
+}
+@for $i from 0 through $max-grade {
+ .begin-at-#{$i} {
+ --o-begin-at: #{$i}deg;
+ }
+}
+@for $i from 0 through $max-grade {
+ .angle-#{$i} {
+ --o-angle-composite: #{$i}deg;
}
}
@@ -21,10 +32,10 @@
* Can be used in parent elements or in each orbiter class
*/
-$sub-factors: 4;
+$sub-factors: 10;
@for $i from 1 to $sub-factors {
- $name: $i / $sub-factors * 100;
- $value: $i / $sub-factors;
+ $name: calc($i / $sub-factors * 100);
+ $value: calc($i / $sub-factors);
.x0#{$name} {
--o-width-factor: #{$value};
}
diff --git a/src/_vector.scss b/src/_vector.scss
index a8bb092..ef32872 100644
--- a/src/_vector.scss
+++ b/src/_vector.scss
@@ -1,14 +1,11 @@
/* Vector class */
.vector {
- height: 9px; /*use vars latter */
+ --o-angle-composite: var(--o-angle) * var(--o-position);
+ height: 1px; /*use vars latter */
border: none;
- border-width: 1px;
- border-style: solid;
- border-top-right-radius: 50%;
- border-bottom-right-radius: 50%;
width: calc(var(--o-radius) / var(--orbit-nth) * var(--o-width-factor, 1));
padding: 0;
- background: red;
+ background: rgb(0, 0, 0);
position: absolute;
pointer-events: none;
transform: translate(
@@ -18,8 +15,8 @@
calc(
var(--o-radius) / var(--orbit-nth) * var(--o-width-factor, 1)
) / 2
- ) / var(--ellipse-ratio-x) *
- cos(var(--begin-at) + var(--angle) * var(--sat-number))
+ ) / var(--o-ellipse-x) *
+ cos(var(--o-begin-at) + var(--o-angle-composite))
),
calc(
(
@@ -27,9 +24,9 @@
calc(
var(--o-radius) / var(--orbit-nth) * var(--o-width-factor, 1)
) / 2
- ) / var(--ellipse-ratio-y) *
- sin(var(--begin-at) + var(--angle) * var(--sat-number))
+ ) / var(--o-ellipse-y) *
+ sin(var(--o-begin-at) + var(--o-angle-composite))
)
)
- rotate(calc(var(--angle) * var(--sat-number)));
+ rotate(calc(var(--o-angle-composite)));
}
diff --git a/src/components.js b/src/components.js
index 888d88c..c9b0037 100644
--- a/src/components.js
+++ b/src/components.js
@@ -1,97 +1,136 @@
// Define the custom SVG progress bar element
// todos: componente sector tiene que tener posibilidad de bordes. acomoder el angulo inicial que esta en -90
-// ok aramr un componentes de progress. falta origin, rango y pasarlo 100%
-// satelite... up and low tangential
-// comoentes... up/center/low?
+// OK aramr un componentes de progress.
+ // satelite... up and low tangential
+ // comoentes... up/center/low?
// OK orbit -ratios
// OK armar class vector
-// usar nth type para evitar conflictos
+// OK usar nth type para evitar conflictos. OJO ERROR EN ORBIT HAS
+// USAR ESBUILD para el bundle de cwc y sass
// trabajar en los satelittes NO
+// curved text component
+// label component
+// pesnar el tema de los sector/ progress con medidas desiguales para ponner el sunburst charts
// SEPARAR BASE DE STILO
+//
+// mostrar cada estado de cada elemento posible en los docs, chiquito minimalista
+// armar templates para descargar con $
+// - graficos: sunburst/pie/donut/gauges/rose
+// - knobs
+// - futurist
+// - menu
+// - mandalas
+//
+//
+//
+
function calcularExpresionCSS(cssExpression) {
- const match = cssExpression.match(/calc\(([\d.]+)(deg)\s*\/\s*(\d+)\)/)
- // if (match) {
- const value = parseFloat(match[1]) // Valor numérico
- const unit = match[2] // Unidad
- const divisor = parseInt(match[3]) // Divisor
- if (unit === 'deg' && divisor >= 1 && divisor <= 12) {
- // Asegurarse que el valor esté en el rango de 0 a 360
- const normalizedValue = value % 360
- // Realizar la operación
-
- const result = value / divisor
- return result
+ const match = cssExpression.match(/calc\(([\d.]+)(deg)\s*\/\s*(\d+)\)/);
+ if (match) {
+ const value = parseFloat(match[1]);
+ const unit = match[2];
+ const divisor = parseInt(match[3]);
+ if (unit === 'deg' && divisor >= 1 && divisor <= 12) {
+ return value / divisor;
+ }
}
}
+
class OrbitSector extends HTMLElement {
+
connectedCallback() {
- // Create SVG element
- const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
- svg.setAttribute('viewBox', '0 0 100 100')
-
- // pointer-events: visible;
- svg.setAttribute('width', this.getAttribute('width') || '100%')
- svg.setAttribute('height', this.getAttribute('height') || '100%')
-
- // Retrieve attributes
- // Retrieve attributes
- const width =
- getComputedStyle(this).getPropertyValue('--o-width-factor') || 1
- const orbitNumber =
- getComputedStyle(this).getPropertyValue('--orbit-nth') || 0
- const gap = getComputedStyle(this).getPropertyValue('--o-gap') || 0
-
- let progress1 = getComputedStyle(this).getPropertyValue('--angle')
- // CSS calc expression
- let progress = calcularExpresionCSS(progress1)
- // let max = calcularExpresionCSS(max1)
+ this.update();
+
+ const observer = new MutationObserver(mutations => {
+ mutations.forEach(mutation => {
+ if (mutation.type === 'attributes') {
+ this.update();
+ }
+ });
+ });
+
+ observer.observe(this, { attributes: true });
+ }
+
+ update() {
+ const svg = this.createSVGElement();
+ const progressArc = this.createProgressArc();
+ svg.appendChild(progressArc);
+ this.innerHTML = '';
+ this.appendChild(svg);
+ }
+
+ createSVGElement() {
+ const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+ svg.setAttribute('viewBox', '0 0 100 100');
+ svg.setAttribute('width', this.getAttribute('width') || '100%');
+ svg.setAttribute('height', this.getAttribute('height') || '100%');
+ return svg;
+ }
+
+ createProgressArc() {
+ const progressArc = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+ const { radius, strokeWidth, realRadius, progressColor, gap } = this.getAttributes();
+ const angle = this.calculateAngle();
+ const { startX, startY, endX, endY, largeArcFlag, d } = this.calculateArcParameters(angle, realRadius, gap);
+ progressArc.setAttribute('d', d);
+ progressArc.setAttribute('stroke', progressColor);
+ progressArc.setAttribute('stroke-width', strokeWidth);
+ progressArc.setAttribute('fill', 'transparent');
+ return progressArc;
+ }
+
+ getAttributes() {
+ const width = parseFloat(getComputedStyle(this).getPropertyValue('--o-width-factor') || 1);
+ const orbitNumber = parseFloat(getComputedStyle(this).getPropertyValue('--orbit-nth') || 0);
+ const gap = parseFloat(getComputedStyle(this).getPropertyValue('--o-gap') || 0);
const progressColor = this.getAttribute('progress-color') || '#00ff00';
- const radius = parseFloat(this.getAttribute('radius')) || 50
-
- const strokeWidth = (50 / parseFloat(orbitNumber)) * parseFloat(width)
- const realRadius = radius - strokeWidth / 2
- // Calculate angle for progress
- const angle = progress - parseFloat(gap) //360 * (Math.round(progress) / max);
-
- // Create progress arc
- const progressArc = document.createElementNS(
- 'http://www.w3.org/2000/svg',
- 'path'
- )
- const radiusX = realRadius / 1
- const radiusY = realRadius / 1
-
- const startX = 50 + parseFloat(gap) + radiusX * Math.cos(-Math.PI / 2)
- const startY = 50 + radiusY * Math.sin(-Math.PI / 2)
- const endX = 50 + radiusX * Math.cos(((angle - 90) * Math.PI) / 180)
-
- const endY = 50 + radiusY * Math.sin(((angle - 90) * Math.PI) / 180)
- const largeArcFlag = angle <= 180 ? 0 : 1
-
- const d = `M ${startX},${startY} A ${radiusX},${radiusY} 0 ${largeArcFlag} 1 ${endX},${endY}`
- progressArc.setAttribute('d', d)
- progressArc.setAttribute('stroke', progressColor)
- progressArc.setAttribute('stroke-width', strokeWidth)
- progressArc.setAttribute('fill', 'transparent')
- svg.appendChild(progressArc)
-
- // Append SVG to custom element
- this.appendChild(svg)
+ const radius = parseFloat(this.getAttribute('radius')) || 50;
+ const strokeWidth = (50 / orbitNumber) * width;
+ const realRadius = radius - strokeWidth / 2;
+ const progress1 = getComputedStyle(this).getPropertyValue('--o-angle');
+ const progress = calcularExpresionCSS(progress1);
+ return { radius, strokeWidth, realRadius, progressColor, gap, progress };
}
-}
-class OrbitProgress extends HTMLElement {
- constructor() {
- super();
- this.attachShadow({ mode: 'open' });
+ calculateAngle() {
+ const { progress, gap } = this.getAttributes();
+ return progress - gap;
+ }
+
+ calculateArcParameters(angle, realRadius, gap) {
+ const radiusX = realRadius / 1;
+ const radiusY = realRadius / 1;
+ const startX = 50 + gap + radiusX * Math.cos(-Math.PI / 2);
+ const startY = 50 + radiusY * Math.sin(-Math.PI / 2);
+ const endX = 50 + radiusX * Math.cos(((angle - 90) * Math.PI) / 180);
+ const endY = 50 + radiusY * Math.sin(((angle - 90) * Math.PI) / 180);
+ const largeArcFlag = angle <= 180 ? 0 : 1;
+ const d = `M ${startX},${startY} A ${radiusX},${radiusY} 0 ${largeArcFlag} 1 ${endX},${endY}`;
+ return { startX, startY, endX, endY, largeArcFlag, d };
}
+
+}
+function calcularExpresionCSS(cssExpression) {
+ const match = cssExpression.match(/calc\(([\d.]+)(deg)\s*\/\s*(\d+)\)/);
+ if (match) {
+ const value = parseFloat(match[1]);
+ const unit = match[2];
+ const divisor = parseInt(match[3]);
+ if (unit === 'deg' && divisor >= 1 && divisor <= 12) {
+ return value / divisor;
+ }
+ }
+}
+
+class OrbitProgress extends HTMLElement {
connectedCallback() {
this.update();
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
- if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+ if (mutation.type === 'attributes') {
this.update();
}
});
@@ -102,10 +141,12 @@ class OrbitProgress extends HTMLElement {
update() {
const svg = this.createSVGElement();
+ const progressArc1 = this.createProgressArc(true);
+ svg.appendChild(progressArc1);
const progressArc = this.createProgressArc();
svg.appendChild(progressArc);
- this.shadowRoot.innerHTML = '';
- this.shadowRoot.appendChild(svg);
+ this.innerHTML = '';
+ this.appendChild(svg);
}
createSVGElement() {
@@ -116,13 +157,13 @@ class OrbitProgress extends HTMLElement {
return svg;
}
- createProgressArc() {
+ createProgressArc(full) {
const progressArc = document.createElementNS('http://www.w3.org/2000/svg', 'path');
const { radius, strokeWidth, realRadius, ellipseX, ellipseY, progressColor, lineCap, maxAngle } = this.getAttributes();
- const angle = this.getProgressAngle(maxAngle);
+ const angle = this.getProgressAngle(maxAngle, full);
const { startX, startY, endX, endY, largeArcFlag, d } = this.calculateArcParameters(angle, realRadius, ellipseX, ellipseY);
progressArc.setAttribute('d', d);
- progressArc.setAttribute('stroke', progressColor);
+ progressArc.setAttribute('stroke', full ? 'black' : progressColor);
progressArc.setAttribute('stroke-width', strokeWidth);
progressArc.setAttribute('fill', 'transparent');
progressArc.setAttribute('stroke-linecap', lineCap);
@@ -133,8 +174,8 @@ class OrbitProgress extends HTMLElement {
const widthFactor = getComputedStyle(this).getPropertyValue('--o-width-factor') || 1;
const orbitNumber = getComputedStyle(this).getPropertyValue('--orbit-nth') || 0;
const lineCap = getComputedStyle(this).getPropertyValue('--o-linecap') || 'butt';
- const ellipseX = getComputedStyle(this).getPropertyValue('--ellipse-ratio-x') || 1;
- const ellipseY = getComputedStyle(this).getPropertyValue('--ellipse-ratio-y') || 1;
+ const ellipseX = getComputedStyle(this).getPropertyValue('--o-ellipse-x') || 1;
+ const ellipseY = getComputedStyle(this).getPropertyValue('--o-ellipse-y') || 1;
const progress = parseFloat(getComputedStyle(this).getPropertyValue('--o-progress') || this.getAttribute('value') || 0);
const progressColor = this.getAttribute('progress-color') || 'orange';
const radius = parseFloat(this.getAttribute('radius')) || 50;
@@ -144,10 +185,10 @@ class OrbitProgress extends HTMLElement {
return { widthFactor, orbitNumber, lineCap, ellipseX, ellipseY, progress, progressColor, radius, strokeWidth, realRadius, maxAngle };
}
- getProgressAngle(maxAngle) {
+ getProgressAngle(maxAngle,full) {
const progress = parseFloat(getComputedStyle(this).getPropertyValue('--o-progress') || this.getAttribute('value') || 0);
const maxValue = parseFloat(this.getAttribute('max')) || 100; // User-defined max value
- return (progress / maxValue) * maxAngle; // Calculate angle based on progress and user-defined max angle
+ return full ? ((maxValue - 1) / maxValue) * maxAngle : (progress / maxValue) * maxAngle; // Calculate angle based on progress and user-defined max angle
}
calculateArcParameters(angle, realRadius, ellipseX, ellipseY) {