@widergy/energy-ui 3.105.0 → 3.107.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.107.0](https://github.com/widergy/energy-ui/compare/v3.106.0...v3.107.0) (2025-09-30)
+
+
+### Features
+
+* [COLB-79] kpi component ([#693](https://github.com/widergy/energy-ui/issues/693)) ([54be41e](https://github.com/widergy/energy-ui/commit/54be41ec3f3020186440c85066444c44408772bf))
+
+# [3.106.0](https://github.com/widergy/energy-ui/compare/v3.105.0...v3.106.0) (2025-09-30)
+
+
+### Features
+
+* [COLB-60] graphic engine ([#691](https://github.com/widergy/energy-ui/issues/691)) ([806e073](https://github.com/widergy/energy-ui/commit/806e07383902f68275d13919d79f8a87f468b676))
+
 # [3.105.0](https://github.com/widergy/energy-ui/compare/v3.104.2...v3.105.0) (2025-09-29)
 
 

package/dist/components/UTGraph/UTGraph.mdx

@@ -0,0 +1,13 @@
+import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/blocks';
+
+import * as UTGraphStories from './UTGraph.stories';
+
+<Meta of={UTGraphStories} />
+
+<Title>UTGraph</Title>
+
+<Description of={UTGraphStories} />
+
+<Canvas of={UTGraphStories.Default} withToolbar name="UTGraph" />
+
+<ArgTypes />

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

@@ -0,0 +1,312 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _reportSchema = _interopRequireDefault(require("./report.schema.json"));
+var _ = _interopRequireDefault(require("."));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const defaultReport = {
+  meta: {
+    code: 'economico',
+    enabled: true,
+    report_type: 'chart',
+    tabs: [{
+      code: 'economico',
+      name: 'Económico',
+      icon: 'IconFilePlus',
+      orientation: 'horizontal',
+      mainAxis: {
+        binding: 'categorical'
+      },
+      crossAxes: {
+        left: {
+          label: 'Monto',
+          unit: '$'
+        }
+      },
+      subitems_catalog: [[{
+        name: 'Item A',
+        type: 'bar',
+        crossAxis: 'left',
+        bindings: {
+          crossAxis: 'a'
+        }
+      }, {
+        name: 'Item B',
+        type: 'bar',
+        crossAxis: 'left',
+        bindings: {
+          crossAxis: 'b'
+        }
+      }, {
+        name: 'Item F',
+        type: 'line',
+        crossAxis: 'left',
+        bindings: {
+          crossAxis: 'f'
+        }
+      }], [{
+        name: 'Item C',
+        type: 'bar',
+        crossAxis: 'left',
+        bindings: {
+          crossAxis: 'c'
+        }
+      }, {
+        name: 'Item D',
+        type: 'bar',
+        crossAxis: 'left',
+        bindings: {
+          crossAxis: 'd'
+        }
+      }, {
+        name: 'Item E',
+        type: 'bar',
+        crossAxis: 'left',
+        bindings: {
+          crossAxis: 'e'
+        }
+      }, {
+        name: 'Item G',
+        type: 'line',
+        crossAxis: 'left',
+        bindings: {
+          crossAxis: 'g'
+        }
+      }, {
+        name: 'Item H',
+        type: 'line',
+        crossAxis: 'left',
+        bindings: {
+          crossAxis: 'h'
+        }
+      }]]
+    }]
+  },
+  datasets: [{
+    code: 'economico',
+    mainAxis: [{
+      name: 'Ene',
+      subitems: [{
+        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
+      }]
+    }, {
+      name: 'Feb',
+      subitems: [{
+        code: 'a',
+        value: 42
+      }, {
+        code: 'b',
+        value: 60
+      }, {
+        code: 'c',
+        value: 75
+      }, {
+        code: 'd',
+        value: 90
+      }, {
+        code: 'e',
+        value: 105
+      }, {
+        code: 'f',
+        value: 450
+      }, {
+        code: 'g',
+        value: 380
+      }, {
+        code: 'h',
+        value: 230
+      }]
+    }, {
+      name: 'Mar',
+      subitems: [{
+        code: 'a',
+        value: 60
+      }, {
+        code: 'b',
+        value: 80
+      }, {
+        code: 'c',
+        value: 95
+      }, {
+        code: 'd',
+        value: 110
+      }, {
+        code: 'e',
+        value: 125
+      }, {
+        code: 'f',
+        value: 490
+      }, {
+        code: 'g',
+        value: 440
+      }, {
+        code: 'h',
+        value: 300
+      }]
+    }, {
+      name: 'Abr',
+      subitems: [{
+        code: 'a',
+        value: 80
+      }, {
+        code: 'b',
+        value: 120
+      }, {
+        code: 'c',
+        value: 135
+      }, {
+        code: 'd',
+        value: 150
+      }, {
+        code: 'e',
+        value: 165
+      }, {
+        code: 'f',
+        value: 550
+      }, {
+        code: 'g',
+        value: 430
+      }, {
+        code: 'h',
+        value: 270
+      }]
+    }, {
+      name: 'May',
+      subitems: [{
+        code: 'a',
+        value: 120
+      }, {
+        code: 'b',
+        value: 150
+      }, {
+        code: 'c',
+        value: 165
+      }, {
+        code: 'd',
+        value: 180
+      }, {
+        code: 'e',
+        value: 195
+      }, {
+        code: 'f',
+        value: 540
+      }, {
+        code: 'g',
+        value: 490
+      }, {
+        code: 'h',
+        value: 280
+      }]
+    }, {
+      name: 'Jun',
+      subitems: [{
+        code: 'a',
+        value: 150
+      }, {
+        code: 'b',
+        value: 200
+      }, {
+        code: 'c',
+        value: 215
+      }, {
+        code: 'd',
+        value: 230
+      }, {
+        code: 'e',
+        value: 245
+      }, {
+        code: 'f',
+        value: 450
+      }, {
+        code: 'g',
+        value: 510
+      }, {
+        code: 'h',
+        value: 220
+      }]
+    }, {
+      name: 'Jul',
+      subitems: [{
+        code: 'a',
+        value: 150
+      }, {
+        code: 'b',
+        value: 200
+      }, {
+        code: 'c',
+        value: 215
+      }, {
+        code: 'd',
+        value: 230
+      }, {
+        code: 'e',
+        value: 245
+      }, {
+        code: 'f',
+        value: 470
+      }, {
+        code: 'g',
+        value: 580
+      }, {
+        code: 'h',
+        value: 200
+      }]
+    }]
+  }]
+};
+var _default = exports.default = {
+  title: 'UTGraph',
+  component: _.default,
+  parameters: {
+    jsonschema: {
+      schema: _reportSchema.default
+    },
+    docs: {
+      description: {
+        component: 'Este componente permite mostrar gráficos en base a una configuración y un set de datos. Soporta gráficos de barras y de líneas (con múltiples barras/líneas apiladas o lado a lado en un mismo período y con orientación vertical u horizontal), gráficos de dona y gráficos de dispersión'
+      }
+    }
+  },
+  argTypes: {
+    meta: {
+      control: 'object',
+      description: 'Configuración del gráfico (para más información sobre el contenido ver la documentación del JSON Schema)'
+    },
+    datasets: {
+      control: 'object',
+      description: 'Datos del gráfico (para más información sobre el contenido ver la documentación del JSON Schema)'
+    }
+  }
+};
+const Default = exports.Default = {
+  name: 'Bar Chart',
+  args: {
+    meta: defaultReport.meta,
+    datasets: defaultReport.datasets
+  }
+};

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

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var d3 = _interopRequireWildcard(require("d3"));
+var _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _utils = 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,
+    dataset,
+    mainAxis,
+    mainAxisDomain,
+    tab,
+    color
+  } = _ref;
+  const clusterScale = (0, _react.useMemo)(() => {
+    const count = tab.subitems_catalog.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 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 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)
+        });
+      });
+    });
+  }));
+};
+Bars.propTypes = {
+  crossAxis: _propTypes.func,
+  dataset: _propTypes.object,
+  mainAxis: _propTypes.func,
+  mainAxisDomain: _propTypes.array,
+  tab: _propTypes.object,
+  color: _propTypes.func
+};
+var _default = exports.default = Bars;

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

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(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); }
+/* eslint-disable react/prop-types */
+
+const CartesianPlane = _ref => {
+  let {
+    mainAxisDomain,
+    crossAxisDomain,
+    width,
+    height,
+    margin,
+    crossAxisTicks,
+    crossAxisTickFormat,
+    mainAxisTicks,
+    mainAxisTickFormat,
+    children
+  } = _ref;
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+  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 mainAxisRef = (0, _react.useRef)(null);
+  const crossAxisRef = (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]);
+  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"
+  }), /*#__PURE__*/_react.default.createElement("g", {
+    ref: mainAxisRef,
+    className: "x-axis",
+    transform: "translate(0, ".concat(innerHeight, ")")
+  }), children({
+    mainAxis,
+    crossAxis
+  })));
+};
+var _default = exports.default = CartesianPlane;

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

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var d3 = _interopRequireWildcard(require("d3"));
+var _utils = 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,
+    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"
+      });
+    });
+  }));
+};
+Lines.propTypes = {
+  tab: _propTypes.object,
+  dataset: _propTypes.object,
+  mainAxis: _propTypes.func,
+  crossAxis: _propTypes.func,
+  mainAxisDomain: _propTypes.array,
+  color: _propTypes.func
+};
+var _default = exports.default = Lines;

