@widergy/energy-ui 3.112.1 → 3.114.1

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [3.114.1](https://github.com/widergy/energy-ui/compare/v3.114.0...v3.114.1) (2025-10-30)
+
+
+### Bug Fixes
+
+* [COLB-96] schema refactor ([#708](https://github.com/widergy/energy-ui/issues/708)) ([70e4056](https://github.com/widergy/energy-ui/commit/70e40564e129988c5c6512651465d6f5b0b06695))
+
+# [3.114.0](https://github.com/widergy/energy-ui/compare/v3.113.0...v3.114.0) (2025-10-30)
+
+
+### Features
+
+* [COLB-100] legends utgraph ([#707](https://github.com/widergy/energy-ui/issues/707)) ([bfa9d41](https://github.com/widergy/energy-ui/commit/bfa9d4174b8e68de2d731f448a7eb32e399aa90b))
+
+# [3.113.0](https://github.com/widergy/energy-ui/compare/v3.112.1...v3.113.0) (2025-10-30)
+
+
+### Features
+
+* [COLB-101] tabs + resizing utgraph ([#706](https://github.com/widergy/energy-ui/issues/706)) ([d2d9bb6](https://github.com/widergy/energy-ui/commit/d2d9bb62e3850ad22ddfe4f878462663a7727eb1))
+
 ## [3.112.1](https://github.com/widergy/energy-ui/compare/v3.112.0...v3.112.1) (2025-10-30)
 
 

package/dist/components/UTGraph/UTGraph.mdx

@@ -8,6 +8,6 @@ import * as UTGraphStories from './UTGraph.stories';
 
 <Description of={UTGraphStories} />
 
-<Canvas of={UTGraphStories.Default} withToolbar name="UTGraph" />
+<Canvas of={UTGraphStories.BarAndLineChart} withToolbar name="UTGraph" />
 
 <ArgTypes />

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

@@ -4,92 +4,175 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DualAxisChart = exports.BarAndLineChart = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _reportSchema = _interopRequireDefault(require("./report.schema.json"));
 var _ = _interopRequireDefault(require("."));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const BarAndLineChartData = {
   meta: {
+    id: 1,
     code: 'economico',
-    enabled: true,
-    report_type: 'chart',
-    tabs: [{
+    chart_layout: 'cartesian',
+    chart_tabs: [{
+      id: 1,
       code: 'economico',
-      name: 'Económico',
-      icon: 'IconFilePlus',
+      order: 1,
+      name: 'Porcentaje de carga por mes',
+      tooltip: 'Este es el porcentaje de carga por mes, el cual se refiere a la cantidad de carga que se consume en un mes',
+      icon: 'IconPercentage',
       orientation: 'horizontal',
-      mainAxis: {
+      domain: {
         binding: 'categorical'
       },
-      crossAxes: {
+      ranges: {
         left: {
           label: 'Monto',
           unit: '$'
         }
       },
-      subitems_catalog: [[{
-        name: 'Item A',
+      subitems: [[{
+        name: 'Barra izq stack 1',
+        type: 'bar',
+        range: 'left',
+        bindings: {
+          range: 'a'
+        }
+      }, {
+        name: 'Barra izq stack 2',
+        type: 'bar',
+        range: 'left',
+        bindings: {
+          range: 'b'
+        }
+      }, {
+        name: 'Año actual',
+        type: 'line',
+        range: 'left',
+        bindings: {
+          range: 'f'
+        }
+      }], [{
+        name: 'Barra der stack 1',
+        type: 'bar',
+        range: 'left',
+        bindings: {
+          range: 'c'
+        }
+      }, {
+        name: 'Barra der stack 2',
+        type: 'bar',
+        range: 'left',
+        bindings: {
+          range: 'd'
+        }
+      }, {
+        name: 'Barra der stack 3',
         type: 'bar',
-        crossAxis: 'left',
+        range: 'left',
+        bindings: {
+          range: 'e'
+        }
+      }, {
+        name: 'Año anterior stack 1',
+        type: 'line',
+        range: 'left',
+        bindings: {
+          range: 'g'
+        }
+      }, {
+        name: 'Año anterior stack 2',
+        type: 'line',
+        range: 'left',
+        bindings: {
+          range: 'h'
+        }
+      }]]
+    }, {
+      id: 2,
+      code: 'consumo',
+      order: 2,
+      name: 'Consumo de carga por mes',
+      tooltip: 'Este es el consumo de carga por mes, el cual se refiere a la cantidad de carga que se consume en un mes',
+      icon: 'IconLetterN',
+      orientation: 'horizontal',
+      domain: {
+        binding: 'categorical'
+      },
+      ranges: {
+        left: {
+          label: 'Monto',
+          unit: '$'
+        }
+      },
+      subitems: [[{
+        name: 'Item A',
+        type: 'line',
+        range: 'left',
         bindings: {
-          crossAxis: 'a'
+          range: 'a'
         }
       }, {
         name: 'Item B',
         type: 'bar',
-        crossAxis: 'left',
+        range: 'left',
         bindings: {
-          crossAxis: 'b'
+          range: 'b'
         }
       }, {
         name: 'Item F',
-        type: 'line',
-        crossAxis: 'left',
+        type: 'bar',
+        range: 'left',
         bindings: {
-          crossAxis: 'f'
+          range: 'f'
         }
       }], [{
         name: 'Item C',
-        type: 'bar',
-        crossAxis: 'left',
+        type: 'line',
+        range: 'left',
         bindings: {
-          crossAxis: 'c'
+          range: 'c'
         }
       }, {
         name: 'Item D',
-        type: 'bar',
-        crossAxis: 'left',
+        type: 'line',
+        range: 'left',
         bindings: {
-          crossAxis: 'd'
+          range: 'd'
         }
       }, {
         name: 'Item E',
         type: 'bar',
-        crossAxis: 'left',
+        range: 'left',
         bindings: {
-          crossAxis: 'e'
+          range: 'e'
         }
       }, {
         name: 'Item G',
-        type: 'line',
-        crossAxis: 'left',
+        type: 'bar',
+        range: 'left',
         bindings: {
-          crossAxis: 'g'
+          range: 'g'
         }
       }, {
         name: 'Item H',
-        type: 'line',
-        crossAxis: 'left',
+        type: 'bar',
+        range: 'left',
         bindings: {
-          crossAxis: 'h'
+          range: 'h'
         }
       }]]
-    }]
+    }],
+    configuration: {
+      cartesianPlane: {
+        rangeLeftTicks: 8
+      }
+    }
   },
   datasets: [{
     code: 'economico',
-    mainAxis: [{
-      name: 'Ene',
-      subitems: [{
+    domain: [{
+      domain_value: 'Ene',
+      concepts: [{
         code: 'a',
         value: 30
       }, {
@@ -115,8 +198,8 @@ const BarAndLineChartData = {
         value: 200
       }]
     }, {
-      name: 'Feb',
-      subitems: [{
+      domain_value: 'Feb',
+      concepts: [{
         code: 'a',
         value: 42
       }, {
@@ -142,8 +225,8 @@ const BarAndLineChartData = {
         value: 230
       }]
     }, {
-      name: 'Mar',
-      subitems: [{
+      domain_value: 'Mar',
+      concepts: [{
         code: 'a',
         value: 60
       }, {
@@ -169,8 +252,8 @@ const BarAndLineChartData = {
         value: 300
       }]
     }, {
-      name: 'Abr',
-      subitems: [{
+      domain_value: 'Abr',
+      concepts: [{
         code: 'a',
         value: 80
       }, {
@@ -196,8 +279,8 @@ const BarAndLineChartData = {
         value: 270
       }]
     }, {
-      name: 'May',
-      subitems: [{
+      domain_value: 'May',
+      concepts: [{
         code: 'a',
         value: 120
       }, {
@@ -223,8 +306,8 @@ const BarAndLineChartData = {
         value: 280
       }]
     }, {
-      name: 'Jun',
-      subitems: [{
+      domain_value: 'Jun',
+      concepts: [{
         code: 'a',
         value: 150
       }, {
@@ -250,8 +333,8 @@ const BarAndLineChartData = {
         value: 220
       }]
     }, {
-      name: 'Jul',
-      subitems: [{
+      domain_value: 'Jul',
+      concepts: [{
         code: 'a',
         value: 150
       }, {
@@ -277,22 +360,216 @@ const BarAndLineChartData = {
         value: 200
       }]
     }]
+  }, {
+    code: 'consumo',
+    domain: [{
+      domain_value: 'Ene',
+      concepts: [{
+        code: 'a',
+        value: 30
+      }, {
+        code: 'b',
+        value: 55
+      }, {
+        code: 'c',
+        value: 42
+      }, {
+        code: 'd',
+        value: 60
+      }, {
+        code: 'e',
+        value: 75
+      }, {
+        code: 'f',
+        value: 200
+      }, {
+        code: 'g',
+        value: 200
+      }, {
+        code: 'h',
+        value: 200
+      }]
+    }, {
+      domain_value: 'Feb',
+      concepts: [{
+        code: 'a',
+        value: 42
+      }, {
+        code: 'b',
+        value: 60
+      }, {
+        code: 'c',
+        value: 75
+      }, {
+        code: 'd',
+        value: 90
+      }, {
+        code: 'e',
+        value: 105
+      }, {
+        code: 'f',
+        value: 200
+      }, {
+        code: 'g',
+        value: 200
+      }, {
+        code: 'h',
+        value: 200
+      }]
+    }, {
+      domain_value: 'Mar',
+      concepts: [{
+        code: 'a',
+        value: 60
+      }, {
+        code: 'b',
+        value: 80
+      }, {
+        code: 'c',
+        value: 95
+      }, {
+        code: 'd',
+        value: 110
+      }, {
+        code: 'e',
+        value: 125
+      }, {
+        code: 'f',
+        value: 200
+      }, {
+        code: 'g',
+        value: 200
+      }, {
+        code: 'h',
+        value: 200
+      }]
+    }, {
+      domain_value: 'Abr',
+      concepts: [{
+        code: 'a',
+        value: 80
+      }, {
+        code: 'b',
+        value: 120
+      }, {
+        code: 'c',
+        value: 135
+      }, {
+        code: 'd',
+        value: 150
+      }, {
+        code: 'e',
+        value: 165
+      }, {
+        code: 'f',
+        value: 200
+      }, {
+        code: 'g',
+        value: 200
+      }, {
+        code: 'h',
+        value: 200
+      }]
+    }, {
+      domain_value: 'May',
+      concepts: [{
+        code: 'a',
+        value: 120
+      }, {
+        code: 'b',
+        value: 150
+      }, {
+        code: 'c',
+        value: 165
+      }, {
+        code: 'd',
+        value: 180
+      }, {
+        code: 'e',
+        value: 195
+      }, {
+        code: 'f',
+        value: 200
+      }, {
+        code: 'g',
+        value: 200
+      }, {
+        code: 'h',
+        value: 200
+      }]
+    }, {
+      domain_value: 'Jun',
+      concepts: [{
+        code: 'a',
+        value: 150
+      }, {
+        code: 'b',
+        value: 200
+      }, {
+        code: 'c',
+        value: 215
+      }, {
+        code: 'd',
+        value: 230
+      }, {
+        code: 'e',
+        value: 245
+      }, {
+        code: 'f',
+        value: 200
+      }, {
+        code: 'g',
+        value: 200
+      }, {
+        code: 'h',
+        value: 200
+      }]
+    }, {
+      domain_value: 'Jul',
+      concepts: [{
+        code: 'a',
+        value: 150
+      }, {
+        code: 'b',
+        value: 200
+      }, {
+        code: 'c',
+        value: 215
+      }, {
+        code: 'd',
+        value: 230
+      }, {
+        code: 'e',
+        value: 245
+      }, {
+        code: 'f',
+        value: 200
+      }, {
+        code: 'g',
+        value: 200
+      }, {
+        code: 'h',
+        value: 200
+      }]
+    }]
   }]
 };
 const DualAxisChartData = {
   meta: {
+    id: 2,
     code: 'consumo',
-    enabled: true,
-    report_type: 'chart',
-    tabs: [{
+    chart_layout: 'cartesian',
+    chart_tabs: [{
+      id: 1,
       code: 'consumo',
+      order: 1,
       name: 'Consumo',
-      icon: 'IconFilePlus',
+      icon: 'IconPercentage',
       orientation: 'horizontal',
-      mainAxis: {
+      domain: {
         binding: 'categorical'
       },
-      crossAxes: {
+      ranges: {
         left: {
           label: 'Monto',
           unit: '$'
@@ -302,28 +579,33 @@ const DualAxisChartData = {
           unit: 'kW'
         }
       },
-      subitems_catalog: [[{
+      subitems: [[{
         name: 'Item A',
         type: 'bar',
-        crossAxis: 'left',
+        range: 'left',
         bindings: {
-          crossAxis: 'a'
+          range: 'a'
         }
       }, {
         name: 'Item B',
         type: 'line',
-        crossAxis: 'right',
+        range: 'right',
         bindings: {
-          crossAxis: 'b'
+          range: 'b'
         }
       }]]
-    }]
+    }],
+    configuration: {
+      cartesianPlane: {
+        rangeRightTicks: 6
+      }
+    }
   },
   datasets: [{
     code: 'consumo',
-    mainAxis: [{
-      name: 'Ene',
-      subitems: [{
+    domain: [{
+      domain_value: 'Ene',
+      concepts: [{
         code: 'a',
         value: 30
       }, {
@@ -331,8 +613,8 @@ const DualAxisChartData = {
         value: 550
       }]
     }, {
-      name: 'Feb',
-      subitems: [{
+      domain_value: 'Feb',
+      concepts: [{
         code: 'a',
         value: 42
       }, {
@@ -340,8 +622,8 @@ const DualAxisChartData = {
         value: 600
       }]
     }, {
-      name: 'Mar',
-      subitems: [{
+      domain_value: 'Mar',
+      concepts: [{
         code: 'a',
         value: 60
       }, {
@@ -349,8 +631,8 @@ const DualAxisChartData = {
         value: 800
       }]
     }, {
-      name: 'Abr',
-      subitems: [{
+      domain_value: 'Abr',
+      concepts: [{
         code: 'a',
         value: 80
       }, {
@@ -358,8 +640,8 @@ const DualAxisChartData = {
         value: 1200
       }]
     }, {
-      name: 'May',
-      subitems: [{
+      domain_value: 'May',
+      concepts: [{
         code: 'a',
         value: 120
       }, {
@@ -367,8 +649,8 @@ const DualAxisChartData = {
         value: 1500
       }]
     }, {
-      name: 'Jun',
-      subitems: [{
+      domain_value: 'Jun',
+      concepts: [{
         code: 'a',
         value: 150
       }, {
@@ -376,8 +658,8 @@ const DualAxisChartData = {
         value: 2000
       }]
     }, {
-      name: 'Jul',
-      subitems: [{
+      domain_value: 'Jul',
+      concepts: [{
         code: 'a',
         value: 150
       }, {
@@ -390,6 +672,12 @@ const DualAxisChartData = {
 var _default = exports.default = {
   title: 'UTGraph',
   component: _.default,
+  render: args => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      height: 600
+    }
+  }, /*#__PURE__*/_react.default.createElement(_.default, args)),
   parameters: {
     jsonschema: {
       schema: _reportSchema.default

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

@@ -22,16 +22,16 @@ const Bars = _ref => {
     color
   } = _ref;
   const clusterScale = (0, _react.useMemo)(() => {
-    const count = tab.subitems_catalog.length;
+    const count = tab.subitems.length;
     return d3.scaleBand().domain(d3.range(count)).range([0, mainAxis.bandwidth()]).padding(0.15);
   }, [tab, mainAxis]);
   const valuesByCategory = (0, _react.useMemo)(() => (0, _utils.getValuesMapByCategory)(dataset), [dataset]);
   return /*#__PURE__*/_react.default.createElement("g", null, mainAxisDomain.map(category => {
     const categoryXPosition = mainAxis(category);
     const valuesByCode = valuesByCategory.get(category);
-    return tab.subitems_catalog.map((cluster, clusterIndex) => {
-      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);
+    return tab.subitems.map((cluster, clusterIndex) => {
+      const leftCodes = cluster.filter(series => series.type === _constants.BAR_TYPE && (series.range || _constants.LEFT_SIDE) === _constants.LEFT_SIDE).map(series => series.bindings.range);
+      const rightCodes = cluster.filter(series => series.type === _constants.BAR_TYPE && (series.range || _constants.RIGHT_SIDE) === _constants.RIGHT_SIDE).map(series => series.bindings.range);
       if (leftCodes.length === 0 && rightCodes.length === 0) return null;
       const x = categoryXPosition + clusterScale(clusterIndex);
       const w = clusterScale.bandwidth();

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

@@ -17,8 +17,10 @@ const CartesianPlane = _ref => {
     width,
     height,
     margin,
-    crossAxisTicks,
-    crossAxisTickFormat,
+    crossAxisLeftTicks,
+    crossAxisLeftTickFormat,
+    crossAxisRightTicks,
+    crossAxisRightTickFormat,
     mainAxisTicks,
     mainAxisTickFormat,
     hasLeft,
@@ -42,18 +44,19 @@ const CartesianPlane = _ref => {
   }, [mainAxis, mainAxisTicks, mainAxisTickFormat]);
   (0, _react.useEffect)(() => {
     if (!hasLeft) return;
-    const axis = d3.axisLeft(crossAxisLeft).ticks(crossAxisTicks, crossAxisTickFormat).tickSize(0).tickSizeOuter(0);
+    const axis = d3.axisLeft(crossAxisLeft).ticks(crossAxisLeftTicks, crossAxisLeftTickFormat).tickSize(0).tickSizeOuter(0);
     d3.select(crossAxisLeftRef.current).call(axis);
     d3.select(crossAxisLeftRef.current).selectAll('.tick text').attr('text-anchor', 'end');
-  }, [crossAxisLeft, crossAxisTicks, crossAxisTickFormat]);
+  }, [crossAxisLeft, crossAxisLeftTicks, crossAxisLeftTickFormat]);
   (0, _react.useEffect)(() => {
     if (!hasRight) return;
-    const axis = d3.axisRight(crossAxisRight).ticks(crossAxisTicks, crossAxisTickFormat).tickSize(0).tickSizeOuter(0);
+    const axis = d3.axisRight(crossAxisRight).ticks(crossAxisRightTicks, crossAxisRightTickFormat).tickSize(0).tickSizeOuter(0);
     d3.select(crossAxisRightRef.current).call(axis);
     d3.select(crossAxisRightRef.current).selectAll('.tick text').attr('text-anchor', 'start');
-  }, [crossAxisRight, crossAxisTicks, crossAxisTickFormat]);
+  }, [crossAxisRight, crossAxisRightTicks, crossAxisRightTickFormat]);
   (0, _react.useEffect)(() => {
     const crossAxis = hasLeft ? crossAxisLeft : hasRight ? crossAxisRight : null;
+    const crossAxisTicks = hasLeft ? crossAxisLeftTicks : crossAxisRightTicks;
     const g = d3.select(gridRef.current);
     g.selectAll('*').remove();
     if (!crossAxis) return;
@@ -61,7 +64,7 @@ const CartesianPlane = _ref => {
     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]);
+  }, [crossAxisLeft, crossAxisRight, innerWidth, crossAxisLeftTicks, crossAxisRightTicks]);
   return /*#__PURE__*/_react.default.createElement("svg", {
     width: width,
     height: height

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

@@ -21,10 +21,10 @@ const Lines = _ref => {
     color
   } = _ref;
   const valuesByCategory = (0, _react.useMemo)(() => (0, _utils.getValuesMapByCategory)(dataset), [dataset]);
-  const splitLineClusters = (0, _react.useMemo)(() => tab.subitems_catalog.map(cluster => {
+  const splitLineClusters = (0, _react.useMemo)(() => tab.subitems.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);
+    const leftCodes = lineSeries.filter(s => (s.range || _constants.LEFT_SIDE) === _constants.LEFT_SIDE).map(s => s.bindings.range);
+    const rightCodes = lineSeries.filter(s => (s.range || _constants.RIGHT_SIDE) === _constants.RIGHT_SIDE).map(s => s.bindings.range);
     return {
       leftCodes,
       rightCodes

package/dist/components/UTGraph/constants.js

@@ -3,8 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RIGHT_SIDE = exports.LINE_TYPE = exports.LEFT_SIDE = exports.BAR_TYPE = void 0;
+exports.TOOLTIP_SIZE = exports.RIGHT_SIDE = exports.LINE_TYPE = exports.LEFT_SIDE = exports.DEFAULT_RANGE_TICK_FORMAT = exports.DEFAULT_RANGE_TICKS = exports.DEFAULT_CARTESIAN_PLANE_MARGINS = 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';
+const BAR_TYPE = exports.BAR_TYPE = 'bar';
+const TOOLTIP_SIZE = exports.TOOLTIP_SIZE = 17;
+const DEFAULT_RANGE_TICK_FORMAT = exports.DEFAULT_RANGE_TICK_FORMAT = '~s';
+const DEFAULT_RANGE_TICKS = exports.DEFAULT_RANGE_TICKS = 4;
+const DEFAULT_CARTESIAN_PLANE_MARGINS = exports.DEFAULT_CARTESIAN_PLANE_MARGINS = {
+  top: 24,
+  right: 24,
+  bottom: 24,
+  left: 24
+};

package/dist/components/UTGraph/index.js

@@ -7,47 +7,137 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var d3 = _interopRequireWildcard(require("d3"));
 var _propTypes = require("prop-types");
+var _classesUtils = require("../../utils/classesUtils");
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTButtonGroup = _interopRequireDefault(require("../UTButtonGroup"));
+var _UTIcon = _interopRequireDefault(require("../UTIcon"));
+var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
 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");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _theme = require("./theme");
 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 => {
+  var _meta$configuration;
   let {
     meta,
-    datasets
+    datasets,
+    classNames,
+    classes: theme
   } = _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 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 {
+    margin: cartesianPlaneMargin,
+    rangeLeftTickFormat,
+    rangeLeftTicks,
+    rangeRightTickFormat,
+    rangeRightTicks
+  } = ((_meta$configuration = meta.configuration) === null || _meta$configuration === void 0 ? void 0 : _meta$configuration.cartesianPlane) || {};
+  const styles = (0, _react.useMemo)(() => (0, _classesUtils.mergeMultipleClassNames)(_stylesModule.default, theme, classNames), [_stylesModule.default, theme, classNames]);
+  const [selectedTab, setSelectedTab] = (0, _react.useState)(meta.chart_tabs[0]);
+  const tabOptions = (0, _react.useMemo)(() => {
+    var _meta$chart_tabs;
+    return meta.chart_tabs ? (_meta$chart_tabs = meta.chart_tabs) === null || _meta$chart_tabs === void 0 ? void 0 : _meta$chart_tabs.map(tab => ({
+      Icon: tab.icon,
+      id: tab.code,
+      onClick: () => setSelectedTab(tab),
+      value: tab.code
+    })) : [];
+  }, [meta.chart_tabs]);
+  const dataset = (0, _react.useMemo)(() => datasets.find(ds => ds.code === selectedTab.code), [datasets, selectedTab]);
+  const mainAxisDomain = (0, _react.useMemo)(() => dataset ? dataset.domain.map(item => item.domain_value) : [], [dataset]);
+  const crossAxisLeftDomain = (0, _react.useMemo)(() => (0, _utils.applyHeadroom)((0, _utils.computeCrossAxisDomainForSide)(selectedTab, dataset, _constants.LEFT_SIDE)), [selectedTab, dataset]);
+  const crossAxisRightDomain = (0, _react.useMemo)(() => (0, _utils.applyHeadroom)((0, _utils.computeCrossAxisDomainForSide)(selectedTab, dataset, _constants.RIGHT_SIDE)), [selectedTab, dataset]);
   const {
     hasLeft,
     hasRight
-  } = (0, _utils.detectAxisSides)(tab);
+  } = (0, _utils.detectAxisSides)(selectedTab);
 
   // 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 codeList = (0, _react.useMemo)(() => selectedTab.subitems.flatMap(cluster => cluster.map(series => series.bindings.range)), [selectedTab]);
   const color = (0, _react.useMemo)(() => d3.scaleOrdinal(codeList, d3.schemeTableau10), [codeList]);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CartesianPlane.default, {
+  const legendItems = (0, _react.useMemo)(() => {
+    const seen = new Set();
+    return selectedTab.subitems.flat().filter(series => {
+      const code = series.bindings.range;
+      if (!code || seen.has(code)) return false;
+      seen.add(code);
+      return true;
+    }).map(series => ({
+      code: series.bindings.range,
+      name: series.name,
+      type: series.type
+    }));
+  }, [selectedTab]);
+  const containerRef = (0, _react.useRef)(null);
+  const planeWrapperRef = (0, _react.useRef)(null);
+  const [containerSize, setContainerSize] = (0, _react.useState)({
+    width: 0,
+    height: 0
+  });
+  (0, _react.useEffect)(() => {
+    if (!containerRef.current || !planeWrapperRef.current) return;
+    const resizeObserver = new ResizeObserver(entries => {
+      if (!entries[0]) return;
+      const {
+        width,
+        height
+      } = entries[0].contentRect;
+      setContainerSize(prev => {
+        const next = {
+          width,
+          height: Math.max(height, 0)
+        };
+        if (Math.abs(prev.width - next.width) < 1 && Math.abs(prev.height - next.height) < 1) return prev;
+        return next;
+      });
+    });
+    resizeObserver.observe(planeWrapperRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: styles.container,
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: styles.header
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: styles.title
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    variant: "subtitle1",
+    weight: "medium",
+    title: selectedTab.name
+  }, selectedTab.name), (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.tooltip) && /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+    content: selectedTab.tooltip
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: styles.tooltipIcon
+  }, /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    name: "IconInfoCircle",
+    size: _constants.TOOLTIP_SIZE
+  })))), tabOptions.length > 1 && /*#__PURE__*/_react.default.createElement(_UTButtonGroup.default, {
+    actions: tabOptions,
+    selected: selectedTab.code
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: styles.planeWrapper,
+    ref: planeWrapperRef
+  }, /*#__PURE__*/_react.default.createElement(_CartesianPlane.default, {
     crossAxisLeftDomain: crossAxisLeftDomain,
     crossAxisRightDomain: crossAxisRightDomain,
-    crossAxisTickFormat: "~s",
-    crossAxisTicks: 4,
-    height: 700,
+    crossAxisLeftTickFormat: rangeLeftTickFormat || _constants.DEFAULT_RANGE_TICK_FORMAT,
+    crossAxisLeftTicks: rangeLeftTicks || _constants.DEFAULT_RANGE_TICKS,
+    crossAxisRightTickFormat: rangeRightTickFormat || _constants.DEFAULT_RANGE_TICK_FORMAT,
+    crossAxisRightTicks: rangeRightTicks || _constants.DEFAULT_RANGE_TICKS,
+    height: containerSize.height,
     mainAxisDomain: mainAxisDomain,
     mainAxisTickFormat: "~s",
     mainAxisTicks: 4,
-    margin: {
-      top: 32,
-      right: 32,
-      bottom: 32,
-      left: 64
-    },
-    width: 1000,
+    margin: cartesianPlaneMargin || _constants.DEFAULT_CARTESIAN_PLANE_MARGINS,
+    width: containerSize.width,
     hasLeft: hasLeft,
     hasRight: hasRight
   }, _ref2 => {
@@ -62,7 +152,7 @@ const UTGraph = _ref => {
       dataset: dataset,
       mainAxis: mainAxis,
       mainAxisDomain: mainAxisDomain,
-      tab: tab,
+      tab: selectedTab,
       color: color
     }), /*#__PURE__*/_react.default.createElement(_Lines.default, {
       crossAxisLeft: crossAxisLeft,
@@ -70,13 +160,29 @@ const UTGraph = _ref => {
       dataset: dataset,
       mainAxis: mainAxis,
       mainAxisDomain: mainAxisDomain,
-      tab: tab,
+      tab: selectedTab,
       color: color
     }));
-  }));
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: styles.legends
+  }, legendItems.map(item => /*#__PURE__*/_react.default.createElement("div", {
+    key: item.code,
+    className: styles.legendItem,
+    title: item.name
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      backgroundColor: color(item.code)
+    },
+    className: item.type === _constants.LINE_TYPE ? styles.legendLine : styles.legendBar
+  }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    variant: "xsmall",
+    className: styles.legendLabel
+  }, item.name)))));
 };
 UTGraph.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
   meta: _propTypes.object,
   datasets: _propTypes.array
 };
-var _default = exports.default = UTGraph;
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTGraph);

package/dist/components/UTGraph/report.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema#",
   "$id": "https://utgraph.dev/schemas/report.schema.json",
-  "title": "UTGraph Report",
+  "title": "UTGraph",
   "type": "object",
   "additionalProperties": false,
   "required": ["meta", "datasets"],
@@ -9,28 +9,41 @@
     "meta": {
       "type": "object",
       "additionalProperties": false,
-      "required": ["code", "enabled", "report_type", "tabs"],
+      "required": ["id", "code", "chart_layout", "chart_tabs"],
       "properties": {
-        "code": { "type": "string", "description": "unique identifier for this graph" },
-        "enabled": { "type": "boolean", "default": true },
-        "report_type": { "type": "string", "enum": ["chart", "pie"], "default": "chart" },
-        "tabs": {
+        "id": { "type": "number", "description": "identifier for this graph" },
+        "code": { "type": "string", "description": "code for this graph" },
+        "chart_layout": { "type": "string", "enum": ["cartesian", "radial"], "default": "cartesian" },
+        "chart_tabs": {
           "type": "array",
           "minItems": 1,
           "items": {
             "type": "object",
             "additionalProperties": false,
-            "required": ["code", "name", "icon", "orientation", "mainAxis", "crossAxes", "subitems_catalog"],
+            "required": [
+              "id",
+              "code",
+              "order",
+              "name",
+              "icon",
+              "orientation",
+              "domain",
+              "ranges",
+              "subitems"
+            ],
             "properties": {
+              "id": { "type": "number", "description": "identifier for this tab" },
               "code": { "type": "string", "description": "must match a dataset code from datasets" },
+              "order": { "type": "number", "description": "order of this tab" },
               "name": { "type": "string" },
+              "tooltip": { "type": "string" },
               "icon": { "type": "string" },
               "orientation": {
                 "type": "string",
                 "enum": ["horizontal", "vertical"],
                 "default": "vertical"
               },
-              "mainAxis": {
+              "domain": {
                 "type": "object",
                 "additionalProperties": false,
                 "required": ["binding"],
@@ -39,11 +52,11 @@
                     "type": "string",
                     "enum": ["categorical", "numerical"],
                     "default": "categorical",
-                    "description": "defines how to bind the main axis to the dataset.\n\n\"categorical\" uses each dataset.mainAxis[i].name to render a category (use this for bar and line charts).\n\n\"numerical\" renders a continuous axis using the value defined in subitems_catalog[].bindings.mainAxis to set a domain with ticks (use this for scatter charts)."
+                    "description": "defines how to bind the main axis to the dataset.\n\n\"categorical\" uses each dataset.domain[i].domain_value to render a category (use this for bar and line charts).\n\n\"numerical\" renders a continuous axis using the value defined in subitems[].bindings.domain to set a domain with ticks (use this for scatter charts)."
                   }
                 }
               },
-              "crossAxes": {
+              "ranges": {
                 "type": "object",
                 "additionalProperties": false,
                 "properties": {
@@ -69,7 +82,7 @@
                   }
                 }
               },
-              "subitems_catalog": {
+              "subitems": {
                 "type": "array",
                 "minItems": 1,
                 "description": "First dimension: clusters (side-by-side). Second dimension: series (stacked)",
@@ -79,22 +92,21 @@
                   "items": {
                     "type": "object",
                     "additionalProperties": false,
-                    "required": ["name", "type", "crossAxis", "bindings"],
+                    "required": ["name", "type", "range", "bindings"],
                     "properties": {
                       "name": { "type": "string" },
                       "type": { "type": "string", "enum": ["bar", "line", "point"] },
-                      "crossAxis": { "type": "string", "enum": ["left", "right"], "default": "left" },
+                      "range": { "type": "string", "enum": ["left", "right"], "default": "left" },
                       "bindings": {
                         "type": "object",
                         "description": "defines how to bind each subitem attribute to the dataset. ",
                         "additionalProperties": false,
-                        "required": ["crossAxis"],
                         "properties": {
-                          "crossAxis": {
+                          "range": {
                             "type": "string",
                             "description": "REQUIRED for all series. Defines the placement of the element in the cross axis. Must match a dataset subitem code"
                           },
-                          "mainAxis": {
+                          "domain": {
                             "type": "string",
                             "description": "REQUIRED, only for numerical binding. Defines the placement of the element in the main axis. Must match a dataset subitem code"
                           },
@@ -110,6 +122,48 @@
               }
             }
           }
+        },
+        "configuration": {
+          "type": "object",
+          "additionalProperties": false,
+          "properties": {
+            "cartesianPlane": {
+              "type": "object",
+              "additionalProperties": false,
+              "properties": {
+                "rangeLeftTicks": {
+                  "type": "number",
+                  "default": 4,
+                  "description": "defines the number of ticks in the left cross axis"
+                },
+                "rangeRightTicks": {
+                  "type": "number",
+                  "default": 4,
+                  "description": "defines the number of ticks in the right cross axis"
+                },
+                "rangeLeftTickFormat": {
+                  "type": "string",
+                  "default": "~s",
+                  "description": "defines the tick format in the left cross axis"
+                },
+                "rangeRightTickFormat": {
+                  "type": "string",
+                  "default": "~s",
+                  "description": "defines the tick format in the right cross axis"
+                },
+                "margin": {
+                  "type": "object",
+                  "additionalProperties": false,
+                  "properties": {
+                    "top": { "type": "number", "default": 24 },
+                    "right": { "type": "number", "default": 24 },
+                    "bottom": { "type": "number", "default": 24 },
+                    "left": { "type": "number", "default": 24 }
+                  }
+                }
+              }
+            }
+          }
         }
       }
     },
@@ -119,22 +173,22 @@
       "items": {
         "type": "object",
         "additionalProperties": false,
-        "required": ["code", "mainAxis"],
+        "required": ["code", "domain"],
         "properties": {
           "code": { "type": "string", "description": "must match a tab code from meta" },
-          "mainAxis": {
+          "domain": {
             "type": "array",
             "minItems": 1,
             "items": {
               "type": "object",
               "additionalProperties": false,
-              "required": ["name", "subitems"],
+              "required": ["domain_value", "concepts"],
               "properties": {
-                "name": {
+                "domain_value": {
                   "type": "string",
                   "description": "label to display below this category's main axis"
                 },
-                "subitems": {
+                "concepts": {
                   "type": "array",
                   "minItems": 1,
                   "items": {

package/dist/components/UTGraph/styles.module.scss

@@ -0,0 +1,61 @@
+$TOOLTIP_SIZE: 17px;
+
+.container {
+  flex: 1;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  grid-gap: 24px;
+  height: 100%;
+  min-height: 0;
+}
+
+.header {
+  align-items: center;
+  display: flex;
+  grid-gap: 16px;
+  justify-content: space-between;
+  flex: 0 0 auto;
+}
+
+.planeWrapper {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+}
+
+.title {
+  align-items: center;
+  display: flex;
+  grid-gap: 10px;
+}
+
+.tooltipIcon {
+  height: $TOOLTIP_SIZE;
+}
+
+.legends {
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: 16px;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
+.legendItem {
+  display: flex;
+  align-items: center;
+  grid-gap: 12px;
+}
+
+.legendBar {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+}
+
+.legendLine {
+  width: 16px;
+  height: 2px;
+}

package/dist/components/UTGraph/theme.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _shadowUtils = require("../../utils/shadowUtils");
+var _Palette = require("../../constants/Palette");
+const retrieveStyle = _ref => {
+  var _theme$Palette$shadow;
+  let {
+    theme
+  } = _ref;
+  return {
+    container: {
+      backgroundColor: theme.Palette[_Palette.COLOR_THEMES.light][_Palette.COLOR_SHADES.shade01],
+      boxShadow: (0, _shadowUtils.getShadow)({
+        color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
+        level: 1
+      })
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTGraph/utils.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.getValuesMapByCategory = exports.detectAxisSides = exports.computeCrossAxisDomainForSide = exports.computeCrossAxisDomain = exports.applyHeadroom = void 0;
 var _constants = require("./constants");
 const computeCrossAxisDomain = (tab, dataset) => {
+  if (!dataset) return [0, 1];
   const {
     yMin,
     yMax
-  } = dataset.mainAxis.reduce((acc, record) => {
-    const clusterMaxValues = tab.subitems_catalog.map(cluster => {
+  } = dataset.domain.reduce((acc, record) => {
+    const clusterMaxValues = tab.subitems.map(cluster => {
       const typeGroups = cluster.reduce((groups, series) => {
         if (!groups[series.type]) groups[series.type] = [];
         groups[series.type].push(series);
@@ -19,12 +20,12 @@ const computeCrossAxisDomain = (tab, dataset) => {
       const typeSums = Object.entries(typeGroups).map(_ref => {
         let [type, typeSeries] = _ref;
         const positiveSum = typeSeries.map(series => {
-          var _record$subitems$find, _record$subitems$find2;
-          return (_record$subitems$find = (_record$subitems$find2 = record.subitems.find(datum => datum.code === series.bindings.crossAxis)) === null || _record$subitems$find2 === void 0 ? void 0 : _record$subitems$find2.value) !== null && _record$subitems$find !== void 0 ? _record$subitems$find : 0;
+          var _record$concepts$find, _record$concepts$find2;
+          return (_record$concepts$find = (_record$concepts$find2 = record.concepts.find(datum => datum.code === series.bindings.range)) === null || _record$concepts$find2 === void 0 ? void 0 : _record$concepts$find2.value) !== null && _record$concepts$find !== void 0 ? _record$concepts$find : 0;
         }).filter(Number.isFinite).reduce((sum, v) => v >= 0 ? sum + v : sum, 0);
         const negativeSum = typeSeries.map(series => {
-          var _record$subitems$find3, _record$subitems$find4;
-          return (_record$subitems$find3 = (_record$subitems$find4 = record.subitems.find(datum => datum.code === series.bindings.crossAxis)) === null || _record$subitems$find4 === void 0 ? void 0 : _record$subitems$find4.value) !== null && _record$subitems$find3 !== void 0 ? _record$subitems$find3 : 0;
+          var _record$concepts$find3, _record$concepts$find4;
+          return (_record$concepts$find3 = (_record$concepts$find4 = record.concepts.find(datum => datum.code === series.bindings.range)) === null || _record$concepts$find4 === void 0 ? void 0 : _record$concepts$find4.value) !== null && _record$concepts$find3 !== void 0 ? _record$concepts$find3 : 0;
         }).filter(Number.isFinite).reduce((sum, v) => v < 0 ? sum + v : sum, 0);
         return {
           type,
@@ -54,9 +55,9 @@ 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))
+    subitems: tab.subitems.map(cluster => cluster.filter(series => (series.range || _constants.LEFT_SIDE) === side))
   };
-  filteredTab.subitems_catalog = filteredTab.subitems_catalog.filter(cluster => cluster.length > 0);
+  filteredTab.subitems = filteredTab.subitems.filter(cluster => cluster.length > 0);
   return computeCrossAxisDomain(filteredTab, dataset);
 };
 exports.computeCrossAxisDomainForSide = computeCrossAxisDomainForSide;
@@ -70,8 +71,9 @@ const applyHeadroom = function (_ref2) {
 exports.applyHeadroom = applyHeadroom;
 const getValuesMapByCategory = dataset => {
   const map = new Map();
-  dataset.mainAxis.forEach(record => {
-    map.set(record.name, Object.fromEntries(record.subitems.map(datum => [datum.code, datum.value])));
+  if (!dataset) return map;
+  dataset.domain.forEach(record => {
+    map.set(record.domain_value, Object.fromEntries(record.concepts.map(datum => [datum.code, datum.value])));
   });
   return map;
 };
@@ -79,10 +81,10 @@ exports.getValuesMapByCategory = getValuesMapByCategory;
 const detectAxisSides = tab => {
   let hasLeft = false;
   let hasRight = false;
-  tab.subitems_catalog.forEach(cluster => {
+  tab.subitems.forEach(cluster => {
     cluster.forEach(s => {
       if (s.type === _constants.LINE_TYPE || s.type === _constants.BAR_TYPE) {
-        const side = s.crossAxis || _constants.LEFT_SIDE;
+        const side = s.range || _constants.LEFT_SIDE;
         if (side === _constants.LEFT_SIDE) hasLeft = true;
         if (side === _constants.RIGHT_SIDE) hasRight = true;
       }

package/package.json

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