@semcore/mini-chart 16.0.1-prerelease.4 → 16.0.2-prerelease.1

package/lib/es6/utils/ScoreDonutUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScoreDonutUtils.js","names":["ScoreDonutUtils","value","isSemiDonut","_classCallCheck","_defineProperty","radius","_createClass","key","get","Math","PI","baseStrokeDashArray","valueStrokeDashArray","greyStroke","greyStrokeDashArray","offsetPoint","greyStrokeDash","strokeDashArrayBetweenSpaces","concat","valueStroke"],"sources":["../../../src/utils/ScoreDonutUtils.ts"],"sourcesContent":["export class ScoreDonutUtils {\n  private readonly isSemiDonut: boolean;\n  private readonly value: number;\n\n  public readonly radius: number;\n\n  constructor(value: number, isSemiDonut: boolean) {\n    this.isSemiDonut = isSemiDonut;\n    this.radius = isSemiDonut ? 9 : 10;\n    this.value = value;\n  }\n\n  public get viewBox() {\n    return this.isSemiDonut ? '0 0 24 12' : '0 0 24 24';\n  }\n\n  public get strokeWidth() {\n    return this.isSemiDonut ? 6 : 4;\n  }\n\n  public get baseStrokeDashArray() {\n    return this.isSemiDonut ? Math.PI * this.radius : 2 * Math.PI * this.radius;\n  }\n\n  public get valueStrokeDashArray() {\n    return this.baseStrokeDashArray * (this.value / 100);\n  }\n\n  public get greyStrokeDashArray() {\n    return this.baseStrokeDashArray - this.valueStrokeDashArray;\n  }\n\n  public get offsetPoint() {\n    return this.isSemiDonut ? this.baseStrokeDashArray / (100 / 3) : this.baseStrokeDashArray / 100;\n  }\n\n  public get strokeDashArrayParts() {\n    const greyStroke = this.greyStrokeDashArray;\n    const offsetPoint = this.offsetPoint;\n\n    const greyStrokeDash = greyStroke - 2 * offsetPoint;\n    const strokeDashArrayBetweenSpaces = `${greyStrokeDash} ${offsetPoint}`;\n\n    if (this.isSemiDonut) {\n      return `${offsetPoint} ${this.value < 95 ? strokeDashArrayBetweenSpaces : ''} ${this.baseStrokeDashArray}`;\n    }\n\n    return `${offsetPoint} ${greyStrokeDash >= 0 ? strokeDashArrayBetweenSpaces : ''} ${this.baseStrokeDashArray}`;\n  }\n\n  public get strokeDashOffsetBase() {\n    const valueStroke = this.valueStrokeDashArray;\n    const offsetPoint = this.offsetPoint;\n\n    return -1 * (valueStroke + (this.isSemiDonut ? offsetPoint : 0));\n  };\n}\n"],"mappings":";;;AAAA,WAAaA,eAAe;EAM1B,SAAAA,gBAAYC,KAAa,EAAEC,WAAoB,EAAE;IAAAC,eAAA,OAAAH,eAAA;IAAAI,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAC/C,IAAI,CAACF,WAAW,GAAGA,WAAW;IAC9B,IAAI,CAACG,MAAM,GAAGH,WAAW,GAAG,CAAC,GAAG,EAAE;IAClC,IAAI,CAACD,KAAK,GAAGA,KAAK;EACpB;EAAC,OAAAK,YAAA,CAAAN,eAAA;IAAAO,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAqB;MACnB,OAAO,IAAI,CAACN,WAAW,GAAG,WAAW,GAAG,WAAW;IACrD;EAAC;IAAAK,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAyB;MACvB,OAAO,IAAI,CAACN,WAAW,GAAG,CAAC,GAAG,CAAC;IACjC;EAAC;IAAAK,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAiC;MAC/B,OAAO,IAAI,CAACN,WAAW,GAAGO,IAAI,CAACC,EAAE,GAAG,IAAI,CAACL,MAAM,GAAG,CAAC,GAAGI,IAAI,CAACC,EAAE,GAAG,IAAI,CAACL,MAAM;IAC7E;EAAC;IAAAE,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAkC;MAChC,OAAO,IAAI,CAACG,mBAAmB,IAAI,IAAI,CAACV,KAAK,GAAG,GAAG,CAAC;IACtD;EAAC;IAAAM,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAiC;MAC/B,OAAO,IAAI,CAACG,mBAAmB,GAAG,IAAI,CAACC,oBAAoB;IAC7D;EAAC;IAAAL,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAyB;MACvB,OAAO,IAAI,CAACN,WAAW,GAAG,IAAI,CAACS,mBAAmB,IAAI,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAACA,mBAAmB,GAAG,GAAG;IACjG;EAAC;IAAAJ,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAkC;MAChC,IAAMK,UAAU,GAAG,IAAI,CAACC,mBAAmB;MAC3C,IAAMC,WAAW,GAAG,IAAI,CAACA,WAAW;MAEpC,IAAMC,cAAc,GAAGH,UAAU,GAAG,CAAC,GAAGE,WAAW;MACnD,IAAME,4BAA4B,MAAAC,MAAA,CAAMF,cAAc,OAAAE,MAAA,CAAIH,WAAW,CAAE;MAEvE,IAAI,IAAI,CAACb,WAAW,EAAE;QACpB,UAAAgB,MAAA,CAAUH,WAAW,OAAAG,MAAA,CAAI,IAAI,CAACjB,KAAK,GAAG,EAAE,GAAGgB,4BAA4B,GAAG,EAAE,OAAAC,MAAA,CAAI,IAAI,CAACP,mBAAmB;MAC1G;MAEA,UAAAO,MAAA,CAAUH,WAAW,OAAAG,MAAA,CAAIF,cAAc,IAAI,CAAC,GAAGC,4BAA4B,GAAG,EAAE,OAAAC,MAAA,CAAI,IAAI,CAACP,mBAAmB;IAC9G;EAAC;IAAAJ,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAkC;MAChC,IAAMW,WAAW,GAAG,IAAI,CAACP,oBAAoB;MAC7C,IAAMG,WAAW,GAAG,IAAI,CAACA,WAAW;MAEpC,OAAO,CAAC,CAAC,IAAII,WAAW,IAAI,IAAI,CAACjB,WAAW,GAAGa,WAAW,GAAG,CAAC,CAAC,CAAC;IAClE;EAAC;AAAA","ignoreList":[]}

