@siemens/charts-ng 47.9.0 → 48.0.0-next.2
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.
- package/fesm2022/siemens-charts-ng.mjs +58 -48
- package/fesm2022/siemens-charts-ng.mjs.map +1 -1
- package/index.d.ts +1633 -3
- package/package.json +3 -3
- package/components/index.d.ts +0 -13
- package/components/si-chart/index.d.ts +0 -6
- package/components/si-chart/si-chart.component.d.ts +0 -341
- package/components/si-chart/si-chart.interfaces.d.ts +0 -97
- package/components/si-chart-cartesian/index.d.ts +0 -6
- package/components/si-chart-cartesian/si-chart-cartesian.component.d.ts +0 -53
- package/components/si-chart-cartesian/si-chart-cartesian.interfaces.d.ts +0 -36
- package/components/si-chart-circle/index.d.ts +0 -6
- package/components/si-chart-circle/si-chart-circle.component.d.ts +0 -18
- package/components/si-chart-circle/si-chart-circle.interface.d.ts +0 -38
- package/components/si-chart-gauge/index.d.ts +0 -6
- package/components/si-chart-gauge/si-chart-gauge.component.d.ts +0 -84
- package/components/si-chart-gauge/si-chart-gauge.interface.d.ts +0 -9
- package/components/si-chart-loading-spinner/si-chart-loading-spinner.component.d.ts +0 -5
- package/components/si-chart-progress/index.d.ts +0 -6
- package/components/si-chart-progress/si-chart-progress.component.d.ts +0 -39
- package/components/si-chart-progress/si-chart-progress.interface.d.ts +0 -12
- package/components/si-chart-progress-bar/index.d.ts +0 -6
- package/components/si-chart-progress-bar/si-chart-progress-bar.component.d.ts +0 -28
- package/components/si-chart-progress-bar/si-chart-progress-bar.interface.d.ts +0 -12
- package/components/si-chart-sankey/index.d.ts +0 -5
- package/components/si-chart-sankey/si-chart-sankey.component.d.ts +0 -11
- package/components/si-chart-sunburst/index.d.ts +0 -5
- package/components/si-chart-sunburst/si-chart-sunburst.component.d.ts +0 -11
- package/components/si-custom-legend/index.d.ts +0 -6
- package/components/si-custom-legend/si-custom-legend.component.d.ts +0 -25
- package/components/si-custom-legend/si-custom-legend.interface.d.ts +0 -33
- package/public-api.d.ts +0 -7
- package/public-api.module.d.ts +0 -18
- package/shared/echarts.custom.d.ts +0 -2
- package/shared/echarts.model.d.ts +0 -15
- package/shared/index.d.ts +0 -8
- package/shared/theme-support.d.ts +0 -394
- package/shared/themes/element.d.ts +0 -384
|
@@ -576,10 +576,10 @@ const themeSupport = {
|
|
|
576
576
|
* SPDX-License-Identifier: MIT
|
|
577
577
|
*/
|
|
578
578
|
class SiChartLoadingSpinnerComponent {
|
|
579
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
580
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
579
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
580
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: SiChartLoadingSpinnerComponent, isStandalone: true, selector: "si-chart-loading-spinner", ngImport: i0, template: "<div class=\"loading\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <g>\n <path d=\"M256,156a16,16,0,0,1-16-16V80a16,16,0,0,1,32,0v60A16,16,0,0,1,256,156Z\" />\n <path\n d=\"M314.78,175.1a16,16,0,0,1-3.54-22.35l35.27-48.54A16,16,0,1,1,372.39,123l-35.26,48.54A16,16,0,0,1,314.78,175.1Z\"\n />\n <path\n d=\"M351.11,225.1a16,16,0,0,1,10.27-20.16l57.06-18.54a16,16,0,1,1,9.89,30.43l-57.06,18.54A16,16,0,0,1,351.11,225.1Z\"\n />\n <path\n d=\"M351.11,286.9a16,16,0,0,1,20.16-10.27l57.06,18.54a16,16,0,1,1-9.89,30.43l-57.06-18.54A16,16,0,0,1,351.11,286.9Z\"\n />\n <path\n d=\"M314.78,336.9a16,16,0,0,1,22.35,3.54L372.39,389a16,16,0,1,1-25.88,18.81l-35.27-48.54A16,16,0,0,1,314.78,336.9Z\"\n />\n <path d=\"M256,356a16,16,0,0,1,16,16v60a16,16,0,0,1-32,0V372A16,16,0,0,1,256,356Z\" />\n <path\n d=\"M197.22,336.9a16,16,0,0,1,3.54,22.35l-35.27,48.54A16,16,0,1,1,139.61,389l35.26-48.54A16,16,0,0,1,197.22,336.9Z\"\n />\n <path\n d=\"M160.89,286.9a16,16,0,0,1-10.27,20.16L93.56,325.6a16,16,0,0,1-9.89-30.43l57.06-18.54A16,16,0,0,1,160.89,286.9Z\"\n />\n <path\n d=\"M160.89,225.1a16,16,0,0,1-20.16,10.27L83.67,216.83a16,16,0,1,1,9.89-30.43l57.06,18.54A16,16,0,0,1,160.89,225.1Z\"\n />\n <path\n d=\"M197.22,175.1a16,16,0,0,1-22.35-3.54L139.61,123a16,16,0,1,1,25.88-18.81l35.27,48.54A16,16,0,0,1,197.22,175.1Z\"\n />\n </g>\n </svg>\n</div>\n", styles: ["@keyframes spinner-fade{0%{opacity:1}to{opacity:.05}}.loading{display:block;text-align:center}svg{inline-size:var(--loading-spinner-size, 64px);block-size:var(--loading-spinner-size, 64px)}path{fill:var(--element-ui-2, #656a6f);animation:spinner-fade 1s infinite linear}path:nth-child(1){animation-delay:0s;opacity:1}path:nth-child(2){animation-delay:.1s;opacity:.9}path:nth-child(3){animation-delay:.2s;opacity:.8}path:nth-child(4){animation-delay:.3s;opacity:.7}path:nth-child(5){animation-delay:.4s;opacity:.6}path:nth-child(6){animation-delay:.5s;opacity:.5}path:nth-child(7){animation-delay:.6s;opacity:.4}path:nth-child(8){animation-delay:.7s;opacity:.3}path:nth-child(9){animation-delay:.8s;opacity:.2}path:nth-child(10){animation-delay:.9s;opacity:.1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
581
581
|
}
|
|
582
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
582
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartLoadingSpinnerComponent, decorators: [{
|
|
583
583
|
type: Component,
|
|
584
584
|
args: [{ selector: 'si-chart-loading-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"loading\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <g>\n <path d=\"M256,156a16,16,0,0,1-16-16V80a16,16,0,0,1,32,0v60A16,16,0,0,1,256,156Z\" />\n <path\n d=\"M314.78,175.1a16,16,0,0,1-3.54-22.35l35.27-48.54A16,16,0,1,1,372.39,123l-35.26,48.54A16,16,0,0,1,314.78,175.1Z\"\n />\n <path\n d=\"M351.11,225.1a16,16,0,0,1,10.27-20.16l57.06-18.54a16,16,0,1,1,9.89,30.43l-57.06,18.54A16,16,0,0,1,351.11,225.1Z\"\n />\n <path\n d=\"M351.11,286.9a16,16,0,0,1,20.16-10.27l57.06,18.54a16,16,0,1,1-9.89,30.43l-57.06-18.54A16,16,0,0,1,351.11,286.9Z\"\n />\n <path\n d=\"M314.78,336.9a16,16,0,0,1,22.35,3.54L372.39,389a16,16,0,1,1-25.88,18.81l-35.27-48.54A16,16,0,0,1,314.78,336.9Z\"\n />\n <path d=\"M256,356a16,16,0,0,1,16,16v60a16,16,0,0,1-32,0V372A16,16,0,0,1,256,356Z\" />\n <path\n d=\"M197.22,336.9a16,16,0,0,1,3.54,22.35l-35.27,48.54A16,16,0,1,1,139.61,389l35.26-48.54A16,16,0,0,1,197.22,336.9Z\"\n />\n <path\n d=\"M160.89,286.9a16,16,0,0,1-10.27,20.16L93.56,325.6a16,16,0,0,1-9.89-30.43l57.06-18.54A16,16,0,0,1,160.89,286.9Z\"\n />\n <path\n d=\"M160.89,225.1a16,16,0,0,1-20.16,10.27L83.67,216.83a16,16,0,1,1,9.89-30.43l57.06,18.54A16,16,0,0,1,160.89,225.1Z\"\n />\n <path\n d=\"M197.22,175.1a16,16,0,0,1-22.35-3.54L139.61,123a16,16,0,1,1,25.88-18.81l35.27,48.54A16,16,0,0,1,197.22,175.1Z\"\n />\n </g>\n </svg>\n</div>\n", styles: ["@keyframes spinner-fade{0%{opacity:1}to{opacity:.05}}.loading{display:block;text-align:center}svg{inline-size:var(--loading-spinner-size, 64px);block-size:var(--loading-spinner-size, 64px)}path{fill:var(--element-ui-2, #656a6f);animation:spinner-fade 1s infinite linear}path:nth-child(1){animation-delay:0s;opacity:1}path:nth-child(2){animation-delay:.1s;opacity:.9}path:nth-child(3){animation-delay:.2s;opacity:.8}path:nth-child(4){animation-delay:.3s;opacity:.7}path:nth-child(5){animation-delay:.4s;opacity:.6}path:nth-child(6){animation-delay:.5s;opacity:.5}path:nth-child(7){animation-delay:.6s;opacity:.4}path:nth-child(8){animation-delay:.7s;opacity:.3}path:nth-child(9){animation-delay:.8s;opacity:.2}path:nth-child(10){animation-delay:.9s;opacity:.1}\n"] }]
|
|
585
585
|
}] });
|
|
@@ -609,10 +609,10 @@ class SiCustomLegendComponent {
|
|
|
609
609
|
legend.selected = !legend.selected;
|
|
610
610
|
this.legendClickEvent.emit(legend);
|
|
611
611
|
}
|
|
612
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
613
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
612
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiCustomLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
613
|
+
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-2\">\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"] });
|
|
614
614
|
}
|
|
615
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
615
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiCustomLegendComponent, decorators: [{
|
|
616
616
|
type: Component,
|
|
617
617
|
args: [{ selector: 'si-custom-legend', template: "@if (customLegend() && customLegend()?.customLegends) {\n <div #customLegendContainer class=\"legend-container si-body-2\">\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"] }]
|
|
618
618
|
}] });
|
|
@@ -2312,10 +2312,10 @@ class SiChartComponent {
|
|
|
2312
2312
|
}
|
|
2313
2313
|
this.cdRef.markForCheck();
|
|
2314
2314
|
}
|
|
2315
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2316
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2315
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2316
|
+
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\n class=\"si-title-2 chart-title chart-title-width\"\n [style.background-color]=\"backgroundColor()\"\n >\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body-2\" [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" }] });
|
|
2317
2317
|
}
|
|
2318
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2318
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartComponent, decorators: [{
|
|
2319
2319
|
type: Component,
|
|
2320
2320
|
args: [{ selector: 'si-chart', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div\n class=\"si-title-2 chart-title chart-title-width\"\n [style.background-color]=\"backgroundColor()\"\n >\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body-2\" [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"] }]
|
|
2321
2321
|
}], propDecorators: { resetChart: [{
|
|
@@ -2652,10 +2652,10 @@ class SiChartCartesianComponent extends SiChartComponent {
|
|
|
2652
2652
|
addDataMulti(series) {
|
|
2653
2653
|
this.addDataInternal(series);
|
|
2654
2654
|
}
|
|
2655
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2656
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2655
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartCartesianComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2656
|
+
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\n class=\"si-title-2 chart-title chart-title-width\"\n [style.background-color]=\"backgroundColor()\"\n >\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body-2\" [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" }] });
|
|
2657
2657
|
}
|
|
2658
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2658
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartCartesianComponent, decorators: [{
|
|
2659
2659
|
type: Component,
|
|
2660
2660
|
args: [{ selector: 'si-chart-cartesian', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div\n class=\"si-title-2 chart-title chart-title-width\"\n [style.background-color]=\"backgroundColor()\"\n >\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body-2\" [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"] }]
|
|
2661
2661
|
}] });
|
|
@@ -2726,10 +2726,10 @@ class SiChartCircleComponent extends SiChartComponent {
|
|
|
2726
2726
|
});
|
|
2727
2727
|
this.updateEChart();
|
|
2728
2728
|
}
|
|
2729
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2730
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2729
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartCircleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2730
|
+
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\n class=\"si-title-2 chart-title chart-title-width\"\n [style.background-color]=\"backgroundColor()\"\n >\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body-2\" [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" }] });
|
|
2731
2731
|
}
|
|
2732
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2732
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartCircleComponent, decorators: [{
|
|
2733
2733
|
type: Component,
|
|
2734
2734
|
args: [{ selector: 'si-chart-circle', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div\n class=\"si-title-2 chart-title chart-title-width\"\n [style.background-color]=\"backgroundColor()\"\n >\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body-2\" [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"] }]
|
|
2735
2735
|
}] });
|
|
@@ -2758,11 +2758,17 @@ class SiChartGaugeComponent extends SiChartComponent {
|
|
|
2758
2758
|
/** @defaultValue false */
|
|
2759
2759
|
unitsOnSplit = input(false);
|
|
2760
2760
|
/**
|
|
2761
|
-
* Custom formatter for axis labels
|
|
2761
|
+
* Custom formatter for axis labels.
|
|
2762
2762
|
* Takes precedence when specified, i.e. number of decimals, unit etc needs
|
|
2763
2763
|
* to be set by the user using this formatter.
|
|
2764
2764
|
*/
|
|
2765
2765
|
labelFormatter = input();
|
|
2766
|
+
/**
|
|
2767
|
+
* Custom formatter for value.
|
|
2768
|
+
* Takes precedence when specified, i.e. number of decimals needs
|
|
2769
|
+
* to be set by the user using this formatter.
|
|
2770
|
+
*/
|
|
2771
|
+
valueFormatter = input();
|
|
2766
2772
|
/**
|
|
2767
2773
|
* Sets the number of decimals.
|
|
2768
2774
|
* @deprecated Use `minNumberOfDecimals` and `maxNumberOfDecimals` instead.
|
|
@@ -3014,7 +3020,7 @@ class SiChartGaugeComponent extends SiChartComponent {
|
|
|
3014
3020
|
detail: {
|
|
3015
3021
|
offsetCenter: [0, -0.5 * resp.valueFontSize],
|
|
3016
3022
|
valueAnimation: true,
|
|
3017
|
-
formatter: this.
|
|
3023
|
+
formatter: this.valueFormatterInternal(),
|
|
3018
3024
|
rich: {
|
|
3019
3025
|
value: {
|
|
3020
3026
|
fontSize: resp.valueFontSize,
|
|
@@ -3035,18 +3041,22 @@ class SiChartGaugeComponent extends SiChartComponent {
|
|
|
3035
3041
|
this.actualOptions.series = series;
|
|
3036
3042
|
this.applyTitles();
|
|
3037
3043
|
}
|
|
3038
|
-
|
|
3039
|
-
|
|
3040
|
-
|
|
3041
|
-
|
|
3042
|
-
|
|
3043
|
-
|
|
3044
|
-
|
|
3045
|
-
|
|
3046
|
-
|
|
3047
|
-
|
|
3048
|
-
|
|
3049
|
-
|
|
3044
|
+
valueFormatterInternal() {
|
|
3045
|
+
const unit = this.unit();
|
|
3046
|
+
const valueFormatter = this.valueFormatter();
|
|
3047
|
+
const labelFormatter = this.labelFormatter();
|
|
3048
|
+
const formattedUnit = unit ? (unit.length > 5 ? `\n{unit|${unit}}` : ` {unit|${unit}}`) : '';
|
|
3049
|
+
return (value) => {
|
|
3050
|
+
if (valueFormatter) {
|
|
3051
|
+
return `{value|${valueFormatter(value)}}${formattedUnit}`;
|
|
3052
|
+
}
|
|
3053
|
+
// DEPRECATED: Use the new input `valueFormatter` to format the value.
|
|
3054
|
+
// labelFormatter should be removed from here in future versions.
|
|
3055
|
+
if (labelFormatter) {
|
|
3056
|
+
return labelFormatter(value);
|
|
3057
|
+
}
|
|
3058
|
+
return `{value|${this.numberFormat().format(value)}}${formattedUnit}`;
|
|
3059
|
+
};
|
|
3050
3060
|
}
|
|
3051
3061
|
ngOnChanges(changes) {
|
|
3052
3062
|
if (this.chart && (changes.palette || changes.colors || changes.segments)) {
|
|
@@ -3068,10 +3078,10 @@ class SiChartGaugeComponent extends SiChartComponent {
|
|
|
3068
3078
|
optionSeries[2].data[0].value = this.calcValue(value);
|
|
3069
3079
|
this.refreshSeries();
|
|
3070
3080
|
}
|
|
3071
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3072
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3081
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartGaugeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3082
|
+
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\n class=\"si-title-2 chart-title chart-title-width\"\n [style.background-color]=\"backgroundColor()\"\n >\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body-2\" [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" }] });
|
|
3073
3083
|
}
|
|
3074
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3084
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartGaugeComponent, decorators: [{
|
|
3075
3085
|
type: Component,
|
|
3076
3086
|
args: [{ selector: 'si-chart-gauge', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div\n class=\"si-title-2 chart-title chart-title-width\"\n [style.background-color]=\"backgroundColor()\"\n >\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body-2\" [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"] }]
|
|
3077
3087
|
}] });
|
|
@@ -3270,10 +3280,10 @@ class SiChartProgressComponent extends SiChartComponent {
|
|
|
3270
3280
|
});
|
|
3271
3281
|
this.updateEChart();
|
|
3272
3282
|
}
|
|
3273
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3274
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3283
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartProgressComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3284
|
+
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\n class=\"si-title-2 chart-title chart-title-width\"\n [style.background-color]=\"backgroundColor()\"\n >\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body-2\" [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" }] });
|
|
3275
3285
|
}
|
|
3276
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3286
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartProgressComponent, decorators: [{
|
|
3277
3287
|
type: Component,
|
|
3278
3288
|
args: [{ selector: 'si-chart-progress', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div\n class=\"si-title-2 chart-title chart-title-width\"\n [style.background-color]=\"backgroundColor()\"\n >\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body-2\" [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"] }]
|
|
3279
3289
|
}] });
|
|
@@ -3421,10 +3431,10 @@ class SiChartProgressBarComponent extends SiChartComponent {
|
|
|
3421
3431
|
});
|
|
3422
3432
|
this.updateEChart();
|
|
3423
3433
|
}
|
|
3424
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3425
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3434
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartProgressBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3435
|
+
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\n class=\"si-title-2 chart-title chart-title-width\"\n [style.background-color]=\"backgroundColor()\"\n >\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body-2\" [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" }] });
|
|
3426
3436
|
}
|
|
3427
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3437
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartProgressBarComponent, decorators: [{
|
|
3428
3438
|
type: Component,
|
|
3429
3439
|
args: [{ selector: 'si-chart-progress-bar', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div\n class=\"si-title-2 chart-title chart-title-width\"\n [style.background-color]=\"backgroundColor()\"\n >\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body-2\" [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"] }]
|
|
3430
3440
|
}] });
|
|
@@ -3455,10 +3465,10 @@ class SiChartSankeyComponent extends SiChartComponent {
|
|
|
3455
3465
|
};
|
|
3456
3466
|
this.applyTitles();
|
|
3457
3467
|
}
|
|
3458
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3459
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3468
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartSankeyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3469
|
+
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\n class=\"si-title-2 chart-title chart-title-width\"\n [style.background-color]=\"backgroundColor()\"\n >\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body-2\" [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" }] });
|
|
3460
3470
|
}
|
|
3461
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3471
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartSankeyComponent, decorators: [{
|
|
3462
3472
|
type: Component,
|
|
3463
3473
|
args: [{ selector: 'si-chart-sankey', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div\n class=\"si-title-2 chart-title chart-title-width\"\n [style.background-color]=\"backgroundColor()\"\n >\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body-2\" [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"] }]
|
|
3464
3474
|
}] });
|
|
@@ -3484,10 +3494,10 @@ class SiChartSunburstComponent extends SiChartComponent {
|
|
|
3484
3494
|
};
|
|
3485
3495
|
this.applyTitles();
|
|
3486
3496
|
}
|
|
3487
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3488
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3497
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartSunburstComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3498
|
+
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\n class=\"si-title-2 chart-title chart-title-width\"\n [style.background-color]=\"backgroundColor()\"\n >\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body-2\" [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" }] });
|
|
3489
3499
|
}
|
|
3490
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3500
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartSunburstComponent, decorators: [{
|
|
3491
3501
|
type: Component,
|
|
3492
3502
|
args: [{ selector: 'si-chart-sunburst', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n <div\n class=\"si-title-2 chart-title chart-title-width\"\n [style.background-color]=\"backgroundColor()\"\n >\n <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n @if (subTitle()) {\n <div class=\"si-body-2\" [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"] }]
|
|
3493
3503
|
}] });
|
|
@@ -3512,8 +3522,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
3512
3522
|
* SPDX-License-Identifier: MIT
|
|
3513
3523
|
*/
|
|
3514
3524
|
class SiChartsNgModule {
|
|
3515
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3516
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
3525
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartsNgModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
3526
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiChartsNgModule, imports: [CommonModule,
|
|
3517
3527
|
SiChartCartesianComponent,
|
|
3518
3528
|
SiChartCircleComponent,
|
|
3519
3529
|
SiChartComponent,
|
|
@@ -3532,9 +3542,9 @@ class SiChartsNgModule {
|
|
|
3532
3542
|
SiChartSankeyComponent,
|
|
3533
3543
|
SiChartSunburstComponent,
|
|
3534
3544
|
SiCustomLegendComponent] });
|
|
3535
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
3545
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartsNgModule, imports: [CommonModule] });
|
|
3536
3546
|
}
|
|
3537
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3547
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiChartsNgModule, decorators: [{
|
|
3538
3548
|
type: NgModule,
|
|
3539
3549
|
args: [{
|
|
3540
3550
|
imports: [
|