@widergy/energy-ui 3.71.0 → 3.71.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [3.71.1](https://github.com/widergy/energy-ui/compare/v3.71.0...v3.71.1) (2025-05-05)
+
+
+### Bug Fixes
+
+* visual fixes on chart legends ([#612](https://github.com/widergy/energy-ui/issues/612)) ([657129a](https://github.com/widergy/energy-ui/commit/657129a7a743dcc27953de2056e1d15adde2ec51))
+
 # [3.71.0](https://github.com/widergy/energy-ui/compare/v3.70.0...v3.71.0) (2025-05-05)
 
 

package/dist/components/UTBarChart/components/Legend/constants.js

@@ -3,21 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.displayOptions = exports.MODAL_KEY = exports.BLOCK_KEY = void 0;
-var _reactPerfectScrollbar = _interopRequireDefault(require("react-perfect-scrollbar"));
-var _UTDialog = _interopRequireDefault(require("../../../UTDialog"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+exports.MODAL_KEY = exports.BLOCK_KEY = void 0;
 const BLOCK_KEY = exports.BLOCK_KEY = 'block';
-const MODAL_KEY = exports.MODAL_KEY = 'modal';
-const options = {
-  [BLOCK_KEY]: {
-    Component: _reactPerfectScrollbar.default,
-    withButton: false
-  },
-  [MODAL_KEY]: {
-    Component: _UTDialog.default,
-    withButton: true
-  }
-};
-const displayOptions = displayAs => options[displayAs] || options[BLOCK_KEY];
-exports.displayOptions = displayOptions;
+const MODAL_KEY = exports.MODAL_KEY = 'modal';

package/dist/components/UTBarChart/components/Legend/index.js

@@ -44,10 +44,6 @@ const Legend = _ref => {
     linear: flatLinearData = [],
     levels = []
   } = flatData || {};
-  const {
-    Component: Wrapper,
-    withButton
-  } = (0, _constants.displayOptions)(displayAs);
   const getReferencesToShow = () => {
     let referencesToShow = new Set();
     flatBarData.forEach(item => barReferences.forEach(_ref2 => {
@@ -97,23 +93,11 @@ const Legend = _ref => {
   };
   const referencesToShow = getReferencesToShow(flatData);
   const hasReferences = !(0, _array.isEmpty)(referencesToShow);
-  const wrapperProps = displayAs === _constants.MODAL_KEY ? {
-    acceptButton: {
-      onClick: () => setShowLegend(false),
-      text: referencesModalButton || ''
-    },
-    isOpen: showLegend,
-    onRequestClose: () => setShowLegend(false),
-    title: referencesModalTitle,
-    withCloseButton: true
-  } : {
-    className: _stylesModule.default.scrollbar
-  };
   return /*#__PURE__*/_react.default.createElement("div", {
     style: style
   }, title && /*#__PURE__*/_react.default.createElement(_.UTLabel, {
     className: "".concat(_stylesModule.default.title, " ").concat(classes.title)
-  }, title), withButton && /*#__PURE__*/_react.default.createElement(_.UTButton, _extends({
+  }, title), displayAs === _constants.MODAL_KEY ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_.UTButton, _extends({
     classNames: {
       icon: classes.showLegendIcon,
       root: "".concat(_stylesModule.default.button, " ").concat(classes.showLegendButton),
@@ -122,14 +106,25 @@ const Legend = _ref => {
     disabled: !hasReferences,
     Icon: _InfoOutlined.default,
     onClick: () => setShowLegend(true)
-  }, buttonProps), showReferencesLabel), /*#__PURE__*/_react.default.createElement(Wrapper, wrapperProps, referencesToShow.map(row => /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default["row".concat(displayAs)]
-  }, row.map(item => referenceRenderer(item))))));
+  }, buttonProps), showReferencesLabel), /*#__PURE__*/_react.default.createElement(_.UTDialog, {
+    acceptButton: {
+      onClick: () => setShowLegend(false),
+      text: referencesModalButton || ''
+    },
+    isOpen: showLegend,
+    onRequestClose: () => setShowLegend(false),
+    title: referencesModalTitle,
+    withCloseButton: true
+  }, referencesToShow.map(row => /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.rowmodal
+  }, row.map(item => referenceRenderer(item)))))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.referencesContainer
+  }, referencesToShow.map(row => row.map(item => referenceRenderer(item)))));
 };
 Legend.propTypes = {
   buttonProps: _types.buttonPropsTypes,
   classes: _commonTypes.classesType,
-  displayAs: _propTypes.string,
+  displayAs: (0, _propTypes.oneOf)([_constants.BLOCK_KEY, _constants.MODAL_KEY]),
   flatData: (0, _propTypes.shape)({
     bar: (0, _propTypes.arrayOf)(_types.barType),
     linear: (0, _propTypes.arrayOf)(_types.linearType),

package/dist/components/UTBarChart/components/Legend/styles.module.scss

@@ -3,17 +3,16 @@
   width: fit-content;
 }
 
-.scrollbar {
+.referencesContainer {
+  align-items: center;
   display: flex;
+  flex-wrap: wrap;
+  grid-gap: 16px;
 }
 
 .itemblock {
   align-items: center;
   display: flex;
-
-  & + div {
-    margin-left: 16px;
-  }
 }
 
 .itemmodal {
@@ -21,7 +20,7 @@
   display: flex;
 
   & + div {
-    margin-top: 15px;
+    margin-top: 16px;
   }
 }
 
@@ -29,21 +28,12 @@
   white-space: nowrap;
 }
 
-.rowblock {
-  align-items: center;
-  display: flex;
-
-  & + div {
-    margin-left: 15px;
-  }
-}
-
 .rowmodal {
   display: flex;
   flex-direction: column;
 
   & + div {
-    margin-top: 15px;
+    margin-top: 16px;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.71.0",
+  "version": "3.71.1",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",