@widergy/energy-ui 1.103.0 → 1.104.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.104.0](https://github.com/widergy/energy-ui/compare/v1.103.0...v1.104.0) (2021-12-07)
+
+
+### Features
+
+* bar chart updates ([#243](https://github.com/widergy/energy-ui/issues/243)) ([789aa38](https://github.com/widergy/energy-ui/commit/789aa38de1eb4973cab8e21d274fc8ed295e1793))
+
 # [1.103.0](https://github.com/widergy/energy-ui/compare/v1.102.4...v1.103.0) (2021-12-02)
 
 

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

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = require("prop-types");
 
+var d3 = _interopRequireWildcard(require("d3"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -22,23 +24,31 @@ const Rect = _ref => {
     y,
     borderRadius,
     id,
-    className
+    stroke,
+    strokeWidth,
+    className,
+    transitionDuration
   } = _ref;
-  const rectY = y - height;
   const verticalStroke = -height + borderRadius || 0;
   const horizontalStroke = width - 2 * borderRadius || 0;
+  const positiveHeight = height >= 0 ? height : 0;
+  const positiveY = y >= 0 ? y : 0;
+  (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", {
     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")
   })), /*#__PURE__*/_react.default.createElement("rect", {
+    id: "bar-".concat(id),
     className: className,
     clipPath: "url(#clip-bar-".concat(id, ")"),
     x: x,
-    y: rectY >= 0 ? rectY : 0,
     width: width,
-    height: height,
-    fill: color
+    fill: color,
+    stroke: stroke,
+    strokeWidth: strokeWidth
   }));
 };
 
@@ -50,7 +60,10 @@ Rect.propTypes = {
   y: _propTypes.number,
   borderRadius: _propTypes.number,
   id: _propTypes.string,
-  className: _propTypes.string
+  stroke: _propTypes.string,
+  strokeWidth: _propTypes.number,
+  className: _propTypes.string,
+  transitionDuration: _propTypes.number
 };
 var _default = Rect;
 exports.default = _default;

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

@@ -34,12 +34,17 @@ const Bar = _ref => {
     clickable,
     data,
     id,
-    index
+    index,
+    stroke,
+    strokeWidth,
+    tooltipClassName,
+    transitionDuration
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
     content: tooltipContent,
     interactive: false,
-    stringContentClassName: _stylesModule.default.tooltip
+    stringContentClassName: _stylesModule.default.tooltip,
+    className: tooltipClassName
   }, /*#__PURE__*/_react.default.createElement("g", {
     className: "".concat(clickable && _stylesModule.default.clickable, " ").concat(_stylesModule.default.rect),
     onClick: clickable ? () => onClick(index, data) : _constants.NO_OP
@@ -51,7 +56,10 @@ const Bar = _ref => {
     x: x,
     y: y,
     borderRadius: height > borderRadius ? borderRadius : height,
-    id: id
+    id: id,
+    stroke: stroke,
+    strokeWidth: strokeWidth,
+    transitionDuration: transitionDuration
   })));
 };
 
@@ -67,7 +75,11 @@ Bar.propTypes = {
   clickable: _propTypes.bool,
   data: _types.barType,
   id: _propTypes.string,
-  index: _propTypes.number
+  index: _propTypes.number,
+  stroke: _propTypes.string,
+  strokeWidth: _propTypes.number,
+  tooltipClassName: _propTypes.string,
+  transitionDuration: _propTypes.number
 };
 var _default = Bar;
 exports.default = _default;

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

@@ -11,6 +11,8 @@ var _propTypes = require("prop-types");
 
 var _types = require("../../types");
 
+var _commonTypes = require("../../../../types/commonTypes");
+
 var _Bar = _interopRequireDefault(require("./components/Bar"));
 
 var _constants = require("./constants");
@@ -39,10 +41,11 @@ const Bars = _ref => {
     groupWidth,
     groups,
     selectable,
-    valuesOnTopClassName,
     highlightWidth,
     currentPage,
     valuesOnTop,
+    transitionDuration,
+    classes,
     setCurrentLabel
   } = _ref;
   const [selectedIndex, setSelectedIndex] = (0, _react.useState)(-1);
