@widergy/energy-ui 1.114.0 → 1.115.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [1.115.0](https://github.com/widergy/energy-ui/compare/v1.114.2...v1.115.0) (2022-03-17)
+
+
+### Features
+
+* bar chart updates ([#270](https://github.com/widergy/energy-ui/issues/270)) ([683f556](https://github.com/widergy/energy-ui/commit/683f556d4c9f3d1df72b837fd33b487ab45d3d10))
+
+## [1.114.2](https://github.com/widergy/energy-ui/compare/v1.114.1...v1.114.2) (2022-03-11)
+
+
+### Bug Fixes
+
+* adding optional tooltip to UTImageRadio ([#269](https://github.com/widergy/energy-ui/issues/269)) ([4facad6](https://github.com/widergy/energy-ui/commit/4facad6b35e93f24f24a439fb53278aabf92a84f))
+
+## [1.114.1](https://github.com/widergy/energy-ui/compare/v1.114.0...v1.114.1) (2022-03-11)
+
+
+### Bug Fixes
+
+* markdown fixes ([#266](https://github.com/widergy/energy-ui/issues/266)) ([a1749eb](https://github.com/widergy/energy-ui/commit/a1749eb2c4d6fa1fb38c8986750f723cba180fd4))
+
 # [1.114.0](https://github.com/widergy/energy-ui/compare/v1.113.0...v1.114.0) (2022-03-08)
 
 

package/dist/components/UTBarChart/README.md

@@ -52,3 +52,4 @@ Component that aims to provide an easy and dynamic solution for creating bar cha
 - `spacingOptions`: expects an `object` of the shape `{ onTopLabelPadding: number, lateralMargin: number, verticalMargin: number, axisPadding: number, marginTop: number, scrollPadding: number }`.
 - `valuesOnTop`: expects a `bool` that indicates that values must be rendered on top of each bar.
 - `NoDataComponent`: expects a `func` that renders a component to show when no bar data is available.
+- `markers`: expects a shape for markers configuration and styling

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

@@ -25,6 +25,8 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 
 var _constants = require("./constants");
 
+var _utils = require("./utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -110,7 +112,8 @@ var Legend = function Legend(_ref) {
       return referencesToShow.includes(id);
     };
 
-    return [levelsReferences.filter(filterFunction), linearReferences.filter(filterFunction), barReferences.filter(filterFunction)].filter(function (row) {
+    var getOrderedLegend = (0, _utils.orderLegend)(references === null || references === void 0 ? void 0 : references.orderFunction);
+    return getOrderedLegend(levelsReferences.filter(filterFunction), linearReferences.filter(filterFunction), barReferences.filter(filterFunction)).filter(function (row) {
       return !(0, _array.isEmpty)(row);
     });
   };

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.orderLegend = void 0;
+
+var orderLegend = function orderLegend(legendOrderFunction) {
+  return function (levels, linear, bar) {
+    return legendOrderFunction ? legendOrderFunction(levels, linear, bar) : [levels, linear, bar];
+  };
+};
+
+exports.orderLegend = orderLegend;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MARKER_TYPES = exports.DEFAULT_MARKER_SIZE = void 0;
+var DEFAULT_MARKER_SIZE = 4;
+exports.DEFAULT_MARKER_SIZE = DEFAULT_MARKER_SIZE;
+var MARKER_TYPES = {
+  DOT: 'dot'
+};
+exports.MARKER_TYPES = MARKER_TYPES;

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

@@ -32,7 +32,8 @@ var LinearPlot = function LinearPlot(_ref) {
       xAxis = _ref.xAxis,
       type = _ref.type,
       color = _ref.color,
-      customLineProps = _ref.customLineProps;
+      customLineProps = _ref.customLineProps,
+      markers = _ref.markers;
   var lineGenerator = d3.line().x(function (_ref2) {
     var xCoordinate = _ref2.xCoordinate;
     return xAxis(xCoordinate) + barWidth / 2;
@@ -42,13 +43,12 @@ var LinearPlot = function LinearPlot(_ref) {
   });
 
   var _getLineConfiguration = (0, _utils.getLineConfiguration)(type, lineGenerator),
-      generator = _getLineConfiguration.generator,
       props = _getLineConfiguration.props;
 
   return /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("path", _extends({
-    d: generator(data),
+    d: lineGenerator(data),
     stroke: color
-  }, props, customLineProps)));
+  }, props, customLineProps)), markers && (0, _utils.getMarkers)(data, xAxis, yAxis, barWidth, color, markers));
 };
 
 LinearPlot.propTypes = {
@@ -58,6 +58,7 @@ LinearPlot.propTypes = {
   xAxis: _propTypes.func,
   type: _propTypes.string,
   color: _propTypes.string,
+  markers: _types.linearMarkersType,
   customLineProps: (0, _propTypes.shape)({
     fill: _propTypes.string,
     strokeWidth: _propTypes.string,

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

@@ -3,29 +3,56 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getLineConfiguration = void 0;
+exports.getMarkers = exports.getLineConfiguration = void 0;
 
-var getLineConfiguration = function getLineConfiguration(type, lineGenerator) {
+var _react = _interopRequireDefault(require("react"));
+
+var _constants = require("./constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var DEFAULT_LINE_TYPE = 'solid';
+
+var getLineConfiguration = function getLineConfiguration(type) {
   return {
     solid: {
-      generator: lineGenerator,
       props: {
         fill: 'none',
         strokeWidth: '1'
       }
     },
     dashed: {
-      generator: lineGenerator,
       props: {
         fill: 'none',
         strokeWidth: '1',
         strokeDasharray: '2,2'
       }
     },
-    custom: {
-      generator: lineGenerator
-    }
-  }[type];
+    custom: {}
+  }[type || DEFAULT_LINE_TYPE];
+};
+
+exports.getLineConfiguration = getLineConfiguration;
+
+var getMarkers = function getMarkers(data, xAxis, yAxis, barWidth, color, markersConfig) {
+  return data.map(function (_ref) {
+    var xCoordinate = _ref.xCoordinate,
+        value = _ref.value;
+    var x = xAxis(xCoordinate) + barWidth / 2;
+    var y = yAxis(value);
+    var size = (markersConfig.size || _constants.DEFAULT_MARKER_SIZE) / 2;
+    return markersConfig.type === _constants.MARKER_TYPES.DOT && /*#__PURE__*/_react.default.createElement("svg", {
+      x: x - size,
+      y: y - size,
+      height: 2 * size,
+      width: 2 * size
+    }, /*#__PURE__*/_react.default.createElement("circle", {
+      cx: size,
+      cy: size,
+      r: size,
+      fill: color
+    }));
+  });
 };
 
-exports.getLineConfiguration = getLineConfiguration;
+exports.getMarkers = getMarkers;

package/dist/components/UTBarChart/index.js

@@ -80,37 +80,38 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var UTBarChart = function UTBarChart(_ref) {
-  var barData = _ref.barData,
-      linearData = _ref.linearData,
-      pagination = _ref.pagination,
-      yAxisTicks = _ref.yAxisTicks,
-      className = _ref.className,
-      xAxisDefinition = _ref.xAxisDefinition,
+  var barBorderRadius = _ref.barBorderRadius,
+      barData = _ref.barData,
       barPadding = _ref.barPadding,
-      barBorderRadius = _ref.barBorderRadius,
-      onBarClick = _ref.onBarClick,
-      minBarWidth = _ref.minBarWidth,
-      gradientGenerator = _ref.gradientGenerator,
-      decoratorRenderer = _ref.decoratorRenderer,
-      levels = _ref.levels,
-      title = _ref.title,
-      labelFormatters = _ref.labelFormatters,
-      units = _ref.units,
-      showGrid = _ref.showGrid,
       center = _ref.center,
-      hideYAxis = _ref.hideYAxis,
-      singleYAxis = _ref.singleYAxis,
-      references = _ref.references,
+      theme = _ref.classes,
+      className = _ref.className,
+      classNames = _ref.classNames,
+      decoratorRenderer = _ref.decoratorRenderer,
       displayLegendAs = _ref.displayLegendAs,
+      gradientGenerator = _ref.gradientGenerator,
+      hideYAxis = _ref.hideYAxis,
+      highlightWidth = _ref.highlightWidth,
+      labelFormatters = _ref.labelFormatters,
       labels = _ref.labels,
+      levels = _ref.levels,
+      linearData = _ref.linearData,
+      minBarWidth = _ref.minBarWidth,
+      NoDataComponent = _ref.NoDataComponent,
+      onBarClick = _ref.onBarClick,
+      pagination = _ref.pagination,
       selectable = _ref.selectable,
-      highlightWidth = _ref.highlightWidth,
-      classNames = _ref.classNames,
-      theme = _ref.classes,
+      references = _ref.references,
+      showGrid = _ref.showGrid,
+      singleYAxis = _ref.singleYAxis,
       spacingOptions = _ref.spacingOptions,
+      fitLegend = _ref.fitLegend,
+      title = _ref.title,
+      transitionDuration = _ref.transitionDuration,
+      units = _ref.units,
       valuesOnTop = _ref.valuesOnTop,
-      NoDataComponent = _ref.NoDataComponent,
-      transitionDuration = _ref.transitionDuration;
+      xAxisDefinition = _ref.xAxisDefinition,
+      yAxisTicks = _ref.yAxisTicks;
   var classes = (0, _classesUtils.mergeClasses)(theme, classNames);
 
   var _useState = (0, _react.useState)(0),
@@ -250,12 +251,14 @@ var UTBarChart = function UTBarChart(_ref) {
     var data = _ref3.data,
         type = _ref3.type,
         color = _ref3.color,
-        customLineProps = _ref3.customLineProps;
+        customLineProps = _ref3.customLineProps,
+        markers = _ref3.markers;
     return /*#__PURE__*/_react.default.createElement(_LinearPlot.default, {
       data: data,
       type: type,
       yAxis: linearYAxis,
       xAxis: xAxis,
+      markers: markers,
       barWidth: groupWidth,
       color: color,
       graphYStart: GRAPH_Y_START,
@@ -320,8 +323,8 @@ var UTBarChart = function UTBarChart(_ref) {
     classes: classes,
     displayAs: displayLegendAs,
     style: {
-      width: containerWidth,
-      margin: '0 auto'
+      width: containerWidth - 2 * GRAPH_X_START,
+      margin: fitLegend ? "0 ".concat(GRAPH_X_START, "px 0 ").concat(GRAPH_X_START, "px") : '0 auto'
     },
     flatData: {
       bar: flatBarData,
@@ -349,6 +352,7 @@ UTBarChart.propTypes = {
   decoratorRenderer: _propTypes.func,
   levels: _types.levelsType,
   title: _propTypes.string,
+  fitLegend: _propTypes.bool,
   labelFormatters: (0, _propTypes.objectOf)(_propTypes.func),
   units: (0, _propTypes.objectOf)(_propTypes.string),
   spacingOptions: (0, _propTypes.objectOf)(_propTypes.number),

package/dist/components/UTBarChart/types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.xAxisDefinitionType = exports.referencesType = exports.linearType = exports.linearDataType = exports.levelsType = exports.barType = exports.barDataType = void 0;
+exports.xAxisDefinitionType = exports.referencesType = exports.linearType = exports.linearMarkersType = exports.linearDataType = exports.levelsType = exports.barType = exports.barDataType = void 0;
 
 var _propTypes = require("prop-types");
 
@@ -24,6 +24,10 @@ var barType = (0, _propTypes.shape)({
   }))
 });
 exports.barType = barType;
+var linearMarkersType = (0, _propTypes.shape)({
+  type: _propTypes.string
+});
+exports.linearMarkersType = linearMarkersType;
 var barDataType = (0, _propTypes.arrayOf)((0, _propTypes.arrayOf)(barType));
 exports.barDataType = barDataType;
 var linearType = (0, _propTypes.shape)({
@@ -32,7 +36,8 @@ var linearType = (0, _propTypes.shape)({
     value: _propTypes.number
   }),
   type: _propTypes.string,
-  color: _propTypes.string
+  color: _propTypes.string,
+  marker: linearMarkersType
 });
 exports.linearType = linearType;
 var linearDataType = (0, _propTypes.arrayOf)(linearType);
@@ -47,7 +52,8 @@ var referencesType = (0, _propTypes.arrayOf)((0, _propTypes.shape)({
   id: _propTypes.string,
   className: _propTypes.string,
   check: _propTypes.func,
-  label: _propTypes.string
+  label: _propTypes.string,
+  orderFunction: _propTypes.func
 }));
 exports.referencesType = referencesType;
 var xAxisDefinitionType = (0, _propTypes.arrayOf)((0, _propTypes.shape)({

package/dist/components/UTImageRadio/components/ImageRadioCard/index.js

@@ -13,6 +13,8 @@ var _propTypes = require("prop-types");
 
 var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
 
+var _UTTooltip = _interopRequireDefault(require("../../../UTTooltip"));
+
 var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../../../UTTouchableWithoutFeedback"));
 
 var _types = require("../../types");
@@ -46,6 +48,7 @@ var ImageRadioCard = function ImageRadioCard(_ref) {
       selectedImageUrl = configuration.selected_image_url,
       UnselectedImageComponent = configuration.UnselectedImageComponent,
       SelectedImageComponent = configuration.SelectedImageComponent,
+      tooltip = configuration.tooltip,
       description = configuration.description;
 
   var handleOnChange = function handleOnChange() {
@@ -64,19 +67,28 @@ var ImageRadioCard = function ImageRadioCard(_ref) {
       });
     };
   }, [imageUrl, selectedImageUrl]);
-  return /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
-    className: "".concat(_stylesModule.default.container, " ").concat(classes.containerCard, " ").concat(isSelected && "".concat(_stylesModule.default.isSelected, " ").concat(classes.isSelected), " ").concat(oneColumn && _stylesModule.default.oneColumn, " ").concat(compact && _stylesModule.default.compact, " ").concat(disabled && _stylesModule.default.disabled, " ").concat(transparent && _stylesModule.default.transparent, " ").concat(vertical && classes.vertical),
-    onClick: handleOnChange
-  }, (imageUrl || ImageComponent) && /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(classes.image, " ").concat(_stylesModule.default.image)
-  }, imageUrl && renderImage(isSelected), ImageComponent && /*#__PURE__*/_react.default.createElement(ImageComponent, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.containerText, " ").concat(classes.containerText)
-  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: "".concat(classes.name, " ").concat(_stylesModule.default.text, " ").concat(isSelected && !transparent && classes.selectedText)
-  }, name), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    light: true,
-    className: "".concat(classes.description, " ").concat(_stylesModule.default.text, " ").concat(isSelected && classes.selectedText)
-  }, description)));
+
+  var Content = function Content() {
+    return /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
+      className: "".concat(_stylesModule.default.container, " ").concat(classes.containerCard, " ").concat(isSelected && "".concat(_stylesModule.default.isSelected, " ").concat(classes.isSelected), " ").concat(oneColumn && _stylesModule.default.oneColumn, " ").concat(compact && _stylesModule.default.compact, " ").concat(disabled && _stylesModule.default.disabled, " ").concat(transparent && _stylesModule.default.transparent, " ").concat(vertical && classes.vertical, " ").concat(tooltip && _stylesModule.default.contentWithTooltip, " "),
+      onClick: handleOnChange
+    }, (imageUrl || ImageComponent) && /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(classes.image, " ").concat(_stylesModule.default.image)
+    }, imageUrl && renderImage(isSelected), ImageComponent && /*#__PURE__*/_react.default.createElement(ImageComponent, null)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(_stylesModule.default.containerText, " ").concat(classes.containerText)
+    }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      className: "".concat(classes.name, " ").concat(_stylesModule.default.text, " ").concat(isSelected && !transparent && classes.selectedText)
+    }, name), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      light: true,
+      className: "".concat(classes.description, " ").concat(_stylesModule.default.text, " ").concat(isSelected && classes.selectedText)
+    }, description)));
+  };
+
+  return tooltip ? /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+    content: tooltip
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(_stylesModule.default.contentContainer, " ").concat(oneColumn ? _stylesModule.default.oneColumn : _stylesModule.default.twoColumns, " ")
+  }, /*#__PURE__*/_react.default.createElement(Content, null))) : /*#__PURE__*/_react.default.createElement(Content, null);
 };
 
 ImageRadioCard.propTypes = {

package/dist/components/UTImageRadio/components/ImageRadioCard/styles.module.scss

@@ -2,6 +2,7 @@
 @import '../../../../scss/variables/mediaQueries';
 
 $default-text-grid-gap: 8px;
+$content-grid-gap: 16px;
 $compact-padding: 16px;
 $default-border-radius: 5px;
 
@@ -63,3 +64,28 @@ $default-border-radius: 5px;
   background: none;
   filter: none !important;
 }
