@semcore/mini-chart 16.0.0-prerelease.2 → 16.0.0-prerelease.21

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

@@ -1,39 +1,44 @@
-import w from "@babel/runtime/helpers/esm/toConsumableArray";
-import f from "@babel/runtime/helpers/esm/objectSpread2";
-import L from "@babel/runtime/helpers/esm/classCallCheck";
-import A from "@babel/runtime/helpers/esm/createClass";
-import D from "@babel/runtime/helpers/esm/inherits";
-import E from "@babel/runtime/helpers/esm/createSuper";
-import l from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as v, createComponent as y, assignProps as j } from "@semcore/core";
-import _ from "react";
-import R from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
-import { Trend as G } from "./Trend.mjs";
-import { Box as N } from "@semcore/flex-box";
-import { extractAriaProps as M } from "@semcore/core/lib/utils/ariaProps";
-var W = (
+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 _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled, createComponent, assignProps } from "@semcore/core";
+import React from "react";
+import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
+import { Trend } from "./Trend.mjs";
+import { Box } from "@semcore/flex-box";
+import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
+/*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
+var style = (
   /*__reshadow_css_start__*/
-  (v.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
     "@keyframes pulse_7jer1{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_7jer1_gg_.__loading_7jer1_gg_,.___SLineGauge_7jer1_gg_.__loading_7jer1_gg_,.___STrendBar_7jer1_gg_.__loading_7jer1_gg_,.___STrendLine_7jer1_gg_.__loading_7jer1_gg_{animation-name:pulse_7jer1;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
+    /*__inner_css_end__*/
     "7jer1_gg_"
-  ), {
-    __SLineGauge: "___SLineGauge_7jer1_gg_",
-    _loading: "__loading_7jer1_gg_",
-    __SDonutContainer: "___SDonutContainer_7jer1_gg_",
-    __STrendLine: "___STrendLine_7jer1_gg_",
-    __STrendBar: "___STrendBar_7jer1_gg_",
+  ), /*__reshadow_css_end__*/
+  {
+    "__SLineGauge": "___SLineGauge_7jer1_gg_",
+    "_loading": "__loading_7jer1_gg_",
+    "__SDonutContainer": "___SDonutContainer_7jer1_gg_",
+    "__STrendLine": "___STrendLine_7jer1_gg_",
+    "__STrendBar": "___STrendBar_7jer1_gg_",
     "@pulse": "pulse_7jer1"
   })
