@semcore/mini-chart 16.1.1 → 17.0.0-prerelease.18
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/README.md +4 -4
- package/lib/cjs/component/score/Donut.js +84 -96
- package/lib/cjs/component/score/Donut.js.map +1 -1
- package/lib/cjs/component/score/Line.js +104 -108
- 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/index.js +3 -3
- package/lib/cjs/component/trend/Bar.js +83 -96
- package/lib/cjs/component/trend/Bar.js.map +1 -1
- package/lib/cjs/component/trend/Line.js +114 -135
- package/lib/cjs/component/trend/Line.js.map +1 -1
- package/lib/cjs/component/trend/Trend.js +43 -65
- package/lib/cjs/component/trend/Trend.js.map +1 -1
- package/lib/cjs/component/trend/index.js +4 -4
- package/lib/cjs/index.js +3 -3
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/utils/ScoreDonutUtils.js +48 -75
- package/lib/cjs/utils/ScoreDonutUtils.js.map +1 -1
- package/lib/es6/component/score/Donut.js +80 -93
- package/lib/es6/component/score/Donut.js.map +1 -1
- package/lib/es6/component/score/Line.js +99 -103
- 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/trend/Bar.js +78 -91
- package/lib/es6/component/trend/Bar.js.map +1 -1
- package/lib/es6/component/trend/Line.js +109 -130
- package/lib/es6/component/trend/Line.js.map +1 -1
- package/lib/es6/component/trend/Trend.js +41 -64
- package/lib/es6/component/trend/Trend.js.map +1 -1
- package/lib/es6/index.js +8 -8
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/utils/ScoreDonutUtils.js +43 -71
- package/lib/es6/utils/ScoreDonutUtils.js.map +1 -1
- package/lib/esm/component/score/Donut.mjs +80 -79
- package/lib/esm/component/score/Line.mjs +100 -91
- package/lib/esm/component/trend/Bar.mjs +79 -82
- package/lib/esm/component/trend/Line.mjs +110 -116
- package/lib/esm/component/trend/Trend.mjs +41 -61
- package/lib/esm/index.mjs +1 -1
- package/lib/esm/utils/ScoreDonutUtils.mjs +43 -71
- package/lib/types/component/score/Donut.d.ts +7 -12
- package/lib/types/component/score/Line.types.d.ts +8 -6
- package/lib/types/component/trend/Bar.d.ts +2 -8
- package/lib/types/component/trend/Line.d.ts +6 -10
- package/lib/types/component/trend/Trend.d.ts +3 -3
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Line.js","names":["_core","require","
|
|
1
|
+
{"version":3,"file":"Line.js","names":["_core","require","_baseComponents","_resolveColorEnhance","_interopRequireDefault","_react","style","sstyled","insert","LineRoot","Component","getSegmentProps","segmentProps","children","resolveColor","asProps","sum","React","Children","forEach","child","isValidElement","props","value","width","color","render","_ref","_ref5","SLineGauge","Box","SLineValue","SAnimationLine","SLineGaugeSegment","Flex","SLineSegmentItem","styles","baseBgColor","loading","animate","undefined","_ref3","default","createElement","cn","assignProps","segments","SegmentItems","i","_ref4","push","percent","Boolean","length","_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 type {
|
|
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":[]}
|
|
@@ -5,19 +5,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
Object.defineProperty(exports, "ScoreDonut", {
|
|
7
7
|
enumerable: true,
|
|
8
|
-
get: function
|
|
8
|
+
get: function () {
|
|
9
9
|
return _Donut.ScoreDonut;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
Object.defineProperty(exports, "ScoreLine", {
|
|
13
13
|
enumerable: true,
|
|
14
|
-
get: function
|
|
14
|
+
get: function () {
|
|
15
15
|
return _Line.ScoreLine;
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
18
|
Object.defineProperty(exports, "ScoreSemiDonut", {
|
|
19
19
|
enumerable: true,
|
|
20
|
-
get: function
|
|
20
|
+
get: function () {
|
|
21
21
|
return _Donut.ScoreSemiDonut;
|
|
22
22
|
}
|
|
23
23
|
});
|
|
@@ -1,121 +1,108 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.TrendHistogram = exports.TrendBar = void 0;
|
|
8
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
|
-
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
10
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
12
|
-
var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
|
|
13
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
14
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
9
|
var _core = require("@semcore/core");
|
|
10
|
+
var _baseComponents = require("@semcore/base-components");
|
|
16
11
|
var _ariaProps = require("@semcore/core/lib/utils/ariaProps");
|
|
17
12
|
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/resolveColorEnhance"));
|
|
18
|
-
var _flexBox = require("@semcore/flex-box");
|
|
19
13
|
var _react = _interopRequireDefault(require("react"));
|
|
20
|
-
var
|
|
14
|
+
var _Trend = require("./Trend");
|
|
21
15
|
/*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
|
|
22
|
-
|
|
16
|
+
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_1ydx6{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1ydx6_gg_.__loading_1ydx6_gg_,.___SLineGauge_1ydx6_gg_.__loading_1ydx6_gg_,.___STrendBar_1ydx6_gg_.__loading_1ydx6_gg_,.___STrendLine_1ydx6_gg_.__loading_1ydx6_gg_{animation-name:pulse_1ydx6;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}", /*__inner_css_end__*/"1ydx6_gg_"),
|
|
23
17
|
/*__reshadow_css_end__*/
|
|
24
18
|
{
|
|
25
|
-
"__SLineGauge": "
|
|
26
|
-
"_loading": "
|
|
27
|
-
"__SDonutContainer": "
|
|
28
|
-
"__STrendLine": "
|
|
29
|
-
"__STrendBar": "
|
|
30
|
-
"@pulse": "
|
|
19
|
+
"__SLineGauge": "___SLineGauge_1ydx6_gg_",
|
|
20
|
+
"_loading": "__loading_1ydx6_gg_",
|
|
21
|
+
"__SDonutContainer": "___SDonutContainer_1ydx6_gg_",
|
|
22
|
+
"__STrendLine": "___STrendLine_1ydx6_gg_",
|
|
23
|
+
"__STrendBar": "___STrendBar_1ydx6_gg_",
|
|
24
|
+
"@pulse": "pulse_1ydx6"
|
|
31
25
|
});
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
26
|
+
class TrendBarRoot extends _Trend.Trend {
|
|
27
|
+
get defaultData() {
|
|
28
|
+
return [{
|
|
29
|
+
value: 20
|
|
30
|
+
}, {
|
|
31
|
+
value: 80
|
|
32
|
+
}, {
|
|
33
|
+
value: 45
|
|
34
|
+
}, {
|
|
35
|
+
value: 10
|
|
36
|
+
}];
|
|
36
37
|
}
|
|
37
|
-
(
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
value: 80
|
|
45
|
-
}, {
|
|
46
|
-
value: 45
|
|
47
|
-
}, {
|
|
48
|
-
value: 10
|
|
49
|
-
}];
|
|
38
|
+
get data() {
|
|
39
|
+
const {
|
|
40
|
+
data,
|
|
41
|
+
loading
|
|
42
|
+
} = this.asProps;
|
|
43
|
+
if (loading) {
|
|
44
|
+
return this.defaultData;
|
|
50
45
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
resolveColor = _this$asProps2.resolveColor,
|
|
72
|
-
isHistogram = _this$asProps2.isHistogram,
|
|
73
|
-
animate = _this$asProps2.animate,
|
|
74
|
-
loading = _this$asProps2.loading;
|
|
75
|
-
var step = this.defaultWidth / this.data.length;
|
|
76
|
-
var _extractAriaProps = (0, _ariaProps.extractAriaProps)(this.asProps),
|
|
77
|
-
__excludeProps = _extractAriaProps.__excludeProps,
|
|
78
|
-
extractedAriaProps = _extractAriaProps.extractedAriaProps;
|
|
79
|
-
return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STrendBar, _ref2.cn("STrendBar", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
46
|
+
return data;
|
|
47
|
+
}
|
|
48
|
+
render() {
|
|
49
|
+
var _ref = this.asProps,
|
|
50
|
+
_ref2;
|
|
51
|
+
const STrendBar = _baseComponents.Box;
|
|
52
|
+
const {
|
|
53
|
+
styles,
|
|
54
|
+
resolveColor,
|
|
55
|
+
isHistogram,
|
|
56
|
+
animate,
|
|
57
|
+
loading
|
|
58
|
+
} = this.asProps;
|
|
59
|
+
const step = this.defaultWidth / this.data.length;
|
|
60
|
+
const {
|
|
61
|
+
__excludeProps,
|
|
62
|
+
extractedAriaProps
|
|
63
|
+
} = (0, _ariaProps.extractAriaProps)(this.asProps);
|
|
64
|
+
return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(STrendBar, _ref2.cn("STrendBar", {
|
|
65
|
+
...(0, _core.assignProps)({
|
|
80
66
|
"ref": this.containerRef,
|
|
81
|
-
"__excludeProps": ['data'
|
|
82
|
-
}, _ref)
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
(0, _defineProperty2
|
|
110
|
-
(0, _defineProperty2
|
|
67
|
+
"__excludeProps": ['data', ...__excludeProps]
|
|
68
|
+
}, _ref)
|
|
69
|
+
}), /*#__PURE__*/_react.default.createElement("svg", _ref2.cn("svg", {
|
|
70
|
+
"width": '100%',
|
|
71
|
+
"height": '100%',
|
|
72
|
+
"viewBox": `0 0 ${this.svgWidth} ${this.svgHeight}`,
|
|
73
|
+
"role": 'img',
|
|
74
|
+
...extractedAriaProps
|
|
75
|
+
}), this.data.map((barItem, index) => {
|
|
76
|
+
let color = resolveColor('chart-palette-order-other-data');
|
|
77
|
+
if (barItem.color) {
|
|
78
|
+
color = resolveColor(barItem.color);
|
|
79
|
+
}
|
|
80
|
+
return /*#__PURE__*/_react.default.createElement("rect", {
|
|
81
|
+
key: index,
|
|
82
|
+
x: step * index,
|
|
83
|
+
y: this.defaultHeight - barItem.value,
|
|
84
|
+
width: isHistogram ? step : step * 0.8,
|
|
85
|
+
height: barItem.value,
|
|
86
|
+
fill: color
|
|
87
|
+
}, animate && !loading && /*#__PURE__*/_react.default.createElement("animate", {
|
|
88
|
+
attributeName: "y",
|
|
89
|
+
values: `${this.defaultHeight};${this.defaultHeight - barItem.value}`,
|
|
90
|
+
dur: "500ms"
|
|
91
|
+
}));
|
|
92
|
+
})));
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
(0, _defineProperty2.default)(TrendBarRoot, "enhance", [(0, _resolveColorEnhance.default)()]);
|
|
96
|
+
(0, _defineProperty2.default)(TrendBarRoot, "style", style);
|
|
97
|
+
(0, _defineProperty2.default)(TrendBarRoot, "defaultProps", {
|
|
111
98
|
animate: true
|
|
112
99
|
});
|
|
113
|
-
|
|
100
|
+
const TrendBar = exports.TrendBar = (0, _core.createComponent)(TrendBarRoot);
|
|
114
101
|
TrendBar.displayName = 'MiniChart.TrendBar';
|
|
115
|
-
|
|
116
|
-
enhancements: [
|
|
102
|
+
const TrendHistogram = exports.TrendHistogram = (0, _core.createComponent)(TrendBarRoot, {}, {
|
|
103
|
+
enhancements: [() => {
|
|
117
104
|
return {
|
|
118
|
-
wrapperProps:
|
|
105
|
+
wrapperProps: props => {
|
|
119
106
|
return (0, _core.assignProps)(props, {
|
|
120
107
|
isHistogram: true
|
|
121
108
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Bar.js","names":["_core","require","_ariaProps","_resolveColorEnhance","_interopRequireDefault","
|
|
1
|
+
{"version":3,"file":"Bar.js","names":["_core","require","_baseComponents","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_react","_Trend","style","sstyled","insert","TrendBarRoot","Trend","defaultData","value","data","loading","asProps","render","_ref","_ref2","STrendBar","Box","styles","resolveColor","isHistogram","animate","step","defaultWidth","length","__excludeProps","extractedAriaProps","extractAriaProps","default","createElement","cn","assignProps","containerRef","svgWidth","svgHeight","map","barItem","index","color","key","x","y","defaultHeight","width","height","fill","attributeName","values","dur","_defineProperty2","resolveColorEnhance","TrendBar","exports","createComponent","displayName","TrendHistogram","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Bar.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, assignProps, Root, sstyled } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\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\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 = createComponent<'svg', TrendBarProps, {}, typeof TrendBarRoot.enhance>(TrendBarRoot);\n\nTrendBar.displayName = 'MiniChart.TrendBar';\n\nexport const TrendHistogram = createComponent<'svg', TrendBarProps, {}, typeof TrendBarRoot.enhance>(\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":[]}
|