package/lib/esm/component/score/Donut.mjs

@@ -1,60 +1,53 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
-import React from "react";
-import { Box } from "@semcore/flex-box";
-import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
+import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
 import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
+import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
+import { Box } from "@semcore/flex-box";
+import React from "react";
+import { ScoreDonutUtils } from "../../utils/ScoreDonutUtils.mjs";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 /*!__reshadow-styles__:"./donut.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_1i1x7{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1i1x7_gg_.__loading_1i1x7_gg_,.___SLineGauge_1i1x7_gg_.__loading_1i1x7_gg_,.___STrendBar_1i1x7_gg_.__loading_1i1x7_gg_,.___STrendLine_1i1x7_gg_.__loading_1i1x7_gg_{animation-name:pulse_1i1x7;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_1i1x7_gg_.__semi_1i1x7_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_1i1x7_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_1i1x7_gg_.__animate_1i1x7_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}",
+    "@keyframes pulse_iv4ae{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_iv4ae_gg_.__loading_iv4ae_gg_,.___SLineGauge_iv4ae_gg_.__loading_iv4ae_gg_,.___STrendBar_iv4ae_gg_.__loading_iv4ae_gg_,.___STrendLine_iv4ae_gg_.__loading_iv4ae_gg_{animation-name:pulse_iv4ae;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_iv4ae_gg_.__semi_iv4ae_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_iv4ae_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_iv4ae_gg_.__animate_iv4ae_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}",
     /*__inner_css_end__*/
-    "1i1x7_gg_"
+    "iv4ae_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_1i1x7_gg_",
-    "_loading": "__loading_1i1x7_gg_",
-    "__SDonutContainer": "___SDonutContainer_1i1x7_gg_",
-    "__STrendLine": "___STrendLine_1i1x7_gg_",
-    "__STrendBar": "___STrendBar_1i1x7_gg_",
-    "@pulse": "pulse_1i1x7",
-    "_animate": "__animate_1i1x7_gg_",
-    "_semi": "__semi_1i1x7_gg_"
+    "__SLineGauge": "___SLineGauge_iv4ae_gg_",
+    "_loading": "__loading_iv4ae_gg_",
+    "__SDonutContainer": "___SDonutContainer_iv4ae_gg_",
+    "__STrendLine": "___STrendLine_iv4ae_gg_",
+    "__STrendBar": "___STrendBar_iv4ae_gg_",
+    "@pulse": "pulse_iv4ae",
+    "_animate": "__animate_iv4ae_gg_",
+    "_semi": "__semi_iv4ae_gg_"
   })
 );
 var DonutRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(DonutRoot2, _Component);
