@widergy/energy-ui 3.114.0 → 3.114.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/components/UTGraph/UTGraph.stories.js +106 -172
  3. package/dist/components/UTGraph/components/Bars/index.js +4 -4
  4. package/dist/components/UTGraph/components/Lines/index.js +3 -3
  5. package/dist/components/UTGraph/constants.js +3 -3
  6. package/dist/components/UTGraph/index.js +19 -19
  7. package/dist/components/UTGraph/report.schema.json +37 -26
  8. package/dist/components/UTGraph/styles.module.scss +1 -0
  9. package/dist/components/UTGraph/utils.js +12 -12
  10. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ ## [3.114.1](https://github.com/widergy/energy-ui/compare/v3.114.0...v3.114.1) (2025-10-30)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * [COLB-96] schema refactor ([#708](https://github.com/widergy/energy-ui/issues/708)) ([70e4056](https://github.com/widergy/energy-ui/commit/70e40564e129988c5c6512651465d6f5b0b06695))
7
+
1
8
  # [3.114.0](https://github.com/widergy/energy-ui/compare/v3.113.0...v3.114.0) (2025-10-30)
2
9
 
3
10
 
package/dist/components/UTGraph/UTGraph.stories.js CHANGED
@@ -10,237 +10,169 @@ var _ = _interopRequireDefault(require("."));
10
10
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
11
11
  const BarAndLineChartData = {
12
12
  meta: {
13
+ id: 1,
13
14
  code: 'economico',
14
- enabled: true,
15
- report_type: 'chart',
16
- tabs: [{
15
+ chart_layout: 'cartesian',
16
+ chart_tabs: [{
17
+ id: 1,
17
18
  code: 'economico',
19
+ order: 1,
18
20
  name: 'Porcentaje de carga por mes',
19
21
  tooltip: 'Este es el porcentaje de carga por mes, el cual se refiere a la cantidad de carga que se consume en un mes',
20
22
  icon: 'IconPercentage',
21
23
  orientation: 'horizontal',
22
- mainAxis: {
24
+ domain: {
23
25
  binding: 'categorical'
24
26
  },
25
- crossAxes: {
27
+ ranges: {
26
28
  left: {
27
29
  label: 'Monto',
28
30
  unit: '$'
29
31
  }
30
32
  },
31
- subitems_catalog: [[{
33
+ subitems: [[{
32
34
  name: 'Barra izq stack 1',
33
35
  type: 'bar',
34
- crossAxis: 'left',
36
+ range: 'left',
35
37
  bindings: {
36
- crossAxis: 'a'
38
+ range: 'a'
37
39
  }
38
40
  }, {
39
41
  name: 'Barra izq stack 2',
40
42
  type: 'bar',
41
- crossAxis: 'left',
43
+ range: 'left',
42
44
  bindings: {
43
- crossAxis: 'b'
45
+ range: 'b'
44
46
  }
45
47
  }, {
46
48
  name: 'Año actual',
47
49
  type: 'line',
48
- crossAxis: 'left',
50
+ range: 'left',
49
51
  bindings: {
50
- crossAxis: 'f'
52
+ range: 'f'
51
53
  }
52
54
  }], [{
53
55
  name: 'Barra der stack 1',
54
56
  type: 'bar',
55
- crossAxis: 'left',
57
+ range: 'left',
56
58
  bindings: {
57
- crossAxis: 'c'
59
+ range: 'c'
58
60
  }
59
61
  }, {
60
62
  name: 'Barra der stack 2',
61
63
  type: 'bar',
62
- crossAxis: 'left',
64
+ range: 'left',
63
65
  bindings: {
64
- crossAxis: 'd'
66
+ range: 'd'
65
67
  }
66
68
  }, {
67
69
  name: 'Barra der stack 3',
68
70
  type: 'bar',
69
- crossAxis: 'left',
71
+ range: 'left',
70
72
  bindings: {
71
- crossAxis: 'e'
73
+ range: 'e'
72
74
  }
73
75
  }, {
74
76
  name: 'Año anterior stack 1',
75
77
  type: 'line',
76
- crossAxis: 'left',
78
+ range: 'left',
77
79
  bindings: {
78
- crossAxis: 'g'
80
+ range: 'g'
79
81
  }
80
82
  }, {
81
83
  name: 'Año anterior stack 2',
82
84
  type: 'line',
83
- crossAxis: 'left',
85
+ range: 'left',
84
86
  bindings: {
85
- crossAxis: 'h'
87
+ range: 'h'
86
88
  }
87
89
  }]]
88
90
  }, {
91
+ id: 2,
89
92
  code: 'consumo',
93
+ order: 2,
90
94
  name: 'Consumo de carga por mes',
91
95
  tooltip: 'Este es el consumo de carga por mes, el cual se refiere a la cantidad de carga que se consume en un mes',
92
96
  icon: 'IconLetterN',
93
97
  orientation: 'horizontal',
94
- mainAxis: {
98
+ domain: {
95
99
  binding: 'categorical'
96
100
  },
97
- crossAxes: {
101
+ ranges: {
98
102
  left: {
99
103
  label: 'Monto',
100
104
  unit: '$'
101
105
  }
102
106
  },
103
- subitems_catalog: [[{
107
+ subitems: [[{
104
108
  name: 'Item A',
105
109
  type: 'line',
106
- crossAxis: 'left',
110
+ range: 'left',
107
111
  bindings: {
108
- crossAxis: 'a'
112
+ range: 'a'
109
113
  }
110
114
  }, {
111
115
  name: 'Item B',
112
116
  type: 'bar',
113
- crossAxis: 'left',
117
+ range: 'left',
114
118
  bindings: {
115
- crossAxis: 'b'
119
+ range: 'b'
116
120
  }
117
121
  }, {
118
122
  name: 'Item F',
119
123
  type: 'bar',
120
- crossAxis: 'left',
124
+ range: 'left',
121
125
  bindings: {
122
- crossAxis: 'f'
126
+ range: 'f'
123
127
  }
124
128
  }], [{
125
129
  name: 'Item C',
126
130
  type: 'line',
127
- crossAxis: 'left',
131
+ range: 'left',
128
132
  bindings: {
129
- crossAxis: 'c'
133
+ range: 'c'
130
134
  }
131
135
  }, {
132
136
  name: 'Item D',
133
137
  type: 'line',
134
- crossAxis: 'left',
138
+ range: 'left',
135
139
  bindings: {
136
- crossAxis: 'd'
140
+ range: 'd'
137
141
  }
138
142
  }, {
139
143
  name: 'Item E',
140
144
  type: 'bar',
141
- crossAxis: 'left',
145
+ range: 'left',
142
146
  bindings: {
143
- crossAxis: 'e'
147
+ range: 'e'
144
148
  }
145
149
  }, {
146
150
  name: 'Item G',
147
151
  type: 'bar',
148
- crossAxis: 'left',
152
+ range: 'left',
149
153
  bindings: {
150
- crossAxis: 'g'
154
+ range: 'g'
151
155
  }
152
156
  }, {
153
157
  name: 'Item H',
154
158
  type: 'bar',
155
- crossAxis: 'left',
159
+ range: 'left',
156
160
  bindings: {
157
- crossAxis: 'h'
158
- }
159
- }]]
160
- }, {
161
- code: 'consumo',
162
- name: 'Consumo de carga por mes',
163
- tooltip: 'Este es el consumo de carga por mes, el cual se refiere a la cantidad de carga que se consume en un mes',
164
- icon: 'IconLetterN',
165
- orientation: 'horizontal',
166
- mainAxis: {
167
- binding: 'categorical'
168
- },
169
- crossAxes: {
170
- left: {
171
- label: 'Monto',
172
- unit: '$'
173
- }
174
- },
175
- subitems_catalog: [[{
176
- name: 'Item A',
177
- type: 'line',
178
- crossAxis: 'left',
179
- bindings: {
180
- crossAxis: 'a'
181
- }
182
- }, {
183
- name: 'Item B',
184
- type: 'bar',
185
- crossAxis: 'left',
186
- bindings: {
187
- crossAxis: 'b'
188
- }
189
- }, {
190
- name: 'Item F',
191
- type: 'bar',
192
- crossAxis: 'left',
193
- bindings: {
194
- crossAxis: 'f'
195
- }
196
- }], [{
197
- name: 'Item C',
198
- type: 'line',
199
- crossAxis: 'left',
200
- bindings: {
201
- crossAxis: 'c'
202
- }
203
- }, {
204
- name: 'Item D',
205
- type: 'line',
206
- crossAxis: 'left',
207
- bindings: {
208
- crossAxis: 'd'
209
- }
210
- }, {
211
- name: 'Item E',
212
- type: 'bar',
213
- crossAxis: 'left',
214
- bindings: {
215
- crossAxis: 'e'
216
- }
217
- }, {
218
- name: 'Item G',
219
- type: 'bar',
220
- crossAxis: 'left',
221
- bindings: {
222
- crossAxis: 'g'
223
- }
224
- }, {
225
- name: 'Item H',
226
- type: 'bar',
227
- crossAxis: 'left',
228
- bindings: {
229
- crossAxis: 'h'
161
+ range: 'h'
230
162
  }
231
163
  }]]
232
164
  }],
233
- ui_options: {
165
+ configuration: {
234
166
  cartesianPlane: {
235
- crossAxisLeftTicks: 8
167
+ rangeLeftTicks: 8
236
168
  }
237
169
  }
238
170
  },
239
171
  datasets: [{
240
172
  code: 'economico',
241
- mainAxis: [{
242
- name: 'Ene',
243
- subitems: [{
173
+ domain: [{
174
+ domain_value: 'Ene',
175
+ concepts: [{
244
176
  code: 'a',
245
177
  value: 30
246
178
  }, {
@@ -266,8 +198,8 @@ const BarAndLineChartData = {
266
198
  value: 200
267
199
  }]
268
200
  }, {
269
- name: 'Feb',
270
- subitems: [{
201
+ domain_value: 'Feb',
202
+ concepts: [{
271
203
  code: 'a',
272
204
  value: 42
273
205
  }, {
@@ -293,8 +225,8 @@ const BarAndLineChartData = {
293
225
  value: 230
294
226
  }]
295
227
  }, {
296
- name: 'Mar',
297
- subitems: [{
228
+ domain_value: 'Mar',
229
+ concepts: [{
298
230
  code: 'a',
299
231
  value: 60
300
232
  }, {
@@ -320,8 +252,8 @@ const BarAndLineChartData = {
320
252
  value: 300
321
253
  }]
322
254
  }, {
323
- name: 'Abr',
324
- subitems: [{
255
+ domain_value: 'Abr',
256
+ concepts: [{
325
257
  code: 'a',
326
258
  value: 80
327
259
  }, {
@@ -347,8 +279,8 @@ const BarAndLineChartData = {
347
279
  value: 270
348
280
  }]
349
281
  }, {
350
- name: 'May',
351
- subitems: [{
282
+ domain_value: 'May',
283
+ concepts: [{
352
284
  code: 'a',
353
285
  value: 120
354
286
  }, {
@@ -374,8 +306,8 @@ const BarAndLineChartData = {
374
306
  value: 280
375
307
  }]
376
308
  }, {
377
- name: 'Jun',
378
- subitems: [{
309
+ domain_value: 'Jun',
310
+ concepts: [{
379
311
  code: 'a',
380
312
  value: 150
381
313
  }, {
@@ -401,8 +333,8 @@ const BarAndLineChartData = {
401
333
  value: 220
402
334
  }]
403
335
  }, {
404
- name: 'Jul',
405
- subitems: [{
336
+ domain_value: 'Jul',
337
+ concepts: [{
406
338
  code: 'a',
407
339
  value: 150
408
340
  }, {
@@ -430,9 +362,9 @@ const BarAndLineChartData = {
430
362
  }]
431
363
  }, {
432
364
  code: 'consumo',
433
- mainAxis: [{
434
- name: 'Ene',
435
- subitems: [{
365
+ domain: [{
366
+ domain_value: 'Ene',
367
+ concepts: [{
436
368
  code: 'a',
437
369
  value: 30
438
370
  }, {
@@ -458,8 +390,8 @@ const BarAndLineChartData = {
458
390
  value: 200
459
391
  }]
460
392
  }, {
461
- name: 'Feb',
462
- subitems: [{
393
+ domain_value: 'Feb',
394
+ concepts: [{
463
395
  code: 'a',
464
396
  value: 42
465
397
  }, {
@@ -485,8 +417,8 @@ const BarAndLineChartData = {
485
417
  value: 200
486
418
  }]
487
419
  }, {
488
- name: 'Mar',
489
- subitems: [{
420
+ domain_value: 'Mar',
421
+ concepts: [{
490
422
  code: 'a',
491
423
  value: 60
492
424
  }, {
@@ -512,8 +444,8 @@ const BarAndLineChartData = {
512
444
  value: 200
513
445
  }]
514
446
  }, {
515
- name: 'Abr',
516
- subitems: [{
447
+ domain_value: 'Abr',
448
+ concepts: [{
517
449
  code: 'a',
518
450
  value: 80
519
451
  }, {
@@ -539,8 +471,8 @@ const BarAndLineChartData = {
539
471
  value: 200
540
472
  }]
541
473
  }, {
542
- name: 'May',
543
- subitems: [{
474
+ domain_value: 'May',
475
+ concepts: [{
544
476
  code: 'a',
545
477
  value: 120
546
478
  }, {
@@ -566,8 +498,8 @@ const BarAndLineChartData = {
566
498
  value: 200
567
499
  }]
568
500
  }, {
569
- name: 'Jun',
570
- subitems: [{
501
+ domain_value: 'Jun',
502
+ concepts: [{
571
503
  code: 'a',
572
504
  value: 150
573
505
  }, {
@@ -593,8 +525,8 @@ const BarAndLineChartData = {
593
525
  value: 200
594
526
  }]
595
527
  }, {
596
- name: 'Jul',
597
- subitems: [{
528
+ domain_value: 'Jul',
529
+ concepts: [{
598
530
  code: 'a',
599
531
  value: 150
600
532
  }, {
@@ -624,18 +556,20 @@ const BarAndLineChartData = {
624
556
  };
625
557
  const DualAxisChartData = {
626
558
  meta: {
559
+ id: 2,
627
560
  code: 'consumo',
628
- enabled: true,
629
- report_type: 'chart',
630
- tabs: [{
561
+ chart_layout: 'cartesian',
562
+ chart_tabs: [{
563
+ id: 1,
631
564
  code: 'consumo',
565
+ order: 1,
632
566
  name: 'Consumo',
633
567
  icon: 'IconPercentage',
634
568
  orientation: 'horizontal',
635
- mainAxis: {
569
+ domain: {
636
570
  binding: 'categorical'
637
571
  },
638
- crossAxes: {
572
+ ranges: {
639
573
  left: {
640
574
  label: 'Monto',
641
575
  unit: '$'
@@ -645,33 +579,33 @@ const DualAxisChartData = {
645
579
  unit: 'kW'
646
580
  }
647
581
  },
648
- subitems_catalog: [[{
582
+ subitems: [[{
649
583
  name: 'Item A',
650
584
  type: 'bar',
651
- crossAxis: 'left',
585
+ range: 'left',
652
586
  bindings: {
653
- crossAxis: 'a'
587
+ range: 'a'
654
588
  }
655
589
  }, {
656
590
  name: 'Item B',
657
591
  type: 'line',
658
- crossAxis: 'right',
592
+ range: 'right',
659
593
  bindings: {
660
- crossAxis: 'b'
594
+ range: 'b'
661
595
  }
662
596
  }]]
663
597
  }],
664
- ui_options: {
598
+ configuration: {
665
599
  cartesianPlane: {
666
- crossAxisRightTicks: 6
600
+ rangeRightTicks: 6
667
601
  }
668
602
  }
669
603
  },
670
604
  datasets: [{
671
605
  code: 'consumo',
672
- mainAxis: [{
673
- name: 'Ene',
674
- subitems: [{
606
+ domain: [{
607
+ domain_value: 'Ene',
608
+ concepts: [{
675
609
  code: 'a',
676
610
  value: 30
677
611
  }, {
@@ -679,8 +613,8 @@ const DualAxisChartData = {
679
613
  value: 550
680
614
  }]
681
615
  }, {
682
- name: 'Feb',
683
- subitems: [{
616
+ domain_value: 'Feb',
617
+ concepts: [{
684
618
  code: 'a',
685
619
  value: 42
686
620
  }, {
@@ -688,8 +622,8 @@ const DualAxisChartData = {
688
622
  value: 600
689
623
  }]
690
624
  }, {
691
- name: 'Mar',
692
- subitems: [{
625
+ domain_value: 'Mar',
626
+ concepts: [{
693
627
  code: 'a',
694
628
  value: 60
695
629
  }, {
@@ -697,8 +631,8 @@ const DualAxisChartData = {
697
631
  value: 800
698
632
  }]
699
633
  }, {
700
- name: 'Abr',
701
- subitems: [{
634
+ domain_value: 'Abr',
635
+ concepts: [{
702
636
  code: 'a',
703
637
  value: 80
704
638
  }, {
@@ -706,8 +640,8 @@ const DualAxisChartData = {
706
640
  value: 1200
707
641
  }]
708
642
  }, {
709
- name: 'May',
710
- subitems: [{
643
+ domain_value: 'May',
644
+ concepts: [{
711
645
  code: 'a',
712
646
  value: 120
713
647
  }, {
@@ -715,8 +649,8 @@ const DualAxisChartData = {
715
649
  value: 1500
716
650
  }]
717
651
  }, {
718
- name: 'Jun',
719
- subitems: [{
652
+ domain_value: 'Jun',
653
+ concepts: [{
720
654
  code: 'a',
721
655
  value: 150
722
656
  }, {
@@ -724,8 +658,8 @@ const DualAxisChartData = {
724
658
  value: 2000
725
659
  }]
726
660
  }, {
727
- name: 'Jul',
728
- subitems: [{
661
+ domain_value: 'Jul',
662
+ concepts: [{
729
663
  code: 'a',
730
664
  value: 150
731
665
  }, {
package/dist/components/UTGraph/components/Bars/index.js CHANGED
@@ -22,16 +22,16 @@ const Bars = _ref => {
22
22
  color
23
23
  } = _ref;
24
24
  const clusterScale = (0, _react.useMemo)(() => {
25
- const count = tab.subitems_catalog.length;
25
+ const count = tab.subitems.length;
26
26
  return d3.scaleBand().domain(d3.range(count)).range([0, mainAxis.bandwidth()]).padding(0.15);
27
27
  }, [tab, mainAxis]);
28
28
  const valuesByCategory = (0, _react.useMemo)(() => (0, _utils.getValuesMapByCategory)(dataset), [dataset]);
29
29
  return /*#__PURE__*/_react.default.createElement("g", null, mainAxisDomain.map(category => {
30
30
  const categoryXPosition = mainAxis(category);
31
31
  const valuesByCode = valuesByCategory.get(category);
32
- return tab.subitems_catalog.map((cluster, clusterIndex) => {
33
- const leftCodes = cluster.filter(series => series.type === _constants.BAR_TYPE && (series.crossAxis || _constants.LEFT_SIDE) === _constants.LEFT_SIDE).map(series => series.bindings.crossAxis);
34
- const rightCodes = cluster.filter(series => series.type === _constants.BAR_TYPE && (series.crossAxis || _constants.RIGHT_SIDE) === _constants.RIGHT_SIDE).map(series => series.bindings.crossAxis);
32
+ return tab.subitems.map((cluster, clusterIndex) => {
33
+ const leftCodes = cluster.filter(series => series.type === _constants.BAR_TYPE && (series.range || _constants.LEFT_SIDE) === _constants.LEFT_SIDE).map(series => series.bindings.range);
34
+ const rightCodes = cluster.filter(series => series.type === _constants.BAR_TYPE && (series.range || _constants.RIGHT_SIDE) === _constants.RIGHT_SIDE).map(series => series.bindings.range);
35
35
  if (leftCodes.length === 0 && rightCodes.length === 0) return null;
36
36
  const x = categoryXPosition + clusterScale(clusterIndex);
37
37
  const w = clusterScale.bandwidth();
package/dist/components/UTGraph/components/Lines/index.js CHANGED
@@ -21,10 +21,10 @@ const Lines = _ref => {
21
21
  color
22
22
  } = _ref;
23
23
  const valuesByCategory = (0, _react.useMemo)(() => (0, _utils.getValuesMapByCategory)(dataset), [dataset]);
24
- const splitLineClusters = (0, _react.useMemo)(() => tab.subitems_catalog.map(cluster => {
24
+ const splitLineClusters = (0, _react.useMemo)(() => tab.subitems.map(cluster => {
25
25
  const lineSeries = cluster.filter(s => s.type === _constants.LINE_TYPE);
26
- const leftCodes = lineSeries.filter(s => (s.crossAxis || _constants.LEFT_SIDE) === _constants.LEFT_SIDE).map(s => s.bindings.crossAxis);
27
- const rightCodes = lineSeries.filter(s => (s.crossAxis || _constants.RIGHT_SIDE) === _constants.RIGHT_SIDE).map(s => s.bindings.crossAxis);
26
+ const leftCodes = lineSeries.filter(s => (s.range || _constants.LEFT_SIDE) === _constants.LEFT_SIDE).map(s => s.bindings.range);
27
+ const rightCodes = lineSeries.filter(s => (s.range || _constants.RIGHT_SIDE) === _constants.RIGHT_SIDE).map(s => s.bindings.range);
28
28
  return {
29
29
  leftCodes,
30
30
  rightCodes
package/dist/components/UTGraph/constants.js CHANGED
@@ -3,14 +3,14 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.TOOLTIP_SIZE = exports.RIGHT_SIDE = exports.LINE_TYPE = exports.LEFT_SIDE = exports.DEFAULT_CROSS_AXIS_TICK_FORMAT = exports.DEFAULT_CROSS_AXIS_TICKS = exports.DEFAULT_CARTESIAN_PLANE_MARGINS = exports.BAR_TYPE = void 0;
6
+ 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;
7
7
  const LEFT_SIDE = exports.LEFT_SIDE = 'left';
8
8
  const RIGHT_SIDE = exports.RIGHT_SIDE = 'right';
9
9
  const LINE_TYPE = exports.LINE_TYPE = 'line';
10
10
  const BAR_TYPE = exports.BAR_TYPE = 'bar';
11
11
  const TOOLTIP_SIZE = exports.TOOLTIP_SIZE = 17;
12
- const DEFAULT_CROSS_AXIS_TICK_FORMAT = exports.DEFAULT_CROSS_AXIS_TICK_FORMAT = '~s';
13
- const DEFAULT_CROSS_AXIS_TICKS = exports.DEFAULT_CROSS_AXIS_TICKS = 4;
12
+ const DEFAULT_RANGE_TICK_FORMAT = exports.DEFAULT_RANGE_TICK_FORMAT = '~s';
13
+ const DEFAULT_RANGE_TICKS = exports.DEFAULT_RANGE_TICKS = 4;
14
14
  const DEFAULT_CARTESIAN_PLANE_MARGINS = exports.DEFAULT_CARTESIAN_PLANE_MARGINS = {
15
15
  top: 24,
16
16
  right: 24,
package/dist/components/UTGraph/index.js CHANGED
@@ -23,7 +23,7 @@ var _theme = require("./theme");
23
23
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
24
24
  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); }
25
25
  const UTGraph = _ref => {
26
- var _meta$ui_options;
26
+ var _meta$configuration;
27
27
  let {
28
28
  meta,
29
29
  datasets,
@@ -32,24 +32,24 @@ const UTGraph = _ref => {
32
32
  } = _ref;
33
33
  const {
34
34
  margin: cartesianPlaneMargin,
35
- crossAxisLeftTickFormat,
36
- crossAxisLeftTicks,
37
- crossAxisRightTickFormat,
38
- crossAxisRightTicks
39
- } = ((_meta$ui_options = meta.ui_options) === null || _meta$ui_options === void 0 ? void 0 : _meta$ui_options.cartesianPlane) || {};
35
+ rangeLeftTickFormat,
36
+ rangeLeftTicks,
37
+ rangeRightTickFormat,
38
+ rangeRightTicks
39
+ } = ((_meta$configuration = meta.configuration) === null || _meta$configuration === void 0 ? void 0 : _meta$configuration.cartesianPlane) || {};
40
40
  const styles = (0, _react.useMemo)(() => (0, _classesUtils.mergeMultipleClassNames)(_stylesModule.default, theme, classNames), [_stylesModule.default, theme, classNames]);
41
- const [selectedTab, setSelectedTab] = (0, _react.useState)(meta.tabs[0]);
41
+ const [selectedTab, setSelectedTab] = (0, _react.useState)(meta.chart_tabs[0]);
42
42
  const tabOptions = (0, _react.useMemo)(() => {
43
- var _meta$tabs;
44
- return meta.tabs ? (_meta$tabs = meta.tabs) === null || _meta$tabs === void 0 ? void 0 : _meta$tabs.map(tab => ({
43
+ var _meta$chart_tabs;
44
+ return meta.chart_tabs ? (_meta$chart_tabs = meta.chart_tabs) === null || _meta$chart_tabs === void 0 ? void 0 : _meta$chart_tabs.map(tab => ({
45
45
  Icon: tab.icon,
46
46
  id: tab.code,
47
47
  onClick: () => setSelectedTab(tab),
48
48
  value: tab.code
49
49
  })) : [];
50
- }, [meta.tabs]);
50
+ }, [meta.chart_tabs]);
51
51
  const dataset = (0, _react.useMemo)(() => datasets.find(ds => ds.code === selectedTab.code), [datasets, selectedTab]);
52
- const mainAxisDomain = (0, _react.useMemo)(() => dataset ? dataset.mainAxis.map(item => item.name) : [], [dataset]);
52
+ const mainAxisDomain = (0, _react.useMemo)(() => dataset ? dataset.domain.map(item => item.domain_value) : [], [dataset]);
53
53
  const crossAxisLeftDomain = (0, _react.useMemo)(() => (0, _utils.applyHeadroom)((0, _utils.computeCrossAxisDomainForSide)(selectedTab, dataset, _constants.LEFT_SIDE)), [selectedTab, dataset]);
54
54
  const crossAxisRightDomain = (0, _react.useMemo)(() => (0, _utils.applyHeadroom)((0, _utils.computeCrossAxisDomainForSide)(selectedTab, dataset, _constants.RIGHT_SIDE)), [selectedTab, dataset]);
55
55
  const {
@@ -58,17 +58,17 @@ const UTGraph = _ref => {
58
58
  } = (0, _utils.detectAxisSides)(selectedTab);
59
59
 
60
60
  // TBD: colors should be retrieved from the report's meta
61
- const codeList = (0, _react.useMemo)(() => selectedTab.subitems_catalog.flatMap(cluster => cluster.map(series => series.bindings.crossAxis)), [selectedTab]);
61
+ const codeList = (0, _react.useMemo)(() => selectedTab.subitems.flatMap(cluster => cluster.map(series => series.bindings.range)), [selectedTab]);
62
62
  const color = (0, _react.useMemo)(() => d3.scaleOrdinal(codeList, d3.schemeTableau10), [codeList]);
63
63
  const legendItems = (0, _react.useMemo)(() => {
64
64
  const seen = new Set();
65
- return selectedTab.subitems_catalog.flat().filter(series => {
66
- const code = series.bindings.crossAxis;
65
+ return selectedTab.subitems.flat().filter(series => {
66
+ const code = series.bindings.range;
67
67
  if (!code || seen.has(code)) return false;
68
68
  seen.add(code);
69
69
  return true;
70
70
  }).map(series => ({
71
- code: series.bindings.crossAxis,
71
+ code: series.bindings.range,
72
72
  name: series.name,
73
73
  type: series.type
74
74
  }));
@@ -128,10 +128,10 @@ const UTGraph = _ref => {
128
128
  }, /*#__PURE__*/_react.default.createElement(_CartesianPlane.default, {
129
129
  crossAxisLeftDomain: crossAxisLeftDomain,
130
130
  crossAxisRightDomain: crossAxisRightDomain,
131
- crossAxisLeftTickFormat: crossAxisLeftTickFormat || _constants.DEFAULT_CROSS_AXIS_TICK_FORMAT,
132
- crossAxisLeftTicks: crossAxisLeftTicks || _constants.DEFAULT_CROSS_AXIS_TICKS,
133
- crossAxisRightTickFormat: crossAxisRightTickFormat || _constants.DEFAULT_CROSS_AXIS_TICK_FORMAT,
134
- crossAxisRightTicks: crossAxisRightTicks || _constants.DEFAULT_CROSS_AXIS_TICKS,
131
+ crossAxisLeftTickFormat: rangeLeftTickFormat || _constants.DEFAULT_RANGE_TICK_FORMAT,
132
+ crossAxisLeftTicks: rangeLeftTicks || _constants.DEFAULT_RANGE_TICKS,
133
+ crossAxisRightTickFormat: rangeRightTickFormat || _constants.DEFAULT_RANGE_TICK_FORMAT,
134
+ crossAxisRightTicks: rangeRightTicks || _constants.DEFAULT_RANGE_TICKS,
135
135
  height: containerSize.height,
136
136
  mainAxisDomain: mainAxisDomain,
137
137
  mainAxisTickFormat: "~s",
package/dist/components/UTGraph/report.schema.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "http://json-schema.org/draft-07/schema#",
3
3
  "$id": "https://utgraph.dev/schemas/report.schema.json",
4
- "title": "UTGraph Report",
4
+ "title": "UTGraph",
5
5
  "type": "object",
6
6
  "additionalProperties": false,
7
7
  "required": ["meta", "datasets"],
@@ -9,20 +9,32 @@
9
9
  "meta": {
10
10
  "type": "object",
11
11
  "additionalProperties": false,
12
- "required": ["code", "enabled", "report_type", "tabs"],
12
+ "required": ["id", "code", "chart_layout", "chart_tabs"],
13
13
  "properties": {
14
- "code": { "type": "string", "description": "unique identifier for this graph" },
15
- "enabled": { "type": "boolean", "default": true },
16
- "report_type": { "type": "string", "enum": ["chart", "pie"], "default": "chart" },
17
- "tabs": {
14
+ "id": { "type": "number", "description": "identifier for this graph" },
15
+ "code": { "type": "string", "description": "code for this graph" },
16
+ "chart_layout": { "type": "string", "enum": ["cartesian", "radial"], "default": "cartesian" },
17
+ "chart_tabs": {
18
18
  "type": "array",
19
19
  "minItems": 1,
20
20
  "items": {
21
21
  "type": "object",
22
22
  "additionalProperties": false,
23
- "required": ["code", "name", "icon", "orientation", "mainAxis", "crossAxes", "subitems_catalog"],
23
+ "required": [
24
+ "id",
25
+ "code",
26
+ "order",
27
+ "name",
28
+ "icon",
29
+ "orientation",
30
+ "domain",
31
+ "ranges",
32
+ "subitems"
33
+ ],
24
34
  "properties": {
35
+ "id": { "type": "number", "description": "identifier for this tab" },
25
36
  "code": { "type": "string", "description": "must match a dataset code from datasets" },
37
+ "order": { "type": "number", "description": "order of this tab" },
26
38
  "name": { "type": "string" },
27
39
  "tooltip": { "type": "string" },
28
40
  "icon": { "type": "string" },
@@ -31,7 +43,7 @@
31
43
  "enum": ["horizontal", "vertical"],
32
44
  "default": "vertical"
33
45
  },
34
- "mainAxis": {
46
+ "domain": {
35
47
  "type": "object",
36
48
  "additionalProperties": false,
37
49
  "required": ["binding"],
@@ -40,11 +52,11 @@
40
52
  "type": "string",
41
53
  "enum": ["categorical", "numerical"],
42
54
  "default": "categorical",
43
- "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)."
55
+ "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)."
44
56
  }
45
57
  }
46
58
  },
47
- "crossAxes": {
59
+ "ranges": {
48
60
  "type": "object",
49
61
  "additionalProperties": false,
50
62
  "properties": {
@@ -70,7 +82,7 @@
70
82
  }
71
83
  }
72
84
  },
73
- "subitems_catalog": {
85
+ "subitems": {
74
86
  "type": "array",
75
87
  "minItems": 1,
76
88
  "description": "First dimension: clusters (side-by-side). Second dimension: series (stacked)",
@@ -80,22 +92,21 @@
80
92
  "items": {
81
93
  "type": "object",
82
94
  "additionalProperties": false,
83
- "required": ["name", "type", "crossAxis", "bindings"],
95
+ "required": ["name", "type", "range", "bindings"],
84
96
  "properties": {
85
97
  "name": { "type": "string" },
86
98
  "type": { "type": "string", "enum": ["bar", "line", "point"] },
87
- "crossAxis": { "type": "string", "enum": ["left", "right"], "default": "left" },
99
+ "range": { "type": "string", "enum": ["left", "right"], "default": "left" },
88
100
  "bindings": {
89
101
  "type": "object",
90
102
  "description": "defines how to bind each subitem attribute to the dataset. ",
91
103
  "additionalProperties": false,
92
- "required": ["crossAxis"],
93
104
  "properties": {
94
- "crossAxis": {
105
+ "range": {
95
106
  "type": "string",
96
107
  "description": "REQUIRED for all series. Defines the placement of the element in the cross axis. Must match a dataset subitem code"
97
108
  },
98
- "mainAxis": {
109
+ "domain": {
99
110
  "type": "string",
100
111
  "description": "REQUIRED, only for numerical binding. Defines the placement of the element in the main axis. Must match a dataset subitem code"
101
112
  },
@@ -112,7 +123,7 @@
112
123
  }
113
124
  }
114
125
  },
115
- "ui_options": {
126
+ "configuration": {
116
127
  "type": "object",
117
128
  "additionalProperties": false,
118
129
  "properties": {
@@ -120,22 +131,22 @@
120
131
  "type": "object",
121
132
  "additionalProperties": false,
122
133
  "properties": {
123
- "crossAxisLeftTicks": {
134
+ "rangeLeftTicks": {
124
135
  "type": "number",
125
136
  "default": 4,
126
137
  "description": "defines the number of ticks in the left cross axis"
127
138
  },
128
- "crossAxisRightTicks": {
139
+ "rangeRightTicks": {
129
140
  "type": "number",
130
141
  "default": 4,
131
142
  "description": "defines the number of ticks in the right cross axis"
132
143
  },
133
- "crossAxisLeftTickFormat": {
144
+ "rangeLeftTickFormat": {
134
145
  "type": "string",
135
146
  "default": "~s",
136
147
  "description": "defines the tick format in the left cross axis"
137
148
  },
138
- "crossAxisRightTickFormat": {
149
+ "rangeRightTickFormat": {
139
150
  "type": "string",
140
151
  "default": "~s",
141
152
  "description": "defines the tick format in the right cross axis"
@@ -162,22 +173,22 @@
162
173
  "items": {
163
174
  "type": "object",
164
175
  "additionalProperties": false,
165
- "required": ["code", "mainAxis"],
176
+ "required": ["code", "domain"],
166
177
  "properties": {
167
178
  "code": { "type": "string", "description": "must match a tab code from meta" },
168
- "mainAxis": {
179
+ "domain": {
169
180
  "type": "array",
170
181
  "minItems": 1,
171
182
  "items": {
172
183
  "type": "object",
173
184
  "additionalProperties": false,
174
- "required": ["name", "subitems"],
185
+ "required": ["domain_value", "concepts"],
175
186
  "properties": {
176
- "name": {
187
+ "domain_value": {
177
188
  "type": "string",
178
189
  "description": "label to display below this category's main axis"
179
190
  },
180
- "subitems": {
191
+ "concepts": {
181
192
  "type": "array",
182
193
  "minItems": 1,
183
194
  "items": {
package/dist/components/UTGraph/styles.module.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  $TOOLTIP_SIZE: 17px;
2
2
 
3
3
  .container {
4
+ flex: 1;
4
5
  border-radius: 8px;
5
6
  display: flex;
6
7
  flex-direction: column;
package/dist/components/UTGraph/utils.js CHANGED
@@ -10,8 +10,8 @@ const computeCrossAxisDomain = (tab, dataset) => {
10
10
  const {
11
11
  yMin,
12
12
  yMax
13
- } = dataset.mainAxis.reduce((acc, record) => {
14
- const clusterMaxValues = tab.subitems_catalog.map(cluster => {
13
+ } = dataset.domain.reduce((acc, record) => {
14
+ const clusterMaxValues = tab.subitems.map(cluster => {
15
15
  const typeGroups = cluster.reduce((groups, series) => {
16
16
  if (!groups[series.type]) groups[series.type] = [];
17
17
  groups[series.type].push(series);
@@ -20,12 +20,12 @@ const computeCrossAxisDomain = (tab, dataset) => {
20
20
  const typeSums = Object.entries(typeGroups).map(_ref => {
21
21
  let [type, typeSeries] = _ref;
22
22
  const positiveSum = typeSeries.map(series => {
23
- var _record$subitems$find, _record$subitems$find2;
24
- 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;
23
+ var _record$concepts$find, _record$concepts$find2;
24
+ 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;
25
25
  }).filter(Number.isFinite).reduce((sum, v) => v >= 0 ? sum + v : sum, 0);
26
26
  const negativeSum = typeSeries.map(series => {
27
- var _record$subitems$find3, _record$subitems$find4;
28
- 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;
27
+ var _record$concepts$find3, _record$concepts$find4;
28
+ 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;
29
29
  }).filter(Number.isFinite).reduce((sum, v) => v < 0 ? sum + v : sum, 0);
30
30
  return {
31
31
  type,
@@ -55,9 +55,9 @@ exports.computeCrossAxisDomain = computeCrossAxisDomain;
55
55
  const computeCrossAxisDomainForSide = (tab, dataset, side) => {
56
56
  const filteredTab = {
57
57
  ...tab,
58
- subitems_catalog: tab.subitems_catalog.map(cluster => cluster.filter(series => (series.crossAxis || _constants.LEFT_SIDE) === side))
58
+ subitems: tab.subitems.map(cluster => cluster.filter(series => (series.range || _constants.LEFT_SIDE) === side))
59
59
  };
60
- filteredTab.subitems_catalog = filteredTab.subitems_catalog.filter(cluster => cluster.length > 0);
60
+ filteredTab.subitems = filteredTab.subitems.filter(cluster => cluster.length > 0);
61
61
  return computeCrossAxisDomain(filteredTab, dataset);
62
62
  };
63
63
  exports.computeCrossAxisDomainForSide = computeCrossAxisDomainForSide;
@@ -72,8 +72,8 @@ exports.applyHeadroom = applyHeadroom;
72
72
  const getValuesMapByCategory = dataset => {
73
73
  const map = new Map();
74
74
  if (!dataset) return map;
75
- dataset.mainAxis.forEach(record => {
76
- map.set(record.name, Object.fromEntries(record.subitems.map(datum => [datum.code, datum.value])));
75
+ dataset.domain.forEach(record => {
76
+ map.set(record.domain_value, Object.fromEntries(record.concepts.map(datum => [datum.code, datum.value])));
77
77
  });
78
78
  return map;
79
79
  };
@@ -81,10 +81,10 @@ exports.getValuesMapByCategory = getValuesMapByCategory;
81
81
  const detectAxisSides = tab => {
82
82
  let hasLeft = false;
83
83
  let hasRight = false;
84
- tab.subitems_catalog.forEach(cluster => {
84
+ tab.subitems.forEach(cluster => {
85
85
  cluster.forEach(s => {
86
86
  if (s.type === _constants.LINE_TYPE || s.type === _constants.BAR_TYPE) {
87
- const side = s.crossAxis || _constants.LEFT_SIDE;
87
+ const side = s.range || _constants.LEFT_SIDE;
88
88
  if (side === _constants.LEFT_SIDE) hasLeft = true;
89
89
  if (side === _constants.RIGHT_SIDE) hasRight = true;
90
90
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@widergy/energy-ui",
3
- "version": "3.114.0",
3
+ "version": "3.114.1",
4
4
  "description": "Widergy Web Components",
5
5
  "author": "widergy",
6
6
  "license": "MIT",