@semcore/mini-chart 0.29.1 → 16.0.0-prerelease.10

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

@@ -1,104 +1,123 @@
-import x from "@babel/runtime/helpers/esm/objectSpread2";
-import N from "@babel/runtime/helpers/esm/classCallCheck";
-import R from "@babel/runtime/helpers/esm/createClass";
-import X from "@babel/runtime/helpers/esm/inherits";
-import j from "@babel/runtime/helpers/esm/createSuper";
-import S from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as z } from "@semcore/utils/lib/core/index";
-import F, { sstyled as d, assignProps as G, Component as M } from "@semcore/core";
-import e from "react";
-import { Box as g, Flex as q } from "@semcore/flex-box";
-import H from "@semcore/utils/lib/enhances/resolveColorEnhance";
-var J = (
+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, Component } from "@semcore/core";
+import React from "react";
+import { Box, Flex } from "@semcore/flex-box";
+import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
+var style = (
   /*__reshadow_css_start__*/
-  (z.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_1b7u0{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_1b7u0{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_1b7u0_gg_.__loading_1b7u0_gg_,.___SLineGauge_1b7u0_gg_.__loading_1b7u0_gg_,.___STrendBar_1b7u0_gg_.__loading_1b7u0_gg_,.___STrendLine_1b7u0_gg_.__loading_1b7u0_gg_{animation-name:pulse_1b7u0;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_1b7u0_gg_{height:8px;background-color:var(--base-bg-color_1b7u0, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_1b7u0_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_1b7u0_gg_.__percent_1b7u0_gg_{width:var(--percent_1b7u0)}.___SLineSegmentItem_1b7u0_gg_.__color_1b7u0_gg_,.___SLineValue_1b7u0_gg_.__color_1b7u0_gg_{background-color:var(--color_1b7u0, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_1b7u0_gg_.__segments_1b7u0_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_1b7u0_gg_,.___SLineGaugeSegment_1b7u0_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_1b7u0_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_1b7u0_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_1b7u0_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_1b7u0;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}",
-    "1b7u0_gg_"
+    "@keyframes pulse_2vm7d{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_2vm7d{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_2vm7d_gg_.__loading_2vm7d_gg_,.___SLineGauge_2vm7d_gg_.__loading_2vm7d_gg_,.___STrendBar_2vm7d_gg_.__loading_2vm7d_gg_,.___STrendLine_2vm7d_gg_.__loading_2vm7d_gg_{animation-name:pulse_2vm7d;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_2vm7d_gg_{height:8px;background-color:var(--base-bg-color_2vm7d, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_2vm7d_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_2vm7d_gg_.__percent_2vm7d_gg_{width:var(--percent_2vm7d)}.___SLineSegmentItem_2vm7d_gg_.__color_2vm7d_gg_,.___SLineValue_2vm7d_gg_.__color_2vm7d_gg_{background-color:var(--color_2vm7d, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_2vm7d_gg_.__segments_2vm7d_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_2vm7d_gg_,.___SLineGaugeSegment_2vm7d_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_2vm7d_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_2vm7d_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_2vm7d_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_2vm7d;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}",
+    "2vm7d_gg_"
   ), {
-    __SLineGauge: "___SLineGauge_1b7u0_gg_",
-    _loading: "__loading_1b7u0_gg_",
-    __SDonutContainer: "___SDonutContainer_1b7u0_gg_",
-    __STrendLine: "___STrendLine_1b7u0_gg_",
-    __STrendBar: "___STrendBar_1b7u0_gg_",
-    "@pulse": "pulse_1b7u0",
-    "--base-bg-color": "--base-bg-color_1b7u0",
-    __SLineValue: "___SLineValue_1b7u0_gg_",
-    _percent: "__percent_1b7u0_gg_",
-    "--percent": "--percent_1b7u0",
-    _color: "__color_1b7u0_gg_",
-    __SLineSegmentItem: "___SLineSegmentItem_1b7u0_gg_",
-    "--color": "--color_1b7u0",
-    _segments: "__segments_1b7u0_gg_",
-    __SLineGaugeSegment: "___SLineGaugeSegment_1b7u0_gg_",
-    __SAnimationLine: "___SAnimationLine_1b7u0_gg_",
-    "@move-line": "move-line_1b7u0"
+    "__SLineGauge": "___SLineGauge_2vm7d_gg_",
+    "_loading": "__loading_2vm7d_gg_",
+    "__SDonutContainer": "___SDonutContainer_2vm7d_gg_",
+    "__STrendLine": "___STrendLine_2vm7d_gg_",
+    "__STrendBar": "___STrendBar_2vm7d_gg_",
+    "@pulse": "pulse_2vm7d",
+    "--base-bg-color": "--base-bg-color_2vm7d",
+    "__SLineValue": "___SLineValue_2vm7d_gg_",
+    "_percent": "__percent_2vm7d_gg_",
+    "--percent": "--percent_2vm7d",
+    "_color": "__color_2vm7d_gg_",
+    "__SLineSegmentItem": "___SLineSegmentItem_2vm7d_gg_",
+    "--color": "--color_2vm7d",
+    "_segments": "__segments_2vm7d_gg_",
+    "__SLineGaugeSegment": "___SLineGaugeSegment_2vm7d_gg_",
+    "__SAnimationLine": "___SAnimationLine_2vm7d_gg_",
+    "@move-line": "move-line_2vm7d"
   })
-), l = /* @__PURE__ */ function(p) {
-  X(n, p);
-  var v = j(n);
-  function n() {
-    return N(this, n), v.apply(this, arguments);
+);
+var LineRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(LineRoot2, _Component);
+  var _super = _createSuper(LineRoot2);
+  function LineRoot2() {
+    _classCallCheck(this, LineRoot2);
+    return _super.apply(this, arguments);
   }
-  return R(n, [{
+  _createClass(LineRoot2, [{
     key: "getSegmentProps",
-    value: function(t) {
-      var _ = this.asProps, c = _.children, L = _.resolveColor, a = 0;
-      e.Children.forEach(c, function(s) {
-        /* @__PURE__ */ e.isValidElement(s) && (a = a + s.props.value);
+    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 u = a > 0 ? 100 * t.value / a : 0;
+      var width = sum > 0 ? 100 * segmentProps.value / sum : 0;
       return {
-        w: "".concat(u, "%"),
-        "use:color": L(t.color)
+        w: "".concat(width, "%"),
+        "use:color": resolveColor(segmentProps.color)
       };
     }
   }, {
     key: "render",
-    value: function() {
-      var t = this.asProps, _, c = g, L = g, a = g, u = q, s = g, r = this.asProps, f = r.value, y = r.styles, E = r.color, P = E === void 0 ? "chart-palette-order-1" : E, k = r.baseBgColor, m = r.resolveColor, B = r.loading, T = r.children, $ = r.Children, w = r.animate;
-      if (T !== void 0) {
-        var i;
-        return i = d(y), /* @__PURE__ */ e.createElement(c, i.cn("SLineGauge", x({}, G({
-          segments: !0,
-          "base-bg-color": m(k)
-        }, t))), /* @__PURE__ */ e.createElement(u, i.cn("SLineGaugeSegment", {}), /* @__PURE__ */ e.createElement($, i.cn("Children", {}))), w && /* @__PURE__ */ e.createElement(a, i.cn("SAnimationLine", {})));
+    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({
+          "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 o = this.asProps.segments, C = [];
-      if (o)
-        for (var b = 0; b < o; b++) {
-          var I, D = "calc((100% - ".concat(o - 1, "px) / ").concat(o, ")");
-          C.push((I = d(y), /* @__PURE__ */ e.createElement(s, I.cn("SLineSegmentItem", {
-            key: b,
-            color: b < f ? m(P) : void 0,
-            w: D
+      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 V = "".concat(f, "%");
-      return o && (V = "".concat(f / o * 100, "%")), _ = d(y), /* @__PURE__ */ e.createElement(c, _.cn("SLineGauge", x({}, G({
-        "base-bg-color": m(k)
-      }, t))), !B && /* @__PURE__ */ e.createElement(L, _.cn("SLineValue", {
-        w: V,
-        color: m(P)
-      })), !!C.length && /* @__PURE__ */ e.createElement(u, _.cn("SLineGaugeSegment", {}), C), w && /* @__PURE__ */ e.createElement(a, _.cn("SAnimationLine", {})));
+      }
+      var percent = "".concat(value, "%");
+      if (segments) {
+        percent = "".concat(value / segments * 100, "%");
+      }
+      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", {})));
     }
-  }]), n;
-}(M);
-S(l, "enhance", [H()]);
-S(l, "displayName", "ScoreLine");
-S(l, "style", J);
-S(l, "defaultProps", {
-  animate: !0
+  }]);
+  return LineRoot2;
+}(Component);
+_defineProperty(LineRoot, "enhance", [resolveColorEnhance()]);
+_defineProperty(LineRoot, "displayName", "ScoreLine");
+_defineProperty(LineRoot, "style", style);
+_defineProperty(LineRoot, "defaultProps", {
+  animate: true
 });
-function A(p) {
-  var v = arguments[0], n, h = p.styles, t = g;
-  return n = d(h), /* @__PURE__ */ e.createElement(t, n.cn("SLineSegmentItem", x({}, G({}, v))));
+function Segment(props) {
+  var _ref2 = arguments[0], _ref6;
+  var styles = props.styles;
+  var SLineSegmentItem = Box;
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref6.cn("SLineSegmentItem", _objectSpread({}, assignProps({}, _ref2))));
 }
-A.displayName = "Segment";
-var K = F(l, {
-  Segment: A
+Segment.displayName = "Segment";
+var ScoreLine = createComponent(LineRoot, {
+  Segment
 });
-K.displayName = "MiniChart.ScoreLine";
+ScoreLine.displayName = "MiniChart.ScoreLine";
 export {
-  K as ScoreLine
+  ScoreLine
 };

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

@@ -1,40 +1,41 @@
-import w from "@babel/runtime/helpers/esm/toConsumableArray";
-import h 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 R } from "@semcore/utils/lib/core/index";
-import v, { assignProps as y, sstyled as G } from "@semcore/core";
-import _ from "react";
-import N from "@semcore/utils/lib/enhances/resolveColorEnhance";
-import { Trend as $ } from "./Trend.mjs";
-import { Box as M } from "@semcore/flex-box";
-import { extractAriaProps as W } from "@semcore/utils/lib/ariaProps";
-var j = (
+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";
+var style = (
   /*__reshadow_css_start__*/
-  (R.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_18ffn{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_18ffn_gg_.__loading_18ffn_gg_,.___SLineGauge_18ffn_gg_.__loading_18ffn_gg_,.___STrendBar_18ffn_gg_.__loading_18ffn_gg_,.___STrendLine_18ffn_gg_.__loading_18ffn_gg_{animation-name:pulse_18ffn;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
-    "18ffn_gg_"
+    "@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}",
+    "7jer1_gg_"
   ), {
-    __SLineGauge: "___SLineGauge_18ffn_gg_",
-    _loading: "__loading_18ffn_gg_",
-    __SDonutContainer: "___SDonutContainer_18ffn_gg_",
-    __STrendLine: "___STrendLine_18ffn_gg_",
-    __STrendBar: "___STrendBar_18ffn_gg_",
-    "@pulse": "pulse_18ffn"
+    "__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(g) {
-  D(e, g);
-  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
       }, {
@@ -47,60 +48,71 @@ var j = (
     }
   }, {
     key: "data",
-    get: function() {
-      var i = this.asProps, r = i.data, t = i.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 i = this.asProps, r, t = this, S = M, a = this.asProps, T = a.styles, u = a.resolveColor, C = a.isHistogram, B = a.animate, x = a.loading, f = this.defaultWidth / this.data.length, p = W(this.asProps), H = p.__excludeProps, k = p.extractedAriaProps;
-      return r = G(T), /* @__PURE__ */ _.createElement(S, r.cn("STrendBar", h({}, y({
-        ref: this.containerRef,
-        __excludeProps: ["data"].concat(w(H))
-      }, i))), /* @__PURE__ */ _.createElement("svg", r.cn("svg", h({
-        width: "100%",
-        height: "100%",
-        viewBox: "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight),
-        role: "img"
-      }, k)), this.data.map(function(n, m) {
-        var c = u("chart-palette-order-other-data");
-        return n.color && (c = u(n.color)), /* @__PURE__ */ _.createElement("rect", {
-          key: m,
-          x: f * m,
-          y: t.defaultHeight - n.value,
-          width: C ? f : f * 0.8,
-          height: n.value,
-          fill: c
-        }, 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 - n.value),
+          values: "".concat(_this.defaultHeight, ";").concat(_this.defaultHeight - barItem.value),
           dur: "500ms"
         }));
       })));
     }
-  }]), e;
-}($);
-l(o, "enhance", [N()]);
-l(o, "style", j);
-l(o, "defaultProps", {
-  animate: !0
+  }]);
+  return TrendBarRoot2;
+}(Trend);
+_defineProperty(TrendBarRoot, "enhance", [resolveColorEnhance()]);
+_defineProperty(TrendBarRoot, "style", style);
+_defineProperty(TrendBarRoot, "defaultProps", {
+  animate: true
 });
-var P = v(o);
-P.displayName = "MiniChart.TrendBar";
-var ee = v(o, {}, {
+var TrendBar = createComponent(TrendBarRoot);
+TrendBar.displayName = "MiniChart.TrendBar";
+var TrendHistogram = createComponent(TrendBarRoot, {}, {
   enhancements: [function() {
     return {
-      wrapperProps: function(s) {
-        return y(s, {
-          isHistogram: !0
+      wrapperProps: function wrapperProps(props) {
+        return assignProps(props, {
+          isHistogram: true
         });
       }
     };
   }]
 });
-P.displayName = "MiniChart.TrendHistogram";
+TrendBar.displayName = "MiniChart.TrendHistogram";
 export {
-  P as TrendBar,
-  ee as TrendHistogram
+  TrendBar,
+  TrendHistogram
 };