-  var _super = _createSuper(DonutRoot2);
   function DonutRoot2() {
     _classCallCheck(this, DonutRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, DonutRoot2, arguments);
   }
-  _createClass(DonutRoot2, [{
+  _inherits(DonutRoot2, _Component);
+  return _createClass(DonutRoot2, [{
     key: "render",
     value: function render() {
       var _ref = this.asProps, _ref2;
       var SDonutContainer = Box;
       var _this$asProps = this.asProps, value = _this$asProps.value, styles = _this$asProps.styles, _this$asProps$baseBgC = _this$asProps.baseBgColor, baseBgColor = _this$asProps$baseBgC === void 0 ? "chart-grid-bar-chart-base-bg" : _this$asProps$baseBgC, _this$asProps$color = _this$asProps.color, color = _this$asProps$color === void 0 ? "chart-palette-order-1" : _this$asProps$color, resolveColor = _this$asProps.resolveColor, isSemiDonut = _this$asProps.isSemiDonut, loading = _this$asProps.loading;
-      var strokeWidth = isSemiDonut ? 6 : 4;
-      var radius = isSemiDonut ? 9 : 10;
-      var baseStrokeDasharray = isSemiDonut ? Math.PI * radius : Math.PI * 2 * radius;
-      var valueStrokeDasharray = baseStrokeDasharray * (value / 100);
-      var greyStrokeDasharray = baseStrokeDasharray * ((100 - value) / 100);
-      var offsetPoint = isSemiDonut ? baseStrokeDasharray / (100 / 3) : baseStrokeDasharray / 100;
-      var strokeDasharrayBetweenSpaces = "".concat(greyStrokeDasharray - 2 * offsetPoint, " ").concat(offsetPoint);
-      var spaceStrokeDasharray = "".concat(offsetPoint, " ").concat(value < 99 ? "".concat(strokeDasharrayBetweenSpaces) : "", " ").concat(baseStrokeDasharray);
-      if (isSemiDonut) {
-        spaceStrokeDasharray = "".concat(offsetPoint, " ").concat(value < 95 ? "".concat(strokeDasharrayBetweenSpaces) : "", " ").concat(baseStrokeDasharray);
-      }
-      var viewBox = isSemiDonut ? "0 0 24 12" : "0 0 24 24";
-      var strokeDashoffsetBase = -1 * (valueStrokeDasharray + (isSemiDonut ? offsetPoint : 0));
+      var scoreDonut = new ScoreDonutUtils(value, isSemiDonut);
       var _extractAriaProps = extractAriaProps(this.asProps), __excludeProps = _extractAriaProps.__excludeProps, extractedAriaProps = _extractAriaProps.extractedAriaProps;
       return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SDonutContainer, _ref2.cn("SDonutContainer", _objectSpread({}, assignProps({
         "semi": isSemiDonut,
@@ -62,40 +55,39 @@ var DonutRoot = /* @__PURE__ */ function(_Component) {
       }, _ref))), /* @__PURE__ */ React.createElement("svg", _ref2.cn("svg", _objectSpread({
         "width": "100%",
         "height": "100%",
-        "viewBox": viewBox,
+        "viewBox": scoreDonut.viewBox,
         "fill": "none",
         "role": "img"
       }, extractedAriaProps)), /* @__PURE__ */ React.createElement("g", _ref2.cn("g", {}), /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
         "cx": "12",
         "cy": "12",
-        "r": radius,
-        "strokeWidth": strokeWidth,
+        "r": scoreDonut.radius,
+        "strokeWidth": scoreDonut.strokeWidth,
         "stroke": resolveColor(baseBgColor),
-        "strokeDasharray": loading ? void 0 : "".concat(greyStrokeDasharray, " ").concat(baseStrokeDasharray),
-        "strokeDashoffset": strokeDashoffsetBase
+        "strokeDasharray": loading ? void 0 : "".concat(scoreDonut.greyStrokeDashArray, " ").concat(scoreDonut.baseStrokeDashArray),
+        "strokeDashoffset": scoreDonut.strokeDashOffsetBase
       })), !loading && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
         "cx": "12",
         "cy": "12",
-        "r": radius,
-        "strokeWidth": strokeWidth,
+        "r": scoreDonut.radius,
+        "strokeWidth": scoreDonut.strokeWidth,
         "stroke": resolveColor(color),
-        "strokeDasharray": "".concat(valueStrokeDasharray, " ").concat(baseStrokeDasharray),
-        "strokeDashoffset": valueStrokeDasharray
+        "strokeDasharray": "".concat(scoreDonut.valueStrokeDashArray, " ").concat(scoreDonut.baseStrokeDashArray),
+        "strokeDashoffset": scoreDonut.valueStrokeDashArray
       }), /* @__PURE__ */ React.createElement("animate", _ref2.cn("animate", {
         "attributeName": "stroke-dashoffset",
-        "values": "0;".concat(valueStrokeDasharray)
+        "values": "0;".concat(scoreDonut.valueStrokeDashArray)
       }))), value !== 100 && !isSemiDonut && /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
         "cx": "12",
         "cy": "12",
-        "r": radius,
-        "strokeWidth": strokeWidth,
+        "r": scoreDonut.radius,
+        "strokeWidth": scoreDonut.strokeWidth,
         "stroke": resolveColor("chart-grid-border"),
-        "strokeDasharray": spaceStrokeDasharray,
-        "strokeDashoffset": -1 * valueStrokeDasharray
+        "strokeDasharray": scoreDonut.strokeDashArrayParts,
+        "strokeDashoffset": -1 * scoreDonut.valueStrokeDashArray
       }))))));
     }
   }]);
