@semcore/mini-chart 16.0.9 → 16.1.0-prerelease.3

package/lib/esm/utils/ScoreDonutUtils.mjs

@@ -9,14 +9,9 @@ var ScoreDonutUtils = /* @__PURE__ */ function() {
     _defineProperty(this, "radius", void 0);
     this.isSemiDonut = isSemiDonut;
     this.radius = isSemiDonut ? 9 : 10;
-    this.value = value;
+    this.value = Math.max(Math.min(value, 100), 0);
   }
   return _createClass(ScoreDonutUtils2, [{
-    key: "hasDivider",
-    get: function get() {
-      return ![0, 100].includes(this.value);
-    }
-  }, {
     key: "viewBox",
     get: function get() {
       return this.isSemiDonut ? "0 0 24 12" : "0 0 24 24";
@@ -27,45 +22,58 @@ var ScoreDonutUtils = /* @__PURE__ */ function() {
       return this.isSemiDonut ? 6 : 4;
     }
   }, {
-    key: "baseStrokeDashArray",
+    key: "fullLength",
     get: function get() {
       return this.isSemiDonut ? Math.PI * this.radius : 2 * Math.PI * this.radius;
     }
   }, {
-    key: "valueStrokeDashArray",
+    key: "point",
+    get: function get() {
+      return this.isSemiDonut ? this.fullLength / (100 / 3) : this.fullLength / 100;
+    }
+  }, {
+    key: "valueLength",
+    get: function get() {
+      return this.fullLength * (this.value / 100);
+    }
+  }, {
+    key: "animatedValueLength",
+    get: function get() {
+      return Math.min(this.valueLength, this.fullLength - this.startMargin - this.endMargin);
+    }
+  }, {
+    key: "startMargin",
+    get: function get() {
+      var margin = 0;
+      if (this.value > 0) margin = this.point;
+      return margin;
+    }
+  }, {
+    key: "endMargin",
     get: function get() {
-      return this.baseStrokeDashArray * (this.value / 100);
+      var margin = 0;
+      if (!this.isSemiDonut && this.value > 0) margin = this.point;
+      return margin;
     }
   }, {
-    key: "greyStrokeDashArray",
+    key: "baseOffset",
     get: function get() {
-      return this.baseStrokeDashArray - this.valueStrokeDashArray;
+      return -1 * (this.valueLength + this.startMargin);
     }
   }, {
-    key: "offsetPoint",
+    key: "baseLength",
     get: function get() {
-      return this.isSemiDonut ? this.baseStrokeDashArray / (100 / 3) : this.baseStrokeDashArray / 100;
+      return Math.max(this.fullLength - this.valueLength - this.startMargin - this.endMargin, 0);
     }
   }, {
-    key: "strokeDashArrayParts",
+    key: "animatedBaseLengthFrom",
     get: function get() {
-      var greyStroke = this.greyStrokeDashArray;
-      var offsetPoint = this.offsetPoint;
-      var greyStrokeDash = greyStroke - 2 * offsetPoint;
-      var strokeDashArrayBetweenSpaces = "".concat(greyStrokeDash, " ").concat(offsetPoint);
-      if (this.isSemiDonut) {
-        return "".concat(offsetPoint, " ").concat(this.value < 95 ? strokeDashArrayBetweenSpaces : "", " ").concat(this.baseStrokeDashArray);
-      }
-      return "".concat(offsetPoint, " ").concat(greyStrokeDash >= 0 ? strokeDashArrayBetweenSpaces : "", " ").concat(this.baseStrokeDashArray);
+      return this.fullLength - this.startMargin - this.endMargin;
     }
   }, {
-    key: "strokeDashOffsetBase",
+    key: "animatedBaseLengthTo",
     get: function get() {
-      var hasDivider = this.hasDivider;
-      if (!hasDivider) return 0;
-      var valueStroke = this.valueStrokeDashArray;
-      var offsetPoint = this.offsetPoint;
-      return -1 * (valueStroke + (this.isSemiDonut ? offsetPoint : 0));
+      return this.fullLength - this.valueLength - this.startMargin - this.endMargin;
     }
   }]);
 }();

package/lib/types/component/score/Donut.d.ts

@@ -1,10 +1,12 @@
 import { type ComponentType } from '@semcore/core';
 import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
+import { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';
 import { type BoxProps } from '@semcore/flex-box';
 import type { CommonScoreProps } from './Score';
 export type ScoreDonutProps = BoxProps & CommonScoreProps;
 type Enhances = {
     resolveColor: ReturnType<typeof resolveColorEnhance>;
+    duration: ReturnType<typeof cssVariableEnhance>;
     isSemiDonut?: true;
 };
 export declare const ScoreDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances>;

package/lib/types/utils/ScoreDonutUtils.d.ts

@@ -3,13 +3,16 @@ export declare class ScoreDonutUtils {
     private readonly value;
     readonly radius: number;
     constructor(value: number, isSemiDonut: boolean);
-    get hasDivider(): boolean;
     get viewBox(): "0 0 24 12" | "0 0 24 24";
     get strokeWidth(): 6 | 4;
-    get baseStrokeDashArray(): number;
-    get valueStrokeDashArray(): number;
-    get greyStrokeDashArray(): number;
-    get offsetPoint(): number;
-    get strokeDashArrayParts(): string;
-    get strokeDashOffsetBase(): number;
+    get fullLength(): number;
+    get point(): number;
+    get valueLength(): number;
+    get animatedValueLength(): number;
+    get startMargin(): number;
+    get endMargin(): number;
+    get baseOffset(): number;
+    get baseLength(): number;
+    get animatedBaseLengthFrom(): number;
+    get animatedBaseLengthTo(): number;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/mini-chart",
   "description": "Semrush MiniChart Component",
-  "version": "16.0.9",
+  "version": "16.1.0-prerelease.3",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,8 +14,8 @@
     "types": "./lib/types/index.d.ts"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0",
-    "@semcore/flex-box": "^16.0.0"
+    "@semcore/base-components": "^16.4.0-prerelease.3",
+    "@semcore/flex-box": "^16.0.10-prerelease.3"
   },
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "directory": "semcore/mini-chart"
   },
   "devDependencies": {
-    "@semcore/core": "16.3.0",
+    "@semcore/core": "16.5.0-prerelease.3",
     "@semcore/testing-utils": "1.0.0"
   },
   "scripts": {