@semcore/mini-chart 0.30.0-prerelease.4 → 0.30.0-prerelease.5

package/lib/es6/component/trend/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TrendLine","TrendArea","TrendBar","TrendHistogram"],"sources":["../../../../src/component/trend/index.ts"],"sourcesContent":["import { TrendLine, TrendArea } from './Line';\nimport { TrendBar, TrendHistogram } from './Bar';\n\nexport { TrendLine, TrendArea, TrendBar, TrendHistogram };\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,SAAS,QAAQ,QAAQ;AAC7C,SAASC,QAAQ,EAAEC,cAAc,QAAQ,OAAO;AAEhD,SAASH,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,cAAc"}
+{"version":3,"file":"index.js","names":["TrendBar","TrendHistogram","TrendLine","TrendArea"],"sources":["../../../../src/component/trend/index.ts"],"sourcesContent":["import { TrendBar, TrendHistogram } from './Bar';\nimport { TrendLine, TrendArea } from './Line';\n\nexport { TrendLine, TrendArea, TrendBar, TrendHistogram };\n"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,cAAc,QAAQ,OAAO;AAChD,SAASC,SAAS,EAAEC,SAAS,QAAQ,QAAQ;AAE7C,SAASD,SAAS,EAAEC,SAAS,EAAEH,QAAQ,EAAEC,cAAc","ignoreList":[]}

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ScoreLine","ScoreDonut","ScoreSemiDonut","TrendLine","TrendArea","TrendBar","TrendHistogram","miniCharts"],"sources":["../../src/index.ts"],"sourcesContent":["import { ScoreLine, ScoreDonut, ScoreSemiDonut } from './component/score';\nimport { TrendLine, TrendArea, TrendBar, TrendHistogram } from './component/trend';\n\nconst miniCharts: {\n  TrendLine: typeof TrendLine;\n  TrendArea: typeof TrendArea;\n  TrendBar: typeof TrendBar;\n  TrendHistogram: typeof TrendHistogram;\n  ScoreSemiDonut: typeof ScoreSemiDonut;\n  ScoreDonut: typeof ScoreDonut;\n  ScoreLine: typeof ScoreLine;\n} = {\n  TrendLine,\n  TrendArea,\n  TrendBar,\n  TrendHistogram,\n  ScoreSemiDonut,\n  ScoreDonut,\n  ScoreLine,\n};\n\nexport default miniCharts;\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,UAAU,EAAEC,cAAc,QAAQ,mBAAmB;AACzE,SAASC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,cAAc,QAAQ,mBAAmB;AAElF,IAAMC,UAQL,GAAG;EACFJ,SAAS,EAATA,SAAS;EACTC,SAAS,EAATA,SAAS;EACTC,QAAQ,EAARA,QAAQ;EACRC,cAAc,EAAdA,cAAc;EACdJ,cAAc,EAAdA,cAAc;EACdD,UAAU,EAAVA,UAAU;EACVD,SAAS,EAATA;AACF,CAAC;AAED,eAAeO,UAAU"}
+{"version":3,"file":"index.js","names":["ScoreLine","ScoreDonut","ScoreSemiDonut","TrendLine","TrendArea","TrendBar","TrendHistogram","miniCharts"],"sources":["../../src/index.ts"],"sourcesContent":["import { ScoreLine, ScoreDonut, ScoreSemiDonut } from './component/score';\nimport { TrendLine, TrendArea, TrendBar, TrendHistogram } from './component/trend';\n\nconst miniCharts: {\n  TrendLine: typeof TrendLine;\n  TrendArea: typeof TrendArea;\n  TrendBar: typeof TrendBar;\n  TrendHistogram: typeof TrendHistogram;\n  ScoreSemiDonut: typeof ScoreSemiDonut;\n  ScoreDonut: typeof ScoreDonut;\n  ScoreLine: typeof ScoreLine;\n} = {\n  TrendLine,\n  TrendArea,\n  TrendBar,\n  TrendHistogram,\n  ScoreSemiDonut,\n  ScoreDonut,\n  ScoreLine,\n};\n\nexport default miniCharts;\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,UAAU,EAAEC,cAAc,QAAQ,mBAAmB;AACzE,SAASC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,cAAc,QAAQ,mBAAmB;AAElF,IAAMC,UAQL,GAAG;EACFJ,SAAS,EAATA,SAAS;EACTC,SAAS,EAATA,SAAS;EACTC,QAAQ,EAARA,QAAQ;EACRC,cAAc,EAAdA,cAAc;EACdJ,cAAc,EAAdA,cAAc;EACdD,UAAU,EAAVA,UAAU;EACVD,SAAS,EAATA;AACF,CAAC;AAED,eAAeO,UAAU","ignoreList":[]}

package/lib/es6/utils/ScoreDonutUtils.js

@@ -0,0 +1,80 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+export var ScoreDonutUtils = /*#__PURE__*/function () {
+  function ScoreDonutUtils(value, isSemiDonut) {
+    _classCallCheck(this, ScoreDonutUtils);
+    _defineProperty(this, "isSemiDonut", void 0);
+    _defineProperty(this, "value", void 0);
+    _defineProperty(this, "radius", void 0);
+    this.isSemiDonut = isSemiDonut;
+    this.radius = isSemiDonut ? 9 : 10;
+    this.value = Math.max(Math.min(value, 100), 0);
+  }
+  return _createClass(ScoreDonutUtils, [{
+    key: "viewBox",
+    get: function get() {
+      return this.isSemiDonut ? '0 0 24 12' : '0 0 24 24';
+    }
+  }, {
+    key: "strokeWidth",
+    get: function get() {
+      return this.isSemiDonut ? 6 : 4;
+    }
+  }, {
+    key: "fullLength",
+    get: function get() {
+      return this.isSemiDonut ? Math.PI * this.radius : 2 * Math.PI * this.radius;
+    }
+  }, {
+    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() {
+      var margin = 0;
+      if (!this.isSemiDonut && this.value > 0) margin = this.point;
+      return margin;
+    }
+  }, {
+    key: "baseOffset",
+    get: function get() {
+      return -1 * (this.valueLength + this.startMargin);
+    }
+  }, {
+    key: "baseLength",
+    get: function get() {
+      return Math.max(this.fullLength - this.valueLength - this.startMargin - this.endMargin, 0);
+    }
+  }, {
+    key: "animatedBaseLengthFrom",
+    get: function get() {
+      return this.fullLength - this.startMargin - this.endMargin;
+    }
+  }, {
+    key: "animatedBaseLengthTo",
+    get: function get() {
+      return this.fullLength - this.valueLength - this.startMargin - this.endMargin;
+    }
+  }]);
+}();
+//# sourceMappingURL=ScoreDonutUtils.js.map

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

@@ -0,0 +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":[]}

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

@@ -1,104 +1,101 @@
 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 _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled } from "@semcore/utils/lib/core/index";
-import createComponent, { assignProps, sstyled as sstyled$1, Component } from "@semcore/core";
+import { sstyled, assignProps, Component, createComponent } 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 React from "react";
-import { Box } from "@semcore/flex-box";
-import resolveColorEnhance from "@semcore/utils/lib/enhances/resolveColorEnhance";
-import { extractAriaProps } from "@semcore/utils/lib/ariaProps";
+import { ScoreDonutUtils } from "../../utils/ScoreDonutUtils.mjs";
 /*!__reshadow-styles__:"./donut.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_1clki{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1clki_gg_.__loading_1clki_gg_,.___SLineGauge_1clki_gg_.__loading_1clki_gg_,.___STrendBar_1clki_gg_.__loading_1clki_gg_,.___STrendLine_1clki_gg_.__loading_1clki_gg_{animation-name:pulse_1clki;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_1clki_gg_.__semi_1clki_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_1clki_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_1clki_gg_.__animate_1clki_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}",
+    "@keyframes pulse_w54vj{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_w54vj_gg_.__loading_w54vj_gg_,.___SLineGauge_w54vj_gg_.__loading_w54vj_gg_,.___STrendBar_w54vj_gg_.__loading_w54vj_gg_,.___STrendLine_w54vj_gg_.__loading_w54vj_gg_{animation-name:pulse_w54vj;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_w54vj_gg_.__semi_w54vj_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_w54vj_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_w54vj_gg_.__animate_w54vj_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}",
     /*__inner_css_end__*/
-    "1clki_gg_"
+    "w54vj_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_1clki_gg_",
-    "_loading": "__loading_1clki_gg_",
-    "__SDonutContainer": "___SDonutContainer_1clki_gg_",
-    "__STrendLine": "___STrendLine_1clki_gg_",
-    "__STrendBar": "___STrendBar_1clki_gg_",
-    "@pulse": "pulse_1clki",
-    "_animate": "__animate_1clki_gg_",
-    "_semi": "__semi_1clki_gg_"
+    "__SLineGauge": "___SLineGauge_w54vj_gg_",
+    "_loading": "__loading_w54vj_gg_",
+    "__SDonutContainer": "___SDonutContainer_w54vj_gg_",
+    "__STrendLine": "___STrendLine_w54vj_gg_",
+    "__STrendBar": "___STrendBar_w54vj_gg_",
+    "@pulse": "pulse_w54vj",
+    "_animate": "__animate_w54vj_gg_",
+    "_semi": "__semi_w54vj_gg_"
   })
 );
