@widergy/energy-ui 3.89.1 → 3.91.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.91.0](https://github.com/widergy/energy-ui/compare/v3.90.0...v3.91.0) (2025-07-22)
+
+
+### Features
+
+* [UGEE-378] UTBarChart without margin left ([#650](https://github.com/widergy/energy-ui/issues/650)) ([1b97cde](https://github.com/widergy/energy-ui/commit/1b97cde779c06f7354c8b70564f7305b3604394e))
+
+# [3.90.0](https://github.com/widergy/energy-ui/compare/v3.89.1...v3.90.0) (2025-07-21)
+
+
+### Features
+
+* piechart feature ([#613](https://github.com/widergy/energy-ui/issues/613)) ([3d7b0ee](https://github.com/widergy/energy-ui/commit/3d7b0ee20cec9f9a3255e5e0e3d2c9505e908847))
+
 ## [3.89.1](https://github.com/widergy/energy-ui/compare/v3.89.0...v3.89.1) (2025-07-17)
 
 

package/dist/components/UTBarChart/components/Bars/components/Bar/components/Rect/index.js

@@ -10,17 +10,19 @@ var d3 = _interopRequireWildcard(require("d3"));
 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); }
 const Rect = _ref => {
   let {
-    width,
-    height,
-    color,
-    x,
-    y,
     borderRadius,
+    className,
+    color,
+    gradient,
+    height,
     id,
+    index,
     stroke,
     strokeWidth,
-    className,
-    transitionDuration
+    transitionDuration,
+    width,
+    x,
+    y
   } = _ref;
   const verticalStroke = -height + borderRadius || 0;
   const horizontalStroke = width - 2 * borderRadius || 0;
@@ -29,7 +31,7 @@ const Rect = _ref => {
   (0, _react.useEffect)(() => {
     d3.select("#bar-".concat(id)).attr('height', 0).attr('y', positiveY).transition().duration(transitionDuration).attr('height', positiveHeight).attr('y', positiveY - positiveHeight);
   }, [positiveHeight, positiveY]);
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("clipPath", {
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, gradient && /*#__PURE__*/_react.default.createElement("defs", null, gradient), /*#__PURE__*/_react.default.createElement("clipPath", {
     id: "clip-bar-".concat(id)
   }, /*#__PURE__*/_react.default.createElement("path", {
     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 => {
     clipPath: "url(#clip-bar-".concat(id, ")"),
     x: x,
     width: width,
-    fill: color,
+    fill: gradient ? "url(#gradient-".concat(index, ")") : color,
     stroke: stroke,
     strokeWidth: strokeWidth
   }));
 };
 Rect.propTypes = {
-  width: _propTypes.number,
-  height: _propTypes.number,
-  color: _propTypes.string,
-  x: _propTypes.number,
-  y: _propTypes.number,
   borderRadius: _propTypes.number,
+  className: _propTypes.string,
+  color: _propTypes.string,
+  gradient: _propTypes.string,
+  height: _propTypes.number,
   id: _propTypes.string,
+  index: _propTypes.number,
   stroke: _propTypes.string,
   strokeWidth: _propTypes.number,
-  className: _propTypes.string,
-  transitionDuration: _propTypes.number
+  transitionDuration: _propTypes.number,
+  width: _propTypes.number,
+  x: _propTypes.number,
+  y: _propTypes.number
 };
 var _default = exports.default = Rect;

package/dist/components/UTBarChart/components/Bars/components/Bar/index.js

@@ -13,6 +13,7 @@ var _Rect = _interopRequireDefault(require("./components/Rect"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 var _constants = require("./constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
 const {
   barChart
 } = _testIds.TEST_IDS;
@@ -21,6 +22,7 @@ const Bar = _ref => {
     width,
     height,
     color,
+    gradient,
     x,
     y,
     borderRadius,
@@ -33,22 +35,25 @@ const Bar = _ref => {
     stroke,
     strokeWidth,
     tooltipClassName,
-    transitionDuration
+    transitionDuration,
+    tooltipProps
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+  return /*#__PURE__*/_react.default.createElement(_UTTooltip.default, _extends({
     className: tooltipClassName,
     content: tooltipContent,
     dataTestId: "".concat(barChart.bar.tooltip).concat(id),
     interactive: false,
     stringContentClassName: _stylesModule.default.tooltip
-  }, /*#__PURE__*/_react.default.createElement("g", {
+  }, tooltipProps), /*#__PURE__*/_react.default.createElement("g", {
     className: "".concat(clickable && _stylesModule.default.clickable, " ").concat(_stylesModule.default.rect),
     onClick: clickable ? () => onClick(index, data) : _constants.NO_OP
   }, /*#__PURE__*/_react.default.createElement(_Rect.default, {
+    index: index,
     className: "".concat(clickable && _stylesModule.default.clickable, " ").concat(_stylesModule.default.rect),
     width: width,
     height: height,
     color: color,
+    gradient: gradient,
     x: x,
     y: y,
     borderRadius: height > borderRadius ? borderRadius : height,
@@ -74,6 +79,8 @@ Bar.propTypes = {
   stroke: _propTypes.string,
   strokeWidth: _propTypes.number,
   tooltipClassName: _propTypes.string,
-  transitionDuration: _propTypes.number
+  transitionDuration: _propTypes.number,
+  gradient: _propTypes.string,
+  tooltipProps: _propTypes.object
 };
 var _default = exports.default = Bar;

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

@@ -75,7 +75,9 @@ const Bars = _ref => {
       stroke,
       strokeWidth,
       tooltipContent,
-      value
+      value,
+      gradient = null,
+      tooltipProps = {}
     } = bar;
     const selected = selectable && selectedIndex === index && selectedPage === currentPage;
     const xInitialPosition = (fullSizeBars ? graphXStart : xAxis(index)) + xSubAxis(group);
@@ -95,7 +97,8 @@ const Bars = _ref => {
       y: graphYStart - offset,
       borderRadius: removeBorderRadius ? 0 : barBorderRadius,
       data: bar,
-      id: "".concat(_constants.HIGHLIGHT_KEY, "-").concat(index, "-").concat(group, "-").concat(stackIndex)
+      id: "".concat(_constants.HIGHLIGHT_KEY, "-").concat(index, "-").concat(group, "-").concat(stackIndex),
+      gradient: gradient
     }), /*#__PURE__*/_react.default.createElement(_Bar.default, {
       index: index,
       data: data,
@@ -105,6 +108,7 @@ const Bars = _ref => {
       width: barWidth,
       height: graphYStart - yInitialPosition,
       color: color,
+      gradient: gradient,
       x: xInitialPosition,
       y: graphYStart - offset,
       borderRadius: removeBorderRadius ? 0 : barBorderRadius,
@@ -113,7 +117,8 @@ const Bars = _ref => {
       id: "".concat(_constants.BAR_KEY, "-").concat(index, "-").concat(group, "-").concat(stackIndex),
       stroke: stroke,
       strokeWidth: strokeWidth,
-      transitionDuration: transitionDuration
+      transitionDuration: transitionDuration,
+      tooltipProps: tooltipProps
     }), valuesOnTop && /*#__PURE__*/_react.default.createElement("text", {
       className: classes.onTopBarLabel,
       textAnchor: "middle",

package/dist/components/UTBarChart/hooks/use-dynamic-margins.js

@@ -14,7 +14,8 @@ const useDynamicMargins = (center, options) => {
   const [marginTop, setMarginTop] = (0, _react.useState)(0);
   const {
     lateralMargin = 0,
-    verticalMargin
+    verticalMargin,
+    withoutLateralMargin
   } = options;
   const marginLeftRef = (0, _react.useRef)();
   const marginRightRef = (0, _react.useRef)();
@@ -22,8 +23,8 @@ const useDynamicMargins = (center, options) => {
   const marginTopRef = (0, _react.useRef)();
   (0, _react.useEffect)(() => {
     var _marginLeftRef$curren, _marginRightRef$curre, _marginBottomRef$curr, _marginTopRef$current;
-    setMarginLeft(Math.ceil(Math.max(lateralMargin, (_marginLeftRef$curren = marginLeftRef.current) === null || _marginLeftRef$curren === void 0 ? void 0 : _marginLeftRef$curren.getBoundingClientRect().width)) || LATERAL_DEFAULT_MARGIN);
-    setMarginRight(Math.ceil(lateralMargin || ((_marginRightRef$curre = marginRightRef.current) === null || _marginRightRef$curre === void 0 ? void 0 : _marginRightRef$curre.getBoundingClientRect().width)) || LATERAL_DEFAULT_MARGIN);
+    setMarginLeft(Math.ceil(Math.max(lateralMargin, (_marginLeftRef$curren = marginLeftRef.current) === null || _marginLeftRef$curren === void 0 ? void 0 : _marginLeftRef$curren.getBoundingClientRect().width)) || (withoutLateralMargin ? 0 : LATERAL_DEFAULT_MARGIN));
+    setMarginRight(Math.ceil(lateralMargin || ((_marginRightRef$curre = marginRightRef.current) === null || _marginRightRef$curre === void 0 ? void 0 : _marginRightRef$curre.getBoundingClientRect().width)) || (withoutLateralMargin ? 0 : LATERAL_DEFAULT_MARGIN));
     setMarginBottom(Math.ceil(verticalMargin || ((_marginBottomRef$curr = marginBottomRef.current) === null || _marginBottomRef$curr === void 0 ? void 0 : _marginBottomRef$curr.getBoundingClientRect().height)) || VERTICAL_DEFAULT_MARGIN);
     setMarginTop(Math.ceil(verticalMargin || ((_marginTopRef$current = marginTopRef.current) === null || _marginTopRef$current === void 0 ? void 0 : _marginTopRef$current.getBoundingClientRect().height)) || VERTICAL_DEFAULT_MARGIN);
   }, [marginLeftRef.current, marginRightRef.current, marginBottomRef.current, marginTopRef.current]);

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

@@ -13,11 +13,12 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Legend = _ref => {
   let {
+    classes,
     data,
     legend,
     showPercentage,
-    totalConsumption,
-    classes
+    showValue = false,
+    totalConsumption
   } = _ref;
   const {
     indicatorWidth = _contants.DEFAULT_INDICATOR_SIZE,
@@ -31,6 +32,20 @@ const Legend = _ref => {
     legendsContainer,
     legendItem
   } = classes;
+  const legendItemRender = (label, color, value) => /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.item, " ").concat(legendItem)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.indicator, " ").concat(_stylesModule.default[type]),
+    style: {
+      backgroundColor: color,
+      width: indicatorWidth,
+      height: indicatorHeight
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: legendLabel
+  }, label), showPercentage && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: legendValueLabel
+  }, "".concat((value / totalConsumption * 100).toFixed(2), "%"))));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.container, " ").concat(_stylesModule.default[position], " ").concat(legendsContainer)
   }, data.map(_ref2 => {
@@ -39,35 +54,29 @@ const Legend = _ref => {
       color,
       value
     } = _ref2;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(_stylesModule.default.item, " ").concat(legendItem)
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(_stylesModule.default.indicator, " ").concat(_stylesModule.default[type]),
-      style: {
-        backgroundColor: color,
-        width: indicatorWidth,
-        height: indicatorHeight
-      }
-    }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-      className: legendLabel
-    }, label), showPercentage && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-      className: legendValueLabel
-    }, "".concat((value / totalConsumption * 100).toFixed(2), "%"))));
+    return showValue ? /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.innerContainer
+    }, legendItemRender(label, color, value), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      className: legendValueLabel,
+      variant: "title3",
+      weight: "medium"
+    }, value)) : legendItemRender(label, color, value);
   }));
 };
 Legend.propTypes = {
+  classes: _commonTypes.classesType,
   data: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
     label: _propTypes.string,
     color: _propTypes.string
   })),
   legend: (0, _propTypes.shape)({
-    indicatorWidth: _propTypes.number,
     indicatorHeight: _propTypes.number,
-    type: _propTypes.string,
-    position: _propTypes.string
+    indicatorWidth: _propTypes.number,
+    position: _propTypes.string,
+    type: _propTypes.string
   }),
   showPercentage: _propTypes.bool,