-), o = /* @__PURE__ */ function(u) {
-  D(e, u);
-  var s = E(e);
-  function e() {
-    return L(this, e), s.apply(this, arguments);
+);
+var TrendBarRoot = /* @__PURE__ */ function(_Trend) {
+  _inherits(TrendBarRoot2, _Trend);
+  var _super = _createSuper(TrendBarRoot2);
+  function TrendBarRoot2() {
+    _classCallCheck(this, TrendBarRoot2);
+    return _super.apply(this, arguments);
   }
-  return A(e, [{
+  _createClass(TrendBarRoot2, [{
     key: "defaultData",
-    get: function() {
+    get: function get() {
       return [{
         value: 20
       }, {
@@ -46,60 +51,71 @@ var W = (
     }
   }, {
     key: "data",
-    get: function() {
-      var n = this.asProps, r = n.data, t = n.loading;
-      return t ? this.defaultData : r;
+    get: function get() {
+      var _this$asProps = this.asProps, data = _this$asProps.data, loading = _this$asProps.loading;
+      if (loading) {
+        return this.defaultData;
+      }
+      return data;
     }
   }, {
     key: "render",
-    value: function() {
-      var n = this.asProps, r, t = this, S = N, a = this.asProps, T = a.styles, p = a.resolveColor, C = a.isHistogram, B = a.animate, x = a.loading, g = this.defaultWidth / this.data.length, c = M(this.asProps), H = c.__excludeProps, k = c.extractedAriaProps;
-      return r = v(T), /* @__PURE__ */ _.createElement(S, r.cn("STrendBar", f({}, j({
-        ref: this.containerRef,
-        __excludeProps: ["data"].concat(w(H))
-      }, n))), /* @__PURE__ */ _.createElement("svg", r.cn("svg", f({
-        width: "100%",
-        height: "100%",
-        viewBox: "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight),
-        role: "img"
-      }, k)), this.data.map(function(i, m) {
-        var h = p("chart-palette-order-other-data");
-        return i.color && (h = p(i.color)), /* @__PURE__ */ _.createElement("rect", {
-          key: m,
-          x: g * m,
-          y: t.defaultHeight - i.value,
-          width: C ? g : g * 0.8,
-          height: i.value,
-          fill: h
-        }, B && !x && /* @__PURE__ */ _.createElement("animate", {
+    value: function render() {
+      var _ref = this.asProps, _ref2, _this = this;
+      var STrendBar = Box;
+      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(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({
+        "width": "100%",
+        "height": "100%",
+        "viewBox": "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight),
+        "role": "img"
+      }, extractedAriaProps)), this.data.map(function(barItem, index) {
+        var color = resolveColor("chart-palette-order-other-data");
+        if (barItem.color) {
+          color = resolveColor(barItem.color);
+        }
+        return /* @__PURE__ */ React.createElement("rect", {
+          key: index,
+          x: step * index,
+          y: _this.defaultHeight - barItem.value,
+          width: isHistogram ? step : step * 0.8,
+          height: barItem.value,
+          fill: color
+        }, animate && !loading && /* @__PURE__ */ React.createElement("animate", {
           attributeName: "y",
-          values: "".concat(t.defaultHeight, ";").concat(t.defaultHeight - i.value),
+          values: "".concat(_this.defaultHeight, ";").concat(_this.defaultHeight - barItem.value),
           dur: "500ms"
         }));
       })));
     }
-  }]), e;
-}(G);
-l(o, "enhance", [R()]);
-l(o, "style", W);
-l(o, "defaultProps", {
-  animate: !0
+  }]);
+  return TrendBarRoot2;
+}(Trend);
+_defineProperty(TrendBarRoot, "enhance", [resolveColorEnhance()]);
+_defineProperty(TrendBarRoot, "style", style);
+_defineProperty(TrendBarRoot, "defaultProps", {
+  animate: true
 });
-var P = y(o);
-P.displayName = "MiniChart.TrendBar";
-var b = y(o, {}, {
+var TrendBar = createComponent(TrendBarRoot);
+TrendBar.displayName = "MiniChart.TrendBar";
+var TrendHistogram = createComponent(TrendBarRoot, {}, {
   enhancements: [function() {
     return {
-      wrapperProps: function(s) {
-        return j(s, {
-          isHistogram: !0
+      wrapperProps: function wrapperProps(props) {
+        return assignProps(props, {
+          isHistogram: true
         });
       }
     };
   }]
 });
-P.displayName = "MiniChart.TrendHistogram";
+TrendBar.displayName = "MiniChart.TrendHistogram";
 export {
-  P as TrendBar,
-  b as TrendHistogram
+  TrendBar,
+  TrendHistogram
 };

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

@@ -1,139 +1,158 @@
-import A from "@babel/runtime/helpers/esm/toConsumableArray";
-import y from "@babel/runtime/helpers/esm/objectSpread2";
-import E from "@babel/runtime/helpers/esm/classCallCheck";
-import R from "@babel/runtime/helpers/esm/createClass";
-import H from "@babel/runtime/helpers/esm/inherits";
-import W from "@babel/runtime/helpers/esm/createSuper";
-import g from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as j, createComponent as C, assignProps as S } from "@semcore/core";
-import i from "react";
-import $ from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
-import b from "@semcore/core/lib/utils/uniqueID";
-import { Trend as D } from "./Trend.mjs";
-import { Box as B } from "@semcore/flex-box";
-import { extractAriaProps as G } from "@semcore/core/lib/utils/ariaProps";
-var N = (
+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 _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled, createComponent, assignProps } from "@semcore/core";
+import React from "react";
+import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
+import { Trend } from "./Trend.mjs";
+import { Box } from "@semcore/flex-box";
+import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
+/*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
+var style = (
   /*__reshadow_css_start__*/
-  (j.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
     "@keyframes pulse_7jer1{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_7jer1_gg_.__loading_7jer1_gg_,.___SLineGauge_7jer1_gg_.__loading_7jer1_gg_,.___STrendBar_7jer1_gg_.__loading_7jer1_gg_,.___STrendLine_7jer1_gg_.__loading_7jer1_gg_{animation-name:pulse_7jer1;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
+    /*__inner_css_end__*/
     "7jer1_gg_"
-  ), {
-    __SLineGauge: "___SLineGauge_7jer1_gg_",
-    _loading: "__loading_7jer1_gg_",
-    __SDonutContainer: "___SDonutContainer_7jer1_gg_",
-    __STrendLine: "___STrendLine_7jer1_gg_",
-    __STrendBar: "___STrendBar_7jer1_gg_",
+  ), /*__reshadow_css_end__*/
+  {
+    "__SLineGauge": "___SLineGauge_7jer1_gg_",
+    "_loading": "__loading_7jer1_gg_",
+    "__SDonutContainer": "___SDonutContainer_7jer1_gg_",
+    "__STrendLine": "___STrendLine_7jer1_gg_",
+    "__STrendBar": "___STrendBar_7jer1_gg_",
     "@pulse": "pulse_7jer1"
   })
-), l = /* @__PURE__ */ function(u) {
-  H(s, u);
-  var d = W(s);
-  function s() {
-    return E(this, s), d.apply(this, arguments);
+);
+var TrendLineRoot = /* @__PURE__ */ function(_Trend) {
+  _inherits(TrendLineRoot2, _Trend);
+  var _super = _createSuper(TrendLineRoot2);
+  function TrendLineRoot2() {
+    _classCallCheck(this, TrendLineRoot2);
+    return _super.apply(this, arguments);
   }
-  return R(s, [{
+  _createClass(TrendLineRoot2, [{
     key: "defaultData",
-    get: function() {
+    get: function get() {
       return [15, 70, 20, 85, 20];
     }
   }, {
     key: "lastPointRadius",
-    get: function() {
-      var e;
-      return (e = this.asProps.lastPointRadius) !== null && e !== void 0 ? e : 6;
+    get: function get() {
+      var _this$asProps$lastPoi;
+      return (_this$asProps$lastPoi = this.asProps.lastPointRadius) !== null && _this$asProps$lastPoi !== void 0 ? _this$asProps$lastPoi : 6;
     }
   }, {
     key: "data",
-    get: function() {
-      var e = this.asProps, t = e.data, o = e.loading;
-      return o ? this.defaultData : t;
+    get: function get() {
+      var _this$asProps = this.asProps, data = _this$asProps.data, loading = _this$asProps.loading;
+      if (loading) {
+        return this.defaultData;
+      }
+      return data;
     }
   }, {
     key: "svgWidth",
-    get: function() {
+    get: function get() {
       return this.asProps.lastPointColor ? this.defaultWidth + this.lastPointRadius : this.defaultWidth;
     }
   }, {
     key: "svgHeight",
-    get: function() {
+    get: function get() {
       return this.asProps.lastPointColor ? this.defaultHeight + this.lastPointRadius : this.defaultHeight;
     }
   }, {
     key: "color",
-    get: function() {
-      var e = this.asProps, t = e.resolveColor, o = e.color, r = o === void 0 ? "chart-palette-order-1" : o, n = e.loading;
-      return t(n ? "skeleton-bg" : r);
+    get: function get() {
+      var _this$asProps2 = this.asProps, resolveColor = _this$asProps2.resolveColor, _this$asProps2$color = _this$asProps2.color, color = _this$asProps2$color === void 0 ? "chart-palette-order-1" : _this$asProps2$color, loading = _this$asProps2.loading;
+      if (loading) {
+        return resolveColor("skeleton-bg");
+      }
+      return resolveColor(color);
     }
   }, {
     key: "render",
-    value: function() {
-      for (var e = this.asProps, t, o = B, r = this.asProps, n = r.uid, k = r.withArea, T = r.animate, p = r.lastPointColor, m = r.resolveColor, f = r.loading, x = r.styles, h = [], _ = this.data.length, P = this.defaultWidth / (_ - 1), c = 0; c < _; c++)
-        h.push("".concat(P * c, ",").concat(this.defaultHeight - this.data[c]));
-      var v = G(this.asProps), L = v.__excludeProps, w = v.extractedAriaProps;
-      return t = j(x), /* @__PURE__ */ i.createElement(o, t.cn("STrendLine", y({}, S({
-        ref: this.containerRef,
-        __excludeProps: ["data"].concat(A(L))
-      }, e))), /* @__PURE__ */ i.createElement("svg", t.cn("svg", y({
-        width: "100%",
-        height: "100%",
-        viewBox: "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight),
-        role: "img"
-      }, w)), /* @__PURE__ */ i.createElement("polyline", t.cn("polyline", {
-        points: h.join(" "),
-        stroke: this.color,
-        strokeWidth: "4",
-        fill: "none",
-        clipPath: "url(#".concat(n, ")")
-      })), k && /* @__PURE__ */ i.createElement("polyline", t.cn("polyline", {
-        points: "0,".concat(this.defaultHeight, " ").concat(h.join(" "), " ").concat(this.defaultWidth, ",").concat(this.defaultHeight),
-        fill: this.color,
-        fillOpacity: 0.2,
-        clipPath: "url(#".concat(n, ")")
-      })), p && !f && /* @__PURE__ */ i.createElement("circle", t.cn("circle", {
-        cx: P * (_ - 1),
-        cy: this.defaultHeight - this.data[_ - 1],
-        r: this.lastPointRadius,
-        fill: m(p),
-        stroke: m("chart-grid-border"),
-        strokeWidth: 4,
-        clipPath: "url(#".concat(n, ")")
-      })), T && !f && /* @__PURE__ */ i.createElement("clipPath", t.cn("clipPath", {
-        id: n
-      }), /* @__PURE__ */ i.createElement("rect", t.cn("rect", {
-        x: "0",
-        y: "0",
-        width: "100%",
-        height: "100%",
-        fill: "black"
-      }), /* @__PURE__ */ i.createElement("animate", t.cn("animate", {
-        dur: "500ms",
-        attributeName: "width",
-        values: "0;100%"
+    value: function render() {
+      var _ref = this.asProps, _ref2;
+      var STrendLine = Box;
+      var _this$asProps3 = this.asProps, uid = _this$asProps3.uid, withArea = _this$asProps3.withArea, animate = _this$asProps3.animate, lastPointColor = _this$asProps3.lastPointColor, resolveColor = _this$asProps3.resolveColor, loading = _this$asProps3.loading, styles = _this$asProps3.styles;
+      var points = [];
+      var length = this.data.length;
+      var step = this.defaultWidth / (length - 1);
+      for (var i = 0; i < length; i++) {
+        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(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({
+        "width": "100%",
+        "height": "100%",
+        "viewBox": "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight),
+        "role": "img"
+      }, extractedAriaProps)), /* @__PURE__ */ React.createElement("polyline", _ref2.cn("polyline", {
+        "points": points.join(" "),
+        "stroke": this.color,
+        "strokeWidth": "4",
+        "fill": "none",
+        "clipPath": "url(#".concat(uid, ")")
+      })), withArea && /* @__PURE__ */ React.createElement("polyline", _ref2.cn("polyline", {
+        "points": "0,".concat(this.defaultHeight, " ").concat(points.join(" "), " ").concat(this.defaultWidth, ",").concat(this.defaultHeight),
+        "fill": this.color,
+        "fillOpacity": 0.2,
+        "clipPath": "url(#".concat(uid, ")")
+      })), lastPointColor && !loading && /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
+        "cx": step * (length - 1),
+        "cy": this.defaultHeight - this.data[length - 1],
+        "r": this.lastPointRadius,
+        "fill": resolveColor(lastPointColor),
+        "stroke": resolveColor("chart-grid-border"),
+        "strokeWidth": 4,
+        "clipPath": "url(#".concat(uid, ")")
+      })), animate && !loading && /* @__PURE__ */ React.createElement("clipPath", _ref2.cn("clipPath", {
+        "id": uid
+      }), /* @__PURE__ */ React.createElement("rect", _ref2.cn("rect", {
+        "x": "0",
+        "y": "0",
+        "width": "100%",
+        "height": "100%",
+        "fill": "black"
+      }), /* @__PURE__ */ React.createElement("animate", _ref2.cn("animate", {
+        "dur": "500ms",
+        "attributeName": "width",
+        "values": "0;100%"
       }))))));
     }
-  }]), s;
-}(D);
-g(l, "enhance", [$(), b()]);
-g(l, "style", N);
-g(l, "defaultProps", {
-  animate: !0
+  }]);
+  return TrendLineRoot2;
+}(Trend);
+_defineProperty(TrendLineRoot, "enhance", [resolveColorEnhance(), uniqueIDEnhancement()]);
+_defineProperty(TrendLineRoot, "style", style);
+_defineProperty(TrendLineRoot, "defaultProps", {
+  animate: true
 });
-var M = C(l);
-M.displayName = "MiniChart.TrendLine";
-var q = C(l, {}, {
+var TrendLine = createComponent(TrendLineRoot);
+TrendLine.displayName = "MiniChart.TrendLine";
+var TrendArea = createComponent(TrendLineRoot, {}, {
   enhancements: [function() {
     return {
-      wrapperProps: function(d) {
-        return S(d, {
-          withArea: !0
+      wrapperProps: function wrapperProps(props) {
+        return assignProps(props, {
+          withArea: true
         });
       }
     };
   }]
 });
-q.displayName = "MiniChart.TrendArea";
+TrendArea.displayName = "MiniChart.TrendArea";
 export {
-  q as TrendArea,
-  M as TrendLine
+  TrendArea,
+  TrendLine
 };

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

@@ -1,66 +1,78 @@
-import f from "@babel/runtime/helpers/esm/classCallCheck";
-import u from "@babel/runtime/helpers/esm/createClass";
-import a from "@babel/runtime/helpers/esm/assertThisInitialized";
-import c from "@babel/runtime/helpers/esm/inherits";
-import d from "@babel/runtime/helpers/esm/createSuper";
-import s from "@babel/runtime/helpers/esm/defineProperty";
-import m from "react";
-import { Component as p } from "@semcore/core";
-var R = /* @__PURE__ */ function(h) {
-  c(n, h);
-  var o = d(n);
-  function n() {
-    for (var e, t = arguments.length, r = new Array(t), i = 0; i < t; i++)
-      r[i] = arguments[i];
-    return f(this, n), e = o.call.apply(o, [this].concat(r)), s(a(e), "state", {
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from "react";
+import { Component } from "@semcore/core";
+var Trend = /* @__PURE__ */ function(_Component) {
+  _inherits(Trend2, _Component);
+  var _super = _createSuper(Trend2);
+  function Trend2() {
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _classCallCheck(this, Trend2);
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
       width: 200,
       height: 100
-    }), s(a(e), "containerRef", /* @__PURE__ */ m.createRef()), e;
+    });
+    _defineProperty(_assertThisInitialized(_this), "containerRef", /* @__PURE__ */ React.createRef());
+    return _this;
   }
-  return u(n, [{
+  _createClass(Trend2, [{
     key: "componentDidMount",
-    value: function() {
+    value: function componentDidMount() {
       this.setSizes();
     }
   }, {
     key: "componentDidUpdate",
-    value: function(t) {
-      (t.w !== this.props.w || t.h !== this.props.h || t.data !== this.props.data) && this.setSizes();
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.w !== this.props.w || prevProps.h !== this.props.h || prevProps.data !== this.props.data) {
+        this.setSizes();
+      }
     }
   }, {
     key: "defaultWidth",
-    get: function() {
-      var t = this.state, r = t.width, i = t.height;
-      return r / i * this.defaultHeight;
+    get: function get() {
+      var _this$state = this.state, width = _this$state.width, height = _this$state.height;
+      return width / height * this.defaultHeight;
     }
   }, {
     key: "defaultHeight",
-    get: function() {
+    get: function get() {
       return 100;
     }
   }, {
     key: "svgWidth",
-    get: function() {
+    get: function get() {
       return this.defaultWidth;
     }
   }, {
     key: "svgHeight",
-    get: function() {
+    get: function get() {
       return this.defaultHeight;
     }
   }, {
     key: "setSizes",
-    value: function() {
+    value: function setSizes() {
       if (this.containerRef.current) {
-        var t = this.containerRef.current.getBoundingClientRect(), r = t.width, i = t.height;
-        r > 0 && i > 0 && this.setState({
-          width: r,
-          height: i
-        });
+        var boundingClientRect = this.containerRef.current.getBoundingClientRect();
+        var width = boundingClientRect.width, height = boundingClientRect.height;
+        if (width > 0 && height > 0) {
+          this.setState({
+            width,
+            height
+          });
+        }
       }
     }
-  }]), n;
-}(p);
+  }]);
+  return Trend2;
+}(Component);
 export {
-  R as Trend
+  Trend
 };

package/lib/esm/index.mjs

@@ -1,16 +1,16 @@
-import { ScoreSemiDonut as r, ScoreDonut as o } from "./component/score/Donut.mjs";
-import { ScoreLine as e } from "./component/score/Line.mjs";
-import { TrendLine as m, TrendArea as i } from "./component/trend/Line.mjs";
-import { TrendBar as t, TrendHistogram as n } from "./component/trend/Bar.mjs";
-var S = {
-  TrendLine: m,
-  TrendArea: i,
-  TrendBar: t,
-  TrendHistogram: n,
-  ScoreSemiDonut: r,
-  ScoreDonut: o,
-  ScoreLine: e
+import { ScoreSemiDonut, ScoreDonut } from "./component/score/Donut.mjs";
+import { ScoreLine } from "./component/score/Line.mjs";
+import { TrendLine, TrendArea } from "./component/trend/Line.mjs";
+import { TrendBar, TrendHistogram } from "./component/trend/Bar.mjs";
+var miniCharts = {
+  TrendLine,
+  TrendArea,
+  TrendBar,
+  TrendHistogram,
+  ScoreSemiDonut,
+  ScoreDonut,
+  ScoreLine
 };
 export {
-  S as default
+  miniCharts as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/mini-chart",
   "description": "Semrush MiniChart Component",
-  "version": "16.0.0-prerelease.2",
+  "version": "16.0.0-prerelease.21",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,8 +14,8 @@
     "types": "./lib/types/index.d.ts"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0-prerelease.2",
-    "@semcore/flex-box": "^16.0.0-prerelease.2"
+    "@semcore/base-components": "^16.0.0-prerelease.21",
+    "@semcore/flex-box": "^16.0.0-prerelease.21"
   },
   "repository": {
     "type": "git",