-var DonutRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(DonutRoot2, _Component);
-  var _super = _createSuper(DonutRoot2);
+var DonutRoot = /* @__PURE__ */ (function(_Component) {
   function DonutRoot2() {
     _classCallCheck(this, DonutRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, DonutRoot2, arguments);
   }
-  _createClass(DonutRoot2, [{
+  _inherits(DonutRoot2, _Component);
+  return _createClass(DonutRoot2, [{
     key: "render",
     value: function render() {
       var _ref = this.asProps, _ref2;
       var SDonutContainer = Box;
-      var _this$asProps = this.asProps, value = _this$asProps.value, styles = _this$asProps.styles, _this$asProps$baseBgC = _this$asProps.baseBgColor, baseBgColor = _this$asProps$baseBgC === void 0 ? "chart-grid-bar-chart-base-bg" : _this$asProps$baseBgC, _this$asProps$color = _this$asProps.color, color = _this$asProps$color === void 0 ? "chart-palette-order-1" : _this$asProps$color, resolveColor = _this$asProps.resolveColor, isSemiDonut = _this$asProps.isSemiDonut, loading = _this$asProps.loading;
-      var strokeWidth = isSemiDonut ? 6 : 4;
-      var radius = isSemiDonut ? 9 : 10;
-      var baseStrokeDasharray = isSemiDonut ? Math.PI * radius : Math.PI * 2 * radius;
-      var valueStrokeDasharray = baseStrokeDasharray * (value / 100);
-      var greyStrokeDasharray = baseStrokeDasharray * ((100 - value) / 100);
-      var offsetPoint = isSemiDonut ? baseStrokeDasharray / (100 / 3) : baseStrokeDasharray / 100;
-      var strokeDasharrayBetweenSpaces = "".concat(greyStrokeDasharray - 2 * offsetPoint, " ").concat(offsetPoint);
-      var spaceStrokeDasharray = "".concat(offsetPoint, " ").concat(value < 99 ? "".concat(strokeDasharrayBetweenSpaces) : "", " ").concat(baseStrokeDasharray);
-      if (isSemiDonut) {
-        spaceStrokeDasharray = "".concat(offsetPoint, " ").concat(value < 95 ? "".concat(strokeDasharrayBetweenSpaces) : "", " ").concat(baseStrokeDasharray);
-      }
-      var viewBox = isSemiDonut ? "0 0 24 12" : "0 0 24 24";
-      var strokeDashoffsetBase = -1 * (valueStrokeDasharray + (isSemiDonut ? offsetPoint : 0));
+      var _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$1(styles), /* @__PURE__ */ React.createElement(SDonutContainer, _ref2.cn("SDonutContainer", _objectSpread({}, assignProps({
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SDonutContainer, _ref2.cn("SDonutContainer", _objectSpread({}, assignProps({
         "semi": isSemiDonut,
         "__excludeProps": __excludeProps
       }, _ref))), /* @__PURE__ */ React.createElement("svg", _ref2.cn("svg", _objectSpread({
         "width": "100%",
         "height": "100%",
-        "viewBox": viewBox,
+        "viewBox": scoreDonut.viewBox,
         "fill": "none",
         "role": "img"
       }, extractedAriaProps)), /* @__PURE__ */ React.createElement("g", _ref2.cn("g", {}), /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
         "cx": "12",
         "cy": "12",
-        "r": radius,
-        "strokeWidth": strokeWidth,
+        "r": scoreDonut.radius,
+        "strokeWidth": scoreDonut.strokeWidth,
         "stroke": resolveColor(baseBgColor),
-        "strokeDasharray": loading ? void 0 : "".concat(greyStrokeDasharray, " ").concat(baseStrokeDasharray),
-        "strokeDashoffset": strokeDashoffsetBase
-      })), !loading && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
-        "cx": "12",
-        "cy": "12",
-        "r": radius,
-        "strokeWidth": strokeWidth,
-        "stroke": resolveColor(color),
-        "strokeDasharray": "".concat(valueStrokeDasharray, " ").concat(baseStrokeDasharray),
-        "strokeDashoffset": valueStrokeDasharray
-      }), /* @__PURE__ */ React.createElement("animate", _ref2.cn("animate", {
+        "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",
-        "values": "0;".concat(valueStrokeDasharray)
-      }))), value !== 100 && !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": radius,
-        "strokeWidth": strokeWidth,
-        "stroke": resolveColor("chart-grid-border"),
-        "strokeDasharray": spaceStrokeDasharray,
-        "strokeDashoffset": -1 * valueStrokeDasharray
-      }))))));
+        "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"
+      })))))));
     }
   }]);
