@semcore/mini-chart 0.30.0-prerelease.4 → 0.30.0-prerelease.5
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/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/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/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/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
|
@@ -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_1y4lp{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_1y4lp{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_1y4lp_gg_.__loading_1y4lp_gg_,.___SLineGauge_1y4lp_gg_.__loading_1y4lp_gg_,.___STrendBar_1y4lp_gg_.__loading_1y4lp_gg_,.___STrendLine_1y4lp_gg_.__loading_1y4lp_gg_{animation-name:pulse_1y4lp;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_1y4lp_gg_{height:8px;background-color:var(--base-bg-color_1y4lp, var(--intergalactic-chart-grid-bar-chart-base-bg, rgb(241, 242, 242)));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_1y4lp_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_1y4lp_gg_.__percent_1y4lp_gg_{width:var(--percent_1y4lp)}.___SLineSegmentItem_1y4lp_gg_.__color_1y4lp_gg_,.___SLineValue_1y4lp_gg_.__color_1y4lp_gg_{background-color:var(--color_1y4lp, var(--intergalactic-chart-palette-order-1, rgb(102, 107, 219)))}.___SLineGauge_1y4lp_gg_.__segments_1y4lp_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_1y4lp_gg_,.___SLineGaugeSegment_1y4lp_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_1y4lp_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_1y4lp_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_1y4lp_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_1y4lp;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}", /*__inner_css_end__*/"1y4lp_gg_"),
|
|
22
20
|
/*__reshadow_css_end__*/
|
|
23
21
|
{
|
|
24
|
-
"__SLineGauge": "
|
|
25
|
-
"_loading": "
|
|
26
|
-
"__SDonutContainer": "
|
|
27
|
-
"__STrendLine": "
|
|
28
|
-
"__STrendBar": "
|
|
29
|
-
"@pulse": "
|
|
30
|
-
"__SLineValue": "
|
|
31
|
-
"_percent": "
|
|
32
|
-
"--percent": "--
|
|
33
|
-
"_color": "
|
|
34
|
-
"__SLineSegmentItem": "
|
|
35
|
-
"_segments": "
|
|
36
|
-
"__SLineGaugeSegment": "
|
|
37
|
-
"__SAnimationLine": "
|
|
38
|
-
"@move-line": "move-
|
|
39
|
-
"--base-bg-color": "--base-bg-
|
|
40
|
-
"--color": "--
|
|
22
|
+
"__SLineGauge": "___SLineGauge_1y4lp_gg_",
|
|
23
|
+
"_loading": "__loading_1y4lp_gg_",
|
|
24
|
+
"__SDonutContainer": "___SDonutContainer_1y4lp_gg_",
|
|
25
|
+
"__STrendLine": "___STrendLine_1y4lp_gg_",
|
|
26
|
+
"__STrendBar": "___STrendBar_1y4lp_gg_",
|
|
27
|
+
"@pulse": "pulse_1y4lp",
|
|
28
|
+
"__SLineValue": "___SLineValue_1y4lp_gg_",
|
|
29
|
+
"_percent": "__percent_1y4lp_gg_",
|
|
30
|
+
"--percent": "--percent_1y4lp",
|
|
31
|
+
"_color": "__color_1y4lp_gg_",
|
|
32
|
+
"__SLineSegmentItem": "___SLineSegmentItem_1y4lp_gg_",
|
|
33
|
+
"_segments": "__segments_1y4lp_gg_",
|
|
34
|
+
"__SLineGaugeSegment": "___SLineGaugeSegment_1y4lp_gg_",
|
|
35
|
+
"__SAnimationLine": "___SAnimationLine_1y4lp_gg_",
|
|
36
|
+
"@move-line": "move-line_1y4lp",
|
|
37
|
+
"--base-bg-color": "--base-bg-color_1y4lp",
|
|
38
|
+
"--color": "--color_1y4lp"
|
|
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":[]}
|
|
@@ -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
|
});
|
|
@@ -10,35 +9,33 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
|
|
|
10
9
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
11
10
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
12
11
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
12
|
+
var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
|
|
13
13
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
14
|
-
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
15
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
|
-
var
|
|
17
|
-
var
|
|
15
|
+
var _core = require("@semcore/core");
|
|
16
|
+
var _baseComponents = require("@semcore/base-components");
|
|
17
|
+
var _ariaProps = require("@semcore/core/lib/utils/ariaProps");
|
|
18
|
+
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/resolveColorEnhance"));
|
|
18
19
|
var _react = _interopRequireDefault(require("react"));
|
|
19
|
-
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
|
|
20
20
|
var _Trend2 = require("./Trend");
|
|
21
|
-
var _flexBox = require("@semcore/flex-box");
|
|
22
|
-
var _ariaProps = require("@semcore/utils/lib/ariaProps");
|
|
23
21
|
/*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
|
|
24
|
-
var style = (
|
|
22
|
+
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_1yrsa{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1yrsa_gg_.__loading_1yrsa_gg_,.___SLineGauge_1yrsa_gg_.__loading_1yrsa_gg_,.___STrendBar_1yrsa_gg_.__loading_1yrsa_gg_,.___STrendLine_1yrsa_gg_.__loading_1yrsa_gg_{animation-name:pulse_1yrsa;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}", /*__inner_css_end__*/"1yrsa_gg_"),
|
|
25
23
|
/*__reshadow_css_end__*/
|
|
26
24
|
{
|
|
27
|
-
"__SLineGauge": "
|
|
28
|
-
"_loading": "
|
|
29
|
-
"__SDonutContainer": "
|
|
30
|
-
"__STrendLine": "
|
|
31
|
-
"__STrendBar": "
|
|
32
|
-
"@pulse": "
|
|
25
|
+
"__SLineGauge": "___SLineGauge_1yrsa_gg_",
|
|
26
|
+
"_loading": "__loading_1yrsa_gg_",
|
|
27
|
+
"__SDonutContainer": "___SDonutContainer_1yrsa_gg_",
|
|
28
|
+
"__STrendLine": "___STrendLine_1yrsa_gg_",
|
|
29
|
+
"__STrendBar": "___STrendBar_1yrsa_gg_",
|
|
30
|
+
"@pulse": "pulse_1yrsa"
|
|
33
31
|
});
|
|
34
32
|
var TrendBarRoot = /*#__PURE__*/function (_Trend) {
|
|
35
|
-
(0, _inherits2["default"])(TrendBarRoot, _Trend);
|
|
36
|
-
var _super = (0, _createSuper2["default"])(TrendBarRoot);
|
|
37
33
|
function TrendBarRoot() {
|
|
38
34
|
(0, _classCallCheck2["default"])(this, TrendBarRoot);
|
|
39
|
-
return
|
|
35
|
+
return (0, _callSuper2["default"])(this, TrendBarRoot, arguments);
|
|
40
36
|
}
|
|
41
|
-
(0,
|
|
37
|
+
(0, _inherits2["default"])(TrendBarRoot, _Trend);
|
|
38
|
+
return (0, _createClass2["default"])(TrendBarRoot, [{
|
|
42
39
|
key: "defaultData",
|
|
43
40
|
get: function get() {
|
|
44
41
|
return [{
|
|
@@ -68,7 +65,7 @@ var TrendBarRoot = /*#__PURE__*/function (_Trend) {
|
|
|
68
65
|
var _ref = this.asProps,
|
|
69
66
|
_ref2,
|
|
70
67
|
_this = this;
|
|
71
|
-
var STrendBar =
|
|
68
|
+
var STrendBar = _baseComponents.Box;
|
|
72
69
|
var _this$asProps2 = this.asProps,
|
|
73
70
|
styles = _this$asProps2.styles,
|
|
74
71
|
resolveColor = _this$asProps2.resolveColor,
|
|
@@ -100,24 +97,22 @@ var TrendBarRoot = /*#__PURE__*/function (_Trend) {
|
|
|
100
97
|
height: barItem.value,
|
|
101
98
|
fill: color
|
|
102
99
|
}, animate && !loading && /*#__PURE__*/_react["default"].createElement("animate", {
|
|
103
|
-
attributeName:
|
|
100
|
+
attributeName: "y",
|
|
104
101
|
values: "".concat(_this.defaultHeight, ";").concat(_this.defaultHeight - barItem.value),
|
|
105
|
-
dur:
|
|
102
|
+
dur: "500ms"
|
|
106
103
|
}));
|
|
107
104
|
})));
|
|
108
105
|
}
|
|
109
106
|
}]);
|
|
110
|
-
return TrendBarRoot;
|
|
111
107
|
}(_Trend2.Trend);
|
|
112
108
|
(0, _defineProperty2["default"])(TrendBarRoot, "enhance", [(0, _resolveColorEnhance["default"])()]);
|
|
113
109
|
(0, _defineProperty2["default"])(TrendBarRoot, "style", style);
|
|
114
110
|
(0, _defineProperty2["default"])(TrendBarRoot, "defaultProps", {
|
|
115
111
|
animate: true
|
|
116
112
|
});
|
|
117
|
-
var TrendBar = (0, _core
|
|
118
|
-
exports.TrendBar = TrendBar;
|
|
113
|
+
var TrendBar = exports.TrendBar = (0, _core.createComponent)(TrendBarRoot);
|
|
119
114
|
TrendBar.displayName = 'MiniChart.TrendBar';
|
|
120
|
-
var TrendHistogram = (0, _core
|
|
115
|
+
var TrendHistogram = exports.TrendHistogram = (0, _core.createComponent)(TrendBarRoot, {}, {
|
|
121
116
|
enhancements: [function () {
|
|
122
117
|
return {
|
|
123
118
|
wrapperProps: function wrapperProps(props) {
|
|
@@ -128,6 +123,5 @@ var TrendHistogram = (0, _core["default"])(TrendBarRoot, {}, {
|
|
|
128
123
|
};
|
|
129
124
|
}]
|
|
130
125
|
});
|
|
131
|
-
|
|
132
|
-
TrendBar.displayName = 'MiniChart.TrendHistogram';
|
|
126
|
+
TrendHistogram.displayName = 'MiniChart.TrendHistogram';
|
|
133
127
|
//# sourceMappingURL=Bar.js.map
|