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

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

@@ -1,110 +1,107 @@
-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 _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent, assignProps, sstyled } 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 { Box } from "@semcore/flex-box";
 import React from "react";
 import { Trend } from "./Trend.mjs";
 /*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_1wd8q{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1wd8q_gg_.__loading_1wd8q_gg_,.___SLineGauge_1wd8q_gg_.__loading_1wd8q_gg_,.___STrendBar_1wd8q_gg_.__loading_1wd8q_gg_,.___STrendLine_1wd8q_gg_.__loading_1wd8q_gg_{animation-name:pulse_1wd8q;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
+    "@keyframes pulse_1ydx6{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1ydx6_gg_.__loading_1ydx6_gg_,.___SLineGauge_1ydx6_gg_.__loading_1ydx6_gg_,.___STrendBar_1ydx6_gg_.__loading_1ydx6_gg_,.___STrendLine_1ydx6_gg_.__loading_1ydx6_gg_{animation-name:pulse_1ydx6;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
     /*__inner_css_end__*/
-    "1wd8q_gg_"
+    "1ydx6_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_1wd8q_gg_",
-    "_loading": "__loading_1wd8q_gg_",
-    "__SDonutContainer": "___SDonutContainer_1wd8q_gg_",
-    "__STrendLine": "___STrendLine_1wd8q_gg_",
-    "__STrendBar": "___STrendBar_1wd8q_gg_",
-    "@pulse": "pulse_1wd8q"
+    "__SLineGauge": "___SLineGauge_1ydx6_gg_",
+    "_loading": "__loading_1ydx6_gg_",
+    "__SDonutContainer": "___SDonutContainer_1ydx6_gg_",
+    "__STrendLine": "___STrendLine_1ydx6_gg_",
+    "__STrendBar": "___STrendBar_1ydx6_gg_",
+    "@pulse": "pulse_1ydx6"
   })
 );
-var TrendBarRoot = /* @__PURE__ */ (function(_Trend) {
-  function TrendBarRoot2() {
-    _classCallCheck(this, TrendBarRoot2);
-    return _callSuper(this, TrendBarRoot2, arguments);
+class TrendBarRoot extends Trend {
+  get defaultData() {
+    return [{
+      value: 20
+    }, {
+      value: 80
+    }, {
+      value: 45
+    }, {
+      value: 10
+    }];
   }
-  _inherits(TrendBarRoot2, _Trend);
-  return _createClass(TrendBarRoot2, [{
-    key: "defaultData",
-    get: function get() {
-      return [{
-        value: 20
-      }, {
-        value: 80
-      }, {
-        value: 45
-      }, {
-        value: 10
-      }];
+  get data() {
+    const {
+      data,
+      loading
+    } = this.asProps;
+    if (loading) {
+      return this.defaultData;
     }
-  }, {
-    key: "data",
-    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 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({
+    return data;
+  }
+  render() {
+    var _ref = this.asProps, _ref2;
+    const STrendBar = Box;
+    const {
+      styles,
+      resolveColor,
+      isHistogram,
+      animate,
+      loading
+    } = this.asProps;
+    const step = this.defaultWidth / this.data.length;
+    const {
+      __excludeProps,
+      extractedAriaProps
+    } = extractAriaProps(this.asProps);
+    return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(STrendBar, _ref2.cn("STrendBar", {
+      ...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(_this.defaultHeight, ";").concat(_this.defaultHeight - barItem.value),
-          dur: "500ms"
-        }));
-      })));
-    }
-  }]);
-})(Trend);
+        "__excludeProps": ["data", ...__excludeProps]
+      }, _ref)
+    }), /* @__PURE__ */ React.createElement("svg", _ref2.cn("svg", {
+      "width": "100%",
+      "height": "100%",
+      "viewBox": `0 0 ${this.svgWidth} ${this.svgHeight}`,
+      "role": "img",
+      ...extractedAriaProps
+    }), this.data.map((barItem, index) => {
+      let 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: `${this.defaultHeight};${this.defaultHeight - barItem.value}`,
+        dur: "500ms"
+      }));
+    })));
+  }
+}
 _defineProperty(TrendBarRoot, "enhance", [resolveColorEnhance()]);
 _defineProperty(TrendBarRoot, "style", style);
 _defineProperty(TrendBarRoot, "defaultProps", {
   animate: true
 });
-var TrendBar = createComponent(TrendBarRoot);
+const TrendBar = createComponent(TrendBarRoot);
 TrendBar.displayName = "MiniChart.TrendBar";
