@semcore/mini-chart 0.29.4-prerelease.0 → 0.30.0-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 +60 -64
- package/lib/cjs/component/score/Donut.js.map +1 -1
- package/lib/cjs/component/score/Line.js +38 -41
- package/lib/cjs/component/score/Line.js.map +1 -1
- package/lib/cjs/component/score/Line.types.js.map +1 -1
- package/lib/cjs/component/score/Score.js.map +1 -1
- package/lib/cjs/component/score/index.js.map +1 -1
- package/lib/cjs/component/score/line.shadow.css +4 -4
- package/lib/cjs/component/trend/Bar.js +22 -28
- package/lib/cjs/component/trend/Bar.js.map +1 -1
- package/lib/cjs/component/trend/Line.js +20 -26
- package/lib/cjs/component/trend/Line.js.map +1 -1
- package/lib/cjs/component/trend/Trend.js +9 -13
- package/lib/cjs/component/trend/Trend.js.map +1 -1
- package/lib/cjs/component/trend/index.js +1 -1
- package/lib/cjs/component/trend/index.js.map +1 -1
- package/lib/cjs/index.js +1 -2
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/utils/ScoreDonutUtils.js +87 -0
- package/lib/cjs/utils/ScoreDonutUtils.js.map +1 -0
- package/lib/es6/component/score/Donut.js +57 -58
- package/lib/es6/component/score/Donut.js.map +1 -1
- package/lib/es6/component/score/Line.js +31 -31
- package/lib/es6/component/score/Line.js.map +1 -1
- package/lib/es6/component/score/Line.types.js.map +1 -1
- package/lib/es6/component/score/Score.js.map +1 -1
- package/lib/es6/component/score/index.js.map +1 -1
- package/lib/es6/component/score/line.shadow.css +4 -4
- package/lib/es6/component/trend/Bar.js +19 -21
- package/lib/es6/component/trend/Bar.js.map +1 -1
- package/lib/es6/component/trend/Line.js +17 -19
- package/lib/es6/component/trend/Line.js.map +1 -1
- package/lib/es6/component/trend/Trend.js +7 -10
- package/lib/es6/component/trend/Trend.js.map +1 -1
- package/lib/es6/component/trend/index.js +1 -1
- package/lib/es6/component/trend/index.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/utils/ScoreDonutUtils.js +80 -0
- package/lib/es6/utils/ScoreDonutUtils.js.map +1 -0
- package/lib/esm/component/score/Donut.mjs +58 -61
- package/lib/esm/component/score/Line.mjs +35 -37
- package/lib/esm/component/score/index.mjs +7 -0
- package/lib/esm/component/score/line.shadow.css +4 -4
- package/lib/esm/component/trend/Bar.mjs +20 -23
- package/lib/esm/component/trend/Line.mjs +20 -23
- package/lib/esm/component/trend/Trend.mjs +9 -12
- package/lib/esm/component/trend/index.mjs +8 -0
- package/lib/esm/index.mjs +5 -3
- package/lib/esm/utils/ScoreDonutUtils.mjs +82 -0
- package/lib/types/component/score/Donut.d.ts +8 -11
- package/lib/types/component/score/Line.d.ts +1 -1
- package/lib/types/component/score/Line.types.d.ts +11 -9
- package/lib/types/component/trend/Bar.d.ts +3 -9
- package/lib/types/component/trend/Line.d.ts +7 -11
- package/lib/types/component/trend/Trend.d.ts +4 -4
- package/lib/types/component/trend/index.d.ts +1 -1
- package/lib/types/utils/ScoreDonutUtils.d.ts +18 -0
- package/package.json +4 -4
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -10,35 +9,33 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
|
|
|
10
9
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
11
10
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
12
11
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
12
|
+
var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
|
|
13
13
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
14
|
-
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
15
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
|
-
var
|
|
17
|
-
var
|
|
15
|
+
var _core = require("@semcore/core");
|
|
16
|
+
var _baseComponents = require("@semcore/base-components");
|
|
17
|
+
var _ariaProps = require("@semcore/core/lib/utils/ariaProps");
|
|
18
|
+
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/resolveColorEnhance"));
|
|
18
19
|
var _react = _interopRequireDefault(require("react"));
|
|
19
|
-
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
|
|
20
20
|
var _Trend2 = require("./Trend");
|
|
21
|
-
var _flexBox = require("@semcore/flex-box");
|
|
22
|
-
var _ariaProps = require("@semcore/utils/lib/ariaProps");
|
|
23
21
|
/*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
|
|
24
|
-
var style = (
|
|
22
|
+
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_1yrsa{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1yrsa_gg_.__loading_1yrsa_gg_,.___SLineGauge_1yrsa_gg_.__loading_1yrsa_gg_,.___STrendBar_1yrsa_gg_.__loading_1yrsa_gg_,.___STrendLine_1yrsa_gg_.__loading_1yrsa_gg_{animation-name:pulse_1yrsa;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}", /*__inner_css_end__*/"1yrsa_gg_"),
|
|
25
23
|
/*__reshadow_css_end__*/
|
|
26
24
|
{
|
|
27
|
-
"__SLineGauge": "
|
|
28
|
-
"_loading": "
|
|
29
|
-
"__SDonutContainer": "
|
|
30
|
-
"__STrendLine": "
|
|
31
|
-
"__STrendBar": "
|
|
32
|
-
"@pulse": "
|
|
25
|
+
"__SLineGauge": "___SLineGauge_1yrsa_gg_",
|
|
26
|
+
"_loading": "__loading_1yrsa_gg_",
|
|
27
|
+
"__SDonutContainer": "___SDonutContainer_1yrsa_gg_",
|
|
28
|
+
"__STrendLine": "___STrendLine_1yrsa_gg_",
|
|
29
|
+
"__STrendBar": "___STrendBar_1yrsa_gg_",
|
|
30
|
+
"@pulse": "pulse_1yrsa"
|
|
33
31
|
});
|
|
34
32
|
var TrendBarRoot = /*#__PURE__*/function (_Trend) {
|
|
35
|
-
(0, _inherits2["default"])(TrendBarRoot, _Trend);
|
|
36
|
-
var _super = (0, _createSuper2["default"])(TrendBarRoot);
|
|
37
33
|
function TrendBarRoot() {
|
|
38
34
|
(0, _classCallCheck2["default"])(this, TrendBarRoot);
|
|
39
|
-
return
|
|
35
|
+
return (0, _callSuper2["default"])(this, TrendBarRoot, arguments);
|
|
40
36
|
}
|
|
41
|
-
(0,
|
|
37
|
+
(0, _inherits2["default"])(TrendBarRoot, _Trend);
|
|
38
|
+
return (0, _createClass2["default"])(TrendBarRoot, [{
|
|
42
39
|
key: "defaultData",
|
|
43
40
|
get: function get() {
|
|
44
41
|
return [{
|
|
@@ -68,7 +65,7 @@ var TrendBarRoot = /*#__PURE__*/function (_Trend) {
|
|
|
68
65
|
var _ref = this.asProps,
|
|
69
66
|
_ref2,
|
|
70
67
|
_this = this;
|
|
71
|
-
var STrendBar =
|
|
68
|
+
var STrendBar = _baseComponents.Box;
|
|
72
69
|
var _this$asProps2 = this.asProps,
|
|
73
70
|
styles = _this$asProps2.styles,
|
|
74
71
|
resolveColor = _this$asProps2.resolveColor,
|
|
@@ -100,24 +97,22 @@ var TrendBarRoot = /*#__PURE__*/function (_Trend) {
|
|
|
100
97
|
height: barItem.value,
|
|
101
98
|
fill: color
|
|
102
99
|
}, animate && !loading && /*#__PURE__*/_react["default"].createElement("animate", {
|
|
103
|
-
attributeName:
|
|
100
|
+
attributeName: "y",
|
|
104
101
|
values: "".concat(_this.defaultHeight, ";").concat(_this.defaultHeight - barItem.value),
|
|
105
|
-
dur:
|
|
102
|
+
dur: "500ms"
|
|
106
103
|
}));
|
|
107
104
|
})));
|
|
108
105
|
}
|
|
109
106
|
}]);
|
|
110
|
-
return TrendBarRoot;
|
|
111
107
|
}(_Trend2.Trend);
|
|
112
108
|
(0, _defineProperty2["default"])(TrendBarRoot, "enhance", [(0, _resolveColorEnhance["default"])()]);
|
|
113
109
|
(0, _defineProperty2["default"])(TrendBarRoot, "style", style);
|
|
114
110
|
(0, _defineProperty2["default"])(TrendBarRoot, "defaultProps", {
|
|
115
111
|
animate: true
|
|
116
112
|
});
|
|
117
|
-
var TrendBar = (0, _core
|
|
118
|
-
exports.TrendBar = TrendBar;
|
|
113
|
+
var TrendBar = exports.TrendBar = (0, _core.createComponent)(TrendBarRoot);
|
|
119
114
|
TrendBar.displayName = 'MiniChart.TrendBar';
|
|
120
|
-
var TrendHistogram = (0, _core
|
|
115
|
+
var TrendHistogram = exports.TrendHistogram = (0, _core.createComponent)(TrendBarRoot, {}, {
|
|
121
116
|
enhancements: [function () {
|
|
122
117
|
return {
|
|
123
118
|
wrapperProps: function wrapperProps(props) {
|
|
@@ -128,6 +123,5 @@ var TrendHistogram = (0, _core["default"])(TrendBarRoot, {}, {
|
|
|
128
123
|
};
|
|
129
124
|
}]
|
|
130
125
|
});
|
|
131
|
-
|
|
132
|
-
TrendBar.displayName = 'MiniChart.TrendHistogram';
|
|
126
|
+
TrendHistogram.displayName = 'MiniChart.TrendHistogram';
|
|
133
127
|
//# sourceMappingURL=Bar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Bar.js","names":["_core","
|
|
1
|
+
{"version":3,"file":"Bar.js","names":["_core","require","_baseComponents","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_react","_Trend2","style","sstyled","insert","TrendBarRoot","_Trend","_classCallCheck2","_callSuper2","arguments","_inherits2","_createClass2","key","get","value","_this$asProps","asProps","data","loading","defaultData","render","_ref","_ref2","_this","STrendBar","Box","_this$asProps2","styles","resolveColor","isHistogram","animate","step","defaultWidth","length","_extractAriaProps","extractAriaProps","__excludeProps","extractedAriaProps","createElement","cn","_objectSpread2","assignProps","containerRef","concat","_toConsumableArray2","svgWidth","svgHeight","map","barItem","index","color","x","y","defaultHeight","width","height","fill","attributeName","values","dur","Trend","_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\nTrendHistogram.displayName = 'MiniChart.TrendHistogram';\n"],"mappings":";;;;;;;;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AADA,IAAAC,eAAA,GAAAD,OAAA;AAEA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,oBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAD,sBAAA,CAAAJ,OAAA;AAEA,IAAAM,OAAA,GAAAN,OAAA;AAAuD;AAAA,IAAAO,KAAA,8BAAAR,KAAA,CAAAS,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,IAqBjDC,YAAY,0BAAAC,MAAA;EAAA,SAAAD,aAAA;IAAA,IAAAE,gBAAA,mBAAAF,YAAA;IAAA,WAAAG,WAAA,mBAAAH,YAAA,EAAAI,SAAA;EAAA;EAAA,IAAAC,UAAA,aAAAL,YAAA,EAAAC,MAAA;EAAA,WAAAK,aAAA,aAAAN,YAAA;IAAAO,GAAA;IAAAC,GAAA,EAShB,SAAAA,IAAA,EAA6B;MAC3B,OAAO,CAAC;QAAEC,KAAK,EAAE;MAAG,CAAC,EAAE;QAAEA,KAAK,EAAE;MAAG,CAAC,EAAE;QAAEA,KAAK,EAAE;MAAG,CAAC,EAAE;QAAEA,KAAK,EAAE;MAAG,CAAC,CAAC;IACrE;EAAC;IAAAF,GAAA;IAAAC,GAAA,EAED,SAAAA,IAAA,EAAsB;MACpB,IAAAE,aAAA,GAA0B,IAAI,CAACC,OAAO;QAA9BC,IAAI,GAAAF,aAAA,CAAJE,IAAI;QAAEC,OAAO,GAAAH,aAAA,CAAPG,OAAO;MAErB,IAAIA,OAAO,EAAE;QACX,OAAO,IAAI,CAACC,WAAW;MACzB;MAEA,OAAOF,IAAI;IACb;EAAC;IAAAL,GAAA;IAAAE,KAAA,EAED,SAAAM,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAL,OAAA;QAAAM,KAAA;QAAAC,KAAA;MACP,IAAMC,SAAS,GAMMC,mBAAG;MALxB,IAAAC,cAAA,GAAgE,IAAI,CAACV,OAAO;QAApEW,MAAM,GAAAD,cAAA,CAANC,MAAM;QAAEC,YAAY,GAAAF,cAAA,CAAZE,YAAY;QAAEC,WAAW,GAAAH,cAAA,CAAXG,WAAW;QAAEC,OAAO,GAAAJ,cAAA,CAAPI,OAAO;QAAEZ,OAAO,GAAAQ,cAAA,CAAPR,OAAO;MAC3D,IAAMa,IAAI,GAAG,IAAI,CAACC,YAAY,GAAG,IAAI,CAACf,IAAI,CAACgB,MAAM;MACjD,IAAAC,iBAAA,GAA+C,IAAAC,2BAAgB,EAAC,IAAI,CAACnB,OAAO,CAAC;QAArEoB,cAAc,GAAAF,iBAAA,CAAdE,cAAc;QAAEC,kBAAkB,GAAAH,iBAAA,CAAlBG,kBAAkB;MAE1C,OAAAf,KAAA,GAAO,IAAAnB,aAAO,EAACwB,MAAM,CAAC,eACpB3B,MAAA,YAAAsC,aAAA,CAACd,SAAS,EAAAF,KAAA,CAAAiB,EAAA,kBAAAC,cAAA,qBAAA9C,KAAA,CAAA+C,WAAA;QAAA,OAAmB,IAAI,CAACC,YAAY;QAAA,mBAAmB,MAAM,EAAAC,MAAA,KAAAC,mBAAA,aAAKR,cAAc;MAAA,GAAAf,IAAA,kBACxFrB,MAAA,YAAAsC,aAAA,QAAAhB,KAAA,CAAAiB,EAAA,YAAAC,cAAA;QAAA,SACQ,MAAM;QAAA,UACL,MAAM;QAAA,kBAAAG,MAAA,CACG,IAAI,CAACE,QAAQ,OAAAF,MAAA,CAAI,IAAI,CAACG,SAAS;QAAA,QAC1C;MAAK,GACNT,kBAAkB,IAErB,IAAI,CAACpB,IAAI,CAAC8B,GAAG,CAAC,UAACC,OAAO,EAAEC,KAAK,EAAK;QACjC,IAAIC,KAAK,GAAGtB,YAAY,CAAC,gCAAgC,CAAC;QAE1D,IAAIoB,OAAO,CAACE,KAAK,EAAE;UACjBA,KAAK,GAAGtB,YAAY,CAACoB,OAAO,CAACE,KAAK,CAAC;QACrC;QAEA,oBACElD,MAAA,YAAAsC,aAAA;UACE1B,GAAG,EAAEqC,KAAM;UACXE,CAAC,EAAEpB,IAAI,GAAGkB,KAAM;UAChBG,CAAC,EAAE7B,KAAI,CAAC8B,aAAa,GAAGL,OAAO,CAAClC,KAAM;UACtCwC,KAAK,EAAEzB,WAAW,GAAGE,IAAI,GAAGA,IAAI,GAAG,GAAI;UACvCwB,MAAM,EAAEP,OAAO,CAAClC,KAAM;UACtB0C,IAAI,EAAEN;QAAM,GAEXpB,OAAO,IAAI,CAACZ,OAAO,iBAClBlB,MAAA,YAAAsC,aAAA;UACEmB,aAAa,EAAC,GAAG;UACjBC,MAAM,KAAAf,MAAA,CAAKpB,KAAI,CAAC8B,aAAa,OAAAV,MAAA,CAAIpB,KAAI,CAAC8B,aAAa,GAAGL,OAAO,CAAClC,KAAK,CAAG;UACtE6C,GAAG,EAAC;QAAO,CACZ,CAEC,CAAC;MAEX,CAAC,CACE,CACI,CAAC;IAEhB;EAAC;AAAA,EAnEwBC,aAAK;AAAA,IAAAC,gBAAA,aAA1BxD,YAAY,aACC,CAAC,IAAAyD,+BAAmB,EAAC,CAAC,CAAC;AAAA,IAAAD,gBAAA,aADpCxD,YAAY,WAGDH,KAAK;AAAA,IAAA2D,gBAAA,aAHhBxD,YAAY,kBAKM;EACpByB,OAAO,EAAE;AACX,CAAC;AA+DI,IAAMiC,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,IAAAE,qBAAe,EAAwD5D,YAAY,CAAC;AAE5G0D,QAAQ,CAACG,WAAW,GAAG,oBAAoB;AAEpC,IAAMC,cAAc,GAAAH,OAAA,CAAAG,cAAA,GAAG,IAAAF,qBAAe,EAC3C5D,YAAY,EACZ,CAAC,CAAC,EACF;EACE+D,YAAY,EAAE,CACZ,YAAM;IACJ,OAAO;MACLC,YAAY,EAAE,SAAdA,YAAYA,CAAGC,KAAoB,EAAK;QACtC,OAAO,IAAA7B,iBAAW,EAAC6B,KAAK,EAAE;UAAEzC,WAAW,EAAE;QAAK,CAAC,CAAC;MAClD;IACF,CAAC;EACH,CAAC;AAEL,CACF,CAAC;AAEDsC,cAAc,CAACD,WAAW,GAAG,0BAA0B","ignoreList":[]}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -10,36 +9,34 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
|
|
|
10
9
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
11
10
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
12
11
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
12
|
+
var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
|
|
13
13
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
14
|
-
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
15
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
|
-
var
|
|
17
|
-
var
|
|
15
|
+
var _core = require("@semcore/core");
|
|
16
|
+
var _baseComponents = require("@semcore/base-components");
|
|
17
|
+
var _ariaProps = require("@semcore/core/lib/utils/ariaProps");
|
|
18
|
+
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/resolveColorEnhance"));
|
|
19
|
+
var _uniqueID = _interopRequireDefault(require("@semcore/core/lib/utils/uniqueID"));
|
|
18
20
|
var _react = _interopRequireDefault(require("react"));
|
|
19
|
-
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
|
|
20
|
-
var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
|
|
21
21
|
var _Trend2 = require("./Trend");
|
|
22
|
-
var _flexBox = require("@semcore/flex-box");
|
|
23
|
-
var _ariaProps = require("@semcore/utils/lib/ariaProps");
|
|
24
22
|
/*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
|
|
25
|
-
var style = (
|
|
23
|
+
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes pulse_1yrsa{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1yrsa_gg_.__loading_1yrsa_gg_,.___SLineGauge_1yrsa_gg_.__loading_1yrsa_gg_,.___STrendBar_1yrsa_gg_.__loading_1yrsa_gg_,.___STrendLine_1yrsa_gg_.__loading_1yrsa_gg_{animation-name:pulse_1yrsa;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}", /*__inner_css_end__*/"1yrsa_gg_"),
|
|
26
24
|
/*__reshadow_css_end__*/
|
|
27
25
|
{
|
|
28
|
-
"__SLineGauge": "
|
|
29
|
-
"_loading": "
|
|
30
|
-
"__SDonutContainer": "
|
|
31
|
-
"__STrendLine": "
|
|
32
|
-
"__STrendBar": "
|
|
33
|
-
"@pulse": "
|
|
26
|
+
"__SLineGauge": "___SLineGauge_1yrsa_gg_",
|
|
27
|
+
"_loading": "__loading_1yrsa_gg_",
|
|
28
|
+
"__SDonutContainer": "___SDonutContainer_1yrsa_gg_",
|
|
29
|
+
"__STrendLine": "___STrendLine_1yrsa_gg_",
|
|
30
|
+
"__STrendBar": "___STrendBar_1yrsa_gg_",
|
|
31
|
+
"@pulse": "pulse_1yrsa"
|
|
34
32
|
});
|
|
35
33
|
var TrendLineRoot = /*#__PURE__*/function (_Trend) {
|
|
36
|
-
(0, _inherits2["default"])(TrendLineRoot, _Trend);
|
|
37
|
-
var _super = (0, _createSuper2["default"])(TrendLineRoot);
|
|
38
34
|
function TrendLineRoot() {
|
|
39
35
|
(0, _classCallCheck2["default"])(this, TrendLineRoot);
|
|
40
|
-
return
|
|
36
|
+
return (0, _callSuper2["default"])(this, TrendLineRoot, arguments);
|
|
41
37
|
}
|
|
42
|
-
(0,
|
|
38
|
+
(0, _inherits2["default"])(TrendLineRoot, _Trend);
|
|
39
|
+
return (0, _createClass2["default"])(TrendLineRoot, [{
|
|
43
40
|
key: "defaultData",
|
|
44
41
|
get: function get() {
|
|
45
42
|
return [15, 70, 20, 85, 20];
|
|
@@ -89,7 +86,7 @@ var TrendLineRoot = /*#__PURE__*/function (_Trend) {
|
|
|
89
86
|
value: function render() {
|
|
90
87
|
var _ref = this.asProps,
|
|
91
88
|
_ref2;
|
|
92
|
-
var STrendLine =
|
|
89
|
+
var STrendLine = _baseComponents.Box;
|
|
93
90
|
var _this$asProps3 = this.asProps,
|
|
94
91
|
uid = _this$asProps3.uid,
|
|
95
92
|
withArea = _this$asProps3.withArea,
|
|
@@ -149,17 +146,15 @@ var TrendLineRoot = /*#__PURE__*/function (_Trend) {
|
|
|
149
146
|
}))))));
|
|
150
147
|
}
|
|
151
148
|
}]);
|
|
152
|
-
return TrendLineRoot;
|
|
153
149
|
}(_Trend2.Trend);
|
|
154
150
|
(0, _defineProperty2["default"])(TrendLineRoot, "enhance", [(0, _resolveColorEnhance["default"])(), (0, _uniqueID["default"])()]);
|
|
155
151
|
(0, _defineProperty2["default"])(TrendLineRoot, "style", style);
|
|
156
152
|
(0, _defineProperty2["default"])(TrendLineRoot, "defaultProps", {
|
|
157
153
|
animate: true
|
|
158
154
|
});
|
|
159
|
-
var TrendLine = (0, _core
|
|
160
|
-
exports.TrendLine = TrendLine;
|
|
155
|
+
var TrendLine = exports.TrendLine = (0, _core.createComponent)(TrendLineRoot);
|
|
161
156
|
TrendLine.displayName = 'MiniChart.TrendLine';
|
|
162
|
-
var TrendArea = (0, _core
|
|
157
|
+
var TrendArea = exports.TrendArea = (0, _core.createComponent)(TrendLineRoot, {}, {
|
|
163
158
|
enhancements: [function () {
|
|
164
159
|
return {
|
|
165
160
|
wrapperProps: function wrapperProps(props) {
|
|
@@ -170,6 +165,5 @@ var TrendArea = (0, _core["default"])(TrendLineRoot, {}, {
|
|
|
170
165
|
};
|
|
171
166
|
}]
|
|
172
167
|
});
|
|
173
|
-
exports.TrendArea = TrendArea;
|
|
174
168
|
TrendArea.displayName = 'MiniChart.TrendArea';
|
|
175
169
|
//# sourceMappingURL=Line.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Line.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_resolveColorEnhance","_uniqueID","_Trend2","_flexBox","_ariaProps","style","_index","sstyled","insert","TrendLineRoot","_Trend","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","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","Box","_this$asProps3","uid","withArea","animate","styles","points","length","step","i","push","concat","_extractAriaProps","extractAriaProps","__excludeProps","extractedAriaProps","createElement","cn","_objectSpread2","assignProps","containerRef","_toConsumableArray2","svgWidth","svgHeight","join","Trend","_defineProperty2","resolveColorEnhance","uniqueIDEnhancement","TrendLine","createComponent","exports","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';\nimport { extractAriaProps } from '@semcore/utils/lib/ariaProps';\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, typeof TrendLineRoot.enhance> {\n static enhance = [resolveColorEnhance(), uniqueIDEnhancement()] as const;\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 const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n return sstyled(styles)(\n <STrendLine 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 <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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"}
|
|
1
|
+
{"version":3,"file":"Line.js","names":["_core","require","_baseComponents","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_uniqueID","_react","_Trend2","style","sstyled","insert","TrendLineRoot","_Trend","_classCallCheck2","_callSuper2","arguments","_inherits2","_createClass2","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","Box","_this$asProps3","uid","withArea","animate","styles","points","length","step","i","push","concat","_extractAriaProps","extractAriaProps","__excludeProps","extractedAriaProps","createElement","cn","_objectSpread2","assignProps","containerRef","_toConsumableArray2","svgWidth","svgHeight","join","Trend","_defineProperty2","resolveColorEnhance","uniqueIDEnhancement","TrendLine","exports","createComponent","displayName","TrendArea","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Line.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 uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';\nimport React from 'react';\n\nimport { Trend, type CommonTrendProps } from './Trend';\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\nclass TrendLineRoot extends Trend<TrendLineProps, typeof TrendLineRoot.enhance> {\n static enhance = [resolveColorEnhance(), uniqueIDEnhancement()] as const;\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 const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n return sstyled(styles)(\n <STrendLine 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 <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 = createComponent<'svg', TrendLineProps, {}, typeof TrendLineRoot.enhance>(TrendLineRoot);\n\nTrendLine.displayName = 'MiniChart.TrendLine';\n\nexport const TrendArea = createComponent<'svg', TrendLineProps, {}, typeof TrendLineRoot.enhance>(\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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","ignoreList":[]}
|
|
@@ -1,36 +1,34 @@
|
|
|
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.Trend = void 0;
|
|
8
8
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
9
9
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
10
|
-
var
|
|
10
|
+
var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
|
|
11
11
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
12
|
-
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
13
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
14
|
-
var _react = _interopRequireDefault(require("react"));
|
|
15
13
|
var _core = require("@semcore/core");
|
|
16
|
-
var
|
|
17
|
-
|
|
18
|
-
var _super = (0, _createSuper2["default"])(Trend);
|
|
14
|
+
var _react = _interopRequireDefault(require("react"));
|
|
15
|
+
var Trend = exports.Trend = /*#__PURE__*/function (_Component) {
|
|
19
16
|
function Trend() {
|
|
20
17
|
var _this;
|
|
21
18
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
22
19
|
args[_key] = arguments[_key];
|
|
23
20
|
}
|
|
24
21
|
(0, _classCallCheck2["default"])(this, Trend);
|
|
25
|
-
_this =
|
|
26
|
-
(0, _defineProperty2["default"])(
|
|
22
|
+
_this = (0, _callSuper2["default"])(this, Trend, [].concat(args));
|
|
23
|
+
(0, _defineProperty2["default"])(_this, "state", {
|
|
27
24
|
width: 200,
|
|
28
25
|
height: 100
|
|
29
26
|
});
|
|
30
|
-
(0, _defineProperty2["default"])(
|
|
27
|
+
(0, _defineProperty2["default"])(_this, "containerRef", /*#__PURE__*/_react["default"].createRef());
|
|
31
28
|
return _this;
|
|
32
29
|
}
|
|
33
|
-
(0,
|
|
30
|
+
(0, _inherits2["default"])(Trend, _Component);
|
|
31
|
+
return (0, _createClass2["default"])(Trend, [{
|
|
34
32
|
key: "componentDidMount",
|
|
35
33
|
value: function componentDidMount() {
|
|
36
34
|
this.setSizes();
|
|
@@ -81,7 +79,5 @@ var Trend = /*#__PURE__*/function (_Component) {
|
|
|
81
79
|
}
|
|
82
80
|
}
|
|
83
81
|
}]);
|
|
84
|
-
return Trend;
|
|
85
82
|
}(_core.Component);
|
|
86
|
-
exports.Trend = Trend;
|
|
87
83
|
//# sourceMappingURL=Trend.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Trend.js","names":["
|
|
1
|
+
{"version":3,"file":"Trend.js","names":["_core","require","_react","_interopRequireDefault","Trend","exports","_Component","_this","_len","arguments","length","args","Array","_key","_classCallCheck2","_callSuper2","concat","_defineProperty2","width","height","React","createRef","_inherits2","_createClass2","key","value","componentDidMount","setSizes","componentDidUpdate","prevProps","w","props","h","data","get","_this$state","state","defaultHeight","defaultWidth","containerRef","current","boundingClientRect","getBoundingClientRect","setState","Component"],"sources":["../../../../src/component/trend/Trend.tsx"],"sourcesContent":["import type { BoxProps } from '@semcore/base-components';\nimport { Component } from '@semcore/core';\nimport React from 'react';\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<\n P extends CommonTrendProps,\n E extends readonly ((...args: any[]) => any)[],\n> extends Component<P, E, Readonly<{}>, { width: number; height: number }> {\n state = {\n width: 200,\n height: 100,\n };\n\n containerRef = React.createRef<HTMLDivElement>();\n\n componentDidMount() {\n this.setSizes();\n }\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":";;;;;;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA0B,IAqBJG,KAAK,GAAAC,OAAA,CAAAD,KAAA,0BAAAE,UAAA;EAAA,SAAAF,MAAA;IAAA,IAAAG,KAAA;IAAA,SAAAC,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;IAAA,IAAAC,gBAAA,mBAAAV,KAAA;IAAAG,KAAA,OAAAQ,WAAA,mBAAAX,KAAA,KAAAY,MAAA,CAAAL,IAAA;IAAA,IAAAM,gBAAA,aAAAV,KAAA,WAIjB;MACNW,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE;IACV,CAAC;IAAA,IAAAF,gBAAA,aAAAV,KAAA,+BAEca,iBAAK,CAACC,SAAS,CAAiB,CAAC;IAAA,OAAAd,KAAA;EAAA;EAAA,IAAAe,UAAA,aAAAlB,KAAA,EAAAE,UAAA;EAAA,WAAAiB,aAAA,aAAAnB,KAAA;IAAAoB,GAAA;IAAAC,KAAA,EAEhD,SAAAC,iBAAiBA,CAAA,EAAG;MAClB,IAAI,CAACC,QAAQ,CAAC,CAAC;IACjB;EAAC;IAAAH,GAAA;IAAAC,KAAA,EAED,SAAAG,kBAAkBA,CAACC,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,CAAC,CAAC;MACjB;IACF;EAAC;IAAAH,GAAA;IAAAU,GAAA,EAED,SAAAA,IAAA,EAA2B;MACzB,IAAAC,WAAA,GAA0B,IAAI,CAACC,KAAK;QAA5BlB,KAAK,GAAAiB,WAAA,CAALjB,KAAK;QAAEC,MAAM,GAAAgB,WAAA,CAANhB,MAAM;MAErB,OAAQD,KAAK,GAAGC,MAAM,GAAI,IAAI,CAACkB,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,QAAQA,CAAA,EAAG;MACT,IAAI,IAAI,CAACY,YAAY,CAACC,OAAO,EAAE;QAC7B,IAAMC,kBAAkB,GAAG,IAAI,CAACF,YAAY,CAACC,OAAO,CAACE,qBAAqB,CAAC,CAAC;QAE5E,IAAQxB,KAAK,GAAauB,kBAAkB,CAApCvB,KAAK;UAAEC,MAAM,GAAKsB,kBAAkB,CAA7BtB,MAAM;QAErB,IAAID,KAAK,GAAG,CAAC,IAAIC,MAAM,GAAG,CAAC,EAAE;UAC3B,IAAI,CAACwB,QAAQ,CAAC;YAAEzB,KAAK,EAALA,KAAK;YAAEC,MAAM,EAANA;UAAO,CAAC,CAAC;QAClC;MACF;IACF;EAAC;AAAA,EAlDOyB,eAAS","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["_Bar","require","_Line"],"sources":["../../../../src/component/trend/index.ts"],"sourcesContent":["import { TrendBar, TrendHistogram } from './Bar';\nimport { TrendLine, TrendArea } from './Line';\n\nexport { TrendLine, TrendArea, TrendBar, TrendHistogram };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,IAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA","ignoreList":[]}
|
package/lib/cjs/index.js
CHANGED
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_score","require","_trend","miniCharts","TrendLine","TrendArea","TrendBar","TrendHistogram","ScoreSemiDonut","ScoreDonut","ScoreLine","_default","exports"],"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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAME,UAQL,GAAG;EACFC,SAAS,EAATA,gBAAS;EACTC,SAAS,EAATA,gBAAS;EACTC,QAAQ,EAARA,eAAQ;EACRC,cAAc,EAAdA,qBAAc;EACdC,cAAc,EAAdA,qBAAc;EACdC,UAAU,EAAVA,iBAAU;EACVC,SAAS,EAATA;AACF,CAAC;AAAC,IAAAC,QAAA,
|
|
1
|
+
{"version":3,"file":"index.js","names":["_score","require","_trend","miniCharts","TrendLine","TrendArea","TrendBar","TrendHistogram","ScoreSemiDonut","ScoreDonut","ScoreLine","_default","exports"],"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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAME,UAQL,GAAG;EACFC,SAAS,EAATA,gBAAS;EACTC,SAAS,EAATA,gBAAS;EACTC,QAAQ,EAARA,eAAQ;EACRC,cAAc,EAAdA,qBAAc;EACdC,cAAc,EAAdA,qBAAc;EACdC,UAAU,EAAVA,iBAAU;EACVC,SAAS,EAATA;AACF,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEaT,UAAU","ignoreList":[]}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.ScoreDonutUtils = void 0;
|
|
8
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
9
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
+
var ScoreDonutUtils = exports.ScoreDonutUtils = /*#__PURE__*/function () {
|
|
12
|
+
function ScoreDonutUtils(value, isSemiDonut) {
|
|
13
|
+
(0, _classCallCheck2["default"])(this, ScoreDonutUtils);
|
|
14
|
+
(0, _defineProperty2["default"])(this, "isSemiDonut", void 0);
|
|
15
|
+
(0, _defineProperty2["default"])(this, "value", void 0);
|
|
16
|
+
(0, _defineProperty2["default"])(this, "radius", void 0);
|
|
17
|
+
this.isSemiDonut = isSemiDonut;
|
|
18
|
+
this.radius = isSemiDonut ? 9 : 10;
|
|
19
|
+
this.value = Math.max(Math.min(value, 100), 0);
|
|
20
|
+
}
|
|
21
|
+
return (0, _createClass2["default"])(ScoreDonutUtils, [{
|
|
22
|
+
key: "viewBox",
|
|
23
|
+
get: function get() {
|
|
24
|
+
return this.isSemiDonut ? '0 0 24 12' : '0 0 24 24';
|
|
25
|
+
}
|
|
26
|
+
}, {
|
|
27
|
+
key: "strokeWidth",
|
|
28
|
+
get: function get() {
|
|
29
|
+
return this.isSemiDonut ? 6 : 4;
|
|
30
|
+
}
|
|
31
|
+
}, {
|
|
32
|
+
key: "fullLength",
|
|
33
|
+
get: function get() {
|
|
34
|
+
return this.isSemiDonut ? Math.PI * this.radius : 2 * Math.PI * this.radius;
|
|
35
|
+
}
|
|
36
|
+
}, {
|
|
37
|
+
key: "point",
|
|
38
|
+
get: function get() {
|
|
39
|
+
return this.isSemiDonut ? this.fullLength / (100 / 3) : this.fullLength / 100;
|
|
40
|
+
}
|
|
41
|
+
}, {
|
|
42
|
+
key: "valueLength",
|
|
43
|
+
get: function get() {
|
|
44
|
+
return this.fullLength * (this.value / 100);
|
|
45
|
+
}
|
|
46
|
+
}, {
|
|
47
|
+
key: "animatedValueLength",
|
|
48
|
+
get: function get() {
|
|
49
|
+
return Math.min(this.valueLength, this.fullLength - this.startMargin - this.endMargin);
|
|
50
|
+
}
|
|
51
|
+
}, {
|
|
52
|
+
key: "startMargin",
|
|
53
|
+
get: function get() {
|
|
54
|
+
var margin = 0;
|
|
55
|
+
if (this.value > 0) margin = this.point;
|
|
56
|
+
return margin;
|
|
57
|
+
}
|
|
58
|
+
}, {
|
|
59
|
+
key: "endMargin",
|
|
60
|
+
get: function get() {
|
|
61
|
+
var margin = 0;
|
|
62
|
+
if (!this.isSemiDonut && this.value > 0) margin = this.point;
|
|
63
|
+
return margin;
|
|
64
|
+
}
|
|
65
|
+
}, {
|
|
66
|
+
key: "baseOffset",
|
|
67
|
+
get: function get() {
|
|
68
|
+
return -1 * (this.valueLength + this.startMargin);
|
|
69
|
+
}
|
|
70
|
+
}, {
|
|
71
|
+
key: "baseLength",
|
|
72
|
+
get: function get() {
|
|
73
|
+
return Math.max(this.fullLength - this.valueLength - this.startMargin - this.endMargin, 0);
|
|
74
|
+
}
|
|
75
|
+
}, {
|
|
76
|
+
key: "animatedBaseLengthFrom",
|
|
77
|
+
get: function get() {
|
|
78
|
+
return this.fullLength - this.startMargin - this.endMargin;
|
|
79
|
+
}
|
|
80
|
+
}, {
|
|
81
|
+
key: "animatedBaseLengthTo",
|
|
82
|
+
get: function get() {
|
|
83
|
+
return this.fullLength - this.valueLength - this.startMargin - this.endMargin;
|
|
84
|
+
}
|
|
85
|
+
}]);
|
|
86
|
+
}();
|
|
87
|
+
//# sourceMappingURL=ScoreDonutUtils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScoreDonutUtils.js","names":["ScoreDonutUtils","exports","value","isSemiDonut","_classCallCheck2","_defineProperty2","radius","Math","max","min","_createClass2","key","get","PI","fullLength","valueLength","startMargin","endMargin","margin","point"],"sources":["../../../src/utils/ScoreDonutUtils.ts"],"sourcesContent":["export class ScoreDonutUtils {\n private readonly isSemiDonut: boolean;\n private readonly value: number;\n\n public readonly radius: number;\n\n constructor(value: number, isSemiDonut: boolean) {\n this.isSemiDonut = isSemiDonut;\n this.radius = isSemiDonut ? 9 : 10;\n this.value = Math.max(Math.min(value, 100), 0);\n }\n\n public get viewBox() {\n return this.isSemiDonut ? '0 0 24 12' : '0 0 24 24';\n }\n\n public get strokeWidth() {\n return this.isSemiDonut ? 6 : 4;\n }\n\n public get fullLength() {\n return this.isSemiDonut ? Math.PI * this.radius : 2 * Math.PI * this.radius;\n }\n\n public get point() {\n return this.isSemiDonut\n ? this.fullLength / (100 / 3)\n : this.fullLength / 100;\n }\n\n public get valueLength() {\n return this.fullLength * (this.value / 100);\n }\n\n public get animatedValueLength() {\n return Math.min(this.valueLength, this.fullLength - this.startMargin - this.endMargin);\n }\n\n public get startMargin() {\n let margin = 0;\n if (this.value > 0) margin = this.point;\n return margin;\n }\n\n public get endMargin() {\n let margin = 0;\n if (!this.isSemiDonut && this.value > 0) margin = this.point;\n return margin;\n }\n\n public get baseOffset() {\n return -1 * (this.valueLength + this.startMargin);\n };\n\n public get baseLength() {\n return Math.max(this.fullLength - this.valueLength - this.startMargin - this.endMargin, 0);\n }\n\n public get animatedBaseLengthFrom() {\n return this.fullLength - this.startMargin - this.endMargin;\n }\n\n public get animatedBaseLengthTo() {\n return this.fullLength - this.valueLength - this.startMargin - this.endMargin;\n }\n}\n"],"mappings":"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","ignoreList":[]}
|