-  return DonutRoot2;
-}(Component);
-_defineProperty(DonutRoot, "enhance", [resolveColorEnhance()]);
+})(Component);
+_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/esm/component/score/Line.mjs

@@ -1,51 +1,49 @@
 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 _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled } from "@semcore/utils/lib/core/index";
-import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
+import { sstyled, assignProps, Component, createComponent } from "@semcore/core";
+import { Box, Flex } from "@semcore/base-components";
+import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
 import React from "react";
-import { Box, Flex } from "@semcore/flex-box";
-import resolveColorEnhance from "@semcore/utils/lib/enhances/resolveColorEnhance";
 /*!__reshadow-styles__:"./line.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_1we5b{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_1we5b{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_1we5b_gg_.__loading_1we5b_gg_,.___SLineGauge_1we5b_gg_.__loading_1we5b_gg_,.___STrendBar_1we5b_gg_.__loading_1we5b_gg_,.___STrendLine_1we5b_gg_.__loading_1we5b_gg_{animation-name:pulse_1we5b;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_1we5b_gg_{height:8px;background-color:var(--base-bg-color_1we5b, var(--intergalactic-chart-grid-bar-chart-base-bg, rgb(241, 242, 242)));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_1we5b_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_1we5b_gg_.__percent_1we5b_gg_{width:var(--percent_1we5b)}.___SLineSegmentItem_1we5b_gg_.__color_1we5b_gg_,.___SLineValue_1we5b_gg_.__color_1we5b_gg_{background-color:var(--color_1we5b, var(--intergalactic-chart-palette-order-1, rgb(102, 107, 219)))}.___SLineGauge_1we5b_gg_.__segments_1we5b_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_1we5b_gg_,.___SLineGaugeSegment_1we5b_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_1we5b_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_1we5b_gg_{height:8px;background:0 0;border-right-color:var(--intergalactic-chart-grid-border, #fff);border-right-style:solid;border-right-width:1px;box-sizing:content-box}.___SAnimationLine_1we5b_gg_{background-color:var(--intergalactic-chart-grid-bar-chart-base-bg, rgb(241, 242, 242));transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out;animation-name:move-line_1we5b;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}",
+    "@keyframes pulse_1y4lp{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_1y4lp{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_1y4lp_gg_.__loading_1y4lp_gg_,.___SLineGauge_1y4lp_gg_.__loading_1y4lp_gg_,.___STrendBar_1y4lp_gg_.__loading_1y4lp_gg_,.___STrendLine_1y4lp_gg_.__loading_1y4lp_gg_{animation-name:pulse_1y4lp;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_1y4lp_gg_{height:8px;background-color:var(--base-bg-color_1y4lp, var(--intergalactic-chart-grid-bar-chart-base-bg, rgb(241, 242, 242)));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_1y4lp_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_1y4lp_gg_.__percent_1y4lp_gg_{width:var(--percent_1y4lp)}.___SLineSegmentItem_1y4lp_gg_.__color_1y4lp_gg_,.___SLineValue_1y4lp_gg_.__color_1y4lp_gg_{background-color:var(--color_1y4lp, var(--intergalactic-chart-palette-order-1, rgb(102, 107, 219)))}.___SLineGauge_1y4lp_gg_.__segments_1y4lp_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_1y4lp_gg_,.___SLineGaugeSegment_1y4lp_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_1y4lp_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_1y4lp_gg_{height:8px;background:0 0;border-right-color:var(--intergalactic-chart-grid-border, #fff);border-right-style:solid;border-right-width:1px;box-sizing:content-box}.___SAnimationLine_1y4lp_gg_{background-color:var(--intergalactic-chart-grid-bar-chart-base-bg, rgb(241, 242, 242));transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out;animation-name:move-line_1y4lp;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}",
     /*__inner_css_end__*/