@@ -77,7 +80,9 @@ const Bars = _ref => {
       color,
       clickable,
       highlighted,
-      highlightColor
+      highlightColor,
+      stroke,
+      strokeWidth
     } = bar;
     const selected = selectable && selectedIndex === index && selectedPage === currentPage;
     const xInitialPosition = xAxis(index) + xSubAxis(group);
@@ -105,9 +110,13 @@ const Bars = _ref => {
       y: graphYStart - offset,
       borderRadius: removeBorderRadius ? 0 : barBorderRadius,
       tooltipContent: tooltipContent,
-      id: "".concat(_constants.BAR_KEY, "-").concat(index, "-").concat(group, "-").concat(stackIndex)
+      tooltipClassName: classes.tooltip,
+      id: "".concat(_constants.BAR_KEY, "-").concat(index, "-").concat(group, "-").concat(stackIndex),
+      stroke: stroke,
+      strokeWidth: strokeWidth,
+      transitionDuration: transitionDuration
     }), valuesOnTop && /*#__PURE__*/_react.default.createElement("text", {
-      className: valuesOnTopClassName,
+      className: classes.onTopBarLabel,
       textAnchor: "middle",
       fill: data.onTopLabelColor,
       x: xInitialPosition + barWidth / 2,
@@ -120,21 +129,27 @@ const Bars = _ref => {
       value,
       values,
       clickable,
-      highlighted
+      highlighted,
+      disableAutoOrder
     } = bar;
     let offset = 0;
     if (value || value === 0 && highlighted) return barRenderer(bar, index, bar);
-    if (values && Array.isArray(values)) return values.sort((_ref2, _ref3) => {
-      let {
-        value: a
-      } = _ref2;
-      let {
-        value: b
-      } = _ref3;
-      return a - b;
-    }).map((stackedBar, stackIndex, stack) => barRenderer({ ...stackedBar,
-      clickable
-    }, index, bar, stackIndex, stackIndex ? offset += graphYStart - yAxis(stack[stackIndex - 1].value) : 0, stackIndex !== stack.length - 1));
+
+    if (values && Array.isArray(values)) {
+      const valuesToRender = disableAutoOrder ? values : values.sort((_ref2, _ref3) => {
+        let {
+          value: a
+        } = _ref2;
+        let {
+          value: b
+        } = _ref3;
+        return a - b;
+      });
+      return valuesToRender.map((stackedBar, stackIndex, stack) => barRenderer({ ...stackedBar,
+        clickable
+      }, index, bar, stackIndex, stackIndex ? offset += graphYStart - yAxis(stack[stackIndex - 1].value) : 0, stackIndex !== stack.length - 1));
+    }
+
     return [];
   }));
 };