-  return DonutRoot2;
 }(Component);
 _defineProperty(DonutRoot, "enhance", [resolveColorEnhance()]);
 _defineProperty(DonutRoot, "style", style);

package/lib/esm/component/score/Line.mjs

@@ -1,50 +1,54 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
-import React from "react";
-import { Box, Flex } from "@semcore/flex-box";
+import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
 import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
+import { Box, Flex } from "@semcore/flex-box";
+import React from "react";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 /*!__reshadow-styles__:"./line.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_7icm2{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_7icm2{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_7icm2_gg_.__loading_7icm2_gg_,.___SLineGauge_7icm2_gg_.__loading_7icm2_gg_,.___STrendBar_7icm2_gg_.__loading_7icm2_gg_,.___STrendLine_7icm2_gg_.__loading_7icm2_gg_{animation-name:pulse_7icm2;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_7icm2_gg_{height:8px;background-color:var(--base-bg-color_7icm2, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_7icm2_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_7icm2_gg_.__percent_7icm2_gg_{width:var(--percent_7icm2)}.___SLineSegmentItem_7icm2_gg_.__color_7icm2_gg_,.___SLineValue_7icm2_gg_.__color_7icm2_gg_{background-color:var(--color_7icm2, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_7icm2_gg_.__segments_7icm2_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_7icm2_gg_,.___SLineGaugeSegment_7icm2_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_7icm2_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_7icm2_gg_{height:8px;background:0 0;border-right-color:var(--intergalactic-chart-grid-border, #ffffff);border-right-style:solid;border-right-width:1px;box-sizing:content-box}.___SAnimationLine_7icm2_gg_{background-color:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9);transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out;animation-name:move-line_7icm2;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}",
+    "@keyframes pulse_v62p0{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_v62p0{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_v62p0_gg_.__loading_v62p0_gg_,.___SLineGauge_v62p0_gg_.__loading_v62p0_gg_,.___STrendBar_v62p0_gg_.__loading_v62p0_gg_,.___STrendLine_v62p0_gg_.__loading_v62p0_gg_{animation-name:pulse_v62p0;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_v62p0_gg_{height:8px;background-color:var(--base-bg-color_v62p0, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_v62p0_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_v62p0_gg_.__percent_v62p0_gg_{width:var(--percent_v62p0)}.___SLineSegmentItem_v62p0_gg_.__color_v62p0_gg_,.___SLineValue_v62p0_gg_.__color_v62p0_gg_{background-color:var(--color_v62p0, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_v62p0_gg_.__segments_v62p0_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_v62p0_gg_,.___SLineGaugeSegment_v62p0_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_v62p0_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_v62p0_gg_{height:8px;background:0 0;border-right-color:var(--intergalactic-chart-grid-border, #ffffff);border-right-style:solid;border-right-width:1px;box-sizing:content-box}.___SAnimationLine_v62p0_gg_{background-color:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9);transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out;animation-name:move-line_v62p0;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}",
     /*__inner_css_end__*/
