@semcore/mini-chart 0.29.0 → 0.29.1-prerelease.0
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 +29 -29
- package/lib/esm/component/score/Line.mjs +46 -46
- package/lib/esm/component/trend/Bar.mjs +47 -47
- package/lib/esm/component/trend/Line.mjs +54 -54
- 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.1] - 2025-03-17
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/flex-box` [5.41.0 ~> 5.41.1], `@semcore/utils` [4.48.0 ~> 4.48.1], `@semcore/core` [2.39.0 ~> 2.39.1]).
|
|
10
|
+
|
|
5
11
|
## [0.29.0] - 2025-03-14
|
|
6
12
|
|
|
7
13
|
### Added
|
|
@@ -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_ul6zh{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_ul6zh_gg_.__loading_ul6zh_gg_,.___SLineGauge_ul6zh_gg_.__loading_ul6zh_gg_,.___STrendBar_ul6zh_gg_.__loading_ul6zh_gg_,.___STrendLine_ul6zh_gg_.__loading_ul6zh_gg_{animation-name:pulse_ul6zh;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_ul6zh_gg_.__semi_ul6zh_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_ul6zh_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_ul6zh_gg_.__animate_ul6zh_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}" /*__inner_css_end__*/, "ul6zh_gg_") /*__reshadow_css_end__*/, {
|
|
23
|
+
"__SLineGauge": "___SLineGauge_ul6zh_gg_",
|
|
24
|
+
"_loading": "__loading_ul6zh_gg_",
|
|
25
|
+
"__SDonutContainer": "___SDonutContainer_ul6zh_gg_",
|
|
26
|
+
"__STrendLine": "___STrendLine_ul6zh_gg_",
|
|
27
|
+
"__STrendBar": "___STrendBar_ul6zh_gg_",
|
|
28
|
+
"@pulse": "pulse_ul6zh",
|
|
29
|
+
"_animate": "__animate_ul6zh_gg_",
|
|
30
|
+
"_semi": "__semi_ul6zh_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_1b7u0{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_1b7u0{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_1b7u0_gg_.__loading_1b7u0_gg_,.___SLineGauge_1b7u0_gg_.__loading_1b7u0_gg_,.___STrendBar_1b7u0_gg_.__loading_1b7u0_gg_,.___STrendLine_1b7u0_gg_.__loading_1b7u0_gg_{animation-name:pulse_1b7u0;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_1b7u0_gg_{height:8px;background-color:var(--base-bg-color_1b7u0, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_1b7u0_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_1b7u0_gg_.__percent_1b7u0_gg_{width:var(--percent_1b7u0)}.___SLineSegmentItem_1b7u0_gg_.__color_1b7u0_gg_,.___SLineValue_1b7u0_gg_.__color_1b7u0_gg_{background-color:var(--color_1b7u0, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_1b7u0_gg_.__segments_1b7u0_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_1b7u0_gg_,.___SLineGaugeSegment_1b7u0_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_1b7u0_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_1b7u0_gg_{height:8px;background:0 0;border-right-color:var(--intergalactic-chart-grid-border, #ffffff);border-right-style:solid;border-right-width:1px;box-sizing:content-box}.___SAnimationLine_1b7u0_gg_{background-color:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9);transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out;animation-name:move-line_1b7u0;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}" /*__inner_css_end__*/, "1b7u0_gg_") /*__reshadow_css_end__*/, {
|
|
22
|
+
"__SLineGauge": "___SLineGauge_1b7u0_gg_",
|
|
23
|
+
"_loading": "__loading_1b7u0_gg_",
|
|
24
|
+
"__SDonutContainer": "___SDonutContainer_1b7u0_gg_",
|
|
25
|
+
"__STrendLine": "___STrendLine_1b7u0_gg_",
|
|
26
|
+
"__STrendBar": "___STrendBar_1b7u0_gg_",
|
|
27
|
+
"@pulse": "pulse_1b7u0",
|
|
28
|
+
"--base-bg-color": "--base-bg-color_1b7u0",
|
|
29
|
+
"__SLineValue": "___SLineValue_1b7u0_gg_",
|
|
30
|
+
"_percent": "__percent_1b7u0_gg_",
|
|
31
|
+
"--percent": "--percent_1b7u0",
|
|
32
|
+
"_color": "__color_1b7u0_gg_",
|
|
33
|
+
"__SLineSegmentItem": "___SLineSegmentItem_1b7u0_gg_",
|
|
34
|
+
"--color": "--color_1b7u0",
|
|
35
|
+
"_segments": "__segments_1b7u0_gg_",
|
|
36
|
+
"__SLineGaugeSegment": "___SLineGaugeSegment_1b7u0_gg_",
|
|
37
|
+
"__SAnimationLine": "___SAnimationLine_1b7u0_gg_",
|
|
38
|
+
"@move-line": "move-line_1b7u0"
|
|
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_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}" /*__inner_css_end__*/, "18ffn_gg_") /*__reshadow_css_end__*/, {
|
|
25
|
+
"__SLineGauge": "___SLineGauge_18ffn_gg_",
|
|
26
|
+
"_loading": "__loading_18ffn_gg_",
|
|
27
|
+
"__SDonutContainer": "___SDonutContainer_18ffn_gg_",
|
|
28
|
+
"__STrendLine": "___STrendLine_18ffn_gg_",
|
|
29
|
+
"__STrendBar": "___STrendBar_18ffn_gg_",
|
|
30
|
+
"@pulse": "pulse_18ffn"
|
|
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_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}" /*__inner_css_end__*/, "18ffn_gg_") /*__reshadow_css_end__*/, {
|
|
26
|
+
"__SLineGauge": "___SLineGauge_18ffn_gg_",
|
|
27
|
+
"_loading": "__loading_18ffn_gg_",
|
|
28
|
+
"__SDonutContainer": "___SDonutContainer_18ffn_gg_",
|
|
29
|
+
"__STrendLine": "___STrendLine_18ffn_gg_",
|
|
30
|
+
"__STrendBar": "___STrendBar_18ffn_gg_",
|
|
31
|
+
"@pulse": "pulse_18ffn"
|
|
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_ul6zh{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_ul6zh_gg_.__loading_ul6zh_gg_,.___SLineGauge_ul6zh_gg_.__loading_ul6zh_gg_,.___STrendBar_ul6zh_gg_.__loading_ul6zh_gg_,.___STrendLine_ul6zh_gg_.__loading_ul6zh_gg_{animation-name:pulse_ul6zh;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_ul6zh_gg_.__semi_ul6zh_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_ul6zh_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_ul6zh_gg_.__animate_ul6zh_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}" /*__inner_css_end__*/, "ul6zh_gg_") /*__reshadow_css_end__*/, {
|
|
16
|
+
"__SLineGauge": "___SLineGauge_ul6zh_gg_",
|
|
17
|
+
"_loading": "__loading_ul6zh_gg_",
|
|
18
|
+
"__SDonutContainer": "___SDonutContainer_ul6zh_gg_",
|
|
19
|
+
"__STrendLine": "___STrendLine_ul6zh_gg_",
|
|
20
|
+
"__STrendBar": "___STrendBar_ul6zh_gg_",
|
|
21
|
+
"@pulse": "pulse_ul6zh",
|
|
22
|
+
"_animate": "__animate_ul6zh_gg_",
|
|
23
|
+
"_semi": "__semi_ul6zh_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_1b7u0{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_1b7u0{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_1b7u0_gg_.__loading_1b7u0_gg_,.___SLineGauge_1b7u0_gg_.__loading_1b7u0_gg_,.___STrendBar_1b7u0_gg_.__loading_1b7u0_gg_,.___STrendLine_1b7u0_gg_.__loading_1b7u0_gg_{animation-name:pulse_1b7u0;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_1b7u0_gg_{height:8px;background-color:var(--base-bg-color_1b7u0, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_1b7u0_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_1b7u0_gg_.__percent_1b7u0_gg_{width:var(--percent_1b7u0)}.___SLineSegmentItem_1b7u0_gg_.__color_1b7u0_gg_,.___SLineValue_1b7u0_gg_.__color_1b7u0_gg_{background-color:var(--color_1b7u0, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_1b7u0_gg_.__segments_1b7u0_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_1b7u0_gg_,.___SLineGaugeSegment_1b7u0_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_1b7u0_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_1b7u0_gg_{height:8px;background:0 0;border-right-color:var(--intergalactic-chart-grid-border, #ffffff);border-right-style:solid;border-right-width:1px;box-sizing:content-box}.___SAnimationLine_1b7u0_gg_{background-color:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9);transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out;animation-name:move-line_1b7u0;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}" /*__inner_css_end__*/, "1b7u0_gg_") /*__reshadow_css_end__*/, {
|
|
17
|
+
"__SLineGauge": "___SLineGauge_1b7u0_gg_",
|
|
18
|
+
"_loading": "__loading_1b7u0_gg_",
|
|
19
|
+
"__SDonutContainer": "___SDonutContainer_1b7u0_gg_",
|
|
20
|
+
"__STrendLine": "___STrendLine_1b7u0_gg_",
|
|
21
|
+
"__STrendBar": "___STrendBar_1b7u0_gg_",
|
|
22
|
+
"@pulse": "pulse_1b7u0",
|
|
23
|
+
"--base-bg-color": "--base-bg-color_1b7u0",
|
|
24
|
+
"__SLineValue": "___SLineValue_1b7u0_gg_",
|
|
25
|
+
"_percent": "__percent_1b7u0_gg_",
|
|
26
|
+
"--percent": "--percent_1b7u0",
|
|
27
|
+
"_color": "__color_1b7u0_gg_",
|
|
28
|
+
"__SLineSegmentItem": "___SLineSegmentItem_1b7u0_gg_",
|
|
29
|
+
"--color": "--color_1b7u0",
|
|
30
|
+
"_segments": "__segments_1b7u0_gg_",
|
|
31
|
+
"__SLineGaugeSegment": "___SLineGaugeSegment_1b7u0_gg_",
|
|
32
|
+
"__SAnimationLine": "___SAnimationLine_1b7u0_gg_",
|
|
33
|
+
"@move-line": "move-line_1b7u0"
|
|
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_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}" /*__inner_css_end__*/, "18ffn_gg_") /*__reshadow_css_end__*/, {
|
|
17
|
+
"__SLineGauge": "___SLineGauge_18ffn_gg_",
|
|
18
|
+
"_loading": "__loading_18ffn_gg_",
|
|
19
|
+
"__SDonutContainer": "___SDonutContainer_18ffn_gg_",
|
|
20
|
+
"__STrendLine": "___STrendLine_18ffn_gg_",
|
|
21
|
+
"__STrendBar": "___STrendBar_18ffn_gg_",
|
|
22
|
+
"@pulse": "pulse_18ffn"
|
|
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_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}" /*__inner_css_end__*/, "18ffn_gg_") /*__reshadow_css_end__*/, {
|
|
18
|
+
"__SLineGauge": "___SLineGauge_18ffn_gg_",
|
|
19
|
+
"_loading": "__loading_18ffn_gg_",
|
|
20
|
+
"__SDonutContainer": "___SDonutContainer_18ffn_gg_",
|
|
21
|
+
"__STrendLine": "___STrendLine_18ffn_gg_",
|
|
22
|
+
"__STrendBar": "___STrendBar_18ffn_gg_",
|
|
23
|
+
"@pulse": "pulse_18ffn"
|
|
24
24
|
});
|
|
25
25
|
import { extractAriaProps } from '@semcore/utils/lib/ariaProps';
|
|
26
26
|
var TrendLineRoot = /*#__PURE__*/function (_Trend) {
|
|
@@ -3,7 +3,7 @@ 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 m 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";
|
|
@@ -14,28 +14,28 @@ var J = (
|
|
|
14
14
|
/*__reshadow_css_start__*/
|
|
15
15
|
(R.insert(
|
|
16
16
|
/*__inner_css_start__*/
|
|
17
|
-
"@keyframes
|
|
18
|
-
"
|
|
17
|
+
"@keyframes pulse_ul6zh{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_ul6zh_gg_.__loading_ul6zh_gg_,.___SLineGauge_ul6zh_gg_.__loading_ul6zh_gg_,.___STrendBar_ul6zh_gg_.__loading_ul6zh_gg_,.___STrendLine_ul6zh_gg_.__loading_ul6zh_gg_{animation-name:pulse_ul6zh;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_ul6zh_gg_.__semi_ul6zh_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_ul6zh_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_ul6zh_gg_.__animate_ul6zh_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}",
|
|
18
|
+
"ul6zh_gg_"
|
|
19
19
|
), {
|
|
20
|
-
__SLineGauge: "
|
|
21
|
-
_loading: "
|
|
22
|
-
__SDonutContainer: "
|
|
23
|
-
__STrendLine: "
|
|
24
|
-
__STrendBar: "
|
|
25
|
-
"@pulse": "
|
|
26
|
-
_animate: "
|
|
27
|
-
_semi: "
|
|
20
|
+
__SLineGauge: "___SLineGauge_ul6zh_gg_",
|
|
21
|
+
_loading: "__loading_ul6zh_gg_",
|
|
22
|
+
__SDonutContainer: "___SDonutContainer_ul6zh_gg_",
|
|
23
|
+
__STrendLine: "___STrendLine_ul6zh_gg_",
|
|
24
|
+
__STrendBar: "___STrendBar_ul6zh_gg_",
|
|
25
|
+
"@pulse": "pulse_ul6zh",
|
|
26
|
+
_animate: "__animate_ul6zh_gg_",
|
|
27
|
+
_semi: "__semi_ul6zh_gg_"
|
|
28
28
|
})
|
|
29
|
-
),
|
|
30
|
-
G(n,
|
|
31
|
-
var
|
|
29
|
+
), l = /* @__PURE__ */ function(p) {
|
|
30
|
+
G(n, p);
|
|
31
|
+
var u = N(n);
|
|
32
32
|
function n() {
|
|
33
|
-
return M(this, n),
|
|
33
|
+
return M(this, n), u.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,
|
|
38
|
+
var x = this.asProps, t, B = F, o = this.asProps, _ = o.value, b = o.styles, d = o.baseBgColor, E = d === void 0 ? "chart-grid-bar-chart-base-bg" : d, f = o.color, w = f === void 0 ? "chart-palette-order-1" : f, g = o.resolveColor, e = o.isSemiDonut, v = o.loading, h = e ? 6 : 4, i = e ? 9 : 10, a = e ? Math.PI * i : Math.PI * 2 * i, s = a * (_ / 100), S = a * ((100 - _) / 100), c = e ? a / (100 / 3) : a / 100, D = "".concat(S - 2 * c, " ").concat(c), y = "".concat(c, " ").concat(_ < 99 ? "".concat(D) : "", " ").concat(a);
|
|
39
39
|
e && (y = "".concat(c, " ").concat(_ < 95 ? "".concat(D) : "", " ").concat(a));
|
|
40
40
|
var L = e ? "0 0 24 12" : "0 0 24 24", T = -1 * (s + (e ? c : 0)), z = H(this.asProps), $ = z.__excludeProps, A = z.extractedAriaProps;
|
|
41
41
|
return t = I(b), /* @__PURE__ */ r.createElement(B, t.cn("SDonutContainer", k({}, P({
|
|
@@ -51,16 +51,16 @@ var J = (
|
|
|
51
51
|
cx: "12",
|
|
52
52
|
cy: "12",
|
|
53
53
|
r: i,
|
|
54
|
-
strokeWidth:
|
|
55
|
-
stroke:
|
|
54
|
+
strokeWidth: h,
|
|
55
|
+
stroke: g(E),
|
|
56
56
|
strokeDasharray: v ? void 0 : "".concat(S, " ").concat(a),
|
|
57
57
|
strokeDashoffset: T
|
|
58
58
|
})), !v && /* @__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: h,
|
|
63
|
+
stroke: g(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:
|
|
73
|
+
strokeWidth: h,
|
|
74
|
+
stroke: g("chart-grid-border"),
|
|
75
75
|
strokeDasharray: y,
|
|
76
76
|
strokeDashoffset: -1 * s
|
|
77
77
|
}))))));
|
|
78
78
|
}
|
|
79
79
|
}]), n;
|
|
80
80
|
}(j);
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
81
|
+
m(l, "enhance", [q()]);
|
|
82
|
+
m(l, "style", J);
|
|
83
|
+
m(l, "defaultProps", {
|
|
84
84
|
animate: !0
|
|
85
85
|
});
|
|
86
|
-
var K = C(
|
|
86
|
+
var K = C(l);
|
|
87
87
|
K.displayName = "MiniChart.ScoreDonut";
|
|
88
|
-
var O = C(
|
|
88
|
+
var O = C(l, {}, {
|
|
89
89
|
enhancements: [function() {
|
|
90
90
|
return {
|
|
91
|
-
wrapperProps: function(
|
|
92
|
-
return P(
|
|
91
|
+
wrapperProps: function(u) {
|
|
92
|
+
return P(u, {
|
|
93
93
|
isSemiDonut: !0
|
|
94
94
|
});
|
|
95
95
|
}
|
|
@@ -5,36 +5,36 @@ import X from "@babel/runtime/helpers/esm/inherits";
|
|
|
5
5
|
import j from "@babel/runtime/helpers/esm/createSuper";
|
|
6
6
|
import S from "@babel/runtime/helpers/esm/defineProperty";
|
|
7
7
|
import { sstyled as z } from "@semcore/utils/lib/core/index";
|
|
8
|
-
import F, { sstyled as
|
|
8
|
+
import F, { sstyled as d, assignProps as G, Component as M } from "@semcore/core";
|
|
9
9
|
import e from "react";
|
|
10
|
-
import { Box as
|
|
10
|
+
import { Box as g, Flex as q } from "@semcore/flex-box";
|
|
11
11
|
import H from "@semcore/utils/lib/enhances/resolveColorEnhance";
|
|
12
12
|
var J = (
|
|
13
13
|
/*__reshadow_css_start__*/
|
|
14
14
|
(z.insert(
|
|
15
15
|
/*__inner_css_start__*/
|
|
16
|
-
"@keyframes
|
|
17
|
-
"
|
|
16
|
+
"@keyframes pulse_1b7u0{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_1b7u0{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_1b7u0_gg_.__loading_1b7u0_gg_,.___SLineGauge_1b7u0_gg_.__loading_1b7u0_gg_,.___STrendBar_1b7u0_gg_.__loading_1b7u0_gg_,.___STrendLine_1b7u0_gg_.__loading_1b7u0_gg_{animation-name:pulse_1b7u0;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_1b7u0_gg_{height:8px;background-color:var(--base-bg-color_1b7u0, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_1b7u0_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_1b7u0_gg_.__percent_1b7u0_gg_{width:var(--percent_1b7u0)}.___SLineSegmentItem_1b7u0_gg_.__color_1b7u0_gg_,.___SLineValue_1b7u0_gg_.__color_1b7u0_gg_{background-color:var(--color_1b7u0, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_1b7u0_gg_.__segments_1b7u0_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_1b7u0_gg_,.___SLineGaugeSegment_1b7u0_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_1b7u0_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_1b7u0_gg_{height:8px;background:0 0;border-right-color:var(--intergalactic-chart-grid-border, #ffffff);border-right-style:solid;border-right-width:1px;box-sizing:content-box}.___SAnimationLine_1b7u0_gg_{background-color:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9);transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out;animation-name:move-line_1b7u0;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}",
|
|
17
|
+
"1b7u0_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_1b7u0_gg_",
|
|
20
|
+
_loading: "__loading_1b7u0_gg_",
|
|
21
|
+
__SDonutContainer: "___SDonutContainer_1b7u0_gg_",
|
|
22
|
+
__STrendLine: "___STrendLine_1b7u0_gg_",
|
|
23
|
+
__STrendBar: "___STrendBar_1b7u0_gg_",
|
|
24
|
+
"@pulse": "pulse_1b7u0",
|
|
25
|
+
"--base-bg-color": "--base-bg-color_1b7u0",
|
|
26
|
+
__SLineValue: "___SLineValue_1b7u0_gg_",
|
|
27
|
+
_percent: "__percent_1b7u0_gg_",
|
|
28
|
+
"--percent": "--percent_1b7u0",
|
|
29
|
+
_color: "__color_1b7u0_gg_",
|
|
30
|
+
__SLineSegmentItem: "___SLineSegmentItem_1b7u0_gg_",
|
|
31
|
+
"--color": "--color_1b7u0",
|
|
32
|
+
_segments: "__segments_1b7u0_gg_",
|
|
33
|
+
__SLineGaugeSegment: "___SLineGaugeSegment_1b7u0_gg_",
|
|
34
|
+
__SAnimationLine: "___SAnimationLine_1b7u0_gg_",
|
|
35
|
+
"@move-line": "move-line_1b7u0"
|
|
36
36
|
})
|
|
37
|
-
),
|
|
37
|
+
), l = /* @__PURE__ */ function(p) {
|
|
38
38
|
X(n, p);
|
|
39
39
|
var v = j(n);
|
|
40
40
|
function n() {
|
|
@@ -43,59 +43,59 @@ var J = (
|
|
|
43
43
|
return R(n, [{
|
|
44
44
|
key: "getSegmentProps",
|
|
45
45
|
value: function(t) {
|
|
46
|
-
var _ = this.asProps,
|
|
47
|
-
e.Children.forEach(
|
|
48
|
-
/* @__PURE__ */ e.isValidElement(
|
|
46
|
+
var _ = this.asProps, c = _.children, L = _.resolveColor, a = 0;
|
|
47
|
+
e.Children.forEach(c, function(s) {
|
|
48
|
+
/* @__PURE__ */ e.isValidElement(s) && (a = a + s.props.value);
|
|
49
49
|
});
|
|
50
|
-
var
|
|
50
|
+
var u = a > 0 ? 100 * t.value / a : 0;
|
|
51
51
|
return {
|
|
52
|
-
w: "".concat(
|
|
52
|
+
w: "".concat(u, "%"),
|
|
53
53
|
"use:color": L(t.color)
|
|
54
54
|
};
|
|
55
55
|
}
|
|
56
56
|
}, {
|
|
57
57
|
key: "render",
|
|
58
58
|
value: function() {
|
|
59
|
-
var t = this.asProps, _,
|
|
59
|
+
var t = this.asProps, _, c = g, L = g, a = g, u = q, s = g, r = this.asProps, f = r.value, y = r.styles, E = r.color, P = E === void 0 ? "chart-palette-order-1" : E, k = r.baseBgColor, m = r.resolveColor, B = r.loading, T = r.children, $ = r.Children, w = r.animate;
|
|
60
60
|
if (T !== void 0) {
|
|
61
61
|
var i;
|
|
62
|
-
return i = y
|
|
62
|
+
return i = d(y), /* @__PURE__ */ e.createElement(c, i.cn("SLineGauge", x({}, G({
|
|
63
63
|
segments: !0,
|
|
64
|
-
"base-bg-color":
|
|
65
|
-
}, t))), /* @__PURE__ */ e.createElement(
|
|
64
|
+
"base-bg-color": m(k)
|
|
65
|
+
}, t))), /* @__PURE__ */ e.createElement(u, 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 b = 0; b < o; b++) {
|
|
70
70
|
var I, D = "calc((100% - ".concat(o - 1, "px) / ").concat(o, ")");
|
|
71
|
-
C.push((I = y
|
|
72
|
-
key:
|
|
73
|
-
color:
|
|
71
|
+
C.push((I = d(y), /* @__PURE__ */ e.createElement(s, I.cn("SLineSegmentItem", {
|
|
72
|
+
key: b,
|
|
73
|
+
color: b < f ? m(P) : void 0,
|
|
74
74
|
w: D
|
|
75
75
|
}))));
|
|
76
76
|
}
|
|
77
77
|
var V = "".concat(f, "%");
|
|
78
|
-
return o && (V = "".concat(f / o * 100, "%")), _ = y
|
|
79
|
-
"base-bg-color":
|
|
78
|
+
return o && (V = "".concat(f / o * 100, "%")), _ = d(y), /* @__PURE__ */ e.createElement(c, _.cn("SLineGauge", x({}, G({
|
|
79
|
+
"base-bg-color": m(k)
|
|
80
80
|
}, t))), !B && /* @__PURE__ */ e.createElement(L, _.cn("SLineValue", {
|
|
81
81
|
w: V,
|
|
82
|
-
color:
|
|
83
|
-
})), !!C.length && /* @__PURE__ */ e.createElement(
|
|
82
|
+
color: m(P)
|
|
83
|
+
})), !!C.length && /* @__PURE__ */ e.createElement(u, _.cn("SLineGaugeSegment", {}), C), w && /* @__PURE__ */ e.createElement(a, _.cn("SAnimationLine", {})));
|
|
84
84
|
}
|
|
85
85
|
}]), n;
|
|
86
86
|
}(M);
|
|
87
|
-
S(
|
|
88
|
-
S(
|
|
89
|
-
S(
|
|
90
|
-
S(
|
|
87
|
+
S(l, "enhance", [H()]);
|
|
88
|
+
S(l, "displayName", "ScoreLine");
|
|
89
|
+
S(l, "style", J);
|
|
90
|
+
S(l, "defaultProps", {
|
|
91
91
|
animate: !0
|
|
92
92
|
});
|
|
93
93
|
function A(p) {
|
|
94
|
-
var v = arguments[0], n, h = p.styles, t =
|
|
95
|
-
return n =
|
|
94
|
+
var v = arguments[0], n, h = p.styles, t = g;
|
|
95
|
+
return n = d(h), /* @__PURE__ */ e.createElement(t, n.cn("SLineSegmentItem", x({}, G({}, v))));
|
|
96
96
|
}
|
|
97
97
|
A.displayName = "Segment";
|
|
98
|
-
var K = F(
|
|
98
|
+
var K = F(l, {
|
|
99
99
|
Segment: A
|
|
100
100
|
});
|
|
101
101
|
K.displayName = "MiniChart.ScoreLine";
|
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
import
|
|
1
|
+
import w from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
2
2
|
import h from "@babel/runtime/helpers/esm/objectSpread2";
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import { sstyled as
|
|
9
|
-
import v, { assignProps as y, sstyled as
|
|
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 R } from "@semcore/utils/lib/core/index";
|
|
9
|
+
import v, { assignProps as y, sstyled as G } from "@semcore/core";
|
|
10
10
|
import _ from "react";
|
|
11
|
-
import
|
|
12
|
-
import { Trend as
|
|
13
|
-
import { Box as
|
|
14
|
-
import { extractAriaProps as
|
|
15
|
-
var
|
|
11
|
+
import N from "@semcore/utils/lib/enhances/resolveColorEnhance";
|
|
12
|
+
import { Trend as $ } from "./Trend.mjs";
|
|
13
|
+
import { Box as M } from "@semcore/flex-box";
|
|
14
|
+
import { extractAriaProps as W } from "@semcore/utils/lib/ariaProps";
|
|
15
|
+
var j = (
|
|
16
16
|
/*__reshadow_css_start__*/
|
|
17
|
-
(
|
|
17
|
+
(R.insert(
|
|
18
18
|
/*__inner_css_start__*/
|
|
19
|
-
"@keyframes
|
|
20
|
-
"
|
|
19
|
+
"@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}",
|
|
20
|
+
"18ffn_gg_"
|
|
21
21
|
), {
|
|
22
|
-
__SLineGauge: "
|
|
23
|
-
_loading: "
|
|
24
|
-
__SDonutContainer: "
|
|
25
|
-
__STrendLine: "
|
|
26
|
-
__STrendBar: "
|
|
27
|
-
"@pulse": "
|
|
22
|
+
__SLineGauge: "___SLineGauge_18ffn_gg_",
|
|
23
|
+
_loading: "__loading_18ffn_gg_",
|
|
24
|
+
__SDonutContainer: "___SDonutContainer_18ffn_gg_",
|
|
25
|
+
__STrendLine: "___STrendLine_18ffn_gg_",
|
|
26
|
+
__STrendBar: "___STrendBar_18ffn_gg_",
|
|
27
|
+
"@pulse": "pulse_18ffn"
|
|
28
28
|
})
|
|
29
|
-
), o = /* @__PURE__ */ function(
|
|
30
|
-
|
|
31
|
-
var s =
|
|
29
|
+
), o = /* @__PURE__ */ function(g) {
|
|
30
|
+
D(e, g);
|
|
31
|
+
var s = E(e);
|
|
32
32
|
function e() {
|
|
33
|
-
return
|
|
33
|
+
return L(this, e), s.apply(this, arguments);
|
|
34
34
|
}
|
|
35
|
-
return
|
|
35
|
+
return A(e, [{
|
|
36
36
|
key: "defaultData",
|
|
37
37
|
get: function() {
|
|
38
38
|
return [{
|
|
@@ -48,42 +48,42 @@ var W = (
|
|
|
48
48
|
}, {
|
|
49
49
|
key: "data",
|
|
50
50
|
get: function() {
|
|
51
|
-
var
|
|
51
|
+
var i = this.asProps, r = i.data, t = i.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 =
|
|
57
|
+
var i = this.asProps, r, t = this, S = M, a = this.asProps, T = a.styles, u = a.resolveColor, C = a.isHistogram, B = a.animate, x = a.loading, f = this.defaultWidth / this.data.length, p = W(this.asProps), H = p.__excludeProps, k = p.extractedAriaProps;
|
|
58
|
+
return r = G(T), /* @__PURE__ */ _.createElement(S, r.cn("STrendBar", h({}, y({
|
|
59
59
|
ref: this.containerRef,
|
|
60
|
-
__excludeProps: ["data"].concat(
|
|
61
|
-
},
|
|
60
|
+
__excludeProps: ["data"].concat(w(H))
|
|
61
|
+
}, i))), /* @__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
|
-
},
|
|
67
|
-
var
|
|
68
|
-
return
|
|
69
|
-
key:
|
|
70
|
-
x:
|
|
71
|
-
y: t.defaultHeight -
|
|
72
|
-
width:
|
|
73
|
-
height:
|
|
74
|
-
fill:
|
|
75
|
-
},
|
|
66
|
+
}, k)), this.data.map(function(n, m) {
|
|
67
|
+
var c = u("chart-palette-order-other-data");
|
|
68
|
+
return n.color && (c = u(n.color)), /* @__PURE__ */ _.createElement("rect", {
|
|
69
|
+
key: m,
|
|
70
|
+
x: f * m,
|
|
71
|
+
y: t.defaultHeight - n.value,
|
|
72
|
+
width: C ? f : f * 0.8,
|
|
73
|
+
height: n.value,
|
|
74
|
+
fill: c
|
|
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 - n.value),
|
|
78
78
|
dur: "500ms"
|
|
79
79
|
}));
|
|
80
80
|
})));
|
|
81
81
|
}
|
|
82
82
|
}]), e;
|
|
83
|
-
}(
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
83
|
+
}($);
|
|
84
|
+
l(o, "enhance", [N()]);
|
|
85
|
+
l(o, "style", j);
|
|
86
|
+
l(o, "defaultProps", {
|
|
87
87
|
animate: !0
|
|
88
88
|
});
|
|
89
89
|
var P = v(o);
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import
|
|
1
|
+
import A from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
2
2
|
import y from "@babel/runtime/helpers/esm/objectSpread2";
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import { sstyled as
|
|
9
|
-
import
|
|
10
|
-
import
|
|
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 h from "@babel/runtime/helpers/esm/defineProperty";
|
|
8
|
+
import { sstyled as $ } from "@semcore/utils/lib/core/index";
|
|
9
|
+
import C, { assignProps as S, sstyled as b } from "@semcore/core";
|
|
10
|
+
import i from "react";
|
|
11
11
|
import D from "@semcore/utils/lib/enhances/resolveColorEnhance";
|
|
12
12
|
import B from "@semcore/utils/lib/uniqueID";
|
|
13
13
|
import { Trend as j } from "./Trend.mjs";
|
|
@@ -15,25 +15,25 @@ import { Box as G } from "@semcore/flex-box";
|
|
|
15
15
|
import { extractAriaProps as N } from "@semcore/utils/lib/ariaProps";
|
|
16
16
|
var M = (
|
|
17
17
|
/*__reshadow_css_start__*/
|
|
18
|
-
(
|
|
18
|
+
($.insert(
|
|
19
19
|
/*__inner_css_start__*/
|
|
20
|
-
"@keyframes
|
|
21
|
-
"
|
|
20
|
+
"@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}",
|
|
21
|
+
"18ffn_gg_"
|
|
22
22
|
), {
|
|
23
|
-
__SLineGauge: "
|
|
24
|
-
_loading: "
|
|
25
|
-
__SDonutContainer: "
|
|
26
|
-
__STrendLine: "
|
|
27
|
-
__STrendBar: "
|
|
28
|
-
"@pulse": "
|
|
23
|
+
__SLineGauge: "___SLineGauge_18ffn_gg_",
|
|
24
|
+
_loading: "__loading_18ffn_gg_",
|
|
25
|
+
__SDonutContainer: "___SDonutContainer_18ffn_gg_",
|
|
26
|
+
__STrendLine: "___STrendLine_18ffn_gg_",
|
|
27
|
+
__STrendBar: "___STrendBar_18ffn_gg_",
|
|
28
|
+
"@pulse": "pulse_18ffn"
|
|
29
29
|
})
|
|
30
|
-
), l = /* @__PURE__ */ function(
|
|
31
|
-
|
|
32
|
-
var
|
|
30
|
+
), l = /* @__PURE__ */ function(g) {
|
|
31
|
+
H(s, g);
|
|
32
|
+
var f = W(s);
|
|
33
33
|
function s() {
|
|
34
|
-
return
|
|
34
|
+
return E(this, s), f.apply(this, arguments);
|
|
35
35
|
}
|
|
36
|
-
return
|
|
36
|
+
return R(s, [{
|
|
37
37
|
key: "defaultData",
|
|
38
38
|
get: function() {
|
|
39
39
|
return [15, 70, 20, 85, 20];
|
|
@@ -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, a = e.loading;
|
|
51
|
+
return a ? this.defaultData : t;
|
|
52
52
|
}
|
|
53
53
|
}, {
|
|
54
54
|
key: "svgWidth",
|
|
@@ -63,51 +63,51 @@ 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, a = e.color, r = a === void 0 ? "chart-palette-order-1" : a, o = e.loading;
|
|
67
|
+
return t(o ? "skeleton-bg" : r);
|
|
68
68
|
}
|
|
69
69
|
}, {
|
|
70
70
|
key: "render",
|
|
71
71
|
value: function() {
|
|
72
|
-
for (var e = this.asProps, t,
|
|
73
|
-
|
|
74
|
-
var v = N(this.asProps),
|
|
75
|
-
return t =
|
|
72
|
+
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++)
|
|
73
|
+
d.push("".concat(P * c, ",").concat(this.defaultHeight - this.data[c]));
|
|
74
|
+
var v = N(this.asProps), L = v.__excludeProps, w = v.extractedAriaProps;
|
|
75
|
+
return t = b(x), /* @__PURE__ */ i.createElement(a, t.cn("STrendLine", y({}, S({
|
|
76
76
|
ref: this.containerRef,
|
|
77
|
-
__excludeProps: ["data"].concat(
|
|
78
|
-
}, e))), /* @__PURE__ */
|
|
77
|
+
__excludeProps: ["data"].concat(A(L))
|
|
78
|
+
}, e))), /* @__PURE__ */ i.createElement("svg", t.cn("svg", y({
|
|
79
79
|
width: "100%",
|
|
80
80
|
height: "100%",
|
|
81
81
|
viewBox: "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight),
|
|
82
82
|
role: "img"
|
|
83
|
-
},
|
|
84
|
-
points:
|
|
83
|
+
}, w)), /* @__PURE__ */ i.createElement("polyline", t.cn("polyline", {
|
|
84
|
+
points: d.join(" "),
|
|
85
85
|
stroke: this.color,
|
|
86
86
|
strokeWidth: "4",
|
|
87
87
|
fill: "none",
|
|
88
|
-
clipPath: "url(#".concat(
|
|
89
|
-
})),
|
|
90
|
-
points: "0,".concat(this.defaultHeight, " ").concat(
|
|
88
|
+
clipPath: "url(#".concat(o, ")")
|
|
89
|
+
})), k && /* @__PURE__ */ i.createElement("polyline", t.cn("polyline", {
|
|
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
|
-
})),
|
|
93
|
+
clipPath: "url(#".concat(o, ")")
|
|
94
|
+
})), u && !m && /* @__PURE__ */ i.createElement("circle", t.cn("circle", {
|
|
95
95
|
cx: P * (_ - 1),
|
|
96
96
|
cy: this.defaultHeight - this.data[_ - 1],
|
|
97
97
|
r: this.lastPointRadius,
|
|
98
|
-
fill:
|
|
99
|
-
stroke:
|
|
98
|
+
fill: p(u),
|
|
99
|
+
stroke: p("chart-grid-border"),
|
|
100
100
|
strokeWidth: 4,
|
|
101
|
-
clipPath: "url(#".concat(
|
|
102
|
-
})),
|
|
103
|
-
id:
|
|
104
|
-
}), /* @__PURE__ */
|
|
101
|
+
clipPath: "url(#".concat(o, ")")
|
|
102
|
+
})), T && !m && /* @__PURE__ */ i.createElement("clipPath", t.cn("clipPath", {
|
|
103
|
+
id: o
|
|
104
|
+
}), /* @__PURE__ */ i.createElement("rect", t.cn("rect", {
|
|
105
105
|
x: "0",
|
|
106
106
|
y: "0",
|
|
107
107
|
width: "100%",
|
|
108
108
|
height: "100%",
|
|
109
109
|
fill: "black"
|
|
110
|
-
}), /* @__PURE__ */
|
|
110
|
+
}), /* @__PURE__ */ i.createElement("animate", t.cn("animate", {
|
|
111
111
|
dur: "500ms",
|
|
112
112
|
attributeName: "width",
|
|
113
113
|
values: "0;100%"
|
|
@@ -115,18 +115,18 @@ var M = (
|
|
|
115
115
|
}
|
|
116
116
|
}]), s;
|
|
117
117
|
}(j);
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
118
|
+
h(l, "enhance", [D(), B()]);
|
|
119
|
+
h(l, "style", M);
|
|
120
|
+
h(l, "defaultProps", {
|
|
121
121
|
animate: !0
|
|
122
122
|
});
|
|
123
|
-
var q =
|
|
123
|
+
var q = C(l);
|
|
124
124
|
q.displayName = "MiniChart.TrendLine";
|
|
125
|
-
var I =
|
|
125
|
+
var I = C(l, {}, {
|
|
126
126
|
enhancements: [function() {
|
|
127
127
|
return {
|
|
128
|
-
wrapperProps: function(
|
|
129
|
-
return
|
|
128
|
+
wrapperProps: function(f) {
|
|
129
|
+
return S(f, {
|
|
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.0",
|
|
4
|
+
"version": "0.29.1-prerelease.0",
|
|
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.0",
|
|
18
|
-
"@semcore/utils": "4.48.0"
|
|
17
|
+
"@semcore/flex-box": "5.41.1-prerelease.0",
|
|
18
|
+
"@semcore/utils": "4.48.1-prerelease.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
|
-
"@semcore/core": "^2.
|
|
21
|
+
"@semcore/core": "^2.39.1-prerelease.0",
|
|
22
22
|
"react": "16.8 - 18",
|
|
23
23
|
"react-dom": "16.8 - 18"
|
|
24
24
|
},
|