-  totalConsumption: _propTypes.number,
-  classes: _commonTypes.classesType
+  showValue: _propTypes.bool,
+  totalConsumption: _propTypes.number
 };
 var _default = exports.default = Legend;

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

@@ -24,3 +24,11 @@
 .circle {
   border-radius: 50%;
 }
+
+.innerContainer {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 24px;
+  justify-content: center;
+}

package/dist/components/UTPieChart/index.js

@@ -38,6 +38,7 @@ const UTPieChart = _ref => {
     outlined,
     paddingAngle,
     showPercentageInLegend,
+    showValueInLegend,
     transition,
     width,
     withLabels,
@@ -94,6 +95,7 @@ const UTPieChart = _ref => {
     data: data,
     legend: legend,
     showPercentage: showPercentageInLegend,
+    showValue: showValueInLegend,
     totalConsumption: totalSum
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default["".concat(position.split('-')[0], "PieWrapper")], " ").concat(classNames.chartContainer),
@@ -157,6 +159,7 @@ UTPieChart.propTypes = {
   outlined: _propTypes.bool,
   paddingAngle: _propTypes.number,
   showPercentageInLegend: _propTypes.bool,
+  showValueInLegend: _propTypes.bool,
   transition: _propTypes.string,
   width: _propTypes.number,
   withLabels: _propTypes.bool,

package/package.json

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