package/dist/components/UTGraph/index.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var d3 = _interopRequireWildcard(require("d3"));
+var _propTypes = require("prop-types");
+var _Bars = _interopRequireDefault(require("./components/Bars"));
+var _Lines = _interopRequireDefault(require("./components/Lines"));
+var _CartesianPlane = _interopRequireDefault(require("./components/CartesianPlane"));
+var _utils = require("./utils");
+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 => {
+  let {
+    meta,
+    datasets
+  } = _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]);
+
+  // 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,
+    crossAxisTickFormat: "~s",
+    crossAxisTicks: 4,
+    height: 700,
+    mainAxisDomain: mainAxisDomain,
+    mainAxisTickFormat: "~s",
+    mainAxisTicks: 4,
+    margin: {
+      top: 32,
+      right: 32,
+      bottom: 32,
+      left: 64
+    },
+    width: 1000
+  }, _ref2 => {
+    let {
+      mainAxis,
+      crossAxis
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Bars.default, {
+      crossAxis: crossAxis,
+      dataset: dataset,
+      mainAxis: mainAxis,
+      mainAxisDomain: mainAxisDomain,
+      tab: tab,
+      color: color
+    }), /*#__PURE__*/_react.default.createElement(_Lines.default, {
+      crossAxis: crossAxis,
+      dataset: dataset,
+      mainAxis: mainAxis,
+      mainAxisDomain: mainAxisDomain,
+      tab: tab,
+      color: color
+    }));
+  }));
+};
+UTGraph.propTypes = {
+  meta: _propTypes.object,
+  datasets: _propTypes.array
+};
+var _default = exports.default = UTGraph;