@widergy/energy-ui 3.89.0 → 3.90.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 +14 -0
- package/dist/components/UTBarChart/components/Bars/components/Bar/components/Rect/index.js +20 -16
- package/dist/components/UTBarChart/components/Bars/components/Bar/index.js +11 -4
- package/dist/components/UTBarChart/components/Bars/index.js +8 -3
- package/dist/components/UTPieChart/components/Legend/index.js +30 -21
- package/dist/components/UTPieChart/components/Legend/styles.module.scss +8 -0
- package/dist/components/UTPieChart/index.js +3 -0
- package/dist/index.js +15 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
# [3.90.0](https://github.com/widergy/energy-ui/compare/v3.89.1...v3.90.0) (2025-07-21)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* piechart feature ([#613](https://github.com/widergy/energy-ui/issues/613)) ([3d7b0ee](https://github.com/widergy/energy-ui/commit/3d7b0ee20cec9f9a3255e5e0e3d2c9505e908847))
|
|
7
|
+
|
|
8
|
+
## [3.89.1](https://github.com/widergy/energy-ui/compare/v3.89.0...v3.89.1) (2025-07-17)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* export components ([#648](https://github.com/widergy/energy-ui/issues/648)) ([ea220f1](https://github.com/widergy/energy-ui/commit/ea220f1b94724b553d2e780d6c4f03b04641308b))
|
|
14
|
+
|
|
1
15
|
# [3.89.0](https://github.com/widergy/energy-ui/compare/v3.88.0...v3.89.0) (2025-07-16)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -10,17 +10,19 @@ var d3 = _interopRequireWildcard(require("d3"));
|
|
|
10
10
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
11
11
|
const Rect = _ref => {
|
|
12
12
|
let {
|
|
13
|
-
width,
|
|
14
|
-
height,
|
|
15
|
-
color,
|
|
16
|
-
x,
|
|
17
|
-
y,
|
|
18
13
|
borderRadius,
|
|
14
|
+
className,
|
|
15
|
+
color,
|
|
16
|
+
gradient,
|
|
17
|
+
height,
|
|
19
18
|
id,
|
|
19
|
+
index,
|
|
20
20
|
stroke,
|
|
21
21
|
strokeWidth,
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
transitionDuration,
|
|
23
|
+
width,
|
|
24
|
+
x,
|
|
25
|
+
y
|
|
24
26
|
} = _ref;
|
|
25
27
|
const verticalStroke = -height + borderRadius || 0;
|
|
26
28
|
const horizontalStroke = width - 2 * borderRadius || 0;
|
|
@@ -29,7 +31,7 @@ const Rect = _ref => {
|
|
|
29
31
|
(0, _react.useEffect)(() => {
|
|
30
32
|
d3.select("#bar-".concat(id)).attr('height', 0).attr('y', positiveY).transition().duration(transitionDuration).attr('height', positiveHeight).attr('y', positiveY - positiveHeight);
|
|
31
33
|
}, [positiveHeight, positiveY]);
|
|
32
|
-
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("clipPath", {
|
|
34
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, gradient && /*#__PURE__*/_react.default.createElement("defs", null, gradient), /*#__PURE__*/_react.default.createElement("clipPath", {
|
|
33
35
|
id: "clip-bar-".concat(id)
|
|
34
36
|
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
35
37
|
d: "M".concat(x, ",").concat(y, " v").concat(verticalStroke, " q", 0, ",").concat(-borderRadius, " ").concat(borderRadius, ",").concat(-borderRadius, " h").concat(horizontalStroke, " q").concat(borderRadius, ",", 0, " ").concat(borderRadius, ",").concat(borderRadius, " v").concat(-verticalStroke, " z")
|
|
@@ -39,22 +41,24 @@ const Rect = _ref => {
|
|
|
39
41
|
clipPath: "url(#clip-bar-".concat(id, ")"),
|
|
40
42
|
x: x,
|
|
41
43
|
width: width,
|
|
42
|
-
fill: color,
|
|
44
|
+
fill: gradient ? "url(#gradient-".concat(index, ")") : color,
|
|
43
45
|
stroke: stroke,
|
|
44
46
|
strokeWidth: strokeWidth
|
|
45
47
|
}));
|
|
46
48
|
};
|
|
47
49
|
Rect.propTypes = {
|
|
48
|
-
width: _propTypes.number,
|
|
49
|
-
height: _propTypes.number,
|
|
50
|
-
color: _propTypes.string,
|
|
51
|
-
x: _propTypes.number,
|
|
52
|
-
y: _propTypes.number,
|
|
53
50
|
borderRadius: _propTypes.number,
|
|
51
|
+
className: _propTypes.string,
|
|
52
|
+
color: _propTypes.string,
|
|
53
|
+
gradient: _propTypes.string,
|
|
54
|
+
height: _propTypes.number,
|
|
54
55
|
id: _propTypes.string,
|
|
56
|
+
index: _propTypes.number,
|
|
55
57
|
stroke: _propTypes.string,
|
|
56
58
|
strokeWidth: _propTypes.number,
|
|
57
|
-
|
|
58
|
-
|
|
59
|
+
transitionDuration: _propTypes.number,
|
|
60
|
+
width: _propTypes.number,
|
|
61
|
+
x: _propTypes.number,
|
|
62
|
+
y: _propTypes.number
|
|
59
63
|
};
|
|
60
64
|
var _default = exports.default = Rect;
|
|
@@ -13,6 +13,7 @@ var _Rect = _interopRequireDefault(require("./components/Rect"));
|
|
|
13
13
|
var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
|
|
14
14
|
var _constants = require("./constants");
|
|
15
15
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
16
17
|
const {
|
|
17
18
|
barChart
|
|
18
19
|
} = _testIds.TEST_IDS;
|
|
@@ -21,6 +22,7 @@ const Bar = _ref => {
|
|
|
21
22
|
width,
|
|
22
23
|
height,
|
|
23
24
|
color,
|
|
25
|
+
gradient,
|
|
24
26
|
x,
|
|
25
27
|
y,
|
|
26
28
|
borderRadius,
|
|
@@ -33,22 +35,25 @@ const Bar = _ref => {
|
|
|
33
35
|
stroke,
|
|
34
36
|
strokeWidth,
|
|
35
37
|
tooltipClassName,
|
|
36
|
-
transitionDuration
|
|
38
|
+
transitionDuration,
|
|
39
|
+
tooltipProps
|
|
37
40
|
} = _ref;
|
|
38
|
-
return /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
|
|
41
|
+
return /*#__PURE__*/_react.default.createElement(_UTTooltip.default, _extends({
|
|
39
42
|
className: tooltipClassName,
|
|
40
43
|
content: tooltipContent,
|
|
41
44
|
dataTestId: "".concat(barChart.bar.tooltip).concat(id),
|
|
42
45
|
interactive: false,
|
|
43
46
|
stringContentClassName: _stylesModule.default.tooltip
|
|
44
|
-
}, /*#__PURE__*/_react.default.createElement("g", {
|
|
47
|
+
}, tooltipProps), /*#__PURE__*/_react.default.createElement("g", {
|
|
45
48
|
className: "".concat(clickable && _stylesModule.default.clickable, " ").concat(_stylesModule.default.rect),
|
|
46
49
|
onClick: clickable ? () => onClick(index, data) : _constants.NO_OP
|
|
47
50
|
}, /*#__PURE__*/_react.default.createElement(_Rect.default, {
|
|
51
|
+
index: index,
|
|
48
52
|
className: "".concat(clickable && _stylesModule.default.clickable, " ").concat(_stylesModule.default.rect),
|
|
49
53
|
width: width,
|
|
50
54
|
height: height,
|
|
51
55
|
color: color,
|
|
56
|
+
gradient: gradient,
|
|
52
57
|
x: x,
|
|
53
58
|
y: y,
|
|
54
59
|
borderRadius: height > borderRadius ? borderRadius : height,
|
|
@@ -74,6 +79,8 @@ Bar.propTypes = {
|
|
|
74
79
|
stroke: _propTypes.string,
|
|
75
80
|
strokeWidth: _propTypes.number,
|
|
76
81
|
tooltipClassName: _propTypes.string,
|
|
77
|
-
transitionDuration: _propTypes.number
|
|
82
|
+
transitionDuration: _propTypes.number,
|
|
83
|
+
gradient: _propTypes.string,
|
|
84
|
+
tooltipProps: _propTypes.object
|
|
78
85
|
};
|
|
79
86
|
var _default = exports.default = Bar;
|
|
@@ -75,7 +75,9 @@ const Bars = _ref => {
|
|
|
75
75
|
stroke,
|
|
76
76
|
strokeWidth,
|
|
77
77
|
tooltipContent,
|
|
78
|
-
value
|
|
78
|
+
value,
|
|
79
|
+
gradient = null,
|
|
80
|
+
tooltipProps = {}
|
|
79
81
|
} = bar;
|
|
80
82
|
const selected = selectable && selectedIndex === index && selectedPage === currentPage;
|
|
81
83
|
const xInitialPosition = (fullSizeBars ? graphXStart : xAxis(index)) + xSubAxis(group);
|
|
@@ -95,7 +97,8 @@ const Bars = _ref => {
|
|
|
95
97
|
y: graphYStart - offset,
|
|
96
98
|
borderRadius: removeBorderRadius ? 0 : barBorderRadius,
|
|
97
99
|
data: bar,
|
|
98
|
-
id: "".concat(_constants.HIGHLIGHT_KEY, "-").concat(index, "-").concat(group, "-").concat(stackIndex)
|
|
100
|
+
id: "".concat(_constants.HIGHLIGHT_KEY, "-").concat(index, "-").concat(group, "-").concat(stackIndex),
|
|
101
|
+
gradient: gradient
|
|
99
102
|
}), /*#__PURE__*/_react.default.createElement(_Bar.default, {
|
|
100
103
|
index: index,
|
|
101
104
|
data: data,
|
|
@@ -105,6 +108,7 @@ const Bars = _ref => {
|
|
|
105
108
|
width: barWidth,
|
|
106
109
|
height: graphYStart - yInitialPosition,
|
|
107
110
|
color: color,
|
|
111
|
+
gradient: gradient,
|
|
108
112
|
x: xInitialPosition,
|
|
109
113
|
y: graphYStart - offset,
|
|
110
114
|
borderRadius: removeBorderRadius ? 0 : barBorderRadius,
|
|
@@ -113,7 +117,8 @@ const Bars = _ref => {
|
|
|
113
117
|
id: "".concat(_constants.BAR_KEY, "-").concat(index, "-").concat(group, "-").concat(stackIndex),
|
|
114
118
|
stroke: stroke,
|
|
115
119
|
strokeWidth: strokeWidth,
|
|
116
|
-
transitionDuration: transitionDuration
|
|
120
|
+
transitionDuration: transitionDuration,
|
|
121
|
+
tooltipProps: tooltipProps
|
|
117
122
|
}), valuesOnTop && /*#__PURE__*/_react.default.createElement("text", {
|
|
118
123
|
className: classes.onTopBarLabel,
|
|
119
124
|
textAnchor: "middle",
|
|
@@ -13,11 +13,12 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
|
|
|
13
13
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
14
|
const Legend = _ref => {
|
|
15
15
|
let {
|
|
16
|
+
classes,
|
|
16
17
|
data,
|
|
17
18
|
legend,
|
|
18
19
|
showPercentage,
|
|
19
|
-
|
|
20
|
-
|
|
20
|
+
showValue = false,
|
|
21
|
+
totalConsumption
|
|
21
22
|
} = _ref;
|
|
22
23
|
const {
|
|
23
24
|
indicatorWidth = _contants.DEFAULT_INDICATOR_SIZE,
|
|
@@ -31,6 +32,20 @@ const Legend = _ref => {
|
|
|
31
32
|
legendsContainer,
|
|
32
33
|
legendItem
|
|
33
34
|
} = classes;
|
|
35
|
+
const legendItemRender = (label, color, value) => /*#__PURE__*/_react.default.createElement("div", {
|
|
36
|
+
className: "".concat(_stylesModule.default.item, " ").concat(legendItem)
|
|
37
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
38
|
+
className: "".concat(_stylesModule.default.indicator, " ").concat(_stylesModule.default[type]),
|
|
39
|
+
style: {
|
|
40
|
+
backgroundColor: color,
|
|
41
|
+
width: indicatorWidth,
|
|
42
|
+
height: indicatorHeight
|
|
43
|
+
}
|
|
44
|
+
}), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
45
|
+
className: legendLabel
|
|
46
|
+
}, label), showPercentage && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
47
|
+
className: legendValueLabel
|
|
48
|
+
}, "".concat((value / totalConsumption * 100).toFixed(2), "%"))));
|
|
34
49
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
35
50
|
className: "".concat(_stylesModule.default.container, " ").concat(_stylesModule.default[position], " ").concat(legendsContainer)
|
|
36
51
|
}, data.map(_ref2 => {
|
|
@@ -39,35 +54,29 @@ const Legend = _ref => {
|
|
|
39
54
|
color,
|
|
40
55
|
value
|
|
41
56
|
} = _ref2;
|
|
42
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
43
|
-
className:
|
|
44
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
45
|
-
className:
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
height: indicatorHeight
|
|
50
|
-
}
|
|
51
|
-
}), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
52
|
-
className: legendLabel
|
|
53
|
-
}, label), showPercentage && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
54
|
-
className: legendValueLabel
|
|
55
|
-
}, "".concat((value / totalConsumption * 100).toFixed(2), "%"))));
|
|
57
|
+
return showValue ? /*#__PURE__*/_react.default.createElement("div", {
|
|
58
|
+
className: _stylesModule.default.innerContainer
|
|
59
|
+
}, legendItemRender(label, color, value), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
60
|
+
className: legendValueLabel,
|
|
61
|
+
variant: "title3",
|
|
62
|
+
weight: "medium"
|
|
63
|
+
}, value)) : legendItemRender(label, color, value);
|
|
56
64
|
}));
|
|
57
65
|
};
|
|
58
66
|
Legend.propTypes = {
|
|
67
|
+
classes: _commonTypes.classesType,
|
|
59
68
|
data: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
|
|
60
69
|
label: _propTypes.string,
|
|
61
70
|
color: _propTypes.string
|
|
62
71
|
})),
|
|
63
72
|
legend: (0, _propTypes.shape)({
|
|
64
|
-
indicatorWidth: _propTypes.number,
|
|
65
73
|
indicatorHeight: _propTypes.number,
|
|
66
|
-
|
|
67
|
-
position: _propTypes.string
|
|
74
|
+
indicatorWidth: _propTypes.number,
|
|
75
|
+
position: _propTypes.string,
|
|
76
|
+
type: _propTypes.string
|
|
68
77
|
}),
|
|
69
78
|
showPercentage: _propTypes.bool,
|
|
70
|
-
|
|
71
|
-
|
|
79
|
+
showValue: _propTypes.bool,
|
|
80
|
+
totalConsumption: _propTypes.number
|
|
72
81
|
};
|
|
73
82
|
var _default = exports.default = Legend;
|
|
@@ -38,6 +38,7 @@ const UTPieChart = _ref => {
|
|
|
38
38
|
outlined,
|
|
39
39
|
paddingAngle,
|
|
40
40
|
showPercentageInLegend,
|
|
41
|
+
showValueInLegend,
|
|
41
42
|
transition,
|
|
42
43
|
width,
|
|
43
44
|
withLabels,
|
|
@@ -94,6 +95,7 @@ const UTPieChart = _ref => {
|
|
|
94
95
|
data: data,
|
|
95
96
|
legend: legend,
|
|
96
97
|
showPercentage: showPercentageInLegend,
|
|
98
|
+
showValue: showValueInLegend,
|
|
97
99
|
totalConsumption: totalSum
|
|
98
100
|
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
99
101
|
className: "".concat(_stylesModule.default["".concat(position.split('-')[0], "PieWrapper")], " ").concat(classNames.chartContainer),
|
|
@@ -157,6 +159,7 @@ UTPieChart.propTypes = {
|
|
|
157
159
|
outlined: _propTypes.bool,
|
|
158
160
|
paddingAngle: _propTypes.number,
|
|
159
161
|
showPercentageInLegend: _propTypes.bool,
|
|
162
|
+
showValueInLegend: _propTypes.bool,
|
|
160
163
|
transition: _propTypes.string,
|
|
161
164
|
width: _propTypes.number,
|
|
162
165
|
withLabels: _propTypes.bool,
|
package/dist/index.js
CHANGED
|
@@ -135,6 +135,18 @@ Object.defineProperty(exports, "UTCuit", {
|
|
|
135
135
|
return _UTCuit.default;
|
|
136
136
|
}
|
|
137
137
|
});
|
|
138
|
+
Object.defineProperty(exports, "UTDataCategory", {
|
|
139
|
+
enumerable: true,
|
|
140
|
+
get: function () {
|
|
141
|
+
return _UTDataCategory.default;
|
|
142
|
+
}
|
|
143
|
+
});
|
|
144
|
+
Object.defineProperty(exports, "UTDataElement", {
|
|
145
|
+
enumerable: true,
|
|
146
|
+
get: function () {
|
|
147
|
+
return _UTDataElement.default;
|
|
148
|
+
}
|
|
149
|
+
});
|
|
138
150
|
Object.defineProperty(exports, "UTDatePicker", {
|
|
139
151
|
enumerable: true,
|
|
140
152
|
get: function () {
|
|
@@ -489,8 +501,11 @@ var _UTCheckList = _interopRequireDefault(require("./components/UTCheckList"));
|
|
|
489
501
|
var _UTConsumptionBar = _interopRequireDefault(require("./components/UTConsumptionBar"));
|
|
490
502
|
var _UTCreditCard = _interopRequireDefault(require("./components/UTCreditCard"));
|
|
491
503
|
var _UTCuit = _interopRequireDefault(require("./components/UTCuit"));
|
|
504
|
+
var _UTDataCategory = _interopRequireDefault(require("./components/UTDataCategory"));
|
|
505
|
+
var _UTDataElement = _interopRequireDefault(require("./components/UTDataElement"));
|
|
492
506
|
var _UTDatePicker = _interopRequireDefault(require("./components/UTDatePicker"));
|
|
493
507
|
var _UTDialog = _interopRequireDefault(require("./components/UTDialog"));
|
|
508
|
+
var _UTDocumentWizard = _interopRequireDefault(require("./components/UTDocumentWizard"));
|
|
494
509
|
var _UTDotMenu = _interopRequireDefault(require("./components/UTDotMenu"));
|
|
495
510
|
var _UTEmojiPicker = _interopRequireDefault(require("./components/UTEmojiPicker"));
|
|
496
511
|
var _UTExternalLink = _interopRequireDefault(require("./components/UTExternalLink"));
|
|
@@ -541,5 +556,4 @@ var _UTVirtualKeyboard = _interopRequireDefault(require("./components/UTVirtualK
|
|
|
541
556
|
var _UTWorkflowContainer = _interopRequireDefault(require("./components/UTWorkflowContainer"));
|
|
542
557
|
var _WithLoading = _interopRequireDefault(require("./components/WithLoading"));
|
|
543
558
|
var _WithTouch = _interopRequireDefault(require("./components/WithTouch"));
|
|
544
|
-
var _UTDocumentWizard = _interopRequireDefault(require("./components/UTDocumentWizard"));
|
|
545
559
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|