@semcore/mini-chart 16.0.9-prerelease.5 → 16.1.0-prerelease.0

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [16.1.0] - 2025-09-22
+
+### Added
+
+- Initial animation for `ScoreDonut` and `ScoreSemiDonut`.
+
+### Changed
+
+- `ScoreDonut` and `ScoreSemiDonut` visual value can't be greater than 100.
+
 ## [16.0.9] - 2025-09-17
 
 ### Changed

package/lib/cjs/component/score/Donut.js

@@ -16,22 +16,23 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _core = require("@semcore/core");
 var _ariaProps = require("@semcore/core/lib/utils/ariaProps");
 var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/resolveColorEnhance"));
+var _useCssVariable = require("@semcore/core/lib/utils/useCssVariable");
 var _flexBox = require("@semcore/flex-box");
 var _react = _interopRequireDefault(require("react"));
 var _ScoreDonutUtils = require("../../utils/ScoreDonutUtils");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 /*!__reshadow-styles__:"./donut.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_14jjd{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_14jjd_gg_.__loading_14jjd_gg_,.___SLineGauge_14jjd_gg_.__loading_14jjd_gg_,.___STrendBar_14jjd_gg_.__loading_14jjd_gg_,.___STrendLine_14jjd_gg_.__loading_14jjd_gg_{animation-name:pulse_14jjd;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_14jjd_gg_.__semi_14jjd_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_14jjd_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_14jjd_gg_.__animate_14jjd_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}", /*__inner_css_end__*/"14jjd_gg_"),
+var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_19y2a{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_19y2a_gg_.__loading_19y2a_gg_,.___SLineGauge_19y2a_gg_.__loading_19y2a_gg_,.___STrendBar_19y2a_gg_.__loading_19y2a_gg_,.___STrendLine_19y2a_gg_.__loading_19y2a_gg_{animation-name:pulse_19y2a;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_19y2a_gg_.__semi_19y2a_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_19y2a_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_19y2a_gg_.__animate_19y2a_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}", /*__inner_css_end__*/"19y2a_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SLineGauge": "___SLineGauge_14jjd_gg_",
-  "_loading": "__loading_14jjd_gg_",
-  "__SDonutContainer": "___SDonutContainer_14jjd_gg_",
-  "__STrendLine": "___STrendLine_14jjd_gg_",
-  "__STrendBar": "___STrendBar_14jjd_gg_",
-  "@pulse": "pulse_14jjd",
-  "_animate": "__animate_14jjd_gg_",
-  "_semi": "__semi_14jjd_gg_"
+  "__SLineGauge": "___SLineGauge_19y2a_gg_",
+  "_loading": "__loading_19y2a_gg_",
+  "__SDonutContainer": "___SDonutContainer_19y2a_gg_",
+  "__STrendLine": "___STrendLine_19y2a_gg_",
+  "__STrendBar": "___STrendBar_19y2a_gg_",
+  "@pulse": "pulse_19y2a",
+  "_animate": "__animate_19y2a_gg_",
+  "_semi": "__semi_19y2a_gg_"
 });
 var DonutRoot = /*#__PURE__*/function (_Component) {
   function DonutRoot() {
@@ -54,7 +55,9 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
         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;
+        loading = _this$asProps.loading,
+        animate = _this$asProps.animate,
+        duration = _this$asProps.duration;
       var scoreDonut = new _ScoreDonutUtils.ScoreDonutUtils(value, isSemiDonut);
       var _extractAriaProps = (0, _ariaProps.extractAriaProps)(this.asProps),
         __excludeProps = _extractAriaProps.__excludeProps,
@@ -74,32 +77,42 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
         "r": scoreDonut.radius,
         "strokeWidth": scoreDonut.strokeWidth,
         "stroke": resolveColor(baseBgColor),
-        "strokeDasharray": loading ? undefined : "".concat(scoreDonut.greyStrokeDashArray, " ").concat(scoreDonut.baseStrokeDashArray),
-        "strokeDashoffset": scoreDonut.strokeDashOffsetBase
-      })), !loading && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("circle", _ref2.cn("circle", {
-        "cx": '12',
-        "cy": '12',
-        "r": scoreDonut.radius,
-        "strokeWidth": scoreDonut.strokeWidth,
-        "stroke": resolveColor(color),
-        "strokeDasharray": "".concat(scoreDonut.valueStrokeDashArray, " ").concat(scoreDonut.baseStrokeDashArray),
-        "strokeDashoffset": scoreDonut.valueStrokeDashArray
-      }), /*#__PURE__*/_react["default"].createElement("animate", _ref2.cn("animate", {
+        "strokeDasharray": loading ? undefined : "".concat(scoreDonut.baseLength, " ").concat(scoreDonut.fullLength),
+        "strokeDashoffset": scoreDonut.baseOffset
+      }), animate && value > 0 && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("animate", _ref2.cn("animate", {
+        "attributeName": 'stroke-dasharray',
+        "from": "".concat(scoreDonut.animatedBaseLengthFrom, " ").concat(scoreDonut.fullLength),
+        "to": "".concat(scoreDonut.animatedBaseLengthTo, " ").concat(scoreDonut.fullLength),
+        "dur": duration + 'ms'
+      })), /*#__PURE__*/_react["default"].createElement("animate", _ref2.cn("animate", {
         "attributeName": 'stroke-dashoffset',
-        "values": "0;".concat(scoreDonut.valueStrokeDashArray)
-      }))), scoreDonut.hasDivider && !isSemiDonut && /*#__PURE__*/_react["default"].createElement("circle", _ref2.cn("circle", {
+        "from": -1 * scoreDonut.startMargin,
+        "to": scoreDonut.baseOffset,
+        "dur": duration + 'ms'
+      })))), !loading && value > 0 && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("circle", _ref2.cn("circle", {
         "cx": '12',
         "cy": '12',
         "r": scoreDonut.radius,
         "strokeWidth": scoreDonut.strokeWidth,
-        "stroke": resolveColor('chart-grid-border'),
-        "strokeDasharray": scoreDonut.strokeDashArrayParts,
-        "strokeDashoffset": -1 * scoreDonut.valueStrokeDashArray
-      }))))));
+        "stroke": resolveColor(color),
+        "strokeDasharray": "".concat(scoreDonut.valueLength, " ").concat(scoreDonut.fullLength)
+      }), animate && /*#__PURE__*/_react["default"].createElement("animate", _ref2.cn("animate", {
+        "attributeName": 'stroke-dasharray',
+        "from": "0 ".concat(scoreDonut.fullLength),
+        "to": "".concat(scoreDonut.valueLength, " ").concat(scoreDonut.fullLength),
+        "dur": duration + 'ms'
+      })))))));
     }
   }]);
 }(_core.Component);