-    "1we5b_gg_"
+    "1y4lp_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_1we5b_gg_",
-    "_loading": "__loading_1we5b_gg_",
-    "__SDonutContainer": "___SDonutContainer_1we5b_gg_",
-    "__STrendLine": "___STrendLine_1we5b_gg_",
-    "__STrendBar": "___STrendBar_1we5b_gg_",
-    "@pulse": "pulse_1we5b",
-    "__SLineValue": "___SLineValue_1we5b_gg_",
-    "_percent": "__percent_1we5b_gg_",
-    "--percent": "--percent_1we5b",
-    "_color": "__color_1we5b_gg_",
-    "__SLineSegmentItem": "___SLineSegmentItem_1we5b_gg_",
-    "_segments": "__segments_1we5b_gg_",
-    "__SLineGaugeSegment": "___SLineGaugeSegment_1we5b_gg_",
-    "__SAnimationLine": "___SAnimationLine_1we5b_gg_",
-    "@move-line": "move-line_1we5b",
-    "--base-bg-color": "--base-bg-color_1we5b",
-    "--color": "--color_1we5b"
+    "__SLineGauge": "___SLineGauge_1y4lp_gg_",
+    "_loading": "__loading_1y4lp_gg_",
+    "__SDonutContainer": "___SDonutContainer_1y4lp_gg_",
+    "__STrendLine": "___STrendLine_1y4lp_gg_",
+    "__STrendBar": "___STrendBar_1y4lp_gg_",
+    "@pulse": "pulse_1y4lp",
+    "__SLineValue": "___SLineValue_1y4lp_gg_",
+    "_percent": "__percent_1y4lp_gg_",
+    "--percent": "--percent_1y4lp",
+    "_color": "__color_1y4lp_gg_",
+    "__SLineSegmentItem": "___SLineSegmentItem_1y4lp_gg_",
+    "_segments": "__segments_1y4lp_gg_",
+    "__SLineGaugeSegment": "___SLineGaugeSegment_1y4lp_gg_",
+    "__SAnimationLine": "___SAnimationLine_1y4lp_gg_",
+    "@move-line": "move-line_1y4lp",
+    "--base-bg-color": "--base-bg-color_1y4lp",
+    "--color": "--color_1y4lp"
   })
 );