-    "7icm2_gg_"
+    "v62p0_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_7icm2_gg_",
-    "_loading": "__loading_7icm2_gg_",
-    "__SDonutContainer": "___SDonutContainer_7icm2_gg_",
-    "__STrendLine": "___STrendLine_7icm2_gg_",
-    "__STrendBar": "___STrendBar_7icm2_gg_",
-    "@pulse": "pulse_7icm2",
-    "--base-bg-color": "--base-bg-color_7icm2",
-    "__SLineValue": "___SLineValue_7icm2_gg_",
-    "_percent": "__percent_7icm2_gg_",
-    "--percent": "--percent_7icm2",
-    "_color": "__color_7icm2_gg_",
-    "__SLineSegmentItem": "___SLineSegmentItem_7icm2_gg_",
-    "--color": "--color_7icm2",
-    "_segments": "__segments_7icm2_gg_",
-    "__SLineGaugeSegment": "___SLineGaugeSegment_7icm2_gg_",
-    "__SAnimationLine": "___SAnimationLine_7icm2_gg_",
-    "@move-line": "move-line_7icm2"
+    "__SLineGauge": "___SLineGauge_v62p0_gg_",
+    "_loading": "__loading_v62p0_gg_",
+    "__SDonutContainer": "___SDonutContainer_v62p0_gg_",
+    "__STrendLine": "___STrendLine_v62p0_gg_",
+    "__STrendBar": "___STrendBar_v62p0_gg_",
+    "@pulse": "pulse_v62p0",
+    "--base-bg-color": "--base-bg-color_v62p0",
+    "__SLineValue": "___SLineValue_v62p0_gg_",
+    "_percent": "__percent_v62p0_gg_",
+    "--percent": "--percent_v62p0",
+    "_color": "__color_v62p0_gg_",
+    "__SLineSegmentItem": "___SLineSegmentItem_v62p0_gg_",
+    "--color": "--color_v62p0",
+    "_segments": "__segments_v62p0_gg_",
+    "__SLineGaugeSegment": "___SLineGaugeSegment_v62p0_gg_",
+    "__SAnimationLine": "___SAnimationLine_v62p0_gg_",
+    "@move-line": "move-line_v62p0"
   })
 );
 var LineRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(LineRoot2, _Component);
-  var _super = _createSuper(LineRoot2);
   function LineRoot2() {
     _classCallCheck(this, LineRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, LineRoot2, arguments);
   }
-  _createClass(LineRoot2, [{
+  _inherits(LineRoot2, _Component);
+  return _createClass(LineRoot2, [{
     key: "getSegmentProps",
     value: function getSegmentProps(segmentProps) {
       var _this$asProps = this.asProps, children = _this$asProps.children, resolveColor = _this$asProps.resolveColor;
@@ -56,7 +60,7 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
       });
       var width = sum > 0 ? 100 * segmentProps.value / sum : 0;
       return {
-        w: "".concat(width, "%"),
+        "w": "".concat(width, "%"),
         "use:color": resolveColor(segmentProps.color)
       };
     }
@@ -102,7 +106,6 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
       })), Boolean(SegmentItems.length) && /* @__PURE__ */ React.createElement(SLineGaugeSegment, _ref5.cn("SLineGaugeSegment", {}), SegmentItems), animate && /* @__PURE__ */ React.createElement(SAnimationLine, _ref5.cn("SAnimationLine", {})));
     }
   }]);
-  return LineRoot2;
 }(Component);
 _defineProperty(LineRoot, "enhance", [resolveColorEnhance()]);
 _defineProperty(LineRoot, "displayName", "ScoreLine");

