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

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

@@ -1,140 +1,155 @@
-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 h from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as $ } from "@semcore/utils/lib/core/index";
-import C, { assignProps as S, sstyled as b } from "@semcore/core";
-import i from "react";
-import D from "@semcore/utils/lib/enhances/resolveColorEnhance";
-import B from "@semcore/utils/lib/uniqueID";
-import { Trend as j } from "./Trend.mjs";
-import { Box as G } from "@semcore/flex-box";
-import { extractAriaProps as N } from "@semcore/utils/lib/ariaProps";
-var M = (
+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";
+var style = (
   /*__reshadow_css_start__*/
-  ($.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"
   })
-), l = /* @__PURE__ */ function(g) {
-  H(s, g);
-  var f = W(s);
-  function s() {
-    return E(this, s), f.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, a = e.loading;
-      return a ? 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, a = e.color, r = a === void 0 ? "chart-palette-order-1" : a, o = e.loading;
-      return t(o ? "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, a = G, r = this.asProps, o = r.uid, k = r.withArea, T = r.animate, u = r.lastPointColor, p = r.resolveColor, m = r.loading, x = r.styles, d = [], _ = this.data.length, P = this.defaultWidth / (_ - 1), c = 0; c < _; c++)
-        d.push("".concat(P * c, ",").concat(this.defaultHeight - this.data[c]));
-      var v = N(this.asProps), L = v.__excludeProps, w = v.extractedAriaProps;
-      return t = b(x), /* @__PURE__ */ i.createElement(a, 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: d.join(" "),
-        stroke: this.color,
-        strokeWidth: "4",
-        fill: "none",
-        clipPath: "url(#".concat(o, ")")
-      })), k && /* @__PURE__ */ i.createElement("polyline", t.cn("polyline", {
-        points: "0,".concat(this.defaultHeight, " ").concat(d.join(" "), " ").concat(this.defaultWidth, ",").concat(this.defaultHeight),
-        fill: this.color,
-        fillOpacity: 0.2,
-        clipPath: "url(#".concat(o, ")")
-      })), u && !m && /* @__PURE__ */ i.createElement("circle", t.cn("circle", {
-        cx: P * (_ - 1),
-        cy: this.defaultHeight - this.data[_ - 1],
-        r: this.lastPointRadius,
-        fill: p(u),
-        stroke: p("chart-grid-border"),
-        strokeWidth: 4,
-        clipPath: "url(#".concat(o, ")")
-      })), T && !m && /* @__PURE__ */ i.createElement("clipPath", t.cn("clipPath", {
-        id: o
-      }), /* @__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;
-}(j);
-h(l, "enhance", [D(), B()]);
-h(l, "style", M);
-h(l, "defaultProps", {
-  animate: !0
+  }]);
+  return TrendLineRoot2;
+}(Trend);
+_defineProperty(TrendLineRoot, "enhance", [resolveColorEnhance(), uniqueIDEnhancement()]);
+_defineProperty(TrendLineRoot, "style", style);
+_defineProperty(TrendLineRoot, "defaultProps", {
+  animate: true
 });
-var q = C(l);
-q.displayName = "MiniChart.TrendLine";
-var I = C(l, {}, {
+var TrendLine = createComponent(TrendLineRoot);
+TrendLine.displayName = "MiniChart.TrendLine";
+var TrendArea = createComponent(TrendLineRoot, {}, {
   enhancements: [function() {
     return {
-      wrapperProps: function(f) {
-        return S(f, {
-          withArea: !0
+      wrapperProps: function wrapperProps(props) {
+        return assignProps(props, {
+          withArea: true
         });
       }
     };
   }]
 });
-I.displayName = "MiniChart.TrendArea";
+TrendArea.displayName = "MiniChart.TrendArea";
 export {
-  I as TrendArea,
-  q 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/lib/types/component/score/Donut.d.ts

@@ -1,6 +1,6 @@
 import { ComponentType } from '@semcore/core';
 import { BoxProps } from '@semcore/flex-box';
-import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
+import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
 import { CommonScoreProps } from './Score';
 export type ScoreDonutProps = BoxProps & CommonScoreProps;
 type Enhances = {

package/lib/types/component/score/Line.types.d.ts

@@ -1,8 +1,8 @@
-import { Intergalactic, ComponentType } from '@semcore/utils/lib/core';
+import { Intergalactic, ComponentType } from '@semcore/core';
 import { CommonScoreProps } from './Score';
 import React from 'react';
 import { BoxProps, Box } from '@semcore/flex-box';
-import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
+import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
 type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
 type Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
 export type SegmentColor = `chart-palette-order-${Range<1, 24>}`;

package/lib/types/component/trend/Bar.d.ts

@@ -1,5 +1,5 @@
 import { ComponentType } from '@semcore/core';
-import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
+import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
 import { CommonTrendProps } from './Trend';
 type BarItem = {
     /**

package/lib/types/component/trend/Line.d.ts

@@ -1,5 +1,5 @@
 import { ComponentType } from '@semcore/core';
-import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
+import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
 import { CommonTrendProps } from './Trend';
 export type TrendLineProps = CommonTrendProps & {
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/mini-chart",
   "description": "Semrush MiniChart Component",
-  "version": "0.29.1",
+  "version": "16.0.0-prerelease.11",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -13,14 +13,9 @@
     "import": "./lib/esm/index.mjs",
     "types": "./lib/types/index.d.ts"
   },
-  "dependencies": {
-    "@semcore/flex-box": "5.41.1",
-    "@semcore/utils": "4.48.1"
-  },
   "peerDependencies": {
-    "@semcore/core": "^2.17.5",
-    "react": "16.8 - 18",
-    "react-dom": "16.8 - 18"
+    "@semcore/base-components": "^16.0.0-prerelease.11",
+    "@semcore/flex-box": "^16.0.0-prerelease.11"
   },
   "repository": {
     "type": "git",