@progress/kendo-angular-charts 21.1.1-develop.2 → 21.2.0-develop.10
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/chart/tooltip/shared-tooltip-template.directive.d.ts +4 -2
- package/chart-breadcrumb.component.d.ts +1 -1
- package/esm2022/chart/tooltip/crosshair-tooltips-container.component.mjs +12 -9
- package/esm2022/chart/tooltip/shared-tooltip-template.directive.mjs +4 -2
- package/esm2022/chart/tooltip/tooltip-popup.component.mjs +78 -50
- package/esm2022/chart-breadcrumb.component.mjs +1 -1
- package/esm2022/chart.component.mjs +49 -35
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/sankey/tooltip/tooltip-popup.component.mjs +69 -65
- package/esm2022/sankey.component.mjs +22 -19
- package/esm2022/sparkline.component.mjs +14 -11
- package/esm2022/stock-chart.component.mjs +12 -9
- package/fesm2022/progress-kendo-angular-charts.mjs +260 -196
- package/package.json +9 -9
|
@@ -27,9 +27,11 @@ import * as i0 from "@angular/core";
|
|
|
27
27
|
* <kendo-chart-tooltip [shared]="true">
|
|
28
28
|
* <ng-template kendoChartSharedTooltipTemplate let-category="category" let-points="points">
|
|
29
29
|
* <div> {{ category }} </div>
|
|
30
|
-
*
|
|
30
|
+
* @for (point of points; track point) {
|
|
31
|
+
* <div>
|
|
31
32
|
* {{ point.series.name }} : {{ point.value }}
|
|
32
|
-
*
|
|
33
|
+
* </div>
|
|
34
|
+
* }
|
|
33
35
|
* </ng-template>
|
|
34
36
|
* </kendo-chart-tooltip>
|
|
35
37
|
* <kendo-chart-category-axis>
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
|
|
6
6
|
import { BreadCrumbComponent, BreadCrumbItem } from '@progress/kendo-angular-navigation';
|
|
7
|
-
import { ChartComponent } from './
|
|
7
|
+
import { ChartComponent } from './chart.component';
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
/**
|
|
10
10
|
* Represents the Kendo UI Chart Breadcrumb component for Angular.
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { Component, ViewChildren, QueryList, Input } from '@angular/core';
|
|
6
6
|
import { CrosshairTooltipComponent } from './crosshair-tooltip.component';
|
|
7
|
-
import { NgFor } from '@angular/common';
|
|
8
7
|
import * as i0 from "@angular/core";
|
|
9
8
|
const AXES = ["categoryAxis", "valueAxis", "xAxis", "yAxis"];
|
|
10
9
|
/**
|
|
@@ -88,21 +87,25 @@ export class CrosshairTooltipsContainerComponent {
|
|
|
88
87
|
return result;
|
|
89
88
|
}
|
|
90
89
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CrosshairTooltipsContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
91
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
90
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CrosshairTooltipsContainerComponent, isStandalone: true, selector: "kendo-chart-crosshair-tooltips-container", inputs: { popupSettings: "popupSettings" }, viewQueries: [{ propertyName: "crossahairTooltipComponents", predicate: CrosshairTooltipComponent, descendants: true }], ngImport: i0, template: `
|
|
91
|
+
@for (key of tooltipKeys; track key) {
|
|
92
|
+
<kendo-chart-crosshair-tooltip [key]="key" [popupSettings]="popupSettings">
|
|
93
|
+
</kendo-chart-crosshair-tooltip>
|
|
94
|
+
}
|
|
95
|
+
`, isInline: true, dependencies: [{ kind: "component", type: CrosshairTooltipComponent, selector: "kendo-chart-crosshair-tooltip", inputs: ["key"] }] });
|
|
95
96
|
}
|
|
96
97
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CrosshairTooltipsContainerComponent, decorators: [{
|
|
97
98
|
type: Component,
|
|
98
99
|
args: [{
|
|
99
100
|
selector: 'kendo-chart-crosshair-tooltips-container',
|
|
100
101
|
template: `
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
102
|
+
@for (key of tooltipKeys; track key) {
|
|
103
|
+
<kendo-chart-crosshair-tooltip [key]="key" [popupSettings]="popupSettings">
|
|
104
|
+
</kendo-chart-crosshair-tooltip>
|
|
105
|
+
}
|
|
106
|
+
`,
|
|
104
107
|
standalone: true,
|
|
105
|
-
imports: [
|
|
108
|
+
imports: [CrosshairTooltipComponent]
|
|
106
109
|
}]
|
|
107
110
|
}], propDecorators: { popupSettings: [{
|
|
108
111
|
type: Input
|
|
@@ -27,9 +27,11 @@ import * as i0 from "@angular/core";
|
|
|
27
27
|
* <kendo-chart-tooltip [shared]="true">
|
|
28
28
|
* <ng-template kendoChartSharedTooltipTemplate let-category="category" let-points="points">
|
|
29
29
|
* <div> {{ category }} </div>
|
|
30
|
-
*
|
|
30
|
+
* @for (point of points; track point) {
|
|
31
|
+
* <div>
|
|
31
32
|
* {{ point.series.name }} : {{ point.value }}
|
|
32
|
-
*
|
|
33
|
+
* </div>
|
|
34
|
+
* }
|
|
33
35
|
* </ng-template>
|
|
34
36
|
* </kendo-chart-tooltip>
|
|
35
37
|
* <kendo-chart-category-axis>
|
|
@@ -12,7 +12,7 @@ import { TooltipTemplateService } from '../../common/tooltip-template.service';
|
|
|
12
12
|
import { PopupService, POPUP_CONTAINER } from '@progress/kendo-angular-popup';
|
|
13
13
|
import { bodyFactory } from './body-factory';
|
|
14
14
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
15
|
-
import { NgClass, NgStyle,
|
|
15
|
+
import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
|
|
16
16
|
import * as i0 from "@angular/core";
|
|
17
17
|
import * as i1 from "@progress/kendo-angular-popup";
|
|
18
18
|
import * as i2 from "../../common/tooltip-template.service";
|
|
@@ -121,42 +121,56 @@ export class TooltipPopupComponent extends BaseTooltip {
|
|
|
121
121
|
super.hide();
|
|
122
122
|
}
|
|
123
123
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipPopupComponent, deps: [{ token: i1.PopupService }, { token: i2.TooltipTemplateService }, { token: i3.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
124
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
124
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TooltipPopupComponent, isStandalone: true, selector: "kendo-chart-tooltip-popup", inputs: { animate: "animate", classNames: "classNames", wrapperClass: "wrapperClass" }, outputs: { leave: "leave" }, providers: [PopupService, {
|
|
125
125
|
provide: POPUP_CONTAINER,
|
|
126
126
|
useFactory: bodyFactory
|
|
127
127
|
}], viewQueries: [{ propertyName: "defaultSeriesTooltipTemplate", first: true, predicate: SeriesTooltipTemplateDirective, descendants: true }, { propertyName: "defaultSharedTooltipTemplate", first: true, predicate: SharedTooltipTemplateDirective, descendants: true }, { propertyName: "templateRef", first: true, predicate: ["content"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
|
|
128
128
|
<ng-template #content>
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
129
|
+
<div [ngClass]="popupClasses" [ngStyle]="style">
|
|
130
|
+
@if (!shared) {
|
|
131
|
+
<ng-template [ngTemplateOutlet]="seriesTooltipTemplateRef"
|
|
132
|
+
[ngTemplateOutletContext]="seriesTooltipContext">
|
|
132
133
|
</ng-template>
|
|
133
|
-
|
|
134
|
-
|
|
134
|
+
}
|
|
135
|
+
@if (shared) {
|
|
136
|
+
<ng-template [ngTemplateOutlet]="seriesSharedTooltipTemplateRef"
|
|
137
|
+
[ngTemplateOutletContext]="seriesSharedTooltipContext">
|
|
135
138
|
</ng-template>
|
|
136
|
-
|
|
139
|
+
}
|
|
140
|
+
</div>
|
|
137
141
|
</ng-template>
|
|
138
|
-
|
|
142
|
+
|
|
139
143
|
<ng-template kendoChartSeriesTooltipTemplate let-formattedValue="formattedValue">
|
|
140
|
-
|
|
144
|
+
<span [innerHTML]="formattedValue"></span>
|
|
141
145
|
</ng-template>
|
|
142
146
|
<ng-template kendoChartSharedTooltipTemplate let-points="points" let-categoryText="categoryText" let-colspan="colspan" let-colorMarker="colorMarker" let-nameColumn="nameColumn" >
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
147
|
+
<table>
|
|
148
|
+
<tr><th [attr.colspan]='colspan'> {{ categoryText }} </th></tr>
|
|
149
|
+
@for (point of points; track point) {
|
|
150
|
+
<tr>
|
|
151
|
+
@if (colorMarker) {
|
|
152
|
+
<td><span class='k-chart-shared-tooltip-marker' [style.background-color]='point.series.color'></span></td>
|
|
153
|
+
}
|
|
154
|
+
@if (nameColumn) {
|
|
155
|
+
<td>
|
|
156
|
+
@if (point.series.name !== undefined) {
|
|
157
|
+
{{ point.series.name }}
|
|
158
|
+
}
|
|
159
|
+
@if (point.series.name === undefined) {
|
|
160
|
+
|
|
161
|
+
}
|
|
162
|
+
</td>
|
|
163
|
+
}
|
|
164
|
+
<td>
|
|
165
|
+
<ng-template [ngTemplateOutlet]="point.template"
|
|
166
|
+
[ngTemplateOutletContext]="point">
|
|
167
|
+
</ng-template>
|
|
168
|
+
</td>
|
|
169
|
+
</tr>
|
|
170
|
+
}
|
|
171
|
+
</table>
|
|
158
172
|
</ng-template>
|
|
159
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type:
|
|
173
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SeriesTooltipTemplateDirective, selector: "[kendoChartSeriesTooltipTemplate]" }, { kind: "directive", type: SharedTooltipTemplateDirective, selector: "[kendoChartSharedTooltipTemplate]" }] });
|
|
160
174
|
}
|
|
161
175
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipPopupComponent, decorators: [{
|
|
162
176
|
type: Component,
|
|
@@ -168,39 +182,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
168
182
|
selector: 'kendo-chart-tooltip-popup',
|
|
169
183
|
template: `
|
|
170
184
|
<ng-template #content>
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
185
|
+
<div [ngClass]="popupClasses" [ngStyle]="style">
|
|
186
|
+
@if (!shared) {
|
|
187
|
+
<ng-template [ngTemplateOutlet]="seriesTooltipTemplateRef"
|
|
188
|
+
[ngTemplateOutletContext]="seriesTooltipContext">
|
|
174
189
|
</ng-template>
|
|
175
|
-
|
|
176
|
-
|
|
190
|
+
}
|
|
191
|
+
@if (shared) {
|
|
192
|
+
<ng-template [ngTemplateOutlet]="seriesSharedTooltipTemplateRef"
|
|
193
|
+
[ngTemplateOutletContext]="seriesSharedTooltipContext">
|
|
177
194
|
</ng-template>
|
|
178
|
-
|
|
195
|
+
}
|
|
196
|
+
</div>
|
|
179
197
|
</ng-template>
|
|
180
|
-
|
|
198
|
+
|
|
181
199
|
<ng-template kendoChartSeriesTooltipTemplate let-formattedValue="formattedValue">
|
|
182
|
-
|
|
200
|
+
<span [innerHTML]="formattedValue"></span>
|
|
183
201
|
</ng-template>
|
|
184
202
|
<ng-template kendoChartSharedTooltipTemplate let-points="points" let-categoryText="categoryText" let-colspan="colspan" let-colorMarker="colorMarker" let-nameColumn="nameColumn" >
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
203
|
+
<table>
|
|
204
|
+
<tr><th [attr.colspan]='colspan'> {{ categoryText }} </th></tr>
|
|
205
|
+
@for (point of points; track point) {
|
|
206
|
+
<tr>
|
|
207
|
+
@if (colorMarker) {
|
|
208
|
+
<td><span class='k-chart-shared-tooltip-marker' [style.background-color]='point.series.color'></span></td>
|
|
209
|
+
}
|
|
210
|
+
@if (nameColumn) {
|
|
211
|
+
<td>
|
|
212
|
+
@if (point.series.name !== undefined) {
|
|
213
|
+
{{ point.series.name }}
|
|
214
|
+
}
|
|
215
|
+
@if (point.series.name === undefined) {
|
|
216
|
+
|
|
217
|
+
}
|
|
218
|
+
</td>
|
|
219
|
+
}
|
|
220
|
+
<td>
|
|
221
|
+
<ng-template [ngTemplateOutlet]="point.template"
|
|
222
|
+
[ngTemplateOutletContext]="point">
|
|
223
|
+
</ng-template>
|
|
224
|
+
</td>
|
|
225
|
+
</tr>
|
|
226
|
+
}
|
|
227
|
+
</table>
|
|
200
228
|
</ng-template>
|
|
201
229
|
`,
|
|
202
230
|
standalone: true,
|
|
203
|
-
imports: [NgClass, NgStyle,
|
|
231
|
+
imports: [NgClass, NgStyle, NgTemplateOutlet, SeriesTooltipTemplateDirective, SharedTooltipTemplateDirective]
|
|
204
232
|
}]
|
|
205
233
|
}], ctorParameters: () => [{ type: i1.PopupService }, { type: i2.TooltipTemplateService }, { type: i3.LocalizationService }, { type: i0.NgZone }], propDecorators: { defaultSeriesTooltipTemplate: [{
|
|
206
234
|
type: ViewChild,
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { Component, Input, ViewChild, isDevMode } from '@angular/core';
|
|
6
6
|
import { BreadCrumbComponent } from '@progress/kendo-angular-navigation';
|
|
7
|
-
import { ChartComponent } from './
|
|
7
|
+
import { ChartComponent } from './chart.component';
|
|
8
8
|
import { Subscription } from 'rxjs';
|
|
9
9
|
import { homeIcon } from '@progress/kendo-svg-icons';
|
|
10
10
|
import * as i0 from "@angular/core";
|
|
@@ -31,7 +31,7 @@ import { packageMetadata } from './package-metadata';
|
|
|
31
31
|
import { SeriesComponent } from './chart/series.component';
|
|
32
32
|
import { DrilldownEvent } from './events/drilldown-event';
|
|
33
33
|
import { hasObservers } from './common/has-observers';
|
|
34
|
-
import {
|
|
34
|
+
import { NgStyle, NgTemplateOutlet } from '@angular/common';
|
|
35
35
|
import { LocalizedChartMessagesDirective } from './chart/localization/localized-messages.directive';
|
|
36
36
|
import * as i0 from "@angular/core";
|
|
37
37
|
import * as i1 from "./common/configuration.service";
|
|
@@ -877,7 +877,7 @@ export class ChartComponent {
|
|
|
877
877
|
return Boolean(this.localizationService.rtl);
|
|
878
878
|
}
|
|
879
879
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartComponent, deps: [{ token: i1.ConfigurationService }, { token: i2.ThemeService }, { token: i0.ElementRef }, { token: i3.IntlService }, { token: i4.LocalizationService }, { token: i0.NgZone }, { token: i5.InstanceEventService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
880
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
880
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChartComponent, isStandalone: true, selector: "kendo-chart", inputs: { pannable: "pannable", renderAs: "renderAs", seriesColors: "seriesColors", subtitle: "subtitle", title: "title", noData: "noData", observeStyles: "observeStyles", transitions: "transitions", zoomable: "zoomable", axisDefaults: "axisDefaults", categoryAxis: "categoryAxis", chartArea: "chartArea", legend: "legend", panes: "panes", paneDefaults: "paneDefaults", plotArea: "plotArea", series: "series", seriesDefaults: "seriesDefaults", tooltip: "tooltip", valueAxis: "valueAxis", xAxis: "xAxis", yAxis: "yAxis", resizeRateLimit: "resizeRateLimit", popupSettings: "popupSettings", drilldownLevel: "drilldownLevel" }, outputs: { axisLabelClick: "axisLabelClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", legendItemHover: "legendItemHover", legendItemLeave: "legendItemLeave", noteClick: "noteClick", noteHover: "noteHover", noteLeave: "noteLeave", paneRender: "paneRender", plotAreaClick: "plotAreaClick", plotAreaHover: "plotAreaHover", plotAreaLeave: "plotAreaLeave", render: "render", select: "select", selectEnd: "selectEnd", selectStart: "selectStart", seriesClick: "seriesClick", drilldown: "drilldown", seriesHover: "seriesHover", seriesOver: "seriesOver", seriesLeave: "seriesLeave", zoom: "zoom", zoomEnd: "zoomEnd", zoomStart: "zoomStart", legendItemClick: "legendItemClick", drilldownLevelChange: "drilldownLevelChange" }, providers: [
|
|
881
881
|
ConfigurationService,
|
|
882
882
|
TooltipTemplateService,
|
|
883
883
|
InstanceEventService,
|
|
@@ -888,31 +888,38 @@ export class ChartComponent {
|
|
|
888
888
|
}
|
|
889
889
|
], queries: [{ propertyName: "donutCenterTemplate", first: true, predicate: DonutCenterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "seriesCollectionComponent", predicate: SeriesComponent }, { propertyName: "seriesComponents", predicate: SeriesItemComponent, descendants: true }], viewQueries: [{ propertyName: "tooltipInstance", first: true, predicate: TooltipPopupComponent, descendants: true, static: true }, { propertyName: "crossahirTooltips", first: true, predicate: CrosshairTooltipsContainerComponent, descendants: true, static: true }, { propertyName: "surfaceElement", first: true, predicate: ["surface"], descendants: true, static: true }], exportAs: ["kendoChart"], usesOnChanges: true, ngImport: i0, template: `
|
|
890
890
|
<ng-container
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
891
|
+
kendoChartLocalizedMessages
|
|
892
|
+
i18n-noData="kendo.chart.noData|The message to display when no series are defined, or all series are empty"
|
|
893
|
+
noData="No data available"
|
|
894
894
|
></ng-container>
|
|
895
895
|
<div #surface class="k-chart-surface">
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
896
|
+
@if (noData) {
|
|
897
|
+
<div class='k-chart-overlay' [style.display]="'none'">
|
|
898
|
+
<div class='k-no-data'>
|
|
899
|
+
@if (noDataTemplate) {
|
|
900
|
+
<ng-template [ngTemplateOutlet]="noDataTemplate.templateRef"></ng-template>
|
|
901
|
+
} @else {
|
|
902
|
+
{{ messageFor('noData') }}
|
|
903
|
+
}
|
|
904
|
+
</div>
|
|
903
905
|
</div>
|
|
906
|
+
}
|
|
904
907
|
</div>
|
|
905
908
|
<kendo-chart-crosshair-tooltips-container [popupSettings]="popupSettings">
|
|
906
909
|
</kendo-chart-crosshair-tooltips-container>
|
|
907
910
|
<kendo-chart-tooltip-popup (leave)="tooltipMouseleave($event)" [popupSettings]="popupSettings">
|
|
908
911
|
</kendo-chart-tooltip-popup>
|
|
909
912
|
<kendo-resize-sensor (resize)="onResize()" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
|
|
910
|
-
|
|
911
|
-
<
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
913
|
+
@if (donutCenterStyle && donutCenterTemplate) {
|
|
914
|
+
<div class="k-chart-donut-center" [ngStyle]="donutCenterStyle">
|
|
915
|
+
<ng-template [ngTemplateOutlet]="donutCenterTemplate.templateRef"></ng-template>
|
|
916
|
+
</div>
|
|
917
|
+
}
|
|
918
|
+
|
|
919
|
+
@if (showLicenseWatermark) {
|
|
920
|
+
<div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
|
|
921
|
+
}
|
|
922
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedChartMessagesDirective, selector: "[kendoChartLocalizedMessages]" }, { kind: "component", type: CrosshairTooltipsContainerComponent, selector: "kendo-chart-crosshair-tooltips-container", inputs: ["popupSettings"] }, { kind: "component", type: TooltipPopupComponent, selector: "kendo-chart-tooltip-popup", inputs: ["animate", "classNames", "wrapperClass"], outputs: ["leave"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
916
923
|
}
|
|
917
924
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartComponent, decorators: [{
|
|
918
925
|
type: Component,
|
|
@@ -932,33 +939,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
932
939
|
selector: 'kendo-chart',
|
|
933
940
|
template: `
|
|
934
941
|
<ng-container
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
942
|
+
kendoChartLocalizedMessages
|
|
943
|
+
i18n-noData="kendo.chart.noData|The message to display when no series are defined, or all series are empty"
|
|
944
|
+
noData="No data available"
|
|
938
945
|
></ng-container>
|
|
939
946
|
<div #surface class="k-chart-surface">
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
+
@if (noData) {
|
|
948
|
+
<div class='k-chart-overlay' [style.display]="'none'">
|
|
949
|
+
<div class='k-no-data'>
|
|
950
|
+
@if (noDataTemplate) {
|
|
951
|
+
<ng-template [ngTemplateOutlet]="noDataTemplate.templateRef"></ng-template>
|
|
952
|
+
} @else {
|
|
953
|
+
{{ messageFor('noData') }}
|
|
954
|
+
}
|
|
955
|
+
</div>
|
|
947
956
|
</div>
|
|
957
|
+
}
|
|
948
958
|
</div>
|
|
949
959
|
<kendo-chart-crosshair-tooltips-container [popupSettings]="popupSettings">
|
|
950
960
|
</kendo-chart-crosshair-tooltips-container>
|
|
951
961
|
<kendo-chart-tooltip-popup (leave)="tooltipMouseleave($event)" [popupSettings]="popupSettings">
|
|
952
962
|
</kendo-chart-tooltip-popup>
|
|
953
963
|
<kendo-resize-sensor (resize)="onResize()" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
|
|
954
|
-
|
|
955
|
-
<
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
964
|
+
@if (donutCenterStyle && donutCenterTemplate) {
|
|
965
|
+
<div class="k-chart-donut-center" [ngStyle]="donutCenterStyle">
|
|
966
|
+
<ng-template [ngTemplateOutlet]="donutCenterTemplate.templateRef"></ng-template>
|
|
967
|
+
</div>
|
|
968
|
+
}
|
|
969
|
+
|
|
970
|
+
@if (showLicenseWatermark) {
|
|
971
|
+
<div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
|
|
972
|
+
}
|
|
973
|
+
`,
|
|
960
974
|
standalone: true,
|
|
961
|
-
imports: [LocalizedChartMessagesDirective, CrosshairTooltipsContainerComponent, TooltipPopupComponent, ResizeSensorComponent,
|
|
975
|
+
imports: [LocalizedChartMessagesDirective, CrosshairTooltipsContainerComponent, TooltipPopupComponent, ResizeSensorComponent, NgStyle, NgTemplateOutlet, WatermarkOverlayComponent]
|
|
962
976
|
}]
|
|
963
977
|
}], ctorParameters: () => [{ type: i1.ConfigurationService }, { type: i2.ThemeService }, { type: i0.ElementRef }, { type: i3.IntlService }, { type: i4.LocalizationService }, { type: i0.NgZone }, { type: i5.InstanceEventService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { pannable: [{
|
|
964
978
|
type: Input
|
|
@@ -10,7 +10,7 @@ export const packageMetadata = {
|
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCode: 'KENDOUIANGULAR',
|
|
12
12
|
productCodes: ['KENDOUIANGULAR'],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: '21.
|
|
13
|
+
publishDate: 1764593093,
|
|
14
|
+
version: '21.2.0-develop.10',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
16
16
|
};
|
|
@@ -15,7 +15,7 @@ import { SankeyTooltipTemplateService } from './tooltip-template.service';
|
|
|
15
15
|
import { arrowLeftIcon, arrowRightIcon } from '@progress/kendo-svg-icons';
|
|
16
16
|
import { IntlService } from '@progress/kendo-angular-intl';
|
|
17
17
|
import { SquareSymbol } from './square-symbol.directive';
|
|
18
|
-
import { NgStyle,
|
|
18
|
+
import { NgStyle, NgTemplateOutlet } from '@angular/common';
|
|
19
19
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
20
20
|
import * as i0 from "@angular/core";
|
|
21
21
|
import * as i1 from "@progress/kendo-angular-popup";
|
|
@@ -127,7 +127,7 @@ export class SankeyTooltipPopupComponent extends BaseTooltip {
|
|
|
127
127
|
return Boolean(this.localizationService.rtl);
|
|
128
128
|
}
|
|
129
129
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SankeyTooltipPopupComponent, deps: [{ token: i0.ElementRef }, { token: i1.PopupService }, { token: i2.SankeyTooltipTemplateService }, { token: i3.LocalizationService }, { token: i4.IntlService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
130
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
130
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SankeyTooltipPopupComponent, isStandalone: true, selector: "kendo-sankey-tooltip-popup", inputs: { animate: "animate", wrapperClass: "wrapperClass", tooltipUnitFormat: "tooltipUnitFormat", offset: "offset" }, providers: [
|
|
131
131
|
PopupService,
|
|
132
132
|
{
|
|
133
133
|
provide: POPUP_CONTAINER,
|
|
@@ -135,43 +135,45 @@ export class SankeyTooltipPopupComponent extends BaseTooltip {
|
|
|
135
135
|
},
|
|
136
136
|
], viewQueries: [{ propertyName: "defaultNodeTooltipTemplate", first: true, predicate: SankeyNodeTooltipTemplateDirective, descendants: true }, { propertyName: "defaultLinkTooltipTemplate", first: true, predicate: SankeyLinkTooltipTemplateDirective, descendants: true }, { propertyName: "templateRef", first: true, predicate: ["content"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
|
|
137
137
|
<ng-template #content>
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
</
|
|
138
|
+
<div class="k-tooltip k-sankey-tooltip k-chart-tooltip k-chart-shared-tooltip" [ngStyle]="style">
|
|
139
|
+
<div class="k-tooltip-content">
|
|
140
|
+
@if (isNode) {
|
|
141
|
+
<ng-template
|
|
142
|
+
[ngTemplateOutlet]="nodeTooltipTemplateRef"
|
|
143
|
+
[ngTemplateOutletContext]="nodeTooltipContext"
|
|
144
|
+
>
|
|
145
|
+
</ng-template>
|
|
146
|
+
}
|
|
147
|
+
@if (isLink) {
|
|
148
|
+
<ng-template
|
|
149
|
+
[ngTemplateOutlet]="linkTooltipTemplateRef"
|
|
150
|
+
[ngTemplateOutletContext]="linkTooltipContext"
|
|
151
|
+
>
|
|
152
|
+
</ng-template>
|
|
153
|
+
}
|
|
153
154
|
</div>
|
|
155
|
+
</div>
|
|
154
156
|
</ng-template>
|
|
155
|
-
|
|
157
|
+
|
|
156
158
|
<ng-template kendoSankeyNodeTooltipTemplate let-color="color" let-label="label" let-value="value">
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
159
|
+
<div [ngStyle]="tooltipStyle">
|
|
160
|
+
<div squareSymbol [color]="color"></div>
|
|
161
|
+
<span [ngStyle]="textStyle">{{ label.text }}</span>
|
|
162
|
+
<span [ngStyle]="textStyle">{{ formatUnits(value) }}</span>
|
|
163
|
+
</div>
|
|
162
164
|
</ng-template>
|
|
163
|
-
|
|
165
|
+
|
|
164
166
|
<ng-template kendoSankeyLinkTooltipTemplate let-source="source" let-target="target" let-value="value">
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
167
|
+
<div [ngStyle]="tooltipStyle">
|
|
168
|
+
<div squareSymbol [color]="source.color"></div>
|
|
169
|
+
<span [ngStyle]="textStyle">{{ source.label?.text }}</span>
|
|
170
|
+
<kendo-icon-wrapper [name]="arrowIcon.name" [svgIcon]="arrowIcon"></kendo-icon-wrapper>
|
|
171
|
+
<div squareSymbol [color]="target.color"></div>
|
|
172
|
+
<span [ngStyle]="textStyle">{{ target.label?.text }}</span>
|
|
173
|
+
<span [ngStyle]="textStyle">{{ formatUnits(value) }}</span>
|
|
174
|
+
</div>
|
|
173
175
|
</ng-template>
|
|
174
|
-
|
|
176
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SankeyNodeTooltipTemplateDirective, selector: "[kendoSankeyNodeTooltipTemplate]" }, { kind: "directive", type: SquareSymbol, selector: "[squareSymbol]", inputs: ["color", "size"] }, { kind: "directive", type: SankeyLinkTooltipTemplateDirective, selector: "[kendoSankeyLinkTooltipTemplate]" }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
|
|
175
177
|
}
|
|
176
178
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SankeyTooltipPopupComponent, decorators: [{
|
|
177
179
|
type: Component,
|
|
@@ -186,45 +188,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
186
188
|
selector: 'kendo-sankey-tooltip-popup',
|
|
187
189
|
template: `
|
|
188
190
|
<ng-template #content>
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
</
|
|
191
|
+
<div class="k-tooltip k-sankey-tooltip k-chart-tooltip k-chart-shared-tooltip" [ngStyle]="style">
|
|
192
|
+
<div class="k-tooltip-content">
|
|
193
|
+
@if (isNode) {
|
|
194
|
+
<ng-template
|
|
195
|
+
[ngTemplateOutlet]="nodeTooltipTemplateRef"
|
|
196
|
+
[ngTemplateOutletContext]="nodeTooltipContext"
|
|
197
|
+
>
|
|
198
|
+
</ng-template>
|
|
199
|
+
}
|
|
200
|
+
@if (isLink) {
|
|
201
|
+
<ng-template
|
|
202
|
+
[ngTemplateOutlet]="linkTooltipTemplateRef"
|
|
203
|
+
[ngTemplateOutletContext]="linkTooltipContext"
|
|
204
|
+
>
|
|
205
|
+
</ng-template>
|
|
206
|
+
}
|
|
204
207
|
</div>
|
|
208
|
+
</div>
|
|
205
209
|
</ng-template>
|
|
206
|
-
|
|
210
|
+
|
|
207
211
|
<ng-template kendoSankeyNodeTooltipTemplate let-color="color" let-label="label" let-value="value">
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
212
|
+
<div [ngStyle]="tooltipStyle">
|
|
213
|
+
<div squareSymbol [color]="color"></div>
|
|
214
|
+
<span [ngStyle]="textStyle">{{ label.text }}</span>
|
|
215
|
+
<span [ngStyle]="textStyle">{{ formatUnits(value) }}</span>
|
|
216
|
+
</div>
|
|
213
217
|
</ng-template>
|
|
214
|
-
|
|
218
|
+
|
|
215
219
|
<ng-template kendoSankeyLinkTooltipTemplate let-source="source" let-target="target" let-value="value">
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
220
|
+
<div [ngStyle]="tooltipStyle">
|
|
221
|
+
<div squareSymbol [color]="source.color"></div>
|
|
222
|
+
<span [ngStyle]="textStyle">{{ source.label?.text }}</span>
|
|
223
|
+
<kendo-icon-wrapper [name]="arrowIcon.name" [svgIcon]="arrowIcon"></kendo-icon-wrapper>
|
|
224
|
+
<div squareSymbol [color]="target.color"></div>
|
|
225
|
+
<span [ngStyle]="textStyle">{{ target.label?.text }}</span>
|
|
226
|
+
<span [ngStyle]="textStyle">{{ formatUnits(value) }}</span>
|
|
227
|
+
</div>
|
|
224
228
|
</ng-template>
|
|
225
|
-
|
|
229
|
+
`,
|
|
226
230
|
standalone: true,
|
|
227
|
-
imports: [NgStyle,
|
|
231
|
+
imports: [NgStyle, NgTemplateOutlet, SankeyNodeTooltipTemplateDirective, SquareSymbol, SankeyLinkTooltipTemplateDirective, IconWrapperComponent]
|
|
228
232
|
}]
|
|
229
233
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.PopupService }, { type: i2.SankeyTooltipTemplateService }, { type: i3.LocalizationService }, { type: i4.IntlService }, { type: i0.NgZone }, { type: i0.Renderer2 }], propDecorators: { defaultNodeTooltipTemplate: [{
|
|
230
234
|
type: ViewChild,
|