package/lib/esm/component/trend/Bar.mjs

@@ -2,41 +2,45 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled, createComponent, assignProps } from "@semcore/core";
-import React from "react";
+import { createComponent, assignProps, sstyled } from "@semcore/core";
+import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
 import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
-import { Trend } from "./Trend.mjs";
 import { Box } from "@semcore/flex-box";
-import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
+import React from "react";
+import { Trend } from "./Trend.mjs";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 /*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_1ql6o{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1ql6o_gg_.__loading_1ql6o_gg_,.___SLineGauge_1ql6o_gg_.__loading_1ql6o_gg_,.___STrendBar_1ql6o_gg_.__loading_1ql6o_gg_,.___STrendLine_1ql6o_gg_.__loading_1ql6o_gg_{animation-name:pulse_1ql6o;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
+    "@keyframes pulse_1pnj2{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1pnj2_gg_.__loading_1pnj2_gg_,.___SLineGauge_1pnj2_gg_.__loading_1pnj2_gg_,.___STrendBar_1pnj2_gg_.__loading_1pnj2_gg_,.___STrendLine_1pnj2_gg_.__loading_1pnj2_gg_{animation-name:pulse_1pnj2;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
     /*__inner_css_end__*/
-    "1ql6o_gg_"
+    "1pnj2_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_1ql6o_gg_",
-    "_loading": "__loading_1ql6o_gg_",
-    "__SDonutContainer": "___SDonutContainer_1ql6o_gg_",
-    "__STrendLine": "___STrendLine_1ql6o_gg_",
-    "__STrendBar": "___STrendBar_1ql6o_gg_",
-    "@pulse": "pulse_1ql6o"
+    "__SLineGauge": "___SLineGauge_1pnj2_gg_",
+    "_loading": "__loading_1pnj2_gg_",
+    "__SDonutContainer": "___SDonutContainer_1pnj2_gg_",
+    "__STrendLine": "___STrendLine_1pnj2_gg_",
+    "__STrendBar": "___STrendBar_1pnj2_gg_",
+    "@pulse": "pulse_1pnj2"
   })
 );
 var TrendBarRoot = /* @__PURE__ */ function(_Trend) {
-  _inherits(TrendBarRoot2, _Trend);
-  var _super = _createSuper(TrendBarRoot2);
   function TrendBarRoot2() {
     _classCallCheck(this, TrendBarRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, TrendBarRoot2, arguments);
   }
-  _createClass(TrendBarRoot2, [{
+  _inherits(TrendBarRoot2, _Trend);
+  return _createClass(TrendBarRoot2, [{
     key: "defaultData",
     get: function get() {
       return [{
@@ -94,7 +98,6 @@ var TrendBarRoot = /* @__PURE__ */ function(_Trend) {
       })));
     }
   }]);
-  return TrendBarRoot2;
 }(Trend);
 _defineProperty(TrendBarRoot, "enhance", [resolveColorEnhance()]);
 _defineProperty(TrendBarRoot, "style", style);

package/lib/esm/component/trend/Line.mjs

@@ -2,42 +2,46 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled, createComponent, assignProps } from "@semcore/core";
-import React from "react";
+import { createComponent, assignProps, sstyled } from "@semcore/core";
+import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
 import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
 import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
-import { Trend } from "./Trend.mjs";
 import { Box } from "@semcore/flex-box";
-import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
+import React from "react";
+import { Trend } from "./Trend.mjs";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 /*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_1ql6o{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1ql6o_gg_.__loading_1ql6o_gg_,.___SLineGauge_1ql6o_gg_.__loading_1ql6o_gg_,.___STrendBar_1ql6o_gg_.__loading_1ql6o_gg_,.___STrendLine_1ql6o_gg_.__loading_1ql6o_gg_{animation-name:pulse_1ql6o;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
+    "@keyframes pulse_1pnj2{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1pnj2_gg_.__loading_1pnj2_gg_,.___SLineGauge_1pnj2_gg_.__loading_1pnj2_gg_,.___STrendBar_1pnj2_gg_.__loading_1pnj2_gg_,.___STrendLine_1pnj2_gg_.__loading_1pnj2_gg_{animation-name:pulse_1pnj2;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
     /*__inner_css_end__*/
-    "1ql6o_gg_"
+    "1pnj2_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_1ql6o_gg_",
-    "_loading": "__loading_1ql6o_gg_",
-    "__SDonutContainer": "___SDonutContainer_1ql6o_gg_",
-    "__STrendLine": "___STrendLine_1ql6o_gg_",
-    "__STrendBar": "___STrendBar_1ql6o_gg_",
-    "@pulse": "pulse_1ql6o"
+    "__SLineGauge": "___SLineGauge_1pnj2_gg_",
+    "_loading": "__loading_1pnj2_gg_",
+    "__SDonutContainer": "___SDonutContainer_1pnj2_gg_",
+    "__STrendLine": "___STrendLine_1pnj2_gg_",
+    "__STrendBar": "___STrendBar_1pnj2_gg_",
+    "@pulse": "pulse_1pnj2"
   })
 );
 var TrendLineRoot = /* @__PURE__ */ function(_Trend) {
-  _inherits(TrendLineRoot2, _Trend);
-  var _super = _createSuper(TrendLineRoot2);
   function TrendLineRoot2() {
     _classCallCheck(this, TrendLineRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, TrendLineRoot2, arguments);
   }
-  _createClass(TrendLineRoot2, [{
+  _inherits(TrendLineRoot2, _Trend);
+  return _createClass(TrendLineRoot2, [{
     key: "defaultData",
     get: function get() {
       return [15, 70, 20, 85, 20];
@@ -131,7 +135,6 @@ var TrendLineRoot = /* @__PURE__ */ function(_Trend) {
       }))))));
     }
   }]);
