@semcore/mini-chart 16.1.1 → 17.0.0-prerelease.17

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.0] - 2026-02-18
+
+### BREAK
+
+- New major version.
+
 ## [16.1.1] - 2025-10-29
 
 ### Changed

package/README.md

@@ -2,7 +2,7 @@
 
 [![version](https://img.shields.io/npm/v/@semcore/mini-chart.svg)](https://www.npmjs.com/@semcore/mini-chart)
 [![downloads](https://img.shields.io/npm/dt/@semcore/mini-chart.svg)](https://www.npmjs.com/package/@semcore/mini-chart)
-[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/semrush/intergalactic/blob/master/LICENSE)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE)
 
 > This component is part of the Intergalactic Design System
 
@@ -20,13 +20,13 @@ npm install @semcore/mini-chart
 
 ## 👤 Author
 
-[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
+[UI-kit team](https://github.com/semrush/intergalactic/blob/HEAD/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
 
 ## 🤝 Contributing
 
 Contributions, issues and feature requests are welcome!
 
-Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md).
+Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/HEAD/CONTRIBUTING.md).
 
 ## Show your support
 
@@ -34,4 +34,4 @@ Give a ⭐️ if this project helped you!
 
 ## 📝 License
 
-This project is [MIT](https://github.com/semrush/intergalactic/blob/master/LICENSE) licensed.
+This project is [MIT](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE) licensed.

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

@@ -1,125 +1,113 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ScoreSemiDonut = exports.ScoreDonut = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
+var _baseComponents = require("@semcore/base-components");
 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");
 /*!__reshadow-styles__:"./donut.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_1kq41{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1kq41_gg_.__loading_1kq41_gg_,.___SLineGauge_1kq41_gg_.__loading_1kq41_gg_,.___STrendBar_1kq41_gg_.__loading_1kq41_gg_,.___STrendLine_1kq41_gg_.__loading_1kq41_gg_{animation-name:pulse_1kq41;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_1kq41_gg_.__semi_1kq41_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_1kq41_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_1kq41_gg_.__animate_1kq41_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}", /*__inner_css_end__*/"1kq41_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_1yj1g{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1yj1g_gg_.__loading_1yj1g_gg_,.___SLineGauge_1yj1g_gg_.__loading_1yj1g_gg_,.___STrendBar_1yj1g_gg_.__loading_1yj1g_gg_,.___STrendLine_1yj1g_gg_.__loading_1yj1g_gg_{animation-name:pulse_1yj1g;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_1yj1g_gg_.__semi_1yj1g_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_1yj1g_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_1yj1g_gg_.__animate_1yj1g_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}", /*__inner_css_end__*/"1yj1g_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SLineGauge": "___SLineGauge_1kq41_gg_",
-  "_loading": "__loading_1kq41_gg_",
-  "__SDonutContainer": "___SDonutContainer_1kq41_gg_",
-  "__STrendLine": "___STrendLine_1kq41_gg_",
-  "__STrendBar": "___STrendBar_1kq41_gg_",
-  "@pulse": "pulse_1kq41",
-  "_animate": "__animate_1kq41_gg_",
-  "_semi": "__semi_1kq41_gg_"
+  "__SLineGauge": "___SLineGauge_1yj1g_gg_",
+  "_loading": "__loading_1yj1g_gg_",
+  "__SDonutContainer": "___SDonutContainer_1yj1g_gg_",
+  "__STrendLine": "___STrendLine_1yj1g_gg_",
+  "__STrendBar": "___STrendBar_1yj1g_gg_",
+  "@pulse": "pulse_1yj1g",
+  "_animate": "__animate_1yj1g_gg_",
+  "_semi": "__semi_1yj1g_gg_"
 });
-var DonutRoot = /*#__PURE__*/function (_Component) {
-  function DonutRoot() {
-    (0, _classCallCheck2["default"])(this, DonutRoot);
-    return (0, _callSuper2["default"])(this, DonutRoot, arguments);
-  }
-  (0, _inherits2["default"])(DonutRoot, _Component);
-  return (0, _createClass2["default"])(DonutRoot, [{
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps,
-        _ref2;
-      var SDonutContainer = _flexBox.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,
-        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,
-        extractedAriaProps = _extractAriaProps.extractedAriaProps;
-      return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SDonutContainer, _ref2.cn("SDonutContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+class DonutRoot extends _core.Component {
+  render() {
+    var _ref = this.asProps,
+      _ref2;
+    const SDonutContainer = _baseComponents.Box;
+    const {
+      value,
+      styles,
+      baseBgColor = 'chart-grid-bar-chart-base-bg',
+      color = 'chart-palette-order-1',
+      resolveColor,
+      isSemiDonut,
+      loading,
+      animate,
+      duration
+    } = this.asProps;
+    const scoreDonut = new _ScoreDonutUtils.ScoreDonutUtils(value, isSemiDonut);
+    const {
+      __excludeProps,
+      extractedAriaProps
+    } = (0, _ariaProps.extractAriaProps)(this.asProps);
+    return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SDonutContainer, _ref2.cn("SDonutContainer", {
+      ...(0, _core.assignProps)({
         "semi": isSemiDonut,
         "__excludeProps": __excludeProps
-      }, _ref))), /*#__PURE__*/_react["default"].createElement("svg", _ref2.cn("svg", (0, _objectSpread2["default"])({
-        "width": '100%',
-        "height": '100%',
-        "viewBox": scoreDonut.viewBox,
-        "fill": 'none',
-        "role": 'img'
-      }, extractedAriaProps)), /*#__PURE__*/_react["default"].createElement("g", _ref2.cn("g", {}), /*#__PURE__*/_react["default"].createElement("circle", _ref2.cn("circle", {
-        "cx": '12',
-        "cy": '12',
-        "r": scoreDonut.radius,
-        "strokeWidth": scoreDonut.strokeWidth,
-        "stroke": resolveColor(baseBgColor),
-        "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',
-        "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(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, _useCssVariable.cssVariableEnhance)({
+      }, _ref)
+    }), /*#__PURE__*/_react.default.createElement("svg", _ref2.cn("svg", {
+      "width": '100%',
+      "height": '100%',
+      "viewBox": scoreDonut.viewBox,
+      "fill": 'none',
+      "role": 'img',
+      ...extractedAriaProps
+    }), /*#__PURE__*/_react.default.createElement("g", _ref2.cn("g", {}), /*#__PURE__*/_react.default.createElement("circle", _ref2.cn("circle", {
+      "cx": '12',
+      "cy": '12',
+      "r": scoreDonut.radius,
+      "strokeWidth": scoreDonut.strokeWidth,
+      "stroke": resolveColor(baseBgColor),
+      "strokeDasharray": loading ? undefined : `${scoreDonut.baseLength} ${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": `${scoreDonut.animatedBaseLengthFrom} ${scoreDonut.fullLength}`,
+      "to": `${scoreDonut.animatedBaseLengthTo} ${scoreDonut.fullLength}`,
+      "dur": duration + 'ms'
+    })), /*#__PURE__*/_react.default.createElement("animate", _ref2.cn("animate", {
+      "attributeName": 'stroke-dashoffset',
+      "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(color),
+      "strokeDasharray": `${scoreDonut.valueLength} ${scoreDonut.fullLength}`
+    }), animate && /*#__PURE__*/_react.default.createElement("animate", _ref2.cn("animate", {
+      "attributeName": 'stroke-dasharray',
+      "from": `0 ${scoreDonut.fullLength}`,
+      "to": `${scoreDonut.valueLength} ${scoreDonut.fullLength}`,
+      "dur": duration + 'ms'
+    })))))));
+  }
+}
+(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();
-  },
+  map: v => Number.parseInt(v, 10).toString(),
   prop: 'duration'
-}), (0, _resolveColorEnhance["default"])()]);
-(0, _defineProperty2["default"])(DonutRoot, "style", style);
-(0, _defineProperty2["default"])(DonutRoot, "defaultProps", {
+}), (0, _resolveColorEnhance.default)()]);
+(0, _defineProperty2.default)(DonutRoot, "style", style);
+(0, _defineProperty2.default)(DonutRoot, "defaultProps", {
   animate: true
 });
-var ScoreDonut = exports.ScoreDonut = (0, _core.createComponent)(DonutRoot);
+const ScoreDonut = exports.ScoreDonut = (0, _core.createComponent)(DonutRoot);
 ScoreDonut.displayName = 'MiniChart.ScoreDonut';
-var ScoreSemiDonut = exports.ScoreSemiDonut = (0, _core.createComponent)(DonutRoot, {}, {
-  enhancements: [function () {
+const ScoreSemiDonut = exports.ScoreSemiDonut = (0, _core.createComponent)(DonutRoot, {}, {
+  enhancements: [() => {
     return {
-      wrapperProps: function wrapperProps(props) {
+      wrapperProps: props => {
         return (0, _core.assignProps)(props, {
           isSemiDonut: true
         });

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

@@ -1 +1 @@
-{"version":3,"file":"Donut.js","names":["_core","require","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_useCssVariable","_flexBox","_react","_ScoreDonutUtils","style","sstyled","insert","DonutRoot","_Component","_classCallCheck2","_callSuper2","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":[]}
+{"version":3,"file":"Donut.js","names":["_core","require","_baseComponents","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_useCssVariable","_react","_ScoreDonutUtils","style","sstyled","insert","DonutRoot","Component","render","_ref","asProps","_ref2","SDonutContainer","Box","value","styles","baseBgColor","color","resolveColor","isSemiDonut","loading","animate","duration","scoreDonut","ScoreDonutUtils","__excludeProps","extractedAriaProps","extractAriaProps","default","createElement","cn","assignProps","viewBox","radius","strokeWidth","undefined","baseLength","fullLength","baseOffset","Fragment","animatedBaseLengthFrom","animatedBaseLengthTo","startMargin","valueLength","_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 { Box, type BoxProps } from '@semcore/base-components';\nimport { createComponent, Component, Root, sstyled, 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 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\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 = createComponent<'svg', ScoreDonutProps, {}, typeof DonutRoot.enhance>(DonutRoot);\n\nScoreDonut.displayName = 'MiniChart.ScoreDonut';\n\nexport const ScoreSemiDonut = createComponent<'svg', ScoreDonutProps, {}, typeof DonutRoot.enhance>(\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

@@ -1,138 +1,134 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ScoreLine = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
+var _baseComponents = require("@semcore/base-components");
 var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/resolveColorEnhance"));
-var _flexBox = require("@semcore/flex-box");
 var _react = _interopRequireDefault(require("react"));
 /*!__reshadow-styles__:"./line.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_fmdk9{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_fmdk9{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_fmdk9_gg_.__loading_fmdk9_gg_,.___SLineGauge_fmdk9_gg_.__loading_fmdk9_gg_,.___STrendBar_fmdk9_gg_.__loading_fmdk9_gg_,.___STrendLine_fmdk9_gg_.__loading_fmdk9_gg_{animation-name:pulse_fmdk9;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_fmdk9_gg_{height:8px;background-color:var(--base-bg-color_fmdk9, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_fmdk9_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_fmdk9_gg_.__percent_fmdk9_gg_{width:var(--percent_fmdk9)}.___SLineSegmentItem_fmdk9_gg_.__color_fmdk9_gg_,.___SLineValue_fmdk9_gg_.__color_fmdk9_gg_{background-color:var(--color_fmdk9, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_fmdk9_gg_.__segments_fmdk9_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_fmdk9_gg_,.___SLineGaugeSegment_fmdk9_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_fmdk9_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_fmdk9_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_fmdk9_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_fmdk9;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}", /*__inner_css_end__*/"fmdk9_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_1q9hd{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_1q9hd{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_1q9hd_gg_.__loading_1q9hd_gg_,.___SLineGauge_1q9hd_gg_.__loading_1q9hd_gg_,.___STrendBar_1q9hd_gg_.__loading_1q9hd_gg_,.___STrendLine_1q9hd_gg_.__loading_1q9hd_gg_{animation-name:pulse_1q9hd;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_1q9hd_gg_{height:8px;background-color:var(--base-bg-color_1q9hd, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_1q9hd_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_1q9hd_gg_.__percent_1q9hd_gg_{width:var(--percent_1q9hd)}.___SLineSegmentItem_1q9hd_gg_.__color_1q9hd_gg_,.___SLineValue_1q9hd_gg_.__color_1q9hd_gg_{background-color:var(--color_1q9hd, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_1q9hd_gg_.__segments_1q9hd_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_1q9hd_gg_,.___SLineGaugeSegment_1q9hd_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_1q9hd_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_1q9hd_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_1q9hd_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_1q9hd;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}", /*__inner_css_end__*/"1q9hd_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SLineGauge": "___SLineGauge_fmdk9_gg_",
-  "_loading": "__loading_fmdk9_gg_",
-  "__SDonutContainer": "___SDonutContainer_fmdk9_gg_",
-  "__STrendLine": "___STrendLine_fmdk9_gg_",
-  "__STrendBar": "___STrendBar_fmdk9_gg_",
-  "@pulse": "pulse_fmdk9",
-  "--base-bg-color": "--base-bg-color_fmdk9",
-  "__SLineValue": "___SLineValue_fmdk9_gg_",
-  "_percent": "__percent_fmdk9_gg_",
-  "--percent": "--percent_fmdk9",
-  "_color": "__color_fmdk9_gg_",
-  "__SLineSegmentItem": "___SLineSegmentItem_fmdk9_gg_",
-  "--color": "--color_fmdk9",
-  "_segments": "__segments_fmdk9_gg_",
-  "__SLineGaugeSegment": "___SLineGaugeSegment_fmdk9_gg_",
-  "__SAnimationLine": "___SAnimationLine_fmdk9_gg_",
-  "@move-line": "move-line_fmdk9"
+  "__SLineGauge": "___SLineGauge_1q9hd_gg_",
+  "_loading": "__loading_1q9hd_gg_",
+  "__SDonutContainer": "___SDonutContainer_1q9hd_gg_",
+  "__STrendLine": "___STrendLine_1q9hd_gg_",
+  "__STrendBar": "___STrendBar_1q9hd_gg_",
+  "@pulse": "pulse_1q9hd",
+  "--base-bg-color": "--base-bg-color_1q9hd",
+  "__SLineValue": "___SLineValue_1q9hd_gg_",
+  "_percent": "__percent_1q9hd_gg_",
+  "--percent": "--percent_1q9hd",
+  "_color": "__color_1q9hd_gg_",
+  "__SLineSegmentItem": "___SLineSegmentItem_1q9hd_gg_",
+  "--color": "--color_1q9hd",
+  "_segments": "__segments_1q9hd_gg_",
+  "__SLineGaugeSegment": "___SLineGaugeSegment_1q9hd_gg_",
+  "__SAnimationLine": "___SAnimationLine_1q9hd_gg_",
+  "@move-line": "move-line_1q9hd"
 });
-var LineRoot = /*#__PURE__*/function (_Component) {
-  function LineRoot() {
-    (0, _classCallCheck2["default"])(this, LineRoot);
-    return (0, _callSuper2["default"])(this, LineRoot, arguments);
+class LineRoot extends _core.Component {
+  getSegmentProps(segmentProps) {
+    const {
+      children,
+      resolveColor
+    } = this.asProps;
+    let sum = 0;
+    _react.default.Children.forEach(children, child => {
+      if (/*#__PURE__*/_react.default.isValidElement(child)) {
+        sum = sum + child.props.value;
+      }
+    });
+    const width = sum > 0 ? 100 * segmentProps.value / sum : 0;
+    return {
+      'w': `${width}%`,
+      'use:color': resolveColor(segmentProps.color)
+    };
   }
-  (0, _inherits2["default"])(LineRoot, _Component);
-  return (0, _createClass2["default"])(LineRoot, [{
-    key: "getSegmentProps",
-    value: function getSegmentProps(segmentProps) {
-      var _this$asProps = this.asProps,
-        children = _this$asProps.children,
-        resolveColor = _this$asProps.resolveColor;
-      var sum = 0;
-      _react["default"].Children.forEach(children, function (child) {
-        if (/*#__PURE__*/_react["default"].isValidElement(child)) {
-          sum = sum + child.props.value;
-        }
-      });
-      var width = sum > 0 ? 100 * segmentProps.value / sum : 0;
-      return {
-        'w': "".concat(width, "%"),
-        'use:color': resolveColor(segmentProps.color)
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps,
-        _ref5;
-      var SLineGauge = _flexBox.Box;
-      var SLineValue = _flexBox.Box;
-      var SAnimationLine = _flexBox.Box;
-      var SLineGaugeSegment = _flexBox.Flex;
-      var SLineSegmentItem = _flexBox.Box;
-      var _this$asProps2 = this.asProps,
-        value = _this$asProps2.value,
-        styles = _this$asProps2.styles,
-        _this$asProps2$color = _this$asProps2.color,
-        color = _this$asProps2$color === void 0 ? 'chart-palette-order-1' : _this$asProps2$color,
-        baseBgColor = _this$asProps2.baseBgColor,
-        resolveColor = _this$asProps2.resolveColor,
-        loading = _this$asProps2.loading,
-        children = _this$asProps2.children,
-        Children = _this$asProps2.Children,
-        animate = _this$asProps2.animate;
-      if (children !== undefined) {
-        var _ref3;
-        return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SLineGauge, _ref3.cn("SLineGauge", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+  render() {
+    var _ref = this.asProps,
+      _ref5;
+    const SLineGauge = _baseComponents.Box;
+    const SLineValue = _baseComponents.Box;
+    const SAnimationLine = _baseComponents.Box;
+    const SLineGaugeSegment = _baseComponents.Flex;
+    const SLineSegmentItem = _baseComponents.Box;
+    const {
+      value,
+      styles,
+      color = 'chart-palette-order-1',
+      baseBgColor,
+      resolveColor,
+      loading,
+      children,
+      Children,
+      animate
+    } = this.asProps;
+    if (children !== undefined) {
+      var _ref3;
+      return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SLineGauge, _ref3.cn("SLineGauge", {
+        ...(0, _core.assignProps)({
           "segments": true,
           "base-bg-color": resolveColor(baseBgColor)
-        }, _ref))), /*#__PURE__*/_react["default"].createElement(SLineGaugeSegment, _ref3.cn("SLineGaugeSegment", {}), /*#__PURE__*/_react["default"].createElement(Children, _ref3.cn("Children", {}))), animate && /*#__PURE__*/_react["default"].createElement(SAnimationLine, _ref3.cn("SAnimationLine", {})));
-      }
-      var segments = this.asProps.segments;
-      var SegmentItems = [];
-      if (segments) {
-        for (var i = 0; i < segments; i++) {
-          var _ref4;
-          var width = "calc((100% - ".concat(segments - 1, "px) / ").concat(segments, ")");
-          SegmentItems.push((_ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SLineSegmentItem, _ref4.cn("SLineSegmentItem", {
-            "key": i,
-            "color": i < value ? resolveColor(color) : undefined,
-            "w": width
-          }))));
-        }
-      }
-      var percent = "".concat(value, "%");
-      if (segments) {
-        percent = "".concat(value / segments * 100, "%");
+        }, _ref)
+      }), /*#__PURE__*/_react.default.createElement(SLineGaugeSegment, _ref3.cn("SLineGaugeSegment", {}), /*#__PURE__*/_react.default.createElement(Children, _ref3.cn("Children", {}))), animate && /*#__PURE__*/_react.default.createElement(SAnimationLine, _ref3.cn("SAnimationLine", {})));
+    }
+    const {
+      segments
+    } = this.asProps;
+    const SegmentItems = [];
+    if (segments) {
+      for (let i = 0; i < segments; i++) {
+        var _ref4;
+        const width = `calc((100% - ${segments - 1}px) / ${segments})`;
+        SegmentItems.push((_ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SLineSegmentItem, _ref4.cn("SLineSegmentItem", {
+          "key": i,
+          "color": i < value ? resolveColor(color) : undefined,
+          "w": width
+        }))));
       }
-      return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SLineGauge, _ref5.cn("SLineGauge", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-        "base-bg-color": resolveColor(baseBgColor)
-      }, _ref))), !loading && /*#__PURE__*/_react["default"].createElement(SLineValue, _ref5.cn("SLineValue", {
-        "w": percent,
-        "color": resolveColor(color)
-      })), Boolean(SegmentItems.length) && /*#__PURE__*/_react["default"].createElement(SLineGaugeSegment, _ref5.cn("SLineGaugeSegment", {}), SegmentItems), animate && /*#__PURE__*/_react["default"].createElement(SAnimationLine, _ref5.cn("SAnimationLine", {})));
     }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(LineRoot, "enhance", [(0, _resolveColorEnhance["default"])()]);
-(0, _defineProperty2["default"])(LineRoot, "displayName", 'ScoreLine');
-(0, _defineProperty2["default"])(LineRoot, "style", style);
-(0, _defineProperty2["default"])(LineRoot, "defaultProps", {
+    let percent = `${value}%`;
+    if (segments) {
+      percent = `${value / segments * 100}%`;
+    }
+    return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SLineGauge, _ref5.cn("SLineGauge", {
+      ...(0, _core.assignProps)({
+        "base-bg-color": resolveColor(baseBgColor)
+      }, _ref)
+    }), !loading && /*#__PURE__*/_react.default.createElement(SLineValue, _ref5.cn("SLineValue", {
+      "w": percent,
+      "color": resolveColor(color)
+    })), Boolean(SegmentItems.length) && /*#__PURE__*/_react.default.createElement(SLineGaugeSegment, _ref5.cn("SLineGaugeSegment", {}), SegmentItems), animate && /*#__PURE__*/_react.default.createElement(SAnimationLine, _ref5.cn("SAnimationLine", {})));
+  }
+}
+(0, _defineProperty2.default)(LineRoot, "enhance", [(0, _resolveColorEnhance.default)()]);
+(0, _defineProperty2.default)(LineRoot, "displayName", 'ScoreLine');
+(0, _defineProperty2.default)(LineRoot, "style", style);
+(0, _defineProperty2.default)(LineRoot, "defaultProps", {
   animate: true
 });
 function Segment(props) {
   var _ref2 = arguments[0],
     _ref6;
-  var styles = props.styles,
-    value = props.value;
-  var SLineSegmentItem = _flexBox.Box;
+  const {
+    styles,
+    value
+  } = props;
+  const SLineSegmentItem = _baseComponents.Box;
   if (!value) return null;
-  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SLineSegmentItem, _ref6.cn("SLineSegmentItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref2))));
+  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SLineSegmentItem, _ref6.cn("SLineSegmentItem", {
+    ...(0, _core.assignProps)({}, _ref2)
+  }));
 }
 Segment.displayName = 'Segment';
-var ScoreLine = exports.ScoreLine = (0, _core.createComponent)(LineRoot, {
-  Segment: Segment
+const ScoreLine = exports.ScoreLine = (0, _core.createComponent)(LineRoot, {
+  Segment
 });
 ScoreLine.displayName = 'MiniChart.ScoreLine';
 //# sourceMappingURL=Line.js.map