-var TrendHistogram = createComponent(TrendBarRoot, {}, {
-  enhancements: [function() {
+const TrendHistogram = createComponent(TrendBarRoot, {}, {
+  enhancements: [() => {
     return {
-      wrapperProps: function wrapperProps(props) {
+      wrapperProps: (props) => {
         return assignProps(props, {
           isHistogram: true
         });

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

@@ -1,147 +1,141 @@
-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 _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent, assignProps, sstyled } 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 { Box } from "@semcore/flex-box";
 import React from "react";
 import { Trend } from "./Trend.mjs";
 /*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_1wd8q{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1wd8q_gg_.__loading_1wd8q_gg_,.___SLineGauge_1wd8q_gg_.__loading_1wd8q_gg_,.___STrendBar_1wd8q_gg_.__loading_1wd8q_gg_,.___STrendLine_1wd8q_gg_.__loading_1wd8q_gg_{animation-name:pulse_1wd8q;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
+    "@keyframes pulse_1ydx6{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1ydx6_gg_.__loading_1ydx6_gg_,.___SLineGauge_1ydx6_gg_.__loading_1ydx6_gg_,.___STrendBar_1ydx6_gg_.__loading_1ydx6_gg_,.___STrendLine_1ydx6_gg_.__loading_1ydx6_gg_{animation-name:pulse_1ydx6;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
     /*__inner_css_end__*/
-    "1wd8q_gg_"
+    "1ydx6_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_1wd8q_gg_",
-    "_loading": "__loading_1wd8q_gg_",
-    "__SDonutContainer": "___SDonutContainer_1wd8q_gg_",
-    "__STrendLine": "___STrendLine_1wd8q_gg_",
-    "__STrendBar": "___STrendBar_1wd8q_gg_",
-    "@pulse": "pulse_1wd8q"
+    "__SLineGauge": "___SLineGauge_1ydx6_gg_",
+    "_loading": "__loading_1ydx6_gg_",
+    "__SDonutContainer": "___SDonutContainer_1ydx6_gg_",
+    "__STrendLine": "___STrendLine_1ydx6_gg_",
+    "__STrendBar": "___STrendBar_1ydx6_gg_",
+    "@pulse": "pulse_1ydx6"
   })
 );
-var TrendLineRoot = /* @__PURE__ */ (function(_Trend) {
-  function TrendLineRoot2() {
-    _classCallCheck(this, TrendLineRoot2);
-    return _callSuper(this, TrendLineRoot2, arguments);
+class TrendLineRoot extends Trend {
+  get defaultData() {
+    return [15, 70, 20, 85, 20];
   }
-  _inherits(TrendLineRoot2, _Trend);
-  return _createClass(TrendLineRoot2, [{
-    key: "defaultData",
-    get: function get() {
-      return [15, 70, 20, 85, 20];
-    }
-  }, {
-    key: "lastPointRadius",
-    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 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() {
-      return this.asProps.lastPointColor ? this.defaultWidth + this.lastPointRadius : this.defaultWidth;
+  get lastPointRadius() {
+    return this.asProps.lastPointRadius ?? 6;
+  }
+  get data() {
+    const {
+      data,
+      loading
+    } = this.asProps;
+    if (loading) {
+      return this.defaultData;
     }
-  }, {
-    key: "svgHeight",
-    get: function get() {
-      return this.asProps.lastPointColor ? this.defaultHeight + this.lastPointRadius : this.defaultHeight;
+    return data;
+  }
+  get svgWidth() {
+    return this.asProps.lastPointColor ? this.defaultWidth + this.lastPointRadius : this.defaultWidth;
+  }
+  get svgHeight() {
+    return this.asProps.lastPointColor ? this.defaultHeight + this.lastPointRadius : this.defaultHeight;
+  }
+  get color() {
+    const {
+      resolveColor,
+      color = "chart-palette-order-1",
+      loading
+    } = this.asProps;
+    if (loading) {
+      return resolveColor("skeleton-bg");
     }
-  }, {
-    key: "color",
-    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);
+    return resolveColor(color);
+  }
+  render() {
+    var _ref = this.asProps, _ref2;
+    const STrendLine = Box;
+    const {
+      uid,
+      withArea,
+      animate,
+      lastPointColor,
+      resolveColor,
+      loading,
+      styles
+    } = this.asProps;
+    const points = [];
+    const length = this.data.length;
+    const step = this.defaultWidth / (length - 1);
+    for (let i = 0; i < length; i++) {
+      points.push(`${step * i},${this.defaultHeight - this.data[i]}`);
     }
-  }, {
-    key: "render",
-    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({
+    const {
+      __excludeProps,
+      extractedAriaProps
+    } = extractAriaProps(this.asProps);
+    return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(STrendLine, _ref2.cn("STrendLine", {
+      ...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%"
-      }))))));
-    }
-  }]);
-})(Trend);
+        "__excludeProps": ["data", ...__excludeProps]
+      }, _ref)
+    }), /* @__PURE__ */ React.createElement("svg", _ref2.cn("svg", {
+      "width": "100%",
+      "height": "100%",
+      "viewBox": `0 0 ${this.svgWidth} ${this.svgHeight}`,
+      "role": "img",
+      ...extractedAriaProps
+    }), /* @__PURE__ */ React.createElement("polyline", _ref2.cn("polyline", {
+      "points": points.join(" "),
+      "stroke": this.color,
+      "strokeWidth": "4",
+      "fill": "none",
+      "clipPath": `url(#${uid})`
+    })), withArea && /* @__PURE__ */ React.createElement("polyline", _ref2.cn("polyline", {
+      "points": `0,${this.defaultHeight} ${points.join(" ")} ${this.defaultWidth},${this.defaultHeight}`,
+      "fill": this.color,
+      "fillOpacity": 0.2,
+      "clipPath": `url(#${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(#${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%"
+    }))))));
+  }
+}
 _defineProperty(TrendLineRoot, "enhance", [resolveColorEnhance(), uniqueIDEnhancement()]);
 _defineProperty(TrendLineRoot, "style", style);
 _defineProperty(TrendLineRoot, "defaultProps", {
   animate: true
 });
-var TrendLine = createComponent(TrendLineRoot);
+const TrendLine = createComponent(TrendLineRoot);
 TrendLine.displayName = "MiniChart.TrendLine";
-var TrendArea = createComponent(TrendLineRoot, {}, {
-  enhancements: [function() {
+const TrendArea = createComponent(TrendLineRoot, {}, {
+  enhancements: [() => {
     return {
-      wrapperProps: function wrapperProps(props) {
+      wrapperProps: (props) => {
         return assignProps(props, {
           withArea: true
         });

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

@@ -1,75 +1,55 @@
-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 { Component } from "@semcore/core";
 import React from "react";
-var Trend = /* @__PURE__ */ (function(_Component) {
-  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 = _callSuper(this, Trend2, [].concat(args));
-    _defineProperty(_this, "state", {
+class Trend extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
       width: 200,
       height: 100
     });
-    _defineProperty(_this, "containerRef", /* @__PURE__ */ React.createRef());
-    return _this;
+    _defineProperty(this, "containerRef", /* @__PURE__ */ React.createRef());
+  }
+  componentDidMount() {
+    this.setSizes();
   }
-  _inherits(Trend2, _Component);
-  return _createClass(Trend2, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
+  componentDidUpdate(prevProps) {
+    if (prevProps.w !== this.props.w || prevProps.h !== this.props.h || prevProps.data !== this.props.data) {
       this.setSizes();
     }
-  }, {
-    key: "componentDidUpdate",
-    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 get() {
-      var _this$state = this.state, width = _this$state.width, height = _this$state.height;
-      return width / height * this.defaultHeight;
-    }
-  }, {
-    key: "defaultHeight",
-    get: function get() {
-      return 100;
-    }
-  }, {
-    key: "svgWidth",
-    get: function get() {
-      return this.defaultWidth;
-    }
-  }, {
-    key: "svgHeight",
-    get: function get() {
-      return this.defaultHeight;
-    }
-  }, {
-    key: "setSizes",
-    value: function setSizes() {
-      if (this.containerRef.current) {
-        var boundingClientRect = this.containerRef.current.getBoundingClientRect();
-        var width = boundingClientRect.width, height = boundingClientRect.height;
-        if (width > 0 && height > 0) {
-          this.setState({
-            width,
-            height
-          });
-        }
+  }
+  get defaultWidth() {
+    const {
+      width,
+      height
+    } = this.state;
+    return width / height * this.defaultHeight;
+  }
+  get defaultHeight() {
+    return 100;
+  }
+  get svgWidth() {
+    return this.defaultWidth;
+  }
+  get svgHeight() {
+    return this.defaultHeight;
+  }
+  setSizes() {
+    if (this.containerRef.current) {
+      const boundingClientRect = this.containerRef.current.getBoundingClientRect();
+      const {
+        width,
+        height
+      } = boundingClientRect;
+      if (width > 0 && height > 0) {
+        this.setState({
+          width,
+          height
+        });
       }
     }
-  }]);
-})(Component);
+  }
+}
 export {
   Trend
 };

package/lib/esm/index.mjs

@@ -2,7 +2,7 @@ import { ScoreDonut, ScoreSemiDonut } from "./component/score/Donut.mjs";
 import { ScoreLine } from "./component/score/Line.mjs";
 import { TrendHistogram, TrendBar } from "./component/trend/Bar.mjs";
 import { TrendArea, TrendLine } from "./component/trend/Line.mjs";
-var miniCharts = {
+const miniCharts = {
   TrendLine,
   TrendArea,
   TrendBar,