-  return TrendLineRoot2;
 }(Trend);
 _defineProperty(TrendLineRoot, "enhance", [resolveColorEnhance(), uniqueIDEnhancement()]);
 _defineProperty(TrendLineRoot, "style", style);

package/lib/esm/component/trend/Trend.mjs

@@ -1,29 +1,32 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React from "react";
 import { Component } from "@semcore/core";
+import React from "react";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 var Trend = /* @__PURE__ */ function(_Component) {
-  _inherits(Trend2, _Component);
-  var _super = _createSuper(Trend2);
   function Trend2() {
     var _this;
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
     _classCallCheck(this, Trend2);
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    _this = _callSuper(this, Trend2, [].concat(args));
+    _defineProperty(_this, "state", {
       width: 200,
       height: 100
     });
-    _defineProperty(_assertThisInitialized(_this), "containerRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "containerRef", /* @__PURE__ */ React.createRef());
     return _this;
   }
-  _createClass(Trend2, [{
+  _inherits(Trend2, _Component);
+  return _createClass(Trend2, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.setSizes();
@@ -71,7 +74,6 @@ var Trend = /* @__PURE__ */ function(_Component) {
       }
     }
   }]);
-  return Trend2;
 }(Component);
 export {
   Trend

package/lib/esm/index.mjs

@@ -1,7 +1,7 @@
-import { ScoreSemiDonut, ScoreDonut } from "./component/score/Donut.mjs";
+import { ScoreDonut, ScoreSemiDonut } from "./component/score/Donut.mjs";
 import { ScoreLine } from "./component/score/Line.mjs";
-import { TrendLine, TrendArea } from "./component/trend/Line.mjs";
-import { TrendBar, TrendHistogram } from "./component/trend/Bar.mjs";
+import { TrendHistogram, TrendBar } from "./component/trend/Bar.mjs";
+import { TrendArea, TrendLine } from "./component/trend/Line.mjs";
 var miniCharts = {
   TrendLine,
   TrendArea,

package/lib/esm/utils/ScoreDonutUtils.mjs

@@ -0,0 +1,67 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var ScoreDonutUtils = /* @__PURE__ */ function() {
+  function ScoreDonutUtils2(value, isSemiDonut) {
+    _classCallCheck(this, ScoreDonutUtils2);
+    _defineProperty(this, "isSemiDonut", void 0);
+    _defineProperty(this, "value", void 0);
+    _defineProperty(this, "radius", void 0);
+    this.isSemiDonut = isSemiDonut;
+    this.radius = isSemiDonut ? 9 : 10;
+    this.value = value;
+  }
+  return _createClass(ScoreDonutUtils2, [{
+    key: "viewBox",
+    get: function get() {
+      return this.isSemiDonut ? "0 0 24 12" : "0 0 24 24";
+    }
+  }, {
+    key: "strokeWidth",
+    get: function get() {
+      return this.isSemiDonut ? 6 : 4;
+    }
+  }, {
+    key: "baseStrokeDashArray",
+    get: function get() {
+      return this.isSemiDonut ? Math.PI * this.radius : 2 * Math.PI * this.radius;
+    }
+  }, {
+    key: "valueStrokeDashArray",
+    get: function get() {
+      return this.baseStrokeDashArray * (this.value / 100);
+    }
+  }, {
+    key: "greyStrokeDashArray",
+    get: function get() {
+      return this.baseStrokeDashArray - this.valueStrokeDashArray;
+    }
+  }, {
+    key: "offsetPoint",
+    get: function get() {
+      return this.isSemiDonut ? this.baseStrokeDashArray / (100 / 3) : this.baseStrokeDashArray / 100;
+    }
+  }, {
+    key: "strokeDashArrayParts",
+    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);
+    }
+  }, {
+    key: "strokeDashOffsetBase",
+    get: function get() {
+      var valueStroke = this.valueStrokeDashArray;
+      var offsetPoint = this.offsetPoint;
+      return -1 * (valueStroke + (this.isSemiDonut ? offsetPoint : 0));
+    }
+  }]);
+}();
+export {
+  ScoreDonutUtils
+};

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

@@ -1,7 +1,7 @@
-import { ComponentType } from '@semcore/core';
-import { BoxProps } from '@semcore/flex-box';
+import { type ComponentType } from '@semcore/core';
 import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
-import { CommonScoreProps } from './Score';
+import { type BoxProps } from '@semcore/flex-box';
+import type { CommonScoreProps } from './Score';
 export type ScoreDonutProps = BoxProps & CommonScoreProps;
 type Enhances = {
     resolveColor: ReturnType<typeof resolveColorEnhance>;

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

@@ -1,2 +1,2 @@
-import { ScoreLineComponent } from './Line.types';
+import type { ScoreLineComponent } from './Line.types';
 export declare const ScoreLine: ScoreLineComponent;

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

@@ -1,8 +1,8 @@
-import { Intergalactic, ComponentType } from '@semcore/core';
-import { CommonScoreProps } from './Score';
-import React from 'react';
-import { BoxProps, Box } from '@semcore/flex-box';
-import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
+import type { Intergalactic, ComponentType } from '@semcore/core';
+import type resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
+import type { BoxProps, Box } from '@semcore/flex-box';
+import type React from 'react';
+import type { CommonScoreProps } from './Score';
 type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
 type Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
 export type SegmentColor = `chart-palette-order-${Range<1, 24>}`;

package/lib/types/component/trend/Bar.d.ts

@@ -1,6 +1,6 @@
-import { ComponentType } from '@semcore/core';
+import { type ComponentType } from '@semcore/core';
 import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
-import { CommonTrendProps } from './Trend';
+import { type CommonTrendProps } from './Trend';
 type BarItem = {
     /**
      * Value

package/lib/types/component/trend/Line.d.ts

@@ -1,6 +1,6 @@
-import { ComponentType } from '@semcore/core';
+import { type ComponentType } from '@semcore/core';
 import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
-import { CommonTrendProps } from './Trend';
+import { type CommonTrendProps } from './Trend';
 export type TrendLineProps = CommonTrendProps & {
     /**
      * List of values

package/lib/types/component/trend/Trend.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
 import { Component } from '@semcore/core';
-import { BoxProps } from '@semcore/flex-box';
+import type { BoxProps } from '@semcore/flex-box';
+import React from 'react';
 export type CommonTrendProps = BoxProps & {
     /**
      * Flag to enable animate of charts

package/lib/types/component/trend/index.d.ts

@@ -1,3 +1,3 @@
-import { TrendLine, TrendArea } from './Line';
 import { TrendBar, TrendHistogram } from './Bar';
+import { TrendLine, TrendArea } from './Line';
 export { TrendLine, TrendArea, TrendBar, TrendHistogram };

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

@@ -0,0 +1,14 @@
+export declare class ScoreDonutUtils {
+    private readonly isSemiDonut;
+    private readonly value;
+    readonly radius: number;
+    constructor(value: number, isSemiDonut: 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;
+}