-(0, _defineProperty2["default"])(DonutRoot, "enhance", [(0, _resolveColorEnhance["default"])()]);
+(0, _defineProperty2["default"])(DonutRoot, "enhance", [(0, _useCssVariable.cssVariableEnhance)({
+  variable: '--intergalactic-duration-extra-slow',
+  fallback: '500',
+  map: function map(v) {
+    return Number.parseInt(v, 10).toString();
+  },
+  prop: 'duration'
+}), (0, _resolveColorEnhance["default"])()]);
 (0, _defineProperty2["default"])(DonutRoot, "style", style);
 (0, _defineProperty2["default"])(DonutRoot, "defaultProps", {
   animate: true

package/lib/cjs/component/score/Donut.js.map

@@ -1 +1 @@
-{"version":3,"file":"Donut.js","names":["_core","require","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_flexBox","_react","_ScoreDonutUtils","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct2","Reflect","construct","constructor","apply","style","sstyled","insert","DonutRoot","_Component","_classCallCheck2","arguments","_inherits2","_createClass2","key","value","render","_ref","asProps","_ref2","SDonutContainer","Box","_this$asProps","styles","_this$asProps$baseBgC","baseBgColor","_this$asProps$color","color","resolveColor","isSemiDonut","loading","scoreDonut","ScoreDonutUtils","_extractAriaProps","extractAriaProps","__excludeProps","extractedAriaProps","createElement","cn","_objectSpread2","assignProps","viewBox","radius","strokeWidth","undefined","concat","greyStrokeDashArray","baseStrokeDashArray","strokeDashOffsetBase","Fragment","valueStrokeDashArray","hasDivider","strokeDashArrayParts","Component","_defineProperty2","resolveColorEnhance","animate","ScoreDonut","exports","createComponent","displayName","ScoreSemiDonut","enhancements","wrapperProps","props"],"sources":["../../../../src/component/score/Donut.tsx"],"sourcesContent":["import { createComponent, Component, Root, sstyled, type ComponentType } from '@semcore/core';\nimport { assignProps } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport { Box, type BoxProps } from '@semcore/flex-box';\nimport React from 'react';\n\nimport style from './donut.shadow.css';\nimport type { CommonScoreProps } from './Score';\nimport { ScoreDonutUtils } from '../../utils/ScoreDonutUtils';\n\nexport type ScoreDonutProps = BoxProps & CommonScoreProps;\n\ntype Enhances = {\n  resolveColor: ReturnType<typeof resolveColorEnhance>;\n  isSemiDonut?: true;\n};\n\nclass DonutRoot extends Component<ScoreDonutProps, {}, {}, typeof DonutRoot.enhance> {\n  static enhance = [resolveColorEnhance()] as const;\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  };\n\n  render() {\n    const SDonutContainer = Root;\n    const {\n      value,\n      styles,\n      baseBgColor = 'chart-grid-bar-chart-base-bg',\n      color = 'chart-palette-order-1',\n      resolveColor,\n      isSemiDonut,\n      loading,\n    } = this.asProps;\n\n    const scoreDonut = new ScoreDonutUtils(value, isSemiDonut);\n    const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n    return sstyled(styles)(\n      <SDonutContainer render={Box} semi={isSemiDonut} __excludeProps={__excludeProps}>\n        <svg\n          width='100%'\n          height='100%'\n          viewBox={scoreDonut.viewBox}\n          fill='none'\n          role='img'\n          {...extractedAriaProps}\n        >\n          <g>\n            <circle\n              cx='12'\n              cy='12'\n              r={scoreDonut.radius}\n              strokeWidth={scoreDonut.strokeWidth}\n              stroke={resolveColor(baseBgColor)}\n              strokeDasharray={\n                loading ? undefined : `${scoreDonut.greyStrokeDashArray} ${scoreDonut.baseStrokeDashArray}`\n              }\n              strokeDashoffset={scoreDonut.strokeDashOffsetBase}\n            />\n            {!loading && (\n              <>\n                <circle\n                  cx='12'\n                  cy='12'\n                  r={scoreDonut.radius}\n                  strokeWidth={scoreDonut.strokeWidth}\n                  stroke={resolveColor(color)}\n                  strokeDasharray={`${scoreDonut.valueStrokeDashArray} ${scoreDonut.baseStrokeDashArray}`}\n                  strokeDashoffset={scoreDonut.valueStrokeDashArray}\n                >\n                  <animate\n                    attributeName='stroke-dashoffset'\n                    values={`0;${scoreDonut.valueStrokeDashArray}`}\n                  />\n                </circle>\n                {scoreDonut.hasDivider && !isSemiDonut && (\n                  <circle\n                    cx='12'\n                    cy='12'\n                    r={scoreDonut.radius}\n                    strokeWidth={scoreDonut.strokeWidth}\n                    stroke={resolveColor('chart-grid-border')}\n                    strokeDasharray={scoreDonut.strokeDashArrayParts}\n                    strokeDashoffset={-1 * scoreDonut.valueStrokeDashArray}\n                  />\n                )}\n              </>\n            )}\n          </g>\n        </svg>\n      </SDonutContainer>,\n    );\n  }\n}\n\nexport const ScoreDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances> =\n  createComponent(DonutRoot);\n\nScoreDonut.displayName = 'MiniChart.ScoreDonut';\n\nexport const ScoreSemiDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances> = createComponent(\n  DonutRoot,\n  {},\n  {\n    enhancements: [\n      () => {\n        return {\n          wrapperProps: (props: ScoreDonutProps) => {\n            return assignProps(props, { isSemiDonut: true });\n          },\n        };\n      },\n    ],\n  },\n);\n\nScoreSemiDonut.displayName = 'MiniChart.ScoreSemiDonut';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Donut.js","names":["_core","require","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_useCssVariable","_flexBox","_react","_ScoreDonutUtils","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct2","Reflect","construct","constructor","apply","style","sstyled","insert","DonutRoot","_Component","_classCallCheck2","arguments","_inherits2","_createClass2","key","value","render","_ref","asProps","_ref2","SDonutContainer","Box","_this$asProps","styles","_this$asProps$baseBgC","baseBgColor","_this$asProps$color","color","resolveColor","isSemiDonut","loading","animate","duration","scoreDonut","ScoreDonutUtils","_extractAriaProps","extractAriaProps","__excludeProps","extractedAriaProps","createElement","cn","_objectSpread2","assignProps","viewBox","radius","strokeWidth","undefined","concat","baseLength","fullLength","baseOffset","Fragment","animatedBaseLengthFrom","animatedBaseLengthTo","startMargin","valueLength","Component","_defineProperty2","cssVariableEnhance","variable","fallback","map","v","Number","parseInt","toString","prop","resolveColorEnhance","ScoreDonut","exports","createComponent","displayName","ScoreSemiDonut","enhancements","wrapperProps","props"],"sources":["../../../../src/component/score/Donut.tsx"],"sourcesContent":["import { createComponent, Component, Root, sstyled, type ComponentType } from '@semcore/core';\nimport { assignProps } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport { Box, type BoxProps } from '@semcore/flex-box';\nimport React from 'react';\n\nimport style from './donut.shadow.css';\nimport type { CommonScoreProps } from './Score';\nimport { ScoreDonutUtils } from '../../utils/ScoreDonutUtils';\n\nexport type ScoreDonutProps = BoxProps & CommonScoreProps;\n\ntype Enhances = {\n  resolveColor: ReturnType<typeof resolveColorEnhance>;\n  duration: ReturnType<typeof cssVariableEnhance>;\n  isSemiDonut?: true;\n};\n\nclass DonutRoot extends Component<ScoreDonutProps, {}, {}, typeof DonutRoot.enhance> {\n  static enhance = [\n    cssVariableEnhance({\n      variable: '--intergalactic-duration-extra-slow',\n      fallback: '500',\n      map: (v: string) => Number.parseInt(v, 10).toString(),\n      prop: 'duration',\n    }),\n    resolveColorEnhance(),\n  ] as const;\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  };\n\n  render() {\n    const SDonutContainer = Root;\n    const {\n      value,\n      styles,\n      baseBgColor = 'chart-grid-bar-chart-base-bg',\n      color = 'chart-palette-order-1',\n      resolveColor,\n      isSemiDonut,\n      loading,\n      animate,\n      duration,\n    } = this.asProps;\n\n    const scoreDonut = new ScoreDonutUtils(value, isSemiDonut);\n    const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n    return sstyled(styles)(\n      <SDonutContainer render={Box} semi={isSemiDonut} __excludeProps={__excludeProps}>\n        <svg\n          width='100%'\n          height='100%'\n          viewBox={scoreDonut.viewBox}\n          fill='none'\n          role='img'\n          {...extractedAriaProps}\n        >\n          <g>\n            <circle\n              cx='12'\n              cy='12'\n              r={scoreDonut.radius}\n              strokeWidth={scoreDonut.strokeWidth}\n              stroke={resolveColor(baseBgColor)}\n              strokeDasharray={\n                loading\n                  ? undefined\n                  : `${scoreDonut.baseLength} ${scoreDonut.fullLength}`\n              }\n              strokeDashoffset={scoreDonut.baseOffset}\n            >\n              {animate && value > 0 && (\n                <>\n                  <animate\n                    attributeName='stroke-dasharray'\n                    from={`${scoreDonut.animatedBaseLengthFrom} ${scoreDonut.fullLength}`}\n                    to={`${scoreDonut.animatedBaseLengthTo} ${scoreDonut.fullLength}`}\n                    dur={duration + 'ms'}\n                  />\n                  <animate\n                    attributeName='stroke-dashoffset'\n                    from={-1 * scoreDonut.startMargin}\n                    to={scoreDonut.baseOffset}\n                    dur={duration + 'ms'}\n                  />\n                </>\n              )}\n            </circle>\n            {!loading && value > 0 && (\n              <>\n                <circle\n                  cx='12'\n                  cy='12'\n                  r={scoreDonut.radius}\n                  strokeWidth={scoreDonut.strokeWidth}\n                  stroke={resolveColor(color)}\n                  strokeDasharray={`${scoreDonut.valueLength} ${scoreDonut.fullLength}`}\n                >\n                  {animate && (\n                    <animate\n                      attributeName='stroke-dasharray'\n                      from={`0 ${scoreDonut.fullLength}`}\n                      to={`${scoreDonut.valueLength} ${scoreDonut.fullLength}`}\n                      dur={duration + 'ms'}\n                    />\n                  )}\n                </circle>\n              </>\n            )}\n          </g>\n        </svg>\n      </SDonutContainer>,\n    );\n  }\n}\n\nexport const ScoreDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances> =\n  createComponent(DonutRoot);\n\nScoreDonut.displayName = 'MiniChart.ScoreDonut';\n\nexport const ScoreSemiDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances> = createComponent(\n  DonutRoot,\n  {},\n  {\n    enhancements: [\n      () => {\n        return {\n          wrapperProps: (props: ScoreDonutProps) => {\n            return assignProps(props, { isSemiDonut: true });\n          },\n        };\n      },\n    ],\n  },\n);\n\nScoreSemiDonut.displayName = 'MiniChart.ScoreSemiDonut';\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/component/score/Line.js

@@ -19,26 +19,26 @@ var _flexBox = require("@semcore/flex-box");
 var _react = _interopRequireDefault(require("react"));
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 /*!__reshadow-styles__:"./line.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_57xz9{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_57xz9{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_57xz9_gg_.__loading_57xz9_gg_,.___SLineGauge_57xz9_gg_.__loading_57xz9_gg_,.___STrendBar_57xz9_gg_.__loading_57xz9_gg_,.___STrendLine_57xz9_gg_.__loading_57xz9_gg_{animation-name:pulse_57xz9;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_57xz9_gg_{height:8px;background-color:var(--base-bg-color_57xz9, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_57xz9_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_57xz9_gg_.__percent_57xz9_gg_{width:var(--percent_57xz9)}.___SLineSegmentItem_57xz9_gg_.__color_57xz9_gg_,.___SLineValue_57xz9_gg_.__color_57xz9_gg_{background-color:var(--color_57xz9, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_57xz9_gg_.__segments_57xz9_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_57xz9_gg_,.___SLineGaugeSegment_57xz9_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_57xz9_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_57xz9_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_57xz9_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_57xz9;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}", /*__inner_css_end__*/"57xz9_gg_"),
+var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_1tspb{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_1tspb{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_1tspb_gg_.__loading_1tspb_gg_,.___SLineGauge_1tspb_gg_.__loading_1tspb_gg_,.___STrendBar_1tspb_gg_.__loading_1tspb_gg_,.___STrendLine_1tspb_gg_.__loading_1tspb_gg_{animation-name:pulse_1tspb;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_1tspb_gg_{height:8px;background-color:var(--base-bg-color_1tspb, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_1tspb_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_1tspb_gg_.__percent_1tspb_gg_{width:var(--percent_1tspb)}.___SLineSegmentItem_1tspb_gg_.__color_1tspb_gg_,.___SLineValue_1tspb_gg_.__color_1tspb_gg_{background-color:var(--color_1tspb, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_1tspb_gg_.__segments_1tspb_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_1tspb_gg_,.___SLineGaugeSegment_1tspb_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_1tspb_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_1tspb_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_1tspb_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_1tspb;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}", /*__inner_css_end__*/"1tspb_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SLineGauge": "___SLineGauge_57xz9_gg_",
-  "_loading": "__loading_57xz9_gg_",
-  "__SDonutContainer": "___SDonutContainer_57xz9_gg_",
-  "__STrendLine": "___STrendLine_57xz9_gg_",
-  "__STrendBar": "___STrendBar_57xz9_gg_",
-  "@pulse": "pulse_57xz9",
-  "--base-bg-color": "--base-bg-color_57xz9",
-  "__SLineValue": "___SLineValue_57xz9_gg_",
-  "_percent": "__percent_57xz9_gg_",
-  "--percent": "--percent_57xz9",
-  "_color": "__color_57xz9_gg_",
-  "__SLineSegmentItem": "___SLineSegmentItem_57xz9_gg_",
-  "--color": "--color_57xz9",
-  "_segments": "__segments_57xz9_gg_",
-  "__SLineGaugeSegment": "___SLineGaugeSegment_57xz9_gg_",
-  "__SAnimationLine": "___SAnimationLine_57xz9_gg_",
-  "@move-line": "move-line_57xz9"
+  "__SLineGauge": "___SLineGauge_1tspb_gg_",
+  "_loading": "__loading_1tspb_gg_",
+  "__SDonutContainer": "___SDonutContainer_1tspb_gg_",
+  "__STrendLine": "___STrendLine_1tspb_gg_",
+  "__STrendBar": "___STrendBar_1tspb_gg_",
+  "@pulse": "pulse_1tspb",
+  "--base-bg-color": "--base-bg-color_1tspb",
+  "__SLineValue": "___SLineValue_1tspb_gg_",
+  "_percent": "__percent_1tspb_gg_",
+  "--percent": "--percent_1tspb",
+  "_color": "__color_1tspb_gg_",
+  "__SLineSegmentItem": "___SLineSegmentItem_1tspb_gg_",
+  "--color": "--color_1tspb",
+  "_segments": "__segments_1tspb_gg_",
+  "__SLineGaugeSegment": "___SLineGaugeSegment_1tspb_gg_",
+  "__SAnimationLine": "___SAnimationLine_1tspb_gg_",
+  "@move-line": "move-line_1tspb"
 });
 var LineRoot = /*#__PURE__*/function (_Component) {
   function LineRoot() {

package/lib/cjs/component/trend/Bar.js

@@ -22,15 +22,15 @@ var _react = _interopRequireDefault(require("react"));
 var _Trend2 = require("./Trend");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 /*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_1d47w{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1d47w_gg_.__loading_1d47w_gg_,.___SLineGauge_1d47w_gg_.__loading_1d47w_gg_,.___STrendBar_1d47w_gg_.__loading_1d47w_gg_,.___STrendLine_1d47w_gg_.__loading_1d47w_gg_{animation-name:pulse_1d47w;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}", /*__inner_css_end__*/"1d47w_gg_"),
+var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_1rcp7{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1rcp7_gg_.__loading_1rcp7_gg_,.___SLineGauge_1rcp7_gg_.__loading_1rcp7_gg_,.___STrendBar_1rcp7_gg_.__loading_1rcp7_gg_,.___STrendLine_1rcp7_gg_.__loading_1rcp7_gg_{animation-name:pulse_1rcp7;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}", /*__inner_css_end__*/"1rcp7_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SLineGauge": "___SLineGauge_1d47w_gg_",
-  "_loading": "__loading_1d47w_gg_",
-  "__SDonutContainer": "___SDonutContainer_1d47w_gg_",
-  "__STrendLine": "___STrendLine_1d47w_gg_",
-  "__STrendBar": "___STrendBar_1d47w_gg_",
-  "@pulse": "pulse_1d47w"
+  "__SLineGauge": "___SLineGauge_1rcp7_gg_",
+  "_loading": "__loading_1rcp7_gg_",
+  "__SDonutContainer": "___SDonutContainer_1rcp7_gg_",
+  "__STrendLine": "___STrendLine_1rcp7_gg_",
+  "__STrendBar": "___STrendBar_1rcp7_gg_",
+  "@pulse": "pulse_1rcp7"
 });
 var TrendBarRoot = /*#__PURE__*/function (_Trend) {
   function TrendBarRoot() {

package/lib/cjs/component/trend/Line.js

@@ -23,15 +23,15 @@ var _react = _interopRequireDefault(require("react"));
 var _Trend2 = require("./Trend");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 /*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_1d47w{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1d47w_gg_.__loading_1d47w_gg_,.___SLineGauge_1d47w_gg_.__loading_1d47w_gg_,.___STrendBar_1d47w_gg_.__loading_1d47w_gg_,.___STrendLine_1d47w_gg_.__loading_1d47w_gg_{animation-name:pulse_1d47w;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}", /*__inner_css_end__*/"1d47w_gg_"),
+var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_1rcp7{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1rcp7_gg_.__loading_1rcp7_gg_,.___SLineGauge_1rcp7_gg_.__loading_1rcp7_gg_,.___STrendBar_1rcp7_gg_.__loading_1rcp7_gg_,.___STrendLine_1rcp7_gg_.__loading_1rcp7_gg_{animation-name:pulse_1rcp7;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}", /*__inner_css_end__*/"1rcp7_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SLineGauge": "___SLineGauge_1d47w_gg_",
-  "_loading": "__loading_1d47w_gg_",
-  "__SDonutContainer": "___SDonutContainer_1d47w_gg_",
-  "__STrendLine": "___STrendLine_1d47w_gg_",
-  "__STrendBar": "___STrendBar_1d47w_gg_",
-  "@pulse": "pulse_1d47w"
+  "__SLineGauge": "___SLineGauge_1rcp7_gg_",
+  "_loading": "__loading_1rcp7_gg_",
+  "__SDonutContainer": "___SDonutContainer_1rcp7_gg_",
+  "__STrendLine": "___STrendLine_1rcp7_gg_",
+  "__STrendBar": "___STrendBar_1rcp7_gg_",
+  "@pulse": "pulse_1rcp7"
 });
 var TrendLineRoot = /*#__PURE__*/function (_Trend) {
   function TrendLineRoot() {

package/lib/cjs/utils/ScoreDonutUtils.js

@@ -16,14 +16,9 @@ var ScoreDonutUtils = exports.ScoreDonutUtils = /*#__PURE__*/function () {
     (0, _defineProperty2["default"])(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 (0, _createClass2["default"])(ScoreDonutUtils, [{
-    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';
@@ -34,45 +29,58 @@ var ScoreDonutUtils = exports.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/cjs/utils/ScoreDonutUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScoreDonutUtils.js","names":["ScoreDonutUtils","exports","value","isSemiDonut","_classCallCheck2","_defineProperty2","radius","_createClass2","key","get","includes","Math","PI","baseStrokeDashArray","valueStrokeDashArray","greyStroke","greyStrokeDashArray","offsetPoint","greyStrokeDash","strokeDashArrayBetweenSpaces","concat","hasDivider","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 hasDivider() {\n    return ![0, 100].includes(this.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 hasDivider = this.hasDivider;\n\n    if (!hasDivider) return 0;\n\n    const valueStroke = this.valueStrokeDashArray;\n    const offsetPoint = this.offsetPoint;\n\n    return -1 * (valueStroke + (this.isSemiDonut ? offsetPoint : 0));\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ScoreDonutUtils.js","names":["ScoreDonutUtils","exports","value","isSemiDonut","_classCallCheck2","_defineProperty2","radius","Math","max","min","_createClass2","key","get","PI","fullLength","valueLength","startMargin","endMargin","margin","point"],"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 = Math.max(Math.min(value, 100), 0);\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 fullLength() {\n    return this.isSemiDonut ? Math.PI * this.radius : 2 * Math.PI * this.radius;\n  }\n\n  public get point() {\n    return this.isSemiDonut\n      ? this.fullLength / (100 / 3)\n      : this.fullLength / 100;\n  }\n\n  public get valueLength() {\n    return this.fullLength * (this.value / 100);\n  }\n\n  public get animatedValueLength() {\n    return Math.min(this.valueLength, this.fullLength - this.startMargin - this.endMargin);\n  }\n\n  public get startMargin() {\n    let margin = 0;\n    if (this.value > 0) margin = this.point;\n    return margin;\n  }\n\n  public get endMargin() {\n    let margin = 0;\n    if (!this.isSemiDonut && this.value > 0) margin = this.point;\n    return margin;\n  }\n\n  public get baseOffset() {\n    return -1 * (this.valueLength + this.startMargin);\n  };\n\n  public get baseLength() {\n    return Math.max(this.fullLength - this.valueLength - this.startMargin - this.endMargin, 0);\n  }\n\n  public get animatedBaseLengthFrom() {\n    return this.fullLength - this.startMargin - this.endMargin;\n  }\n\n  public get animatedBaseLengthTo() {\n    return this.fullLength - this.valueLength - this.startMargin - this.endMargin;\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/es6/component/score/Donut.js

@@ -13,20 +13,21 @@ import { createComponent, Component, Root, sstyled } from '@semcore/core';
 import { assignProps } from '@semcore/core';
 import { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';
 import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
+import { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';
 import { Box } from '@semcore/flex-box';
 import React from 'react';
 /*!__reshadow-styles__:"./donut.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_14jjd{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_14jjd_gg_.__loading_14jjd_gg_,.___SLineGauge_14jjd_gg_.__loading_14jjd_gg_,.___STrendBar_14jjd_gg_.__loading_14jjd_gg_,.___STrendLine_14jjd_gg_.__loading_14jjd_gg_{animation-name:pulse_14jjd;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_14jjd_gg_.__semi_14jjd_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_14jjd_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_14jjd_gg_.__animate_14jjd_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}", /*__inner_css_end__*/"14jjd_gg_"),
+var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_19y2a{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_19y2a_gg_.__loading_19y2a_gg_,.___SLineGauge_19y2a_gg_.__loading_19y2a_gg_,.___STrendBar_19y2a_gg_.__loading_19y2a_gg_,.___STrendLine_19y2a_gg_.__loading_19y2a_gg_{animation-name:pulse_19y2a;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_19y2a_gg_.__semi_19y2a_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_19y2a_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_19y2a_gg_.__animate_19y2a_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}", /*__inner_css_end__*/"19y2a_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SLineGauge": "___SLineGauge_14jjd_gg_",
-  "_loading": "__loading_14jjd_gg_",
-  "__SDonutContainer": "___SDonutContainer_14jjd_gg_",
-  "__STrendLine": "___STrendLine_14jjd_gg_",
-  "__STrendBar": "___STrendBar_14jjd_gg_",
-  "@pulse": "pulse_14jjd",
-  "_animate": "__animate_14jjd_gg_",
-  "_semi": "__semi_14jjd_gg_"
+  "__SLineGauge": "___SLineGauge_19y2a_gg_",
+  "_loading": "__loading_19y2a_gg_",
+  "__SDonutContainer": "___SDonutContainer_19y2a_gg_",
+  "__STrendLine": "___STrendLine_19y2a_gg_",
+  "__STrendBar": "___STrendBar_19y2a_gg_",
+  "@pulse": "pulse_19y2a",
+  "_animate": "__animate_19y2a_gg_",
+  "_semi": "__semi_19y2a_gg_"
 });
 import { ScoreDonutUtils } from '../../utils/ScoreDonutUtils';
 var DonutRoot = /*#__PURE__*/function (_Component) {
@@ -50,7 +51,9 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
         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;
+        loading = _this$asProps.loading,
+        animate = _this$asProps.animate,
+        duration = _this$asProps.duration;
       var scoreDonut = new ScoreDonutUtils(value, isSemiDonut);
       var _extractAriaProps = extractAriaProps(this.asProps),
         __excludeProps = _extractAriaProps.__excludeProps,
@@ -70,32 +73,42 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
         "r": scoreDonut.radius,
         "strokeWidth": scoreDonut.strokeWidth,
         "stroke": resolveColor(baseBgColor),
-        "strokeDasharray": loading ? undefined : "".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": scoreDonut.radius,
-        "strokeWidth": scoreDonut.strokeWidth,
-        "stroke": resolveColor(color),
-        "strokeDasharray": "".concat(scoreDonut.valueStrokeDashArray, " ").concat(scoreDonut.baseStrokeDashArray),
-        "strokeDashoffset": scoreDonut.valueStrokeDashArray
-      }), /*#__PURE__*/React.createElement("animate", _ref2.cn("animate", {
+        "strokeDasharray": loading ? undefined : "".concat(scoreDonut.baseLength, " ").concat(scoreDonut.fullLength),
+        "strokeDashoffset": scoreDonut.baseOffset
+      }), animate && value > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("animate", _ref2.cn("animate", {
+        "attributeName": 'stroke-dasharray',
+        "from": "".concat(scoreDonut.animatedBaseLengthFrom, " ").concat(scoreDonut.fullLength),
+        "to": "".concat(scoreDonut.animatedBaseLengthTo, " ").concat(scoreDonut.fullLength),
+        "dur": duration + 'ms'
+      })), /*#__PURE__*/React.createElement("animate", _ref2.cn("animate", {
         "attributeName": 'stroke-dashoffset',
-        "values": "0;".concat(scoreDonut.valueStrokeDashArray)
-      }))), scoreDonut.hasDivider && !isSemiDonut && /*#__PURE__*/React.createElement("circle", _ref2.cn("circle", {
+        "from": -1 * scoreDonut.startMargin,
+        "to": scoreDonut.baseOffset,
+        "dur": duration + 'ms'
+      })))), !loading && value > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("circle", _ref2.cn("circle", {
         "cx": '12',
         "cy": '12',
         "r": scoreDonut.radius,
         "strokeWidth": scoreDonut.strokeWidth,
-        "stroke": resolveColor('chart-grid-border'),
-        "strokeDasharray": scoreDonut.strokeDashArrayParts,
-        "strokeDashoffset": -1 * scoreDonut.valueStrokeDashArray
-      }))))));
+        "stroke": resolveColor(color),
+        "strokeDasharray": "".concat(scoreDonut.valueLength, " ").concat(scoreDonut.fullLength)
+      }), animate && /*#__PURE__*/React.createElement("animate", _ref2.cn("animate", {
+        "attributeName": 'stroke-dasharray',
+        "from": "0 ".concat(scoreDonut.fullLength),
+        "to": "".concat(scoreDonut.valueLength, " ").concat(scoreDonut.fullLength),
+        "dur": duration + 'ms'
+      })))))));
     }
   }]);
 }(Component);
