@visionaris-bruno/vs-echarts 6.5.2 → 7.1.0
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { provideEchartsCore, NgxEchartsDirective } from 'ngx-echarts';
|
|
2
2
|
import * as echarts from 'echarts/core';
|
|
3
|
-
import { BarChart, PieChart, LineChart, ScatterChart, FunnelChart } from 'echarts/charts';
|
|
3
|
+
import { BarChart, PieChart, LineChart, ScatterChart, FunnelChart, SunburstChart } from 'echarts/charts';
|
|
4
4
|
import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, GraphicComponent, ToolboxComponent, PolarComponent } from 'echarts/components';
|
|
5
5
|
import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
|
|
6
6
|
import * as i0 from '@angular/core';
|
|
@@ -65,6 +65,7 @@ function initializeEcharts() {
|
|
|
65
65
|
LineChart,
|
|
66
66
|
ScatterChart,
|
|
67
67
|
FunnelChart,
|
|
68
|
+
SunburstChart,
|
|
68
69
|
TitleComponent,
|
|
69
70
|
TooltipComponent,
|
|
70
71
|
GridComponent,
|
|
@@ -156,7 +157,10 @@ function defaultOptionsOverrides() {
|
|
|
156
157
|
},
|
|
157
158
|
funnel: {
|
|
158
159
|
series: {}
|
|
159
|
-
}
|
|
160
|
+
},
|
|
161
|
+
sunburst: {
|
|
162
|
+
series: {},
|
|
163
|
+
},
|
|
160
164
|
};
|
|
161
165
|
}
|
|
162
166
|
|
|
@@ -393,7 +397,7 @@ function getLegendOptions(overrides) {
|
|
|
393
397
|
return merge({}, defaults, overrides);
|
|
394
398
|
}
|
|
395
399
|
function getCategoryAxisOptions(overrides) {
|
|
396
|
-
const categories = overrides?.data
|
|
400
|
+
const categories = resolveCategoryNames(overrides?.data);
|
|
397
401
|
const autoRotate = categories.length > 10 ? 45 : 0;
|
|
398
402
|
const defaults = {
|
|
399
403
|
type: 'category',
|
|
@@ -416,7 +420,7 @@ function getCategoryAxisOptions(overrides) {
|
|
|
416
420
|
}
|
|
417
421
|
}
|
|
418
422
|
};
|
|
419
|
-
return merge({}, defaults, overrides);
|
|
423
|
+
return merge({}, defaults, { ...overrides, data: categories });
|
|
420
424
|
}
|
|
421
425
|
function getValueAxisOptions(overrides) {
|
|
422
426
|
const defaults = {
|
|
@@ -582,6 +586,129 @@ function applyLineSelectionStyle(series, selectedCategoryIndex, selectedSeriesIn
|
|
|
582
586
|
};
|
|
583
587
|
});
|
|
584
588
|
}
|
|
589
|
+
/**
|
|
590
|
+
* Resolves the unique key of a category safely.
|
|
591
|
+
*/
|
|
592
|
+
function getCategoryKey(categories, index) {
|
|
593
|
+
if (!categories || !categories[index]) {
|
|
594
|
+
return String(index);
|
|
595
|
+
}
|
|
596
|
+
const node = categories[index];
|
|
597
|
+
return node.key || node.name || String(index);
|
|
598
|
+
}
|
|
599
|
+
/**
|
|
600
|
+
* Resolves the numeric value from a series data point.
|
|
601
|
+
*/
|
|
602
|
+
function getCellValue(val) {
|
|
603
|
+
if (val === undefined || val === null)
|
|
604
|
+
return 0;
|
|
605
|
+
return val;
|
|
606
|
+
}
|
|
607
|
+
function flattenCategoriesToFirstLevel(categories) {
|
|
608
|
+
if (!categories)
|
|
609
|
+
return [];
|
|
610
|
+
return categories.map(cat => ({
|
|
611
|
+
name: cat.name,
|
|
612
|
+
key: cat.key
|
|
613
|
+
}));
|
|
614
|
+
}
|
|
615
|
+
function getLeafIndicesMap(categories) {
|
|
616
|
+
let leafCount = 0;
|
|
617
|
+
const topLevelLeaves = [];
|
|
618
|
+
const countLeaves = (node) => {
|
|
619
|
+
if (!node.children || node.children.length === 0) {
|
|
620
|
+
return 1;
|
|
621
|
+
}
|
|
622
|
+
let sum = 0;
|
|
623
|
+
for (const child of node.children) {
|
|
624
|
+
sum += countLeaves(child);
|
|
625
|
+
}
|
|
626
|
+
return sum;
|
|
627
|
+
};
|
|
628
|
+
for (const cat of categories) {
|
|
629
|
+
const leavesUnderCat = countLeaves(cat);
|
|
630
|
+
topLevelLeaves.push({
|
|
631
|
+
start: leafCount,
|
|
632
|
+
end: leafCount + leavesUnderCat
|
|
633
|
+
});
|
|
634
|
+
leafCount += leavesUnderCat;
|
|
635
|
+
}
|
|
636
|
+
return {
|
|
637
|
+
topLevelLeaves,
|
|
638
|
+
totalLeaves: leafCount
|
|
639
|
+
};
|
|
640
|
+
}
|
|
641
|
+
function collectLeafSeries(nodes, parentNamePath = []) {
|
|
642
|
+
const leaves = [];
|
|
643
|
+
for (const node of nodes) {
|
|
644
|
+
const currentPath = [...parentNamePath, node.name];
|
|
645
|
+
if (node.children && node.children.length > 0) {
|
|
646
|
+
leaves.push(...collectLeafSeries(node.children, currentPath));
|
|
647
|
+
}
|
|
648
|
+
else {
|
|
649
|
+
const combinedName = currentPath.join(' ');
|
|
650
|
+
leaves.push({
|
|
651
|
+
...node,
|
|
652
|
+
name: combinedName
|
|
653
|
+
});
|
|
654
|
+
}
|
|
655
|
+
}
|
|
656
|
+
return leaves;
|
|
657
|
+
}
|
|
658
|
+
function flattenEChartData(data) {
|
|
659
|
+
if (!data)
|
|
660
|
+
return { categories: [], series: [] };
|
|
661
|
+
const categories = data.categories || [];
|
|
662
|
+
const series = data.series || [];
|
|
663
|
+
const topLevelCategories = flattenCategoriesToFirstLevel(categories);
|
|
664
|
+
const { topLevelLeaves } = getLeafIndicesMap(categories);
|
|
665
|
+
const flatSeries = collectLeafSeries(series).map(s => {
|
|
666
|
+
const aggregatedData = [];
|
|
667
|
+
for (const range of topLevelLeaves) {
|
|
668
|
+
let sum = 0;
|
|
669
|
+
for (let j = range.start; j < range.end; j++) {
|
|
670
|
+
sum += s.data[j] ?? 0;
|
|
671
|
+
}
|
|
672
|
+
aggregatedData.push(sum);
|
|
673
|
+
}
|
|
674
|
+
return {
|
|
675
|
+
...s,
|
|
676
|
+
data: aggregatedData
|
|
677
|
+
};
|
|
678
|
+
});
|
|
679
|
+
return {
|
|
680
|
+
categories: topLevelCategories,
|
|
681
|
+
series: flatSeries
|
|
682
|
+
};
|
|
683
|
+
}
|
|
684
|
+
/**
|
|
685
|
+
* Normalizes category nodes into an array of string names for category axes.
|
|
686
|
+
*/
|
|
687
|
+
function resolveCategoryNames(categories) {
|
|
688
|
+
if (!categories)
|
|
689
|
+
return [];
|
|
690
|
+
return categories.map(c => {
|
|
691
|
+
if (!c)
|
|
692
|
+
return '';
|
|
693
|
+
if (typeof c === 'string')
|
|
694
|
+
return c;
|
|
695
|
+
if (typeof c === 'object' && 'name' in c)
|
|
696
|
+
return c.name;
|
|
697
|
+
return String(c);
|
|
698
|
+
});
|
|
699
|
+
}
|
|
700
|
+
/**
|
|
701
|
+
* Maps categories and series data into a flat array of objects suitable for Pie/Ring/Funnel charts.
|
|
702
|
+
*/
|
|
703
|
+
function mapToChartItems(categories, seriesNode) {
|
|
704
|
+
if (!categories || !seriesNode || !seriesNode.data)
|
|
705
|
+
return [];
|
|
706
|
+
return categories.map((catNode, catIndex) => ({
|
|
707
|
+
name: catNode.name,
|
|
708
|
+
value: getCellValue(seriesNode.data[catIndex]),
|
|
709
|
+
originalMeassureKey: seriesNode.originalKey || getCategoryKey(categories, catIndex)
|
|
710
|
+
}));
|
|
711
|
+
}
|
|
585
712
|
/**
|
|
586
713
|
* Formatter generator for 'item' trigger strategy in tooltips.
|
|
587
714
|
*/
|
|
@@ -589,11 +716,12 @@ function getItemTooltipFormatter(data, formatCellValue) {
|
|
|
589
716
|
const totalSeries = data.series.length;
|
|
590
717
|
return (params) => {
|
|
591
718
|
const seriesObj = data.series[params.seriesIndex];
|
|
592
|
-
const key = params.data?.originalMeassureKey || seriesObj?.originalKey || (data.
|
|
719
|
+
const key = params.data?.originalMeassureKey || seriesObj?.originalKey || getCategoryKey(data.categories, params.dataIndex);
|
|
593
720
|
const valFormatted = formatCellValue(params.value, key);
|
|
721
|
+
//TODO: Unificar salida del tooltip
|
|
594
722
|
if (params.percent !== undefined) {
|
|
595
|
-
const seriesHeader = totalSeries > 1 ?
|
|
596
|
-
return
|
|
723
|
+
const seriesHeader = totalSeries > 1 ? `${params.marker}${params.seriesName}` : '';
|
|
724
|
+
return `<div style="text-align: center;"><b>${params.name}</b><br/>${seriesHeader}<br/> <b>${valFormatted}</b> (${params.percent}%)</div>`;
|
|
597
725
|
}
|
|
598
726
|
return `<div style="text-align: center;"><b>${params.name}</b><br/>${params.marker} ${params.seriesName}<br/><b>${valFormatted}</b></div>`;
|
|
599
727
|
};
|
|
@@ -614,7 +742,7 @@ function getAxisTooltipFormatter(data, formatCellValue) {
|
|
|
614
742
|
const seriesObj = data.series[item.seriesIndex];
|
|
615
743
|
if (!seriesObj)
|
|
616
744
|
continue;
|
|
617
|
-
const key = seriesObj.originalKey || (data.
|
|
745
|
+
const key = seriesObj.originalKey || getCategoryKey(data.categories, item.dataIndex);
|
|
618
746
|
const valFormatted = formatCellValue(item.value, key);
|
|
619
747
|
html += `${item.marker} ${item.seriesName}: <b>${valFormatted}</b><br/>`;
|
|
620
748
|
}
|
|
@@ -648,6 +776,40 @@ function getCommons(opts) {
|
|
|
648
776
|
common.color = (palette && palette.length > 0) ? palette : getDefaultPalette();
|
|
649
777
|
return common;
|
|
650
778
|
}
|
|
779
|
+
/**
|
|
780
|
+
* Maps hierarchical category nodes and a single series data array into a nested structure
|
|
781
|
+
* suitable for Sunburst/Treemap charts.
|
|
782
|
+
*/
|
|
783
|
+
function mapHierarchicalData(categories, seriesData) {
|
|
784
|
+
if (!categories || !seriesData) {
|
|
785
|
+
return [];
|
|
786
|
+
}
|
|
787
|
+
let leafIndex = 0;
|
|
788
|
+
function traverse(nodes) {
|
|
789
|
+
return nodes.map(cat => {
|
|
790
|
+
const node = {
|
|
791
|
+
name: cat.name,
|
|
792
|
+
};
|
|
793
|
+
if (cat.children && cat.children.length > 0) {
|
|
794
|
+
node.children = traverse(cat.children);
|
|
795
|
+
}
|
|
796
|
+
else {
|
|
797
|
+
// Leaf node: extract and assign value sequentially from seriesData
|
|
798
|
+
const dataVal = seriesData[leafIndex];
|
|
799
|
+
if (dataVal !== undefined && dataVal !== null) {
|
|
800
|
+
const value = typeof dataVal === 'object' && 'value' in dataVal ? dataVal.value : dataVal;
|
|
801
|
+
node.value = getCellValue(value);
|
|
802
|
+
}
|
|
803
|
+
else {
|
|
804
|
+
node.value = 0;
|
|
805
|
+
}
|
|
806
|
+
leafIndex++;
|
|
807
|
+
}
|
|
808
|
+
return node;
|
|
809
|
+
});
|
|
810
|
+
}
|
|
811
|
+
return traverse(categories);
|
|
812
|
+
}
|
|
651
813
|
|
|
652
814
|
/**
|
|
653
815
|
* RingBuilder
|
|
@@ -675,9 +837,10 @@ class RingBuilder {
|
|
|
675
837
|
merge(this.result, common);
|
|
676
838
|
}
|
|
677
839
|
addSeries(data, overrides) {
|
|
678
|
-
|
|
840
|
+
const flatData = flattenEChartData(data);
|
|
841
|
+
if (!flatData || !flatData.series.length)
|
|
679
842
|
return;
|
|
680
|
-
const totalRings =
|
|
843
|
+
const totalRings = flatData.series.length; // Cada serie es un anillo
|
|
681
844
|
// Configuración dinámica de radios y márgenes
|
|
682
845
|
const margin = totalRings > 1 ? Math.max(0.5, 2.5 - (totalRings * 0.1)) : 0;
|
|
683
846
|
const minInnerRadius = totalRings === 1 ? 45 : (totalRings > 5 ? Math.max(15, 40 - (totalRings * 1.2)) : 40);
|
|
@@ -686,14 +849,10 @@ class RingBuilder {
|
|
|
686
849
|
const thickness = availableSpan / totalRings;
|
|
687
850
|
const borderRadius = totalRings === 1 ? 10 : Math.max(2, Math.min(10, thickness * 0.8));
|
|
688
851
|
const borderWidth = totalRings === 1 ? 2 : Math.max(0.5, Math.min(2, thickness * 0.15));
|
|
689
|
-
const series =
|
|
852
|
+
const series = flatData.series.map((s, ringIndex) => {
|
|
690
853
|
const inner = minInnerRadius + (ringIndex * (thickness + margin));
|
|
691
854
|
const outer = inner + thickness;
|
|
692
|
-
const pieData =
|
|
693
|
-
name: catName,
|
|
694
|
-
value: s.data[catIndex],
|
|
695
|
-
originalMeassureKey: s.originalKey || (data.categoryKeys ? data.categoryKeys[catIndex] : '')
|
|
696
|
-
}));
|
|
855
|
+
const pieData = mapToChartItems(flatData.categories, s);
|
|
697
856
|
const dynamicRingSeriesOptions = {
|
|
698
857
|
name: s.name,
|
|
699
858
|
radius: [`${inner}%`, `${outer}%`],
|
|
@@ -747,8 +906,9 @@ class RingBuilder {
|
|
|
747
906
|
}];
|
|
748
907
|
}
|
|
749
908
|
addTooltip(data, overrides) {
|
|
909
|
+
const flatData = flattenEChartData(data);
|
|
750
910
|
merge(overrides, {
|
|
751
|
-
formatter: getTooltipFormatter(overrides.trigger,
|
|
911
|
+
formatter: getTooltipFormatter(overrides.trigger, flatData, this.formatCellValue.bind(this)),
|
|
752
912
|
});
|
|
753
913
|
const tooltip = getTooltipOptions(overrides);
|
|
754
914
|
this.result.tooltip = tooltip;
|
|
@@ -927,6 +1087,21 @@ class VSECDirector {
|
|
|
927
1087
|
this.builder.addTooltip(data, overrides.tooltip);
|
|
928
1088
|
this.builder.addLegend();
|
|
929
1089
|
}
|
|
1090
|
+
makeSunburst(data, overrides, opts = {}) {
|
|
1091
|
+
const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, } = opts;
|
|
1092
|
+
this.builder.reset();
|
|
1093
|
+
// El orden importa, primero callbacks y despues componentes.
|
|
1094
|
+
this.builder.setValueFormatter(valueFormatter);
|
|
1095
|
+
this.builder.setPalette(palette);
|
|
1096
|
+
this.builder.setColorResolver(colorResolver);
|
|
1097
|
+
const product = this.builder.baseProduct;
|
|
1098
|
+
const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
|
|
1099
|
+
// chart components
|
|
1100
|
+
this.builder.addCommons();
|
|
1101
|
+
this.builder.addSeries(data, seriesOverrides);
|
|
1102
|
+
this.builder.addTooltip(data, overrides.tooltip);
|
|
1103
|
+
// this.builder.addLegend();
|
|
1104
|
+
}
|
|
930
1105
|
}
|
|
931
1106
|
|
|
932
1107
|
/**
|
|
@@ -1100,17 +1275,14 @@ class PieBuilder {
|
|
|
1100
1275
|
merge(this.result, common);
|
|
1101
1276
|
}
|
|
1102
1277
|
addSeries(data, overrides) {
|
|
1103
|
-
|
|
1278
|
+
const flatData = flattenEChartData(data);
|
|
1279
|
+
if (!flatData || !flatData.series.length)
|
|
1104
1280
|
return;
|
|
1105
|
-
const totalSeries =
|
|
1281
|
+
const totalSeries = flatData.series.length;
|
|
1106
1282
|
let series = [];
|
|
1107
1283
|
if (totalSeries === 1) {
|
|
1108
|
-
const s =
|
|
1109
|
-
const pieData =
|
|
1110
|
-
name: catName,
|
|
1111
|
-
value: s.data[catIndex],
|
|
1112
|
-
originalMeassureKey: s.originalKey || (data.categoryKeys ? data.categoryKeys[catIndex] : '')
|
|
1113
|
-
}));
|
|
1284
|
+
const s = flatData.series[0];
|
|
1285
|
+
const pieData = mapToChartItems(flatData.categories, s);
|
|
1114
1286
|
const dynamicPieSeriesOptions = {
|
|
1115
1287
|
name: s.name,
|
|
1116
1288
|
type: 'pie',
|
|
@@ -1139,12 +1311,8 @@ class PieBuilder {
|
|
|
1139
1311
|
const numRings = totalSeries - 1;
|
|
1140
1312
|
const availableSpan = maxOuterRadius - (centerPieRadius + margin) - (margin * (numRings - 1));
|
|
1141
1313
|
const thickness = availableSpan / numRings;
|
|
1142
|
-
series =
|
|
1143
|
-
const pieData =
|
|
1144
|
-
name: catName,
|
|
1145
|
-
value: s.data[catIndex],
|
|
1146
|
-
originalMeassureKey: s.originalKey || (data.categoryKeys ? data.categoryKeys[catIndex] : '')
|
|
1147
|
-
}));
|
|
1314
|
+
series = flatData.series.map((s, idx) => {
|
|
1315
|
+
const pieData = mapToChartItems(flatData.categories, s);
|
|
1148
1316
|
let radius;
|
|
1149
1317
|
let labelPosition;
|
|
1150
1318
|
let labelLineShow;
|
|
@@ -1189,8 +1357,9 @@ class PieBuilder {
|
|
|
1189
1357
|
this.result.series = series;
|
|
1190
1358
|
}
|
|
1191
1359
|
addTooltip(data, overrides) {
|
|
1360
|
+
const flatData = flattenEChartData(data);
|
|
1192
1361
|
merge(overrides, {
|
|
1193
|
-
formatter: getTooltipFormatter(overrides.trigger,
|
|
1362
|
+
formatter: getTooltipFormatter(overrides.trigger, flatData, this.formatCellValue.bind(this)),
|
|
1194
1363
|
});
|
|
1195
1364
|
const tooltip = getTooltipOptions(overrides);
|
|
1196
1365
|
this.result.tooltip = tooltip;
|
|
@@ -1325,14 +1494,11 @@ class FunnelBuilder {
|
|
|
1325
1494
|
merge(this.result, common);
|
|
1326
1495
|
}
|
|
1327
1496
|
addSeries(data, overrides) {
|
|
1328
|
-
|
|
1497
|
+
const flatData = flattenEChartData(data);
|
|
1498
|
+
if (!flatData || !flatData.series.length)
|
|
1329
1499
|
return;
|
|
1330
|
-
const series =
|
|
1331
|
-
const funnelData =
|
|
1332
|
-
name: catName,
|
|
1333
|
-
value: s.data[catIndex],
|
|
1334
|
-
originalMeassureKey: s.originalKey || (data.categoryKeys ? data.categoryKeys[catIndex] : '')
|
|
1335
|
-
}));
|
|
1500
|
+
const series = flatData.series.map((s, seriesIndex) => {
|
|
1501
|
+
const funnelData = mapToChartItems(flatData.categories, s);
|
|
1336
1502
|
let left = '10%';
|
|
1337
1503
|
let width = '80%';
|
|
1338
1504
|
const seriesValues = s.data.filter(val => typeof val === 'number');
|
|
@@ -1358,8 +1524,9 @@ class FunnelBuilder {
|
|
|
1358
1524
|
this.result.series = series.shift();
|
|
1359
1525
|
}
|
|
1360
1526
|
addTooltip(data, overrides) {
|
|
1527
|
+
const flatData = flattenEChartData(data);
|
|
1361
1528
|
merge(overrides, {
|
|
1362
|
-
formatter: getTooltipFormatter(overrides.trigger,
|
|
1529
|
+
formatter: getTooltipFormatter(overrides.trigger, flatData, this.formatCellValue.bind(this)),
|
|
1363
1530
|
});
|
|
1364
1531
|
const tooltip = getTooltipOptions(overrides);
|
|
1365
1532
|
this.result.tooltip = tooltip;
|
|
@@ -1513,15 +1680,16 @@ class EChartBuilder {
|
|
|
1513
1680
|
* @returns
|
|
1514
1681
|
*/
|
|
1515
1682
|
addSeries(data, overrides) {
|
|
1516
|
-
|
|
1683
|
+
const flatData = flattenEChartData(data);
|
|
1684
|
+
if (!flatData || !flatData.series.length)
|
|
1517
1685
|
return;
|
|
1518
|
-
const series =
|
|
1686
|
+
const series = flatData.series.map((s) => {
|
|
1519
1687
|
const dynamicOverrides = {
|
|
1520
1688
|
name: s.name,
|
|
1521
1689
|
data: s.data,
|
|
1522
1690
|
label: {
|
|
1523
1691
|
formatter: (params) => {
|
|
1524
|
-
const key = s.originalKey || (
|
|
1692
|
+
const key = s.originalKey || getCategoryKey(flatData.categories, params.dataIndex);
|
|
1525
1693
|
return this.formatCellValue(params.value, key);
|
|
1526
1694
|
}
|
|
1527
1695
|
}
|
|
@@ -1542,8 +1710,9 @@ class EChartBuilder {
|
|
|
1542
1710
|
*/
|
|
1543
1711
|
addTooltip(data, overrides) {
|
|
1544
1712
|
// inyecto formateador a overrides de tooltip
|
|
1713
|
+
const flatData = flattenEChartData(data);
|
|
1545
1714
|
merge$1(overrides, {
|
|
1546
|
-
formatter: getTooltipFormatter(overrides.trigger,
|
|
1715
|
+
formatter: getTooltipFormatter(overrides.trigger, flatData, this.formatCellValue.bind(this)),
|
|
1547
1716
|
});
|
|
1548
1717
|
const tooltip = getTooltipOptions(overrides);
|
|
1549
1718
|
this.result.tooltip = tooltip;
|
|
@@ -1660,9 +1829,10 @@ class EChartBuilder {
|
|
|
1660
1829
|
}
|
|
1661
1830
|
// Utils
|
|
1662
1831
|
getCategoryAxisOptions(data, overrides) {
|
|
1832
|
+
const flatCategories = flattenCategoriesToFirstLevel(data.categories);
|
|
1663
1833
|
const categoryAxisOptionsOverrides = {
|
|
1664
1834
|
...overrides.categoryAxis[0],
|
|
1665
|
-
data:
|
|
1835
|
+
data: resolveCategoryNames(flatCategories),
|
|
1666
1836
|
};
|
|
1667
1837
|
const categoryAxisOptions = getCategoryAxisOptions(categoryAxisOptionsOverrides);
|
|
1668
1838
|
return categoryAxisOptions;
|
|
@@ -2087,6 +2257,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
2087
2257
|
], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts \n [options]=\"{}\"\n [initOpts]=\"initOptions\" \n [autoResize]=\"true\" \n (chartInit)=\"onChartInit($event)\" \n (chartClick)=\"onChartClick($event)\" \n (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
|
|
2088
2258
|
}], ctorParameters: () => [] });
|
|
2089
2259
|
|
|
2260
|
+
class SunburstBuilder {
|
|
2261
|
+
baseProduct;
|
|
2262
|
+
valueFormatter = (value) => value.toLocaleString();
|
|
2263
|
+
palette = [];
|
|
2264
|
+
// TODO: Hay que implementar un valor por defecto.
|
|
2265
|
+
colorResolver;
|
|
2266
|
+
result = {};
|
|
2267
|
+
constructor(baseProduct) {
|
|
2268
|
+
this.baseProduct = baseProduct;
|
|
2269
|
+
}
|
|
2270
|
+
reset() {
|
|
2271
|
+
this.result = {};
|
|
2272
|
+
}
|
|
2273
|
+
addSeries(data, overrides) {
|
|
2274
|
+
if (!data || !data.series || data.series.length === 0) {
|
|
2275
|
+
return;
|
|
2276
|
+
}
|
|
2277
|
+
const firstSeries = data.series[0];
|
|
2278
|
+
const sunburstData = mapHierarchicalData(data.categories, firstSeries.data);
|
|
2279
|
+
const dynamiSerieOptions = {
|
|
2280
|
+
name: firstSeries.name,
|
|
2281
|
+
data: sunburstData,
|
|
2282
|
+
};
|
|
2283
|
+
const serie = merge$1({}, dynamiSerieOptions, overrides);
|
|
2284
|
+
if (this.colorResolver) {
|
|
2285
|
+
if (!serie.itemStyle) {
|
|
2286
|
+
serie.itemStyle = {};
|
|
2287
|
+
}
|
|
2288
|
+
serie.itemStyle.color = this.colorResolver;
|
|
2289
|
+
}
|
|
2290
|
+
this.result.series = serie;
|
|
2291
|
+
}
|
|
2292
|
+
addTooltip(data, overrides) {
|
|
2293
|
+
merge$1(overrides, {
|
|
2294
|
+
formatter: getTooltipFormatter(overrides.trigger || 'item', data, this.valueFormatter),
|
|
2295
|
+
});
|
|
2296
|
+
const tooltip = getTooltipOptions(overrides);
|
|
2297
|
+
this.result.tooltip = tooltip;
|
|
2298
|
+
}
|
|
2299
|
+
addPolar() { }
|
|
2300
|
+
addXAxis(data, overrides, type) { }
|
|
2301
|
+
addYAxis(data, overrides, type) { }
|
|
2302
|
+
addRadiusAxis(data, overrides) { }
|
|
2303
|
+
addAngleAxis(data, overrides) { }
|
|
2304
|
+
addLegend() { }
|
|
2305
|
+
addCommons() {
|
|
2306
|
+
const opts = {
|
|
2307
|
+
palette: this.palette,
|
|
2308
|
+
};
|
|
2309
|
+
merge$1(this.result, getCommons(opts));
|
|
2310
|
+
}
|
|
2311
|
+
addGraphic() { }
|
|
2312
|
+
getResult() {
|
|
2313
|
+
return this.result;
|
|
2314
|
+
}
|
|
2315
|
+
;
|
|
2316
|
+
// Setters
|
|
2317
|
+
/**
|
|
2318
|
+
* Permite inyectar un formateador de valores externo.
|
|
2319
|
+
*/
|
|
2320
|
+
setValueFormatter(formatter) {
|
|
2321
|
+
if (formatter) {
|
|
2322
|
+
this.valueFormatter = formatter;
|
|
2323
|
+
}
|
|
2324
|
+
}
|
|
2325
|
+
/**
|
|
2326
|
+
* Permite inyectar una paleta de colores básica.
|
|
2327
|
+
*/
|
|
2328
|
+
setPalette(palette) {
|
|
2329
|
+
if (palette) {
|
|
2330
|
+
this.palette = palette;
|
|
2331
|
+
}
|
|
2332
|
+
}
|
|
2333
|
+
/**
|
|
2334
|
+
* Permite inyectar un resolver de colores dinámico.
|
|
2335
|
+
*/
|
|
2336
|
+
setColorResolver(resolver) {
|
|
2337
|
+
if (resolver) {
|
|
2338
|
+
this.colorResolver = resolver;
|
|
2339
|
+
}
|
|
2340
|
+
}
|
|
2341
|
+
}
|
|
2342
|
+
|
|
2343
|
+
class EChartsSunburstComponent extends BaseEchartsComponent {
|
|
2344
|
+
baseSeriesOptions = {
|
|
2345
|
+
type: 'sunburst',
|
|
2346
|
+
radius: [0, '85%'],
|
|
2347
|
+
sort: undefined,
|
|
2348
|
+
emphasis: {
|
|
2349
|
+
focus: 'ancestor'
|
|
2350
|
+
},
|
|
2351
|
+
levels: [
|
|
2352
|
+
{},
|
|
2353
|
+
{
|
|
2354
|
+
r0: '15%',
|
|
2355
|
+
itemStyle: {
|
|
2356
|
+
borderWidth: 2
|
|
2357
|
+
},
|
|
2358
|
+
label: {
|
|
2359
|
+
rotate: 'tangential'
|
|
2360
|
+
}
|
|
2361
|
+
},
|
|
2362
|
+
]
|
|
2363
|
+
};
|
|
2364
|
+
baseProduct = {
|
|
2365
|
+
chartKey: 'sunburst',
|
|
2366
|
+
baseOptions: {
|
|
2367
|
+
series: this.baseSeriesOptions,
|
|
2368
|
+
},
|
|
2369
|
+
};
|
|
2370
|
+
builder = new SunburstBuilder(this.baseProduct);
|
|
2371
|
+
director = new VSECDirector(this.builder);
|
|
2372
|
+
make() {
|
|
2373
|
+
const makeOpts = {
|
|
2374
|
+
palette: this.palette,
|
|
2375
|
+
colorResolver: this.colorResolver,
|
|
2376
|
+
valueFormatter: this.valueFormatter,
|
|
2377
|
+
};
|
|
2378
|
+
this.director.makeSunburst(this.data, this.optionsOverrides, makeOpts);
|
|
2379
|
+
}
|
|
2380
|
+
updateChartOptions() {
|
|
2381
|
+
if (!this.chartInstance)
|
|
2382
|
+
return;
|
|
2383
|
+
if (!this.data)
|
|
2384
|
+
return;
|
|
2385
|
+
this.make();
|
|
2386
|
+
const baseOptions = this.builder.getResult();
|
|
2387
|
+
this.triggerUpdate(baseOptions);
|
|
2388
|
+
}
|
|
2389
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsSunburstComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2390
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsSunburstComponent, isStandalone: true, selector: "vs-echarts-sunburst", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div\n class=\"echarts-container\"\n echarts\n [options]=\"{}\"\n [initOpts]=\"initOptions\"\n [autoResize]=\"true\"\n (chartInit)=\"onChartInit($event)\"\n (chartClick)=\"onChartClick($event)\"\n (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
|
|
2391
|
+
}
|
|
2392
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsSunburstComponent, decorators: [{
|
|
2393
|
+
type: Component,
|
|
2394
|
+
args: [{ selector: 'vs-echarts-sunburst', standalone: true, imports: [
|
|
2395
|
+
CommonModule,
|
|
2396
|
+
NgxEchartsDirective,
|
|
2397
|
+
], providers: [provideVSEcharts()], template: "<div\n class=\"echarts-container\"\n echarts\n [options]=\"{}\"\n [initOpts]=\"initOptions\"\n [autoResize]=\"true\"\n (chartInit)=\"onChartInit($event)\"\n (chartClick)=\"onChartClick($event)\"\n (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
|
|
2398
|
+
}] });
|
|
2399
|
+
|
|
2090
2400
|
// Interfaces de Inputs de Base EChart Component //
|
|
2091
2401
|
|
|
2092
2402
|
;
|
|
@@ -2101,5 +2411,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
2101
2411
|
* Generated bundle index. Do not edit.
|
|
2102
2412
|
*/
|
|
2103
2413
|
|
|
2104
|
-
export { BaseEchartsComponent, EChartsAreaComponent, EChartsAreaStackComponent, EChartsBarStackedComponent, EChartsBarStackedRadialComponent, EChartsHBarComponent, EChartsHBarStackedComponent, EchartsBarComponent, EchartsFunnelComponent, EchartsLineComponent, EchartsPieComponent, EchartsRingComponent, EchartsScatterComponent, defaultOptionsOverrides, initializeEcharts, provideVSEcharts };
|
|
2414
|
+
export { BaseEchartsComponent, EChartsAreaComponent, EChartsAreaStackComponent, EChartsBarStackedComponent, EChartsBarStackedRadialComponent, EChartsHBarComponent, EChartsHBarStackedComponent, EChartsSunburstComponent, EchartsBarComponent, EchartsFunnelComponent, EchartsLineComponent, EchartsPieComponent, EchartsRingComponent, EchartsScatterComponent, defaultOptionsOverrides, initializeEcharts, provideVSEcharts };
|
|
2105
2415
|
//# sourceMappingURL=visionaris-bruno-vs-echarts.mjs.map
|