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

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

@@ -1 +1 @@
-{"version":3,"file":"ScoreDonutUtils.js","names":["ScoreDonutUtils","value","isSemiDonut","_classCallCheck","_defineProperty","radius","Math","max","min","_createClass","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":[]}
+{"version":3,"file":"ScoreDonutUtils.js","names":["ScoreDonutUtils","constructor","value","isSemiDonut","_defineProperty","radius","Math","max","min","viewBox","strokeWidth","fullLength","PI","point","valueLength","animatedValueLength","startMargin","endMargin","margin","baseOffset","baseLength","animatedBaseLengthFrom","animatedBaseLengthTo"],"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":";AAAA,OAAO,MAAMA,eAAe,CAAC;EAM3BC,WAAWA,CAACC,KAAa,EAAEC,WAAoB,EAAE;IAAAC,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAC/C,IAAI,CAACD,WAAW,GAAGA,WAAW;IAC9B,IAAI,CAACE,MAAM,GAAGF,WAAW,GAAG,CAAC,GAAG,EAAE;IAClC,IAAI,CAACD,KAAK,GAAGI,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,GAAG,CAACN,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;EAChD;EAEA,IAAWO,OAAOA,CAAA,EAAG;IACnB,OAAO,IAAI,CAACN,WAAW,GAAG,WAAW,GAAG,WAAW;EACrD;EAEA,IAAWO,WAAWA,CAAA,EAAG;IACvB,OAAO,IAAI,CAACP,WAAW,GAAG,CAAC,GAAG,CAAC;EACjC;EAEA,IAAWQ,UAAUA,CAAA,EAAG;IACtB,OAAO,IAAI,CAACR,WAAW,GAAGG,IAAI,CAACM,EAAE,GAAG,IAAI,CAACP,MAAM,GAAG,CAAC,GAAGC,IAAI,CAACM,EAAE,GAAG,IAAI,CAACP,MAAM;EAC7E;EAEA,IAAWQ,KAAKA,CAAA,EAAG;IACjB,OAAO,IAAI,CAACV,WAAW,GACnB,IAAI,CAACQ,UAAU,IAAI,GAAG,GAAG,CAAC,CAAC,GAC3B,IAAI,CAACA,UAAU,GAAG,GAAG;EAC3B;EAEA,IAAWG,WAAWA,CAAA,EAAG;IACvB,OAAO,IAAI,CAACH,UAAU,IAAI,IAAI,CAACT,KAAK,GAAG,GAAG,CAAC;EAC7C;EAEA,IAAWa,mBAAmBA,CAAA,EAAG;IAC/B,OAAOT,IAAI,CAACE,GAAG,CAAC,IAAI,CAACM,WAAW,EAAE,IAAI,CAACH,UAAU,GAAG,IAAI,CAACK,WAAW,GAAG,IAAI,CAACC,SAAS,CAAC;EACxF;EAEA,IAAWD,WAAWA,CAAA,EAAG;IACvB,IAAIE,MAAM,GAAG,CAAC;IACd,IAAI,IAAI,CAAChB,KAAK,GAAG,CAAC,EAAEgB,MAAM,GAAG,IAAI,CAACL,KAAK;IACvC,OAAOK,MAAM;EACf;EAEA,IAAWD,SAASA,CAAA,EAAG;IACrB,IAAIC,MAAM,GAAG,CAAC;IACd,IAAI,CAAC,IAAI,CAACf,WAAW,IAAI,IAAI,CAACD,KAAK,GAAG,CAAC,EAAEgB,MAAM,GAAG,IAAI,CAACL,KAAK;IAC5D,OAAOK,MAAM;EACf;EAEA,IAAWC,UAAUA,CAAA,EAAG;IACtB,OAAO,CAAC,CAAC,IAAI,IAAI,CAACL,WAAW,GAAG,IAAI,CAACE,WAAW,CAAC;EACnD;EAEA,IAAWI,UAAUA,CAAA,EAAG;IACtB,OAAOd,IAAI,CAACC,GAAG,CAAC,IAAI,CAACI,UAAU,GAAG,IAAI,CAACG,WAAW,GAAG,IAAI,CAACE,WAAW,GAAG,IAAI,CAACC,SAAS,EAAE,CAAC,CAAC;EAC5F;EAEA,IAAWI,sBAAsBA,CAAA,EAAG;IAClC,OAAO,IAAI,CAACV,UAAU,GAAG,IAAI,CAACK,WAAW,GAAG,IAAI,CAACC,SAAS;EAC5D;EAEA,IAAWK,oBAAoBA,CAAA,EAAG;IAChC,OAAO,IAAI,CAACX,UAAU,GAAG,IAAI,CAACG,WAAW,GAAG,IAAI,CAACE,WAAW,GAAG,IAAI,CAACC,SAAS;EAC/E;AACF","ignoreList":[]}

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

@@ -1,111 +1,112 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
+import { Box } from "@semcore/base-components";
 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";
 import { ScoreDonutUtils } from "../../utils/ScoreDonutUtils.mjs";
 /*!__reshadow-styles__:"./donut.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (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}",
+    "@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__*/
-    "1kq41_gg_"
+    "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 DonutRoot2() {
-    _classCallCheck(this, DonutRoot2);
-    return _callSuper(this, DonutRoot2, arguments);
-  }
-  _inherits(DonutRoot2, _Component);
-  return _createClass(DonutRoot2, [{
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps, _ref2;
-      var SDonutContainer = Box;
-      var _this$asProps = this.asProps, value = _this$asProps.value, styles = _this$asProps.styles, _this$asProps$baseBgC = _this$asProps.baseBgColor, baseBgColor = _this$asProps$baseBgC === void 0 ? "chart-grid-bar-chart-base-bg" : _this$asProps$baseBgC, _this$asProps$color = _this$asProps.color, color = _this$asProps$color === void 0 ? "chart-palette-order-1" : _this$asProps$color, resolveColor = _this$asProps.resolveColor, isSemiDonut = _this$asProps.isSemiDonut, loading = _this$asProps.loading, animate = _this$asProps.animate, duration = _this$asProps.duration;
-      var scoreDonut = new ScoreDonutUtils(value, isSemiDonut);
-      var _extractAriaProps = extractAriaProps(this.asProps), __excludeProps = _extractAriaProps.__excludeProps, extractedAriaProps = _extractAriaProps.extractedAriaProps;
-      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SDonutContainer, _ref2.cn("SDonutContainer", _objectSpread({}, assignProps({
+class DonutRoot extends Component {
+  render() {
+    var _ref = this.asProps, _ref2;
+    const SDonutContainer = 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(value, isSemiDonut);
+    const {
+      __excludeProps,
+      extractedAriaProps
+    } = extractAriaProps(this.asProps);
+    return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SDonutContainer, _ref2.cn("SDonutContainer", {
+      ...assignProps({
         "semi": isSemiDonut,
         "__excludeProps": __excludeProps
-      }, _ref))), /* @__PURE__ */ React.createElement("svg", _ref2.cn("svg", _objectSpread({
-        "width": "100%",
-        "height": "100%",
-        "viewBox": scoreDonut.viewBox,
-        "fill": "none",
-        "role": "img"
-      }, extractedAriaProps)), /* @__PURE__ */ React.createElement("g", _ref2.cn("g", {}), /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
-        "cx": "12",
-        "cy": "12",
-        "r": scoreDonut.radius,
-        "strokeWidth": scoreDonut.strokeWidth,
-        "stroke": resolveColor(baseBgColor),
-        "strokeDasharray": loading ? void 0 : "".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",
-        "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(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);
+      }, _ref)
+    }), /* @__PURE__ */ React.createElement("svg", _ref2.cn("svg", {
+      "width": "100%",
+      "height": "100%",
+      "viewBox": scoreDonut.viewBox,
+      "fill": "none",
+      "role": "img",
+      ...extractedAriaProps
+    }), /* @__PURE__ */ React.createElement("g", _ref2.cn("g", {}), /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
+      "cx": "12",
+      "cy": "12",
+      "r": scoreDonut.radius,
+      "strokeWidth": scoreDonut.strokeWidth,
+      "stroke": resolveColor(baseBgColor),
+      "strokeDasharray": loading ? void 0 : `${scoreDonut.baseLength} ${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": `${scoreDonut.animatedBaseLengthFrom} ${scoreDonut.fullLength}`,
+      "to": `${scoreDonut.animatedBaseLengthTo} ${scoreDonut.fullLength}`,
+      "dur": duration + "ms"
+    })), /* @__PURE__ */ React.createElement("animate", _ref2.cn("animate", {
+      "attributeName": "stroke-dashoffset",
+      "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(color),
+      "strokeDasharray": `${scoreDonut.valueLength} ${scoreDonut.fullLength}`
+    }), animate && /* @__PURE__ */ React.createElement("animate", _ref2.cn("animate", {
+      "attributeName": "stroke-dasharray",
+      "from": `0 ${scoreDonut.fullLength}`,
+      "to": `${scoreDonut.valueLength} ${scoreDonut.fullLength}`,
+      "dur": duration + "ms"
+    })))))));
+  }
+}
 _defineProperty(DonutRoot, "enhance", [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"
 }), resolveColorEnhance()]);
 _defineProperty(DonutRoot, "style", style);
 _defineProperty(DonutRoot, "defaultProps", {
   animate: true
 });
-var ScoreDonut = createComponent(DonutRoot);
+const ScoreDonut = createComponent(DonutRoot);
 ScoreDonut.displayName = "MiniChart.ScoreDonut";
-var ScoreSemiDonut = createComponent(DonutRoot, {}, {
-  enhancements: [function() {
+const ScoreSemiDonut = createComponent(DonutRoot, {}, {
+  enhancements: [() => {
     return {
-      wrapperProps: function wrapperProps(props) {
+      wrapperProps: (props) => {
         return assignProps(props, {
           isSemiDonut: true
         });

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

@@ -1,107 +1,111 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
+import { createComponent, Component, sstyled, assignProps } from "@semcore/core";
+import { Box, Flex } from "@semcore/base-components";
 import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
-import { Box, Flex } from "@semcore/flex-box";
 import React from "react";
 /*!__reshadow-styles__:"./line.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (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}",
+    "@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__*/
-    "fmdk9_gg_"
+    "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 LineRoot2() {
-    _classCallCheck(this, LineRoot2);
-    return _callSuper(this, LineRoot2, arguments);
+class LineRoot extends Component {
+  getSegmentProps(segmentProps) {
+    const {
+      children,
+      resolveColor
+    } = this.asProps;
+    let sum = 0;
+    React.Children.forEach(children, (child) => {
+      if (/* @__PURE__ */ React.isValidElement(child)) {
+        sum = sum + child.props.value;
+      }
+    });
+    const width = sum > 0 ? 100 * segmentProps.value / sum : 0;
+    return {
+      "w": `${width}%`,
+      "use:color": resolveColor(segmentProps.color)
+    };
   }
-  _inherits(LineRoot2, _Component);
-  return _createClass(LineRoot2, [{
-    key: "getSegmentProps",
-    value: function getSegmentProps(segmentProps) {
-      var _this$asProps = this.asProps, children = _this$asProps.children, resolveColor = _this$asProps.resolveColor;
-      var sum = 0;
-      React.Children.forEach(children, function(child) {
-        if (/* @__PURE__ */ React.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 = Box;
-      var SLineValue = Box;
-      var SAnimationLine = Box;
-      var SLineGaugeSegment = Flex;
-      var SLineSegmentItem = 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 !== void 0) {
-        var _ref3;
-        return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineGauge, _ref3.cn("SLineGauge", _objectSpread({}, assignProps({
+  render() {
+    var _ref = this.asProps, _ref5;
+    const SLineGauge = Box;
+    const SLineValue = Box;
+    const SAnimationLine = Box;
+    const SLineGaugeSegment = Flex;
+    const SLineSegmentItem = Box;
+    const {
+      value,
+      styles,
+      color = "chart-palette-order-1",
+      baseBgColor,
+      resolveColor,
+      loading,
+      children,
+      Children,
+      animate
+    } = this.asProps;
+    if (children !== void 0) {
+      var _ref3;
+      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineGauge, _ref3.cn("SLineGauge", {
+        ...assignProps({
           "segments": true,
           "base-bg-color": resolveColor(baseBgColor)
-        }, _ref))), /* @__PURE__ */ React.createElement(SLineGaugeSegment, _ref3.cn("SLineGaugeSegment", {}), /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {}))), animate && /* @__PURE__ */ React.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 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref4.cn("SLineSegmentItem", {
-            "key": i,
-            "color": i < value ? resolveColor(color) : void 0,
-            "w": width
-          }))));
-        }
-      }
-      var percent = "".concat(value, "%");
-      if (segments) {
-        percent = "".concat(value / segments * 100, "%");
+        }, _ref)
+      }), /* @__PURE__ */ React.createElement(SLineGaugeSegment, _ref3.cn("SLineGaugeSegment", {}), /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {}))), animate && /* @__PURE__ */ React.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 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref4.cn("SLineSegmentItem", {
+          "key": i,
+          "color": i < value ? resolveColor(color) : void 0,
+          "w": width
+        }))));
       }
-      return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineGauge, _ref5.cn("SLineGauge", _objectSpread({}, assignProps({
-        "base-bg-color": resolveColor(baseBgColor)
-      }, _ref))), !loading && /* @__PURE__ */ React.createElement(SLineValue, _ref5.cn("SLineValue", {
-        "w": percent,
-        "color": resolveColor(color)
-      })), Boolean(SegmentItems.length) && /* @__PURE__ */ React.createElement(SLineGaugeSegment, _ref5.cn("SLineGaugeSegment", {}), SegmentItems), animate && /* @__PURE__ */ React.createElement(SAnimationLine, _ref5.cn("SAnimationLine", {})));
     }
-  }]);
-})(Component);
+    let percent = `${value}%`;
+    if (segments) {
+      percent = `${value / segments * 100}%`;
+    }
+    return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineGauge, _ref5.cn("SLineGauge", {
+      ...assignProps({
+        "base-bg-color": resolveColor(baseBgColor)
+      }, _ref)
+    }), !loading && /* @__PURE__ */ React.createElement(SLineValue, _ref5.cn("SLineValue", {
+      "w": percent,
+      "color": resolveColor(color)
+    })), Boolean(SegmentItems.length) && /* @__PURE__ */ React.createElement(SLineGaugeSegment, _ref5.cn("SLineGaugeSegment", {}), SegmentItems), animate && /* @__PURE__ */ React.createElement(SAnimationLine, _ref5.cn("SAnimationLine", {})));
+  }
+}
 _defineProperty(LineRoot, "enhance", [resolveColorEnhance()]);
 _defineProperty(LineRoot, "displayName", "ScoreLine");
 _defineProperty(LineRoot, "style", style);
@@ -110,13 +114,18 @@ _defineProperty(LineRoot, "defaultProps", {
 });
 function Segment(props) {
   var _ref2 = arguments[0], _ref6;
-  var styles = props.styles, value = props.value;
-  var SLineSegmentItem = Box;
+  const {
+    styles,
+    value
+  } = props;
+  const SLineSegmentItem = Box;
   if (!value) return null;
-  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref6.cn("SLineSegmentItem", _objectSpread({}, assignProps({}, _ref2))));
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref6.cn("SLineSegmentItem", {
+    ...assignProps({}, _ref2)
+  }));
 }
 Segment.displayName = "Segment";
-var ScoreLine = createComponent(LineRoot, {
+const ScoreLine = createComponent(LineRoot, {
   Segment
 });
 ScoreLine.displayName = "MiniChart.ScoreLine";