-var LineRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(LineRoot2, _Component);
-  var _super = _createSuper(LineRoot2);
+var LineRoot = /* @__PURE__ */ (function(_Component) {
   function LineRoot2() {
     _classCallCheck(this, LineRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, LineRoot2, arguments);
   }
-  _createClass(LineRoot2, [{
+  _inherits(LineRoot2, _Component);
+  return _createClass(LineRoot2, [{
     key: "getSegmentProps",
     value: function getSegmentProps(segmentProps) {
       var _this$asProps = this.asProps, children = _this$asProps.children, resolveColor = _this$asProps.resolveColor;
@@ -57,7 +55,7 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
       });
       var width = sum > 0 ? 100 * segmentProps.value / sum : 0;
       return {
-        w: "".concat(width, "%"),
+        "w": "".concat(width, "%"),
         "use:color": resolveColor(segmentProps.color)
       };
     }
@@ -73,7 +71,7 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
       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$1(styles), /* @__PURE__ */ React.createElement(SLineGauge, _ref3.cn("SLineGauge", _objectSpread({}, assignProps({
+        return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineGauge, _ref3.cn("SLineGauge", _objectSpread({}, 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", {})));
@@ -84,7 +82,7 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
         for (var i = 0; i < segments; i++) {
           var _ref4;
           var width = "calc((100% - ".concat(segments - 1, "px) / ").concat(segments, ")");
-          SegmentItems.push((_ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref4.cn("SLineSegmentItem", {
+          SegmentItems.push((_ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref4.cn("SLineSegmentItem", {
             "key": i,
             "color": i < value ? resolveColor(color) : void 0,
             "w": width
@@ -95,7 +93,7 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
       if (segments) {
         percent = "".concat(value / segments * 100, "%");
       }
-      return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SLineGauge, _ref5.cn("SLineGauge", _objectSpread({}, assignProps({
+      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,
@@ -103,8 +101,7 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
       })), Boolean(SegmentItems.length) && /* @__PURE__ */ React.createElement(SLineGaugeSegment, _ref5.cn("SLineGaugeSegment", {}), SegmentItems), animate && /* @__PURE__ */ React.createElement(SAnimationLine, _ref5.cn("SAnimationLine", {})));
     }
   }]);
-  return LineRoot2;
-}(Component);
+})(Component);
 _defineProperty(LineRoot, "enhance", [resolveColorEnhance()]);
 _defineProperty(LineRoot, "displayName", "ScoreLine");
 _defineProperty(LineRoot, "style", style);
@@ -113,9 +110,10 @@ _defineProperty(LineRoot, "defaultProps", {
 });
 function Segment(props) {
   var _ref2 = arguments[0], _ref6;
-  var styles = props.styles;
+  var styles = props.styles, value = props.value;
   var SLineSegmentItem = Box;
-  return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref6.cn("SLineSegmentItem", _objectSpread({}, assignProps({}, _ref2))));
+  if (!value) return null;
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref6.cn("SLineSegmentItem", _objectSpread({}, assignProps({}, _ref2))));
 }
 Segment.displayName = "Segment";
 var ScoreLine = createComponent(LineRoot, {

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

@@ -0,0 +1,7 @@
+import { ScoreDonut, ScoreSemiDonut } from "./Donut.mjs";
+import { ScoreLine } from "./Line.mjs";
+export {
+  ScoreDonut,
+  ScoreLine,
+  ScoreSemiDonut
+};

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

@@ -2,42 +2,40 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled } from "@semcore/utils/lib/core/index";
-import createComponent, { assignProps, sstyled as sstyled$1 } from "@semcore/core";
+import { sstyled, assignProps, createComponent } 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 React from "react";
-import resolveColorEnhance from "@semcore/utils/lib/enhances/resolveColorEnhance";
 import { Trend } from "./Trend.mjs";
-import { Box } from "@semcore/flex-box";
-import { extractAriaProps } from "@semcore/utils/lib/ariaProps";
 /*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_mylya{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_mylya_gg_.__loading_mylya_gg_,.___SLineGauge_mylya_gg_.__loading_mylya_gg_,.___STrendBar_mylya_gg_.__loading_mylya_gg_,.___STrendLine_mylya_gg_.__loading_mylya_gg_{animation-name:pulse_mylya;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
+    "@keyframes pulse_1yrsa{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1yrsa_gg_.__loading_1yrsa_gg_,.___SLineGauge_1yrsa_gg_.__loading_1yrsa_gg_,.___STrendBar_1yrsa_gg_.__loading_1yrsa_gg_,.___STrendLine_1yrsa_gg_.__loading_1yrsa_gg_{animation-name:pulse_1yrsa;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
     /*__inner_css_end__*/
-    "mylya_gg_"
+    "1yrsa_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_mylya_gg_",
-    "_loading": "__loading_mylya_gg_",
-    "__SDonutContainer": "___SDonutContainer_mylya_gg_",
-    "__STrendLine": "___STrendLine_mylya_gg_",
-    "__STrendBar": "___STrendBar_mylya_gg_",
-    "@pulse": "pulse_mylya"
+    "__SLineGauge": "___SLineGauge_1yrsa_gg_",
+    "_loading": "__loading_1yrsa_gg_",
+    "__SDonutContainer": "___SDonutContainer_1yrsa_gg_",
+    "__STrendLine": "___STrendLine_1yrsa_gg_",
+    "__STrendBar": "___STrendBar_1yrsa_gg_",
+    "@pulse": "pulse_1yrsa"
   })
 );
-var TrendBarRoot = /* @__PURE__ */ function(_Trend) {
-  _inherits(TrendBarRoot2, _Trend);
-  var _super = _createSuper(TrendBarRoot2);
+var TrendBarRoot = /* @__PURE__ */ (function(_Trend) {
   function TrendBarRoot2() {
     _classCallCheck(this, TrendBarRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, TrendBarRoot2, arguments);
   }
-  _createClass(TrendBarRoot2, [{
+  _inherits(TrendBarRoot2, _Trend);
+  return _createClass(TrendBarRoot2, [{
     key: "defaultData",
     get: function get() {
       return [{
@@ -67,7 +65,7 @@ var TrendBarRoot = /* @__PURE__ */ function(_Trend) {
       var _this$asProps2 = this.asProps, styles = _this$asProps2.styles, resolveColor = _this$asProps2.resolveColor, isHistogram = _this$asProps2.isHistogram, animate = _this$asProps2.animate, loading = _this$asProps2.loading;
       var step = this.defaultWidth / this.data.length;
       var _extractAriaProps = extractAriaProps(this.asProps), __excludeProps = _extractAriaProps.__excludeProps, extractedAriaProps = _extractAriaProps.extractedAriaProps;
-      return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(STrendBar, _ref2.cn("STrendBar", _objectSpread({}, assignProps({
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(STrendBar, _ref2.cn("STrendBar", _objectSpread({}, assignProps({
         "ref": this.containerRef,
         "__excludeProps": ["data"].concat(_toConsumableArray(__excludeProps))
       }, _ref))), /* @__PURE__ */ React.createElement("svg", _ref2.cn("svg", _objectSpread({
@@ -95,8 +93,7 @@ var TrendBarRoot = /* @__PURE__ */ function(_Trend) {
       })));
     }
   }]);
-  return TrendBarRoot2;
-}(Trend);
+})(Trend);
 _defineProperty(TrendBarRoot, "enhance", [resolveColorEnhance()]);
 _defineProperty(TrendBarRoot, "style", style);
 _defineProperty(TrendBarRoot, "defaultProps", {
@@ -115,7 +112,7 @@ var TrendHistogram = createComponent(TrendBarRoot, {}, {
     };
   }]
 });
-TrendBar.displayName = "MiniChart.TrendHistogram";
+TrendHistogram.displayName = "MiniChart.TrendHistogram";
 export {
   TrendBar,
   TrendHistogram

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

@@ -2,43 +2,41 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled } from "@semcore/utils/lib/core/index";
-import createComponent, { assignProps, sstyled as sstyled$1 } from "@semcore/core";
+import { sstyled, assignProps, createComponent } 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 uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import React from "react";
-import resolveColorEnhance from "@semcore/utils/lib/enhances/resolveColorEnhance";
-import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
 import { Trend } from "./Trend.mjs";
-import { Box } from "@semcore/flex-box";
-import { extractAriaProps } from "@semcore/utils/lib/ariaProps";
 /*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_mylya{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_mylya_gg_.__loading_mylya_gg_,.___SLineGauge_mylya_gg_.__loading_mylya_gg_,.___STrendBar_mylya_gg_.__loading_mylya_gg_,.___STrendLine_mylya_gg_.__loading_mylya_gg_{animation-name:pulse_mylya;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
+    "@keyframes pulse_1yrsa{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1yrsa_gg_.__loading_1yrsa_gg_,.___SLineGauge_1yrsa_gg_.__loading_1yrsa_gg_,.___STrendBar_1yrsa_gg_.__loading_1yrsa_gg_,.___STrendLine_1yrsa_gg_.__loading_1yrsa_gg_{animation-name:pulse_1yrsa;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
     /*__inner_css_end__*/
-    "mylya_gg_"
+    "1yrsa_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_mylya_gg_",
-    "_loading": "__loading_mylya_gg_",
-    "__SDonutContainer": "___SDonutContainer_mylya_gg_",
-    "__STrendLine": "___STrendLine_mylya_gg_",
-    "__STrendBar": "___STrendBar_mylya_gg_",
-    "@pulse": "pulse_mylya"
+    "__SLineGauge": "___SLineGauge_1yrsa_gg_",
+    "_loading": "__loading_1yrsa_gg_",
+    "__SDonutContainer": "___SDonutContainer_1yrsa_gg_",
+    "__STrendLine": "___STrendLine_1yrsa_gg_",
+    "__STrendBar": "___STrendBar_1yrsa_gg_",
+    "@pulse": "pulse_1yrsa"
   })
 );
-var TrendLineRoot = /* @__PURE__ */ function(_Trend) {
-  _inherits(TrendLineRoot2, _Trend);
-  var _super = _createSuper(TrendLineRoot2);
+var TrendLineRoot = /* @__PURE__ */ (function(_Trend) {
   function TrendLineRoot2() {
     _classCallCheck(this, TrendLineRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, TrendLineRoot2, arguments);
   }
-  _createClass(TrendLineRoot2, [{
+  _inherits(TrendLineRoot2, _Trend);
+  return _createClass(TrendLineRoot2, [{
     key: "defaultData",
     get: function get() {
       return [15, 70, 20, 85, 20];
@@ -90,7 +88,7 @@ var TrendLineRoot = /* @__PURE__ */ function(_Trend) {
         points.push("".concat(step * i, ",").concat(this.defaultHeight - this.data[i]));
       }
       var _extractAriaProps = extractAriaProps(this.asProps), __excludeProps = _extractAriaProps.__excludeProps, extractedAriaProps = _extractAriaProps.extractedAriaProps;
-      return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(STrendLine, _ref2.cn("STrendLine", _objectSpread({}, assignProps({
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(STrendLine, _ref2.cn("STrendLine", _objectSpread({}, assignProps({
         "ref": this.containerRef,
         "__excludeProps": ["data"].concat(_toConsumableArray(__excludeProps))
       }, _ref))), /* @__PURE__ */ React.createElement("svg", _ref2.cn("svg", _objectSpread({
@@ -132,8 +130,7 @@ var TrendLineRoot = /* @__PURE__ */ function(_Trend) {
       }))))));
     }
   }]);
-  return TrendLineRoot2;
-}(Trend);
+})(Trend);
 _defineProperty(TrendLineRoot, "enhance", [resolveColorEnhance(), uniqueIDEnhancement()]);
 _defineProperty(TrendLineRoot, "style", style);
 _defineProperty(TrendLineRoot, "defaultProps", {