@@ -145,7 +160,6 @@ Bars.propTypes = {
   xAxis: _propTypes.func,
   xSubAxis: _propTypes.func,
   yAxis: _propTypes.func,
-  valuesOnTopClassName: _propTypes.string,
   barBorderRadius: _propTypes.number,
   onBarClick: _propTypes.func,
   barWidth: _propTypes.number,
@@ -160,6 +174,8 @@ Bars.propTypes = {
   spacingOptions: (0, _propTypes.objectOf)(_propTypes.number),
   highlightWidth: _propTypes.number,
   currentPage: _propTypes.number,
+  transitionDuration: _propTypes.number,
+  classes: _commonTypes.classesType,
   setCurrentLabel: _propTypes.func
 };
 var _default = Bars;

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

@@ -30,7 +30,8 @@ const LinearPlot = _ref => {
     yAxis,
     xAxis,
     type,
-    color
+    color,
+    customLineProps
   } = _ref;
   const lineGenerator = d3.line().x(_ref2 => {
     let {
@@ -50,7 +51,7 @@ const LinearPlot = _ref => {
   return /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("path", _extends({
     d: generator(data),
     stroke: color
-  }, props)));
+  }, props, customLineProps)));
 };
 
 LinearPlot.propTypes = {
@@ -59,7 +60,12 @@ LinearPlot.propTypes = {
   yAxis: _propTypes.func,
   xAxis: _propTypes.func,
   type: _propTypes.string,
-  color: _propTypes.string
+  color: _propTypes.string,
+  customLineProps: (0, _propTypes.shape)({
+    fill: _propTypes.string,
+    strokeWidth: _propTypes.string,
+    strokeDasharray: _propTypes.string
+  })
 };
 var _default = LinearPlot;
 exports.default = _default;

package/dist/components/UTBarChart/components/LinearPlot/utils.js

@@ -20,6 +20,9 @@ const getLineConfiguration = (type, lineGenerator) => ({
       strokeWidth: '1',
       strokeDasharray: '2,2'
     }
+  },
+  custom: {
+    generator: lineGenerator
   }
 })[type];
 

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

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BUTTONS_SIZE = void 0;
+const BUTTONS_SIZE = 48;
+exports.BUTTONS_SIZE = BUTTONS_SIZE;

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

@@ -13,10 +13,12 @@ var _ChevronRight = _interopRequireDefault(require("@material-ui/icons/ChevronRi
 
 var _propTypes = require("prop-types");
 
-var _ = require("../../../..");
-
 var _commonTypes = require("../../../../types/commonTypes");
 
+var _UTIconButton = _interopRequireDefault(require("../../../UTIconButton"));
+
+var _constants = require("./constants");
+
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -38,25 +40,25 @@ const Pagination = _ref => {
     y = 0,
     height = 0
   } = ((_anchor$current = anchor.current) === null || _anchor$current === void 0 ? void 0 : (_anchor$current$getBo = _anchor$current.getBoundingClientRect) === null || _anchor$current$getBo === void 0 ? void 0 : _anchor$current$getBo.call(_anchor$current)) || {};
-  const top = y - parentYPosition || 0;
+  const top = y - parentYPosition + height / 2 - _constants.BUTTONS_SIZE / 2 || 0;
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       top,
       left: graphXStart - 30,
       width: graphXEnd - graphXStart + 60,
-      height
+      height: _constants.BUTTONS_SIZE
     },
     className: _stylesModule.default.container
-  }, /*#__PURE__*/_react.default.createElement(_.UTButton, {
+  }, /*#__PURE__*/_react.default.createElement(_UTIconButton.default, {
     disabled: !currentPage,
-    className: _stylesModule.default.button,
-    onPress: () => setCurrentPage(currentPage - 1)
+    onClick: () => setCurrentPage(currentPage - 1),
+    className: _stylesModule.default.button
   }, /*#__PURE__*/_react.default.createElement(_ChevronLeft.default, {
     className: currentPage ? classes.paginationButton : classes.paginationButtonDisabled
-  })), /*#__PURE__*/_react.default.createElement(_.UTButton, {
+  })), /*#__PURE__*/_react.default.createElement(_UTIconButton.default, {
     disabled: currentPage + 1 === totalPages,
-    className: _stylesModule.default.button,
-    onPress: () => setCurrentPage(currentPage + 1)
+    onClick: () => setCurrentPage(currentPage + 1),
+    className: _stylesModule.default.button
   }, /*#__PURE__*/_react.default.createElement(_ChevronRight.default, {
     className: currentPage + 1 === totalPages ? classes.paginationButtonDisabled : classes.paginationButton
   })));

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

@@ -1,3 +1,5 @@
+$button-size: 48px;
+
 .container {
   display: flex;
   justify-content: space-between;
@@ -5,18 +7,6 @@
 }
 
 .button {
-  background-color: transparent;
-  border-radius: 0;
-  min-width: 1px;
-  padding: 0;
-
-  &:focus,
-  &:disabled,
-  &:hover {
-    background-color: transparent;
-
-    &:disabled {
-      background-color: transparent;
-    }
-  }
+  height: $button-size;
+  width: $button-size;
 }

