@semcore/mini-chart 16.0.9 → 16.1.0-prerelease.3
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 +10 -0
- package/lib/cjs/component/score/Donut.js +43 -33
- package/lib/cjs/component/score/Donut.js.map +1 -1
- package/lib/cjs/component/score/Line.js +20 -23
- package/lib/cjs/component/score/Line.js.map +1 -1
- package/lib/cjs/component/trend/Bar.js +9 -12
- package/lib/cjs/component/trend/Bar.js.map +1 -1
- package/lib/cjs/component/trend/Line.js +9 -12
- package/lib/cjs/component/trend/Line.js.map +1 -1
- package/lib/cjs/component/trend/Trend.js +2 -5
- package/lib/cjs/component/trend/Trend.js.map +1 -1
- package/lib/cjs/utils/ScoreDonutUtils.js +36 -28
- package/lib/cjs/utils/ScoreDonutUtils.js.map +1 -1
- package/lib/es6/component/score/Donut.js +42 -32
- package/lib/es6/component/score/Donut.js.map +1 -1
- package/lib/es6/component/score/Line.js +19 -22
- package/lib/es6/component/score/Line.js.map +1 -1
- package/lib/es6/component/trend/Bar.js +8 -11
- package/lib/es6/component/trend/Bar.js.map +1 -1
- package/lib/es6/component/trend/Line.js +8 -11
- package/lib/es6/component/trend/Line.js.map +1 -1
- package/lib/es6/component/trend/Trend.js +1 -4
- package/lib/es6/component/trend/Trend.js.map +1 -1
- package/lib/es6/utils/ScoreDonutUtils.js +36 -28
- package/lib/es6/utils/ScoreDonutUtils.js.map +1 -1
- package/lib/esm/component/score/Donut.mjs +41 -35
- package/lib/esm/component/score/Line.mjs +20 -25
- package/lib/esm/component/trend/Bar.mjs +9 -14
- package/lib/esm/component/trend/Line.mjs +9 -14
- package/lib/esm/component/trend/Trend.mjs +1 -6
- package/lib/esm/utils/ScoreDonutUtils.mjs +36 -28
- package/lib/types/component/score/Donut.d.ts +2 -0
- package/lib/types/utils/ScoreDonutUtils.d.ts +10 -7
- package/package.json +4 -4
|
@@ -16,14 +16,9 @@ var ScoreDonutUtils = exports.ScoreDonutUtils = /*#__PURE__*/function () {
|
|
|
16
16
|
(0, _defineProperty2["default"])(this, "radius", void 0);
|
|
17
17
|
this.isSemiDonut = isSemiDonut;
|
|
18
18
|
this.radius = isSemiDonut ? 9 : 10;
|
|
19
|
-
this.value = value;
|
|
19
|
+
this.value = Math.max(Math.min(value, 100), 0);
|
|
20
20
|
}
|
|
21
21
|
return (0, _createClass2["default"])(ScoreDonutUtils, [{
|
|
22
|
-
key: "hasDivider",
|
|
23
|
-
get: function get() {
|
|
24
|
-
return ![0, 100].includes(this.value);
|
|
25
|
-
}
|
|
26
|
-
}, {
|
|
27
22
|
key: "viewBox",
|
|
28
23
|
get: function get() {
|
|
29
24
|
return this.isSemiDonut ? '0 0 24 12' : '0 0 24 24';
|
|
@@ -34,45 +29,58 @@ var ScoreDonutUtils = exports.ScoreDonutUtils = /*#__PURE__*/function () {
|
|
|
34
29
|
return this.isSemiDonut ? 6 : 4;
|
|
35
30
|
}
|
|
36
31
|
}, {
|
|
37
|
-
key: "
|
|
32
|
+
key: "fullLength",
|
|
38
33
|
get: function get() {
|
|
39
34
|
return this.isSemiDonut ? Math.PI * this.radius : 2 * Math.PI * this.radius;
|
|
40
35
|
}
|
|
41
36
|
}, {
|
|
42
|
-
key: "
|
|
37
|
+
key: "point",
|
|
38
|
+
get: function get() {
|
|
39
|
+
return this.isSemiDonut ? this.fullLength / (100 / 3) : this.fullLength / 100;
|
|
40
|
+
}
|
|
41
|
+
}, {
|
|
42
|
+
key: "valueLength",
|
|
43
|
+
get: function get() {
|
|
44
|
+
return this.fullLength * (this.value / 100);
|
|
45
|
+
}
|
|
46
|
+
}, {
|
|
47
|
+
key: "animatedValueLength",
|
|
48
|
+
get: function get() {
|
|
49
|
+
return Math.min(this.valueLength, this.fullLength - this.startMargin - this.endMargin);
|
|
50
|
+
}
|
|
51
|
+
}, {
|
|
52
|
+
key: "startMargin",
|
|
53
|
+
get: function get() {
|
|
54
|
+
var margin = 0;
|
|
55
|
+
if (this.value > 0) margin = this.point;
|
|
56
|
+
return margin;
|
|
57
|
+
}
|
|
58
|
+
}, {
|
|
59
|
+
key: "endMargin",
|
|
43
60
|
get: function get() {
|
|
44
|
-
|
|
61
|
+
var margin = 0;
|
|
62
|
+
if (!this.isSemiDonut && this.value > 0) margin = this.point;
|
|
63
|
+
return margin;
|
|
45
64
|
}
|
|
46
65
|
}, {
|
|
47
|
-
key: "
|
|
66
|
+
key: "baseOffset",
|
|
48
67
|
get: function get() {
|
|
49
|
-
return this.
|
|
68
|
+
return -1 * (this.valueLength + this.startMargin);
|
|
50
69
|
}
|
|
51
70
|
}, {
|
|
52
|
-
key: "
|
|
71
|
+
key: "baseLength",
|
|
53
72
|
get: function get() {
|
|
54
|
-
return this.
|
|
73
|
+
return Math.max(this.fullLength - this.valueLength - this.startMargin - this.endMargin, 0);
|
|
55
74
|
}
|
|
56
75
|
}, {
|
|
57
|
-
key: "
|
|
76
|
+
key: "animatedBaseLengthFrom",
|
|
58
77
|
get: function get() {
|
|
59
|
-
|
|
60
|
-
var offsetPoint = this.offsetPoint;
|
|
61
|
-
var greyStrokeDash = greyStroke - 2 * offsetPoint;
|
|
62
|
-
var strokeDashArrayBetweenSpaces = "".concat(greyStrokeDash, " ").concat(offsetPoint);
|
|
63
|
-
if (this.isSemiDonut) {
|
|
64
|
-
return "".concat(offsetPoint, " ").concat(this.value < 95 ? strokeDashArrayBetweenSpaces : '', " ").concat(this.baseStrokeDashArray);
|
|
65
|
-
}
|
|
66
|
-
return "".concat(offsetPoint, " ").concat(greyStrokeDash >= 0 ? strokeDashArrayBetweenSpaces : '', " ").concat(this.baseStrokeDashArray);
|
|
78
|
+
return this.fullLength - this.startMargin - this.endMargin;
|
|
67
79
|
}
|
|
68
80
|
}, {
|
|
69
|
-
key: "
|
|
81
|
+
key: "animatedBaseLengthTo",
|
|
70
82
|
get: function get() {
|
|
71
|
-
|
|
72
|
-
if (!hasDivider) return 0;
|
|
73
|
-
var valueStroke = this.valueStrokeDashArray;
|
|
74
|
-
var offsetPoint = this.offsetPoint;
|
|
75
|
-
return -1 * (valueStroke + (this.isSemiDonut ? offsetPoint : 0));
|
|
83
|
+
return this.fullLength - this.valueLength - this.startMargin - this.endMargin;
|
|
76
84
|
}
|
|
77
85
|
}]);
|
|
78
86
|
}();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScoreDonutUtils.js","names":["ScoreDonutUtils","exports","value","isSemiDonut","_classCallCheck2","_defineProperty2","radius","
|
|
1
|
+
{"version":3,"file":"ScoreDonutUtils.js","names":["ScoreDonutUtils","exports","value","isSemiDonut","_classCallCheck2","_defineProperty2","radius","Math","max","min","_createClass2","key","get","PI","fullLength","valueLength","startMargin","endMargin","margin","point"],"sources":["../../../src/utils/ScoreDonutUtils.ts"],"sourcesContent":["export class ScoreDonutUtils {\n private readonly isSemiDonut: boolean;\n private readonly value: number;\n\n public readonly radius: number;\n\n constructor(value: number, isSemiDonut: boolean) {\n this.isSemiDonut = isSemiDonut;\n this.radius = isSemiDonut ? 9 : 10;\n this.value = Math.max(Math.min(value, 100), 0);\n }\n\n public get viewBox() {\n return this.isSemiDonut ? '0 0 24 12' : '0 0 24 24';\n }\n\n public get strokeWidth() {\n return this.isSemiDonut ? 6 : 4;\n }\n\n public get fullLength() {\n return this.isSemiDonut ? Math.PI * this.radius : 2 * Math.PI * this.radius;\n }\n\n public get point() {\n return this.isSemiDonut\n ? this.fullLength / (100 / 3)\n : this.fullLength / 100;\n }\n\n public get valueLength() {\n return this.fullLength * (this.value / 100);\n }\n\n public get animatedValueLength() {\n return Math.min(this.valueLength, this.fullLength - this.startMargin - this.endMargin);\n }\n\n public get startMargin() {\n let margin = 0;\n if (this.value > 0) margin = this.point;\n return margin;\n }\n\n public get endMargin() {\n let margin = 0;\n if (!this.isSemiDonut && this.value > 0) margin = this.point;\n return margin;\n }\n\n public get baseOffset() {\n return -1 * (this.valueLength + this.startMargin);\n };\n\n public get baseLength() {\n return Math.max(this.fullLength - this.valueLength - this.startMargin - this.endMargin, 0);\n }\n\n public get animatedBaseLengthFrom() {\n return this.fullLength - this.startMargin - this.endMargin;\n }\n\n public get animatedBaseLengthTo() {\n return this.fullLength - this.valueLength - this.startMargin - this.endMargin;\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,32 +1,30 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
-
import
|
|
5
|
-
import _isNativeReflectConstruct from "@babel/runtime/helpers/isNativeReflectConstruct";
|
|
6
|
-
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
4
|
+
import _callSuper from "@babel/runtime/helpers/callSuper";
|
|
7
5
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
8
6
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
9
7
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
10
8
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
11
|
-
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
12
9
|
import { createComponent, Component, Root, sstyled } from '@semcore/core';
|
|
13
10
|
import { assignProps } from '@semcore/core';
|
|
14
11
|
import { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';
|
|
15
12
|
import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
|
|
13
|
+
import { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';
|
|
16
14
|
import { Box } from '@semcore/flex-box';
|
|
17
15
|
import React from 'react';
|
|
18
16
|
/*!__reshadow-styles__:"./donut.shadow.css"*/
|
|
19
|
-
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes
|
|
17
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_19y2a{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_19y2a_gg_.__loading_19y2a_gg_,.___SLineGauge_19y2a_gg_.__loading_19y2a_gg_,.___STrendBar_19y2a_gg_.__loading_19y2a_gg_,.___STrendLine_19y2a_gg_.__loading_19y2a_gg_{animation-name:pulse_19y2a;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_19y2a_gg_.__semi_19y2a_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_19y2a_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_19y2a_gg_.__animate_19y2a_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}", /*__inner_css_end__*/"19y2a_gg_"),
|
|
20
18
|
/*__reshadow_css_end__*/
|
|
21
19
|
{
|
|
22
|
-
"__SLineGauge": "
|
|
23
|
-
"_loading": "
|
|
24
|
-
"__SDonutContainer": "
|
|
25
|
-
"__STrendLine": "
|
|
26
|
-
"__STrendBar": "
|
|
27
|
-
"@pulse": "
|
|
28
|
-
"_animate": "
|
|
29
|
-
"_semi": "
|
|
20
|
+
"__SLineGauge": "___SLineGauge_19y2a_gg_",
|
|
21
|
+
"_loading": "__loading_19y2a_gg_",
|
|
22
|
+
"__SDonutContainer": "___SDonutContainer_19y2a_gg_",
|
|
23
|
+
"__STrendLine": "___STrendLine_19y2a_gg_",
|
|
24
|
+
"__STrendBar": "___STrendBar_19y2a_gg_",
|
|
25
|
+
"@pulse": "pulse_19y2a",
|
|
26
|
+
"_animate": "__animate_19y2a_gg_",
|
|
27
|
+
"_semi": "__semi_19y2a_gg_"
|
|
30
28
|
});
|
|
31
29
|
import { ScoreDonutUtils } from '../../utils/ScoreDonutUtils';
|
|
32
30
|
var DonutRoot = /*#__PURE__*/function (_Component) {
|
|
@@ -50,7 +48,9 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
|
|
|
50
48
|
color = _this$asProps$color === void 0 ? 'chart-palette-order-1' : _this$asProps$color,
|
|
51
49
|
resolveColor = _this$asProps.resolveColor,
|
|
52
50
|
isSemiDonut = _this$asProps.isSemiDonut,
|
|
53
|
-
loading = _this$asProps.loading
|
|
51
|
+
loading = _this$asProps.loading,
|
|
52
|
+
animate = _this$asProps.animate,
|
|
53
|
+
duration = _this$asProps.duration;
|
|
54
54
|
var scoreDonut = new ScoreDonutUtils(value, isSemiDonut);
|
|
55
55
|
var _extractAriaProps = extractAriaProps(this.asProps),
|
|
56
56
|
__excludeProps = _extractAriaProps.__excludeProps,
|
|
@@ -70,32 +70,42 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
|
|
|
70
70
|
"r": scoreDonut.radius,
|
|
71
71
|
"strokeWidth": scoreDonut.strokeWidth,
|
|
72
72
|
"stroke": resolveColor(baseBgColor),
|
|
73
|
-
"strokeDasharray": loading ? undefined : "".concat(scoreDonut.
|
|
74
|
-
"strokeDashoffset": scoreDonut.
|
|
75
|
-
})
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
-
"
|
|
79
|
-
"
|
|
80
|
-
|
|
81
|
-
"strokeDasharray": "".concat(scoreDonut.valueStrokeDashArray, " ").concat(scoreDonut.baseStrokeDashArray),
|
|
82
|
-
"strokeDashoffset": scoreDonut.valueStrokeDashArray
|
|
83
|
-
}), /*#__PURE__*/React.createElement("animate", _ref2.cn("animate", {
|
|
73
|
+
"strokeDasharray": loading ? undefined : "".concat(scoreDonut.baseLength, " ").concat(scoreDonut.fullLength),
|
|
74
|
+
"strokeDashoffset": scoreDonut.baseOffset
|
|
75
|
+
}), animate && value > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("animate", _ref2.cn("animate", {
|
|
76
|
+
"attributeName": 'stroke-dasharray',
|
|
77
|
+
"from": "".concat(scoreDonut.animatedBaseLengthFrom, " ").concat(scoreDonut.fullLength),
|
|
78
|
+
"to": "".concat(scoreDonut.animatedBaseLengthTo, " ").concat(scoreDonut.fullLength),
|
|
79
|
+
"dur": duration + 'ms'
|
|
80
|
+
})), /*#__PURE__*/React.createElement("animate", _ref2.cn("animate", {
|
|
84
81
|
"attributeName": 'stroke-dashoffset',
|
|
85
|
-
"
|
|
86
|
-
|
|
82
|
+
"from": -1 * scoreDonut.startMargin,
|
|
83
|
+
"to": scoreDonut.baseOffset,
|
|
84
|
+
"dur": duration + 'ms'
|
|
85
|
+
})))), !loading && value > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("circle", _ref2.cn("circle", {
|
|
87
86
|
"cx": '12',
|
|
88
87
|
"cy": '12',
|
|
89
88
|
"r": scoreDonut.radius,
|
|
90
89
|
"strokeWidth": scoreDonut.strokeWidth,
|
|
91
|
-
"stroke": resolveColor(
|
|
92
|
-
"strokeDasharray": scoreDonut.
|
|
93
|
-
|
|
94
|
-
|
|
90
|
+
"stroke": resolveColor(color),
|
|
91
|
+
"strokeDasharray": "".concat(scoreDonut.valueLength, " ").concat(scoreDonut.fullLength)
|
|
92
|
+
}), animate && /*#__PURE__*/React.createElement("animate", _ref2.cn("animate", {
|
|
93
|
+
"attributeName": 'stroke-dasharray',
|
|
94
|
+
"from": "0 ".concat(scoreDonut.fullLength),
|
|
95
|
+
"to": "".concat(scoreDonut.valueLength, " ").concat(scoreDonut.fullLength),
|
|
96
|
+
"dur": duration + 'ms'
|
|
97
|
+
})))))));
|
|
95
98
|
}
|
|
96
99
|
}]);
|
|
97
100
|
}(Component);
|
|
98
|
-
_defineProperty(DonutRoot, "enhance", [
|
|
101
|
+
_defineProperty(DonutRoot, "enhance", [cssVariableEnhance({
|
|
102
|
+
variable: '--intergalactic-duration-extra-slow',
|
|
103
|
+
fallback: '500',
|
|
104
|
+
map: function map(v) {
|
|
105
|
+
return Number.parseInt(v, 10).toString();
|
|
106
|
+
},
|
|
107
|
+
prop: 'duration'
|
|
108
|
+
}), resolveColorEnhance()]);
|
|
99
109
|
_defineProperty(DonutRoot, "style", style);
|
|
100
110
|
_defineProperty(DonutRoot, "defaultProps", {
|
|
101
111
|
animate: true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Donut.js","names":["createComponent","Component","Root","sstyled","assignProps","extractAriaProps","resolveColorEnhance","Box","React","style","_sstyled","insert","ScoreDonutUtils","DonutRoot","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","_ref","asProps","_ref2","SDonutContainer","_this$asProps","styles","_this$asProps$baseBgC","baseBgColor","_this$asProps$color","color","resolveColor","isSemiDonut","loading","scoreDonut","_extractAriaProps","__excludeProps","extractedAriaProps","createElement","cn","_objectSpread","_assignProps","viewBox","radius","strokeWidth","undefined","concat","
|
|
1
|
+
{"version":3,"file":"Donut.js","names":["createComponent","Component","Root","sstyled","assignProps","extractAriaProps","resolveColorEnhance","cssVariableEnhance","Box","React","style","_sstyled","insert","ScoreDonutUtils","DonutRoot","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","_ref","asProps","_ref2","SDonutContainer","_this$asProps","styles","_this$asProps$baseBgC","baseBgColor","_this$asProps$color","color","resolveColor","isSemiDonut","loading","animate","duration","scoreDonut","_extractAriaProps","__excludeProps","extractedAriaProps","createElement","cn","_objectSpread","_assignProps","viewBox","radius","strokeWidth","undefined","concat","baseLength","fullLength","baseOffset","Fragment","animatedBaseLengthFrom","animatedBaseLengthTo","startMargin","valueLength","_defineProperty","variable","fallback","map","v","Number","parseInt","toString","prop","ScoreDonut","displayName","ScoreSemiDonut","enhancements","wrapperProps","props"],"sources":["../../../../src/component/score/Donut.tsx"],"sourcesContent":["import { createComponent, Component, Root, sstyled, type ComponentType } from '@semcore/core';\nimport { 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 { Box, type BoxProps } from '@semcore/flex-box';\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\ntype Enhances = {\n resolveColor: ReturnType<typeof resolveColorEnhance>;\n duration: ReturnType<typeof cssVariableEnhance>;\n isSemiDonut?: true;\n};\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: ComponentType<ScoreDonutProps, {}, {}, Enhances> =\n createComponent(DonutRoot);\n\nScoreDonut.displayName = 'MiniChart.ScoreDonut';\n\nexport const ScoreSemiDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances> = createComponent(\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,41 +1,38 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
-
import
|
|
5
|
-
import _isNativeReflectConstruct from "@babel/runtime/helpers/isNativeReflectConstruct";
|
|
6
|
-
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
4
|
+
import _callSuper from "@babel/runtime/helpers/callSuper";
|
|
7
5
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
8
6
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
9
7
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
10
8
|
import { assignProps as _assignProps3 } from "@semcore/core";
|
|
11
9
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
12
10
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
13
|
-
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
14
11
|
import { createComponent, Component, Root, sstyled } from '@semcore/core';
|
|
15
12
|
import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
|
|
16
13
|
import { Box, Flex } from '@semcore/flex-box';
|
|
17
14
|
import React from 'react';
|
|
18
15
|
/*!__reshadow-styles__:"./line.shadow.css"*/
|
|
19
|
-
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes
|
|
16
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_1tspb{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_1tspb{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_1tspb_gg_.__loading_1tspb_gg_,.___SLineGauge_1tspb_gg_.__loading_1tspb_gg_,.___STrendBar_1tspb_gg_.__loading_1tspb_gg_,.___STrendLine_1tspb_gg_.__loading_1tspb_gg_{animation-name:pulse_1tspb;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_1tspb_gg_{height:8px;background-color:var(--base-bg-color_1tspb, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_1tspb_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_1tspb_gg_.__percent_1tspb_gg_{width:var(--percent_1tspb)}.___SLineSegmentItem_1tspb_gg_.__color_1tspb_gg_,.___SLineValue_1tspb_gg_.__color_1tspb_gg_{background-color:var(--color_1tspb, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_1tspb_gg_.__segments_1tspb_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_1tspb_gg_,.___SLineGaugeSegment_1tspb_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_1tspb_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_1tspb_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_1tspb_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_1tspb;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}", /*__inner_css_end__*/"1tspb_gg_"),
|
|
20
17
|
/*__reshadow_css_end__*/
|
|
21
18
|
{
|
|
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-
|
|
19
|
+
"__SLineGauge": "___SLineGauge_1tspb_gg_",
|
|
20
|
+
"_loading": "__loading_1tspb_gg_",
|
|
21
|
+
"__SDonutContainer": "___SDonutContainer_1tspb_gg_",
|
|
22
|
+
"__STrendLine": "___STrendLine_1tspb_gg_",
|
|
23
|
+
"__STrendBar": "___STrendBar_1tspb_gg_",
|
|
24
|
+
"@pulse": "pulse_1tspb",
|
|
25
|
+
"--base-bg-color": "--base-bg-color_1tspb",
|
|
26
|
+
"__SLineValue": "___SLineValue_1tspb_gg_",
|
|
27
|
+
"_percent": "__percent_1tspb_gg_",
|
|
28
|
+
"--percent": "--percent_1tspb",
|
|
29
|
+
"_color": "__color_1tspb_gg_",
|
|
30
|
+
"__SLineSegmentItem": "___SLineSegmentItem_1tspb_gg_",
|
|
31
|
+
"--color": "--color_1tspb",
|
|
32
|
+
"_segments": "__segments_1tspb_gg_",
|
|
33
|
+
"__SLineGaugeSegment": "___SLineGaugeSegment_1tspb_gg_",
|
|
34
|
+
"__SAnimationLine": "___SAnimationLine_1tspb_gg_",
|
|
35
|
+
"@move-line": "move-line_1tspb"
|
|
39
36
|
});
|
|
40
37
|
var LineRoot = /*#__PURE__*/function (_Component) {
|
|
41
38
|
function LineRoot() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Line.js","names":["createComponent","Component","Root","sstyled","resolveColorEnhance","Box","Flex","React","style","_sstyled","insert","LineRoot","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","getSegmentProps","segmentProps","_this$asProps","asProps","children","resolveColor","sum","Children","forEach","child","isValidElement","props","width","concat","color","render","_ref","_ref5","SLineGauge","SLineValue","SAnimationLine","SLineGaugeSegment","SLineSegmentItem","_this$asProps2","styles","_this$asProps2$color","baseBgColor","loading","animate","undefined","_ref3","createElement","cn","_objectSpread","_assignProps","segments","SegmentItems","i","_ref4","push","percent","_assignProps2","Boolean","length","_defineProperty","Segment","_ref2","arguments[0]","_ref6","_assignProps3","displayName","ScoreLine"],"sources":["../../../../src/component/score/Line.tsx"],"sourcesContent":["import { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport { Box, Flex } from '@semcore/flex-box';\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: ScoreLineComponent = createComponent(LineRoot, {\n Segment,\n});\n\nScoreLine.displayName = 'MiniChart.ScoreLine';\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Line.js","names":["createComponent","Component","Root","sstyled","resolveColorEnhance","Box","Flex","React","style","_sstyled","insert","LineRoot","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","getSegmentProps","segmentProps","_this$asProps","asProps","children","resolveColor","sum","Children","forEach","child","isValidElement","props","width","concat","color","render","_ref","_ref5","SLineGauge","SLineValue","SAnimationLine","SLineGaugeSegment","SLineSegmentItem","_this$asProps2","styles","_this$asProps2$color","baseBgColor","loading","animate","undefined","_ref3","createElement","cn","_objectSpread","_assignProps","segments","SegmentItems","i","_ref4","push","percent","_assignProps2","Boolean","length","_defineProperty","Segment","_ref2","arguments[0]","_ref6","_assignProps3","displayName","ScoreLine"],"sources":["../../../../src/component/score/Line.tsx"],"sourcesContent":["import { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport { Box, Flex } from '@semcore/flex-box';\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: ScoreLineComponent = createComponent(LineRoot, {\n Segment,\n});\n\nScoreLine.displayName = 'MiniChart.ScoreLine';\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -2,14 +2,11 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
|
2
2
|
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
3
3
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
4
4
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
5
|
-
import
|
|
6
|
-
import _isNativeReflectConstruct from "@babel/runtime/helpers/isNativeReflectConstruct";
|
|
7
|
-
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
5
|
+
import _callSuper from "@babel/runtime/helpers/callSuper";
|
|
8
6
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
9
7
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
10
8
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
11
9
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
12
|
-
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
13
10
|
import { createComponent, assignProps, Root, sstyled } from '@semcore/core';
|
|
14
11
|
import { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';
|
|
15
12
|
import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
|
|
@@ -17,15 +14,15 @@ import { Box } from '@semcore/flex-box';
|
|
|
17
14
|
import React from 'react';
|
|
18
15
|
import { Trend } from './Trend';
|
|
19
16
|
/*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
|
|
20
|
-
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes
|
|
17
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_1rcp7{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1rcp7_gg_.__loading_1rcp7_gg_,.___SLineGauge_1rcp7_gg_.__loading_1rcp7_gg_,.___STrendBar_1rcp7_gg_.__loading_1rcp7_gg_,.___STrendLine_1rcp7_gg_.__loading_1rcp7_gg_{animation-name:pulse_1rcp7;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}", /*__inner_css_end__*/"1rcp7_gg_"),
|
|
21
18
|
/*__reshadow_css_end__*/
|
|
22
19
|
{
|
|
23
|
-
"__SLineGauge": "
|
|
24
|
-
"_loading": "
|
|
25
|
-
"__SDonutContainer": "
|
|
26
|
-
"__STrendLine": "
|
|
27
|
-
"__STrendBar": "
|
|
28
|
-
"@pulse": "
|
|
20
|
+
"__SLineGauge": "___SLineGauge_1rcp7_gg_",
|
|
21
|
+
"_loading": "__loading_1rcp7_gg_",
|
|
22
|
+
"__SDonutContainer": "___SDonutContainer_1rcp7_gg_",
|
|
23
|
+
"__STrendLine": "___STrendLine_1rcp7_gg_",
|
|
24
|
+
"__STrendBar": "___STrendBar_1rcp7_gg_",
|
|
25
|
+
"@pulse": "pulse_1rcp7"
|
|
29
26
|
});
|
|
30
27
|
var TrendBarRoot = /*#__PURE__*/function (_Trend) {
|
|
31
28
|
function TrendBarRoot() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Bar.js","names":["createComponent","assignProps","Root","sstyled","extractAriaProps","resolveColorEnhance","Box","React","Trend","style","_sstyled","insert","TrendBarRoot","_Trend","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","get","value","_this$asProps","asProps","data","loading","defaultData","render","_ref","_ref2","_this","STrendBar","_this$asProps2","styles","resolveColor","isHistogram","animate","step","defaultWidth","length","_extractAriaProps","__excludeProps","extractedAriaProps","createElement","cn","_objectSpread","_assignProps","containerRef","concat","_toConsumableArray","svgWidth","svgHeight","map","barItem","index","color","x","y","defaultHeight","width","height","fill","attributeName","values","dur","_defineProperty","TrendBar","displayName","TrendHistogram","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Bar.tsx"],"sourcesContent":["import { createComponent, type ComponentType, assignProps, Root, sstyled } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport { Box } from '@semcore/flex-box';\nimport React from 'react';\n\nimport { Trend, type CommonTrendProps } from './Trend';\nimport style from '../skeleton/skeleton.shadow.css';\n\ntype BarItem = {\n /**\n * Value\n */\n value: number;\n /**\n * Color of value\n */\n color?: string;\n};\n\nexport type TrendBarProps = CommonTrendProps & {\n /**\n * Data to bar chart\n */\n data: BarItem[];\n};\n\ntype Enhances = {\n resolveColor: ReturnType<typeof resolveColorEnhance>;\n isHistogram?: true;\n};\n\nclass TrendBarRoot extends Trend<TrendBarProps, typeof TrendBarRoot.enhance> {\n static enhance = [resolveColorEnhance()] as const;\n\n static style = style;\n\n static defaultProps = {\n animate: true,\n };\n\n get defaultData(): BarItem[] {\n return [{ value: 20 }, { value: 80 }, { value: 45 }, { value: 10 }];\n }\n\n get data(): BarItem[] {\n const { data, loading } = this.asProps;\n\n if (loading) {\n return this.defaultData;\n }\n\n return data;\n }\n\n render() {\n const STrendBar = Root;\n const { styles, resolveColor, isHistogram, animate, loading } = this.asProps;\n const step = this.defaultWidth / this.data.length;\n const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n return sstyled(styles)(\n <STrendBar render={Box} ref={this.containerRef} __excludeProps={['data', ...__excludeProps]}>\n <svg\n width='100%'\n height='100%'\n viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}\n role='img'\n {...extractedAriaProps}\n >\n {this.data.map((barItem, index) => {\n let color = resolveColor('chart-palette-order-other-data');\n\n if (barItem.color) {\n color = resolveColor(barItem.color);\n }\n\n return (\n <rect\n key={index}\n x={step * index}\n y={this.defaultHeight - barItem.value}\n width={isHistogram ? step : step * 0.8}\n height={barItem.value}\n fill={color}\n >\n {animate && !loading && (\n <animate\n attributeName='y'\n values={`${this.defaultHeight};${this.defaultHeight - barItem.value}`}\n dur='500ms'\n />\n )}\n </rect>\n );\n })}\n </svg>\n </STrendBar>,\n );\n }\n}\n\nexport const TrendBar: ComponentType<TrendBarProps, {}, {}, Enhances> =\n createComponent(TrendBarRoot);\n\nTrendBar.displayName = 'MiniChart.TrendBar';\n\nexport const TrendHistogram: ComponentType<TrendBarProps, {}, {}, Enhances> = createComponent(\n TrendBarRoot,\n {},\n {\n enhancements: [\n () => {\n return {\n wrapperProps: (props: TrendBarProps) => {\n return assignProps(props, { isHistogram: true });\n },\n };\n },\n ],\n },\n);\n\nTrendBar.displayName = 'MiniChart.TrendHistogram';\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Bar.js","names":["createComponent","assignProps","Root","sstyled","extractAriaProps","resolveColorEnhance","Box","React","Trend","style","_sstyled","insert","TrendBarRoot","_Trend","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","get","value","_this$asProps","asProps","data","loading","defaultData","render","_ref","_ref2","_this","STrendBar","_this$asProps2","styles","resolveColor","isHistogram","animate","step","defaultWidth","length","_extractAriaProps","__excludeProps","extractedAriaProps","createElement","cn","_objectSpread","_assignProps","containerRef","concat","_toConsumableArray","svgWidth","svgHeight","map","barItem","index","color","x","y","defaultHeight","width","height","fill","attributeName","values","dur","_defineProperty","TrendBar","displayName","TrendHistogram","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Bar.tsx"],"sourcesContent":["import { createComponent, type ComponentType, assignProps, Root, sstyled } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport { Box } from '@semcore/flex-box';\nimport React from 'react';\n\nimport { Trend, type CommonTrendProps } from './Trend';\nimport style from '../skeleton/skeleton.shadow.css';\n\ntype BarItem = {\n /**\n * Value\n */\n value: number;\n /**\n * Color of value\n */\n color?: string;\n};\n\nexport type TrendBarProps = CommonTrendProps & {\n /**\n * Data to bar chart\n */\n data: BarItem[];\n};\n\ntype Enhances = {\n resolveColor: ReturnType<typeof resolveColorEnhance>;\n isHistogram?: true;\n};\n\nclass TrendBarRoot extends Trend<TrendBarProps, typeof TrendBarRoot.enhance> {\n static enhance = [resolveColorEnhance()] as const;\n\n static style = style;\n\n static defaultProps = {\n animate: true,\n };\n\n get defaultData(): BarItem[] {\n return [{ value: 20 }, { value: 80 }, { value: 45 }, { value: 10 }];\n }\n\n get data(): BarItem[] {\n const { data, loading } = this.asProps;\n\n if (loading) {\n return this.defaultData;\n }\n\n return data;\n }\n\n render() {\n const STrendBar = Root;\n const { styles, resolveColor, isHistogram, animate, loading } = this.asProps;\n const step = this.defaultWidth / this.data.length;\n const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n return sstyled(styles)(\n <STrendBar render={Box} ref={this.containerRef} __excludeProps={['data', ...__excludeProps]}>\n <svg\n width='100%'\n height='100%'\n viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}\n role='img'\n {...extractedAriaProps}\n >\n {this.data.map((barItem, index) => {\n let color = resolveColor('chart-palette-order-other-data');\n\n if (barItem.color) {\n color = resolveColor(barItem.color);\n }\n\n return (\n <rect\n key={index}\n x={step * index}\n y={this.defaultHeight - barItem.value}\n width={isHistogram ? step : step * 0.8}\n height={barItem.value}\n fill={color}\n >\n {animate && !loading && (\n <animate\n attributeName='y'\n values={`${this.defaultHeight};${this.defaultHeight - barItem.value}`}\n dur='500ms'\n />\n )}\n </rect>\n );\n })}\n </svg>\n </STrendBar>,\n );\n }\n}\n\nexport const TrendBar: ComponentType<TrendBarProps, {}, {}, Enhances> =\n createComponent(TrendBarRoot);\n\nTrendBar.displayName = 'MiniChart.TrendBar';\n\nexport const TrendHistogram: ComponentType<TrendBarProps, {}, {}, Enhances> = createComponent(\n TrendBarRoot,\n {},\n {\n enhancements: [\n () => {\n return {\n wrapperProps: (props: TrendBarProps) => {\n return assignProps(props, { isHistogram: true });\n },\n };\n },\n ],\n },\n);\n\nTrendBar.displayName = 'MiniChart.TrendHistogram';\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -2,14 +2,11 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
|
2
2
|
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
3
3
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
4
4
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
5
|
-
import
|
|
6
|
-
import _isNativeReflectConstruct from "@babel/runtime/helpers/isNativeReflectConstruct";
|
|
7
|
-
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
5
|
+
import _callSuper from "@babel/runtime/helpers/callSuper";
|
|
8
6
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
9
7
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
10
8
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
11
9
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
12
|
-
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
13
10
|
import { createComponent, assignProps, Root, sstyled } from '@semcore/core';
|
|
14
11
|
import { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';
|
|
15
12
|
import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
|
|
@@ -18,15 +15,15 @@ import { Box } from '@semcore/flex-box';
|
|
|
18
15
|
import React from 'react';
|
|
19
16
|
import { Trend } from './Trend';
|
|
20
17
|
/*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
|
|
21
|
-
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes
|
|
18
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_1rcp7{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1rcp7_gg_.__loading_1rcp7_gg_,.___SLineGauge_1rcp7_gg_.__loading_1rcp7_gg_,.___STrendBar_1rcp7_gg_.__loading_1rcp7_gg_,.___STrendLine_1rcp7_gg_.__loading_1rcp7_gg_{animation-name:pulse_1rcp7;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}", /*__inner_css_end__*/"1rcp7_gg_"),
|
|
22
19
|
/*__reshadow_css_end__*/
|
|
23
20
|
{
|
|
24
|
-
"__SLineGauge": "
|
|
25
|
-
"_loading": "
|
|
26
|
-
"__SDonutContainer": "
|
|
27
|
-
"__STrendLine": "
|
|
28
|
-
"__STrendBar": "
|
|
29
|
-
"@pulse": "
|
|
21
|
+
"__SLineGauge": "___SLineGauge_1rcp7_gg_",
|
|
22
|
+
"_loading": "__loading_1rcp7_gg_",
|
|
23
|
+
"__SDonutContainer": "___SDonutContainer_1rcp7_gg_",
|
|
24
|
+
"__STrendLine": "___STrendLine_1rcp7_gg_",
|
|
25
|
+
"__STrendBar": "___STrendBar_1rcp7_gg_",
|
|
26
|
+
"@pulse": "pulse_1rcp7"
|
|
30
27
|
});
|
|
31
28
|
var TrendLineRoot = /*#__PURE__*/function (_Trend) {
|
|
32
29
|
function TrendLineRoot() {
|