@visionaris-bruno/vs-echarts 7.1.0 → 7.2.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.
|
@@ -242,9 +242,18 @@ class BaseEchartsComponent {
|
|
|
242
242
|
*/
|
|
243
243
|
onInputChanges(changes) {
|
|
244
244
|
if (changes['data'] || changes['optionsOverrides'] || changes['palette'] || changes['colorResolver'] || changes['valueFormatter']) {
|
|
245
|
-
this.
|
|
245
|
+
this.prepareOptions();
|
|
246
246
|
}
|
|
247
247
|
}
|
|
248
|
+
prepareOptions() {
|
|
249
|
+
if (!this.chartInstance)
|
|
250
|
+
return;
|
|
251
|
+
if (!this.data)
|
|
252
|
+
return;
|
|
253
|
+
this.make();
|
|
254
|
+
const baseOptions = this.builder.getResult();
|
|
255
|
+
this.triggerUpdate(baseOptions);
|
|
256
|
+
}
|
|
248
257
|
/**
|
|
249
258
|
* Gatilla actualización.
|
|
250
259
|
*
|
|
@@ -258,7 +267,7 @@ class BaseEchartsComponent {
|
|
|
258
267
|
*/
|
|
259
268
|
onChartInit(instance) {
|
|
260
269
|
this.chartInstance = instance;
|
|
261
|
-
this.
|
|
270
|
+
this.prepareOptions();
|
|
262
271
|
}
|
|
263
272
|
onChartClick(event) {
|
|
264
273
|
if (event.componentType === 'series') {
|
|
@@ -712,24 +721,24 @@ function mapToChartItems(categories, seriesNode) {
|
|
|
712
721
|
/**
|
|
713
722
|
* Formatter generator for 'item' trigger strategy in tooltips.
|
|
714
723
|
*/
|
|
715
|
-
function getItemTooltipFormatter(data, formatCellValue) {
|
|
724
|
+
function getItemTooltipFormatter(data, formatCellValue, opts) {
|
|
716
725
|
const totalSeries = data.series.length;
|
|
717
726
|
return (params) => {
|
|
727
|
+
const showSerieName = opts?.showSerieName ?? true;
|
|
718
728
|
const seriesObj = data.series[params.seriesIndex];
|
|
719
729
|
const key = params.data?.originalMeassureKey || seriesObj?.originalKey || getCategoryKey(data.categories, params.dataIndex);
|
|
720
730
|
const valFormatted = formatCellValue(params.value, key);
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
}
|
|
726
|
-
return `<div style="text-align: center;"><b>${params.name}</b><br/>${params.marker} ${params.seriesName}<br/><b>${valFormatted}</b></div>`;
|
|
731
|
+
const serieName = showSerieName ? `${params.marker} ${params.seriesName}<br/ >` : '';
|
|
732
|
+
const title = params.name;
|
|
733
|
+
const subtitle = (params.percent !== undefined && totalSeries <= 1) ? '' : serieName;
|
|
734
|
+
const percentText = params.percent !== undefined ? ` (${params.percent}%)` : '';
|
|
735
|
+
return `<div style="text-align: center;"><b>${title}</b><br/>${subtitle}<b>${valFormatted}</b>${percentText}</div>`;
|
|
727
736
|
};
|
|
728
737
|
}
|
|
729
738
|
/**
|
|
730
739
|
* Formatter generator for 'axis' trigger strategy in tooltips.
|
|
731
740
|
*/
|
|
732
|
-
function getAxisTooltipFormatter(data, formatCellValue) {
|
|
741
|
+
function getAxisTooltipFormatter(data, formatCellValue, opts) {
|
|
733
742
|
return (params) => {
|
|
734
743
|
if (!params)
|
|
735
744
|
return '';
|
|
@@ -752,10 +761,10 @@ function getAxisTooltipFormatter(data, formatCellValue) {
|
|
|
752
761
|
/**
|
|
753
762
|
* Unified tooltip formatter generator that selects the appropriate strategy based on the trigger.
|
|
754
763
|
*/
|
|
755
|
-
function getTooltipFormatter(trigger, data, formatCellValue) {
|
|
764
|
+
function getTooltipFormatter(trigger, data, formatCellValue, opts) {
|
|
756
765
|
return trigger === 'axis'
|
|
757
|
-
? getAxisTooltipFormatter(data, formatCellValue)
|
|
758
|
-
: getItemTooltipFormatter(data, formatCellValue);
|
|
766
|
+
? getAxisTooltipFormatter(data, formatCellValue, opts)
|
|
767
|
+
: getItemTooltipFormatter(data, formatCellValue, opts);
|
|
759
768
|
}
|
|
760
769
|
function getCommons(opts) {
|
|
761
770
|
const palette = opts?.palette ?? getDefaultPalette();
|
|
@@ -777,14 +786,41 @@ function getCommons(opts) {
|
|
|
777
786
|
return common;
|
|
778
787
|
}
|
|
779
788
|
/**
|
|
780
|
-
* Maps hierarchical category nodes and
|
|
789
|
+
* Maps hierarchical category nodes and an array of series into a nested structure
|
|
781
790
|
* suitable for Sunburst/Treemap charts.
|
|
791
|
+
* The categories form the levels closest to the center, and the series form the leaf level.
|
|
782
792
|
*/
|
|
783
|
-
function mapHierarchicalData(categories,
|
|
784
|
-
if (!categories
|
|
793
|
+
function mapHierarchicalData(categories, series) {
|
|
794
|
+
if (!categories) {
|
|
785
795
|
return [];
|
|
786
796
|
}
|
|
787
797
|
let leafIndex = 0;
|
|
798
|
+
function mapSeriesTree(seriesNodes, index) {
|
|
799
|
+
if (!seriesNodes) {
|
|
800
|
+
return [];
|
|
801
|
+
}
|
|
802
|
+
return seriesNodes.map(s => {
|
|
803
|
+
const node = {
|
|
804
|
+
name: s.name,
|
|
805
|
+
};
|
|
806
|
+
if (s.children && s.children.length > 0) {
|
|
807
|
+
node.children = mapSeriesTree(s.children, index);
|
|
808
|
+
}
|
|
809
|
+
else {
|
|
810
|
+
// Leaf series node: extract value from s.data[index]
|
|
811
|
+
const dataVal = s.data?.[index];
|
|
812
|
+
if (dataVal !== undefined && dataVal !== null) {
|
|
813
|
+
const value = typeof dataVal === 'object' && 'value' in dataVal ? dataVal.value : dataVal;
|
|
814
|
+
node.value = getCellValue(value);
|
|
815
|
+
}
|
|
816
|
+
else {
|
|
817
|
+
node.value = 0;
|
|
818
|
+
}
|
|
819
|
+
node.originalMeassureKey = s.originalKey;
|
|
820
|
+
}
|
|
821
|
+
return node;
|
|
822
|
+
});
|
|
823
|
+
}
|
|
788
824
|
function traverse(nodes) {
|
|
789
825
|
return nodes.map(cat => {
|
|
790
826
|
const node = {
|
|
@@ -794,11 +830,9 @@ function mapHierarchicalData(categories, seriesData) {
|
|
|
794
830
|
node.children = traverse(cat.children);
|
|
795
831
|
}
|
|
796
832
|
else {
|
|
797
|
-
// Leaf node:
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
const value = typeof dataVal === 'object' && 'value' in dataVal ? dataVal.value : dataVal;
|
|
801
|
-
node.value = getCellValue(value);
|
|
833
|
+
// Leaf category node: append the series tree as children
|
|
834
|
+
if (series && series.length > 0) {
|
|
835
|
+
node.children = mapSeriesTree(series, leafIndex);
|
|
802
836
|
}
|
|
803
837
|
else {
|
|
804
838
|
node.value = 0;
|
|
@@ -810,6 +844,24 @@ function mapHierarchicalData(categories, seriesData) {
|
|
|
810
844
|
}
|
|
811
845
|
return traverse(categories);
|
|
812
846
|
}
|
|
847
|
+
/**
|
|
848
|
+
* Calculates the maximum depth of a tree structure.
|
|
849
|
+
*/
|
|
850
|
+
function getTreeDepth(nodes) {
|
|
851
|
+
if (!nodes || nodes.length === 0) {
|
|
852
|
+
return 0;
|
|
853
|
+
}
|
|
854
|
+
let maxChildDepth = 0;
|
|
855
|
+
for (const node of nodes) {
|
|
856
|
+
if (node.children && node.children.length > 0) {
|
|
857
|
+
const d = getTreeDepth(node.children);
|
|
858
|
+
if (d > maxChildDepth) {
|
|
859
|
+
maxChildDepth = d;
|
|
860
|
+
}
|
|
861
|
+
}
|
|
862
|
+
}
|
|
863
|
+
return 1 + maxChildDepth;
|
|
864
|
+
}
|
|
813
865
|
|
|
814
866
|
/**
|
|
815
867
|
* RingBuilder
|
|
@@ -965,9 +1017,9 @@ class VSECDirector {
|
|
|
965
1017
|
//chart callbacks
|
|
966
1018
|
this.builder.setValueFormatter(valueFormatter);
|
|
967
1019
|
this.builder.setPalette(palette);
|
|
968
|
-
this.builder.
|
|
1020
|
+
this.builder.setColorResolver(colorResolver);
|
|
969
1021
|
const product = this.builder.baseProduct;
|
|
970
|
-
const seriesOverrides = merge$1(product.baseOptions.series, overrides[product.chartKey].series);
|
|
1022
|
+
const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
|
|
971
1023
|
// chart components
|
|
972
1024
|
this.builder.addCommons();
|
|
973
1025
|
this.builder.addSeries(data, seriesOverrides);
|
|
@@ -987,7 +1039,7 @@ class VSECDirector {
|
|
|
987
1039
|
//chart callbacks
|
|
988
1040
|
this.builder.setValueFormatter(valueFormatter);
|
|
989
1041
|
this.builder.setPalette(palette);
|
|
990
|
-
this.builder.
|
|
1042
|
+
this.builder.setColorResolver(colorResolver);
|
|
991
1043
|
const product = this.builder.baseProduct;
|
|
992
1044
|
const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
|
|
993
1045
|
// chart components
|
|
@@ -1010,7 +1062,7 @@ class VSECDirector {
|
|
|
1010
1062
|
//chart callbacks
|
|
1011
1063
|
this.builder.setValueFormatter(valueFormatter);
|
|
1012
1064
|
this.builder.setPalette(palette);
|
|
1013
|
-
this.builder.
|
|
1065
|
+
this.builder.setColorResolver(colorResolver);
|
|
1014
1066
|
const product = this.builder.baseProduct;
|
|
1015
1067
|
const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
|
|
1016
1068
|
// chart components
|
|
@@ -1030,7 +1082,7 @@ class VSECDirector {
|
|
|
1030
1082
|
// El orden importa, primero callbacks y despues componentes.
|
|
1031
1083
|
this.builder.setValueFormatter(valueFormatter);
|
|
1032
1084
|
this.builder.setPalette(palette);
|
|
1033
|
-
this.builder.
|
|
1085
|
+
this.builder.setColorResolver(colorResolver);
|
|
1034
1086
|
const product = this.builder.baseProduct;
|
|
1035
1087
|
const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
|
|
1036
1088
|
// chart components
|
|
@@ -1152,7 +1204,12 @@ class EchartsRingComponent extends BaseEchartsComponent {
|
|
|
1152
1204
|
constructor() {
|
|
1153
1205
|
super();
|
|
1154
1206
|
}
|
|
1155
|
-
make(
|
|
1207
|
+
make() {
|
|
1208
|
+
const makeOpts = {
|
|
1209
|
+
valueFormatter: this.valueFormatter,
|
|
1210
|
+
palette: this.palette,
|
|
1211
|
+
colorResolver: this.colorResolver,
|
|
1212
|
+
};
|
|
1156
1213
|
this.director.makeRing(this.data, this.optionsOverrides, makeOpts);
|
|
1157
1214
|
}
|
|
1158
1215
|
onInputChanges(changes) {
|
|
@@ -1222,22 +1279,6 @@ class EchartsRingComponent extends BaseEchartsComponent {
|
|
|
1222
1279
|
}
|
|
1223
1280
|
});
|
|
1224
1281
|
}
|
|
1225
|
-
updateChartOptions() {
|
|
1226
|
-
if (!this.chartInstance)
|
|
1227
|
-
return;
|
|
1228
|
-
if (!this.data)
|
|
1229
|
-
return;
|
|
1230
|
-
// 1. Configuramos el builder (Formateadores, Colores, etc se manejan en la base)
|
|
1231
|
-
const makeOpts = {
|
|
1232
|
-
valueFormatter: this.valueFormatter,
|
|
1233
|
-
palette: this.palette,
|
|
1234
|
-
colorResolver: this.colorResolver,
|
|
1235
|
-
};
|
|
1236
|
-
this.make(makeOpts);
|
|
1237
|
-
// 2. Obtenemos las bases del chart usando el builder
|
|
1238
|
-
const options = this.builder.getResult();
|
|
1239
|
-
this.triggerUpdate(options);
|
|
1240
|
-
}
|
|
1241
1282
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsRingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1242
1283
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsRingComponent, isStandalone: true, selector: "vs-echarts-ring", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" \n echarts \n [options]=\"{}\"\n [initOpts]=\"initOptions\"\n [autoResize]=\"true\" \n (chartInit)=\"onChartInit($event)\" \n (chartClick)=\"onChartClick($event)\" \n (chartMouseOver)=\"onChartMouseOver($event)\" \n (chartMouseOut)=\"onChartMouseOut($event)\" \n (chartSelectChanged)=\"onChartSelectChanged($event, { fixPieDataIndexInside: true })\"\n></div>\n ", 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"] }] });
|
|
1243
1284
|
}
|
|
@@ -1439,24 +1480,13 @@ class EchartsPieComponent extends BaseEchartsComponent {
|
|
|
1439
1480
|
constructor() {
|
|
1440
1481
|
super();
|
|
1441
1482
|
}
|
|
1442
|
-
make(
|
|
1443
|
-
this.director.makePie(this.data, this.optionsOverrides, makeOpts);
|
|
1444
|
-
}
|
|
1445
|
-
updateChartOptions() {
|
|
1446
|
-
if (!this.chartInstance)
|
|
1447
|
-
return;
|
|
1448
|
-
if (!this.data)
|
|
1449
|
-
return;
|
|
1450
|
-
// 1. Configuramos el builder
|
|
1483
|
+
make() {
|
|
1451
1484
|
const makeOpts = {
|
|
1452
1485
|
valueFormatter: this.valueFormatter,
|
|
1453
1486
|
palette: this.palette,
|
|
1454
1487
|
colorResolver: this.colorResolver,
|
|
1455
1488
|
};
|
|
1456
|
-
this.
|
|
1457
|
-
// 2. Obtenemos las bases del chart usando el builder
|
|
1458
|
-
const options = this.builder.getResult();
|
|
1459
|
-
this.triggerUpdate(options);
|
|
1489
|
+
this.director.makePie(this.data, this.optionsOverrides, makeOpts);
|
|
1460
1490
|
}
|
|
1461
1491
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsPieComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1462
1492
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsPieComponent, isStandalone: true, selector: "vs-echarts-pie", 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, { fixPieDataIndexInside: true })\"\n></div>\n", 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"] }] });
|
|
@@ -1575,7 +1605,7 @@ class EchartsFunnelComponent extends BaseEchartsComponent {
|
|
|
1575
1605
|
type: 'funnel',
|
|
1576
1606
|
left: '10%',
|
|
1577
1607
|
width: '80%',
|
|
1578
|
-
minSize: '0.
|
|
1608
|
+
minSize: '0.01%',
|
|
1579
1609
|
maxSize: '100%',
|
|
1580
1610
|
sort: 'descending',
|
|
1581
1611
|
gap: 2,
|
|
@@ -1619,22 +1649,13 @@ class EchartsFunnelComponent extends BaseEchartsComponent {
|
|
|
1619
1649
|
constructor() {
|
|
1620
1650
|
super();
|
|
1621
1651
|
}
|
|
1622
|
-
make(
|
|
1623
|
-
this.director.makeFunnel(this.data, this.optionsOverrides, makeOpts);
|
|
1624
|
-
}
|
|
1625
|
-
updateChartOptions() {
|
|
1626
|
-
if (!this.chartInstance)
|
|
1627
|
-
return;
|
|
1628
|
-
if (!this.data)
|
|
1629
|
-
return;
|
|
1652
|
+
make() {
|
|
1630
1653
|
const makeOpts = {
|
|
1631
1654
|
valueFormatter: this.valueFormatter,
|
|
1632
1655
|
palette: this.palette,
|
|
1633
1656
|
colorResolver: this.colorResolver,
|
|
1634
1657
|
};
|
|
1635
|
-
this.
|
|
1636
|
-
const options = this.builder.getResult();
|
|
1637
|
-
this.triggerUpdate(options);
|
|
1658
|
+
this.director.makeFunnel(this.data, this.optionsOverrides, makeOpts);
|
|
1638
1659
|
}
|
|
1639
1660
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsFunnelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1640
1661
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsFunnelComponent, isStandalone: true, selector: "vs-echarts-funnel", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, 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, { fixPieDataIndexInside: true })\"\n></div>\n", 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"] }] });
|
|
@@ -1890,23 +1911,13 @@ class EchartsBarComponent extends BaseEchartsComponent {
|
|
|
1890
1911
|
constructor() {
|
|
1891
1912
|
super();
|
|
1892
1913
|
}
|
|
1893
|
-
|
|
1894
|
-
make(makeOpts) {
|
|
1895
|
-
this.director.makeBar(this.data, this.optionsOverrides, makeOpts);
|
|
1896
|
-
}
|
|
1897
|
-
updateChartOptions() {
|
|
1898
|
-
if (!this.chartInstance)
|
|
1899
|
-
return;
|
|
1900
|
-
if (!this.data)
|
|
1901
|
-
return;
|
|
1914
|
+
make() {
|
|
1902
1915
|
const makeBarOpts = {
|
|
1903
1916
|
valueFormatter: this.valueFormatter,
|
|
1904
1917
|
palette: this.palette,
|
|
1905
1918
|
colorResolver: this.colorResolver,
|
|
1906
1919
|
};
|
|
1907
|
-
this.
|
|
1908
|
-
const baseOptions = this.builder.getResult();
|
|
1909
|
-
this.triggerUpdate(baseOptions);
|
|
1920
|
+
this.director.makeBar(this.data, this.optionsOverrides, makeBarOpts);
|
|
1910
1921
|
}
|
|
1911
1922
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1912
1923
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsBarComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, 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"], 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"] }] });
|
|
@@ -1934,19 +1945,24 @@ class EChartsHBarComponent extends EchartsBarComponent {
|
|
|
1934
1945
|
};
|
|
1935
1946
|
builder = new EChartBuilder(this.variantBaseProduct);
|
|
1936
1947
|
director = new VSECDirector(this.builder);
|
|
1937
|
-
make(
|
|
1938
|
-
makeOpts
|
|
1939
|
-
|
|
1940
|
-
|
|
1948
|
+
make() {
|
|
1949
|
+
const makeOpts = {
|
|
1950
|
+
valueFormatter: this.valueFormatter,
|
|
1951
|
+
palette: this.palette,
|
|
1952
|
+
colorResolver: this.colorResolver,
|
|
1953
|
+
axisTypes: {
|
|
1954
|
+
x: 'value',
|
|
1955
|
+
y: 'category',
|
|
1956
|
+
},
|
|
1941
1957
|
};
|
|
1942
1958
|
this.director.makeBar(this.data, this.optionsOverrides, makeOpts);
|
|
1943
1959
|
}
|
|
1944
1960
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsHBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1945
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsHBarComponent, isStandalone: true, selector: "vs-echarts-
|
|
1961
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsHBarComponent, isStandalone: true, selector: "vs-echarts-hbar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, 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"], 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"] }] });
|
|
1946
1962
|
}
|
|
1947
1963
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsHBarComponent, decorators: [{
|
|
1948
1964
|
type: Component,
|
|
1949
|
-
args: [{ selector: 'vs-echarts-
|
|
1965
|
+
args: [{ selector: 'vs-echarts-hbar', standalone: true, imports: [
|
|
1950
1966
|
CommonModule,
|
|
1951
1967
|
NgxEchartsDirective,
|
|
1952
1968
|
], 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"] }]
|
|
@@ -1972,11 +1988,11 @@ class EChartsBarStackedComponent extends EchartsBarComponent {
|
|
|
1972
1988
|
builder = new EChartBuilder(this.variantBaseProduct);
|
|
1973
1989
|
director = new VSECDirector(this.builder);
|
|
1974
1990
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsBarStackedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1975
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsBarStackedComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, 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"], 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"] }] });
|
|
1991
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsBarStackedComponent, isStandalone: true, selector: "vs-echarts-stacked-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, 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"], 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"] }] });
|
|
1976
1992
|
}
|
|
1977
1993
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsBarStackedComponent, decorators: [{
|
|
1978
1994
|
type: Component,
|
|
1979
|
-
args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
|
|
1995
|
+
args: [{ selector: 'vs-echarts-stacked-bar', standalone: true, imports: [
|
|
1980
1996
|
CommonModule,
|
|
1981
1997
|
NgxEchartsDirective,
|
|
1982
1998
|
], 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"] }]
|
|
@@ -2001,19 +2017,24 @@ class EChartsHBarStackedComponent extends EchartsBarComponent {
|
|
|
2001
2017
|
};
|
|
2002
2018
|
builder = new EChartBuilder(this.variantBaseProduct);
|
|
2003
2019
|
director = new VSECDirector(this.builder);
|
|
2004
|
-
make(
|
|
2005
|
-
makeOpts
|
|
2006
|
-
|
|
2007
|
-
|
|
2020
|
+
make() {
|
|
2021
|
+
const makeOpts = {
|
|
2022
|
+
valueFormatter: this.valueFormatter,
|
|
2023
|
+
palette: this.palette,
|
|
2024
|
+
colorResolver: this.colorResolver,
|
|
2025
|
+
axisTypes: {
|
|
2026
|
+
x: 'value',
|
|
2027
|
+
y: 'category',
|
|
2028
|
+
},
|
|
2008
2029
|
};
|
|
2009
2030
|
this.director.makeBar(this.data, this.optionsOverrides, makeOpts);
|
|
2010
2031
|
}
|
|
2011
2032
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsHBarStackedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2012
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsHBarStackedComponent, isStandalone: true, selector: "vs-echarts-
|
|
2033
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsHBarStackedComponent, isStandalone: true, selector: "vs-echarts-hbar-stacked", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, 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"], 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"] }] });
|
|
2013
2034
|
}
|
|
2014
2035
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsHBarStackedComponent, decorators: [{
|
|
2015
2036
|
type: Component,
|
|
2016
|
-
args: [{ selector: 'vs-echarts-
|
|
2037
|
+
args: [{ selector: 'vs-echarts-hbar-stacked', standalone: true, imports: [
|
|
2017
2038
|
CommonModule,
|
|
2018
2039
|
NgxEchartsDirective,
|
|
2019
2040
|
], 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"] }]
|
|
@@ -2039,15 +2060,20 @@ class EChartsBarStackedRadialComponent extends EchartsBarComponent {
|
|
|
2039
2060
|
};
|
|
2040
2061
|
builder = new EChartBuilder(this.variantBaseProduct);
|
|
2041
2062
|
director = new VSECDirector(this.builder);
|
|
2042
|
-
make(
|
|
2063
|
+
make() {
|
|
2064
|
+
const makeOpts = {
|
|
2065
|
+
valueFormatter: this.valueFormatter,
|
|
2066
|
+
palette: this.palette,
|
|
2067
|
+
colorResolver: this.colorResolver,
|
|
2068
|
+
};
|
|
2043
2069
|
this.director.makeBarRadial(this.data, this.optionsOverrides, makeOpts);
|
|
2044
2070
|
}
|
|
2045
2071
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsBarStackedRadialComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2046
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsBarStackedRadialComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, 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"], 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"] }] });
|
|
2072
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsBarStackedRadialComponent, isStandalone: true, selector: "vs-echarts-bar-stacked-radial", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, 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"], 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"] }] });
|
|
2047
2073
|
}
|
|
2048
2074
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsBarStackedRadialComponent, decorators: [{
|
|
2049
2075
|
type: Component,
|
|
2050
|
-
args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
|
|
2076
|
+
args: [{ selector: 'vs-echarts-bar-stacked-radial', standalone: true, imports: [
|
|
2051
2077
|
CommonModule,
|
|
2052
2078
|
NgxEchartsDirective,
|
|
2053
2079
|
], 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"] }]
|
|
@@ -2103,22 +2129,13 @@ class EchartsLineComponent extends BaseEchartsComponent {
|
|
|
2103
2129
|
constructor() {
|
|
2104
2130
|
super();
|
|
2105
2131
|
}
|
|
2106
|
-
make(
|
|
2107
|
-
|
|
2108
|
-
}
|
|
2109
|
-
updateChartOptions() {
|
|
2110
|
-
if (!this.chartInstance)
|
|
2111
|
-
return;
|
|
2112
|
-
if (!this.data)
|
|
2113
|
-
return;
|
|
2114
|
-
const makeBarOpts = {
|
|
2132
|
+
make() {
|
|
2133
|
+
const makeOpts = {
|
|
2115
2134
|
valueFormatter: this.valueFormatter,
|
|
2116
2135
|
palette: this.palette,
|
|
2117
2136
|
colorResolver: this.colorResolver,
|
|
2118
2137
|
};
|
|
2119
|
-
this.
|
|
2120
|
-
const baseOptions = this.builder.getResult();
|
|
2121
|
-
this.triggerUpdate(baseOptions);
|
|
2138
|
+
this.director.makeLine(this.data, this.optionsOverrides, makeOpts);
|
|
2122
2139
|
}
|
|
2123
2140
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2124
2141
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsLineComponent, isStandalone: true, selector: "vs-echarts-line", providers: [
|
|
@@ -2149,11 +2166,11 @@ class EChartsAreaComponent extends EchartsLineComponent {
|
|
|
2149
2166
|
builder = new EChartBuilder(this.variantBaseProduct);
|
|
2150
2167
|
director = new VSECDirector(this.builder);
|
|
2151
2168
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2152
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsAreaComponent, isStandalone: true, selector: "vs-echarts-
|
|
2169
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsAreaComponent, isStandalone: true, selector: "vs-echarts-area", 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"] }] });
|
|
2153
2170
|
}
|
|
2154
2171
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsAreaComponent, decorators: [{
|
|
2155
2172
|
type: Component,
|
|
2156
|
-
args: [{ selector: 'vs-echarts-
|
|
2173
|
+
args: [{ selector: 'vs-echarts-area', standalone: true, imports: [
|
|
2157
2174
|
CommonModule,
|
|
2158
2175
|
NgxEchartsDirective,
|
|
2159
2176
|
], 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"] }]
|
|
@@ -2174,11 +2191,11 @@ class EChartsAreaStackComponent extends EchartsLineComponent {
|
|
|
2174
2191
|
builder = new EChartBuilder(this.variantBaseProduct);
|
|
2175
2192
|
director = new VSECDirector(this.builder);
|
|
2176
2193
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsAreaStackComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2177
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsAreaStackComponent, isStandalone: true, selector: "vs-echarts-
|
|
2194
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsAreaStackComponent, isStandalone: true, selector: "vs-echarts-area-stack", 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"] }] });
|
|
2178
2195
|
}
|
|
2179
2196
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsAreaStackComponent, decorators: [{
|
|
2180
2197
|
type: Component,
|
|
2181
|
-
args: [{ selector: 'vs-echarts-
|
|
2198
|
+
args: [{ selector: 'vs-echarts-area-stack', standalone: true, imports: [
|
|
2182
2199
|
CommonModule,
|
|
2183
2200
|
NgxEchartsDirective,
|
|
2184
2201
|
], 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"] }]
|
|
@@ -2206,6 +2223,9 @@ class EchartsScatterComponent extends BaseEchartsComponent {
|
|
|
2206
2223
|
},
|
|
2207
2224
|
selectedMode: 'single',
|
|
2208
2225
|
select: {
|
|
2226
|
+
label: {
|
|
2227
|
+
show: true,
|
|
2228
|
+
},
|
|
2209
2229
|
itemStyle: {
|
|
2210
2230
|
borderWidth: 2,
|
|
2211
2231
|
borderColor: EChartsTokens.sBorderColor,
|
|
@@ -2229,22 +2249,13 @@ class EchartsScatterComponent extends BaseEchartsComponent {
|
|
|
2229
2249
|
constructor() {
|
|
2230
2250
|
super();
|
|
2231
2251
|
}
|
|
2232
|
-
make(
|
|
2233
|
-
|
|
2234
|
-
}
|
|
2235
|
-
updateChartOptions() {
|
|
2236
|
-
if (!this.chartInstance)
|
|
2237
|
-
return;
|
|
2238
|
-
if (!this.data)
|
|
2239
|
-
return;
|
|
2240
|
-
const makeScatterOpts = {
|
|
2252
|
+
make() {
|
|
2253
|
+
const makeOpts = {
|
|
2241
2254
|
valueFormatter: this.valueFormatter,
|
|
2242
2255
|
palette: this.palette,
|
|
2243
2256
|
colorResolver: this.colorResolver,
|
|
2244
2257
|
};
|
|
2245
|
-
this.
|
|
2246
|
-
const baseOptions = this.builder.getResult();
|
|
2247
|
-
this.triggerUpdate(baseOptions);
|
|
2258
|
+
this.director.makeScatter(this.data, this.optionsOverrides, makeOpts);
|
|
2248
2259
|
}
|
|
2249
2260
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsScatterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2250
2261
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsScatterComponent, isStandalone: true, selector: "vs-echarts-scatter", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, 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"], 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"] }] });
|
|
@@ -2274,11 +2285,20 @@ class SunburstBuilder {
|
|
|
2274
2285
|
if (!data || !data.series || data.series.length === 0) {
|
|
2275
2286
|
return;
|
|
2276
2287
|
}
|
|
2277
|
-
const
|
|
2278
|
-
const
|
|
2288
|
+
const sunburstData = mapHierarchicalData(data.categories, data.series);
|
|
2289
|
+
const depth = getTreeDepth(sunburstData);
|
|
2290
|
+
const levels = [];
|
|
2291
|
+
for (let i = 0; i <= depth; i++) {
|
|
2292
|
+
levels.push({
|
|
2293
|
+
label: {
|
|
2294
|
+
show: false,
|
|
2295
|
+
},
|
|
2296
|
+
});
|
|
2297
|
+
}
|
|
2279
2298
|
const dynamiSerieOptions = {
|
|
2280
|
-
name:
|
|
2299
|
+
name: '',
|
|
2281
2300
|
data: sunburstData,
|
|
2301
|
+
levels: levels
|
|
2282
2302
|
};
|
|
2283
2303
|
const serie = merge$1({}, dynamiSerieOptions, overrides);
|
|
2284
2304
|
if (this.colorResolver) {
|
|
@@ -2377,24 +2397,15 @@ class EChartsSunburstComponent extends BaseEchartsComponent {
|
|
|
2377
2397
|
};
|
|
2378
2398
|
this.director.makeSunburst(this.data, this.optionsOverrides, makeOpts);
|
|
2379
2399
|
}
|
|
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
2400
|
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
|
|
2401
|
+
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></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
2402
|
}
|
|
2392
2403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsSunburstComponent, decorators: [{
|
|
2393
2404
|
type: Component,
|
|
2394
2405
|
args: [{ selector: 'vs-echarts-sunburst', standalone: true, imports: [
|
|
2395
2406
|
CommonModule,
|
|
2396
2407
|
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
|
|
2408
|
+
], providers: [provideVSEcharts()], template: "<div\n class=\"echarts-container\"\n echarts\n [options]=\"{}\"\n [initOpts]=\"initOptions\"\n [autoResize]=\"true\"\n (chartInit)=\"onChartInit($event)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
|
|
2398
2409
|
}] });
|
|
2399
2410
|
|
|
2400
2411
|
// Interfaces de Inputs de Base EChart Component //
|