@semcore/mini-chart 0.25.1-prerelease.0 → 0.25.2-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 +12 -11
- package/lib/cjs/component/score/Donut.js.map +1 -1
- package/lib/cjs/component/score/Line.js +18 -18
- package/lib/cjs/component/trend/Bar.js +7 -7
- package/lib/cjs/component/trend/Line.js +7 -7
- package/lib/es6/component/score/Donut.js +12 -11
- package/lib/es6/component/score/Donut.js.map +1 -1
- package/lib/es6/component/score/Line.js +18 -18
- package/lib/es6/component/trend/Bar.js +7 -7
- package/lib/es6/component/trend/Line.js +7 -7
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -18,15 +18,15 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
18
18
|
var _flexBox = require("@semcore/flex-box");
|
|
19
19
|
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
|
|
20
20
|
/*__reshadow-styles__:"./donut.shadow.css"*/
|
|
21
|
-
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes
|
|
22
|
-
"__SLineGauge": "
|
|
23
|
-
"_loading": "
|
|
24
|
-
"__SDonutContainer": "
|
|
25
|
-
"__STrendLine": "
|
|
26
|
-
"__STrendBar": "
|
|
27
|
-
"@pulse": "
|
|
28
|
-
"_animate": "
|
|
29
|
-
"_semi": "
|
|
21
|
+
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_rodoy{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_rodoy_gg_.__loading_rodoy_gg_,.___SLineGauge_rodoy_gg_.__loading_rodoy_gg_,.___STrendBar_rodoy_gg_.__loading_rodoy_gg_,.___STrendLine_rodoy_gg_.__loading_rodoy_gg_{animation-name:pulse_rodoy;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_rodoy_gg_.__semi_rodoy_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_rodoy_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_rodoy_gg_.__animate_rodoy_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}" /*__inner_css_end__*/, "rodoy_gg_") /*__reshadow_css_end__*/, {
|
|
22
|
+
"__SLineGauge": "___SLineGauge_rodoy_gg_",
|
|
23
|
+
"_loading": "__loading_rodoy_gg_",
|
|
24
|
+
"__SDonutContainer": "___SDonutContainer_rodoy_gg_",
|
|
25
|
+
"__STrendLine": "___STrendLine_rodoy_gg_",
|
|
26
|
+
"__STrendBar": "___STrendBar_rodoy_gg_",
|
|
27
|
+
"@pulse": "pulse_rodoy",
|
|
28
|
+
"_animate": "__animate_rodoy_gg_",
|
|
29
|
+
"_semi": "__semi_rodoy_gg_"
|
|
30
30
|
});
|
|
31
31
|
var DonutRoot = /*#__PURE__*/function (_Component) {
|
|
32
32
|
(0, _inherits2["default"])(DonutRoot, _Component);
|
|
@@ -63,6 +63,7 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
|
|
|
63
63
|
spaceStrokeDasharray = "".concat(offsetPoint, " ").concat(value < 95 ? "".concat(strokeDasharrayBetweenSpaces) : '', " ").concat(baseStrokeDasharray);
|
|
64
64
|
}
|
|
65
65
|
var viewBox = isSemiDonut ? '0 0 24 12' : '0 0 24 24';
|
|
66
|
+
var strokeDashoffsetBase = -1 * (valueStrokeDasharray + (isSemiDonut ? offsetPoint : 0));
|
|
66
67
|
return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SDonutContainer, _ref2.cn("SDonutContainer", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
67
68
|
"semi": isSemiDonut
|
|
68
69
|
}, _ref))), /*#__PURE__*/_react["default"].createElement("svg", _ref2.cn("svg", {
|
|
@@ -77,7 +78,7 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
|
|
|
77
78
|
"strokeWidth": strokeWidth,
|
|
78
79
|
"stroke": resolveColor(baseBgColor),
|
|
79
80
|
"strokeDasharray": loading ? undefined : "".concat(greyStrokeDasharray, " ").concat(baseStrokeDasharray),
|
|
80
|
-
"strokeDashoffset":
|
|
81
|
+
"strokeDashoffset": strokeDashoffsetBase
|
|
81
82
|
})), !loading && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("circle", _ref2.cn("circle", {
|
|
82
83
|
"cx": '12',
|
|
83
84
|
"cy": '12',
|
|
@@ -89,7 +90,7 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
|
|
|
89
90
|
}), /*#__PURE__*/_react["default"].createElement("animate", _ref2.cn("animate", {
|
|
90
91
|
"attributeName": 'stroke-dashoffset',
|
|
91
92
|
"values": "0;".concat(valueStrokeDasharray)
|
|
92
|
-
}))), value !== 100 && /*#__PURE__*/_react["default"].createElement("circle", _ref2.cn("circle", {
|
|
93
|
+
}))), value !== 100 && !isSemiDonut && /*#__PURE__*/_react["default"].createElement("circle", _ref2.cn("circle", {
|
|
93
94
|
"cx": '12',
|
|
94
95
|
"cy": '12',
|
|
95
96
|
"r": radius,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Donut.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_resolveColorEnhance","style","_index","sstyled","insert","DonutRoot","_Component","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","render","_ref","asProps","_ref2","SDonutContainer","Box","_this$asProps","styles","_this$asProps$baseBgC","baseBgColor","_this$asProps$color","color","resolveColor","isSemiDonut","loading","strokeWidth","radius","baseStrokeDasharray","Math","PI","valueStrokeDasharray","greyStrokeDasharray","offsetPoint","strokeDasharrayBetweenSpaces","concat","spaceStrokeDasharray","viewBox","createElement","cn","_objectSpread2","assignProps","undefined","Fragment","Component","_defineProperty2","resolveColorEnhance","animate","ScoreDonut","createComponent","exports","displayName","ScoreSemiDonut","enhancements","wrapperProps","props"],"sources":["../../../../src/component/score/Donut.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled, ComponentType } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport { assignProps } from '@semcore/core';\nimport { CommonScoreProps } from './Score';\n\nimport style from './donut.shadow.css';\n\nexport type ScoreDonutProps = BoxProps & CommonScoreProps;\n\ntype Enhances = {\n resolveColor: ReturnType<typeof resolveColorEnhance>;\n isSemiDonut?: true;\n};\n\nclass DonutRoot extends Component<ScoreDonutProps, {}, {}, typeof DonutRoot.enhance> {\n static enhance = [resolveColorEnhance()] 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 } = this.asProps;\n\n const strokeWidth = isSemiDonut ? 6 : 4;\n const radius = isSemiDonut ? 9 : 10;\n const baseStrokeDasharray = isSemiDonut ? Math.PI * radius : Math.PI * 2 * radius;\n const valueStrokeDasharray = baseStrokeDasharray * (value / 100);\n const greyStrokeDasharray = baseStrokeDasharray * ((100 - value) / 100);\n const offsetPoint = isSemiDonut ? baseStrokeDasharray / (100 / 3) : baseStrokeDasharray / 100;\n\n const strokeDasharrayBetweenSpaces = `${greyStrokeDasharray - 2 * offsetPoint} ${offsetPoint}`;\n\n let spaceStrokeDasharray = `${offsetPoint} ${\n value < 99 ? `${strokeDasharrayBetweenSpaces}` : ''\n } ${baseStrokeDasharray}`;\n\n if (isSemiDonut) {\n spaceStrokeDasharray = `${offsetPoint} ${\n value < 95 ? `${strokeDasharrayBetweenSpaces}` : ''\n } ${baseStrokeDasharray}`;\n }\n\n const viewBox = isSemiDonut ? '0 0 24 12' : '0 0 24 24';\n\n return sstyled(styles)(\n <SDonutContainer render={Box} semi={isSemiDonut}>\n <svg width='100%' height='100%' viewBox={viewBox} fill='none'>\n <g>\n <circle\n cx='12'\n cy='12'\n r={radius}\n strokeWidth={strokeWidth}\n stroke={resolveColor(baseBgColor)}\n strokeDasharray={\n loading ? undefined : `${greyStrokeDasharray} ${baseStrokeDasharray}`\n }\n strokeDashoffset={
|
|
1
|
+
{"version":3,"file":"Donut.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_resolveColorEnhance","style","_index","sstyled","insert","DonutRoot","_Component","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","render","_ref","asProps","_ref2","SDonutContainer","Box","_this$asProps","styles","_this$asProps$baseBgC","baseBgColor","_this$asProps$color","color","resolveColor","isSemiDonut","loading","strokeWidth","radius","baseStrokeDasharray","Math","PI","valueStrokeDasharray","greyStrokeDasharray","offsetPoint","strokeDasharrayBetweenSpaces","concat","spaceStrokeDasharray","viewBox","strokeDashoffsetBase","createElement","cn","_objectSpread2","assignProps","undefined","Fragment","Component","_defineProperty2","resolveColorEnhance","animate","ScoreDonut","createComponent","exports","displayName","ScoreSemiDonut","enhancements","wrapperProps","props"],"sources":["../../../../src/component/score/Donut.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled, ComponentType } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport { assignProps } from '@semcore/core';\nimport { CommonScoreProps } from './Score';\n\nimport style from './donut.shadow.css';\n\nexport type ScoreDonutProps = BoxProps & CommonScoreProps;\n\ntype Enhances = {\n resolveColor: ReturnType<typeof resolveColorEnhance>;\n isSemiDonut?: true;\n};\n\nclass DonutRoot extends Component<ScoreDonutProps, {}, {}, typeof DonutRoot.enhance> {\n static enhance = [resolveColorEnhance()] 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 } = this.asProps;\n\n const strokeWidth = isSemiDonut ? 6 : 4;\n const radius = isSemiDonut ? 9 : 10;\n const baseStrokeDasharray = isSemiDonut ? Math.PI * radius : Math.PI * 2 * radius;\n const valueStrokeDasharray = baseStrokeDasharray * (value / 100);\n const greyStrokeDasharray = baseStrokeDasharray * ((100 - value) / 100);\n const offsetPoint = isSemiDonut ? baseStrokeDasharray / (100 / 3) : baseStrokeDasharray / 100;\n\n const strokeDasharrayBetweenSpaces = `${greyStrokeDasharray - 2 * offsetPoint} ${offsetPoint}`;\n\n let spaceStrokeDasharray = `${offsetPoint} ${\n value < 99 ? `${strokeDasharrayBetweenSpaces}` : ''\n } ${baseStrokeDasharray}`;\n\n if (isSemiDonut) {\n spaceStrokeDasharray = `${offsetPoint} ${\n value < 95 ? `${strokeDasharrayBetweenSpaces}` : ''\n } ${baseStrokeDasharray}`;\n }\n\n const viewBox = isSemiDonut ? '0 0 24 12' : '0 0 24 24';\n const strokeDashoffsetBase = -1 * (valueStrokeDasharray + (isSemiDonut ? offsetPoint : 0));\n\n return sstyled(styles)(\n <SDonutContainer render={Box} semi={isSemiDonut}>\n <svg width='100%' height='100%' viewBox={viewBox} fill='none'>\n <g>\n <circle\n cx='12'\n cy='12'\n r={radius}\n strokeWidth={strokeWidth}\n stroke={resolveColor(baseBgColor)}\n strokeDasharray={\n loading ? undefined : `${greyStrokeDasharray} ${baseStrokeDasharray}`\n }\n strokeDashoffset={strokeDashoffsetBase}\n />\n {!loading && (\n <>\n <circle\n cx='12'\n cy='12'\n r={radius}\n strokeWidth={strokeWidth}\n stroke={resolveColor(color)}\n strokeDasharray={`${valueStrokeDasharray} ${baseStrokeDasharray}`}\n strokeDashoffset={valueStrokeDasharray}\n >\n <animate\n attributeName={'stroke-dashoffset'}\n values={`0;${valueStrokeDasharray}`}\n />\n </circle>\n {value !== 100 && !isSemiDonut && (\n <circle\n cx='12'\n cy='12'\n r={radius}\n strokeWidth={strokeWidth}\n stroke={resolveColor('chart-grid-border')}\n strokeDasharray={spaceStrokeDasharray}\n strokeDashoffset={-1 * valueStrokeDasharray}\n />\n )}\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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"}
|
|
@@ -18,24 +18,24 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
18
18
|
var _flexBox = require("@semcore/flex-box");
|
|
19
19
|
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
|
|
20
20
|
/*__reshadow-styles__:"./line.shadow.css"*/
|
|
21
|
-
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes
|
|
22
|
-
"__SLineGauge": "
|
|
23
|
-
"_loading": "
|
|
24
|
-
"__SDonutContainer": "
|
|
25
|
-
"__STrendLine": "
|
|
26
|
-
"__STrendBar": "
|
|
27
|
-
"@pulse": "
|
|
28
|
-
"--base-bg-color": "--base-bg-
|
|
29
|
-
"__SLineValue": "
|
|
30
|
-
"_percent": "
|
|
31
|
-
"--percent": "--
|
|
32
|
-
"_color": "
|
|
33
|
-
"__SLineSegmentItem": "
|
|
34
|
-
"--color": "--
|
|
35
|
-
"_segments": "
|
|
36
|
-
"__SLineGaugeSegment": "
|
|
37
|
-
"__SAnimationLine": "
|
|
38
|
-
"@move-line": "move-
|
|
21
|
+
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_f6jas{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_f6jas{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_f6jas_gg_.__loading_f6jas_gg_,.___SLineGauge_f6jas_gg_.__loading_f6jas_gg_,.___STrendBar_f6jas_gg_.__loading_f6jas_gg_,.___STrendLine_f6jas_gg_.__loading_f6jas_gg_{animation-name:pulse_f6jas;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_f6jas_gg_{height:8px;background-color:var(--base-bg-color_f6jas, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_f6jas_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_f6jas_gg_.__percent_f6jas_gg_{width:var(--percent_f6jas)}.___SLineSegmentItem_f6jas_gg_.__color_f6jas_gg_,.___SLineValue_f6jas_gg_.__color_f6jas_gg_{background-color:var(--color_f6jas, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_f6jas_gg_.__segments_f6jas_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_f6jas_gg_,.___SLineGaugeSegment_f6jas_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_f6jas_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_f6jas_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_f6jas_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_f6jas;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}" /*__inner_css_end__*/, "f6jas_gg_") /*__reshadow_css_end__*/, {
|
|
22
|
+
"__SLineGauge": "___SLineGauge_f6jas_gg_",
|
|
23
|
+
"_loading": "__loading_f6jas_gg_",
|
|
24
|
+
"__SDonutContainer": "___SDonutContainer_f6jas_gg_",
|
|
25
|
+
"__STrendLine": "___STrendLine_f6jas_gg_",
|
|
26
|
+
"__STrendBar": "___STrendBar_f6jas_gg_",
|
|
27
|
+
"@pulse": "pulse_f6jas",
|
|
28
|
+
"--base-bg-color": "--base-bg-color_f6jas",
|
|
29
|
+
"__SLineValue": "___SLineValue_f6jas_gg_",
|
|
30
|
+
"_percent": "__percent_f6jas_gg_",
|
|
31
|
+
"--percent": "--percent_f6jas",
|
|
32
|
+
"_color": "__color_f6jas_gg_",
|
|
33
|
+
"__SLineSegmentItem": "___SLineSegmentItem_f6jas_gg_",
|
|
34
|
+
"--color": "--color_f6jas",
|
|
35
|
+
"_segments": "__segments_f6jas_gg_",
|
|
36
|
+
"__SLineGaugeSegment": "___SLineGaugeSegment_f6jas_gg_",
|
|
37
|
+
"__SAnimationLine": "___SAnimationLine_f6jas_gg_",
|
|
38
|
+
"@move-line": "move-line_f6jas"
|
|
39
39
|
});
|
|
40
40
|
var LineRoot = /*#__PURE__*/function (_Component) {
|
|
41
41
|
(0, _inherits2["default"])(LineRoot, _Component);
|
|
@@ -19,13 +19,13 @@ var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/en
|
|
|
19
19
|
var _Trend2 = require("./Trend");
|
|
20
20
|
var _flexBox = require("@semcore/flex-box");
|
|
21
21
|
/*__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
|
|
22
|
-
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes
|
|
23
|
-
"__SLineGauge": "
|
|
24
|
-
"_loading": "
|
|
25
|
-
"__SDonutContainer": "
|
|
26
|
-
"__STrendLine": "
|
|
27
|
-
"__STrendBar": "
|
|
28
|
-
"@pulse": "
|
|
22
|
+
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_160pn{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_160pn_gg_.__loading_160pn_gg_,.___SLineGauge_160pn_gg_.__loading_160pn_gg_,.___STrendBar_160pn_gg_.__loading_160pn_gg_,.___STrendLine_160pn_gg_.__loading_160pn_gg_{animation-name:pulse_160pn;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}" /*__inner_css_end__*/, "160pn_gg_") /*__reshadow_css_end__*/, {
|
|
23
|
+
"__SLineGauge": "___SLineGauge_160pn_gg_",
|
|
24
|
+
"_loading": "__loading_160pn_gg_",
|
|
25
|
+
"__SDonutContainer": "___SDonutContainer_160pn_gg_",
|
|
26
|
+
"__STrendLine": "___STrendLine_160pn_gg_",
|
|
27
|
+
"__STrendBar": "___STrendBar_160pn_gg_",
|
|
28
|
+
"@pulse": "pulse_160pn"
|
|
29
29
|
});
|
|
30
30
|
var TrendBarRoot = /*#__PURE__*/function (_Trend) {
|
|
31
31
|
(0, _inherits2["default"])(TrendBarRoot, _Trend);
|
|
@@ -20,13 +20,13 @@ var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
|
|
|
20
20
|
var _Trend2 = require("./Trend");
|
|
21
21
|
var _flexBox = require("@semcore/flex-box");
|
|
22
22
|
/*__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
|
|
23
|
-
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes
|
|
24
|
-
"__SLineGauge": "
|
|
25
|
-
"_loading": "
|
|
26
|
-
"__SDonutContainer": "
|
|
27
|
-
"__STrendLine": "
|
|
28
|
-
"__STrendBar": "
|
|
29
|
-
"@pulse": "
|
|
23
|
+
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_160pn{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_160pn_gg_.__loading_160pn_gg_,.___SLineGauge_160pn_gg_.__loading_160pn_gg_,.___STrendBar_160pn_gg_.__loading_160pn_gg_,.___STrendLine_160pn_gg_.__loading_160pn_gg_{animation-name:pulse_160pn;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}" /*__inner_css_end__*/, "160pn_gg_") /*__reshadow_css_end__*/, {
|
|
24
|
+
"__SLineGauge": "___SLineGauge_160pn_gg_",
|
|
25
|
+
"_loading": "__loading_160pn_gg_",
|
|
26
|
+
"__SDonutContainer": "___SDonutContainer_160pn_gg_",
|
|
27
|
+
"__STrendLine": "___STrendLine_160pn_gg_",
|
|
28
|
+
"__STrendBar": "___STrendBar_160pn_gg_",
|
|
29
|
+
"@pulse": "pulse_160pn"
|
|
30
30
|
});
|
|
31
31
|
var TrendLineRoot = /*#__PURE__*/function (_Trend) {
|
|
32
32
|
(0, _inherits2["default"])(TrendLineRoot, _Trend);
|
|
@@ -12,15 +12,15 @@ import { Box } from '@semcore/flex-box';
|
|
|
12
12
|
import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
|
|
13
13
|
import { assignProps } from '@semcore/core';
|
|
14
14
|
/*__reshadow-styles__:"./donut.shadow.css"*/
|
|
15
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes
|
|
16
|
-
"__SLineGauge": "
|
|
17
|
-
"_loading": "
|
|
18
|
-
"__SDonutContainer": "
|
|
19
|
-
"__STrendLine": "
|
|
20
|
-
"__STrendBar": "
|
|
21
|
-
"@pulse": "
|
|
22
|
-
"_animate": "
|
|
23
|
-
"_semi": "
|
|
15
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_rodoy{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_rodoy_gg_.__loading_rodoy_gg_,.___SLineGauge_rodoy_gg_.__loading_rodoy_gg_,.___STrendBar_rodoy_gg_.__loading_rodoy_gg_,.___STrendLine_rodoy_gg_.__loading_rodoy_gg_{animation-name:pulse_rodoy;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_rodoy_gg_.__semi_rodoy_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_rodoy_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_rodoy_gg_.__animate_rodoy_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}" /*__inner_css_end__*/, "rodoy_gg_") /*__reshadow_css_end__*/, {
|
|
16
|
+
"__SLineGauge": "___SLineGauge_rodoy_gg_",
|
|
17
|
+
"_loading": "__loading_rodoy_gg_",
|
|
18
|
+
"__SDonutContainer": "___SDonutContainer_rodoy_gg_",
|
|
19
|
+
"__STrendLine": "___STrendLine_rodoy_gg_",
|
|
20
|
+
"__STrendBar": "___STrendBar_rodoy_gg_",
|
|
21
|
+
"@pulse": "pulse_rodoy",
|
|
22
|
+
"_animate": "__animate_rodoy_gg_",
|
|
23
|
+
"_semi": "__semi_rodoy_gg_"
|
|
24
24
|
});
|
|
25
25
|
var DonutRoot = /*#__PURE__*/function (_Component) {
|
|
26
26
|
_inherits(DonutRoot, _Component);
|
|
@@ -57,6 +57,7 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
|
|
|
57
57
|
spaceStrokeDasharray = "".concat(offsetPoint, " ").concat(value < 95 ? "".concat(strokeDasharrayBetweenSpaces) : '', " ").concat(baseStrokeDasharray);
|
|
58
58
|
}
|
|
59
59
|
var viewBox = isSemiDonut ? '0 0 24 12' : '0 0 24 24';
|
|
60
|
+
var strokeDashoffsetBase = -1 * (valueStrokeDasharray + (isSemiDonut ? offsetPoint : 0));
|
|
60
61
|
return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SDonutContainer, _ref2.cn("SDonutContainer", _objectSpread({}, _assignProps({
|
|
61
62
|
"semi": isSemiDonut
|
|
62
63
|
}, _ref))), /*#__PURE__*/React.createElement("svg", _ref2.cn("svg", {
|
|
@@ -71,7 +72,7 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
|
|
|
71
72
|
"strokeWidth": strokeWidth,
|
|
72
73
|
"stroke": resolveColor(baseBgColor),
|
|
73
74
|
"strokeDasharray": loading ? undefined : "".concat(greyStrokeDasharray, " ").concat(baseStrokeDasharray),
|
|
74
|
-
"strokeDashoffset":
|
|
75
|
+
"strokeDashoffset": strokeDashoffsetBase
|
|
75
76
|
})), !loading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("circle", _ref2.cn("circle", {
|
|
76
77
|
"cx": '12',
|
|
77
78
|
"cy": '12',
|
|
@@ -83,7 +84,7 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
|
|
|
83
84
|
}), /*#__PURE__*/React.createElement("animate", _ref2.cn("animate", {
|
|
84
85
|
"attributeName": 'stroke-dashoffset',
|
|
85
86
|
"values": "0;".concat(valueStrokeDasharray)
|
|
86
|
-
}))), value !== 100 && /*#__PURE__*/React.createElement("circle", _ref2.cn("circle", {
|
|
87
|
+
}))), value !== 100 && !isSemiDonut && /*#__PURE__*/React.createElement("circle", _ref2.cn("circle", {
|
|
87
88
|
"cx": '12',
|
|
88
89
|
"cy": '12',
|
|
89
90
|
"r": radius,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Donut.js","names":["React","createComponent","Component","Root","sstyled","Box","resolveColorEnhance","assignProps","style","_sstyled","insert","DonutRoot","_Component","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","value","render","_ref","asProps","_ref2","SDonutContainer","_this$asProps","styles","_this$asProps$baseBgC","baseBgColor","_this$asProps$color","color","resolveColor","isSemiDonut","loading","strokeWidth","radius","baseStrokeDasharray","Math","PI","valueStrokeDasharray","greyStrokeDasharray","offsetPoint","strokeDasharrayBetweenSpaces","concat","spaceStrokeDasharray","viewBox","createElement","cn","_objectSpread","_assignProps","undefined","Fragment","_defineProperty","animate","ScoreDonut","displayName","ScoreSemiDonut","enhancements","wrapperProps","props"],"sources":["../../../../src/component/score/Donut.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled, ComponentType } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport { assignProps } from '@semcore/core';\nimport { CommonScoreProps } from './Score';\n\nimport style from './donut.shadow.css';\n\nexport type ScoreDonutProps = BoxProps & CommonScoreProps;\n\ntype Enhances = {\n resolveColor: ReturnType<typeof resolveColorEnhance>;\n isSemiDonut?: true;\n};\n\nclass DonutRoot extends Component<ScoreDonutProps, {}, {}, typeof DonutRoot.enhance> {\n static enhance = [resolveColorEnhance()] 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 } = this.asProps;\n\n const strokeWidth = isSemiDonut ? 6 : 4;\n const radius = isSemiDonut ? 9 : 10;\n const baseStrokeDasharray = isSemiDonut ? Math.PI * radius : Math.PI * 2 * radius;\n const valueStrokeDasharray = baseStrokeDasharray * (value / 100);\n const greyStrokeDasharray = baseStrokeDasharray * ((100 - value) / 100);\n const offsetPoint = isSemiDonut ? baseStrokeDasharray / (100 / 3) : baseStrokeDasharray / 100;\n\n const strokeDasharrayBetweenSpaces = `${greyStrokeDasharray - 2 * offsetPoint} ${offsetPoint}`;\n\n let spaceStrokeDasharray = `${offsetPoint} ${\n value < 99 ? `${strokeDasharrayBetweenSpaces}` : ''\n } ${baseStrokeDasharray}`;\n\n if (isSemiDonut) {\n spaceStrokeDasharray = `${offsetPoint} ${\n value < 95 ? `${strokeDasharrayBetweenSpaces}` : ''\n } ${baseStrokeDasharray}`;\n }\n\n const viewBox = isSemiDonut ? '0 0 24 12' : '0 0 24 24';\n\n return sstyled(styles)(\n <SDonutContainer render={Box} semi={isSemiDonut}>\n <svg width='100%' height='100%' viewBox={viewBox} fill='none'>\n <g>\n <circle\n cx='12'\n cy='12'\n r={radius}\n strokeWidth={strokeWidth}\n stroke={resolveColor(baseBgColor)}\n strokeDasharray={\n loading ? undefined : `${greyStrokeDasharray} ${baseStrokeDasharray}`\n }\n strokeDashoffset={
|
|
1
|
+
{"version":3,"file":"Donut.js","names":["React","createComponent","Component","Root","sstyled","Box","resolveColorEnhance","assignProps","style","_sstyled","insert","DonutRoot","_Component","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","value","render","_ref","asProps","_ref2","SDonutContainer","_this$asProps","styles","_this$asProps$baseBgC","baseBgColor","_this$asProps$color","color","resolveColor","isSemiDonut","loading","strokeWidth","radius","baseStrokeDasharray","Math","PI","valueStrokeDasharray","greyStrokeDasharray","offsetPoint","strokeDasharrayBetweenSpaces","concat","spaceStrokeDasharray","viewBox","strokeDashoffsetBase","createElement","cn","_objectSpread","_assignProps","undefined","Fragment","_defineProperty","animate","ScoreDonut","displayName","ScoreSemiDonut","enhancements","wrapperProps","props"],"sources":["../../../../src/component/score/Donut.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled, ComponentType } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport { assignProps } from '@semcore/core';\nimport { CommonScoreProps } from './Score';\n\nimport style from './donut.shadow.css';\n\nexport type ScoreDonutProps = BoxProps & CommonScoreProps;\n\ntype Enhances = {\n resolveColor: ReturnType<typeof resolveColorEnhance>;\n isSemiDonut?: true;\n};\n\nclass DonutRoot extends Component<ScoreDonutProps, {}, {}, typeof DonutRoot.enhance> {\n static enhance = [resolveColorEnhance()] 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 } = this.asProps;\n\n const strokeWidth = isSemiDonut ? 6 : 4;\n const radius = isSemiDonut ? 9 : 10;\n const baseStrokeDasharray = isSemiDonut ? Math.PI * radius : Math.PI * 2 * radius;\n const valueStrokeDasharray = baseStrokeDasharray * (value / 100);\n const greyStrokeDasharray = baseStrokeDasharray * ((100 - value) / 100);\n const offsetPoint = isSemiDonut ? baseStrokeDasharray / (100 / 3) : baseStrokeDasharray / 100;\n\n const strokeDasharrayBetweenSpaces = `${greyStrokeDasharray - 2 * offsetPoint} ${offsetPoint}`;\n\n let spaceStrokeDasharray = `${offsetPoint} ${\n value < 99 ? `${strokeDasharrayBetweenSpaces}` : ''\n } ${baseStrokeDasharray}`;\n\n if (isSemiDonut) {\n spaceStrokeDasharray = `${offsetPoint} ${\n value < 95 ? `${strokeDasharrayBetweenSpaces}` : ''\n } ${baseStrokeDasharray}`;\n }\n\n const viewBox = isSemiDonut ? '0 0 24 12' : '0 0 24 24';\n const strokeDashoffsetBase = -1 * (valueStrokeDasharray + (isSemiDonut ? offsetPoint : 0));\n\n return sstyled(styles)(\n <SDonutContainer render={Box} semi={isSemiDonut}>\n <svg width='100%' height='100%' viewBox={viewBox} fill='none'>\n <g>\n <circle\n cx='12'\n cy='12'\n r={radius}\n strokeWidth={strokeWidth}\n stroke={resolveColor(baseBgColor)}\n strokeDasharray={\n loading ? undefined : `${greyStrokeDasharray} ${baseStrokeDasharray}`\n }\n strokeDashoffset={strokeDashoffsetBase}\n />\n {!loading && (\n <>\n <circle\n cx='12'\n cy='12'\n r={radius}\n strokeWidth={strokeWidth}\n stroke={resolveColor(color)}\n strokeDasharray={`${valueStrokeDasharray} ${baseStrokeDasharray}`}\n strokeDashoffset={valueStrokeDasharray}\n >\n <animate\n attributeName={'stroke-dashoffset'}\n values={`0;${valueStrokeDasharray}`}\n />\n </circle>\n {value !== 100 && !isSemiDonut && (\n <circle\n cx='12'\n cy='12'\n r={radius}\n strokeWidth={strokeWidth}\n stroke={resolveColor('chart-grid-border')}\n strokeDasharray={spaceStrokeDasharray}\n strokeDashoffset={-1 * valueStrokeDasharray}\n />\n )}\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":";;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,eAAe,IAAIC,SAAS,EAAEC,IAAI,EAAEC,OAAO,QAAuB,eAAe;AACxF,SAASC,GAAG,QAAkB,mBAAmB;AACjD,OAAOC,mBAAmB,MAAM,iDAAiD;AACjF,SAASC,WAAW,QAAQ,eAAe;AAAC;AAAA,IAAAC,KAAA,+BAAAC,QAAA,CAAAC,MAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,IAYtCC,SAAS,0BAAAC,UAAA;EAAAC,SAAA,CAAAF,SAAA,EAAAC,UAAA;EAAA,IAAAE,MAAA,GAAAC,YAAA,CAAAJ,SAAA;EAAA,SAAAA,UAAA;IAAAK,eAAA,OAAAL,SAAA;IAAA,OAAAG,MAAA,CAAAG,KAAA,OAAAC,SAAA;EAAA;EAAAC,YAAA,CAAAR,SAAA;IAAAS,GAAA;IAAAC,KAAA,EASb,SAAAC,OAAA,EAAS;MAAA,IAAAC,IAAA,QAAAC,OAAA;QAAAC,KAAA;MACP,IAAMC,eAAe,GAkCMrB,GAAG;MAjC9B,IAAAsB,aAAA,GAQI,IAAI,CAACH,OAAO;QAPdH,KAAK,GAAAM,aAAA,CAALN,KAAK;QACLO,MAAM,GAAAD,aAAA,CAANC,MAAM;QAAAC,qBAAA,GAAAF,aAAA,CACNG,WAAW;QAAXA,WAAW,GAAAD,qBAAA,cAAG,8BAA8B,GAAAA,qBAAA;QAAAE,mBAAA,GAAAJ,aAAA,CAC5CK,KAAK;QAALA,KAAK,GAAAD,mBAAA,cAAG,uBAAuB,GAAAA,mBAAA;QAC/BE,YAAY,GAAAN,aAAA,CAAZM,YAAY;QACZC,WAAW,GAAAP,aAAA,CAAXO,WAAW;QACXC,OAAO,GAAAR,aAAA,CAAPQ,OAAO;MAGT,IAAMC,WAAW,GAAGF,WAAW,GAAG,CAAC,GAAG,CAAC;MACvC,IAAMG,MAAM,GAAGH,WAAW,GAAG,CAAC,GAAG,EAAE;MACnC,IAAMI,mBAAmB,GAAGJ,WAAW,GAAGK,IAAI,CAACC,EAAE,GAAGH,MAAM,GAAGE,IAAI,CAACC,EAAE,GAAG,CAAC,GAAGH,MAAM;MACjF,IAAMI,oBAAoB,GAAGH,mBAAmB,IAAIjB,KAAK,GAAG,GAAG,CAAC;MAChE,IAAMqB,mBAAmB,GAAGJ,mBAAmB,IAAI,CAAC,GAAG,GAAGjB,KAAK,IAAI,GAAG,CAAC;MACvE,IAAMsB,WAAW,GAAGT,WAAW,GAAGI,mBAAmB,IAAI,GAAG,GAAG,CAAC,CAAC,GAAGA,mBAAmB,GAAG,GAAG;MAE7F,IAAMM,4BAA4B,MAAAC,MAAA,CAAMH,mBAAmB,GAAG,CAAC,GAAGC,WAAW,OAAAE,MAAA,CAAIF,WAAW,CAAE;MAE9F,IAAIG,oBAAoB,MAAAD,MAAA,CAAMF,WAAW,OAAAE,MAAA,CACvCxB,KAAK,GAAG,EAAE,MAAAwB,MAAA,CAAMD,4BAA4B,IAAK,EAAE,OAAAC,MAAA,CACjDP,mBAAmB,CAAE;MAEzB,IAAIJ,WAAW,EAAE;QACfY,oBAAoB,MAAAD,MAAA,CAAMF,WAAW,OAAAE,MAAA,CACnCxB,KAAK,GAAG,EAAE,MAAAwB,MAAA,CAAMD,4BAA4B,IAAK,EAAE,OAAAC,MAAA,CACjDP,mBAAmB,CAAE;MAC3B;MAEA,IAAMS,OAAO,GAAGb,WAAW,GAAG,WAAW,GAAG,WAAW;MACvD,IAAMc,oBAAoB,GAAG,CAAC,CAAC,IAAIP,oBAAoB,IAAIP,WAAW,GAAGS,WAAW,GAAG,CAAC,CAAC,CAAC;MAE1F,OAAAlB,KAAA,GAAOrB,OAAO,CAACwB,MAAM,CAAC,eACpB5B,KAAA,CAAAiD,aAAA,CAACvB,eAAe,EAAAD,KAAA,CAAAyB,EAAA,oBAAAC,aAAA,KAAAC,YAAA;QAAA,QAAoBlB;MAAW,GAAAX,IAAA,kBAC7CvB,KAAA,CAAAiD,aAAA,QAAAxB,KAAA,CAAAyB,EAAA;QAAA,SAAW,MAAM;QAAA,UAAQ,MAAM;QAAA,WAAUH,OAAO;QAAA,QAAO;MAAM,iBAC3D/C,KAAA,CAAAiD,aAAA,MAAAxB,KAAA,CAAAyB,EAAA,wBACElD,KAAA,CAAAiD,aAAA,WAAAxB,KAAA,CAAAyB,EAAA;QAAA,MACK,IAAI;QAAA,MACJ,IAAI;QAAA,KACJb,MAAM;QAAA,eACID,WAAW;QAAA,UAChBH,YAAY,CAACH,WAAW,CAAC;QAAA,mBAE/BK,OAAO,GAAGkB,SAAS,MAAAR,MAAA,CAAMH,mBAAmB,OAAAG,MAAA,CAAIP,mBAAmB,CAAE;QAAA,oBAErDU;MAAoB,GACtC,EACD,CAACb,OAAO,iBACPnC,KAAA,CAAAiD,aAAA,CAAAjD,KAAA,CAAAsD,QAAA,qBACEtD,KAAA,CAAAiD,aAAA,WAAAxB,KAAA,CAAAyB,EAAA;QAAA,MACK,IAAI;QAAA,MACJ,IAAI;QAAA,KACJb,MAAM;QAAA,eACID,WAAW;QAAA,UAChBH,YAAY,CAACD,KAAK,CAAC;QAAA,sBAAAa,MAAA,CACPJ,oBAAoB,OAAAI,MAAA,CAAIP,mBAAmB;QAAA,oBAC7CG;MAAoB,iBAEtCzC,KAAA,CAAAiD,aAAA,YAAAxB,KAAA,CAAAyB,EAAA;QAAA,iBACiB,mBAAmB;QAAA,eAAAL,MAAA,CACrBJ,oBAAoB;MAAA,GACjC,CACK,EACRpB,KAAK,KAAK,GAAG,IAAI,CAACa,WAAW,iBAC5BlC,KAAA,CAAAiD,aAAA,WAAAxB,KAAA,CAAAyB,EAAA;QAAA,MACK,IAAI;QAAA,MACJ,IAAI;QAAA,KACJb,MAAM;QAAA,eACID,WAAW;QAAA,UAChBH,YAAY,CAAC,mBAAmB,CAAC;QAAA,mBACxBa,oBAAoB;QAAA,oBACnB,CAAC,CAAC,GAAGL;MAAoB,GAE9C,CAEJ,CACC,CACA,CACU;IAEtB;EAAC;EAAA,OAAA9B,SAAA;AAAA,EA3FqBT,SAAS;AAAAqD,eAAA,CAA3B5C,SAAS,aACI,CAACL,mBAAmB,EAAE,CAAC;AAAAiD,eAAA,CADpC5C,SAAS,WAGEH,KAAK;AAAA+C,eAAA,CAHhB5C,SAAS,kBAKS;EACpB6C,OAAO,EAAE;AACX,CAAC;AAuFH,OAAO,IAAMC,UAA4D,GACvExD,eAAe,CAACU,SAAS,CAAC;AAE5B8C,UAAU,CAACC,WAAW,GAAG,sBAAsB;AAE/C,OAAO,IAAMC,cAAgE,GAAG1D,eAAe,CAC7FU,SAAS,EACT,CAAC,CAAC,EACF;EACEiD,YAAY,EAAE,CACZ,YAAM;IACJ,OAAO;MACLC,YAAY,EAAE,SAAAA,aAACC,KAAsB,EAAK;QACxC,OAAOvD,WAAW,CAACuD,KAAK,EAAE;UAAE5B,WAAW,EAAE;QAAK,CAAC,CAAC;MAClD;IACF,CAAC;EACH,CAAC;AAEL,CAAC,CACF;AAEDyB,cAAc,CAACD,WAAW,GAAG,0BAA0B"}
|
|
@@ -13,24 +13,24 @@ import createComponent, { Component, Root, sstyled } from '@semcore/core';
|
|
|
13
13
|
import { Box, Flex } from '@semcore/flex-box';
|
|
14
14
|
import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
|
|
15
15
|
/*__reshadow-styles__:"./line.shadow.css"*/
|
|
16
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes
|
|
17
|
-
"__SLineGauge": "
|
|
18
|
-
"_loading": "
|
|
19
|
-
"__SDonutContainer": "
|
|
20
|
-
"__STrendLine": "
|
|
21
|
-
"__STrendBar": "
|
|
22
|
-
"@pulse": "
|
|
23
|
-
"--base-bg-color": "--base-bg-
|
|
24
|
-
"__SLineValue": "
|
|
25
|
-
"_percent": "
|
|
26
|
-
"--percent": "--
|
|
27
|
-
"_color": "
|
|
28
|
-
"__SLineSegmentItem": "
|
|
29
|
-
"--color": "--
|
|
30
|
-
"_segments": "
|
|
31
|
-
"__SLineGaugeSegment": "
|
|
32
|
-
"__SAnimationLine": "
|
|
33
|
-
"@move-line": "move-
|
|
16
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_f6jas{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_f6jas{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_f6jas_gg_.__loading_f6jas_gg_,.___SLineGauge_f6jas_gg_.__loading_f6jas_gg_,.___STrendBar_f6jas_gg_.__loading_f6jas_gg_,.___STrendLine_f6jas_gg_.__loading_f6jas_gg_{animation-name:pulse_f6jas;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_f6jas_gg_{height:8px;background-color:var(--base-bg-color_f6jas, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_f6jas_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_f6jas_gg_.__percent_f6jas_gg_{width:var(--percent_f6jas)}.___SLineSegmentItem_f6jas_gg_.__color_f6jas_gg_,.___SLineValue_f6jas_gg_.__color_f6jas_gg_{background-color:var(--color_f6jas, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_f6jas_gg_.__segments_f6jas_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_f6jas_gg_,.___SLineGaugeSegment_f6jas_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_f6jas_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_f6jas_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_f6jas_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_f6jas;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}" /*__inner_css_end__*/, "f6jas_gg_") /*__reshadow_css_end__*/, {
|
|
17
|
+
"__SLineGauge": "___SLineGauge_f6jas_gg_",
|
|
18
|
+
"_loading": "__loading_f6jas_gg_",
|
|
19
|
+
"__SDonutContainer": "___SDonutContainer_f6jas_gg_",
|
|
20
|
+
"__STrendLine": "___STrendLine_f6jas_gg_",
|
|
21
|
+
"__STrendBar": "___STrendBar_f6jas_gg_",
|
|
22
|
+
"@pulse": "pulse_f6jas",
|
|
23
|
+
"--base-bg-color": "--base-bg-color_f6jas",
|
|
24
|
+
"__SLineValue": "___SLineValue_f6jas_gg_",
|
|
25
|
+
"_percent": "__percent_f6jas_gg_",
|
|
26
|
+
"--percent": "--percent_f6jas",
|
|
27
|
+
"_color": "__color_f6jas_gg_",
|
|
28
|
+
"__SLineSegmentItem": "___SLineSegmentItem_f6jas_gg_",
|
|
29
|
+
"--color": "--color_f6jas",
|
|
30
|
+
"_segments": "__segments_f6jas_gg_",
|
|
31
|
+
"__SLineGaugeSegment": "___SLineGaugeSegment_f6jas_gg_",
|
|
32
|
+
"__SAnimationLine": "___SAnimationLine_f6jas_gg_",
|
|
33
|
+
"@move-line": "move-line_f6jas"
|
|
34
34
|
});
|
|
35
35
|
var LineRoot = /*#__PURE__*/function (_Component) {
|
|
36
36
|
_inherits(LineRoot, _Component);
|
|
@@ -12,13 +12,13 @@ import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance
|
|
|
12
12
|
import { Trend } from './Trend';
|
|
13
13
|
import { Box } from '@semcore/flex-box';
|
|
14
14
|
/*__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
|
|
15
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes
|
|
16
|
-
"__SLineGauge": "
|
|
17
|
-
"_loading": "
|
|
18
|
-
"__SDonutContainer": "
|
|
19
|
-
"__STrendLine": "
|
|
20
|
-
"__STrendBar": "
|
|
21
|
-
"@pulse": "
|
|
15
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_160pn{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_160pn_gg_.__loading_160pn_gg_,.___SLineGauge_160pn_gg_.__loading_160pn_gg_,.___STrendBar_160pn_gg_.__loading_160pn_gg_,.___STrendLine_160pn_gg_.__loading_160pn_gg_{animation-name:pulse_160pn;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}" /*__inner_css_end__*/, "160pn_gg_") /*__reshadow_css_end__*/, {
|
|
16
|
+
"__SLineGauge": "___SLineGauge_160pn_gg_",
|
|
17
|
+
"_loading": "__loading_160pn_gg_",
|
|
18
|
+
"__SDonutContainer": "___SDonutContainer_160pn_gg_",
|
|
19
|
+
"__STrendLine": "___STrendLine_160pn_gg_",
|
|
20
|
+
"__STrendBar": "___STrendBar_160pn_gg_",
|
|
21
|
+
"@pulse": "pulse_160pn"
|
|
22
22
|
});
|
|
23
23
|
var TrendBarRoot = /*#__PURE__*/function (_Trend) {
|
|
24
24
|
_inherits(TrendBarRoot, _Trend);
|
|
@@ -13,13 +13,13 @@ import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
|
|
|
13
13
|
import { Trend } from './Trend';
|
|
14
14
|
import { Box } from '@semcore/flex-box';
|
|
15
15
|
/*__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
|
|
16
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes
|
|
17
|
-
"__SLineGauge": "
|
|
18
|
-
"_loading": "
|
|
19
|
-
"__SDonutContainer": "
|
|
20
|
-
"__STrendLine": "
|
|
21
|
-
"__STrendBar": "
|
|
22
|
-
"@pulse": "
|
|
16
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_160pn{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_160pn_gg_.__loading_160pn_gg_,.___SLineGauge_160pn_gg_.__loading_160pn_gg_,.___STrendBar_160pn_gg_.__loading_160pn_gg_,.___STrendLine_160pn_gg_.__loading_160pn_gg_{animation-name:pulse_160pn;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}" /*__inner_css_end__*/, "160pn_gg_") /*__reshadow_css_end__*/, {
|
|
17
|
+
"__SLineGauge": "___SLineGauge_160pn_gg_",
|
|
18
|
+
"_loading": "__loading_160pn_gg_",
|
|
19
|
+
"__SDonutContainer": "___SDonutContainer_160pn_gg_",
|
|
20
|
+
"__STrendLine": "___STrendLine_160pn_gg_",
|
|
21
|
+
"__STrendBar": "___STrendBar_160pn_gg_",
|
|
22
|
+
"@pulse": "pulse_160pn"
|
|
23
23
|
});
|
|
24
24
|
var TrendLineRoot = /*#__PURE__*/function (_Trend) {
|
|
25
25
|
_inherits(TrendLineRoot, _Trend);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/mini-chart",
|
|
3
3
|
"description": "Semrush MiniChart Component",
|
|
4
|
-
"version": "0.25.
|
|
4
|
+
"version": "0.25.2-prerelease.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -9,11 +9,11 @@
|
|
|
9
9
|
"author": "UI-kit team <ui-kit-team@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"@semcore/flex-box": "5.38.
|
|
13
|
-
"@semcore/utils": "4.43.
|
|
12
|
+
"@semcore/flex-box": "5.38.2-prerelease.0",
|
|
13
|
+
"@semcore/utils": "4.43.3-prerelease.0"
|
|
14
14
|
},
|
|
15
15
|
"peerDependencies": {
|
|
16
|
-
"@semcore/core": "^2.36.
|
|
16
|
+
"@semcore/core": "^2.36.2-prerelease.0",
|
|
17
17
|
"react": "16.8 - 18",
|
|
18
18
|
"react-dom": "16.8 - 18"
|
|
19
19
|
},
|