@widergy/energy-ui 3.111.0 → 3.112.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.112.1](https://github.com/widergy/energy-ui/compare/v3.112.0...v3.112.1) (2025-10-30)
+
+
+### Bug Fixes
+
+* console log ([#712](https://github.com/widergy/energy-ui/issues/712)) ([a3f0eb8](https://github.com/widergy/energy-ui/commit/a3f0eb8de4ba95b007851d72f88a707a32ec6a44))
+
+# [3.112.0](https://github.com/widergy/energy-ui/compare/v3.111.0...v3.112.0) (2025-10-23)
+
+
+### Features
+
+* [COLB-101] dual axis utgraph ([#705](https://github.com/widergy/energy-ui/issues/705)) ([f583827](https://github.com/widergy/energy-ui/commit/f583827c0a593a01209cdf2d7c9fbfe15d9f7e0e))
+
 # [3.111.0](https://github.com/widergy/energy-ui/compare/v3.110.4...v3.111.0) (2025-10-16)
 
 

package/dist/components/UTGraph/UTGraph.stories.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = void 0;
+exports.default = exports.DualAxisChart = exports.BarAndLineChart = void 0;
 var _reportSchema = _interopRequireDefault(require("./report.schema.json"));
 var _ = _interopRequireDefault(require("."));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const defaultReport = {
+const BarAndLineChartData = {
   meta: {
     code: 'economico',
     enabled: true,
@@ -279,6 +279,114 @@ const defaultReport = {
     }]
   }]
 };
+const DualAxisChartData = {
+  meta: {
+    code: 'consumo',
+    enabled: true,
+    report_type: 'chart',
+    tabs: [{
+      code: 'consumo',
+      name: 'Consumo',
+      icon: 'IconFilePlus',
+      orientation: 'horizontal',
+      mainAxis: {
+        binding: 'categorical'
+      },
+      crossAxes: {
+        left: {
+          label: 'Monto',
+          unit: '$'
+        },
+        right: {
+          label: 'Potencia',
+          unit: 'kW'
+        }
+      },
+      subitems_catalog: [[{
+        name: 'Item A',
+        type: 'bar',
+        crossAxis: 'left',
+        bindings: {
+          crossAxis: 'a'
+        }
+      }, {
+        name: 'Item B',
+        type: 'line',
+        crossAxis: 'right',
+        bindings: {
+          crossAxis: 'b'
+        }
+      }]]
+    }]
+  },
+  datasets: [{
+    code: 'consumo',
+    mainAxis: [{
+      name: 'Ene',
+      subitems: [{
+        code: 'a',
+        value: 30
+      }, {
+        code: 'b',
+        value: 550
+      }]
+    }, {
+      name: 'Feb',
+      subitems: [{
+        code: 'a',
+        value: 42
+      }, {
+        code: 'b',
+        value: 600
+      }]
+    }, {
+      name: 'Mar',
+      subitems: [{
+        code: 'a',
+        value: 60
+      }, {
+        code: 'b',
+        value: 800
+      }]
+    }, {
+      name: 'Abr',
+      subitems: [{
+        code: 'a',
+        value: 80
+      }, {
+        code: 'b',
+        value: 1200
+      }]
+    }, {
+      name: 'May',
+      subitems: [{
+        code: 'a',
+        value: 120
+      }, {
+        code: 'b',
+        value: 1500
+      }]
+    }, {
+      name: 'Jun',
+      subitems: [{
+        code: 'a',
+        value: 150
+      }, {
+        code: 'b',
+        value: 2000
+      }]
+    }, {
+      name: 'Jul',
+      subitems: [{
+        code: 'a',
+        value: 150
+      }, {
+        code: 'b',
+        value: 2000
+      }]
+    }]
+  }]
+};
 var _default = exports.default = {
   title: 'UTGraph',
   component: _.default,
@@ -303,10 +411,17 @@ var _default = exports.default = {
     }
   }
 };
-const Default = exports.Default = {
-  name: 'Bar Chart',
+const BarAndLineChart = exports.BarAndLineChart = {
+  name: 'Bar and Line Chart',
+  args: {
+    meta: BarAndLineChartData.meta,
+    datasets: BarAndLineChartData.datasets
+  }
+};
+const DualAxisChart = exports.DualAxisChart = {
+  name: 'Dual Axis Chart',
   args: {
-    meta: defaultReport.meta,
-    datasets: defaultReport.datasets
+    meta: DualAxisChartData.meta,
+    datasets: DualAxisChartData.datasets
   }
 };

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

@@ -8,10 +8,13 @@ var d3 = _interopRequireWildcard(require("d3"));
 var _propTypes = require("prop-types");
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("../../utils");
+var _constants = require("../../constants");
+var _utils2 = require("./utils");
 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 Bars = _ref => {
   let {
-    crossAxis,
+    crossAxisLeft,
+    crossAxisRight,
     dataset,
     mainAxis,
     mainAxisDomain,
@@ -27,31 +30,20 @@ const Bars = _ref => {
     const categoryXPosition = mainAxis(category);
     const valuesByCode = valuesByCategory.get(category);
     return tab.subitems_catalog.map((cluster, clusterIndex) => {
-      const codes = cluster.filter(series => series.type === 'bar').map(series => series.bindings.crossAxis);
-      if (codes.length === 0) return null;
-      const stacks = d3.stack().keys(codes).offset(d3.stackOffsetDiverging)([valuesByCode]);
+      const leftCodes = cluster.filter(series => series.type === _constants.BAR_TYPE && (series.crossAxis || _constants.LEFT_SIDE) === _constants.LEFT_SIDE).map(series => series.bindings.crossAxis);
+      const rightCodes = cluster.filter(series => series.type === _constants.BAR_TYPE && (series.crossAxis || _constants.RIGHT_SIDE) === _constants.RIGHT_SIDE).map(series => series.bindings.crossAxis);
+      if (leftCodes.length === 0 && rightCodes.length === 0) return null;
       const x = categoryXPosition + clusterScale(clusterIndex);
       const w = clusterScale.bandwidth();
-      return stacks.map(series => {
-        const code = series.key;
-        const [y0, y1] = series[0];
-        const yTop = Math.min(crossAxis(y0), crossAxis(y1));
-        const yBot = Math.max(crossAxis(y0), crossAxis(y1));
-        const h = yBot - yTop;
-        return /*#__PURE__*/_react.default.createElement("rect", {
-          key: "".concat(category, "-").concat(code),
-          x: x,
-          y: yTop,
-          width: w,
-          height: h,
-          fill: color(code)
-        });
-      });
+      return /*#__PURE__*/_react.default.createElement("g", {
+        key: "".concat(category, "-cluster")
+      }, (0, _utils2.renderStacksForSide)(leftCodes, valuesByCode, x, w, crossAxisLeft, category, color), (0, _utils2.renderStacksForSide)(rightCodes, valuesByCode, x, w, crossAxisRight, category, color));
     });
   }));
 };
 Bars.propTypes = {
-  crossAxis: _propTypes.func,
+  crossAxisLeft: _propTypes.func,
+  crossAxisRight: _propTypes.func,
   dataset: _propTypes.object,
   mainAxis: _propTypes.func,
   mainAxisDomain: _propTypes.array,

package/dist/components/UTGraph/components/Bars/utils.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderStacksForSide = void 0;
+var d3 = _interopRequireWildcard(require("d3"));
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 renderStacksForSide = (codes, valuesByCode, x, w, crossAxis, category, color) => {
+  const stacks = d3.stack().keys(codes).offset(d3.stackOffsetDiverging)([valuesByCode]);
+  return stacks.map(series => {
+    const code = series.key;
+    const [y0, y1] = series[0];
+    const yTop = Math.min(crossAxis(y0), crossAxis(y1));
+    const yBot = Math.max(crossAxis(y0), crossAxis(y1));
+    const h = yBot - yTop;
+    return /*#__PURE__*/_react.default.createElement("rect", {
+      key: "".concat(category, "-").concat(code),
+      x: x,
+      y: yTop,
+      width: w,
+      height: h,
+      fill: color(code)
+    });
+  });
+};
+exports.renderStacksForSide = renderStacksForSide;

package/dist/components/UTGraph/components/CartesianPlane/index.js

@@ -12,7 +12,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 const CartesianPlane = _ref => {
   let {
     mainAxisDomain,
-    crossAxisDomain,
+    crossAxisLeftDomain,
+    crossAxisRightDomain,
     width,
     height,
     margin,
@@ -20,6 +21,8 @@ const CartesianPlane = _ref => {
     crossAxisTickFormat,
     mainAxisTicks,
     mainAxisTickFormat,
+    hasLeft,
+    hasRight,
     children
   } = _ref;
   const innerWidth = width - margin.left - margin.right;
@@ -27,33 +30,61 @@ const CartesianPlane = _ref => {
   const mainAxis = (0, _react.useMemo)(() => d3.scaleBand().domain(mainAxisDomain).range([0, innerWidth]).padding(0.1),
   // TBD: parametrizar padding
   [mainAxisDomain, innerWidth]);
-  const crossAxis = (0, _react.useMemo)(() => d3.scaleLinear().domain(crossAxisDomain).range([innerHeight, 0]).nice(), [crossAxisDomain, innerHeight]);
+  const crossAxisLeft = (0, _react.useMemo)(() => d3.scaleLinear().domain(crossAxisLeftDomain).range([innerHeight, 0]).nice(), [crossAxisLeftDomain, innerHeight]);
+  const crossAxisRight = (0, _react.useMemo)(() => d3.scaleLinear().domain(crossAxisRightDomain).range([innerHeight, 0]).nice(), [crossAxisRightDomain, innerHeight]);
   const mainAxisRef = (0, _react.useRef)(null);
-  const crossAxisRef = (0, _react.useRef)(null);
+  const crossAxisLeftRef = (0, _react.useRef)(null);
+  const crossAxisRightRef = (0, _react.useRef)(null);
+  const gridRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
     const axis = d3.axisBottom(mainAxis).ticks(mainAxisTicks, mainAxisTickFormat).tickSizeOuter(0);
     d3.select(mainAxisRef.current).call(axis);
   }, [mainAxis, mainAxisTicks, mainAxisTickFormat]);
   (0, _react.useEffect)(() => {
-    const axis = d3.axisLeft(crossAxis).ticks(crossAxisTicks, crossAxisTickFormat).tickSize(-innerWidth).tickSizeOuter(0);
-    d3.select(crossAxisRef.current).call(axis);
-    d3.select(crossAxisRef.current).selectAll('.tick line').attr('stroke', '#000').attr('stroke-opacity', 0.5).attr('stroke-dasharray', '5 5');
-  }, [crossAxis, innerWidth, crossAxisTicks, crossAxisTickFormat]);
+    if (!hasLeft) return;
+    const axis = d3.axisLeft(crossAxisLeft).ticks(crossAxisTicks, crossAxisTickFormat).tickSize(0).tickSizeOuter(0);
+    d3.select(crossAxisLeftRef.current).call(axis);
+    d3.select(crossAxisLeftRef.current).selectAll('.tick text').attr('text-anchor', 'end');
+  }, [crossAxisLeft, crossAxisTicks, crossAxisTickFormat]);
+  (0, _react.useEffect)(() => {
+    if (!hasRight) return;
+    const axis = d3.axisRight(crossAxisRight).ticks(crossAxisTicks, crossAxisTickFormat).tickSize(0).tickSizeOuter(0);
+    d3.select(crossAxisRightRef.current).call(axis);
+    d3.select(crossAxisRightRef.current).selectAll('.tick text').attr('text-anchor', 'start');
+  }, [crossAxisRight, crossAxisTicks, crossAxisTickFormat]);
+  (0, _react.useEffect)(() => {
+    const crossAxis = hasLeft ? crossAxisLeft : hasRight ? crossAxisRight : null;
+    const g = d3.select(gridRef.current);
+    g.selectAll('*').remove();
+    if (!crossAxis) return;
+    const grid = d3.axisLeft(crossAxis).ticks(crossAxisTicks).tickFormat('').tickSize(-innerWidth).tickSizeOuter(0);
+    g.call(grid);
+    g.selectAll('.tick line').attr('stroke', '#000').attr('stroke-opacity', 0.5).attr('stroke-dasharray', '5 5');
+    g.select('.domain').remove();
+  }, [crossAxisLeft, crossAxisRight, innerWidth, crossAxisTicks, crossAxisTickFormat]);
   return /*#__PURE__*/_react.default.createElement("svg", {
     width: width,
     height: height
   }, /*#__PURE__*/_react.default.createElement("g", {
     transform: "translate(".concat(margin.left, ",").concat(margin.top, ")")
   }, /*#__PURE__*/_react.default.createElement("g", {
-    ref: crossAxisRef,
-    className: "y-axis"
+    ref: gridRef,
+    className: "y-grid"
+  }), hasLeft && /*#__PURE__*/_react.default.createElement("g", {
+    ref: crossAxisLeftRef,
+    className: "y-axis-left"
+  }), hasRight && /*#__PURE__*/_react.default.createElement("g", {
+    ref: crossAxisRightRef,
+    className: "y-axis-right",
+    transform: "translate(".concat(innerWidth, ", 0)")
   }), /*#__PURE__*/_react.default.createElement("g", {
     ref: mainAxisRef,
     className: "x-axis",
     transform: "translate(0, ".concat(innerHeight, ")")
   }), children({
     mainAxis,
-    crossAxis
+    crossAxisLeft,
+    crossAxisRight
   })));
 };
 var _default = exports.default = CartesianPlane;

package/dist/components/UTGraph/components/Lines/index.js

@@ -6,56 +6,50 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
-var d3 = _interopRequireWildcard(require("d3"));
+var _constants = require("../../constants");
 var _utils = require("../../utils");
+var _utils2 = require("./utils");
 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 Lines = _ref => {
   let {
     tab,
     dataset,
     mainAxis,
-    crossAxis,
+    crossAxisLeft,
+    crossAxisRight,
     mainAxisDomain,
     color
   } = _ref;
-  const lineClusters = (0, _react.useMemo)(() => tab.subitems_catalog.map(cluster => cluster.filter(s => s.type === 'line').map(s => s.bindings.crossAxis)).filter(codes => codes.length > 0), [tab]);
   const valuesByCategory = (0, _react.useMemo)(() => (0, _utils.getValuesMapByCategory)(dataset), [dataset]);
-  return /*#__PURE__*/_react.default.createElement("g", null, lineClusters.map(codes => {
-    const rows = mainAxisDomain.map(category => {
-      const valuesByCode = valuesByCategory.get(category);
-      const row = {};
-      codes.forEach(code => row[code] = valuesByCode[code]);
-      return row;
-    });
-    const stacks = d3.stack().keys(codes).offset(d3.stackOffsetDiverging)(rows);
-    return stacks.map(series => {
-      const code = series.key;
-      const points = series.map((_ref2, i) => {
-        let [y0, y1] = _ref2;
-        return {
-          y: Math.max(y0, y1),
-          x: mainAxis(mainAxisDomain[i]) + mainAxis.bandwidth() / 2
-        };
-      });
-      const path = d3.line().defined(d => Number.isFinite(d.y)).x(d => d.x).y(d => crossAxis(d.y))(points);
-      if (!path) return null;
-      return /*#__PURE__*/_react.default.createElement("path", {
-        key: code,
-        d: path,
-        fill: "none",
-        stroke: color(code),
-        strokeWidth: 2,
-        strokeLinejoin: "round",
-        strokeLinecap: "round"
-      });
-    });
+  const splitLineClusters = (0, _react.useMemo)(() => tab.subitems_catalog.map(cluster => {
+    const lineSeries = cluster.filter(s => s.type === _constants.LINE_TYPE);
+    const leftCodes = lineSeries.filter(s => (s.crossAxis || _constants.LEFT_SIDE) === _constants.LEFT_SIDE).map(s => s.bindings.crossAxis);
+    const rightCodes = lineSeries.filter(s => (s.crossAxis || _constants.RIGHT_SIDE) === _constants.RIGHT_SIDE).map(s => s.bindings.crossAxis);
+    return {
+      leftCodes,
+      rightCodes
+    };
+  }).filter(_ref2 => {
+    let {
+      leftCodes,
+      rightCodes
+    } = _ref2;
+    return leftCodes.length > 0 || rightCodes.length > 0;
+  }), [tab]);
+  return /*#__PURE__*/_react.default.createElement("g", null, splitLineClusters.map(_ref3 => {
+    let {
+      leftCodes,
+      rightCodes
+    } = _ref3;
+    return /*#__PURE__*/_react.default.createElement("g", null, (0, _utils2.renderStacksForSide)(leftCodes, valuesByCategory, mainAxis, mainAxisDomain, crossAxisLeft, color), (0, _utils2.renderStacksForSide)(rightCodes, valuesByCategory, mainAxis, mainAxisDomain, crossAxisRight, color));
   }));
 };
 Lines.propTypes = {
   tab: _propTypes.object,
   dataset: _propTypes.object,
   mainAxis: _propTypes.func,
-  crossAxis: _propTypes.func,
+  crossAxisLeft: _propTypes.func,
+  crossAxisRight: _propTypes.func,
   mainAxisDomain: _propTypes.array,
   color: _propTypes.func
 };

package/dist/components/UTGraph/components/Lines/utils.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderStacksForSide = void 0;
+var _react = _interopRequireDefault(require("react"));
+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); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const renderStacksForSide = (codes, valuesByCategory, mainAxis, mainAxisDomain, crossAxis, color) => {
+  const rows = mainAxisDomain.map(category => {
+    const valuesByCode = valuesByCategory.get(category);
+    const row = {};
+    codes.forEach(code => row[code] = valuesByCode[code]);
+    return row;
+  });
+  const stacks = d3.stack().keys(codes).offset(d3.stackOffsetDiverging)(rows);
+  return stacks.map(series => {
+    const code = series.key;
+    const points = series.map((_ref, i) => {
+      let [y0, y1] = _ref;
+      return {
+        y: Math.max(y0, y1),
+        x: mainAxis(mainAxisDomain[i]) + mainAxis.bandwidth() / 2
+      };
+    });
+    const path = d3.line().defined(d => Number.isFinite(d.y)).x(d => d.x).y(d => crossAxis(d.y))(points);
+    if (!path) return null;
+    return /*#__PURE__*/_react.default.createElement("path", {
+      key: code,
+      d: path,
+      fill: "none",
+      stroke: color(code),
+      strokeWidth: 2,
+      strokeLinejoin: "round",
+      strokeLinecap: "round"
+    });
+  });
+};
+exports.renderStacksForSide = renderStacksForSide;

package/dist/components/UTGraph/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RIGHT_SIDE = exports.LINE_TYPE = exports.LEFT_SIDE = exports.BAR_TYPE = void 0;
+const LEFT_SIDE = exports.LEFT_SIDE = 'left';
+const RIGHT_SIDE = exports.RIGHT_SIDE = 'right';
+const LINE_TYPE = exports.LINE_TYPE = 'line';
+const BAR_TYPE = exports.BAR_TYPE = 'bar';

package/dist/components/UTGraph/index.js

@@ -11,6 +11,7 @@ var _Bars = _interopRequireDefault(require("./components/Bars"));
 var _Lines = _interopRequireDefault(require("./components/Lines"));
 var _CartesianPlane = _interopRequireDefault(require("./components/CartesianPlane"));
 var _utils = require("./utils");
+var _constants = require("./constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 UTGraph = _ref => {
@@ -21,13 +22,19 @@ const UTGraph = _ref => {
   const tab = meta.tabs[0];
   const dataset = (0, _react.useMemo)(() => datasets.find(ds => ds.code === tab.code), [datasets, tab]);
   const mainAxisDomain = (0, _react.useMemo)(() => dataset.mainAxis.map(item => item.name), [dataset]);
-  const crossAxisDomain = (0, _react.useMemo)(() => (0, _utils.applyHeadroom)((0, _utils.computeCrossAxisDomain)(tab, dataset)), [tab, dataset]);
+  const crossAxisLeftDomain = (0, _react.useMemo)(() => (0, _utils.applyHeadroom)((0, _utils.computeCrossAxisDomainForSide)(tab, dataset, _constants.LEFT_SIDE)), [tab, dataset]);
+  const crossAxisRightDomain = (0, _react.useMemo)(() => (0, _utils.applyHeadroom)((0, _utils.computeCrossAxisDomainForSide)(tab, dataset, _constants.RIGHT_SIDE)), [tab, dataset]);
+  const {
+    hasLeft,
+    hasRight
+  } = (0, _utils.detectAxisSides)(tab);
 
   // TBD: colors should be retrieved from the report's meta
   const codeList = (0, _react.useMemo)(() => tab.subitems_catalog.flatMap(cluster => cluster.map(series => series.bindings.crossAxis)), [tab]);
   const color = (0, _react.useMemo)(() => d3.scaleOrdinal(codeList, d3.schemeTableau10), [codeList]);
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CartesianPlane.default, {
-    crossAxisDomain: crossAxisDomain,
+    crossAxisLeftDomain: crossAxisLeftDomain,
+    crossAxisRightDomain: crossAxisRightDomain,
     crossAxisTickFormat: "~s",
     crossAxisTicks: 4,
     height: 700,
@@ -40,21 +47,26 @@ const UTGraph = _ref => {
       bottom: 32,
       left: 64
     },
-    width: 1000
+    width: 1000,
+    hasLeft: hasLeft,
+    hasRight: hasRight
   }, _ref2 => {
     let {
       mainAxis,
-      crossAxis
+      crossAxisLeft,
+      crossAxisRight
     } = _ref2;
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Bars.default, {
-      crossAxis: crossAxis,
+      crossAxisLeft: crossAxisLeft,
+      crossAxisRight: crossAxisRight,
       dataset: dataset,
       mainAxis: mainAxis,
       mainAxisDomain: mainAxisDomain,
       tab: tab,
       color: color
     }), /*#__PURE__*/_react.default.createElement(_Lines.default, {
-      crossAxis: crossAxis,
+      crossAxisLeft: crossAxisLeft,
+      crossAxisRight: crossAxisRight,
       dataset: dataset,
       mainAxis: mainAxis,
       mainAxisDomain: mainAxisDomain,

package/dist/components/UTGraph/utils.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getValuesMapByCategory = exports.computeCrossAxisDomain = exports.applyHeadroom = void 0;
+exports.getValuesMapByCategory = exports.detectAxisSides = exports.computeCrossAxisDomainForSide = exports.computeCrossAxisDomain = exports.applyHeadroom = void 0;
+var _constants = require("./constants");
 const computeCrossAxisDomain = (tab, dataset) => {
   const {
     yMin,
@@ -50,6 +51,15 @@ const computeCrossAxisDomain = (tab, dataset) => {
   return [Math.min(0, yMin), Math.max(0, yMax)];
 };
 exports.computeCrossAxisDomain = computeCrossAxisDomain;
+const computeCrossAxisDomainForSide = (tab, dataset, side) => {
+  const filteredTab = {
+    ...tab,
+    subitems_catalog: tab.subitems_catalog.map(cluster => cluster.filter(series => (series.crossAxis || _constants.LEFT_SIDE) === side))
+  };
+  filteredTab.subitems_catalog = filteredTab.subitems_catalog.filter(cluster => cluster.length > 0);
+  return computeCrossAxisDomain(filteredTab, dataset);
+};
+exports.computeCrossAxisDomainForSide = computeCrossAxisDomainForSide;
 const applyHeadroom = function (_ref2) {
   let [min, max] = _ref2;
   let {
@@ -65,4 +75,22 @@ const getValuesMapByCategory = dataset => {
   });
   return map;
 };
-exports.getValuesMapByCategory = getValuesMapByCategory;
+exports.getValuesMapByCategory = getValuesMapByCategory;
+const detectAxisSides = tab => {
+  let hasLeft = false;
+  let hasRight = false;
+  tab.subitems_catalog.forEach(cluster => {
+    cluster.forEach(s => {
+      if (s.type === _constants.LINE_TYPE || s.type === _constants.BAR_TYPE) {
+        const side = s.crossAxis || _constants.LEFT_SIDE;
+        if (side === _constants.LEFT_SIDE) hasLeft = true;
+        if (side === _constants.RIGHT_SIDE) hasRight = true;
+      }
+    });
+  });
+  return {
+    hasLeft,
+    hasRight
+  };
+};
+exports.detectAxisSides = detectAxisSides;

package/dist/components/UTRadioGroup/versions/V0/index.js

@@ -73,7 +73,6 @@ class UTRadioGroup extends _react.PureComponent {
   }
   render() {
     var _field$configuration;
-    console.log('222');
     const {
       actions,
       classNames = {},

package/package.json

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