@semcore/mini-chart 16.0.0-prerelease.4 → 16.0.0-prerelease.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/lib/esm/component/score/Donut.mjs +98 -81
  2. package/lib/esm/component/score/Line.mjs +95 -75
  3. package/lib/esm/component/trend/Bar.mjs +79 -66
  4. package/lib/esm/component/trend/Line.mjs +113 -97
  5. package/lib/esm/component/trend/Trend.mjs +47 -35
  6. package/lib/esm/index.mjs +13 -13
  7. package/package.json +3 -3
package/lib/esm/component/score/Donut.mjs CHANGED
@@ -1,102 +1,119 @@
1
- import C from "@babel/runtime/helpers/esm/objectSpread2";
2
- import G from "@babel/runtime/helpers/esm/classCallCheck";
3
- import N from "@babel/runtime/helpers/esm/createClass";
4
- import R from "@babel/runtime/helpers/esm/inherits";
5
- import I from "@babel/runtime/helpers/esm/createSuper";
6
- import p from "@babel/runtime/helpers/esm/defineProperty";
7
- import { sstyled as P, createComponent as x, assignProps as B, Component as j } from "@semcore/core";
8
- import r from "react";
9
- import { Box as F } from "@semcore/flex-box";
10
- import q from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
11
- import { extractAriaProps as z } from "@semcore/core/lib/utils/ariaProps";
12
- var H = (
1
+ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
2
+ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
3
+ import _createClass from "@babel/runtime/helpers/esm/createClass";
4
+ import _inherits from "@babel/runtime/helpers/esm/inherits";
5
+ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
6
+ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
7
+ import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
8
+ import React from "react";
9
+ import { Box } from "@semcore/flex-box";
10
+ import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
11
+ import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
12
+ var style = (
13
13
  /*__reshadow_css_start__*/
14
- (P.insert(
14
+ (sstyled.insert(
15
15
  /*__inner_css_start__*/
16
16
  "@keyframes pulse_1cm94{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1cm94_gg_.__loading_1cm94_gg_,.___SLineGauge_1cm94_gg_.__loading_1cm94_gg_,.___STrendBar_1cm94_gg_.__loading_1cm94_gg_,.___STrendLine_1cm94_gg_.__loading_1cm94_gg_{animation-name:pulse_1cm94;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_1cm94_gg_.__semi_1cm94_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_1cm94_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_1cm94_gg_.__animate_1cm94_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}",
17
17
  "1cm94_gg_"
18
18
  ), {
19
- __SLineGauge: "___SLineGauge_1cm94_gg_",
20
- _loading: "__loading_1cm94_gg_",
21
- __SDonutContainer: "___SDonutContainer_1cm94_gg_",
22
- __STrendLine: "___STrendLine_1cm94_gg_",
23
- __STrendBar: "___STrendBar_1cm94_gg_",
19
+ "__SLineGauge": "___SLineGauge_1cm94_gg_",
20
+ "_loading": "__loading_1cm94_gg_",
21
+ "__SDonutContainer": "___SDonutContainer_1cm94_gg_",
22
+ "__STrendLine": "___STrendLine_1cm94_gg_",
23
+ "__STrendBar": "___STrendBar_1cm94_gg_",
24
24
  "@pulse": "pulse_1cm94",
25
- _animate: "__animate_1cm94_gg_",
26
- _semi: "__semi_1cm94_gg_"
25
+ "_animate": "__animate_1cm94_gg_",
26
+ "_semi": "__semi_1cm94_gg_"
27
27
  })
28
- ), m = /* @__PURE__ */ function(d) {
29
- R(n, d);
30
- var g = I(n);
31
- function n() {
32
- return G(this, n), g.apply(this, arguments);
28
+ );
29
+ var DonutRoot = /* @__PURE__ */ function(_Component) {
30
+ _inherits(DonutRoot2, _Component);
31
+ var _super = _createSuper(DonutRoot2);
32
+ function DonutRoot2() {
33
+ _classCallCheck(this, DonutRoot2);
34
+ return _super.apply(this, arguments);
33
35
  }
34
- return N(n, [{
36
+ _createClass(DonutRoot2, [{
35
37
  key: "render",
36
- value: function() {
37
- var b = this.asProps, t, E = F, o = this.asProps, _ = o.value, w = o.styles, h = o.baseBgColor, L = h === void 0 ? "chart-grid-bar-chart-base-bg" : h, f = o.color, T = f === void 0 ? "chart-palette-order-1" : f, l = o.resolveColor, e = o.isSemiDonut, v = o.loading, u = e ? 6 : 4, i = e ? 9 : 10, a = e ? Math.PI * i : Math.PI * 2 * i, c = a * (_ / 100), S = a * ((100 - _) / 100), s = e ? a / (100 / 3) : a / 100, D = "".concat(S - 2 * s, " ").concat(s), y = "".concat(s, " ").concat(_ < 99 ? "".concat(D) : "", " ").concat(a);
38
- e && (y = "".concat(s, " ").concat(_ < 95 ? "".concat(D) : "", " ").concat(a));
39
- var $ = e ? "0 0 24 12" : "0 0 24 24", A = -1 * (c + (e ? s : 0)), k = z(this.asProps), M = k.__excludeProps, W = k.extractedAriaProps;
40
- return t = P(w), /* @__PURE__ */ r.createElement(E, t.cn("SDonutContainer", C({}, B({
41
- semi: e,
42
- __excludeProps: M
43
- }, b))), /* @__PURE__ */ r.createElement("svg", t.cn("svg", C({
44
- width: "100%",
45
- height: "100%",
46
- viewBox: $,
47
- fill: "none",
48
- role: "img"
49
- }, W)), /* @__PURE__ */ r.createElement("g", t.cn("g", {}), /* @__PURE__ */ r.createElement("circle", t.cn("circle", {
50
- cx: "12",
51
- cy: "12",
52
- r: i,
53
- strokeWidth: u,
54
- stroke: l(L),
55
- strokeDasharray: v ? void 0 : "".concat(S, " ").concat(a),
56
- strokeDashoffset: A
57
- })), !v && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("circle", t.cn("circle", {
58
- cx: "12",
59
- cy: "12",
60
- r: i,
61
- strokeWidth: u,
62
- stroke: l(T),
63
- strokeDasharray: "".concat(c, " ").concat(a),
64
- strokeDashoffset: c
65
- }), /* @__PURE__ */ r.createElement("animate", t.cn("animate", {
66
- attributeName: "stroke-dashoffset",
67
- values: "0;".concat(c)
68
- }))), _ !== 100 && !e && /* @__PURE__ */ r.createElement("circle", t.cn("circle", {
69
- cx: "12",
70
- cy: "12",
71
- r: i,
72
- strokeWidth: u,
73
- stroke: l("chart-grid-border"),
74
- strokeDasharray: y,
75
- strokeDashoffset: -1 * c
38
+ value: function render() {
39
+ var _ref = this.asProps, _ref2;
40
+ var SDonutContainer = Box;
41
+ 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;
42
+ var strokeWidth = isSemiDonut ? 6 : 4;
43
+ var radius = isSemiDonut ? 9 : 10;
44
+ var baseStrokeDasharray = isSemiDonut ? Math.PI * radius : Math.PI * 2 * radius;
45
+ var valueStrokeDasharray = baseStrokeDasharray * (value / 100);
46
+ var greyStrokeDasharray = baseStrokeDasharray * ((100 - value) / 100);
47
+ var offsetPoint = isSemiDonut ? baseStrokeDasharray / (100 / 3) : baseStrokeDasharray / 100;
48
+ var strokeDasharrayBetweenSpaces = "".concat(greyStrokeDasharray - 2 * offsetPoint, " ").concat(offsetPoint);
49
+ var spaceStrokeDasharray = "".concat(offsetPoint, " ").concat(value < 99 ? "".concat(strokeDasharrayBetweenSpaces) : "", " ").concat(baseStrokeDasharray);
50
+ if (isSemiDonut) {
51
+ spaceStrokeDasharray = "".concat(offsetPoint, " ").concat(value < 95 ? "".concat(strokeDasharrayBetweenSpaces) : "", " ").concat(baseStrokeDasharray);
52
+ }
53
+ var viewBox = isSemiDonut ? "0 0 24 12" : "0 0 24 24";
54
+ var strokeDashoffsetBase = -1 * (valueStrokeDasharray + (isSemiDonut ? offsetPoint : 0));
55
+ var _extractAriaProps = extractAriaProps(this.asProps), __excludeProps = _extractAriaProps.__excludeProps, extractedAriaProps = _extractAriaProps.extractedAriaProps;
56
+ return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SDonutContainer, _ref2.cn("SDonutContainer", _objectSpread({}, assignProps({
57
+ "semi": isSemiDonut,
58
+ "__excludeProps": __excludeProps
59
+ }, _ref))), /* @__PURE__ */ React.createElement("svg", _ref2.cn("svg", _objectSpread({
60
+ "width": "100%",
61
+ "height": "100%",
62
+ "viewBox": viewBox,
63
+ "fill": "none",
64
+ "role": "img"
65
+ }, extractedAriaProps)), /* @__PURE__ */ React.createElement("g", _ref2.cn("g", {}), /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
66
+ "cx": "12",
67
+ "cy": "12",
68
+ "r": radius,
69
+ "strokeWidth": strokeWidth,
70
+ "stroke": resolveColor(baseBgColor),
71
+ "strokeDasharray": loading ? void 0 : "".concat(greyStrokeDasharray, " ").concat(baseStrokeDasharray),
72
+ "strokeDashoffset": strokeDashoffsetBase
73
+ })), !loading && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
74
+ "cx": "12",
75
+ "cy": "12",
76
+ "r": radius,
77
+ "strokeWidth": strokeWidth,
78
+ "stroke": resolveColor(color),
79
+ "strokeDasharray": "".concat(valueStrokeDasharray, " ").concat(baseStrokeDasharray),
80
+ "strokeDashoffset": valueStrokeDasharray
81
+ }), /* @__PURE__ */ React.createElement("animate", _ref2.cn("animate", {
82
+ "attributeName": "stroke-dashoffset",
83
+ "values": "0;".concat(valueStrokeDasharray)
84
+ }))), value !== 100 && !isSemiDonut && /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
85
+ "cx": "12",
86
+ "cy": "12",
87
+ "r": radius,
88
+ "strokeWidth": strokeWidth,
89
+ "stroke": resolveColor("chart-grid-border"),
90
+ "strokeDasharray": spaceStrokeDasharray,
91
+ "strokeDashoffset": -1 * valueStrokeDasharray
76
92
  }))))));
77
93
  }
78
- }]), n;
79
- }(j);
80
- p(m, "enhance", [q()]);
81
- p(m, "style", H);
82
- p(m, "defaultProps", {
83
- animate: !0
94
+ }]);
95
+ return DonutRoot2;
96
+ }(Component);
97
+ _defineProperty(DonutRoot, "enhance", [resolveColorEnhance()]);
98
+ _defineProperty(DonutRoot, "style", style);
99
+ _defineProperty(DonutRoot, "defaultProps", {
100
+ animate: true
84
101
  });
85
- var J = x(m);
86
- J.displayName = "MiniChart.ScoreDonut";
87
- var K = x(m, {}, {
102
+ var ScoreDonut = createComponent(DonutRoot);
103
+ ScoreDonut.displayName = "MiniChart.ScoreDonut";
104
+ var ScoreSemiDonut = createComponent(DonutRoot, {}, {
88
105
  enhancements: [function() {
89
106
  return {
90
- wrapperProps: function(g) {
91
- return B(g, {
92
- isSemiDonut: !0
107
+ wrapperProps: function wrapperProps(props) {
108
+ return assignProps(props, {
109
+ isSemiDonut: true
93
110
  });
94
111
  }
95
112
  };
96
113
  }]
97
114
  });
98
- K.displayName = "MiniChart.ScoreSemiDonut";
115
+ ScoreSemiDonut.displayName = "MiniChart.ScoreSemiDonut";
99
116
  export {
100
- J as ScoreDonut,
101
- K as ScoreSemiDonut
117
+ ScoreDonut,
118
+ ScoreSemiDonut
102
119
  };
package/lib/esm/component/score/Line.mjs CHANGED
@@ -1,103 +1,123 @@
1
- import x from "@babel/runtime/helpers/esm/objectSpread2";
2
- import N from "@babel/runtime/helpers/esm/classCallCheck";
3
- import R from "@babel/runtime/helpers/esm/createClass";
4
- import X from "@babel/runtime/helpers/esm/inherits";
5
- import j from "@babel/runtime/helpers/esm/createSuper";
6
- import S from "@babel/runtime/helpers/esm/defineProperty";
7
- import { sstyled as m, createComponent as z, assignProps as G, Component as F } from "@semcore/core";
8
- import e from "react";
9
- import { Box as g, Flex as M } from "@semcore/flex-box";
10
- import q from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
11
- var H = (
1
+ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
2
+ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
3
+ import _createClass from "@babel/runtime/helpers/esm/createClass";
4
+ import _inherits from "@babel/runtime/helpers/esm/inherits";
5
+ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
6
+ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
7
+ import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
8
+ import React from "react";
9
+ import { Box, Flex } from "@semcore/flex-box";
10
+ import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
11
+ var style = (
12
12
  /*__reshadow_css_start__*/
13
- (m.insert(
13
+ (sstyled.insert(
14
14
  /*__inner_css_start__*/
15
15
  "@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}",
16
16
  "2vm7d_gg_"
17
17
  ), {
18
- __SLineGauge: "___SLineGauge_2vm7d_gg_",
19
- _loading: "__loading_2vm7d_gg_",
20
- __SDonutContainer: "___SDonutContainer_2vm7d_gg_",
21
- __STrendLine: "___STrendLine_2vm7d_gg_",
22
- __STrendBar: "___STrendBar_2vm7d_gg_",
18
+ "__SLineGauge": "___SLineGauge_2vm7d_gg_",
19
+ "_loading": "__loading_2vm7d_gg_",
20
+ "__SDonutContainer": "___SDonutContainer_2vm7d_gg_",
21
+ "__STrendLine": "___STrendLine_2vm7d_gg_",
22
+ "__STrendBar": "___STrendBar_2vm7d_gg_",
23
23
  "@pulse": "pulse_2vm7d",
24
24
  "--base-bg-color": "--base-bg-color_2vm7d",
25
- __SLineValue: "___SLineValue_2vm7d_gg_",
26
- _percent: "__percent_2vm7d_gg_",
25
+ "__SLineValue": "___SLineValue_2vm7d_gg_",
26
+ "_percent": "__percent_2vm7d_gg_",
27
27
  "--percent": "--percent_2vm7d",
28
- _color: "__color_2vm7d_gg_",
29
- __SLineSegmentItem: "___SLineSegmentItem_2vm7d_gg_",
28
+ "_color": "__color_2vm7d_gg_",
29
+ "__SLineSegmentItem": "___SLineSegmentItem_2vm7d_gg_",
30
30
  "--color": "--color_2vm7d",
31
- _segments: "__segments_2vm7d_gg_",
32
- __SLineGaugeSegment: "___SLineGaugeSegment_2vm7d_gg_",
33
- __SAnimationLine: "___SAnimationLine_2vm7d_gg_",
31
+ "_segments": "__segments_2vm7d_gg_",
32
+ "__SLineGaugeSegment": "___SLineGaugeSegment_2vm7d_gg_",
33
+ "__SAnimationLine": "___SAnimationLine_2vm7d_gg_",
34
34
  "@move-line": "move-line_2vm7d"
35
35
  })
36
- ), l = /* @__PURE__ */ function(p) {
37
- X(r, p);
38
- var h = j(r);
39
- function r() {
40
- return N(this, r), h.apply(this, arguments);
36
+ );
37
+ var LineRoot = /* @__PURE__ */ function(_Component) {
38
+ _inherits(LineRoot2, _Component);
39
+ var _super = _createSuper(LineRoot2);
40
+ function LineRoot2() {
41
+ _classCallCheck(this, LineRoot2);
42
+ return _super.apply(this, arguments);
41
43
  }
42
- return R(r, [{
44
+ _createClass(LineRoot2, [{
43
45
  key: "getSegmentProps",
44
- value: function(t) {
45
- var _ = this.asProps, c = _.children, f = _.resolveColor, a = 0;
46
- e.Children.forEach(c, function(s) {
47
- /* @__PURE__ */ e.isValidElement(s) && (a = a + s.props.value);
46
+ value: function getSegmentProps(segmentProps) {
47
+ var _this$asProps = this.asProps, children = _this$asProps.children, resolveColor = _this$asProps.resolveColor;
48
+ var sum = 0;
49
+ React.Children.forEach(children, function(child) {
50
+ if (/* @__PURE__ */ React.isValidElement(child)) {
51
+ sum = sum + child.props.value;
52
+ }
48
53
  });
49
- var d = a > 0 ? 100 * t.value / a : 0;
54
+ var width = sum > 0 ? 100 * segmentProps.value / sum : 0;
50
55
  return {
51
- w: "".concat(d, "%"),
52
- "use:color": f(t.color)
56
+ w: "".concat(width, "%"),
57
+ "use:color": resolveColor(segmentProps.color)
53
58
  };
54
59
  }
55
60
  }, {
56
61
  key: "render",
57
- value: function() {
58
- var t = this.asProps, _, c = g, f = g, a = g, d = M, s = g, n = this.asProps, b = n.value, y = n.styles, E = n.color, P = E === void 0 ? "chart-palette-order-1" : E, k = n.baseBgColor, v = n.resolveColor, B = n.loading, T = n.children, $ = n.Children, w = n.animate;
59
- if (T !== void 0) {
60
- var i;
61
- return i = m(y), /* @__PURE__ */ e.createElement(c, i.cn("SLineGauge", x({}, G({
62
- segments: !0,
63
- "base-bg-color": v(k)
64
- }, t))), /* @__PURE__ */ e.createElement(d, i.cn("SLineGaugeSegment", {}), /* @__PURE__ */ e.createElement($, i.cn("Children", {}))), w && /* @__PURE__ */ e.createElement(a, i.cn("SAnimationLine", {})));
62
+ value: function render() {
63
+ var _ref = this.asProps, _ref5;
64
+ var SLineGauge = Box;
65
+ var SLineValue = Box;
66
+ var SAnimationLine = Box;
67
+ var SLineGaugeSegment = Flex;
68
+ var SLineSegmentItem = Box;
69
+ 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;
70
+ if (children !== void 0) {
71
+ var _ref3;
72
+ return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineGauge, _ref3.cn("SLineGauge", _objectSpread({}, assignProps({
73
+ "segments": true,
74
+ "base-bg-color": resolveColor(baseBgColor)
75
+ }, _ref))), /* @__PURE__ */ React.createElement(SLineGaugeSegment, _ref3.cn("SLineGaugeSegment", {}), /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {}))), animate && /* @__PURE__ */ React.createElement(SAnimationLine, _ref3.cn("SAnimationLine", {})));
65
76
  }
66
- var o = this.asProps.segments, C = [];
67
- if (o)
68
- for (var u = 0; u < o; u++) {
69
- var I, D = "calc((100% - ".concat(o - 1, "px) / ").concat(o, ")");
70
- C.push((I = m(y), /* @__PURE__ */ e.createElement(s, I.cn("SLineSegmentItem", {
71
- key: u,
72
- color: u < b ? v(P) : void 0,
73
- w: D
77
+ var segments = this.asProps.segments;
78
+ var SegmentItems = [];
79
+ if (segments) {
80
+ for (var i = 0; i < segments; i++) {
81
+ var _ref4;
82
+ var width = "calc((100% - ".concat(segments - 1, "px) / ").concat(segments, ")");
83
+ SegmentItems.push((_ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref4.cn("SLineSegmentItem", {
84
+ "key": i,
85
+ "color": i < value ? resolveColor(color) : void 0,
86
+ "w": width
74
87
  }))));
75
88
  }
76
- var V = "".concat(b, "%");
77
- return o && (V = "".concat(b / o * 100, "%")), _ = m(y), /* @__PURE__ */ e.createElement(c, _.cn("SLineGauge", x({}, G({
78
- "base-bg-color": v(k)
79
- }, t))), !B && /* @__PURE__ */ e.createElement(f, _.cn("SLineValue", {
80
- w: V,
81
- color: v(P)
82
- })), !!C.length && /* @__PURE__ */ e.createElement(d, _.cn("SLineGaugeSegment", {}), C), w && /* @__PURE__ */ e.createElement(a, _.cn("SAnimationLine", {})));
89
+ }
90
+ var percent = "".concat(value, "%");
91
+ if (segments) {
92
+ percent = "".concat(value / segments * 100, "%");
93
+ }
94
+ return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineGauge, _ref5.cn("SLineGauge", _objectSpread({}, assignProps({
95
+ "base-bg-color": resolveColor(baseBgColor)
96
+ }, _ref))), !loading && /* @__PURE__ */ React.createElement(SLineValue, _ref5.cn("SLineValue", {
97
+ "w": percent,
98
+ "color": resolveColor(color)
99
+ })), Boolean(SegmentItems.length) && /* @__PURE__ */ React.createElement(SLineGaugeSegment, _ref5.cn("SLineGaugeSegment", {}), SegmentItems), animate && /* @__PURE__ */ React.createElement(SAnimationLine, _ref5.cn("SAnimationLine", {})));
83
100
  }
84
- }]), r;
85
- }(F);
86
- S(l, "enhance", [q()]);
87
- S(l, "displayName", "ScoreLine");
88
- S(l, "style", H);
89
- S(l, "defaultProps", {
90
- animate: !0
101
+ }]);
102
+ return LineRoot2;
103
+ }(Component);
104
+ _defineProperty(LineRoot, "enhance", [resolveColorEnhance()]);
105
+ _defineProperty(LineRoot, "displayName", "ScoreLine");
106
+ _defineProperty(LineRoot, "style", style);
107
+ _defineProperty(LineRoot, "defaultProps", {
108
+ animate: true
91
109
  });
92
- function A(p) {
93
- var h = arguments[0], r, L = p.styles, t = g;
94
- return r = m(L), /* @__PURE__ */ e.createElement(t, r.cn("SLineSegmentItem", x({}, G({}, h))));
110
+ function Segment(props) {
111
+ var _ref2 = arguments[0], _ref6;
112
+ var styles = props.styles;
113
+ var SLineSegmentItem = Box;
114
+ return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref6.cn("SLineSegmentItem", _objectSpread({}, assignProps({}, _ref2))));
95
115
  }
96
- A.displayName = "Segment";
97
- var J = z(l, {
98
- Segment: A
116
+ Segment.displayName = "Segment";
117
+ var ScoreLine = createComponent(LineRoot, {
118
+ Segment
99
119
  });
100
- J.displayName = "MiniChart.ScoreLine";
120
+ ScoreLine.displayName = "MiniChart.ScoreLine";
101
121
  export {
102
- J as ScoreLine
122
+ ScoreLine
103
123
  };
package/lib/esm/component/trend/Bar.mjs CHANGED
@@ -1,39 +1,41 @@
1
- import w from "@babel/runtime/helpers/esm/toConsumableArray";
2
- import f from "@babel/runtime/helpers/esm/objectSpread2";
3
- import L from "@babel/runtime/helpers/esm/classCallCheck";
4
- import A from "@babel/runtime/helpers/esm/createClass";
5
- import D from "@babel/runtime/helpers/esm/inherits";
6
- import E from "@babel/runtime/helpers/esm/createSuper";
7
- import l from "@babel/runtime/helpers/esm/defineProperty";
8
- import { sstyled as v, createComponent as y, assignProps as j } from "@semcore/core";
9
- import _ from "react";
10
- import R from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
11
- import { Trend as G } from "./Trend.mjs";
12
- import { Box as N } from "@semcore/flex-box";
13
- import { extractAriaProps as M } from "@semcore/core/lib/utils/ariaProps";
14
- var W = (
1
+ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
2
+ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
3
+ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
4
+ import _createClass from "@babel/runtime/helpers/esm/createClass";
5
+ import _inherits from "@babel/runtime/helpers/esm/inherits";
6
+ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
7
+ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
8
+ import { sstyled, createComponent, assignProps } from "@semcore/core";
9
+ import React from "react";
10
+ import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
11
+ import { Trend } from "./Trend.mjs";
12
+ import { Box } from "@semcore/flex-box";
13
+ import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
14
+ var style = (
15
15
  /*__reshadow_css_start__*/
16
- (v.insert(
16
+ (sstyled.insert(
17
17
  /*__inner_css_start__*/
18
18
  "@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}",
19
19
  "7jer1_gg_"
20
20
  ), {
21
- __SLineGauge: "___SLineGauge_7jer1_gg_",
22
- _loading: "__loading_7jer1_gg_",
23
- __SDonutContainer: "___SDonutContainer_7jer1_gg_",
24
- __STrendLine: "___STrendLine_7jer1_gg_",
25
- __STrendBar: "___STrendBar_7jer1_gg_",
21
+ "__SLineGauge": "___SLineGauge_7jer1_gg_",
22
+ "_loading": "__loading_7jer1_gg_",
23
+ "__SDonutContainer": "___SDonutContainer_7jer1_gg_",
24
+ "__STrendLine": "___STrendLine_7jer1_gg_",
25
+ "__STrendBar": "___STrendBar_7jer1_gg_",
26
26
  "@pulse": "pulse_7jer1"
27
27
  })
28
- ), o = /* @__PURE__ */ function(u) {
29
- D(e, u);
30
- var s = E(e);
31
- function e() {
32
- return L(this, e), s.apply(this, arguments);
28
+ );
29
+ var TrendBarRoot = /* @__PURE__ */ function(_Trend) {
30
+ _inherits(TrendBarRoot2, _Trend);
31
+ var _super = _createSuper(TrendBarRoot2);
32
+ function TrendBarRoot2() {
33
+ _classCallCheck(this, TrendBarRoot2);
34
+ return _super.apply(this, arguments);
33
35
  }
34
- return A(e, [{
36
+ _createClass(TrendBarRoot2, [{
35
37
  key: "defaultData",
36
- get: function() {
38
+ get: function get() {
37
39
  return [{
38
40
  value: 20
39
41
  }, {
@@ -46,60 +48,71 @@ var W = (
46
48
  }
47
49
  }, {
48
50
  key: "data",
49
- get: function() {
50
- var n = this.asProps, r = n.data, t = n.loading;
51
- return t ? this.defaultData : r;
51
+ get: function get() {
52
+ var _this$asProps = this.asProps, data = _this$asProps.data, loading = _this$asProps.loading;
53
+ if (loading) {
54
+ return this.defaultData;
55
+ }
56
+ return data;
52
57
  }
53
58
  }, {
54
59
  key: "render",
55
- value: function() {
56
- 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;
57
- return r = v(T), /* @__PURE__ */ _.createElement(S, r.cn("STrendBar", f({}, j({
58
- ref: this.containerRef,
59
- __excludeProps: ["data"].concat(w(H))
60
- }, n))), /* @__PURE__ */ _.createElement("svg", r.cn("svg", f({
61
- width: "100%",
62
- height: "100%",
63
- viewBox: "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight),
64
- role: "img"
65
- }, k)), this.data.map(function(i, m) {
66
- var h = p("chart-palette-order-other-data");
67
- return i.color && (h = p(i.color)), /* @__PURE__ */ _.createElement("rect", {
68
- key: m,
69
- x: g * m,
70
- y: t.defaultHeight - i.value,
71
- width: C ? g : g * 0.8,
72
- height: i.value,
73
- fill: h
74
- }, B && !x && /* @__PURE__ */ _.createElement("animate", {
60
+ value: function render() {
61
+ var _ref = this.asProps, _ref2, _this = this;
62
+ var STrendBar = Box;
63
+ 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;
64
+ var step = this.defaultWidth / this.data.length;
65
+ var _extractAriaProps = extractAriaProps(this.asProps), __excludeProps = _extractAriaProps.__excludeProps, extractedAriaProps = _extractAriaProps.extractedAriaProps;
66
+ return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(STrendBar, _ref2.cn("STrendBar", _objectSpread({}, assignProps({
67
+ "ref": this.containerRef,
68
+ "__excludeProps": ["data"].concat(_toConsumableArray(__excludeProps))
69
+ }, _ref))), /* @__PURE__ */ React.createElement("svg", _ref2.cn("svg", _objectSpread({
70
+ "width": "100%",
71
+ "height": "100%",
72
+ "viewBox": "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight),
73
+ "role": "img"
74
+ }, extractedAriaProps)), this.data.map(function(barItem, index) {
75
+ var color = resolveColor("chart-palette-order-other-data");
76
+ if (barItem.color) {
77
+ color = resolveColor(barItem.color);
78
+ }
79
+ return /* @__PURE__ */ React.createElement("rect", {
80
+ key: index,
81
+ x: step * index,
82
+ y: _this.defaultHeight - barItem.value,
83
+ width: isHistogram ? step : step * 0.8,
84
+ height: barItem.value,
85
+ fill: color
86
+ }, animate && !loading && /* @__PURE__ */ React.createElement("animate", {
75
87
  attributeName: "y",
76
- values: "".concat(t.defaultHeight, ";").concat(t.defaultHeight - i.value),
88
+ values: "".concat(_this.defaultHeight, ";").concat(_this.defaultHeight - barItem.value),
77
89
  dur: "500ms"
78
90
  }));
79
91
  })));
80
92
  }
81
- }]), e;
82
- }(G);
83
- l(o, "enhance", [R()]);
84
- l(o, "style", W);
85
- l(o, "defaultProps", {
86
- animate: !0
93
+ }]);
94
+ return TrendBarRoot2;
95
+ }(Trend);
96
+ _defineProperty(TrendBarRoot, "enhance", [resolveColorEnhance()]);
97
+ _defineProperty(TrendBarRoot, "style", style);
98
+ _defineProperty(TrendBarRoot, "defaultProps", {
99
+ animate: true
87
100
  });
88
- var P = y(o);
89
- P.displayName = "MiniChart.TrendBar";
90
- var b = y(o, {}, {
101
+ var TrendBar = createComponent(TrendBarRoot);
102
+ TrendBar.displayName = "MiniChart.TrendBar";
103
+ var TrendHistogram = createComponent(TrendBarRoot, {}, {
91
104
  enhancements: [function() {
92
105
  return {
93
- wrapperProps: function(s) {
94
- return j(s, {
95
- isHistogram: !0
106
+ wrapperProps: function wrapperProps(props) {
107
+ return assignProps(props, {
108
+ isHistogram: true
96
109
  });
97
110
  }
98
111
  };
99
112
  }]
100
113
  });
101
- P.displayName = "MiniChart.TrendHistogram";
114
+ TrendBar.displayName = "MiniChart.TrendHistogram";
102
115
  export {
103
- P as TrendBar,
104
- b as TrendHistogram
116
+ TrendBar,
117
+ TrendHistogram
105
118
  };
package/lib/esm/component/trend/Line.mjs CHANGED
@@ -1,139 +1,155 @@
1
- import A from "@babel/runtime/helpers/esm/toConsumableArray";
2
- import y from "@babel/runtime/helpers/esm/objectSpread2";
3
- import E from "@babel/runtime/helpers/esm/classCallCheck";
4
- import R from "@babel/runtime/helpers/esm/createClass";
5
- import H from "@babel/runtime/helpers/esm/inherits";
6
- import W from "@babel/runtime/helpers/esm/createSuper";
7
- import g from "@babel/runtime/helpers/esm/defineProperty";
8
- import { sstyled as j, createComponent as C, assignProps as S } from "@semcore/core";
9
- import i from "react";
10
- import $ from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
11
- import b from "@semcore/core/lib/utils/uniqueID";
12
- import { Trend as D } from "./Trend.mjs";
13
- import { Box as B } from "@semcore/flex-box";
14
- import { extractAriaProps as G } from "@semcore/core/lib/utils/ariaProps";
15
- var N = (
1
+ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
2
+ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
3
+ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
4
+ import _createClass from "@babel/runtime/helpers/esm/createClass";
5
+ import _inherits from "@babel/runtime/helpers/esm/inherits";
6
+ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
7
+ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
8
+ import { sstyled, createComponent, assignProps } from "@semcore/core";
9
+ import React from "react";
10
+ import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
11
+ import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
12
+ import { Trend } from "./Trend.mjs";
13
+ import { Box } from "@semcore/flex-box";
14
+ import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
15
+ var style = (
16
16
  /*__reshadow_css_start__*/
17
- (j.insert(
17
+ (sstyled.insert(
18
18
  /*__inner_css_start__*/
19
19
  "@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}",
20
20
  "7jer1_gg_"
21
21
  ), {
22
- __SLineGauge: "___SLineGauge_7jer1_gg_",
23
- _loading: "__loading_7jer1_gg_",
24
- __SDonutContainer: "___SDonutContainer_7jer1_gg_",
25
- __STrendLine: "___STrendLine_7jer1_gg_",
26
- __STrendBar: "___STrendBar_7jer1_gg_",
22
+ "__SLineGauge": "___SLineGauge_7jer1_gg_",
23
+ "_loading": "__loading_7jer1_gg_",
24
+ "__SDonutContainer": "___SDonutContainer_7jer1_gg_",
25
+ "__STrendLine": "___STrendLine_7jer1_gg_",
26
+ "__STrendBar": "___STrendBar_7jer1_gg_",
27
27
  "@pulse": "pulse_7jer1"
28
28
  })
29
- ), l = /* @__PURE__ */ function(u) {
30
- H(s, u);
31
- var d = W(s);
32
- function s() {
33
- return E(this, s), d.apply(this, arguments);
29
+ );
30
+ var TrendLineRoot = /* @__PURE__ */ function(_Trend) {
31
+ _inherits(TrendLineRoot2, _Trend);
32
+ var _super = _createSuper(TrendLineRoot2);
33
+ function TrendLineRoot2() {
34
+ _classCallCheck(this, TrendLineRoot2);
35
+ return _super.apply(this, arguments);
34
36
  }
35
- return R(s, [{
37
+ _createClass(TrendLineRoot2, [{
36
38
  key: "defaultData",
37
- get: function() {
39
+ get: function get() {
38
40
  return [15, 70, 20, 85, 20];
39
41
  }
40
42
  }, {
41
43
  key: "lastPointRadius",
42
- get: function() {
43
- var e;
44
- return (e = this.asProps.lastPointRadius) !== null && e !== void 0 ? e : 6;
44
+ get: function get() {
45
+ var _this$asProps$lastPoi;
46
+ return (_this$asProps$lastPoi = this.asProps.lastPointRadius) !== null && _this$asProps$lastPoi !== void 0 ? _this$asProps$lastPoi : 6;
45
47
  }
46
48
  }, {
47
49
  key: "data",
48
- get: function() {
49
- var e = this.asProps, t = e.data, o = e.loading;
50
- return o ? this.defaultData : t;
50
+ get: function get() {
51
+ var _this$asProps = this.asProps, data = _this$asProps.data, loading = _this$asProps.loading;
52
+ if (loading) {
53
+ return this.defaultData;
54
+ }
55
+ return data;
51
56
  }
52
57
  }, {
53
58
  key: "svgWidth",
54
- get: function() {
59
+ get: function get() {
55
60
  return this.asProps.lastPointColor ? this.defaultWidth + this.lastPointRadius : this.defaultWidth;
56
61
  }
57
62
  }, {
58
63
  key: "svgHeight",
59
- get: function() {
64
+ get: function get() {
60
65
  return this.asProps.lastPointColor ? this.defaultHeight + this.lastPointRadius : this.defaultHeight;
61
66
  }
62
67
  }, {
63
68
  key: "color",
64
- get: function() {
65
- var e = this.asProps, t = e.resolveColor, o = e.color, r = o === void 0 ? "chart-palette-order-1" : o, n = e.loading;
66
- return t(n ? "skeleton-bg" : r);
69
+ get: function get() {
70
+ 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;
71
+ if (loading) {
72
+ return resolveColor("skeleton-bg");
73
+ }
74
+ return resolveColor(color);
67
75
  }
68
76
  }, {
69
77
  key: "render",
70
- value: function() {
71
- 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++)
72
- h.push("".concat(P * c, ",").concat(this.defaultHeight - this.data[c]));
73
- var v = G(this.asProps), L = v.__excludeProps, w = v.extractedAriaProps;
74
- return t = j(x), /* @__PURE__ */ i.createElement(o, t.cn("STrendLine", y({}, S({
75
- ref: this.containerRef,
76
- __excludeProps: ["data"].concat(A(L))
77
- }, e))), /* @__PURE__ */ i.createElement("svg", t.cn("svg", y({
78
- width: "100%",
79
- height: "100%",
80
- viewBox: "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight),
81
- role: "img"
82
- }, w)), /* @__PURE__ */ i.createElement("polyline", t.cn("polyline", {
83
- points: h.join(" "),
84
- stroke: this.color,
85
- strokeWidth: "4",
86
- fill: "none",
87
- clipPath: "url(#".concat(n, ")")
88
- })), k && /* @__PURE__ */ i.createElement("polyline", t.cn("polyline", {
89
- points: "0,".concat(this.defaultHeight, " ").concat(h.join(" "), " ").concat(this.defaultWidth, ",").concat(this.defaultHeight),
90
- fill: this.color,
91
- fillOpacity: 0.2,
92
- clipPath: "url(#".concat(n, ")")
93
- })), p && !f && /* @__PURE__ */ i.createElement("circle", t.cn("circle", {
94
- cx: P * (_ - 1),
95
- cy: this.defaultHeight - this.data[_ - 1],
96
- r: this.lastPointRadius,
97
- fill: m(p),
98
- stroke: m("chart-grid-border"),
99
- strokeWidth: 4,
100
- clipPath: "url(#".concat(n, ")")
101
- })), T && !f && /* @__PURE__ */ i.createElement("clipPath", t.cn("clipPath", {
102
- id: n
103
- }), /* @__PURE__ */ i.createElement("rect", t.cn("rect", {
104
- x: "0",
105
- y: "0",
106
- width: "100%",
107
- height: "100%",
108
- fill: "black"
109
- }), /* @__PURE__ */ i.createElement("animate", t.cn("animate", {
110
- dur: "500ms",
111
- attributeName: "width",
112
- values: "0;100%"
78
+ value: function render() {
79
+ var _ref = this.asProps, _ref2;
80
+ var STrendLine = Box;
81
+ 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;
82
+ var points = [];
83
+ var length = this.data.length;
84
+ var step = this.defaultWidth / (length - 1);
85
+ for (var i = 0; i < length; i++) {
86
+ points.push("".concat(step * i, ",").concat(this.defaultHeight - this.data[i]));
87
+ }
88
+ var _extractAriaProps = extractAriaProps(this.asProps), __excludeProps = _extractAriaProps.__excludeProps, extractedAriaProps = _extractAriaProps.extractedAriaProps;
89
+ return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(STrendLine, _ref2.cn("STrendLine", _objectSpread({}, assignProps({
90
+ "ref": this.containerRef,
91
+ "__excludeProps": ["data"].concat(_toConsumableArray(__excludeProps))
92
+ }, _ref))), /* @__PURE__ */ React.createElement("svg", _ref2.cn("svg", _objectSpread({
93
+ "width": "100%",
94
+ "height": "100%",
95
+ "viewBox": "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight),
96
+ "role": "img"
97
+ }, extractedAriaProps)), /* @__PURE__ */ React.createElement("polyline", _ref2.cn("polyline", {
98
+ "points": points.join(" "),
99
+ "stroke": this.color,
100
+ "strokeWidth": "4",
101
+ "fill": "none",
102
+ "clipPath": "url(#".concat(uid, ")")
103
+ })), withArea && /* @__PURE__ */ React.createElement("polyline", _ref2.cn("polyline", {
104
+ "points": "0,".concat(this.defaultHeight, " ").concat(points.join(" "), " ").concat(this.defaultWidth, ",").concat(this.defaultHeight),
105
+ "fill": this.color,
106
+ "fillOpacity": 0.2,
107
+ "clipPath": "url(#".concat(uid, ")")
108
+ })), lastPointColor && !loading && /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
109
+ "cx": step * (length - 1),
110
+ "cy": this.defaultHeight - this.data[length - 1],
111
+ "r": this.lastPointRadius,
112
+ "fill": resolveColor(lastPointColor),
113
+ "stroke": resolveColor("chart-grid-border"),
114
+ "strokeWidth": 4,
115
+ "clipPath": "url(#".concat(uid, ")")
116
+ })), animate && !loading && /* @__PURE__ */ React.createElement("clipPath", _ref2.cn("clipPath", {
117
+ "id": uid
118
+ }), /* @__PURE__ */ React.createElement("rect", _ref2.cn("rect", {
119
+ "x": "0",
120
+ "y": "0",
121
+ "width": "100%",
122
+ "height": "100%",
123
+ "fill": "black"
124
+ }), /* @__PURE__ */ React.createElement("animate", _ref2.cn("animate", {
125
+ "dur": "500ms",
126
+ "attributeName": "width",
127
+ "values": "0;100%"
113
128
  }))))));
114
129
  }
115
- }]), s;
116
- }(D);
117
- g(l, "enhance", [$(), b()]);
118
- g(l, "style", N);
119
- g(l, "defaultProps", {
120
- animate: !0
130
+ }]);
131
+ return TrendLineRoot2;
132
+ }(Trend);
133
+ _defineProperty(TrendLineRoot, "enhance", [resolveColorEnhance(), uniqueIDEnhancement()]);
134
+ _defineProperty(TrendLineRoot, "style", style);
135
+ _defineProperty(TrendLineRoot, "defaultProps", {
136
+ animate: true
121
137
  });
122
- var M = C(l);
123
- M.displayName = "MiniChart.TrendLine";
124
- var q = C(l, {}, {
138
+ var TrendLine = createComponent(TrendLineRoot);
139
+ TrendLine.displayName = "MiniChart.TrendLine";
140
+ var TrendArea = createComponent(TrendLineRoot, {}, {
125
141
  enhancements: [function() {
126
142
  return {
127
- wrapperProps: function(d) {
128
- return S(d, {
129
- withArea: !0
143
+ wrapperProps: function wrapperProps(props) {
144
+ return assignProps(props, {
145
+ withArea: true
130
146
  });
131
147
  }
132
148
  };
133
149
  }]
134
150
  });
135
- q.displayName = "MiniChart.TrendArea";
151
+ TrendArea.displayName = "MiniChart.TrendArea";
136
152
  export {
137
- q as TrendArea,
138
- M as TrendLine
153
+ TrendArea,
154
+ TrendLine
139
155
  };
package/lib/esm/component/trend/Trend.mjs CHANGED
@@ -1,66 +1,78 @@
1
- import f from "@babel/runtime/helpers/esm/classCallCheck";
2
- import u from "@babel/runtime/helpers/esm/createClass";
3
- import a from "@babel/runtime/helpers/esm/assertThisInitialized";
4
- import c from "@babel/runtime/helpers/esm/inherits";
5
- import d from "@babel/runtime/helpers/esm/createSuper";
6
- import s from "@babel/runtime/helpers/esm/defineProperty";
7
- import m from "react";
8
- import { Component as p } from "@semcore/core";
9
- var R = /* @__PURE__ */ function(h) {
10
- c(n, h);
11
- var o = d(n);
12
- function n() {
13
- for (var e, t = arguments.length, r = new Array(t), i = 0; i < t; i++)
14
- r[i] = arguments[i];
15
- return f(this, n), e = o.call.apply(o, [this].concat(r)), s(a(e), "state", {
1
+ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
2
+ import _createClass from "@babel/runtime/helpers/esm/createClass";
3
+ import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
4
+ import _inherits from "@babel/runtime/helpers/esm/inherits";
5
+ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
6
+ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
7
+ import React from "react";
8
+ import { Component } from "@semcore/core";
9
+ var Trend = /* @__PURE__ */ function(_Component) {
10
+ _inherits(Trend2, _Component);
11
+ var _super = _createSuper(Trend2);
12
+ function Trend2() {
13
+ var _this;
14
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
15
+ args[_key] = arguments[_key];
16
+ }
17
+ _classCallCheck(this, Trend2);
18
+ _this = _super.call.apply(_super, [this].concat(args));
19
+ _defineProperty(_assertThisInitialized(_this), "state", {
16
20
  width: 200,
17
21
  height: 100
18
- }), s(a(e), "containerRef", /* @__PURE__ */ m.createRef()), e;
22
+ });
23
+ _defineProperty(_assertThisInitialized(_this), "containerRef", /* @__PURE__ */ React.createRef());
24
+ return _this;
19
25
  }
20
- return u(n, [{
26
+ _createClass(Trend2, [{
21
27
  key: "componentDidMount",
22
- value: function() {
28
+ value: function componentDidMount() {
23
29
  this.setSizes();
24
30
  }
25
31
  }, {
26
32
  key: "componentDidUpdate",
27
- value: function(t) {
28
- (t.w !== this.props.w || t.h !== this.props.h || t.data !== this.props.data) && this.setSizes();
33
+ value: function componentDidUpdate(prevProps) {
34
+ if (prevProps.w !== this.props.w || prevProps.h !== this.props.h || prevProps.data !== this.props.data) {
35
+ this.setSizes();
36
+ }
29
37
  }
30
38
  }, {
31
39
  key: "defaultWidth",
32
- get: function() {
33
- var t = this.state, r = t.width, i = t.height;
34
- return r / i * this.defaultHeight;
40
+ get: function get() {
41
+ var _this$state = this.state, width = _this$state.width, height = _this$state.height;
42
+ return width / height * this.defaultHeight;
35
43
  }
36
44
  }, {
37
45
  key: "defaultHeight",
38
- get: function() {
46
+ get: function get() {
39
47
  return 100;
40
48
  }
41
49
  }, {
42
50
  key: "svgWidth",
43
- get: function() {
51
+ get: function get() {
44
52
  return this.defaultWidth;
45
53
  }
46
54
  }, {
47
55
  key: "svgHeight",
48
- get: function() {
56
+ get: function get() {
49
57
  return this.defaultHeight;
50
58
  }
51
59
  }, {
52
60
  key: "setSizes",
53
- value: function() {
61
+ value: function setSizes() {
54
62
  if (this.containerRef.current) {
55
- var t = this.containerRef.current.getBoundingClientRect(), r = t.width, i = t.height;
56
- r > 0 && i > 0 && this.setState({
57
- width: r,
58
- height: i
59
- });
63
+ var boundingClientRect = this.containerRef.current.getBoundingClientRect();
64
+ var width = boundingClientRect.width, height = boundingClientRect.height;
65
+ if (width > 0 && height > 0) {
66
+ this.setState({
67
+ width,
68
+ height
69
+ });
70
+ }
60
71
  }
61
72
  }
62
- }]), n;
63
- }(p);
73
+ }]);
74
+ return Trend2;
75
+ }(Component);
64
76
  export {
65
- R as Trend
77
+ Trend
66
78
  };
package/lib/esm/index.mjs CHANGED
@@ -1,16 +1,16 @@
1
- import { ScoreSemiDonut as r, ScoreDonut as o } from "./component/score/Donut.mjs";
2
- import { ScoreLine as e } from "./component/score/Line.mjs";
3
- import { TrendLine as m, TrendArea as i } from "./component/trend/Line.mjs";
4
- import { TrendBar as t, TrendHistogram as n } from "./component/trend/Bar.mjs";
5
- var S = {
6
- TrendLine: m,
7
- TrendArea: i,
8
- TrendBar: t,
9
- TrendHistogram: n,
10
- ScoreSemiDonut: r,
11
- ScoreDonut: o,
12
- ScoreLine: e
1
+ import { ScoreSemiDonut, ScoreDonut } from "./component/score/Donut.mjs";
2
+ import { ScoreLine } from "./component/score/Line.mjs";
3
+ import { TrendLine, TrendArea } from "./component/trend/Line.mjs";
4
+ import { TrendBar, TrendHistogram } from "./component/trend/Bar.mjs";
5
+ var miniCharts = {
6
+ TrendLine,
7
+ TrendArea,
8
+ TrendBar,
9
+ TrendHistogram,
10
+ ScoreSemiDonut,
11
+ ScoreDonut,
12
+ ScoreLine
13
13
  };
14
14
  export {
15
- S as default
15
+ miniCharts as default
16
16
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/mini-chart",
3
3
  "description": "Semrush MiniChart Component",
4
- "version": "16.0.0-prerelease.4",
4
+ "version": "16.0.0-prerelease.7",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -14,8 +14,8 @@
14
14
  "types": "./lib/types/index.d.ts"
15
15
  },
16
16
  "peerDependencies": {
17
- "@semcore/base-components": "^16.0.0-prerelease.4",
18
- "@semcore/flex-box": "^16.0.0-prerelease.4"
17
+ "@semcore/base-components": "^16.0.0-prerelease.7",
18
+ "@semcore/flex-box": "^16.0.0-prerelease.7"
19
19
  },
20
20
  "repository": {
21
21
  "type": "git",