+
+.contentContainer {
+  align-items: center;
+  background-color: $image-radio-background;
+  border-radius: $default-border-radius;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  gap: $content-grid-gap;
+  height: fit-content;
+  transition: background-color 0.2s ease-in-out;
+
+  @media #{$tablet-mobile} {
+    width: 100%;
+  }
+}
+
+.twoColumns {
+  width: calc(50% - 2 * #{$content-grid-gap});
+}
+
+.contentWithTooltip {
+  width: 100%;
+}

package/dist/components/UTLabel/index.js

@@ -124,7 +124,7 @@ var UTLabel = /*#__PURE__*/function (_PureComponent) {
           title: withHoverTitle && (prop.children || prop),
           style: propStyle,
           key: prop.children,
-          className: withoutMarkdown && className
+          className: withoutMarkdown && "".concat(className, " ").concat(classes.base, " ").concat(style)
         }, prop.children || prop);
       };
 
@@ -145,7 +145,7 @@ var UTLabel = /*#__PURE__*/function (_PureComponent) {
         plugins: [_remarkBreaks.default],
         unwrapDisallowed: true,
         disallowedTypes: ['root', 'paragraph'],
-        className: " ".concat(className, "  ").concat(classes.base, "  ").concat(style, " "),
+        className: "".concat(className, " ").concat(classes.base, " ").concat(style),
         renderers: {
           link: renderLinkComponent,
           text: handleCustomTag

package/dist/components/UTSkeleton/index.js

@@ -38,7 +38,9 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 var SkeletonWrapper = (0, _reactSkeletor.createSkeletonElement)('div', _stylesModule.default.skeleton);
 
 var hasMock = function hasMock(string) {
-  if (string && string.props.source) return string.props.source.toString().includes('MOCK');
+  var _string$props, _string$props$source, _string$props2, _string$props2$childr;
+
+  return (string === null || string === void 0 ? void 0 : (_string$props = string.props) === null || _string$props === void 0 ? void 0 : (_string$props$source = _string$props.source) === null || _string$props$source === void 0 ? void 0 : _string$props$source.toString().includes('MOCK')) || (string === null || string === void 0 ? void 0 : (_string$props2 = string.props) === null || _string$props2 === void 0 ? void 0 : (_string$props2$childr = _string$props2.children) === null || _string$props2$childr === void 0 ? void 0 : _string$props2$childr.toString().includes('MOCK'));
 };
 
 var hiddenChildren = function hiddenChildren(child) {

package/package.json

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