-_defineProperty(DonutRoot, "enhance", [resolveColorEnhance()]);
+_defineProperty(DonutRoot, "enhance", [cssVariableEnhance({
+  variable: '--intergalactic-duration-extra-slow',
+  fallback: '500',
+  map: function map(v) {
+    return Number.parseInt(v, 10).toString();
+  },
+  prop: 'duration'
+}), resolveColorEnhance()]);
 _defineProperty(DonutRoot, "style", style);
 _defineProperty(DonutRoot, "defaultProps", {
   animate: true

package/lib/es6/component/score/Donut.js.map

@@ -1 +1 @@
-{"version":3,"file":"Donut.js","names":["createComponent","Component","Root","sstyled","assignProps","extractAriaProps","resolveColorEnhance","Box","React","style","_sstyled","insert","ScoreDonutUtils","DonutRoot","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","_ref","asProps","_ref2","SDonutContainer","_this$asProps","styles","_this$asProps$baseBgC","baseBgColor","_this$asProps$color","color","resolveColor","isSemiDonut","loading","scoreDonut","_extractAriaProps","__excludeProps","extractedAriaProps","createElement","cn","_objectSpread","_assignProps","viewBox","radius","strokeWidth","undefined","concat","greyStrokeDashArray","baseStrokeDashArray","strokeDashOffsetBase","Fragment","valueStrokeDashArray","hasDivider","strokeDashArrayParts","_defineProperty","animate","ScoreDonut","displayName","ScoreSemiDonut","enhancements","wrapperProps","props"],"sources":["../../../../src/component/score/Donut.tsx"],"sourcesContent":["import { createComponent, Component, Root, sstyled, type ComponentType } from '@semcore/core';\nimport { assignProps } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport { Box, type BoxProps } from '@semcore/flex-box';\nimport React from 'react';\n\nimport style from './donut.shadow.css';\nimport type { CommonScoreProps } from './Score';\nimport { ScoreDonutUtils } from '../../utils/ScoreDonutUtils';\n\nexport type ScoreDonutProps = BoxProps & CommonScoreProps;\n\ntype Enhances = {\n  resolveColor: ReturnType<typeof resolveColorEnhance>;\n  isSemiDonut?: true;\n};\n\nclass DonutRoot extends Component<ScoreDonutProps, {}, {}, typeof DonutRoot.enhance> {\n  static enhance = [resolveColorEnhance()] as const;\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  };\n\n  render() {\n    const SDonutContainer = Root;\n    const {\n      value,\n      styles,\n      baseBgColor = 'chart-grid-bar-chart-base-bg',\n      color = 'chart-palette-order-1',\n      resolveColor,\n      isSemiDonut,\n      loading,\n    } = this.asProps;\n\n    const scoreDonut = new ScoreDonutUtils(value, isSemiDonut);\n    const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n    return sstyled(styles)(\n      <SDonutContainer render={Box} semi={isSemiDonut} __excludeProps={__excludeProps}>\n        <svg\n          width='100%'\n          height='100%'\n          viewBox={scoreDonut.viewBox}\n          fill='none'\n          role='img'\n          {...extractedAriaProps}\n        >\n          <g>\n            <circle\n              cx='12'\n              cy='12'\n              r={scoreDonut.radius}\n              strokeWidth={scoreDonut.strokeWidth}\n              stroke={resolveColor(baseBgColor)}\n              strokeDasharray={\n                loading ? undefined : `${scoreDonut.greyStrokeDashArray} ${scoreDonut.baseStrokeDashArray}`\n              }\n              strokeDashoffset={scoreDonut.strokeDashOffsetBase}\n            />\n            {!loading && (\n              <>\n                <circle\n                  cx='12'\n                  cy='12'\n                  r={scoreDonut.radius}\n                  strokeWidth={scoreDonut.strokeWidth}\n                  stroke={resolveColor(color)}\n                  strokeDasharray={`${scoreDonut.valueStrokeDashArray} ${scoreDonut.baseStrokeDashArray}`}\n                  strokeDashoffset={scoreDonut.valueStrokeDashArray}\n                >\n                  <animate\n                    attributeName='stroke-dashoffset'\n                    values={`0;${scoreDonut.valueStrokeDashArray}`}\n                  />\n                </circle>\n                {scoreDonut.hasDivider && !isSemiDonut && (\n                  <circle\n                    cx='12'\n                    cy='12'\n                    r={scoreDonut.radius}\n                    strokeWidth={scoreDonut.strokeWidth}\n                    stroke={resolveColor('chart-grid-border')}\n                    strokeDasharray={scoreDonut.strokeDashArrayParts}\n                    strokeDashoffset={-1 * scoreDonut.valueStrokeDashArray}\n                  />\n                )}\n              </>\n            )}\n          </g>\n        </svg>\n      </SDonutContainer>,\n    );\n  }\n}\n\nexport const ScoreDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances> =\n  createComponent(DonutRoot);\n\nScoreDonut.displayName = 'MiniChart.ScoreDonut';\n\nexport const ScoreSemiDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances> = createComponent(\n  DonutRoot,\n  {},\n  {\n    enhancements: [\n      () => {\n        return {\n          wrapperProps: (props: ScoreDonutProps) => {\n            return assignProps(props, { isSemiDonut: true });\n          },\n        };\n      },\n    ],\n  },\n);\n\nScoreSemiDonut.displayName = 'MiniChart.ScoreSemiDonut';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Donut.js","names":["createComponent","Component","Root","sstyled","assignProps","extractAriaProps","resolveColorEnhance","cssVariableEnhance","Box","React","style","_sstyled","insert","ScoreDonutUtils","DonutRoot","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","_ref","asProps","_ref2","SDonutContainer","_this$asProps","styles","_this$asProps$baseBgC","baseBgColor","_this$asProps$color","color","resolveColor","isSemiDonut","loading","animate","duration","scoreDonut","_extractAriaProps","__excludeProps","extractedAriaProps","createElement","cn","_objectSpread","_assignProps","viewBox","radius","strokeWidth","undefined","concat","baseLength","fullLength","baseOffset","Fragment","animatedBaseLengthFrom","animatedBaseLengthTo","startMargin","valueLength","_defineProperty","variable","fallback","map","v","Number","parseInt","toString","prop","ScoreDonut","displayName","ScoreSemiDonut","enhancements","wrapperProps","props"],"sources":["../../../../src/component/score/Donut.tsx"],"sourcesContent":["import { createComponent, Component, Root, sstyled, type ComponentType } from '@semcore/core';\nimport { assignProps } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport { Box, type BoxProps } from '@semcore/flex-box';\nimport React from 'react';\n\nimport style from './donut.shadow.css';\nimport type { CommonScoreProps } from './Score';\nimport { ScoreDonutUtils } from '../../utils/ScoreDonutUtils';\n\nexport type ScoreDonutProps = BoxProps & CommonScoreProps;\n\ntype Enhances = {\n  resolveColor: ReturnType<typeof resolveColorEnhance>;\n  duration: ReturnType<typeof cssVariableEnhance>;\n  isSemiDonut?: true;\n};\n\nclass DonutRoot extends Component<ScoreDonutProps, {}, {}, typeof DonutRoot.enhance> {\n  static enhance = [\n    cssVariableEnhance({\n      variable: '--intergalactic-duration-extra-slow',\n      fallback: '500',\n      map: (v: string) => Number.parseInt(v, 10).toString(),\n      prop: 'duration',\n    }),\n    resolveColorEnhance(),\n  ] as const;\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  };\n\n  render() {\n    const SDonutContainer = Root;\n    const {\n      value,\n      styles,\n      baseBgColor = 'chart-grid-bar-chart-base-bg',\n      color = 'chart-palette-order-1',\n      resolveColor,\n      isSemiDonut,\n      loading,\n      animate,\n      duration,\n    } = this.asProps;\n\n    const scoreDonut = new ScoreDonutUtils(value, isSemiDonut);\n    const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n    return sstyled(styles)(\n      <SDonutContainer render={Box} semi={isSemiDonut} __excludeProps={__excludeProps}>\n        <svg\n          width='100%'\n          height='100%'\n          viewBox={scoreDonut.viewBox}\n          fill='none'\n          role='img'\n          {...extractedAriaProps}\n        >\n          <g>\n            <circle\n              cx='12'\n              cy='12'\n              r={scoreDonut.radius}\n              strokeWidth={scoreDonut.strokeWidth}\n              stroke={resolveColor(baseBgColor)}\n              strokeDasharray={\n                loading\n                  ? undefined\n                  : `${scoreDonut.baseLength} ${scoreDonut.fullLength}`\n              }\n              strokeDashoffset={scoreDonut.baseOffset}\n            >\n              {animate && value > 0 && (\n                <>\n                  <animate\n                    attributeName='stroke-dasharray'\n                    from={`${scoreDonut.animatedBaseLengthFrom} ${scoreDonut.fullLength}`}\n                    to={`${scoreDonut.animatedBaseLengthTo} ${scoreDonut.fullLength}`}\n                    dur={duration + 'ms'}\n                  />\n                  <animate\n                    attributeName='stroke-dashoffset'\n                    from={-1 * scoreDonut.startMargin}\n                    to={scoreDonut.baseOffset}\n                    dur={duration + 'ms'}\n                  />\n                </>\n              )}\n            </circle>\n            {!loading && value > 0 && (\n              <>\n                <circle\n                  cx='12'\n                  cy='12'\n                  r={scoreDonut.radius}\n                  strokeWidth={scoreDonut.strokeWidth}\n                  stroke={resolveColor(color)}\n                  strokeDasharray={`${scoreDonut.valueLength} ${scoreDonut.fullLength}`}\n                >\n                  {animate && (\n                    <animate\n                      attributeName='stroke-dasharray'\n                      from={`0 ${scoreDonut.fullLength}`}\n                      to={`${scoreDonut.valueLength} ${scoreDonut.fullLength}`}\n                      dur={duration + 'ms'}\n                    />\n                  )}\n                </circle>\n              </>\n            )}\n          </g>\n        </svg>\n      </SDonutContainer>,\n    );\n  }\n}\n\nexport const ScoreDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances> =\n  createComponent(DonutRoot);\n\nScoreDonut.displayName = 'MiniChart.ScoreDonut';\n\nexport const ScoreSemiDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances> = createComponent(\n  DonutRoot,\n  {},\n  {\n    enhancements: [\n      () => {\n        return {\n          wrapperProps: (props: ScoreDonutProps) => {\n            return assignProps(props, { isSemiDonut: true });\n          },\n        };\n      },\n    ],\n  },\n);\n\nScoreSemiDonut.displayName = 'MiniChart.ScoreSemiDonut';\n"],"mappings":"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","ignoreList":[]}