intergalactic 15.51.0 → 15.52.0-prerelease.0-prerelease-1498e1e9
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/components.json +1 -0
- package/date-picker/lib/cjs/components/ButtonTrigger.js +1 -5
- package/date-picker/lib/cjs/components/ButtonTrigger.js.map +1 -1
- package/date-picker/lib/cjs/components/Calendar.js +21 -21
- package/date-picker/lib/cjs/components/DateRangeComparatorAbstract.js +65 -42
- package/date-picker/lib/cjs/components/DateRangeComparatorAbstract.js.map +1 -1
- package/date-picker/lib/cjs/components/InputTrigger.js +26 -26
- package/date-picker/lib/cjs/components/PickerAbstract.js +80 -72
- package/date-picker/lib/cjs/components/PickerAbstract.js.map +1 -1
- package/date-picker/lib/cjs/components/RangePickerAbstract.js +97 -86
- package/date-picker/lib/cjs/components/RangePickerAbstract.js.map +1 -1
- package/date-picker/lib/es6/components/ButtonTrigger.js +1 -5
- package/date-picker/lib/es6/components/ButtonTrigger.js.map +1 -1
- package/date-picker/lib/es6/components/Calendar.js +21 -21
- package/date-picker/lib/es6/components/DateRangeComparatorAbstract.js +65 -42
- package/date-picker/lib/es6/components/DateRangeComparatorAbstract.js.map +1 -1
- package/date-picker/lib/es6/components/InputTrigger.js +26 -26
- package/date-picker/lib/es6/components/PickerAbstract.js +80 -72
- package/date-picker/lib/es6/components/PickerAbstract.js.map +1 -1
- package/date-picker/lib/es6/components/RangePickerAbstract.js +97 -86
- package/date-picker/lib/es6/components/RangePickerAbstract.js.map +1 -1
- package/mini-chart/component/score/Donut.d.ts +12 -0
- package/mini-chart/component/score/Line.d.ts +15 -0
- package/mini-chart/component/score/Score.d.ts +20 -0
- package/mini-chart/component/score/index.d.ts +3 -0
- package/mini-chart/component/trend/Bar.d.ts +26 -0
- package/mini-chart/component/trend/Line.d.ts +29 -0
- package/mini-chart/component/trend/Trend.d.ts +36 -0
- package/mini-chart/component/trend/index.d.ts +3 -0
- package/mini-chart/index.d.ts +12 -0
- package/mini-chart/index.js +8 -0
- package/mini-chart/index.mjs +2 -0
- package/mini-chart/lib/cjs/component/score/Donut.js +123 -0
- package/mini-chart/lib/cjs/component/score/Donut.js.map +1 -0
- package/mini-chart/lib/cjs/component/score/Line.js +94 -0
- package/mini-chart/lib/cjs/component/score/Line.js.map +1 -0
- package/mini-chart/lib/cjs/component/score/Score.js +2 -0
- package/mini-chart/lib/cjs/component/score/Score.js.map +1 -0
- package/mini-chart/lib/cjs/component/score/donut.shadow.css +17 -0
- package/mini-chart/lib/cjs/component/score/index.js +26 -0
- package/mini-chart/lib/cjs/component/score/index.js.map +1 -0
- package/mini-chart/lib/cjs/component/score/line.shadow.css +66 -0
- package/mini-chart/lib/cjs/component/skeleton/skeleton.shadow.css +24 -0
- package/mini-chart/lib/cjs/component/trend/Bar.js +124 -0
- package/mini-chart/lib/cjs/component/trend/Bar.js.map +1 -0
- package/mini-chart/lib/cjs/component/trend/Line.js +166 -0
- package/mini-chart/lib/cjs/component/trend/Line.js.map +1 -0
- package/mini-chart/lib/cjs/component/trend/Trend.js +87 -0
- package/mini-chart/lib/cjs/component/trend/Trend.js.map +1 -0
- package/mini-chart/lib/cjs/component/trend/index.js +32 -0
- package/mini-chart/lib/cjs/component/trend/index.js.map +1 -0
- package/mini-chart/lib/cjs/index.js +20 -0
- package/mini-chart/lib/cjs/index.js.map +1 -0
- package/mini-chart/lib/es6/component/score/Donut.js +116 -0
- package/mini-chart/lib/es6/component/score/Donut.js.map +1 -0
- package/mini-chart/lib/es6/component/score/Line.js +87 -0
- package/mini-chart/lib/es6/component/score/Line.js.map +1 -0
- package/mini-chart/lib/es6/component/score/Score.js +2 -0
- package/mini-chart/lib/es6/component/score/Score.js.map +1 -0
- package/mini-chart/lib/es6/component/score/donut.shadow.css +17 -0
- package/mini-chart/lib/es6/component/score/index.js +4 -0
- package/mini-chart/lib/es6/component/score/index.js.map +1 -0
- package/mini-chart/lib/es6/component/score/line.shadow.css +66 -0
- package/mini-chart/lib/es6/component/skeleton/skeleton.shadow.css +24 -0
- package/mini-chart/lib/es6/component/trend/Bar.js +116 -0
- package/mini-chart/lib/es6/component/trend/Bar.js.map +1 -0
- package/mini-chart/lib/es6/component/trend/Line.js +158 -0
- package/mini-chart/lib/es6/component/trend/Line.js.map +1 -0
- package/mini-chart/lib/es6/component/trend/Trend.js +79 -0
- package/mini-chart/lib/es6/component/trend/Trend.js.map +1 -0
- package/mini-chart/lib/es6/component/trend/index.js +4 -0
- package/mini-chart/lib/es6/component/trend/index.js.map +1 -0
- package/mini-chart/lib/es6/index.js +13 -0
- package/mini-chart/lib/es6/index.js.map +1 -0
- package/mini-chart/lib/types/component/score/Donut.d.ts +12 -0
- package/mini-chart/lib/types/component/score/Line.d.ts +15 -0
- package/mini-chart/lib/types/component/score/Score.d.ts +20 -0
- package/mini-chart/lib/types/component/score/index.d.ts +3 -0
- package/mini-chart/lib/types/component/trend/Bar.d.ts +26 -0
- package/mini-chart/lib/types/component/trend/Line.d.ts +29 -0
- package/mini-chart/lib/types/component/trend/Trend.d.ts +36 -0
- package/mini-chart/lib/types/component/trend/index.d.ts +3 -0
- package/mini-chart/lib/types/index.d.ts +12 -0
- package/package.json +27 -2
@@ -0,0 +1,66 @@
|
|
1
|
+
@import '../skeleton/skeleton.shadow.css';
|
2
|
+
|
3
|
+
SLineGauge {
|
4
|
+
height: 8px;
|
5
|
+
background-color: var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8));
|
6
|
+
border-radius: var(--intergalactic-chart-rounded, 2px);
|
7
|
+
overflow: hidden;
|
8
|
+
position: relative;
|
9
|
+
}
|
10
|
+
|
11
|
+
SLineGauge[animate] SLineValue {
|
12
|
+
transition: all var(--intergalactic-duration-extra-slow, 500) ease-in-out;
|
13
|
+
animation-name: move-line;
|
14
|
+
animation-duration: 0.5s;
|
15
|
+
animation-timing-function: ease-in-out;
|
16
|
+
}
|
17
|
+
|
18
|
+
SLineValue {
|
19
|
+
height: 8px;
|
20
|
+
background-color: var(--intergalactic-chart-palette-order-1, #2bb3ff);
|
21
|
+
border-radius: var(--intergalactic-chart-rounded, 2px) 0 0 var(--intergalactic-chart-rounded, 2px);
|
22
|
+
}
|
23
|
+
|
24
|
+
SLineValue[percent] {
|
25
|
+
width: var(--percent);
|
26
|
+
}
|
27
|
+
|
28
|
+
SLineValue[color] {
|
29
|
+
background-color: var(--color, var(--intergalactic-chart-palette-order-1, #2bb3ff));
|
30
|
+
}
|
31
|
+
|
32
|
+
SLineGauge[segments] {
|
33
|
+
border-radius: var(--intergalactic-progress-bar-rounded, 6px);
|
34
|
+
}
|
35
|
+
|
36
|
+
SLineGauge[segments] SLineValue {
|
37
|
+
border-radius: var(--intergalactic-progress-bar-rounded, 6px) 0 0 var(--intergalactic-progress-bar-rounded, 6px);
|
38
|
+
}
|
39
|
+
|
40
|
+
SLineGaugeSegment {
|
41
|
+
position: absolute;
|
42
|
+
top: 0;
|
43
|
+
left: 0;
|
44
|
+
right: 0;
|
45
|
+
bottom: 0;
|
46
|
+
}
|
47
|
+
|
48
|
+
SLineSegmentItem:last-child {
|
49
|
+
margin-right: 0;
|
50
|
+
border-right: none;
|
51
|
+
}
|
52
|
+
|
53
|
+
SLineSegmentItem {
|
54
|
+
height: 8px;
|
55
|
+
background: transparent;
|
56
|
+
margin-right: 1px;
|
57
|
+
border-right-color: var(--intergalactic-chart-grid-border, #ffffff);
|
58
|
+
border-right-style: solid;
|
59
|
+
border-right-width: 1px;
|
60
|
+
box-sizing: content-box;
|
61
|
+
}
|
62
|
+
|
63
|
+
@keyframes move-line {
|
64
|
+
0% {transform: translateX(-100%);}
|
65
|
+
100% {transform: translateX(0);}
|
66
|
+
}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
SLineGauge[loading],
|
2
|
+
SDonutContainer[loading],
|
3
|
+
STrendLine[loading],
|
4
|
+
STrendBar[loading] {
|
5
|
+
animation-name: pulse;
|
6
|
+
animation-iteration-count: infinite;
|
7
|
+
animation-timing-function: ease-in-out;
|
8
|
+
animation-duration: 1.6s;
|
9
|
+
will-change: opacity;
|
10
|
+
}
|
11
|
+
|
12
|
+
@keyframes pulse {
|
13
|
+
0% {
|
14
|
+
opacity: 1;
|
15
|
+
}
|
16
|
+
|
17
|
+
50% {
|
18
|
+
opacity: 0.4;
|
19
|
+
}
|
20
|
+
|
21
|
+
100% {
|
22
|
+
opacity: 1;
|
23
|
+
}
|
24
|
+
}
|
@@ -0,0 +1,116 @@
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
2
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
3
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
4
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
5
|
+
import _createSuper from "@babel/runtime/helpers/createSuper";
|
6
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
7
|
+
import { sstyled as _sstyled } from 'intergalactic/core';
|
8
|
+
import { assignProps as _assignProps } from 'intergalactic/core';
|
9
|
+
import React from 'react';
|
10
|
+
import createComponent, { assignProps, Root, sstyled } from 'intergalactic/core';
|
11
|
+
import resolveColorEnhance from 'intergalactic/utils/lib/enhances/resolveColorEnhance';
|
12
|
+
import { Trend } from './Trend';
|
13
|
+
import { Box } from 'intergalactic/flex-box';
|
14
|
+
/*__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
|
15
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_179om{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_179om_gg_.__loading_179om_gg_,.___SLineGauge_179om_gg_.__loading_179om_gg_,.___STrendBar_179om_gg_.__loading_179om_gg_,.___STrendLine_179om_gg_.__loading_179om_gg_{animation-name:pulse_179om;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}" /*__inner_css_end__*/, "179om_gg_") /*__reshadow_css_end__*/, {
|
16
|
+
"__SLineGauge": "___SLineGauge_179om_gg_",
|
17
|
+
"_loading": "__loading_179om_gg_",
|
18
|
+
"__SDonutContainer": "___SDonutContainer_179om_gg_",
|
19
|
+
"__STrendLine": "___STrendLine_179om_gg_",
|
20
|
+
"__STrendBar": "___STrendBar_179om_gg_",
|
21
|
+
"@pulse": "pulse_179om"
|
22
|
+
});
|
23
|
+
var TrendBarRoot = /*#__PURE__*/function (_Trend) {
|
24
|
+
_inherits(TrendBarRoot, _Trend);
|
25
|
+
var _super = _createSuper(TrendBarRoot);
|
26
|
+
function TrendBarRoot() {
|
27
|
+
_classCallCheck(this, TrendBarRoot);
|
28
|
+
return _super.apply(this, arguments);
|
29
|
+
}
|
30
|
+
_createClass(TrendBarRoot, [{
|
31
|
+
key: "defaultData",
|
32
|
+
get: function get() {
|
33
|
+
return [{
|
34
|
+
value: 20
|
35
|
+
}, {
|
36
|
+
value: 80
|
37
|
+
}, {
|
38
|
+
value: 45
|
39
|
+
}, {
|
40
|
+
value: 10
|
41
|
+
}];
|
42
|
+
}
|
43
|
+
}, {
|
44
|
+
key: "data",
|
45
|
+
get: function get() {
|
46
|
+
var _this$asProps = this.asProps,
|
47
|
+
data = _this$asProps.data,
|
48
|
+
loading = _this$asProps.loading;
|
49
|
+
if (loading) {
|
50
|
+
return this.defaultData;
|
51
|
+
}
|
52
|
+
return data;
|
53
|
+
}
|
54
|
+
}, {
|
55
|
+
key: "render",
|
56
|
+
value: function render() {
|
57
|
+
var _ref = this.asProps,
|
58
|
+
_ref2,
|
59
|
+
_this = this;
|
60
|
+
var STrendBar = Box;
|
61
|
+
var _this$asProps2 = this.asProps,
|
62
|
+
styles = _this$asProps2.styles,
|
63
|
+
resolveColor = _this$asProps2.resolveColor,
|
64
|
+
isHistogram = _this$asProps2.isHistogram,
|
65
|
+
animate = _this$asProps2.animate,
|
66
|
+
loading = _this$asProps2.loading;
|
67
|
+
var step = this.defaultWidth / this.data.length;
|
68
|
+
return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(STrendBar, _ref2.cn("STrendBar", _objectSpread({}, _assignProps({
|
69
|
+
"ref": this.containerRef,
|
70
|
+
"__excludeProps": ['data']
|
71
|
+
}, _ref))), /*#__PURE__*/React.createElement("svg", _ref2.cn("svg", {
|
72
|
+
"width": '100%',
|
73
|
+
"height": '100%',
|
74
|
+
"viewBox": "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight)
|
75
|
+
}), this.data.map(function (barItem, index) {
|
76
|
+
var color = resolveColor('skeleton-bg');
|
77
|
+
if (barItem.color) {
|
78
|
+
color = resolveColor(barItem.color);
|
79
|
+
}
|
80
|
+
return /*#__PURE__*/React.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.createElement("animate", {
|
88
|
+
attributeName: 'y',
|
89
|
+
values: "".concat(_this.defaultHeight, ";").concat(_this.defaultHeight - barItem.value),
|
90
|
+
dur: '500ms'
|
91
|
+
}));
|
92
|
+
})));
|
93
|
+
}
|
94
|
+
}]);
|
95
|
+
return TrendBarRoot;
|
96
|
+
}(Trend);
|
97
|
+
_defineProperty(TrendBarRoot, "enhance", [resolveColorEnhance()]);
|
98
|
+
_defineProperty(TrendBarRoot, "style", style);
|
99
|
+
_defineProperty(TrendBarRoot, "defaultProps", {
|
100
|
+
animate: true
|
101
|
+
});
|
102
|
+
export var TrendBar = createComponent(TrendBarRoot);
|
103
|
+
TrendBar.displayName = 'MiniChart.TrendBar';
|
104
|
+
export var TrendHistogram = createComponent(TrendBarRoot, {}, {
|
105
|
+
enhancements: [function () {
|
106
|
+
return {
|
107
|
+
wrapperProps: function wrapperProps(props) {
|
108
|
+
return assignProps(props, {
|
109
|
+
isHistogram: true
|
110
|
+
});
|
111
|
+
}
|
112
|
+
};
|
113
|
+
}]
|
114
|
+
});
|
115
|
+
TrendBar.displayName = 'MiniChart.TrendHistogram';
|
116
|
+
//# sourceMappingURL=Bar.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Bar.js","names":["React","createComponent","assignProps","Root","sstyled","resolveColorEnhance","Trend","Box","style","_sstyled","insert","TrendBarRoot","_Trend","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","get","value","_this$asProps","asProps","data","loading","defaultData","render","_ref","_ref2","_this","STrendBar","_this$asProps2","styles","resolveColor","isHistogram","animate","step","defaultWidth","length","createElement","cn","_objectSpread","_assignProps","containerRef","concat","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 React from 'react';\nimport createComponent, { ComponentType, assignProps, Root, sstyled } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport { Trend, CommonTrendProps } from './Trend';\nimport { Box } from '@semcore/flex-box';\n\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, Enhances> {\n static enhance = [resolveColorEnhance()];\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\n return sstyled(styles)(\n <STrendBar render={Box} ref={this.containerRef} __excludeProps={['data']}>\n <svg width='100%' height='100%' viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}>\n {this.data.map((barItem, index) => {\n let color = resolveColor('skeleton-bg');\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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"}
|
@@ -0,0 +1,158 @@
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
2
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
3
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
4
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
5
|
+
import _createSuper from "@babel/runtime/helpers/createSuper";
|
6
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
7
|
+
import { sstyled as _sstyled } from 'intergalactic/core';
|
8
|
+
import { assignProps as _assignProps } from 'intergalactic/core';
|
9
|
+
import React from 'react';
|
10
|
+
import createComponent, { assignProps, Root, sstyled } from 'intergalactic/core';
|
11
|
+
import resolveColorEnhance from 'intergalactic/utils/lib/enhances/resolveColorEnhance';
|
12
|
+
import uniqueIDEnhancement from 'intergalactic/utils/lib/uniqueID';
|
13
|
+
import { Trend } from './Trend';
|
14
|
+
import { Box } from 'intergalactic/flex-box';
|
15
|
+
/*__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
|
16
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes pulse_179om{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_179om_gg_.__loading_179om_gg_,.___SLineGauge_179om_gg_.__loading_179om_gg_,.___STrendBar_179om_gg_.__loading_179om_gg_,.___STrendLine_179om_gg_.__loading_179om_gg_{animation-name:pulse_179om;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}" /*__inner_css_end__*/, "179om_gg_") /*__reshadow_css_end__*/, {
|
17
|
+
"__SLineGauge": "___SLineGauge_179om_gg_",
|
18
|
+
"_loading": "__loading_179om_gg_",
|
19
|
+
"__SDonutContainer": "___SDonutContainer_179om_gg_",
|
20
|
+
"__STrendLine": "___STrendLine_179om_gg_",
|
21
|
+
"__STrendBar": "___STrendBar_179om_gg_",
|
22
|
+
"@pulse": "pulse_179om"
|
23
|
+
});
|
24
|
+
var TrendLineRoot = /*#__PURE__*/function (_Trend) {
|
25
|
+
_inherits(TrendLineRoot, _Trend);
|
26
|
+
var _super = _createSuper(TrendLineRoot);
|
27
|
+
function TrendLineRoot() {
|
28
|
+
_classCallCheck(this, TrendLineRoot);
|
29
|
+
return _super.apply(this, arguments);
|
30
|
+
}
|
31
|
+
_createClass(TrendLineRoot, [{
|
32
|
+
key: "defaultData",
|
33
|
+
get: function get() {
|
34
|
+
return [15, 70, 20, 85, 20];
|
35
|
+
}
|
36
|
+
}, {
|
37
|
+
key: "lastPointRadius",
|
38
|
+
get: function get() {
|
39
|
+
var _this$asProps$lastPoi;
|
40
|
+
return (_this$asProps$lastPoi = this.asProps.lastPointRadius) !== null && _this$asProps$lastPoi !== void 0 ? _this$asProps$lastPoi : 6;
|
41
|
+
}
|
42
|
+
}, {
|
43
|
+
key: "data",
|
44
|
+
get: function get() {
|
45
|
+
var _this$asProps = this.asProps,
|
46
|
+
data = _this$asProps.data,
|
47
|
+
loading = _this$asProps.loading;
|
48
|
+
if (loading) {
|
49
|
+
return this.defaultData;
|
50
|
+
}
|
51
|
+
return data;
|
52
|
+
}
|
53
|
+
}, {
|
54
|
+
key: "svgWidth",
|
55
|
+
get: function get() {
|
56
|
+
return this.asProps.lastPointColor ? this.defaultWidth + this.lastPointRadius : this.defaultWidth;
|
57
|
+
}
|
58
|
+
}, {
|
59
|
+
key: "svgHeight",
|
60
|
+
get: function get() {
|
61
|
+
return this.asProps.lastPointColor ? this.defaultHeight + this.lastPointRadius : this.defaultHeight;
|
62
|
+
}
|
63
|
+
}, {
|
64
|
+
key: "color",
|
65
|
+
get: function get() {
|
66
|
+
var _this$asProps2 = this.asProps,
|
67
|
+
resolveColor = _this$asProps2.resolveColor,
|
68
|
+
_this$asProps2$color = _this$asProps2.color,
|
69
|
+
color = _this$asProps2$color === void 0 ? 'chart-palette-order-1' : _this$asProps2$color,
|
70
|
+
loading = _this$asProps2.loading;
|
71
|
+
if (loading) {
|
72
|
+
return resolveColor('skeleton-bg');
|
73
|
+
}
|
74
|
+
return resolveColor(color);
|
75
|
+
}
|
76
|
+
}, {
|
77
|
+
key: "render",
|
78
|
+
value: function render() {
|
79
|
+
var _ref = this.asProps,
|
80
|
+
_ref2;
|
81
|
+
var STrendLine = Box;
|
82
|
+
var _this$asProps3 = this.asProps,
|
83
|
+
uid = _this$asProps3.uid,
|
84
|
+
withArea = _this$asProps3.withArea,
|
85
|
+
animate = _this$asProps3.animate,
|
86
|
+
lastPointColor = _this$asProps3.lastPointColor,
|
87
|
+
resolveColor = _this$asProps3.resolveColor,
|
88
|
+
loading = _this$asProps3.loading,
|
89
|
+
styles = _this$asProps3.styles;
|
90
|
+
var points = [];
|
91
|
+
var length = this.data.length;
|
92
|
+
var step = this.defaultWidth / (length - 1);
|
93
|
+
for (var i = 0; i < length; i++) {
|
94
|
+
points.push("".concat(step * i, ",").concat(this.defaultHeight - this.data[i]));
|
95
|
+
}
|
96
|
+
return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(STrendLine, _ref2.cn("STrendLine", _objectSpread({}, _assignProps({
|
97
|
+
"ref": this.containerRef,
|
98
|
+
"__excludeProps": ['data']
|
99
|
+
}, _ref))), /*#__PURE__*/React.createElement("svg", _ref2.cn("svg", {
|
100
|
+
"width": '100%',
|
101
|
+
"height": '100%',
|
102
|
+
"viewBox": "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight)
|
103
|
+
}), /*#__PURE__*/React.createElement("polyline", _ref2.cn("polyline", {
|
104
|
+
"points": points.join(' '),
|
105
|
+
"stroke": this.color,
|
106
|
+
"strokeWidth": '4',
|
107
|
+
"fill": 'none',
|
108
|
+
"clipPath": "url(#".concat(uid, ")")
|
109
|
+
})), withArea && /*#__PURE__*/React.createElement("polyline", _ref2.cn("polyline", {
|
110
|
+
"points": "0,".concat(this.defaultHeight, " ").concat(points.join(' '), " ").concat(this.defaultWidth, ",").concat(this.defaultHeight),
|
111
|
+
"fill": this.color,
|
112
|
+
"fillOpacity": 0.2,
|
113
|
+
"clipPath": "url(#".concat(uid, ")")
|
114
|
+
})), lastPointColor && !loading && /*#__PURE__*/React.createElement("circle", _ref2.cn("circle", {
|
115
|
+
"cx": step * (length - 1),
|
116
|
+
"cy": this.defaultHeight - this.data[length - 1],
|
117
|
+
"r": this.lastPointRadius,
|
118
|
+
"fill": resolveColor(lastPointColor),
|
119
|
+
"stroke": resolveColor('chart-grid-border'),
|
120
|
+
"strokeWidth": 4,
|
121
|
+
"clipPath": "url(#".concat(uid, ")")
|
122
|
+
})), animate && !loading && /*#__PURE__*/React.createElement("clipPath", _ref2.cn("clipPath", {
|
123
|
+
"id": uid
|
124
|
+
}), /*#__PURE__*/React.createElement("rect", _ref2.cn("rect", {
|
125
|
+
"x": '0',
|
126
|
+
"y": '0',
|
127
|
+
"width": '100%',
|
128
|
+
"height": '100%',
|
129
|
+
"fill": 'black'
|
130
|
+
}), /*#__PURE__*/React.createElement("animate", _ref2.cn("animate", {
|
131
|
+
"dur": '500ms',
|
132
|
+
"attributeName": 'width',
|
133
|
+
"values": '0;100%'
|
134
|
+
}))))));
|
135
|
+
}
|
136
|
+
}]);
|
137
|
+
return TrendLineRoot;
|
138
|
+
}(Trend);
|
139
|
+
_defineProperty(TrendLineRoot, "enhance", [resolveColorEnhance(), uniqueIDEnhancement()]);
|
140
|
+
_defineProperty(TrendLineRoot, "style", style);
|
141
|
+
_defineProperty(TrendLineRoot, "defaultProps", {
|
142
|
+
animate: true
|
143
|
+
});
|
144
|
+
export var TrendLine = createComponent(TrendLineRoot);
|
145
|
+
TrendLine.displayName = 'MiniChart.TrendLine';
|
146
|
+
export var TrendArea = createComponent(TrendLineRoot, {}, {
|
147
|
+
enhancements: [function () {
|
148
|
+
return {
|
149
|
+
wrapperProps: function wrapperProps(props) {
|
150
|
+
return assignProps(props, {
|
151
|
+
withArea: true
|
152
|
+
});
|
153
|
+
}
|
154
|
+
};
|
155
|
+
}]
|
156
|
+
});
|
157
|
+
TrendArea.displayName = 'MiniChart.TrendArea';
|
158
|
+
//# sourceMappingURL=Line.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Line.js","names":["React","createComponent","assignProps","Root","sstyled","resolveColorEnhance","uniqueIDEnhancement","Trend","Box","style","_sstyled","insert","TrendLineRoot","_Trend","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","get","_this$asProps$lastPoi","asProps","lastPointRadius","_this$asProps","data","loading","defaultData","lastPointColor","defaultWidth","defaultHeight","_this$asProps2","resolveColor","_this$asProps2$color","color","value","render","_ref","_ref2","STrendLine","_this$asProps3","uid","withArea","animate","styles","points","length","step","i","push","concat","createElement","cn","_objectSpread","_assignProps","containerRef","svgWidth","svgHeight","join","_defineProperty","TrendLine","displayName","TrendArea","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Line.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { ComponentType, assignProps, Root, sstyled } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\nimport { Trend, CommonTrendProps } from './Trend';\nimport { Box } from '@semcore/flex-box';\n\nimport style from '../skeleton/skeleton.shadow.css';\n\nexport type TrendLineProps = CommonTrendProps & {\n /**\n * List of values\n */\n data: number[];\n\n /**\n * Color of line\n */\n color?: string;\n\n /**\n * Color of last point in chart\n */\n lastPointColor?: string;\n\n /**\n * Radius for last point item\n */\n lastPointRadius?: number;\n};\n\ntype Enhances = {\n uid: string;\n resolveColor: ReturnType<typeof resolveColorEnhance>;\n withArea?: true;\n};\n\nclass TrendLineRoot extends Trend<TrendLineProps, Enhances> {\n static enhance = [resolveColorEnhance(), uniqueIDEnhancement()];\n\n static style = style;\n\n static defaultProps = {\n animate: true,\n };\n\n get defaultData(): number[] {\n return [15, 70, 20, 85, 20];\n }\n\n get lastPointRadius(): number {\n return this.asProps.lastPointRadius ?? 6;\n }\n\n get data(): number[] {\n const { data, loading } = this.asProps;\n\n if (loading) {\n return this.defaultData;\n }\n\n return data;\n }\n\n override get svgWidth(): number {\n return this.asProps.lastPointColor\n ? this.defaultWidth + this.lastPointRadius\n : this.defaultWidth;\n }\n\n override get svgHeight(): number {\n return this.asProps.lastPointColor\n ? this.defaultHeight + this.lastPointRadius\n : this.defaultHeight;\n }\n\n get color() {\n const { resolveColor, color = 'chart-palette-order-1', loading } = this.asProps;\n\n if (loading) {\n return resolveColor('skeleton-bg');\n }\n\n return resolveColor(color);\n }\n\n render() {\n const STrendLine = Root;\n const { uid, withArea, animate, lastPointColor, resolveColor, loading, styles } = this.asProps;\n\n const points: string[] = [];\n const length = this.data.length;\n const step = this.defaultWidth / (length - 1);\n\n for (let i = 0; i < length; i++) {\n points.push(`${step * i},${this.defaultHeight - this.data[i]}`);\n }\n\n return sstyled(styles)(\n <STrendLine render={Box} ref={this.containerRef} __excludeProps={['data']}>\n <svg width='100%' height='100%' viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}>\n <polyline\n points={points.join(' ')}\n stroke={this.color}\n strokeWidth='4'\n fill={'none'}\n clipPath={`url(#${uid})`}\n />\n {withArea && (\n <polyline\n points={`0,${this.defaultHeight} ${points.join(' ')} ${this.defaultWidth},${\n this.defaultHeight\n }`}\n fill={this.color}\n fillOpacity={0.2}\n clipPath={`url(#${uid})`}\n />\n )}\n {lastPointColor && !loading && (\n <circle\n cx={step * (length - 1)}\n cy={this.defaultHeight - this.data[length - 1]}\n r={this.lastPointRadius}\n fill={resolveColor(lastPointColor)}\n stroke={resolveColor('chart-grid-border')}\n strokeWidth={4}\n clipPath={`url(#${uid})`}\n />\n )}\n\n {animate && !loading && (\n <clipPath id={uid}>\n <rect x='0' y='0' width='100%' height='100%' fill={'black'}>\n <animate dur='500ms' attributeName='width' values='0;100%' />\n </rect>\n </clipPath>\n )}\n </svg>\n </STrendLine>,\n );\n }\n}\n\nexport const TrendLine: ComponentType<TrendLineProps, {}, {}, Enhances> =\n createComponent(TrendLineRoot);\n\nTrendLine.displayName = 'MiniChart.TrendLine';\n\nexport const TrendArea: ComponentType<TrendLineProps, {}, {}, Enhances> = createComponent(\n TrendLineRoot,\n {},\n {\n enhancements: [\n () => {\n return {\n wrapperProps: (props: TrendLineProps) => {\n return assignProps(props, { withArea: true });\n },\n };\n },\n ],\n },\n);\n\nTrendArea.displayName = 'MiniChart.TrendArea';\n"],"mappings":"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"}
|
@@ -0,0 +1,79 @@
|
|
1
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
2
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
3
|
+
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
4
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
5
|
+
import _createSuper from "@babel/runtime/helpers/createSuper";
|
6
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
7
|
+
import React from 'react';
|
8
|
+
import { Component } from 'intergalactic/core';
|
9
|
+
export var Trend = /*#__PURE__*/function (_Component) {
|
10
|
+
_inherits(Trend, _Component);
|
11
|
+
var _super = _createSuper(Trend);
|
12
|
+
function Trend() {
|
13
|
+
var _this;
|
14
|
+
_classCallCheck(this, Trend);
|
15
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
16
|
+
args[_key] = arguments[_key];
|
17
|
+
}
|
18
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
19
|
+
_defineProperty(_assertThisInitialized(_this), "state", {
|
20
|
+
width: 200,
|
21
|
+
height: 100
|
22
|
+
});
|
23
|
+
_defineProperty(_assertThisInitialized(_this), "containerRef", /*#__PURE__*/React.createRef());
|
24
|
+
return _this;
|
25
|
+
}
|
26
|
+
_createClass(Trend, [{
|
27
|
+
key: "componentDidMount",
|
28
|
+
value: function componentDidMount() {
|
29
|
+
this.setSizes();
|
30
|
+
}
|
31
|
+
}, {
|
32
|
+
key: "componentDidUpdate",
|
33
|
+
value: function componentDidUpdate(prevProps) {
|
34
|
+
if (prevProps.w !== this.props.w || prevProps.h !== this.props.h || prevProps.data !== this.props.data) {
|
35
|
+
this.setSizes();
|
36
|
+
}
|
37
|
+
}
|
38
|
+
}, {
|
39
|
+
key: "defaultWidth",
|
40
|
+
get: function get() {
|
41
|
+
var _this$state = this.state,
|
42
|
+
width = _this$state.width,
|
43
|
+
height = _this$state.height;
|
44
|
+
return width / height * this.defaultHeight;
|
45
|
+
}
|
46
|
+
}, {
|
47
|
+
key: "defaultHeight",
|
48
|
+
get: function get() {
|
49
|
+
return 100;
|
50
|
+
}
|
51
|
+
}, {
|
52
|
+
key: "svgWidth",
|
53
|
+
get: function get() {
|
54
|
+
return this.defaultWidth;
|
55
|
+
}
|
56
|
+
}, {
|
57
|
+
key: "svgHeight",
|
58
|
+
get: function get() {
|
59
|
+
return this.defaultHeight;
|
60
|
+
}
|
61
|
+
}, {
|
62
|
+
key: "setSizes",
|
63
|
+
value: function setSizes() {
|
64
|
+
if (this.containerRef.current) {
|
65
|
+
var boundingClientRect = this.containerRef.current.getBoundingClientRect();
|
66
|
+
var width = boundingClientRect.width,
|
67
|
+
height = boundingClientRect.height;
|
68
|
+
if (width > 0 && height > 0) {
|
69
|
+
this.setState({
|
70
|
+
width: width,
|
71
|
+
height: height
|
72
|
+
});
|
73
|
+
}
|
74
|
+
}
|
75
|
+
}
|
76
|
+
}]);
|
77
|
+
return Trend;
|
78
|
+
}(Component);
|
79
|
+
//# sourceMappingURL=Trend.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Trend.js","names":["React","Component","Trend","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","width","height","createRef","_createClass","key","value","componentDidMount","setSizes","componentDidUpdate","prevProps","w","props","h","data","get","_this$state","state","defaultHeight","defaultWidth","containerRef","current","boundingClientRect","getBoundingClientRect","setState"],"sources":["../../../../src/component/trend/Trend.tsx"],"sourcesContent":["import React from 'react';\nimport { Component } from '@semcore/core';\nimport { BoxProps } from '@semcore/flex-box';\n\nexport type CommonTrendProps = BoxProps & {\n /**\n * Flag to enable animate of charts\n * @default true\n */\n animate?: boolean;\n\n /**\n * Flag to enable skeleton\n * @default false\n */\n loading?: boolean;\n\n /**\n * Data for chart\n */\n data: any[];\n};\n\nexport abstract class Trend<P extends CommonTrendProps, E> extends Component<\n P,\n {},\n { width: number; height: number },\n E\n> {\n state = {\n width: 200,\n height: 100,\n };\n\n containerRef = React.createRef<HTMLDivElement>();\n\n componentDidMount() {\n this.setSizes();\n }\n componentDidUpdate(prevProps: P) {\n if (\n prevProps.w !== this.props.w ||\n prevProps.h !== this.props.h ||\n prevProps.data !== this.props.data\n ) {\n this.setSizes();\n }\n }\n\n get defaultWidth(): number {\n const { width, height } = this.state;\n\n return (width / height) * this.defaultHeight;\n }\n\n get defaultHeight(): number {\n return 100;\n }\n\n get svgWidth(): number {\n return this.defaultWidth;\n }\n\n get svgHeight(): number {\n return this.defaultHeight;\n }\n\n setSizes() {\n if (this.containerRef.current) {\n const boundingClientRect = this.containerRef.current.getBoundingClientRect();\n\n const { width, height } = boundingClientRect;\n\n if (width > 0 && height > 0) {\n this.setState({ width, height });\n }\n }\n }\n}\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,eAAe;AAsBzC,WAAsBC,KAAK,0BAAAC,UAAA;EAAAC,SAAA,CAAAF,KAAA,EAAAC,UAAA;EAAA,IAAAE,MAAA,GAAAC,YAAA,CAAAJ,KAAA;EAAA,SAAAA,MAAA;IAAA,IAAAK,KAAA;IAAAC,eAAA,OAAAN,KAAA;IAAA,SAAAO,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IAAAP,KAAA,GAAAF,MAAA,CAAAU,IAAA,CAAAC,KAAA,CAAAX,MAAA,SAAAY,MAAA,CAAAL,IAAA;IAAAM,eAAA,CAAAC,sBAAA,CAAAZ,KAAA,YAMjB;MACNa,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE;IACV,CAAC;IAAAH,eAAA,CAAAC,sBAAA,CAAAZ,KAAA,gCAEcP,KAAK,CAACsB,SAAS,EAAkB;IAAA,OAAAf,KAAA;EAAA;EAAAgB,YAAA,CAAArB,KAAA;IAAAsB,GAAA;IAAAC,KAAA,EAEhD,SAAAC,kBAAA,EAAoB;MAClB,IAAI,CAACC,QAAQ,EAAE;IACjB;EAAC;IAAAH,GAAA;IAAAC,KAAA,EACD,SAAAG,mBAAmBC,SAAY,EAAE;MAC/B,IACEA,SAAS,CAACC,CAAC,KAAK,IAAI,CAACC,KAAK,CAACD,CAAC,IAC5BD,SAAS,CAACG,CAAC,KAAK,IAAI,CAACD,KAAK,CAACC,CAAC,IAC5BH,SAAS,CAACI,IAAI,KAAK,IAAI,CAACF,KAAK,CAACE,IAAI,EAClC;QACA,IAAI,CAACN,QAAQ,EAAE;MACjB;IACF;EAAC;IAAAH,GAAA;IAAAU,GAAA,EAED,SAAAA,IAAA,EAA2B;MACzB,IAAAC,WAAA,GAA0B,IAAI,CAACC,KAAK;QAA5BhB,KAAK,GAAAe,WAAA,CAALf,KAAK;QAAEC,MAAM,GAAAc,WAAA,CAANd,MAAM;MAErB,OAAQD,KAAK,GAAGC,MAAM,GAAI,IAAI,CAACgB,aAAa;IAC9C;EAAC;IAAAb,GAAA;IAAAU,GAAA,EAED,SAAAA,IAAA,EAA4B;MAC1B,OAAO,GAAG;IACZ;EAAC;IAAAV,GAAA;IAAAU,GAAA,EAED,SAAAA,IAAA,EAAuB;MACrB,OAAO,IAAI,CAACI,YAAY;IAC1B;EAAC;IAAAd,GAAA;IAAAU,GAAA,EAED,SAAAA,IAAA,EAAwB;MACtB,OAAO,IAAI,CAACG,aAAa;IAC3B;EAAC;IAAAb,GAAA;IAAAC,KAAA,EAED,SAAAE,SAAA,EAAW;MACT,IAAI,IAAI,CAACY,YAAY,CAACC,OAAO,EAAE;QAC7B,IAAMC,kBAAkB,GAAG,IAAI,CAACF,YAAY,CAACC,OAAO,CAACE,qBAAqB,EAAE;QAE5E,IAAQtB,KAAK,GAAaqB,kBAAkB,CAApCrB,KAAK;UAAEC,MAAM,GAAKoB,kBAAkB,CAA7BpB,MAAM;QAErB,IAAID,KAAK,GAAG,CAAC,IAAIC,MAAM,GAAG,CAAC,EAAE;UAC3B,IAAI,CAACsB,QAAQ,CAAC;YAAEvB,KAAK,EAALA,KAAK;YAAEC,MAAM,EAANA;UAAO,CAAC,CAAC;QAClC;MACF;IACF;EAAC;EAAA,OAAAnB,KAAA;AAAA,EAtDgED,SAAS"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","names":["TrendLine","TrendArea","TrendBar","TrendHistogram"],"sources":["../../../../src/component/trend/index.ts"],"sourcesContent":["import { TrendLine, TrendArea } from './Line';\nimport { TrendBar, TrendHistogram } from './Bar';\n\nexport { TrendLine, TrendArea, TrendBar, TrendHistogram };\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,SAAS,QAAQ,QAAQ;AAC7C,SAASC,QAAQ,EAAEC,cAAc,QAAQ,OAAO;AAEhD,SAASH,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,cAAc"}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import { ScoreLine, ScoreDonut, ScoreSemiDonut } from './component/score';
|
2
|
+
import { TrendLine, TrendArea, TrendBar, TrendHistogram } from './component/trend';
|
3
|
+
var miniCharts = {
|
4
|
+
TrendLine: TrendLine,
|
5
|
+
TrendArea: TrendArea,
|
6
|
+
TrendBar: TrendBar,
|
7
|
+
TrendHistogram: TrendHistogram,
|
8
|
+
ScoreSemiDonut: ScoreSemiDonut,
|
9
|
+
ScoreDonut: ScoreDonut,
|
10
|
+
ScoreLine: ScoreLine
|
11
|
+
};
|
12
|
+
export default miniCharts;
|
13
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","names":["ScoreLine","ScoreDonut","ScoreSemiDonut","TrendLine","TrendArea","TrendBar","TrendHistogram","miniCharts"],"sources":["../../src/index.ts"],"sourcesContent":["import { ScoreLine, ScoreDonut, ScoreSemiDonut } from './component/score';\nimport { TrendLine, TrendArea, TrendBar, TrendHistogram } from './component/trend';\n\nconst miniCharts: {\n TrendLine: typeof TrendLine;\n TrendArea: typeof TrendArea;\n TrendBar: typeof TrendBar;\n TrendHistogram: typeof TrendHistogram;\n ScoreSemiDonut: typeof ScoreSemiDonut;\n ScoreDonut: typeof ScoreDonut;\n ScoreLine: typeof ScoreLine;\n} = {\n TrendLine,\n TrendArea,\n TrendBar,\n TrendHistogram,\n ScoreSemiDonut,\n ScoreDonut,\n ScoreLine,\n};\n\nexport default miniCharts;\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,UAAU,EAAEC,cAAc,QAAQ,mBAAmB;AACzE,SAASC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,cAAc,QAAQ,mBAAmB;AAElF,IAAMC,UAQL,GAAG;EACFJ,SAAS,EAATA,SAAS;EACTC,SAAS,EAATA,SAAS;EACTC,QAAQ,EAARA,QAAQ;EACRC,cAAc,EAAdA,cAAc;EACdJ,cAAc,EAAdA,cAAc;EACdD,UAAU,EAAVA,UAAU;EACVD,SAAS,EAATA;AACF,CAAC;AAED,eAAeO,UAAU"}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import { ComponentType } from 'intergalactic/core';
|
2
|
+
import { BoxProps } from 'intergalactic/flex-box';
|
3
|
+
import resolveColorEnhance from 'intergalactic/utils/lib/enhances/resolveColorEnhance';
|
4
|
+
import { CommonScoreProps } from './Score';
|
5
|
+
export type ScoreDonutProps = BoxProps & CommonScoreProps;
|
6
|
+
type Enhances = {
|
7
|
+
resolveColor: ReturnType<typeof resolveColorEnhance>;
|
8
|
+
isSemiDonut?: true;
|
9
|
+
};
|
10
|
+
export declare const ScoreDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances>;
|
11
|
+
export declare const ScoreSemiDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances>;
|
12
|
+
export {};
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import { ComponentType } from 'intergalactic/core';
|
2
|
+
import { BoxProps } from 'intergalactic/flex-box';
|
3
|
+
import resolveColorEnhance from 'intergalactic/utils/lib/enhances/resolveColorEnhance';
|
4
|
+
import { CommonScoreProps } from './Score';
|
5
|
+
export type ScoreLineGaugeProps = BoxProps & CommonScoreProps & {
|
6
|
+
/**
|
7
|
+
* Count of line segments
|
8
|
+
*/
|
9
|
+
segments?: number;
|
10
|
+
};
|
11
|
+
type Enhances = {
|
12
|
+
resolveColor: ReturnType<typeof resolveColorEnhance>;
|
13
|
+
};
|
14
|
+
export declare const ScoreLine: ComponentType<ScoreLineGaugeProps, {}, {}, Enhances>;
|
15
|
+
export {};
|
@@ -0,0 +1,20 @@
|
|
1
|
+
export type CommonScoreProps = {
|
2
|
+
/**
|
3
|
+
* Value of score (in percents from 0 to 100) or count of selected segments (for Line with segments)
|
4
|
+
*/
|
5
|
+
value: number;
|
6
|
+
/**
|
7
|
+
* Color of value
|
8
|
+
*/
|
9
|
+
color?: string;
|
10
|
+
/**
|
11
|
+
* Flag to enable skeleton
|
12
|
+
* @default false
|
13
|
+
*/
|
14
|
+
loading?: boolean;
|
15
|
+
/**
|
16
|
+
* Flag to enable animate of charts
|
17
|
+
* @default true
|
18
|
+
*/
|
19
|
+
animate?: boolean;
|
20
|
+
};
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import { ComponentType } from 'intergalactic/core';
|
2
|
+
import resolveColorEnhance from 'intergalactic/utils/lib/enhances/resolveColorEnhance';
|
3
|
+
import { CommonTrendProps } from './Trend';
|
4
|
+
type BarItem = {
|
5
|
+
/**
|
6
|
+
* Value
|
7
|
+
*/
|
8
|
+
value: number;
|
9
|
+
/**
|
10
|
+
* Color of value
|
11
|
+
*/
|
12
|
+
color?: string;
|
13
|
+
};
|
14
|
+
export type TrendBarProps = CommonTrendProps & {
|
15
|
+
/**
|
16
|
+
* Data to bar chart
|
17
|
+
*/
|
18
|
+
data: BarItem[];
|
19
|
+
};
|
20
|
+
type Enhances = {
|
21
|
+
resolveColor: ReturnType<typeof resolveColorEnhance>;
|
22
|
+
isHistogram?: true;
|
23
|
+
};
|
24
|
+
export declare const TrendBar: ComponentType<TrendBarProps, {}, {}, Enhances>;
|
25
|
+
export declare const TrendHistogram: ComponentType<TrendBarProps, {}, {}, Enhances>;
|
26
|
+
export {};
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import { ComponentType } from 'intergalactic/core';
|
2
|
+
import resolveColorEnhance from 'intergalactic/utils/lib/enhances/resolveColorEnhance';
|
3
|
+
import { CommonTrendProps } from './Trend';
|
4
|
+
export type TrendLineProps = CommonTrendProps & {
|
5
|
+
/**
|
6
|
+
* List of values
|
7
|
+
*/
|
8
|
+
data: number[];
|
9
|
+
/**
|
10
|
+
* Color of line
|
11
|
+
*/
|
12
|
+
color?: string;
|
13
|
+
/**
|
14
|
+
* Color of last point in chart
|
15
|
+
*/
|
16
|
+
lastPointColor?: string;
|
17
|
+
/**
|
18
|
+
* Radius for last point item
|
19
|
+
*/
|
20
|
+
lastPointRadius?: number;
|
21
|
+
};
|
22
|
+
type Enhances = {
|
23
|
+
uid: string;
|
24
|
+
resolveColor: ReturnType<typeof resolveColorEnhance>;
|
25
|
+
withArea?: true;
|
26
|
+
};
|
27
|
+
export declare const TrendLine: ComponentType<TrendLineProps, {}, {}, Enhances>;
|
28
|
+
export declare const TrendArea: ComponentType<TrendLineProps, {}, {}, Enhances>;
|
29
|
+
export {};
|