@widergy/energy-ui 1.114.2 → 1.115.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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)
 
 

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/package.json

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