@progress/kendo-angular-charts 18.1.0-develop.30 → 18.1.0-develop.4
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/common/theme.service.d.ts +13 -2
- package/esm2022/common/theme.service.mjs +198 -15
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/sankey.component.mjs +11 -5
- package/fesm2022/progress-kendo-angular-charts.mjs +208 -37
- package/package.json +11 -11
- package/sankey.component.d.ts +4 -3
- package/esm2022/sankey/theme.service.mjs +0 -25
- package/sankey/theme.service.d.ts +0 -14
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import { NgZone } from '@angular/core';
|
|
5
6
|
import { ConfigurationService } from './configuration.service';
|
|
6
7
|
import * as i0 from "@angular/core";
|
|
7
8
|
/**
|
|
@@ -9,12 +10,22 @@ import * as i0 from "@angular/core";
|
|
|
9
10
|
*/
|
|
10
11
|
export declare class ThemeService extends ConfigurationService {
|
|
11
12
|
private loaded;
|
|
12
|
-
|
|
13
|
+
private element;
|
|
14
|
+
constructor(ngZone: NgZone);
|
|
13
15
|
loadTheme(): void;
|
|
14
16
|
reset(): void;
|
|
15
|
-
|
|
17
|
+
private readTheme;
|
|
18
|
+
private readDefaultTheme;
|
|
16
19
|
private createElement;
|
|
17
20
|
private destroyElement;
|
|
21
|
+
private setStyle;
|
|
22
|
+
private setColors;
|
|
23
|
+
private setInactiveOpacity;
|
|
24
|
+
private setFonts;
|
|
25
|
+
private setSeriesColors;
|
|
26
|
+
private mapColor;
|
|
27
|
+
private queryColor;
|
|
28
|
+
private queryStyle;
|
|
18
29
|
static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, never>;
|
|
19
30
|
static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService>;
|
|
20
31
|
}
|
|
@@ -2,25 +2,94 @@
|
|
|
2
2
|
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Injectable } from '@angular/core';
|
|
5
|
+
import { Injectable, NgZone } from '@angular/core';
|
|
6
6
|
import { ConfigurationService } from './configuration.service';
|
|
7
|
-
import { chartBaseTheme
|
|
7
|
+
import { chartBaseTheme } from '@progress/kendo-charts';
|
|
8
8
|
import { chartDefaultTheme } from './chart-default-theme';
|
|
9
9
|
import { isDocumentAvailable } from '@progress/kendo-angular-common';
|
|
10
10
|
import * as i0 from "@angular/core";
|
|
11
|
+
const font = (style) => `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
|
|
12
|
+
const computedBackgroundColor = (element) => window.getComputedStyle(element).backgroundColor;
|
|
13
|
+
const letterPos = (letter) => letter.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0);
|
|
14
|
+
const seriesPos = (name) => {
|
|
15
|
+
const alpha = name.match(/series-([a-z])$/);
|
|
16
|
+
if (alpha !== null) {
|
|
17
|
+
return letterPos(alpha[1]);
|
|
18
|
+
}
|
|
19
|
+
const num = name.split('--series-')[1];
|
|
20
|
+
return parseInt(num, 10) - 1;
|
|
21
|
+
};
|
|
22
|
+
const SERIES_COLORS = 30;
|
|
23
|
+
const seriesTemplate = () => {
|
|
24
|
+
let template = `
|
|
25
|
+
<div class="k-var--series-a"></div>
|
|
26
|
+
<div class="k-var--series-b"></div>
|
|
27
|
+
<div class="k-var--series-c"></div>
|
|
28
|
+
<div class="k-var--series-d"></div>
|
|
29
|
+
<div class="k-var--series-e"></div>
|
|
30
|
+
<div class="k-var--series-f"></div>
|
|
31
|
+
`;
|
|
32
|
+
for (let i = 0; i < SERIES_COLORS; i++) {
|
|
33
|
+
template += `
|
|
34
|
+
<div class="k-var--series-${i + 1}"></div>`;
|
|
35
|
+
}
|
|
36
|
+
return template;
|
|
37
|
+
};
|
|
38
|
+
const template = () => `
|
|
39
|
+
<div class="k-var--primary"></div>
|
|
40
|
+
<div class="k-var--primary-contrast"></div>
|
|
41
|
+
<div class="k-var--base"></div>
|
|
42
|
+
<div class="k-var--background"></div>
|
|
43
|
+
|
|
44
|
+
<div class="k-var--kendo-color-subtle"></div>
|
|
45
|
+
|
|
46
|
+
<div class="k-var--normal-background"></div>
|
|
47
|
+
<div class="k-var--normal-text-color"></div>
|
|
48
|
+
<div class="k-var--hover-background"></div>
|
|
49
|
+
<div class="k-var--hover-text-color"></div>
|
|
50
|
+
<div class="k-var--selected-background"></div>
|
|
51
|
+
<div class="k-var--selected-text-color"></div>
|
|
52
|
+
<div class="k-var--chart-error-bars-background"></div>
|
|
53
|
+
<div class="k-var--chart-notes-background"></div>
|
|
54
|
+
<div class="k-var--chart-notes-border"></div>
|
|
55
|
+
<div class="k-var--chart-notes-lines"></div>
|
|
56
|
+
<div class="k-var--chart-crosshair-background"></div>
|
|
57
|
+
|
|
58
|
+
<div class="k-var--chart-inactive"></div>
|
|
59
|
+
<div class="k-var--chart-major-lines"></div>
|
|
60
|
+
<div class="k-var--chart-minor-lines"></div>
|
|
61
|
+
<div class="k-var--chart-area-opacity"></div>
|
|
62
|
+
<div class="k-var--chart-area-inactive-opacity"></div>
|
|
63
|
+
<div class="k-var--chart-line-inactive-opacity"></div>
|
|
64
|
+
|
|
65
|
+
<div class="k-widget k-chart">
|
|
66
|
+
<div class="k-var--chart-font"></div>
|
|
67
|
+
<div class="k-var--chart-title-font"></div>
|
|
68
|
+
<div class="k-var--chart-pane-title-font"></div>
|
|
69
|
+
<div class="k-var--chart-label-font"></div>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<div class="k-var--series-unset"></div>
|
|
73
|
+
<div class="k-var--series">
|
|
74
|
+
${seriesTemplate()}
|
|
75
|
+
</div>
|
|
76
|
+
`;
|
|
11
77
|
/**
|
|
12
78
|
* @hidden
|
|
13
79
|
*/
|
|
14
80
|
export class ThemeService extends ConfigurationService {
|
|
15
81
|
loaded = false;
|
|
16
82
|
element;
|
|
83
|
+
constructor(ngZone) {
|
|
84
|
+
super(ngZone);
|
|
85
|
+
}
|
|
17
86
|
loadTheme() {
|
|
18
87
|
if (this.loaded || !isDocumentAvailable()) {
|
|
19
88
|
return;
|
|
20
89
|
}
|
|
21
|
-
this.
|
|
22
|
-
|
|
23
|
-
|
|
90
|
+
if (!this.readTheme()) {
|
|
91
|
+
this.readDefaultTheme();
|
|
92
|
+
}
|
|
24
93
|
this.loaded = true;
|
|
25
94
|
this.next();
|
|
26
95
|
}
|
|
@@ -30,21 +99,29 @@ export class ThemeService extends ConfigurationService {
|
|
|
30
99
|
this.loadTheme();
|
|
31
100
|
}
|
|
32
101
|
readTheme() {
|
|
33
|
-
|
|
102
|
+
this.createElement();
|
|
103
|
+
const available = this.queryColor('primary') !==
|
|
104
|
+
this.queryColor('primary-contrast');
|
|
34
105
|
try {
|
|
35
|
-
|
|
106
|
+
if (available) {
|
|
107
|
+
this.push(chartBaseTheme());
|
|
108
|
+
this.setColors();
|
|
109
|
+
this.setFonts();
|
|
110
|
+
this.setSeriesColors();
|
|
111
|
+
}
|
|
36
112
|
}
|
|
37
|
-
|
|
38
|
-
|
|
113
|
+
finally {
|
|
114
|
+
this.destroyElement();
|
|
39
115
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
116
|
+
return available;
|
|
117
|
+
}
|
|
118
|
+
readDefaultTheme() {
|
|
119
|
+
this.push(chartDefaultTheme());
|
|
43
120
|
}
|
|
44
121
|
createElement() {
|
|
45
122
|
const container = this.element = document.createElement('div');
|
|
46
|
-
container.className = 'k-chart';
|
|
47
123
|
container.style.display = 'none';
|
|
124
|
+
container.innerHTML = template();
|
|
48
125
|
document.body.appendChild(container);
|
|
49
126
|
}
|
|
50
127
|
destroyElement() {
|
|
@@ -53,7 +130,113 @@ export class ThemeService extends ConfigurationService {
|
|
|
53
130
|
this.element = undefined;
|
|
54
131
|
}
|
|
55
132
|
}
|
|
56
|
-
|
|
133
|
+
setStyle(key, value) {
|
|
134
|
+
this.set(key, value);
|
|
135
|
+
}
|
|
136
|
+
setColors() {
|
|
137
|
+
this.mapColor('axisDefaults.crosshair.color', 'chart-crosshair-background');
|
|
138
|
+
this.mapColor('axisDefaults.labels.color', 'normal-text-color');
|
|
139
|
+
this.mapColor('axisDefaults.line.color', 'chart-major-lines');
|
|
140
|
+
this.mapColor('axisDefaults.majorGridLines.color', 'chart-major-lines');
|
|
141
|
+
this.mapColor('axisDefaults.minorGridLines.color', 'chart-minor-lines');
|
|
142
|
+
this.mapColor('axisDefaults.notes.icon.background', 'chart-notes-background');
|
|
143
|
+
this.mapColor('axisDefaults.notes.icon.border.color', 'chart-notes-border');
|
|
144
|
+
this.mapColor('axisDefaults.notes.line.color', 'chart-notes-lines');
|
|
145
|
+
this.mapColor('axisDefaults.title.color', 'normal-text-color');
|
|
146
|
+
this.mapColor('chartArea.background', 'background');
|
|
147
|
+
this.mapColor('legend.inactiveItems.labels.color', 'chart-inactive');
|
|
148
|
+
this.mapColor('legend.inactiveItems.markers.color', 'chart-inactive');
|
|
149
|
+
this.mapColor('legend.labels.color', 'normal-text-color');
|
|
150
|
+
this.mapColor('legend.title.color', 'normal-text-color');
|
|
151
|
+
this.mapColor('seriesDefaults.boxPlot.downColor', 'chart-major-lines');
|
|
152
|
+
this.mapColor('seriesDefaults.boxPlot.mean.color', 'base');
|
|
153
|
+
this.mapColor('seriesDefaults.boxPlot.median.color', 'base');
|
|
154
|
+
this.mapColor('seriesDefaults.boxPlot.whiskers.color', 'primary');
|
|
155
|
+
this.mapColor('seriesDefaults.bullet.target.color', 'normal-text-color');
|
|
156
|
+
this.mapColor('seriesDefaults.candlestick.downColor', 'normal-text-color');
|
|
157
|
+
this.mapColor('seriesDefaults.candlestick.line.color', 'normal-text-color');
|
|
158
|
+
this.mapColor('seriesDefaults.errorBars.color', 'chart-error-bars-background');
|
|
159
|
+
this.mapColor('seriesDefaults.horizontalWaterfall.line.color', 'chart-major-lines');
|
|
160
|
+
this.mapColor('seriesDefaults.icon.border.color', 'chart-major-lines');
|
|
161
|
+
this.mapColor('seriesDefaults.labels.background', 'background');
|
|
162
|
+
this.mapColor('seriesDefaults.labels.color', 'normal-text-color');
|
|
163
|
+
this.mapColor('seriesDefaults.notes.icon.background', 'chart-notes-background');
|
|
164
|
+
this.mapColor('seriesDefaults.notes.icon.border.color', 'chart-notes-border');
|
|
165
|
+
this.mapColor('seriesDefaults.notes.line.color', 'chart-notes-lines');
|
|
166
|
+
this.mapColor('seriesDefaults.verticalBoxPlot.downColor', 'chart-major-lines');
|
|
167
|
+
this.mapColor('seriesDefaults.verticalBoxPlot.mean.color', 'base');
|
|
168
|
+
this.mapColor('seriesDefaults.verticalBoxPlot.median.color', 'base');
|
|
169
|
+
this.mapColor('seriesDefaults.verticalBoxPlot.whiskers.color', 'primary');
|
|
170
|
+
this.mapColor('seriesDefaults.verticalBullet.target.color', 'normal-text-color');
|
|
171
|
+
this.mapColor('seriesDefaults.waterfall.line.color', 'chart-major-lines');
|
|
172
|
+
this.mapColor('title.color', 'normal-text-color');
|
|
173
|
+
this.mapColor('subtitle.color', 'normal-text-color');
|
|
174
|
+
// Sankey diagram
|
|
175
|
+
this.mapColor('labels.color', 'normal-text-color');
|
|
176
|
+
this.mapColor('labels.stroke.color', 'background');
|
|
177
|
+
// 'k-var--kendo-color-subtle' class does not contain the --kendo-color-subtle variable style
|
|
178
|
+
const element = this.element?.querySelector('.k-var--kendo-color-subtle');
|
|
179
|
+
element && (element.style.color = 'var(--kendo-color-subtle)');
|
|
180
|
+
this.mapColor('links.color', 'kendo-color-subtle', 'color');
|
|
181
|
+
const opacity = parseFloat(this.queryStyle('chart-area-opacity').opacity);
|
|
182
|
+
if (!isNaN(opacity)) {
|
|
183
|
+
this.setStyle('seriesDefaults.area.opacity', opacity);
|
|
184
|
+
this.setStyle('seriesDefaults.radarArea.opacity', opacity);
|
|
185
|
+
this.setStyle('seriesDefaults.verticalArea.opacity', opacity);
|
|
186
|
+
this.setStyle('seriesDefaults.labels.opacity', opacity);
|
|
187
|
+
}
|
|
188
|
+
this.setInactiveOpacity(['area', 'verticalArea'], 'chart-area-inactive-opacity');
|
|
189
|
+
this.setInactiveOpacity(['line', 'verticalLine'], 'chart-line-inactive-opacity');
|
|
190
|
+
}
|
|
191
|
+
setInactiveOpacity(seriesTypes, selector) {
|
|
192
|
+
const inactiveOpacity = parseFloat(this.queryStyle(selector).opacity);
|
|
193
|
+
if (!isNaN(inactiveOpacity) && inactiveOpacity < 1) {
|
|
194
|
+
seriesTypes.forEach(type => this.setStyle(`seriesDefaults.${type}.highlight.inactiveOpacity`, inactiveOpacity));
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
setFonts() {
|
|
198
|
+
const defaultFont = font(this.queryStyle('chart-font'));
|
|
199
|
+
const titleFont = font(this.queryStyle('chart-title-font'));
|
|
200
|
+
const paneTitleFont = font(this.queryStyle('chart-pane-title-font'));
|
|
201
|
+
const labelFont = font(this.queryStyle('chart-label-font'));
|
|
202
|
+
this.setStyle('axisDefaults.labels.font', labelFont);
|
|
203
|
+
this.setStyle('axisDefaults.notes.label.font', defaultFont);
|
|
204
|
+
this.setStyle('axisDefaults.title.font', defaultFont);
|
|
205
|
+
this.setStyle('legend.labels.font', defaultFont);
|
|
206
|
+
this.setStyle('seriesDefaults.labels.font', labelFont);
|
|
207
|
+
this.setStyle('seriesDefaults.notes.label.font', defaultFont);
|
|
208
|
+
this.setStyle('title.font', titleFont);
|
|
209
|
+
this.setStyle('subtitle.font', paneTitleFont);
|
|
210
|
+
this.setStyle('paneDefaults.title.font', paneTitleFont);
|
|
211
|
+
// Sankey diagram
|
|
212
|
+
this.setStyle('labels.font', defaultFont);
|
|
213
|
+
}
|
|
214
|
+
setSeriesColors() {
|
|
215
|
+
const element = this.element;
|
|
216
|
+
const series = [].slice.call(element.querySelectorAll('.k-var--series div'));
|
|
217
|
+
const unsetColor = computedBackgroundColor(element.querySelector('.k-var--series-unset'));
|
|
218
|
+
const seriesColors = series.reduce((arr, el) => {
|
|
219
|
+
const pos = seriesPos(el.className);
|
|
220
|
+
const color = computedBackgroundColor(el);
|
|
221
|
+
if (color !== unsetColor) {
|
|
222
|
+
arr[pos] = color;
|
|
223
|
+
}
|
|
224
|
+
return arr;
|
|
225
|
+
}, [] // Will populate the series colors in this array
|
|
226
|
+
);
|
|
227
|
+
this.setStyle('seriesColors', seriesColors);
|
|
228
|
+
}
|
|
229
|
+
mapColor(key, varName, styleKey = 'backgroundColor') {
|
|
230
|
+
this.setStyle(key, this.queryStyle(varName)[styleKey]);
|
|
231
|
+
}
|
|
232
|
+
queryColor(varName) {
|
|
233
|
+
return this.queryStyle(varName).backgroundColor;
|
|
234
|
+
}
|
|
235
|
+
queryStyle(varName) {
|
|
236
|
+
const element = this.element.querySelector(`.k-var--${varName}`);
|
|
237
|
+
return window.getComputedStyle(element);
|
|
238
|
+
}
|
|
239
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ThemeService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
57
240
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ThemeService, providedIn: 'root' });
|
|
58
241
|
}
|
|
59
242
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ThemeService, decorators: [{
|
|
@@ -61,4 +244,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
61
244
|
args: [{
|
|
62
245
|
providedIn: 'root'
|
|
63
246
|
}]
|
|
64
|
-
}] });
|
|
247
|
+
}], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
|
|
@@ -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: '18.1.0-develop.
|
|
13
|
+
publishDate: 1738318448,
|
|
14
|
+
version: '18.1.0-develop.4',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
16
16
|
};
|
|
@@ -11,7 +11,7 @@ import { combineLatest } from 'rxjs';
|
|
|
11
11
|
import { auditTime, tap } from 'rxjs/operators';
|
|
12
12
|
import { ConfigurationService, THROTTLE_MS } from './common/configuration.service';
|
|
13
13
|
import { copyChanges } from './common/copy-changes';
|
|
14
|
-
import {
|
|
14
|
+
import { ThemeService } from './common/theme.service';
|
|
15
15
|
import { toSimpleChanges } from './common/to-simple-changes';
|
|
16
16
|
import { packageMetadata } from './package-metadata';
|
|
17
17
|
import { InstanceEventService } from './sankey/events';
|
|
@@ -24,7 +24,7 @@ import { LocalizedMessagesDirective } from './sankey/localization/localized-mess
|
|
|
24
24
|
import { IntlService } from '@progress/kendo-angular-intl';
|
|
25
25
|
import * as i0 from "@angular/core";
|
|
26
26
|
import * as i1 from "./common/configuration.service";
|
|
27
|
-
import * as i2 from "./
|
|
27
|
+
import * as i2 from "./common/theme.service";
|
|
28
28
|
import * as i3 from "@progress/kendo-angular-l10n";
|
|
29
29
|
import * as i4 from "./sankey/events";
|
|
30
30
|
import * as i5 from "@progress/kendo-angular-intl";
|
|
@@ -324,13 +324,19 @@ export class SankeyComponent {
|
|
|
324
324
|
this.optionsChange = combineLatest([this.configurationService.onChange$, this.themeService.onChange$])
|
|
325
325
|
.pipe(tap((result) => {
|
|
326
326
|
this.options = result[0];
|
|
327
|
-
this.theme = result[1];
|
|
327
|
+
this.theme = this.loadTheme(result[1]);
|
|
328
328
|
}), auditTime(THROTTLE_MS))
|
|
329
329
|
.subscribe(() => {
|
|
330
330
|
this.refresh();
|
|
331
331
|
});
|
|
332
332
|
});
|
|
333
333
|
}
|
|
334
|
+
loadTheme(chartTheme) {
|
|
335
|
+
return {
|
|
336
|
+
...chartTheme,
|
|
337
|
+
nodeColors: chartTheme.seriesColors,
|
|
338
|
+
};
|
|
339
|
+
}
|
|
334
340
|
run(callback, inZone = true, detectChanges) {
|
|
335
341
|
if (inZone) {
|
|
336
342
|
if (detectChanges) {
|
|
@@ -369,7 +375,7 @@ export class SankeyComponent {
|
|
|
369
375
|
get isRTL() {
|
|
370
376
|
return Boolean(this.localizationService.rtl);
|
|
371
377
|
}
|
|
372
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyComponent, deps: [{ token: i0.ElementRef }, { token: i1.ConfigurationService }, { token: i2.
|
|
378
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyComponent, deps: [{ token: i0.ElementRef }, { token: i1.ConfigurationService }, { token: i2.ThemeService }, { token: i3.LocalizationService }, { token: i4.InstanceEventService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i5.IntlService }], target: i0.ɵɵFactoryTarget.Component });
|
|
373
379
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SankeyComponent, isStandalone: true, selector: "kendo-sankey", inputs: { data: "data", links: "links", nodes: "nodes", labels: "labels", title: "title", legend: "legend", tooltip: "tooltip", disableAutoLayout: "disableAutoLayout", navigable: "navigable", popupSettings: "popupSettings" }, outputs: { nodeEnter: "nodeEnter", nodeLeave: "nodeLeave", nodeClick: "nodeClick", linkEnter: "linkEnter", linkLeave: "linkLeave", linkClick: "linkClick" }, providers: [
|
|
374
380
|
ConfigurationService,
|
|
375
381
|
LocalizationService,
|
|
@@ -427,7 +433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
427
433
|
standalone: true,
|
|
428
434
|
imports: [LocalizedMessagesDirective, SankeyTooltipPopupComponent, NgIf, WatermarkOverlayComponent]
|
|
429
435
|
}]
|
|
430
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ConfigurationService }, { type: i2.
|
|
436
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ConfigurationService }, { type: i2.ThemeService }, { type: i3.LocalizationService }, { type: i4.InstanceEventService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i5.IntlService }]; }, propDecorators: { data: [{
|
|
431
437
|
type: Input
|
|
432
438
|
}], links: [{
|
|
433
439
|
type: Input
|
|
@@ -8,7 +8,7 @@ import { isDocumentAvailable, shouldShowValidationUI, ResizeSensorComponent, Wat
|
|
|
8
8
|
import * as i3 from '@progress/kendo-angular-intl';
|
|
9
9
|
import * as i1$1 from '@progress/kendo-angular-l10n';
|
|
10
10
|
import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
11
|
-
import { DateCategoryAxis, DateValueAxis, InstanceObserver, chartBaseTheme,
|
|
11
|
+
import { DateCategoryAxis, DateValueAxis, InstanceObserver, chartBaseTheme, Chart, StockChart, Sparkline, Sankey, createSankeyData } from '@progress/kendo-charts';
|
|
12
12
|
import { exportImage, exportSVG } from '@progress/kendo-drawing';
|
|
13
13
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
14
14
|
import { Subject, BehaviorSubject, combineLatest, Subscription } from 'rxjs';
|
|
@@ -1937,19 +1937,88 @@ const chartDefaultTheme = () => Object.assign({}, chartBaseTheme(), {
|
|
|
1937
1937
|
]
|
|
1938
1938
|
});
|
|
1939
1939
|
|
|
1940
|
+
const font = (style) => `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
|
|
1941
|
+
const computedBackgroundColor = (element) => window.getComputedStyle(element).backgroundColor;
|
|
1942
|
+
const letterPos = (letter) => letter.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0);
|
|
1943
|
+
const seriesPos = (name) => {
|
|
1944
|
+
const alpha = name.match(/series-([a-z])$/);
|
|
1945
|
+
if (alpha !== null) {
|
|
1946
|
+
return letterPos(alpha[1]);
|
|
1947
|
+
}
|
|
1948
|
+
const num = name.split('--series-')[1];
|
|
1949
|
+
return parseInt(num, 10) - 1;
|
|
1950
|
+
};
|
|
1951
|
+
const SERIES_COLORS = 30;
|
|
1952
|
+
const seriesTemplate = () => {
|
|
1953
|
+
let template = `
|
|
1954
|
+
<div class="k-var--series-a"></div>
|
|
1955
|
+
<div class="k-var--series-b"></div>
|
|
1956
|
+
<div class="k-var--series-c"></div>
|
|
1957
|
+
<div class="k-var--series-d"></div>
|
|
1958
|
+
<div class="k-var--series-e"></div>
|
|
1959
|
+
<div class="k-var--series-f"></div>
|
|
1960
|
+
`;
|
|
1961
|
+
for (let i = 0; i < SERIES_COLORS; i++) {
|
|
1962
|
+
template += `
|
|
1963
|
+
<div class="k-var--series-${i + 1}"></div>`;
|
|
1964
|
+
}
|
|
1965
|
+
return template;
|
|
1966
|
+
};
|
|
1967
|
+
const template = () => `
|
|
1968
|
+
<div class="k-var--primary"></div>
|
|
1969
|
+
<div class="k-var--primary-contrast"></div>
|
|
1970
|
+
<div class="k-var--base"></div>
|
|
1971
|
+
<div class="k-var--background"></div>
|
|
1972
|
+
|
|
1973
|
+
<div class="k-var--kendo-color-subtle"></div>
|
|
1974
|
+
|
|
1975
|
+
<div class="k-var--normal-background"></div>
|
|
1976
|
+
<div class="k-var--normal-text-color"></div>
|
|
1977
|
+
<div class="k-var--hover-background"></div>
|
|
1978
|
+
<div class="k-var--hover-text-color"></div>
|
|
1979
|
+
<div class="k-var--selected-background"></div>
|
|
1980
|
+
<div class="k-var--selected-text-color"></div>
|
|
1981
|
+
<div class="k-var--chart-error-bars-background"></div>
|
|
1982
|
+
<div class="k-var--chart-notes-background"></div>
|
|
1983
|
+
<div class="k-var--chart-notes-border"></div>
|
|
1984
|
+
<div class="k-var--chart-notes-lines"></div>
|
|
1985
|
+
<div class="k-var--chart-crosshair-background"></div>
|
|
1986
|
+
|
|
1987
|
+
<div class="k-var--chart-inactive"></div>
|
|
1988
|
+
<div class="k-var--chart-major-lines"></div>
|
|
1989
|
+
<div class="k-var--chart-minor-lines"></div>
|
|
1990
|
+
<div class="k-var--chart-area-opacity"></div>
|
|
1991
|
+
<div class="k-var--chart-area-inactive-opacity"></div>
|
|
1992
|
+
<div class="k-var--chart-line-inactive-opacity"></div>
|
|
1993
|
+
|
|
1994
|
+
<div class="k-widget k-chart">
|
|
1995
|
+
<div class="k-var--chart-font"></div>
|
|
1996
|
+
<div class="k-var--chart-title-font"></div>
|
|
1997
|
+
<div class="k-var--chart-pane-title-font"></div>
|
|
1998
|
+
<div class="k-var--chart-label-font"></div>
|
|
1999
|
+
</div>
|
|
2000
|
+
|
|
2001
|
+
<div class="k-var--series-unset"></div>
|
|
2002
|
+
<div class="k-var--series">
|
|
2003
|
+
${seriesTemplate()}
|
|
2004
|
+
</div>
|
|
2005
|
+
`;
|
|
1940
2006
|
/**
|
|
1941
2007
|
* @hidden
|
|
1942
2008
|
*/
|
|
1943
2009
|
class ThemeService extends ConfigurationService {
|
|
1944
2010
|
loaded = false;
|
|
1945
2011
|
element;
|
|
2012
|
+
constructor(ngZone) {
|
|
2013
|
+
super(ngZone);
|
|
2014
|
+
}
|
|
1946
2015
|
loadTheme() {
|
|
1947
2016
|
if (this.loaded || !isDocumentAvailable()) {
|
|
1948
2017
|
return;
|
|
1949
2018
|
}
|
|
1950
|
-
this.
|
|
1951
|
-
|
|
1952
|
-
|
|
2019
|
+
if (!this.readTheme()) {
|
|
2020
|
+
this.readDefaultTheme();
|
|
2021
|
+
}
|
|
1953
2022
|
this.loaded = true;
|
|
1954
2023
|
this.next();
|
|
1955
2024
|
}
|
|
@@ -1959,21 +2028,29 @@ class ThemeService extends ConfigurationService {
|
|
|
1959
2028
|
this.loadTheme();
|
|
1960
2029
|
}
|
|
1961
2030
|
readTheme() {
|
|
1962
|
-
|
|
2031
|
+
this.createElement();
|
|
2032
|
+
const available = this.queryColor('primary') !==
|
|
2033
|
+
this.queryColor('primary-contrast');
|
|
1963
2034
|
try {
|
|
1964
|
-
|
|
2035
|
+
if (available) {
|
|
2036
|
+
this.push(chartBaseTheme());
|
|
2037
|
+
this.setColors();
|
|
2038
|
+
this.setFonts();
|
|
2039
|
+
this.setSeriesColors();
|
|
2040
|
+
}
|
|
1965
2041
|
}
|
|
1966
|
-
|
|
1967
|
-
|
|
2042
|
+
finally {
|
|
2043
|
+
this.destroyElement();
|
|
1968
2044
|
}
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
|
|
2045
|
+
return available;
|
|
2046
|
+
}
|
|
2047
|
+
readDefaultTheme() {
|
|
2048
|
+
this.push(chartDefaultTheme());
|
|
1972
2049
|
}
|
|
1973
2050
|
createElement() {
|
|
1974
2051
|
const container = this.element = document.createElement('div');
|
|
1975
|
-
container.className = 'k-chart';
|
|
1976
2052
|
container.style.display = 'none';
|
|
2053
|
+
container.innerHTML = template();
|
|
1977
2054
|
document.body.appendChild(container);
|
|
1978
2055
|
}
|
|
1979
2056
|
destroyElement() {
|
|
@@ -1982,7 +2059,113 @@ class ThemeService extends ConfigurationService {
|
|
|
1982
2059
|
this.element = undefined;
|
|
1983
2060
|
}
|
|
1984
2061
|
}
|
|
1985
|
-
|
|
2062
|
+
setStyle(key, value) {
|
|
2063
|
+
this.set(key, value);
|
|
2064
|
+
}
|
|
2065
|
+
setColors() {
|
|
2066
|
+
this.mapColor('axisDefaults.crosshair.color', 'chart-crosshair-background');
|
|
2067
|
+
this.mapColor('axisDefaults.labels.color', 'normal-text-color');
|
|
2068
|
+
this.mapColor('axisDefaults.line.color', 'chart-major-lines');
|
|
2069
|
+
this.mapColor('axisDefaults.majorGridLines.color', 'chart-major-lines');
|
|
2070
|
+
this.mapColor('axisDefaults.minorGridLines.color', 'chart-minor-lines');
|
|
2071
|
+
this.mapColor('axisDefaults.notes.icon.background', 'chart-notes-background');
|
|
2072
|
+
this.mapColor('axisDefaults.notes.icon.border.color', 'chart-notes-border');
|
|
2073
|
+
this.mapColor('axisDefaults.notes.line.color', 'chart-notes-lines');
|
|
2074
|
+
this.mapColor('axisDefaults.title.color', 'normal-text-color');
|
|
2075
|
+
this.mapColor('chartArea.background', 'background');
|
|
2076
|
+
this.mapColor('legend.inactiveItems.labels.color', 'chart-inactive');
|
|
2077
|
+
this.mapColor('legend.inactiveItems.markers.color', 'chart-inactive');
|
|
2078
|
+
this.mapColor('legend.labels.color', 'normal-text-color');
|
|
2079
|
+
this.mapColor('legend.title.color', 'normal-text-color');
|
|
2080
|
+
this.mapColor('seriesDefaults.boxPlot.downColor', 'chart-major-lines');
|
|
2081
|
+
this.mapColor('seriesDefaults.boxPlot.mean.color', 'base');
|
|
2082
|
+
this.mapColor('seriesDefaults.boxPlot.median.color', 'base');
|
|
2083
|
+
this.mapColor('seriesDefaults.boxPlot.whiskers.color', 'primary');
|
|
2084
|
+
this.mapColor('seriesDefaults.bullet.target.color', 'normal-text-color');
|
|
2085
|
+
this.mapColor('seriesDefaults.candlestick.downColor', 'normal-text-color');
|
|
2086
|
+
this.mapColor('seriesDefaults.candlestick.line.color', 'normal-text-color');
|
|
2087
|
+
this.mapColor('seriesDefaults.errorBars.color', 'chart-error-bars-background');
|
|
2088
|
+
this.mapColor('seriesDefaults.horizontalWaterfall.line.color', 'chart-major-lines');
|
|
2089
|
+
this.mapColor('seriesDefaults.icon.border.color', 'chart-major-lines');
|
|
2090
|
+
this.mapColor('seriesDefaults.labels.background', 'background');
|
|
2091
|
+
this.mapColor('seriesDefaults.labels.color', 'normal-text-color');
|
|
2092
|
+
this.mapColor('seriesDefaults.notes.icon.background', 'chart-notes-background');
|
|
2093
|
+
this.mapColor('seriesDefaults.notes.icon.border.color', 'chart-notes-border');
|
|
2094
|
+
this.mapColor('seriesDefaults.notes.line.color', 'chart-notes-lines');
|
|
2095
|
+
this.mapColor('seriesDefaults.verticalBoxPlot.downColor', 'chart-major-lines');
|
|
2096
|
+
this.mapColor('seriesDefaults.verticalBoxPlot.mean.color', 'base');
|
|
2097
|
+
this.mapColor('seriesDefaults.verticalBoxPlot.median.color', 'base');
|
|
2098
|
+
this.mapColor('seriesDefaults.verticalBoxPlot.whiskers.color', 'primary');
|
|
2099
|
+
this.mapColor('seriesDefaults.verticalBullet.target.color', 'normal-text-color');
|
|
2100
|
+
this.mapColor('seriesDefaults.waterfall.line.color', 'chart-major-lines');
|
|
2101
|
+
this.mapColor('title.color', 'normal-text-color');
|
|
2102
|
+
this.mapColor('subtitle.color', 'normal-text-color');
|
|
2103
|
+
// Sankey diagram
|
|
2104
|
+
this.mapColor('labels.color', 'normal-text-color');
|
|
2105
|
+
this.mapColor('labels.stroke.color', 'background');
|
|
2106
|
+
// 'k-var--kendo-color-subtle' class does not contain the --kendo-color-subtle variable style
|
|
2107
|
+
const element = this.element?.querySelector('.k-var--kendo-color-subtle');
|
|
2108
|
+
element && (element.style.color = 'var(--kendo-color-subtle)');
|
|
2109
|
+
this.mapColor('links.color', 'kendo-color-subtle', 'color');
|
|
2110
|
+
const opacity = parseFloat(this.queryStyle('chart-area-opacity').opacity);
|
|
2111
|
+
if (!isNaN(opacity)) {
|
|
2112
|
+
this.setStyle('seriesDefaults.area.opacity', opacity);
|
|
2113
|
+
this.setStyle('seriesDefaults.radarArea.opacity', opacity);
|
|
2114
|
+
this.setStyle('seriesDefaults.verticalArea.opacity', opacity);
|
|
2115
|
+
this.setStyle('seriesDefaults.labels.opacity', opacity);
|
|
2116
|
+
}
|
|
2117
|
+
this.setInactiveOpacity(['area', 'verticalArea'], 'chart-area-inactive-opacity');
|
|
2118
|
+
this.setInactiveOpacity(['line', 'verticalLine'], 'chart-line-inactive-opacity');
|
|
2119
|
+
}
|
|
2120
|
+
setInactiveOpacity(seriesTypes, selector) {
|
|
2121
|
+
const inactiveOpacity = parseFloat(this.queryStyle(selector).opacity);
|
|
2122
|
+
if (!isNaN(inactiveOpacity) && inactiveOpacity < 1) {
|
|
2123
|
+
seriesTypes.forEach(type => this.setStyle(`seriesDefaults.${type}.highlight.inactiveOpacity`, inactiveOpacity));
|
|
2124
|
+
}
|
|
2125
|
+
}
|
|
2126
|
+
setFonts() {
|
|
2127
|
+
const defaultFont = font(this.queryStyle('chart-font'));
|
|
2128
|
+
const titleFont = font(this.queryStyle('chart-title-font'));
|
|
2129
|
+
const paneTitleFont = font(this.queryStyle('chart-pane-title-font'));
|
|
2130
|
+
const labelFont = font(this.queryStyle('chart-label-font'));
|
|
2131
|
+
this.setStyle('axisDefaults.labels.font', labelFont);
|
|
2132
|
+
this.setStyle('axisDefaults.notes.label.font', defaultFont);
|
|
2133
|
+
this.setStyle('axisDefaults.title.font', defaultFont);
|
|
2134
|
+
this.setStyle('legend.labels.font', defaultFont);
|
|
2135
|
+
this.setStyle('seriesDefaults.labels.font', labelFont);
|
|
2136
|
+
this.setStyle('seriesDefaults.notes.label.font', defaultFont);
|
|
2137
|
+
this.setStyle('title.font', titleFont);
|
|
2138
|
+
this.setStyle('subtitle.font', paneTitleFont);
|
|
2139
|
+
this.setStyle('paneDefaults.title.font', paneTitleFont);
|
|
2140
|
+
// Sankey diagram
|
|
2141
|
+
this.setStyle('labels.font', defaultFont);
|
|
2142
|
+
}
|
|
2143
|
+
setSeriesColors() {
|
|
2144
|
+
const element = this.element;
|
|
2145
|
+
const series = [].slice.call(element.querySelectorAll('.k-var--series div'));
|
|
2146
|
+
const unsetColor = computedBackgroundColor(element.querySelector('.k-var--series-unset'));
|
|
2147
|
+
const seriesColors = series.reduce((arr, el) => {
|
|
2148
|
+
const pos = seriesPos(el.className);
|
|
2149
|
+
const color = computedBackgroundColor(el);
|
|
2150
|
+
if (color !== unsetColor) {
|
|
2151
|
+
arr[pos] = color;
|
|
2152
|
+
}
|
|
2153
|
+
return arr;
|
|
2154
|
+
}, [] // Will populate the series colors in this array
|
|
2155
|
+
);
|
|
2156
|
+
this.setStyle('seriesColors', seriesColors);
|
|
2157
|
+
}
|
|
2158
|
+
mapColor(key, varName, styleKey = 'backgroundColor') {
|
|
2159
|
+
this.setStyle(key, this.queryStyle(varName)[styleKey]);
|
|
2160
|
+
}
|
|
2161
|
+
queryColor(varName) {
|
|
2162
|
+
return this.queryStyle(varName).backgroundColor;
|
|
2163
|
+
}
|
|
2164
|
+
queryStyle(varName) {
|
|
2165
|
+
const element = this.element.querySelector(`.k-var--${varName}`);
|
|
2166
|
+
return window.getComputedStyle(element);
|
|
2167
|
+
}
|
|
2168
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ThemeService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1986
2169
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ThemeService, providedIn: 'root' });
|
|
1987
2170
|
}
|
|
1988
2171
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ThemeService, decorators: [{
|
|
@@ -1990,7 +2173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1990
2173
|
args: [{
|
|
1991
2174
|
providedIn: 'root'
|
|
1992
2175
|
}]
|
|
1993
|
-
}] });
|
|
2176
|
+
}], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
|
|
1994
2177
|
|
|
1995
2178
|
/**
|
|
1996
2179
|
* @hidden
|
|
@@ -2726,8 +2909,8 @@ const packageMetadata = {
|
|
|
2726
2909
|
productName: 'Kendo UI for Angular',
|
|
2727
2910
|
productCode: 'KENDOUIANGULAR',
|
|
2728
2911
|
productCodes: ['KENDOUIANGULAR'],
|
|
2729
|
-
publishDate:
|
|
2730
|
-
version: '18.1.0-develop.
|
|
2912
|
+
publishDate: 1738318448,
|
|
2913
|
+
version: '18.1.0-develop.4',
|
|
2731
2914
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
2732
2915
|
};
|
|
2733
2916
|
|
|
@@ -10471,24 +10654,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
10471
10654
|
args: ['breadcrumb', { static: true }]
|
|
10472
10655
|
}] } });
|
|
10473
10656
|
|
|
10474
|
-
/**
|
|
10475
|
-
* @hidden
|
|
10476
|
-
*/
|
|
10477
|
-
class SankeyThemeService extends ThemeService {
|
|
10478
|
-
readTheme() {
|
|
10479
|
-
const theme = sankeyTheme(this.element);
|
|
10480
|
-
this.push(theme);
|
|
10481
|
-
}
|
|
10482
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyThemeService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
10483
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyThemeService, providedIn: 'root' });
|
|
10484
|
-
}
|
|
10485
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyThemeService, decorators: [{
|
|
10486
|
-
type: Injectable,
|
|
10487
|
-
args: [{
|
|
10488
|
-
providedIn: 'root'
|
|
10489
|
-
}]
|
|
10490
|
-
}] });
|
|
10491
|
-
|
|
10492
10657
|
/**
|
|
10493
10658
|
* @hidden
|
|
10494
10659
|
*/
|
|
@@ -11382,13 +11547,19 @@ class SankeyComponent {
|
|
|
11382
11547
|
this.optionsChange = combineLatest([this.configurationService.onChange$, this.themeService.onChange$])
|
|
11383
11548
|
.pipe(tap((result) => {
|
|
11384
11549
|
this.options = result[0];
|
|
11385
|
-
this.theme = result[1];
|
|
11550
|
+
this.theme = this.loadTheme(result[1]);
|
|
11386
11551
|
}), auditTime(THROTTLE_MS))
|
|
11387
11552
|
.subscribe(() => {
|
|
11388
11553
|
this.refresh();
|
|
11389
11554
|
});
|
|
11390
11555
|
});
|
|
11391
11556
|
}
|
|
11557
|
+
loadTheme(chartTheme) {
|
|
11558
|
+
return {
|
|
11559
|
+
...chartTheme,
|
|
11560
|
+
nodeColors: chartTheme.seriesColors,
|
|
11561
|
+
};
|
|
11562
|
+
}
|
|
11392
11563
|
run(callback, inZone = true, detectChanges) {
|
|
11393
11564
|
if (inZone) {
|
|
11394
11565
|
if (detectChanges) {
|
|
@@ -11427,7 +11598,7 @@ class SankeyComponent {
|
|
|
11427
11598
|
get isRTL() {
|
|
11428
11599
|
return Boolean(this.localizationService.rtl);
|
|
11429
11600
|
}
|
|
11430
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyComponent, deps: [{ token: i0.ElementRef }, { token: ConfigurationService }, { token:
|
|
11601
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyComponent, deps: [{ token: i0.ElementRef }, { token: ConfigurationService }, { token: ThemeService }, { token: i1$1.LocalizationService }, { token: InstanceEventService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i3.IntlService }], target: i0.ɵɵFactoryTarget.Component });
|
|
11431
11602
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SankeyComponent, isStandalone: true, selector: "kendo-sankey", inputs: { data: "data", links: "links", nodes: "nodes", labels: "labels", title: "title", legend: "legend", tooltip: "tooltip", disableAutoLayout: "disableAutoLayout", navigable: "navigable", popupSettings: "popupSettings" }, outputs: { nodeEnter: "nodeEnter", nodeLeave: "nodeLeave", nodeClick: "nodeClick", linkEnter: "linkEnter", linkLeave: "linkLeave", linkClick: "linkClick" }, providers: [
|
|
11432
11603
|
ConfigurationService,
|
|
11433
11604
|
LocalizationService,
|
|
@@ -11485,7 +11656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
11485
11656
|
standalone: true,
|
|
11486
11657
|
imports: [LocalizedMessagesDirective, SankeyTooltipPopupComponent, NgIf, WatermarkOverlayComponent]
|
|
11487
11658
|
}]
|
|
11488
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ConfigurationService }, { type:
|
|
11659
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ConfigurationService }, { type: ThemeService }, { type: i1$1.LocalizationService }, { type: InstanceEventService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i3.IntlService }]; }, propDecorators: { data: [{
|
|
11489
11660
|
type: Input
|
|
11490
11661
|
}], links: [{
|
|
11491
11662
|
type: Input
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-charts",
|
|
3
|
-
"version": "18.1.0-develop.
|
|
3
|
+
"version": "18.1.0-develop.4",
|
|
4
4
|
"description": "Kendo UI Charts for Angular - A comprehensive package for creating beautiful and interactive data visualization. Every chart type, stock charts, and sparklines are included.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"package": {
|
|
43
43
|
"productName": "Kendo UI for Angular",
|
|
44
44
|
"productCode": "KENDOUIANGULAR",
|
|
45
|
-
"publishDate":
|
|
45
|
+
"publishDate": 1738318448,
|
|
46
46
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
|
|
47
47
|
}
|
|
48
48
|
},
|
|
@@ -52,19 +52,19 @@
|
|
|
52
52
|
"@angular/core": "16 - 19",
|
|
53
53
|
"@angular/platform-browser": "16 - 19",
|
|
54
54
|
"@progress/kendo-drawing": "^1.21.0",
|
|
55
|
-
"@progress/kendo-licensing": "^1.
|
|
56
|
-
"@progress/kendo-angular-common": "18.1.0-develop.
|
|
57
|
-
"@progress/kendo-angular-intl": "18.1.0-develop.
|
|
58
|
-
"@progress/kendo-angular-icons": "18.1.0-develop.
|
|
59
|
-
"@progress/kendo-angular-l10n": "18.1.0-develop.
|
|
60
|
-
"@progress/kendo-angular-popup": "18.1.0-develop.
|
|
61
|
-
"@progress/kendo-angular-navigation": "18.1.0-develop.
|
|
55
|
+
"@progress/kendo-licensing": "^1.0.2",
|
|
56
|
+
"@progress/kendo-angular-common": "18.1.0-develop.4",
|
|
57
|
+
"@progress/kendo-angular-intl": "18.1.0-develop.4",
|
|
58
|
+
"@progress/kendo-angular-icons": "18.1.0-develop.4",
|
|
59
|
+
"@progress/kendo-angular-l10n": "18.1.0-develop.4",
|
|
60
|
+
"@progress/kendo-angular-popup": "18.1.0-develop.4",
|
|
61
|
+
"@progress/kendo-angular-navigation": "18.1.0-develop.4",
|
|
62
62
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
63
63
|
},
|
|
64
64
|
"dependencies": {
|
|
65
65
|
"tslib": "^2.3.1",
|
|
66
|
-
"@progress/kendo-angular-schematics": "18.1.0-develop.
|
|
67
|
-
"@progress/kendo-charts": "2.7.
|
|
66
|
+
"@progress/kendo-angular-schematics": "18.1.0-develop.4",
|
|
67
|
+
"@progress/kendo-charts": "2.7.0",
|
|
68
68
|
"@progress/kendo-svg-icons": "^4.0.0"
|
|
69
69
|
},
|
|
70
70
|
"schematics": "./schematics/collection.json",
|
package/sankey.component.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
|
7
7
|
import { Group, ImageExportOptions, SVGExportOptions } from '@progress/kendo-drawing';
|
|
8
8
|
import { Subscription } from 'rxjs';
|
|
9
9
|
import { ConfigurationService } from './common/configuration.service';
|
|
10
|
-
import {
|
|
10
|
+
import { ThemeService } from './common/theme.service';
|
|
11
11
|
import { InstanceEventService, SankeyLinkEvent, SankeyNodeEvent } from './sankey/events';
|
|
12
12
|
import { Sankey, SankeyEvent, SankeyTooltipEvent } from '@progress/kendo-charts';
|
|
13
13
|
import { SankeyExportVisualOptions, SankeyLabelDefaults, SankeyLinkDefaults, SankeyNodeDefaults, SankeyTooltip } from './sankey/api-types';
|
|
@@ -50,7 +50,7 @@ import * as i0 from "@angular/core";
|
|
|
50
50
|
export declare class SankeyComponent implements AfterViewInit, OnChanges, OnDestroy {
|
|
51
51
|
protected element: ElementRef;
|
|
52
52
|
configurationService: ConfigurationService;
|
|
53
|
-
themeService:
|
|
53
|
+
themeService: ThemeService;
|
|
54
54
|
protected localizationService: LocalizationService;
|
|
55
55
|
protected instanceEventService: InstanceEventService;
|
|
56
56
|
protected ngZone: NgZone;
|
|
@@ -141,7 +141,7 @@ export declare class SankeyComponent implements AfterViewInit, OnChanges, OnDest
|
|
|
141
141
|
protected destroyed: boolean;
|
|
142
142
|
protected subscriptions: Subscription;
|
|
143
143
|
protected rtl: boolean;
|
|
144
|
-
constructor(element: ElementRef, configurationService: ConfigurationService, themeService:
|
|
144
|
+
constructor(element: ElementRef, configurationService: ConfigurationService, themeService: ThemeService, localizationService: LocalizationService, instanceEventService: InstanceEventService, ngZone: NgZone, changeDetector: ChangeDetectorRef, renderer: Renderer2, intlService: IntlService);
|
|
145
145
|
ngAfterViewInit(): void;
|
|
146
146
|
ngOnChanges(changes: {
|
|
147
147
|
[propertyName: string]: SimpleChange;
|
|
@@ -203,6 +203,7 @@ export declare class SankeyComponent implements AfterViewInit, OnChanges, OnDest
|
|
|
203
203
|
protected get instanceOptions(): any;
|
|
204
204
|
protected activeEmitter(name: string): any;
|
|
205
205
|
protected refreshWait(): void;
|
|
206
|
+
protected loadTheme(chartTheme: any): any;
|
|
206
207
|
protected run(callback: any, inZone?: boolean, detectChanges?: boolean): void;
|
|
207
208
|
protected detectChanges(): void;
|
|
208
209
|
protected intlChange(): void;
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Injectable } from '@angular/core';
|
|
6
|
-
import { sankeyTheme } from '@progress/kendo-charts';
|
|
7
|
-
import { ThemeService } from '../common/theme.service';
|
|
8
|
-
import * as i0 from "@angular/core";
|
|
9
|
-
/**
|
|
10
|
-
* @hidden
|
|
11
|
-
*/
|
|
12
|
-
export class SankeyThemeService extends ThemeService {
|
|
13
|
-
readTheme() {
|
|
14
|
-
const theme = sankeyTheme(this.element);
|
|
15
|
-
this.push(theme);
|
|
16
|
-
}
|
|
17
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyThemeService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
18
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyThemeService, providedIn: 'root' });
|
|
19
|
-
}
|
|
20
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SankeyThemeService, decorators: [{
|
|
21
|
-
type: Injectable,
|
|
22
|
-
args: [{
|
|
23
|
-
providedIn: 'root'
|
|
24
|
-
}]
|
|
25
|
-
}] });
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { ThemeService } from '../common/theme.service';
|
|
6
|
-
import * as i0 from "@angular/core";
|
|
7
|
-
/**
|
|
8
|
-
* @hidden
|
|
9
|
-
*/
|
|
10
|
-
export declare class SankeyThemeService extends ThemeService {
|
|
11
|
-
protected readTheme(): void;
|
|
12
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<SankeyThemeService, never>;
|
|
13
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<SankeyThemeService>;
|
|
14
|
-
}
|