@siemens/charts-ng 48.0.0-next.4 → 48.0.0-next.6
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.
|
@@ -632,11 +632,11 @@ class SiCustomLegendComponent {
|
|
|
632
632
|
this.legendClickEvent.emit(legend);
|
|
633
633
|
}
|
|
634
634
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiCustomLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
635
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiCustomLegendComponent, isStandalone: true, selector: "si-custom-legend", inputs: { customLegend: { classPropertyName: "customLegend", publicName: "customLegend", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, titleColor: { classPropertyName: "titleColor", publicName: "titleColor", isSignal: true, isRequired: false, transformFunction: null }, subTitleColor: { classPropertyName: "subTitleColor", publicName: "subTitleColor", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { legendIconClickEvent: "legendIconClickEvent", legendClickEvent: "legendClickEvent", legendHoverStartEvent: "legendHoverStartEvent", legendHoverEndEvent: "legendHoverEndEvent" }, viewQueries: [{ propertyName: "customLegendContainer", first: true, predicate: ["customLegendContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (customLegend() && customLegend()?.customLegends) {\n <div #customLegendContainer class=\"legend-container si-body
|
|
635
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiCustomLegendComponent, isStandalone: true, selector: "si-custom-legend", inputs: { customLegend: { classPropertyName: "customLegend", publicName: "customLegend", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, titleColor: { classPropertyName: "titleColor", publicName: "titleColor", isSignal: true, isRequired: false, transformFunction: null }, subTitleColor: { classPropertyName: "subTitleColor", publicName: "subTitleColor", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { legendIconClickEvent: "legendIconClickEvent", legendClickEvent: "legendClickEvent", legendHoverStartEvent: "legendHoverStartEvent", legendHoverEndEvent: "legendHoverEndEvent" }, viewQueries: [{ propertyName: "customLegendContainer", first: true, predicate: ["customLegendContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (customLegend() && customLegend()?.customLegends) {\n <div #customLegendContainer class=\"legend-container si-body\">\n @for (leg of customLegend()?.customLegends; track legendIndex; let legendIndex = $index) {\n @if (legendIndex === 0 && leg && leg.list && leg.list.length > 0) {\n <div\n class=\"left-legends legend-item-container\"\n [class.legend-empty]=\"\n customLegend()?.legendAxis !== 'left' && customLegend()?.legendAxis !== 'both'\n \"\n [class.legend-single-axis]=\"customLegend()?.legendAxis === 'left'\"\n [class.both-legend-container]=\"customLegend()?.legendAxis === 'both'\"\n >\n <div\n class=\"both-scenario-left-unit-container\"\n [class.left-scenario-unit-container]=\"customLegend()?.legendAxis === 'left'\"\n >\n <span class=\"text-secondary\">{{ leg.unit }}</span>\n </div>\n <div\n class=\"legend-item-container both-scenario-legend-container custom-legend-left\"\n [class.legend-single-axis]=\"customLegend()?.legendAxis === 'left'\"\n >\n @for (legendItem of leg.list; track legendItem.name) {\n <div class=\"legend-item\" [class.hidden-legend]=\"!legendItem.selected\">\n <div\n class=\"me-2 mb-2\"\n (click)=\"legendIconClick(legendItem)\"\n (mouseenter)=\"legendHoverStartEvent.emit(legendItem)\"\n (mouseleave)=\"legendHoverEndEvent.emit(legendItem)\"\n >\n <svg width=\"12\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n <path [attr.d]=\"legendItem.symbol\" [attr.fill]=\"legendItem.color\" />\n </svg>\n </div>\n <span\n class=\"legend-text text-truncate\"\n [style.color]=\"textColor()\"\n (click)=\"legendClick(legendItem)\"\n (mouseenter)=\"legendHoverStartEvent.emit(legendItem)\"\n (mouseleave)=\"legendHoverEndEvent.emit(legendItem)\"\n >\n {{ legendItem.displayName }}\n </span>\n @if (legendItem.tooltip) {\n <div class=\"tooltip show bs-tooltip-bottom\" role=\"tooltip\">\n <div class=\"tooltip-arrow\"></div>\n <div class=\"tooltip-inner\">{{ legendItem.tooltip }}</div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n }\n\n @for (leg of customLegend()?.customLegends; track legendIndex; let legendIndex = $index) {\n @if (legendIndex === 1 && leg && leg.list && leg.list.length > 0) {\n <div\n class=\"right-legends legend-item-container\"\n [class.legend-empty]=\"\n customLegend()?.legendAxis !== 'right' && customLegend()?.legendAxis !== 'both'\n \"\n [class.legend-single-axis]=\"customLegend()?.legendAxis === 'right'\"\n [class.both-legend-container]=\"customLegend()?.legendAxis === 'both'\"\n >\n <div\n class=\"legend-item-container custom-legend-right legend-item-container-right-floating-inner\"\n >\n @for (legendItem of leg.list; track legendItem.name) {\n <div\n class=\"legend-item legend-item-right\"\n [class.hidden-legend]=\"!legendItem.selected\"\n >\n <span\n class=\"legend-text text-truncate\"\n [style.color]=\"textColor()\"\n (click)=\"legendClick(legendItem)\"\n >\n {{ legendItem.displayName }}\n </span>\n <div class=\"right-legend-circle\" (click)=\"legendIconClick(legendItem)\">\n <svg width=\"12\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n <path [attr.d]=\"legendItem.symbol\" [attr.fill]=\"legendItem.color\" />\n </svg>\n </div>\n @if (legendItem.tooltip) {\n <div class=\"tooltip show bs-tooltip-bottom\" role=\"tooltip\">\n <div class=\"tooltip-arrow\"></div>\n <div class=\"tooltip-inner\">{{ legendItem.tooltip }}</div>\n </div>\n }\n </div>\n }\n </div>\n <div\n class=\"both-scenario-right-unit-container\"\n [class.right-scenario-unit-container]=\"customLegend()?.legendAxis === 'right'\"\n >\n <span class=\"right-unit-text text-secondary\">{{ leg.unit }}</span>\n </div>\n </div>\n }\n }\n </div>\n}\n", styles: [":host{--flex-dir1: row;--flex-dir2: row-reverse;margin:12px;display:flex;flex-direction:column}:host-context(:dir(rtl)){--flex-dir1: row-reverse;--flex-dir2: row}:host-context([dir=rtl]){--flex-dir1: row-reverse;--flex-dir2: row}.legend-container{display:flex;flex-direction:var(--flex-dir1);max-height:40px;flex:1 1 auto}.legend-item-container{width:50%;vertical-align:top;display:flex;flex-wrap:wrap;flex:1 1 100%;flex-direction:var(--flex-dir1);height:fit-content;max-height:40px;max-width:50%;min-width:50%;overflow-y:auto;scrollbar-width:thin}.legend-item-container::-webkit-scrollbar{width:4px;height:6px;background-color:var(--element-base-0, #f0f2f5)}.legend-item-container::-webkit-scrollbar-thumb{border-radius:12px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3)}.legend-item-container::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:12px;background-color:var(--element-base-0, #f0f2f5)}.legend-item-container .custom-legend-left{flex-direction:var(--flex-dir1);flex:1 1 50%}.legend-item-container .custom-legend-right{flex-direction:var(--flex-dir2);flex:1 1 50%}.legend-item-container-right-floating-inner{max-width:calc(100% - 32px);min-width:calc(100% - 32px);padding-right:12px;float:left}.legend-single-axis{max-width:100%;min-width:100%}.legend-empty{width:0%}.tooltip{display:none;max-width:375px;word-break:break-word;margin-top:16px;inset-block-start:0;margin-inline-start:-6px}.tooltip-arrow{left:12px}.legend-item{cursor:pointer;margin-right:8px;display:flex;flex-direction:var(--flex-dir1);align-items:center;height:20px;position:initial;width:calc(100% - 12px);max-width:fit-content}.legend-item:hover .tooltip{display:block}.legend-item-right{margin-right:0;margin-left:12px}.right-legend-circle{margin-right:0;margin-left:4px}.legend-text{box-sizing:inherit;display:inline;cursor:pointer}.hidden-legend .right-legend-circle,.hidden-legend div:first-child,.hidden-legend .legend-text{opacity:.4}.both-scenario-left-unit-container,.both-scenario-right-unit-container{min-width:32px;max-width:32px;overflow:hidden}.both-scenario-right-unit-container{max-height:100%}.both-scenario-left-unit-container{min-height:100%}.both-scenario-legend-container{max-width:calc(100% - 32px);min-width:calc(100% - 32px);padding-left:12px}.right-unit-text{min-width:100%;min-height:100%;padding-left:2px}.left-legends{padding-right:36px}.right-legends{padding-left:28px}.both-legend-container{padding-right:0;padding-left:0}\n"] });
|
|
636
636
|
}
|
|
637
637
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiCustomLegendComponent, decorators: [{
|
|
638
638
|
type: Component,
|
|
639
|
-
args: [{ selector: 'si-custom-legend', template: "@if (customLegend() && customLegend()?.customLegends) {\n <div #customLegendContainer class=\"legend-container si-body
|
|
639
|
+
args: [{ selector: 'si-custom-legend', template: "@if (customLegend() && customLegend()?.customLegends) {\n <div #customLegendContainer class=\"legend-container si-body\">\n @for (leg of customLegend()?.customLegends; track legendIndex; let legendIndex = $index) {\n @if (legendIndex === 0 && leg && leg.list && leg.list.length > 0) {\n <div\n class=\"left-legends legend-item-container\"\n [class.legend-empty]=\"\n customLegend()?.legendAxis !== 'left' && customLegend()?.legendAxis !== 'both'\n \"\n [class.legend-single-axis]=\"customLegend()?.legendAxis === 'left'\"\n [class.both-legend-container]=\"customLegend()?.legendAxis === 'both'\"\n >\n <div\n class=\"both-scenario-left-unit-container\"\n [class.left-scenario-unit-container]=\"customLegend()?.legendAxis === 'left'\"\n >\n <span class=\"text-secondary\">{{ leg.unit }}</span>\n </div>\n <div\n class=\"legend-item-container both-scenario-legend-container custom-legend-left\"\n [class.legend-single-axis]=\"customLegend()?.legendAxis === 'left'\"\n >\n @for (legendItem of leg.list; track legendItem.name) {\n <div class=\"legend-item\" [class.hidden-legend]=\"!legendItem.selected\">\n <div\n class=\"me-2 mb-2\"\n (click)=\"legendIconClick(legendItem)\"\n (mouseenter)=\"legendHoverStartEvent.emit(legendItem)\"\n (mouseleave)=\"legendHoverEndEvent.emit(legendItem)\"\n >\n <svg width=\"12\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n <path [attr.d]=\"legendItem.symbol\" [attr.fill]=\"legendItem.color\" />\n </svg>\n </div>\n <span\n class=\"legend-text text-truncate\"\n [style.color]=\"textColor()\"\n (click)=\"legendClick(legendItem)\"\n (mouseenter)=\"legendHoverStartEvent.emit(legendItem)\"\n (mouseleave)=\"legendHoverEndEvent.emit(legendItem)\"\n >\n {{ legendItem.displayName }}\n </span>\n @if (legendItem.tooltip) {\n <div class=\"tooltip show bs-tooltip-bottom\" role=\"tooltip\">\n <div class=\"tooltip-arrow\"></div>\n <div class=\"tooltip-inner\">{{ legendItem.tooltip }}</div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n }\n\n @for (leg of customLegend()?.customLegends; track legendIndex; let legendIndex = $index) {\n @if (legendIndex === 1 && leg && leg.list && leg.list.length > 0) {\n <div\n class=\"right-legends legend-item-container\"\n [class.legend-empty]=\"\n customLegend()?.legendAxis !== 'right' && customLegend()?.legendAxis !== 'both'\n \"\n [class.legend-single-axis]=\"customLegend()?.legendAxis === 'right'\"\n [class.both-legend-container]=\"customLegend()?.legendAxis === 'both'\"\n >\n <div\n class=\"legend-item-container custom-legend-right legend-item-container-right-floating-inner\"\n >\n @for (legendItem of leg.list; track legendItem.name) {\n <div\n class=\"legend-item legend-item-right\"\n [class.hidden-legend]=\"!legendItem.selected\"\n >\n <span\n class=\"legend-text text-truncate\"\n [style.color]=\"textColor()\"\n (click)=\"legendClick(legendItem)\"\n >\n {{ legendItem.displayName }}\n </span>\n <div class=\"right-legend-circle\" (click)=\"legendIconClick(legendItem)\">\n <svg width=\"12\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n <path [attr.d]=\"legendItem.symbol\" [attr.fill]=\"legendItem.color\" />\n </svg>\n </div>\n @if (legendItem.tooltip) {\n <div class=\"tooltip show bs-tooltip-bottom\" role=\"tooltip\">\n <div class=\"tooltip-arrow\"></div>\n <div class=\"tooltip-inner\">{{ legendItem.tooltip }}</div>\n </div>\n }\n </div>\n }\n </div>\n <div\n class=\"both-scenario-right-unit-container\"\n [class.right-scenario-unit-container]=\"customLegend()?.legendAxis === 'right'\"\n >\n <span class=\"right-unit-text text-secondary\">{{ leg.unit }}</span>\n </div>\n </div>\n }\n }\n </div>\n}\n", styles: [":host{--flex-dir1: row;--flex-dir2: row-reverse;margin:12px;display:flex;flex-direction:column}:host-context(:dir(rtl)){--flex-dir1: row-reverse;--flex-dir2: row}:host-context([dir=rtl]){--flex-dir1: row-reverse;--flex-dir2: row}.legend-container{display:flex;flex-direction:var(--flex-dir1);max-height:40px;flex:1 1 auto}.legend-item-container{width:50%;vertical-align:top;display:flex;flex-wrap:wrap;flex:1 1 100%;flex-direction:var(--flex-dir1);height:fit-content;max-height:40px;max-width:50%;min-width:50%;overflow-y:auto;scrollbar-width:thin}.legend-item-container::-webkit-scrollbar{width:4px;height:6px;background-color:var(--element-base-0, #f0f2f5)}.legend-item-container::-webkit-scrollbar-thumb{border-radius:12px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3)}.legend-item-container::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:12px;background-color:var(--element-base-0, #f0f2f5)}.legend-item-container .custom-legend-left{flex-direction:var(--flex-dir1);flex:1 1 50%}.legend-item-container .custom-legend-right{flex-direction:var(--flex-dir2);flex:1 1 50%}.legend-item-container-right-floating-inner{max-width:calc(100% - 32px);min-width:calc(100% - 32px);padding-right:12px;float:left}.legend-single-axis{max-width:100%;min-width:100%}.legend-empty{width:0%}.tooltip{display:none;max-width:375px;word-break:break-word;margin-top:16px;inset-block-start:0;margin-inline-start:-6px}.tooltip-arrow{left:12px}.legend-item{cursor:pointer;margin-right:8px;display:flex;flex-direction:var(--flex-dir1);align-items:center;height:20px;position:initial;width:calc(100% - 12px);max-width:fit-content}.legend-item:hover .tooltip{display:block}.legend-item-right{margin-right:0;margin-left:12px}.right-legend-circle{margin-right:0;margin-left:4px}.legend-text{box-sizing:inherit;display:inline;cursor:pointer}.hidden-legend .right-legend-circle,.hidden-legend div:first-child,.hidden-legend .legend-text{opacity:.4}.both-scenario-left-unit-container,.both-scenario-right-unit-container{min-width:32px;max-width:32px;overflow:hidden}.both-scenario-right-unit-container{max-height:100%}.both-scenario-left-unit-container{min-height:100%}.both-scenario-legend-container{max-width:calc(100% - 32px);min-width:calc(100% - 32px);padding-left:12px}.right-unit-text{min-width:100%;min-height:100%;padding-left:2px}.left-legends{padding-right:36px}.right-legends{padding-left:28px}.both-legend-container{padding-right:0;padding-left:0}\n"] }]
|
|
640
640
|
}] });
|
|
641
641
|
|
|
642
642
|
/**
|
|
@@ -1044,7 +1044,7 @@ class SiChartComponent {
|
|
|
1044
1044
|
ngOnInit() {
|
|
1045
1045
|
const canvas = document.createElement('canvas');
|
|
1046
1046
|
this.measureCanvas = canvas.getContext('2d');
|
|
1047
|
-
this.measureCanvas.font = '12px "
|
|
1047
|
+
this.measureCanvas.font = '12px "SiemensSans Pro"';
|
|
1048
1048
|
const externalXAxisFormatter = this.externalXAxisFormatter();
|
|
1049
1049
|
if (this.externalZoomSlider() && externalXAxisFormatter) {
|
|
1050
1050
|
const consumerFormatter = externalXAxisFormatter;
|
|
@@ -1408,7 +1408,7 @@ class SiChartComponent {
|
|
|
1408
1408
|
this.modifyTopAlignment('subTitle');
|
|
1409
1409
|
}
|
|
1410
1410
|
}
|
|
1411
|
-
else if (!title && !subTitle) {
|
|
1411
|
+
else if (!title && !subTitle && !options.title) {
|
|
1412
1412
|
this.modifyTopAlignment('noTitle');
|
|
1413
1413
|
}
|
|
1414
1414
|
}
|
|
@@ -2150,7 +2150,7 @@ class SiChartComponent {
|
|
|
2150
2150
|
const bodyStyle = window.getComputedStyle(document.body);
|
|
2151
2151
|
const options = this.actualOptions;
|
|
2152
2152
|
options.textStyle = {
|
|
2153
|
-
fontFamily: bodyStyle.fontFamily,
|
|
2153
|
+
fontFamily: navigator.webdriver ? 'sans-serif' : bodyStyle.fontFamily,
|
|
2154
2154
|
fontSize: bodyStyle.fontSize
|
|
2155
2155
|
};
|
|
2156
2156
|
this.extZoomSliderOptions.textStyle = options.textStyle;
|
|
@@ -2378,11 +2378,11 @@ class SiChartComponent {
|
|
|
2378
2378
|
this.cdRef.markForCheck();
|
|
2379
2379
|
}
|
|
2380
2380
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2381
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiChartComponent, isStandalone: true, selector: "si-chart", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, additionalOptions: { classPropertyName: "additionalOptions", publicName: "additionalOptions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showCustomLegend: { classPropertyName: "showCustomLegend", publicName: "showCustomLegend", isSignal: true, isRequired: false, transformFunction: null }, renderer: { classPropertyName: "renderer", publicName: "renderer", isSignal: true, isRequired: false, transformFunction: null }, zoomSlider: { classPropertyName: "zoomSlider", publicName: "zoomSlider", isSignal: true, isRequired: false, transformFunction: null }, zoomSliderShadow: { classPropertyName: "zoomSliderShadow", publicName: "zoomSliderShadow", isSignal: true, isRequired: false, transformFunction: null }, zoomSliderRealtime: { classPropertyName: "zoomSliderRealtime", publicName: "zoomSliderRealtime", isSignal: true, isRequired: false, transformFunction: null }, zoomSliderBrush: { classPropertyName: "zoomSliderBrush", publicName: "zoomSliderBrush", isSignal: true, isRequired: false, transformFunction: null }, zoomInside: { classPropertyName: "zoomInside", publicName: "zoomInside", isSignal: true, isRequired: false, transformFunction: null }, maxEntries: { classPropertyName: "maxEntries", publicName: "maxEntries", isSignal: true, isRequired: false, transformFunction: null }, visibleEntries: { classPropertyName: "visibleEntries", publicName: "visibleEntries", isSignal: true, isRequired: false, transformFunction: null }, visibleRange: { classPropertyName: "visibleRange", publicName: "visibleRange", isSignal: true, isRequired: false, transformFunction: null }, autoZoomSeriesIndex: { classPropertyName: "autoZoomSeriesIndex", publicName: "autoZoomSeriesIndex", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, themeCustomization: { classPropertyName: "themeCustomization", publicName: "themeCustomization", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, axisPointer: { classPropertyName: "axisPointer", publicName: "axisPointer", isSignal: true, isRequired: false, transformFunction: null }, dataZoomRange: { classPropertyName: "dataZoomRange", publicName: "dataZoomRange", isSignal: true, isRequired: false, transformFunction: null }, dataZoomMinValueSpan: { classPropertyName: "dataZoomMinValueSpan", publicName: "dataZoomMinValueSpan", isSignal: true, isRequired: false, transformFunction: null }, dataZoomMaxValueSpan: { classPropertyName: "dataZoomMaxValueSpan", publicName: "dataZoomMaxValueSpan", isSignal: true, isRequired: false, transformFunction: null }, dataZoomFilterMode: { classPropertyName: "dataZoomFilterMode", publicName: "dataZoomFilterMode", isSignal: true, isRequired: false, transformFunction: null }, customLegendAction: { classPropertyName: "customLegendAction", publicName: "customLegendAction", isSignal: true, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: true, isRequired: false, transformFunction: null }, eChartContainerHeight: { classPropertyName: "eChartContainerHeight", publicName: "eChartContainerHeight", isSignal: true, isRequired: false, transformFunction: null }, externalZoomSlider: { classPropertyName: "externalZoomSlider", publicName: "externalZoomSlider", isSignal: true, isRequired: false, transformFunction: null }, externalXAxisFormatter: { classPropertyName: "externalXAxisFormatter", publicName: "externalXAxisFormatter", isSignal: true, isRequired: false, transformFunction: null }, showTimeRangeBar: { classPropertyName: "showTimeRangeBar", publicName: "showTimeRangeBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { showLegend: "showLegendChange", visibleEntries: "visibleEntriesChange", visibleRange: "visibleRangeChange", dataZoom: "dataZoom", pointer: "pointer", selectionChanged: "selectionChanged", chartSeriesClick: "chartSeriesClick", chartGridResized: "chartGridResized", customLegendMultiLineInfoEvent: "customLegendMultiLineInfoEvent", timeRangeChange: "timeRangeChange" }, host: { listeners: { "window:theme-switch": "resetChart()" } }, viewQueries: [{ propertyName: "chartContainerWrapper", first: true, predicate: ["chartContainerWrapper"], descendants: true, isSignal: true }, { propertyName: "chartContainer", first: true, predicate: ["chart"], descendants: true, isSignal: true }, { propertyName: "externalZoomSliderContainer", first: true, predicate: ["externalZoomSlider"], descendants: true, isSignal: true }, { propertyName: "siCustomLegend", predicate: ["siCustomLegend"], descendants: true, read: SiCustomLegendComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div
|
|
2381
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiChartComponent, isStandalone: true, selector: "si-chart", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, additionalOptions: { classPropertyName: "additionalOptions", publicName: "additionalOptions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showCustomLegend: { classPropertyName: "showCustomLegend", publicName: "showCustomLegend", isSignal: true, isRequired: false, transformFunction: null }, renderer: { classPropertyName: "renderer", publicName: "renderer", isSignal: true, isRequired: false, transformFunction: null }, zoomSlider: { classPropertyName: "zoomSlider", publicName: "zoomSlider", isSignal: true, isRequired: false, transformFunction: null }, zoomSliderShadow: { classPropertyName: "zoomSliderShadow", publicName: "zoomSliderShadow", isSignal: true, isRequired: false, transformFunction: null }, zoomSliderRealtime: { classPropertyName: "zoomSliderRealtime", publicName: "zoomSliderRealtime", isSignal: true, isRequired: false, transformFunction: null }, zoomSliderBrush: { classPropertyName: "zoomSliderBrush", publicName: "zoomSliderBrush", isSignal: true, isRequired: false, transformFunction: null }, zoomInside: { classPropertyName: "zoomInside", publicName: "zoomInside", isSignal: true, isRequired: false, transformFunction: null }, maxEntries: { classPropertyName: "maxEntries", publicName: "maxEntries", isSignal: true, isRequired: false, transformFunction: null }, visibleEntries: { classPropertyName: "visibleEntries", publicName: "visibleEntries", isSignal: true, isRequired: false, transformFunction: null }, visibleRange: { classPropertyName: "visibleRange", publicName: "visibleRange", isSignal: true, isRequired: false, transformFunction: null }, autoZoomSeriesIndex: { classPropertyName: "autoZoomSeriesIndex", publicName: "autoZoomSeriesIndex", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, themeCustomization: { classPropertyName: "themeCustomization", publicName: "themeCustomization", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, axisPointer: { classPropertyName: "axisPointer", publicName: "axisPointer", isSignal: true, isRequired: false, transformFunction: null }, dataZoomRange: { classPropertyName: "dataZoomRange", publicName: "dataZoomRange", isSignal: true, isRequired: false, transformFunction: null }, dataZoomMinValueSpan: { classPropertyName: "dataZoomMinValueSpan", publicName: "dataZoomMinValueSpan", isSignal: true, isRequired: false, transformFunction: null }, dataZoomMaxValueSpan: { classPropertyName: "dataZoomMaxValueSpan", publicName: "dataZoomMaxValueSpan", isSignal: true, isRequired: false, transformFunction: null }, dataZoomFilterMode: { classPropertyName: "dataZoomFilterMode", publicName: "dataZoomFilterMode", isSignal: true, isRequired: false, transformFunction: null }, customLegendAction: { classPropertyName: "customLegendAction", publicName: "customLegendAction", isSignal: true, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: true, isRequired: false, transformFunction: null }, eChartContainerHeight: { classPropertyName: "eChartContainerHeight", publicName: "eChartContainerHeight", isSignal: true, isRequired: false, transformFunction: null }, externalZoomSlider: { classPropertyName: "externalZoomSlider", publicName: "externalZoomSlider", isSignal: true, isRequired: false, transformFunction: null }, externalXAxisFormatter: { classPropertyName: "externalXAxisFormatter", publicName: "externalXAxisFormatter", isSignal: true, isRequired: false, transformFunction: null }, showTimeRangeBar: { classPropertyName: "showTimeRangeBar", publicName: "showTimeRangeBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { showLegend: "showLegendChange", visibleEntries: "visibleEntriesChange", visibleRange: "visibleRangeChange", dataZoom: "dataZoom", pointer: "pointer", selectionChanged: "selectionChanged", chartSeriesClick: "chartSeriesClick", chartGridResized: "chartGridResized", customLegendMultiLineInfoEvent: "customLegendMultiLineInfoEvent", timeRangeChange: "timeRangeChange" }, host: { listeners: { "window:theme-switch": "resetChart()" } }, viewQueries: [{ propertyName: "chartContainerWrapper", first: true, predicate: ["chartContainerWrapper"], descendants: true, isSignal: true }, { propertyName: "chartContainer", first: true, predicate: ["chart"], descendants: true, isSignal: true }, { propertyName: "externalZoomSliderContainer", first: true, predicate: ["externalZoomSlider"], descendants: true, isSignal: true }, { propertyName: "siCustomLegend", predicate: ["siCustomLegend"], descendants: true, read: SiCustomLegendComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n }\n </div>\n}\n\n<div\n #chartContainerWrapper\n class=\"chart-container-wrapper\"\n [class.chart-scroll]=\"containerHeight()\"\n [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n @if (showCustomLegend()) {\n @for (cl of customLegend; track $index) {\n <si-custom-legend\n #siCustomLegend\n class=\"custom-legend\"\n [style.top.px]=\"cl.top\"\n [title]=\"title()\"\n [subTitle]=\"subTitle()\"\n [customLegend]=\"cl\"\n [style.background-color]=\"backgroundColor()\"\n [titleColor]=\"titleColor()\"\n [subTitleColor]=\"subTitleColor()\"\n [textColor]=\"textColor()\"\n (legendIconClickEvent)=\"handleLegendClick($event)\"\n (legendClickEvent)=\"handleLegendClick($event)\"\n (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n />\n }\n }\n <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n </div>\n</div>\n@if (externalZoomSlider()) {\n <div\n #externalZoomSlider\n class=\"external-zoom-container\"\n [class.has-time-range-bar]=\"showTimeRangeBar()\"\n [style.--time-bar-height.px]=\"timeBarHeight()\"\n ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n <div\n class=\"time-range-bar\"\n [style.bottom.px]=\"timeBarBottom()\"\n [style.padding-left.px]=\"timeBarLeft()\"\n [style.padding-right.px]=\"timeBarRight()\"\n >\n <ng-content select=\"[slot=timeRangeBar]\" />\n </div>\n}\n\n@if (inProgress()) {\n <div class=\"progress-container\">\n <si-chart-loading-spinner />\n </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: SiCustomLegendComponent, selector: "si-custom-legend", inputs: ["customLegend", "title", "subTitle", "titleColor", "subTitleColor", "textColor"], outputs: ["legendIconClickEvent", "legendClickEvent", "legendHoverStartEvent", "legendHoverEndEvent"] }, { kind: "component", type: SiChartLoadingSpinnerComponent, selector: "si-chart-loading-spinner" }] });
|
|
2382
2382
|
}
|
|
2383
2383
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartComponent, decorators: [{
|
|
2384
2384
|
type: Component,
|
|
2385
|
-
args: [{ selector: 'si-chart', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div
|
|
2385
|
+
args: [{ selector: 'si-chart', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n }\n </div>\n}\n\n<div\n #chartContainerWrapper\n class=\"chart-container-wrapper\"\n [class.chart-scroll]=\"containerHeight()\"\n [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n @if (showCustomLegend()) {\n @for (cl of customLegend; track $index) {\n <si-custom-legend\n #siCustomLegend\n class=\"custom-legend\"\n [style.top.px]=\"cl.top\"\n [title]=\"title()\"\n [subTitle]=\"subTitle()\"\n [customLegend]=\"cl\"\n [style.background-color]=\"backgroundColor()\"\n [titleColor]=\"titleColor()\"\n [subTitleColor]=\"subTitleColor()\"\n [textColor]=\"textColor()\"\n (legendIconClickEvent)=\"handleLegendClick($event)\"\n (legendClickEvent)=\"handleLegendClick($event)\"\n (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n />\n }\n }\n <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n </div>\n</div>\n@if (externalZoomSlider()) {\n <div\n #externalZoomSlider\n class=\"external-zoom-container\"\n [class.has-time-range-bar]=\"showTimeRangeBar()\"\n [style.--time-bar-height.px]=\"timeBarHeight()\"\n ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n <div\n class=\"time-range-bar\"\n [style.bottom.px]=\"timeBarBottom()\"\n [style.padding-left.px]=\"timeBarLeft()\"\n [style.padding-right.px]=\"timeBarRight()\"\n >\n <ng-content select=\"[slot=timeRangeBar]\" />\n </div>\n}\n\n@if (inProgress()) {\n <div class=\"progress-container\">\n <si-chart-loading-spinner />\n </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"] }]
|
|
2386
2386
|
}], propDecorators: { resetChart: [{
|
|
2387
2387
|
type: HostListener,
|
|
2388
2388
|
args: ['window:theme-switch']
|
|
@@ -2722,11 +2722,11 @@ class SiChartCartesianComponent extends SiChartComponent {
|
|
|
2722
2722
|
this.addDataInternal(series);
|
|
2723
2723
|
}
|
|
2724
2724
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartCartesianComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2725
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiChartCartesianComponent, isStandalone: true, selector: "si-chart-cartesian", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, subChartGrids: { classPropertyName: "subChartGrids", publicName: "subChartGrids", isSignal: true, isRequired: false, transformFunction: null }, yAxis: { classPropertyName: "yAxis", publicName: "yAxis", isSignal: true, isRequired: false, transformFunction: null }, xAxis: { classPropertyName: "xAxis", publicName: "xAxis", isSignal: true, isRequired: false, transformFunction: null }, tooltipFormatter: { classPropertyName: "tooltipFormatter", publicName: "tooltipFormatter", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, zoomMode: { classPropertyName: "zoomMode", publicName: "zoomMode", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div
|
|
2725
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiChartCartesianComponent, isStandalone: true, selector: "si-chart-cartesian", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, subChartGrids: { classPropertyName: "subChartGrids", publicName: "subChartGrids", isSignal: true, isRequired: false, transformFunction: null }, yAxis: { classPropertyName: "yAxis", publicName: "yAxis", isSignal: true, isRequired: false, transformFunction: null }, xAxis: { classPropertyName: "xAxis", publicName: "xAxis", isSignal: true, isRequired: false, transformFunction: null }, tooltipFormatter: { classPropertyName: "tooltipFormatter", publicName: "tooltipFormatter", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, zoomMode: { classPropertyName: "zoomMode", publicName: "zoomMode", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n }\n </div>\n}\n\n<div\n #chartContainerWrapper\n class=\"chart-container-wrapper\"\n [class.chart-scroll]=\"containerHeight()\"\n [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n @if (showCustomLegend()) {\n @for (cl of customLegend; track $index) {\n <si-custom-legend\n #siCustomLegend\n class=\"custom-legend\"\n [style.top.px]=\"cl.top\"\n [title]=\"title()\"\n [subTitle]=\"subTitle()\"\n [customLegend]=\"cl\"\n [style.background-color]=\"backgroundColor()\"\n [titleColor]=\"titleColor()\"\n [subTitleColor]=\"subTitleColor()\"\n [textColor]=\"textColor()\"\n (legendIconClickEvent)=\"handleLegendClick($event)\"\n (legendClickEvent)=\"handleLegendClick($event)\"\n (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n />\n }\n }\n <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n </div>\n</div>\n@if (externalZoomSlider()) {\n <div\n #externalZoomSlider\n class=\"external-zoom-container\"\n [class.has-time-range-bar]=\"showTimeRangeBar()\"\n [style.--time-bar-height.px]=\"timeBarHeight()\"\n ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n <div\n class=\"time-range-bar\"\n [style.bottom.px]=\"timeBarBottom()\"\n [style.padding-left.px]=\"timeBarLeft()\"\n [style.padding-right.px]=\"timeBarRight()\"\n >\n <ng-content select=\"[slot=timeRangeBar]\" />\n </div>\n}\n\n@if (inProgress()) {\n <div class=\"progress-container\">\n <si-chart-loading-spinner />\n </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: SiCustomLegendComponent, selector: "si-custom-legend", inputs: ["customLegend", "title", "subTitle", "titleColor", "subTitleColor", "textColor"], outputs: ["legendIconClickEvent", "legendClickEvent", "legendHoverStartEvent", "legendHoverEndEvent"] }, { kind: "component", type: SiChartLoadingSpinnerComponent, selector: "si-chart-loading-spinner" }] });
|
|
2726
2726
|
}
|
|
2727
2727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartCartesianComponent, decorators: [{
|
|
2728
2728
|
type: Component,
|
|
2729
|
-
args: [{ selector: 'si-chart-cartesian', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div
|
|
2729
|
+
args: [{ selector: 'si-chart-cartesian', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n }\n </div>\n}\n\n<div\n #chartContainerWrapper\n class=\"chart-container-wrapper\"\n [class.chart-scroll]=\"containerHeight()\"\n [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n @if (showCustomLegend()) {\n @for (cl of customLegend; track $index) {\n <si-custom-legend\n #siCustomLegend\n class=\"custom-legend\"\n [style.top.px]=\"cl.top\"\n [title]=\"title()\"\n [subTitle]=\"subTitle()\"\n [customLegend]=\"cl\"\n [style.background-color]=\"backgroundColor()\"\n [titleColor]=\"titleColor()\"\n [subTitleColor]=\"subTitleColor()\"\n [textColor]=\"textColor()\"\n (legendIconClickEvent)=\"handleLegendClick($event)\"\n (legendClickEvent)=\"handleLegendClick($event)\"\n (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n />\n }\n }\n <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n </div>\n</div>\n@if (externalZoomSlider()) {\n <div\n #externalZoomSlider\n class=\"external-zoom-container\"\n [class.has-time-range-bar]=\"showTimeRangeBar()\"\n [style.--time-bar-height.px]=\"timeBarHeight()\"\n ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n <div\n class=\"time-range-bar\"\n [style.bottom.px]=\"timeBarBottom()\"\n [style.padding-left.px]=\"timeBarLeft()\"\n [style.padding-right.px]=\"timeBarRight()\"\n >\n <ng-content select=\"[slot=timeRangeBar]\" />\n </div>\n}\n\n@if (inProgress()) {\n <div class=\"progress-container\">\n <si-chart-loading-spinner />\n </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"] }]
|
|
2730
2730
|
}] });
|
|
2731
2731
|
|
|
2732
2732
|
/**
|
|
@@ -2797,11 +2797,11 @@ class SiChartCircleComponent extends SiChartComponent {
|
|
|
2797
2797
|
this.updateEChart();
|
|
2798
2798
|
}
|
|
2799
2799
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartCircleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2800
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiChartCircleComponent, isStandalone: true, selector: "si-chart-circle", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div
|
|
2800
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiChartCircleComponent, isStandalone: true, selector: "si-chart-circle", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n }\n </div>\n}\n\n<div\n #chartContainerWrapper\n class=\"chart-container-wrapper\"\n [class.chart-scroll]=\"containerHeight()\"\n [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n @if (showCustomLegend()) {\n @for (cl of customLegend; track $index) {\n <si-custom-legend\n #siCustomLegend\n class=\"custom-legend\"\n [style.top.px]=\"cl.top\"\n [title]=\"title()\"\n [subTitle]=\"subTitle()\"\n [customLegend]=\"cl\"\n [style.background-color]=\"backgroundColor()\"\n [titleColor]=\"titleColor()\"\n [subTitleColor]=\"subTitleColor()\"\n [textColor]=\"textColor()\"\n (legendIconClickEvent)=\"handleLegendClick($event)\"\n (legendClickEvent)=\"handleLegendClick($event)\"\n (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n />\n }\n }\n <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n </div>\n</div>\n@if (externalZoomSlider()) {\n <div\n #externalZoomSlider\n class=\"external-zoom-container\"\n [class.has-time-range-bar]=\"showTimeRangeBar()\"\n [style.--time-bar-height.px]=\"timeBarHeight()\"\n ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n <div\n class=\"time-range-bar\"\n [style.bottom.px]=\"timeBarBottom()\"\n [style.padding-left.px]=\"timeBarLeft()\"\n [style.padding-right.px]=\"timeBarRight()\"\n >\n <ng-content select=\"[slot=timeRangeBar]\" />\n </div>\n}\n\n@if (inProgress()) {\n <div class=\"progress-container\">\n <si-chart-loading-spinner />\n </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: SiCustomLegendComponent, selector: "si-custom-legend", inputs: ["customLegend", "title", "subTitle", "titleColor", "subTitleColor", "textColor"], outputs: ["legendIconClickEvent", "legendClickEvent", "legendHoverStartEvent", "legendHoverEndEvent"] }, { kind: "component", type: SiChartLoadingSpinnerComponent, selector: "si-chart-loading-spinner" }] });
|
|
2801
2801
|
}
|
|
2802
2802
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartCircleComponent, decorators: [{
|
|
2803
2803
|
type: Component,
|
|
2804
|
-
args: [{ selector: 'si-chart-circle', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div
|
|
2804
|
+
args: [{ selector: 'si-chart-circle', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n }\n </div>\n}\n\n<div\n #chartContainerWrapper\n class=\"chart-container-wrapper\"\n [class.chart-scroll]=\"containerHeight()\"\n [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n @if (showCustomLegend()) {\n @for (cl of customLegend; track $index) {\n <si-custom-legend\n #siCustomLegend\n class=\"custom-legend\"\n [style.top.px]=\"cl.top\"\n [title]=\"title()\"\n [subTitle]=\"subTitle()\"\n [customLegend]=\"cl\"\n [style.background-color]=\"backgroundColor()\"\n [titleColor]=\"titleColor()\"\n [subTitleColor]=\"subTitleColor()\"\n [textColor]=\"textColor()\"\n (legendIconClickEvent)=\"handleLegendClick($event)\"\n (legendClickEvent)=\"handleLegendClick($event)\"\n (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n />\n }\n }\n <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n </div>\n</div>\n@if (externalZoomSlider()) {\n <div\n #externalZoomSlider\n class=\"external-zoom-container\"\n [class.has-time-range-bar]=\"showTimeRangeBar()\"\n [style.--time-bar-height.px]=\"timeBarHeight()\"\n ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n <div\n class=\"time-range-bar\"\n [style.bottom.px]=\"timeBarBottom()\"\n [style.padding-left.px]=\"timeBarLeft()\"\n [style.padding-right.px]=\"timeBarRight()\"\n >\n <ng-content select=\"[slot=timeRangeBar]\" />\n </div>\n}\n\n@if (inProgress()) {\n <div class=\"progress-container\">\n <si-chart-loading-spinner />\n </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"] }]
|
|
2805
2805
|
}] });
|
|
2806
2806
|
|
|
2807
2807
|
/**
|
|
@@ -3095,7 +3095,7 @@ class SiChartGaugeComponent extends SiChartComponent {
|
|
|
3095
3095
|
value: {
|
|
3096
3096
|
fontSize: resp.valueFontSize,
|
|
3097
3097
|
lineHeight: resp.valueFontSize,
|
|
3098
|
-
fontWeight:
|
|
3098
|
+
fontWeight: 600
|
|
3099
3099
|
},
|
|
3100
3100
|
unit: {
|
|
3101
3101
|
fontSize: resp.unitFontSize,
|
|
@@ -3149,11 +3149,11 @@ class SiChartGaugeComponent extends SiChartComponent {
|
|
|
3149
3149
|
this.refreshSeries();
|
|
3150
3150
|
}
|
|
3151
3151
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartGaugeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3152
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiChartGaugeComponent, isStandalone: true, selector: "si-chart-gauge", inputs: { minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, splitSteps: { classPropertyName: "splitSteps", publicName: "splitSteps", isSignal: true, isRequired: false, transformFunction: null }, responsiveSplitSteps: { classPropertyName: "responsiveSplitSteps", publicName: "responsiveSplitSteps", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, unitsOnSplit: { classPropertyName: "unitsOnSplit", publicName: "unitsOnSplit", isSignal: true, isRequired: false, transformFunction: null }, labelFormatter: { classPropertyName: "labelFormatter", publicName: "labelFormatter", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null }, numberOfDecimals: { classPropertyName: "numberOfDecimals", publicName: "numberOfDecimals", isSignal: true, isRequired: false, transformFunction: null }, minNumberOfDecimals: { classPropertyName: "minNumberOfDecimals", publicName: "minNumberOfDecimals", isSignal: true, isRequired: false, transformFunction: null }, maxNumberOfDecimals: { classPropertyName: "maxNumberOfDecimals", publicName: "maxNumberOfDecimals", isSignal: true, isRequired: false, transformFunction: null }, axisNumberOfDecimals: { classPropertyName: "axisNumberOfDecimals", publicName: "axisNumberOfDecimals", isSignal: true, isRequired: false, transformFunction: null }, hideAxisLabels: { classPropertyName: "hideAxisLabels", publicName: "hideAxisLabels", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div
|
|
3152
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiChartGaugeComponent, isStandalone: true, selector: "si-chart-gauge", inputs: { minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, splitSteps: { classPropertyName: "splitSteps", publicName: "splitSteps", isSignal: true, isRequired: false, transformFunction: null }, responsiveSplitSteps: { classPropertyName: "responsiveSplitSteps", publicName: "responsiveSplitSteps", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, unitsOnSplit: { classPropertyName: "unitsOnSplit", publicName: "unitsOnSplit", isSignal: true, isRequired: false, transformFunction: null }, labelFormatter: { classPropertyName: "labelFormatter", publicName: "labelFormatter", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null }, numberOfDecimals: { classPropertyName: "numberOfDecimals", publicName: "numberOfDecimals", isSignal: true, isRequired: false, transformFunction: null }, minNumberOfDecimals: { classPropertyName: "minNumberOfDecimals", publicName: "minNumberOfDecimals", isSignal: true, isRequired: false, transformFunction: null }, maxNumberOfDecimals: { classPropertyName: "maxNumberOfDecimals", publicName: "maxNumberOfDecimals", isSignal: true, isRequired: false, transformFunction: null }, axisNumberOfDecimals: { classPropertyName: "axisNumberOfDecimals", publicName: "axisNumberOfDecimals", isSignal: true, isRequired: false, transformFunction: null }, hideAxisLabels: { classPropertyName: "hideAxisLabels", publicName: "hideAxisLabels", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n }\n </div>\n}\n\n<div\n #chartContainerWrapper\n class=\"chart-container-wrapper\"\n [class.chart-scroll]=\"containerHeight()\"\n [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n @if (showCustomLegend()) {\n @for (cl of customLegend; track $index) {\n <si-custom-legend\n #siCustomLegend\n class=\"custom-legend\"\n [style.top.px]=\"cl.top\"\n [title]=\"title()\"\n [subTitle]=\"subTitle()\"\n [customLegend]=\"cl\"\n [style.background-color]=\"backgroundColor()\"\n [titleColor]=\"titleColor()\"\n [subTitleColor]=\"subTitleColor()\"\n [textColor]=\"textColor()\"\n (legendIconClickEvent)=\"handleLegendClick($event)\"\n (legendClickEvent)=\"handleLegendClick($event)\"\n (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n />\n }\n }\n <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n </div>\n</div>\n@if (externalZoomSlider()) {\n <div\n #externalZoomSlider\n class=\"external-zoom-container\"\n [class.has-time-range-bar]=\"showTimeRangeBar()\"\n [style.--time-bar-height.px]=\"timeBarHeight()\"\n ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n <div\n class=\"time-range-bar\"\n [style.bottom.px]=\"timeBarBottom()\"\n [style.padding-left.px]=\"timeBarLeft()\"\n [style.padding-right.px]=\"timeBarRight()\"\n >\n <ng-content select=\"[slot=timeRangeBar]\" />\n </div>\n}\n\n@if (inProgress()) {\n <div class=\"progress-container\">\n <si-chart-loading-spinner />\n </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: SiCustomLegendComponent, selector: "si-custom-legend", inputs: ["customLegend", "title", "subTitle", "titleColor", "subTitleColor", "textColor"], outputs: ["legendIconClickEvent", "legendClickEvent", "legendHoverStartEvent", "legendHoverEndEvent"] }, { kind: "component", type: SiChartLoadingSpinnerComponent, selector: "si-chart-loading-spinner" }] });
|
|
3153
3153
|
}
|
|
3154
3154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartGaugeComponent, decorators: [{
|
|
3155
3155
|
type: Component,
|
|
3156
|
-
args: [{ selector: 'si-chart-gauge', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div
|
|
3156
|
+
args: [{ selector: 'si-chart-gauge', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n }\n </div>\n}\n\n<div\n #chartContainerWrapper\n class=\"chart-container-wrapper\"\n [class.chart-scroll]=\"containerHeight()\"\n [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n @if (showCustomLegend()) {\n @for (cl of customLegend; track $index) {\n <si-custom-legend\n #siCustomLegend\n class=\"custom-legend\"\n [style.top.px]=\"cl.top\"\n [title]=\"title()\"\n [subTitle]=\"subTitle()\"\n [customLegend]=\"cl\"\n [style.background-color]=\"backgroundColor()\"\n [titleColor]=\"titleColor()\"\n [subTitleColor]=\"subTitleColor()\"\n [textColor]=\"textColor()\"\n (legendIconClickEvent)=\"handleLegendClick($event)\"\n (legendClickEvent)=\"handleLegendClick($event)\"\n (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n />\n }\n }\n <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n </div>\n</div>\n@if (externalZoomSlider()) {\n <div\n #externalZoomSlider\n class=\"external-zoom-container\"\n [class.has-time-range-bar]=\"showTimeRangeBar()\"\n [style.--time-bar-height.px]=\"timeBarHeight()\"\n ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n <div\n class=\"time-range-bar\"\n [style.bottom.px]=\"timeBarBottom()\"\n [style.padding-left.px]=\"timeBarLeft()\"\n [style.padding-right.px]=\"timeBarRight()\"\n >\n <ng-content select=\"[slot=timeRangeBar]\" />\n </div>\n}\n\n@if (inProgress()) {\n <div class=\"progress-container\">\n <si-chart-loading-spinner />\n </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"] }]
|
|
3157
3157
|
}] });
|
|
3158
3158
|
|
|
3159
3159
|
/**
|
|
@@ -3352,11 +3352,11 @@ class SiChartProgressComponent extends SiChartComponent {
|
|
|
3352
3352
|
this.updateEChart();
|
|
3353
3353
|
}
|
|
3354
3354
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartProgressComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3355
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiChartProgressComponent, isStandalone: true, selector: "si-chart-progress", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, dataAngle: { classPropertyName: "dataAngle", publicName: "dataAngle", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div
|
|
3355
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiChartProgressComponent, isStandalone: true, selector: "si-chart-progress", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, dataAngle: { classPropertyName: "dataAngle", publicName: "dataAngle", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n }\n </div>\n}\n\n<div\n #chartContainerWrapper\n class=\"chart-container-wrapper\"\n [class.chart-scroll]=\"containerHeight()\"\n [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n @if (showCustomLegend()) {\n @for (cl of customLegend; track $index) {\n <si-custom-legend\n #siCustomLegend\n class=\"custom-legend\"\n [style.top.px]=\"cl.top\"\n [title]=\"title()\"\n [subTitle]=\"subTitle()\"\n [customLegend]=\"cl\"\n [style.background-color]=\"backgroundColor()\"\n [titleColor]=\"titleColor()\"\n [subTitleColor]=\"subTitleColor()\"\n [textColor]=\"textColor()\"\n (legendIconClickEvent)=\"handleLegendClick($event)\"\n (legendClickEvent)=\"handleLegendClick($event)\"\n (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n />\n }\n }\n <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n </div>\n</div>\n@if (externalZoomSlider()) {\n <div\n #externalZoomSlider\n class=\"external-zoom-container\"\n [class.has-time-range-bar]=\"showTimeRangeBar()\"\n [style.--time-bar-height.px]=\"timeBarHeight()\"\n ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n <div\n class=\"time-range-bar\"\n [style.bottom.px]=\"timeBarBottom()\"\n [style.padding-left.px]=\"timeBarLeft()\"\n [style.padding-right.px]=\"timeBarRight()\"\n >\n <ng-content select=\"[slot=timeRangeBar]\" />\n </div>\n}\n\n@if (inProgress()) {\n <div class=\"progress-container\">\n <si-chart-loading-spinner />\n </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: SiCustomLegendComponent, selector: "si-custom-legend", inputs: ["customLegend", "title", "subTitle", "titleColor", "subTitleColor", "textColor"], outputs: ["legendIconClickEvent", "legendClickEvent", "legendHoverStartEvent", "legendHoverEndEvent"] }, { kind: "component", type: SiChartLoadingSpinnerComponent, selector: "si-chart-loading-spinner" }] });
|
|
3356
3356
|
}
|
|
3357
3357
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartProgressComponent, decorators: [{
|
|
3358
3358
|
type: Component,
|
|
3359
|
-
args: [{ selector: 'si-chart-progress', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div
|
|
3359
|
+
args: [{ selector: 'si-chart-progress', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n }\n </div>\n}\n\n<div\n #chartContainerWrapper\n class=\"chart-container-wrapper\"\n [class.chart-scroll]=\"containerHeight()\"\n [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n @if (showCustomLegend()) {\n @for (cl of customLegend; track $index) {\n <si-custom-legend\n #siCustomLegend\n class=\"custom-legend\"\n [style.top.px]=\"cl.top\"\n [title]=\"title()\"\n [subTitle]=\"subTitle()\"\n [customLegend]=\"cl\"\n [style.background-color]=\"backgroundColor()\"\n [titleColor]=\"titleColor()\"\n [subTitleColor]=\"subTitleColor()\"\n [textColor]=\"textColor()\"\n (legendIconClickEvent)=\"handleLegendClick($event)\"\n (legendClickEvent)=\"handleLegendClick($event)\"\n (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n />\n }\n }\n <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n </div>\n</div>\n@if (externalZoomSlider()) {\n <div\n #externalZoomSlider\n class=\"external-zoom-container\"\n [class.has-time-range-bar]=\"showTimeRangeBar()\"\n [style.--time-bar-height.px]=\"timeBarHeight()\"\n ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n <div\n class=\"time-range-bar\"\n [style.bottom.px]=\"timeBarBottom()\"\n [style.padding-left.px]=\"timeBarLeft()\"\n [style.padding-right.px]=\"timeBarRight()\"\n >\n <ng-content select=\"[slot=timeRangeBar]\" />\n </div>\n}\n\n@if (inProgress()) {\n <div class=\"progress-container\">\n <si-chart-loading-spinner />\n </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"] }]
|
|
3360
3360
|
}] });
|
|
3361
3361
|
|
|
3362
3362
|
/**
|
|
@@ -3504,11 +3504,11 @@ class SiChartProgressBarComponent extends SiChartComponent {
|
|
|
3504
3504
|
this.updateEChart();
|
|
3505
3505
|
}
|
|
3506
3506
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartProgressBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3507
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiChartProgressBarComponent, isStandalone: true, selector: "si-chart-progress-bar", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div
|
|
3507
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiChartProgressBarComponent, isStandalone: true, selector: "si-chart-progress-bar", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n }\n </div>\n}\n\n<div\n #chartContainerWrapper\n class=\"chart-container-wrapper\"\n [class.chart-scroll]=\"containerHeight()\"\n [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n @if (showCustomLegend()) {\n @for (cl of customLegend; track $index) {\n <si-custom-legend\n #siCustomLegend\n class=\"custom-legend\"\n [style.top.px]=\"cl.top\"\n [title]=\"title()\"\n [subTitle]=\"subTitle()\"\n [customLegend]=\"cl\"\n [style.background-color]=\"backgroundColor()\"\n [titleColor]=\"titleColor()\"\n [subTitleColor]=\"subTitleColor()\"\n [textColor]=\"textColor()\"\n (legendIconClickEvent)=\"handleLegendClick($event)\"\n (legendClickEvent)=\"handleLegendClick($event)\"\n (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n />\n }\n }\n <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n </div>\n</div>\n@if (externalZoomSlider()) {\n <div\n #externalZoomSlider\n class=\"external-zoom-container\"\n [class.has-time-range-bar]=\"showTimeRangeBar()\"\n [style.--time-bar-height.px]=\"timeBarHeight()\"\n ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n <div\n class=\"time-range-bar\"\n [style.bottom.px]=\"timeBarBottom()\"\n [style.padding-left.px]=\"timeBarLeft()\"\n [style.padding-right.px]=\"timeBarRight()\"\n >\n <ng-content select=\"[slot=timeRangeBar]\" />\n </div>\n}\n\n@if (inProgress()) {\n <div class=\"progress-container\">\n <si-chart-loading-spinner />\n </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: SiCustomLegendComponent, selector: "si-custom-legend", inputs: ["customLegend", "title", "subTitle", "titleColor", "subTitleColor", "textColor"], outputs: ["legendIconClickEvent", "legendClickEvent", "legendHoverStartEvent", "legendHoverEndEvent"] }, { kind: "component", type: SiChartLoadingSpinnerComponent, selector: "si-chart-loading-spinner" }] });
|
|
3508
3508
|
}
|
|
3509
3509
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartProgressBarComponent, decorators: [{
|
|
3510
3510
|
type: Component,
|
|
3511
|
-
args: [{ selector: 'si-chart-progress-bar', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div
|
|
3511
|
+
args: [{ selector: 'si-chart-progress-bar', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n }\n </div>\n}\n\n<div\n #chartContainerWrapper\n class=\"chart-container-wrapper\"\n [class.chart-scroll]=\"containerHeight()\"\n [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n @if (showCustomLegend()) {\n @for (cl of customLegend; track $index) {\n <si-custom-legend\n #siCustomLegend\n class=\"custom-legend\"\n [style.top.px]=\"cl.top\"\n [title]=\"title()\"\n [subTitle]=\"subTitle()\"\n [customLegend]=\"cl\"\n [style.background-color]=\"backgroundColor()\"\n [titleColor]=\"titleColor()\"\n [subTitleColor]=\"subTitleColor()\"\n [textColor]=\"textColor()\"\n (legendIconClickEvent)=\"handleLegendClick($event)\"\n (legendClickEvent)=\"handleLegendClick($event)\"\n (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n />\n }\n }\n <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n </div>\n</div>\n@if (externalZoomSlider()) {\n <div\n #externalZoomSlider\n class=\"external-zoom-container\"\n [class.has-time-range-bar]=\"showTimeRangeBar()\"\n [style.--time-bar-height.px]=\"timeBarHeight()\"\n ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n <div\n class=\"time-range-bar\"\n [style.bottom.px]=\"timeBarBottom()\"\n [style.padding-left.px]=\"timeBarLeft()\"\n [style.padding-right.px]=\"timeBarRight()\"\n >\n <ng-content select=\"[slot=timeRangeBar]\" />\n </div>\n}\n\n@if (inProgress()) {\n <div class=\"progress-container\">\n <si-chart-loading-spinner />\n </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"] }]
|
|
3512
3512
|
}] });
|
|
3513
3513
|
|
|
3514
3514
|
/**
|
|
@@ -3539,11 +3539,11 @@ class SiChartSankeyComponent extends SiChartComponent {
|
|
|
3539
3539
|
this.applyTitles();
|
|
3540
3540
|
}
|
|
3541
3541
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartSankeyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3542
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiChartSankeyComponent, isStandalone: true, selector: "si-chart-sankey", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, toolTip: { classPropertyName: "toolTip", publicName: "toolTip", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div
|
|
3542
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiChartSankeyComponent, isStandalone: true, selector: "si-chart-sankey", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, toolTip: { classPropertyName: "toolTip", publicName: "toolTip", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n }\n </div>\n}\n\n<div\n #chartContainerWrapper\n class=\"chart-container-wrapper\"\n [class.chart-scroll]=\"containerHeight()\"\n [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n @if (showCustomLegend()) {\n @for (cl of customLegend; track $index) {\n <si-custom-legend\n #siCustomLegend\n class=\"custom-legend\"\n [style.top.px]=\"cl.top\"\n [title]=\"title()\"\n [subTitle]=\"subTitle()\"\n [customLegend]=\"cl\"\n [style.background-color]=\"backgroundColor()\"\n [titleColor]=\"titleColor()\"\n [subTitleColor]=\"subTitleColor()\"\n [textColor]=\"textColor()\"\n (legendIconClickEvent)=\"handleLegendClick($event)\"\n (legendClickEvent)=\"handleLegendClick($event)\"\n (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n />\n }\n }\n <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n </div>\n</div>\n@if (externalZoomSlider()) {\n <div\n #externalZoomSlider\n class=\"external-zoom-container\"\n [class.has-time-range-bar]=\"showTimeRangeBar()\"\n [style.--time-bar-height.px]=\"timeBarHeight()\"\n ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n <div\n class=\"time-range-bar\"\n [style.bottom.px]=\"timeBarBottom()\"\n [style.padding-left.px]=\"timeBarLeft()\"\n [style.padding-right.px]=\"timeBarRight()\"\n >\n <ng-content select=\"[slot=timeRangeBar]\" />\n </div>\n}\n\n@if (inProgress()) {\n <div class=\"progress-container\">\n <si-chart-loading-spinner />\n </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: SiCustomLegendComponent, selector: "si-custom-legend", inputs: ["customLegend", "title", "subTitle", "titleColor", "subTitleColor", "textColor"], outputs: ["legendIconClickEvent", "legendClickEvent", "legendHoverStartEvent", "legendHoverEndEvent"] }, { kind: "component", type: SiChartLoadingSpinnerComponent, selector: "si-chart-loading-spinner" }] });
|
|
3543
3543
|
}
|
|
3544
3544
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartSankeyComponent, decorators: [{
|
|
3545
3545
|
type: Component,
|
|
3546
|
-
args: [{ selector: 'si-chart-sankey', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div
|
|
3546
|
+
args: [{ selector: 'si-chart-sankey', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n }\n </div>\n}\n\n<div\n #chartContainerWrapper\n class=\"chart-container-wrapper\"\n [class.chart-scroll]=\"containerHeight()\"\n [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n @if (showCustomLegend()) {\n @for (cl of customLegend; track $index) {\n <si-custom-legend\n #siCustomLegend\n class=\"custom-legend\"\n [style.top.px]=\"cl.top\"\n [title]=\"title()\"\n [subTitle]=\"subTitle()\"\n [customLegend]=\"cl\"\n [style.background-color]=\"backgroundColor()\"\n [titleColor]=\"titleColor()\"\n [subTitleColor]=\"subTitleColor()\"\n [textColor]=\"textColor()\"\n (legendIconClickEvent)=\"handleLegendClick($event)\"\n (legendClickEvent)=\"handleLegendClick($event)\"\n (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n />\n }\n }\n <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n </div>\n</div>\n@if (externalZoomSlider()) {\n <div\n #externalZoomSlider\n class=\"external-zoom-container\"\n [class.has-time-range-bar]=\"showTimeRangeBar()\"\n [style.--time-bar-height.px]=\"timeBarHeight()\"\n ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n <div\n class=\"time-range-bar\"\n [style.bottom.px]=\"timeBarBottom()\"\n [style.padding-left.px]=\"timeBarLeft()\"\n [style.padding-right.px]=\"timeBarRight()\"\n >\n <ng-content select=\"[slot=timeRangeBar]\" />\n </div>\n}\n\n@if (inProgress()) {\n <div class=\"progress-container\">\n <si-chart-loading-spinner />\n </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"] }]
|
|
3547
3547
|
}] });
|
|
3548
3548
|
|
|
3549
3549
|
/**
|
|
@@ -3569,11 +3569,11 @@ class SiChartSunburstComponent extends SiChartComponent {
|
|
|
3569
3569
|
this.applyTitles();
|
|
3570
3570
|
}
|
|
3571
3571
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartSunburstComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3572
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiChartSunburstComponent, isStandalone: true, selector: "si-chart-sunburst", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, toolTip: { classPropertyName: "toolTip", publicName: "toolTip", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div
|
|
3572
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiChartSunburstComponent, isStandalone: true, selector: "si-chart-sunburst", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, toolTip: { classPropertyName: "toolTip", publicName: "toolTip", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n }\n </div>\n}\n\n<div\n #chartContainerWrapper\n class=\"chart-container-wrapper\"\n [class.chart-scroll]=\"containerHeight()\"\n [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n @if (showCustomLegend()) {\n @for (cl of customLegend; track $index) {\n <si-custom-legend\n #siCustomLegend\n class=\"custom-legend\"\n [style.top.px]=\"cl.top\"\n [title]=\"title()\"\n [subTitle]=\"subTitle()\"\n [customLegend]=\"cl\"\n [style.background-color]=\"backgroundColor()\"\n [titleColor]=\"titleColor()\"\n [subTitleColor]=\"subTitleColor()\"\n [textColor]=\"textColor()\"\n (legendIconClickEvent)=\"handleLegendClick($event)\"\n (legendClickEvent)=\"handleLegendClick($event)\"\n (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n />\n }\n }\n <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n </div>\n</div>\n@if (externalZoomSlider()) {\n <div\n #externalZoomSlider\n class=\"external-zoom-container\"\n [class.has-time-range-bar]=\"showTimeRangeBar()\"\n [style.--time-bar-height.px]=\"timeBarHeight()\"\n ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n <div\n class=\"time-range-bar\"\n [style.bottom.px]=\"timeBarBottom()\"\n [style.padding-left.px]=\"timeBarLeft()\"\n [style.padding-right.px]=\"timeBarRight()\"\n >\n <ng-content select=\"[slot=timeRangeBar]\" />\n </div>\n}\n\n@if (inProgress()) {\n <div class=\"progress-container\">\n <si-chart-loading-spinner />\n </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: SiCustomLegendComponent, selector: "si-custom-legend", inputs: ["customLegend", "title", "subTitle", "titleColor", "subTitleColor", "textColor"], outputs: ["legendIconClickEvent", "legendClickEvent", "legendHoverStartEvent", "legendHoverEndEvent"] }, { kind: "component", type: SiChartLoadingSpinnerComponent, selector: "si-chart-loading-spinner" }] });
|
|
3573
3573
|
}
|
|
3574
3574
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartSunburstComponent, decorators: [{
|
|
3575
3575
|
type: Component,
|
|
3576
|
-
args: [{ selector: 'si-chart-sunburst', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div
|
|
3576
|
+
args: [{ selector: 'si-chart-sunburst', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n }\n </div>\n}\n\n<div\n #chartContainerWrapper\n class=\"chart-container-wrapper\"\n [class.chart-scroll]=\"containerHeight()\"\n [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n @if (showCustomLegend()) {\n @for (cl of customLegend; track $index) {\n <si-custom-legend\n #siCustomLegend\n class=\"custom-legend\"\n [style.top.px]=\"cl.top\"\n [title]=\"title()\"\n [subTitle]=\"subTitle()\"\n [customLegend]=\"cl\"\n [style.background-color]=\"backgroundColor()\"\n [titleColor]=\"titleColor()\"\n [subTitleColor]=\"subTitleColor()\"\n [textColor]=\"textColor()\"\n (legendIconClickEvent)=\"handleLegendClick($event)\"\n (legendClickEvent)=\"handleLegendClick($event)\"\n (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n />\n }\n }\n <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n </div>\n</div>\n@if (externalZoomSlider()) {\n <div\n #externalZoomSlider\n class=\"external-zoom-container\"\n [class.has-time-range-bar]=\"showTimeRangeBar()\"\n [style.--time-bar-height.px]=\"timeBarHeight()\"\n ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n <div\n class=\"time-range-bar\"\n [style.bottom.px]=\"timeBarBottom()\"\n [style.padding-left.px]=\"timeBarLeft()\"\n [style.padding-right.px]=\"timeBarRight()\"\n >\n <ng-content select=\"[slot=timeRangeBar]\" />\n </div>\n}\n\n@if (inProgress()) {\n <div class=\"progress-container\">\n <si-chart-loading-spinner />\n </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"] }]
|
|
3577
3577
|
}] });
|
|
3578
3578
|
|
|
3579
3579
|
/**
|