package/dist/components/UTBarChart/components/XAxis/components/AxisElement/index.js

@@ -13,6 +13,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const AxisElement = _ref => {
   var _textRef$getBoundingC, _textRef$getBoundingC2, _textRef$getBoundingC3;
 
@@ -21,47 +23,55 @@ const AxisElement = _ref => {
     graphYStart,
     className,
     mainLabel,
+    mainLabelStyles,
     secondaryLabel,
     color,
     yOffset,
+    circle,
     selected,
     selectedLabelBackground,
     labelBackgroundPadding
   } = _ref;
-  const [textRef, setTextRef] = (0, _react.useState)();
   const y = graphYStart + yOffset;
-  const labelXOffset = 0;
+  const [textRef, setTextRef] = (0, _react.useState)();
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, secondaryLabel && /*#__PURE__*/_react.default.createElement("text", {
     className: className,
     textAnchor: "middle",
     fill: color,
-    x: x + labelXOffset,
+    x: x,
     y: y
-  }, secondaryLabel), mainLabel && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, selected && /*#__PURE__*/_react.default.createElement("rect", {
+  }, secondaryLabel), mainLabel && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, circle && /*#__PURE__*/_react.default.createElement("circle", _extends({
+    cx: x,
+    cy: y + yOffset + (circle.yOffset || 0)
+  }, circle)), selected && /*#__PURE__*/_react.default.createElement("rect", {
     x: x - (textRef === null || textRef === void 0 ? void 0 : (_textRef$getBoundingC = textRef.getBoundingClientRect()) === null || _textRef$getBoundingC === void 0 ? void 0 : _textRef$getBoundingC.width) / 2 - labelBackgroundPadding,
     y: y,
     width: (textRef === null || textRef === void 0 ? void 0 : (_textRef$getBoundingC2 = textRef.getBoundingClientRect()) === null || _textRef$getBoundingC2 === void 0 ? void 0 : _textRef$getBoundingC2.width) + labelBackgroundPadding * 2,
     height: (textRef === null || textRef === void 0 ? void 0 : (_textRef$getBoundingC3 = textRef.getBoundingClientRect()) === null || _textRef$getBoundingC3 === void 0 ? void 0 : _textRef$getBoundingC3.height) + labelBackgroundPadding,
     fill: selectedLabelBackground,
     rx: "14"
-  }), /*#__PURE__*/_react.default.createElement("text", {
+  }), /*#__PURE__*/_react.default.createElement("text", _extends({
     ref: el => setTextRef(el),
     className: className,
     textAnchor: "middle",
     fill: color,
-    x: x + labelXOffset,
+    x: x,
     y: y + yOffset
-  }, mainLabel)));
+  }, mainLabelStyles), mainLabel)));
 };
 
 AxisElement.propTypes = {
   secondaryLabel: _propTypes.string,
   mainLabel: _propTypes.string,
+  // eslint-disable-next-line react/forbid-prop-types
+  mainLabelStyles: (0, _propTypes.shape)(_propTypes.any),
   x: _propTypes.number,
   graphYStart: _propTypes.number,
   yOffset: _propTypes.number,
   className: _propTypes.string,
   color: _propTypes.string,
+  // eslint-disable-next-line react/forbid-prop-types
+  circle: (0, _propTypes.shape)(_propTypes.any),
   selected: _propTypes.bool,
   selectedLabelBackground: _propTypes.string,
   labelBackgroundPadding: _propTypes.number

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

@@ -74,6 +74,8 @@ const XAxis = _ref => {
     let {
       mainLabel,
       color,
+      mainLabelStyles,
+      circle,
       selectedLabelBackground,
       labelBackgroundPadding
     } = _ref2;
@@ -82,10 +84,12 @@ const XAxis = _ref => {
       className: "".concat(classes.xAxisMainLabel, " ").concat(selected && classes.xAxisSelectedLabel),
       barWidth: barWidth,
       mainLabel: mainLabel,
+      mainLabelStyles: mainLabelStyles,
       color: color,
       x: xAxis(index) + xOffset,
       graphYStart: graphYStart,
       yOffset: _constants.Y_OFFSET,
+      circle: circle,
       selected: selected,
       selectedLabelBackground: selectedLabelBackground,
       labelBackgroundPadding: labelBackgroundPadding

package/dist/components/UTBarChart/index.js

@@ -76,6 +76,7 @@ const UTBarChart = _ref => {
     showGrid,
     center,
     hideYAxis,
+    singleYAxis,
     references,
     displayLegendAs,
     labels,
@@ -85,7 +86,8 @@ const UTBarChart = _ref => {
     classes: theme,
     spacingOptions,
     valuesOnTop,
-    NoDataComponent
+    NoDataComponent,
+    transitionDuration
   } = _ref;
   const classes = (0, _classesUtils.mergeClasses)(theme, classNames);
   const [currentPage, setCurrentPage] = (0, _react.useState)(0);
@@ -141,12 +143,15 @@ const UTBarChart = _ref => {
     GRAPH_Y_END,
     GRAPH_Y_START
   } = (0, _utils.getGraphAttributes)(containerWidth, containerHeight, marginLeft, marginRight, marginBottom, pagination ? 0 : minBarWidth, formattedData[0].length, barPadding, groups, spacingOptions);
-  const yAxis = d3.scaleLinear().domain([0, maxBarValue]).range([GRAPH_Y_START, GRAPH_Y_END]);
+  const roundedMaxBarValue = (0, _utils.roundMaxValue)(maxBarValue);
+  const roundedMaxLinearValue = (0, _utils.roundMaxValue)(maxLinearValue);
+  const maxAbsoluteValue = Math.max(roundedMaxBarValue, roundedMaxLinearValue);
+  const yAxis = d3.scaleLinear().domain([0, singleYAxis ? maxAbsoluteValue : roundedMaxBarValue]).range([GRAPH_Y_START, GRAPH_Y_END]);
   const xAxis = d3.scaleBand().domain(d3.range(formattedData[0].length)).range([GRAPH_X_START, GRAPH_X_END]).padding(barPadding);
   const groupWidth = xAxis.bandwidth();
   const xSubAxis = d3.scaleBand().domain(d3.range(groups)).range([0, groupWidth]).padding(barPadding);
   const barWidth = xSubAxis.bandwidth();
-  const linearYAxis = d3.scaleLinear().domain([0, maxLinearValue]).range([GRAPH_Y_START, GRAPH_Y_END]);
+  const linearYAxis = singleYAxis ? yAxis : d3.scaleLinear().domain([0, roundedMaxLinearValue]).range([GRAPH_Y_START, GRAPH_Y_END]);
   (0, _react.useEffect)(() => {
     setCurrentPage(0);
   }, [barData]);
@@ -176,7 +181,7 @@ const UTBarChart = _ref => {
     width: TOTAL_WIDTH
   }, gradientGenerator === null || gradientGenerator === void 0 ? void 0 : gradientGenerator(), showGrid && /*#__PURE__*/_react.default.createElement(_Levels.default, {
     classes: classes,
-    levels: (0, _utils.getGrid)(yAxisTicks, maxBarValue),
+    levels: (0, _utils.getGrid)(yAxisTicks, singleYAxis ? maxAbsoluteValue : roundedMaxBarValue),
     yAxis: yAxis,
     graphXStart: GRAPH_X_START,
     graphXEnd: GRAPH_X_END,
@@ -189,25 +194,27 @@ const UTBarChart = _ref => {
     xSubAxis: xSubAxis,
     barData: data,
     xAxis: xAxis,
-    valuesOnTopClassName: classes.onTopBarLabel,
+    classes: classes,
     yAxis: yAxis,
     barBorderRadius: barBorderRadius,
     onBarClick: onBarClick,
     barWidth: barWidth,
     graphYStart: GRAPH_Y_START,
-    maxBarValue: maxBarValue,
+    maxBarValue: roundedMaxBarValue,
     padding: barPadding,
     group: group,
     groups: groups,
     spacingOptions: spacingOptions,
     currentPage: currentPage,
     valuesOnTop: valuesOnTop,
+    transitionDuration: transitionDuration,
     setCurrentLabel: setCurrentLabel
   })), formattedLinearData.map(_ref3 => {
     let {
       data,
       type,
-      color
+      color,
+      customLineProps
     } = _ref3;
     return /*#__PURE__*/_react.default.createElement(_LinearPlot.default, {
       data: data,
@@ -216,7 +223,8 @@ const UTBarChart = _ref => {
       xAxis: xAxis,
       barWidth: groupWidth,
       color: color,
-      graphYStart: GRAPH_Y_START
+      graphYStart: GRAPH_Y_START,
+      customLineProps: customLineProps
     });
   }), /*#__PURE__*/_react.default.createElement(_Levels.default, {
     levels: levels,
@@ -231,19 +239,19 @@ const UTBarChart = _ref => {
     textAnchor: "end",
     setRef: marginLeftRef,
     yAxisTicks: yAxisTicks,
-    maxValue: maxBarValue,
+    maxValue: singleYAxis ? maxAbsoluteValue : roundedMaxBarValue,
     graphYStart: GRAPH_Y_START,
     yAxis: yAxis,
     valueDecorator: barAxisLabelFormatter,
     unit: barUnit
-  }), !hideYAxis && withLinearData && /*#__PURE__*/_react.default.createElement(_YAxis.default, {
+  }), !hideYAxis && withLinearData && !singleYAxis && /*#__PURE__*/_react.default.createElement(_YAxis.default, {
     graphYEnd: GRAPH_Y_END,
     classes: classes,
     x: TOTAL_WIDTH - marginRight,
     textAnchor: "start",
     setRef: marginRightRef,
     yAxisTicks: yAxisTicks,
-    maxValue: maxLinearValue,
+    maxValue: roundedMaxLinearValue,
     graphYStart: GRAPH_Y_START,
     yAxis: linearYAxis,
     valueDecorator: linearAxisLabelFormatter,
@@ -312,6 +320,7 @@ UTBarChart.propTypes = {
   showGrid: _propTypes.bool,
   center: _propTypes.bool,
   hideYAxis: _propTypes.bool,
+  singleYAxis: _propTypes.bool,
   references: _types.referencesType,
   displayLegendAs: _propTypes.string,
   labels: (0, _propTypes.objectOf)(_propTypes.string),
@@ -320,7 +329,8 @@ UTBarChart.propTypes = {
   highlightWidth: _propTypes.number,
   classes: _commonTypes.classesType,
   classNames: _commonTypes.classesType,
-  NoDataComponent: _propTypes.func
+  NoDataComponent: _propTypes.func,
+  transitionDuration: _propTypes.number
 };
 UTBarChart.defaultProps = {
   highlightWidth: 1,
@@ -339,7 +349,8 @@ UTBarChart.defaultProps = {
   classNames: {},
   NoDataComponent: null,
   barData: [],
-  linearData: []
+  linearData: [],
+  transitionDuration: 0
 };
 
 var _default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTBarChart);

package/dist/components/UTBarChart/theme.js

@@ -61,7 +61,7 @@ const retrieveStyle = theme => ({
     fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'xAxisMainLabel', 'fontSize']),
     fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'xAxisMainLabel', 'fontWeight']),
     fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'Fonts', 'fontFamily']),
-    color: (0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'xAxisMainLabel', 'color']),
+    fill: (0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'xAxisMainLabel', 'fill']),
     userSelect: 'none'
   },
   xAxisSelectedLabel: {
@@ -88,14 +88,14 @@ const retrieveStyle = theme => ({
   yAxisUnit: {
     fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'yAxisUnit', 'fontSize']),
     fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'yAxisUnit', 'fontWeight']),
-    color: (0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'yAxisUnit', 'color']),
+    fill: (0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'yAxisUnit', 'fill']),
     userSelect: 'none'
   },
   yAxisLabel: {
     fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'yAxisLabel', 'fontSize']),
     fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'yAxisLabel', 'fontWeight']),
     fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'Fonts', 'fontFamily']),
