@semcore/mini-chart 0.29.4 → 0.30.0-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 +60 -64
- package/lib/cjs/component/score/Donut.js.map +1 -1
- package/lib/cjs/component/score/Line.js +38 -41
- package/lib/cjs/component/score/Line.js.map +1 -1
- package/lib/cjs/component/score/Line.types.js.map +1 -1
- package/lib/cjs/component/score/Score.js.map +1 -1
- package/lib/cjs/component/score/index.js.map +1 -1
- package/lib/cjs/component/score/line.shadow.css +4 -4
- package/lib/cjs/component/trend/Bar.js +22 -28
- package/lib/cjs/component/trend/Bar.js.map +1 -1
- package/lib/cjs/component/trend/Line.js +20 -26
- package/lib/cjs/component/trend/Line.js.map +1 -1
- package/lib/cjs/component/trend/Trend.js +9 -13
- package/lib/cjs/component/trend/Trend.js.map +1 -1
- package/lib/cjs/component/trend/index.js +1 -1
- package/lib/cjs/component/trend/index.js.map +1 -1
- package/lib/cjs/index.js +1 -2
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/utils/ScoreDonutUtils.js +87 -0
- package/lib/cjs/utils/ScoreDonutUtils.js.map +1 -0
- package/lib/es6/component/score/Donut.js +57 -58
- package/lib/es6/component/score/Donut.js.map +1 -1
- package/lib/es6/component/score/Line.js +31 -31
- package/lib/es6/component/score/Line.js.map +1 -1
- package/lib/es6/component/score/Line.types.js.map +1 -1
- package/lib/es6/component/score/Score.js.map +1 -1
- package/lib/es6/component/score/index.js.map +1 -1
- package/lib/es6/component/score/line.shadow.css +4 -4
- package/lib/es6/component/trend/Bar.js +19 -21
- package/lib/es6/component/trend/Bar.js.map +1 -1
- package/lib/es6/component/trend/Line.js +17 -19
- package/lib/es6/component/trend/Line.js.map +1 -1
- package/lib/es6/component/trend/Trend.js +7 -10
- package/lib/es6/component/trend/Trend.js.map +1 -1
- package/lib/es6/component/trend/index.js +1 -1
- package/lib/es6/component/trend/index.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/utils/ScoreDonutUtils.js +80 -0
- package/lib/es6/utils/ScoreDonutUtils.js.map +1 -0
- package/lib/esm/component/score/Donut.mjs +58 -61
- package/lib/esm/component/score/Line.mjs +35 -37
- package/lib/esm/component/score/index.mjs +7 -0
- package/lib/esm/component/score/line.shadow.css +4 -4
- package/lib/esm/component/trend/Bar.mjs +20 -23
- package/lib/esm/component/trend/Line.mjs +20 -23
- package/lib/esm/component/trend/Trend.mjs +9 -12
- package/lib/esm/component/trend/index.mjs +8 -0
- package/lib/esm/index.mjs +5 -3
- package/lib/esm/utils/ScoreDonutUtils.mjs +82 -0
- package/lib/types/component/score/Donut.d.ts +8 -11
- package/lib/types/component/score/Line.d.ts +1 -1
- package/lib/types/component/score/Line.types.d.ts +11 -9
- package/lib/types/component/trend/Bar.d.ts +3 -9
- package/lib/types/component/trend/Line.d.ts +7 -11
- package/lib/types/component/trend/Trend.d.ts +4 -4
- package/lib/types/component/trend/index.d.ts +1 -1
- package/lib/types/utils/ScoreDonutUtils.d.ts +18 -0
- 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.30.0] - 2026-05-06
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version minor update due to children dependencies update (`@semcore/flex-box` [5.41.4 ~> 5.42.0], `@semcore/utils` [4.48.5 ~> 4.49.0], `@semcore/core` [2.39.4 ~> 2.40.0]).
|
|
10
|
+
|
|
5
11
|
## [0.29.4] - 2025-05-13
|
|
6
12
|
|
|
7
13
|
### Changed
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -9,41 +8,41 @@ exports.ScoreSemiDonut = exports.ScoreDonut = void 0;
|
|
|
9
8
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
10
9
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
10
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
+
var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
|
|
12
12
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
13
|
-
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
14
13
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
|
-
var
|
|
16
|
-
var
|
|
14
|
+
var _core = require("@semcore/core");
|
|
15
|
+
var _baseComponents = require("@semcore/base-components");
|
|
16
|
+
var _ariaProps = require("@semcore/core/lib/utils/ariaProps");
|
|
17
|
+
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/resolveColorEnhance"));
|
|
18
|
+
var _useCssVariable = require("@semcore/core/lib/utils/useCssVariable");
|
|
17
19
|
var _react = _interopRequireDefault(require("react"));
|
|
18
|
-
var
|
|
19
|
-
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
|
|
20
|
-
var _ariaProps = require("@semcore/utils/lib/ariaProps");
|
|
20
|
+
var _ScoreDonutUtils = require("../../utils/ScoreDonutUtils");
|
|
21
21
|
/*!__reshadow-styles__:"./donut.shadow.css"*/
|
|
22
|
-
var style = (
|
|
22
|
+
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_w54vj{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_w54vj_gg_.__loading_w54vj_gg_,.___SLineGauge_w54vj_gg_.__loading_w54vj_gg_,.___STrendBar_w54vj_gg_.__loading_w54vj_gg_,.___STrendLine_w54vj_gg_.__loading_w54vj_gg_{animation-name:pulse_w54vj;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_w54vj_gg_.__semi_w54vj_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_w54vj_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_w54vj_gg_.__animate_w54vj_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}", /*__inner_css_end__*/"w54vj_gg_"),
|
|
23
23
|
/*__reshadow_css_end__*/
|
|
24
24
|
{
|
|
25
|
-
"__SLineGauge": "
|
|
26
|
-
"_loading": "
|
|
27
|
-
"__SDonutContainer": "
|
|
28
|
-
"__STrendLine": "
|
|
29
|
-
"__STrendBar": "
|
|
30
|
-
"@pulse": "
|
|
31
|
-
"_animate": "
|
|
32
|
-
"_semi": "
|
|
25
|
+
"__SLineGauge": "___SLineGauge_w54vj_gg_",
|
|
26
|
+
"_loading": "__loading_w54vj_gg_",
|
|
27
|
+
"__SDonutContainer": "___SDonutContainer_w54vj_gg_",
|
|
28
|
+
"__STrendLine": "___STrendLine_w54vj_gg_",
|
|
29
|
+
"__STrendBar": "___STrendBar_w54vj_gg_",
|
|
30
|
+
"@pulse": "pulse_w54vj",
|
|
31
|
+
"_animate": "__animate_w54vj_gg_",
|
|
32
|
+
"_semi": "__semi_w54vj_gg_"
|
|
33
33
|
});
|
|
34
34
|
var DonutRoot = /*#__PURE__*/function (_Component) {
|
|
35
|
-
(0, _inherits2["default"])(DonutRoot, _Component);
|
|
36
|
-
var _super = (0, _createSuper2["default"])(DonutRoot);
|
|
37
35
|
function DonutRoot() {
|
|
38
36
|
(0, _classCallCheck2["default"])(this, DonutRoot);
|
|
39
|
-
return
|
|
37
|
+
return (0, _callSuper2["default"])(this, DonutRoot, arguments);
|
|
40
38
|
}
|
|
41
|
-
(0,
|
|
39
|
+
(0, _inherits2["default"])(DonutRoot, _Component);
|
|
40
|
+
return (0, _createClass2["default"])(DonutRoot, [{
|
|
42
41
|
key: "render",
|
|
43
42
|
value: function render() {
|
|
44
43
|
var _ref = this.asProps,
|
|
45
44
|
_ref2;
|
|
46
|
-
var SDonutContainer =
|
|
45
|
+
var SDonutContainer = _baseComponents.Box;
|
|
47
46
|
var _this$asProps = this.asProps,
|
|
48
47
|
value = _this$asProps.value,
|
|
49
48
|
styles = _this$asProps.styles,
|
|
@@ -53,20 +52,10 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
|
|
|
53
52
|
color = _this$asProps$color === void 0 ? 'chart-palette-order-1' : _this$asProps$color,
|
|
54
53
|
resolveColor = _this$asProps.resolveColor,
|
|
55
54
|
isSemiDonut = _this$asProps.isSemiDonut,
|
|
56
|
-
loading = _this$asProps.loading
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
var
|
|
60
|
-
var valueStrokeDasharray = baseStrokeDasharray * (value / 100);
|
|
61
|
-
var greyStrokeDasharray = baseStrokeDasharray * ((100 - value) / 100);
|
|
62
|
-
var offsetPoint = isSemiDonut ? baseStrokeDasharray / (100 / 3) : baseStrokeDasharray / 100;
|
|
63
|
-
var strokeDasharrayBetweenSpaces = "".concat(greyStrokeDasharray - 2 * offsetPoint, " ").concat(offsetPoint);
|
|
64
|
-
var spaceStrokeDasharray = "".concat(offsetPoint, " ").concat(value < 99 ? "".concat(strokeDasharrayBetweenSpaces) : '', " ").concat(baseStrokeDasharray);
|
|
65
|
-
if (isSemiDonut) {
|
|
66
|
-
spaceStrokeDasharray = "".concat(offsetPoint, " ").concat(value < 95 ? "".concat(strokeDasharrayBetweenSpaces) : '', " ").concat(baseStrokeDasharray);
|
|
67
|
-
}
|
|
68
|
-
var viewBox = isSemiDonut ? '0 0 24 12' : '0 0 24 24';
|
|
69
|
-
var strokeDashoffsetBase = -1 * (valueStrokeDasharray + (isSemiDonut ? offsetPoint : 0));
|
|
55
|
+
loading = _this$asProps.loading,
|
|
56
|
+
animate = _this$asProps.animate,
|
|
57
|
+
duration = _this$asProps.duration;
|
|
58
|
+
var scoreDonut = new _ScoreDonutUtils.ScoreDonutUtils(value, isSemiDonut);
|
|
70
59
|
var _extractAriaProps = (0, _ariaProps.extractAriaProps)(this.asProps),
|
|
71
60
|
__excludeProps = _extractAriaProps.__excludeProps,
|
|
72
61
|
extractedAriaProps = _extractAriaProps.extractedAriaProps;
|
|
@@ -76,50 +65,58 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
|
|
|
76
65
|
}, _ref))), /*#__PURE__*/_react["default"].createElement("svg", _ref2.cn("svg", (0, _objectSpread2["default"])({
|
|
77
66
|
"width": '100%',
|
|
78
67
|
"height": '100%',
|
|
79
|
-
"viewBox": viewBox,
|
|
68
|
+
"viewBox": scoreDonut.viewBox,
|
|
80
69
|
"fill": 'none',
|
|
81
70
|
"role": 'img'
|
|
82
71
|
}, extractedAriaProps)), /*#__PURE__*/_react["default"].createElement("g", _ref2.cn("g", {}), /*#__PURE__*/_react["default"].createElement("circle", _ref2.cn("circle", {
|
|
83
72
|
"cx": '12',
|
|
84
73
|
"cy": '12',
|
|
85
|
-
"r": radius,
|
|
86
|
-
"strokeWidth": strokeWidth,
|
|
74
|
+
"r": scoreDonut.radius,
|
|
75
|
+
"strokeWidth": scoreDonut.strokeWidth,
|
|
87
76
|
"stroke": resolveColor(baseBgColor),
|
|
88
|
-
"strokeDasharray": loading ? undefined : "".concat(
|
|
89
|
-
"strokeDashoffset":
|
|
90
|
-
})
|
|
91
|
-
"
|
|
92
|
-
"
|
|
93
|
-
"
|
|
94
|
-
"
|
|
95
|
-
|
|
96
|
-
"strokeDasharray": "".concat(valueStrokeDasharray, " ").concat(baseStrokeDasharray),
|
|
97
|
-
"strokeDashoffset": valueStrokeDasharray
|
|
98
|
-
}), /*#__PURE__*/_react["default"].createElement("animate", _ref2.cn("animate", {
|
|
77
|
+
"strokeDasharray": loading ? undefined : "".concat(scoreDonut.baseLength, " ").concat(scoreDonut.fullLength),
|
|
78
|
+
"strokeDashoffset": scoreDonut.baseOffset
|
|
79
|
+
}), animate && value > 0 && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("animate", _ref2.cn("animate", {
|
|
80
|
+
"attributeName": 'stroke-dasharray',
|
|
81
|
+
"from": "".concat(scoreDonut.animatedBaseLengthFrom, " ").concat(scoreDonut.fullLength),
|
|
82
|
+
"to": "".concat(scoreDonut.animatedBaseLengthTo, " ").concat(scoreDonut.fullLength),
|
|
83
|
+
"dur": duration + 'ms'
|
|
84
|
+
})), /*#__PURE__*/_react["default"].createElement("animate", _ref2.cn("animate", {
|
|
99
85
|
"attributeName": 'stroke-dashoffset',
|
|
100
|
-
"
|
|
101
|
-
|
|
86
|
+
"from": -1 * scoreDonut.startMargin,
|
|
87
|
+
"to": scoreDonut.baseOffset,
|
|
88
|
+
"dur": duration + 'ms'
|
|
89
|
+
})))), !loading && value > 0 && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("circle", _ref2.cn("circle", {
|
|
102
90
|
"cx": '12',
|
|
103
91
|
"cy": '12',
|
|
104
|
-
"r": radius,
|
|
105
|
-
"strokeWidth": strokeWidth,
|
|
106
|
-
"stroke": resolveColor(
|
|
107
|
-
"strokeDasharray":
|
|
108
|
-
|
|
109
|
-
|
|
92
|
+
"r": scoreDonut.radius,
|
|
93
|
+
"strokeWidth": scoreDonut.strokeWidth,
|
|
94
|
+
"stroke": resolveColor(color),
|
|
95
|
+
"strokeDasharray": "".concat(scoreDonut.valueLength, " ").concat(scoreDonut.fullLength)
|
|
96
|
+
}), animate && /*#__PURE__*/_react["default"].createElement("animate", _ref2.cn("animate", {
|
|
97
|
+
"attributeName": 'stroke-dasharray',
|
|
98
|
+
"from": "0 ".concat(scoreDonut.fullLength),
|
|
99
|
+
"to": "".concat(scoreDonut.valueLength, " ").concat(scoreDonut.fullLength),
|
|
100
|
+
"dur": duration + 'ms'
|
|
101
|
+
})))))));
|
|
110
102
|
}
|
|
111
103
|
}]);
|
|
112
|
-
return DonutRoot;
|
|
113
104
|
}(_core.Component);
|
|
114
|
-
(0, _defineProperty2["default"])(DonutRoot, "enhance", [(0,
|
|
105
|
+
(0, _defineProperty2["default"])(DonutRoot, "enhance", [(0, _useCssVariable.cssVariableEnhance)({
|
|
106
|
+
variable: '--intergalactic-duration-extra-slow',
|
|
107
|
+
fallback: '500',
|
|
108
|
+
map: function map(v) {
|
|
109
|
+
return Number.parseInt(v, 10).toString();
|
|
110
|
+
},
|
|
111
|
+
prop: 'duration'
|
|
112
|
+
}), (0, _resolveColorEnhance["default"])()]);
|
|
115
113
|
(0, _defineProperty2["default"])(DonutRoot, "style", style);
|
|
116
114
|
(0, _defineProperty2["default"])(DonutRoot, "defaultProps", {
|
|
117
115
|
animate: true
|
|
118
116
|
});
|
|
119
|
-
var ScoreDonut = (0, _core
|
|
120
|
-
exports.ScoreDonut = ScoreDonut;
|
|
117
|
+
var ScoreDonut = exports.ScoreDonut = (0, _core.createComponent)(DonutRoot);
|
|
121
118
|
ScoreDonut.displayName = 'MiniChart.ScoreDonut';
|
|
122
|
-
var ScoreSemiDonut = (0, _core
|
|
119
|
+
var ScoreSemiDonut = exports.ScoreSemiDonut = (0, _core.createComponent)(DonutRoot, {}, {
|
|
123
120
|
enhancements: [function () {
|
|
124
121
|
return {
|
|
125
122
|
wrapperProps: function wrapperProps(props) {
|
|
@@ -130,6 +127,5 @@ var ScoreSemiDonut = (0, _core["default"])(DonutRoot, {}, {
|
|
|
130
127
|
};
|
|
131
128
|
}]
|
|
132
129
|
});
|
|
133
|
-
exports.ScoreSemiDonut = ScoreSemiDonut;
|
|
134
130
|
ScoreSemiDonut.displayName = 'MiniChart.ScoreSemiDonut';
|
|
135
131
|
//# sourceMappingURL=Donut.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Donut.js","names":["_core","
|
|
1
|
+
{"version":3,"file":"Donut.js","names":["_core","require","_baseComponents","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_useCssVariable","_react","_ScoreDonutUtils","style","sstyled","insert","DonutRoot","_Component","_classCallCheck2","_callSuper2","arguments","_inherits2","_createClass2","key","value","render","_ref","asProps","_ref2","SDonutContainer","Box","_this$asProps","styles","_this$asProps$baseBgC","baseBgColor","_this$asProps$color","color","resolveColor","isSemiDonut","loading","animate","duration","scoreDonut","ScoreDonutUtils","_extractAriaProps","extractAriaProps","__excludeProps","extractedAriaProps","createElement","cn","_objectSpread2","assignProps","viewBox","radius","strokeWidth","undefined","concat","baseLength","fullLength","baseOffset","Fragment","animatedBaseLengthFrom","animatedBaseLengthTo","startMargin","valueLength","Component","_defineProperty2","cssVariableEnhance","variable","fallback","map","v","Number","parseInt","toString","prop","resolveColorEnhance","ScoreDonut","exports","createComponent","displayName","ScoreSemiDonut","enhancements","wrapperProps","props"],"sources":["../../../../src/component/score/Donut.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@semcore/base-components';\nimport { createComponent, Component, Root, sstyled, assignProps } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport React from 'react';\n\nimport style from './donut.shadow.css';\nimport type { CommonScoreProps } from './Score';\nimport { ScoreDonutUtils } from '../../utils/ScoreDonutUtils';\n\nexport type ScoreDonutProps = BoxProps & CommonScoreProps;\n\nclass DonutRoot extends Component<ScoreDonutProps, typeof DonutRoot.enhance> {\n static enhance = [\n cssVariableEnhance({\n variable: '--intergalactic-duration-extra-slow',\n fallback: '500',\n map: (v: string) => Number.parseInt(v, 10).toString(),\n prop: 'duration',\n }),\n resolveColorEnhance(),\n ] as const;\n\n static style = style;\n\n static defaultProps = {\n animate: true,\n };\n\n render() {\n const SDonutContainer = Root;\n const {\n value,\n styles,\n baseBgColor = 'chart-grid-bar-chart-base-bg',\n color = 'chart-palette-order-1',\n resolveColor,\n isSemiDonut,\n loading,\n animate,\n duration,\n } = this.asProps;\n\n const scoreDonut = new ScoreDonutUtils(value, isSemiDonut);\n const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n return sstyled(styles)(\n <SDonutContainer render={Box} semi={isSemiDonut} __excludeProps={__excludeProps}>\n <svg\n width='100%'\n height='100%'\n viewBox={scoreDonut.viewBox}\n fill='none'\n role='img'\n {...extractedAriaProps}\n >\n <g>\n <circle\n cx='12'\n cy='12'\n r={scoreDonut.radius}\n strokeWidth={scoreDonut.strokeWidth}\n stroke={resolveColor(baseBgColor)}\n strokeDasharray={\n loading\n ? undefined\n : `${scoreDonut.baseLength} ${scoreDonut.fullLength}`\n }\n strokeDashoffset={scoreDonut.baseOffset}\n >\n {animate && value > 0 && (\n <>\n <animate\n attributeName='stroke-dasharray'\n from={`${scoreDonut.animatedBaseLengthFrom} ${scoreDonut.fullLength}`}\n to={`${scoreDonut.animatedBaseLengthTo} ${scoreDonut.fullLength}`}\n dur={duration + 'ms'}\n />\n <animate\n attributeName='stroke-dashoffset'\n from={-1 * scoreDonut.startMargin}\n to={scoreDonut.baseOffset}\n dur={duration + 'ms'}\n />\n </>\n )}\n </circle>\n {!loading && value > 0 && (\n <>\n <circle\n cx='12'\n cy='12'\n r={scoreDonut.radius}\n strokeWidth={scoreDonut.strokeWidth}\n stroke={resolveColor(color)}\n strokeDasharray={`${scoreDonut.valueLength} ${scoreDonut.fullLength}`}\n >\n {animate && (\n <animate\n attributeName='stroke-dasharray'\n from={`0 ${scoreDonut.fullLength}`}\n to={`${scoreDonut.valueLength} ${scoreDonut.fullLength}`}\n dur={duration + 'ms'}\n />\n )}\n </circle>\n </>\n )}\n </g>\n </svg>\n </SDonutContainer>,\n );\n }\n}\n\nexport const ScoreDonut = createComponent<'svg', ScoreDonutProps, {}, typeof DonutRoot.enhance>(DonutRoot);\n\nScoreDonut.displayName = 'MiniChart.ScoreDonut';\n\nexport const ScoreSemiDonut = createComponent<'svg', ScoreDonutProps, {}, typeof DonutRoot.enhance>(\n DonutRoot,\n {},\n {\n enhancements: [\n () => {\n return {\n wrapperProps: (props: ScoreDonutProps) => {\n return assignProps(props, { isSemiDonut: true });\n },\n };\n },\n ],\n },\n);\n\nScoreSemiDonut.displayName = 'MiniChart.ScoreSemiDonut';\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -9,44 +8,42 @@ exports.ScoreLine = void 0;
|
|
|
9
8
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
10
9
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
10
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
+
var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
|
|
12
12
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
13
|
-
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
14
13
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
|
-
var
|
|
16
|
-
var
|
|
14
|
+
var _core = require("@semcore/core");
|
|
15
|
+
var _baseComponents = require("@semcore/base-components");
|
|
16
|
+
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/resolveColorEnhance"));
|
|
17
17
|
var _react = _interopRequireDefault(require("react"));
|
|
18
|
-
var _flexBox = require("@semcore/flex-box");
|
|
19
|
-
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
|
|
20
18
|
/*!__reshadow-styles__:"./line.shadow.css"*/
|
|
21
|
-
var style = (
|
|
19
|
+
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_776hj{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_776hj{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_776hj_gg_.__loading_776hj_gg_,.___SLineGauge_776hj_gg_.__loading_776hj_gg_,.___STrendBar_776hj_gg_.__loading_776hj_gg_,.___STrendLine_776hj_gg_.__loading_776hj_gg_{animation-name:pulse_776hj;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_776hj_gg_{height:8px;background-color:var(--base-bg-color_776hj, var(--intergalactic-chart-grid-bar-chart-base-bg, rgb(241, 242, 242)));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_776hj_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_776hj_gg_.__percent_776hj_gg_{width:var(--percent_776hj)}.___SLineSegmentItem_776hj_gg_.__color_776hj_gg_,.___SLineValue_776hj_gg_.__color_776hj_gg_{background-color:var(--color_776hj, var(--intergalactic-chart-palette-order-1, rgb(104, 109, 210)))}.___SLineGauge_776hj_gg_.__segments_776hj_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_776hj_gg_,.___SLineGaugeSegment_776hj_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_776hj_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_776hj_gg_{height:8px;background:0 0;border-right-color:var(--intergalactic-chart-grid-border, #fff);border-right-style:solid;border-right-width:1px;box-sizing:content-box}.___SAnimationLine_776hj_gg_{background-color:var(--intergalactic-chart-grid-bar-chart-base-bg, rgb(241, 242, 242));transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out;animation-name:move-line_776hj;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}", /*__inner_css_end__*/"776hj_gg_"),
|
|
22
20
|
/*__reshadow_css_end__*/
|
|
23
21
|
{
|
|
24
|
-
"__SLineGauge": "
|
|
25
|
-
"_loading": "
|
|
26
|
-
"__SDonutContainer": "
|
|
27
|
-
"__STrendLine": "
|
|
28
|
-
"__STrendBar": "
|
|
29
|
-
"@pulse": "
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
22
|
+
"__SLineGauge": "___SLineGauge_776hj_gg_",
|
|
23
|
+
"_loading": "__loading_776hj_gg_",
|
|
24
|
+
"__SDonutContainer": "___SDonutContainer_776hj_gg_",
|
|
25
|
+
"__STrendLine": "___STrendLine_776hj_gg_",
|
|
26
|
+
"__STrendBar": "___STrendBar_776hj_gg_",
|
|
27
|
+
"@pulse": "pulse_776hj",
|
|
28
|
+
"__SLineValue": "___SLineValue_776hj_gg_",
|
|
29
|
+
"_percent": "__percent_776hj_gg_",
|
|
30
|
+
"--percent": "--percent_776hj",
|
|
31
|
+
"_color": "__color_776hj_gg_",
|
|
32
|
+
"__SLineSegmentItem": "___SLineSegmentItem_776hj_gg_",
|
|
33
|
+
"_segments": "__segments_776hj_gg_",
|
|
34
|
+
"__SLineGaugeSegment": "___SLineGaugeSegment_776hj_gg_",
|
|
35
|
+
"__SAnimationLine": "___SAnimationLine_776hj_gg_",
|
|
36
|
+
"@move-line": "move-line_776hj",
|
|
37
|
+
"--base-bg-color": "--base-bg-color_776hj",
|
|
38
|
+
"--color": "--color_776hj"
|
|
41
39
|
});
|
|
42
40
|
var LineRoot = /*#__PURE__*/function (_Component) {
|
|
43
|
-
(0, _inherits2["default"])(LineRoot, _Component);
|
|
44
|
-
var _super = (0, _createSuper2["default"])(LineRoot);
|
|
45
41
|
function LineRoot() {
|
|
46
42
|
(0, _classCallCheck2["default"])(this, LineRoot);
|
|
47
|
-
return
|
|
43
|
+
return (0, _callSuper2["default"])(this, LineRoot, arguments);
|
|
48
44
|
}
|
|
49
|
-
(0,
|
|
45
|
+
(0, _inherits2["default"])(LineRoot, _Component);
|
|
46
|
+
return (0, _createClass2["default"])(LineRoot, [{
|
|
50
47
|
key: "getSegmentProps",
|
|
51
48
|
value: function getSegmentProps(segmentProps) {
|
|
52
49
|
var _this$asProps = this.asProps,
|
|
@@ -54,13 +51,13 @@ var LineRoot = /*#__PURE__*/function (_Component) {
|
|
|
54
51
|
resolveColor = _this$asProps.resolveColor;
|
|
55
52
|
var sum = 0;
|
|
56
53
|
_react["default"].Children.forEach(children, function (child) {
|
|
57
|
-
if (
|
|
54
|
+
if (/*#__PURE__*/_react["default"].isValidElement(child)) {
|
|
58
55
|
sum = sum + child.props.value;
|
|
59
56
|
}
|
|
60
57
|
});
|
|
61
58
|
var width = sum > 0 ? 100 * segmentProps.value / sum : 0;
|
|
62
59
|
return {
|
|
63
|
-
w: "".concat(width, "%"),
|
|
60
|
+
'w': "".concat(width, "%"),
|
|
64
61
|
'use:color': resolveColor(segmentProps.color)
|
|
65
62
|
};
|
|
66
63
|
}
|
|
@@ -69,11 +66,11 @@ var LineRoot = /*#__PURE__*/function (_Component) {
|
|
|
69
66
|
value: function render() {
|
|
70
67
|
var _ref = this.asProps,
|
|
71
68
|
_ref5;
|
|
72
|
-
var SLineGauge =
|
|
73
|
-
var SLineValue =
|
|
74
|
-
var SAnimationLine =
|
|
75
|
-
var SLineGaugeSegment =
|
|
76
|
-
var SLineSegmentItem =
|
|
69
|
+
var SLineGauge = _baseComponents.Box;
|
|
70
|
+
var SLineValue = _baseComponents.Box;
|
|
71
|
+
var SAnimationLine = _baseComponents.Box;
|
|
72
|
+
var SLineGaugeSegment = _baseComponents.Flex;
|
|
73
|
+
var SLineSegmentItem = _baseComponents.Box;
|
|
77
74
|
var _this$asProps2 = this.asProps,
|
|
78
75
|
value = _this$asProps2.value,
|
|
79
76
|
styles = _this$asProps2.styles,
|
|
@@ -117,7 +114,6 @@ var LineRoot = /*#__PURE__*/function (_Component) {
|
|
|
117
114
|
})), Boolean(SegmentItems.length) && /*#__PURE__*/_react["default"].createElement(SLineGaugeSegment, _ref5.cn("SLineGaugeSegment", {}), SegmentItems), animate && /*#__PURE__*/_react["default"].createElement(SAnimationLine, _ref5.cn("SAnimationLine", {})));
|
|
118
115
|
}
|
|
119
116
|
}]);
|
|
120
|
-
return LineRoot;
|
|
121
117
|
}(_core.Component);
|
|
122
118
|
(0, _defineProperty2["default"])(LineRoot, "enhance", [(0, _resolveColorEnhance["default"])()]);
|
|
123
119
|
(0, _defineProperty2["default"])(LineRoot, "displayName", 'ScoreLine');
|
|
@@ -128,14 +124,15 @@ var LineRoot = /*#__PURE__*/function (_Component) {
|
|
|
128
124
|
function Segment(props) {
|
|
129
125
|
var _ref2 = arguments[0],
|
|
130
126
|
_ref6;
|
|
131
|
-
var styles = props.styles
|
|
132
|
-
|
|
127
|
+
var styles = props.styles,
|
|
128
|
+
value = props.value;
|
|
129
|
+
var SLineSegmentItem = _baseComponents.Box;
|
|
130
|
+
if (!value) return null;
|
|
133
131
|
return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SLineSegmentItem, _ref6.cn("SLineSegmentItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref2))));
|
|
134
132
|
}
|
|
135
133
|
Segment.displayName = 'Segment';
|
|
136
|
-
var ScoreLine = (0, _core
|
|
134
|
+
var ScoreLine = exports.ScoreLine = (0, _core.createComponent)(LineRoot, {
|
|
137
135
|
Segment: Segment
|
|
138
136
|
});
|
|
139
|
-
exports.ScoreLine = ScoreLine;
|
|
140
137
|
ScoreLine.displayName = 'MiniChart.ScoreLine';
|
|
141
138
|
//# sourceMappingURL=Line.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Line.js","names":["_core","
|
|
1
|
+
{"version":3,"file":"Line.js","names":["_core","require","_baseComponents","_resolveColorEnhance","_interopRequireDefault","_react","style","sstyled","insert","LineRoot","_Component","_classCallCheck2","_callSuper2","arguments","_inherits2","_createClass2","key","value","getSegmentProps","segmentProps","_this$asProps","asProps","children","resolveColor","sum","React","Children","forEach","child","isValidElement","props","width","concat","color","render","_ref","_ref5","SLineGauge","Box","SLineValue","SAnimationLine","SLineGaugeSegment","Flex","SLineSegmentItem","_this$asProps2","styles","_this$asProps2$color","baseBgColor","loading","animate","undefined","_ref3","createElement","cn","_objectSpread2","assignProps","segments","SegmentItems","i","_ref4","push","percent","Boolean","length","Component","_defineProperty2","resolveColorEnhance","Segment","_ref2","arguments[0]","_ref6","displayName","ScoreLine","exports","createComponent"],"sources":["../../../../src/component/score/Line.tsx"],"sourcesContent":["import { Box, Flex } from '@semcore/base-components';\nimport { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport style from './line.shadow.css';\nimport type {\n ScoreLineComponent,\n ScoreLineGaugeProps,\n SegmentProps,\n InnerSegmentProps,\n} from './Line.types';\n\nclass LineRoot extends Component<ScoreLineGaugeProps, typeof LineRoot.enhance> {\n static enhance = [resolveColorEnhance()] as const;\n static displayName = 'ScoreLine';\n\n static style = style;\n\n static defaultProps = {\n animate: true,\n };\n\n getSegmentProps(segmentProps: SegmentProps) {\n const { children, resolveColor } = this.asProps;\n\n let sum = 0;\n React.Children.forEach(children, (child) => {\n if (React.isValidElement<SegmentProps>(child)) {\n sum = sum + child.props.value;\n }\n });\n\n const width = sum > 0 ? (100 * segmentProps.value) / sum : 0;\n\n return {\n 'w': `${width}%`,\n 'use:color': resolveColor(segmentProps.color),\n };\n }\n\n render() {\n const SLineGauge = Root;\n const SLineValue = Box;\n const SAnimationLine = Box;\n const SLineGaugeSegment = Flex;\n const SLineSegmentItem = Box;\n const {\n value,\n styles,\n color = 'chart-palette-order-1',\n baseBgColor,\n resolveColor,\n loading,\n children,\n Children,\n animate,\n } = this.asProps;\n\n if (children !== undefined) {\n return sstyled(styles)(\n <SLineGauge render={Box} segments base-bg-color={resolveColor(baseBgColor)}>\n <SLineGaugeSegment>\n <Children />\n </SLineGaugeSegment>\n {animate && <SAnimationLine />}\n </SLineGauge>,\n );\n }\n\n const { segments } = this.asProps;\n\n const SegmentItems = [];\n\n if (segments) {\n for (let i = 0; i < segments; i++) {\n const width = `calc((100% - ${segments - 1}px) / ${segments})`;\n\n SegmentItems.push(\n sstyled(styles)(\n <SLineSegmentItem\n key={i}\n color={i < value ? resolveColor(color) : undefined}\n w={width}\n />,\n ),\n );\n }\n }\n\n let percent = `${value}%`;\n\n if (segments) {\n percent = `${(value / segments) * 100}%`;\n }\n\n return sstyled(styles)(\n <SLineGauge render={Box} base-bg-color={resolveColor(baseBgColor)}>\n {!loading && <SLineValue w={percent} color={resolveColor(color)} />}\n {Boolean(SegmentItems.length) && <SLineGaugeSegment>{SegmentItems}</SLineGaugeSegment>}\n {animate && <SAnimationLine />}\n </SLineGauge>,\n );\n }\n}\n\nfunction Segment(props: InnerSegmentProps) {\n const { styles, value } = props;\n const SLineSegmentItem = Root;\n\n if (!value) return null;\n\n return sstyled(styles)(<SLineSegmentItem render={Box} />);\n}\nSegment.displayName = 'Segment';\n\nexport const ScoreLine = createComponent(LineRoot, {\n Segment,\n}) as ScoreLineComponent;\n\nScoreLine.displayName = 'MiniChart.ScoreLine';\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Line.types.js","names":[],"sources":["../../../../src/component/score/Line.types.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Line.types.js","names":[],"sources":["../../../../src/component/score/Line.types.ts"],"sourcesContent":["import type { BoxProps, Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport type resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport type React from 'react';\n\nimport type { CommonScoreProps } from './Score';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n ? Acc[number]\n : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\nexport type SegmentColor = `chart-palette-order-${Range<1, 24>}`;\n\nexport type SegmentProps = {\n value: number;\n /**\n * Color of value\n */\n color: SegmentColor;\n};\n\ntype SegmentComponent = React.FC<SegmentProps>;\n\nexport type InnerSegmentProps = SegmentProps & {\n styles: React.DetailedHTMLProps<React.StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>;\n};\n\ntype ValuedScoreProps = {\n /**\n * Value of score (in percents from 0 to 100) or count of selected segments (for Line with segments)\n */\n value: number;\n /**\n * Color of value\n */\n color?: SegmentColor;\n /**\n * Count of line segments\n */\n segments?: number;\n /**\n * We don't accept children in this way\n */\n children?: never;\n};\n\ntype CustomRenderScoreProps = {\n children: SegmentComponent[];\n};\n\nexport type ScoreLineGaugeProps = BoxProps &\n Intergalactic.InternalTypings.EfficientOmit<CommonScoreProps, 'value' | 'color'> &\n (ValuedScoreProps | CustomRenderScoreProps);\n\nexport type Enhances = [() => {\n resolveColor: ReturnType<typeof resolveColorEnhance>;\n}];\n\nexport type ScoreLineComponent = Intergalactic.Component<'svg', ScoreLineGaugeProps, {}, Enhances> & {\n Segment: Intergalactic.Component<typeof Box, SegmentProps>;\n};\n"],"mappings":"","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Score.js","names":[],"sources":["../../../../src/component/score/Score.ts"],"sourcesContent":["export type CommonScoreProps = {\n /**\n * Value of score (in percents from 0 to 100) or count of selected segments (for Line with segments)\n */\n value: number;\n\n /**\n * Color of value\n */\n color?: string;\n\n /**\n * Color of background\n */\n baseBgColor?: string;\n\n /**\n * Flag to enable skeleton\n * @default false\n */\n loading?: boolean;\n\n /**\n * Flag to enable animate of charts\n * @default true\n */\n animate?: boolean;\n};\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Score.js","names":[],"sources":["../../../../src/component/score/Score.ts"],"sourcesContent":["export type CommonScoreProps = {\n /**\n * Value of score (in percents from 0 to 100) or count of selected segments (for Line with segments)\n */\n value: number;\n\n /**\n * Color of value\n */\n color?: string;\n\n /**\n * Color of background\n */\n baseBgColor?: string;\n\n /**\n * Flag to enable skeleton\n * @default false\n */\n loading?: boolean;\n\n /**\n * Flag to enable animate of charts\n * @default true\n */\n animate?: boolean;\n};\n"],"mappings":"","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_Donut","require","_Line"],"sources":["../../../../src/component/score/index.ts"],"sourcesContent":["import { ScoreDonut, ScoreSemiDonut } from './Donut';\nimport { ScoreLine } from './Line';\n\nexport { ScoreDonut, ScoreSemiDonut, ScoreLine };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_Donut","require","_Line"],"sources":["../../../../src/component/score/index.ts"],"sourcesContent":["import { ScoreDonut, ScoreSemiDonut } from './Donut';\nimport { ScoreLine } from './Line';\n\nexport { ScoreDonut, ScoreSemiDonut, ScoreLine };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA","ignoreList":[]}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
SLineGauge {
|
|
4
4
|
height: 8px;
|
|
5
|
-
background-color: var(--base-bg-color, var(--intergalactic-chart-grid-bar-chart-base-bg,
|
|
5
|
+
background-color: var(--base-bg-color, var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.001 180)));
|
|
6
6
|
border-radius: var(--intergalactic-chart-rounded, 2px);
|
|
7
7
|
overflow: hidden;
|
|
8
8
|
position: relative;
|
|
@@ -18,7 +18,7 @@ SLineValue[percent] {
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
SLineValue[color], SLineSegmentItem[color] {
|
|
21
|
-
background-color: var(--color, var(--intergalactic-chart-palette-order-1,
|
|
21
|
+
background-color: var(--color, var(--intergalactic-chart-palette-order-1, oklch(0.58 0.153 278.4)));
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
SLineGauge[segments] {
|
|
@@ -41,14 +41,14 @@ SLineSegmentItem:last-child {
|
|
|
41
41
|
SLineSegmentItem {
|
|
42
42
|
height: 8px;
|
|
43
43
|
background: transparent;
|
|
44
|
-
border-right-color: var(--intergalactic-chart-grid-border, #
|
|
44
|
+
border-right-color: var(--intergalactic-chart-grid-border, #fff);
|
|
45
45
|
border-right-style: solid;
|
|
46
46
|
border-right-width: 1px;
|
|
47
47
|
box-sizing: content-box;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
SAnimationLine {
|
|
51
|
-
background-color: var(--intergalactic-chart-grid-bar-chart-base-bg,
|
|
51
|
+
background-color: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.001 180));
|
|
52
52
|
transition: all var(--intergalactic-duration-extra-slow, 500) ease-in-out;
|
|
53
53
|
animation-name: move-line;
|
|
54
54
|
animation-duration: 0.5s;
|