@widergy/energy-ui 3.99.0 → 3.100.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
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
# [3.100.0](https://github.com/widergy/energy-ui/compare/v3.99.1...v3.100.0) (2025-08-20)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* [UGEE-416] fix chart ([#668](https://github.com/widergy/energy-ui/issues/668)) ([3176b0d](https://github.com/widergy/energy-ui/commit/3176b0dda1784d138f6bfc5de35cc73d62d1e97d))
|
|
7
|
+
|
|
8
|
+
## [3.99.1](https://github.com/widergy/energy-ui/compare/v3.99.0...v3.99.1) (2025-08-18)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* [SFPE-497] enable label theme font sizes ([#666](https://github.com/widergy/energy-ui/issues/666)) ([aa7b44b](https://github.com/widergy/energy-ui/commit/aa7b44b270018c3f5fa45f7b543f2a45cf2ee058))
|
|
14
|
+
|
|
1
15
|
# [3.99.0](https://github.com/widergy/energy-ui/compare/v3.98.3...v3.99.0) (2025-08-13)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -33,7 +33,7 @@ const getMarkers = (data, xAxis, yAxis, barWidth, color, markersConfig) => data.
|
|
|
33
33
|
const x = xAxis(xCoordinate) + barWidth / 2;
|
|
34
34
|
const y = yAxis(value);
|
|
35
35
|
const size = (markersConfig.size || _constants.DEFAULT_MARKER_SIZE) / 2;
|
|
36
|
-
if (
|
|
36
|
+
if (value === undefined || value === null) {
|
|
37
37
|
return null;
|
|
38
38
|
}
|
|
39
39
|
return markersConfig.type === _constants.MARKER_TYPES.DOT && /*#__PURE__*/_react.default.createElement("svg", {
|
|
@@ -103,11 +103,15 @@ const UTBarChart = _ref => {
|
|
|
103
103
|
data,
|
|
104
104
|
...config
|
|
105
105
|
} = _ref2;
|
|
106
|
+
const filteredData = xAxisDefinition && xAxisDefinition.length > 0 ? data.filter(point => {
|
|
107
|
+
const maxIndex = xAxisDefinition.length - 1;
|
|
108
|
+
return point.xCoordinate >= 0 && point.xCoordinate <= maxIndex;
|
|
109
|
+
}) : data;
|
|
106
110
|
return {
|
|
107
|
-
data: pagination ? (0, _utils.getFormattedLinearData)(
|
|
111
|
+
data: pagination ? (0, _utils.getFormattedLinearData)(filteredData, currentPage, pagination) : filteredData,
|
|
108
112
|
...config
|
|
109
113
|
};
|
|
110
|
-
}), [pagination, linearData, currentPage]);
|
|
114
|
+
}), [pagination, linearData, currentPage, xAxisDefinition]);
|
|
111
115
|
const flattenedAndReducedBarData = (0, _utils.flattenAndReduceBarData)(barData);
|
|
112
116
|
const {
|
|
113
117
|
flatBarData,
|
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.retrieveStyle = exports.retrieveProps = exports.getFontStyles = void 0;
|
|
7
|
+
var _merge = _interopRequireDefault(require("lodash/merge"));
|
|
7
8
|
var _Palette = require("../../constants/Palette");
|
|
8
9
|
var _componentUtils = require("../../utils/componentUtils");
|
|
9
10
|
var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
|
|
@@ -22,17 +23,19 @@ const linkColor = (theme, colorTheme) => {
|
|
|
22
23
|
return color;
|
|
23
24
|
};
|
|
24
25
|
const getFontStyles = _ref => {
|
|
25
|
-
var _theme$Fonts;
|
|
26
|
+
var _theme$UTLabel, _theme$UTLabel2, _theme$Fonts;
|
|
26
27
|
let {
|
|
27
28
|
theme,
|
|
28
29
|
variant,
|
|
29
30
|
weight
|
|
30
31
|
} = _ref;
|
|
32
|
+
const variantsSizes = (0, _merge.default)({}, _constants.VARIANTS_SIZES, theme === null || theme === void 0 || (_theme$UTLabel = theme.UTLabel) === null || _theme$UTLabel === void 0 ? void 0 : _theme$UTLabel.variantsSizes);
|
|
33
|
+
const variantsLineHeights = (0, _merge.default)({}, _constants.VARIANTS_LINE_HEIGHT, theme === null || theme === void 0 || (_theme$UTLabel2 = theme.UTLabel) === null || _theme$UTLabel2 === void 0 ? void 0 : _theme$UTLabel2.variantsLineHeights);
|
|
31
34
|
return {
|
|
32
35
|
fontFamily: theme === null || theme === void 0 || (_theme$Fonts = theme.Fonts) === null || _theme$Fonts === void 0 ? void 0 : _theme$Fonts.fontFamily,
|
|
33
|
-
fontSize:
|
|
36
|
+
fontSize: variantsSizes[variant] || variantsSizes[_constants.DEFAULT_PROPS.variant],
|
|
34
37
|
fontWeight: _constants.WEIGHTS[weight] || _constants.WEIGHTS[_constants.DEFAULT_PROPS.weight],
|
|
35
|
-
lineHeight:
|
|
38
|
+
lineHeight: variantsLineHeights[variant] || variantsLineHeights[_constants.DEFAULT_PROPS.variant]
|
|
36
39
|
};
|
|
37
40
|
};
|
|
38
41
|
exports.getFontStyles = getFontStyles;
|
|
@@ -4,43 +4,84 @@ The purpose of this component, as its name indicates, is to communicate a messag
|
|
|
4
4
|
|
|
5
5
|
## Props
|
|
6
6
|
|
|
7
|
-
| Name
|
|
8
|
-
|
|
|
9
|
-
| children
|
|
10
|
-
| classes
|
|
11
|
-
| colorTheme
|
|
12
|
-
| description
|
|
13
|
-
| descriptionProps
|
|
14
|
-
| helpText
|
|
15
|
-
| helpTextProps
|
|
16
|
-
| icon
|
|
17
|
-
| iconProps
|
|
18
|
-
| HeaderComponent
|
|
19
|
-
| loading
|
|
20
|
-
| primaryAction
|
|
21
|
-
| primaryActionProps
|
|
22
|
-
| primaryActionText
|
|
23
|
-
| secondaryAction
|
|
24
|
-
| secondaryActionProps
|
|
25
|
-
| secondaryActionText
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
7
|
+
| Name | Type | Default | Description |
|
|
8
|
+
| -------------------- | ------- | -------------- | --------------------------------------------------------------------------- |
|
|
9
|
+
| children | element | | The content to be rendered inside the component. |
|
|
10
|
+
| classes | object | | Custom CSS classes for styling the component. |
|
|
11
|
+
| colorTheme | string | default | Defines the color theme for the component. |
|
|
12
|
+
| description | string | | Description text providing additional context or information. |
|
|
13
|
+
| descriptionProps | object | | Props to be applied to the description UTLabel. |
|
|
14
|
+
| helpText | string | | Help text displayed to guide the user. |
|
|
15
|
+
| helpTextProps | object | | Props to be applied to the help text UTLabel. |
|
|
16
|
+
| icon | string | IconInfoCircle | Icon to be displayed in the header. |
|
|
17
|
+
| iconProps | object | {} | Props to be applied to the UTIcon. |
|
|
18
|
+
| HeaderComponent | element | | Component to be displayed in the header, replacing the icon. |
|
|
19
|
+
| loading | bool | false | Indicates whether the component is in a loading state. Replaces the header. |
|
|
20
|
+
| primaryAction | func | | Callback function for the primary action. |
|
|
21
|
+
| primaryActionProps | object | | Props to be applied to the primary action UTButton. |
|
|
22
|
+
| primaryActionText | string | | Text for the primary action UTButton. |
|
|
23
|
+
| secondaryAction | func | | Callback function for the secondary action. |
|
|
24
|
+
| secondaryActionProps | object | | Props to be applied to the secondary action UTButton. |
|
|
25
|
+
| secondaryActionText | string | | Text for the secondary action UTButton. |
|
|
26
|
+
| showBanner | bool | true | Indicates whether to display the banner background styling. |
|
|
27
|
+
| showHeader | bool | true | Indicates whether to display the header section of the component. |
|
|
28
|
+
| title | string | | Title for the component, providing context to the user. |
|
|
29
|
+
| titleProps | object | | Props to be applied to the title UTLabel. |
|
|
30
|
+
|
|
31
|
+
## Usage
|
|
32
|
+
|
|
33
|
+
```jsx
|
|
34
|
+
import { UTStatusMessage } from '@energy/ui';
|
|
35
|
+
|
|
36
|
+
// Basic usage
|
|
37
|
+
<UTStatusMessage
|
|
38
|
+
title="Operation completed successfully"
|
|
39
|
+
description="Your changes have been saved and are now active."
|
|
40
|
+
colorTheme="success"
|
|
41
|
+
/>
|
|
42
|
+
|
|
43
|
+
// With actions
|
|
44
|
+
<UTStatusMessage
|
|
45
|
+
title="Action required"
|
|
46
|
+
description="Please review and confirm your selection."
|
|
47
|
+
primaryAction={() => handleConfirm()}
|
|
48
|
+
primaryActionText="Confirm"
|
|
49
|
+
secondaryAction={() => handleCancel()}
|
|
50
|
+
secondaryActionText="Cancel"
|
|
51
|
+
colorTheme="warning"
|
|
52
|
+
/>
|
|
53
|
+
|
|
54
|
+
// With custom header component
|
|
55
|
+
<UTStatusMessage
|
|
56
|
+
title="Custom header"
|
|
57
|
+
HeaderComponent={() => <CustomIcon />}
|
|
58
|
+
description="This uses a custom header component instead of the default icon."
|
|
59
|
+
/>
|
|
60
|
+
|
|
61
|
+
// Loading state
|
|
62
|
+
<UTStatusMessage
|
|
63
|
+
loading={true}
|
|
64
|
+
title="Processing your request"
|
|
65
|
+
description="Please wait while we complete the operation."
|
|
66
|
+
/>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Color Themes
|
|
70
|
+
|
|
71
|
+
The `colorTheme` prop accepts the following values:
|
|
72
|
+
|
|
73
|
+
| Theme | Description |
|
|
74
|
+
| ----------- | ----------------------------- |
|
|
75
|
+
| `accent` | Accent color theme |
|
|
76
|
+
| `default` | Default color theme (default) |
|
|
77
|
+
| `error` | Error state color theme |
|
|
78
|
+
| `gradient` | Gradient color theme |
|
|
79
|
+
| `gray` | Gray color theme |
|
|
80
|
+
| `identity1` | Identity color theme 1 |
|
|
81
|
+
| `identity2` | Identity color theme 2 |
|
|
82
|
+
| `identity3` | Identity color theme 3 |
|
|
83
|
+
| `identity4` | Identity color theme 4 |
|
|
84
|
+
| `info` | Information color theme |
|
|
85
|
+
| `negative` | Negative state color theme |
|
|
86
|
+
| `success` | Success state color theme |
|
|
87
|
+
| `warning` | Warning state color theme |
|