-    color: (0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'yAxisLabel', 'color']),
+    fill: (0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'yAxisLabel', 'fill']),
     userSelect: 'none'
   },
   onTopBarLabel: {
@@ -104,6 +104,9 @@ const retrieveStyle = theme => ({
     fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'Fonts', 'fontFamily']),
     color: (0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'onTopBarLabel', 'color']),
     userSelect: 'none'
+  },
+  tooltip: {
+    backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'tooltip', 'width'])
   }
 });
 

package/dist/components/UTBarChart/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPages = exports.getMinValue = exports.getMaxValues = exports.getMaxValue = exports.getGrid = exports.getGraphAttributes = exports.getFormattedLinearData = exports.getFormattedDecorators = exports.getFormattedData = exports.flattenData = exports.flattenAndReduceBarData = void 0;
+exports.roundMaxValue = exports.getPages = exports.getMinValue = exports.getMaxValues = exports.getMaxValue = exports.getGrid = exports.getGraphAttributes = exports.getFormattedLinearData = exports.getFormattedDecorators = exports.getFormattedData = exports.flattenData = exports.flattenAndReduceBarData = void 0;
 
 var _array = require("@widergy/web-utils/lib/array");
 
@@ -184,7 +184,7 @@ const getFormattedDecorators = function (xAxis) {
 exports.getFormattedDecorators = getFormattedDecorators;
 
 const getGrid = (ticks, maxValue) => new Array(ticks).fill(0).map((_, index) => ({
-  value: Math.round(maxValue - index * maxValue / (ticks - 1)),
+  value: maxValue - index * maxValue / (ticks - 1),
   type: 'grid'
 })).filter(_ref11 => {
   let {
@@ -193,4 +193,15 @@ const getGrid = (ticks, maxValue) => new Array(ticks).fill(0).map((_, index) =>
   return !!value;
 });
 
-exports.getGrid = getGrid;
+exports.getGrid = getGrid;
+
+const roundMaxValue = maxValue => {
+  const multipleOf = 5;
+  const exponent = Math.floor(Math.log(maxValue) / Math.log(multipleOf));
+  const fraction = maxValue / 5 ** exponent;
+  let niceFraction;
+  if (fraction <= 1) niceFraction = 1;else if (fraction <= 2) niceFraction = 2;else niceFraction = multipleOf;
+  return niceFraction * multipleOf ** exponent;
+};
+
+exports.roundMaxValue = roundMaxValue;

package/dist/components/UTPieChart/hooks/use-animated-value/index.js

@@ -26,13 +26,14 @@ const useAnimatedValue = config => {
   }, [animatedValue.current]);
 
   const animate = (from, to, duration) => {
+    if (currentInterval) clearInterval(currentInterval);
     setAnimatedValue(from);
     setIndex(0);
     const steps = Math.ceil(duration / (1000 / 60));
     setTotalSteps(steps);
     const interval = setInterval(() => {
       setIndex(index.current + 1);
-      if (to < from) setAnimatedValue((1 - _constants.TRANSITION_FUNCTIONS[transition](index.current / steps)) * (from - to) + to);else setAnimatedValue(_constants.TRANSITION_FUNCTIONS[transition](index.current / steps) * (from - to) + to);
+      if (to < from) setAnimatedValue((1 - _constants.TRANSITION_FUNCTIONS[transition](index.current / steps)) * (from - to) + to);else setAnimatedValue(_constants.TRANSITION_FUNCTIONS[transition](index.current / steps) * (to - from) + from);
     }, 1000 / 60);
     setCurrentInterval(interval);
   };

package/package.json

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