@semcore/mini-chart 0.29.1 → 0.29.2-prerelease.2
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.
- package/CHANGELOG.md +6 -0
- package/lib/cjs/component/score/Donut.js +9 -9
- package/lib/cjs/component/score/Line.js +18 -18
- package/lib/cjs/component/trend/Bar.js +7 -7
- package/lib/cjs/component/trend/Line.js +7 -7
- package/lib/es6/component/score/Donut.js +9 -9
- package/lib/es6/component/score/Line.js +18 -18
- package/lib/es6/component/trend/Bar.js +7 -7
- package/lib/es6/component/trend/Line.js +7 -7
- package/lib/esm/component/score/Donut.mjs +38 -38
- package/lib/esm/component/score/Line.mjs +47 -47
- package/lib/esm/component/trend/Bar.mjs +31 -31
- package/lib/esm/component/trend/Line.mjs +32 -32
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [0.29.2] - 2025-04-04
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/flex-box` [5.41.1 ~> 5.41.2], `@semcore/utils` [4.48.1 ~> 4.48.2], `@semcore/core` [2.39.1 ~> 2.39.2]).
|
|
10
|
+
|
|
5
11
|
## [0.29.1] - 2025-03-20
|
|
6
12
|
|
|
7
13
|
### Changed
|
|
@@ -19,15 +19,15 @@ var _flexBox = require("@semcore/flex-box");
|
|
|
19
19
|
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
|
|
20
20
|
var _ariaProps = require("@semcore/utils/lib/ariaProps");
|
|
21
21
|
/*__reshadow-styles__:"./donut.shadow.css"*/
|
|
22
|
-
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes
|
|
23
|
-
"__SLineGauge": "
|
|
24
|
-
"_loading": "
|
|
25
|
-
"__SDonutContainer": "
|
|
26
|
-
"__STrendLine": "
|
|
27
|
-
"__STrendBar": "
|
|
28
|
-
"@pulse": "
|
|
29
|
-
"_animate": "
|
|
30
|
-
"_semi": "
|
|
22
|
+
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_dk2mq{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_dk2mq_gg_.__loading_dk2mq_gg_,.___SLineGauge_dk2mq_gg_.__loading_dk2mq_gg_,.___STrendBar_dk2mq_gg_.__loading_dk2mq_gg_,.___STrendLine_dk2mq_gg_.__loading_dk2mq_gg_{animation-name:pulse_dk2mq;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_dk2mq_gg_.__semi_dk2mq_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_dk2mq_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_dk2mq_gg_.__animate_dk2mq_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}" /*__inner_css_end__*/, "dk2mq_gg_") /*__reshadow_css_end__*/, {
|
|
23
|
+
"__SLineGauge": "___SLineGauge_dk2mq_gg_",
|
|
24
|
+
"_loading": "__loading_dk2mq_gg_",
|
|
25
|
+
"__SDonutContainer": "___SDonutContainer_dk2mq_gg_",
|
|
26
|
+
"__STrendLine": "___STrendLine_dk2mq_gg_",
|
|
27
|
+
"__STrendBar": "___STrendBar_dk2mq_gg_",
|
|
28
|
+
"@pulse": "pulse_dk2mq",
|
|
29
|
+
"_animate": "__animate_dk2mq_gg_",
|
|
30
|
+
"_semi": "__semi_dk2mq_gg_"
|
|
31
31
|
});
|
|
32
32
|
var DonutRoot = /*#__PURE__*/function (_Component) {
|
|
33
33
|
(0, _inherits2["default"])(DonutRoot, _Component);
|
|
@@ -18,24 +18,24 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
18
18
|
var _flexBox = require("@semcore/flex-box");
|
|
19
19
|
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
|
|
20
20
|
/*__reshadow-styles__:"./line.shadow.css"*/
|
|
21
|
-
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes
|
|
22
|
-
"__SLineGauge": "
|
|
23
|
-
"_loading": "
|
|
24
|
-
"__SDonutContainer": "
|
|
25
|
-
"__STrendLine": "
|
|
26
|
-
"__STrendBar": "
|
|
27
|
-
"@pulse": "
|
|
28
|
-
"--base-bg-color": "--base-bg-
|
|
29
|
-
"__SLineValue": "
|
|
30
|
-
"_percent": "
|
|
31
|
-
"--percent": "--
|
|
32
|
-
"_color": "
|
|
33
|
-
"__SLineSegmentItem": "
|
|
34
|
-
"--color": "--
|
|
35
|
-
"_segments": "
|
|
36
|
-
"__SLineGaugeSegment": "
|
|
37
|
-
"__SAnimationLine": "
|
|
38
|
-
"@move-line": "move-
|
|
21
|
+
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_1ht92{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_1ht92{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_1ht92_gg_.__loading_1ht92_gg_,.___SLineGauge_1ht92_gg_.__loading_1ht92_gg_,.___STrendBar_1ht92_gg_.__loading_1ht92_gg_,.___STrendLine_1ht92_gg_.__loading_1ht92_gg_{animation-name:pulse_1ht92;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_1ht92_gg_{height:8px;background-color:var(--base-bg-color_1ht92, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_1ht92_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_1ht92_gg_.__percent_1ht92_gg_{width:var(--percent_1ht92)}.___SLineSegmentItem_1ht92_gg_.__color_1ht92_gg_,.___SLineValue_1ht92_gg_.__color_1ht92_gg_{background-color:var(--color_1ht92, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_1ht92_gg_.__segments_1ht92_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_1ht92_gg_,.___SLineGaugeSegment_1ht92_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_1ht92_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_1ht92_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_1ht92_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_1ht92;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}" /*__inner_css_end__*/, "1ht92_gg_") /*__reshadow_css_end__*/, {
|
|
22
|
+
"__SLineGauge": "___SLineGauge_1ht92_gg_",
|
|
23
|
+
"_loading": "__loading_1ht92_gg_",
|
|
24
|
+
"__SDonutContainer": "___SDonutContainer_1ht92_gg_",
|
|
25
|
+
"__STrendLine": "___STrendLine_1ht92_gg_",
|
|
26
|
+
"__STrendBar": "___STrendBar_1ht92_gg_",
|
|
27
|
+
"@pulse": "pulse_1ht92",
|
|
28
|
+
"--base-bg-color": "--base-bg-color_1ht92",
|
|
29
|
+
"__SLineValue": "___SLineValue_1ht92_gg_",
|
|
30
|
+
"_percent": "__percent_1ht92_gg_",
|
|
31
|
+
"--percent": "--percent_1ht92",
|
|
32
|
+
"_color": "__color_1ht92_gg_",
|
|
33
|
+
"__SLineSegmentItem": "___SLineSegmentItem_1ht92_gg_",
|
|
34
|
+
"--color": "--color_1ht92",
|
|
35
|
+
"_segments": "__segments_1ht92_gg_",
|
|
36
|
+
"__SLineGaugeSegment": "___SLineGaugeSegment_1ht92_gg_",
|
|
37
|
+
"__SAnimationLine": "___SAnimationLine_1ht92_gg_",
|
|
38
|
+
"@move-line": "move-line_1ht92"
|
|
39
39
|
});
|
|
40
40
|
var LineRoot = /*#__PURE__*/function (_Component) {
|
|
41
41
|
(0, _inherits2["default"])(LineRoot, _Component);
|
|
@@ -21,13 +21,13 @@ var _Trend2 = require("./Trend");
|
|
|
21
21
|
var _flexBox = require("@semcore/flex-box");
|
|
22
22
|
var _ariaProps = require("@semcore/utils/lib/ariaProps");
|
|
23
23
|
/*__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
|
|
24
|
-
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes
|
|
25
|
-
"__SLineGauge": "
|
|
26
|
-
"_loading": "
|
|
27
|
-
"__SDonutContainer": "
|
|
28
|
-
"__STrendLine": "
|
|
29
|
-
"__STrendBar": "
|
|
30
|
-
"@pulse": "
|
|
24
|
+
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_1p7cy{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1p7cy_gg_.__loading_1p7cy_gg_,.___SLineGauge_1p7cy_gg_.__loading_1p7cy_gg_,.___STrendBar_1p7cy_gg_.__loading_1p7cy_gg_,.___STrendLine_1p7cy_gg_.__loading_1p7cy_gg_{animation-name:pulse_1p7cy;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}" /*__inner_css_end__*/, "1p7cy_gg_") /*__reshadow_css_end__*/, {
|
|
25
|
+
"__SLineGauge": "___SLineGauge_1p7cy_gg_",
|
|
26
|
+
"_loading": "__loading_1p7cy_gg_",
|
|
27
|
+
"__SDonutContainer": "___SDonutContainer_1p7cy_gg_",
|
|
28
|
+
"__STrendLine": "___STrendLine_1p7cy_gg_",
|
|
29
|
+
"__STrendBar": "___STrendBar_1p7cy_gg_",
|
|
30
|
+
"@pulse": "pulse_1p7cy"
|
|
31
31
|
});
|
|
32
32
|
var TrendBarRoot = /*#__PURE__*/function (_Trend) {
|
|
33
33
|
(0, _inherits2["default"])(TrendBarRoot, _Trend);
|
|
@@ -22,13 +22,13 @@ var _Trend2 = require("./Trend");
|
|
|
22
22
|
var _flexBox = require("@semcore/flex-box");
|
|
23
23
|
var _ariaProps = require("@semcore/utils/lib/ariaProps");
|
|
24
24
|
/*__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
|
|
25
|
-
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes
|
|
26
|
-
"__SLineGauge": "
|
|
27
|
-
"_loading": "
|
|
28
|
-
"__SDonutContainer": "
|
|
29
|
-
"__STrendLine": "
|
|
30
|
-
"__STrendBar": "
|
|
31
|
-
"@pulse": "
|
|
25
|
+
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_1p7cy{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1p7cy_gg_.__loading_1p7cy_gg_,.___SLineGauge_1p7cy_gg_.__loading_1p7cy_gg_,.___STrendBar_1p7cy_gg_.__loading_1p7cy_gg_,.___STrendLine_1p7cy_gg_.__loading_1p7cy_gg_{animation-name:pulse_1p7cy;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}" /*__inner_css_end__*/, "1p7cy_gg_") /*__reshadow_css_end__*/, {
|
|
26
|
+
"__SLineGauge": "___SLineGauge_1p7cy_gg_",
|
|
27
|
+
"_loading": "__loading_1p7cy_gg_",
|
|
28
|
+
"__SDonutContainer": "___SDonutContainer_1p7cy_gg_",
|
|
29
|
+
"__STrendLine": "___STrendLine_1p7cy_gg_",
|
|
30
|
+
"__STrendBar": "___STrendBar_1p7cy_gg_",
|
|
31
|
+
"@pulse": "pulse_1p7cy"
|
|
32
32
|
});
|
|
33
33
|
var TrendLineRoot = /*#__PURE__*/function (_Trend) {
|
|
34
34
|
(0, _inherits2["default"])(TrendLineRoot, _Trend);
|
|
@@ -12,15 +12,15 @@ import { Box } from '@semcore/flex-box';
|
|
|
12
12
|
import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
|
|
13
13
|
import { assignProps } from '@semcore/core';
|
|
14
14
|
/*__reshadow-styles__:"./donut.shadow.css"*/
|
|
15
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes
|
|
16
|
-
"__SLineGauge": "
|
|
17
|
-
"_loading": "
|
|
18
|
-
"__SDonutContainer": "
|
|
19
|
-
"__STrendLine": "
|
|
20
|
-
"__STrendBar": "
|
|
21
|
-
"@pulse": "
|
|
22
|
-
"_animate": "
|
|
23
|
-
"_semi": "
|
|
15
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_dk2mq{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_dk2mq_gg_.__loading_dk2mq_gg_,.___SLineGauge_dk2mq_gg_.__loading_dk2mq_gg_,.___STrendBar_dk2mq_gg_.__loading_dk2mq_gg_,.___STrendLine_dk2mq_gg_.__loading_dk2mq_gg_{animation-name:pulse_dk2mq;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_dk2mq_gg_.__semi_dk2mq_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_dk2mq_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_dk2mq_gg_.__animate_dk2mq_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}" /*__inner_css_end__*/, "dk2mq_gg_") /*__reshadow_css_end__*/, {
|
|
16
|
+
"__SLineGauge": "___SLineGauge_dk2mq_gg_",
|
|
17
|
+
"_loading": "__loading_dk2mq_gg_",
|
|
18
|
+
"__SDonutContainer": "___SDonutContainer_dk2mq_gg_",
|
|
19
|
+
"__STrendLine": "___STrendLine_dk2mq_gg_",
|
|
20
|
+
"__STrendBar": "___STrendBar_dk2mq_gg_",
|
|
21
|
+
"@pulse": "pulse_dk2mq",
|
|
22
|
+
"_animate": "__animate_dk2mq_gg_",
|
|
23
|
+
"_semi": "__semi_dk2mq_gg_"
|
|
24
24
|
});
|
|
25
25
|
import { extractAriaProps } from '@semcore/utils/lib/ariaProps';
|
|
26
26
|
var DonutRoot = /*#__PURE__*/function (_Component) {
|
|
@@ -13,24 +13,24 @@ import createComponent, { Component, Root, sstyled } from '@semcore/core';
|
|
|
13
13
|
import { Box, Flex } from '@semcore/flex-box';
|
|
14
14
|
import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
|
|
15
15
|
/*__reshadow-styles__:"./line.shadow.css"*/
|
|
16
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes
|
|
17
|
-
"__SLineGauge": "
|
|
18
|
-
"_loading": "
|
|
19
|
-
"__SDonutContainer": "
|
|
20
|
-
"__STrendLine": "
|
|
21
|
-
"__STrendBar": "
|
|
22
|
-
"@pulse": "
|
|
23
|
-
"--base-bg-color": "--base-bg-
|
|
24
|
-
"__SLineValue": "
|
|
25
|
-
"_percent": "
|
|
26
|
-
"--percent": "--
|
|
27
|
-
"_color": "
|
|
28
|
-
"__SLineSegmentItem": "
|
|
29
|
-
"--color": "--
|
|
30
|
-
"_segments": "
|
|
31
|
-
"__SLineGaugeSegment": "
|
|
32
|
-
"__SAnimationLine": "
|
|
33
|
-
"@move-line": "move-
|
|
16
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_1ht92{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_1ht92{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_1ht92_gg_.__loading_1ht92_gg_,.___SLineGauge_1ht92_gg_.__loading_1ht92_gg_,.___STrendBar_1ht92_gg_.__loading_1ht92_gg_,.___STrendLine_1ht92_gg_.__loading_1ht92_gg_{animation-name:pulse_1ht92;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_1ht92_gg_{height:8px;background-color:var(--base-bg-color_1ht92, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_1ht92_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_1ht92_gg_.__percent_1ht92_gg_{width:var(--percent_1ht92)}.___SLineSegmentItem_1ht92_gg_.__color_1ht92_gg_,.___SLineValue_1ht92_gg_.__color_1ht92_gg_{background-color:var(--color_1ht92, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_1ht92_gg_.__segments_1ht92_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_1ht92_gg_,.___SLineGaugeSegment_1ht92_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_1ht92_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_1ht92_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_1ht92_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_1ht92;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}" /*__inner_css_end__*/, "1ht92_gg_") /*__reshadow_css_end__*/, {
|
|
17
|
+
"__SLineGauge": "___SLineGauge_1ht92_gg_",
|
|
18
|
+
"_loading": "__loading_1ht92_gg_",
|
|
19
|
+
"__SDonutContainer": "___SDonutContainer_1ht92_gg_",
|
|
20
|
+
"__STrendLine": "___STrendLine_1ht92_gg_",
|
|
21
|
+
"__STrendBar": "___STrendBar_1ht92_gg_",
|
|
22
|
+
"@pulse": "pulse_1ht92",
|
|
23
|
+
"--base-bg-color": "--base-bg-color_1ht92",
|
|
24
|
+
"__SLineValue": "___SLineValue_1ht92_gg_",
|
|
25
|
+
"_percent": "__percent_1ht92_gg_",
|
|
26
|
+
"--percent": "--percent_1ht92",
|
|
27
|
+
"_color": "__color_1ht92_gg_",
|
|
28
|
+
"__SLineSegmentItem": "___SLineSegmentItem_1ht92_gg_",
|
|
29
|
+
"--color": "--color_1ht92",
|
|
30
|
+
"_segments": "__segments_1ht92_gg_",
|
|
31
|
+
"__SLineGaugeSegment": "___SLineGaugeSegment_1ht92_gg_",
|
|
32
|
+
"__SAnimationLine": "___SAnimationLine_1ht92_gg_",
|
|
33
|
+
"@move-line": "move-line_1ht92"
|
|
34
34
|
});
|
|
35
35
|
var LineRoot = /*#__PURE__*/function (_Component) {
|
|
36
36
|
_inherits(LineRoot, _Component);
|
|
@@ -13,13 +13,13 @@ import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance
|
|
|
13
13
|
import { Trend } from './Trend';
|
|
14
14
|
import { Box } from '@semcore/flex-box';
|
|
15
15
|
/*__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
|
|
16
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes
|
|
17
|
-
"__SLineGauge": "
|
|
18
|
-
"_loading": "
|
|
19
|
-
"__SDonutContainer": "
|
|
20
|
-
"__STrendLine": "
|
|
21
|
-
"__STrendBar": "
|
|
22
|
-
"@pulse": "
|
|
16
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_1p7cy{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1p7cy_gg_.__loading_1p7cy_gg_,.___SLineGauge_1p7cy_gg_.__loading_1p7cy_gg_,.___STrendBar_1p7cy_gg_.__loading_1p7cy_gg_,.___STrendLine_1p7cy_gg_.__loading_1p7cy_gg_{animation-name:pulse_1p7cy;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}" /*__inner_css_end__*/, "1p7cy_gg_") /*__reshadow_css_end__*/, {
|
|
17
|
+
"__SLineGauge": "___SLineGauge_1p7cy_gg_",
|
|
18
|
+
"_loading": "__loading_1p7cy_gg_",
|
|
19
|
+
"__SDonutContainer": "___SDonutContainer_1p7cy_gg_",
|
|
20
|
+
"__STrendLine": "___STrendLine_1p7cy_gg_",
|
|
21
|
+
"__STrendBar": "___STrendBar_1p7cy_gg_",
|
|
22
|
+
"@pulse": "pulse_1p7cy"
|
|
23
23
|
});
|
|
24
24
|
import { extractAriaProps } from '@semcore/utils/lib/ariaProps';
|
|
25
25
|
var TrendBarRoot = /*#__PURE__*/function (_Trend) {
|
|
@@ -14,13 +14,13 @@ import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
|
|
|
14
14
|
import { Trend } from './Trend';
|
|
15
15
|
import { Box } from '@semcore/flex-box';
|
|
16
16
|
/*__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
|
|
17
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes
|
|
18
|
-
"__SLineGauge": "
|
|
19
|
-
"_loading": "
|
|
20
|
-
"__SDonutContainer": "
|
|
21
|
-
"__STrendLine": "
|
|
22
|
-
"__STrendBar": "
|
|
23
|
-
"@pulse": "
|
|
17
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_1p7cy{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1p7cy_gg_.__loading_1p7cy_gg_,.___SLineGauge_1p7cy_gg_.__loading_1p7cy_gg_,.___STrendBar_1p7cy_gg_.__loading_1p7cy_gg_,.___STrendLine_1p7cy_gg_.__loading_1p7cy_gg_{animation-name:pulse_1p7cy;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}" /*__inner_css_end__*/, "1p7cy_gg_") /*__reshadow_css_end__*/, {
|
|
18
|
+
"__SLineGauge": "___SLineGauge_1p7cy_gg_",
|
|
19
|
+
"_loading": "__loading_1p7cy_gg_",
|
|
20
|
+
"__SDonutContainer": "___SDonutContainer_1p7cy_gg_",
|
|
21
|
+
"__STrendLine": "___STrendLine_1p7cy_gg_",
|
|
22
|
+
"__STrendBar": "___STrendBar_1p7cy_gg_",
|
|
23
|
+
"@pulse": "pulse_1p7cy"
|
|
24
24
|
});
|
|
25
25
|
import { extractAriaProps } from '@semcore/utils/lib/ariaProps';
|
|
26
26
|
var TrendLineRoot = /*#__PURE__*/function (_Trend) {
|
|
@@ -1,47 +1,47 @@
|
|
|
1
|
-
import
|
|
1
|
+
import q from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
2
|
import M from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
3
|
import W from "@babel/runtime/helpers/esm/createClass";
|
|
4
4
|
import G from "@babel/runtime/helpers/esm/inherits";
|
|
5
5
|
import N from "@babel/runtime/helpers/esm/createSuper";
|
|
6
|
-
import
|
|
6
|
+
import p from "@babel/runtime/helpers/esm/defineProperty";
|
|
7
7
|
import { sstyled as R } from "@semcore/utils/lib/core/index";
|
|
8
8
|
import C, { assignProps as P, sstyled as I, Component as j } from "@semcore/core";
|
|
9
9
|
import r from "react";
|
|
10
10
|
import { Box as F } from "@semcore/flex-box";
|
|
11
|
-
import
|
|
11
|
+
import z from "@semcore/utils/lib/enhances/resolveColorEnhance";
|
|
12
12
|
import { extractAriaProps as H } from "@semcore/utils/lib/ariaProps";
|
|
13
13
|
var J = (
|
|
14
14
|
/*__reshadow_css_start__*/
|
|
15
15
|
(R.insert(
|
|
16
16
|
/*__inner_css_start__*/
|
|
17
|
-
"@keyframes
|
|
18
|
-
"
|
|
17
|
+
"@keyframes pulse_dk2mq{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_dk2mq_gg_.__loading_dk2mq_gg_,.___SLineGauge_dk2mq_gg_.__loading_dk2mq_gg_,.___STrendBar_dk2mq_gg_.__loading_dk2mq_gg_,.___STrendLine_dk2mq_gg_.__loading_dk2mq_gg_{animation-name:pulse_dk2mq;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_dk2mq_gg_.__semi_dk2mq_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_dk2mq_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_dk2mq_gg_.__animate_dk2mq_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}",
|
|
18
|
+
"dk2mq_gg_"
|
|
19
19
|
), {
|
|
20
|
-
__SLineGauge: "
|
|
21
|
-
_loading: "
|
|
22
|
-
__SDonutContainer: "
|
|
23
|
-
__STrendLine: "
|
|
24
|
-
__STrendBar: "
|
|
25
|
-
"@pulse": "
|
|
26
|
-
_animate: "
|
|
27
|
-
_semi: "
|
|
20
|
+
__SLineGauge: "___SLineGauge_dk2mq_gg_",
|
|
21
|
+
_loading: "__loading_dk2mq_gg_",
|
|
22
|
+
__SDonutContainer: "___SDonutContainer_dk2mq_gg_",
|
|
23
|
+
__STrendLine: "___STrendLine_dk2mq_gg_",
|
|
24
|
+
__STrendBar: "___STrendBar_dk2mq_gg_",
|
|
25
|
+
"@pulse": "pulse_dk2mq",
|
|
26
|
+
_animate: "__animate_dk2mq_gg_",
|
|
27
|
+
_semi: "__semi_dk2mq_gg_"
|
|
28
28
|
})
|
|
29
|
-
),
|
|
30
|
-
G(n,
|
|
31
|
-
var
|
|
29
|
+
), m = /* @__PURE__ */ function(u) {
|
|
30
|
+
G(n, u);
|
|
31
|
+
var g = N(n);
|
|
32
32
|
function n() {
|
|
33
|
-
return M(this, n),
|
|
33
|
+
return M(this, n), g.apply(this, arguments);
|
|
34
34
|
}
|
|
35
35
|
return W(n, [{
|
|
36
36
|
key: "render",
|
|
37
37
|
value: function() {
|
|
38
|
-
var x = this.asProps, t, B = F, o = this.asProps, _ = o.value, b = o.styles,
|
|
39
|
-
e && (
|
|
40
|
-
var L = e ? "0 0 24 12" : "0 0 24 24", T = -1 * (s + (e ? c : 0)),
|
|
41
|
-
return t = I(b), /* @__PURE__ */ r.createElement(B, t.cn("SDonutContainer",
|
|
38
|
+
var x = this.asProps, t, B = F, o = this.asProps, _ = o.value, b = o.styles, k = o.baseBgColor, E = k === void 0 ? "chart-grid-bar-chart-base-bg" : k, h = o.color, w = h === void 0 ? "chart-palette-order-1" : h, l = o.resolveColor, e = o.isSemiDonut, f = o.loading, d = e ? 6 : 4, i = e ? 9 : 10, a = e ? Math.PI * i : Math.PI * 2 * i, s = a * (_ / 100), v = a * ((100 - _) / 100), c = e ? a / (100 / 3) : a / 100, S = "".concat(v - 2 * c, " ").concat(c), D = "".concat(c, " ").concat(_ < 99 ? "".concat(S) : "", " ").concat(a);
|
|
39
|
+
e && (D = "".concat(c, " ").concat(_ < 95 ? "".concat(S) : "", " ").concat(a));
|
|
40
|
+
var L = e ? "0 0 24 12" : "0 0 24 24", T = -1 * (s + (e ? c : 0)), y = H(this.asProps), $ = y.__excludeProps, A = y.extractedAriaProps;
|
|
41
|
+
return t = I(b), /* @__PURE__ */ r.createElement(B, t.cn("SDonutContainer", q({}, P({
|
|
42
42
|
semi: e,
|
|
43
43
|
__excludeProps: $
|
|
44
|
-
}, x))), /* @__PURE__ */ r.createElement("svg", t.cn("svg",
|
|
44
|
+
}, x))), /* @__PURE__ */ r.createElement("svg", t.cn("svg", q({
|
|
45
45
|
width: "100%",
|
|
46
46
|
height: "100%",
|
|
47
47
|
viewBox: L,
|
|
@@ -51,16 +51,16 @@ var J = (
|
|
|
51
51
|
cx: "12",
|
|
52
52
|
cy: "12",
|
|
53
53
|
r: i,
|
|
54
|
-
strokeWidth:
|
|
55
|
-
stroke:
|
|
56
|
-
strokeDasharray:
|
|
54
|
+
strokeWidth: d,
|
|
55
|
+
stroke: l(E),
|
|
56
|
+
strokeDasharray: f ? void 0 : "".concat(v, " ").concat(a),
|
|
57
57
|
strokeDashoffset: T
|
|
58
|
-
})), !
|
|
58
|
+
})), !f && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("circle", t.cn("circle", {
|
|
59
59
|
cx: "12",
|
|
60
60
|
cy: "12",
|
|
61
61
|
r: i,
|
|
62
|
-
strokeWidth:
|
|
63
|
-
stroke:
|
|
62
|
+
strokeWidth: d,
|
|
63
|
+
stroke: l(w),
|
|
64
64
|
strokeDasharray: "".concat(s, " ").concat(a),
|
|
65
65
|
strokeDashoffset: s
|
|
66
66
|
}), /* @__PURE__ */ r.createElement("animate", t.cn("animate", {
|
|
@@ -70,26 +70,26 @@ var J = (
|
|
|
70
70
|
cx: "12",
|
|
71
71
|
cy: "12",
|
|
72
72
|
r: i,
|
|
73
|
-
strokeWidth:
|
|
74
|
-
stroke:
|
|
75
|
-
strokeDasharray:
|
|
73
|
+
strokeWidth: d,
|
|
74
|
+
stroke: l("chart-grid-border"),
|
|
75
|
+
strokeDasharray: D,
|
|
76
76
|
strokeDashoffset: -1 * s
|
|
77
77
|
}))))));
|
|
78
78
|
}
|
|
79
79
|
}]), n;
|
|
80
80
|
}(j);
|
|
81
|
-
m
|
|
82
|
-
m
|
|
83
|
-
m
|
|
81
|
+
p(m, "enhance", [z()]);
|
|
82
|
+
p(m, "style", J);
|
|
83
|
+
p(m, "defaultProps", {
|
|
84
84
|
animate: !0
|
|
85
85
|
});
|
|
86
|
-
var K = C(
|
|
86
|
+
var K = C(m);
|
|
87
87
|
K.displayName = "MiniChart.ScoreDonut";
|
|
88
|
-
var O = C(
|
|
88
|
+
var O = C(m, {}, {
|
|
89
89
|
enhancements: [function() {
|
|
90
90
|
return {
|
|
91
|
-
wrapperProps: function(
|
|
92
|
-
return P(
|
|
91
|
+
wrapperProps: function(g) {
|
|
92
|
+
return P(g, {
|
|
93
93
|
isSemiDonut: !0
|
|
94
94
|
});
|
|
95
95
|
}
|
|
@@ -13,76 +13,76 @@ var J = (
|
|
|
13
13
|
/*__reshadow_css_start__*/
|
|
14
14
|
(z.insert(
|
|
15
15
|
/*__inner_css_start__*/
|
|
16
|
-
"@keyframes
|
|
17
|
-
"
|
|
16
|
+
"@keyframes pulse_1ht92{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_1ht92{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_1ht92_gg_.__loading_1ht92_gg_,.___SLineGauge_1ht92_gg_.__loading_1ht92_gg_,.___STrendBar_1ht92_gg_.__loading_1ht92_gg_,.___STrendLine_1ht92_gg_.__loading_1ht92_gg_{animation-name:pulse_1ht92;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_1ht92_gg_{height:8px;background-color:var(--base-bg-color_1ht92, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_1ht92_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_1ht92_gg_.__percent_1ht92_gg_{width:var(--percent_1ht92)}.___SLineSegmentItem_1ht92_gg_.__color_1ht92_gg_,.___SLineValue_1ht92_gg_.__color_1ht92_gg_{background-color:var(--color_1ht92, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_1ht92_gg_.__segments_1ht92_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_1ht92_gg_,.___SLineGaugeSegment_1ht92_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_1ht92_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_1ht92_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_1ht92_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_1ht92;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}",
|
|
17
|
+
"1ht92_gg_"
|
|
18
18
|
), {
|
|
19
|
-
__SLineGauge: "
|
|
20
|
-
_loading: "
|
|
21
|
-
__SDonutContainer: "
|
|
22
|
-
__STrendLine: "
|
|
23
|
-
__STrendBar: "
|
|
24
|
-
"@pulse": "
|
|
25
|
-
"--base-bg-color": "--base-bg-
|
|
26
|
-
__SLineValue: "
|
|
27
|
-
_percent: "
|
|
28
|
-
"--percent": "--
|
|
29
|
-
_color: "
|
|
30
|
-
__SLineSegmentItem: "
|
|
31
|
-
"--color": "--
|
|
32
|
-
_segments: "
|
|
33
|
-
__SLineGaugeSegment: "
|
|
34
|
-
__SAnimationLine: "
|
|
35
|
-
"@move-line": "move-
|
|
19
|
+
__SLineGauge: "___SLineGauge_1ht92_gg_",
|
|
20
|
+
_loading: "__loading_1ht92_gg_",
|
|
21
|
+
__SDonutContainer: "___SDonutContainer_1ht92_gg_",
|
|
22
|
+
__STrendLine: "___STrendLine_1ht92_gg_",
|
|
23
|
+
__STrendBar: "___STrendBar_1ht92_gg_",
|
|
24
|
+
"@pulse": "pulse_1ht92",
|
|
25
|
+
"--base-bg-color": "--base-bg-color_1ht92",
|
|
26
|
+
__SLineValue: "___SLineValue_1ht92_gg_",
|
|
27
|
+
_percent: "__percent_1ht92_gg_",
|
|
28
|
+
"--percent": "--percent_1ht92",
|
|
29
|
+
_color: "__color_1ht92_gg_",
|
|
30
|
+
__SLineSegmentItem: "___SLineSegmentItem_1ht92_gg_",
|
|
31
|
+
"--color": "--color_1ht92",
|
|
32
|
+
_segments: "__segments_1ht92_gg_",
|
|
33
|
+
__SLineGaugeSegment: "___SLineGaugeSegment_1ht92_gg_",
|
|
34
|
+
__SAnimationLine: "___SAnimationLine_1ht92_gg_",
|
|
35
|
+
"@move-line": "move-line_1ht92"
|
|
36
36
|
})
|
|
37
37
|
), l = /* @__PURE__ */ function(p) {
|
|
38
|
-
X(
|
|
39
|
-
var v = j(
|
|
40
|
-
function
|
|
41
|
-
return N(this,
|
|
38
|
+
X(r, p);
|
|
39
|
+
var v = j(r);
|
|
40
|
+
function r() {
|
|
41
|
+
return N(this, r), v.apply(this, arguments);
|
|
42
42
|
}
|
|
43
|
-
return R(
|
|
43
|
+
return R(r, [{
|
|
44
44
|
key: "getSegmentProps",
|
|
45
|
-
value: function(
|
|
46
|
-
var
|
|
47
|
-
e.Children.forEach(c, function(
|
|
48
|
-
/* @__PURE__ */ e.isValidElement(
|
|
45
|
+
value: function(_) {
|
|
46
|
+
var n = this.asProps, c = n.children, f = n.resolveColor, a = 0;
|
|
47
|
+
e.Children.forEach(c, function(m) {
|
|
48
|
+
/* @__PURE__ */ e.isValidElement(m) && (a = a + m.props.value);
|
|
49
49
|
});
|
|
50
|
-
var
|
|
50
|
+
var s = a > 0 ? 100 * _.value / a : 0;
|
|
51
51
|
return {
|
|
52
|
-
w: "".concat(
|
|
53
|
-
"use:color":
|
|
52
|
+
w: "".concat(s, "%"),
|
|
53
|
+
"use:color": f(_.color)
|
|
54
54
|
};
|
|
55
55
|
}
|
|
56
56
|
}, {
|
|
57
57
|
key: "render",
|
|
58
58
|
value: function() {
|
|
59
|
-
var
|
|
59
|
+
var _ = this.asProps, n, c = g, f = g, a = g, s = q, m = g, t = this.asProps, b = t.value, y = t.styles, E = t.color, P = E === void 0 ? "chart-palette-order-1" : E, k = t.baseBgColor, h = t.resolveColor, B = t.loading, T = t.children, $ = t.Children, w = t.animate;
|
|
60
60
|
if (T !== void 0) {
|
|
61
61
|
var i;
|
|
62
62
|
return i = d(y), /* @__PURE__ */ e.createElement(c, i.cn("SLineGauge", x({}, G({
|
|
63
63
|
segments: !0,
|
|
64
|
-
"base-bg-color":
|
|
65
|
-
},
|
|
64
|
+
"base-bg-color": h(k)
|
|
65
|
+
}, _))), /* @__PURE__ */ e.createElement(s, i.cn("SLineGaugeSegment", {}), /* @__PURE__ */ e.createElement($, i.cn("Children", {}))), w && /* @__PURE__ */ e.createElement(a, i.cn("SAnimationLine", {})));
|
|
66
66
|
}
|
|
67
67
|
var o = this.asProps.segments, C = [];
|
|
68
68
|
if (o)
|
|
69
|
-
for (var
|
|
69
|
+
for (var u = 0; u < o; u++) {
|
|
70
70
|
var I, D = "calc((100% - ".concat(o - 1, "px) / ").concat(o, ")");
|
|
71
|
-
C.push((I = d(y), /* @__PURE__ */ e.createElement(
|
|
72
|
-
key:
|
|
73
|
-
color:
|
|
71
|
+
C.push((I = d(y), /* @__PURE__ */ e.createElement(m, I.cn("SLineSegmentItem", {
|
|
72
|
+
key: u,
|
|
73
|
+
color: u < b ? h(P) : void 0,
|
|
74
74
|
w: D
|
|
75
75
|
}))));
|
|
76
76
|
}
|
|
77
|
-
var V = "".concat(
|
|
78
|
-
return o && (V = "".concat(
|
|
79
|
-
"base-bg-color":
|
|
80
|
-
},
|
|
77
|
+
var V = "".concat(b, "%");
|
|
78
|
+
return o && (V = "".concat(b / o * 100, "%")), n = d(y), /* @__PURE__ */ e.createElement(c, n.cn("SLineGauge", x({}, G({
|
|
79
|
+
"base-bg-color": h(k)
|
|
80
|
+
}, _))), !B && /* @__PURE__ */ e.createElement(f, n.cn("SLineValue", {
|
|
81
81
|
w: V,
|
|
82
|
-
color:
|
|
83
|
-
})), !!C.length && /* @__PURE__ */ e.createElement(
|
|
82
|
+
color: h(P)
|
|
83
|
+
})), !!C.length && /* @__PURE__ */ e.createElement(s, n.cn("SLineGaugeSegment", {}), C), w && /* @__PURE__ */ e.createElement(a, n.cn("SAnimationLine", {})));
|
|
84
84
|
}
|
|
85
|
-
}]),
|
|
85
|
+
}]), r;
|
|
86
86
|
}(M);
|
|
87
87
|
S(l, "enhance", [H()]);
|
|
88
88
|
S(l, "displayName", "ScoreLine");
|
|
@@ -91,8 +91,8 @@ S(l, "defaultProps", {
|
|
|
91
91
|
animate: !0
|
|
92
92
|
});
|
|
93
93
|
function A(p) {
|
|
94
|
-
var v = arguments[0],
|
|
95
|
-
return
|
|
94
|
+
var v = arguments[0], r, L = p.styles, _ = g;
|
|
95
|
+
return r = d(L), /* @__PURE__ */ e.createElement(_, r.cn("SLineSegmentItem", x({}, G({}, v))));
|
|
96
96
|
}
|
|
97
97
|
A.displayName = "Segment";
|
|
98
98
|
var K = F(l, {
|
|
@@ -4,9 +4,9 @@ import L from "@babel/runtime/helpers/esm/classCallCheck";
|
|
|
4
4
|
import A from "@babel/runtime/helpers/esm/createClass";
|
|
5
5
|
import D from "@babel/runtime/helpers/esm/inherits";
|
|
6
6
|
import E from "@babel/runtime/helpers/esm/createSuper";
|
|
7
|
-
import
|
|
7
|
+
import c from "@babel/runtime/helpers/esm/defineProperty";
|
|
8
8
|
import { sstyled as R } from "@semcore/utils/lib/core/index";
|
|
9
|
-
import
|
|
9
|
+
import y, { assignProps as v, sstyled as G } from "@semcore/core";
|
|
10
10
|
import _ from "react";
|
|
11
11
|
import N from "@semcore/utils/lib/enhances/resolveColorEnhance";
|
|
12
12
|
import { Trend as $ } from "./Trend.mjs";
|
|
@@ -16,18 +16,18 @@ var j = (
|
|
|
16
16
|
/*__reshadow_css_start__*/
|
|
17
17
|
(R.insert(
|
|
18
18
|
/*__inner_css_start__*/
|
|
19
|
-
"@keyframes
|
|
20
|
-
"
|
|
19
|
+
"@keyframes pulse_1p7cy{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1p7cy_gg_.__loading_1p7cy_gg_,.___SLineGauge_1p7cy_gg_.__loading_1p7cy_gg_,.___STrendBar_1p7cy_gg_.__loading_1p7cy_gg_,.___STrendLine_1p7cy_gg_.__loading_1p7cy_gg_{animation-name:pulse_1p7cy;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
|
|
20
|
+
"1p7cy_gg_"
|
|
21
21
|
), {
|
|
22
|
-
__SLineGauge: "
|
|
23
|
-
_loading: "
|
|
24
|
-
__SDonutContainer: "
|
|
25
|
-
__STrendLine: "
|
|
26
|
-
__STrendBar: "
|
|
27
|
-
"@pulse": "
|
|
22
|
+
__SLineGauge: "___SLineGauge_1p7cy_gg_",
|
|
23
|
+
_loading: "__loading_1p7cy_gg_",
|
|
24
|
+
__SDonutContainer: "___SDonutContainer_1p7cy_gg_",
|
|
25
|
+
__STrendLine: "___STrendLine_1p7cy_gg_",
|
|
26
|
+
__STrendBar: "___STrendBar_1p7cy_gg_",
|
|
27
|
+
"@pulse": "pulse_1p7cy"
|
|
28
28
|
})
|
|
29
|
-
),
|
|
30
|
-
D(e,
|
|
29
|
+
), i = /* @__PURE__ */ function(l) {
|
|
30
|
+
D(e, l);
|
|
31
31
|
var s = E(e);
|
|
32
32
|
function e() {
|
|
33
33
|
return L(this, e), s.apply(this, arguments);
|
|
@@ -48,51 +48,51 @@ var j = (
|
|
|
48
48
|
}, {
|
|
49
49
|
key: "data",
|
|
50
50
|
get: function() {
|
|
51
|
-
var
|
|
51
|
+
var n = this.asProps, r = n.data, t = n.loading;
|
|
52
52
|
return t ? this.defaultData : r;
|
|
53
53
|
}
|
|
54
54
|
}, {
|
|
55
55
|
key: "render",
|
|
56
56
|
value: function() {
|
|
57
|
-
var
|
|
58
|
-
return r = G(T), /* @__PURE__ */ _.createElement(S, r.cn("STrendBar", h({},
|
|
57
|
+
var n = this.asProps, r, t = this, S = M, a = this.asProps, T = a.styles, d = a.resolveColor, C = a.isHistogram, B = a.animate, x = a.loading, p = this.defaultWidth / this.data.length, u = W(this.asProps), H = u.__excludeProps, k = u.extractedAriaProps;
|
|
58
|
+
return r = G(T), /* @__PURE__ */ _.createElement(S, r.cn("STrendBar", h({}, v({
|
|
59
59
|
ref: this.containerRef,
|
|
60
60
|
__excludeProps: ["data"].concat(w(H))
|
|
61
|
-
},
|
|
61
|
+
}, n))), /* @__PURE__ */ _.createElement("svg", r.cn("svg", h({
|
|
62
62
|
width: "100%",
|
|
63
63
|
height: "100%",
|
|
64
64
|
viewBox: "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight),
|
|
65
65
|
role: "img"
|
|
66
|
-
}, k)), this.data.map(function(
|
|
67
|
-
var
|
|
68
|
-
return
|
|
66
|
+
}, k)), this.data.map(function(o, m) {
|
|
67
|
+
var f = d("chart-palette-order-other-data");
|
|
68
|
+
return o.color && (f = d(o.color)), /* @__PURE__ */ _.createElement("rect", {
|
|
69
69
|
key: m,
|
|
70
|
-
x:
|
|
71
|
-
y: t.defaultHeight -
|
|
72
|
-
width: C ?
|
|
73
|
-
height:
|
|
74
|
-
fill:
|
|
70
|
+
x: p * m,
|
|
71
|
+
y: t.defaultHeight - o.value,
|
|
72
|
+
width: C ? p : p * 0.8,
|
|
73
|
+
height: o.value,
|
|
74
|
+
fill: f
|
|
75
75
|
}, B && !x && /* @__PURE__ */ _.createElement("animate", {
|
|
76
76
|
attributeName: "y",
|
|
77
|
-
values: "".concat(t.defaultHeight, ";").concat(t.defaultHeight -
|
|
77
|
+
values: "".concat(t.defaultHeight, ";").concat(t.defaultHeight - o.value),
|
|
78
78
|
dur: "500ms"
|
|
79
79
|
}));
|
|
80
80
|
})));
|
|
81
81
|
}
|
|
82
82
|
}]), e;
|
|
83
83
|
}($);
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
84
|
+
c(i, "enhance", [N()]);
|
|
85
|
+
c(i, "style", j);
|
|
86
|
+
c(i, "defaultProps", {
|
|
87
87
|
animate: !0
|
|
88
88
|
});
|
|
89
|
-
var P =
|
|
89
|
+
var P = y(i);
|
|
90
90
|
P.displayName = "MiniChart.TrendBar";
|
|
91
|
-
var ee =
|
|
91
|
+
var ee = y(i, {}, {
|
|
92
92
|
enhancements: [function() {
|
|
93
93
|
return {
|
|
94
94
|
wrapperProps: function(s) {
|
|
95
|
-
return
|
|
95
|
+
return v(s, {
|
|
96
96
|
isHistogram: !0
|
|
97
97
|
});
|
|
98
98
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import A from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
2
|
-
import
|
|
2
|
+
import v from "@babel/runtime/helpers/esm/objectSpread2";
|
|
3
3
|
import E from "@babel/runtime/helpers/esm/classCallCheck";
|
|
4
4
|
import R from "@babel/runtime/helpers/esm/createClass";
|
|
5
5
|
import H from "@babel/runtime/helpers/esm/inherits";
|
|
@@ -17,21 +17,21 @@ var M = (
|
|
|
17
17
|
/*__reshadow_css_start__*/
|
|
18
18
|
($.insert(
|
|
19
19
|
/*__inner_css_start__*/
|
|
20
|
-
"@keyframes
|
|
21
|
-
"
|
|
20
|
+
"@keyframes pulse_1p7cy{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1p7cy_gg_.__loading_1p7cy_gg_,.___SLineGauge_1p7cy_gg_.__loading_1p7cy_gg_,.___STrendBar_1p7cy_gg_.__loading_1p7cy_gg_,.___STrendLine_1p7cy_gg_.__loading_1p7cy_gg_{animation-name:pulse_1p7cy;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
|
|
21
|
+
"1p7cy_gg_"
|
|
22
22
|
), {
|
|
23
|
-
__SLineGauge: "
|
|
24
|
-
_loading: "
|
|
25
|
-
__SDonutContainer: "
|
|
26
|
-
__STrendLine: "
|
|
27
|
-
__STrendBar: "
|
|
28
|
-
"@pulse": "
|
|
23
|
+
__SLineGauge: "___SLineGauge_1p7cy_gg_",
|
|
24
|
+
_loading: "__loading_1p7cy_gg_",
|
|
25
|
+
__SDonutContainer: "___SDonutContainer_1p7cy_gg_",
|
|
26
|
+
__STrendLine: "___STrendLine_1p7cy_gg_",
|
|
27
|
+
__STrendBar: "___STrendBar_1p7cy_gg_",
|
|
28
|
+
"@pulse": "pulse_1p7cy"
|
|
29
29
|
})
|
|
30
30
|
), l = /* @__PURE__ */ function(g) {
|
|
31
31
|
H(s, g);
|
|
32
|
-
var
|
|
32
|
+
var p = W(s);
|
|
33
33
|
function s() {
|
|
34
|
-
return E(this, s),
|
|
34
|
+
return E(this, s), p.apply(this, arguments);
|
|
35
35
|
}
|
|
36
36
|
return R(s, [{
|
|
37
37
|
key: "defaultData",
|
|
@@ -47,8 +47,8 @@ var M = (
|
|
|
47
47
|
}, {
|
|
48
48
|
key: "data",
|
|
49
49
|
get: function() {
|
|
50
|
-
var e = this.asProps, t = e.data,
|
|
51
|
-
return
|
|
50
|
+
var e = this.asProps, t = e.data, o = e.loading;
|
|
51
|
+
return o ? this.defaultData : t;
|
|
52
52
|
}
|
|
53
53
|
}, {
|
|
54
54
|
key: "svgWidth",
|
|
@@ -63,19 +63,19 @@ var M = (
|
|
|
63
63
|
}, {
|
|
64
64
|
key: "color",
|
|
65
65
|
get: function() {
|
|
66
|
-
var e = this.asProps, t = e.resolveColor,
|
|
67
|
-
return t(
|
|
66
|
+
var e = this.asProps, t = e.resolveColor, o = e.color, r = o === void 0 ? "chart-palette-order-1" : o, n = e.loading;
|
|
67
|
+
return t(n ? "skeleton-bg" : r);
|
|
68
68
|
}
|
|
69
69
|
}, {
|
|
70
70
|
key: "render",
|
|
71
71
|
value: function() {
|
|
72
|
-
for (var e = this.asProps, t,
|
|
73
|
-
d.push("".concat(
|
|
74
|
-
var
|
|
75
|
-
return t = b(x), /* @__PURE__ */ i.createElement(
|
|
72
|
+
for (var e = this.asProps, t, o = G, r = this.asProps, n = r.uid, k = r.withArea, T = r.animate, u = r.lastPointColor, m = r.resolveColor, f = r.loading, x = r.styles, d = [], c = this.data.length, y = this.defaultWidth / (c - 1), _ = 0; _ < c; _++)
|
|
73
|
+
d.push("".concat(y * _, ",").concat(this.defaultHeight - this.data[_]));
|
|
74
|
+
var P = N(this.asProps), L = P.__excludeProps, w = P.extractedAriaProps;
|
|
75
|
+
return t = b(x), /* @__PURE__ */ i.createElement(o, t.cn("STrendLine", v({}, S({
|
|
76
76
|
ref: this.containerRef,
|
|
77
77
|
__excludeProps: ["data"].concat(A(L))
|
|
78
|
-
}, e))), /* @__PURE__ */ i.createElement("svg", t.cn("svg",
|
|
78
|
+
}, e))), /* @__PURE__ */ i.createElement("svg", t.cn("svg", v({
|
|
79
79
|
width: "100%",
|
|
80
80
|
height: "100%",
|
|
81
81
|
viewBox: "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight),
|
|
@@ -85,22 +85,22 @@ var M = (
|
|
|
85
85
|
stroke: this.color,
|
|
86
86
|
strokeWidth: "4",
|
|
87
87
|
fill: "none",
|
|
88
|
-
clipPath: "url(#".concat(
|
|
88
|
+
clipPath: "url(#".concat(n, ")")
|
|
89
89
|
})), k && /* @__PURE__ */ i.createElement("polyline", t.cn("polyline", {
|
|
90
90
|
points: "0,".concat(this.defaultHeight, " ").concat(d.join(" "), " ").concat(this.defaultWidth, ",").concat(this.defaultHeight),
|
|
91
91
|
fill: this.color,
|
|
92
92
|
fillOpacity: 0.2,
|
|
93
|
-
clipPath: "url(#".concat(
|
|
94
|
-
})), u && !
|
|
95
|
-
cx:
|
|
96
|
-
cy: this.defaultHeight - this.data[
|
|
93
|
+
clipPath: "url(#".concat(n, ")")
|
|
94
|
+
})), u && !f && /* @__PURE__ */ i.createElement("circle", t.cn("circle", {
|
|
95
|
+
cx: y * (c - 1),
|
|
96
|
+
cy: this.defaultHeight - this.data[c - 1],
|
|
97
97
|
r: this.lastPointRadius,
|
|
98
|
-
fill:
|
|
99
|
-
stroke:
|
|
98
|
+
fill: m(u),
|
|
99
|
+
stroke: m("chart-grid-border"),
|
|
100
100
|
strokeWidth: 4,
|
|
101
|
-
clipPath: "url(#".concat(
|
|
102
|
-
})), T && !
|
|
103
|
-
id:
|
|
101
|
+
clipPath: "url(#".concat(n, ")")
|
|
102
|
+
})), T && !f && /* @__PURE__ */ i.createElement("clipPath", t.cn("clipPath", {
|
|
103
|
+
id: n
|
|
104
104
|
}), /* @__PURE__ */ i.createElement("rect", t.cn("rect", {
|
|
105
105
|
x: "0",
|
|
106
106
|
y: "0",
|
|
@@ -125,8 +125,8 @@ q.displayName = "MiniChart.TrendLine";
|
|
|
125
125
|
var I = C(l, {}, {
|
|
126
126
|
enhancements: [function() {
|
|
127
127
|
return {
|
|
128
|
-
wrapperProps: function(
|
|
129
|
-
return S(
|
|
128
|
+
wrapperProps: function(p) {
|
|
129
|
+
return S(p, {
|
|
130
130
|
withArea: !0
|
|
131
131
|
});
|
|
132
132
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/mini-chart",
|
|
3
3
|
"description": "Semrush MiniChart Component",
|
|
4
|
-
"version": "0.29.
|
|
4
|
+
"version": "0.29.2-prerelease.2",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/flex-box": "5.41.
|
|
18
|
-
"@semcore/utils": "4.48.
|
|
17
|
+
"@semcore/flex-box": "5.41.2-prerelease.2",
|
|
18
|
+
"@semcore/utils": "4.48.2-prerelease.2"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
|
-
"@semcore/core": "^2.
|
|
21
|
+
"@semcore/core": "^2.39.2-prerelease.2",
|
|
22
22
|
"react": "16.8 - 18",
|
|
23
23
|
"react-dom": "16.8 - 18"
|
|
24
24
|
},
|