@massimo-cassandro/minimo 1.2.0 → 1.3.0

package/charts/src/rating-display/ratindDisplayAnimation.js

@@ -0,0 +1,56 @@
+export function ratindDisplayAnimation() {
+  const runAnimation = () => {
+
+    const animationStepValue = parsedDisplayValue / animation_ms;
+
+    let fpsInterval = animation_ms / animation_fps,
+      currentDisplayValue = displayScaleStartValue, // valore iniziale. La scala parte da 1
+      startTimestamp = Date.now(),
+      animationEnd = false;
+
+    const step = () => {
+      let now = Date.now(),
+        elapsed = now - startTimestamp;
+
+      currentDisplayValue = Math.min(currentDisplayValue, parsedDisplayValue);
+
+      if(currentDisplayValue >= parsedDisplayValue) {
+        animationEnd = true;
+      }
+
+      // request another frame
+      const animationRequest = window.requestAnimationFrame(step);
+
+      // if enough time has elapsed, draw the next frame
+      if (elapsed >= fpsInterval) {
+
+        // Get ready for next frame by setting startTimestamp=now, but...
+        // Also, adjust for fpsInterval not being multiple of 16.67
+        startTimestamp = now - (elapsed % fpsInterval);
+
+        svgElement.style.setProperty(
+          '--rd-rot',
+          Math.max(0, ((currentDisplayValue - displayScaleStartValue) * 240) / (scale - .001))
+        );
+
+        if(animationEnd) {
+          window.cancelAnimationFrame(animationRequest);
+
+        } else {
+          currentDisplayValue += animationStepValue;
+          // easing out a 2/3 del valore
+          // if(currentDisplayValue >= parsedDisplayValue * 2/3) {
+          //   fpsInterval += 1;
+          // }
+
+        }
+      }
+
+    };// end step
+
+    step();
+  }; // end animazione_arco
+
+  runAnimation();
+
+}; // end display_animation

package/charts/src/rating-display/ratingDisplayUtils.js

@@ -0,0 +1,102 @@
+import { toRadians, polarToCartesianString } from '../../chart-utils.js';
+
+// 30 gradi in radianti
+// ampiezza dell'angolo della parte eccedente il raggio della circonferenza che include l'arco di cerchio
+export const rad30 = toRadians(30);
+
+// getDisplayBackgroundPath: calcola il path dell'elemento di background, usato anche per i miniDisplay
+export function getDisplayBackgroundPath(radius, cx, cy) {
+  const startPointX = cx - (radius * Math.cos(rad30)),
+    startPointY = cy + (radius * Math.sin(rad30)),
+
+    endPointX = cx + (radius * Math.cos(rad30)),
+    endPointY = startPointY;
+
+  return `M${startPointX},${startPointY}` +
+    // rx ry x-axis-angle large-arc-flag sweep-flag end-x end-y
+    `A${radius} ${radius} 0 1 1 ${endPointX} ${endPointY}`;
+};
+
+
+
+
+/**
+ * restituisce la proiezione di un punto sulla circonferenza esterna sulla circonferenza interna
+// di centro e raggio dati
+ * @param {object} centro - Coordinate del centro della circonferenza interna
+ * @param {number} centro.x - Coordinata x del centro
+ * @param {number} centro.y - Coordinata y del centro
+ * @param {number} r - Raggio della circonferenza interna
+ * @param {number} alphaDeg - Angolo alpha in gradi
+ * @returns @returns {{x: number, y: number}} - Coordinate {x, y}
+ */
+function calcolaProiezionePuntoOLD(centro, r, alphaDeg) {
+
+  // Conversione da gradi a radianti
+  const alphaRad = toRadians(alphaDeg);
+
+  return {
+    x: centro.x + r * Math.cos(alphaRad),
+    y: centro.y + r * Math.sin(alphaRad)
+  };
+}
+
+
+export function normalizeAngle(angle) {
+  angle = angle % 360;
+  if (angle < 0) angle += 360;
+
+  return angle;
+}
+
+export function isCircleDx(nomalizedAngle) {
+  return (nomalizedAngle > 30 && nomalizedAngle <= 210)? false : true;
+}
+
+/**
+ * Calcola il punto della circonferenza interna per l'angolo dato
+
+ * @param {number} angoloDeg - angolo (normalizzato)
+//  * @param {object} centroSx - Coordinate {x, y} del centro sinistro
+//  * @param {object} centroDx - Coordinate {x, y} del centro destro
+ * @param {number} rSx - Raggio della circonferenza sinistra (c)
+ * @param {number} rDx - Raggio della circonferenza destra (b)
+ * @param {object} mainCenter - Coordinate {x, y} dell'origine A
+ * @param {number} centerGap - Distanza d tra mainCenter e i centri delle circonferenze interne
+ * @returns {string} - Coordinate "x,y" del punto C
+ */
+export function calcolaPuntoInterno({ angoloDeg, centroSx, rSx, centroDx, rDx, mainCenter, centerGap }) {
+
+  // nella documentazione:
+  // mainRadius corrisponde a rA
+  // mainCenter corrisponde al punto A (centro della circonferenza a)
+  // centerGap corrisponde a d
+  // scaleEndThickness corrisponde a s
+
+  let phi, r, center;
+
+  if(isCircleDx(angoloDeg)) {
+    center = centroDx;
+    r = rDx; // raggio rB
+    phi = 330;
+
+  } else {
+    center = centroSx;
+    r = rSx; // raggio rC
+    phi = 210;
+  }
+
+  // Differenza angoli e conversione in radianti
+  const delta = toRadians(angoloDeg) - toRadians(phi);
+
+  // rho1 = ipotenusa del triangolo rettangolo in centroDx o centroSx
+  // rho2 = ipotenusa per coseno angolo adiacente al cateto rho2
+  // vedi documentazione
+  const rho =
+    Math.sqrt(Math.pow(r, 2) - Math.pow(centerGap * Math.sin(delta), 2)) + // rho1
+    centerGap * Math.cos(delta); // rho2
+
+
+  return polarToCartesianString(angoloDeg, center.x, center.y, rho);
+
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Light css framework & utilities",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",
@@ -38,7 +38,8 @@
     "src/**/*.{js,mjs,css,svg,md}",
     "design-tokens/**/*.{tokens.json,tokens.jsonc}",
     "design-tokens-src/**/*.{tokens.json,tokens.jsonc,mjs,js,md}",
-    "design-tokens-utilities/**/*.{mjs,md}"
+    "design-tokens-utilities/**/*.{mjs,md}",
+    "charts/**/*.{js,md}"
   ],
   "devDependencies": {
     "@babel/core": "^7.29.0",